@pascal-app/editor 1.0.5 → 1.0.7

package/src/components/ui/panels/reference-panel.tsx

@@ -6,7 +6,9 @@ import {
   loadAssetUrl,
   type ScanNode,
   saveAsset,
-  useScene,
+  useLocale,
+  useScene, usePascalI18n,
+  type PascalI18n,
 } from '@pascal-app/core'
 import {
   Eye,
@@ -23,6 +25,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { guideEmitter } from '../../../lib/guide-events'
 import { getGuideImageName } from '../../../lib/local-guide-image'
+import { formatReferenceScaleLabel } from '../../../lib/reference-scale'
 import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { isViewVisible, VIEW_2D } from '../../../store/view-layout'
@@ -33,16 +36,29 @@ import { PanelWrapper } from './panel-wrapper'
 
 type ReferenceNode = ScanNode | GuideNode
 
-function getScaleStatus(guide: GuideNode, scaleReferenceVisible: boolean) {
+function getScaleStatus(
+  guide: GuideNode,
+  scaleReferenceVisible: boolean,
+  locale: string,
+  i18n: PascalI18n,
+) {
   const reference = guide.scaleReference
   if (!reference) {
-    return 'Uncalibrated'
+    return i18n._({ id: 'editor.panels.referencePanel.uncalibrated', message: 'Uncalibrated' })
   }
-
-  return `${scaleReferenceVisible ? 'Scaled' : 'Scaled (hidden)'} · ${reference.label}`
+  const scale = formatReferenceScaleLabel(reference, locale)
+  return scaleReferenceVisible
+    ? i18n._({ id: 'editor.panels.referencePanel.scaled', message: 'Scaled · {scale}', values: { scale } })
+    : i18n._({
+        id: 'editor.panels.referencePanel.scaledHidden',
+        message: 'Scaled (hidden) · {scale}',
+        values: { scale },
+      })
 }
 
 export function ReferencePanel() {
+  const i18n = usePascalI18n()
+  const locale = useLocale()
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
   const guideUi = useEditor((s) =>
@@ -173,17 +189,17 @@ export function ReferencePanel() {
   const isScan = node.type === 'scan'
   const guideLocked = !isScan && guideUi?.locked === true
   const scaleReferenceVisible = !isScan && guideUi?.scaleReferenceVisible !== false
-  const scaleStatus = isScan ? null : getScaleStatus(node, scaleReferenceVisible)
+  const scaleStatus = isScan ? null : getScaleStatus(node, scaleReferenceVisible, locale, i18n)
 
   return (
     <PanelWrapper
       onClose={handleClose}
-      title={node.name || (isScan ? 'Capture' : 'Guide Image')}
+      title={node.name || (isScan ? i18n._({ id: 'editor.panels.referencePanel.capture', message: 'Capture' }) : i18n._({ id: 'editor.panels.referencePanel.guideImage', message: 'Guide Image' }))}
       width={300}
     >
       {!isScan && (
         <>
-          <PanelSection title="Image">
+          <PanelSection title={i18n._({ id: 'editor.panels.referencePanel.image', message: 'Image' })}>
             <input
               accept="image/*"
               className="hidden"
@@ -202,13 +218,13 @@ export function ReferencePanel() {
               <ActionButton
                 disabled={isReplacing}
                 icon={<Upload className="h-3.5 w-3.5" />}
-                label={isReplacing ? 'Replacing...' : 'Replace'}
+                label={isReplacing ? i18n._({ id: 'editor.panels.referencePanel.replacing', message: 'Replacing...' }) : i18n._({ id: 'editor.panels.referencePanel.replace', message: 'Replace' })}
                 onClick={() => replaceInputRef.current?.click()}
               />
               <ActionButton
                 className="text-destructive hover:bg-destructive/10"
                 icon={<Trash2 className="h-3.5 w-3.5" />}
-                label="Delete"
+                label={i18n._({ id: 'editor.panels.referencePanel.delete', message: 'Delete' })}
                 onClick={handleDeleteGuide}
               />
             </ActionGroup>
@@ -222,7 +238,7 @@ export function ReferencePanel() {
                     <Eye className="h-3.5 w-3.5" />
                   )
                 }
-                label={node.visible === false ? 'Show' : 'Hide'}
+                label={node.visible === false ? i18n._({ id: 'editor.panels.referencePanel.show', message: 'Show' }) : i18n._({ id: 'editor.panels.referencePanel.hide', message: 'Hide' })}
                 onClick={() => handleUpdate({ visible: node.visible === false })}
               />
               <ActionButton
@@ -233,7 +249,7 @@ export function ReferencePanel() {
                     <Unlock className="h-3.5 w-3.5" />
                   )
                 }
-                label={guideLocked ? 'Unlock' : 'Lock'}
+                label={guideLocked ? i18n._({ id: 'editor.panels.referencePanel.unlock', message: 'Unlock' }) : i18n._({ id: 'editor.panels.referencePanel.lock', message: 'Lock' })}
                 onClick={() => setGuideLocked(node.id, !guideLocked)}
               />
             </ActionGroup>
@@ -246,12 +262,12 @@ export function ReferencePanel() {
 
             {isAssetMissing && (
               <div className="rounded-md border border-amber-500/35 bg-amber-500/10 px-2 py-1.5 text-amber-700 text-xs dark:text-amber-300">
-                Overlay image unavailable. Replace the image to restore it.
+                {i18n._({ id: 'editor.panels.referencePanel.overlayImageUnavailableReplaceTheImage', message: 'Overlay image unavailable. Replace the image to restore it.' })}
               </div>
             )}
           </PanelSection>
 
-          <PanelSection title="Reference Scale">
+          <PanelSection title={i18n._({ id: 'editor.panels.referencePanel.referenceScale', message: 'Reference Scale' })}>
             <div className="flex items-center gap-2 rounded-md border border-border/50 bg-background/40 px-2.5 py-2 text-sm">
               <Ruler
                 className={cn(
@@ -265,8 +281,8 @@ export function ReferencePanel() {
             {!node.scaleReference && (
               <p className="px-0.5 text-muted-foreground text-xs leading-snug">
                 {isScaleFlowActive
-                  ? 'Click both ends of a known distance on the plan, then type its real length.'
-                  : 'Draw a line over a known dimension on the plan, then type its real length to scale the image exactly.'}
+                  ? i18n._({ id: 'editor.panels.referencePanel.clickBothEndsOfAKnown', message: 'Click both ends of a known distance on the plan, then type its real length.' })
+                  : i18n._({ id: 'editor.panels.referencePanel.drawALineOverAKnown', message: 'Draw a line over a known dimension on the plan, then type its real length to scale the image exactly.' })}
               </p>
             )}
 
@@ -278,7 +294,7 @@ export function ReferencePanel() {
                     'border-primary/50 bg-primary/15 text-primary hover:bg-primary/25 active:bg-primary/25',
                 )}
                 label={
-                  isScaleFlowActive ? 'Cancel' : node.scaleReference ? 'Edit Scale' : 'Set Scale'
+                  isScaleFlowActive ? i18n._({ id: 'editor.panels.referencePanel.cancel', message: 'Cancel' }) : node.scaleReference ? i18n._({ id: 'editor.panels.referencePanel.editScale', message: 'Edit Scale' }) : i18n._({ id: 'editor.panels.referencePanel.setScale', message: 'Set Scale' })
                 }
                 onClick={isScaleFlowActive ? handleCancelScale : handleStartScale}
               />
@@ -287,11 +303,11 @@ export function ReferencePanel() {
             {node.scaleReference && (
               <ActionGroup>
                 <ActionButton
-                  label={scaleReferenceVisible ? 'Hide Scale' : 'Show Scale'}
+                  label={scaleReferenceVisible ? i18n._({ id: 'editor.panels.referencePanel.hideScale', message: 'Hide Scale' }) : i18n._({ id: 'editor.panels.referencePanel.showScale', message: 'Show Scale' })}
                   onClick={() => setGuideScaleReferenceVisible(node.id, !scaleReferenceVisible)}
                 />
                 <ActionButton
-                  label="Clear Scale"
+                  label={i18n._({ id: 'editor.panels.referencePanel.clearScale', message: 'Clear Scale' })}
                   onClick={() => {
                     handleUpdate({ scaleReference: null } as Partial<GuideNode>)
                     // Calibrating auto-locked the guide; clearing the scale
@@ -303,11 +319,11 @@ export function ReferencePanel() {
             )}
           </PanelSection>
 
-          <PanelSection title="Quick Actions">
+          <PanelSection title={i18n._({ id: 'editor.panels.referencePanel.quickActions', message: 'Quick Actions' })}>
             <ActionGroup>
               <ActionButton
                 icon={<LocateFixed className="h-3.5 w-3.5" />}
-                label="Center"
+                label={i18n._({ id: 'editor.panels.referencePanel.center', message: 'Center' })}
                 onClick={() =>
                   handleUpdate({
                     position: [0, node.position[1], 0],
@@ -316,7 +332,7 @@ export function ReferencePanel() {
               />
               <ActionButton
                 icon={<RotateCcw className="h-3.5 w-3.5" />}
-                label="Reset Rotation"
+                label={i18n._({ id: 'editor.panels.referencePanel.resetRotation', message: 'Reset Rotation' })}
                 onClick={() =>
                   handleUpdate({
                     rotation: [node.rotation[0], 0, node.rotation[2]],
@@ -327,7 +343,7 @@ export function ReferencePanel() {
             <ActionGroup>
               <ActionButton
                 icon={<Ruler className="h-3.5 w-3.5" />}
-                label="Reset Image Scale"
+                label={i18n._({ id: 'editor.panels.referencePanel.resetImageScale', message: 'Reset Image Scale' })}
                 onClick={() => handleUpdate({ scale: 1 } as Partial<GuideNode>)}
               />
             </ActionGroup>
@@ -336,11 +352,11 @@ export function ReferencePanel() {
       )}
 
       {isScan && (
-        <PanelSection title="Capture">
+        <PanelSection title={i18n._({ id: 'editor.panels.referencePanel.capture', message: 'Capture' })}>
           <ActionGroup>
             <ActionButton
               icon={<Move className="h-3.5 w-3.5" />}
-              label="Move"
+              label={i18n._({ id: 'editor.panels.referencePanel.move', message: 'Move' })}
               onClick={handleMoveScan}
             />
             <ActionButton
@@ -351,18 +367,18 @@ export function ReferencePanel() {
                   <Eye className="h-3.5 w-3.5" />
                 )
               }
-              label={node.visible === false ? 'Show' : 'Hide'}
+              label={node.visible === false ? i18n._({ id: 'editor.panels.referencePanel.show', message: 'Show' }) : i18n._({ id: 'editor.panels.referencePanel.hide', message: 'Hide' })}
               onClick={() => handleUpdate({ visible: node.visible === false })}
             />
           </ActionGroup>
         </PanelSection>
       )}
 
-      <PanelSection title="Position">
+      <PanelSection title={i18n._({ id: 'editor.panels.referencePanel.position', message: 'Position' })}>
         <SliderControl
           label={
             <>
-              X<sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
+              X<sub className="ml-[1px] text-[11px] opacity-70">{i18n._({ id: 'editor.panels.referencePanel.pos', message: 'pos' })}</sub>
             </>
           }
           max={50}
@@ -380,7 +396,7 @@ export function ReferencePanel() {
         <SliderControl
           label={
             <>
-              Y<sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
+              Y<sub className="ml-[1px] text-[11px] opacity-70">{i18n._({ id: 'editor.panels.referencePanel.pos', message: 'pos' })}</sub>
             </>
           }
           max={50}
@@ -398,7 +414,7 @@ export function ReferencePanel() {
         <SliderControl
           label={
             <>
-              Z<sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
+              Z<sub className="ml-[1px] text-[11px] opacity-70">{i18n._({ id: 'editor.panels.referencePanel.pos', message: 'pos' })}</sub>
             </>
           }
           max={50}
@@ -415,11 +431,11 @@ export function ReferencePanel() {
         />
       </PanelSection>
 
-      <PanelSection title="Rotation">
+      <PanelSection title={i18n._({ id: 'editor.panels.referencePanel.rotation', message: 'Rotation' })}>
         <SliderControl
           label={
             <>
-              Y<sub className="ml-[1px] text-[11px] opacity-70">rot</sub>
+              Y<sub className="ml-[1px] text-[11px] opacity-70">{i18n._({ id: 'editor.panels.referencePanel.rot', message: 'rot' })}</sub>
             </>
           }
           max={180}
@@ -455,11 +471,11 @@ export function ReferencePanel() {
         </div>
       </PanelSection>
 
-      <PanelSection title="Scale & Opacity">
+      <PanelSection title={i18n._({ id: 'editor.panels.referencePanel.scaleOpacity', message: 'Scale & Opacity' })}>
         <SliderControl
           label={
             <>
-              XYZ<sub className="ml-[1px] text-[11px] opacity-70">scale</sub>
+              {i18n._({ id: 'editor.panels.referencePanel.xyz', message: 'XYZ' })}<sub className="ml-[1px] text-[11px] opacity-70">{i18n._({ id: 'editor.panels.referencePanel.scale', message: 'scale' })}</sub>
             </>
           }
           max={10}
@@ -475,7 +491,7 @@ export function ReferencePanel() {
         />
 
         <SliderControl
-          label="Opacity"
+          label={i18n._({ id: 'editor.panels.referencePanel.opacity', message: 'Opacity' })}
           max={100}
           min={0}
           onChange={(v) => handleUpdate({ opacity: v })}