@pascal-app/editor 1.0.6 → 1.0.7

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

@@ -1,16 +1,11 @@
 'use client'
 
-import { Icon } from '@iconify/react'
 import {
   type AnyNode,
   type AnyNodeId,
-  getInspectorExtensions,
-  type IconRef,
   type InspectorExtension,
-  useRegistryVersion,
-  useScene,
+  useScene, usePascalI18n,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
 import { ChevronDown, ChevronLeft, GripHorizontal, RotateCcw, X } from 'lucide-react'
 import {
   type ComponentType,
@@ -21,18 +16,12 @@ import {
   useContext,
   useEffect,
   useLayoutEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
-import { IconRefImage } from '../icon-ref'
 import { NodeIconImage } from '../node-icon-image'
-import {
-  resolveActiveExtension,
-  toggleCard,
-  toggleExtension,
-} from '../../../lib/inspector-card-mode'
+import { resolveActiveExtension, toggleCard } from '../../../lib/inspector-card-mode'
 import { cn } from '../../../lib/utils'
 import { useInspectorExpanded } from '../../../lib/inspector-expanded'
 import { ActionButton, ActionGroup } from '../controls/action-button'
@@ -40,6 +29,7 @@ import { PanelSection } from '../controls/panel-section'
 import { ErrorBoundary } from '../primitives/error-boundary'
 import { useInRightStack } from '../right-stack'
 import { CollectionsPopover } from './collections/collections-popover'
+import { renderExtensionIcon, useInspectorExtensions } from './inspector-extensions'
 
 const DRAG_MARGIN = 8
 // Pointer travel (px) below which a header press is treated as a click
@@ -119,6 +109,7 @@ export function PanelWrapper({
   className,
   width = 320, // default width
 }: PanelWrapperProps) {
+  const i18n = usePascalI18n()
   const isMobile = useIsMobile()
   const inStack = useInRightStack()
   const contextFooter = useContext(InspectorFooterContext)
@@ -131,35 +122,16 @@ export function PanelWrapper({
   // The wrapper self-resolves the selected node instead of taking a prop:
   // kind-owned `customPanel`s (wall, slab, …) render their own
   // <PanelWrapper>, so this is the one spot every inspector card flows
-  // through. Extensions only apply to a single-node selection.
-  const registryVersion = useRegistryVersion()
-  const selectedId = useViewer((s) =>
-    s.selection.selectedIds.length === 1 ? s.selection.selectedIds[0] : undefined,
-  ) as AnyNodeId | undefined
-  // Subscribe to the selected node's *type* only — a string primitive that
-  // doesn't change as fields are edited (same trick as ParametricInspector).
-  const selectedType = useScene((s) => (selectedId ? s.nodes[selectedId]?.type ?? null : null))
-  const installedPlugins = useScene((s) => s.installedPlugins)
-  const extensions = useMemo(() => {
-    // re-derive when plugin extensions register after mount (async plugin load)
-    void registryVersion
-    if (!selectedType) return []
-    return getInspectorExtensions(selectedType).filter(
-      (extension) => !extension.pluginId || installedPlugins.includes(extension.pluginId),
-    )
-  }, [selectedType, installedPlugins, registryVersion])
+  // through. Extensions only apply to a single-node selection; the action
+  // menu opens them (`InspectorExtensionActions`).
+  const { selectedId, extensions, primaryExtension } = useInspectorExtensions()
 
   // Which extension's content fills the card body (extension mode). The two
   // expanded modes are EITHER/OR: extension mode replaces the regular
   // controls; null shows the regular controls with no extension sections.
-  // See `lib/inspector-card-mode.ts` for the transition table.
-  const [activeExtensionId, setActiveExtensionId] = useState<string | null>(null)
   // Stale ids (kind changed, plugin gated off) fall back to regular mode.
-  const primaryExtensionId = useScene((state) => {
-    const node = selectedId ? state.nodes[selectedId] : undefined
-    return node ? extensions.find((extension) => extension.primaryWhen?.(node))?.id : undefined
-  })
-  const primaryExtension = extensions.find((extension) => extension.id === primaryExtensionId)
+  // See `lib/inspector-card-mode.ts` for the transition table.
+  const activeExtensionId = useInspectorExpanded((state) => state.activeExtensionId)
   const activeExtension = primaryExtension ?? resolveActiveExtension(activeExtensionId, extensions)
 
   // The panel is collapsed to just its header until the user expands it. The
@@ -174,14 +146,6 @@ export function PanelWrapper({
     if (primaryExtension) setCollapsed(false)
   }, [primaryExtension, selectedId, setCollapsed])
 
-  const applyMode = useCallback(
-    (next: { collapsed: boolean; activeExtensionId: string | null }) => {
-      setCollapsed(next.collapsed)
-      setActiveExtensionId(next.activeExtensionId)
-    },
-    [setCollapsed],
-  )
-
   // Chevron / header press — collapsed → regular, regular → collapsed,
   // extension mode → regular (exit the extension first, stay expanded).
   const handleCardToggle = useCallback(() => {
@@ -189,14 +153,12 @@ export function PanelWrapper({
       setCollapsed(!collapsed)
       return
     }
-    applyMode(toggleCard({ collapsed, activeExtensionId }))
-  }, [applyMode, collapsed, activeExtensionId, primaryExtension, setCollapsed])
+    useInspectorExpanded.getState().applyMode(toggleCard({ collapsed, activeExtensionId }))
+  }, [collapsed, activeExtensionId, primaryExtension, setCollapsed])
 
-  // Folding the card forgets the active extension — extension mode is a
-  // one-shot affordance of the header icon, not sticky panel state.
-  useEffect(() => {
-    if (collapsed) setActiveExtensionId(null)
-  }, [collapsed])
+  // Extension mode is an affordance of the card it was opened on: a card that
+  // closes (selection cleared or changed kind) leaves the next one regular.
+  useEffect(() => () => useInspectorExpanded.setState({ activeExtensionId: null }), [])
 
   // Drag-to-reposition from the header. `offset` is a translation applied on
   // top of the default `top-20 right-4` anchor; null until first dragged.
@@ -341,6 +303,7 @@ export function PanelWrapper({
           <div className={cn('flex min-w-0 items-center gap-2', titleContent && 'flex-1 pr-2')}>
             {onBack && (
               <button
+                aria-label={i18n._({ id: 'editor.panels.panelWrapper.back', message: 'Back' })}
                 className="mr-1 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onBack}
                 type="button"
@@ -388,6 +351,7 @@ export function PanelWrapper({
           <div className="flex items-center gap-1">
             {onReset && (
               <button
+                aria-label={i18n._({ id: 'editor.panels.panelWrapper.reset', message: 'Reset' })}
                 className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onReset}
                 type="button"
@@ -395,37 +359,9 @@ export function PanelWrapper({
                 <RotateCcw className="h-4 w-4" />
               </button>
             )}
-            {/* Extension mode buttons — one icon per registered inspector
-                extension, left of the chevron. Click swaps the card body to
-                ONLY that extension's content (either/or with the regular
-                controls); the active icon (highlighted) or the chevron
-                returns to the regular controls. */}
-            {extensions.filter((extension) => extension !== primaryExtension).map((extension) => {
-              const isActive = !collapsed && activeExtensionId === extension.id
-              return (
-                <button
-                  aria-label={isActive ? `Close ${extension.title}` : `Open ${extension.title}`}
-                  aria-pressed={isActive}
-                  className={cn(
-                    'flex h-7 w-7 items-center justify-center rounded-md transition-colors',
-                    isActive
-                      ? 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 hover:bg-cyan-500/30'
-                      : 'bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
-                  )}
-                  key={extension.id}
-                  onClick={() =>
-                    applyMode(toggleExtension({ collapsed, activeExtensionId }, extension.id))
-                  }
-                  title={extension.title}
-                  type="button"
-                >
-                  {renderExtensionIcon(extension.icon)}
-                </button>
-              )
-            })}
             <button
               aria-expanded={!collapsed}
-              aria-label={collapsed ? 'Expand panel' : 'Collapse panel'}
+              aria-label={collapsed ? i18n._({ id: 'editor.panels.panelWrapper.expandPanel', message: 'Expand panel' }) : i18n._({ id: 'editor.panels.panelWrapper.collapsePanel', message: 'Collapse panel' })}
               className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
               onClick={handleCardToggle}
               type="button"
@@ -436,6 +372,7 @@ export function PanelWrapper({
             </button>
             {onClose && (
               <button
+                aria-label={i18n._({ id: 'editor.panels.panelWrapper.close', message: 'Close' })}
                 className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onClose}
                 type="button"
@@ -473,10 +410,10 @@ export function PanelWrapper({
               )}
               {children}
               {inspectedIds.length > 0 && (
-                <PanelSection title="Collections">
+                <PanelSection title={i18n._({ id: 'editor.panels.panelWrapper.collections', message: 'Collections' })}>
                   <ActionGroup>
                     <CollectionsPopover nodeIds={inspectedIds}>
-                      <ActionButton label="Manage collections…" />
+                      <ActionButton label={i18n._({ id: 'editor.panels.panelWrapper.manageCollections', message: 'Manage collections…' })} />
                     </CollectionsPopover>
                   </ActionGroup>
                 </PanelSection>
@@ -507,30 +444,6 @@ export function PanelWrapper({
 
 // ─── Plugin inspector extensions ──────────────────────────────────────
 
-/** 16px icon for an extension's header button — mirrors the parametric
- *  inspector's `renderIcon` (plain <img> so no next/image server deps). */
-function renderExtensionIcon(ref: IconRef): React.ReactNode {
-  if (ref.kind === 'url') {
-    return <IconRefImage className="h-4 w-4 shrink-0" src={ref.src} />
-  }
-  if (ref.kind === 'iconify') {
-    return <Icon height={16} icon={ref.name} width={16} />
-  }
-  if (ref.kind === 'svg') {
-    return (
-      <svg height={16} viewBox={ref.viewBox} width={16}>
-        <path d={ref.path} fill="currentColor" />
-      </svg>
-    )
-  }
-  const LazyIcon = lazy(ref.module)
-  return (
-    <Suspense fallback={null}>
-      <LazyIcon />
-    </Suspense>
-  )
-}
-
 // `React.lazy` once per loader so the resolved component keeps a stable
 // identity across renders — same WeakMap pattern as `resolveCustomPanel`
 // in parametric-inspector.tsx.
@@ -582,14 +495,14 @@ function InspectorExtensionContent({
   extension: InspectorExtension
   nodeId: AnyNodeId
 }) {
+  const i18n = usePascalI18n()
   const node = useScene((s) => s.nodes[nodeId])
   if (!node) return null
   const Extension = resolveExtensionComponent(extension)
   return (
     <ErrorBoundary fallback={
       <p className="p-1 text-muted-foreground text-xs">
-        “{extension.title}” hit an error and was unloaded for this session.
-      </p>
+        {i18n._({ id: 'editor.panels.panelWrapper.titleHitAnErrorAndWas', message: '“{title}” hit an error and was unloaded for this session.', values: { title: extension.title } })}</p>
     }>
       <Suspense fallback={null}>
         <Extension node={node} />

package/src/components/ui/panels/parametric-field-control.tsx

@@ -1,10 +1,12 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import type { AnyNode, ParamField } from '@pascal-app/core'
 import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
 import { ToggleControl } from '../controls/toggle-control'
-import { precisionForStep, prettifyEnumValue, prettifyKey } from './parametric-field-utils'
+import { inspectorFieldDescriptor, inspectorOptionDescriptor } from '../../../i18n/node-messages'
+import { precisionForStep } from './parametric-field-utils'
 
 interface ParametricFieldControlProps {
   field: ParamField<AnyNode>
@@ -21,16 +23,17 @@ export function ParametricFieldControl({
   onChange,
   onCommit,
 }: ParametricFieldControlProps) {
+  const i18n = usePascalI18n()
   const key = String(field.key)
 
   switch (field.kind) {
     case 'number': {
-      const num = typeof value === 'number' ? value : 0
+      const num = typeof value === 'number' ? value : (field.default ?? 0)
       const step = field.step ?? 0.01
       const precision = precisionForStep(step)
       return (
         <SliderControl
-          label={prettifyKey(key)}
+          label={i18n._(inspectorFieldDescriptor(key))}
           max={field.max}
           min={field.min}
           mixed={mixed}
@@ -50,7 +53,7 @@ export function ParametricFieldControl({
       return (
         <ToggleControl
           checked={checked}
-          label={prettifyKey(key)}
+          label={i18n._(inspectorFieldDescriptor(key))}
           mixed={mixed}
           onChange={(next) => {
             const patch = { [key]: next } as Partial<AnyNode>
@@ -73,14 +76,14 @@ export function ParametricFieldControl({
           <SegmentedControl
             mixed={mixed}
             onChange={apply}
-            options={field.options.map((opt) => ({ label: prettifyEnumValue(opt), value: opt }))}
+            options={field.options.map((opt) => ({ label: i18n._(inspectorOptionDescriptor(opt)), value: opt }))}
             value={str}
           />
         )
       }
       return (
         <div className="flex items-center justify-between px-3 py-2">
-          <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
+          <span className="text-foreground/80 text-xs">{i18n._(inspectorFieldDescriptor(key))}</span>
           <select
             className="rounded-md border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
             onChange={(e) => apply(e.target.value)}
@@ -88,12 +91,12 @@ export function ParametricFieldControl({
           >
             {mixed && (
               <option disabled value="">
-                Mixed
+                {i18n._({ id: 'editor.panels.parametricFieldControl.mixed', message: 'Mixed' })}
               </option>
             )}
             {field.options.map((opt) => (
               <option key={opt} value={opt}>
-                {prettifyEnumValue(opt)}
+                {i18n._(inspectorOptionDescriptor(opt))}
               </option>
             ))}
           </select>
@@ -110,7 +113,7 @@ export function ParametricFieldControl({
       }
       return (
         <div className="flex items-center justify-between px-3 py-2">
-          <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
+          <span className="text-foreground/80 text-xs">{i18n._(inspectorFieldDescriptor(key))}</span>
           <div className="flex items-center gap-2">
             <input
               className="h-6 w-8 cursor-pointer rounded border border-border/50 bg-transparent"
@@ -122,7 +125,7 @@ export function ParametricFieldControl({
               className="w-20 rounded-md border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
               onChange={(e) => apply(e.target.value)}
               type="text"
-              value={mixed ? 'Mixed' : str}
+              value={mixed ? i18n._({ id: 'editor.panels.mixed', message: 'Mixed' }) : str}
             />
           </div>
         </div>

package/src/components/ui/panels/parametric-inspector.tsx

@@ -8,7 +8,7 @@ import {
   type ParamAction,
   type ParamField,
   useScene,
-  type ZoneNode,
+  type ZoneNode, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Icon } from '@iconify/react'
@@ -24,6 +24,7 @@ import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
 import { ParametricFieldControl } from './parametric-field-control'
 import { InspectorFooterContext, PanelWrapper } from './panel-wrapper'
+import { inspectorActionDescriptor, inspectorGroupDescriptor, nodeLabel } from '../../../i18n/node-messages'
 
 /**
  * Auto-derived right-panel inspector for any registry-backed node.
@@ -46,6 +47,7 @@ export function ParametricInspector({
   nodeId,
   onClose,
 }: { footer?: React.ReactNode; nodeId?: AnyNodeId; onClose?: () => void } = {}) {
+  const i18n = usePascalI18n()
   const selectedIdFromSelection = useViewer((s) => s.selection.selectedIds[0]) as
     | AnyNodeId
     | undefined
@@ -127,7 +129,7 @@ export function ParametricInspector({
   }
 
   const presentation = def.presentation
-  const title = presentation?.label ?? nodeType ?? ''
+  const title = presentation?.label && nodeType ? nodeLabel(nodeType, presentation.label, i18n) : (nodeType ?? '')
   const iconNode = renderIcon(presentation?.icon)
   const canMove = !!def.capabilities.movable
   const canDelete = def.capabilities.deletable !== false
@@ -149,7 +151,7 @@ export function ParametricInspector({
         <PanelSection
           defaultExpanded={group.defaultExpanded}
           key={`${nodeType}-${group.label}-${gi}`}
-          title={group.label}
+          title={i18n._(inspectorGroupDescriptor(group.label))}
         >
           {group.fields.map((field, fi) => (
             <FieldRenderer
@@ -167,10 +169,10 @@ export function ParametricInspector({
         </Suspense>
       )}
       {(canMove || canDelete || (parametrics.actions && parametrics.actions.length > 0)) && (
-        <PanelSection title="Actions">
+        <PanelSection title={i18n._({ id: 'editor.panels.parametricInspector.actions', message: 'Actions' })}>
           <ActionGroup className={isZone ? 'flex-col' : parametrics.actions?.length ? 'grid grid-cols-2 gap-2' : undefined}>
             {canMove && (
-              <ActionButton icon={<Move className="h-4 w-4" />} label="Move" onClick={handleMove} />
+              <ActionButton icon={<Move className="h-4 w-4" />} label={i18n._({ id: 'editor.panels.parametricInspector.move', message: 'Move' })} onClick={handleMove} />
             )}
             {parametrics.actions?.map((action, i) => (
               <ParamActionButton action={action} key={`paramaction-${i}`} nodeId={selectedId} />
@@ -181,13 +183,13 @@ export function ParametricInspector({
                   <ActionButton
                     className="w-full flex-none"
                     icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
-                    label="Delete"
+                    label={i18n._({ id: 'editor.panels.parametricInspector.delete', message: 'Delete' })}
                     onClick={() => handleDelete(false)}
                   />
                   <ActionButton
                     className="w-full flex-none"
                     icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
-                    label="Delete with contents"
+                    label={i18n._({ id: 'editor.panels.parametricInspector.deleteWithContents', message: 'Delete with contents' })}
                     onClick={() => handleDelete(true)}
                   />
                 </>
@@ -195,7 +197,7 @@ export function ParametricInspector({
                 <ActionButton
                   className="border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
                   icon={<Trash2 className="h-4 w-4" />}
-                  label="Delete"
+                  label={i18n._({ id: 'editor.panels.parametricInspector.delete', message: 'Delete' })}
                   onClick={() => handleDelete()}
                 />
               ))}
@@ -212,6 +214,7 @@ export function ParametricInspector({
 // from re-rendering it. The click handler re-reads the live node so the
 // handler always acts on current state.
 function ParamActionButton({ action, nodeId }: { action: ParamAction<AnyNode>; nodeId: AnyNodeId }) {
+  const i18n = usePascalI18n()
   const disabled = useScene((s) => {
     if (!action.enabledIf) return false
     const n = s.nodes[nodeId]
@@ -225,7 +228,7 @@ function ParamActionButton({ action, nodeId }: { action: ParamAction<AnyNode>; n
           <img alt="" className="h-4 w-4 shrink-0 object-contain" src={action.iconSrc} />
         ) : undefined
       }
-      label={action.label}
+      label={i18n._(inspectorActionDescriptor(action.label))}
       onClick={() => {
         const live = useScene.getState().nodes[nodeId]
         if (live) action.onClick(live as AnyNode)
@@ -311,10 +314,13 @@ function FieldRenderer({ field, nodeId, onUpdate }: FieldRendererProps) {
   // visibleIf may consult other fields on the node — subscribe to its boolean
   // result so we re-evaluate when relevant.
   const visible = useScene((s) => {
-    const visibleIf = (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf
-    if (!visibleIf) return true
+    const { visibleIf, appliesTo } = field as {
+      visibleIf?: (n: AnyNode) => boolean
+      appliesTo?: (n: AnyNode) => boolean
+    }
+    if (!(visibleIf || appliesTo)) return true
     const n = s.nodes[nodeId]
-    return n ? visibleIf(n as AnyNode) : false
+    return n ? (visibleIf?.(n as AnyNode) ?? true) && (appliesTo?.(n as AnyNode) ?? true) : false
   })
   if (!visible) return null