@pascal-app/editor 1.0.6 → 1.1.0

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, usePascalI18n } 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,25 @@ export function SliderControl({
   restoreOnCommit = true,
   mixed = false,
 }: SliderControlProps) {
+  const i18n = usePascalI18n()
+  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 +131,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(() => {
@@ -246,6 +261,12 @@ export function SliderControl({
     [],
   )
 
+  useEffect(() => {
+    const cancelOnBlur = () => { if (dragRef.current || editingRef.current) cancelEdit() }
+    window.addEventListener('blur', cancelOnBlur)
+    return () => window.removeEventListener('blur', cancelOnBlur)
+  }, [cancelEdit])
+
   useEffect(() => {
     if (!isDragging) return
     const escape = (event: KeyboardEvent) => {
@@ -258,8 +279,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 +288,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 +307,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 +321,7 @@ export function SliderControl({
       ? measurementHint(inputValue, spec, {
           bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
+          locale,
           displayUnit: parseUnit ?? spec.unitId,
           precision,
           clamp,
@@ -317,10 +340,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)
@@ -376,6 +399,7 @@ export function SliderControl({
               </span>
             )}
             <input
+              aria-label={typeof label === 'string' ? label : undefined}
               autoFocus
               className="w-14 bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
               onBlur={submitValue}
@@ -402,22 +426,26 @@ export function SliderControl({
             )}
           </>
         ) : mixed && !isDragging ? (
-          <div
+          <button
+            type="button"
+            aria-label={typeof label === 'string' ? i18n._({ id: 'editor.controls.sliderControl.editLabel', message: 'Edit {label}', values: { label } }) : undefined}
             className="flex cursor-text items-center text-muted-foreground transition-colors hover:text-foreground"
             onClick={handleValueClick}
           >
-            <span className="font-mono tracking-tight">Mixed</span>
-          </div>
+            <span className="font-mono tracking-tight">{i18n._({ id: 'editor.controls.sliderControl.mixed', message: 'Mixed' })}</span>
+          </button>
         ) : (
-          <div
+          <button
+            type="button"
+            aria-label={typeof label === 'string' ? i18n._({ id: 'editor.controls.sliderControl.editLabel', message: 'Edit {label}', values: { label } }) : undefined}
             className="flex cursor-text items-center text-foreground/60 transition-colors hover:text-foreground"
             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>
+          </button>
         )}
       </div>
     </div>

package/src/components/ui/controls/tool-options-panel.tsx

@@ -34,50 +34,80 @@ function ToolOptionRow({
   return (
     <div className="flex flex-col gap-2">
       <div className="px-0.5 font-medium text-muted-foreground text-xs">{option.label}</div>
-      <div
-        className="grid gap-1.5"
-        style={{
-          gridTemplateColumns: `repeat(${Math.min(option.choices.length, 3)}, minmax(0, 1fr))`,
-        }}
-      >
-        {option.choices.map((choice) => {
-          const selected = active && choice.value === value
-          const thumbnail = getChoiceThumbnail?.(option, choice.value)
-          return (
-            <button
-              aria-pressed={selected}
-              className={cn(
-                'rounded-lg px-2 py-2 text-center font-medium text-xs transition-colors',
-                selected
-                  ? 'bg-primary/10 text-primary ring-1 ring-primary/50'
-                  : 'bg-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
-              )}
-              key={choice.value}
-              onClick={() => {
-                triggerSFX('sfx:menu-click')
-                option.set(choice.value)
-                onSelect?.(option, choice.value)
-              }}
-              onMouseEnter={() => triggerSFX('sfx:menu-hover')}
-              type="button"
-            >
-              {thumbnail && (
-                <Image
-                  alt=""
-                  className={cn(
-                    'mx-auto mb-1 size-14 object-contain',
-                    !selected && 'opacity-70 grayscale',
-                  )}
-                  height={56}
-                  src={thumbnail}
-                  width={56}
-                />
-              )}
-              {choice.label}
-            </button>
-          )
-        })}
-      </div>
+      {option.input ? (
+        <label className="flex items-center gap-2 rounded-lg border border-border px-2 py-1.5">
+          <input
+            key={value}
+            aria-label={option.label}
+            className="min-w-0 flex-1 bg-transparent text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            type="number"
+            defaultValue={value}
+            min={option.input.min}
+            max={option.input.max}
+            step={option.input.step ?? 'any'}
+            onBlur={(event) => {
+              const next = event.target.valueAsNumber
+              if (
+                Number.isFinite(next) &&
+                !event.target.validity.rangeUnderflow &&
+                !event.target.validity.rangeOverflow
+              ) {
+                option.set(String(next))
+                onSelect?.(option, String(next))
+              } else event.target.value = value
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') event.currentTarget.blur()
+            }}
+          />
+          <span className="text-xs text-muted-foreground">{option.input.unit}</span>
+        </label>
+      ) : (
+        <div
+          className="grid gap-1.5"
+          style={{
+            gridTemplateColumns: `repeat(${Math.min(option.choices.length, 3)}, minmax(0, 1fr))`,
+          }}
+        >
+          {option.choices.map((choice) => {
+            const selected = active && choice.value === value
+            const thumbnail = getChoiceThumbnail?.(option, choice.value)
+            return (
+              <button
+                aria-pressed={selected}
+                className={cn(
+                  'rounded-lg px-2 py-2 text-center font-medium text-xs transition-colors',
+                  selected
+                    ? 'bg-primary/10 text-primary ring-1 ring-primary/50'
+                    : 'bg-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
+                )}
+                key={choice.value}
+                onClick={() => {
+                  triggerSFX('sfx:menu-click')
+                  option.set(choice.value)
+                  onSelect?.(option, choice.value)
+                }}
+                onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+                type="button"
+              >
+                {thumbnail && (
+                  <Image
+                    alt=""
+                    className={cn(
+                      'mx-auto mb-1 size-14 object-contain',
+                      !selected && 'opacity-70 grayscale',
+                    )}
+                    height={56}
+                    src={thumbnail}
+                    width={56}
+                  />
+                )}
+                {choice.label}
+              </button>
+            )
+          })}
+        </div>
+      )}
       {activeChoice && activeChoice.description ? (
         <p className="px-0.5 text-[11px] text-muted-foreground leading-relaxed">
           {activeChoice.description}