@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/point-ask/point-ask-layer.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import {
+  emitter,
+  type PointAskStatus,
+  registerPointAskHandler,
+  useHasPointAskHandler,
+  useScene,
+} from '@pascal-app/core'
+import { subscribeRevealEvents, useViewer } from '@pascal-app/viewer'
+import { useEffect } from 'react'
+import { startPointAskSession } from '../../lib/point-ask/session'
+import { usePointAsk } from '../../store/use-point-ask'
+import { PointAskBubble } from './bubble'
+import { HoverChip } from './hover-chip'
+import { BeforeTag, ModePill, ModeVignette } from './mode-pill'
+import { usePointMotionCalm } from './optional-motion'
+import { OutlineCorners } from './outline-corners'
+import { PointAskPins } from './pins'
+import { POINT_ASK_CSS } from './point-ask-styles'
+import { RegionMarquee } from './region-marquee'
+import { REGION_MARQUEE_CSS } from './region-marquee-styles'
+
+const CALM_CSS = `
+.pa-layer[data-calm] .pa-hlabel{transform:none;transition-property:opacity}
+.pa-layer[data-calm] .pa-send,.pa-layer[data-calm] .pa-dict,.pa-layer[data-calm] .pa-btn,.pa-layer[data-calm] .pa-hold{transform:none;transition-property:opacity,color,background}
+.pa-layer[data-calm] .pa-pk,.pa-layer[data-calm] .pa-edgemark{transition:none}
+`
+
+/**
+ * Point and ask's overlay (the owner, 8 October): the outline's corners, the label chip, the
+ * anchored bubble and the pins, drawn over the 3D view and following its camera. It renders only
+ * where a host has registered a handler for asks (the open-source editor has no chat), though pins
+ * already planted stay until they retire.
+ */
+export function PointAskLayer() {
+  const available = useHasPointAskHandler()
+  const hasPins = usePointAsk((s) => s.pinOrder.length > 0)
+  const active = usePointAsk((s) => s.active)
+  const region = usePointAsk((s) => s.region)
+  const calm = usePointMotionCalm()
+
+  useEffect(() => startPointAskSession(), [])
+
+  // A test door in development only, like the camera controls': a page script registers a fake
+  // chat and plays its statuses, so the scene side can be driven without a model.
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'development') return
+    const w = window as typeof window & { __pascalPointAskTest?: unknown }
+    w.__pascalPointAskTest = {
+      register: registerPointAskHandler,
+      status: (status: PointAskStatus) => emitter.emit('point-ask:status', status),
+      store: usePointAsk,
+      scene: useScene,
+      emitter,
+      viewer: useViewer,
+      reveal: subscribeRevealEvents,
+    }
+    return () => {
+      w.__pascalPointAskTest = undefined
+    }
+  }, [])
+
+  if (!(available || hasPins || active)) return null
+  return (
+    <div className="pa-layer" data-calm={calm || undefined} data-point-ask-layer>
+      <style>{POINT_ASK_CSS + REGION_MARQUEE_CSS + CALM_CSS}</style>
+      <ModeVignette />
+      <OutlineCorners />
+      <RegionMarquee
+        flashKey={region?.flashKey ?? 0}
+        rect={region?.rect ?? null}
+        settled={region?.settled ?? false}
+        sizeLabel={region?.sizeLabel ?? null}
+      />
+      <PointAskPins />
+      <PointAskBubble />
+      <HoverChip />
+      <ModePill />
+      <BeforeTag />
+    </div>
+  )
+}

package/src/components/point-ask/point-ask-styles.ts

@@ -0,0 +1,105 @@
+// The look of Point and ask: one stylesheet for the whole overlay, its tokens and moments taken
+// from the chat prototype the owner approved (chat-prototype/pascal-builds.html). Every class is
+// prefixed `pa-`; motion that follows the camera is set from script, the rest is declared here.
+export const POINT_ASK_CSS = `
+.pa-layer{--pa-accent:#a99bff;--pa-ok:#79e2b0;--pa-warm:#f6b866;--pa-bad:#ff8a80;--pa-tx:#edece9;--pa-tx2:#a7a7ae;--pa-tx3:#73747c;--pa-ink:#16171b;--pa-ease:cubic-bezier(.23,1,.32,1);
+  position:fixed;inset:0;pointer-events:none;z-index:45;color:var(--pa-tx);font-size:13px;line-height:1.35;-webkit-font-smoothing:antialiased}
+.pa-layer *{box-sizing:border-box}
+:where(.pa-layer) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
+.pa-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 150ms var(--pa-ease);box-shadow:inset 0 0 90px 6px rgba(169,155,255,.16),inset 0 0 0 1.5px rgba(169,155,255,.26)}
+.pa-vignette.on{opacity:1;transition-duration:180ms}
+.pa-pill{position:absolute;left:50%;top:64px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(19,20,24,.82);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 10px 28px -12px rgba(0,0,0,.7);white-space:nowrap;font-weight:500;color:var(--pa-tx2)}
+.pa-pill b{color:var(--pa-tx);font-weight:600}
+.pa-fc{position:absolute;left:0;top:0;width:12px;height:12px;border:0 solid var(--pa-accent);opacity:0;transition:opacity 120ms ease;filter:drop-shadow(0 0 3px rgba(169,155,255,.6));will-change:transform}
+.pa-fc.tl{border-width:2px 0 0 2px;border-top-left-radius:4px;margin:-3px 0 0 -3px}
+.pa-fc.tr{border-width:2px 2px 0 0;border-top-right-radius:4px;margin:-3px 0 0 -9px}
+.pa-fc.bl{border-width:0 0 2px 2px;border-bottom-left-radius:4px;margin:-9px 0 0 -3px}
+.pa-fc.br{border-width:0 2px 2px 0;border-bottom-right-radius:4px;margin:-9px 0 0 -9px}
+.pa-chipwrap{position:absolute;left:0;top:0;will-change:transform}
+.pa-hlabel{padding:4px 10px;border-radius:12px;background:rgba(18,19,23,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-weight:600;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity 120ms ease,transform 180ms var(--pa-ease)}
+.pa-hlabel.show{opacity:1;transform:none}
+.pa-hlabel.press{transform:scale(.97);transition-duration:120ms}
+.pa-hlabel .sub{display:block;font-weight:500;font-size:11px;color:var(--pa-tx3)}
+.pa-hlabel .sz{color:var(--pa-tx2);font-weight:500;margin-left:6px}
+.pa-bwrap{position:absolute;left:0;top:0;pointer-events:auto;will-change:transform}
+.pa-bub{position:relative;width:320px;padding:12px;border-radius:14px;background:rgba(32,33,39,.95);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06),0 18px 40px -16px rgba(0,0,0,.75)}
+.pa-tail{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:2px;background:rgba(32,33,39,.95)}
+.pa-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;cursor:grab;position:relative}
+.pa-ctx:active{cursor:grabbing}
+.pa-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;margin-left:auto;background:#0f1013}
+.pa-nopic{margin-left:auto;font-size:11px;color:var(--pa-tx3);font-weight:500}
+.pa-tchip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 6px 0 8px;border-radius:999px;background:rgba(169,155,255,.16);color:#d9d2ff;font-weight:600;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:210px}
+.pa-tchip i{width:6px;height:6px;border-radius:50%;background:var(--pa-accent);flex:none}
+.pa-tchip span{overflow:hidden;text-overflow:ellipsis}
+.pa-tchip .tx{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:#cfc7ff;flex:none}
+.pa-tchip .tx:hover{background:rgba(255,255,255,.12)}
+.pa-tchip .tx svg{width:10px;height:10px}
+.pa-field{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 12px;border-radius:999px;background:rgba(255,255,255,.06)}
+.pa-field input{flex:1;min-width:0;height:30px;font:inherit;font-size:14px;color:var(--pa-tx);background:none;border:0;outline:0}
+.pa-field input::placeholder{color:var(--pa-tx3)}
+.pa-send{height:30px;min-width:30px;border-radius:999px;background:#edece9;color:var(--pa-ink);display:grid;place-items:center;transition:transform 120ms var(--pa-ease),opacity 160ms ease}
+.pa-send:active{transform:scale(.97)}
+.pa-send:disabled{opacity:.4;cursor:default}
+.pa-send svg{width:15px;height:15px}
+.pa-send.queue{padding:0 12px;font-weight:600;font-size:13px}
+.pa-dict{width:30px;height:30px;border-radius:50%;color:var(--pa-tx2);display:grid;place-items:center;transition:transform 120ms var(--pa-ease),color 160ms ease,background 160ms ease}
+.pa-dict:hover{color:var(--pa-tx);background:rgba(255,255,255,.08)}
+.pa-dict:active{transform:scale(.97)}
+.pa-dict.on{color:var(--pa-ink);background:var(--pa-accent)}
+.pa-dict svg{width:16px;height:16px}
+.pa-sugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+.pa-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--pa-tx);font-weight:500;font-size:12.5px;white-space:nowrap;transition:transform 120ms var(--pa-ease),background 160ms ease}
+.pa-btn:hover{background:rgba(255,255,255,.13)}
+.pa-btn:active{transform:scale(.97)}
+.pa-btn.primary{background:#edece9;color:var(--pa-ink)}
+.pa-btn.primary:hover{background:#fff}
+.pa-btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
+.pa-err{margin:8px 2px 0;font-size:12px;color:var(--pa-warm);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+.pa-pin{position:absolute;left:0;top:0;width:32px;height:32px;margin:-38px 0 0 -16px;pointer-events:auto;cursor:pointer;display:grid;place-items:center;will-change:transform}
+.pa-pin::after{content:"";position:absolute;left:50%;top:28px;width:2px;height:8px;margin-left:-1px;border-radius:1px;background:var(--pa-accent);opacity:.85}
+.pa-pdisc{width:24px;height:24px;border-radius:50%;background:rgba(24,25,30,.92);box-shadow:inset 0 0 0 1.5px rgba(169,155,255,.9),0 6px 16px -6px rgba(0,0,0,.7);display:grid;place-items:center;transition:box-shadow 240ms ease}
+.pa-pdisc svg{width:20px;height:20px;overflow:visible}
+.pa-pq,.pa-pa{fill:none;stroke:#a99bff;stroke-width:1.8;opacity:0;transition:opacity 160ms ease}
+.pa-pq{stroke-dasharray:2.4 2.4}
+.pa-pa{stroke-width:2;stroke-linecap:round}
+.pa-pk{fill:none;stroke:var(--pa-ok);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset 240ms var(--pa-ease) 80ms}
+.pa-sg{fill:none;stroke:var(--pa-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 160ms ease}
+.pa-pin.queued .pa-pq,.pa-pin.working .pa-pa{opacity:1}
+.pa-pin.needs-input .pa-pdisc{box-shadow:inset 0 0 0 1.5px rgba(246,184,102,.95),0 0 14px 1px rgba(246,184,102,.45),0 6px 16px -6px rgba(0,0,0,.7)}
+.pa-pin.needs-input .pa-pa{opacity:1;stroke:var(--pa-warm)}
+.pa-pin.done .pa-pk{stroke-dashoffset:0}
+.pa-pin.done .pa-pdisc{box-shadow:inset 0 0 0 1.5px rgba(121,226,176,.9),0 6px 16px -6px rgba(0,0,0,.7)}
+.pa-pin.done::after{background:var(--pa-ok)}
+.pa-pin.answered .pa-sg{opacity:1}
+.pa-pin.no-change .pa-pdisc{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),0 6px 16px -6px rgba(0,0,0,.7)}
+.pa-pin.no-change .pa-pk{stroke:var(--pa-tx3);stroke-dashoffset:0;opacity:.8}
+.pa-pin.no-change::after{background:var(--pa-tx3)}
+.pa-pin.error .pa-pdisc{box-shadow:inset 0 0 0 1.5px rgba(255,138,128,.95),0 6px 16px -6px rgba(0,0,0,.7)}
+.pa-pin.error::after{background:var(--pa-bad)}
+.pa-pin.undone .pa-pq{opacity:.7;stroke:var(--pa-tx3)}
+.pa-pin.undone .pa-pdisc{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25),0 6px 16px -6px rgba(0,0,0,.7)}
+.pa-pin.undone::after{background:var(--pa-tx3)}
+.pa-pin.edge{pointer-events:auto}
+.pa-ring{position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 1.5px var(--pa-accent);opacity:0;pointer-events:none}
+.pa-edgemark{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 8px;border-radius:999px;background:rgba(19,20,24,.88);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(169,155,255,.45),0 8px 22px -10px rgba(0,0,0,.7);color:var(--pa-tx);font-weight:600;font-size:12px;white-space:nowrap;pointer-events:auto;cursor:pointer;will-change:transform;transition:transform 120ms var(--pa-ease)}
+.pa-edgemark svg{width:14px;height:14px;color:var(--pa-accent);flex:none}
+.pa-cardwrap{position:absolute;left:0;top:0;pointer-events:auto;will-change:transform}
+.pa-card{width:250px;padding:10px;border-radius:14px;background:rgba(30,31,37,.95);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px -16px rgba(0,0,0,.75);transform-origin:50% 100%}
+.pa-card-t{font-weight:600;font-size:13.5px;line-height:1.3}
+.pa-card-s{margin-top:2px;font-size:12px;color:var(--pa-tx2)}
+.pa-card-a{margin-top:6px;font-size:12px;color:var(--pa-tx2);text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:2px;cursor:default}
+.pa-card-row{display:flex;gap:6px;margin-top:8px}
+.pa-card-head{display:flex;align-items:center;gap:10px}
+.pa-card-head .pa-card-t{flex:1;min-width:0}
+.pa-card-thumb{flex:none;width:64px;height:48px;border-radius:8px;overflow:hidden;background:#0f1013;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
+.pa-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
+.pa-hold{display:flex;align-items:center;justify-content:center;width:100%;height:28px;margin-top:8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--pa-tx2);font-weight:500;font-size:12.5px;touch-action:none;user-select:none;-webkit-user-select:none;transition:background 160ms ease,color 160ms ease,transform 120ms var(--pa-ease)}
+.pa-hold:hover{background:rgba(255,255,255,.06);color:var(--pa-tx)}
+.pa-hold:active,.pa-hold.on{transform:scale(.98)}
+.pa-hold.on{background:var(--pa-accent);color:var(--pa-ink);box-shadow:none}
+.pa-before{position:fixed;display:flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border-radius:999px;background:rgba(19,20,24,.82);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 10px 28px -12px rgba(0,0,0,.7);font-weight:600;color:var(--pa-tx);pointer-events:none}
+.pa-before i{width:7px;height:7px;border-radius:50%;background:var(--pa-warm)}
+.pa-edge{position:absolute;pointer-events:auto}
+@media (prefers-reduced-transparency:reduce){.pa-bub,.pa-card,.pa-pill{background:#1c1d22;backdrop-filter:none;-webkit-backdrop-filter:none}.pa-tail{background:#1c1d22}}
+@media (prefers-contrast:more){.pa-bub,.pa-card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}}
+`

package/src/components/point-ask/region-marquee-styles.ts

@@ -0,0 +1,15 @@
+// The region marquee's look (spec 2.3, Region): the capture overlay's corner accents on a thin
+// accent border with a faint fill, the live size pinned inside its bottom-right, drawn back to 60%
+// once the person has let go. Uses the layer's `--pa-*` tokens; append it to POINT_ASK_CSS.
+export const REGION_MARQUEE_CSS = `
+.pa-rgn{position:fixed;left:0;top:0;pointer-events:none;border:1.5px solid var(--pa-accent);border-radius:3px;background:rgba(169,155,255,.07);transition:opacity 160ms ease;will-change:transform,width,height}
+.pa-rgn.settled{opacity:.6}
+.pa-rgn-c{position:absolute;width:14px;height:14px;border:0 solid var(--pa-accent);filter:drop-shadow(0 0 3px rgba(169,155,255,.5))}
+.pa-rgn-c.tl{left:-3px;top:-3px;border-width:2.5px 0 0 2.5px;border-top-left-radius:5px}
+.pa-rgn-c.tr{right:-3px;top:-3px;border-width:2.5px 2.5px 0 0;border-top-right-radius:5px}
+.pa-rgn-c.bl{left:-3px;bottom:-3px;border-width:0 0 2.5px 2.5px;border-bottom-left-radius:5px}
+.pa-rgn-c.br{right:-3px;bottom:-3px;border-width:0 2.5px 2.5px 0;border-bottom-right-radius:5px}
+.pa-rgn-size{position:absolute;right:6px;bottom:6px;padding:2px 8px;border-radius:999px;background:rgba(18,19,23,.85);font-weight:600;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--pa-tx);white-space:nowrap}
+.pa-rgn-size:empty{display:none}
+.pa-rgn-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;border-radius:inherit}
+`

package/src/components/point-ask/region-marquee.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { prefersReducedMotion } from '@pascal-app/core'
+import { useEffect, useRef } from 'react'
+import { EASE_OUT, REGION_FLASH_MS } from '../../lib/point-ask/choreography'
+import type { Rect } from '../../lib/point-ask/types'
+import { usePointAsk } from '../../store/use-point-ask'
+
+const CORNERS = ['tl', 'tr', 'bl', 'br'] as const
+
+type RegionMarqueeProps = {
+  /** The rectangle in viewport pixels, or null when no region is being drawn. */
+  rect: Rect | null
+  /** The live size inside the rectangle ("4.2 × 3.1 m"), or null while it cannot be measured. */
+  sizeLabel: string | null
+  /** The person let go: the rectangle stays at 60% until the ask is sent or dismissed. */
+  settled: boolean
+  /** Changes when a capture happens: the shutter flash fills the rectangle once. */
+  flashKey: number
+}
+
+/**
+ * The rectangle of a region capture (the owner's "the marquee shows its live size in metres; on
+ * release a shutter flash fills the rectangle"). It follows the pointer 1:1, with no spring: a
+ * trailing rectangle would read as latency. The flash is a "Playful touches" moment; under
+ * reduced motion it is a quiet fade.
+ */
+export function RegionMarquee({ rect, sizeLabel, settled, flashKey }: RegionMarqueeProps) {
+  const flash = useRef<HTMLDivElement>(null)
+  const seen = useRef(flashKey)
+  const playful = usePointAsk((s) => s.playful)
+
+  useEffect(() => {
+    if (flashKey === seen.current) return
+    seen.current = flashKey
+    const el = flash.current
+    if (!(el && playful)) return
+    const peak = prefersReducedMotion() ? 0.3 : 0.9
+    el.animate([{ opacity: peak }, { opacity: 0 }], {
+      duration: REGION_FLASH_MS,
+      easing: EASE_OUT,
+      fill: 'forwards',
+    })
+  }, [flashKey, playful])
+
+  if (!rect) return null
+  return (
+    <div
+      aria-hidden
+      className={`pa-rgn${settled ? ' settled' : ''}`}
+      style={{
+        transform: `translate3d(${rect.x0}px,${rect.y0}px,0)`,
+        width: rect.x1 - rect.x0,
+        height: rect.y1 - rect.y0,
+      }}
+    >
+      {CORNERS.map((corner) => (
+        <span className={`pa-rgn-c ${corner}`} key={corner} />
+      ))}
+      <div className="pa-rgn-flash" ref={flash} />
+      <div className="pa-rgn-size">{sizeLabel}</div>
+    </div>
+  )
+}

package/src/components/procedural-items/inspector.tsx

@@ -9,7 +9,9 @@ import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useState } from 'react'
 import { useHandleGroup } from '../../store/use-handle-group'
 import { PanelSection } from '../ui/controls/panel-section'
+import { SegmentedControl } from '../ui/controls/segmented-control'
 import { SliderControl } from '../ui/controls/slider-control'
+import { ToggleControl } from '../ui/controls/toggle-control'
 import { PanelWrapper } from '../ui/panels/panel-wrapper'
 export function ProceduralInspector({
   nodeId,
@@ -75,21 +77,44 @@ export function ProceduralInspector({
         )}
       </div>
       <div className="space-y-3">
-        {fields.map((p) => (
-          <SliderControl
-            key={p.id}
-            label={p.label}
-            value={node.parameters[p.id] ?? p.default}
-            min={p.min}
-            max={p.max}
-            step={p.step}
-            precision={3}
-            unit={p.unit === 'm' ? 'm' : ''}
-            onChange={(v) => change(p.id, v, false)}
-            onCommit={(v) => change(p.id, v, true)}
-            restoreOnCommit={false}
-          />
-        ))}
+        {fields.map((p) => {
+          const value = node.parameters[p.id] ?? p.default
+          if (p.unit === 'bool')
+            return (
+              <ToggleControl
+                key={p.id}
+                label={p.label}
+                checked={value === 1}
+                onChange={(checked) => change(p.id, checked ? 1 : 0, true)}
+              />
+            )
+          if (p.unit === 'choice' && p.options && p.options.length <= 4)
+            return (
+              <div key={p.id} className="space-y-1.5">
+                <div className="text-muted-foreground text-xs">{p.label}</div>
+                <SegmentedControl
+                  value={String(value)}
+                  options={p.options.map((label, index) => ({ label, value: String(index) }))}
+                  onChange={(index) => change(p.id, Number(index), true)}
+                />
+              </div>
+            )
+          return (
+            <SliderControl
+              key={p.id}
+              label={p.unit === 'choice' ? `${p.label}: ${p.options?.[value] ?? value}` : p.label}
+              value={value}
+              min={p.min}
+              max={p.max}
+              step={p.step}
+              precision={p.unit === 'choice' ? 0 : 3}
+              unit={p.unit === 'm' ? 'm' : ''}
+              onChange={(v) => change(p.id, v, false)}
+              onCommit={(v) => change(p.id, v, true)}
+              restoreOnCommit={false}
+            />
+          )
+        })}
       </div>
       {partId && (
         <button

package/src/components/systems/ceiling/ceiling-bracket-batch.test.ts

@@ -10,7 +10,8 @@ import {
   StaticDrawUsage,
   Vector3,
 } from 'three'
-import Attributes from 'three/src/renderers/common/Attributes.js'
+// @ts-expect-error -- @types/three 0.186 no longer declares this renderer internal
+import UntypedAttributes from 'three/src/renderers/common/Attributes.js'
 import { AttributeType } from 'three/src/renderers/common/Constants.js'
 import Info from 'three/src/renderers/common/Info.js'
 import {
@@ -25,6 +26,15 @@ import {
   growBracketCapacity,
 } from './ceiling-bracket-batch'
 
+type AttributesBackend = {
+  createAttribute(): void
+  updateAttribute(attribute: BufferAttribute): void
+}
+const Attributes = UntypedAttributes as new (
+  backend: AttributesBackend,
+  info: Info,
+) => { update(attribute: BufferAttribute, type: AttributeType): void }
+
 const polygon: Array<[number, number]> = [
   [0, 0],
   [4, 0],
@@ -365,7 +375,7 @@ test('WebGPU attribute updates skip resting frames and upload only written slots
         uploads.push({ attribute, ranges: attribute.updateRanges.map((range) => ({ ...range })) })
         attribute.clearUpdateRanges()
       },
-    } as unknown as ConstructorParameters<typeof Attributes>[0],
+    },
     new Info(),
   )
   const render = () => {

package/src/components/systems/ceiling/ceiling-selection-affordance-system.test.ts

@@ -12,6 +12,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { _roots, act, createRoot, events, extend, type RootState } from '@react-three/fiber'
 import { createElement } from 'react'
 import { Group, InstancedMesh, OrthographicCamera, Vector3, type WebGLRenderer } from 'three'
+import { endCeilingEdit, startCeilingEdit } from '../../../lib/ceiling-edit-session'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import useInteractionScope from '../../../store/use-interaction-scope'
@@ -33,7 +34,13 @@ type BracketHarness = {
   sounds: string[]
 }
 
-async function withMountedBrackets(run: (harness: BracketHarness) => Promise<void>) {
+async function withMountedBrackets(
+  run: (harness: BracketHarness) => Promise<void>,
+  {
+    ceilingData = {},
+    session = true,
+  }: { ceilingData?: Partial<CeilingNode>; session?: boolean } = {},
+) {
   const previousScene = useScene.getState()
   const previousViewer = useViewer.getState()
   const previousEditor = useEditor.getState()
@@ -54,6 +61,7 @@ async function withMountedBrackets(run: (harness: BracketHarness) => Promise<voi
   const building = BuildingNode.parse({})
   const level = LevelNode.parse({ parentId: building.id, height: 3 })
   const ceiling = CeilingNode.parse({
+    ...ceilingData,
     parentId: level.id,
     height: 3,
     polygon: [
@@ -81,8 +89,9 @@ async function withMountedBrackets(run: (harness: BracketHarness) => Promise<voi
       hoveredId: null,
       selection: { buildingId: building.id, levelId: level.id, zoneId: null, selectedIds: [] },
     })
-    useEditor.setState({ phase: 'structure', mode: 'select', structureLayer: 'elements' })
+    useEditor.setState({ phase: 'building', mode: 'select' })
     useInteractionScope.setState({ scope: { kind: 'idle' } })
+    if (session) startCeilingEdit(ceiling.id)
     const camera = Object.assign(new OrthographicCamera(-1, 5, 5, -1, 0.1, 100), { manual: true })
     camera.position.set(0, 10, 0)
     camera.up.set(0, 0, -1)
@@ -145,7 +154,10 @@ async function withMountedBrackets(run: (harness: BracketHarness) => Promise<voi
       sounds,
     })
   } finally {
-    await act(async () => root.render(null))
+    await act(async () => {
+      endCeilingEdit()
+      root.render(null)
+    })
     clearBoxSelectHandled()
     emitter.off('ceiling:click', onClick)
     sfxEmitter.off('*', onSound)
@@ -186,6 +198,7 @@ test('mounted brackets preserve hover, clicks, drags, capture visibility, overri
       await dispatch('onPointerDown', 4, 0)
 
       const oldNormal = meshes().find((mesh) => mesh.renderOrder === 1000)
+      // Ceilings outside the session get no brackets.
       await act(async () => {
         const additions = Array.from({ length: 8 }, (_, index) =>
           CeilingNode.parse({
@@ -206,12 +219,43 @@ test('mounted brackets preserve hover, clicks, drags, capture visibility, overri
           },
         })
       })
+      expect(meshes().find((mesh) => mesh.renderOrder === 1000)).toBe(oldNormal)
+      expect(meshes().reduce((sum, mesh) => sum + mesh.count, 0)).toBe(12)
+      // Twelve corners overflow the initial capacity: the batch meshes are replaced
+      // while the pressed corner keeps its index.
+      await act(async () =>
+        useScene.setState({
+          nodes: {
+            ...useScene.getState().nodes,
+            [ceiling.id]: CeilingNode.parse({
+              ...ceiling,
+              polygon: [
+                [0, 0],
+                [4, 0],
+                [4, 1],
+                [4, 2],
+                [4, 3],
+                [4, 4],
+                [3, 4],
+                [2, 4],
+                [1, 4],
+                [0, 4],
+                [0, 3],
+                [0, 2],
+              ],
+            }),
+          },
+        }),
+      )
       expect(meshes()).toHaveLength(2)
       expect(meshes().find((mesh) => mesh.renderOrder === 1000)).not.toBe(oldNormal)
       expect(useViewer.getState().hoveredId).toBe(ceiling.id)
       await dispatch('onClick', 4, 0)
       expect(clicks).toHaveLength(2)
       expect(clicks[1].position).toEqual([4, 3, 0])
+      await act(async () =>
+        useScene.setState({ nodes: { ...useScene.getState().nodes, [ceiling.id]: ceiling } }),
+      )
       await dispatch('onPointerLeave', 4, 0)
       expect(useViewer.getState().hoveredId).toBeNull()
 
@@ -277,7 +321,7 @@ test('mounted brackets preserve hover, clicks, drags, capture visibility, overri
   )
 })
 
-test('coincident ceiling corners keep the same hover, click, and drag owner across batch transfers', async () => {
+test('an adjacent ceiling outside the session has no brackets at a shared corner', async () => {
   await withMountedBrackets(async ({ ceiling, dispatch, dispatchWindow, meshes, clicks }) => {
     const adjacent = CeilingNode.parse({
       ...ceiling,
@@ -294,25 +338,64 @@ test('coincident ceiling corners keep the same hover, click, and drag owner acro
         nodes: { ...useScene.getState().nodes, [adjacent.id]: adjacent },
       }),
     )
-    const owner = ceiling.id < adjacent.id ? ceiling : adjacent
-    const other = owner === ceiling ? adjacent : ceiling
-    for (let move = 0; move < 20; move++) {
-      await dispatch('onPointerMove', 0, 0)
-      expect(useViewer.getState().hoveredId).toBe(owner.id)
-      expect(meshes().find((mesh) => mesh.renderOrder === 1001)!.count).toBe(7)
-    }
+    expect(meshes().reduce((sum, mesh) => sum + mesh.count, 0)).toBe(12)
+    await dispatch('onPointerMove', 0, 0)
+    expect(useViewer.getState().hoveredId).toBe(ceiling.id)
     await dispatch('onPointerDown', 0, 0)
     await dispatch('onClick', 0, 0)
-    expect(clicks[0].node.id).toBe(owner.id)
+    expect(clicks[0].node.id).toBe(ceiling.id)
     await dispatchWindow('pointermove', 0.5, 0.5)
-    expect(useLiveNodeOverrides.getState().overrides.has(owner.id)).toBe(true)
-    expect(useLiveNodeOverrides.getState().overrides.has(other.id)).toBe(false)
+    expect(useLiveNodeOverrides.getState().overrides.has(ceiling.id)).toBe(true)
+    expect(useLiveNodeOverrides.getState().overrides.has(adjacent.id)).toBe(false)
     await dispatchWindow('pointercancel', 0.5, 0.5)
     await dispatch('onPointerLeave', 0, 0)
     expect(useViewer.getState().hoveredId).toBeNull()
   })
 })
 
+test('brackets and their hit boxes exist only inside the Edit ceiling session', async () => {
+  await withMountedBrackets(
+    async ({ ceiling, dispatch, meshes, levelObject }) => {
+      // A canvas selection of the ceiling alone shows nothing.
+      await act(async () => useViewer.getState().setSelection({ selectedIds: [ceiling.id] }))
+      expect(meshes()).toHaveLength(0)
+      expect(levelObject.children).toHaveLength(0)
+      await dispatch('onPointerMove', 0, 0)
+      expect(useViewer.getState().hoveredId).toBeNull()
+
+      await act(async () => {
+        startCeilingEdit(ceiling.id)
+      })
+      expect(meshes().reduce((sum, mesh) => sum + mesh.count, 0)).toBe(12)
+
+      await act(async () => useViewer.getState().setSelection({ selectedIds: [] }))
+      expect(meshes()).toHaveLength(0)
+      expect(levelObject.children).toHaveLength(0)
+    },
+    { session: false },
+  )
+})
+
+test('a corner drag detaches an auto ceiling; the session stays open', async () => {
+  await withMountedBrackets(
+    async ({ ceiling, dispatch, dispatchWindow, meshes }) => {
+      expect(ceiling.boundary).toBe('auto')
+      await dispatch('onPointerDown', 0, 0)
+      await dispatchWindow('pointermove', 0.5, 0.5)
+      const preview = useLiveNodeOverrides.getState().overrides.get(ceiling.id)
+        ?.polygon as CeilingNode['polygon']
+      await dispatchWindow('pointerup', 0.5, 0.5)
+      const committed = useScene.getState().nodes[ceiling.id] as CeilingNode
+      expect(committed.polygon).toEqual(preview)
+      expect(committed.boundary).toBeUndefined()
+      expect(committed.zoneId).toBeUndefined()
+      expect(useViewer.getState().selection.selectedIds).toEqual([ceiling.id])
+      expect(meshes().reduce((sum, mesh) => sum + mesh.count, 0)).toBe(12)
+    },
+    { ceilingData: { boundary: 'auto', zoneId: 'zone_auto_ceiling' } },
+  )
+})
+
 test('same-id registry replacement rebinds the portal and drag plane without rewriting instance data', async () => {
   await withMountedBrackets(
     async ({ ceiling, level, levelObject, state, dispatch, dispatchWindow, meshes, clicks }) => {

package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  type AnyNodeId,
   type CeilingNode,
   emitter,
   resolveCeilingHeight,
@@ -24,6 +25,7 @@ import {
 } from 'react'
 import { Group, type Object3D, Plane, Raycaster, Vector2, Vector3 } from 'three'
 import { useShallow } from 'zustand/react/shallow'
+import { useCeilingEditCeilingId } from '../../../lib/ceiling-edit-session'
 import {
   clearCeilingSnapFeedback,
   resolveCeilingPlanPointSnap,
@@ -94,9 +96,7 @@ function clearCornerDragPreview(drag: CornerDragState) {
 }
 
 export const CeilingSelectionAffordanceSystem = () => {
-  const phase = useEditor((state) => state.phase)
   const mode = useEditor((state) => state.mode)
-  const structureLayer = useEditor((state) => state.structureLayer)
   // ANY active interaction (moving/placing a node, reshaping a boundary or
   // curve, dragging a handle) unmounts the brackets: their ceiling-height hit
   // boxes would otherwise catch drag-time hover, set `hoveredId` to the
@@ -105,26 +105,24 @@ export const CeilingSelectionAffordanceSystem = () => {
   // scope, so it can't unmount itself.
   const scopeIdle = useInteractionScope((state) => state.scope.kind === 'idle')
   const currentLevelId = useViewer((state) => state.selection.levelId)
+  // Brackets and their hit boxes exist only for the ceiling in an explicit
+  // Edit ceiling session (`lib/ceiling-edit-session.ts`).
+  const editCeilingId = useCeilingEditCeilingId()
 
   const ceilings = useScene(
-    useShallow((state) =>
-      Object.values(state.nodes).filter((node): node is CeilingNode => {
-        return (
-          node.type === 'ceiling' &&
-          node.visible !== false &&
-          currentLevelId !== null &&
-          resolveLevelId(node, state.nodes) === currentLevelId
-        )
-      }),
-    ),
+    useShallow((state) => {
+      const node = editCeilingId ? state.nodes[editCeilingId as AnyNodeId] : undefined
+      return node?.type === 'ceiling' &&
+        node.visible !== false &&
+        currentLevelId !== null &&
+        resolveLevelId(node, state.nodes) === currentLevelId
+        ? [node]
+        : []
+    }),
   )
 
   const shouldRender =
-    phase === 'structure' &&
-    mode === 'select' &&
-    structureLayer === 'elements' &&
-    scopeIdle &&
-    currentLevelId !== null
+    mode === 'select' && scopeIdle && currentLevelId !== null && ceilings.length > 0
 
   if (!shouldRender) return null
 
@@ -528,7 +526,9 @@ const CeilingSelectionAffordance = memo(function CeilingSelectionAffordance({
         suppressNextClick()
 
         if (drag.previewPolygon) {
-          useScene.getState().updateNode(drag.ceilingId, { polygon: drag.previewPolygon })
+          // A polygon edit converts a derived (`boundary: 'auto'`) ceiling into
+          // an authored one, like the boundary editor's commit.
+          useScene.getState().detachDerivedNode(drag.ceilingId, { polygon: drag.previewPolygon })
           useViewer.getState().setSelection({ selectedIds: [drag.ceilingId] })
         }
 

package/src/components/systems/roof/roof-edit-system.tsx

@@ -511,6 +511,7 @@ function segmentShapeKey(segment: RoofSegmentNode): string {
     segment.wallThickness,
     segment.deckThickness,
     segment.overhang,
+    segment.gableOverhang,
     segment.shingleThickness,
     segment.gambrelLowerWidthRatio,
     segment.gambrelLowerHeightRatio,