@pascal-app/editor 1.0.6 → 1.0.7

package/src/lib/wall-run-snap.test.ts

@@ -0,0 +1,188 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  detectSpacesForLevel,
+  LevelNode as LevelSchema,
+  nodeRegistry,
+  registerNode,
+  useScene,
+  type WallNode,
+  WallNode as WallSchema,
+  wallClosesRoom,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createWallOnCurrentLevel } from '../components/tools/wall/wall-drafting'
+import type { WallPlanPoint } from '../components/tools/wall/wall-snap-geometry'
+import useEditor from '../store/use-editor'
+import {
+  addWallPolygonDraftCorner,
+  discardWallPolygonDraft,
+  startWallPolygonDraft,
+  wallPolygonDraftWalls,
+} from './wall-polygon-draft'
+import { isWallRunFree, snapWallRunDraftPoint, wallRunDirection } from './wall-run-snap'
+
+// `updateNodes` batches its dirty-marking through requestAnimationFrame,
+// which bun's test runtime doesn't provide.
+if (typeof globalThis.requestAnimationFrame === 'undefined') {
+  globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) =>
+    setTimeout(() => callback(0), 0)) as unknown as typeof requestAnimationFrame
+  globalThis.cancelAnimationFrame = ((id: number) =>
+    clearTimeout(id)) as typeof cancelAnimationFrame
+}
+
+const LEVEL_ID = 'level_run' as AnyNodeId
+const deg = (degrees: number) => (degrees * Math.PI) / 180
+
+function levelWalls(): WallNode[] {
+  return Object.values(useScene.getState().nodes).filter(
+    (node): node is WallNode => node?.type === 'wall' && node.parentId === LEVEL_ID,
+  )
+}
+
+/**
+ * A plain run as the wall tool drafts it once its first point is placed: each
+ * wall from the last one's end, square to it, snapped against the level's walls.
+ */
+function plainRun(runStart: WallPlanPoint) {
+  let start = runStart
+  let reference: WallPlanPoint | null = null
+  return (cursor: WallPlanPoint, free = false) => {
+    const snapped = snapWallRunDraftPoint({
+      point: cursor,
+      start,
+      runStart,
+      reference,
+      walls: levelWalls(),
+      free,
+    })
+    const wall = createWallOnCurrentLevel(start, snapped.point)!
+    start = wall.end
+    reference = wallRunDirection(wall.start, wall.end)
+    return { wall, snapped }
+  }
+}
+
+describe('a plain wall run snaps like a pulled one once started', () => {
+  let restoreRegistry: (() => void) | undefined
+  let previousEditor: Partial<ReturnType<typeof useEditor.getState>>
+
+  beforeEach(() => {
+    previousEditor = {
+      toolDefaults: useEditor.getState().toolDefaults,
+      continuationByContext: useEditor.getState().continuationByContext,
+    }
+    // The wall's snap profile makes the armed wall tool the 'wall' snapping
+    // context (grid lengths), as in the app.
+    restoreRegistry = nodeRegistry._snapshot()
+    registerNode({
+      kind: 'wall',
+      schemaVersion: 10,
+      schema: WallSchema,
+      category: 'structure',
+      snapProfile: 'structural',
+      defaults: () => WallSchema.parse({ start: [0, 0], end: [1, 0] }),
+      capabilities: {},
+    } as never)
+    useEditor.getState().setSnappingMode('wall', 'grid')
+    useEditor.getState().armToolMode({ mode: 'build', tool: 'wall' })
+    useViewer.setState({
+      selection: { buildingId: null, levelId: LEVEL_ID, zoneId: null, selectedIds: [] },
+    } as never)
+    const level = LevelSchema.parse({ id: LEVEL_ID, level: 0, height: 2.7, children: [] })
+    useScene.setState({
+      nodes: { [level.id]: level as AnyNode },
+      rootNodeIds: [level.id],
+      dirtyNodes: new Set(),
+      collections: {},
+    } as never)
+  })
+
+  afterEach(() => {
+    discardWallPolygonDraft()
+    restoreRegistry?.()
+    restoreRegistry = undefined
+    useEditor.getState().setSnappingMode('wall', 'grid')
+    useEditor.setState(previousEditor as never)
+    useEditor.getState().armToolMode({ mode: 'select' })
+  })
+
+  test("the first wall holds to the house's axes, steps 15° past them, and Alt frees it", () => {
+    const snap = (cursor: WallPlanPoint, free = false) =>
+      snapWallRunDraftPoint({
+        point: cursor,
+        start: [0, 0],
+        runStart: [0, 0],
+        reference: null,
+        walls: [],
+        free,
+      })
+    const axis = snap([4.1, 0.35])
+    expect(axis.lock).toBe('axis')
+    expect(axis.point).toEqual([4, 0])
+    const stepped = snap([Math.cos(deg(40)) * 3, Math.sin(deg(40)) * 3])
+    expect(stepped.lock).toBe('angle')
+    expect(stepped.point[0]).toBeCloseTo(Math.cos(deg(45)) * 3, 6)
+    expect(stepped.point[1]).toBeCloseTo(Math.sin(deg(45)) * 3, 6)
+    expect(isWallRunFree({ altKey: true })).toBe(true)
+    expect(isWallRunFree()).toBe(false)
+    expect(snap([3.13, 1.07], isWallRunFree({ altKey: true })).point).toEqual([3.13, 1.07])
+    // Snapping off frees it too.
+    useEditor.getState().setSnappingMode('wall', 'off')
+    expect(isWallRunFree()).toBe(true)
+  })
+
+  test('a Walls run squares up, lines up with its start and closes into a room', () => {
+    // The first point keeps the tool's own snapping; the run starts at (0, 0).
+    const place = plainRun([0, 0])
+    const first = place([5.1, 0.4])
+    expect(first.snapped.lock).toBe('axis')
+    expect(first.wall.end).toEqual([5, 0])
+    const second = place([5.3, 3.9])
+    expect(second.snapped.lock).toBe('square')
+    expect(second.wall.end).toEqual([5, 4])
+    const third = place([0.1, 4.05])
+    expect(third.snapped.snap).toBe('alignment')
+    expect(third.snapped.label).toBe('In line with start')
+    expect(third.snapped.guides.some((guide) => guide.kind === 'run-start')).toBe(true)
+    expect(third.snapped.guides.some((guide) => guide.kind === 'extension')).toBe(true)
+    expect(third.wall.end).toEqual([0, 4])
+    const last = place([0.12, 0.18])
+    expect(last.snapped.snap).toBe('endpoint')
+    expect(last.wall.end).toEqual([0, 0])
+    expect(wallClosesRoom(levelWalls(), last.wall)).toBe(true)
+    const rooms = detectSpacesForLevel(LEVEL_ID, levelWalls()).spaces.filter(
+      (space) => !space.isExterior,
+    )
+    expect(rooms).toHaveLength(1)
+  })
+
+  test('a Polygon room snaps its corners the same way and closes on its first', () => {
+    startWallPolygonDraft(LEVEL_ID, [0, 0])
+    let start: WallPlanPoint = [0, 0]
+    let reference: WallPlanPoint | null = null
+    const corner = (cursor: WallPlanPoint) => {
+      const snapped = snapWallRunDraftPoint({
+        point: cursor,
+        start,
+        runStart: [0, 0],
+        reference,
+        walls: [...levelWalls(), ...wallPolygonDraftWalls()],
+        free: false,
+      })
+      const outcome = addWallPolygonDraftCorner(snapped.point)
+      reference = wallRunDirection(start, snapped.point)
+      start = snapped.point
+      return { snapped, outcome }
+    }
+    expect(corner([3.9, -0.3]).snapped.point).toEqual([4, 0])
+    expect(corner([4.2, 2.95]).snapped.point).toEqual([4, 3])
+    const across = corner([-0.08, 3.1])
+    expect(across.snapped.label).toBe('In line with start')
+    expect(across.snapped.point).toEqual([0, 3])
+    const close = corner([0.1, 0.2])
+    expect(close.snapped.snap).toBe('endpoint')
+    expect(close.outcome).toBe('closed')
+  })
+})

package/src/lib/wall-run-snap.ts

@@ -0,0 +1,83 @@
+/**
+ * Snapping for the wall tool's line runs once their first point is placed —
+ * a Polygon room's sides and a run pulled from a wall end (`wall-pull.ts`,
+ * `wallDraftIsRun`); a Walls segment is one wall and snaps as its first point.
+ *
+ * Each wall holds square: straight on from the wall before it, square to it,
+ * or along the house's axes within about 7°, and on 15° steps past that, with
+ * its length on the grid; existing walls, the run's start and the projection
+ * guides win over that (`snapWallPullPoint`). Alt, or snapping off, leaves the
+ * end at the cursor. The run's first point keeps the tool's own snapping.
+ *
+ * The 3D wall tool and the floor plan each draft a run from their own start,
+ * run start and previous wall, and snap through here, so both views place the
+ * same point; the view that owns the input publishes the guides and marker.
+ */
+
+import type { WallNode, WallPlanPoint } from '@pascal-app/core'
+import { getSegmentGridStep } from '../components/tools/wall/wall-drafting'
+import { snapWallPullPoint, type WallPullSnapResult } from '../components/tools/wall/wall-pull-snap'
+import useAlignmentGuides from '../store/use-alignment-guides'
+import { getActiveSnappingMode } from '../store/use-editor'
+import useWallSnapIndicator from '../store/use-wall-snap-indicator'
+
+/** True while a run's walls follow the cursor freely: Alt, or snapping off. */
+export function isWallRunFree(event?: { altKey?: boolean } | null): boolean {
+  return Boolean(event?.altKey) || getActiveSnappingMode() === 'off'
+}
+
+/** Unit direction of a placed wall `start` → `end`: the next wall holds square to it. */
+export function wallRunDirection(start: WallPlanPoint, end: WallPlanPoint): WallPlanPoint | null {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+  return length > 1e-9 ? [dx / length, dz / length] : null
+}
+
+/**
+ * Snap the drafted end of a run's current wall, which starts at `start`.
+ * `runStart` is where the run began, `reference` the direction of the wall
+ * before (null for the run's first wall), and `walls` the level's walls with
+ * any open Polygon room's sides.
+ */
+export function snapWallRunDraftPoint(args: {
+  point: WallPlanPoint
+  start: WallPlanPoint
+  runStart: WallPlanPoint
+  reference: WallPlanPoint | null
+  walls: readonly WallNode[]
+  free: boolean
+}): WallPullSnapResult {
+  return snapWallPullPoint({ ...args, gridStep: getSegmentGridStep() })
+}
+
+/**
+ * Show a run's snap: its projection guides and crossings (the alignment guide
+ * layers draw them) and the snap marker with what it caught. Null clears both.
+ */
+export function publishWallRunFeedback(result: WallPullSnapResult | null): void {
+  if (!result) {
+    useAlignmentGuides.getState().clear()
+    useWallSnapIndicator.getState().clear()
+    return
+  }
+  useAlignmentGuides.getState().setDraft({
+    lines: result.guides.map((guide) => ({
+      kind: guide.kind,
+      from: [guide.from[0], guide.from[1]],
+      to: [guide.to[0], guide.to[1]],
+    })),
+    intersections: result.intersections.map((point) => [point[0], point[1]]),
+  })
+  useWallSnapIndicator.getState().set(
+    result.snap
+      ? {
+          x: result.point[0],
+          z: result.point[1],
+          kind: result.snap,
+          wallIds: result.targetWallIds.length > 0 ? result.targetWallIds : undefined,
+          label: result.label ?? undefined,
+        }
+      : null,
+  )
+}

package/src/lib/wall-type.test.ts

@@ -0,0 +1,125 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import {
+  GYPSUM_HALF,
+  getSceneDocument,
+  projectWallTypes,
+  SiteNode,
+  STUD_2X8,
+  useScene,
+  WallTypeDefinition,
+  wallTypeAssembly,
+} from '@pascal-app/core'
+import {
+  deleteProjectWallType,
+  newWallTypeBlockedReason,
+  PROJECT_WALL_TYPE_LIMIT,
+  saveProjectWallType,
+  WALL_TYPE_LAYER_LIMIT,
+  WALL_TYPE_SAVE_FAILURE,
+} from './wall-type'
+
+// Scene writes schedule their dirty pass on a frame; bun has none.
+globalThis.requestAnimationFrame ??= () => 0
+globalThis.cancelAnimationFrame ??= () => {}
+
+const currentProjectWallTypes = () => {
+  const { nodes, rootNodeIds } = useScene.getState()
+  return projectWallTypes(nodes, rootNodeIds)
+}
+
+/** A 2x8 at 24 in partition, drywall both faces. */
+const SOUND_WALL: WallTypeDefinition = {
+  id: 'custom-soundwall',
+  label: '2x8 sound wall',
+  assembly: wallTypeAssembly('custom-soundwall', [
+    { role: 'lining', material: 'drywall', thickness: GYPSUM_HALF },
+    { role: 'structure', core: true, material: 'wood', thickness: STUD_2X8, spacing: 0.6096 },
+    { role: 'lining', material: 'drywall', thickness: GYPSUM_HALF },
+  ]),
+}
+
+beforeEach(() => {
+  useScene.getState().unloadScene()
+  useScene.getState().loadScene()
+})
+
+afterEach(() => {
+  useScene.getState().unloadScene()
+})
+
+describe('project wall types', () => {
+  test('save with the project and come back from a saved scene', () => {
+    expect(saveProjectWallType(SOUND_WALL)).toBe('saved')
+    expect(currentProjectWallTypes()).toEqual([SOUND_WALL])
+    const document = JSON.parse(JSON.stringify(getSceneDocument()))
+    useScene.getState().unloadScene()
+    expect(currentProjectWallTypes()).toEqual([])
+    useScene.getState().setScene(document.nodes, document.rootNodeIds)
+    expect(currentProjectWallTypes()).toEqual([SOUND_WALL])
+    // Saving again under the same id edits it in place.
+    saveProjectWallType({ ...SOUND_WALL, label: 'Sound wall' })
+    expect(currentProjectWallTypes().map((type) => type.label)).toEqual(['Sound wall'])
+    deleteProjectWallType(SOUND_WALL.id)
+    expect(currentProjectWallTypes()).toEqual([])
+  })
+
+  test('a 13th layer and a 65th type are refused, each saying why, and nothing is written', () => {
+    const stack = (linings: number) =>
+      wallTypeAssembly('custom-thick', [
+        { role: 'structure', core: true, material: 'wood', thickness: STUD_2X8 },
+        ...Array.from({ length: linings }, () => ({
+          role: 'lining' as const,
+          material: 'drywall',
+          thickness: GYPSUM_HALF,
+        })),
+      ])
+    const thick = { id: 'custom-thick', label: 'Thick', assembly: stack(WALL_TYPE_LAYER_LIMIT) }
+    expect(saveProjectWallType(thick)).toBe('too-many-layers')
+    expect(currentProjectWallTypes()).toEqual([])
+    // The limits are the schema's own.
+    expect(WallTypeDefinition.safeParse(thick).success).toBe(false)
+    expect(saveProjectWallType({ ...thick, assembly: stack(WALL_TYPE_LAYER_LIMIT - 1) })).toBe(
+      'saved',
+    )
+    deleteProjectWallType(thick.id)
+
+    const numbered = (n: number) => ({
+      ...SOUND_WALL,
+      id: `custom-sound-${n}`,
+      label: `Sound ${n}`,
+    })
+    for (let n = 1; n <= PROJECT_WALL_TYPE_LIMIT; n += 1)
+      expect(saveProjectWallType(numbered(n))).toBe('saved')
+    expect(newWallTypeBlockedReason(currentProjectWallTypes())).toContain(
+      `${PROJECT_WALL_TYPE_LIMIT} wall types`,
+    )
+    expect(saveProjectWallType(numbered(PROJECT_WALL_TYPE_LIMIT + 1))).toBe('too-many-types')
+    expect(currentProjectWallTypes()).toHaveLength(PROJECT_WALL_TYPE_LIMIT)
+    const site = Object.values(useScene.getState().nodes).find((node) => node.type === 'site')
+    expect(SiteNode.safeParse(site).success).toBe(true)
+    const over = [...currentProjectWallTypes(), numbered(PROJECT_WALL_TYPE_LIMIT + 1)]
+    expect(SiteNode.safeParse({ ...site, wallTypes: over }).success).toBe(false)
+    // A type the project keeps can still be edited in place.
+    expect(saveProjectWallType({ ...numbered(1), label: 'Quiet wall' })).toBe('saved')
+    expect(currentProjectWallTypes()[0]?.label).toBe('Quiet wall')
+    deleteProjectWallType(numbered(1).id)
+    expect(newWallTypeBlockedReason(currentProjectWallTypes())).toBeNull()
+  })
+
+  test('a type that does not parse says so, apart from a scene with no site', () => {
+    const coreless = {
+      ...SOUND_WALL,
+      assembly: {
+        ...SOUND_WALL.assembly,
+        layers: SOUND_WALL.assembly.layers.filter((l) => !l.core),
+      },
+    }
+    expect(saveProjectWallType(coreless)).toBe('invalid')
+    expect(saveProjectWallType({ ...SOUND_WALL, label: '  ' })).toBe('invalid')
+    expect(currentProjectWallTypes()).toEqual([])
+    useScene.getState().unloadScene()
+    expect(saveProjectWallType(SOUND_WALL)).toBe('no-site')
+    expect(WALL_TYPE_SAVE_FAILURE.invalid).not.toBe(WALL_TYPE_SAVE_FAILURE['no-site'])
+    expect(WALL_TYPE_SAVE_FAILURE.invalid).not.toContain('site')
+  })
+})

package/src/lib/wall-type.ts

@@ -0,0 +1,119 @@
+import {
+  type AnyNodeId,
+  type Assembly,
+  isExteriorWallAssembly,
+  parseWallTypes,
+  projectWallTypes,
+  type SiteNode,
+  useScene,
+  WallTypeDefinition,
+} from '@pascal-app/core'
+import { useMemo } from 'react'
+
+/**
+ * A project's own wall types (`SiteNode.wallTypes`), made and edited from a wall's
+ * Assembly controls (`WallTypeMenu`): saved on the site, so they travel with the
+ * project and undo like any edit.
+ *
+ * A placement is the kind of wall a stack builds, read from its layers: `exterior`
+ * with a cladding side, `interior` lined alike on both faces. A new type starts from
+ * a typical stack of its placement.
+ */
+export type WallTypePlacement = 'exterior' | 'interior'
+
+function siteOf(state: ReturnType<typeof useScene.getState>): SiteNode | undefined {
+  for (const id of state.rootNodeIds) {
+    const node = state.nodes[id]
+    if (node?.type === 'site') return node
+  }
+  return undefined
+}
+
+/** The project's own wall types, kept current as they are saved, edited or undone. */
+export function useProjectWallTypes(): WallTypeDefinition[] {
+  const saved = useScene((state) => siteOf(state)?.wallTypes)
+  return useMemo(() => parseWallTypes(saved), [saved])
+}
+
+/** The placement a stack builds, read from its layers (`isExteriorWallAssembly`). */
+export function wallTypePlacementOf(assembly: Assembly): WallTypePlacement {
+  return isExteriorWallAssembly(assembly) ? 'exterior' : 'interior'
+}
+
+/** The most layers a wall type's stack holds (`Assembly.layers`). */
+export const WALL_TYPE_LAYER_LIMIT = 12
+
+/** The most wall types a project keeps on its site (`SiteNode.wallTypes`). */
+export const PROJECT_WALL_TYPE_LIMIT = 64
+
+/**
+ * Why no new wall type can be made in this project — it keeps `PROJECT_WALL_TYPE_LIMIT`
+ * already — or null while it has room: what "New wall type…" and "Duplicate as a new
+ * type…" say when they are off.
+ */
+export function newWallTypeBlockedReason(
+  projectTypes: readonly WallTypeDefinition[],
+): string | null {
+  return projectTypes.length >= PROJECT_WALL_TYPE_LIMIT
+    ? `This project keeps ${PROJECT_WALL_TYPE_LIMIT} wall types, the most it can. Delete one to make another.`
+    : null
+}
+
+/**
+ * What saving a project wall type came to: `saved`, or why not — the scene has no
+ * site to keep it on, its stack has more layers than a wall type holds, the project
+ * keeps as many types as it can and this one is new, or it does not parse.
+ */
+export type WallTypeSaveResult =
+  | 'saved'
+  | 'no-site'
+  | 'too-many-layers'
+  | 'too-many-types'
+  | 'invalid'
+
+/** What the wall type editor says when a type was not saved. */
+export const WALL_TYPE_SAVE_FAILURE: Record<Exclude<WallTypeSaveResult, 'saved'>, string> = {
+  'no-site': 'This project has no site to keep wall types on, so the type was not saved.',
+  'too-many-layers': `A wall type holds at most ${WALL_TYPE_LAYER_LIMIT} layers. Remove one to save it.`,
+  'too-many-types': `This project keeps ${PROJECT_WALL_TYPE_LIMIT} wall types, the most it can. Delete one to save another.`,
+  invalid:
+    'These layers do not make a wall type (one framing core, every layer a thickness), so it was not saved.',
+}
+
+/**
+ * Saves a project wall type on the site, in place of the one with its id or after
+ * the others: one undo step, saved and shared with the project. Nothing is written
+ * unless it comes to `saved` (`WallTypeSaveResult`): a stack of more than
+ * `WALL_TYPE_LAYER_LIMIT` layers, or a new type past `PROJECT_WALL_TYPE_LIMIT`, would
+ * leave a site that no longer parses.
+ */
+export function saveProjectWallType(type: WallTypeDefinition): WallTypeSaveResult {
+  const state = useScene.getState()
+  const site = siteOf(state)
+  if (!site) return 'no-site'
+  if ((type.assembly?.layers?.length ?? 0) > WALL_TYPE_LAYER_LIMIT) return 'too-many-layers'
+  const parsed = WallTypeDefinition.safeParse(type)
+  if (!parsed.success) return 'invalid'
+  const current = projectWallTypes(state.nodes, state.rootNodeIds)
+  const editing = current.some((entry) => entry.id === type.id)
+  if (!editing && current.length >= PROJECT_WALL_TYPE_LIMIT) return 'too-many-types'
+  const next = editing
+    ? current.map((entry) => (entry.id === type.id ? parsed.data : entry))
+    : [...current, parsed.data]
+  state.updateNode(site.id as AnyNodeId, { wallTypes: next } as Partial<SiteNode>)
+  return 'saved'
+}
+
+/** Removes a project wall type from the site. Walls drawn with it keep their stack. */
+export function deleteProjectWallType(id: string): void {
+  const state = useScene.getState()
+  const site = siteOf(state)
+  if (!site) return
+  const next = projectWallTypes(state.nodes, state.rootNodeIds).filter((type) => type.id !== id)
+  state.updateNode(
+    site.id as AnyNodeId,
+    {
+      wallTypes: next.length > 0 ? next : undefined,
+    } as Partial<SiteNode>,
+  )
+}

package/src/lib/window-interaction.test.ts

@@ -0,0 +1,42 @@
+import { afterEach, expect, test } from 'bun:test'
+import { useInteractive, useScene, WindowNode } from '@pascal-app/core'
+import {
+  getDisplayedWindowShutterValue,
+  getDisplayedWindowValue,
+  openWindowOpenState,
+  setWindowShuttersOpenState,
+} from '../index'
+
+const originalScene = useScene.getState()
+const originalInteractive = useInteractive.getState()
+afterEach(() => {
+  useScene.setState(originalScene)
+  useInteractive.setState(originalInteractive)
+})
+
+test.each(['box', 'concealed'] as const)(
+  '%s shutter previews use saved defaults, can reverse, and leave sash animation queued',
+  (rollerShutter) => {
+    const node = WindowNode.parse({ windowType: 'casement', shutters: 'panel', rollerShutter })
+    useScene.setState({ nodes: { [node.id]: node } })
+    useInteractive.setState({ windows: {}, windowAnimations: {} })
+    expect(getDisplayedWindowShutterValue(node.id, 'shutterOpen', undefined)).toBe(1)
+    expect(getDisplayedWindowShutterValue(node.id, 'rollerShutterOpen', 0.7)).toBe(0.7)
+    openWindowOpenState(node.id, { persist: false })
+    setWindowShuttersOpenState(node.id, false, { persist: false })
+    expect(getDisplayedWindowValue(node.id, node.operationState)).toBe(0)
+    expect(useInteractive.getState().windowAnimations[node.id]?.operationState?.to).toBe(1)
+    useInteractive
+      .getState()
+      .setWindowOpenState(node.id, { shutterOpen: 0.3, rollerShutterOpen: 0.5 })
+    setWindowShuttersOpenState(node.id, true, { persist: false })
+    expect(useInteractive.getState().windowAnimations[node.id]).toMatchObject({
+      shutterOpen: { from: 0.3, to: 1, persist: false },
+      rollerShutterOpen: { from: 0.5, to: 1, persist: false },
+      operationState: { to: 1 },
+    })
+    useInteractive.getState().cancelWindowAnimation(node.id)
+    useInteractive.getState().removeWindowOpenState(node.id)
+    expect(getDisplayedWindowShutterValue(node.id, 'shutterOpen', 0.7)).toBe(0.7)
+  },
+)

package/src/lib/window-interaction.ts

@@ -1,5 +1,6 @@
 import {
   type AnyNodeId,
+  type InteractiveState,
   useInteractive,
   useScene,
   type WindowInteractiveState,
@@ -7,7 +8,7 @@ import {
 
 export const WINDOW_TOGGLE_ANIMATION_MS = 520
 
-type WindowOpenAnimationOptions = {
+export type WindowOpenAnimationOptions = {
   persist?: boolean
 }
 
@@ -17,18 +18,23 @@ export function isOperableWindowType(windowType: string | undefined) {
     windowType === 'casement' ||
     windowType === 'awning' ||
     windowType === 'hopper' ||
+    windowType === 'tilt-turn' ||
     windowType === 'single-hung' ||
     windowType === 'double-hung' ||
     windowType === 'louvered'
   )
 }
 
-export function getDisplayedWindowValue(windowId: AnyNodeId, nodeValue: number | undefined) {
-  const interactive = useInteractive.getState()
-  const runtimeValue = interactive.windows[windowId]?.operationState
+export function getDisplayedWindowValue(
+  windowId: AnyNodeId,
+  nodeValue: number | undefined,
+  field: keyof WindowInteractiveState = 'operationState',
+  interactive: InteractiveState = useInteractive.getState(),
+) {
+  const runtimeValue = interactive.windows[windowId]?.[field]
   if (runtimeValue !== undefined) return runtimeValue
 
-  const queuedValue = interactive.windowAnimations[windowId]?.from
+  const queuedValue = interactive.windowAnimations[windowId]?.[field]?.from
   if (queuedValue !== undefined) return queuedValue
 
   return nodeValue ?? 0
@@ -98,3 +104,39 @@ export function openWindowOpenState(windowId: AnyNodeId, options?: WindowOpenAni
   const currentOpenAmount = getDisplayedWindowValue(windowId, node.operationState)
   startWindowOpenAnimation(windowId, 'operationState', currentOpenAmount, 1, options)
 }
+
+export type WindowShutterField = 'shutterOpen' | 'rollerShutterOpen'
+
+export function getDisplayedWindowShutterValue(
+  windowId: AnyNodeId,
+  field: WindowShutterField,
+  nodeValue: number | undefined,
+  state: InteractiveState = useInteractive.getState(),
+): number {
+  return getDisplayedWindowValue(windowId, nodeValue ?? 1, field, state)
+}
+
+/** Preview both shutter styles together, independently of the sash. */
+export function setWindowShuttersOpenState(
+  windowId: AnyNodeId,
+  on: boolean,
+  options?: WindowOpenAnimationOptions,
+): void {
+  const node = useScene.getState().nodes[windowId]
+  if (node?.type !== 'window' || node.source) return
+  const fields: WindowShutterField[] = []
+  if (node.shutters && node.shutters !== 'none') fields.push('shutterOpen')
+  if (node.rollerShutter === 'box' || node.rollerShutter === 'concealed')
+    fields.push('rollerShutterOpen')
+  if (!fields.length) return
+  useInteractive.getState().setMechanismPart(windowId, 'shutters', on)
+  for (const field of fields) {
+    startWindowOpenAnimation(
+      windowId,
+      field,
+      getDisplayedWindowShutterValue(windowId, field, node[field]),
+      on ? 1 : 0,
+      options,
+    )
+  }
+}