@kolkrabbi/kol-component 0.317.0 → 0.317.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.317.0",
+  "version": "0.317.2",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.53.0"
+    "@kolkrabbi/kol-icons": "^0.53.2"
   },
   "files": [
     "src",

package/src/molecules/TabsRow.jsx

@@ -32,7 +32,8 @@ import { RAIL_ROW } from '../hooks/railRow.js'
  *   Every look but `stacked`, which has its phone bar
  * @param {'underline'|'chip'|'text'|'stacked'} [look='underline']
  * @param {boolean} [filled=false] - `chip` only: every chip shows at rest (Button `tab-filled`), so the row reads as choices
- *        underline — this row, as it always was; a tab's `icon` sits before its label
+ *        underline — this row, as it always was; a tab's `icon` sits before its label. `size="md"` is the sans body
+ *        face with a 20px glyph in a 48px row (the user's ref, Adobe's tab strip, 2026-10-29)
  *        chip      — the active tab a filled chip, the rest quiet (was `TabChips`); `size` is the control rung
  *        text      — flat helper-type tabs, the active one bright (was kol-shell's `TabStrip`); `size` is the
  *                    helper size (default 14), `tracked` adds 1px tracking
@@ -76,7 +77,7 @@ export default function TabsRow({ tabs: raw = [], value, onChange, onClose, onMi
   if (look === 'chip') return <Overflow mode={overflow} value={value}><ChipTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 'sm'} filled={filled} ariaLabel={ariaLabel} className={`${wrap ? 'flex-wrap ' : ''}${className ?? ''}`} /></Overflow>
   if (look === 'text') return <Overflow mode={overflow} value={value}><TextTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 14} tracked={tracked} className={`${wrap ? 'flex-wrap gap-y-2 ' : ''}${className ?? 'gap-6'}`} style={style} /></Overflow>
   if (look === 'stacked') return <StackedTabs tabs={tabs} value={value} onChange={onChange} placement={placement} shape={shape} collapsed={collapsed} onExpand={onExpand} edge={edge} border={border} shadow={shadow} dock={dock} active={active} foldable={foldable} folded={folded} onFoldChange={onFoldChange} foldSide={foldSide} ariaLabel={ariaLabel} className={className ?? ''} />
-  return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} /></Overflow>
+  return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} size={size} /></Overflow>
 }
 
 /* `overflow="scroll"`: the row in a sideways scroller that fades its clipped edges and keeps the active tab (`data-active`)
@@ -264,7 +265,10 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
   )
 }
 
-function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap }) {
+function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size }) {
+  /* `size="md"` (2026-10-29, the user's ref — Adobe's tab strip): the sans body face at medium weight, a 20px glyph at a
+   * 2 stroke (`.kol-tab-md`, the theme), a 48px row, 24 between tabs — review 8: *"the problem … was thickness and stroke"* */
+  const md = size === 'md'
   const listRef = useRef(null)
   const activeIdx = tabs.findIndex((t) => t.id === value)
 
@@ -278,14 +282,14 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap }) {
   }
 
   return (
-    <div className={`flex items-stretch gap-4 ${wrap ? 'min-h-10' : 'h-10'}`}>
+    <div className={`flex items-stretch gap-4 ${wrap ? (md ? 'min-h-12' : 'min-h-10') : md ? 'h-12' : 'h-10'}`}>
       {onClose && (
         /* the one close, at the rung whose glyph is the 12 this hand-rolled
          * (2026-09-03) — xs SOLO is 12, so the drawing does not move */
         <CloseButton onClick={onClose} size="xs" className="self-center" />
       )}
 
-      <div ref={listRef} role="tablist" onKeyDown={onKeyDown} className={`flex items-stretch gap-4${wrap ? ' flex-wrap gap-y-1' : ''}`}>
+      <div ref={listRef} role="tablist" onKeyDown={onKeyDown} className={`flex items-stretch ${md ? 'gap-6' : 'gap-4'}${wrap ? ' flex-wrap gap-y-1' : ''}`}>
         {tabs.map((t, i) => {
           const isActive = t.id === value
           return (
@@ -298,7 +302,7 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap }) {
               tabIndex={isActive || (activeIdx === -1 && i === 0) ? 0 : -1}
               onClick={() => onChange?.(t.id)}
               className={[
-                'group kol-mono-12 flex items-center gap-2 cursor-pointer border-b-2',
+                `group ${md ? 'kol-tab-md kol-sans-body-02 font-medium gap-2.5' : 'kol-mono-12 gap-2'} flex items-center cursor-pointer border-b-2`,
                 isActive
                   ? 'text-emphasis border-fg'
                   : 'text-meta hover:text-emphasis border-transparent',
@@ -306,7 +310,7 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap }) {
             >
               {/* a tab may carry its glyph before the label (2026-10-29, Adobe's Base color · Image · Color wheel) */}
               {/* the glyph in OPAQUE ink (icons take oq, never fg) — full when active, meta otherwise, full under the pointer */}
-              {t.icon && <Icon name={t.icon} size={16} className={isActive ? 'text-oq-96' : 'text-oq-48 group-hover:text-oq-96'} />}
+              {t.icon && <Icon name={t.icon} size={md ? 20 : 16} className={isActive ? 'text-oq-96' : 'text-oq-48 group-hover:text-oq-96'} />}
               {t.label}
             </button>
           )

package/src/organisms/ColorPickerPopover.jsx

@@ -4,7 +4,7 @@ import Input from '../atoms/Input.jsx'
 import Slider from '../molecules/Slider.jsx'
 import Dropdown from '../molecules/Dropdown.jsx'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { usePopover, PopoverPanel, Tooltip } from '../utilities/Popover.jsx'
+import { usePopover, PopoverPanel } from '../utilities/Popover.jsx'
 import { HueStrip, SBSquare, AlphaStrip } from './SpectrumControls.jsx'
 import { hexToHsva, hsvaToHex } from '../hooks/colorMath.js'
 import { resolveCssColor } from '../hooks/cssVar.js'
@@ -50,6 +50,9 @@ const CHANNELS = {
 }
 
 /* one channel: its letter, a strip painted with the channel's own range at the current colour, a thumb, its number */
+/* brightness — Adobe's ☀ ramp under the hue strip in HEX and RGB: HSV value, black to the colour at full brightness */
+const BRIGHTNESS = { key: 'B', label: 'Brightness', icon: 'brightness', min: 0, max: 100, read: (_, h) => h.val, write: null, hsva: (h, v) => ({ ...h, val: v }) }
+
 function ChannelStrip({ ch, hex, hsva, onHsva }) {
   const ref = useRef(null)
   const value = ch.read(hex, hsva)
@@ -63,17 +66,16 @@ function ChannelStrip({ ch, hex, hsva, onHsva }) {
   const pct = ((value - ch.min) / (ch.max - ch.min)) * 100
   return (
     <div className="flex items-center gap-2">
-      <span className="w-3 kol-mono-12 text-meta">{ch.key}</span>
-      <div ref={ref} role="slider" aria-label={ch.key} aria-valuemin={ch.min} aria-valuemax={ch.max} aria-valuenow={Math.round(value)} tabIndex={0}
+      <span className="flex w-4 shrink-0 items-center kol-mono-12 text-meta">{ch.icon ? <Icon name={ch.icon} size={16} className="text-oq-64" /> : ch.key}</span>
+      <div ref={ref} role="slider" aria-label={ch.label ?? ch.key} aria-valuemin={ch.min} aria-valuemax={ch.max} aria-valuenow={Math.round(value)} tabIndex={0}
         className="relative h-4 flex-1 cursor-pointer rounded-full touch-none" style={{ background: `linear-gradient(to right, ${stops.join(', ')})` }}
         onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); fromPointer(e) }}
         onPointerMove={(e) => { if (e.currentTarget.hasPointerCapture(e.pointerId)) fromPointer(e) }}
         onKeyDown={(e) => { const d = { ArrowRight: 1, ArrowUp: 1, ArrowLeft: -1, ArrowDown: -1 }[e.key]; if (d) { e.preventDefault(); set(value + d * (e.shiftKey ? 10 : 1)) } }}>
         <span className="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ left: `${pct}%`, boxShadow: '0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.35)', background: hex.slice(0, 7) }} />
       </div>
-      <div className="w-14 shrink-0">
-        <Input size="sm" type="number" value={Math.round(value)} aria-label={`${ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
-      </div>
+      {/* the box hugs three characters by the Input's own `chars` — a utility width is not guaranteed in every consumer (review 8, ref 81) */}
+      <Input size="sm" type="number" chars={3} value={Math.round(value)} aria-label={`${ch.label ?? ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
     </div>
   )
 }
@@ -198,36 +200,27 @@ export default function ColorPickerPopover({ color, onChange, defaultValue, size
   )
 
   if (inline) {
-    /* THE EDITOR COLOUR PANEL'S SHAPE (review 5 — *"did you check the editor color panel"*, design-editor's ColourBody):
-     * the top row is the swatch, the eyedropper (where the browser has one) and, on the right, the `#` hex at six
-     * characters and the end control; the mode a full-width Dropdown under it; then the hue strip over the square */
-    const eyedrop = typeof window !== 'undefined' && 'EyeDropper' in window
-    const pick = async () => {
-      try {
-        const { sRGBHex } = await new window.EyeDropper().open()
-        const next = hexToHsva(sRGBHex)
-        if (next) commit({ ...next, alpha: hsva.alpha })
-      } catch { /* cancelled */ }
-    }
+    /* ADOBE'S BASE COLOR PANEL (review 7, refs 68–72): the label row — the name, the mode as plain text at the right;
+     * in HEX, ONE field: the swatch, the hex, the lock (Input's slotLeft · slotRight); the square, THEN the hue strip;
+     * the mode's channels under them (RGB · HSB · Lab), and brightness — the ☀ ramp — in HEX and RGB */
+    const hexField = (!modes || mode === 'hex') && (
+      <Input size="md" prefix="#" maxLength={8} value={draft} onChange={onHex} aria-label={`${label} hex`} width="100%"
+        slotLeft={<ColorSwatch hex={isNone ? null : color} size={SWATCH.xs} radius="full" hoverable={false} />}
+        slotRight={hexEnd} />
+    )
     return hsva && (
       <div className={`flex w-full flex-col gap-3 ${className}`.trim()}>
-        <div className="flex items-center gap-3">
-          <ColorSwatch hex={isNone ? null : color} size={SWATCH.sm} hoverable={false} className="shrink-0 border border-[var(--kol-border-default)]" />
-          {eyedrop && (
-            <Tooltip label="Pick a colour from the screen">
-              <button type="button" onClick={pick} aria-label="Eyedropper" className="inline-flex cursor-pointer text-oq-64 hover:text-oq-96"><Icon name="eyedrop" size={20} /></button>
-            </Tooltip>
-          )}
-          <span className="ml-auto" />
-          <Input size="sm" prefix="#" chars={6} maxLength={8} value={draft} onChange={onHex} aria-label={`${label} hex`} />
-          {hexEnd}
+        <div className="flex items-center justify-between gap-3">
+          <span className="kol-eyebrow text-fg-80">{title ?? label}</span>
+          {modes && <Dropdown variant="nav" size="sm" value={mode} onChange={setMode} options={PICKER_MODES} ariaLabel={`${label} mode`} />}
         </div>
-        {modes && <Dropdown size="sm" value={mode} onChange={setMode} options={PICKER_MODES} className="w-full" ariaLabel={`${label} mode`} />}
-        <HueStrip hue={hsva.hue} onChange={(hue) => commit({ ...hsva, hue })} />
+        {hexField}
         <div className="w-full overflow-hidden rounded-[var(--kol-radius-xs)]" style={{ height: 200 }}>
           <SBSquare hue={hsva.hue} sat={hsva.sat} val={hsva.val} onChange={(sat, val) => commit({ ...hsva, sat, val })} />
         </div>
+        <HueStrip hue={hsva.hue} onChange={(hue) => commit({ ...hsva, hue })} />
         {modes && mode !== 'hex' && CHANNELS[mode].map((ch) => <ChannelStrip key={ch.key} ch={ch} hex={hsvaToHex({ ...hsva, alpha: 1 })} hsva={hsva} onHsva={commit} />)}
+        {(!modes || mode === 'hex' || mode === 'rgb') && <ChannelStrip ch={BRIGHTNESS} hex={hsvaToHex({ ...hsva, alpha: 1 })} hsva={hsva} onHsva={commit} />}
         {alpha && <AlphaStrip alpha={hsva.alpha} color={opaque} onChange={(a) => commit({ ...hsva, alpha: a })} />}
       </div>
     )