npm - @pascal-app/editor - Versions diffs - 0.9.1 → 0.9.2 - Mend

@pascal-app/editor 0.9.1 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

package/package.json +12 -9
package/src/components/editor/alignment-3d-guide-layer.tsx +10 -2
package/src/components/editor/bake-exporter.tsx +47 -0
package/src/components/editor/custom-camera-controls.tsx +63 -25
package/src/components/editor/editor-layout-mobile.tsx +5 -0
package/src/components/editor/editor-layout-v2.tsx +18 -0
package/src/components/editor/export-manager.tsx +71 -63
package/src/components/editor/fence-tangent-lines-3d.tsx +87 -0
package/src/components/editor/first-person/build-collider-world.test.ts +36 -3
package/src/components/editor/first-person/build-collider-world.ts +32 -5
package/src/components/editor/first-person-controls.tsx +118 -7
package/src/components/editor/floating-action-menu.tsx +410 -33
package/src/components/editor/floating-building-action-menu.tsx +1 -1
package/src/components/editor/floorplan-background-selection.test.ts +58 -0
package/src/components/editor/floorplan-background-selection.ts +3 -2
package/src/components/editor/floorplan-panel.tsx +1804 -849
package/src/components/editor/grid.tsx +166 -39
package/src/components/editor/group-actions.ts +457 -0
package/src/components/editor/group-floating-action-menu.tsx +130 -0
package/src/components/editor/group-move-3d.ts +397 -0
package/src/components/editor/group-rotate-handle.tsx +102 -64
package/src/components/editor/group-selection-box-3d.tsx +173 -0
package/src/components/editor/group-transform-shared.test.ts +192 -1
package/src/components/editor/group-transform-shared.ts +240 -7
package/src/components/editor/handles/handle-arrow.tsx +81 -23
package/src/components/editor/handles/use-handle-drag.ts +37 -4
package/src/components/editor/index.tsx +248 -27
package/src/components/editor/measurement-pill.tsx +62 -22
package/src/components/editor/node-action-menu.tsx +14 -1
package/src/components/editor/node-arrow-handles.tsx +366 -173
package/src/components/editor/opening-guides-3d-layer.tsx +144 -0
package/src/components/editor/quick-measurement-card.tsx +70 -0
package/src/components/editor/quick-measurement-hud.tsx +28 -0
package/src/components/editor/riser-diagram-panel.tsx +137 -0
package/src/components/editor/selection-manager.tsx +812 -466
package/src/components/editor/site-edge-labels.tsx +4 -4
package/src/components/editor/slab-hole-highlights.tsx +13 -5
package/src/components/editor/snapshot-capture-overlay.tsx +255 -115
package/src/components/editor/three-context-bridge.ts +22 -0
package/src/components/editor/thumbnail-generator.tsx +136 -43
package/src/components/editor/use-floorplan-background-placement.ts +113 -45
package/src/components/editor/use-floorplan-scene-data.ts +5 -5
package/src/components/editor/use-mesh-settle-epoch.ts +26 -0
package/src/components/editor/wall-measurement-label.tsx +3 -13
package/src/components/editor/wall-move-side-handles.tsx +36 -21
package/src/components/editor/wall-snap-beacon-layer.tsx +160 -6
package/src/components/editor-2d/floorplan-action-menu-layer.tsx +9 -5
package/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx +1 -1
package/src/components/editor-2d/floorplan-group-action-menu.tsx +87 -0
package/src/components/editor-2d/floorplan-group-move.tsx +701 -0
package/src/components/editor-2d/floorplan-measurement-tool-layer.test.ts +113 -0
package/src/components/editor-2d/floorplan-measurement-tool-layer.tsx +1656 -0
package/src/components/editor-2d/floorplan-quick-measure-layer.tsx +212 -0
package/src/components/editor-2d/floorplan-registry-action-menu.tsx +169 -4
package/src/components/editor-2d/floorplan-registry-move-overlay.tsx +300 -59
package/src/components/editor-2d/floorplan-snap-beacon-layer.tsx +5 -3
package/src/components/editor-2d/renderers/floorplan-label-angle.test.ts +15 -0
package/src/components/editor-2d/renderers/floorplan-label-angle.ts +14 -0
package/src/components/editor-2d/renderers/floorplan-placement-preview-layer.tsx +4 -1
package/src/components/editor-2d/renderers/floorplan-registry-layer.test.ts +308 -0
package/src/components/editor-2d/renderers/floorplan-registry-layer.tsx +1704 -342
package/src/components/editor-2d/renderers/floorplan-voronoi-layer.tsx +128 -0
package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx +419 -60
package/src/components/systems/ceiling/ceiling-system.tsx +97 -4
package/src/components/systems/roof/roof-edit-system.tsx +1768 -13
package/src/components/systems/selection-affordance-manager.tsx +38 -0
package/src/components/systems/zone/zone-label-editor-system.tsx +14 -1
package/src/components/systems/zone/zone-system.tsx +42 -13
package/src/components/tools/elevator/elevator-tool.tsx +34 -8
package/src/components/tools/elevator/move-elevator-tool.tsx +13 -2
package/src/components/tools/fence/fence-drafting.ts +80 -8
package/src/components/tools/item/move-tool.tsx +17 -13
package/src/components/tools/item/placement-math.test.ts +13 -1
package/src/components/tools/item/placement-math.ts +28 -2
package/src/components/tools/item/placement-strategies.ts +246 -5
package/src/components/tools/item/placement-types.ts +13 -1
package/src/components/tools/item/use-draft-node.ts +31 -1
package/src/components/tools/item/use-placement-coordinator.tsx +761 -121
package/src/components/tools/registry/move-registry-node-tool.tsx +561 -99
package/src/components/tools/roof/roof-tool.tsx +320 -94
package/src/components/tools/select/box-select-state.ts +18 -7
package/src/components/tools/select/box-select-tool.tsx +176 -40
package/src/components/tools/select/marquee-geometry.test.ts +161 -0
package/src/components/tools/select/marquee-geometry.ts +155 -0
package/src/components/tools/select/plane-box-select-tool.tsx +1 -8
package/src/components/tools/select/select-candidates.ts +1 -1
package/src/components/tools/shared/cursor-sphere.tsx +62 -26
package/src/components/tools/shared/drag-bounding-box.tsx +28 -4
package/src/components/tools/shared/facing-indicator.tsx +87 -0
package/src/components/tools/shared/facing-pose-indicator.tsx +54 -0
package/src/components/tools/shared/placement-box.tsx +183 -1
package/src/components/tools/shared/polygon-editor.tsx +276 -35
package/src/components/tools/site/site-boundary-editor.tsx +88 -36
package/src/components/tools/stair/stair-defaults.ts +1 -0
package/src/components/tools/stair/stair-tool.tsx +82 -11
package/src/components/tools/tool-manager.tsx +86 -25
package/src/components/tools/wall/wall-drafting.test.ts +330 -0
package/src/components/tools/wall/wall-drafting.ts +180 -103
package/src/components/tools/wall/wall-snap-geometry.test.ts +44 -0
package/src/components/tools/wall/wall-snap-geometry.ts +67 -6
package/src/components/tools/zone/zone-boundary-editor.tsx +5 -1
package/src/components/tools/zone/zone-tool.tsx +82 -88
package/src/components/ui/action-menu/camera-actions.tsx +24 -17
package/src/components/ui/action-menu/control-modes.tsx +40 -93
package/src/components/ui/action-menu/furnish-tools.tsx +5 -5
package/src/components/ui/action-menu/index.tsx +2 -4
package/src/components/ui/action-menu/measurement-control.tsx +188 -0
package/src/components/ui/action-menu/structure-tools.tsx +22 -13
package/src/components/ui/action-menu/view-toggles.tsx +42 -90
package/src/components/ui/command-palette/editor-commands.tsx +2 -2
package/src/components/ui/command-palette/index.tsx +4 -3
package/src/components/ui/controls/material-paint-panel.tsx +86 -17
package/src/components/ui/controls/material-picker.tsx +83 -152
package/src/components/ui/controls/material-properties-editor.tsx +108 -0
package/src/components/ui/controls/metric-control.tsx +118 -44
package/src/components/ui/controls/scene-material-list.tsx +247 -0
package/src/components/ui/controls/slider-control.tsx +88 -38
package/src/components/ui/floating-level-selector.tsx +1 -1
package/src/components/ui/helpers/building-helper.tsx +10 -23
package/src/components/ui/helpers/contextual-helper-panel.tsx +428 -0
package/src/components/ui/helpers/helper-manager.tsx +227 -14
package/src/components/ui/helpers/item-helper.tsx +28 -32
package/src/components/ui/helpers/registered-tool-helper.tsx +45 -11
package/src/components/ui/helpers/roof-helper.tsx +10 -12
package/src/components/ui/icon-ref.tsx +47 -0
package/src/components/ui/item-catalog/catalog-items.tsx +39 -1
package/src/components/ui/item-catalog/item-catalog.tsx +13 -36
package/src/components/ui/level-duplicate-dialog.tsx +1 -1
package/src/components/ui/panels/node-display.ts +17 -17
package/src/components/ui/panels/panel-manager.tsx +22 -13
package/src/components/ui/panels/panel-wrapper.tsx +24 -3
package/src/components/ui/panels/parametric-inspector.tsx +15 -2
package/src/components/ui/panels/reference-panel.tsx +54 -19
package/src/components/ui/primitives/shortcut-token.tsx +39 -3
package/src/components/ui/primitives/sidebar.tsx +1 -0
package/src/components/ui/sidebar/app-sidebar.tsx +5 -1
package/src/components/ui/sidebar/icon-rail.tsx +50 -31
package/src/components/ui/sidebar/panels/plugins-panel.tsx +218 -0
package/src/components/ui/sidebar/panels/settings-panel/index.tsx +71 -40
package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx +60 -6
package/src/components/ui/sidebar/panels/settings-panel/load-build-dialog.tsx +12 -4
package/src/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx +4 -3
package/src/components/ui/sidebar/panels/site-panel/chimney-tree-node.tsx +10 -7
package/src/components/ui/sidebar/panels/site-panel/column-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/door-tree-node.tsx +7 -2
package/src/components/ui/sidebar/panels/site-panel/dormer-tree-node.tsx +10 -7
package/src/components/ui/sidebar/panels/site-panel/elevator-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/fence-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/gutter-tree-node.tsx +10 -7
package/src/components/ui/sidebar/panels/site-panel/index.tsx +40 -17
package/src/components/ui/sidebar/panels/site-panel/item-tree-node.tsx +31 -17
package/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/registry-tree-node.tsx +72 -25
package/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx +7 -3
package/src/components/ui/sidebar/panels/site-panel/shelf-tree-node.tsx +12 -8
package/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx +4 -3
package/src/components/ui/sidebar/panels/site-panel/solar-panel-tree-node.tsx +10 -7
package/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/stair-tree-node.tsx +2 -2
package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx +44 -3
package/src/components/ui/sidebar/panels/site-panel/tree-structure.ts +36 -0
package/src/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx +7 -2
package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx +3 -3
package/src/components/ui/sidebar/tab-bar.tsx +42 -28
package/src/components/ui/sidebar/use-plugin-panels.tsx +132 -0
package/src/components/ui/snap-target-badge.test.tsx +40 -0
package/src/components/ui/snap-target-badge.tsx +88 -0
package/src/components/viewer-overlay.tsx +85 -10
package/src/components/viewer-zone-system.tsx +6 -1
package/src/hooks/use-auto-save.test.ts +14 -0
package/src/hooks/use-auto-save.ts +54 -7
package/src/hooks/use-ceiling-events.ts +3 -2
package/src/hooks/use-drag-action.ts +4 -1
package/src/hooks/use-keyboard.ts +385 -40
package/src/index.tsx +219 -6
package/src/lib/active-placement-surface.ts +35 -0
package/src/lib/ceiling-plan-snap.ts +24 -0
package/src/lib/contextual-help.test.ts +112 -0
package/src/lib/contextual-help.ts +144 -0
package/src/lib/continuation.ts +64 -0
package/src/lib/direct-manipulation.test.ts +192 -0
package/src/lib/direct-manipulation.ts +109 -0
package/src/lib/editor-api.ts +23 -35
package/src/lib/floorplan/apply-alignment.test.ts +25 -0
package/src/lib/floorplan/apply-alignment.ts +18 -12
package/src/lib/floorplan/floorplan-export.tsx +364 -0
package/src/lib/floorplan/geometry.ts +53 -0
package/src/lib/floorplan/index.ts +3 -0
package/src/lib/floorplan/items.ts +5 -2
package/src/lib/floorplan/plan-coords.ts +21 -0
package/src/lib/fresh-planar-placement.test.ts +240 -3
package/src/lib/fresh-planar-placement.ts +68 -1
package/src/lib/glb-export.test.ts +441 -0
package/src/lib/glb-export.ts +874 -0
package/src/lib/history.ts +9 -0
package/src/lib/interaction/hot-set.test.ts +133 -0
package/src/lib/interaction/hot-set.ts +67 -0
package/src/lib/interaction/overlay-policy.test.ts +51 -0
package/src/lib/interaction/overlay-policy.ts +59 -0
package/src/lib/interaction/scope.ts +211 -0
package/src/lib/level-selection.ts +2 -2
package/src/lib/material-paint.ts +36 -49
package/src/lib/measurement-kind.test.ts +30 -0
package/src/lib/measurement-kind.ts +19 -0
package/src/lib/measurement-label.test.ts +47 -0
package/src/lib/measurement-label.ts +68 -0
package/src/lib/measurement-parser.ts +116 -0
package/src/lib/measurements.test.ts +183 -0
package/src/lib/measurements.ts +199 -0
package/src/lib/paint-scope.test.ts +454 -0
package/src/lib/paint-scope.ts +461 -0
package/src/lib/placement-drag-release.ts +23 -0
package/src/lib/planar-cursor-placement.test.ts +57 -0
package/src/lib/plugin-panels.test.ts +19 -0
package/src/lib/plugin-panels.ts +91 -0
package/src/lib/quick-measurement.test.ts +77 -0
package/src/lib/quick-measurement.ts +109 -0
package/src/lib/roof-duplication.ts +6 -6
package/src/lib/roof-hover-outline-proxy.ts +22 -0
package/src/lib/roof-wall-hit.ts +164 -0
package/src/lib/scene-clipboard.test.ts +196 -0
package/src/lib/scene-clipboard.ts +73 -8
package/src/lib/scene.ts +28 -5
package/src/lib/selection-routing.test.ts +298 -0
package/src/lib/selection-routing.ts +175 -0
package/src/lib/sfx/index.ts +1 -0
package/src/lib/sfx/movement-tick.test.ts +65 -0
package/src/lib/sfx/movement-tick.ts +18 -0
package/src/lib/sfx-bus.ts +50 -13
package/src/lib/sfx-player.test.ts +124 -0
package/src/lib/sfx-player.ts +111 -66
package/src/lib/slab-plan-snap.test.ts +93 -0
package/src/lib/slab-plan-snap.ts +108 -0
package/src/lib/snapping-mode.test.ts +138 -0
package/src/lib/snapping-mode.ts +179 -0
package/src/lib/stair-duplication.ts +4 -4
package/src/lib/surface-plan-snap.test.ts +71 -0
package/src/lib/surface-plan-snap.ts +256 -0
package/src/lib/use-linear-display.ts +40 -0
package/src/lib/world-grid-snap.ts +37 -5
package/src/store/use-direct-manipulation-feedback.ts +20 -0
package/src/store/use-editor.tsx +484 -114
package/src/store/use-facing-pose.ts +44 -0
package/src/store/use-fence-curve-draft.ts +21 -0
package/src/store/use-floorplan-draft-preview.ts +101 -0
package/src/store/use-floorplan-marquee.ts +50 -0
package/src/store/use-interaction-scope.test.ts +186 -0
package/src/store/use-interaction-scope.ts +132 -0
package/src/store/use-measurement-draft.test.ts +530 -0
package/src/store/use-measurement-draft.ts +543 -0
package/src/store/use-opening-guides.ts +41 -0
package/src/store/use-placement-preview.ts +11 -3
package/src/store/use-quick-measurement-hud.test.ts +53 -0
package/src/store/use-quick-measurement-hud.ts +77 -0
package/src/store/use-segment-draft-chain.ts +28 -0
package/src/store/use-stair-build-preview.ts +43 -0
package/src/store/use-wall-snap-indicator.ts +2 -0
package/src/components/editor/first-person/bvh-ecctrl.tsx +0 -860
package/src/components/editor/group-move-handle.tsx +0 -316
package/src/components/ui/panels/paint-panel.tsx +0 -163
package/src/lib/level-name.ts +0 -11

package/src/components/editor/opening-guides-3d-layer.tsx ADDED Viewed

@@ -0,0 +1,144 @@
+'use client'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { memo, useEffect, useLayoutEffect, useMemo } from 'react'
+import { BufferGeometry, Float32BufferAttribute, Line as ThreeLine } from 'three'
+import { LineBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+import useOpeningGuides, {
+  type OpeningGuide3D,
+  type OpeningGuideVec3,
+} from '../../store/use-opening-guides'
+import { formatMeasurement } from './measurement-pill'
+const DIMENSION_COLOR = 0x81_8c_f8 // indigo — a neutral measurement
+const ALIGN_COLOR = 0xef_44_44 // red — a snapped alignment (matches the 2D guide accent)
+const DIMENSION_PILL = '#6366f1'
+const BADGE_PILL = '#ec4899' // pink — matches the 2D equal-spacing badge
+// Shared depth-test-off materials so the guides read on top of the wall and
+// don't rebuild GPU buffers as guides churn during a drag.
+const dimensionMaterial = new LineBasicNodeMaterial({
+  color: DIMENSION_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+})
+const alignMaterial = new LineBasicNodeMaterial({
+  color: ALIGN_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+})
+const mid = (a: OpeningGuideVec3, b: OpeningGuideVec3): OpeningGuideVec3 => [
+  (a[0] + b[0]) / 2,
+  (a[1] + b[1]) / 2,
+  (a[2] + b[2]) / 2,
+]
+/**
+ * Wall-plane proximity / alignment guides for the 3D editor — the spatial twin
+ * of the floor-plan placement dimensions + equal-spacing badges. Subscribes to
+ * `useOpeningGuides` (published by the door/window move, placement, and resize
+ * interactions each drag tick) and draws sill/head + edge-proximity dimensions, a sill-alignment line, and
+ * equal-spacing badges. Coordinates are already in the move tool's render frame
+ * (the producer reuses the cursor's `wallLocalToWorld`, so they share the cursor's
+ * building-local frame), so this layer mounts beside `Alignment3DGuideLayer` and
+ * renders them as-is.
+ */
+export const OpeningGuides3DLayer = memo(function OpeningGuides3DLayer() {
+  const guides = useOpeningGuides((s) => s.guides)
+  const unit = useViewer((s) => s.unit)
+  if (guides.length === 0) return null
+  return (
+    <>
+      {guides.map((guide) => (
+        <OpeningGuide guide={guide} key={guide.id} unit={unit} />
+      ))}
+    </>
+  )
+})
+function OpeningGuide({ guide, unit }: { guide: OpeningGuide3D; unit: 'metric' | 'imperial' }) {
+  if (guide.kind === 'badge') {
+    return (
+      <Html
+        center
+        position={guide.at}
+        style={{ pointerEvents: 'none', userSelect: 'none' }}
+        zIndexRange={[20, 0]}
+      >
+        <div
+          className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-sans font-semibold text-[11px] text-white"
+          style={{ backgroundColor: BADGE_PILL }}
+        >
+          {`= ${formatMeasurement(guide.value, unit)}`}
+        </div>
+      </Html>
+    )
+  }
+  const material = guide.kind === 'align-line' ? alignMaterial : dimensionMaterial
+  return (
+    <>
+      <GuideSegment from={guide.from} material={material} to={guide.to} />
+      {guide.kind === 'dimension' ? (
+        <Html
+          center
+          position={mid(guide.from, guide.to)}
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+          zIndexRange={[20, 0]}
+        >
+          <div
+            className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-medium font-sans text-[11px] text-white"
+            style={{ backgroundColor: DIMENSION_PILL }}
+          >
+            {formatMeasurement(guide.value, unit)}
+          </div>
+        </Html>
+      ) : null}
+    </>
+  )
+}
+function GuideSegment({
+  from,
+  to,
+  material,
+}: {
+  from: OpeningGuideVec3
+  to: OpeningGuideVec3
+  material: LineBasicNodeMaterial
+}) {
+  // Build the THREE.Line once with a preallocated 2-point position buffer and
+  // mount it via <primitive> (the intrinsic <line> JSX element collides with
+  // React's SVG <line>). `material` is a module-level constant, so this memo
+  // runs exactly once per mounted slot; subsequent drag ticks mutate the
+  // existing buffer in place via the layout effect below rather than rebuilding
+  // the geometry, line, and GPU buffer every frame.
+  const { line, position } = useMemo(() => {
+    const position = new Float32BufferAttribute(new Float32Array(6), 3)
+    const geometry = new BufferGeometry()
+    geometry.setAttribute('position', position)
+    const line = new ThreeLine(geometry, material)
+    line.frustumCulled = false
+    line.layers.set(EDITOR_LAYER)
+    line.renderOrder = 1000
+    return { line, position }
+  }, [material])
+  const [fx, fy, fz] = from
+  const [tx, ty, tz] = to
+  useLayoutEffect(() => {
+    position.setXYZ(0, fx, fy, fz)
+    position.setXYZ(1, tx, ty, tz)
+    position.needsUpdate = true
+  }, [position, fx, fy, fz, tx, ty, tz])
+  useEffect(() => () => line.geometry.dispose(), [line])
+  return <primitive object={line} />
+}

package/src/components/editor/quick-measurement-card.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+'use client'
+import type { QuickMeasurementMetric, QuickMeasurementReport } from '@pascal-app/core'
+import { Crosshair, MapPin } from 'lucide-react'
+import { memo } from 'react'
+import { formatAreaLabel, formatLinearMeasurement, formatVolumeLabel } from '../../lib/measurements'
+function formatMetric(metric: QuickMeasurementMetric, unit: 'metric' | 'imperial'): string {
+  if (metric.quantity === 'area') return formatAreaLabel(metric.value, unit, 2)
+  if (metric.quantity === 'volume') return formatVolumeLabel(metric.value, unit, 2)
+  return formatLinearMeasurement(metric.value, unit)
+}
+export const QuickMeasurementCard = memo(function QuickMeasurementCard({
+  report,
+  unit,
+  lensState,
+}: {
+  report: QuickMeasurementReport
+  unit: 'metric' | 'imperial'
+  lensState: 'live' | 'pinned'
+}) {
+  const pinned = lensState === 'pinned'
+  return (
+    <div
+      aria-label={`${pinned ? 'Pinned' : 'Live'} ${report.kindLabel.toLowerCase()} measurements`}
+      className="w-full min-w-0 overflow-hidden rounded-lg border border-border/45 bg-background/96 text-foreground shadow-elevation-3 backdrop-blur-xl"
+      data-quick-measure-card
+      data-quick-measure-state={lensState}
+      role="status"
+    >
+      <div className="flex items-center gap-2 border-border/60 border-b px-3 py-2">
+        {pinned ? (
+          <MapPin aria-hidden="true" className="h-3.5 w-3.5 shrink-0 text-foreground" />
+        ) : (
+          <Crosshair aria-hidden="true" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        )}
+        <div className="min-w-0">
+          <div className="truncate font-medium text-xs leading-tight">{report.title}</div>
+          <div className="text-[10px] text-muted-foreground leading-tight">{report.kindLabel}</div>
+        </div>
+        <span className="ml-auto shrink-0 rounded-full bg-muted px-2 py-0.5 font-medium text-[10px] text-muted-foreground">
+          {pinned ? 'Pinned' : 'Live lens'}
+        </span>
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))] gap-1.5 p-2">
+        {report.metrics.map((metric) => (
+          <div className="min-w-0 rounded-md bg-muted/60 px-2.5 py-1.5" key={metric.key}>
+            <div className="flex items-baseline gap-1 text-[10px] text-muted-foreground">
+              <span className="font-medium text-foreground/80">{metric.abbreviation}</span>
+              <span className="truncate">{metric.label}</span>
+            </div>
+            <div className="mt-0.5 truncate font-mono font-medium text-xs tabular-nums">
+              {formatMetric(metric, unit)}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 border-border/60 border-t px-3 py-1.5 text-[10px] text-muted-foreground leading-tight">
+        {report.note ? <span className="min-w-48 flex-1">{report.note}</span> : <span />}
+        <span className="ml-auto shrink-0 text-foreground/70">
+          {pinned ? 'Click another surface to replace' : 'Click surface to pin'}
+        </span>
+      </div>
+    </div>
+  )
+})

package/src/components/editor/quick-measurement-hud.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+'use client'
+import { useViewer } from '@pascal-app/viewer'
+import useEditor from '../../store/use-editor'
+import {
+  selectQuickMeasurementHudEntry,
+  useQuickMeasurementHud,
+} from '../../store/use-quick-measurement-hud'
+import { QuickMeasurementCard } from './quick-measurement-card'
+export function QuickMeasurementHud() {
+  const viewMode = useEditor((state) => state.viewMode)
+  const entry = useQuickMeasurementHud((state) => selectQuickMeasurementHudEntry(state, viewMode))
+  const unit = useViewer((state) => state.unit)
+  if (!entry) return null
+  return (
+    <div
+      className="pointer-events-none absolute inset-x-3 top-3 z-40 flex justify-center"
+      data-quick-measure-hud
+    >
+      <div className="w-full max-w-[34rem]">
+        <QuickMeasurementCard lensState={entry.lensState} report={entry.report} unit={unit} />
+      </div>
+    </div>
+  )
+}

package/src/components/editor/riser-diagram-panel.tsx ADDED Viewed

@@ -0,0 +1,137 @@
+'use client'
+import { type AnyNodeId, buildRiserDiagram, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { X } from 'lucide-react'
+import { useMemo } from 'react'
+import useEditor from '../../store/use-editor'
+const WASTE_COLOR = '#0ea5e9'
+const VENT_COLOR = '#a855f7'
+const MARKER_COLOR = '#1e293b'
+const PADDING = 32
+/** Meters → SVG units. The iso projection is in meters; scale up so a
+ *  typical house drain (a few meters) fills the panel. */
+const SCALE = 90
+/**
+ * DWV riser diagram — the plumbing isometric drawn from the scene's
+ * drain/waste/vent nodes. Read-only; toggled from the view controls.
+ * Vertical stacks read vertical, sloped drains lean at 30°, with size +
+ * vent-termination annotations, matching the permit-drawing convention.
+ * Clicking a line/marker selects its node in 3D.
+ */
+export function RiserDiagramPanel() {
+  const isOpen = useEditor((s) => s.isRiserOpen)
+  // Only the open flag lives here. The whole-scene subscription that drives
+  // the diagram lives in the child, mounted only while the panel is open —
+  // so a closed panel doesn't re-render on every scene mutation.
+  if (!isOpen) return null
+  return <RiserDiagramContent />
+}
+function RiserDiagramContent() {
+  const setRiserOpen = useEditor((s) => s.setRiserOpen)
+  const nodes = useScene((s) => s.nodes)
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const diagram = useMemo(() => buildRiserDiagram(nodes), [nodes])
+  const select = (nodeId: AnyNodeId) => useViewer.getState().setSelection({ selectedIds: [nodeId] })
+  const width = diagram ? (diagram.bounds.maxX - diagram.bounds.minX) * SCALE + PADDING * 2 : 320
+  const height = diagram ? (diagram.bounds.maxY - diagram.bounds.minY) * SCALE + PADDING * 2 : 200
+  const tx = diagram ? -diagram.bounds.minX * SCALE + PADDING : 0
+  const ty = diagram ? -diagram.bounds.minY * SCALE + PADDING : 0
+  return (
+    <div className="dark pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl">
+      <div className="flex items-center justify-between border-border/40 border-b px-4 py-2.5">
+        <div className="flex flex-col">
+          <span className="font-medium text-sm">Riser Diagram</span>
+          <span className="text-muted-foreground text-xs">DWV plumbing isometric</span>
+        </div>
+        <button
+          className="flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-white/10"
+          onClick={() => setRiserOpen(false)}
+        >
+          <X className="h-4 w-4 text-muted-foreground" />
+        </button>
+      </div>
+      <div className="flex items-center gap-3 border-border/40 border-b px-4 py-2 text-xs">
+        <span className="flex items-center gap-1.5">
+          <span className="h-0.5 w-4" style={{ background: WASTE_COLOR }} /> Waste
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className="h-0 w-4 border-t-2 border-dashed" style={{ borderColor: VENT_COLOR }} />{' '}
+          Vent
+        </span>
+      </div>
+      <div className="overflow-auto p-2">
+        {diagram ? (
+          <svg
+            height={Math.max(height, 120)}
+            role="img"
+            aria-label="DWV riser diagram"
+            viewBox={`0 0 ${Math.max(width, 200)} ${Math.max(height, 120)}`}
+            width="100%"
+          >
+            <g transform={`translate(${tx}, ${ty})`}>
+              {diagram.lines.map((line, i) => {
+                const isSel = selectedIds.includes(line.nodeId)
+                const color = line.system === 'waste' ? WASTE_COLOR : VENT_COLOR
+                return (
+                  <g key={`${line.nodeId}-${i}`}>
+                    <line
+                      className="cursor-pointer"
+                      onClick={() => select(line.nodeId)}
+                      stroke={color}
+                      strokeDasharray={line.system === 'vent' ? '5 4' : undefined}
+                      strokeLinecap="round"
+                      strokeWidth={(line.vertical ? 3.5 : 2.5) + (isSel ? 2 : 0)}
+                      x1={line.from[0] * SCALE}
+                      x2={line.to[0] * SCALE}
+                      y1={line.from[1] * SCALE}
+                      y2={line.to[1] * SCALE}
+                    />
+                    <text
+                      fill={color}
+                      fontSize={9}
+                      x={((line.from[0] + line.to[0]) / 2) * SCALE + 4}
+                      y={((line.from[1] + line.to[1]) / 2) * SCALE - 3}
+                    >
+                      {line.diameter}"
+                    </text>
+                  </g>
+                )
+              })}
+              {diagram.markers.map((marker, i) => (
+                <g
+                  className="cursor-pointer"
+                  key={`${marker.nodeId}-${i}`}
+                  onClick={() => select(marker.nodeId)}
+                  transform={`translate(${marker.point[0] * SCALE}, ${marker.point[1] * SCALE})`}
+                >
+                  {marker.kind === 'vent-termination' ? (
+                    <path d="M -5 0 L 0 -7 L 5 0" fill="none" stroke={VENT_COLOR} strokeWidth={2} />
+                  ) : (
+                    <circle fill={MARKER_COLOR} r={3} stroke={MARKER_COLOR} strokeWidth={1.5} />
+                  )}
+                  <text fill={MARKER_COLOR} fontSize={9} x={8} y={3}>
+                    {marker.label}
+                  </text>
+                </g>
+              ))}
+            </g>
+          </svg>
+        ) : (
+          <div className="flex h-32 items-center justify-center px-6 text-center text-muted-foreground text-sm">
+            No drain, waste, or vent pipes yet. Draw plumbing to see the riser diagram.
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}