@pascal-app/editor 0.7.0 → 0.9.1

package/src/store/use-placement-preview.ts

@@ -0,0 +1,31 @@
+// Ephemeral store for a placement tool's 2D floor-plan ghost. A registry
+// placement tool (e.g. column / elevator) publishes a fully-positioned,
+// transient preview node on each `grid:move`; the floor-plan
+// placement-preview layer subscribes and renders the node's `def.floorplan`
+// footprint as a faint ghost that follows the cursor. The 3D view already
+// shows a translucent mesh preview, so this only feeds the 2D layer.
+//
+// Editor-only: the read-only viewer route never places nodes. Lives here
+// rather than in `core` for that reason; node-kind tools (e.g. column) reach
+// it through the `@pascal-app/editor` public surface, the same way they
+// already consume `triggerSFX`. Producers clear on commit, cancel, and
+// unmount.
+
+import type { AnyNode } from '@pascal-app/core'
+import { create } from 'zustand'
+
+type PlacementPreviewState = {
+  /** Transient preview node, already positioned + rotated at the (snapped,
+   *  aligned) cursor. `null` when no placement is active. */
+  node: AnyNode | null
+  set(node: AnyNode | null): void
+  clear(): void
+}
+
+const usePlacementPreview = create<PlacementPreviewState>((set) => ({
+  node: null,
+  set: (node) => set({ node }),
+  clear: () => set({ node: null }),
+}))
+
+export default usePlacementPreview

package/src/store/use-wall-move-ghosts.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand'
+
+/**
+ * Ephemeral preview state for wall move's bridge walls.
+ *
+ * When the user drags a wall whose corner neighbours are off-axis to
+ * the move direction, the junction planner emits a `bridgePlan` for
+ * each — a new wall that would be inserted between the original and
+ * new corner on commit. The 3D `MoveWallTool` already renders these
+ * as translucent ghost meshes mid-drag; the 2D `wallFloorplanMoveTarget`
+ * writes here so the floor-plan SVG layer can render the same hint.
+ *
+ * Writer: `packages/nodes/src/wall/floorplan-move.ts` (on each `apply`,
+ * cleared on `commit` and by the move overlay's cleanup).
+ * Reader: `packages/editor/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx`.
+ */
+export type WallMoveGhostBridge = {
+  id: string
+  start: [number, number]
+  end: [number, number]
+  /** Plan-space thickness already passed through `getFloorplanWallThickness`. */
+  thickness: number
+  color: string
+}
+
+type WallMoveGhostsState = {
+  bridges: WallMoveGhostBridge[]
+  setBridges: (bridges: WallMoveGhostBridge[]) => void
+  clear: () => void
+}
+
+export const useWallMoveGhosts = create<WallMoveGhostsState>((set) => ({
+  bridges: [],
+  setBridges: (bridges) => set({ bridges }),
+  clear: () => set({ bridges: [] }),
+}))

package/src/store/use-wall-snap-indicator.ts

@@ -0,0 +1,32 @@
+// Ephemeral store for the "magnetic" wall-snap beacon shown during wall
+// drafting. The wall tool writes the active snap point on pointermove when
+// the draft endpoint locks onto existing wall geometry (a corner or a point
+// along a wall); the 3D beacon layer subscribes and draws a vertical marker
+// there. Cleared on commit, cancel, and unmount — same lifecycle as
+// `use-alignment-guides`.
+
+import { create } from 'zustand'
+
+/** Which kind of wall geometry the draft point snapped to. */
+export type WallSnapKind = 'endpoint' | 'midpoint' | 'intersection' | 'wall'
+
+export type WallSnapPoint = {
+  /** Building-local plan coordinates (XZ meters). */
+  x: number
+  z: number
+  kind: WallSnapKind
+}
+
+type WallSnapIndicatorState = {
+  point: WallSnapPoint | null
+  set(point: WallSnapPoint | null): void
+  clear(): void
+}
+
+const useWallSnapIndicator = create<WallSnapIndicatorState>((set) => ({
+  point: null,
+  set: (point) => set({ point }),
+  clear: () => set({ point: null }),
+}))
+
+export default useWallSnapIndicator

package/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "@pascal/typescript-config/react-library.json",
   "compilerOptions": {
     "rootDir": "src",
-    "noEmit": true
+    "noEmit": true,
+    "types": ["bun"]
   },
   "include": ["src"],
   "exclude": ["node_modules"]

package/src/components/editor/preset-thumbnail-generator.tsx

@@ -1,125 +0,0 @@
-'use client'
-
-import { emitter, sceneRegistry } from '@pascal-app/core'
-import { useThree } from '@react-three/fiber'
-import { useCallback, useEffect } from 'react'
-import * as THREE from 'three'
-import { usePresetsAdapter } from '../../contexts/presets-context'
-
-const THUMBNAIL_SIZE = 1080
-const CAMERA_FOV = 45
-
-export const PresetThumbnailGenerator = () => {
-  const gl = useThree((state) => state.gl)
-  const scene = useThree((state) => state.scene)
-  const adapter = usePresetsAdapter()
-
-  const generate = useCallback(
-    async ({ presetId, nodeId }: { presetId: string; nodeId: string }) => {
-      const target = sceneRegistry.nodes.get(nodeId)
-      if (!target) {
-        console.error('❌ PresetThumbnail: node not found', nodeId)
-        return
-      }
-
-      // Compute each mesh's transform relative to the target node (cancels world
-      // position/rotation), so the item is always rendered at origin with a known
-      // neutral orientation regardless of where it's placed in the scene.
-      target.updateWorldMatrix(true, true)
-      const targetInverse = new THREE.Matrix4().copy(target.matrixWorld).invert()
-      const relMatrix = new THREE.Matrix4()
-
-      const clones: THREE.Object3D[] = []
-      target.traverse((obj) => {
-        if (
-          !(obj instanceof THREE.Mesh || obj instanceof THREE.Line || obj instanceof THREE.Points)
-        )
-          return
-        const c = obj.clone(false) // shallow clone: copies geometry, material, visible — no children
-        relMatrix.multiplyMatrices(targetInverse, obj.matrixWorld)
-        relMatrix.decompose(c.position, c.quaternion, c.scale)
-        scene.add(c)
-        clones.push(c)
-      })
-
-      if (clones.length === 0) {
-        console.error('❌ PresetThumbnail: no renderable objects found', nodeId)
-        return
-      }
-
-      // Combined bounding box across all clones
-      const box = new THREE.Box3()
-      for (const c of clones) box.expandByObject(c)
-
-      if (box.isEmpty()) {
-        for (const c of clones) scene.remove(c)
-        console.error('❌ PresetThumbnail: empty bounding box', nodeId)
-        return
-      }
-
-      const sphere = new THREE.Sphere()
-      box.getBoundingSphere(sphere)
-
-      // Camera: aspect matches canvas (center-cropped to square after render)
-      const { width, height } = gl.domElement
-      const camera = new THREE.PerspectiveCamera(CAMERA_FOV, width / height, 0.01, 1000)
-      const dir = new THREE.Vector3(-0.5, 0.5, 0.5).normalize()
-      const fovRad = (CAMERA_FOV * Math.PI) / 180
-      const dist = (sphere.radius / Math.tan(fovRad / 2)) * 1.3
-      camera.position.copy(sphere.center).addScaledVector(dir, dist)
-      camera.lookAt(sphere.center)
-      camera.updateProjectionMatrix()
-
-      // Hide all scene geometry except the clones — leave lights, cameras, etc. intact
-      const cloneSet = new Set<THREE.Object3D>(clones)
-      const snapshot = new Map<THREE.Object3D, boolean>()
-      scene.traverse((obj) => {
-        if (cloneSet.has(obj)) return
-        if (
-          !(obj instanceof THREE.Mesh || obj instanceof THREE.Line || obj instanceof THREE.Points)
-        )
-          return
-        snapshot.set(obj, obj.visible)
-        obj.visible = false
-      })
-
-      gl.render(scene, camera)
-
-      // Restore visibility and remove clones
-      snapshot.forEach((wasVisible, obj) => {
-        obj.visible = wasVisible
-      })
-      for (const c of clones) scene.remove(c)
-
-      // Center-crop to square and scale to THUMBNAIL_SIZE
-      const minDim = Math.min(width, height)
-      const sx = Math.round((width - minDim) / 2)
-      const sy = Math.round((height - minDim) / 2)
-      const offscreen = document.createElement('canvas')
-      offscreen.width = THUMBNAIL_SIZE
-      offscreen.height = THUMBNAIL_SIZE
-      const ctx = offscreen.getContext('2d')!
-      ctx.drawImage(gl.domElement, sx, sy, minDim, minDim, 0, 0, THUMBNAIL_SIZE, THUMBNAIL_SIZE)
-
-      offscreen.toBlob(async (blob) => {
-        if (!blob) {
-          console.error('❌ PresetThumbnail: failed to create blob')
-          return
-        }
-        if (!adapter.uploadPresetThumbnail) return
-        const thumbnailUrl = await adapter.uploadPresetThumbnail(presetId, blob)
-        if (thumbnailUrl) {
-          emitter.emit('preset:thumbnail-updated', { presetId, thumbnailUrl })
-        }
-      }, 'image/png')
-    },
-    [gl, scene, adapter],
-  )
-
-  useEffect(() => {
-    emitter.on('preset:generate-thumbnail', generate)
-    return () => emitter.off('preset:generate-thumbnail', generate)
-  }, [generate])
-
-  return null
-}

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

@@ -1,113 +0,0 @@
-'use client'
-
-import type { Point2D, RoofNode, RoofSegmentNode } from '@pascal-app/core'
-import { memo } from 'react'
-import { toSvgX, toSvgY } from '../svg-paths'
-
-type FloorplanLineSegment = {
-  start: Point2D
-  end: Point2D
-}
-
-type FloorplanRoofSegmentEntry = {
-  segment: RoofSegmentNode
-  points: string
-  ridgeLine: FloorplanLineSegment | null
-}
-
-type FloorplanRoofEntry = {
-  roof: RoofNode
-  segments: FloorplanRoofSegmentEntry[]
-}
-
-type FloorplanRoofPalette = {
-  roofFill: string
-  roofActiveFill: string
-  roofSelectedFill: string
-  roofStroke: string
-  roofActiveStroke: string
-  roofSelectedStroke: string
-  roofRidgeStroke: string
-  roofSelectedRidgeStroke: string
-}
-
-type FloorplanRoofLayerProps = {
-  highlightedIdSet: ReadonlySet<string>
-  palette: FloorplanRoofPalette
-  roofEntries: FloorplanRoofEntry[]
-  selectedIdSet: ReadonlySet<string>
-}
-
-export const FloorplanRoofLayer = memo(function FloorplanRoofLayer({
-  highlightedIdSet,
-  palette,
-  roofEntries,
-  selectedIdSet,
-}: FloorplanRoofLayerProps) {
-  if (roofEntries.length === 0) {
-    return null
-  }
-
-  return (
-    <>
-      {roofEntries.map(({ roof, segments }) => {
-        const roofSelected = selectedIdSet.has(roof.id)
-        const roofHighlighted = highlightedIdSet.has(roof.id)
-        const hasSelectedSegment = segments.some(({ segment }) => selectedIdSet.has(segment.id))
-        const hasHighlightedSegment = segments.some(({ segment }) =>
-          highlightedIdSet.has(segment.id),
-        )
-        const isRoofActive =
-          roofSelected || roofHighlighted || hasSelectedSegment || hasHighlightedSegment
-
-        return (
-          <g key={roof.id} pointerEvents="none">
-            {segments.map(({ points, ridgeLine, segment }) => {
-              const isSegmentSelected = selectedIdSet.has(segment.id)
-              const isSegmentHighlighted = highlightedIdSet.has(segment.id)
-              const isSegmentActive = isSegmentSelected || isSegmentHighlighted
-
-              return (
-                <g key={segment.id}>
-                  <polygon
-                    fill={
-                      isSegmentActive
-                        ? palette.roofSelectedFill
-                        : isRoofActive
-                          ? palette.roofActiveFill
-                          : palette.roofFill
-                    }
-                    points={points}
-                    stroke={
-                      isSegmentActive
-                        ? palette.roofSelectedStroke
-                        : isRoofActive
-                          ? palette.roofActiveStroke
-                          : palette.roofStroke
-                    }
-                    strokeWidth={isSegmentActive ? '2.25' : isRoofActive ? '1.75' : '1.1'}
-                    vectorEffect="non-scaling-stroke"
-                  />
-                  {ridgeLine ? (
-                    <line
-                      fill="none"
-                      stroke={
-                        isSegmentActive ? palette.roofSelectedRidgeStroke : palette.roofRidgeStroke
-                      }
-                      strokeWidth={isSegmentActive ? '2' : '1.4'}
-                      vectorEffect="non-scaling-stroke"
-                      x1={toSvgX(ridgeLine.start.x)}
-                      x2={toSvgX(ridgeLine.end.x)}
-                      y1={toSvgY(ridgeLine.start.y)}
-                      y2={toSvgY(ridgeLine.end.y)}
-                    />
-                  ) : null}
-                </g>
-              )
-            })}
-          </g>
-        )
-      })}
-    </>
-  )
-})

package/src/components/feedback-dialog.tsx

@@ -1,265 +0,0 @@
-'use client'
-
-import { useScene } from '@pascal-app/core'
-import { ImageIcon, MessageSquare, X } from 'lucide-react'
-import { useCallback, useRef, useState } from 'react'
-import { Button } from './ui/primitives/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from './ui/primitives/dialog'
-
-const MAX_IMAGES = 5
-const MAX_IMAGE_SIZE = 5 * 1024 * 1024
-
-type ImagePreview = { file: File; url: string }
-
-export function FeedbackDialog({
-  projectId: projectIdProp,
-  onSubmit,
-}: {
-  projectId?: string
-  onSubmit?: (data: {
-    message: string
-    projectId?: string
-    sceneGraph: unknown
-    images: File[]
-  }) => Promise<{ success: boolean; error?: string }>
-}) {
-  const projectId = projectIdProp
-
-  const [open, setOpen] = useState(false)
-  const [message, setMessage] = useState('')
-  const [images, setImages] = useState<ImagePreview[]>([])
-  const [isDragging, setIsDragging] = useState(false)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [sent, setSent] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const dragCounter = useRef(0)
-
-  const handleOpen = () => {
-    setOpen(true)
-    setSent(false)
-    setError(null)
-    setMessage('')
-    setImages([])
-    setIsDragging(false)
-    dragCounter.current = 0
-  }
-
-  const handleClose = () => {
-    if (isSubmitting) return
-    setOpen(false)
-    images.forEach((img) => {
-      URL.revokeObjectURL(img.url)
-    })
-  }
-
-  const addFiles = useCallback((files: FileList | File[]) => {
-    const incoming = Array.from(files).filter(
-      (f) => f.type.startsWith('image/') && f.size <= MAX_IMAGE_SIZE,
-    )
-    setImages((prev) => {
-      const remaining = MAX_IMAGES - prev.length
-      const added = incoming.slice(0, remaining).map((file) => ({
-        file,
-        url: URL.createObjectURL(file),
-      }))
-      return [...prev, ...added]
-    })
-  }, [])
-
-  const removeImage = (index: number) => {
-    setImages((prev) => {
-      const img = prev[index]
-      if (img) URL.revokeObjectURL(img.url)
-      return prev.filter((_, i) => i !== index)
-    })
-  }
-
-  // ── Drag handlers (on the entire dialog content) ──
-  const onDragEnter = (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter.current++
-    if (e.dataTransfer.types.includes('Files')) {
-      setIsDragging(true)
-    }
-  }
-
-  const onDragLeave = (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter.current--
-    if (dragCounter.current === 0) {
-      setIsDragging(false)
-    }
-  }
-
-  const onDragOver = (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
-  const onDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter.current = 0
-    setIsDragging(false)
-    if (e.dataTransfer.files.length > 0) {
-      addFiles(e.dataTransfer.files)
-    }
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError(null)
-    setIsSubmitting(true)
-
-    try {
-      if (!onSubmit) return
-      const { nodes, rootNodeIds } = useScene.getState()
-      const sceneGraph = { nodes, rootNodeIds }
-      const result = await onSubmit({
-        message,
-        projectId,
-        sceneGraph,
-        images: images.map((img) => img.file),
-      })
-      if (result.success) {
-        setSent(true)
-        setTimeout(() => setOpen(false), 1500)
-      } else {
-        setError(result.error ?? 'Something went wrong')
-      }
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  return (
-    <>
-      <button
-        className="flex items-center gap-2 rounded-lg border border-border bg-background/95 px-3 py-2 font-medium text-sm shadow-lg backdrop-blur-md transition-colors hover:bg-accent/90"
-        onClick={handleOpen}
-      >
-        <MessageSquare className="h-4 w-4" />
-        Feedback
-      </button>
-
-      <Dialog onOpenChange={handleClose} open={open}>
-        <DialogContent
-          className="sm:max-w-[460px]"
-          onDragEnter={onDragEnter}
-          onDragLeave={onDragLeave}
-          onDragOver={onDragOver}
-          onDrop={onDrop}
-        >
-          {/* Drag overlay — only visible when dragging files over the dialog */}
-          {isDragging && (
-            <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg border-2 border-primary/50 border-dashed bg-primary/5 backdrop-blur-sm transition-all">
-              <div className="flex flex-col items-center gap-2 text-primary/70">
-                <ImageIcon className="h-8 w-8" />
-                <p className="font-medium text-sm">Drop images here</p>
-              </div>
-            </div>
-          )}
-
-          <DialogHeader>
-            <DialogTitle>Send Feedback</DialogTitle>
-            <DialogDescription>We&apos;d love to hear your thoughts</DialogDescription>
-          </DialogHeader>
-
-          {sent ? (
-            <p className="py-4 text-center text-muted-foreground text-sm">
-              Thanks for your feedback!
-            </p>
-          ) : (
-            <form className="space-y-4" onSubmit={handleSubmit}>
-              <div>
-                <label className="font-medium text-sm" htmlFor="feedback-message">
-                  Your feedback
-                </label>
-                <textarea
-                  autoFocus
-                  className="mt-1 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-                  disabled={isSubmitting}
-                  id="feedback-message"
-                  onChange={(e) => setMessage(e.target.value)}
-                  placeholder="Share your thoughts, suggestions, feature requests, or report issues..."
-                  rows={5}
-                  value={message}
-                />
-              </div>
-
-              {/* Image thumbnails */}
-              {images.length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {images.map((img, i) => (
-                    <div
-                      className="group relative h-14 w-14 overflow-hidden rounded-md border border-border"
-                      key={img.url}
-                    >
-                      <img alt="" className="h-full w-full object-cover" src={img.url} />
-                      <button
-                        className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
-                        onClick={() => removeImage(i)}
-                        type="button"
-                      >
-                        <X className="h-4 w-4 text-white" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {error && <p className="text-destructive text-sm">{error}</p>}
-
-              <div className="flex items-center justify-between">
-                {/* Subtle attach button */}
-                <button
-                  className="flex items-center gap-1.5 text-muted-foreground text-xs transition-colors hover:text-foreground disabled:opacity-40"
-                  disabled={isSubmitting || images.length >= MAX_IMAGES}
-                  onClick={() => fileInputRef.current?.click()}
-                  type="button"
-                >
-                  <ImageIcon className="h-3.5 w-3.5" />
-                  {images.length > 0 ? `${images.length}/${MAX_IMAGES}` : 'Attach'}
-                </button>
-                <input
-                  accept="image/*"
-                  className="hidden"
-                  multiple
-                  onChange={(e) => {
-                    if (e.target.files) addFiles(e.target.files)
-                    e.target.value = ''
-                  }}
-                  ref={fileInputRef}
-                  type="file"
-                />
-
-                <div className="flex gap-2">
-                  <Button
-                    disabled={isSubmitting}
-                    onClick={handleClose}
-                    type="button"
-                    variant="outline"
-                  >
-                    Cancel
-                  </Button>
-                  <Button disabled={isSubmitting || !message.trim() || !onSubmit} type="submit">
-                    {isSubmitting ? 'Sending...' : 'Send Feedback'}
-                  </Button>
-                </div>
-              </div>
-            </form>
-          )}
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}