@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/ui/sidebar/panels/plugins-panel.tsx

@@ -0,0 +1,218 @@
+'use client'
+
+import { Icon } from '@iconify/react'
+import { type IconRef, useScene } from '@pascal-app/core'
+import { ChevronLeft, ChevronRight, ExternalLink, Puzzle } from 'lucide-react'
+import { lazy, type ReactNode, Suspense, useState, useSyncExternalStore } from 'react'
+import { editorHostPanelRegistry } from '../../../../lib/plugin-panels'
+import { Button } from '../../primitives/button'
+
+const PLUGIN_AUTHORING_URL =
+  'https://editor.pascal.app/docs/developers/plugins'
+
+function renderPluginIcon(ref: IconRef): ReactNode {
+  if (ref.kind === 'url') {
+    return <img alt="" className="h-8 w-8 object-contain" src={ref.src} />
+  }
+  if (ref.kind === 'iconify') {
+    return <Icon height={28} icon={ref.name} width={28} />
+  }
+  if (ref.kind === 'svg') {
+    return (
+      <svg height={28} viewBox={ref.viewBox} width={28}>
+        <path d={ref.path} fill="currentColor" />
+      </svg>
+    )
+  }
+  const LazyIcon = lazy(ref.module)
+  return (
+    <Suspense fallback={<Puzzle className="h-7 w-7" />}>
+      <LazyIcon />
+    </Suspense>
+  )
+}
+
+export function PluginsPanel() {
+  const [selectedPluginId, setSelectedPluginId] = useState<string | null>(null)
+  const panels = useSyncExternalStore(
+    editorHostPanelRegistry.subscribe,
+    editorHostPanelRegistry.getSnapshot,
+    editorHostPanelRegistry.getSnapshot,
+  )
+  const installedPlugins = useScene((state) => state.installedPlugins)
+  const setInstalledPlugins = useScene((state) => state.setInstalledPlugins)
+  const readOnly = useScene((state) => state.readOnly)
+  const plugins = Array.from(
+    new Map(
+      panels
+        .filter((panel) => panel.pluginId)
+        .map((panel) => [panel.pluginId as string, panel]),
+    ).entries(),
+  )
+  const selectedPlugin = selectedPluginId
+    ? plugins.find(([pluginId]) => pluginId === selectedPluginId)
+    : undefined
+
+  if (selectedPlugin) {
+    const [pluginId, panel] = selectedPlugin
+    const installed = installedPlugins.includes(pluginId)
+
+    return (
+      <div className="flex h-full flex-col overflow-y-auto p-4">
+        <div>
+          <Button
+            className="rounded-full"
+            onClick={() => setSelectedPluginId(null)}
+            size="sm"
+            variant="ghost"
+          >
+            <ChevronLeft className="h-4 w-4" />
+            All plugins
+          </Button>
+
+          <div className="mt-5 flex items-start gap-4">
+            <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-background/60">
+              {renderPluginIcon(panel.icon)}
+            </div>
+            <div className="min-w-0 pt-1">
+              <h2 className="font-semibold text-lg text-sidebar-foreground">{panel.label}</h2>
+              <p className="text-sidebar-foreground/50 text-sm">
+                {installed ? 'Installed' : 'Not installed'}
+              </p>
+            </div>
+          </div>
+
+          <p className="mt-5 text-sidebar-foreground/70 text-sm">
+            {panel.description ?? 'Adds a new tool panel to the editor.'}
+          </p>
+
+          <dl className="mt-6 divide-y divide-border/50 rounded-xl border border-border/60">
+            <div className="p-3">
+              <dt className="text-sidebar-foreground/50 text-xs">Plugin ID</dt>
+              <dd className="mt-1 break-all text-sidebar-foreground text-sm">{pluginId}</dd>
+            </div>
+            {panel.creator && (
+              <div className="p-3">
+                <dt className="text-sidebar-foreground/50 text-xs">Creator</dt>
+                <dd className="mt-1 text-sm">
+                  {panel.creator.url ? (
+                    <a
+                      className="inline-flex items-center gap-1 text-sidebar-foreground underline-offset-4 hover:underline"
+                      href={panel.creator.url}
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      {panel.creator.name}
+                      <ExternalLink className="h-3 w-3" />
+                    </a>
+                  ) : (
+                    panel.creator.name
+                  )}
+                </dd>
+              </div>
+            )}
+            {panel.pluginUrl && (
+              <div className="p-3">
+                <dt className="text-sidebar-foreground/50 text-xs">Plugin</dt>
+                <dd className="mt-1 text-sm">
+                  <a
+                    className="inline-flex items-center gap-1 text-sidebar-foreground underline-offset-4 hover:underline"
+                    href={panel.pluginUrl}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    View plugin
+                    <ExternalLink className="h-3 w-3" />
+                  </a>
+                </dd>
+              </div>
+            )}
+          </dl>
+
+          <Button
+            className="mt-5 rounded-full"
+            disabled={readOnly}
+            onClick={() => {
+              const next = installed
+                ? installedPlugins.filter((id) => id !== pluginId)
+                : [...installedPlugins, pluginId]
+              setInstalledPlugins(next, { explicit: true })
+            }}
+            variant={installed ? 'outline' : 'default'}
+          >
+            {installed ? 'Uninstall' : 'Install'}
+          </Button>
+        </div>
+
+        <div className="mt-auto pt-6">
+          <a
+            className="inline-flex items-center gap-1.5 text-sidebar-foreground/70 text-sm underline-offset-4 hover:text-sidebar-foreground hover:underline"
+            href={PLUGIN_AUTHORING_URL}
+            rel="noreferrer"
+            target="_blank"
+          >
+            Create a Pascal plugin
+            <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto p-4">
+      <div className="mb-5">
+        <h2 className="font-semibold text-lg text-sidebar-foreground">Plugins</h2>
+        <p className="mt-1 text-sidebar-foreground/60 text-sm">
+          Add focused tools and content to this project.
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {plugins.map(([pluginId, panel]) => {
+          const installed = installedPlugins.includes(pluginId)
+          return (
+            <button
+              className="w-full rounded-xl border border-border/60 bg-accent/20 p-3 text-left transition-colors hover:bg-accent/40"
+              key={pluginId}
+              onClick={() => setSelectedPluginId(pluginId)}
+              type="button"
+            >
+              <div className="flex items-start gap-3">
+                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-background/60">
+                  {renderPluginIcon(panel.icon)}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <h3 className="font-medium text-sidebar-foreground">{panel.label}</h3>
+                      <p className="text-sidebar-foreground/50 text-xs">
+                        {installed ? 'Installed' : 'Not installed'}
+                      </p>
+                    </div>
+                    <ChevronRight className="h-4 w-4 shrink-0 text-sidebar-foreground/50" />
+                  </div>
+                  <p className="mt-2 text-sidebar-foreground/60 text-sm">
+                    {panel.description ?? 'Adds a new tool panel to the editor.'}
+                  </p>
+                </div>
+              </div>
+            </button>
+          )
+        })}
+      </div>
+
+      <div className="mt-auto pt-6">
+        <a
+          className="inline-flex items-center gap-1.5 text-sidebar-foreground/70 text-sm underline-offset-4 hover:text-sidebar-foreground hover:underline"
+          href={PLUGIN_AUTHORING_URL}
+          rel="noreferrer"
+          target="_blank"
+        >
+          Create a Pascal plugin
+          <ExternalLink className="h-3.5 w-3.5" />
+        </a>
+      </div>
+    </div>
+  )
+}

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

@@ -1,7 +1,7 @@
-import { emitter, useScene } from '@pascal-app/core'
+import { clearSceneHistory, emitter, useScene, validateBuildJson } 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 { Camera, Download, Map as MapIcon, Save, Trash2, Upload } from 'lucide-react'
 import {
   type KeyboardEvent,
   type SyntheticEvent,
@@ -10,6 +10,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { exportFloorplanPdf } from '../../../../../lib/floorplan/floorplan-export'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
   Dialog,
@@ -21,6 +22,7 @@ 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'
+import { LoadBuildDialog, type PendingImport } from './load-build-dialog'
 
 type SceneNode = Record<string, unknown> & {
   id?: unknown
@@ -178,13 +180,15 @@ export function SettingsPanel({
   const fileInputRef = useRef<HTMLInputElement>(null)
   const nodes = useScene((state) => state.nodes)
   const rootNodeIds = useScene((state) => state.rootNodeIds)
+  const installedPlugins = useScene((state) => state.installedPlugins)
   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 shadows = useViewer((state) => state.shadows)
   const setPhase = useEditor((state) => state.setPhase)
   const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false)
+  const [pendingImport, setPendingImport] = useState<PendingImport | null>(null)
   const sceneGraphValue = useMemo(
     () => buildSceneGraphValue(nodes as Record<string, SceneNode>, rootNodeIds),
     [nodes, rootNodeIds],
@@ -203,7 +207,7 @@ export function SettingsPanel({
   const isLocalProject = false // Props-based; only show cloud sections when projectId provided
 
   const handleSaveBuild = () => {
-    const sceneData = { nodes, rootNodeIds }
+    const sceneData = { nodes, rootNodeIds, installedPlugins }
     const json = JSON.stringify(sceneData, null, 2)
     const blob = new Blob([json], { type: 'application/json' })
     const url = URL.createObjectURL(blob)
@@ -221,16 +225,37 @@ export function SettingsPanel({
 
     const reader = new FileReader()
     reader.onload = (event) => {
+      const text = event.target?.result as string
+      let parsed: unknown
       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)
+        parsed = JSON.parse(text)
+      } catch {
+        setPendingImport({
+          fileName: file.name,
+          fileSizeBytes: file.size,
+          result: {
+            ok: false,
+            parsed: null,
+            stats: { total: 0, byType: {}, unknownTypes: {}, floorAreaM2: 0 },
+            errors: [
+              {
+                severity: 'error',
+                code: 'invalid_json',
+                message: 'File could not be parsed as JSON.',
+              },
+            ],
+            warnings: [],
+            schemaIssues: [],
+            schemaIssueCount: 0,
+          },
+        })
+        return
       }
+      setPendingImport({
+        fileName: file.name,
+        fileSizeBytes: file.size,
+        result: validateBuildJson(parsed),
+      })
     }
     reader.readAsText(file)
 
@@ -238,8 +263,34 @@ export function SettingsPanel({
     e.target.value = ''
   }
 
+  const handleConfirmImport = (parsed: {
+    nodes: Record<string, unknown>
+    rootNodeIds: string[]
+    installedPlugins?: string[]
+  }) => {
+    const currentScene = useScene.getState()
+    setScene(
+      parsed.nodes as Parameters<typeof setScene>[0],
+      parsed.rootNodeIds as Parameters<typeof setScene>[1],
+      {
+        installedPlugins: parsed.installedPlugins ?? currentScene.installedPlugins,
+        hasExplicitPluginInstallState:
+          parsed.installedPlugins !== undefined || currentScene.hasExplicitPluginInstallState,
+      },
+    )
+    // An import is a scene load: it becomes the undo floor. Without this,
+    // undo could step back into the pre-import scene state.
+    clearSceneHistory()
+    resetSelection()
+    setPhase('site')
+    setPendingImport(null)
+  }
+
   const handleResetToDefault = () => {
     clearScene()
+    // Same floor rule as import — undo after a reset must not resurrect the
+    // old scene (or land on the empty intermediate `unloadScene` state).
+    clearSceneHistory()
     resetSelection()
     setPhase('structure')
     selectDefaultBuildingAndLevel()
@@ -299,44 +350,68 @@ export function SettingsPanel({
           </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 className="font-medium text-sm">Shadows</div>
+              <div className="text-muted-foreground text-xs">Cast shadows from lights</div>
             </div>
             <Switch
-              checked={showGrid}
-              onCheckedChange={(checked) => useViewer.getState().setShowGrid(checked)}
+              checked={shadows}
+              onCheckedChange={(checked) => useViewer.getState().setShadows(checked)}
             />
           </div>
         </div>
       )}
 
       {/* Export Section */}
-      <div className="space-y-2">
+      <div className="space-y-4">
         <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 className="space-y-2">
+          <div className="font-medium text-muted-foreground text-xs">3D model</div>
+          <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>
+
+        <div className="space-y-2">
+          <div className="font-medium text-muted-foreground text-xs">Floorplan</div>
+          <Button
+            className="w-full justify-start gap-2"
+            onClick={() => exportFloorplanPdf('full')}
+            variant="outline"
+          >
+            <MapIcon className="size-4" />
+            Full floorplan
+          </Button>
+          <Button
+            className="w-full justify-start gap-2"
+            onClick={() => exportFloorplanPdf('structure')}
+            variant="outline"
+          >
+            <MapIcon className="size-4" />
+            Structure only
+          </Button>
+        </div>
       </div>
 
       {/* Thumbnail Section (only for cloud projects) */}
@@ -380,6 +455,12 @@ export function SettingsPanel({
           ref={fileInputRef}
           type="file"
         />
+
+        <LoadBuildDialog
+          onCancel={() => setPendingImport(null)}
+          onConfirm={handleConfirmImport}
+          pending={pendingImport}
+        />
       </div>
 
       {/* Audio Section */}

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

@@ -37,7 +37,6 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       { 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' },
       {
@@ -56,6 +55,8 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     shortcuts: [
       { keys: ['V'], action: 'Switch to Select mode' },
       { keys: ['B'], action: 'Switch to Build mode' },
+      { keys: ['M'], action: 'Activate the last measurement tool' },
+      { keys: ['X'], action: 'Switch to Delete mode' },
       {
         keys: ['Esc'],
         action: 'Cancel the active tool and return to Select mode',
@@ -71,7 +72,48 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       {
         keys: ['Cmd/Ctrl', 'Left click'],
         action: 'Add or remove an object from multi-selection',
-        note: 'Works while in Select mode.',
+        note: 'Works in Select mode on the 3D canvas, the 2D floor plan, and the scene graph.',
+      },
+      {
+        keys: ['Shift', 'Left click'],
+        action: 'Add or remove an object from canvas multi-selection',
+        note: 'In the scene graph, Shift-click selects the visible range like a file browser.',
+      },
+      {
+        keys: ['Left click'],
+        action: 'Move the whole multi-selection',
+        note:
+          'With 2+ objects selected, in 2D and 3D alike: drag the selection (or its dashed box) to slide it; click it to pick it up and place with the next click.',
+      },
+      {
+        keys: ['R', 'T'],
+        action: 'Rotate a multi-selection ±45° around its center',
+        note: 'Also works mid-move while carrying the selection.',
+      },
+      {
+        keys: ['Esc'],
+        action: 'Clear the selection',
+        note: 'Clicking empty space does the same.',
+      },
+    ],
+  },
+  {
+    title: 'Direct Manipulation',
+    shortcuts: [
+      {
+        keys: ['Cmd/Ctrl', 'Left click'],
+        action: 'Move the selected movable object under the cursor',
+        note: 'Drag in Select mode with a single object selected. Guided snapping and guides are enabled by default.',
+      },
+      {
+        keys: ['Cmd/Ctrl', 'Right click'],
+        action: 'Rotate the selected object under the cursor',
+        note: 'Drag left or right in Select mode with a single object selected. Rotation snaps to 15° increments by default.',
+      },
+      {
+        keys: ['Cmd/Ctrl', 'Shift', 'Right click'],
+        action: 'Rotate freely',
+        note: 'Hold Shift during the drag to bypass the 15° rotation increment.',
       },
     ],
   },
@@ -80,16 +122,27 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     shortcuts: [
       {
         keys: ['Shift'],
-        action: 'Temporarily disable angle snapping while drawing walls, slabs, and ceilings',
-        note: 'Hold while drawing.',
+        action: 'Bypass guided snapping and angle constraints',
+        note: 'Hold during the active gesture. Passive guide or measurement feedback may stay visible.',
+      },
+      {
+        keys: ['Shift'],
+        action: 'Rotate freely, bypassing the default 15° rotation snap',
+        note: 'Hold while dragging a rotate handle or direct-rotation gesture.',
       },
     ],
   },
   {
     title: 'Item Placement',
     shortcuts: [
-      { keys: ['R'], action: 'Rotate item clockwise, or toggle selected door open/closed' },
-      { keys: ['T'], action: 'Rotate item counter-clockwise, or close selected door' },
+      {
+        keys: ['R', 'T'],
+        action: 'Rotate item; with a door selected, R toggles open/closed and T closes',
+      },
+      {
+        keys: ['E'],
+        action: 'Operate the selected node — doors, windows, and cabinet doors/drawers animate open/closed',
+      },
       {
         keys: ['Shift'],
         action: 'Temporarily bypass placement validation constraints',
@@ -100,6 +153,11 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
     title: 'Camera',
     shortcuts: [
+      {
+        keys: ['W', 'A', 'S', 'D'],
+        action: 'Pan camera',
+        note: 'Moves in screen space, similar to dragging the camera view.',
+      },
       {
         keys: ['Middle click'],
         action: 'Pan camera',
@@ -152,7 +210,8 @@ export function KeyboardShortcutsDialog() {
         <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.
+            Shortcuts are context-aware. Guided constraints are enabled by default; hold Shift
+            during an active gesture to build freely.
           </DialogDescription>
         </DialogHeader>