@kolkrabbi/kol-component 0.234.0 → 0.236.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.234.0",
+  "version": "0.236.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",

package/src/hooks/useDragResize.js

@@ -135,9 +135,20 @@ const readBack = (n) => {
  *
  *           STATE is untouched: collapsed/expanded still persists via
  *           `stateKey`, unconditionally, as it always did. The ticket says the
- *           two are separate questions and only asks about the width. */
+ *           two are separate questions and only asks about the width.
+ *   variant — how the handle DRAWS and what a click does (2026-10-01, user: *"we should make another
+ *           drag to resize variant: on hover this pointer, and either hover or click to highlight
+ *           the border, with double click expanding (like if sidebar with icons)"*):
+ *             'pill' (default) — the short pill that wakes as the pointer nears; a CLICK toggles.
+ *             'line'           — the whole edge lights up on hover and while dragging; a click does
+ *                                nothing and a DOUBLE-CLICK toggles expand ↔ collapse (the two
+ *                                cannot share one gesture — see "double-click reset is gone" above,
+ *                                which is why this is a variant and not an addition). */
 export default function useDragResize(ref, options = {}) {
-  const { token = 'kol-sidenav', side = 'left', defaultCollapsed = false, persistWidth = false } = options
+  const { token = 'kol-sidenav', side = 'left', defaultCollapsed = false, persistWidth = false, variant = 'pill' } = options
+  const line = variant === 'line'
+  const lineRef = useRef(line)
+  lineRef.current = line
   /* -1 on a right-hand rail: the same rightward pointer travel that widens a
    * left rail must NARROW a right one, because its handle faces the canvas. */
   const dir = side === 'right' ? -1 : 1
@@ -221,7 +232,7 @@ export default function useDragResize(ref, options = {}) {
       root().removeAttribute(names.draggingAttr)
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
-      if (!moved) { toggleCollapsed(); return } // a click, not a drag
+      if (!moved) { if (!lineRef.current) toggleCollapsed(); return } // a click, not a drag — `line` toggles on double-click
       /* Snap-to-default: release near the stylesheet default clears the
        * override entirely. */
       const { collapsed: c, widthPx: w } = readBack(names)
@@ -304,7 +315,8 @@ export default function useDragResize(ref, options = {}) {
       /* the pill is drawn by `.kol-rail-grab` (kol-animation.css) — the hook
        * only supplies `is-near` and `--kol-rail-grab-y`. A consumer's own
        * className, spread after this, still wins. */
-      className: 'kol-rail-grab',
+      className: line ? 'kol-rail-grab kol-rail-grab--line' : 'kol-rail-grab',
+      ...(line ? { onDoubleClick: toggleCollapsed } : {}),
       role: 'separator',
       'aria-orientation': 'vertical',
       'aria-label': 'Resize navigation',

package/src/index.js

@@ -128,6 +128,8 @@ export { default as ToolPalette } from './organisms/ToolPalette.jsx'
 export { default as DocumentEditor } from './organisms/DocumentEditor.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow } from './molecules/TabsRow.jsx'
+/* TabChips — tabs as chips, for inside a toolbar (2026-10-01; was the showcase's local DocTabs) */
+export { default as TabChips } from './molecules/TabChips.jsx'
 
 // organisms
 /* monorepo sets (P6–P10) — organism members. Foundry members live in the

package/src/molecules/TabChips.jsx

@@ -0,0 +1,39 @@
+/**
+ * TabChips — Tabs as a row of chips. the active tab is a filled chip, the rest are quiet text.
+ *
+ * WHY IT EXISTS (user, 2026-10-01, on the showcase's Preview / Code and pnpm / npm / yarn / bun rows:
+ * *"what is this button? its not DS?"* → *"we can just make a tab chip for this purpose exactly
+ * like this"*). It was `DocTabs`, a strip local to the showcase, built there because neither
+ * shipped tab control fits a toolbar: `SegmentedToggle` is a joined strip with radiogroup
+ * semantics, `TabsRow` is an underline strip that wants a rule beneath it. This is the third tab
+ * idiom — small, unframed, sits inside a bar — promoted as it was, class for class.
+ *
+ * Labels render as authored. Selection is the parent's.
+ *
+ * @param {Array}    tabs       `[{ id, label }]`
+ * @param {string}   value      id of the active tab (controlled)
+ * @param {Function} onChange   `(id) => void`
+ * @param {string}   [ariaLabel] accessible name for the strip
+ * @param {string}   [className] extra classes on the row
+ */
+export default function TabChips({ tabs = [], value, onChange, ariaLabel, className = '' }) {
+  return (
+    <div className={`flex items-center gap-1 ${className}`.trim()} role="tablist" aria-label={ariaLabel}>
+      {tabs.map((t) => {
+        const active = t.id === value
+        return (
+          <button
+            key={t.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange?.(t.id)}
+            className={`kol-mono-12 rounded-[var(--kol-radius-sm)] px-3 py-1 transition-colors [@media(pointer:coarse)]:min-h-8 ${active ? 'bg-fg-08 text-emphasis' : 'text-meta hover:text-emphasis'}`}
+          >
+            {t.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/organisms/ShellSearchOverlay.jsx

@@ -69,7 +69,7 @@ export function HighlightMatch({ label, query, ranges }) {
  * The ⌘K binding itself lives in the shell's key handler, not here.
  *
  * Keyboard: ArrowUp/ArrowDown rove the active row (mouse hover roves too),
- * Enter selects it (index starts at 0 → Enter-selects-first preserved),
+ * Enter opens it (the top row from the first keystroke), ⌘/Ctrl+Enter opens every hit,
  * Escape closes. Focus trap: focus moves into the input on open, returns to
  * the opener on close, and Tab is pinned — rows are combobox options driven
  * via aria-activedescendant, never tab stops.
@@ -168,13 +168,12 @@ export default function ShellSearchOverlay({
       /* ⌘ENTER OPENS EVERY HIT (user 2026-09-30: *"enter would focus searched item, and maybe
        * command enter would open the results page"*) — only where the consumer has a place for them. */
       if ((e.metaKey || e.ctrlKey) && onOpenResults && query) { onOpenResults(query); onClose?.(); return }
-      /* Enter COMMITS the query and expands. It only selects when the user has
-       * actually arrowed to a row — `activeIndex` starts at 0, so "a row is
-       * highlighted" is true from the first keystroke and testing `active >= 0`
-       * made Enter navigate to whatever happened to be first. Committing a
-       * query must never be a navigation you didn't choose. */
-      /* An empty query has nothing to commit — Enter goes to the top suggestion. */
-      if (active >= 0 && (navigated || !query)) select(results[active])
+      /* ENTER OPENS THE HIGHLIGHTED ROW (user 2026-10-01: *"I think enter should also take you to
+       * the atom but something like command enter take you to the index"* — reverses the
+       * 2026-08-01 "Enter commits, it only selects once you have arrowed"). The top row is drawn
+       * highlighted from the first keystroke, so Enter goes where the highlight says. With no
+       * rows there is nothing to open and Enter commits the query. */
+      if (active >= 0) select(results[active])
       else onExpand?.()
     } else if (e.key === 'Tab') {
       /* Focus trap — the input is the palette's only tab stop. */
@@ -283,17 +282,28 @@ export default function ShellSearchOverlay({
           </ul>
         )}
         {/* THE FOOTER SAYS WHAT ENTER DOES — always, not only once typing. */}
-        {!expanded && ((!query && results.length > 0) || (query && enterLabel)) && (
+        {!expanded && (results.length > 0 || (query && (enterLabel || onOpenResults))) && (
           <div className="border-t border-fg-08 py-2">
-            <p className="flex items-center gap-2 kol-helper-12 text-fg-48 mx-2 px-4 border-x border-transparent">
-              <Kbd icon="corner-down-left" />
-              {query ? enterLabel : 'Go to page'}
-            </p>
+            {/* Enter's line names what Enter does NOW: a row is highlighted → it opens that row;
+              * no rows → it commits the query. */}
+            {(results.length > 0 || enterLabel) && (
+              <p className="flex items-center gap-2 kol-helper-12 text-fg-48 mx-2 px-4 border-x border-transparent">
+                <Kbd icon="corner-down-left" />
+                {results.length > 0 ? 'Go to page' : enterLabel}
+              </p>
+            )}
+            {/* THE RESULTS LINE IS A LINK (user 2026-10-01: *"make 'all results...' at the bottom
+              * also be a link to the results page"*) — the same door ⌘Enter opens. */}
             {query && onOpenResults && (
-              <p className="flex items-center gap-2 kol-helper-12 text-fg-48 mx-2 px-4 border-x border-transparent pt-1">
+              <button
+                type="button"
+                className="flex items-center gap-2 kol-helper-12 text-fg-48 hover:text-fg-default transition-colors mx-2 px-4 border-x border-transparent pt-1"
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => { onOpenResults(query); onClose?.() }}
+              >
                 <Kbd icon="command"><Icon name="corner-down-left" size={12} /></Kbd>
                 {resultsLabel}
-              </p>
+              </button>
             )}
           </div>
         )}

package/src/organisms/Table.jsx

@@ -33,7 +33,7 @@ const WIDTHS = {
   column: '',
 }
 
-const Table = ({ caption, columns, rows, variant = 'default', className = '', width = 'panel', rowClassName, compact = false }) => {
+const Table = ({ caption, columns, rows, variant = 'default', className = '', width = 'panel', rowClassName, compact = false, lastRule = false }) => {
   const [sort, setSort] = useState({ key: null, dir: null })
 
   const cycle = (key) =>
@@ -58,7 +58,9 @@ const Table = ({ caption, columns, rows, variant = 'default', className = '', wi
   const variantClass = variant === 'simple' ? 'kol-table--simple' : ''
   /* 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(' ')
+  /* lastRule — `simple` only: the rule under the LAST row. Off by default (2026-10-01): the
+   * table is usually followed by a divider of its own, and the two read as a double line. */
+  const wrapperClass = ['kol-table-wrapper', variantClass, lastRule && 'kol-table--last-rule', compact && 'kol-table--compact', WIDTHS[width] ?? WIDTHS.panel, className].filter(Boolean).join(' ')
   return (
   <div className={wrapperClass}>
     <table className="kol-table">