refactor(tables): fold json's draft handling into an editor variant

`json` differed from `text` in three modules by three separate
`column.type === 'json'` branches — a monospace multi-line field, a
pretty-printed expanded view, and a draft parsed on commit so a syntax error
surfaces in the editor rather than being stored as text. Those three always
travel together, so they are one editor variant, not three flags.

`cleanCellValue`'s json/boolean/date branches and the expanded popover's date
branches now key on the declared editor too, and the retype's
convert-away-from-select check reads `storesOpaqueIds`.

From the cleanup passes: "Decimal places" was labelled required when blank is
its meaningful value; Badge's size-derived dot/icon maps were `Record<string,…>`
so a new size half-added silently; the colour trigger had no hover affordance;
and three comments were stale, duplicated, or claimed a test guarantee that did
not exist — that last one is now true, with an assertion that co-owners of a
shared metadata key agree on which writer handles it.

The effect, state, memo, React Query and url-state passes found nothing to
change. The callback pass found two pre-existing `useCallback`s in
`table-filter.tsx` outside this change's lines; left alone rather than widening
the diff. The number-spinner `inputClassName` was also left as-is —
`.claude/rules/sim-styling.md` names it as sanctioned usage.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx

@@ -133,9 +133,10 @@ function ColumnConfigBody({
   )
   // The RAW string, not a number. A numeric state round-tripped through
   // `Number()` on every keystroke cannot be cleared (`'' → 0`) and clamps
-  // mid-typing (`1`, then `2` → `10`, never `12`). Parsing happens on commit,
-  // matching `usage-limit-field`. Empty means "no precision declared", which is
-  // what keeps a column rendering its values as stored.
+  // mid-typing (`1`, then `2` → `10`, never `12`). The parse is derived below
+  // and never written back, so the field keeps whatever was typed — same shape
+  // as `usage-limit-field`. Empty means "no precision declared", which is what
+  // keeps a column rendering its values as stored.
   const [precisionInput, setPrecisionInput] = useState<string>(() =>
     config.mode === 'edit' && existingColumn?.precision !== undefined
       ? String(existingColumn.precision)
@@ -158,8 +159,6 @@ function ColumnConfigBody({
   // type that loses it cannot leave a stale control behind.
   const wantsCurrency = typeOwnsMetadataKey(typeInput, 'currencyCode')
   const wantsPrecision = typeOwnsMetadataKey(typeInput, 'precision')
-  // `undefined` (blank field) is meaningful: it leaves the column rendering
-  // values exactly as stored rather than forcing a decimal count.
   const parsedPrecision =
     precisionInput.trim() === '' ? undefined : clampPrecision(Number(precisionInput))
   const wantsIncludeTime = typeOwnsMetadataKey(typeInput, 'includeTime')
@@ -351,7 +350,9 @@ function ColumnConfigBody({
           <>
             <FieldDivider />
             <div className='flex flex-col gap-[9.5px]'>
-              <RequiredLabel htmlFor='column-sidebar-precision'>Decimal places</RequiredLabel>
+              <Label htmlFor='column-sidebar-precision' className='pl-0.5'>
+                Decimal places
+              </Label>
               <ChipInput
                 id='column-sidebar-precision'
                 type='number'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx

@@ -240,7 +240,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
   // The one type wanting a mono multi-line field; `editor: 'text'` covers both
   // this and a plain input, so it stays explicit rather than inventing a field
   // only one type would ever set.
-  if (column.type === 'json') {
+  if (definition.editor === 'json') {
     return (
       <ChipModalField
         type='textarea'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-color-picker.tsx

@@ -42,7 +42,7 @@ export function SelectColorPicker({ color, onChange, optionName }: SelectColorPi
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        className='flex size-7 shrink-0 items-center justify-center'
+        className='flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors hover-hover:bg-[var(--surface-5)]'
         aria-label={`Color for ${optionName || 'option'}: ${labelFor(current)}`}
       >
         <Badge variant={current} size='swatch' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/expanded-cell-popover.tsx

@@ -75,10 +75,10 @@ export function ExpandedCellPopover({
     // stored value: a `duration` read as `5400` instead of `1:30:00`, a
     // `percent` as `25` instead of `25.0%`.
     //
-    // `json` is the deliberate exception: its `formatForDisplay` is the
-    // one-line form the grid cell needs, but the point of expanding a JSON cell
-    // is to read it indented.
-    if (target.column.type === 'json') return JSON.stringify(value, null, 2)
+    // The `json` editor is the deliberate exception: its `formatForDisplay` is
+    // the one-line form the grid cell needs, but the point of EXPANDING such a
+    // cell is to read it indented.
+    if (columnTypeOf(target.column).editor === 'json') return JSON.stringify(value, null, 2)
     return columnTypeOf(target.column).formatForDisplay(value, target.column)
   }, [target])
 
@@ -159,7 +159,7 @@ export function ExpandedCellPopover({
         <ExpandedCellEditor
           key={`${expandedCell.rowId}:${expandedCell.columnKey ?? expandedCell.columnName}`}
           initialValue={
-            target.column.type === 'date'
+            columnTypeOf(target.column).editor === 'date'
               ? storageToDisplay(formatValueForInput(target.value, target.column), {
                   seconds: true,
                 })
@@ -226,10 +226,13 @@ function ExpandedCellEditor({
       onClose()
       return
     }
-    // Only date columns go through `displayToStorage` — it now parses many
-    // date shapes, so a number draft like "2024" must not reach it.
+    // Only date-editor columns go through `displayToStorage` — it parses many
+    // date shapes, so a number draft like "2024" must not reach it. Keyed on
+    // the editor the type declares, which is also what chose the format above.
     const raw =
-      column.type === 'date' ? (displayToStorage(draftValue, timeZone) ?? draftValue) : draftValue
+      columnTypeOf(column).editor === 'date'
+        ? (displayToStorage(draftValue, timeZone) ?? draftValue)
+        : draftValue
     let cleaned: unknown
     try {
       cleaned = cleanCellValue(raw, column, timeZone)

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/utils.ts

@@ -26,18 +26,20 @@ export function cleanCellValue(
   column: ColumnDefinition,
   timeZone?: string
 ): unknown {
-  // These three read the browser's own context (the viewer's timezone, a JSON
-  // draft that must throw so the editor can show a parse error, a checkbox's
-  // truthiness) so they cannot come from the shared coercion.
-  if (column.type === 'json') {
+  // These three read the browser's own context (the viewer's timezone, a
+  // structured draft that must THROW so the editor can show a parse error, a
+  // checkbox's truthiness) so they cannot come from the shared coercion. Keyed
+  // on the editor each type declares, not on its id.
+  const editor = columnTypeOf(column).editor
+  if (editor === 'json') {
     if (typeof value === 'string') {
       if (value === '') return null
       return JSON.parse(value)
     }
     return value
   }
-  if (column.type === 'boolean') return Boolean(value)
-  if (column.type === 'date') {
+  if (editor === 'toggle') return Boolean(value)
+  if (editor === 'date') {
     if (value === '' || value === null || value === undefined) return null
     return displayToStorage(String(value), timeZone)
   }

apps/sim/lib/table/__tests__/column-type-registry.test.ts

@@ -18,6 +18,8 @@ import {
   columnTypeById,
   isColumnType,
   isValueCompatible,
+  ownersOfMetadataKey,
+  TYPE_SPECIFIC_COLUMN_KEYS,
 } from '@/lib/table/column-types'
 import type { ColumnDefinition } from '@/lib/table/types'
 import { validateColumnDefinition } from '@/lib/table/validation'
@@ -85,6 +87,32 @@ describe('registry shape', () => {
   })
 })
 
+describe('metadata key ownership', () => {
+  it('has co-owners of a shared key agree on which writer handles it', () => {
+    // `metadataKeysIn` reads the answer off ANY one owner, so co-owners that
+    // disagreed would route the same key to different writers depending only
+    // on registration order. `precision` is shared by `number` and `percent`.
+    for (const key of TYPE_SPECIFIC_COLUMN_KEYS) {
+      const owners = ownersOfMetadataKey(key)
+      if (owners.length < 2) continue
+      const handled = owners.map((o) =>
+        [...(o.genericMetadataUpdate ?? o.ownedMetadata)].sort().join(',')
+      )
+      expect(new Set(handled).size, `owners of "${key}" disagree`).toBe(1)
+    }
+  })
+
+  it('lists an owner for every declared key, and only real types', () => {
+    for (const key of TYPE_SPECIFIC_COLUMN_KEYS) {
+      const owners = ownersOfMetadataKey(key)
+      expect(owners.length, `"${key}" has no owner`).toBeGreaterThan(0)
+      for (const owner of owners) {
+        expect(owner.ownedMetadata).toContain(key)
+      }
+    }
+  })
+})
+
 describe('conversion write-back', () => {
   // A retype is allowed exactly when the target's `coerce` accepts the value,
   // and `coerce` often TRANSFORMS it. The conversion must therefore write the

apps/sim/lib/table/column-types/json.ts

@@ -13,7 +13,7 @@ export const jsonColumnType: ColumnTypeDefinition = {
   sampleValue: 'value',
   ownedMetadata: ownedKeysOf('json'),
   workflowInputType: 'object',
-  editor: 'text',
+  editor: 'json',
   expandable: true,
 
   coerce(value) {

apps/sim/lib/table/column-types/types.ts

@@ -57,6 +57,16 @@ export type ColumnCellEditor =
   | 'select'
   /** Not editable inline — the grid toggles it in place instead. */
   | 'toggle'
+  /**
+   * A structured document: monospace multi-line input, pretty-printed when
+   * expanded, and a draft that is PARSED on commit so a syntax error surfaces
+   * as an editor message instead of being stored as text.
+   *
+   * Its own variant rather than three separate flags, because those three
+   * behaviours always travel together and were otherwise three separate
+   * `column.type === 'json'` branches in three modules.
+   */
+  | 'json'
 
 /**
  * Optional `ColumnDefinition` keys that belong to a specific column type rather

apps/sim/lib/table/columns/service.ts

@@ -748,7 +748,7 @@ export async function updateColumnType(
     // Leaving `select` behind: stored cells hold option ids, which mean nothing
     // once the column is text/number/etc. Check compatibility against the option
     // NAME — that's what the cell will actually become (migrated below).
-    const convertingAwayFromSelect = column.type === 'select' && !isSelectType
+    const convertingAwayFromSelect = columnTypeOf(column).storesOpaqueIds && !isSelectType
     // The constraint the column ends up with, which may be arriving in this
     // same request — this write applies it, so the scan below has to judge
     // against the target value rather than the current one.

apps/sim/lib/table/query-builder/converters.ts

@@ -381,8 +381,6 @@ export function filterRulesToPredicate(
     // A select value is an opaque option id — never scalar-coerce it (an id
     // that happens to look numeric would silently become a number and match
     // nothing). Same rule as filterRulesToFilter.
-    // Opaque-id values must NOT be scalar-coerced: an option id of `"1"` would
-    // become the number 1 and then match nothing under JSONB containment.
     const ruleColumn = columns.find((c) => columnMatchesRef(c, rule.column))
     const isSelect = ruleColumn ? columnTypeOf(ruleColumn).storesOpaqueIds : false
     current.push(ruleToPredicate(rule, isSelect))