@pascal-app/editor 0.8.0 → 0.9.1

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

@@ -0,0 +1,75 @@
+'use client'
+
+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 {
+  if (unit === 'imperial') {
+    const feet = value * 3.280_84
+    const wholeFeet = Math.floor(feet)
+    const inches = Math.round((feet - wholeFeet) * 12)
+    if (inches === 12) return `${wholeFeet + 1}'0"`
+    return `${wholeFeet}'${inches}"`
+  }
+  return `${Number.parseFloat(value.toFixed(2))}m`
+}
+
+type MeasurePart = 'height' | 'length' | 'thickness'
+
+const PART_ORDER: { key: MeasurePart; prefix: string }[] = [
+  { key: 'height', prefix: 'H' },
+  { key: 'length', prefix: 'L' },
+  { key: 'thickness', prefix: 'T' },
+]
+
+/**
+ * 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 forwarded ref points at the `primary` value's `<span>` so a caller
+ * driving a per-frame drag (the height arrow) can rewrite its text
+ * imperatively without a React re-render. Callers that re-render naturally
+ * (the endpoint tools) ignore the ref and just pass live values as props.
+ */
+export const MeasurementPill = forwardRef(function MeasurementPill(
+  {
+    height,
+    length,
+    thickness,
+    unit,
+    primary,
+  }: {
+    height: number
+    length: number
+    thickness: number
+    unit: 'metric' | 'imperial'
+    primary: MeasurePart
+  },
+  primaryRef: ForwardedRef<HTMLSpanElement>,
+) {
+  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>
+  )
+})