@kolkrabbi/kol-component 0.32.4 → 0.32.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.32.4",
+  "version": "0.32.5",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/FieldRow.jsx

@@ -37,8 +37,13 @@ import Dropdown from './Dropdown'
  *
  * Options: strings, or { value, label, tone } — tone ∈ success|warning|error|
  * info maps onto the --ui-* ladder (.kol-status-chip--* in kol-theme); the
- * chip wears the ACTIVE option's tone. No tone → the plain Tag look. */
-export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
+ * chip wears the ACTIVE option's tone. No tone → the plain Tag look.
+ *
+ * variant="primary" — the toneless pill wears the Dropdown-primary fill
+ * instead of the neutral mix (RecordManager's select columns, user frame
+ * 2026-08-09: "use status pill, but same look as dropdown primary"). An
+ * option's tone always outranks the variant. */
+export function StatusChip({ value, options = [], onChange, variant = 'neutral', size = 'sm' }) {
   const [open, setOpen] = useState(false)
   const popover = usePopover({
     open,
@@ -49,7 +54,9 @@ export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
   })
   const norm = options.map((opt) => (typeof opt === 'object' ? opt : { value: opt, label: opt }))
   const activeOpt = norm.find((o) => o.value === value)
-  const toneCls = activeOpt?.tone ? ` kol-status-chip--${activeOpt.tone}` : ''
+  const toneCls = activeOpt?.tone
+    ? ` kol-status-chip--${activeOpt.tone}`
+    : variant === 'primary' ? ' kol-status-chip--primary' : ''
   /* BUILT ON THE COVER-FOCUS SPECS (user ruling 2026-08-09: "same component
    * as cover focus"): the chip wears the Dropdown-sm trigger metrics — the
    * kol-btn-sm box (py-1 px-3) and mono-12 type at its OWN 16px leading, so

package/src/organisms/RecordManager.jsx

@@ -5,7 +5,6 @@ import Button from '../atoms/Button'
 import SearchInput from '../molecules/SearchInput'
 import ToggleCheckbox from '../atoms/ToggleCheckbox'
 import ShellDrawer from '../molecules/ShellDrawer'
-import Dropdown from '../molecules/Dropdown'
 import FieldRow, { StatusChip } from '../molecules/FieldRow'
 import { Tooltip } from '../atoms/Popover'
 import Table from './Table'
@@ -181,10 +180,15 @@ export default function RecordManager({
       if (col.type === 'select') {
         return {
           ...col,
+          /* the reference's select cell ("Center ▾") is a PILL, not the square
+           * Dropdown trigger — the StatusChip apparatus wearing the Dropdown-
+           * primary fill (user frame 2026-08-09: "use status pill, but same
+           * look as dropdown primary"). Panel select fields stay Dropdown. */
           render: (row) => (
-            <Dropdown
-              options={col.options ?? []}
+            <StatusChip
+              variant="primary"
               value={row[col.accessor]}
+              options={col.options ?? []}
               onChange={(next) => col.onSelectChange?.(row, next)}
             />
           ),
@@ -196,7 +200,8 @@ export default function RecordManager({
           render: (row) => {
             const media = row[col.accessor]
             return media ? (
-              <img src={media.thumb ?? media.url} alt={media.name ?? ''} className="h-10 w-14 rounded object-cover bg-fg-04" />
+              /* 2:1 landscape (user frame 2026-08-09: "more landscape") */
+              <img src={media.thumb ?? media.url} alt={media.name ?? ''} className="h-10 w-20 rounded object-cover bg-fg-04" />
             ) : (
               <span className="kol-helper-10 text-meta">—</span>
             )
@@ -292,8 +297,10 @@ export default function RecordManager({
         rows={rows}
         width="column"
         compact
+        /* align-middle: cell content centres in the row (reference grammar,
+         * user frame 2026-08-09) — scoped here; Table's base stays v-top */
         rowClassName={(row, i) =>
-          `group${drag && i === drag.from ? ' opacity-40' : ''}${
+          `group align-middle${drag && i === drag.from ? ' opacity-40' : ''}${
             drag && i === drag.over && drag.over !== drag.from ? ' bg-fg-04' : ''
           }`
         }