@kolkrabbi/kol-component 0.224.0 → 0.226.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.224.0",
+  "version": "0.226.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -35,7 +35,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.27.1"
+    "@kolkrabbi/kol-icons": "^0.28.0"
   },
   "files": [
     "src",

package/src/atoms/ColorSwatch.jsx

@@ -40,6 +40,7 @@
  *   title           — passes through.
  */
 import TransparentX from '../utilities/TransparentX'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 const SIZE_CLASSES = {
   fill:    'w-full aspect-square',
@@ -122,11 +123,11 @@ export default function ColorSwatch({
 
   if (interactive) {
     return (
+      <Tooltip label={title} asChild>
       <button
         {...rest}
         type="button"
         onClick={onClick}
-        title={title}
         aria-label={rest['aria-label'] ?? hex ?? 'transparent'}
         aria-pressed={selected}
         className={cls}
@@ -134,12 +135,15 @@ export default function ColorSwatch({
       >
         {inner}
       </button>
+      </Tooltip>
     )
   }
 
   return (
-    <span {...rest} aria-hidden="true" title={title} className={cls} style={style}>
+    <Tooltip label={title} asChild>
+    <span {...rest} aria-hidden="true" className={cls} style={style}>
       {inner}
     </span>
+    </Tooltip>
   )
 }

package/src/atoms/SelectionOverlay.jsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import { CanvasZoomContext } from '../hooks/canvasZoom.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /* taxonomy-ok: presentational transform-chrome overlay. It nests no KOL
  * component (pure inline-styled squares + label), so by the letter of the
@@ -110,9 +111,9 @@ export default function SelectionOverlay({
         * the box about its centre. Independent of the resize handles: a path
         * hides those (node-edit owns their geometry) and still rotates. */}
       {rotate && (
+        <Tooltip label={rotateTitle} asChild>
         <div
           data-handle="ROT"
-          title={rotateTitle}
           style={{
             position: 'absolute',
             left: `calc(50% - ${size / 2}px)`,
@@ -126,6 +127,7 @@ export default function SelectionOverlay({
             pointerEvents: 'auto',
           }}
         />
+        </Tooltip>
       )}
       {showHandles && HANDLE_DIRS.map(({ dir, cursor, x: hx, y: hy }) => (
         <div

package/src/atoms/XYPad.jsx

@@ -76,14 +76,14 @@ export default function XYPad({
         ref={ref}
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
-        className="relative w-full aspect-square border border-fg-16 bg-fg-04 rounded cursor-crosshair touch-none"
+        className="relative w-full aspect-square border border-oq-16 bg-fg-04 rounded cursor-crosshair touch-none"
       >
         {/* crosshair guides */}
-        <div className="absolute inset-x-0 top-1/2 border-t border-fg-08" />
-        <div className="absolute inset-y-0 left-1/2 border-l border-fg-08" />
+        <div className="absolute inset-x-0 top-1/2 border-t border-oq-08" />
+        <div className="absolute inset-y-0 left-1/2 border-l border-oq-08" />
         {/* puck */}
         <div
-          className="absolute w-3 h-3 -ml-1.5 -mt-1.5 rounded-full bg-fg-96 border border-fg-04 pointer-events-none"
+          className="absolute w-3 h-3 -ml-1.5 -mt-1.5 rounded-full bg-fg-96 border border-oq-04 pointer-events-none"
           style={{ left: `${puckX}%`, top: `${puckY}%` }}
         />
       </div>

package/src/index.js

@@ -166,7 +166,7 @@ export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPi
 /* the full-screen file viewer — public 2026-09-04 (user ruling): it already
  * rendered both mobile viewer views and was module-private, so every consumer
  * needing a phone viewer hand-rolled one. */
-export { MediaInspector } from './organisms/MediaLibraryPages.jsx'
+export { MediaInspector, mediaSettingsSections, SETTINGS_BASE as MEDIA_SETTINGS_BASE } from './organisms/MediaLibraryPages.jsx'
 export { default as MediaLibraryExplorer } from './organisms/MediaLibraryExplorer.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'

package/src/molecules/ColorInputRow.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from '../atoms/ColorSwatch'
 import Input from '../atoms/Input'
-import { usePopover, PopoverPanel } from '../utilities/Popover'
+import { usePopover, PopoverPanel, Tooltip } from '../utilities/Popover'
 
 /**
  * ColorInputRow — swatch chip + `#` hex input row. The single merged form of
@@ -150,11 +150,11 @@ export default function ColorInputRow({
       {chip(24)}
     </button>
   ) : isLockToggle ? (
+    <Tooltip label={locked ? 'Unlock' : 'Lock'} asChild>
     <button
       type="button"
       onClick={onToggleLock}
       aria-pressed={locked}
-      title={locked ? 'Unlock' : 'Lock'}
       className="group relative inline-flex h-6 w-6 shrink-0"
     >
       {chip('stretch')}
@@ -167,6 +167,7 @@ export default function ColorInputRow({
         <Icon name={locked ? 'lock' : 'unlock'} size={12} />
       </span>
     </button>
+    </Tooltip>
   ) : (
     chip(24)
   )

package/src/molecules/Dropdown.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { toneClass, TONE_VARS } from '../utilities/tone.js'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { MenuDropdownItem } from './MenuItem.jsx'
+import { MenuDropdownItem, MenuDropdownDivider } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 import { glyphSize, indicatorSize } from '../hooks/glyphLadders.js'
 
@@ -160,7 +160,11 @@ const Dropdown = ({
     onOptionHover?.(null)
   }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const currentOption = options.find((opt) => opt.value === value) || options[0]
+  /* `{ divider: true }` in `options` draws a hairline between groups (FoundationsTones, 2026-09-26 —
+   * user: none on top, the filled tones in order, outline and ghost apart). It is never a choice:
+   * the lookup, the fallback and the trigger's width all read the choices only. */
+  const choices = options.filter((opt) => !opt?.divider)
+  const currentOption = choices.find((opt) => opt.value === value) || choices[0]
 
   /* A clamped list (Popover caps the panel to the viewport) can open with the
    * checked row past the fold — scroll it into reach. Keyboard focus after
@@ -168,7 +172,7 @@ const Dropdown = ({
   const listRef = useRef(null)
   useEffect(() => {
     if (!isOpen) return
-    const idx = options.findIndex((opt) => opt.value === currentOption?.value)
+    const idx = options.findIndex((opt) => !opt?.divider && opt.value === currentOption?.value)
     listRef.current?.children[idx]?.scrollIntoView({ block: 'nearest' })
   }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -215,7 +219,7 @@ const Dropdown = ({
               * trigger and list stay one piece at every selection */}
             <span className="kol-dd-label">
               <span>{currentOption?.label}</span>
-              {options.map((option) => (
+              {choices.map((option) => (
                 <span key={option.value} className="kol-dd-ghost" aria-hidden="true">
                   {option.label}
                 </span>
@@ -247,7 +251,8 @@ const Dropdown = ({
         {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
 
         <div ref={listRef} className="kol-dd-list" role="listbox">
-          {options.map((option) => {
+          {options.map((option, i) => {
+            if (option?.divider) return <MenuDropdownDivider key={`divider-${i}`} />
             const isActive = option.value === currentOption?.value
             return (
               <MenuDropdownItem

package/src/molecules/FieldRow.jsx

@@ -148,7 +148,7 @@ export default function FieldRow({
       onClick={onPick}
       /* reference empty tile: FILLED, no border — a plain grey slab with the
        * + centred (frame 2026-08-09) */
-      className="flex h-18 w-34 items-center justify-center rounded border-0 bg-fg-04 text-body transition-colors duration-150 enabled:cursor-pointer enabled:hover:text-emphasis disabled:opacity-60"
+      className="flex h-18 w-34 items-center justify-center rounded border-0 bg-fg-04 text-oq-64 transition-colors duration-150 enabled:cursor-pointer enabled:hover:text-emphasis disabled:opacity-60"
     >
       <Icon name="plus" size={16} />
     </button>
@@ -217,7 +217,7 @@ export default function FieldRow({
             type="button"
             aria-label={label}
             onClick={() => onChange(null)}
-            className="inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 text-body hover:text-emphasis"
+            className="inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 text-oq-64 hover:text-emphasis"
           >
             <Icon name="x" size={12} />
           </button>

package/src/molecules/InspectorSection.jsx

@@ -17,12 +17,23 @@
  * ponytail: a `SectionStack` parent could own this instead of each child
  * declaring it — that is the upgrade path if a consumer ever needs the stack
  * to vary the rule per-gap. One prop is a smaller API than a new component.
+ *
+ * @param {ReactNode} label    the group's name
+ * @param {ReactNode} actions  controls on the label's row, right-aligned
+ * @param {boolean}   divided  a hairline between divided siblings
+ * @param {string}    className
  */
-export default function InspectorSection({ label, children, divided = false, className = '' }) {
+export default function InspectorSection({ label, actions = null, children, divided = false, className = '' }) {
   return (
     <div className={`flex flex-col gap-2${divided ? ' kol-section--divided' : ''} ${className}`}>
-      {label && (
-        <p className="kol-helper-10 tracking-widest text-meta">{label}</p>
+      {/* `actions` — controls on the label's row, right-aligned (Figma's eye / plus on Fill and
+        * Stroke). From the design editor's own Section, retired into this (editor DS sync,
+        * 2026-09-27). */}
+      {(label || actions) && (
+        <div className="flex items-center gap-2 min-h-6">
+          {label && <p className="kol-helper-10 tracking-widest text-meta flex-1">{label}</p>}
+          {actions}
+        </div>
       )}
       {children}
     </div>

package/src/molecules/MenuItem.jsx

@@ -51,7 +51,7 @@ export function MenuItem({
         ref={popover.refs.setReference}
         {...popover.getReferenceProps()}
         type="button"
-        className={`kol-helper-12 px-3 h-8 inline-flex items-center gap-2 rounded text-body hover:text-emphasis transition-colors ${buttonClassName}`}
+        className={`kol-menu-btn kol-helper-12 px-3 h-8 inline-flex items-center gap-2 rounded text-body hover:text-emphasis transition-colors ${buttonClassName}`}
       >
         <span>{label}</span>
         {caret && (
@@ -125,7 +125,7 @@ export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disa
       disabled={disabled}
       role="menuitem"
       style={height != null ? { height } : undefined}
-      className={`w-full ${ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
+      className={`kol-menu-btn w-full ${ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
     >
       {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
       {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}
@@ -140,7 +140,7 @@ export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disa
 }
 
 export function MenuDropdownDivider() {
-  return <div className="border-t border-fg-08 my-1" />
+  return <div className="border-t border-oq-08 my-1" />
 }
 
 /**
@@ -161,7 +161,7 @@ export function MenuDropdownNest({ prefix, iconLeft, label, children }) {
         type="button"
         onClick={() => setOpen((v) => !v)}
         aria-expanded={open}
-        className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis text-left"
+        className="kol-menu-btn w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis text-left"
       >
         {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
         {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}
@@ -175,7 +175,7 @@ export function MenuDropdownNest({ prefix, iconLeft, label, children }) {
         />
       </button>
       {open && (
-        <div className="ml-3 border-l border-fg-08">
+        <div className="ml-3 border-l border-oq-08">
           {children}
         </div>
       )}

package/src/molecules/SearchInput.jsx

@@ -245,7 +245,7 @@ export default function SearchInput({
           /* preventDefault on mousedown keeps focus in the input across the clear */
           onMouseDown={(e) => e.preventDefault()}
           onClick={onClear}
-          className="inline-flex items-center justify-center shrink-0 cursor-pointer text-fg-48 hover:text-fg-96 transition-colors"
+          className="inline-flex items-center justify-center shrink-0 cursor-pointer text-oq-48 hover:text-oq-96 transition-colors"
         >
           <Icon name="x" size={12} />
         </button>

package/src/molecules/SectionText.jsx

@@ -101,6 +101,8 @@ export default function SectionText({
   const cls = (base, slot) => `${base} ${slotClass[slot] ?? (slot === 'eyebrow' ? slotClass.label : undefined) ?? ''}`.trim()
   const alignCls = align === 'center' ? 'items-center text-center' : 'items-start text-left'
   const inlineActions = actionsPlacement === 'inline' && !!actions && !!body
+  const inlineHead = actionsPlacement === 'inline' && !!actions && !body && !!headline
+  const headlineNode = headline && <Headline className={cls(`kol-section-text-headline ${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>
   const bodyNode = body && (typeof body === 'string'
     ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p>
     : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)
@@ -112,18 +114,33 @@ export default function SectionText({
       {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
         * `labelClass` is the voice riding beside it */}
       {eb && <span className={cls(`kol-section-text-eyebrow ${ebClass}`, 'eyebrow')} style={slotStyle.eyebrow ?? slotStyle.label}>{eb}</span>}
-      {headline && <Headline className={cls(`kol-section-text-headline ${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
+      {headlineNode && (inlineHead
+        ? (
+          /* INLINE WITH NO BODY → the cluster shares the HEADLINE's row (the tool frame, 2026-09-27 —
+           * a tool's masthead is its title with its controls on the right, apps/media's). This
+           * comment used to sit on the fallthrough below, which stacked the cluster under the
+           * headline instead: the docstring promised a row the code never drew. It WRAPS: on a
+           * phone a wide cluster drops under the title rather than pushing the page sideways. */
+          <div className="flex flex-wrap self-stretch items-baseline justify-between gap-x-6 gap-y-3">
+            {headlineNode}
+            <div className={cls(`${actionsClass} shrink-0`, 'actions')} style={slotStyle.actions}>{actions}</div>
+          </div>
+        )
+        : headlineNode)}
       {bodyNode && (inlineActions
         ? (
-          <div className="flex items-baseline justify-between gap-6">
+          /* SELF-STRETCH (the Hub review, 2026-09-26 — user, on fxr's /settings: "there should
+           * have been space between … on the right edge"). The column is `items-start`, so this
+           * row shrank to its content and `justify-between` had no room to act: the cluster sat
+           * against the subtitle on every PageHeader with actions. */
+          <div className="flex self-stretch items-baseline justify-between gap-6">
             {bodyNode}
             {cluster}
           </div>
         )
         : bodyNode)}
       {children}
-      {/* inline with no body → the cluster shares the HEADLINE's row instead */}
-      {actions && !inlineActions && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}
+      {actions && !inlineActions && !inlineHead && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}
     </div>
   )
 }

package/src/molecules/ShapeDropdown.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
-import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
+import { PopoverPanel, usePopover, Tooltip } from '../utilities/Popover.jsx'
 import { MenuDropdownItem } from './MenuItem.jsx'
 
 /**
@@ -44,15 +44,16 @@ const ShapeDropdown = ({ options = [], value, onChange, onAction, className = ''
   return (
     <div className={`inline-flex items-center ${className}`.trim()}>
       {current?.icon ? (
+        <Tooltip label={current.label}>
         <Button
           variant="ghost"
           size="sm"
           quiet
           iconOnly={current.icon}
           aria-label={current.label}
-          title={current.label}
           onClick={() => onAction?.(current.id)}
         />
+        </Tooltip>
       ) : (
         <Button variant="ghost" size="sm" quiet onClick={() => onAction?.(current?.id)}>
           {current?.label}

package/src/molecules/SplitToolButton.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
+import { PopoverPanel, usePopover, Tooltip } from '../utilities/Popover.jsx'
 import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
@@ -121,6 +121,7 @@ const SplitToolButton = ({
 
   return (
     <>
+      <Tooltip label={title} asChild>
       <button
         ref={popover.refs.setReference}
         {...popover.getReferenceProps({ onClick: handleTriggerClick })}
@@ -129,11 +130,11 @@ const SplitToolButton = ({
         disabled={disabled}
         aria-pressed={onTrigger ? undefined : active}
         aria-label={label}
-        title={title}
       >
         {triggerVariant && <IconC name={triggerVariant.icon} size={glyphSize(size, true)} />}
         <FoldIndicator />
       </button>
+      </Tooltip>
       {/* w-max — floats size to content, the menu-family law (2026-08-09). */}
       <PopoverPanel
         popover={popover}

package/src/molecules/Stepper.jsx

@@ -123,7 +123,7 @@ export default function Stepper({
         <button
           type="button"
           onClick={handleIncrement}
-          className="flex items-center justify-center text-meta hover:text-emphasis transition-colors"
+          className="flex items-center justify-center text-oq-48 hover:text-emphasis transition-colors"
           aria-label="Increment"
         >
           <Icon name="chevron-up" size={chevronWidth} />
@@ -131,7 +131,7 @@ export default function Stepper({
         <button
           type="button"
           onClick={handleDecrement}
-          className="flex items-center justify-center text-meta hover:text-emphasis transition-colors"
+          className="flex items-center justify-center text-oq-48 hover:text-emphasis transition-colors"
           aria-label="Decrement"
         >
           <Icon name="chevron-down" size={chevronWidth} />

package/src/molecules/SwatchControls.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from '../atoms/ColorSwatch.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /*
  * SwatchControls — the Photoshop-style top row of the colour panel, in two
@@ -107,16 +108,17 @@ export function EyedropPick({ sampleColor, onPick, disabled = false }) {
   return (
     <div className="flex items-start gap-1 shrink-0">
       {supported && (
+        <Tooltip label="Pick a color from the canvas" asChild>
         <button
           type="button"
           onClick={onPick}
           disabled={disabled}
           aria-label="Eyedropper"
-          title="Pick a color from the canvas"
           className="inline-flex cursor-pointer text-fg hover:opacity-80 disabled:opacity-40 disabled:cursor-not-allowed"
         >
           <Icon name="eyedrop" size={24} />
         </button>
+        </Tooltip>
       )}
       <ColorSwatch
         hex={sampleColor}

package/src/molecules/TabsRow.jsx

@@ -71,7 +71,7 @@ export default function TabsRow({ tabs = [], value, onChange, onClose, onMinimis
           type="button"
           onClick={onMinimise}
           aria-label="Minimise"
-          className="ml-auto text-meta hover:text-emphasis self-center"
+          className="ml-auto text-oq-48 hover:text-emphasis self-center"
           style={{ lineHeight: 0 }}
         >
           <Icon name="chevron-down" size={12} />

package/src/organisms/Canvas.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { CanvasZoomContext } from '../hooks/canvasZoom.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /**
  * Canvas — the editor's aspect-ratio stage.
@@ -86,10 +87,15 @@ export function CanvasFrame({
   customRatio,
   aspects,
   bgColor,
-  guideColor = CANVAS_DEFAULTS.guideColor,
+  guideColor,
   children,
 }) {
   const { ratio, label } = resolveAspect(aspect, customRatio, aspects)
+  /* NO guideColor → THEME INK (editor DS sync 2026-09-27, from the design editor's copy, which had
+   * it and this lift had not): the border and label follow the theme, so the frame reads on a light
+   * page and a dark one. A guideColor (a type frame's own colour) still tints both. */
+  const borderColor = guideColor ? `color-mix(in srgb, ${guideColor} 24%, transparent)` : 'var(--kol-oq-24)'
+  const labelColor = guideColor ? `color-mix(in srgb, ${guideColor} 70%, transparent)` : 'var(--kol-fg-64)'
   const virtualH = CANVAS_VIRTUAL_W / ratio
 
   const rectRef = useRef(null)
@@ -126,7 +132,7 @@ export function CanvasFrame({
         className="absolute inset-0 pointer-events-none z-[2]"
         style={{
           border:      '1px solid',
-          borderColor: `color-mix(in srgb, ${guideColor} 24%, transparent)`,
+          borderColor,
         }}
       />
       <span
@@ -138,7 +144,7 @@ export function CanvasFrame({
           fontSize:      10,
           fontFamily:    'var(--kol-font-family-mono)',
           letterSpacing: '0.1em',
-          color:         `color-mix(in srgb, ${guideColor} 70%, transparent)`,
+          color:         labelColor,
           pointerEvents: 'none',
         }}
       >
@@ -196,7 +202,7 @@ export default function Canvas({
   customRatio,
   aspects,
   bgColor,
-  guideColor = CANVAS_DEFAULTS.guideColor,
+  guideColor,
   align = 'center',
   panEnabled = false,
   backdrop,
@@ -628,22 +634,24 @@ export function PanZoomViewport({
         {/* Zoom % + fps — matching chips. Zoom (click resets to 100% /
             centered) first, fps to its right, shown while `f` toggles it. */}
         <div className="absolute bottom-3 right-3 z-[3] flex items-center gap-2">
+          <Tooltip label="Reset zoom (⌘0)" asChild>
           <button
             type="button"
             onClick={() => setView({ zoom: 1, x: 0, y: 0 })}
             className="px-2 py-1 rounded border border-fg-08 bg-surface-secondary kol-mono-12 text-emphasis tabular-nums"
             style={{ opacity: atRest && !showFps ? 0.55 : 1 }}
-            title="Reset zoom (⌘0)"
           >
             {Math.round(view.zoom * 100)}%
           </button>
+          </Tooltip>
           {showFps && (
+            <Tooltip label="Framerate — press F to hide" asChild>
             <span
               className="px-2 py-1 rounded border border-fg-08 bg-surface-secondary kol-mono-12 text-emphasis tabular-nums"
-              title="Framerate — press F to hide"
             >
               {fps} fps
             </span>
+            </Tooltip>
           )}
         </div>
       </div>
@@ -817,7 +825,7 @@ export function CanvasRuler({ containerRef, virtualWidth = CANVAS_VIRTUAL_W, dis
   const tickColor   = 'var(--kol-fg-48)'
   const textColor   = 'var(--kol-fg-64)'
   const barBg       = 'var(--kol-fg-08)'
-  const borderColor = 'var(--kol-fg-16)'
+  const borderColor = 'var(--kol-oq-16)'
   const labelStyle  = { fontFamily: 'var(--kol-font-family-mono)', fontSize: 9 }
 
   return (

package/src/organisms/DocumentEditor.jsx

@@ -41,6 +41,9 @@ import { readDraft, writeDraft, clearDraft } from '../utilities/localDrafts.js'
  *                                   searchable list inside the editor inserts the pick at the caret
  * @param {Function} onPickAsset     `() => Promise<{ name, url, contentType } | null>` — a consumer's own picker instead
  * @param {Function} onClose
+ * @param {boolean}  inline          render IN the page, filling its container, instead of over it (the notes
+ *                                   page, media-shell 2026-09-26: the editor is the page's content there,
+ *                                   not a window over a list). No scrim, no Escape-to-close; the X still closes
  */
 const TYPES = [
   { value: 'md', label: 'MD', kind: 'markdown' },
@@ -64,6 +67,7 @@ const DRAFT_PAUSE = 400 // browser memory is free — a short pause, not D1's wr
 export default function DocumentEditor({
   mode = 'edit', name: nameProp = '', kind: kindProp, text, savedAt = 0, draft,
   onSave, onCreate, folder = '', assets, onPickAsset, onClose,
+  inline = false,
 }) {
   const [picking, setPicking] = useState(false)
   const [pickQuery, setPickQuery] = useState('')
@@ -186,9 +190,8 @@ export default function DocumentEditor({
     ? <img src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(value)}`} alt="" className="max-w-full max-h-full object-contain m-auto" />
     : <KindPreview o={{ key: name || 'document' }} text={value} kind={kind} />
 
-  return (
-    <FullscreenOverlay open onClose={close} closeButton={false} scrim>
-      <QuickLookFrame title={isNew ? `New document${folder ? ` in ${folder}` : ''}` : name} meta={status} onClose={close}
+  const frame = (
+      <QuickLookFrame className={inline ? 'kol-quicklook--inline' : ''} title={isNew ? `New document${folder ? ` in ${folder}` : ''}` : name} meta={status} onClose={close}
         actions={(
           <span className="flex items-center gap-2">
             <ViewToggle variant="text" viewMode={view} onViewChange={setView} options={views} />
@@ -198,7 +201,7 @@ export default function DocumentEditor({
           </span>
         )}>
         {/* the window's own caps, inline — Tailwind does not generate arbitrary values from package source */}
-        <div className="kol-doc-editor flex flex-col" style={{ width: 'min(1200px, var(--kol-ql-max-w))', height: 'min(760px, var(--kol-ql-media-h))' }}>
+        <div className="kol-doc-editor flex flex-col" style={inline ? { width: '100%', height: '100%' } : { width: 'min(1200px, var(--kol-ql-max-w))', height: 'min(760px, var(--kol-ql-media-h))' }}>
           {isNew && (
             <div className="flex flex-wrap items-center gap-3 p-4 border-b" style={{ borderColor: 'var(--kol-oq-08)' }}>
               <Input variant="filled" size="sm" value={name} aria-label="File name" placeholder="File name"
@@ -240,8 +243,8 @@ export default function DocumentEditor({
           </div>
         </div>
       </QuickLookFrame>
-    </FullscreenOverlay>
   )
+  return inline ? frame : <FullscreenOverlay open onClose={close} closeButton={false} scrim>{frame}</FullscreenOverlay>
 }
 
 /* THE FRONTMATTER AS FIELDS. One row per key; a list value (tags) is typed comma-separated. The

package/src/organisms/KeyframeEditor.jsx

@@ -3,6 +3,7 @@ import Button from '../atoms/Button.jsx'
 import Dropdown from '../molecules/Dropdown.jsx'
 import LabeledControl from '../molecules/LabeledControl.jsx'
 import Slider from '../molecules/Slider.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 const deg = (r) => Math.round(((r || 0) * 180) / Math.PI)
 const rad = (d) => (d * Math.PI) / 180
@@ -41,7 +42,7 @@ export const DEFAULT_KEYFRAMES = [
  *
  * @param {Array<Object>} keyframes - The track; empty falls back to `DEFAULT_KEYFRAMES`
  * @param {Function} onChange - `(keyframes) => void` — the whole track, sorted
- * @param {number} t - The clock's current LAYER-LOCAL phase, 0..1 — what "Add @ playhead" stamps
+ * @param {number} t - The clock's current LAYER-LOCAL phase, 0..1 — what "Add @ playhead" stamps; or a function returning it, read at the click — a clock that runs without re-rendering (the design editor's transport) would otherwise stamp the phase of the last render
  * @param {Function} onSeek - `(t) => void` — a key was selected; seek the clock to its local `t`
  * @param {Function} [onPause] - Called before the seek, so the render holds on the pose
  * @param {Array<{value: string, label: string}>} [easeOptions] - The Ease menu (default `KEYFRAME_EASES`)
@@ -71,7 +72,7 @@ export default function KeyframeEditor({
   const onAdd = () => {
     const base = kfs[sel] || { rot: [0, 0, 0], pos: [0, 0, 0], scale: 1, ease: 'inout' }
     const nk = {
-      t: Math.max(0, Math.min(1, t)),
+      t: Math.max(0, Math.min(1, typeof t === 'function' ? t() : t)),
       rot: [...(base.rot || [0, 0, 0])],
       pos: [...(base.pos || [0, 0, 0])],
       scale: base.scale ?? 1,
@@ -117,7 +118,7 @@ export default function KeyframeEditor({
       </div>
       <div className="flex gap-2">
         <Button variant="primary" size="sm" className="flex-1" onClick={onAdd}>Add @ playhead</Button>
-        <Button variant="ghost" size="sm" title="Delete keyframe" onClick={onDelete} disabled={kfs.length <= 1}>Delete</Button>
+        <Tooltip label="Delete keyframe"><Button variant="ghost" size="sm" onClick={onDelete} disabled={kfs.length <= 1}>Delete</Button></Tooltip>
       </div>
 
       <span className="kol-helper-10 text-meta">Pose</span>