@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/ui/build-panel/build-panel.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { ChevronRight } from 'lucide-react'
+import { type ComponentPropsWithoutRef, type ReactNode, useEffect, useState } from 'react'
+import { cn } from '../../../lib/utils'
+import {
+  WALL_DRAW_IDLE_CAPTION,
+  WALL_DRAW_VARIANTS,
+  type WallDrawVariant,
+} from '../../../lib/wall-draw-variant'
+
+/**
+ * The Build panel's grouped layout (Rooms / Add to rooms / Outdoor / Advanced),
+ * shared by the community and standalone editor Build tabs so both read the
+ * same. Hosts own what each tile arms; these only lay the groups out.
+ */
+export function BuildPanelSection({
+  children,
+  hint,
+  id,
+  title,
+}: {
+  children: ReactNode
+  hint?: string
+  id: string
+  title: string
+}) {
+  return (
+    <section className="flex flex-col" data-build-group={id}>
+      <div className="mb-2 flex items-baseline justify-between gap-2 px-0.5">
+        <h3 className="font-medium text-foreground text-xs">{title}</h3>
+        {hint ? <span className="truncate text-[11px] text-muted-foreground">{hint}</span> : null}
+      </div>
+      {children}
+    </section>
+  )
+}
+
+const ADVANCED_OPEN_KEY = 'pascal-build-advanced-open'
+
+function readAdvancedOpen(): boolean {
+  try {
+    return window.localStorage.getItem(ADVANCED_OPEN_KEY) === '1'
+  } catch {
+    return false
+  }
+}
+
+function writeAdvancedOpen(open: boolean) {
+  try {
+    window.localStorage.setItem(ADVANCED_OPEN_KEY, open ? '1' : '0')
+  } catch {
+    // Storage blocked (private window, preview): the section just starts closed.
+  }
+}
+
+/**
+ * The collapsible Advanced group. Remembers its open state per viewer, and
+ * opens itself when one of its tools becomes the armed one (e.g. by shortcut)
+ * so the lit tile is never hidden.
+ */
+export function BuildPanelAdvancedSection({
+  children,
+  containsActiveTool,
+  description,
+  hint,
+}: {
+  children: ReactNode
+  containsActiveTool: boolean
+  description?: string
+  hint?: string
+}) {
+  const [open, setOpen] = useState(false)
+  useEffect(() => setOpen(readAdvancedOpen()), [])
+  useEffect(() => {
+    if (containsActiveTool) setOpen(true)
+  }, [containsActiveTool])
+
+  return (
+    <section className="flex flex-col" data-build-group="advanced">
+      <button
+        aria-expanded={open}
+        className="-mx-1.5 flex items-center gap-2 rounded-lg px-1.5 py-1.5 text-left transition-colors hover:bg-muted/60"
+        onClick={() => {
+          const next = !open
+          setOpen(next)
+          writeAdvancedOpen(next)
+        }}
+        type="button"
+      >
+        <ChevronRight
+          className={cn(
+            'size-3 shrink-0 text-muted-foreground transition-transform duration-150',
+            open && 'rotate-90',
+          )}
+        />
+        <h3 className="font-medium text-foreground text-xs">Advanced</h3>
+        {hint ? (
+          <span className="ml-auto truncate text-[11px] text-muted-foreground">{hint}</span>
+        ) : null}
+      </button>
+      {open ? (
+        <div className="flex flex-col gap-2.5 pt-1.5">
+          {description ? (
+            <p className="px-0.5 text-[11px] text-muted-foreground leading-relaxed">
+              {description}
+            </p>
+          ) : null}
+          {children}
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+export function BuildToolGrid({ children, columns }: { children: ReactNode; columns: 3 | 4 }) {
+  return (
+    <div className={cn('grid gap-1.5', columns === 3 ? 'grid-cols-3' : 'grid-cols-4')}>
+      {children}
+    </div>
+  )
+}
+
+type BuildToolTileProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'type'> & {
+  active: boolean
+  /** Corner mark, e.g. the snap-target badge of wall-hosted tools. */
+  badge?: ReactNode
+  iconSrc: string
+  label: string
+  size?: 'lg' | 'sm'
+}
+
+/**
+ * One tool tile: the isometric icon over its name. Inactive icons stay grey and
+ * take their colour on hover; the armed tool keeps it, on the primary tint.
+ */
+export function BuildToolTile({
+  active,
+  badge,
+  className,
+  iconSrc,
+  label,
+  size = 'sm',
+  ...buttonProps
+}: BuildToolTileProps) {
+  return (
+    <button
+      aria-pressed={active}
+      className={cn(
+        'group relative flex min-w-0 flex-col items-center justify-end rounded-xl transition-all duration-200',
+        // Small tiles grow to two label lines ("Spawn point"); a grid row's
+        // tiles stretch together, so a row keeps one height.
+        size === 'lg' ? 'h-[104px] gap-1.5 px-1.5 pt-2 pb-2.5' : 'min-h-[74px] gap-1 px-1 pt-1.5 pb-2',
+        active ? 'bg-primary/10 ring-1 ring-primary/50' : 'bg-muted/40 hover:bg-muted',
+        className,
+      )}
+      type="button"
+      {...buttonProps}
+    >
+      <img
+        alt=""
+        className={cn(
+          'min-h-0 object-contain transition duration-200 group-hover:scale-110',
+          size === 'lg' ? 'size-14' : 'size-9',
+          !active && 'opacity-70 grayscale group-hover:opacity-100 group-hover:grayscale-0',
+        )}
+        draggable={false}
+        src={iconSrc}
+      />
+      <span
+        className={cn(
+          'line-clamp-2 max-w-full text-center font-medium leading-tight',
+          size === 'lg' ? 'text-xs' : 'text-[11px]',
+          active ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground',
+        )}
+      >
+        {label}
+      </span>
+      {badge ? <span className="absolute top-1 right-1">{badge}</span> : null}
+    </button>
+  )
+}
+
+/** The line under the Rooms tiles: what the armed shape does, lead in bold. */
+export function BuildPanelCaption({ lead, rest }: { lead?: string; rest: string }) {
+  return (
+    <p className="mt-2 min-h-[2lh] px-0.5 text-[11px] text-muted-foreground leading-relaxed">
+      {lead ? <span className="font-medium text-foreground">{lead} </span> : null}
+      {rest}
+    </p>
+  )
+}
+
+/**
+ * The Rooms group: one large tile per wall drawing variant, and the armed
+ * variant's caption. `activeVariant` is null while the wall tool is not armed.
+ */
+export function BuildPanelRoomsSection({
+  activeVariant,
+  onHover,
+  onSelect,
+  tileProps,
+}: {
+  activeVariant: WallDrawVariant | null
+  onHover?: (variant: WallDrawVariant) => void
+  onSelect: (variant: WallDrawVariant) => void
+  /** Extra attributes per tile (e.g. a host's guide-target hook). */
+  tileProps?: (variant: WallDrawVariant) => Record<string, string | undefined>
+}) {
+  const active = WALL_DRAW_VARIANTS.find((variant) => variant.id === activeVariant)
+  return (
+    <BuildPanelSection hint="walls · floor · ceiling" id="rooms" title="Rooms">
+      <BuildToolGrid columns={3}>
+        {WALL_DRAW_VARIANTS.map((variant) => (
+          <BuildToolTile
+            active={variant.id === activeVariant}
+            data-build-tool={`room-${variant.id}`}
+            iconSrc={variant.iconSrc}
+            key={variant.id}
+            label={variant.label}
+            onClick={() => onSelect(variant.id)}
+            onMouseEnter={() => onHover?.(variant.id)}
+            size="lg"
+            title={variant.title}
+            {...tileProps?.(variant.id)}
+          />
+        ))}
+      </BuildToolGrid>
+      <BuildPanelCaption
+        lead={active?.caption.lead}
+        rest={active ? active.caption.rest : WALL_DRAW_IDLE_CAPTION}
+      />
+    </BuildPanelSection>
+  )
+}

package/src/components/ui/command-palette/editor-commands.tsx

@@ -31,7 +31,6 @@ import {
   Redo2,
   Sparkles,
   Square,
-  SquareStack,
   Sun,
   Trash2,
   Undo2,
@@ -40,6 +39,7 @@ import {
 import { useEffect } from 'react'
 import { getHistoryCommandState, runRedo, runUndo } from '../../../lib/history'
 import { deleteLevelWithFallbackSelection } from '../../../lib/level-selection'
+import { getSavedSceneDocument } from '../../../lib/scene'
 import { createUnitInBuilding, enterUnitFocus, leaveUnitFocus } from '../../../lib/units'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import type { StructureTool } from '../../../store/use-editor'
@@ -50,10 +50,8 @@ export function EditorCommands() {
   const register = useCommandRegistry((s) => s.register)
   const { navigateTo, setInputValue, setOpen } = useCommandPalette()
 
-  const setPhase = useEditor((s) => s.setPhase)
   const armToolMode = useEditor((s) => s.armToolMode)
   const armMaterialPaint = useEditor((s) => s.armMaterialPaint)
-  const setStructureLayer = useEditor((s) => s.setStructureLayer)
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
   const setPreviewMode = useEditor((s) => s.setPreviewMode)
 
@@ -79,12 +77,7 @@ export function EditorCommands() {
     )
 
     const activateTool = (tool: StructureTool) => {
-      run(() => {
-        setPhase('structure')
-        if (tool === 'zone') setStructureLayer('zones')
-        else setStructureLayer('elements')
-        armToolMode({ mode: 'build', tool })
-      })
+      run(() => armToolMode({ mode: 'build', tool }))
     }
 
     return register([
@@ -175,11 +168,7 @@ export function EditorCommands() {
         keywords: ['paint', 'material', 'texture', 'bucket', 'surface'],
         shortcut: ['P'],
         execute: () =>
-          run(() => {
-            setPhase('structure')
-            setStructureLayer('elements')
-            armMaterialPaint()
-          }),
+          run(() => armMaterialPaint()),
       },
       {
         id: 'editor.mode.terrain-sculpt',
@@ -315,19 +304,6 @@ export function EditorCommands() {
         navigate: true,
         execute: () => navigateTo('wall-mode'),
       },
-      {
-        id: 'editor.viewer.level-mode',
-        label: 'Level Mode',
-        group: 'Viewer Controls',
-        icon: <SquareStack className="h-4 w-4" />,
-        keywords: ['level', 'floor', 'exploded', 'stacked', 'solo'],
-        badge: () => {
-          const mode = useViewer.getState().levelMode
-          return { manual: 'Manual', stacked: 'Stacked', exploded: 'Exploded', solo: 'Solo' }[mode]
-        },
-        navigate: true,
-        execute: () => navigateTo('level-mode'),
-      },
       {
         id: 'editor.viewer.camera-mode',
         label: () => {
@@ -422,7 +398,7 @@ export function EditorCommands() {
         keywords: ['export', 'download', 'json', 'save', 'data'],
         execute: () =>
           run(() => {
-            const { nodes, rootNodeIds } = useScene.getState()
+            const { nodes, rootNodeIds } = getSavedSceneDocument()
             const blob = new Blob([JSON.stringify({ nodes, rootNodeIds }, null, 2)], {
               type: 'application/json',
             })
@@ -476,10 +452,8 @@ export function EditorCommands() {
     navigateTo,
     setInputValue,
     setOpen,
-    setPhase,
     armToolMode,
     armMaterialPaint,
-    setStructureLayer,
     isPreviewMode,
     setPreviewMode,
     exportScene,

package/src/components/ui/command-palette/index.tsx

@@ -149,7 +149,6 @@ function OptionItem({
 // ---------------------------------------------------------------------------
 const PAGE_LABEL: Record<string, string> = {
   'wall-mode': 'Wall Mode',
-  'level-mode': 'Level Mode',
   'rename-level': 'Rename Level',
   'goto-level': 'Go to Level',
 }
@@ -204,8 +203,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
 
   const wallMode = useViewer((s) => s.wallMode)
   const setWallMode = useViewer((s) => s.setWallMode)
-  const levelMode = useViewer((s) => s.levelMode)
-  const setLevelMode = useViewer((s) => s.setLevelMode)
 
   const allLevels = useScene(
     useShallow((s) =>
@@ -250,12 +247,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
     down: 'Down',
     translucent: 'Translucent',
   }
-  const levelModeLabel: Record<'manual' | 'stacked' | 'exploded' | 'solo', string> = {
-    manual: 'Manual',
-    stacked: 'Stacked',
-    exploded: 'Exploded',
-    solo: 'Solo',
-  }
 
   const confirmRename = () => {
     if (!(activeLevelId && inputValue.trim())) return
@@ -364,7 +355,11 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                         keywords={action.keywords}
                         label={action.label}
                         navigate={action.navigate}
-                        onSelect={() => action.execute()}
+                        // A registered command that does not navigate within the
+                        // palette closes it, like the built-ins — otherwise the
+                        // dialog overlay keeps swallowing clicks under a full-screen
+                        // surface the command opened (Sheets).
+                        onSelect={() => (action.navigate ? action.execute() : run(() => action.execute()))}
                         shortcut={action.shortcut}
                       />
                     ))}
@@ -385,20 +380,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                 </Command.Group>
               )}
 
-              {/* ── Level Mode sub-page ───────────────────────────────────── */}
-              {page === 'level-mode' && (
-                <Command.Group heading="Level Mode">
-                  {(['stacked', 'exploded', 'solo'] as const).map((mode) => (
-                    <OptionItem
-                      isActive={levelMode === mode}
-                      key={mode}
-                      label={levelModeLabel[mode]}
-                      onSelect={() => run(() => setLevelMode(mode))}
-                    />
-                  ))}
-                </Command.Group>
-              )}
-
               {/* ── Go to Level sub-page ──────────────────────────────────── */}
               {page === 'goto-level' && (
                 <Command.Group heading="Go to Level">

package/src/components/ui/controls/finish-swatch.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import {
+  type AnyNode,
+  getCatalogMaterialById,
+  getLibraryMaterialIdFromRef,
+  getSceneMaterialIdFromRef,
+  nodeRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useState } from 'react'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { MaterialPicker } from './material-picker'
+
+type Swatch = { label: string; color: string | null; image: string | null }
+
+/** How a finish reference reads in a panel: its catalog tile, its colour, or its scene material. */
+function useFinishSwatch(ref: string | undefined, fallback: string): Swatch {
+  const materials = useScene((state) => state.materials)
+  if (!ref) return { ...describe(fallback, materials), label: 'Default' }
+  return describe(ref, materials)
+}
+
+function describe(ref: string, materials: ReturnType<typeof useScene.getState>['materials']) {
+  const library = getCatalogMaterialById(getLibraryMaterialIdFromRef(ref) ?? undefined)
+  if (library)
+    return {
+      label: library.label,
+      color: library.previewColor ?? null,
+      image: library.previewThumbnailUrl ?? null,
+    }
+  const sceneId = getSceneMaterialIdFromRef(ref)
+  const scene = sceneId ? materials[sceneId as keyof typeof materials] : undefined
+  if (scene) return { label: scene.name, color: scene.material.properties?.color ?? null, image: null }
+  if (ref.startsWith('#')) return { label: ref.toUpperCase(), color: ref, image: null }
+  return { label: 'Default', color: null, image: null }
+}
+
+/**
+ * Paints one surface of a node from its panel, exactly as the paint tool does:
+ * the kind's own paint commit for that role (same write, one undo step).
+ */
+export function paintSurface(node: AnyNode, role: string, materialPreset: string) {
+  const paint = nodeRegistry.get(node.type)?.capabilities?.paint
+  if (!paint) return
+  const args = { node, role, material: undefined, materialPreset }
+  if (paint.commit) paint.commit(args)
+  else useScene.getState().updateNode(node.id, paint.buildPatch(args) as Partial<AnyNode>)
+}
+
+/**
+ * A finish row: the swatch and its name. A click opens the paint tool's
+ * material picker; a pick paints the surface through the paint tool's path.
+ */
+export function FinishSwatch({
+  label,
+  node,
+  role,
+  value,
+  fallback,
+  hint,
+}: {
+  label: string
+  node: AnyNode
+  /** The paint role of the surface (`edge`, `foundation`, …). */
+  role: string
+  /** The authored finish reference; absent shows `fallback` as "Default". */
+  value: string | undefined
+  fallback: string
+  /** Tooltip on the row. */
+  hint?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const swatch = useFinishSwatch(value, fallback)
+  return (
+    <div className="flex min-h-8 items-center justify-between gap-3" title={hint}>
+      <span className="text-muted-foreground text-xs">{label}</span>
+      <Popover onOpenChange={setOpen} open={open}>
+        <PopoverTrigger asChild>
+          <button
+            aria-label={`${label}: ${swatch.label}`}
+            className="flex min-w-0 items-center gap-2 rounded-full border border-border/50 py-0.5 pr-2.5 pl-1 text-xs transition-colors hover:bg-accent"
+            data-finish-swatch={label}
+            type="button"
+          >
+            <span
+              aria-hidden
+              className="size-4 shrink-0 overflow-hidden rounded-full border border-border/50"
+              style={{ backgroundColor: swatch.color ?? 'transparent' }}
+            >
+              {swatch.image && <img alt="" className="size-full object-cover" src={swatch.image} />}
+            </span>
+            <span className="truncate">{swatch.label}</span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="flex h-96 w-80 flex-col p-2" side="left">
+          <MaterialPicker
+            onSelectMaterialPreset={(ref) => {
+              const live = useScene.getState().nodes[node.id as keyof ReturnType<typeof useScene.getState>['nodes']]
+              if (live) paintSurface(live, role, ref)
+              setOpen(false)
+            }}
+            selectOnCategoryChange={false}
+            selectedMaterialPreset={value}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}