@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/ui/panels/shape-choice.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { Pentagon, Square } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+
+export type OutlineShape = 'rectangle' | 'polygon'
+
+const SHAPES = [
+  { id: 'rectangle', label: 'Rectangle', Icon: Square },
+  { id: 'polygon', label: 'Polygon', Icon: Pentagon },
+] as const
+
+const pill =
+  'inline-flex items-center gap-1 rounded-full border border-border/50 px-2 py-0.5 text-xs text-foreground transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-50'
+
+/**
+ * The outline shape, picked before drawing starts — the same two choices the
+ * Build panel's room tiles offer, so a cut or a mezzanine is started the way a
+ * room is.
+ */
+export function ShapeChoice({
+  label,
+  onPick,
+  disabled,
+  className,
+  data,
+}: {
+  label: string
+  onPick: (shape: OutlineShape) => void
+  disabled?: boolean
+  className?: string
+  /** `data-shape-choice` hook for tests and proofs. */
+  data?: string
+}) {
+  return (
+    <div
+      className={cn('flex min-h-7 items-center justify-between gap-2', className)}
+      data-shape-choice={data}
+    >
+      <span className="whitespace-nowrap">{label}</span>
+      <div className="flex items-center gap-1.5">
+        {SHAPES.map(({ id, label: shapeLabel, Icon }) => (
+          <button
+            className={pill}
+            data-shape={id}
+            disabled={disabled}
+            key={id}
+            onClick={() => onPick(id)}
+            type="button"
+          >
+            <Icon aria-hidden className="h-3 w-3" />
+            {shapeLabel}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/panels/wall-region-list.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  useLiveNodeOverrides,
+  useScene,
+  type WallFaceRegion,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Trash2 } from 'lucide-react'
+import { useMemo } from 'react'
+import { removeWallRegion } from '../../../lib/paint-regions'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import { cn } from '../../../lib/utils'
+import {
+  wallRegionCapNotice,
+  wallRegionFaceLabels,
+  wallRegionRows,
+} from '../../../lib/wall-region-list'
+import { useWallRegionSelection } from '../../../store/use-wall-region-handles-selection'
+import { PanelSection } from '../controls/panel-section'
+
+const ROW_ACTION_CLASS =
+  'flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10'
+
+/** The wall panel's "Paint regions" section: one row per region, select or delete. */
+export function WallPaintRegionList({ wallId }: { wallId: string }) {
+  const nodes = useScene((state) => state.nodes)
+  const materials = useScene((state) => state.materials)
+  const unit = useViewer((state) => state.unit)
+  const active = useWallRegionSelection((state) => state.active)
+  const setActive = useWallRegionSelection((state) => state.setActive)
+  // A handle drag previews through a live override; list the live bounds.
+  const liveRegions = useLiveNodeOverrides(
+    (state) =>
+      state.overrides.get(wallId as AnyNodeId)?.faceRegions as WallFaceRegion[] | undefined,
+  )
+  const sceneWall = nodes[wallId as AnyNodeId]
+  const wall = sceneWall?.type === 'wall' ? sceneWall : null
+  const faceLabels = useMemo(() => wallRegionFaceLabels(nodes, wallId), [nodes, wallId])
+
+  if (!wall) return null
+  const faceRegions = liveRegions ?? wall.faceRegions
+  if (!faceRegions?.length) return null
+  const rows = wallRegionRows({ faceRegions }, faceLabels, materials, unit)
+  const capNotice = wallRegionCapNotice({ faceRegions }, faceLabels)
+
+  return (
+    // Focus inside this list still lets Delete target the active region.
+    <div className="contents" data-wall-region-list={wallId}>
+      <PanelSection title="Paint regions">
+        <div className="flex flex-col gap-1">
+          {rows.map((row) => {
+            const isActive = active?.wallId === wallId && active.regionId === row.id
+            return (
+              <div
+                className={cn(
+                  'flex h-9 items-center gap-2 rounded-md px-1 transition-colors',
+                  isActive ? 'bg-accent' : 'hover:bg-accent/50',
+                )}
+                data-wall-region-row={row.id}
+                key={row.id}
+              >
+                <button
+                  aria-pressed={isActive}
+                  className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left"
+                  onClick={() => setActive({ wallId, regionId: row.id })}
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="h-4 w-4 shrink-0 rounded-sm border border-border/50 bg-center bg-cover"
+                    style={{
+                      backgroundColor: row.finish.color,
+                      backgroundImage: row.finish.imageUrl
+                        ? `url(${row.finish.imageUrl})`
+                        : undefined,
+                    }}
+                  />
+                  <span className="flex min-w-0 flex-col leading-tight">
+                    <span className="truncate text-sm">{row.finish.name}</span>
+                    <span className="truncate text-[11px] text-muted-foreground">
+                      {row.faceLabel} · {row.boundsText}
+                    </span>
+                  </span>
+                </button>
+                <button
+                  aria-label="Delete region"
+                  className={ROW_ACTION_CLASS}
+                  onClick={() => {
+                    if (isActive) setActive(null)
+                    if (removeWallRegion(wallId, row.id)) sfxEmitter.emit('sfx:structure-delete')
+                  }}
+                  title="Delete region"
+                  type="button"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </button>
+              </div>
+            )
+          })}
+          {capNotice && (
+            <div className="px-1 text-[11px] text-muted-foreground">{capNotice}</div>
+          )}
+        </div>
+      </PanelSection>
+    </div>
+  )
+}

package/src/components/ui/primitives/color-dot.tsx

@@ -1,43 +1,55 @@
 'use client'
 
+import { ZONE_COLOR_PALETTE } from '@pascal-app/core'
 import { useState } from 'react'
 import { cn } from '../../../lib/utils'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 
-export const PALETTE_COLORS = [
-  '#ef4444', // Red        0°
-  '#f97316', // Orange    30°
-  '#f59e0b', // Amber     45°
-  '#84cc16', // Lime      85°
-  '#22c55e', // Green    142°
-  '#10b981', // Emerald  160°
-  '#06b6d4', // Cyan     190°
-  '#3b82f6', // Blue     217°
-  '#6366f1', // Indigo   239°
-  '#a855f7', // Violet   270°
-  '#64748b', // Dark gray
-  '#cccccc', // Light gray
-]
+export const PALETTE_COLORS = ZONE_COLOR_PALETTE
 
 interface ColorDotProps {
   color: string
   onChange: (color: string) => void
+  /** Says what the colour is for, on hover and to assistive tech. */
+  label?: string
+  side?: 'left' | 'bottom'
 }
 
-export function ColorDot({ color, onChange }: ColorDotProps) {
+export function ColorDot({ color, onChange, label, side = 'left' }: ColorDotProps) {
   const [open, setOpen] = useState(false)
+  const trigger = (
+    <PopoverTrigger asChild>
+      <button
+        aria-label={label}
+        className="relative h-3 w-3 shrink-0 cursor-pointer rounded-sm border border-border/50 transition-all hover:ring-1 hover:ring-ring/50"
+        data-color-dot
+        onClick={(e) => e.stopPropagation()}
+        style={{ backgroundColor: color }}
+        type="button"
+      />
+    </PopoverTrigger>
+  )
 
   return (
     <Popover onOpenChange={setOpen} open={open}>
-      <PopoverTrigger asChild>
-        <button
-          className="relative h-3 w-3 shrink-0 cursor-pointer rounded-sm border border-border/50 transition-all hover:ring-1 hover:ring-ring/50"
-          onClick={(e) => e.stopPropagation()}
-          style={{ backgroundColor: color }}
-          type="button"
-        />
-      </PopoverTrigger>
-      <PopoverContent align="center" className="w-auto p-1.5" side="left" sideOffset={6}>
+      {label ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+          <TooltipContent side="bottom">{label}</TooltipContent>
+        </Tooltip>
+      ) : (
+        trigger
+      )}
+      <PopoverContent
+        align={side === 'bottom' ? 'start' : 'center'}
+        className="w-auto p-1.5"
+        // Keep the pick inside the palette: in a panel header, a pointerdown
+        // bubbling out of the portal would start dragging the panel.
+        onPointerDown={(event) => event.stopPropagation()}
+        side={side}
+        sideOffset={6}
+      >
         <div className="grid grid-cols-4 gap-1">
           {PALETTE_COLORS.map((c) => (
             <button

package/src/components/ui/primitives/shortcut-token.tsx

@@ -20,6 +20,10 @@ const MOUSE_SHORTCUTS = {
     icon: 'ph:mouse-right-click-fill',
     label: 'Right click',
   },
+  Scroll: {
+    icon: 'ph:mouse-scroll-fill',
+    label: 'Scroll',
+  },
 } as const
 
 // The platform-agnostic command modifier. Both Cmd and Ctrl bind the action; we

package/src/components/ui/primitives/sidebar.tsx

@@ -24,6 +24,7 @@ import {
   TooltipTrigger,
 } from './../../../components/ui/primitives/tooltip'
 import { useIsMobile } from './../../../hooks/use-mobile'
+import { hydrationGatedStorage } from './../../../lib/hydration-gated-storage'
 import { cn } from './../../../lib/utils'
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state'
@@ -62,6 +63,7 @@ export const useSidebarStore = create<SidebarStore>()(
     }),
     {
       name: 'sidebar-preferences',
+      storage: hydrationGatedStorage((): boolean => useSidebarStore.persist.hasHydrated()),
       partialize: (state) => ({ width: state.width, isCollapsed: state.isCollapsed }),
       skipHydration: true,
     },

package/src/components/ui/right-stack.test.ts

@@ -0,0 +1,29 @@
+import { expect, test } from 'bun:test'
+import { rightStackFloors } from './right-stack'
+
+const tall = { headerHeight: 52, cardHeight: 240 }
+
+test('the inspector keeps 180 px, or its own height if shorter, above the full card', () => {
+  expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 700 })).toEqual({
+    inspector: 180,
+    card: 240,
+  })
+  expect(rightStackFloors({ ...tall, naturalHeight: 120, stackHeight: 700 }).inspector).toBe(120)
+  expect(
+    rightStackFloors({ naturalHeight: 0, headerHeight: 0, cardHeight: 240, stackHeight: 700 }),
+  ).toEqual({ inspector: 0, card: 240 })
+})
+
+test('on a short window the inspector gives way first, down to its header', () => {
+  expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 400 })).toEqual({
+    inspector: 152,
+    card: 240,
+  })
+})
+
+test('on a very short window the inspector keeps its header and the card scrolls', () => {
+  expect(rightStackFloors({ ...tall, naturalHeight: 500, stackHeight: 258 })).toEqual({
+    inspector: 52,
+    card: 198,
+  })
+})

package/src/components/ui/right-stack.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import { createContext, type ReactNode, useContext, useEffect, useRef } from 'react'
+import { useIsMobile } from '../../hooks/use-mobile'
+
+const RightStackContext = createContext(false)
+
+/** Whether a panel renders inside the shared right column (in flow) rather than on its own. */
+export function useInRightStack() {
+  return useContext(RightStackContext)
+}
+
+/** The inspector never shrinks below this (or its own height, if shorter) for the card, px. */
+const INSPECTOR_MIN_HEIGHT = 180
+
+/** Gap between the inspector and the card, px (`gap-2`). */
+const GAP = 8
+
+/**
+ * The heights neither panel shrinks below. The inspector keeps 180 px (or its
+ * own height, if shorter) while the full card fits under it, and never less
+ * than its header row. The card shows in full whenever the column allows; on a
+ * very short window it gives way and scrolls on itself — both stay usable.
+ */
+export function rightStackFloors(args: {
+  naturalHeight: number
+  headerHeight: number
+  cardHeight: number
+  stackHeight: number
+}): { inspector: number; card: number } {
+  const { naturalHeight, headerHeight, cardHeight, stackHeight } = args
+  const gap = naturalHeight > 0 && cardHeight > 0 ? GAP : 0
+  const header = Math.min(headerHeight, naturalHeight)
+  const inspector = Math.max(
+    header,
+    Math.min(INSPECTOR_MIN_HEIGHT, naturalHeight, stackHeight - cardHeight - gap),
+  )
+  const card = Math.max(0, Math.min(cardHeight, stackHeight - gap - inspector))
+  return { inspector, card }
+}
+
+/** The inspector's full height: its header plus everything its scroller holds. */
+function inspectorHeights(slot: HTMLElement): { natural: number; header: number } {
+  const panel = slot.querySelector<HTMLElement>('[data-panel-wrapper]')
+  if (!panel) return { natural: 0, header: 0 }
+  const header = panel.querySelector<HTMLElement>('[data-panel-header]')?.offsetHeight ?? 0
+  const scroller = panel.querySelector<HTMLElement>('[data-panel-scroll]')
+  if (!scroller) return { natural: panel.offsetHeight, header }
+  return { natural: panel.offsetHeight - scroller.clientHeight + scroller.scrollHeight, header }
+}
+
+/**
+ * The right-hand column: the shortcuts card shows in full at the bottom, and
+ * the node inspector takes the space above it, growing down from the top and
+ * scrolling on itself. On a very short window the inspector keeps its header
+ * and the card scrolls instead. Neither hides the other. On a phone the two
+ * keep their own layouts (sheet / no card).
+ */
+export function RightStack({ inspector, helper }: { inspector: ReactNode; helper: ReactNode }) {
+  const isMobile = useIsMobile()
+  const stackRef = useRef<HTMLDivElement>(null)
+  const inspectorRef = useRef<HTMLDivElement>(null)
+  const cardRef = useRef<HTMLDivElement>(null)
+
+  // `min(180px, its own height)` has no CSS form for a flex item that scrolls,
+  // so both floors are measured (`rightStackFloors`).
+  useEffect(() => {
+    if (isMobile) return
+    const stack = stackRef.current
+    const slot = inspectorRef.current
+    const card = cardRef.current
+    if (!(stack && slot && card)) return
+    let frame = 0
+    const fit = () => {
+      frame = 0
+      const { natural, header } = inspectorHeights(slot)
+      const floors = rightStackFloors({
+        naturalHeight: natural,
+        headerHeight: header,
+        cardHeight: card.scrollHeight,
+        stackHeight: stack.clientHeight,
+      })
+      const inspectorMin = `${floors.inspector}px`
+      const cardMin = `${floors.card}px`
+      if (slot.style.minHeight !== inspectorMin) slot.style.minHeight = inspectorMin
+      if (card.style.minHeight !== cardMin) card.style.minHeight = cardMin
+      // The card is click-through; it takes the pointer only when it has to scroll.
+      const pointer = floors.card < card.scrollHeight ? 'auto' : ''
+      if (card.style.pointerEvents !== pointer) card.style.pointerEvents = pointer
+    }
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(fit)
+    }
+    const resize = new ResizeObserver(schedule)
+    resize.observe(stack)
+    resize.observe(card)
+    // Content growing inside the scroller changes no outer size, hence the mutation watch.
+    // The same for the card: a new tool swaps its rows without resizing the slot.
+    const mutation = new MutationObserver(schedule)
+    for (const target of [slot, card])
+      mutation.observe(target, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['class', 'hidden', 'aria-expanded'],
+        characterData: true,
+      })
+    fit()
+    return () => {
+      if (frame) cancelAnimationFrame(frame)
+      resize.disconnect()
+      mutation.disconnect()
+    }
+  }, [isMobile])
+
+  if (isMobile) {
+    return (
+      <>
+        <div className="pointer-events-auto">{inspector}</div>
+        <div className="pointer-events-auto">{helper}</div>
+      </>
+    )
+  }
+
+  return (
+    <RightStackContext.Provider value={true}>
+      <div
+        className="pointer-events-none fixed top-20 right-4 bottom-[74px] z-40 flex flex-col items-end gap-2"
+        data-right-stack
+        ref={stackRef}
+      >
+        <div className="flex min-h-0 flex-[0_1_auto] flex-col items-end" ref={inspectorRef}>
+          {inspector}
+        </div>
+        <div
+          className="no-scrollbar mt-auto flex min-h-0 flex-[0_1_auto] flex-col overflow-y-auto rounded-xl"
+          data-right-stack-card
+          ref={cardRef}
+        >
+          {helper}
+        </div>
+      </div>
+    </RightStackContext.Provider>
+  )
+}

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

@@ -17,6 +17,11 @@ export type ExtraPanel = {
   label: string
   component: ComponentType
   pluginId?: string
+  /** Rail entry that drives the stage (see `SidebarTab.noPanel`); `component` serves the v1 sidebar. */
+  noPanel?: boolean
+  onSelect?: () => void
+  stageActive?: boolean
+  onDeselect?: () => void
 }
 
 interface IconRailProps {

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

@@ -28,12 +28,12 @@ export function AudioSettingsDialog() {
       <DialogTrigger asChild>
         <Button className="w-full justify-start gap-2" variant="outline">
           {muted ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
-          Audio Settings
+          Audio settings
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle>Audio Settings</DialogTitle>
+          <DialogTitle>Audio settings</DialogTitle>
           <DialogDescription>Adjust volume levels and mute settings</DialogDescription>
         </DialogHeader>
         <div className="space-y-6 py-4">