@pascal-app/editor 1.0.4 → 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/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/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,

package/src/components/tools/distribution/connection-compatibility.test.ts

@@ -0,0 +1,34 @@
+import { expect, test } from 'bun:test'
+import { connectionCompatibility } from './connection-compatibility'
+
+const supply = { system: 'supply', diameter: 6 }
+test('matching profiles report a match', () => {
+  expect(connectionCompatibility(supply, { ...supply }).status).toBe('match')
+})
+test('system mismatch takes precedence over size', () => {
+  expect(connectionCompatibility(supply, { system: 'return', diameter: 8 }).status).toBe(
+    'incompatible',
+  )
+  expect(
+    connectionCompatibility({ system: 'waste', diameter: 4 }, { system: 'vent', diameter: 4 })
+      .status,
+  ).toBe('incompatible')
+})
+test('size and shape mismatches describe the required adapter', () => {
+  expect(connectionCompatibility(supply, { ...supply, diameter: 8 }).label).toContain('Reducer')
+  expect(
+    connectionCompatibility(supply, { ...supply, shape: 'rect', width: 8, height: 6 }).label,
+  ).toContain('Transition')
+  expect(
+    connectionCompatibility(
+      { ...supply, shape: 'rect', width: 8, height: 6 },
+      { ...supply, shape: 'rect', width: 8, height: 8 },
+    ).status,
+  ).toBe('adapter')
+})
+test('missing system or section data cannot claim compatibility', () => {
+  expect(connectionCompatibility(supply, { diameter: 6 }).status).toBe('unknown')
+  expect(
+    connectionCompatibility({ ...supply, shape: 'rect' }, { ...supply, shape: 'rect' }).status,
+  ).toBe('unknown')
+})

package/src/components/tools/distribution/connection-compatibility.ts

@@ -0,0 +1,43 @@
+import type { NodePort } from '@pascal-app/core'
+
+export type ConnectionProfile = Pick<NodePort, 'system' | 'diameter' | 'shape' | 'width' | 'height'>
+export type ConnectionCompatibility = {
+  status: 'match' | 'adapter' | 'incompatible' | 'unknown'
+  label: string
+}
+
+export function connectionCompatibility(
+  source: ConnectionProfile,
+  target: ConnectionProfile,
+): ConnectionCompatibility {
+  if (source.system && target.system && source.system !== target.system) {
+    return {
+      status: 'incompatible',
+      label: `Different systems: ${source.system} / ${target.system}`,
+    }
+  }
+  const sourceShape = source.shape ?? 'round'
+  const targetShape = target.shape ?? 'round'
+  if (sourceShape !== targetShape) {
+    return { status: 'adapter', label: `Transition needed: ${sourceShape} / ${targetShape}` }
+  }
+  const sourceSize = sourceShape === 'round' ? [source.diameter] : [source.width, source.height]
+  const targetSize = targetShape === 'round' ? [target.diameter] : [target.width, target.height]
+  if (
+    [...sourceSize, ...targetSize].some(
+      (value) => value === undefined || !Number.isFinite(value) || value <= 0,
+    )
+  ) {
+    return { status: 'unknown', label: 'Connection size unavailable' }
+  }
+  if (sourceSize.some((value, index) => Math.abs(value! - targetSize[index]!) > 0.001)) {
+    return {
+      status: 'adapter',
+      label: `Reducer needed: ${sourceSize.join(' × ')}″ / ${targetSize.join(' × ')}″`,
+    }
+  }
+  if (!source.system || !target.system) {
+    return { status: 'unknown', label: 'Size matches; system unspecified' }
+  }
+  return { status: 'match', label: `Matching system and size: ${target.system}` }
+}

package/src/components/tools/distribution/distribution-public.ts

@@ -0,0 +1,9 @@
+export * from './connection-compatibility'
+export * from './distribution-run-contract'
+export * from './distribution-run-tool'
+export * from './draw-alignment'
+export * from './ports'
+export * from './run-cursor'
+export * from './run-direction-feedback'
+export * from './run-port-snap'
+export * from './run-screen-direction'

package/src/components/tools/distribution/distribution-run-contract.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from 'bun:test'
+import { offsetRunPointFromSurface, type RunSurfaceTarget } from './distribution-run-contract'
+
+const wall = (
+  hostId: `wall_${string}` = 'wall_1',
+  side: 'front' | 'back' = 'front',
+): RunSurfaceTarget => ({
+  kind: 'wall',
+  levelId: 'level_1',
+  hostId,
+  side,
+  frame: {
+    origin: [2, 1, 0],
+    normal: [0, 0, 1],
+    tangent: [1, 0, 0],
+    bitangent: [0, 1, 0],
+  },
+  bounds: { minU: 0, maxU: 4, minV: 0, maxV: 2.5 },
+})
+
+describe('distribution run interaction contract', () => {
+  test('offsets wall geometry along the face normal', () => {
+    const target = wall()
+    expect(offsetRunPointFromSurface([3, 1, 0], target, 0.1)).toEqual([3, 1, 0.1])
+  })
+})

package/src/components/tools/distribution/distribution-run-contract.ts

@@ -0,0 +1,94 @@
+import type { AnyNodeId } from '@pascal-app/core'
+
+export type RunPoint = [number, number, number]
+
+export type RunWallSide = 'front' | 'back'
+
+export type RunSurfaceFrame = {
+  origin: RunPoint
+  normal: RunPoint
+  tangent: RunPoint
+  bitangent: RunPoint
+}
+
+export type RunSurfaceBounds = {
+  minU: number
+  maxU: number
+  minV: number
+  maxV: number
+}
+
+export type RunWallAttachment = {
+  wallId: Extract<AnyNodeId, `wall_${string}`>
+  side: RunWallSide
+  startUV: [number, number]
+  endUV: [number, number]
+  offset: number
+}
+
+/**
+ * The surface selected for the current run. A wall target is semantic: the
+ * host id and side are required so later snapping cannot fall back to any
+ * other object that happens to be close in the viewport.
+ */
+export type RunSurfaceTarget =
+  | {
+      kind: 'floor' | 'ceiling' | 'surface'
+      hostId?: AnyNodeId
+      levelId: AnyNodeId
+      frame: RunSurfaceFrame
+    }
+  | {
+      kind: 'wall'
+      levelId: AnyNodeId
+      hostId: AnyNodeId
+      side: RunWallSide
+      frame: RunSurfaceFrame
+      bounds: RunSurfaceBounds
+    }
+
+/** Move a run centerline clear of a wall face along the captured normal. */
+export function offsetRunPointFromSurface(
+  point: RunPoint,
+  target: RunSurfaceTarget | null,
+  offset: number,
+): RunPoint {
+  if (!target || offset === 0) return [...point]
+  return [
+    point[0] + target.frame.normal[0] * offset,
+    point[1] + target.frame.normal[1] * offset,
+    point[2] + target.frame.normal[2] * offset,
+  ]
+}
+
+export function runPointToSurfaceUV(
+  point: RunPoint,
+  target: Extract<RunSurfaceTarget, { kind: 'wall' }>,
+): [number, number] {
+  const dx = point[0] - target.frame.origin[0]
+  const dy = point[1] - target.frame.origin[1]
+  const dz = point[2] - target.frame.origin[2]
+  return [
+    dx * target.frame.tangent[0] + dy * target.frame.tangent[1] + dz * target.frame.tangent[2],
+    dx * target.frame.bitangent[0] +
+      dy * target.frame.bitangent[1] +
+      dz * target.frame.bitangent[2],
+  ]
+}
+
+export function createRunWallAttachment(
+  wallId: Extract<AnyNodeId, `wall_${string}`>,
+  side: RunWallSide,
+  start: RunPoint,
+  end: RunPoint,
+  target: Extract<RunSurfaceTarget, { kind: 'wall' }>,
+  offset: number,
+): RunWallAttachment {
+  return {
+    wallId,
+    side,
+    startUV: runPointToSurfaceUV(start, target),
+    endUV: runPointToSurfaceUV(end, target),
+    offset,
+  }
+}