@pascal-app/editor 1.0.3 → 1.0.5

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

@@ -0,0 +1,242 @@
+'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'
+  tone?: 'primary' | 'neutral'
+}
+
+/**
+ * One tool tile: the isometric icon over its name. Inactive icons stay grey and
+ * take their colour on hover. Neutral tiles keep that behavior when armed.
+ */
+export function BuildToolTile({
+  active,
+  badge,
+  className,
+  iconSrc,
+  label,
+  size = 'sm',
+  tone = 'primary',
+  ...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
+          ? tone === 'neutral'
+            ? 'bg-black/8 ring-1 ring-foreground/30 dark:bg-muted'
+            : 'bg-primary/10 ring-1 ring-primary/50'
+          : 'bg-black/4 hover:bg-black/8 dark:bg-muted/40 dark: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 || tone === 'neutral') &&
+            '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

@@ -1,7 +1,6 @@
 'use client'
 
-import type { AnyNodeId } from '@pascal-app/core'
-import { DEFAULT_LEVEL_HEIGHT, LevelNode, type UnitNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type LevelNode, type UnitNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import {
   AppWindow,
@@ -31,15 +30,16 @@ import {
   Redo2,
   Sparkles,
   Square,
-  SquareStack,
   Sun,
   Trash2,
   Undo2,
   Video,
 } from 'lucide-react'
 import { useEffect } from 'react'
+import { addStoreyOnTop } from '../../../lib/add-storey'
 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',
@@ -214,16 +203,7 @@ export function EditorCommands() {
             const { nodes } = useScene.getState()
             const building = Object.values(nodes).find((n) => n.type === 'building')
             if (!building) return
-            const levelCount = building.children.filter(
-              (childId) => nodes[childId as keyof typeof nodes]?.type === 'level',
-            ).length
-            const newLevel = LevelNode.parse({
-              level: levelCount,
-              height: DEFAULT_LEVEL_HEIGHT,
-              children: [],
-              parentId: building.id,
-            })
-            useScene.getState().createNode(newLevel, building.id)
+            const newLevel = addStoreyOnTop(building.id)
             useViewer.getState().setSelection({ levelId: newLevel.id })
           }),
       },
@@ -315,19 +295,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 +389,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 +443,8 @@ export function EditorCommands() {
     navigateTo,
     setInputValue,
     setOpen,
-    setPhase,
     armToolMode,
     armMaterialPaint,
-    setStructureLayer,
     isPreviewMode,
     setPreviewMode,
     exportScene,

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

@@ -3,15 +3,15 @@
 import type { AnyNodeId, LevelNode } from '@pascal-app/core'
 import { useScene } from '@pascal-app/core'
 import { markPerfAction, useViewer } from '@pascal-app/viewer'
-import { Command, useCommandState } from 'cmdk'
+import { Command, defaultFilter, useCommandState } from 'cmdk'
 import { ChevronRight, Search } from 'lucide-react'
-import type { ReactNode } from 'react'
-import { useEffect, useState } from 'react'
+import type { ReactNode, RefObject } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import { Dialog, DialogContent, DialogTitle } from './../../../components/ui/primitives/dialog'
 import { getLevelDisplayName } from '@pascal-app/core'
-import { useCommandRegistry } from '../../../store/use-command-registry'
+import { type CommandAction, useCommandRegistry } from '../../../store/use-command-registry'
 import { usePaletteViewRegistry } from '../../../store/use-palette-view-registry'
 
 // ---------------------------------------------------------------------------
@@ -54,6 +54,28 @@ function resolve(value: string | (() => string)): string {
   return typeof value === 'function' ? value() : value
 }
 
+type ActionGroup = [group: string, actions: CommandAction[]]
+
+/**
+ * The registered actions by group, in the order they were registered. A search puts the group
+ * holding the best match first: cmdk ranks the items inside a group but leaves the groups where
+ * they are, so a strong match could sit below a screen of weak ones.
+ */
+export function rankedGroups(actions: CommandAction[], search: string): ActionGroup[] {
+  const groups = new Map<string, CommandAction[]>()
+  for (const action of actions) {
+    groups.set(action.group, [...(groups.get(action.group) ?? []), action])
+  }
+  const ordered: ActionGroup[] = [...groups]
+  if (!search) return ordered
+  const bestMatch = ([, list]: ActionGroup) =>
+    Math.max(...list.map((action) => defaultFilter(resolve(action.label), search, action.keywords)))
+  return ordered
+    .map((entry) => ({ entry, score: bestMatch(entry) }))
+    .sort((a, b) => b.score - a.score)
+    .map(({ entry }) => entry)
+}
+
 function Shortcut({ keys }: { keys: string[] }) {
   return (
     <span className="ml-auto flex shrink-0 items-center gap-0.5">
@@ -149,7 +171,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',
 }
@@ -163,6 +184,20 @@ export interface CommandPaletteEmptyAction {
   onSelect: (query: string) => void
 }
 
+/**
+ * A search selects the first item; this scrolls the list back to the top to show it. cmdk scrolls
+ * before the list re-renders the selection, so once a search has moved the groups it scrolls to
+ * wherever the item selected before went. Rendered after the list, whose ref is set by then.
+ */
+function TopOnFirstItem({ list }: { list: RefObject<HTMLDivElement | null> }) {
+  const value = useCommandState((s) => s.value)
+  useLayoutEffect(() => {
+    const first = list.current?.querySelector('[cmdk-item]:not([aria-disabled="true"])')
+    if (value && first?.getAttribute('aria-selected') === 'true') list.current?.scrollTo({ top: 0 })
+  }, [list, value])
+  return null
+}
+
 function EmptyActionItem({ action }: { action: CommandPaletteEmptyAction }) {
   const count = useCommandState((s) => s.filtered.count)
   const search = useCommandState((s) => s.search)
@@ -194,6 +229,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
 
   const [meta, setMeta] = useState('⌘')
   const [isFullscreen, setIsFullscreen] = useState(false)
+  const listRef = useRef<HTMLDivElement>(null)
 
   const page = pages[pages.length - 1]
 
@@ -204,8 +240,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 +284,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
@@ -264,15 +292,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
     })
   }
 
-  // ---------------------------------------------------------------------------
-  // Group registered actions by group (preserving insertion order)
-  // ---------------------------------------------------------------------------
-  const grouped = actions.reduce<Map<string, typeof actions>>((acc, action) => {
-    const list = acc.get(action.group) ?? []
-    list.push(action)
-    acc.set(action.group, list)
-    return acc
-  }, new Map())
+  const grouped = rankedGroups(actions, inputValue)
 
   const onClose = () => setOpen(false)
   const onBack = () => {
@@ -335,7 +355,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
               />
             </div>
 
-            <Command.List className="max-h-100 overflow-y-auto p-1.5">
+            <Command.List className="max-h-100 overflow-y-auto p-1.5" ref={listRef}>
               {(!emptyAction || page) && (
                 <Command.Empty className="py-8 text-center text-muted-foreground text-sm">
                   No commands found.
@@ -353,7 +373,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
 
               {/* ── Root view: render from registry ───────────────────────── */}
               {!page &&
-                Array.from(grouped.entries()).map(([group, groupActions]) => (
+                grouped.map(([group, groupActions]) => (
                   <Command.Group heading={group} key={group}>
                     {groupActions.map((action) => (
                       <Item
@@ -364,7 +384,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 +409,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">
@@ -458,6 +468,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                 </Command.Group>
               )}
             </Command.List>
+            <TopOnFirstItem list={listRef} />
 
             {/* Footer hint */}
             <div className="flex items-center justify-between border-border/50 border-t px-3 py-2">

package/src/components/ui/command-palette/ranked-groups.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'bun:test'
+import { rankedGroups } from '.'
+
+const action = (group: string, label: string, keywords?: string[]) => ({
+  id: label,
+  group,
+  label,
+  keywords,
+  execute: () => {},
+})
+
+// What a host's palette holds: weak fuzzy matches for "theme" registered before the strong one.
+const actions = [
+  action('Generate', 'Generate house from template: The Poppy', ['template', 'adu', 'poppy']),
+  action('Viewer Controls', 'Switch to Solid', ['solid', 'shading', 'render', 'mode']),
+  action('View', 'Use dark theme', ['theme', 'appearance', 'interface']),
+  action('Export & Share', 'Take Screenshot', ['screenshot', 'capture', 'image']),
+]
+
+const order = (search: string) => rankedGroups(actions, search).map(([group]) => group)
+
+describe('command palette groups', () => {
+  test('a search lists the group with the best match first', () => {
+    expect(order('theme')[0]).toBe('View')
+    expect(order('solid')[0]).toBe('Viewer Controls')
+  })
+
+  test('with no search the groups keep the order they were registered in', () => {
+    expect(order('')).toEqual(['Generate', 'Viewer Controls', 'View', 'Export & Share'])
+  })
+})

package/src/components/ui/controls/action-button.tsx

@@ -12,12 +12,15 @@ export function ActionButton({ icon, label, className, ...props }: ActionButtonP
     <button
       {...props}
       className={cn(
-        'flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 font-medium text-foreground text-xs transition-colors hover:bg-[#3e3e3e] active:bg-[#3e3e3e]',
+        // The fill runs through custom properties so a caller's `bg-*` or
+        // `hover:bg-*` replaces it in both themes; tailwind-merge would keep a
+        // `dark:bg-*` fill alive under the caller's class.
+        'flex min-h-9 min-w-0 flex-1 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-border/50 bg-(--action-fill) px-3 py-2 font-medium text-foreground text-xs leading-4 transition-colors [&>svg]:shrink-0 [--action-fill-hover:rgb(0_0_0/0.08)] [--action-fill:rgb(0_0_0/0.04)] hover:bg-(--action-fill-hover) active:bg-(--action-fill-hover) dark:[--action-fill-hover:#3e3e3e] dark:[--action-fill:#2C2C2E]',
         className,
       )}
     >
       {icon}
-      <span>{label}</span>
+      <span className="min-w-0 whitespace-normal text-center">{label}</span>
     </button>
   )
 }