@kolkrabbi/kol-component 0.28.1 → 0.30.0

package/package.json

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

package/src/atoms/Popover.jsx

@@ -68,11 +68,15 @@ export function usePopover({
     middleware.push(
       sizeMw({
         apply({ rects, elements }) {
-          /* EXACT width, not a floor (2026-08-09) — "one piece means one
-           * width": with minWidth alone, a wide row let the panel outgrow the
-           * trigger it claims to continue. Sole consumer is Dropdown. */
+          /* FLOOR again, not exact (2026-08-09 evening, user: "if you have
+           * to truncate 'centered' then its too narrow" — overrides the
+           * morning's exact-width reading of the one-piece ruling for the
+           * 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. */
           Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
+            minWidth: `${rects.reference.width}px`,
+            width: '',
           })
         },
       })

package/src/molecules/FieldRow.jsx

@@ -61,12 +61,15 @@ export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
     >
       {activeOpt?.label ?? value}
       {interactive && (
-        <Icon
-          name="chevron-down"
-          size={INDICATOR[size] ?? INDICATOR.sm}
-          className={`transition-transform duration-150${open ? ' rotate-180' : ''}`}
+        /* 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} />
+        </span>
       )}
     </Tag>
   )
@@ -168,7 +171,9 @@ export default function FieldRow({
     ) : empty
   } else if (type === 'file') {
     control = value ? (
-      <Tag variant="secondary" size="sm" hash={false} onRemove={onChange ? () => onChange(null) : undefined}>
+      /* kol-tag--data: a filename renders VERBATIM — the chip uppercase is
+       * for label strings, and transforming data misquotes it (2026-08-09). */
+      <Tag variant="secondary" size="sm" hash={false} className="kol-tag--data" onRemove={onChange ? () => onChange(null) : undefined}>
         {value.name ?? value}
       </Tag>
     ) : empty

package/src/organisms/RecordManager.jsx

@@ -7,9 +7,31 @@ 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'
 import MediaLibrary from './MediaLibrary'
 
+/* TOOLBAR ICONS ARE BARE GLYPHS (user ruling 2026-08-09, verbatim: "did I
+ * ask for a button?? … the only thing that should hover is full opacity and
+ * popover"): no Button chrome, no fill, no box — body ink at rest, emphasis
+ * on hover, a Tooltip as the name. */
+const ToolbarIcon = ({ name, label, onClick, active = false, triggerClassName }) => (
+  <Tooltip label={label} placement="bottom" triggerClassName={triggerClassName}>
+    <button
+      type="button"
+      aria-label={label}
+      aria-pressed={active}
+      onClick={onClick}
+      /* 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'}`}
+    >
+      <Icon name={name} size={16} />
+    </button>
+  </Tooltip>
+)
+
 /**
  * RecordManager — full-screen CMS record surface (lobby: RecordManager,
  * reference: Framer CMS). A reorderable record table plus a slide-over detail
@@ -61,9 +83,14 @@ export default function RecordManager({
   onOverflow,
   mediaClient,
   reorderLabel = (n) => `Reorder row ${n}`,
+  /* pressed states for the toolbar's sort/filter controls — the consumer owns
+   * those panels, so it tells the toolbar which control is open */
+  sortActive = false,
+  filterActive = false,
   className = '',
 }) {
   const wrapRef = useRef(null)
+  const [searchOpen, setSearchOpen] = useState(false)
   const dragRef = useRef(null)
   const [drag, setDrag] = useState(null) // { from, over, x, y } during a drag
   const [active, setActive] = useState(null)
@@ -193,7 +220,7 @@ export default function RecordManager({
               className="cursor-grab touch-none bg-transparent border-0 p-0 text-meta hover:text-emphasis"
               onPointerDown={(e) => startDrag(e, i)}
             >
-              <Icon name="resize-grip" size={14} />
+              <Icon name="drag-handle" size={14} />
             </button>
           )
         },
@@ -233,23 +260,28 @@ export default function RecordManager({
   return (
     <div ref={wrapRef} className={`flex flex-col min-w-0 ${className}`}>
       {hasToolbar && (
-        <div className="flex items-center gap-1 pb-3">
-          {onAdd && <Button variant="nav" size="md" iconOnly="plus" iconSize={14} onClick={onAdd} aria-label="Add" />}
-          {onSortToggle && <Button variant="nav" size="md" iconOnly="swap" iconSize={14} onClick={onSortToggle} aria-label="Sort" />}
-          {onFilterToggle && <Button variant="nav" size="md" iconOnly="filter" iconSize={14} onClick={onFilterToggle} aria-label="Filter" />}
-          {onQueryChange && (
+        /* the reference cluster (user screenshots 2026-08-09): bare + · ↑↓ ·
+         * ≡ · 🔍, search expanding into a COMPACT field on press, … far right */
+        <div className="flex items-center gap-2 pb-3">
+          {onAdd && <ToolbarIcon name="plus" label="Add" onClick={onAdd} />}
+          {onSortToggle && <ToolbarIcon name="arrows-vertical" label="Sort" active={sortActive} onClick={onSortToggle} />}
+          {onFilterToggle && <ToolbarIcon name="filter-lines" label="Filter" active={filterActive} onClick={onFilterToggle} />}
+          {onQueryChange && (searchOpen || query ? (
             <SearchInput
+              autoFocus
+              size="sm"
+              className="w-56"
               value={query ?? ''}
               onChange={(e) => onQueryChange(e?.target ? e.target.value : e)}
               placeholder={searchPlaceholder}
-              size="sm"
-              className="ml-2"
+              onClear={() => { onQueryChange(''); setSearchOpen(false) }}
+              onBlur={() => { if (!query) setSearchOpen(false) }}
             />
-          )}
-          {/* trailing overflow — the reference toolbar's far-right … (surface
-            * scope: called with null, vs the drawer header's per-record call) */}
+          ) : (
+            <ToolbarIcon name="search" label="Search" onClick={() => setSearchOpen(true)} />
+          ))}
           {onOverflow && (
-            <Button variant="nav" size="md" iconOnly="more" iconSize={14} className="ml-auto" onClick={() => onOverflow(null)} aria-label="More" />
+            <ToolbarIcon name="more" label="More" triggerClassName="ml-auto" onClick={() => onOverflow(null)} />
           )}
         </div>
       )}
@@ -286,10 +318,10 @@ export default function RecordManager({
         header={
           <div className="flex items-center gap-2 min-w-0">
             {onOverflow && (
-              <Button variant="nav" size="md" iconOnly="more" iconSize={14} onClick={() => onOverflow(record)} aria-label="More" />
+              <ToolbarIcon name="more" label="More" onClick={() => onOverflow(record)} />
             )}
             {onPreview && (
-              <Button variant="nav" size="md" iconOnly="play" iconSize={14} onClick={() => onPreview(record)} aria-label="Preview" />
+              <ToolbarIcon name="play" label="Preview" onClick={() => onPreview(record)} />
             )}
             {saveState != null && <span className="kol-helper-10 text-meta ml-auto truncate">{saveState}</span>}
             {onPublish && (