@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/editor/measurement-pill.tsx

@@ -4,7 +4,11 @@ import { type ForwardedRef, Fragment, forwardRef } from 'react'
 
 // Canonical in-world dimension formatter — metric metres or imperial
 // feet/inches. Shared by every measurement readout so they read the same.
-export function formatMeasurement(value: number, unit: 'metric' | 'imperial'): string {
+export function formatMeasurement(
+  value: number,
+  unit: 'metric' | 'imperial',
+  metricNotation: 'meters' | 'millimeters' = 'meters',
+): string {
   if (unit === 'imperial') {
     const feet = value * 3.280_84
     const wholeFeet = Math.floor(feet)
@@ -12,6 +16,7 @@ export function formatMeasurement(value: number, unit: 'metric' | 'imperial'): s
     if (inches === 12) return `${wholeFeet + 1}'0"`
     return `${wholeFeet}'${inches}"`
   }
+  if (metricNotation === 'millimeters') return `${Math.round(value * 1000)}mm`
   return `${Number.parseFloat(value.toFixed(2))}m`
 }
 
@@ -23,11 +28,64 @@ const PART_ORDER: { key: MeasurePart; prefix: string }[] = [
   { key: 'thickness', prefix: 'T' },
 ]
 
+export interface DimensionPillPart {
+  key: string
+  prefix: string
+  value: number
+  /** Render an explicit +/- sign — for deltas rather than absolute sizes. */
+  signed?: boolean
+}
+
+/**
+ * Generic floating dimension pill: a row of `prefix value` readouts with the
+ * active one emphasised. Styled to match the top-center floating info bar
+ * (rounded-full, design-token colours) so it tracks the app theme.
+ *
+ * `primaryRef` points at the primary value's `<span>` so a caller driving a
+ * per-frame drag can rewrite its text imperatively without a React re-render.
+ */
+export function DimensionPill({
+  parts,
+  unit,
+  primary,
+  primaryRef,
+}: {
+  parts: DimensionPillPart[]
+  unit: 'metric' | 'imperial'
+  primary?: string
+  primaryRef?: ForwardedRef<HTMLSpanElement>
+}) {
+  return (
+    <div className="flex items-center gap-2 whitespace-nowrap rounded-full border border-border/60 bg-background/90 px-4 py-1.5 text-xs tabular-nums shadow-sm backdrop-blur">
+      {parts.map((part, index) => {
+        const text = part.signed
+          ? `${part.value < 0 ? '-' : '+'}${formatMeasurement(Math.abs(part.value), unit)}`
+          : formatMeasurement(part.value, unit)
+        return (
+          <Fragment key={part.key}>
+            {index > 0 ? (
+              <span aria-hidden className="text-muted-foreground">
+                ·
+              </span>
+            ) : null}
+            <span
+              className={
+                part.key === primary ? 'font-medium text-foreground' : 'text-muted-foreground'
+              }
+              ref={part.key === primary ? primaryRef : undefined}
+            >
+              {`${part.prefix} ${text}`}
+            </span>
+          </Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
 /**
  * Floating dimension pill shown during wall / fence drags: `H · L · T` with
- * the actively-dragged dimension emphasised. Styled to match the top-center
- * floating info bar (rounded-full, design-token colours) so it tracks the
- * app theme.
+ * the actively-dragged dimension emphasised.
  *
  * The forwarded ref points at the `primary` value's `<span>` so a caller
  * driving a per-frame drag (the height arrow) can rewrite its text
@@ -52,24 +110,11 @@ export const MeasurementPill = forwardRef(function MeasurementPill(
 ) {
   const values: Record<MeasurePart, number> = { height, length, thickness }
   return (
-    <div className="flex items-center gap-2 whitespace-nowrap rounded-full border border-border/60 bg-background/90 px-4 py-1.5 text-xs tabular-nums shadow-sm backdrop-blur">
-      {PART_ORDER.map((part, index) => (
-        <Fragment key={part.key}>
-          {index > 0 ? (
-            <span aria-hidden className="text-muted-foreground">
-              ·
-            </span>
-          ) : null}
-          <span
-            className={
-              part.key === primary ? 'font-medium text-foreground' : 'text-muted-foreground'
-            }
-            ref={part.key === primary ? primaryRef : undefined}
-          >
-            {`${part.prefix} ${formatMeasurement(values[part.key], unit)}`}
-          </span>
-        </Fragment>
-      ))}
-    </div>
+    <DimensionPill
+      parts={PART_ORDER.map((part) => ({ ...part, value: values[part.key] }))}
+      primary={primary}
+      primaryRef={primaryRef}
+      unit={unit}
+    />
   )
 })

package/src/components/editor/node-action-menu.tsx

@@ -1,10 +1,11 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { Copy, Move, Spline, Trash2 } from 'lucide-react'
+import { Copy, Move, Search, Spline, Trash2 } from 'lucide-react'
 import type { MouseEventHandler, PointerEventHandler } from 'react'
 
 type NodeActionMenuProps = {
+  onFind?: MouseEventHandler<HTMLButtonElement>
   onAddHole?: MouseEventHandler<HTMLButtonElement>
   onDelete?: MouseEventHandler<HTMLButtonElement>
   onDuplicate?: MouseEventHandler<HTMLButtonElement>
@@ -17,6 +18,7 @@ type NodeActionMenuProps = {
 }
 
 export function NodeActionMenu({
+  onFind,
   onAddHole,
   onDelete,
   onDuplicate,
@@ -35,6 +37,17 @@ export function NodeActionMenu({
       onPointerLeave={onPointerLeave}
       onPointerUp={onPointerUp}
     >
+      {onFind && (
+        <button
+          aria-label="Find in catalog"
+          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onFind}
+          title="Find in catalog"
+          type="button"
+        >
+          <Search className="h-4 w-4" />
+        </button>
+      )}
       {onMove && (
         <button
           aria-label="Move"