@kolkrabbi/kol-component 0.32.3 → 0.32.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.32.3",
+  "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,18 +54,22 @@ 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 — as a pill with the tone
-   * tint. The caret is a direct child of the flex row, centred by
-   * items-center; it cannot sit off the label's middle. */
+   * kol-btn-sm box (py-1 px-3) and mono-12 type at its OWN 16px leading, so
+   * the pill stands the trigger's 24px (a leading-none had shrunk it to 20;
+   * user re-call same day: "like dropdown small in size"). The caret is a
+   * direct child of the flex row, centred by items-center; it cannot sit off
+   * the label's middle. */
   const chip = (interactive) => (
     <button
       type="button"
       disabled={!interactive || undefined}
       aria-expanded={interactive ? open : undefined}
-      className={`kol-status-chip${toneCls} kol-mono-12 inline-flex items-center gap-1 rounded-full border-0 px-2 py-1 leading-none${interactive ? ' cursor-pointer' : ''}`}
+      className={`kol-status-chip${toneCls} kol-mono-12 inline-flex items-center gap-1 rounded-full border-0 px-3 py-1${interactive ? ' cursor-pointer' : ''}`}
       onClick={interactive ? () => setOpen((o) => !o) : undefined}
     >
       {activeOpt?.label ?? value}

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' : ''
           }`
         }