@pascal-app/editor 1.0.5 → 1.0.7

package/src/components/ui/controls/metric-control.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useScene } from '@pascal-app/core'
+import { formatNumber, parseLocalizedNumber, useLocale, useScene } from '@pascal-app/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { lingoUnitSpec, measurementHint, parseMeasurement } from '../../../lib/measurement-parser'
 import { useLinearDisplay } from '../../../lib/use-linear-display'
@@ -20,6 +20,45 @@ interface MetricControlProps {
   restoreOnCommit?: boolean
 }
 
+export function parseMetricInput(
+  text: string,
+  unit: string,
+  options: { isImperial: boolean; locale: string; parseUnit?: string },
+): number | null {
+  const spec = lingoUnitSpec(unit)
+  return spec
+    ? parseMeasurement(text, spec, {
+        bareUnit: options.parseUnit ?? spec.unitId,
+        locale: options.locale,
+        system: options.isImperial ? 'us' : 'metric',
+      })
+    : parseLocalizedNumber(text, options.locale)
+}
+
+export function formatMetricInputValue(
+  value: number,
+  precision: number,
+  locale: string,
+): string {
+  return formatNumber(roundMetricValueForDisplay(value, precision), {
+    locale,
+    min: precision,
+    max: precision,
+  })
+}
+
+export function roundMetricValueForDisplay(value: number, precision: number): number {
+  const rounded = Number(
+    formatNumber(value, {
+      locale: 'en',
+      min: precision,
+      max: precision,
+      useGrouping: false,
+    }),
+  )
+  return Number.isFinite(rounded) ? rounded : value
+}
+
 export function MetricControl({
   label,
   value,
@@ -33,6 +72,7 @@ export function MetricControl({
   unit = '',
   restoreOnCommit = true,
 }: MetricControlProps) {
+  const locale = useLocale()
   const {
     isImperial,
     displayUnit,
@@ -51,16 +91,20 @@ export function MetricControl({
   )
   const roundStoredValueForDisplayPrecision = useCallback(
     (storedValue: number) =>
-      clamp(toStoredValue(Number.parseFloat(toDisplayValue(storedValue).toFixed(precision)))),
+      clamp(toStoredValue(roundMetricValueForDisplay(toDisplayValue(storedValue), precision))),
     [clamp, precision, toDisplayValue, toStoredValue],
   )
 
   const displayValue = toDisplayValue(value)
+  const formatDisplayValue = useCallback(
+    (nextValue: number) => formatMetricInputValue(nextValue, precision, locale),
+    [locale, precision],
+  )
 
   const [isEditing, setIsEditing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
-  const [inputValue, setInputValue] = useState(displayValue.toFixed(precision))
+  const [inputValue, setInputValue] = useState(() => formatDisplayValue(displayValue))
   const startXRef = useRef(0)
   const startValueRef = useRef(0)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -81,9 +125,9 @@ export function MetricControl({
 
   useEffect(() => {
     if (!isEditing) {
-      setInputValue(displayValue.toFixed(precision))
+      setInputValue(formatDisplayValue(displayValue))
     }
-  }, [displayValue, precision, isEditing])
+  }, [displayValue, formatDisplayValue, isEditing])
 
   useEffect(() => {
     const container = containerRef.current
@@ -221,8 +265,8 @@ export function MetricControl({
 
   const handleValueClick = useCallback(() => {
     setIsEditing(true)
-    setInputValue(toDisplayValue(value).toFixed(precision))
-  }, [value, toDisplayValue, precision])
+    setInputValue(formatDisplayValue(toDisplayValue(value)))
+  }, [formatDisplayValue, value, toDisplayValue])
 
   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
@@ -230,18 +274,10 @@ export function MetricControl({
 
   const submitValue = useCallback(() => {
     const spec = lingoUnitSpec(unit)
-    let stored = spec
-      ? parseMeasurement(inputValue, spec, {
-          bareUnit: parseUnit ?? spec.unitId,
-          system: isImperial ? 'us' : 'metric',
-        })
-      : null
-    if (stored === null) {
-      const numValue = Number.parseFloat(inputValue)
-      stored = Number.isFinite(numValue) ? toStoredValue(numValue) : null
-    }
+    const parsed = parseMetricInput(inputValue, unit, { isImperial, locale, parseUnit })
+    const stored = parsed === null ? null : spec ? parsed : toStoredValue(parsed)
     if (stored === null) {
-      setInputValue(toDisplayValue(value).toFixed(precision))
+      setInputValue(formatDisplayValue(toDisplayValue(value)))
     } else {
       applyCommittedValue(clamp(stored))
     }
@@ -249,13 +285,14 @@ export function MetricControl({
   }, [
     inputValue,
     unit,
+    locale,
     isImperial,
     parseUnit,
     applyCommittedValue,
     clamp,
     toStoredValue,
     value,
-    precision,
+    formatDisplayValue,
     toDisplayValue,
   ])
 
@@ -265,6 +302,7 @@ export function MetricControl({
       ? measurementHint(inputValue, spec, {
           bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
+          locale,
           displayUnit: parseUnit ?? spec.unitId,
           precision,
           clamp,
@@ -280,25 +318,25 @@ export function MetricControl({
       if (e.key === 'Enter') {
         submitValue()
       } else if (e.key === 'Escape') {
-        setInputValue(toDisplayValue(value).toFixed(precision))
+        setInputValue(formatDisplayValue(toDisplayValue(value)))
         setIsEditing(false)
       } else if (e.key === 'ArrowUp') {
         e.preventDefault()
         const newV = clamp(value + toStoredValue(step))
         applyCommittedValue(newV)
-        setInputValue(toDisplayValue(newV).toFixed(precision))
+        setInputValue(formatDisplayValue(toDisplayValue(newV)))
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
         const newV = clamp(value - toStoredValue(step))
         applyCommittedValue(newV)
-        setInputValue(toDisplayValue(newV).toFixed(precision))
+        setInputValue(formatDisplayValue(toDisplayValue(newV)))
       }
     },
     [
       submitValue,
       value,
       toDisplayValue,
-      precision,
+      formatDisplayValue,
       step,
       clamp,
       applyCommittedValue,
@@ -363,7 +401,7 @@ export function MetricControl({
             onClick={handleValueClick}
           >
             <span className="font-mono tabular-nums tracking-tight">
-              {Number(displayValue.toFixed(precision)).toFixed(precision)}
+              {formatDisplayValue(displayValue)}
             </span>
             {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
           </div>

package/src/components/ui/controls/segmented-control.tsx

@@ -39,7 +39,10 @@ export function SegmentedControl<T extends string>({
             aria-disabled={option.disabled || undefined}
             aria-pressed={isSelected}
             className={cn(
-              'relative flex min-h-7 min-w-0 flex-1 items-center justify-center rounded-md px-1.5 py-1 font-medium text-xs leading-4 transition-colors duration-200',
+              // Every chip stretches to the row's height (the row is `items-stretch`), so a label that wraps
+              // to two lines grows the whole row evenly instead of one tall chip. The tighter line-height
+              // keeps a wrapped label reading as one unit and leaves single-line rows at min-h-7.
+              'relative flex min-h-7 min-w-0 flex-1 items-center justify-center rounded-md px-1.5 py-1 font-medium text-xs leading-3.5 transition-colors duration-200',
               isSelected
                 ? 'bg-white dark:bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
                 : 'text-muted-foreground hover:bg-black/4 dark:hover:bg-white/5 hover:text-foreground',
@@ -54,7 +57,7 @@ export function SegmentedControl<T extends string>({
             }}
             type="button"
           >
-            <span className="relative z-10 flex min-w-0 items-center justify-center gap-1.5 whitespace-normal text-center [&>svg]:shrink-0">
+            <span className="relative z-10 flex min-w-0 items-center justify-center gap-1.5 whitespace-normal text-balance text-center [overflow-wrap:anywhere] [&>svg]:shrink-0">
               {option.label}
             </span>
           </button>

package/src/components/ui/controls/slider-control.test.tsx

@@ -0,0 +1,23 @@
+import { expect, test } from 'bun:test'
+import { createI18n, getLocale, PascalI18nProvider, setLocale } from '@pascal-app/core'
+import { renderToString } from 'react-dom/server'
+import { parseSliderBareValue, SliderControl } from './slider-control'
+
+test('slider numbers use the scoped locale for display and parsing while the global locale is English', () => {
+  setLocale('en')
+  const i18n = createI18n({ locale: 'fr' })
+  try {
+    const html = renderToString(
+      <PascalI18nProvider i18n={i18n}>
+        <SliderControl label="Length" onChange={() => {}} precision={2} value={2.75} />
+      </PascalI18nProvider>,
+    )
+
+    expect(getLocale()).toBe('en')
+    expect(html).toContain('2,75')
+    expect(parseSliderBareValue('2,75', i18n.getLocale())).toBe(2.75)
+    expect(parseSliderBareValue('1e2', i18n.getLocale())).toBe(100)
+  } finally {
+    i18n.destroy()
+  }
+})

package/src/components/ui/controls/slider-control.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useScene } from '@pascal-app/core'
+import { formatNumber, parseLocalizedNumber, useLocale, useScene } from '@pascal-app/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { lingoUnitSpec, measurementHint, parseMeasurement } from '../../../lib/measurement-parser'
 import { useLinearDisplay } from '../../../lib/use-linear-display'
@@ -23,6 +23,10 @@ interface SliderControlProps {
   mixed?: boolean
 }
 
+export function parseSliderBareValue(text: string, locale: string): number | null {
+  return parseLocalizedNumber(text, locale)
+}
+
 function stepPrecision(s: number): number {
   if (s <= 0) return 0
   return Math.max(0, Math.ceil(-Math.log10(s)))
@@ -67,14 +71,24 @@ export function SliderControl({
   restoreOnCommit = true,
   mixed = false,
 }: SliderControlProps) {
+  const locale = useLocale()
   // Values and bounds stay in meters; gestures and input use the displayed unit.
   const { isImperial, displayUnit, parseUnit, precision, step, toDisplay, toStored } =
     useLinearDisplay(unit, storedPrecision, storedStep)
+  const formatDisplay = useCallback(
+    (displayValue: number) =>
+      formatNumber(displayValue, {
+        locale,
+        min: precision,
+        max: precision,
+      }),
+    [locale, precision],
+  )
 
   const [isEditing, setIsEditing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
-  const [inputValue, setInputValue] = useState(toDisplay(value).toFixed(precision))
+  const [inputValue, setInputValue] = useState(() => formatDisplay(toDisplay(value)))
   // Live readout while dragging. Multi-edit previews write live overrides
   // instead of the scene, so `value` would otherwise stay frozen even though
   // the meshes are moving.
@@ -116,9 +130,9 @@ export function SliderControl({
 
   useEffect(() => {
     if (!isEditing) {
-      setInputValue(toDisplay(value).toFixed(precision))
+      setInputValue(formatDisplay(toDisplay(value)))
     }
-  }, [value, precision, isEditing, toDisplay])
+  }, [value, isEditing, toDisplay, formatDisplay])
 
   // Wheel support on the label
   useEffect(() => {
@@ -258,8 +272,8 @@ export function SliderControl({
   const handleValueClick = useCallback(() => {
     editingRef.current = true
     setIsEditing(true)
-    setInputValue(toDisplay(value).toFixed(precision))
-  }, [value, precision, toDisplay])
+    setInputValue(formatDisplay(toDisplay(value)))
+  }, [value, toDisplay, formatDisplay])
 
   const parseInputValue = useCallback(
     (text: string) => {
@@ -267,16 +281,17 @@ export function SliderControl({
       const parsed = spec
         ? parseMeasurement(text, spec, {
             bareUnit: parseUnit ?? spec.unitId,
+            locale,
             system: isImperial ? 'us' : 'metric',
           })
         : null
-      const bare = Number(text)
-      const stored = parsed ?? (text.trim() && Number.isFinite(bare) ? toStored(bare) : null)
+      const bare = parseSliderBareValue(text, locale)
+      const stored = parsed ?? (bare === null ? null : toStored(bare))
       return stored === null
         ? null
         : clamp(toStored(Number.parseFloat(toDisplay(stored).toFixed(precision))))
     },
-    [unit, parseUnit, isImperial, toStored, clamp, toDisplay, precision],
+    [unit, parseUnit, locale, isImperial, toStored, clamp, toDisplay, precision],
   )
 
   const submitValue = useCallback(() => {
@@ -285,13 +300,13 @@ export function SliderControl({
     const nextValue = parseInputValue(inputValue)
     if (nextValue === null) {
       onCancel?.()
-      setInputValue(toDisplay(value).toFixed(precision))
+      setInputValue(formatDisplay(toDisplay(value)))
     } else {
       onChange(nextValue)
       onCommit?.(nextValue)
     }
     setIsEditing(false)
-  }, [inputValue, parseInputValue, onCancel, onChange, onCommit, toDisplay, value, precision])
+  }, [inputValue, parseInputValue, onCancel, onChange, onCommit, toDisplay, value, formatDisplay])
 
   const spec = lingoUnitSpec(unit)
   const hint =
@@ -299,6 +314,7 @@ export function SliderControl({
       ? measurementHint(inputValue, spec, {
           bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
+          locale,
           displayUnit: parseUnit ?? spec.unitId,
           precision,
           clamp,
@@ -317,10 +333,10 @@ export function SliderControl({
         const adjustedStep = getAdjustedStep(step, e)
         const newV = applyDisplayDelta(value, direction * adjustedStep, adjustedStep)
         onChange(newV)
-        setInputValue(toDisplay(newV).toFixed(precision))
+        setInputValue(formatDisplay(toDisplay(newV)))
       }
     },
-    [submitValue, cancelEdit, value, precision, step, applyDisplayDelta, onChange, toDisplay],
+    [submitValue, cancelEdit, value, step, applyDisplayDelta, onChange, toDisplay, formatDisplay],
   )
 
   const displayValue = toDisplay(shown)
@@ -414,7 +430,7 @@ export function SliderControl({
             onClick={handleValueClick}
           >
             <span className="font-mono tabular-nums tracking-tight" suppressHydrationWarning>
-              {Number(displayValue.toFixed(precision)).toFixed(precision)}
+              {formatDisplay(displayValue)}
             </span>
             {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
           </div>