@pascal-app/editor 0.9.1 → 1.0.0-beta.1

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

@@ -1,5 +1,6 @@
 'use client'
 
+import { Plus } from 'lucide-react'
 import type { ComponentType, ReactNode } from 'react'
 import {
   Tooltip,
@@ -10,7 +11,13 @@ import { cn } from './../../../lib/utils'
 
 export type PanelId = string
 
-export type ExtraPanel = { id: string; icon: ReactNode; label: string; component: ComponentType }
+export type ExtraPanel = {
+  id: string
+  icon: ReactNode
+  label: string
+  component: ComponentType
+  pluginId?: string
+}
 
 interface IconRailProps {
   activePanel: PanelId
@@ -22,13 +29,13 @@ interface IconRailProps {
 
 const sitePanel: { id: PanelId; iconSrc: string; label: string } = {
   id: 'site',
-  iconSrc: '/icons/level.png',
+  iconSrc: '/icons/level.webp',
   label: 'Site',
 }
 
 const settingsPanel: { id: PanelId; iconSrc: string; label: string } = {
   id: 'settings',
-  iconSrc: '/icons/settings.png',
+  iconSrc: '/icons/settings.webp',
   label: 'Settings',
 }
 
@@ -41,6 +48,38 @@ export function IconRail({
   extraPanels,
   className,
 }: IconRailProps) {
+  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')
+
+  const renderExtraPanel = (panel: ExtraPanel) => {
+    const isActive = activePanel === panel.id
+    return (
+      <Tooltip key={panel.id}>
+        <TooltipTrigger asChild>
+          <button
+            className={cn(
+              'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
+              isActive ? 'bg-accent' : 'hover:bg-accent',
+            )}
+            onClick={() => onPanelChange(panel.id)}
+            type="button"
+          >
+            <span
+              className={cn(
+                'flex h-6 w-6 items-center justify-center transition-all',
+                !isActive && 'opacity-50',
+              )}
+            >
+              {panel.id === 'plugins' ? <Plus className="h-5 w-5" /> : panel.icon}
+            </span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="right">{panel.label}</TooltipContent>
+      </Tooltip>
+    )
+  }
+
   return (
     <div
       className={cn(
@@ -83,34 +122,7 @@ export function IconRail({
         )
       })}
 
-      {/* Extra panels (injected between site and settings) */}
-      {extraPanels?.map((panel) => {
-        const isActive = activePanel === panel.id
-        return (
-          <Tooltip key={panel.id}>
-            <TooltipTrigger asChild>
-              <button
-                className={cn(
-                  'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-                  isActive ? 'bg-accent' : 'hover:bg-accent',
-                )}
-                onClick={() => onPanelChange(panel.id)}
-                type="button"
-              >
-                <span
-                  className={cn(
-                    'flex h-6 w-6 items-center justify-center transition-all',
-                    !isActive && 'opacity-50',
-                  )}
-                >
-                  {panel.icon}
-                </span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right">{panel.label}</TooltipContent>
-          </Tooltip>
-        )
-      })}
+      {regularExtraPanels?.map(renderExtraPanel)}
 
       {/* Settings panel */}
       {[settingsPanel].map((panel) => {
@@ -140,6 +152,13 @@ export function IconRail({
           </Tooltip>
         )
       })}
+
+      {(pluginPanels?.length || pluginsPanel) && (
+        <div className="mt-1 flex w-9 flex-col items-center gap-1 border-border/70 border-t pt-2">
+          {pluginPanels?.map(renderExtraPanel)}
+          {pluginsPanel && renderExtraPanel(pluginsPanel)}
+        </div>
+      )}
     </div>
   )
 }

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,12 @@
-import { emitter, useScene, validateBuildJson } 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 +15,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { exportFloorplanPdf } from '../../../../../lib/floorplan/floorplan-export'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
   Dialog,
@@ -19,6 +25,7 @@ import {
 } from './../../../../../components/ui/primitives/dialog'
 import { Switch } from './../../../../../components/ui/primitives/switch'
 import useEditor, { selectDefaultBuildingAndLevel } from './../../../../../store/use-editor'
+import useFloorplanMode from './../../../../../store/use-floorplan-mode'
 import { AudioSettingsDialog } from './audio-settings-dialog'
 import { KeyboardShortcutsDialog } from './keyboard-shortcuts-dialog'
 import { LoadBuildDialog, type PendingImport } from './load-build-dialog'
@@ -179,13 +186,14 @@ 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 floorplanMode = useFloorplanMode((state) => state.mode)
   const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false)
   const [pendingImport, setPendingImport] = useState<PendingImport | null>(null)
   const sceneGraphValue = useMemo(
@@ -206,7 +214,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)
@@ -235,7 +243,7 @@ export function SettingsPanel({
           result: {
             ok: false,
             parsed: null,
-            stats: { total: 0, byType: {}, unknownTypes: {}, floorAreaM2: 0 },
+            stats: { total: 0, byType: {}, pluginTypes: {}, unknownTypes: {}, floorAreaM2: 0 },
             errors: [
               {
                 severity: 'error',
@@ -262,11 +270,24 @@ export function SettingsPanel({
     e.target.value = ''
   }
 
-  const handleConfirmImport = (parsed: { nodes: Record<string, unknown>; rootNodeIds: string[] }) => {
+  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)
@@ -274,6 +295,9 @@ export function SettingsPanel({
 
   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()
@@ -331,16 +355,6 @@ export function SettingsPanel({
               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 className="flex items-center justify-between">
             <div>
               <div className="font-medium text-sm">Shadows</div>
@@ -355,32 +369,59 @@ export function SettingsPanel({
       )}
 
       {/* 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="flex items-center justify-between font-medium text-muted-foreground text-xs">
+            <span>Floor plan</span>
+            <span>{floorplanMode === 'default' ? 'Default mode' : 'Expert mode'}</span>
+          </div>
+          <Button
+            className="w-full justify-start gap-2"
+            onClick={() => exportFloorplanPdf('full')}
+            variant="outline"
+          >
+            <MapIcon className="size-4" />
+            Full floor plan
+          </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) */}

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

@@ -55,6 +55,7 @@ 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'],
@@ -68,10 +69,67 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
     title: 'Selection',
     shortcuts: [
+      {
+        keys: ['Cmd/Ctrl', 'C'],
+        action: 'Copy the selected objects',
+        note: 'The copied selection can be pasted into another level, project, or browser tab.',
+      },
+      {
+        keys: ['Cmd/Ctrl', 'X'],
+        action: 'Cut the selected objects',
+        note: 'Copies the selection to the clipboard, then removes it from this scene.',
+      },
+      {
+        keys: ['Cmd/Ctrl', 'V'],
+        action: 'Paste and place copied objects',
+        note:
+          'Carries a preview under the cursor. Click to place it, or press Escape to cancel.',
+      },
       {
         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 +138,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',
@@ -157,7 +226,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>