@kolkrabbi/kol-component 0.327.0 → 0.329.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.327.0",
+  "version": "0.329.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -27,8 +27,8 @@
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
     "@kolkrabbi/kol-growth": "^0.4.0",
-    "@kolkrabbi/kol-markdown": "^0.2.0",
-    "@kolkrabbi/kol-search": "^0.3.0"
+    "@kolkrabbi/kol-search": "^0.3.0",
+    "@kolkrabbi/kol-markdown": "^0.2.0"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",

package/src/atoms/OriginPicker.jsx

@@ -0,0 +1,111 @@
+import { useRef } from 'react'
+import { toneClass } from '../utilities/tone.js'
+
+const STEPS = [0, 0.5, 1]
+const X_NAME = ['left', 'center', 'right']
+const Y_NAME = ['top', 'center', 'bottom']
+const pointName = (xi, yi) => (xi === 1 && yi === 1 ? 'center' : `${X_NAME[xi]} ${Y_NAME[yi]}`)
+
+/* box padding + cell + dot per rung: 2·pad + 3·cell = the field's height (22 · 26 · 32; touch 32 · 32 · 36).
+ * The xs touch lift skips a hardware panel, as Input's does. */
+const SIZE = {
+  xs: 'p-[2px] [--op-cell:6px] [--op-dot:4px] rounded-[var(--kol-radius-xs)] pointer-coarse:not-[.kol-hw-panel_*]:p-px pointer-coarse:not-[.kol-hw-panel_*]:[--op-cell:10px] pointer-coarse:not-[.kol-hw-panel_*]:[--op-dot:6px]',
+  sm: 'p-px [--op-cell:8px] [--op-dot:4px] rounded-[var(--kol-radius-sm)] pointer-coarse:[--op-cell:10px] pointer-coarse:[--op-dot:6px]',
+  md: 'p-px [--op-cell:10px] [--op-dot:6px] rounded-[var(--kol-radius-sm)] pointer-coarse:p-[3px]',
+}
+
+/**
+ * OriginPicker — Pick one of nine anchor points. a 3×3 transform-origin / anchor value picker.
+ *
+ * Lobby OriginPicker (kol-fxr, 2026-10-31): fxr's layer inspector hand-built it as `AnchorPicker`
+ * (nine 6 px radio dots on surface-secondary) beside its X / Y fields. `AlignmentGrid` is not it —
+ * that fires align actions and holds no value; this holds one.
+ *
+ * ON THE CONTROL RAMP. The square is exactly a field's height at the same `size`, so it sits beside
+ * an `Input` without a step: xs 22 · sm 26 · md 32 (touch 32 · 32 · 36, as the fields grow). The
+ * ground is the control's (`--kol-tone-bg`, else surface-secondary), so `tone` and a toned wrapper
+ * reach it as they reach an Input. No border — the field family has none.
+ *
+ * INKS (the icon ink law — oq, never fg): a point rests at oq-24, a hovered one lifts to oq-48, the
+ * selected one is the accent. Focus is the segmented strip's quiet ring, drawn on the square.
+ *
+ * A11y: a radiogroup of nine radios with a roving tabindex — Tab lands on the selected point,
+ * ←/→ move x and ↑/↓ move y (selection and focus together, no wrap).
+ *
+ *   <OriginPicker value={anchor} onChange={setAnchor} ariaLabel="Transform origin" size="sm" />
+ *
+ * @param {[number, number]} value - The selected point `[x, y]`, each 0 · 0.5 · 1 (0 = left / top)
+ * @param {(value:[number, number]) => void} onChange - Fired with the new `[x, y]` on click or arrow key
+ * @param {'xs'|'sm'|'md'} [size='sm'] - The control rung — the square matches a field of this size
+ * @param {string} [tone='default'] - The control set's tone (the ground); default inherits a wrapper's
+ * @param {string} [ariaLabel='Origin'] - The group's accessible name
+ * @param {string} [className] - Extra classes on the square
+ */
+export default function OriginPicker({
+  value = [0.5, 0.5],
+  onChange,
+  size = 'sm',
+  tone = 'default',
+  ariaLabel = 'Origin',
+  className = '',
+}) {
+  const refs = useRef([])
+  const sel = [STEPS.indexOf(value?.[0]), STEPS.indexOf(value?.[1])]
+
+  const pick = (xi, yi, focus) => {
+    onChange?.([STEPS[xi], STEPS[yi]])
+    if (focus) refs.current[yi * 3 + xi]?.focus()
+  }
+
+  const onKeyDown = (e, xi, yi) => {
+    const d = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key]
+    if (!d) return
+    e.preventDefault()
+    const nx = Math.min(2, Math.max(0, xi + d[0]))
+    const ny = Math.min(2, Math.max(0, yi + d[1]))
+    if (nx !== xi || ny !== yi) pick(nx, ny, true)
+  }
+
+  /* nothing valid selected → the centre takes the tab stop, so the group is still reachable */
+  const tabStop = sel[0] < 0 || sel[1] < 0 ? [1, 1] : sel
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={[
+        'kol-origin-picker inline-grid grid-cols-3 shrink-0 bg-[var(--kol-tone-bg,var(--kol-surface-secondary))]',
+        'has-[:focus-visible]:outline has-[:focus-visible]:outline-1 has-[:focus-visible]:outline-[var(--kol-focus-ring-quiet)] has-[:focus-visible]:-outline-offset-2',
+        SIZE[size] ?? SIZE.sm,
+        toneClass(tone),
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      {STEPS.map((_, yi) => STEPS.map((__, xi) => {
+        const on = sel[0] === xi && sel[1] === yi
+        const stop = tabStop[0] === xi && tabStop[1] === yi
+        return (
+          <button
+            key={`${xi}${yi}`}
+            ref={(el) => { refs.current[yi * 3 + xi] = el }}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            aria-label={pointName(xi, yi)}
+            tabIndex={stop ? 0 : -1}
+            onClick={() => pick(xi, yi, false)}
+            onKeyDown={(e) => onKeyDown(e, xi, yi)}
+            className={`group grid place-items-center p-0 border-0 bg-transparent cursor-pointer outline-none size-[var(--op-cell)]`}
+          >
+            <span
+              aria-hidden="true"
+              className={`block rounded-full transition-colors size-[var(--op-dot)] ${on
+                ? 'bg-[var(--kol-accent-primary)]'
+                : 'bg-[var(--kol-oq-24)] group-hover:bg-[var(--kol-oq-48)]'}`}
+            />
+          </button>
+        )
+      }))}
+    </div>
+  )
+}

package/src/index.js

@@ -83,6 +83,8 @@ export { default as TransparentX } from './utilities/TransparentX.jsx'
 export { default as ViewToggle } from './atoms/ViewToggle.jsx'
 /* the design-editor parts, taken per row from editor-panels-the-held-specs (2026-09-03) */
 export { default as XYPad } from './atoms/XYPad.jsx'
+/* lobby OriginPicker (kol-fxr, 2026-10-31) — the 3×3 origin / anchor value picker */
+export { default as OriginPicker } from './atoms/OriginPicker.jsx'
 export { default as InspectorRail } from './molecules/InspectorRail.jsx'
 /* SelectionOverlay's two siblings — same 1080-virtual contract, same zoom
  * division (editor-panels-the-held-specs B2). `pathMath` is their geometry,

package/src/organisms/NavRail.jsx

@@ -82,6 +82,7 @@ import NavRailSite from './NavRailSite.jsx'
  * EXPANDS (its rows open under it in place) and COLLAPSES. No other words, in code or docs.
  *
  * @param {'app'|'site'|'workshop'} preset  which rail (default `app`); `variant="site"` is the old spelling of `preset="site"`
+ * @param {'top'} variant  `top` — the horizontal top rail (TopRail): logomark · items · `actions` (the right slot)
  * @param {Array}  items        `{ icon, path, label, sub?: [{ icon?, path, label }] }`
  *   a section (`sub`) with `to` is a FOLDER NOTE: its icon and label open `to`, its chevron expands or enters
  * @param {Array}  bottomItems  pinned below the rule (Settings)
@@ -133,8 +134,8 @@ const openWidth = () => {
  * a snap reports its target once at the start of the tween (as before) — the sub rows render only while it is true,
  * because closed they would still take their height and push the rungs below them.
  *
- * ONE AXIS: the gesture reads `pos` and `size` only. A side rail reads x and width; a top rail (variant="top", not
- * built) swaps them for y and height — nothing else in here assumes a side. */
+ * ONE AXIS: the gesture reads `pos` and `size` only. A side rail reads x and width; a top rail (variant="top" — built
+ * 2026-10-31 as `TopRail`, without a drag) would swap them for y and height — nothing else in here assumes a side. */
 const RAIL_MAX = 560
 const RAIL_LABELS = 160
 function useRailDrag(railRef, grabRef, onSnap, snapRef, enabled = true) {
@@ -321,6 +322,7 @@ export const RAIL_PRESETS = {
 export function registerRailPreset(name, Component) { RAIL_PRESETS[name] = { ...(RAIL_PRESETS[name] ?? {}), component: Component } }
 
 export default function NavRail({ variant, preset, ...props }) {
+  if (variant === 'top') return <TopRail {...props} />
   const name = preset ?? (variant === 'site' ? 'site' : 'app')
   if (name === 'app') return <AppRail {...props} sections={props.sections ?? RAIL_PRESETS.app.sections} />
   const Named = RAIL_PRESETS[name]?.component
@@ -328,6 +330,37 @@ export default function NavRail({ variant, preset, ...props }) {
   return <Named {...props} />
 }
 
+/* THE TOP RAIL (`variant="top"`, 2026-10-31 — user: *"it would have to be a TopNavRail? and completely rebuilt with Rail
+ * Component? so we wouldnt ever import this, but make something in its stead"*). Replaces Atlas's /lab header ("Lab bar"
+ * in Figma): the rail's own parts laid out on a row, 48 tall — the mark and the app name (the side rail's logomark row),
+ * the items as rail rows (a nav Button rung + the rail label), then `actions` on the right (views / menus — a `Menu` with
+ * a `MenuTrigger`). Same type and inks as the side rail; no grab, no drag. A row's `sub` is not drawn here. */
+function TopRail({ items = [], logomark, currentPath = '', onNavigate, iconComponent, actions, hidden = false, className = '' }) {
+  if (hidden) return null
+  return (
+    <header className={`kol-shell-rail kol-shell-rail--top bg-surface-primary sticky top-0 flex h-12 w-full items-center gap-6 px-4 border-b border-fg-08 ${className}`.trim()}>
+      {logomark && (
+        <div onClick={() => onNavigate?.('/')} className="text-oq-96 cursor-pointer flex items-center gap-3 shrink-0">
+          {logomark.svgUrl && <VectorLoader src={logomark.svgUrl} size={20} />}
+          <span className="kol-helper-12 uppercase">{logomark.title}</span>
+        </div>
+      )}
+      <nav className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
+        {items.map(({ icon, path, label }) => {
+          const active = path === '/' ? currentPath === '/' : currentPath.startsWith(path)
+          return (
+            <div key={path} className="flex items-center gap-2 shrink-0 cursor-pointer" onClick={() => onNavigate?.(path)}>
+              {icon && <Button iconOnly={icon} iconSize={RAIL_ROW.glyph} iconComponent={iconComponent} variant="nav" size="md" aria-current={active ? 'page' : undefined} aria-label={label} />}
+              <span className={`${RAIL_ROW.label} text-oq-96`}>{label}</span>
+            </div>
+          )
+        })}
+      </nav>
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+    </header>
+  )
+}
+
 function AppRail({
   items = [],
   bottomItems = [],