@pascal-app/editor 1.0.6 → 1.1.0

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
@@ -55,7 +45,7 @@ function clamp(value: number, min: number, max: number): number {
  * `data-viewer-bounds`) so it can't slide under the sidebar or top bar.
  * Falls back to the viewport when the marker isn't found.
  */
-function getDragBounds(el: HTMLElement | null): {
+function getDragBounds(el: HTMLElement | null, inStack = false): {
   left: number
   top: number
   right: number
@@ -66,7 +56,15 @@ function getDragBounds(el: HTMLElement | null): {
   if (!rect) {
     return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight }
   }
-  return { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom }
+  const stack = inStack ? el?.closest('[data-right-stack]') : null
+  const stackRect = stack?.getBoundingClientRect()
+  const cardRect = stack?.querySelector('[data-right-stack-card]')?.getBoundingClientRect()
+  return {
+    left: rect.left,
+    top: stackRect ? stackRect.top - DRAG_MARGIN : rect.top,
+    right: rect.right,
+    bottom: cardRect && cardRect.height > 0 ? cardRect.top : rect.bottom,
+  }
 }
 
 /**
@@ -119,6 +117,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 +130,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 +154,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 +161,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.
@@ -225,7 +195,7 @@ export function PanelWrapper({
       if ((e.target as HTMLElement).closest('button, input, label')) return
       const rect = panelRef.current?.getBoundingClientRect()
       if (!rect) return
-      const bounds = getDragBounds(panelRef.current)
+      const bounds = getDragBounds(panelRef.current, inStack)
       const base = offset ?? { x: 0, y: 0 }
       dragRef.current = {
         startX: e.clientX,
@@ -245,7 +215,7 @@ export function PanelWrapper({
       setIsDragging(true)
       e.currentTarget.setPointerCapture(e.pointerId)
     },
-    [offset],
+    [offset, inStack],
   )
 
   const handleHeaderPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
@@ -276,22 +246,37 @@ export function PanelWrapper({
     [handleCardToggle],
   )
 
-  // Expanding can grow the panel past an edge if it was dragged there while
-  // collapsed — nudge it back inside the viewer bounds.
+  // Keep repositioned panels inside the available space as the card or viewer resizes.
   useLayoutEffect(() => {
-    if (isMobile || collapsed) return
+    if (isMobile) return
     const el = panelRef.current
     if (!el) return
-    const rect = el.getBoundingClientRect()
-    const bounds = getDragBounds(el)
-    const left = clamp(rect.left, bounds.left + DRAG_MARGIN, bounds.right - rect.width - DRAG_MARGIN)
-    const top = clamp(rect.top, bounds.top + DRAG_MARGIN, bounds.bottom - rect.height - DRAG_MARGIN)
-    const dx = left - rect.left
-    const dy = top - rect.top
-    if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
-      setOffset((prev) => ({ x: (prev?.x ?? 0) + dx, y: (prev?.y ?? 0) + dy }))
+    const fit = () => {
+      const rect = el.getBoundingClientRect()
+      const bounds = getDragBounds(el, inStack)
+      const left = clamp(rect.left, bounds.left + DRAG_MARGIN, bounds.right - rect.width - DRAG_MARGIN)
+      const top = clamp(rect.top, bounds.top + DRAG_MARGIN, bounds.bottom - rect.height - DRAG_MARGIN)
+      const dx = left - rect.left
+      const dy = top - rect.top
+      if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+        setOffset((prev) => ({ x: (prev?.x ?? 0) + dx, y: (prev?.y ?? 0) + dy }))
+      }
     }
-  }, [collapsed, isMobile])
+    fit()
+    const resize = new ResizeObserver(fit)
+    resize.observe(el)
+    const stack = el.closest('[data-right-stack]')
+    if (stack) {
+      resize.observe(stack)
+      const card = stack.querySelector('[data-right-stack-card]')
+      if (card) resize.observe(card)
+    }
+    window.addEventListener('resize', fit)
+    return () => {
+      resize.disconnect()
+      window.removeEventListener('resize', fit)
+    }
+  }, [collapsed, isMobile, inStack])
 
   return (
     <div
@@ -302,7 +287,7 @@ export function PanelWrapper({
           : inStack
             ? // In the shared right column: it grows down and scrolls on itself,
               // leaving the shortcuts card below it its room (`right-stack.tsx`).
-              'pointer-events-auto flex max-h-full min-h-0 flex-[0_1_auto] flex-col overflow-hidden rounded-xl border border-border/50 bg-sidebar/95 shadow-2xl backdrop-blur-xl dark:text-foreground'
+              'pointer-events-auto flex max-h-[var(--inspector-available-height)] min-h-0 flex-[0_1_auto] flex-col overflow-hidden rounded-xl border border-border/50 bg-sidebar/95 shadow-2xl backdrop-blur-xl dark:text-foreground'
           // Cap height at `100dvh - 154px` so a tall panel's bottom edge
           // aligns flush with the top of the floating bottom action bar.
           // Combined with `top-20` (80px), the panel's bottom sits at
@@ -329,7 +314,7 @@ export function PanelWrapper({
       {!isMobile && (
         <div
           className={cn(
-            'relative flex select-none items-center justify-between px-3 py-3',
+            'relative flex shrink-0 select-none items-center justify-between px-3 py-3',
             !collapsed && 'border-border/50 border-b',
             isDragging ? 'cursor-grabbing' : 'cursor-grab',
           )}
@@ -341,6 +326,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 +374,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 +382,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 +395,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 +433,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 +467,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 +518,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