@pascal-app/editor 0.7.0 → 0.9.1

package/src/components/editor-2d/floorplan-snap-beacon-layer.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useWallSnapIndicator, type WallSnapKind } from '@pascal-app/editor'
+import { memo } from 'react'
+import { useFloorplanRender } from './floorplan-render-context'
+
+/**
+ * "Magnetic" wall-snap beacon for the 2D floor plan — the top-down twin of the
+ * 3D `WallSnapBeaconLayer`. Subscribes to the shared `useWallSnapIndicator`
+ * store (published by the floor-plan wall draft + endpoint-move handlers) and
+ * draws a marker at the snap point whose shape tells you *what* it caught,
+ * matching the 3D glyphs:
+ *
+ *   endpoint (corner) → square    midpoint → triangle
+ *   intersection      → ✕ cross   wall body (edge) → circle
+ *
+ * Indigo to match the 3D beacon and stay distinct from the red Figma alignment
+ * guides. Sizes are pixel-budgeted via `unitsPerPixel` so the marker stays a
+ * constant size on screen at any zoom. Mounted inside the `data-floorplan-scene`
+ * group so coordinates are world meters (XZ) 1:1, like the alignment guides.
+ */
+const COLOR = '#6366f1' // indigo-500 — matches the 3D beacon
+
+export const FloorplanSnapBeaconLayer = memo(function FloorplanSnapBeaconLayer() {
+  const point = useWallSnapIndicator((s) => s.point)
+  const ctx = useFloorplanRender()
+
+  if (!point) return null
+
+  const upp = ctx?.unitsPerPixel ?? 0.01
+  const m = 6 * upp // base half-size of the glyph in world meters
+  const stroke = 1.5 * upp
+
+  return (
+    <g pointerEvents="none">
+      <SnapMarker color={COLOR} kind={point.kind} m={m} stroke={stroke} x={point.x} z={point.z} />
+    </g>
+  )
+})
+
+function SnapMarker({
+  color,
+  kind,
+  m,
+  stroke,
+  x,
+  z,
+}: {
+  color: string
+  kind: WallSnapKind
+  m: number
+  stroke: number
+  x: number
+  z: number
+}) {
+  if (kind === 'endpoint') {
+    return <rect fill={color} height={m * 2} width={m * 2} x={x - m} y={z - m} />
+  }
+  if (kind === 'midpoint') {
+    const t = m * 1.3
+    const points = `${x},${z - t} ${x - t},${z + t} ${x + t},${z + t}`
+    return <polygon fill={color} points={points} />
+  }
+  if (kind === 'intersection') {
+    const c = m * 1.4
+    return (
+      <g stroke={color} strokeLinecap="round" strokeWidth={stroke * 2}>
+        <line x1={x - c} x2={x + c} y1={z - c} y2={z + c} />
+        <line x1={x - c} x2={x + c} y1={z + c} y2={z - c} />
+      </g>
+    )
+  }
+  // 'wall' (edge / along-wall) → circle
+  return <circle cx={x} cy={z} fill={color} r={m} />
+}

package/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { memo } from 'react'
+import { useWallMoveGhosts } from '../../store/use-wall-move-ghosts'
+
+/**
+ * Renders translucent dashed previews of bridge walls that the wall
+ * junction planner will insert on commit. Mirrors the 3D
+ * `GhostWallPreviewMesh` so 2D and 3D show the same intent mid-drag.
+ *
+ * Subscribes to `useWallMoveGhosts.bridges`; writes happen inside
+ * `wallFloorplanMoveTarget.apply` (cleared on `commit` and by the move
+ * overlay's unmount cleanup as a safety net).
+ */
+export const FloorplanWallMoveGhostLayer = memo(function FloorplanWallMoveGhostLayer() {
+  const bridges = useWallMoveGhosts((s) => s.bridges)
+
+  if (bridges.length === 0) return null
+
+  return (
+    <g pointerEvents="none">
+      {bridges.map((bridge) => {
+        // Draw the bridge as a thick stroke at the wall's plan-space
+        // thickness — same convention as the actual wall renderer.
+        // Dashes scale with thickness so they read consistently no
+        // matter the wall size or viewport zoom (no `non-scaling-stroke`
+        // here; we want the line to be N meters thick, not N pixels).
+        const dash = bridge.thickness * 1.4
+        const gap = bridge.thickness * 0.9
+        return (
+          <line
+            key={bridge.id}
+            opacity={0.45}
+            stroke={bridge.color}
+            strokeDasharray={`${dash} ${gap}`}
+            strokeLinecap="butt"
+            strokeWidth={bridge.thickness}
+            x1={bridge.start[0]}
+            x2={bridge.end[0]}
+            y1={bridge.start[1]}
+            y2={bridge.end[1]}
+          />
+        )
+      })}
+    </g>
+  )
+})

package/src/components/editor-2d/renderers/floorplan-draft-layer.tsx

@@ -72,7 +72,12 @@ export const FloorplanDraftLayer = memo(function FloorplanDraftLayer({
       )}
 
       {polygonDraftPolygonPoints && (
-        <polygon fill={draftFill} fillOpacity={0.2} points={polygonDraftPolygonPoints} stroke="none" />
+        <polygon
+          fill={draftFill}
+          fillOpacity={0.2}
+          points={polygonDraftPolygonPoints}
+          stroke="none"
+        />
       )}
 
       {polygonDraftPolylinePoints && (

package/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx

@@ -0,0 +1,266 @@
+'use client'
+
+import { type FloorplanGeometry, loadAssetUrl } from '@pascal-app/core'
+import { memo, useEffect, useState } from 'react'
+
+/**
+ * Pure-data → SVG converter. Walks a `FloorplanGeometry` tree returned by
+ * `def.floorplan(node, ctx)` and emits the matching React-SVG nodes.
+ *
+ * Coordinates are level-local meters. The wrapping floor-plan panel
+ * applies the world→SVG transform via its viewBox, so kinds emit
+ * geometry in the same units they reason about in 3D.
+ *
+ * Group transforms compose: `transform={translate(x y) rotate(deg)}`.
+ * Rotations are radians at the data layer (consistent with three.js
+ * conventions used by `def.geometry`) and converted to degrees for SVG
+ * here — kinds never touch units.
+ *
+ * Styling props map straight onto SVG attributes. Builders that need
+ * theme colors should declare them inline or expose them as registry
+ * tokens later (deferred until a real need surfaces — AI-authored kinds
+ * can pick safe defaults today).
+ */
+export const FloorplanGeometryRenderer = memo(function FloorplanGeometryRenderer({
+  geometry,
+  pointerEventsOverride,
+}: {
+  geometry: FloorplanGeometry
+  pointerEventsOverride?: string
+}) {
+  return renderNode(geometry, 0, pointerEventsOverride)
+})
+
+function styleAttrs(
+  g: FloorplanGeometry & { kind: Exclude<FloorplanGeometry['kind'], 'group'> },
+  pointerEventsOverride?: string,
+) {
+  // Shared SVG attribute mapping for any styled primitive. Keeps the per-
+  // primitive switch arms terse and ensures new style fields land
+  // everywhere at once. `as any` avoids re-asserting every variant
+  // includes the style fields — they all do, except `group` (which is
+  // filtered out by the caller's type bound).
+  const s = g as unknown as {
+    fill?: string
+    fillOpacity?: number
+    stroke?: string
+    strokeWidth?: number
+    strokeDasharray?: string
+    strokeLinecap?: 'butt' | 'round' | 'square'
+    strokeLinejoin?: 'miter' | 'round' | 'bevel'
+    strokeOpacity?: number
+    opacity?: number
+    vectorEffect?: 'non-scaling-stroke'
+    pointerEvents?: string
+    cursor?: string
+  }
+  return {
+    fill: s.fill ?? 'none',
+    fillOpacity: s.fillOpacity,
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    strokeDasharray: s.strokeDasharray,
+    strokeLinecap: s.strokeLinecap,
+    strokeLinejoin: s.strokeLinejoin,
+    strokeOpacity: s.strokeOpacity,
+    opacity: s.opacity,
+    vectorEffect: s.vectorEffect,
+    pointerEvents: pointerEventsOverride ?? s.pointerEvents,
+    style: s.cursor ? { cursor: s.cursor } : undefined,
+  }
+}
+
+function renderNode(
+  g: FloorplanGeometry,
+  keyHint: number,
+  pointerEventsOverride?: string,
+): React.ReactElement | null {
+  switch (g.kind) {
+    case 'path':
+      return <path d={g.d} key={keyHint} {...styleAttrs(g, pointerEventsOverride)} />
+
+    case 'polygon':
+      return (
+        <polygon
+          key={keyHint}
+          points={pointsToAttr(g.points)}
+          {...styleAttrs(g, pointerEventsOverride)}
+        />
+      )
+
+    case 'polyline':
+      return (
+        <polyline
+          key={keyHint}
+          points={pointsToAttr(g.points)}
+          {...styleAttrs(g, pointerEventsOverride)}
+        />
+      )
+
+    case 'rect':
+      return (
+        <rect
+          height={g.height}
+          key={keyHint}
+          rx={g.rx}
+          ry={g.ry}
+          width={g.width}
+          x={g.x}
+          y={g.y}
+          {...styleAttrs(g, pointerEventsOverride)}
+        />
+      )
+
+    case 'circle':
+      return (
+        <circle
+          cx={g.cx}
+          cy={g.cy}
+          key={keyHint}
+          r={g.r}
+          {...styleAttrs(g, pointerEventsOverride)}
+        />
+      )
+
+    case 'line':
+      return (
+        <line
+          key={keyHint}
+          x1={g.x1}
+          x2={g.x2}
+          y1={g.y1}
+          y2={g.y2}
+          {...styleAttrs(g, pointerEventsOverride)}
+        />
+      )
+
+    case 'text':
+      return (
+        <text
+          dominantBaseline={g.dominantBaseline ?? 'middle'}
+          fill={g.fill ?? '#171717'}
+          fontFamily={g.fontFamily}
+          fontSize={g.fontSize}
+          fontWeight={g.fontWeight}
+          key={keyHint}
+          opacity={g.opacity}
+          paintOrder={g.paintOrder}
+          stroke={g.stroke}
+          strokeLinecap={g.stroke ? 'round' : undefined}
+          strokeLinejoin={g.stroke ? 'round' : undefined}
+          strokeWidth={g.strokeWidth}
+          textAnchor={g.textAnchor ?? 'start'}
+          pointerEvents={pointerEventsOverride}
+          x={g.x}
+          y={g.y}
+        >
+          {g.text}
+        </text>
+      )
+
+    case 'image':
+      return (
+        <FloorplanImage
+          center={g.center}
+          height={g.height}
+          key={keyHint}
+          opacity={g.opacity}
+          preserveAspectRatio={g.preserveAspectRatio ?? 'xMidYMid meet'}
+          rotation={g.rotation ?? 0}
+          url={g.url}
+          width={g.width}
+        />
+      )
+
+    case 'group': {
+      const transform = formatTransform(g.transform)
+      return (
+        <g key={keyHint} transform={transform}>
+          {g.children.map((child, i) => renderNode(child, i, pointerEventsOverride))}
+        </g>
+      )
+    }
+
+    // The interactive primitives (hatch / hit-line / endpoint-handle /
+    // dimension-label) need the SVG context + theme palette + units-per-
+    // pixel that only the registry layer has access to. They're rendered
+    // by `floorplan-registry-layer.tsx`'s interactive walker instead. If
+    // a caller routes one of these through this pure renderer it
+    // silently drops — the static renderer is for static output.
+    default:
+      return null
+  }
+}
+
+function pointsToAttr(points: readonly (readonly [number, number])[]): string {
+  return points.map(([x, y]) => `${x},${y}`).join(' ')
+}
+
+function formatTransform(t?: {
+  translate?: readonly [number, number]
+  rotate?: number
+}): string | undefined {
+  if (!t) return undefined
+  const parts: string[] = []
+  if (t.translate) parts.push(`translate(${t.translate[0]} ${t.translate[1]})`)
+  if (t.rotate !== undefined) parts.push(`rotate(${(t.rotate * 180) / Math.PI})`)
+  return parts.length > 0 ? parts.join(' ') : undefined
+}
+
+/**
+ * `image` primitive renderer. Resolves the URL asynchronously via
+ * `loadAssetUrl` (handles CDN / Supabase storage) and renders an SVG
+ * `<image>` centered at `center`, rotated around it, sized in plan-local
+ * metres. While the resolution is in flight, renders nothing.
+ */
+function FloorplanImage({
+  url,
+  center,
+  width,
+  height,
+  rotation,
+  preserveAspectRatio,
+  opacity,
+}: {
+  url: string
+  center: readonly [number, number]
+  width: number
+  height: number
+  rotation: number
+  preserveAspectRatio: string
+  opacity?: number
+}) {
+  const [resolvedUrl, setResolvedUrl] = useState<string | null>(null)
+  useEffect(() => {
+    if (!url) {
+      setResolvedUrl(null)
+      return
+    }
+    let cancelled = false
+    setResolvedUrl(null)
+    loadAssetUrl(url).then((next) => {
+      if (!cancelled) setResolvedUrl(next)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [url])
+  if (!resolvedUrl) return null
+  const rotationDeg = (rotation * 180) / Math.PI
+  return (
+    <g
+      pointerEvents="none"
+      transform={`translate(${center[0]} ${center[1]}) rotate(${rotationDeg})`}
+    >
+      <image
+        height={height}
+        href={resolvedUrl}
+        opacity={opacity}
+        preserveAspectRatio={preserveAspectRatio}
+        width={width}
+        x={-width / 2}
+        y={-height / 2}
+      />
+    </g>
+  )
+}

package/src/components/editor-2d/renderers/floorplan-measurements-layer.tsx

@@ -12,6 +12,8 @@ const FLOORPLAN_MEASUREMENT_END_TICK = 0.18
 export type LinearMeasurementOverlay = {
   dashedExtensions?: boolean
   id: string
+  dimensionPathEnd?: string | null
+  dimensionPathStart?: string | null
   dimensionLineEnd: { x1: number; y1: number; x2: number; y2: number }
   dimensionLineStart: { x1: number; y1: number; x2: number; y2: number }
   extensionStart: { x1: number; y1: number; x2: number; y2: number }
@@ -34,6 +36,7 @@ type FloorplanMeasurementPalette = {
 type FloorplanMeasurementLineProps = {
   palette: FloorplanMeasurementPalette
   segment: { x1: number; y1: number; x2: number; y2: number }
+  path?: string | null
   isSelected?: boolean
   dashed?: boolean
   stroke?: string
@@ -42,6 +45,7 @@ type FloorplanMeasurementLineProps = {
 function FloorplanMeasurementLine({
   palette,
   segment,
+  path,
   isSelected,
   dashed = false,
   stroke,
@@ -50,7 +54,20 @@ function FloorplanMeasurementLine({
     ? FLOORPLAN_MEASUREMENT_LINE_OPACITY
     : FLOORPLAN_MEASUREMENT_LINE_OPACITY * 0.4
 
-  return (
+  return path ? (
+    <path
+      d={path}
+      fill="none"
+      shapeRendering="geometricPrecision"
+      stroke={stroke ?? palette.measurementStroke}
+      strokeDasharray={dashed ? FLOORPLAN_MEASUREMENT_EXTENSION_DASH : undefined}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeOpacity={lineOpacity}
+      strokeWidth={FLOORPLAN_MEASUREMENT_LINE_WIDTH}
+      vectorEffect="non-scaling-stroke"
+    />
+  ) : (
     <line
       shapeRendering="geometricPrecision"
       stroke={stroke ?? palette.measurementStroke}
@@ -111,12 +128,26 @@ type FloorplanMeasurementsLayerProps = {
   className: string
   measurements: LinearMeasurementOverlay[]
   palette: FloorplanMeasurementPalette
+  sceneRotationDeg?: number
+}
+
+function normalizeReadableScreenAngle(angleDeg: number) {
+  let normalized = ((((angleDeg + 180) % 360) + 360) % 360) - 180
+
+  if (normalized > 90) {
+    normalized -= 180
+  } else if (normalized <= -90) {
+    normalized += 180
+  }
+
+  return normalized
 }
 
 export const FloorplanMeasurementsLayer = memo(function FloorplanMeasurementsLayer({
   className,
   measurements,
   palette,
+  sceneRotationDeg = 0,
 }: FloorplanMeasurementsLayerProps) {
   if (measurements.length === 0) {
     return null
@@ -124,74 +155,90 @@ export const FloorplanMeasurementsLayer = memo(function FloorplanMeasurementsLay
 
   return (
     <>
-      {measurements.map((measurement) => (
-        <g className={className} key={measurement.id} pointerEvents="none" style={{ userSelect: 'none' }}>
-          <FloorplanMeasurementLine
-            dashed={measurement.dashedExtensions ?? true}
-            isSelected={measurement.isSelected}
-            palette={palette}
-            segment={measurement.extensionStart}
-            stroke={measurement.extensionStroke}
-          />
-          <FloorplanMeasurementLine
-            isSelected={measurement.isSelected}
-            palette={palette}
-            segment={measurement.dimensionLineStart}
-            stroke={measurement.stroke}
-          />
-          <FloorplanMeasurementLine
-            isSelected={measurement.isSelected}
-            palette={palette}
-            segment={measurement.dimensionLineEnd}
-            stroke={measurement.stroke}
-          />
-          <FloorplanMeasurementLine
-            dashed={measurement.dashedExtensions ?? true}
-            isSelected={measurement.isSelected}
-            palette={palette}
-            segment={measurement.extensionEnd}
-            stroke={measurement.extensionStroke}
-          />
-          {measurement.showTicks !== false ? (
-            <>
-              <FloorplanMeasurementTick
-                angleDeg={measurement.labelAngleDeg}
+      {measurements.map((measurement) =>
+        (() => {
+          const screenLabelAngleDeg = normalizeReadableScreenAngle(
+            measurement.labelAngleDeg + sceneRotationDeg,
+          )
+          const localLabelAngleDeg = screenLabelAngleDeg - sceneRotationDeg
+
+          return (
+            <g
+              className={className}
+              key={measurement.id}
+              pointerEvents="none"
+              style={{ userSelect: 'none' }}
+            >
+              <FloorplanMeasurementLine
+                dashed={measurement.dashedExtensions ?? true}
+                isSelected={measurement.isSelected}
+                palette={palette}
+                segment={measurement.extensionStart}
+                stroke={measurement.extensionStroke}
+              />
+              <FloorplanMeasurementLine
                 isSelected={measurement.isSelected}
                 palette={palette}
+                path={measurement.dimensionPathStart}
+                segment={measurement.dimensionLineStart}
                 stroke={measurement.stroke}
-                x={measurement.dimensionLineStart.x1}
-                y={measurement.dimensionLineStart.y1}
               />
-              <FloorplanMeasurementTick
-                angleDeg={measurement.labelAngleDeg}
+              <FloorplanMeasurementLine
                 isSelected={measurement.isSelected}
                 palette={palette}
+                path={measurement.dimensionPathEnd}
+                segment={measurement.dimensionLineEnd}
                 stroke={measurement.stroke}
-                x={measurement.dimensionLineEnd.x2}
-                y={measurement.dimensionLineEnd.y2}
               />
-            </>
-          ) : null}
-          <text
-            dominantBaseline="central"
-            fill={measurement.labelFill ?? palette.measurementStroke}
-            fillOpacity={
-              measurement.isSelected
-                ? FLOORPLAN_MEASUREMENT_LABEL_OPACITY
-                : FLOORPLAN_MEASUREMENT_LABEL_OPACITY * 0.4
-            }
-            fontFamily="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
-            fontSize={FLOORPLAN_MEASUREMENT_LABEL_FONT_SIZE}
-            fontWeight="600"
-            textAnchor="middle"
-            transform={`rotate(${measurement.labelAngleDeg} ${measurement.labelX} ${measurement.labelY}) translate(0, -0.04)`}
-            x={measurement.labelX}
-            y={measurement.labelY}
-          >
-            {measurement.label}
-          </text>
-        </g>
-      ))}
+              <FloorplanMeasurementLine
+                dashed={measurement.dashedExtensions ?? true}
+                isSelected={measurement.isSelected}
+                palette={palette}
+                segment={measurement.extensionEnd}
+                stroke={measurement.extensionStroke}
+              />
+              {measurement.showTicks !== false ? (
+                <>
+                  <FloorplanMeasurementTick
+                    angleDeg={localLabelAngleDeg}
+                    isSelected={measurement.isSelected}
+                    palette={palette}
+                    stroke={measurement.stroke}
+                    x={measurement.dimensionLineStart.x1}
+                    y={measurement.dimensionLineStart.y1}
+                  />
+                  <FloorplanMeasurementTick
+                    angleDeg={localLabelAngleDeg}
+                    isSelected={measurement.isSelected}
+                    palette={palette}
+                    stroke={measurement.stroke}
+                    x={measurement.dimensionLineEnd.x2}
+                    y={measurement.dimensionLineEnd.y2}
+                  />
+                </>
+              ) : null}
+              <text
+                dominantBaseline="central"
+                fill={measurement.labelFill ?? palette.measurementStroke}
+                fillOpacity={
+                  measurement.isSelected
+                    ? FLOORPLAN_MEASUREMENT_LABEL_OPACITY
+                    : FLOORPLAN_MEASUREMENT_LABEL_OPACITY * 0.4
+                }
+                fontFamily="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+                fontSize={FLOORPLAN_MEASUREMENT_LABEL_FONT_SIZE}
+                fontWeight="600"
+                textAnchor="middle"
+                transform={`rotate(${localLabelAngleDeg} ${measurement.labelX} ${measurement.labelY}) translate(0, -0.04)`}
+                x={measurement.labelX}
+                y={measurement.labelY}
+              >
+                {measurement.label}
+              </text>
+            </g>
+          )
+        })(),
+      )}
     </>
   )
 })

package/src/components/editor-2d/renderers/floorplan-placement-preview-layer.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type FloorplanGeometry,
+  type GeometryContext,
+  nodeRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { memo } from 'react'
+import usePlacementPreview from '../../../store/use-placement-preview'
+import { FloorplanGeometryRenderer } from './floorplan-geometry-renderer'
+
+/**
+ * Renders a faint, non-interactive ghost of the node being placed by a
+ * registry placement tool (e.g. column), following the cursor in the floor
+ * plan. The 3D view shows a translucent mesh preview; in 2D that mesh is
+ * hidden (canvas `display:none`), so without this the user only saw the grid
+ * cursor dot + alignment guides — no sense of the footprint they were about
+ * to drop. The placement tool publishes a transient, already-positioned +
+ * aligned node to `usePlacementPreview`; we build its `def.floorplan`
+ * footprint with a minimal (unselected) context and render it.
+ *
+ * Mounted inside the floor-plan scene `<g>` so the geometry's level-local
+ * meters get the same world→SVG transform every other entry does.
+ */
+export const FloorplanPlacementPreviewLayer = memo(function FloorplanPlacementPreviewLayer() {
+  const node = usePlacementPreview((s) => s.node)
+  if (!node) return null
+
+  const builder = nodeRegistry.get(node.type)?.floorplan
+  if (!builder) return null
+
+  // Minimal, unselected context — preview never shows selection chrome
+  // (move handles / resize arrows / hatch live behind `viewState.selected`).
+  // `resolve` reads the scene lazily (a builder rarely calls it for a ghost,
+  // and `parent: null` short-circuits the elevator's level walk) so the layer
+  // never subscribes to / bulk-reads the nodes map during render.
+  const ctx = {
+    resolve: (id: AnyNodeId) => useScene.getState().nodes[id],
+    children: [],
+    siblings: [],
+    parent: null,
+    viewState: undefined,
+  } as unknown as GeometryContext
+
+  const geometry = (builder as (n: AnyNode, c: GeometryContext) => FloorplanGeometry | null)(
+    node,
+    ctx,
+  )
+  if (!geometry) return null
+
+  return (
+    <g data-floorplan-placement-preview opacity={0.5} pointerEvents="none">
+      <FloorplanGeometryRenderer geometry={geometry} />
+    </g>
+  )
+})