@marver-design/marver 0.5.0 → 0.7.0

package/src/client/shell/App.tsx

@@ -1,5 +1,4 @@
 import { Component, useEffect, useRef, useState, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
 import { useStore, CONFIG, PUBLISHED, boardLabel, cap, humanize, fetchBoardNames, type FrameEntry } from './store.ts'
 import { Tip } from './Tip.tsx'
 import { PKG, ROUTE } from '../const.ts'
@@ -7,9 +6,10 @@ import { animateLayout, Canvas, canvasCtl } from './canvas/Canvas.tsx'
 import { frameByWindow } from './canvas/frame-registry.ts'
 import { enterPlay, playCtl, PlayOverlay } from './Play.tsx'
 import { bootHash, parseHash, writeHash } from './hash.ts'
-import { CardsIcon, CardsThreeIcon, CaretIcon, CheckIcon, ColumnsIcon, CommentIcon, DevicesIcon, FrameRectIcon, IntentGlyph, LaserIcon, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+import { CardsIcon, CardsThreeIcon, CaretIcon, CheckIcon, ColumnsIcon, FrameRectIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
 import { CommentsController } from './Comments.tsx'
 import { useComments } from './comments-store.ts'
+import { CommentButton, DevicePicker, HideUIButton, LaserButton, Popover, ThemePicker, toggleHideUI, usePopover } from './Toolbar.tsx'
 
 const commentsStore = () => useComments.getState()
 
@@ -48,41 +48,6 @@ export class ShellBoundary extends Component<{ children: ReactNode }, { err: Err
   }
 }
 
-/** Shared popover machinery: trigger position, outside-click close, portal to the app
- *  root (glass never nests - a nested backdrop-filter cannot sample the page). */
-function usePopover() {
-  const [open, setOpen] = useState(false)
-  const [pos, setPos] = useState({ left: 0, top: 0 })
-  const boxRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const toggle = () => {
-    if (!open && boxRef.current) {
-      const r = boxRef.current.getBoundingClientRect()
-      setPos({ left: r.left, top: r.bottom + 10 })
-    }
-    setOpen(!open)
-  }
-  useEffect(() => {
-    if (!open) return
-    const close = (e: PointerEvent) => {
-      const t = e.target as globalThis.Node
-      if (!boxRef.current?.contains(t) && !menuRef.current?.contains(t)) setOpen(false)
-    }
-    window.addEventListener('pointerdown', close)
-    return () => window.removeEventListener('pointerdown', close)
-  }, [open])
-  return { open, setOpen, pos, boxRef, menuRef, toggle }
-}
-
-function Popover({ pop, children }: { pop: ReturnType<typeof usePopover>; children: ReactNode }) {
-  const app = document.querySelector('.sh-app')
-  if (!pop.open || !app) return null
-  return createPortal(
-    <div className="sh-menu" ref={pop.menuRef} style={{ left: pop.pos.left, top: pop.pos.top }}>{children}</div>,
-    app,
-  )
-}
-
 /** Boards live flat in the sidebar - always visible, one click to switch. The list
  *  refreshes on mount, window focus, and a slow poll so agent-created board files
  *  appear without a reload. Active board = accent icon + wash, same language as scenes. */
@@ -213,12 +178,12 @@ function SelectionBar() {
 }
 
 /** Devices view: one click sizes frames to a device width, tidies, and fits. Scoped
- *  like the digit keys: the selection when one exists, the whole board otherwise. */
+ *  like the digit keys: the selection when one exists, the whole board otherwise. The
+ *  dropdown chrome is the shared DevicePicker; this adapter owns the canvas wiring. */
 function DeviceMenu() {
   const deviceView = useStore((s) => s.deviceView)
   const selection = useStore((s) => s.selection)
   const nodes = useStore((s) => s.nodes)
-  const pop = usePopover()
   const scoped = selection.length > 0
   const pick = (name: string | null) => {
     animateLayout()
@@ -230,7 +195,6 @@ function DeviceMenu() {
       st.setDeviceView(name)
       setTimeout(() => canvasCtl.fitAll(), 30)
     }
-    pop.setOpen(false)
   }
   const entries = Object.entries(CONFIG.viewports)
   // active check: board-wide it is the device view; scoped, the device every selected frame wears
@@ -238,31 +202,8 @@ function DeviceMenu() {
   const active = scoped
     ? entries.find(([, vp]) => selNodes.length > 0 && selNodes.every((n) => n.w === vp.width))?.[0] ?? null
     : deviceView
-  return (
-    <div className="sh-theme" ref={pop.boxRef}>
-      <Tip side="bottom" label={<><b>Device view</b><span>{scoped ? `${selection.length} selected` : deviceView ? `${cap(deviceView)} · 0 resets` : `keys 1-${entries.length}`}</span></>}>
-        <button className="sh-pill-btn" onClick={pop.toggle}>
-          {deviceIcon(active, 16)}
-          <CaretIcon size={11} style={{ transform: pop.open ? 'rotate(180deg)' : undefined }} />
-        </button>
-      </Tip>
-      <Popover pop={pop}>
-        <Tip side="bottom" label={scoped ? 'Selected frames at their default sizes' : 'Every frame at its own default size'}>
-          <button onClick={() => pick(null)}>
-            <DevicesIcon size={15} /><span>Default</span><kbd>0</kbd>
-            {!scoped && deviceView === null && <CheckIcon size={13} className="chk" />}
-          </button>
-        </Tip>
-        <i className="div" />
-        {entries.map(([name, vp], i) => (
-          <button key={name} onClick={() => pick(name)} title={`${vp.width} × ${vp.height}`}>
-            {deviceIcon(name)}<span>{cap(name)}</span><kbd>{i < 9 ? i + 1 : ''}</kbd>
-            {active === name && <CheckIcon size={13} className="chk" />}
-          </button>
-        ))}
-      </Popover>
-    </div>
-  )
+  const hint = scoped ? `${selection.length} selected` : deviceView ? cap(deviceView) : `keys 1-${entries.length}`
+  return <DevicePicker value={active} onSelect={pick} includeDefault hint={hint} />
 }
 
 /** Update pill (dev only): the daily registry check surfaces here - same glass, same
@@ -337,46 +278,25 @@ function ZoomMenu() {
 /** Theme dropdown, scoped like the device digits: the selection when one exists, every
  *  frame otherwise. The trigger reflects the scope's MAJORITY (per-frame overrides never
  *  flip a board-level trigger - it reports the level it acts on, same rule as the shell).
- *  The menu is PORTALED out of the pill: an element with backdrop-filter is a backdrop root,
- *  so a nested backdrop-filter samples the pill's surface instead of the page - flat grey. */
+ *  The dropdown chrome is the shared ThemePicker; this adapter owns the canvas wiring. */
 function ThemeMenu() {
   const nodes = useStore((s) => s.nodes)
   const selection = useStore((s) => s.selection)
   const viewTheme = useStore((s) => s.viewTheme)
-  const pop = usePopover()
   const scoped = selection.length > 0
-  // scoped: the trigger + check reflect the selection; global: the VIEW preference
   const scope = scoped ? nodes.filter((n) => selection.includes(n.key)) : []
-  const uniform = scoped
-    ? (scope.length && scope.every((n) => n.theme === scope[0].theme) ? scope[0].theme : null)
-    : viewTheme
   const majority = scoped
     ? (scope.length ? [...scope.reduce((m, n) => m.set(n.theme, (m.get(n.theme) ?? 0) + 1), new Map<string, number>()).entries()].sort((a, b) => b[1] - a[1])[0][0] : viewTheme)
     : viewTheme
+  // the tick shows only a UNIFORM scope (mixed selection = no theme is "the" one), while
+  // the trigger reports the majority - the level the control acts on
+  const uniform = scoped ? (scope.length && scope.every((n) => n.theme === scope[0].theme) ? scope[0].theme : null) : viewTheme
   const pick = (t: string) => {
     const st = useStore.getState()
     scoped ? st.setSelectedTheme(t) : st.setTheme(t)
-    pop.setOpen(false)
   }
-  return (
-    <div className="sh-theme" ref={pop.boxRef}>
-      <Tip side="bottom" label={<><b>Theme</b><span>{scoped ? `${selection.length} selected · D` : 'all frames · D'}</span></>}>
-        <button className="sh-pill-btn" onClick={pop.toggle}>
-          {majority === 'dark' ? <MoonIcon size={16} /> : <SunIcon size={16} />}
-          <CaretIcon size={11} style={{ transform: pop.open ? 'rotate(180deg)' : undefined }} />
-        </button>
-      </Tip>
-      <Popover pop={pop}>
-        {CONFIG.themes.map((t) => (
-          <button key={t} onClick={() => pick(t)}>
-            {t === 'dark' ? <MoonIcon size={15} /> : <SunIcon size={15} />}
-            <span>{t}</span>
-            {uniform === t && <CheckIcon size={13} className="chk" />}
-          </button>
-        ))}
-      </Popover>
-    </div>
-  )
+  const hint = scoped ? `${selection.length} selected · D` : 'all frames · D'
+  return <ThemePicker value={majority} checked={uniform} onSelect={pick} hint={hint} />
 }
 
 export function App() {
@@ -403,12 +323,21 @@ export function App() {
   useEffect(() => {
     if (booted) return
     booted = true
-    if (bootHash.board && bootHash.board !== useStore.getState().board)
-      useStore.setState({ board: bootHash.board, boardAuto: bootHash.board === 'all-scenes' })
-    boot().then((ok) => {
+    const start = async () => {
+      if (bootHash.board) {
+        if (bootHash.board !== useStore.getState().board)   // a deep link wins
+          useStore.setState({ board: bootHash.board, boardAuto: bootHash.board === 'all-scenes' })
+      } else if (!PUBLISHED) {
+        // fresh open, no deep link: LAND on the first curated board (a tight, fast board = a good first
+        // impression) instead of the auto all-scenes everything-board, which renders every frame at once.
+        const first = (await fetchBoardNames().catch(() => [] as string[])).find((n) => n !== 'all-scenes')
+        if (first && first !== useStore.getState().board) useStore.setState({ board: first, boardAuto: false })
+      }
+      const ok = await boot()
       urlReady.current = true
-      if (ok && bootHash.play) enterPlay(bootHash.play)   // #/p/<board> alone = board start
-    })
+      if (ok && bootHash.play) enterPlay(bootHash.play)     // #/p/<board> alone = board start
+    }
+    void start()
   }, [])
 
   // the URL is a projection of state: design views replace in place; entering play and
@@ -540,6 +469,7 @@ export function App() {
     const onMsg = (e: MessageEvent) => {
       const data = e.data
       if (!data || typeof data.type !== 'string' || !data.type.startsWith('sh:')) return
+      if (e.origin && e.origin !== location.origin) return   // a cross-origin-navigated frame keeps its WindowProxy; reject it
       // B0.3: O(1) registry lookup - also the security gate (unknown source = not a
       // registered frame = dropped), replacing a per-message iframe scan + DOM walk.
       const reg = frameByWindow(e.source)
@@ -640,9 +570,13 @@ export function App() {
       if (e.key === 'Escape') {
         const c = commentsStore()
         if (c.commentMode || c.active || c.draft) { c.setMode(false); c.setActive(null); c.setDraft(null) }
+        else if (s.laser) s.setLaser(false)          // Escape also exits laser mode (parity with comment)
         else s.interact ? setInteract(null) : select(null)
       }
       if (e.key === 'p') enterPlay()
+      // H hides all chrome (shared binary Hide-UI); press again to reveal. Not persisted,
+      // so a refresh always restores it (the safety net for a forgotten toggle).
+      if (e.key === 'h') { toggleHideUI(); return }
       if (e.key === 't') { animateLayout(); runTidy() }
       // laser and comment mode are one-at-a-time: comment mode already highlights
       // what you'd click, so stacking the full rainbow on top only adds noise
@@ -860,33 +794,23 @@ export function App() {
 
       {/* floating pill nav, top right; collapses to a chip (same ladder as panel/fab) */}
       <nav className={`sh-pill${pillOpen ? '' : ' closed'}`} aria-hidden={!pillOpen}>
-        {/* far-left section: single actions - comment mode, laser, tidy */}
-        <Tip side="bottom" label={<><b>Comment</b><span>C · ⇧C hides pins</span></>}>
-          <button className={`sh-pill-btn${commentMode ? ' on' : ''}`} onClick={() => {
-            const c = commentsStore()
-            if (!c.commentMode) useStore.getState().setLaser(false)
-            c.setMode(!c.commentMode)
-            toast(c.commentMode ? 'comment mode off' : 'comment mode - click an element in a frame')
-          }}><CommentIcon size={16} /></button>
-        </Tip>
-        <Tip side="bottom" label={<><b>Laser mode</b><span>L</span></>}>
-          <button className={`sh-pill-btn${laser ? ' on' : ''}`} onClick={() => {
-            if (!laser) commentsStore().setMode(false)
-            useStore.getState().setLaser(!laser)
-          }}><LaserIcon size={16} /></button>
-        </Tip>
+        {/* far-left section: actions - comment mode, laser, tidy, prototype */}
+        <CommentButton />
+        <LaserButton />
         <Tip side="bottom" label={<><b>Tidy layout</b><span>T</span></>}>
           <button className="sh-pill-btn" onClick={() => { animateLayout(); runTidy() }}><ColumnsIcon size={16} /></button>
         </Tip>
+        <Tip side="bottom" label={<><b>Prototype view</b><span>P</span></>}>
+          <button className="sh-pill-btn" onClick={() => enterPlay()}><PlayIcon size={15} /></button>
+        </Tip>
         <i className="sep" />
         <DeviceMenu />
         <ThemeMenu />
         <i className="sep" />
         <ZoomMenu />
         <i className="sep" />
-        <Tip side="bottom" label={<><b>Prototype view</b><span>P</span></>}>
-          <button className="sh-pill-btn" onClick={() => enterPlay()}><PlayIcon size={15} /></button>
-        </Tip>
+        {/* far right: UI management only - hide, collapse */}
+        <HideUIButton />
         <Tip side="bottom" label={<><b>Collapse toolbar</b><span>⌘/</span></>}>
           <button className="sh-pill-btn" onClick={() => setPillOpen(false)} tabIndex={pillOpen ? 0 : -1}>
             <PanelFilledIcon size={17} style={{ transform: 'rotate(90deg)' }} />

package/src/client/shell/Comments.tsx

@@ -14,6 +14,27 @@ import { Tip } from './Tip.tsx'
 import { ROUTE } from '../const.ts'
 import type { Thread } from '../../shared/events.ts'
 
+/** Tint the pin / composer / thread card EDGES (border, outline, focus ring) in the anchored
+ *  element's own laser hue (captured at pick as anchor.el.hue) via --cm-line/--cm-line-ring.
+ *  Deliberately NOT the button fills (--comment stays green: white text on a saturated hue
+ *  fails at yellow/green/cyan) and NOT the avatar (keeps its per-user colour). No hue -> the
+ *  CSS falls back to the green token. */
+export function hueVars(hue?: number): React.CSSProperties {
+  // guard NaN / Infinity from a bad persisted anchor - an invalid custom property would
+  // suppress the CSS fallback and leave the edge uncoloured
+  if (!Number.isFinite(hue)) return {}
+  const h = hue as number
+  // --cm-solid is the FILLED-button colour (send / sign-in): a hue-aware lightness so the
+  // white glyph keeps contrast - yellow/green/cyan read light, so they go darker.
+  const l = (h >= 40 && h < 75) ? 34 : (h >= 75 && h < 165) ? 36 : (h >= 165 && h < 200) ? 38 : 45
+  return {
+    '--cm-line': `hsl(${h} 95% 45%)`,
+    '--cm-line-ring': `hsl(${h} 95% 50% / .30)`,
+    '--cm-solid': `hsl(${h} 85% ${l}%)`,
+  } as React.CSSProperties
+}
+const anchorHue = (a: unknown): number | undefined => (a as any)?.el?.hue
+
 const rel = (ts: number) => {
   const m = Math.round((Date.now() - ts) / 60_000)
   if (m < 1) return 'now'
@@ -53,7 +74,7 @@ function markerDigest(threads: Thread[]): { faces: Face[]; count: number } {
 
 /** The face of a marker: up to `max` overlapping avatars + the total count when >1.
  *  One shape for pins (one thread, anchored) and stacks (all threads on a frame). */
-function MarkerFace({ threads, max = 3 }: { threads: Thread[]; max?: number }) {
+export function MarkerFace({ threads, max = 3 }: { threads: Thread[]; max?: number }) {
   const { faces, count } = markerDigest(threads)
   return (
     <>
@@ -78,6 +99,9 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
 
   const open = threads.filter((t) => !t.resolved)
   const anchored = open.filter((t) => (t.anchor as any)?.el)
+  // whether the ACTIVE thread is still open on this frame - a dep for the highlight effect so
+  // a remote resolve (thread leaves `open` while `active` is unchanged) still clears the lock
+  const activeShown = !!active && open.some((t) => t.id === active)
 
   // resolve anchors against the live frame whenever threads or the document change
   useEffect(() => {
@@ -85,7 +109,7 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
     if (!win || node.status !== 'ready' || !anchored.length) return
     const ask = () => win.postMessage({ type: 'sh:resolve-anchors', anchors: anchored.map((t) => ({ key: t.id, anchor: t.anchor })) }, location.origin)
     const onMsg = (e: MessageEvent) => {
-      if (e.source !== win || e.data?.type !== 'sh:anchor-rects') return
+      if (e.source !== win || e.origin !== location.origin || e.data?.type !== 'sh:anchor-rects') return
       const next: typeof rects = {}
       for (const r of e.data.rects ?? []) next[r.key] = r.orphan ? null : r.rect
       setRects(next)
@@ -96,6 +120,23 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
     return () => { clearInterval(iv); window.removeEventListener('message', onMsg) }
   }, [node.status, anchored.map((t) => t.id).join(','), iframe])
 
+  // #4/#5: drive the persistent element highlight into this frame - the composing draft on
+  // this node (lock on pick), or the open thread anchored here (highlight on open). null
+  // clears it, so the shell owns the release; on a failed/late resolve the frame re-applies
+  // on its next anchor-resolve tick. The self-lock on pick handles the instant case.
+  useEffect(() => {
+    const win = iframe.current?.contentWindow
+    if (!win || node.status !== 'ready') return
+    // ONLY light an element while its thread is the active one (or a draft is composing on
+    // it) AND pins are shown - closing the thread or hiding comments (⇧C) clears it, so a
+    // stray outline never lingers on the frame.
+    const draftHere = draft?.nodeKey === node.key ? (draft.anchor as any) : null
+    const activeHere = active ? open.find((t) => t.id === active && (t.anchor as any)?.el) : undefined
+    const anchor = show ? (draftHere ?? (activeHere ? (activeHere.anchor as any) : null)) : null
+    win.postMessage({ type: 'sh:highlight-anchor', frame: frameId, anchor: anchor ?? null }, location.origin)
+    // active/draft/show/activeShown are the triggers; `open` is read fresh from the closure
+  }, [active, draft, show, activeShown, node.status, node.key, frameId, iframe])
+
   const drafting = draft?.nodeKey === node.key
   if (!show || (!open.length && !drafting)) return null
 
@@ -124,7 +165,7 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
         const { x, y, orphan } = pinPos(t)
         return (
           <div key={t.id} className={`cm-pin sh-no-pan${t.id === active ? ' on' : ''}${orphan ? ' orphan' : ''}`}
-            style={{ left: x, top: y }}
+            style={{ left: x, top: y, ...hueVars(anchorHue(t.anchor)) }}
             onPointerDown={(e) => e.stopPropagation()}
             onClick={(e) => { e.stopPropagation(); setActive(t.id === active ? null : t.id) }}
             title={orphan ? 'the anchored element is gone - comment parked' : undefined}>
@@ -133,14 +174,16 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
         )
       })}
       {active && open.some((t) => t.id === active) && (
-        <ThreadCard key={active} thread={open.find((t) => t.id === active)!} at={pinPos(open.find((t) => t.id === active)!)} node={node} />
+        <ThreadCard key={active} thread={open.find((t) => t.id === active)!} at={pinPos(open.find((t) => t.id === active)!)} bounds={{ w: node.w, h: node.h }} />
       )}
-      {draft?.nodeKey === node.key && <DraftComposer at={{ x: ((draft.anchor as any)?.rect?.x ?? 0) + ((draft.anchor as any)?.pos?.fx ?? 0.5) * ((draft.anchor as any)?.rect?.w ?? 0), y: ((draft.anchor as any)?.rect?.y ?? 0) + ((draft.anchor as any)?.pos?.fy ?? 0.5) * ((draft.anchor as any)?.rect?.h ?? 0) }} node={node} />}
+      {draft?.nodeKey === node.key && <DraftComposer at={{ x: ((draft.anchor as any)?.rect?.x ?? 0) + ((draft.anchor as any)?.pos?.fx ?? 0.5) * ((draft.anchor as any)?.rect?.w ?? 0), y: ((draft.anchor as any)?.rect?.y ?? 0) + ((draft.anchor as any)?.pos?.fy ?? 0.5) * ((draft.anchor as any)?.rect?.h ?? 0) }} bounds={{ w: node.w, h: node.h }} hue={anchorHue(draft.anchor)} />}
     </>
   )
 }
 
-function ThreadCard({ thread, at, node }: { thread: Thread; at: { x: number; y: number }; node: Node }) {
+/** The open thread card - shared by canvas (bounds = node size, `at` in frame coords) and
+ *  prototype (bounds = the on-screen stage size, `at` in screen coords). Geometry only. */
+export function ThreadCard({ thread, at, bounds }: { thread: Thread; at: { x: number; y: number }; bounds: { w: number; h: number } }) {
   const { resolve, setActive } = useComments.getState()
   const me = useComments((s) => s.me)
   const local = useComments((s) => s.local)
@@ -149,7 +192,7 @@ function ThreadCard({ thread, at, node }: { thread: Thread; at: { x: number; y:
   const [copied, setCopied] = useState(false)
   const copyTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
   useEffect(() => () => clearTimeout(copyTimer.current), [])
-  const flip = at.x > node.w * 0.55
+  const flip = at.x > bounds.w * 0.55
   // clear only after the server took it - a failed send must not eat the words,
   // and text typed WHILE the request was in flight must survive the clear
   const submit = async () => {
@@ -157,7 +200,7 @@ function ThreadCard({ thread, at, node }: { thread: Thread; at: { x: number; y:
     if (sent.trim() && await useComments.getState().replyOk(thread.id, sent)) setText((cur) => (cur === sent ? '' : cur))
   }
   return (
-    <div data-sh-wheel-local className={`cm-card sh-no-pan${flip ? ' flip' : ''}`} style={{ left: at.x, top: Math.min(at.y + 14, node.h - 40) }}
+    <div data-sh-wheel-local className={`cm-card sh-no-pan${flip ? ' flip' : ''}`} style={{ left: at.x, top: Math.min(at.y + 14, bounds.h - 40), ...hueVars(anchorHue(thread.anchor)) }}
       onPointerDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>
       {/* thread-level actions pin to the card corner, out of the header's flow -
           the name row never has to share its line with them */}
@@ -220,14 +263,16 @@ function ThreadCard({ thread, at, node }: { thread: Thread; at: { x: number; y:
   )
 }
 
-function DraftComposer({ at, node }: { at: { x: number; y: number }; node: Node }) {
+/** The draft composer - shared by canvas and prototype, geometry via `bounds`, tinted with
+ *  the picked element's hue. */
+export function DraftComposer({ at, bounds, hue }: { at: { x: number; y: number }; bounds: { w: number; h: number }; hue?: number }) {
   const { create, setDraft } = useComments.getState()
   const [text, setText] = useState('')
   const ref = useRef<HTMLInputElement>(null)
   useEffect(() => { ref.current?.focus() }, [])
-  const flip = at.x > node.w * 0.55
+  const flip = at.x > bounds.w * 0.55
   return (
-    <div data-sh-wheel-local className={`cm-card cm-draft sh-no-pan${flip ? ' flip' : ''}`} style={{ left: at.x, top: Math.min(at.y + 14, node.h - 40) }}
+    <div data-sh-wheel-local className={`cm-card cm-draft sh-no-pan${flip ? ' flip' : ''}`} style={{ left: at.x, top: Math.min(at.y + 14, bounds.h - 40), ...hueVars(hue) }}
       onPointerDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
       <div className="cm-compose">
         <div className="cm-inputwrap">