@kolkrabbi/kol-component 0.203.0 → 0.205.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.203.0",
+  "version": "0.205.0",
   "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/AlignmentGrid.jsx

@@ -1,27 +1,28 @@
-import Button from '../atoms/Button.jsx'
+import { Icon } from '@kolkrabbi/kol-icons'
+import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
+import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
- * AlignmentGrid — a six-cell alignment row: horizontal start/center/end then
- * vertical start/center/end, each a quiet icon Button that emits an
- * `(axis, mode)` alignment intent. Driven off a static config array (the
- * default 6, overridable via `items`). Presentation only — the consumer wires
- * `onAlign` to whatever "align these" means in its context (align a box to the
- * canvas bounds, align a multi-selection's common bbox, …).
+ * AlignmentGrid — the align control: TWO three-way strips, X and Y.
  *
- * Ported from the brand editor's AlignmentPanel with the store coupling
- * dropped (per lobby spec): `useComposeState().alignSelected` → an `onAlign`
- * prop; the hand-rolled `kol-btn-quiet` buttons → DS `Button` (quiet +
- * iconOnly) so the DS owns the button atom; `EditorIcon` → the DS Icon
- * (through Button).
+ * Rebuilt on `SegmentedToggle` 2026-09-03 (`editor-chrome-review`, the user's
+ * own pass over the running editor: *"alignment isnt using segmentedtoggle?"*).
+ * It was six bare quiet icon Buttons in one `grid-cols-6` — six loose controls
+ * where the thing itself is two three-way choices, which is what a segmented
+ * strip is for. The shape had been ruled on `editor-set-is-behind-its-source`
+ * and the PRESS TREATMENT was the open question; his reaction answered it.
  *
- * [icon-gap] The source's `align-h-{start,center,end}` / `align-v-{start,
- * center,end}` glyph names are NOT in the loader. Remapped to the closest
- * existing loader glyphs (stroke/layout): `align-horizontal-{left,center,
- * right}` and `align-vertical-{top,center,bottom}`. Same six align marks,
- * different names — no visual gap.
+ * MOMENTARY, NOT A SELECTION. `value={null}` puts the strip in its stateless
+ * mode: no cell is ever lit, because "align left" is an action you fire, not a
+ * state the object is in — the object's alignment is not a property this reads
+ * back. The press is the cell's own `:active`, drawn in the theme
+ * (`.kol-seg-cell:active`), which is why no `tone` or `pressed` prop was minted
+ * for it: `tone` is the GROUND axis and says nothing about a momentary press.
  *
- * @param {(axis:'h'|'v', mode:'start'|'center'|'end') => void} onAlign  fired on cell click
- * @param {Array} items  [{ axis, mode, icon, title }] cells (default the standard 6)
+ * @param {(axis:'h'|'v', mode:'start'|'center'|'end') => void} onAlign - Fired on press
+ * @param {Array} items - `[{ axis, mode, icon, title }]` cells (default the standard 6, three per axis)
+ * @param {'xs'|'sm'|'md'|'lg'} size - The strips' rung (default 'sm')
+ * @param {string} className - Extra classes on the wrapper
  */
 const ALIGN_BUTTONS = [
   { axis: 'h', mode: 'start',  icon: 'align-horizontal-left',   title: 'Align left' },
@@ -32,22 +33,37 @@ const ALIGN_BUTTONS = [
   { axis: 'v', mode: 'end',    icon: 'align-vertical-bottom',   title: 'Align bottom' },
 ]
 
-export default function AlignmentGrid({ onAlign, items = ALIGN_BUTTONS }) {
+export default function AlignmentGrid({ onAlign, items = ALIGN_BUTTONS, size = 'sm', className = '' }) {
+  const strip = (axis) => items.filter((b) => b.axis === axis)
+
   return (
-    <div className="grid grid-cols-6 gap-1">
-      {items.map((b) => (
-        <Button
-          key={`${b.axis}-${b.mode}`}
-          quiet
-          iconOnly={b.icon}
-          iconSize={16}
-          onClick={() => onAlign?.(b.axis, b.mode)}
-          title={b.title}
-          aria-label={b.title}
-          className="w-full"
-          style={{ height: 28, padding: 6 }}
-        />
-      ))}
+    <div className={`kol-alignment-grid flex flex-col gap-1 ${className}`.trim()}>
+      {['h', 'v'].map((axis) => {
+        const cells = strip(axis)
+        if (!cells.length) return null
+        return (
+          <SegmentedToggle
+            key={axis}
+            variant="filled"
+            size={size}
+            /* stateless: never lit, the press IS the feedback */
+            value={null}
+            ariaLabel={axis === 'h' ? 'Align horizontally' : 'Align vertically'}
+            /* the cell's `label` takes a NODE, so the glyph needs no new prop
+             * on SegmentedToggle — and the glyph size comes from the ADJACENT
+             * ladder, never a number typed here */
+            options={cells.map((b) => ({
+              value: `${b.axis}-${b.mode}`,
+              label: <Icon name={b.icon} size={glyphSize(size)} />,
+              ariaLabel: b.title,
+            }))}
+            onChange={(v) => {
+              const cell = cells.find((b) => `${b.axis}-${b.mode}` === v)
+              if (cell) onAlign?.(cell.axis, cell.mode)
+            }}
+          />
+        )
+      })}
     </div>
   )
 }

package/src/organisms/ColumnBrowser.jsx

@@ -71,6 +71,10 @@ import { GRAB_COLUMN } from '../utilities/motion.js'
  * @param {Function} onColumnResize (index, px) => void — the column's index, or `'preview'`
  * @param {string}   className    extra classes on the browser
  *
+ * @param {Function} thumbnailFor  (o) => node — the 44px tile's content below the breakpoint; null falls back to the kind glyph. WHERE a thumbnail comes from is the consumer's: R2 and B2 serve originals, so a 44px tile can mean a 2 MB download
+ * @param {Function} folderMeta  (prefix, view) => string — a folder's own meta line (`date · N items` in list, `N items` in grid). A SEAM, not a computation: counting by prefix is O(n) per folder, and a consumer that already holds a folder tree answers it for free
+ * @param {'list'|'grid'} stackView  the mobile view below the breakpoint (default 'list'); `grid` is 3-up tiles, flat — a grid has nowhere to put an inline child list
+ *
  * BELOW `md` (768) THIS IS A DIFFERENT TREE — one full-width inline-expanding
  * list, not columns (`ColumnBrowserStackMode`, kol-r2b2 2026-09-03, user-ruled
  * inline expand over push). `height` / `defaultHeight` / `onHeightChange`,
@@ -134,13 +138,39 @@ const COL_ICON = { image: 'image', video: 'video', audio: 'file', playlist: 'vid
  * path indents until the name has no room. */
 const INDENT_CAP = 3
 
-function Row({ icon, label, active, cursor = false, trailing, onClick, muted = false, indent = 0, meta }) {
+/* THE FOUR-ZONE ROW (ColumnBrowserMobileViews §1, kol-r2b2 2026-09-03) is the
+ * `zones` form. The first stack build inherited the DS Table's `12px 16px` with
+ * a 14px glyph in a 20px slot, and the user's read was *"kinda underwhelming…
+ * did you even look at the refs?"* — correctly, and the fault was the spec's.
+ * iOS Files and Dropbox both draw four:
+ *
+ *   1 · disclosure  14px, FOLDERS ONLY, its own tap target — tapping it
+ *                   expands in place, tapping the row opens. Without the split
+ *                   there is no way to peek into a folder without leaving the
+ *                   one you are in
+ *   2 · icon        44×44 at radius 5 — a folder glyph, or a real THUMBNAIL
+ *   3 · text        name, then meta beneath
+ *   4 · trailing    20px, the row's own affordance
+ *
+ * Row height follows zone 2: 60px, not the table padding. The divider starts at
+ * zone 3's left edge, not the row's — both references.
+ *
+ * `zones`, `thumb`, `onDisclose`, `disclosed`, `indent` and `meta` are all inert
+ * without the stack: the columns pass none, so a desktop row is byte-identical
+ * to what it was. */
+function Row({
+  icon, label, active, cursor = false, trailing, onClick, muted = false,
+  indent = 0, meta, zones = false, thumb, onDisclose, disclosed,
+}) {
   return (
     <li
       /* Row metrics are the DS Table's (kol-components-organisms.css .kol-table-cell-*):
-       * 12px 16px padding, mono 12, an oq-08 hairline between rows, none after the last. */
+       * 12px 16px padding, mono 12, an oq-08 hairline between rows, none after the last.
+       * The `zones` row sets its own 60px instead — a 44px thumbnail in a
+       * 12px-padded row is three times too airy. */
       /* `cursor` = the keyboard row, drawn with the hover fill so ↑/↓ always shows where you are. */
-      className={`kol-column-browser-row flex items-center gap-2 px-4 py-3 cursor-pointer transition-colors${
+      className={`kol-column-browser-row flex items-center gap-2 cursor-pointer transition-colors${
+        zones ? ' kol-column-browser-row--zones px-4' : ' px-4 py-3'}${
         active ? ' is-selected' : ''}${cursor ? ' is-cursor' : ''} ${
         active || cursor || !muted ? 'text-fg-default' : 'text-fg-48'
       }`}
@@ -150,12 +180,39 @@ function Row({ icon, label, active, cursor = false, trailing, onClick, muted = f
        * scrollers does not */
       style={indent ? { paddingLeft: `calc(var(--kol-spacing-4) + ${indent} * var(--kol-spacing-5))` } : undefined}
     >
-      <span className="w-5 shrink-0 flex items-center justify-center text-fg-48">
-        <Icon name={icon} size={14} />
-      </span>
+      {/* ZONE 1 — disclosure, its own tap target. A bare span holds the column
+          for files so every icon in the list lands on one x. */}
+      {zones && (onDisclose ? (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onDisclose() }}
+          aria-expanded={!!disclosed}
+          aria-label={disclosed ? 'Collapse folder' : 'Expand folder'}
+          className="kol-column-browser-disclose shrink-0 inline-flex items-center justify-center"
+          style={{ width: 14, alignSelf: 'stretch', color: 'var(--kol-accent-primary)' }}
+        >
+          <Icon name={disclosed ? 'chevron-down' : 'chevron-right'} size={12} />
+        </button>
+      ) : (
+        <span aria-hidden="true" className="shrink-0" style={{ width: 14 }} />
+      ))}
+
+      {/* ZONE 2 — the icon box, or the thumbnail the consumer supplies */}
+      {zones ? (
+        <span
+          className="kol-column-browser-thumb shrink-0 inline-flex items-center justify-center overflow-hidden"
+          style={{ width: 44, height: 44, borderRadius: 5, background: thumb ? 'var(--kol-oq-04)' : 'transparent' }}
+        >
+          {thumb ?? <Icon name={icon} size={20} className="text-fg-48" />}
+        </span>
+      ) : (
+        <span className="w-5 shrink-0 flex items-center justify-center text-fg-48">
+          <Icon name={icon} size={14} />
+        </span>
+      )}
+
+      {/* ZONE 3 — name over meta */}
       {meta ? (
-        /* size · date under the name — there is no preview column at this
-         * width to carry the facts (ColumnBrowserStackMode item 5) */
         <span className="flex-1 min-w-0 flex flex-col gap-0.5">
           <span className="kol-mono-12 truncate">{label}</span>
           <span className="kol-helper-10 text-fg-48 truncate">{meta}</span>
@@ -163,7 +220,9 @@ function Row({ icon, label, active, cursor = false, trailing, onClick, muted = f
       ) : (
         <span className="kol-mono-12 flex-1 truncate">{label}</span>
       )}
-      {trailing}
+
+      {/* ZONE 4 */}
+      {zones ? <span className="shrink-0 inline-flex justify-end" style={{ width: 20 }}>{trailing}</span> : trailing}
     </li>
   )
 }
@@ -292,6 +351,27 @@ export default function ColumnBrowser({
   columnWidth = 260,
   columnWidths,
   onColumnResize,
+  /* THE TWO SEAMS THE MOBILE TICKET'S RULINGS POINT AT (ColumnBrowserMobileViews,
+   * kol-r2b2 2026-09-03). Both are questions the DS must not answer for a
+   * consumer, so neither is computed here:
+   *
+   * `thumbnailFor(o)` — a node for the 44px box, or null for the kind glyph.
+   *   WHERE a thumbnail comes from is the consumer's and it is not free: R2 and
+   *   B2 serve originals, so a 44px tile can mean downloading a 2 MB JPEG. That
+   *   repo's own mitigations (lazy originals, a resolution-set that picks the
+   *   smallest variant) and whether to buy image resizing are its calls.
+   *
+   * `folderMeta(prefix)` — the folder's own meta line, `date · N items` in the
+   *   references. Counting `objects` by prefix is O(n) per folder against a
+   *   3443-object bucket, and that repo already passes a baked folder tree
+   *   carrying files and bytes. A seam, not a computation — the ticket says so
+   *   and it is right. */
+  thumbnailFor,
+  folderMeta,
+  /* `list` (default) or `grid` below the breakpoint — item 14. 3-up, and for a
+   * media bucket the thumbnail IS the tile, so it carries counts and sizes
+   * rather than dates (§2). Above the breakpoint the columns are unaffected. */
+  stackView = 'list',
   autoFocus = false,
   className = '',
 }) {
@@ -525,6 +605,41 @@ export default function ColumnBrowser({
             </span>
           </button>
         )}
+        {stackView === 'grid' ? (
+          /* THE GRID (item 14). Flat — one level at a time, no inline expand:
+             a grid of tiles has nowhere to put a child list, which is why both
+             references drop disclosure in this view and navigate by tap. */
+          <div className="kol-column-browser-grid flex-1 overflow-y-auto">
+            {rows.filter((r) => r.kind !== 'empty').map((r) => {
+              const isFolder = r.kind === 'folder'
+              const o = r.o
+              return (
+                <button
+                  key={r.key}
+                  type="button"
+                  className={`kol-column-browser-tile${!isFolder && shown?.key === o.key ? ' is-selected' : ''}`}
+                  onClick={() => {
+                    if (isFolder) { onPrefix(r.level + r.name); return }
+                    const files = itemsAt(r.level ?? '').filter((it) => it.type === 'file').map((it) => it.o)
+                    pick(o)
+                    onQuickLook?.({ files: files.length ? files : [o], index: Math.max(0, files.findIndex((f) => f.key === o.key)) })
+                  }}
+                >
+                  <span className="kol-column-browser-tile-box">
+                    {isFolder
+                      ? <Icon name="folder" size={28} className="text-fg-48" />
+                      : (thumbnailFor?.(o) ?? <Icon name={COL_ICON[kindOf(o)] || 'file'} size={28} className="text-fg-48" />)}
+                  </span>
+                  <span className="kol-mono-12 truncate">{isFolder ? r.name.replace(/\/$/, '') : (o.displayKey ?? o.key)}</span>
+                  {/* counts for a folder, size for a file — never dates (§2) */}
+                  <span className="kol-helper-10 text-fg-48 truncate">
+                    {isFolder ? folderMeta?.(r.level + r.name, 'grid') : (o.size != null ? formatSize(o.size) : '')}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        ) : (
         <ul className="kol-column-browser-column flex-1 overflow-y-auto">
           {rows.map((r) =>
             r.kind === 'empty' ? (
@@ -532,20 +647,25 @@ export default function ColumnBrowser({
             ) : r.kind === 'folder' ? (
               <Row
                 key={r.key}
+                zones
                 icon="folder"
                 label={r.name.replace(/\/$/, '')}
                 indent={r.depth}
                 active={r.open}
-                trailing={<Icon name={r.open ? 'chevron-down' : 'chevron-right'} size={12} className="text-fg-32" />}
-                /* the same chevron opens and collapses — tapping the open
-                 * folder returns to its parent level, which is the whole
-                 * inline-expand gesture */
-                onClick={() => onPrefix(r.open ? r.level : r.level + r.name)}
+                meta={folderMeta?.(r.level + r.name)}
+                /* DISCLOSURE IS ITS OWN TARGET (item 11): the chevron expands
+                 * in place, the ROW opens the folder. One control doing both is
+                 * what left no way to peek without leaving where you are. */
+                disclosed={r.open}
+                onDisclose={() => onPrefix(r.open ? r.level : r.level + r.name)}
+                onClick={() => onPrefix(r.level + r.name)}
               />
             ) : (
               <Row
                 key={r.key}
+                zones
                 icon={COL_ICON[kindOf(r.o)] || 'file'}
+                thumb={thumbnailFor?.(r.o)}
                 label={r.o.displayKey ?? r.o.key}
                 indent={r.depth}
                 meta={metaOf(r.o)}
@@ -563,6 +683,7 @@ export default function ColumnBrowser({
             ),
           )}
         </ul>
+        )}
       </div>
     )
   }

package/src/utilities/Popover.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { toneClass } from './tone.js'
 import {
   useFloating,
   autoUpdate,
@@ -189,6 +190,14 @@ export function PopoverPanel({
   panel = true,
   modal = false,
   focus = true,
+  /* THE FLOATING SURFACE'S GROUND (editor-chrome-review, kol-fxr 2026-09-03 —
+   * the user on the Editor / Labs / Randomiser list: *"can we change it border
+   * oq-04 and background as tone prop?"*). The panel painted
+   * `surface-secondary` unconditionally, which in dark is LIGHTER than the bar
+   * it drops from, so the layering read inverted. Unset it still does exactly
+   * that, so nothing existing moves; a tone paints that tone's ground instead,
+   * through the same `toneClass` every other control uses. */
+  tone,
   className = '',
   style: extraStyle,
 }) {
@@ -199,7 +208,7 @@ export function PopoverPanel({
    * carries the stacking guarantee — floats must top overlay chrome
    * (.kol-overlay z-100), or a dropdown inside a FullscreenOverlay renders
    * under the sheet and its options can't be clicked. */
-  const cls = ['kol-popover-float', panel && 'kol-popover', className].filter(Boolean).join(' ')
+  const cls = ['kol-popover-float', panel && 'kol-popover', tone && toneClass(tone), className].filter(Boolean).join(' ')
 
   /* `data-editor-keep-selection` mirrors the marker on the EditorShell
    * root. Popovers render via FloatingPortal (mounted on <body>, outside