pascalorg
diff --git a/‎apps/editor/app/layout.tsx‎
Lines changed: 1 addition & 5 deletions b/‎apps/editor/app/layout.tsx‎
Lines changed: 1 addition & 5 deletions
diff --git a/‎apps/editor/components/viewer-toolbar.tsx‎
Lines changed: 180 additions & 19 deletions b/‎apps/editor/components/viewer-toolbar.tsx‎
Lines changed: 180 additions & 19 deletions
diff --git a/‎apps/ifc-converter/components/PreviewToolbar.tsx‎
Lines changed: 1 addition & 10 deletions b/‎apps/ifc-converter/components/PreviewToolbar.tsx‎
Lines changed: 1 addition & 10 deletions
diff --git a/‎packages/core/src/events/bus.ts‎
Lines changed: 2 additions & 2 deletions b/‎packages/core/src/events/bus.ts‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎packages/core/src/registry/index.ts‎
Lines changed: 1 addition & 0 deletions b/‎packages/core/src/registry/index.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎packages/core/src/registry/types.ts‎
Lines changed: 10 additions & 0 deletions b/‎packages/core/src/registry/types.ts‎
Lines changed: 10 additions & 0 deletions
@@ -33,11 +33,7 @@ export default function RootLayout({
     >
       <head>
         {process.env.NODE_ENV === 'development' && (
-          <script
-            async
-            crossOrigin="anonymous"
-            src="//unpkg.com/react-scan/dist/auto.global.js"
-          />
+          <script async crossOrigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js" />
         )}
       </head>
       <body className="font-sans">
 
@@ -1,18 +1,36 @@
 'use client'
 
 import { Icon as IconifyIcon } from '@iconify/react'
-import { useEditor, useSidebarStore, type ViewMode } from '@pascal-app/editor'
-import { useViewer } from '@pascal-app/viewer'
 import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  useEditor,
+  useSidebarStore,
+  type ViewMode,
+} from '@pascal-app/editor'
+import {
+  CLAY_PALETTE,
+  type EdgeMode,
+  getSceneTheme,
+  SCENE_THEMES,
+  useViewer,
+} from '@pascal-app/viewer'
+import {
+  Box,
+  Check,
   ChevronsLeft,
   ChevronsRight,
   Columns2,
+  Contrast,
   Eye,
   EyeOff,
   Footprints,
   Grid2X2,
-  Moon,
-  Sun,
+  PenLine,
+  Sparkles,
+  SwatchBook,
 } from 'lucide-react'
 import Image from 'next/image'
 import { type ReactNode, useCallback } from 'react'
@@ -83,6 +101,11 @@ const wallModeConfig: Record<string, { icon: string; label: string }> = {
   down: { icon: '/icons/walllow.png', label: 'Low' },
 }
 
+const SHADING_OPTIONS = [
+  { id: 'solid', name: 'Solid', detail: 'Flat and fast — no ambient occlusion', icon: Box },
+  { id: 'rendered', name: 'Rendered', detail: 'Full ambient occlusion', icon: Sparkles },
+] as const
+
 function ViewModeControl() {
   const viewMode = useEditor((state) => state.viewMode)
   const setViewMode = useEditor((state) => state.setViewMode)
@@ -216,6 +239,134 @@ function WallModeToggle() {
   )
 }
 
+function RenderModeMenu() {
+  const shading = useViewer((state) => state.shading)
+  const setShading = useViewer((state) => state.setShading)
+  const active = SHADING_OPTIONS.find((option) => option.id === shading) ?? SHADING_OPTIONS[0]
+  const ActiveIcon = active.icon
+
+  return (
+    <DropdownMenu>
+      <ToolbarTooltip label={`Render: ${active.name}`}>
+        <DropdownMenuTrigger asChild>
+          <button
+            aria-label={`Render: ${active.name}`}
+            className={cn(
+              TOOLBAR_BTN,
+              'w-auto gap-1.5 px-2.5',
+              shading === 'rendered' && 'bg-white/10 text-foreground/90',
+            )}
+            type="button"
+          >
+            <ActiveIcon className="h-3.5 w-3.5" />
+            <span className="font-medium text-xs">{active.name}</span>
+          </button>
+        </DropdownMenuTrigger>
+      </ToolbarTooltip>
+      <DropdownMenuContent align="center" className="min-w-56" side="bottom">
+        {SHADING_OPTIONS.map((option) => {
+          const OptionIcon = option.icon
+          return (
+            <DropdownMenuItem key={option.id} onSelect={() => setShading(option.id)}>
+              <OptionIcon className="h-4 w-4" />
+              <div className="flex flex-col">
+                <span className="text-foreground">{option.name}</span>
+                <span className="text-muted-foreground text-xs">{option.detail}</span>
+              </div>
+              {shading === option.id ? <Check className="ml-auto h-4 w-4 text-foreground" /> : null}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function SceneThemeMenu() {
+  const sceneTheme = useViewer((state) => state.sceneTheme)
+  const setSceneTheme = useViewer((state) => state.setSceneTheme)
+  const active = getSceneTheme(sceneTheme)
+
+  return (
+    <DropdownMenu>
+      <ToolbarTooltip label={`Scene theme: ${active.name}`}>
+        <DropdownMenuTrigger asChild>
+          <button
+            aria-label={`Scene theme: ${active.name}`}
+            className={cn(TOOLBAR_BTN, 'w-28 gap-1.5 px-2.5 text-foreground/90')}
+            type="button"
+          >
+            <SwatchBook className="h-3.5 w-3.5 shrink-0" />
+            <span className="truncate font-medium text-xs">{active.name}</span>
+          </button>
+        </DropdownMenuTrigger>
+      </ToolbarTooltip>
+      <DropdownMenuContent align="center" className="min-w-48" side="bottom">
+        {SCENE_THEMES.map((theme) => {
+          const swatches = (['wall', 'roof', 'floor', 'glazing'] as const).map(
+            (role) => theme.clayTints?.[role] ?? CLAY_PALETTE[role],
+          )
+          return (
+            <DropdownMenuItem key={theme.id} onSelect={() => setSceneTheme(theme.id)}>
+              <span
+                className="grid h-5 w-5 shrink-0 grid-cols-2 overflow-hidden rounded-sm border border-black/10"
+                style={{ backgroundColor: theme.background }}
+              >
+                {swatches.map((color, index) => (
+                  <span key={`${theme.id}-${index}`} style={{ backgroundColor: color }} />
+                ))}
+              </span>
+              <span className="text-foreground">{theme.name}</span>
+              {sceneTheme === theme.id ? (
+                <Check className="ml-auto h-4 w-4 text-foreground" />
+              ) : null}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const EDGE_OPTIONS = [
+  { id: 'off', name: 'Off', detail: 'No edge lines' },
+  { id: 'soft', name: 'Soft', detail: 'Faint outline of major creases' },
+  { id: 'strong', name: 'Strong', detail: 'Crisp, opaque edge lines' },
+] as const satisfies readonly { id: EdgeMode; name: string; detail: string }[]
+
+function EdgesMenu() {
+  const edges = useViewer((state) => state.edges)
+  const setEdges = useViewer((state) => state.setEdges)
+  const active = EDGE_OPTIONS.find((option) => option.id === edges) ?? EDGE_OPTIONS[0]
+
+  return (
+    <DropdownMenu>
+      <ToolbarTooltip label={`Edges: ${active.name}`}>
+        <DropdownMenuTrigger asChild>
+          <button
+            aria-label={`Edges: ${active.name}`}
+            className={cn(TOOLBAR_BTN, edges !== 'off' && 'bg-white/10 text-foreground/90')}
+            type="button"
+          >
+            <PenLine className="h-4 w-4" />
+          </button>
+        </DropdownMenuTrigger>
+      </ToolbarTooltip>
+      <DropdownMenuContent align="center" className="min-w-56" side="bottom">
+        {EDGE_OPTIONS.map((option) => (
+          <DropdownMenuItem key={option.id} onSelect={() => setEdges(option.id)}>
+            <div className="flex flex-col">
+              <span className="text-foreground">{option.name}</span>
+              <span className="text-muted-foreground text-xs">{option.detail}</span>
+            </div>
+            {edges === option.id ? <Check className="ml-auto h-4 w-4 text-foreground" /> : null}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
 function GridVisibilityToggle() {
   const showGrid = useViewer((state) => state.showGrid)
   const setShowGrid = useViewer((state) => state.setShowGrid)
@@ -242,35 +393,42 @@ function GridVisibilityToggle() {
   )
 }
 
-function UnitToggle() {
-  const unit = useViewer((state) => state.unit)
-  const setUnit = useViewer((state) => state.setUnit)
+function ShadowsToggle() {
+  const shadows = useViewer((state) => state.shadows)
+  const setShadows = useViewer((state) => state.setShadows)
 
   return (
-    <ToolbarTooltip label={unit === 'metric' ? 'Metric (m)' : 'Imperial (ft)'}>
+    <ToolbarTooltip label={`Shadows: ${shadows ? 'On' : 'Off'}`}>
       <button
-        className={TOOLBAR_BTN}
-        onClick={() => setUnit(unit === 'metric' ? 'imperial' : 'metric')}
+        aria-label={`Shadows: ${shadows ? 'On' : 'Off'}`}
+        aria-pressed={shadows}
+        className={cn(
+          TOOLBAR_BTN,
+          shadows
+            ? 'bg-white/10 text-foreground/90'
+            : 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0',
+        )}
+        onClick={() => setShadows(!shadows)}
         type="button"
       >
-        <span className="font-semibold text-[10px]">{unit === 'metric' ? 'm' : 'ft'}</span>
+        <Contrast className="h-3.5 w-3.5" />
       </button>
     </ToolbarTooltip>
   )
 }
 
-function ThemeToggle() {
-  const theme = useViewer((state) => state.theme)
-  const setTheme = useViewer((state) => state.setTheme)
+function UnitToggle() {
+  const unit = useViewer((state) => state.unit)
+  const setUnit = useViewer((state) => state.setUnit)
 
   return (
-    <ToolbarTooltip label={theme === 'dark' ? 'Dark' : 'Light'}>
+    <ToolbarTooltip label={unit === 'metric' ? 'Metric (m)' : 'Imperial (ft)'}>
       <button
-        className={cn(TOOLBAR_BTN, theme === 'dark' ? 'text-indigo-400/70' : 'text-amber-400/70')}
-        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+        className={TOOLBAR_BTN}
+        onClick={() => setUnit(unit === 'metric' ? 'imperial' : 'metric')}
         type="button"
       >
-        {theme === 'dark' ? <Moon className="h-3.5 w-3.5" /> : <Sun className="h-3.5 w-3.5" />}
+        <span className="font-semibold text-[10px]">{unit === 'metric' ? 'm' : 'ft'}</span>
       </button>
     </ToolbarTooltip>
   )
@@ -349,10 +507,13 @@ export function CommunityViewerToolbarRight() {
     <div className={TOOLBAR_CONTAINER}>
       <LevelModeToggle />
       <WallModeToggle />
+      <RenderModeMenu />
+      <SceneThemeMenu />
+      <EdgesMenu />
       <GridVisibilityToggle />
+      <ShadowsToggle />
       <div className="my-1.5 w-px bg-border/50" />
       <UnitToggle />
-      <ThemeToggle />
       <CameraModeToggle />
       <div className="my-1.5 w-px bg-border/50" />
       <WalkthroughButton />
 
@@ -10,7 +10,7 @@
 
 import { type AnyNode, type LevelNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Box, Grid2x2, Layers, Layers2, Maximize, Moon, ScanLine, Square, Sun } from 'lucide-react'
+import { Box, Grid2x2, Layers, Layers2, Maximize, ScanLine, Square } from 'lucide-react'
 import { type ReactNode, useMemo } from 'react'
 
 const levelModes = ['stacked', 'solo', 'exploded', 'manual'] as const
@@ -65,8 +65,6 @@ function ToolButton({
 export function PreviewToolbar() {
   const cameraMode = useViewer((s) => s.cameraMode)
   const setCameraMode = useViewer((s) => s.setCameraMode)
-  const theme = useViewer((s) => s.theme)
-  const setTheme = useViewer((s) => s.setTheme)
   const showGrid = useViewer((s) => s.showGrid)
   const setShowGrid = useViewer((s) => s.setShowGrid)
   const levelMode = useViewer((s) => s.levelMode)
@@ -115,13 +113,6 @@ export function PreviewToolbar() {
         label="Grid"
         onClick={() => setShowGrid(!showGrid)}
       />
-
-      <ToolButton
-        active={theme === 'dark'}
-        icon={theme === 'dark' ? <Moon className="size-3.5" /> : <Sun className="size-3.5" />}
-        label={theme === 'dark' ? 'Dark' : 'Light'}
-        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      />
     </div>
   )
 }
 
@@ -6,9 +6,9 @@ import type {
   BuildingNode,
   CeilingNode,
   ChimneyNode,
-  DormerNode,
   ColumnNode,
   DoorNode,
+  DormerNode,
   ElevatorNode,
   FenceNode,
   GuideNode,
@@ -21,8 +21,8 @@ import type {
   ShelfNode,
   SiteNode,
   SkylightNode,
-  SolarPanelNode,
   SlabNode,
+  SolarPanelNode,
   SpawnNode,
   StairNode,
   StairSegmentNode,
 
@@ -70,6 +70,7 @@ export type {
   SnapServicesLike,
   SurfacePoint,
   SurfaceQuery,
+  SurfaceRole,
   SurfacesConfig,
   SystemContribution,
   ToolHint,
 
@@ -512,11 +512,21 @@ export type Plugin = {
 
 export type AnyNodeDefinition = NodeDefinition<ZodObject<any>>
 
+export type SurfaceRole =
+  | 'wall'
+  | 'floor'
+  | 'ceiling'
+  | 'roof'
+  | 'joinery'
+  | 'glazing'
+  | 'furnishing'
+
 export type NodeDefinition<S extends ZodObject<any>> = {
   kind: string
   schemaVersion: number
   schema: S
   category: NodeCategory
+  surfaceRole?: SurfaceRole
 
   defaults: () => Omit<z.infer<S>, 'id' | 'type'>
   migrate?: Record<number, (old: unknown) => unknown>