@kolkrabbi/kol-component 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.31.0",
+  "version": "0.32.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.12.0"
+    "@kolkrabbi/kol-icons": "0.12.1"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/atoms/Popover.jsx

@@ -74,9 +74,14 @@ export function usePopover({
            * narrow case). The panel is never NARROWER than the trigger, and
            * grows when its rows carry chrome the trigger doesn't (the
            * selected row's check). Sole consumer is Dropdown. */
+          /* width: max-content is LOAD-BEARING — an abs-positioned float
+           * with auto width shrink-to-fits its available space, and the
+           * w-full rows inside then blew the panel to ~2× (the broken
+           * dropdown, 2026-08-09 evening). max-content sizes it to the
+           * widest row; minWidth keeps the trigger as the floor. */
           Object.assign(elements.floating.style, {
             minWidth: `${rects.reference.width}px`,
-            width: '',
+            width: 'max-content',
           })
         },
       })

package/src/molecules/FieldRow.jsx

@@ -50,28 +50,29 @@ 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}` : ''
+  /* 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. */
   const chip = (interactive) => (
-    <Tag
-      variant="primary"
-      size={size}
-      hash={false}
-      active={interactive && open}
-      className={`kol-status-chip${toneCls}`}
+    <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-3 py-1 leading-none${interactive ? ' cursor-pointer' : ''}`}
       onClick={interactive ? () => setOpen((o) => !o) : undefined}
     >
       {activeOpt?.label ?? value}
       {interactive && (
-        /* plain inline-flex wrapper — Icon's own element can render
-         * inline-block and ride the baseline (the misaligned caret,
-         * 2026-08-09); the flex span centres it against the label. */
         <span
           className={`inline-flex shrink-0 transition-transform duration-150${open ? ' rotate-180' : ''}`}
           aria-hidden="true"
         >
-          <Icon name="chevron-down" size={INDICATOR[size] ?? INDICATOR.sm} />
+          <Icon name="chevron-down" size={INDICATOR.sm} />
         </span>
       )}
-    </Tag>
+    </button>
   )
   return (
     <>
@@ -113,9 +114,9 @@ export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
   )
 }
 
-/* Media/file thumbnail — same small fixed-aspect rounded treatment as
- * MediaRow's thumb cell. */
-const THUMB_CLS = 'h-10 w-14 rounded object-cover bg-fg-04'
+/* Media thumbnail — the reference panel's proportions (frame 39,
+ * 2026-08-09): a generous rounded tile, remove × inset at its corner. */
+const THUMB_CLS = 'h-16 w-28 rounded-lg object-cover bg-fg-04'
 
 export default function FieldRow({
   label,
@@ -138,9 +139,9 @@ export default function FieldRow({
       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"
+      className="flex h-16 w-28 cursor-pointer items-center justify-center rounded-lg border border-fg-16 bg-fg-02 text-body transition-colors duration-150 hover:text-emphasis"
     >
-      <Icon name="plus" size={14} />
+      <Icon name="plus" size={16} />
     </button>
   ) : dash
   const fileEmpty = onPick ? (
@@ -184,7 +185,7 @@ export default function FieldRow({
             iconOnly="x"
             iconSize={10}
             aria-label={label}
-            className="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+            className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
             onClick={() => onChange(null)}
           />
         )}

package/src/organisms/RecordManager.jsx

@@ -25,9 +25,11 @@ const ToolbarIcon = ({ name, label, onClick, active = false, triggerClassName })
       /* PRESSED gets the box (user ruling, reference frame 2026-08-09): a
        * snug rounded fill hugging the glyph — "container relative to the
        * icon, and only when pressed". Rest is bare; hover is ink only. */
-      className={`inline-flex cursor-pointer rounded-sm border-0 p-1 transition-colors duration-150 ${active ? 'bg-fg-08 text-emphasis' : 'bg-transparent text-body hover:text-emphasis'}`}
+      /* 20px glyph, half-step pad — "TOO SMALL, TOO MUCH PADDING" (user
+       * frames 2026-08-09): the reference icons nearly fill their box. */
+      className={`inline-flex cursor-pointer rounded-sm border-0 p-0.5 transition-colors duration-150 ${active ? 'bg-fg-08 text-emphasis' : 'bg-transparent text-body hover:text-emphasis'}`}
     >
-      <Icon name={name} size={16} />
+      <Icon name={name} size={20} />
     </button>
   </Tooltip>
 )
@@ -155,10 +157,10 @@ export default function RecordManager({
               <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"
+                className="shrink-0 inline-flex cursor-pointer rounded-md 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} />
+                <Icon name="toggle-overlay" size={18} />
               </button>
             </span>
           ),
@@ -289,6 +291,7 @@ export default function RecordManager({
         columns={builtColumns}
         rows={rows}
         width="column"
+        compact
         rowClassName={(row, i) =>
           `group${drag && i === drag.from ? ' opacity-40' : ''}${
             drag && i === drag.over && drag.over !== drag.from ? ' bg-fg-04' : ''

package/src/organisms/Table.jsx

@@ -33,7 +33,7 @@ const WIDTHS = {
   column: '',
 }
 
-const Table = ({ caption, columns, rows, variant = 'default', className = '', width = 'panel', rowClassName }) => {
+const Table = ({ caption, columns, rows, variant = 'default', className = '', width = 'panel', rowClassName, compact = false }) => {
   const [sort, setSort] = useState({ key: null, dir: null })
 
   const cycle = (key) =>
@@ -56,7 +56,9 @@ const Table = ({ caption, columns, rows, variant = 'default', className = '', wi
   }, [rows, columns, sort])
 
   const variantClass = variant === 'simple' ? 'kol-table--simple' : ''
-  const wrapperClass = ['kol-table-wrapper', variantClass, WIDTHS[width] ?? WIDTHS.panel, className].filter(Boolean).join(' ')
+  /* compact — record-surface density (RecordManager, 2026-08-09): the default
+   * 12/16 cell box read as bloated rows against the reference table. */
+  const wrapperClass = ['kol-table-wrapper', variantClass, compact && 'kol-table--compact', WIDTHS[width] ?? WIDTHS.panel, className].filter(Boolean).join(' ')
   return (
   <div className={wrapperClass}>
     <table className="kol-table">