@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/editor/views/scene-region.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { isSceneView } from '../../../lib/editor-views'
+import type { ViewLayout } from '../../../store/view-layout'
+import { useActiveViewLayout } from './use-editor-views'
+
+/** Horizontal span of a pane, as fractions of the stage width. */
+export type StageSpan = { left: number; right: number }
+
+export function paneSpan(layout: ViewLayout, pane: 0 | 1): StageSpan {
+  if (!layout.split) return { left: 0, right: 1 }
+  return pane === 0 ? { left: 0, right: layout.ratio } : { left: layout.ratio, right: 1 }
+}
+
+/**
+ * The span of the panes showing the scene. 3D and 2D side by side share one
+ * level selector and one tool dock across both, as the split always has; a
+ * scene view next to another view keeps them over its own pane. `null` when no
+ * scene view is on screen.
+ */
+export function sceneSpan(layout: ViewLayout): StageSpan | null {
+  const spans = ([0, 1] as const)
+    .filter((pane) => (pane === 0 || layout.split) && isSceneView(layout.panes[pane]))
+    .map((pane) => paneSpan(layout, pane))
+  if (spans.length === 0) return null
+  return {
+    left: Math.min(...spans.map((span) => span.left)),
+    right: Math.max(...spans.map((span) => span.right)),
+  }
+}
+
+export function useSceneSpan(): StageSpan | null {
+  const layout = useActiveViewLayout()
+  return sceneSpan(layout)
+}
+
+/**
+ * Positions scene chrome (level selector, tool dock, host scene overlays) over
+ * the scene panes. `translateZ(0)` makes it the containing block of the dock's
+ * `position: fixed`, so the dock centres on the scene rather than the stage.
+ */
+export function SceneRegion({ children }: { children: ReactNode }) {
+  const span = useSceneSpan()
+  if (!span) return null
+  return (
+    <div
+      className="pointer-events-none absolute inset-y-0"
+      data-scene-region
+      style={{
+        left: `${span.left * 100}%`,
+        width: `${(span.right - span.left) * 100}%`,
+        transform: 'translateZ(0)',
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/editor/views/use-editor-views.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useSyncExternalStore } from 'react'
+import {
+  availableViews,
+  type EditorViewDescriptor,
+  editorHostViewRegistry,
+} from '../../../lib/editor-views'
+import {
+  editorHostPanelRegistry,
+  managedPluginIds,
+  showsPluginManager,
+} from '../../../lib/plugin-panels'
+import useEditor from '../../../store/use-editor'
+import { activeViewLayout, type ViewLayout } from '../../../store/view-layout'
+
+export const PLUGINS_VIEW_ID = 'plugins'
+
+const pluginsView: EditorViewDescriptor = {
+  id: PLUGINS_VIEW_ID,
+  label: 'Plugins',
+  icon: { kind: 'url', src: '/icons/plugins.webp' },
+  component: () => import('./plugins-view').then((module) => ({ default: module.PluginsView })),
+  workspaces: ['edit'],
+}
+
+/** Every view this project can show in the current workspace, the plugin directory included when it has a place. */
+export function useEditorViews(): EditorViewDescriptor[] {
+  const registered = useSyncExternalStore(
+    editorHostViewRegistry.subscribe,
+    editorHostViewRegistry.getSnapshot,
+    editorHostViewRegistry.getSnapshot,
+  )
+  const panels = useSyncExternalStore(
+    editorHostPanelRegistry.subscribe,
+    editorHostPanelRegistry.getSnapshot,
+    editorHostPanelRegistry.getSnapshot,
+  )
+  const workspaceMode = useEditor((s) => s.workspaceMode)
+  const installedPlugins = useScene((s) => s.installedPlugins)
+  const readOnly = useScene((s) => s.readOnly)
+  const withManager = showsPluginManager({
+    managedPluginCount: managedPluginIds(panels).length,
+    readOnly,
+    workspaceMode,
+  })
+  return availableViews({
+    registered: withManager ? [...registered, pluginsView] : registered,
+    workspaceMode,
+    installedPlugins,
+  })
+}
+
+export function useActiveViewLayout(): ViewLayout {
+  return useEditor(activeViewLayout)
+}

package/src/components/editor/views/view-bar.tsx

@@ -0,0 +1,220 @@
+'use client'
+
+import { ArrowLeftRight, Check, Columns2, MoreHorizontal, Pin, PinOff } from 'lucide-react'
+import { type ReactNode, useEffect } from 'react'
+import { useIsMobile } from '../../../hooks/use-mobile'
+import { type EditorViewDescriptor, isSceneView, isViewPinned } from '../../../lib/editor-views'
+import { cn } from '../../../lib/utils'
+import useEditor from '../../../store/use-editor'
+import type { ViewPaneIndex } from '../../../store/view-layout'
+import { IconRefGlyph } from '../../ui/icon-ref'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui/primitives/dropdown-menu'
+import { PLUGINS_VIEW_ID, useActiveViewLayout, useEditorViews } from './use-editor-views'
+
+const GROUP = cn(
+  'pointer-events-auto inline-flex h-8 shrink-0 items-stretch overflow-hidden rounded-[10px]',
+  'border border-border bg-background/90',
+)
+const SEGMENT =
+  'flex items-center justify-center gap-1.5 px-2.5 font-medium text-xs transition-colors'
+const ACTIVE = 'bg-white/10 text-foreground'
+const IDLE = 'text-muted-foreground/70 hover:bg-white/8 hover:text-muted-foreground'
+
+/** The views of one pane: its pinned views, the one it shows, and a menu with the rest. */
+export function ViewTabs({ pane, className }: { pane: ViewPaneIndex; className?: string }) {
+  const layout = useActiveViewLayout()
+  const views = useEditorViews()
+  const pinnedViews = useEditor((s) => s.pinnedViews)
+  const current = layout.panes[pane]
+  const tabs = views.filter((view) => view.id === current || isViewPinned(view, pinnedViews))
+
+  return (
+    <div className={cn(GROUP, className)} role="tablist">
+      {tabs.map((view) => (
+        <button
+          aria-selected={view.id === current}
+          className={cn(SEGMENT, view.id === current ? ACTIVE : IDLE)}
+          key={view.id}
+          onClick={() => useEditor.getState().setPaneView(pane, view.id)}
+          role="tab"
+          type="button"
+        >
+          <IconRefGlyph icon={view.icon} size={14} />
+          <span>{view.label}</span>
+        </button>
+      ))}
+      <MoreViewsMenu current={current} pane={pane} views={views} />
+    </div>
+  )
+}
+
+/** Split toggle and, split, the swap — at the right end of the last pane's bar. */
+function SplitControls() {
+  const split = useActiveViewLayout().split
+  return (
+    <div className={GROUP}>
+      {split && (
+        <button
+          aria-label="Swap panes"
+          className={cn(SEGMENT, IDLE, 'px-2')}
+          onClick={() => useEditor.getState().swapPanes()}
+          title="Swap panes"
+          type="button"
+        >
+          <ArrowLeftRight className="h-3 w-3" />
+        </button>
+      )}
+      <button
+        aria-pressed={split}
+        className={cn(SEGMENT, split ? ACTIVE : IDLE)}
+        onClick={() => useEditor.getState().toggleSplit()}
+        title={split ? 'Close split (\\)' : 'Split (\\)'}
+        type="button"
+      >
+        <Columns2 className="h-3 w-3" />
+        <span>Split</span>
+      </button>
+    </div>
+  )
+}
+
+/**
+ * The bar row above the stage: one bar per pane, aligned with it — the pane's
+ * views on the left (the first pane followed by the host's `leading` content),
+ * the split controls at the right end of the last pane.
+ */
+export function ViewBarRow({ leading }: { leading?: ReactNode }) {
+  const layout = useActiveViewLayout()
+  const isMobile = useIsMobile()
+  useSplitShortcut(!isMobile)
+  const panes = layout.split ? ([0, 1] as const) : ([0] as const)
+  return (
+    <div className="relative h-12 shrink-0">
+      {panes.map((pane) => {
+        const left = pane === 0 ? 0 : layout.ratio
+        const right = pane === 0 && layout.split ? layout.ratio : 1
+        const isLast = pane === panes.length - 1
+        return (
+          <div
+            className="absolute inset-y-0 flex min-w-0 items-center gap-2 px-3"
+            data-view-bar={pane}
+            key={pane}
+            style={{ left: `${left * 100}%`, width: `${(right - left) * 100}%` }}
+          >
+            <ViewTabs pane={pane} />
+            {pane === 0 && leading}
+            <span className="flex-1" />
+            {isLast && !isMobile && <SplitControls />}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * `\` opens or closes the split. Bound here rather than in `useKeyboard`, which
+ * stands down outside the edit workspace: the split works in every workspace.
+ */
+export function useSplitShortcut(enabled: boolean) {
+  useEffect(() => {
+    if (!enabled) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== '\\' || event.metaKey || event.ctrlKey || event.altKey) return
+      const target = event.target
+      if (
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        (target instanceof HTMLElement && target.isContentEditable)
+      ) {
+        return
+      }
+      event.preventDefault()
+      useEditor.getState().toggleSplit()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [enabled])
+}
+
+function MoreViewsMenu({
+  pane,
+  current,
+  views,
+}: {
+  pane: ViewPaneIndex
+  current: string
+  views: EditorViewDescriptor[]
+}) {
+  const pinnedViews = useEditor((s) => s.pinnedViews)
+  const setPaneView = useEditor((s) => s.setPaneView)
+  const setViewPinned = useEditor((s) => s.setViewPinned)
+  const listed = views.filter((view) => view.id !== PLUGINS_VIEW_ID)
+  const canBrowse = views.some((view) => view.id === PLUGINS_VIEW_ID)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button aria-label="More views" className={cn(SEGMENT, IDLE, 'px-2')} type="button">
+          <MoreHorizontal className="h-3.5 w-3.5" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64">
+        <DropdownMenuLabel className="text-muted-foreground text-xs">Views</DropdownMenuLabel>
+        {listed.map((view) => {
+          const pinned = isViewPinned(view, pinnedViews)
+          return (
+            <DropdownMenuItem
+              className="gap-2.5"
+              key={view.id}
+              onSelect={() => setPaneView(pane, view.id)}
+            >
+              <IconRefGlyph icon={view.icon} size={16} />
+              <span className="min-w-0 flex-1 truncate">{view.label}</span>
+              {view.id === current && <Check className="h-3.5 w-3.5 text-muted-foreground" />}
+              {!isSceneView(view.id) && (
+                <button
+                  aria-label={pinned ? `Unpin ${view.label}` : `Pin ${view.label}`}
+                  aria-pressed={pinned}
+                  className={cn(
+                    'flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-white/10',
+                    pinned ? 'text-foreground' : 'text-muted-foreground/60',
+                  )}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    setViewPinned(view.id, !pinned)
+                  }}
+                  onPointerDown={(event) => event.stopPropagation()}
+                  title={pinned ? 'Unpin from the view bar' : 'Pin to the view bar'}
+                  type="button"
+                >
+                  {pinned ? <PinOff className="h-3.5 w-3.5" /> : <Pin className="h-3.5 w-3.5" />}
+                </button>
+              )}
+            </DropdownMenuItem>
+          )
+        })}
+        {canBrowse && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="gap-2.5"
+              onSelect={() => setPaneView(pane, PLUGINS_VIEW_ID)}
+            >
+              <img alt="" className="h-4 w-4 object-contain" src="/icons/plugins.webp" />
+              <span>Browse plugins</span>
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/editor/wall-justification.test.ts

@@ -0,0 +1,140 @@
+import { afterEach, expect, test } from 'bun:test'
+import {
+  getWallBodyLine,
+  ItemNode,
+  LevelNode,
+  useScene,
+  type WallEvent,
+  WallNode,
+} from '@pascal-app/core'
+import { Mesh, Vector3 } from 'three'
+import { wallPushHandles } from '../../lib/room-handle-drag'
+import { duplicateNodesToLevel } from '../../lib/scene-clipboard'
+import { wallStrategy } from '../tools/item/placement-strategies'
+import type { PlacementContext, SpatialValidators } from '../tools/item/placement-types'
+import {
+  collectParticipants,
+  rotateGroupPatches,
+  rotateGroupSnapshots,
+  translateGroupPatches,
+} from './group-transform-shared'
+
+globalThis.requestAnimationFrame ??= () => 0
+globalThis.cancelAnimationFrame ??= () => {}
+const original = useScene.getState()
+afterEach(() => useScene.setState(original))
+const wall = () =>
+  WallNode.parse({ start: [0, 0], end: [4, 0], thickness: 0.2, justification: 'a' })
+
+test('3D side handles follow the actual faces of a justified wall', () => {
+  const w = wall()
+  const handles = wallPushHandles(w, {})
+  expect(handles[0]!.position[1]).toBeCloseTo(0.47)
+  expect(handles[1]!.position[1]).toBeCloseTo(-0.33)
+  const opposite = wallPushHandles({ ...w, justification: 'b' }, {})
+  expect(opposite[0]!.position[1]).toBeCloseTo(0.33)
+  expect(opposite[1]!.position[1]).toBeCloseTo(-0.47)
+})
+
+test('group rotation and translation preserve wall orientation and carry the body rigidly', () => {
+  const w = wall()
+  const starts = [{ id: w.id, kind: 'endpoint' as const, start: w.start, end: w.end }]
+  const rotated = {
+    ...w,
+    ...rotateGroupPatches(starts, [], { x: 0, z: 0 }, Math.PI)[0]![1],
+  } as WallNode
+  expect(rotated.justification).toBe('a')
+  expect(getWallBodyLine(rotated).start.y).toBeCloseTo(-0.1)
+  expect(getWallBodyLine(rotated).end.x).toBeCloseTo(-4)
+  const moved = { ...w, ...translateGroupPatches(starts, [], 2, 3)[0]![1] } as WallNode
+  expect(getWallBodyLine(moved)).toEqual({ start: { x: 2, y: 3.1 }, end: { x: 6, y: 3.1 } })
+})
+
+test('clipboard duplicate preserves justification and endpoint order', () => {
+  const level = LevelNode.parse({})
+  const w = { ...wall(), parentId: level.id }
+  useScene.setState({
+    nodes: { [level.id]: { ...level, children: [w.id] }, [w.id]: w },
+    rootNodeIds: [level.id],
+  })
+  const result = duplicateNodesToLevel([w.id], level.id)!
+  const duplicate = useScene.getState().nodes[result.pastedIds[0]!] as WallNode
+  expect(duplicate.justification).toBe('a')
+  expect(getWallBodyLine(duplicate)).toEqual(getWallBodyLine(w))
+})
+
+for (const attachTo of ['wall', 'wall-side'] as const)
+  for (const side of ['front', 'back'] as const)
+    test(`placement cursor follows ${attachTo} ${side} offset`, () => {
+      const w = wall()
+      const asset = {
+        id: 'test',
+        name: 'test',
+        category: 'test',
+        thumbnail: '/test.png',
+        src: '/test.glb',
+        dimensions: [0.5, 0.5, 0.2] as [number, number, number],
+        attachTo,
+      }
+      const item = ItemNode.parse({ asset, parentId: w.id })
+      const object = new Mesh()
+      const ctx: PlacementContext = {
+        asset,
+        draftItem: item,
+        levelId: 'level_test',
+        gridPosition: new Vector3(),
+        currentCursorRotationY: 0,
+        state: {
+          surface: 'wall',
+          wallId: w.id,
+          roofSegmentId: null,
+          ceilingId: null,
+          surfaceItemId: null,
+          shelfId: null,
+        },
+      }
+      const event = {
+        node: w,
+        object,
+        localPosition: [2, 1, 0],
+        normal: [0, 0, side === 'front' ? 1 : -1],
+      } as unknown as WallEvent
+      const validators = { canPlaceOnWall: () => ({ valid: true }) } as unknown as SpatialValidators
+      const result = wallStrategy.move(ctx, event, validators)!
+      const expected = attachTo === 'wall' ? 0.1 : side === 'front' ? 0.2 : 0
+      expect(result.cursorPosition[2]).toBeCloseTo(expected)
+      expect(result.gridPosition[2]).toBeCloseTo(attachTo === 'wall' ? 0 : expected)
+      object.geometry.dispose()
+    })
+
+test('group linked endpoint crossing and snapshot reseeding keep stored orientation', () => {
+  const level = LevelNode.parse({})
+  const selected = { ...wall(), parentId: level.id }
+  const linked = WallNode.parse({
+    parentId: level.id,
+    start: [4, 0],
+    end: [6, 0],
+    thickness: 0.2,
+    justification: 'a',
+  })
+  const { starts, links } = collectParticipants(
+    [selected.id],
+    { [selected.id]: selected, [linked.id]: linked },
+    level.id,
+  )
+  const moved = {
+    ...linked,
+    ...translateGroupPatches(starts, links, 4, 0).find(([id]) => id === linked.id)![1],
+  } as WallNode
+  expect(moved.justification).toBe('a')
+  expect(getWallBodyLine(moved).start.y).toBeCloseTo(-0.1)
+  const rotated = rotateGroupSnapshots(starts, links, { x: 6, z: 0 }, Math.PI)
+  const reseeded = {
+    ...linked,
+    ...translateGroupPatches(rotated.starts, rotated.links, 0, 0).find(
+      ([id]) => id === linked.id,
+    )![1],
+  } as WallNode
+  expect(reseeded.justification).toBe('a')
+  expect(getWallBodyLine(reseeded).start.y).toBeCloseTo(-0.1)
+})