@kolkrabbi/kol-component 0.32.0 → 0.32.2

package/package.json

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

package/src/atoms/Popover.jsx

@@ -74,14 +74,15 @@ 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. */
+          /* EXACT width — the one-piece fusion restored (2026-08-09 night).
+           * The truncation that briefly justified a floor is solved at the
+           * TRIGGER instead: the ghost stack reserves the panel row's check
+           * column (.kol-dd-ghost slack), so the one shared width fits every
+           * row. Letting the panel size itself was the broken middle: an
+           * abs-positioned float with auto width sizes against available
+           * space, not content. Sole consumer is Dropdown. */
           Object.assign(elements.floating.style, {
-            minWidth: `${rects.reference.width}px`,
-            width: 'max-content',
+            width: `${rects.reference.width}px`,
           })
         },
       })

package/src/molecules/FieldRow.jsx

@@ -60,7 +60,7 @@ export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
       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' : ''}`}
+      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' : ''}`}
       onClick={interactive ? () => setOpen((o) => !o) : undefined}
     >
       {activeOpt?.label ?? value}
@@ -129,32 +129,33 @@ export default function FieldRow({
   placeholder,
   disabled = false,
 }) {
-  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 ? (
+   * the reference panel's grammar (user frames 2026-08-09), not a bare icon
+   * button and never a dash: the affordance renders with or without a
+   * picker (disabled when no onPick), because the reference shows the slot
+   * itself as the field's resting state. */
+  const mediaEmpty = (
     <button
       type="button"
       aria-label={label}
-      disabled={disabled}
+      disabled={disabled || !onPick}
       onClick={onPick}
-      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"
+      className="flex h-16 w-28 items-center justify-center rounded-lg border border-fg-16 bg-fg-02 text-body transition-colors duration-150 enabled:cursor-pointer enabled:hover:text-emphasis disabled:opacity-60"
     >
       <Icon name="plus" size={16} />
     </button>
-  ) : dash
-  const fileEmpty = onPick ? (
+  )
+  const fileEmpty = (
     <button
       type="button"
       aria-label={label}
-      disabled={disabled}
+      disabled={disabled || !onPick}
       onClick={onPick}
-      className="kol-control kol-control--filled kol-control-sm kol-mono-12 w-full cursor-pointer text-left text-meta"
+      className="kol-control kol-control--filled kol-control-sm kol-mono-12 w-full text-left text-meta enabled:cursor-pointer disabled:opacity-60"
     >
       Choose file…
     </button>
-  ) : dash
+  )
 
   let control = null
   if (type === 'text') {
@@ -202,7 +203,7 @@ export default function FieldRow({
   }
 
   return (
-    <div className="grid grid-cols-[minmax(0,10rem)_minmax(0,1fr)] items-center gap-x-6 py-3 border-b border-fg-08">
+    <div className="grid grid-cols-[minmax(0,10rem)_minmax(0,1fr)] items-center gap-x-6 py-4 border-b border-fg-08">
       <div className="kol-mono-12 text-body">{label}</div>
       <div className="min-w-0">{control}</div>
       {hint != null && (

package/src/molecules/ShellDrawer.jsx

@@ -37,6 +37,7 @@ export default function ShellDrawer({
   side = 'left',
   width,
   header,
+  closeSide = 'end',
   children,
   className = '',
 }) {
@@ -149,6 +150,11 @@ export default function ShellDrawer({
         style={width != null ? { width: typeof width === 'number' ? `${width}px` : width } : undefined}
       >
         <div className="mb-6 flex items-center gap-4">
+          {/* closeSide="start" — the record-surface anatomy (reference frame,
+            * 2026-08-09): × leads, the header's actions sit at the far end. */}
+          {closeSide === 'start' && (
+            <Button variant="nav" size="md" iconOnly="x" iconSize={14} onClick={onClose} aria-label="Close" className="shrink-0" />
+          )}
           {header != null && <div className="min-w-0 flex-1">{header}</div>}
           {/* The box has an owner (2026-08-01). This hand-wrote the icon-button
             * square and its hover wash; `Button variant="nav"` IS that string.
@@ -156,15 +162,17 @@ export default function ShellDrawer({
             * heavier than a drawer close wants, and Button documents iconSize
             * for exactly the cases the ladder cannot serve. The SQUARE is what
             * needed an owner, and it now has one. */}
-          <Button
-            variant="nav"
-            size="md"
-            iconOnly="x"
-            iconSize={14}
-            onClick={onClose}
-            aria-label="Close"
-            className="ml-auto shrink-0"
-          />
+          {closeSide !== 'start' && (
+            <Button
+              variant="nav"
+              size="md"
+              iconOnly="x"
+              iconSize={14}
+              onClick={onClose}
+              aria-label="Close"
+              className="ml-auto shrink-0"
+            />
+          )}
         </div>
         <div className="flex-1 overflow-y-auto pr-1" style={{ overflowAnchor: 'none' }}>
           {children}

package/src/organisms/RecordManager.jsx

@@ -317,17 +317,21 @@ export default function RecordManager({
         onClose={() => setActive(null)}
         side="right"
         width="min(37.5rem, 92vw)"
+        closeSide="start"
         header={
-          <div className="flex items-center gap-2 min-w-0">
+          /* reference header anatomy (frame 45, 2026-08-09): × leads the row
+           * (closeSide above); every action clusters at the far end —
+           * … ▶ save-state Publish. */
+          <div className="flex items-center justify-end gap-2 min-w-0">
             {onOverflow && (
               <ToolbarIcon name="more" label="More" onClick={() => onOverflow(record)} />
             )}
             {onPreview && (
               <ToolbarIcon name="play" label="Preview" onClick={() => onPreview(record)} />
             )}
-            {saveState != null && <span className="kol-helper-10 text-meta ml-auto truncate">{saveState}</span>}
+            {saveState != null && <span className="kol-helper-10 text-meta truncate">{saveState}</span>}
             {onPublish && (
-              <Button variant="primary" size="sm" className={saveState == null ? 'ml-auto' : ''} onClick={() => onPublish(record)}>
+              <Button variant="primary" size="sm" onClick={() => onPublish(record)}>
                 {publishLabel}
               </Button>
             )}