@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/editor-2d/floorplan-render-context.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import type { FloorplanPalette } from '@pascal-app/core'
+import { createContext, type ReactNode, useContext, useMemo } from 'react'
+
+/**
+ * Per-frame render context shared between the legacy `floorplan-panel.tsx`
+ * and the registry-driven `<FloorplanRegistryLayer>`.
+ *
+ * The legacy panel is the authoritative owner of the floor-plan SVG —
+ * it computes `unitsPerPixel` from the viewBox / surface size, mounts the
+ * pan/zoom `<g>`, and knows the active theme. The registry layer is mounted
+ * inside the same `<g>`, so anything it draws shares the same coordinate
+ * system; this context plumbs through the bits it can't recompute on its
+ * own without re-implementing the legacy's resize / theme logic.
+ *
+ * Once `floorplan-panel.tsx` is fully migrated (Phase 6), this provider
+ * moves into a kind-agnostic 2D editor shell and the context loses the
+ * "legacy bridge" connotation.
+ */
+export type FloorplanRenderContextValue = {
+  /** SVG units per screen pixel — used to keep handle radii consistent at any zoom. */
+  unitsPerPixel: number
+  /** Themed palette mirroring the legacy `FloorplanPalette` accent slots. */
+  palette: FloorplanPalette
+  /** SVG `<pattern>` id mounted in `<defs>` by the legacy panel for selection hatch fills. */
+  hatchPatternId: string
+  /**
+   * Rotation (degrees) applied to the registry layer's parent `<g>` by the
+   * legacy panel — 90° by default, adjusted by building rotation. Renderers
+   * that emit text labels use this to keep their final on-screen orientation
+   * readable instead of mirroring whatever the parent rotation is.
+   */
+  sceneRotationDeg: number
+}
+
+const FloorplanRenderContext = createContext<FloorplanRenderContextValue | null>(null)
+
+export function FloorplanRenderProvider({
+  children,
+  unitsPerPixel,
+  palette,
+  hatchPatternId,
+  sceneRotationDeg,
+}: FloorplanRenderContextValue & { children: ReactNode }) {
+  const value = useMemo<FloorplanRenderContextValue>(
+    () => ({ unitsPerPixel, palette, hatchPatternId, sceneRotationDeg }),
+    [unitsPerPixel, palette, hatchPatternId, sceneRotationDeg],
+  )
+  return <FloorplanRenderContext.Provider value={value}>{children}</FloorplanRenderContext.Provider>
+}
+
+/**
+ * Read the active render context. Returns `null` when called outside a
+ * provider — the registry layer treats this as "render statically, skip
+ * theme-aware chrome and interactive handles". This makes the layer
+ * usable in isolation tests + future editor shells without bringing the
+ * whole legacy panel along.
+ */
+export function useFloorplanRender(): FloorplanRenderContextValue | null {
+  return useContext(FloorplanRenderContext)
+}

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

@@ -0,0 +1,77 @@
+'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, except the corner (endpoint) square which is
+ * green to match the 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
+const ENDPOINT_COLOR = '#22c55e' // green-500 — corner (endpoint) snap accent
+
+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={ENDPOINT_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-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-label-angle.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, test } from 'bun:test'
+import { resolveFloorplanLabelAngle } from './floorplan-label-angle'
+
+describe('resolveFloorplanLabelAngle', () => {
+  test('keeps segment labels readable while preserving their screen direction', () => {
+    expect(resolveFloorplanLabelAngle(0, 0)).toBe(0)
+    expect(resolveFloorplanLabelAngle(Math.PI, 0)).toBe(0)
+    expect(resolveFloorplanLabelAngle(Math.PI / 2, 90)).toBe(-90)
+  })
+
+  test('counter-rotates aggregate labels to remain horizontal', () => {
+    expect(resolveFloorplanLabelAngle(0, 90, true)).toBe(-90)
+    expect(resolveFloorplanLabelAngle(Math.PI / 3, -35, true)).toBe(35)
+  })
+})

package/src/components/editor-2d/renderers/floorplan-label-angle.ts

@@ -0,0 +1,14 @@
+export function resolveFloorplanLabelAngle(
+  angleRadians: number,
+  sceneRotationDeg: number,
+  screenUpright = false,
+): number {
+  if (screenUpright) return -sceneRotationDeg
+
+  let localAngleDeg = (angleRadians * 180) / Math.PI
+  let screenAngleDeg = localAngleDeg + sceneRotationDeg
+  screenAngleDeg = ((((screenAngleDeg + 180) % 360) + 360) % 360) - 180
+  if (screenAngleDeg > 90) localAngleDeg -= 180
+  else if (screenAngleDeg <= -90) localAngleDeg += 180
+  return ((((localAngleDeg + 180) % 360) + 360) % 360) - 180
+}