@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/panels/shape-choice.tsx

@@ -1,13 +1,14 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { Pentagon, Square } from 'lucide-react'
 import { cn } from '../../../lib/utils'
 
 export type OutlineShape = 'rectangle' | 'polygon'
 
 const SHAPES = [
-  { id: 'rectangle', label: 'Rectangle', Icon: Square },
-  { id: 'polygon', label: 'Polygon', Icon: Pentagon },
+  { id: 'rectangle', label: /* i18n */ { id: 'editor.panels.shapeChoice.rectangle', message: 'Rectangle' }, Icon: Square },
+  { id: 'polygon', label: /* i18n */ { id: 'editor.panels.shapeChoice.polygon', message: 'Polygon' }, Icon: Pentagon },
 ] as const
 
 const pill =
@@ -32,13 +33,14 @@ export function ShapeChoice({
   /** `data-shape-choice` hook for tests and proofs. */
   data?: string
 }) {
+  const i18n = usePascalI18n()
   return (
     <div
-      className={cn('flex min-h-7 items-center justify-between gap-2', className)}
+      className={cn('flex min-h-7 flex-wrap items-center justify-between gap-2', className)}
       data-shape-choice={data}
     >
       <span className="whitespace-nowrap">{label}</span>
-      <div className="flex items-center gap-1.5">
+      <div className="flex flex-wrap items-center gap-1.5">
         {SHAPES.map(({ id, label: shapeLabel, Icon }) => (
           <button
             className={pill}
@@ -49,7 +51,7 @@ export function ShapeChoice({
             type="button"
           >
             <Icon aria-hidden className="h-3 w-3" />
-            {shapeLabel}
+            {i18n._(shapeLabel)}
           </button>
         ))}
       </div>

package/src/components/ui/panels/wall-region-list.tsx

@@ -4,7 +4,7 @@ import {
   type AnyNodeId,
   useLiveNodeOverrides,
   useScene,
-  type WallFaceRegion,
+  type WallFaceRegion, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Trash2 } from 'lucide-react'
@@ -25,6 +25,7 @@ const ROW_ACTION_CLASS =
 
 /** The wall panel's "Paint regions" section: one row per region, select or delete. */
 export function WallPaintRegionList({ wallId }: { wallId: string }) {
+  const i18n = usePascalI18n()
   const nodes = useScene((state) => state.nodes)
   const materials = useScene((state) => state.materials)
   const unit = useViewer((state) => state.unit)
@@ -48,7 +49,7 @@ export function WallPaintRegionList({ wallId }: { wallId: string }) {
   return (
     // Focus inside this list still lets Delete target the active region.
     <div className="contents" data-wall-region-list={wallId}>
-      <PanelSection title="Paint regions">
+      <PanelSection title={i18n._({ id: 'editor.panels.wallRegionList.paintRegions', message: 'Paint regions' })}>
         <div className="flex flex-col gap-1">
           {rows.map((row) => {
             const isActive = active?.wallId === wallId && active.regionId === row.id
@@ -75,6 +76,7 @@ export function WallPaintRegionList({ wallId }: { wallId: string }) {
                       backgroundImage: row.finish.imageUrl
                         ? `url(${row.finish.imageUrl})`
                         : undefined,
+                      backgroundBlendMode: row.finish.tinted ? 'multiply' : undefined,
                     }}
                   />
                   <span className="flex min-w-0 flex-col leading-tight">
@@ -85,13 +87,13 @@ export function WallPaintRegionList({ wallId }: { wallId: string }) {
                   </span>
                 </button>
                 <button
-                  aria-label="Delete region"
+                  aria-label={i18n._({ id: 'editor.panels.wallRegionList.deleteRegion', message: 'Delete region' })}
                   className={ROW_ACTION_CLASS}
                   onClick={() => {
                     if (isActive) setActive(null)
                     if (removeWallRegion(wallId, row.id)) sfxEmitter.emit('sfx:structure-delete')
                   }}
-                  title="Delete region"
+                  title={i18n._({ id: 'editor.panels.wallRegionList.deleteRegion', message: 'Delete region' })}
                   type="button"
                 >
                   <Trash2 className="h-3 w-3" />
@@ -99,9 +101,7 @@ export function WallPaintRegionList({ wallId }: { wallId: string }) {
               </div>
             )
           })}
-          {capNotice && (
-            <div className="px-1 text-[11px] text-muted-foreground">{capNotice}</div>
-          )}
+          {capNotice && <div className="px-1 text-[11px] text-muted-foreground">{capNotice}</div>}
         </div>
       </PanelSection>
     </div>

package/src/components/ui/primitives/shortcut-token.tsx

@@ -1,6 +1,8 @@
 import { Icon } from '@iconify/react'
+import { usePascalI18n } from '@pascal-app/core'
 import type * as React from 'react'
 
+import { toolHintKey } from '../../../i18n/node-messages'
 import { cn } from '../../../lib/utils'
 
 const MOUSE_SHORTCUTS = {
@@ -70,20 +72,22 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
   const isCommand = COMMAND_VALUES.has(value)
   const isShift = value === 'Shift'
   const commandDisplay = IS_MAC ? '⌘' : 'Ctrl'
-  const commandLabel = IS_MAC ? 'Command' : 'Control'
+  const i18n = usePascalI18n()
+  const commandLabel = toolHintKey(IS_MAC ? 'Command' : 'Control', i18n)
+  const mouseLabel = mouseShortcut ? toolHintKey(mouseShortcut.label, i18n) : undefined
+  const shown = displayValue ?? toolHintKey(value, i18n)
 
   return (
     <kbd
       aria-label={
-        mouseShortcut?.label ??
-        (isCommand ? commandLabel : isShift ? 'Shift' : (displayValue ?? value))
+        mouseLabel ?? (isCommand ? commandLabel : isShift ? 'Shift' : shown)
       }
       className={cn(
         'inline-flex h-6 items-center rounded border border-border bg-muted px-2 font-medium font-mono text-[11px] text-muted-foreground',
         (mouseShortcut || isShift) && 'justify-center px-1.5',
         className,
       )}
-      title={mouseShortcut?.label ?? (isCommand ? commandLabel : isShift ? 'Shift' : value)}
+      title={mouseLabel ?? (isCommand ? commandLabel : isShift ? 'Shift' : shown)}
       {...props}
     >
       {mouseShortcut ? (
@@ -96,7 +100,7 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
             icon={mouseShortcut.icon}
             width={14}
           />
-          <span className="sr-only">{mouseShortcut.label}</span>
+          <span className="sr-only">{mouseLabel}</span>
         </>
       ) : isShift ? (
         // Icon rather than the ⇧ text glyph — the font renders the glyph's
@@ -117,7 +121,7 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
         // it up a touch on Mac. "Ctrl" stays at the token's normal size.
         <span className={IS_MAC ? 'text-[13px] leading-none' : undefined}>{commandDisplay}</span>
       ) : (
-        (displayValue ?? value)
+        shown
       )}
     </kbd>
   )

package/src/components/ui/right-stack.test.ts

@@ -14,16 +14,23 @@ test('the inspector keeps 180 px, or its own height if shorter, above the full c
   ).toEqual({ inspector: 0, card: 240 })
 })
 
-test('on a short window the inspector gives way first, down to its header', () => {
+test('on a short window the help card scrolls to preserve editing space', () => {
   expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 400 })).toEqual({
-    inspector: 152,
-    card: 240,
+    inspector: 180,
+    card: 212,
   })
 })
 
-test('on a very short window the inspector keeps its header and the card scrolls', () => {
+test('expanded hints cannot squeeze the inspector down to just its header', () => {
   expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 258 })).toEqual({
-    inspector: 52,
-    card: 198,
+    inspector: 180,
+    card: 70,
+  })
+})
+
+test('a column shorter than the inspector minimum still bounds both cards', () => {
+  expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 100 })).toEqual({
+    inspector: 92,
+    card: 0,
   })
 })

package/src/components/ui/right-stack.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, type ReactNode, useContext, useEffect, useRef } from 'react'
+import { createContext, type ReactNode, useContext, useLayoutEffect, useRef } from 'react'
 import { useIsMobile } from '../../hooks/use-mobile'
 import { cn } from '../../lib/utils'
 import { TOP_MENU_CLEARANCE } from './action-menu/placement'
@@ -20,9 +20,8 @@ const GAP = 8
 
 /**
  * The heights neither panel shrinks below. The inspector keeps 180 px (or its
- * own height, if shorter) while the full card fits under it, and never less
- * than its header row. The card shows in full whenever the column allows; on a
- * very short window it gives way and scrolls on itself — both stay usable.
+ * own height, if shorter) and never less than its header row when the column allows.
+ * The card uses the remaining room and scrolls on itself on a short window — both stay usable.
  */
 export function rightStackFloors(args: {
   naturalHeight: number
@@ -33,9 +32,10 @@ export function rightStackFloors(args: {
   const { naturalHeight, headerHeight, cardHeight, stackHeight } = args
   const gap = naturalHeight > 0 && cardHeight > 0 ? GAP : 0
   const header = Math.min(headerHeight, naturalHeight)
-  const inspector = Math.max(
-    header,
-    Math.min(INSPECTOR_MIN_HEIGHT, naturalHeight, stackHeight - cardHeight - gap),
+  const inspector = Math.min(
+    naturalHeight,
+    stackHeight,
+    Math.max(header, Math.min(INSPECTOR_MIN_HEIGHT, stackHeight - gap)),
   )
   const card = Math.max(0, Math.min(cardHeight, stackHeight - gap - inspector))
   return { inspector, card }
@@ -78,7 +78,7 @@ export function RightStack({
 
   // `min(180px, its own height)` has no CSS form for a flex item that scrolls,
   // so both floors are measured (`rightStackFloors`).
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isMobile) return
     const stack = stackRef.current
     const slot = inspectorRef.current
@@ -88,18 +88,29 @@ export function RightStack({
     const fit = () => {
       frame = 0
       const { natural, header } = inspectorHeights(slot)
+      const cardHeight = Array.from(card.children).reduce(
+        (height, child) => height + child.scrollHeight + (child instanceof HTMLElement ? child.offsetHeight - child.clientHeight : 0),
+        0,
+      )
       const floors = rightStackFloors({
         naturalHeight: natural,
         headerHeight: header,
-        cardHeight: card.scrollHeight,
+        cardHeight,
         stackHeight: stack.clientHeight,
       })
       const inspectorMin = `${floors.inspector}px`
       const cardMin = `${floors.card}px`
+      // Custom panels may wrap PanelWrapper in a non-flex element. Give the
+      // card an explicit inherited limit so those wrappers cannot bypass it.
+      const available = Math.max(0, stack.clientHeight - floors.card - (natural > 0 && floors.card > 0 ? GAP : 0))
+      const limit = `${available}px`
+      if (slot.style.getPropertyValue('--inspector-available-height') !== limit) {
+        slot.style.setProperty('--inspector-available-height', limit)
+      }
       if (slot.style.minHeight !== inspectorMin) slot.style.minHeight = inspectorMin
       if (card.style.minHeight !== cardMin) card.style.minHeight = cardMin
       // The card is click-through; it takes the pointer only when it has to scroll.
-      const pointer = floors.card < card.scrollHeight ? 'auto' : ''
+      const pointer = floors.card < cardHeight ? 'auto' : ''
       if (card.style.pointerEvents !== pointer) card.style.pointerEvents = pointer
     }
     const schedule = () => {

package/src/components/ui/sidebar/icon-rail.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import { Plus } from 'lucide-react'
 import type { ComponentType, ReactNode } from 'react'
 import {
@@ -32,19 +33,19 @@ interface IconRailProps {
   className?: string
 }
 
-const sitePanel: { id: PanelId; iconSrc: string; label: string } = {
+const sitePanel: { id: PanelId; iconSrc: string; label: MessageDescriptor } = {
   id: 'site',
   iconSrc: '/icons/level.webp',
-  label: 'Site',
+  label: /* i18n */ { id: 'editor.sidebar.iconRail.site', message: 'Site' },
 }
 
-const settingsPanel: { id: PanelId; iconSrc: string; label: string } = {
+const settingsPanel: { id: PanelId; iconSrc: string; label: MessageDescriptor } = {
   id: 'settings',
   iconSrc: '/icons/settings.webp',
-  label: 'Settings',
+  label: /* i18n */ { id: 'editor.sidebar.iconRail.settings', message: 'Settings' },
 }
 
-const panels: { id: PanelId; iconSrc: string; label: string }[] = [sitePanel, settingsPanel]
+const panels: { id: PanelId; iconSrc: string; label: MessageDescriptor }[] = [sitePanel, settingsPanel]
 
 export function IconRail({
   activePanel,
@@ -53,6 +54,7 @@ export function IconRail({
   extraPanels,
   className,
 }: IconRailProps) {
+  const i18n = usePascalI18n()
   const regularExtraPanels = extraPanels?.filter((panel) => !panel.pluginId && panel.id !== 'plugins')
   const pluginPanels = extraPanels?.filter((panel) => panel.pluginId)
   const pluginsPanel = extraPanels?.find((panel) => panel.id === 'plugins')
@@ -113,7 +115,7 @@ export function IconRail({
                 type="button"
               >
                 <img
-                  alt={panel.label}
+                  alt={i18n._(panel.label)}
                   className={cn(
                     'h-6 w-6 object-contain transition-all',
                     !isActive && 'opacity-50 saturate-0',
@@ -122,7 +124,7 @@ export function IconRail({
                 />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="right">{panel.label}</TooltipContent>
+            <TooltipContent side="right">{i18n._(panel.label)}</TooltipContent>
           </Tooltip>
         )
       })}
@@ -144,7 +146,7 @@ export function IconRail({
                 type="button"
               >
                 <img
-                  alt={panel.label}
+                  alt={i18n._(panel.label)}
                   className={cn(
                     'h-6 w-6 object-contain transition-all',
                     !isActive && 'opacity-50 saturate-0',
@@ -153,7 +155,7 @@ export function IconRail({
                 />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="right">{panel.label}</TooltipContent>
+            <TooltipContent side="right">{i18n._(panel.label)}</TooltipContent>
           </Tooltip>
         )
       })}

package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { AssetInput } from '@pascal-app/core'
+import { type AssetInput, type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import { Root as TooltipRoot } from '@radix-ui/react-tooltip'
 import NextImage from 'next/image'
 import { useMemo, useState } from 'react'
@@ -21,10 +21,10 @@ export type FunctionTreeNode = {
   children: FunctionTreeNode[]
 }
 
-const SOURCE_CHIPS: Array<{ id: NonNullable<AssetInput['source']>; label: string }> = [
-  { id: 'library', label: 'Library' },
-  { id: 'community', label: 'Community' },
-  { id: 'mine', label: 'Mine' },
+const SOURCE_CHIPS: Array<{ id: NonNullable<AssetInput['source']>; label: MessageDescriptor }> = [
+  { id: 'library', label: /* i18n */ { id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.library', message: 'Library' } },
+  { id: 'community', label: /* i18n */ { id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.community', message: 'Community' } },
+  { id: 'mine', label: /* i18n */ { id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.mine', message: 'Mine' } },
 ]
 
 /** Every slug at or below `node`, so a non-leaf selection matches descendants. */
@@ -64,6 +64,7 @@ export function FunctionTreePanel({
   leadingTile?: React.ReactNode
   emptyState?: React.ReactNode
 }) {
+  const i18n = usePascalI18n()
   const [activeRootSlug, setActiveRootSlug] = useState<string | null>(
     functionTree[0]?.slug ?? null,
   )
@@ -178,7 +179,7 @@ export function FunctionTreePanel({
               setSearch(e.target.value)
               onSearchChange?.(e.target.value)
             }}
-            placeholder="Search..."
+            placeholder={i18n._({ id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.search', message: 'Search...' })}
             type="text"
             value={search}
           />
@@ -197,7 +198,7 @@ export function FunctionTreePanel({
                   onClick={() => setActiveSource(isActive ? null : chip.id)}
                   type="button"
                 >
-                  {chip.label}
+                  {i18n._(chip.label)}
                 </button>
               )
             })}
@@ -217,7 +218,7 @@ export function FunctionTreePanel({
               onClick={() => setActiveChildSlug(null)}
               type="button"
             >
-              All
+              {i18n._({ id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.all', message: 'All' })}
             </button>
             {activeRoot.children.map((child) => {
               const isActive = activeChildSlug === child.slug
@@ -250,8 +251,7 @@ export function FunctionTreePanel({
         ) : isServerSearch && search && searchResults?.length === 0 ? (
           (emptyState ?? (
             <div className="flex h-full items-center justify-center text-muted-foreground text-xs">
-              No results for &ldquo;{search}&rdquo;
-            </div>
+              {i18n._({ id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.noResultsForSearch', message: 'No results for “{search}”', values: { search } })}</div>
           ))
         ) : (
           <ItemCatalog

package/src/components/ui/sidebar/panels/items-panel/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import type { AssetInput } from '@pascal-app/core'
 import NextImage from 'next/image'
 import { useEffect, useState } from 'react'
@@ -98,6 +99,7 @@ function LegacyItemsPanel({
   showSourceFilter?: boolean
   showTagFilters?: boolean
 }) {
+  const i18n = usePascalI18n()
   const mode = useEditor((s) => s.mode)
   const catalogCategory = useEditor((s) => s.catalogCategory)
   const setMode = useEditor((s) => s.setMode)
@@ -167,9 +169,9 @@ function LegacyItemsPanel({
   // filter even before they own any items. Selecting "Mine" with no
   // matching items falls through to the empty/no-results state.
   const sourceChips: Array<{ id: AssetInput['source']; label: string }> = [
-    { id: 'library', label: 'Library' },
-    { id: 'community', label: 'Community' },
-    { id: 'mine', label: 'Mine' },
+    { id: 'library', label: i18n._({ id: 'editor.sidebar.panels.itemsPanel.library', message: 'Library' }) },
+    { id: 'community', label: i18n._({ id: 'editor.sidebar.panels.itemsPanel.community', message: 'Community' }) },
+    { id: 'mine', label: i18n._({ id: 'editor.sidebar.panels.itemsPanel.mine', message: 'Mine' }) },
   ]
   const allTags = Array.from(new Set(categoryItems.flatMap((item) => item.tags ?? [])))
   const placementTags = allTags.filter((t) => PLACEMENT_TAGS.has(t))
@@ -215,13 +217,13 @@ function LegacyItemsPanel({
               type="button"
             >
               <NextImage
-                alt={cat.label}
+                alt={i18n._(cat.label)}
                 className={cn('size-7 object-contain', !isActive && 'opacity-60 grayscale')}
                 height={28}
                 src={cat.iconSrc}
                 width={28}
               />
-              <span className="font-medium text-[10px] leading-none">{cat.label}</span>
+              <span className="font-medium text-[10px] leading-none">{i18n._(cat.label)}</span>
             </button>
           )
         })}
@@ -242,7 +244,7 @@ function LegacyItemsPanel({
               setSearch(e.target.value)
               onSearchChange?.(e.target.value)
             }}
-            placeholder="Search..."
+            placeholder={i18n._({ id: 'editor.sidebar.panels.itemsPanel.search', message: 'Search...' })}
             type="text"
             value={search}
           />
@@ -284,7 +286,7 @@ function LegacyItemsPanel({
                   onClick={() => setActivePlacementTag(null)}
                   type="button"
                 >
-                  All
+                  {i18n._({ id: 'editor.sidebar.panels.itemsPanel.all', message: 'All' })}
                 </button>
                 {placementTags.map((tag) => {
                   const count = placementCount(tag)
@@ -376,8 +378,7 @@ function LegacyItemsPanel({
         ) : isServerSearch && search && searchResults?.length === 0 ? (
           (emptyState ?? (
             <div className="flex h-full items-center justify-center text-muted-foreground text-xs">
-              No results for &ldquo;{search}&rdquo;
-            </div>
+              {i18n._({ id: 'editor.sidebar.panels.itemsPanel.noResultsForSearch', message: 'No results for “{search}”', values: { search } })}</div>
           ))
         ) : (
           <ItemCatalog

package/src/components/ui/sidebar/panels/settings-panel/index.tsx

@@ -73,6 +73,7 @@ import { Switch } from './../../../../../components/ui/primitives/switch'
 import { cn } from './../../../../../lib/utils'
 import { refusedObjectsNotice } from './../../../../../components/editor/group-actions'
 import { addStoreyBelow, addStoreyOnTop } from './../../../../../lib/add-storey'
+import { offerExteriorWallCopy } from './../../../../../components/ui/level-wall-copy-prompt'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
 import { bringBuildArtifacts } from './../../../../../lib/scene-clipboard'
 import useEditor, { selectDefaultBuildingAndLevel } from './../../../../../store/use-editor'
@@ -423,10 +424,12 @@ function FloorSettingsSection() {
   const addFloor = () => {
     const newLevel = addStoreyOnTop(building.id)
     setSelection({ buildingId: building.id, levelId: newLevel.id })
+    offerExteriorWallCopy(newLevel.id)
   }
   const addBasement = () => {
     const newLevel = addStoreyBelow(building.id)
     setSelection({ buildingId: building.id, levelId: newLevel.id })
+    offerExteriorWallCopy(newLevel.id)
   }
 
   return (