@kolkrabbi/kol-component 0.30.0 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "0.11.1"
+    "@kolkrabbi/kol-icons": "0.12.0"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/molecules/FieldRow.jsx

@@ -128,11 +128,32 @@ export default function FieldRow({
   placeholder,
   disabled = false,
 }) {
-  const empty = onPick ? (
-    <Button variant="nav" size="sm" iconOnly="plus" iconSize={12} onClick={onPick} aria-label={label} disabled={disabled} />
-  ) : (
-    <span className="kol-helper-10 text-meta">—</span>
-  )
+  const dash = <span className="kol-helper-10 text-meta">—</span>
+  /* Empty MEDIA is a framed + slot, empty FILE is a Choose-file control —
+   * the reference panel's grammar (user frames 2026-08-09), not a bare
+   * icon button. */
+  const mediaEmpty = onPick ? (
+    <button
+      type="button"
+      aria-label={label}
+      disabled={disabled}
+      onClick={onPick}
+      className="flex h-14 w-20 cursor-pointer items-center justify-center rounded border border-fg-16 bg-fg-02 text-body transition-colors duration-150 hover:text-emphasis"
+    >
+      <Icon name="plus" size={14} />
+    </button>
+  ) : dash
+  const fileEmpty = onPick ? (
+    <button
+      type="button"
+      aria-label={label}
+      disabled={disabled}
+      onClick={onPick}
+      className="kol-control kol-control--filled kol-control-sm kol-mono-12 w-full cursor-pointer text-left text-meta"
+    >
+      Choose file…
+    </button>
+  ) : dash
 
   let control = null
   if (type === 'text') {
@@ -168,7 +189,7 @@ export default function FieldRow({
           />
         )}
       </span>
-    ) : empty
+    ) : mediaEmpty
   } else if (type === 'file') {
     control = value ? (
       /* kol-tag--data: a filename renders VERBATIM — the chip uppercase is
@@ -176,7 +197,7 @@ export default function FieldRow({
       <Tag variant="secondary" size="sm" hash={false} className="kol-tag--data" onRemove={onChange ? () => onChange(null) : undefined}>
         {value.name ?? value}
       </Tag>
-    ) : empty
+    ) : fileEmpty
   }
 
   return (

package/src/organisms/RecordManager.jsx

@@ -147,17 +147,19 @@ export default function RecordManager({
         return {
           ...col,
           render: (row) => (
-            <span className="inline-flex items-center gap-2 min-w-0 max-w-full">
+            /* the open affordance is the reference's BOXED toggle-overlay
+             * button, pinned at the cell's end — not an inline icon riding
+             * the text (user frames 2026-08-09). Hover-revealed per row. */
+            <span className="flex items-center justify-between gap-2 min-w-0 max-w-full">
               <span className="truncate text-emphasis">{col.render ? col.render(row) : row[col.accessor]}</span>
-              <Button
-                variant="nav"
-                size="sm"
-                iconOnly="maximize"
-                iconSize={12}
-                aria-label={typeof col.header === 'string' ? col.header : 'Open'}
-                className="shrink-0 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+              <button
+                type="button"
+                aria-label="Toggle overlay"
+                className="shrink-0 inline-flex cursor-pointer rounded-sm border border-fg-16 bg-transparent p-1 text-body opacity-0 transition-opacity duration-150 group-hover:opacity-100 focus-visible:opacity-100 hover:text-emphasis"
                 onClick={() => openRecord(row)}
-              />
+              >
+                <Icon name="toggle-overlay" size={14} />
+              </button>
             </span>
           ),
         }
@@ -202,55 +204,52 @@ export default function RecordManager({
       return col
     })
 
-    const prefix = []
-    if (onReorder) {
-      prefix.push({
-        accessor: '__handle',
-        header: '',
-        className: 'kol-table-cell-text w-8',
-        render: (row) => {
-          const i = rows.indexOf(row)
-          return (
-            /* REST-VISIBLE (2026-08-09 — "Im looking for this handle"): the
-             * reference draws the grip dim at rest; hover-only hid the whole
-             * reorder affordance. */
-            <button
-              type="button"
-              aria-label={reorderLabel(i + 1)}
-              className="cursor-grab touch-none bg-transparent border-0 p-0 text-meta hover:text-emphasis"
-              onPointerDown={(e) => startDrag(e, i)}
-            >
-              <Icon name="drag-handle" size={14} />
-            </button>
-          )
-        },
-      })
-    }
-    prefix.push({
-      accessor: '__select',
+    /* ONE LEADING FIELD (reference row anatomy, user frames 2026-08-09:
+     * "reorder and the toggle is the same field — look at the sizes"): the
+     * grip and the row checkbox share a single cell at matched sizes. The
+     * grip is rest-visible, dim; the header keeps only the select-all box,
+     * with the grip column held as space so the checkboxes align. */
+    const prefix = [{
+      accessor: '__lead',
       header: (
-        <ToggleCheckbox
-          checked={rows.length > 0 && selected.size === rows.length}
-          onChange={() =>
-            updateSelection(selected.size === rows.length ? new Set() : new Set(rows.map(rowId)))
-          }
-        />
+        <span className="inline-flex items-center gap-2">
+          {onReorder && <span className="w-4" aria-hidden="true" />}
+          <ToggleCheckbox
+            checked={rows.length > 0 && selected.size === rows.length}
+            onChange={() =>
+              updateSelection(selected.size === rows.length ? new Set() : new Set(rows.map(rowId)))
+            }
+          />
+        </span>
       ),
-      className: 'kol-table-cell-text w-8',
+      className: 'kol-table-cell-text w-14',
       render: (row) => {
-        const id = rowId(row, rows.indexOf(row))
+        const i = rows.indexOf(row)
+        const id = rowId(row, i)
         return (
-          <ToggleCheckbox
-            checked={selected.has(id)}
-            onChange={() => {
-              const next = new Set(selected)
-              next.has(id) ? next.delete(id) : next.add(id)
-              updateSelection(next)
-            }}
-          />
+          <span className="inline-flex items-center gap-2">
+            {onReorder && (
+              <button
+                type="button"
+                aria-label={reorderLabel(i + 1)}
+                className="inline-flex w-4 cursor-grab touch-none justify-center border-0 bg-transparent p-0 text-meta hover:text-emphasis"
+                onPointerDown={(e) => startDrag(e, i)}
+              >
+                <Icon name="drag-handle" size={16} />
+              </button>
+            )}
+            <ToggleCheckbox
+              checked={selected.has(id)}
+              onChange={() => {
+                const next = new Set(selected)
+                next.has(id) ? next.delete(id) : next.add(id)
+                updateSelection(next)
+              }}
+            />
+          </span>
         )
       },
-    })
+    }]
     return [...prefix, ...resolved]
   }, [columns, rows, selected, onReorder, drag]) // eslint-disable-line react-hooks/exhaustive-deps