@pascal-app/editor 0.4.0

package/src/lib/scene.ts

@@ -0,0 +1,394 @@
+'use client'
+
+import { resolveLevelId, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useEditor, {
+  hasCustomPersistedEditorUiState,
+  normalizePersistedEditorUiState,
+  type PersistedEditorUiState,
+} from '../store/use-editor'
+
+export type SceneGraph = {
+  nodes: Record<string, unknown>
+  rootNodeIds: string[]
+}
+
+type PersistedSelectionPath = {
+  buildingId: string | null
+  levelId: string | null
+  zoneId: string | null
+  selectedIds: string[]
+}
+
+const EMPTY_PERSISTED_SELECTION: PersistedSelectionPath = {
+  buildingId: null,
+  levelId: null,
+  zoneId: null,
+  selectedIds: [],
+}
+
+const SELECTION_STORAGE_KEY = 'pascal-editor-selection'
+
+function getSelectionStorageKey(): string {
+  const projectId = useViewer.getState().projectId
+  return projectId ? `${SELECTION_STORAGE_KEY}:${projectId}` : SELECTION_STORAGE_KEY
+}
+
+function getSelectionStorageReadKeys(): string[] {
+  const scopedKey = getSelectionStorageKey()
+  return scopedKey === SELECTION_STORAGE_KEY ? [scopedKey] : [scopedKey, SELECTION_STORAGE_KEY]
+}
+
+function getDefaultLevelIdForBuilding(
+  sceneNodes: Record<string, any>,
+  buildingId: string | null,
+): string | null {
+  if (!buildingId) {
+    return null
+  }
+
+  const buildingNode = sceneNodes[buildingId]
+  if (buildingNode?.type !== 'building' || !Array.isArray(buildingNode.children)) {
+    return null
+  }
+
+  let firstLevelId: string | null = null
+
+  for (const childId of buildingNode.children) {
+    const levelNode = sceneNodes[childId]
+    if (levelNode?.type !== 'level') {
+      continue
+    }
+
+    firstLevelId ??= levelNode.id
+
+    if (levelNode.level === 0) {
+      return levelNode.id
+    }
+  }
+
+  return firstLevelId
+}
+
+function normalizePersistedSelectionPath(
+  selection: Partial<PersistedSelectionPath> | null | undefined,
+): PersistedSelectionPath {
+  return {
+    buildingId: typeof selection?.buildingId === 'string' ? selection.buildingId : null,
+    levelId: typeof selection?.levelId === 'string' ? selection.levelId : null,
+    zoneId: typeof selection?.zoneId === 'string' ? selection.zoneId : null,
+    selectedIds: Array.isArray(selection?.selectedIds)
+      ? selection.selectedIds.filter((id): id is string => typeof id === 'string')
+      : [],
+  }
+}
+
+function hasPersistedSelectionValue(selection: PersistedSelectionPath): boolean {
+  return Boolean(
+    selection.buildingId ||
+      selection.levelId ||
+      selection.zoneId ||
+      selection.selectedIds.length > 0,
+  )
+}
+
+function readPersistedSelection(): PersistedSelectionPath | null {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  try {
+    for (const key of getSelectionStorageReadKeys()) {
+      const rawSelection = window.localStorage.getItem(key)
+      if (!rawSelection) {
+        continue
+      }
+
+      return normalizePersistedSelectionPath(
+        JSON.parse(rawSelection) as Partial<PersistedSelectionPath>,
+      )
+    }
+  } catch {
+    return null
+  }
+
+  return null
+}
+
+export function writePersistedSelection(selection: {
+  buildingId: string | null
+  levelId: string | null
+  zoneId: string | null
+  selectedIds: string[]
+}) {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  try {
+    const sceneNodes = useScene.getState().nodes as Record<string, any>
+    const normalizedSelection = normalizePersistedSelectionPath(selection)
+    const validatedSelection =
+      getValidatedSelectionForScene(sceneNodes, normalizedSelection) ?? normalizedSelection
+
+    window.localStorage.setItem(getSelectionStorageKey(), JSON.stringify(validatedSelection))
+  } catch {
+    // Swallow storage quota errors
+  }
+}
+
+function getEditorUiStateForRestoredSelection(
+  sceneNodes: Record<string, any>,
+  selection: PersistedSelectionPath,
+  fallbackUiState: PersistedEditorUiState,
+): PersistedEditorUiState {
+  if (!selection.levelId) {
+    return {
+      ...fallbackUiState,
+      phase: 'site',
+      mode: fallbackUiState.phase === 'site' ? fallbackUiState.mode : 'select',
+      tool: null,
+      structureLayer: 'elements',
+      catalogCategory: null,
+    }
+  }
+
+  if (selection.zoneId) {
+    return {
+      ...fallbackUiState,
+      phase: 'structure',
+      mode: 'select',
+      tool: null,
+      structureLayer: 'zones',
+      catalogCategory: null,
+    }
+  }
+
+  const selectedNodes = selection.selectedIds
+    .map((id) => sceneNodes[id])
+    .filter((node): node is Record<string, any> => Boolean(node))
+
+  const shouldRestoreFurnishPhase =
+    selectedNodes.length > 0 &&
+    selectedNodes.every(
+      (node) =>
+        node.type === 'item' &&
+        node.asset?.category !== 'door' &&
+        node.asset?.category !== 'window',
+    )
+
+  return {
+    ...fallbackUiState,
+    phase: shouldRestoreFurnishPhase ? 'furnish' : 'structure',
+    mode: 'select',
+    tool: null,
+    structureLayer: 'elements',
+    catalogCategory: null,
+  }
+}
+
+function getValidatedSelectionForScene(
+  sceneNodes: Record<string, any>,
+  selection: PersistedSelectionPath,
+): PersistedSelectionPath | null {
+  const levelNode = selection.levelId ? sceneNodes[selection.levelId] : null
+  const hasValidLevel = levelNode?.type === 'level'
+  const buildingNodeFromLevel =
+    hasValidLevel && levelNode.parentId ? sceneNodes[levelNode.parentId] : null
+  const explicitBuildingNode = selection.buildingId ? sceneNodes[selection.buildingId] : null
+  const buildingId =
+    buildingNodeFromLevel?.type === 'building'
+      ? buildingNodeFromLevel.id
+      : explicitBuildingNode?.type === 'building'
+        ? explicitBuildingNode.id
+        : null
+
+  if (!buildingId) {
+    return null
+  }
+
+  const levelId = hasValidLevel
+    ? levelNode.id
+    : getDefaultLevelIdForBuilding(sceneNodes, buildingId)
+
+  if (levelId) {
+    const zoneNode = selection.zoneId ? sceneNodes[selection.zoneId] : null
+    const zoneId =
+      zoneNode?.type === 'zone' && resolveLevelId(zoneNode, sceneNodes) === levelId
+        ? zoneNode.id
+        : null
+
+    const selectedIds = selection.selectedIds.filter((id) => {
+      const node = sceneNodes[id]
+      return Boolean(node) && resolveLevelId(node, sceneNodes) === levelId
+    })
+
+    return {
+      buildingId,
+      levelId,
+      zoneId,
+      selectedIds,
+    }
+  }
+
+  return {
+    ...EMPTY_PERSISTED_SELECTION,
+    buildingId,
+  }
+}
+
+function getRestoredSelectionForScene(
+  sceneNodes: Record<string, any>,
+): PersistedSelectionPath | null {
+  const persistedSelection = readPersistedSelection()
+  if (!(persistedSelection && hasPersistedSelectionValue(persistedSelection))) {
+    return null
+  }
+
+  return getValidatedSelectionForScene(sceneNodes, persistedSelection)
+}
+
+export function syncEditorSelectionFromCurrentScene() {
+  const sceneNodes = useScene.getState().nodes as Record<string, any>
+  const sceneRootIds = useScene.getState().rootNodeIds
+  const siteNode = sceneRootIds[0] ? sceneNodes[sceneRootIds[0]] : null
+  const resolve = (child: any) => (typeof child === 'string' ? sceneNodes[child] : child)
+  const firstBuilding = siteNode?.children?.map(resolve).find((n: any) => n?.type === 'building')
+  const firstLevel = firstBuilding?.children?.map(resolve).find((n: any) => n?.type === 'level')
+  const restoredEditorUiState = normalizePersistedEditorUiState(useEditor.getState())
+  const shouldRestoreEditorUiState = hasCustomPersistedEditorUiState(restoredEditorUiState)
+  const restoredSelection = getRestoredSelectionForScene(sceneNodes)
+  const selectionDrivenEditorUiState = restoredSelection
+    ? getEditorUiStateForRestoredSelection(sceneNodes, restoredSelection, restoredEditorUiState)
+    : null
+
+  if (firstBuilding && firstLevel) {
+    const isEmptyLevel = !firstLevel.children || firstLevel.children.length === 0
+
+    // For empty projects (new/blank), always start in structure/build/wall
+    // regardless of persisted state from a previous project
+    if (isEmptyLevel) {
+      useViewer.getState().setSelection({
+        buildingId: firstBuilding.id,
+        levelId: firstLevel.id,
+        selectedIds: [],
+        zoneId: null,
+      })
+      useEditor.getState().setPhase('structure')
+      useEditor.getState().setStructureLayer('elements')
+      useEditor.getState().setMode('build')
+      useEditor.getState().setTool('wall')
+      return
+    }
+
+    if (shouldRestoreEditorUiState) {
+      if (restoredSelection) {
+        useViewer.getState().setSelection(restoredSelection)
+        useEditor.setState(
+          restoredEditorUiState.phase === 'site'
+            ? (selectionDrivenEditorUiState ?? restoredEditorUiState)
+            : restoredEditorUiState,
+        )
+      } else if (restoredEditorUiState.phase === 'site') {
+        useViewer.getState().resetSelection()
+        useEditor.setState(restoredEditorUiState)
+      } else {
+        useViewer.getState().setSelection({
+          buildingId: firstBuilding.id,
+          levelId: firstLevel.id,
+          selectedIds: [],
+          zoneId: null,
+        })
+        useEditor.setState(restoredEditorUiState)
+      }
+      return
+    }
+
+    if (restoredSelection) {
+      useViewer.getState().setSelection(restoredSelection)
+      if (selectionDrivenEditorUiState) {
+        useEditor.setState(selectionDrivenEditorUiState)
+      }
+      return
+    }
+
+    useViewer.getState().setSelection({
+      buildingId: firstBuilding.id,
+      levelId: firstLevel.id,
+      selectedIds: [],
+      zoneId: null,
+    })
+    useEditor.getState().setPhase('structure')
+    useEditor.getState().setStructureLayer('elements')
+  } else {
+    useEditor.getState().setPhase('site')
+    useViewer.getState().setSelection({
+      buildingId: null,
+      levelId: null,
+      selectedIds: [],
+      zoneId: null,
+    })
+  }
+}
+
+function resetEditorInteractionState() {
+  useViewer.getState().setHoveredId(null)
+  useViewer.getState().resetSelection()
+  // Clear outliner arrays synchronously so stale Object3D refs from the old
+  // scene don't leak into the post-processing pipeline's outline passes.
+  const outliner = useViewer.getState().outliner
+  outliner.selectedObjects.length = 0
+  outliner.hoveredObjects.length = 0
+  sceneRegistry.clear()
+  useEditor.setState({
+    phase: 'site',
+    mode: 'select',
+    tool: null,
+    structureLayer: 'elements',
+    catalogCategory: null,
+    selectedItem: null,
+    movingNode: null,
+    selectedReferenceId: null,
+    spaces: {},
+    editingHole: null,
+    isPreviewMode: false,
+  })
+}
+
+function hasUsableSceneGraph(sceneGraph?: SceneGraph | null): sceneGraph is SceneGraph {
+  return (
+    !!sceneGraph &&
+    Object.keys(sceneGraph.nodes ?? {}).length > 0 &&
+    (sceneGraph.rootNodeIds?.length ?? 0) > 0
+  )
+}
+
+export function applySceneGraphToEditor(sceneGraph?: SceneGraph | null) {
+  if (hasUsableSceneGraph(sceneGraph)) {
+    const { nodes, rootNodeIds } = sceneGraph
+    useScene.getState().setScene(nodes as any, rootNodeIds as any)
+  } else {
+    useScene.getState().clearScene()
+  }
+
+  syncEditorSelectionFromCurrentScene()
+}
+
+const LOCAL_STORAGE_KEY = 'pascal-editor-scene'
+
+export function saveSceneToLocalStorage(scene: SceneGraph): void {
+  try {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(scene))
+  } catch {
+    // Swallow storage quota errors
+  }
+}
+
+export function loadSceneFromLocalStorage(): SceneGraph | null {
+  try {
+    const raw = localStorage.getItem(LOCAL_STORAGE_KEY)
+    return raw ? (JSON.parse(raw) as SceneGraph) : null
+  } catch {
+    return null
+  }
+}

package/src/lib/sfx/index.ts

@@ -0,0 +1,2 @@
+export { initSFXBus, sfxEmitter, triggerSFX } from '../sfx-bus'
+export { playSFX, SFX, type SFXName, updateSFXVolumes } from '../sfx-player'

package/src/lib/sfx-bus.ts

@@ -0,0 +1,49 @@
+import mitt from 'mitt'
+import { playSFX } from './sfx-player'
+
+/**
+ * SFX-specific events that tools can trigger
+ */
+type SFXEvents = {
+  'sfx:grid-snap': undefined
+  'sfx:item-delete': undefined
+  'sfx:item-pick': undefined
+  'sfx:item-place': undefined
+  'sfx:item-rotate': undefined
+  'sfx:structure-build': undefined
+  'sfx:structure-delete': undefined
+}
+
+/**
+ * Dedicated event emitter for SFX
+ * Tools should use this to trigger sound effects
+ */
+export const sfxEmitter = mitt<SFXEvents>()
+
+let sfxBusInitialized = false
+
+/**
+ * Initialize SFX Bus - connects SFX events to actual sound playback.
+ * Safe to call multiple times; re-registration is a no-op once initialized.
+ */
+export function initSFXBus() {
+  if (sfxBusInitialized) return
+  sfxBusInitialized = true
+  // Map SFX events to sound playback
+  sfxEmitter.on('sfx:grid-snap', () => playSFX('gridSnap'))
+  sfxEmitter.on('sfx:item-delete', () => playSFX('itemDelete'))
+  sfxEmitter.on('sfx:item-pick', () => playSFX('itemPick'))
+  sfxEmitter.on('sfx:item-place', () => playSFX('itemPlace'))
+  sfxEmitter.on('sfx:item-rotate', () => playSFX('itemRotate'))
+  sfxEmitter.on('sfx:structure-build', () => playSFX('structureBuild'))
+  sfxEmitter.on('sfx:structure-delete', () => playSFX('structureDelete'))
+}
+
+/**
+ * Helper function to trigger SFX events from tools
+ * @example
+ * triggerSFX('sfx:item-place')
+ */
+export function triggerSFX(event: keyof SFXEvents) {
+  sfxEmitter.emit(event)
+}

package/src/lib/sfx-player.ts

@@ -0,0 +1,60 @@
+import { Howl } from 'howler'
+import useAudio from '../store/use-audio'
+
+// SFX sound definitions
+export const SFX = {
+  gridSnap: '/audios/sfx/grid_snap.mp3',
+  itemDelete: '/audios/sfx/item_delete.mp3',
+  itemPick: '/audios/sfx/item_pick.mp3',
+  itemPlace: '/audios/sfx/item_place.mp3',
+  itemRotate: '/audios/sfx/item_rotate.mp3',
+  structureBuild: '/audios/sfx/structure_build.mp3',
+  structureDelete: '/audios/sfx/structure_delete.mp3',
+} as const
+
+export type SFXName = keyof typeof SFX
+
+// Preload all SFX sounds
+const sfxCache = new Map<SFXName, Howl>()
+
+// Initialize all sounds
+Object.entries(SFX).forEach(([name, path]) => {
+  const sound = new Howl({
+    src: [path],
+    preload: true,
+    volume: 0.5, // Will be adjusted by the bus
+  })
+  sfxCache.set(name as SFXName, sound)
+})
+
+/**
+ * Play a sound effect with volume based on audio settings
+ */
+export function playSFX(name: SFXName) {
+  const sound = sfxCache.get(name)
+  if (!sound) {
+    console.warn(`SFX not found: ${name}`)
+    return
+  }
+
+  const { masterVolume, sfxVolume, muted } = useAudio.getState()
+
+  if (muted) return
+
+  // Calculate final volume (masterVolume and sfxVolume are 0-100)
+  const finalVolume = (masterVolume / 100) * (sfxVolume / 100)
+  sound.volume(finalVolume)
+  sound.play()
+}
+
+/**
+ * Update all cached SFX volumes (useful when settings change)
+ */
+export function updateSFXVolumes() {
+  const { masterVolume, sfxVolume } = useAudio.getState()
+  const finalVolume = (masterVolume / 100) * (sfxVolume / 100)
+
+  sfxCache.forEach((sound) => {
+    sound.volume(finalVolume)
+  })
+}

package/src/lib/utils.ts

@@ -0,0 +1,43 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export const isDevelopment =
+  process.env.NODE_ENV === 'development' || process.env.NEXT_PUBLIC_VERCEL_ENV === 'development'
+
+export const isProduction =
+  process.env.NODE_ENV === 'production' || process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
+
+export const isPreview = process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
+
+/**
+ * Base URL for the application
+ * Uses NEXT_PUBLIC_* variables which are available at build time
+ */
+export const BASE_URL = (() => {
+  // Development: localhost
+  if (isDevelopment) {
+    return process.env.NEXT_PUBLIC_APP_URL || `http://localhost:${process.env.PORT || 3000}`
+  }
+
+  // Preview deployments: use Vercel branch URL
+  if (isPreview && process.env.NEXT_PUBLIC_VERCEL_URL) {
+    return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  }
+
+  // Production: use custom domain or Vercel production URL
+  if (isProduction) {
+    return (
+      process.env.NEXT_PUBLIC_APP_URL ||
+      (process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL
+        ? `https://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`
+        : 'https://editor.pascal.app')
+    )
+  }
+
+  // Fallback (should never reach here in normal operation)
+  return process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'
+})()

package/src/store/use-audio.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface AudioState {
+  masterVolume: number
+  sfxVolume: number
+  radioVolume: number
+  isRadioPlaying: boolean
+  muted: boolean
+  autoplay: boolean
+  setMasterVolume: (v: number) => void
+  setSfxVolume: (v: number) => void
+  setRadioVolume: (v: number) => void
+  setRadioPlaying: (v: boolean) => void
+  toggleRadioPlaying: () => void
+  toggleMute: () => void
+  setAutoplay: (v: boolean) => void
+}
+
+const useAudio = create<AudioState>()(
+  persist(
+    (set) => ({
+      masterVolume: 70,
+      sfxVolume: 50,
+      radioVolume: 25,
+      isRadioPlaying: false,
+      muted: false,
+      autoplay: true,
+      setMasterVolume: (v) => set({ masterVolume: v }),
+      setSfxVolume: (v) => set({ sfxVolume: v }),
+      setRadioVolume: (v) => set({ radioVolume: v }),
+      setRadioPlaying: (v) => set({ isRadioPlaying: v }),
+      toggleRadioPlaying: () => set((state) => ({ isRadioPlaying: !state.isRadioPlaying })),
+      toggleMute: () => set((state) => ({ muted: !state.muted })),
+      setAutoplay: (v) => set({ autoplay: v }),
+    }),
+    {
+      name: 'pascal-audio-settings',
+    },
+  ),
+)
+
+export default useAudio

package/src/store/use-command-registry.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+import { create } from 'zustand'
+
+export type CommandAction = {
+  id: string
+  /** Static string or a function evaluated at render time (for reactive labels). */
+  label: string | (() => string)
+  group: string
+  icon?: ReactNode
+  keywords?: string[]
+  shortcut?: string[]
+  /** Static string or a function evaluated at render time (for reactive badges). */
+  badge?: string | (() => string)
+  /** Show a chevron to indicate this action navigates to a sub-page. */
+  navigate?: boolean
+  /** Called at render time — returning false disables the item. */
+  when?: () => boolean
+  execute: () => void
+}
+
+interface CommandRegistryStore {
+  actions: CommandAction[]
+  /** Register actions and return an unsubscribe function. */
+  register: (actions: CommandAction[]) => () => void
+}
+
+export const useCommandRegistry = create<CommandRegistryStore>((set) => ({
+  actions: [],
+  register: (newActions) => {
+    const ids = newActions.map((a) => a.id)
+    set((s) => ({
+      actions: [...s.actions.filter((a) => !ids.includes(a.id)), ...newActions],
+    }))
+    return () => set((s) => ({ actions: s.actions.filter((a) => !ids.includes(a.id)) }))
+  },
+}))