@pascal-app/editor 0.4.0

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

@@ -0,0 +1,438 @@
+import { emitter, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { TreeView, VisualJson } from '@visual-json/react'
+import { Camera, Download, Save, Trash2, Upload } from 'lucide-react'
+import {
+  type KeyboardEvent,
+  type SyntheticEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { Button } from './../../../../../components/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from './../../../../../components/ui/primitives/dialog'
+import { Switch } from './../../../../../components/ui/primitives/switch'
+import useEditor, { selectDefaultBuildingAndLevel } from './../../../../../store/use-editor'
+import { AudioSettingsDialog } from './audio-settings-dialog'
+import { KeyboardShortcutsDialog } from './keyboard-shortcuts-dialog'
+
+type SceneNode = Record<string, unknown> & {
+  id?: unknown
+  type?: unknown
+  name?: unknown
+  parentId?: unknown
+  children?: unknown
+}
+
+type SceneGraphNode = {
+  id: string
+  type: string
+  name: string | null
+  parentId: string | null
+  children: SceneGraphNode[]
+  missing?: true
+  cycle?: true
+}
+
+type SceneGraphValue = {
+  roots: SceneGraphNode[]
+  detachedNodes?: SceneGraphNode[]
+}
+
+const isSceneNode = (value: unknown): value is SceneNode => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof (value as { id: unknown }).id === 'string'
+  )
+}
+
+const getChildIdsFromNode = (node: SceneNode): string[] => {
+  if (!Array.isArray(node.children)) {
+    return []
+  }
+
+  const childIds = new Set<string>()
+
+  for (const child of node.children) {
+    if (typeof child === 'string') {
+      childIds.add(child)
+      continue
+    }
+
+    if (isSceneNode(child)) {
+      childIds.add(child.id as string)
+    }
+  }
+
+  return Array.from(childIds)
+}
+
+const buildSceneGraphValue = (
+  nodes: Record<string, SceneNode>,
+  rootNodeIds: string[],
+): SceneGraphValue => {
+  const childIdsByParent = new Map<string, Set<string>>()
+
+  for (const [id, node] of Object.entries(nodes)) {
+    const childIds = getChildIdsFromNode(node)
+    if (childIds.length > 0) {
+      childIdsByParent.set(id, new Set(childIds))
+    }
+  }
+
+  for (const [id, node] of Object.entries(nodes)) {
+    if (typeof node.parentId !== 'string') {
+      continue
+    }
+
+    const siblings = childIdsByParent.get(node.parentId) ?? new Set<string>()
+    siblings.add(id)
+    childIdsByParent.set(node.parentId, siblings)
+  }
+
+  const visited = new Set<string>()
+
+  const buildNode = (id: string, path: Set<string>): SceneGraphNode => {
+    const node = nodes[id]
+    if (!node) {
+      return {
+        id,
+        type: 'missing',
+        name: null,
+        parentId: null,
+        missing: true,
+        children: [],
+      }
+    }
+
+    const nodeType = typeof node.type === 'string' ? node.type : 'unknown'
+    const nodeName = typeof node.name === 'string' ? node.name : null
+    const parentId = typeof node.parentId === 'string' ? node.parentId : null
+
+    if (path.has(id)) {
+      return {
+        id,
+        type: nodeType,
+        name: nodeName,
+        parentId,
+        cycle: true,
+        children: [],
+      }
+    }
+
+    visited.add(id)
+    const nextPath = new Set(path)
+    nextPath.add(id)
+
+    const childIds = Array.from(childIdsByParent.get(id) ?? [])
+    return {
+      id,
+      type: nodeType,
+      name: nodeName,
+      parentId,
+      children: childIds.map((childId) => buildNode(childId, nextPath)),
+    }
+  }
+
+  const roots = rootNodeIds.map((id) => buildNode(id, new Set()))
+  const detachedNodeIds = Object.keys(nodes).filter((id) => !visited.has(id))
+
+  if (detachedNodeIds.length === 0) {
+    return { roots }
+  }
+
+  return {
+    roots,
+    detachedNodes: detachedNodeIds.map((id) => buildNode(id, new Set())),
+  }
+}
+
+export interface ProjectVisibility {
+  isPrivate: boolean
+  showScansPublic: boolean
+  showGuidesPublic: boolean
+}
+
+export interface SettingsPanelProps {
+  projectId?: string
+  projectVisibility?: ProjectVisibility
+  onVisibilityChange?: (
+    field: 'isPrivate' | 'showScansPublic' | 'showGuidesPublic',
+    value: boolean,
+  ) => Promise<void>
+}
+
+export function SettingsPanel({
+  projectId,
+  projectVisibility,
+  onVisibilityChange,
+}: SettingsPanelProps = {}) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const nodes = useScene((state) => state.nodes)
+  const rootNodeIds = useScene((state) => state.rootNodeIds)
+  const setScene = useScene((state) => state.setScene)
+  const clearScene = useScene((state) => state.clearScene)
+  const resetSelection = useViewer((state) => state.resetSelection)
+  const exportScene = useViewer((state) => state.exportScene)
+  const showGrid = useViewer((state) => state.showGrid)
+  const setPhase = useEditor((state) => state.setPhase)
+  const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false)
+  const sceneGraphValue = useMemo(
+    () => buildSceneGraphValue(nodes as Record<string, SceneNode>, rootNodeIds),
+    [nodes, rootNodeIds],
+  )
+  const blockSceneGraphMutations = useCallback((event: SyntheticEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }, [])
+  const blockSceneGraphDeletion = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  }, [])
+
+  const isLocalProject = false // Props-based; only show cloud sections when projectId provided
+
+  const handleSaveBuild = () => {
+    const sceneData = { nodes, rootNodeIds }
+    const json = JSON.stringify(sceneData, null, 2)
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    const date = new Date().toISOString().split('T')[0]
+    link.download = `layout_${date}.json`
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const handleFileLoad = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      try {
+        const data = JSON.parse(event.target?.result as string)
+        if (data.nodes && data.rootNodeIds) {
+          setScene(data.nodes, data.rootNodeIds)
+          resetSelection()
+          setPhase('site')
+        }
+      } catch (err) {
+        console.error('Failed to load build:', err)
+      }
+    }
+    reader.readAsText(file)
+
+    // Reset input so the same file can be loaded again
+    e.target.value = ''
+  }
+
+  const handleResetToDefault = () => {
+    clearScene()
+    resetSelection()
+    setPhase('structure')
+    selectDefaultBuildingAndLevel()
+  }
+
+  const handleGenerateThumbnail = () => {
+    if (!projectId) return
+    setIsGeneratingThumbnail(true)
+    emitter.emit('camera-controls:generate-thumbnail', { projectId })
+    setTimeout(() => setIsGeneratingThumbnail(false), 3000)
+  }
+
+  const handleVisibilityChange = async (
+    field: 'isPrivate' | 'showScansPublic' | 'showGuidesPublic',
+    value: boolean,
+  ) => {
+    await onVisibilityChange?.(field, value)
+  }
+
+  return (
+    <div className="flex flex-col gap-6 p-3">
+      {/* Visibility Section (only for cloud projects) */}
+      {projectId && !isLocalProject && (
+        <div className="space-y-3">
+          <label className="font-medium text-muted-foreground text-xs uppercase">Visibility</label>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-medium text-sm">Public</div>
+              <div className="text-muted-foreground text-xs">
+                {projectVisibility?.isPrivate ? 'Only you' : 'Anyone'} can view
+              </div>
+            </div>
+            <Switch
+              checked={!(projectVisibility?.isPrivate ?? false)}
+              onCheckedChange={(checked) => handleVisibilityChange('isPrivate', !checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-medium text-sm">Show 3D Scans</div>
+              <div className="text-muted-foreground text-xs">Visible to public viewers</div>
+            </div>
+            <Switch
+              checked={projectVisibility?.showScansPublic ?? true}
+              onCheckedChange={(checked) => handleVisibilityChange('showScansPublic', checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-medium text-sm">Show Floorplans</div>
+              <div className="text-muted-foreground text-xs">Visible to public viewers</div>
+            </div>
+            <Switch
+              checked={projectVisibility?.showGuidesPublic ?? true}
+              onCheckedChange={(checked) => handleVisibilityChange('showGuidesPublic', checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-medium text-sm">Show Grid</div>
+              <div className="text-muted-foreground text-xs">Visible only in the editor</div>
+            </div>
+            <Switch
+              checked={showGrid}
+              onCheckedChange={(checked) => useViewer.getState().setShowGrid(checked)}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Export Section */}
+      <div className="space-y-2">
+        <label className="font-medium text-muted-foreground text-xs uppercase">Export</label>
+        <Button
+          className="w-full justify-start gap-2"
+          onClick={() => exportScene?.('glb')}
+          variant="outline"
+        >
+          <Download className="size-4" />
+          Export GLB
+        </Button>
+        <Button
+          className="w-full justify-start gap-2"
+          onClick={() => exportScene?.('stl')}
+          variant="outline"
+        >
+          <Download className="size-4" />
+          Export STL
+        </Button>
+        <Button
+          className="w-full justify-start gap-2"
+          onClick={() => exportScene?.('obj')}
+          variant="outline"
+        >
+          <Download className="size-4" />
+          Export OBJ
+        </Button>
+      </div>
+
+      {/* Thumbnail Section (only for cloud projects) */}
+      {projectId && !isLocalProject && (
+        <div className="space-y-2">
+          <label className="font-medium text-muted-foreground text-xs uppercase">Thumbnail</label>
+          <Button
+            className="w-full justify-start gap-2"
+            disabled={isGeneratingThumbnail}
+            onClick={handleGenerateThumbnail}
+            variant="outline"
+          >
+            <Camera className="size-4" />
+            {isGeneratingThumbnail ? 'Generating...' : 'Generate Thumbnail'}
+          </Button>
+        </div>
+      )}
+
+      {/* Save/Load Section */}
+      <div className="space-y-2">
+        <label className="font-medium text-muted-foreground text-xs uppercase">Save & Load</label>
+
+        <Button className="w-full justify-start gap-2" onClick={handleSaveBuild} variant="outline">
+          <Save className="size-4" />
+          Save Build
+        </Button>
+
+        <Button
+          className="w-full justify-start gap-2"
+          onClick={() => fileInputRef.current?.click()}
+          variant="outline"
+        >
+          <Upload className="size-4" />
+          Load Build
+        </Button>
+
+        <input
+          accept="application/json"
+          className="hidden"
+          onChange={handleFileLoad}
+          ref={fileInputRef}
+          type="file"
+        />
+      </div>
+
+      {/* Audio Section */}
+      <div className="space-y-2">
+        <label className="font-medium text-muted-foreground text-xs uppercase">Audio</label>
+        <AudioSettingsDialog />
+      </div>
+
+      {/* Keyboard Section */}
+      <div className="space-y-2">
+        <label className="font-medium text-muted-foreground text-xs uppercase">Keyboard</label>
+        <KeyboardShortcutsDialog />
+      </div>
+
+      {/* Scene Graph */}
+      <div className="space-y-1">
+        <label className="font-medium text-muted-foreground text-xs uppercase">Scene Graph</label>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button className="h-auto justify-start p-0 text-sm" variant="link">
+              Explore scene graph
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="h-[80vh] max-w-[95vw] gap-0 overflow-hidden border-0 bg-[#1e1e1e] p-0 shadow-none sm:max-w-5xl">
+            <DialogTitle className="sr-only">Scene Graph</DialogTitle>
+            <div
+              className="flex h-full min-h-0 w-full min-w-0 *:h-full *:w-full *:overflow-y-auto"
+              onContextMenuCapture={blockSceneGraphMutations}
+              onDragStartCapture={blockSceneGraphMutations}
+              onDropCapture={blockSceneGraphMutations}
+              onKeyDownCapture={blockSceneGraphDeletion}
+            >
+              <VisualJson value={sceneGraphValue}>
+                <TreeView showCounts />
+              </VisualJson>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* Danger Zone */}
+      <div className="space-y-2">
+        <label className="font-medium text-destructive text-xs uppercase">Danger Zone</label>
+
+        <Button
+          className="w-full justify-start gap-2"
+          onClick={handleResetToDefault}
+          variant="destructive"
+        >
+          <Trash2 className="size-4" />
+          Clear & Start New
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -0,0 +1,188 @@
+import { Keyboard } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Button } from './../../../../../components/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './../../../../../components/ui/primitives/dialog'
+import { ShortcutToken } from './../../../../../components/ui/primitives/shortcut-token'
+
+type Shortcut = {
+  keys: string[]
+  action: string
+  note?: string
+}
+
+type ShortcutCategory = {
+  title: string
+  shortcuts: Shortcut[]
+}
+
+const KEY_DISPLAY_MAP: Record<string, string> = {
+  'Arrow Up': '↑',
+  'Arrow Down': '↓',
+  Esc: '⎋',
+  Shift: '⇧',
+  Space: '␣',
+}
+
+const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
+  {
+    title: 'Editor Navigation',
+    shortcuts: [
+      { keys: ['1'], action: 'Switch to Site phase' },
+      { keys: ['2'], action: 'Switch to Structure phase' },
+      { keys: ['3'], action: 'Switch to Furnish phase' },
+      { keys: ['S'], action: 'Switch to Structure layer' },
+      { keys: ['F'], action: 'Switch to Furnish layer' },
+      { keys: ['Z'], action: 'Switch to Zones layer' },
+      {
+        keys: ['Cmd/Ctrl', 'Arrow Up'],
+        action: 'Select next level in the active building',
+      },
+      {
+        keys: ['Cmd/Ctrl', 'Arrow Down'],
+        action: 'Select previous level in the active building',
+      },
+      { keys: ['Cmd/Ctrl', 'B'], action: 'Toggle sidebar' },
+    ],
+  },
+  {
+    title: 'Modes & History',
+    shortcuts: [
+      { keys: ['V'], action: 'Switch to Select mode' },
+      { keys: ['B'], action: 'Switch to Build mode' },
+      {
+        keys: ['Esc'],
+        action: 'Cancel the active tool and return to Select mode',
+      },
+      { keys: ['Delete / Backspace'], action: 'Delete selected objects' },
+      { keys: ['Cmd/Ctrl', 'Z'], action: 'Undo' },
+      { keys: ['Cmd/Ctrl', 'Shift', 'Z'], action: 'Redo' },
+    ],
+  },
+  {
+    title: 'Selection',
+    shortcuts: [
+      {
+        keys: ['Cmd/Ctrl', 'Left click'],
+        action: 'Add or remove an object from multi-selection',
+        note: 'Works while in Select mode.',
+      },
+    ],
+  },
+  {
+    title: 'Drawing Tools',
+    shortcuts: [
+      {
+        keys: ['Shift'],
+        action: 'Temporarily disable angle snapping while drawing walls, slabs, and ceilings',
+        note: 'Hold while drawing.',
+      },
+    ],
+  },
+  {
+    title: 'Item Placement',
+    shortcuts: [
+      { keys: ['R'], action: 'Rotate item clockwise by 90 degrees' },
+      { keys: ['T'], action: 'Rotate item counter-clockwise by 90 degrees' },
+      {
+        keys: ['Shift'],
+        action: 'Temporarily bypass placement validation constraints',
+        note: 'Hold while placing.',
+      },
+    ],
+  },
+  {
+    title: 'Camera',
+    shortcuts: [
+      {
+        keys: ['Middle click'],
+        action: 'Pan camera',
+        note: 'Drag with the middle mouse button, or hold Space while dragging with the left mouse button.',
+      },
+      {
+        keys: ['Right click'],
+        action: 'Orbit camera',
+        note: 'Drag with the right mouse button.',
+      },
+    ],
+  },
+]
+
+function getDisplayKey(key: string, isMac: boolean): string {
+  if (key === 'Cmd/Ctrl') return isMac ? '⌘' : 'Ctrl'
+  if (key === 'Delete / Backspace') return isMac ? '⌫' : 'Backspace'
+  return KEY_DISPLAY_MAP[key] ?? key
+}
+
+function ShortcutKeys({ keys }: { keys: string[] }) {
+  const [isMac, setIsMac] = useState(true)
+
+  useEffect(() => {
+    setIsMac(navigator.platform.toUpperCase().indexOf('MAC') >= 0)
+  }, [])
+
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      {keys.map((key, index) => (
+        <div className="flex items-center gap-1" key={`${key}-${index}`}>
+          {index > 0 ? <span className="text-[10px] text-muted-foreground">+</span> : null}
+          <ShortcutToken displayValue={getDisplayKey(key, isMac)} value={key} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function KeyboardShortcutsDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="w-full justify-start gap-2" variant="outline">
+          <Keyboard className="size-4" />
+          Keyboard Shortcuts
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden p-0 sm:max-w-3xl">
+        <DialogHeader className="shrink-0 border-b px-6 py-4">
+          <DialogTitle>Keyboard Shortcuts</DialogTitle>
+          <DialogDescription>
+            Shortcuts are context-aware and depend on the current phase or tool.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
+          {SHORTCUT_CATEGORIES.map((category) => (
+            <section className="space-y-2" key={category.title}>
+              <h3 className="font-medium text-sm">{category.title}</h3>
+              <div className="overflow-hidden rounded-md border border-border/80">
+                {category.shortcuts.map((shortcut, index) => (
+                  <div
+                    className="grid grid-cols-[minmax(130px,220px)_1fr] gap-3 px-3 py-2"
+                    key={`${category.title}-${shortcut.action}`}
+                  >
+                    <ShortcutKeys keys={shortcut.keys} />
+                    <div>
+                      <p className="text-sm">{shortcut.action}</p>
+                      {shortcut.note ? (
+                        <p className="text-muted-foreground text-xs">{shortcut.note}</p>
+                      ) : null}
+                    </div>
+                    {index < category.shortcuts.length - 1 ? (
+                      <div className="col-span-2 border-border/60 border-b" />
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/ui/sidebar/panels/site-panel/building-tree-node.tsx

@@ -0,0 +1,80 @@
+import { type BuildingNode, LevelNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Building2, Plus } from 'lucide-react'
+import { useState } from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from './../../../../../components/ui/primitives/tooltip'
+import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface BuildingTreeNodeProps {
+  node: BuildingNode
+  depth: number
+  isLast?: boolean
+}
+
+export function BuildingTreeNode({ node, depth, isLast }: BuildingTreeNodeProps) {
+  const [expanded, setExpanded] = useState(true)
+  const createNode = useScene((state) => state.createNode)
+  const isSelected = useViewer((state) => state.selection.buildingId === node.id)
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+
+  const handleClick = () => {
+    setSelection({ buildingId: node.id })
+  }
+
+  const handleAddLevel = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const newLevel = LevelNode.parse({
+      level: node.children.length,
+      children: [],
+      parentId: node.id,
+    })
+    createNode(newLevel, node.id)
+  }
+
+  return (
+    <TreeNodeWrapper
+      actions={
+        <div className="flex items-center gap-0.5">
+          <TreeNodeActions node={node} />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                className="flex h-5 w-5 items-center justify-center rounded hover:bg-primary-foreground/20"
+                onClick={handleAddLevel}
+              >
+                <Plus className="h-3 w-3" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">Add new level</TooltipContent>
+          </Tooltip>
+        </div>
+      }
+      depth={depth}
+      expanded={expanded}
+      hasChildren={node.children.length > 0}
+      icon={<Building2 className="h-3.5 w-3.5" />}
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      label={node.name || 'Building'}
+      onClick={handleClick}
+      onDoubleClick={() => focusTreeNode(node.id)}
+      onToggle={() => setExpanded(!expanded)}
+    >
+      {node.children.map((childId, index) => (
+        <TreeNode
+          depth={depth + 1}
+          isLast={index === node.children.length - 1}
+          key={childId}
+          nodeId={childId}
+        />
+      ))}
+    </TreeNodeWrapper>
+  )
+}