@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/components/blocks/profile/use-profile-card-state.ts

@@ -11,9 +11,9 @@ import {
   toggleProfileCardVariantAtom,
 } from "./profile-card-atom"
 import type {
-  ProfileCardActions,
-  ProfileCardInstanceId,
-  ProfileCardState,
+  IProfileCardActions,
+  TProfileCardInstanceId,
+  IProfileCardState,
 } from "./type"
 
 /**
@@ -29,8 +29,8 @@ import type {
  * `useAtomValue(profileCardVariantAtom("account"))`.
  */
 export function useProfileCardState(
-  profileCardId: ProfileCardInstanceId
-): ProfileCardState {
+  profileCardId: TProfileCardInstanceId
+): IProfileCardState {
   return useAtomValue(profileCardStateAtom(profileCardId))
 }
 
@@ -44,8 +44,8 @@ export function useProfileCardState(
  * ```
  */
 export function useProfileCardActions(
-  profileCardId: ProfileCardInstanceId
-): ProfileCardActions {
+  profileCardId: TProfileCardInstanceId
+): IProfileCardActions {
   const setVariant = useSetAtom(setProfileCardVariantAtom(profileCardId))
   const toggleVariant = useSetAtom(toggleProfileCardVariantAtom(profileCardId))
   const setMenuOpen = useSetAtom(setProfileCardMenuOpenAtom(profileCardId))

package/src/components/blocks/profile/use-profile-card.ts

@@ -15,35 +15,35 @@ import {
   setProfileCardMenuOpenAtom,
 } from "./profile-card-atom"
 import type {
-  ProfileCardAction,
-  ProfileCardConfig,
-  ProfileCardHandlers,
-  ProfileCardInstanceId,
-  ProfileCardVariant,
+  IProfileCardAction,
+  IProfileCardConfig,
+  IProfileCardHandlers,
+  TProfileCardInstanceId,
+  TProfileCardVariant,
 } from "./type"
 
-export interface UseProfileCardOptions {
-  profileCardId?: ProfileCardInstanceId
+export interface IUseProfileCardOptions {
+  profileCardId?: TProfileCardInstanceId
   /** Controlled fold. `undefined` leaves the store (and `defaultVariant`) in charge. */
-  variant?: ProfileCardVariant
-  defaultVariant?: ProfileCardVariant
-  onVariantChange?: (variant: ProfileCardVariant) => void
+  variant?: TProfileCardVariant
+  defaultVariant?: TProfileCardVariant
+  onVariantChange?: (variant: TProfileCardVariant) => void
   /** Controlled menu. */
   open?: boolean
   defaultOpen?: boolean
   onError?: (error: unknown) => void
 }
 
-export interface ProfileCardBinding {
-  profileCardId: ProfileCardInstanceId
-  variant: ProfileCardVariant
+export interface IProfileCardBinding {
+  profileCardId: TProfileCardInstanceId
+  variant: TProfileCardVariant
   collapsed: boolean
   menuOpen: boolean
   busy: boolean
   /** Hand to the menu's `onOpenChange` (first argument). Stable. */
   setMenuOpen: (open: boolean) => void
   /** Run an action: `onSelect`, promise → busy, rejection → `onError`. Stable. */
-  select: (action: ProfileCardAction) => void
+  select: (action: IProfileCardAction) => void
 }
 
 /**
@@ -57,8 +57,8 @@ export interface ProfileCardBinding {
  * (`useProfileCardActions(id).collapse()`) survives a route change.
  */
 export function useProfileCard(
-  options: UseProfileCardOptions
-): ProfileCardBinding {
+  options: IUseProfileCardOptions
+): IProfileCardBinding {
   const {
     variant: variantProp,
     defaultVariant = "expanded",
@@ -71,11 +71,11 @@ export function useProfileCard(
 
   const controlsVariant = variantProp !== undefined
   const controlsMenuOpen = openProp !== undefined
-  const config = React.useMemo<ProfileCardConfig>(
+  const config = React.useMemo<IProfileCardConfig>(
     () => ({ controlsVariant, controlsMenuOpen }),
     [controlsVariant, controlsMenuOpen]
   )
-  const handlers = React.useMemo<ProfileCardHandlers>(
+  const handlers = React.useMemo<IProfileCardHandlers>(
     () => ({ onVariantChange, onError }),
     [onVariantChange, onError]
   )

package/src/components/blocks/scaffold/__tests__/scaffold-atom.test.tsx

@@ -3,6 +3,8 @@ import { createStore } from "jotai"
 
 import {
   measureScaffoldCanvasAtom,
+  updateScaffoldPanelLayoutAtom,
+  resizeScaffoldInspectorAtom,
   projectScaffoldPropsAtom,
   registerScaffoldPanelIdsAtom,
   removeScaffoldInstance,
@@ -22,14 +24,14 @@ import {
   toggleScaffoldPanelAtom,
 } from "../scaffold-atom"
 
-type Store = ReturnType<typeof createStore>
+type TStore = ReturnType<typeof createStore>
 
 let keys = 0
 /** A fresh instance per test — ids never collide, no cross-test state. */
 const instance = () => `scaffold-test-${keys++}`
 
 /** Register three panels on a canvas wide enough for all of them. */
-function mountThree(store: Store, id: string) {
+function mountThree(store: TStore, id: string) {
   store.set(registerScaffoldPanelIdsAtom(id), ["one", "two", "three"])
   store.set(measureScaffoldCanvasAtom(id), 1200)
 }
@@ -195,6 +197,8 @@ describe("scaffold instance lifecycle", () => {
     store.set(resetScaffoldAtom(id))
     expect(store.get(scaffoldStateAtom(id))).toEqual({
       inspectorOpen: false,
+      inspectorWidth: null,
+      panelLayouts: {},
       panelCapacity: 3,
       hiddenPanelIds: [],
       hoveredPanelId: null,
@@ -208,3 +212,25 @@ describe("scaffold instance lifecycle", () => {
     expect(store.get(scaffoldHiddenPanelIdsAtom(id))).toEqual([])
   })
 })
+
+test("panel geometry and expansion persist per scaffold and reset together", () => {
+  const store = createStore()
+  store.set(updateScaffoldPanelLayoutAtom("first"), "editor", {
+    width: 480,
+    secondarySize: 160,
+    secondaryExpanded: true,
+    swapped: true,
+  })
+  store.set(resizeScaffoldInspectorAtom("first"), 360)
+  expect(store.get(scaffoldStateAtom("first")).panelLayouts.editor).toEqual({
+    width: 480,
+    secondarySize: 160,
+    secondaryExpanded: true,
+    swapped: true,
+  })
+  expect(store.get(scaffoldStateAtom("first")).inspectorWidth).toBe(360)
+  expect(store.get(scaffoldStateAtom("second")).panelLayouts).toEqual({})
+  store.set(resetScaffoldAtom("first"))
+  expect(store.get(scaffoldStateAtom("first")).panelLayouts).toEqual({})
+  expect(store.get(scaffoldStateAtom("first")).inspectorWidth).toBeNull()
+})

package/src/components/blocks/scaffold/__tests__/scaffold.test.tsx

@@ -3,28 +3,40 @@ import { act, render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import type { ReactNode } from "react"
 
-import { Scaffold, useScaffold } from "../index"
+import {
+  Scaffold,
+  useScaffold,
+  useScaffoldActions,
+  useScaffoldState,
+} from "../index"
 import type { TScaffoldPanelChild } from "../type"
 import { getPanelCapacity } from "../utils"
 
 // The canvas measures itself through ResizeObserver; this stub hands the
 // callback to the test so it can drive the width deterministically.
-let observeCanvas: ResizeObserverCallback | undefined
+const canvasObservers = new Set<ResizeObserverCallback>()
 globalThis.ResizeObserver = class {
+  private callback: ResizeObserverCallback
   constructor(callback: ResizeObserverCallback) {
-    observeCanvas = callback
+    this.callback = callback
+  }
+  observe(target: Element) {
+    if (target.getAttribute("data-slot") === "scaffold-canvas")
+      canvasObservers.add(this.callback)
   }
-  observe() {}
   unobserve() {}
-  disconnect() {}
+  disconnect() {
+    canvasObservers.delete(this.callback)
+  }
 } as unknown as typeof ResizeObserver
 
 const resizeCanvas = (width: number) =>
   act(() => {
-    observeCanvas?.(
-      [{ contentRect: { width } }] as unknown as ResizeObserverEntry[],
-      undefined as unknown as ResizeObserver
-    )
+    for (const observe of canvasObservers)
+      observe(
+        [{ contentRect: { width } }] as unknown as ResizeObserverEntry[],
+        undefined as unknown as ResizeObserver
+      )
   })
 
 function Strip() {
@@ -368,7 +380,9 @@ describe("Scaffold responsive panels", () => {
 
     // Room returns — the auto-hidden panel comes back by itself.
     resizeCanvas(1200)
-    expect(await screen.findByRole("region", { name: "Panel one" })).toBeDefined()
+    expect(
+      await screen.findByRole("region", { name: "Panel one" })
+    ).toBeDefined()
     expect(tab("one").getAttribute("aria-pressed")).toBe("true")
   })
 
@@ -440,6 +454,71 @@ describe("Scaffold responsive panels", () => {
 
     // Its tab presses back to visible.
     await user.click(tab("two"))
-    expect(await screen.findByRole("region", { name: "Panel two" })).toBeDefined()
+    expect(
+      await screen.findByRole("region", { name: "Panel two" })
+    ).toBeDefined()
+  })
+})
+
+describe("scaffold app-wide panel controls", () => {
+  function RemoteControls() {
+    const actions = useScaffoldActions("shared-layout")
+    const state = useScaffoldState("shared-layout")
+    return (
+      <>
+        <button
+          onClick={() => {
+            actions.resizeSecondaryPanel("editor", 160)
+            actions.setSecondaryExpanded("editor", true)
+            actions.setPanelSwapped("editor", true)
+            actions.resizeInspector(360)
+            actions.setInspectorOpen(true)
+          }}
+        >
+          Arrange workspace
+        </button>
+        <output>{JSON.stringify(state.panelLayouts.editor)}</output>
+      </>
+    )
+  }
+
+  test("a sibling hook resizes, expands, and swaps the mounted workspace", async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <Scaffold.Root scaffoldId="shared-layout">
+          <Scaffold.Main>
+            <Scaffold.Canvas>
+              <Scaffold.Panel
+                id="editor"
+                name="Editor"
+                SecondaryPanel={<span>Shared strip</span>}
+              >
+                Editor content
+              </Scaffold.Panel>
+            </Scaffold.Canvas>
+            <Scaffold.Inspector>Details</Scaffold.Inspector>
+          </Scaffold.Main>
+        </Scaffold.Root>
+        <RemoteControls />
+      </>
+    )
+    await user.click(screen.getByRole("button", { name: "Arrange workspace" }))
+    const panel = screen.getByRole("region", { name: "Editor" })
+    expect(panel.hasAttribute("data-swapped")).toBe(true)
+    expect(panel.firstElementChild?.textContent).toContain("Shared strip")
+    expect(panel.firstElementChild?.hasAttribute("data-expanded")).toBe(true)
+    expect(
+      screen.getByRole("complementary", { name: "Inspector" })
+    ).toBeTruthy()
+    const separator = screen.getByRole("separator", {
+      name: "Resize secondary panel",
+    })
+    expect(separator.getAttribute("aria-valuenow")).toBe("160")
+    separator.focus()
+    await user.keyboard("{Enter}")
+    expect(panel.firstElementChild?.hasAttribute("data-expanded")).toBe(false)
+    await user.keyboard("{Enter}")
+    expect(panel.firstElementChild?.hasAttribute("data-expanded")).toBe(true)
   })
 })

package/src/components/blocks/scaffold/index.ts

@@ -23,6 +23,10 @@ export {
   scaffoldPanelDimmedAtom,
   scaffoldPanelHiddenAtom,
   scaffoldStateAtom,
+  scaffoldPanelLayoutsAtom,
+  scaffoldInspectorWidthAtom,
+  resizeScaffoldInspectorAtom,
+  updateScaffoldPanelLayoutAtom,
   setScaffoldInspectorOpenAtom,
   toggleScaffoldInspectorAtom,
   toggleScaffoldPanelAtom,

package/src/components/blocks/scaffold/panel-close-button.tsx

@@ -4,7 +4,7 @@ import { RiCloseLine } from "@remixicon/react"
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import type { PanelFloatingButtonProps } from "./type"
+import type { IPanelFloatingButtonProps } from "./type"
 import { floatingButtonClass, revealOnPanelHoverClass } from "./utils"
 
 /** Floating close affordance in a panel's top-right corner. */
@@ -13,7 +13,7 @@ export function PanelCloseButton({
   label,
   sound = true,
   className,
-}: PanelFloatingButtonProps): React.ReactElement {
+}: IPanelFloatingButtonProps): React.ReactElement {
   return (
     <button
       id="scaffold-panel-close-button"

package/src/components/blocks/scaffold/panel-menu-button.tsx

@@ -6,7 +6,7 @@ import { More } from "iconsax-reactjs"
 import { LucideArrowUpDown, LucideChevronDown, LucideX } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import type { PanelMenuButtonProps } from "./type"
+import type { IPanelMenuButtonProps } from "./type"
 import { floatingButtonClass, revealOnPanelHoverClass } from "./utils"
 import { Button } from "@/components/ui/button"
 import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group.tsx"
@@ -34,7 +34,7 @@ export function PanelMenuButton({
   label,
   sound = true,
   className,
-}: PanelMenuButtonProps): React.ReactElement {
+}: IPanelMenuButtonProps): React.ReactElement {
   const canHover = useHoverCapable()
   const actionsId = React.useId()
   const groupRef = React.useRef<HTMLDivElement>(null)

package/src/components/blocks/scaffold/scaffold-actions.tsx

@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils"
 import { SCAFFOLD_EASE, SCAFFOLD_EDGE_GUTTER, SCAFFOLD_MORPH_DURATION } from "./constants"
 import { scaffoldInspectorOpenAtom } from "./scaffold-atom"
 import { useScaffoldContext } from "./scaffold-context"
-import type { ScaffoldActionsProps } from "./type"
+import type { IScaffoldActionsProps } from "./type"
 import { segmentVariants } from "./utils"
 import { Button } from "@/components/ui/button"
 import { SPRING_LAYOUT } from "@/lib/ease.ts"
@@ -30,7 +30,7 @@ export function ScaffoldActions({
   className,
   children,
   ...rest
-}: ScaffoldActionsProps): React.ReactElement {
+}: IScaffoldActionsProps): React.ReactElement {
   const { scaffoldId, inspectorWidth } = useScaffoldContext()
   const inspectorOpen = useAtomValue(scaffoldInspectorOpenAtom(scaffoldId))
   const reducedMotion = useReducedMotion()

package/src/components/blocks/scaffold/scaffold-atom.ts

@@ -16,16 +16,17 @@
  * the old `usePanelVisibility` hook needed has no equivalent here.
  */
 
+import type { IScaffoldPanelLayout } from "./type"
 import { atom } from "jotai"
 import type { Atom, Getter, Setter } from "jotai"
 
 import { SCAFFOLD_PANEL_CAPACITY } from "./constants"
 import type {
-  ScaffoldConfig,
-  ScaffoldHandlers,
-  ScaffoldInstanceId,
-  ScaffoldPanelVisibility,
-  ScaffoldState,
+  IScaffoldConfig,
+  IScaffoldHandlers,
+  TScaffoldInstanceId,
+  IScaffoldPanelVisibility,
+  IScaffoldState,
 } from "./type"
 import {
   EMPTY_SCAFFOLD_VISIBILITY,
@@ -33,29 +34,29 @@ import {
   reconcileVisibility,
 } from "./utils"
 
-const DEFAULT_CONFIG: ScaffoldConfig = { controlsInspector: false }
-const NO_HANDLERS: ScaffoldHandlers = {}
+const DEFAULT_CONFIG: IScaffoldConfig = { controlsInspector: false }
+const NO_HANDLERS: IScaffoldHandlers = {}
 const NO_PANEL_IDS: readonly string[] = []
 
 // ── families ───────────────────────────────────────────────────────────────
 
-type Family<AtomType> = ((id: ScaffoldInstanceId) => AtomType) & {
-  remove: (id: ScaffoldInstanceId) => void
+type TFamily<AtomType> = ((id: TScaffoldInstanceId) => AtomType) & {
+  remove: (id: TScaffoldInstanceId) => void
 }
 
-const families: { remove: (id: ScaffoldInstanceId) => void }[] = []
+const families: { remove: (id: TScaffoldInstanceId) => void }[] = []
 
-function keyed<AtomType>(create: (id: ScaffoldInstanceId) => AtomType) {
-  const cache = new Map<ScaffoldInstanceId, AtomType>()
-  const family = ((id: ScaffoldInstanceId) => {
+function keyed<AtomType>(create: (id: TScaffoldInstanceId) => AtomType) {
+  const cache = new Map<TScaffoldInstanceId, AtomType>()
+  const family = ((id: TScaffoldInstanceId) => {
     let instance = cache.get(id)
     if (instance === undefined) {
       instance = create(id)
       cache.set(id, instance)
     }
     return instance
-  }) as Family<AtomType>
-  family.remove = (id: ScaffoldInstanceId) => {
+  }) as TFamily<AtomType>
+  family.remove = (id: TScaffoldInstanceId) => {
     cache.delete(id)
   }
   families.push(family)
@@ -72,7 +73,7 @@ function stateFamily<Value>(name: string, initialValue: Value) {
 
 function readFamily<Value>(
   name: string,
-  read: (get: Getter, id: ScaffoldInstanceId) => Value
+  read: (get: Getter, id: TScaffoldInstanceId) => Value
 ) {
   return keyed((id) => {
     const instance = atom((get) => read(get, id))
@@ -86,7 +87,7 @@ function actionFamily<Args extends unknown[]>(
   write: (
     get: Getter,
     set: Setter,
-    id: ScaffoldInstanceId,
+    id: TScaffoldInstanceId,
     ...args: Args
   ) => void
 ) {
@@ -104,10 +105,10 @@ function actionFamily<Args extends unknown[]>(
  * rule from the tree, at panel scale. Removal drops a whole scaffold. */
 function panelFamily<Value>(
   name: string,
-  read: (get: Getter, id: ScaffoldInstanceId, panelId: string) => Value
+  read: (get: Getter, id: TScaffoldInstanceId, panelId: string) => Value
 ) {
-  const cache = new Map<ScaffoldInstanceId, Map<string, Atom<Value>>>()
-  const family = (id: ScaffoldInstanceId, panelId: string): Atom<Value> => {
+  const cache = new Map<TScaffoldInstanceId, Map<string, Atom<Value>>>()
+  const family = (id: TScaffoldInstanceId, panelId: string): Atom<Value> => {
     let panels = cache.get(id)
     if (panels === undefined) {
       panels = new Map()
@@ -123,7 +124,7 @@ function panelFamily<Value>(
     return instance
   }
   families.push({
-    remove: (id: ScaffoldInstanceId) => {
+    remove: (id: TScaffoldInstanceId) => {
       cache.delete(id)
     },
   })
@@ -152,7 +153,7 @@ export const scaffoldMeasuredCapacityAtom = stateFamily<number | null>(
 )
 
 /** @internal The three visibility lists, settled as one value. */
-export const scaffoldVisibilityAtom = stateFamily<ScaffoldPanelVisibility>(
+export const scaffoldVisibilityAtom = stateFamily<IScaffoldPanelVisibility>(
   "visibility",
   EMPTY_SCAFFOLD_VISIBILITY
 )
@@ -163,13 +164,13 @@ export const scaffoldHoveredPanelIdAtom = stateFamily<string | null>(
 )
 
 /** @internal */
-export const scaffoldConfigAtom = stateFamily<ScaffoldConfig>(
+export const scaffoldConfigAtom = stateFamily<IScaffoldConfig>(
   "config",
   DEFAULT_CONFIG
 )
 
 /** @internal */
-export const scaffoldHandlersAtom = stateFamily<ScaffoldHandlers>(
+export const scaffoldHandlersAtom = stateFamily<IScaffoldHandlers>(
   "handlers",
   NO_HANDLERS
 )
@@ -179,8 +180,7 @@ export const scaffoldHandlersAtom = stateFamily<ScaffoldHandlers>(
 /** How many panels fit side by side; the cap while the canvas is unmeasured. */
 export const scaffoldPanelCapacityAtom = readFamily(
   "panelCapacity",
-  (get, id) =>
-    get(scaffoldMeasuredCapacityAtom(id)) ?? SCAFFOLD_PANEL_CAPACITY
+  (get, id) => get(scaffoldMeasuredCapacityAtom(id)) ?? SCAFFOLD_PANEL_CAPACITY
 )
 
 /** Ids of panels currently hidden (auto + user), for tabs to reflect. */
@@ -218,13 +218,54 @@ export const scaffoldPanelDimmedAtom = panelFamily(
   }
 )
 
+export const scaffoldPanelLayoutsAtom = stateFamily<
+  Record<string, IScaffoldPanelLayout>
+>("panel-layouts", {})
+export const scaffoldActiveResizeAtom = stateFamily<string | null>(
+  "active-resize",
+  null
+)
+export const scaffoldInspectorWidthAtom = stateFamily<number | null>(
+  "inspector-width",
+  null
+)
+export const resizeScaffoldInspectorAtom = actionFamily<[number]>(
+  "resize-inspector",
+  (_get, set, id, width) => {
+    if (Number.isFinite(width))
+      set(scaffoldInspectorWidthAtom(id), Math.max(180, width))
+  }
+)
+export const updateScaffoldPanelLayoutAtom = actionFamily<
+  [string, Partial<IScaffoldPanelLayout>]
+>("update-panel-layout", (get, set, id, panelId, patch) => {
+  const layouts = get(scaffoldPanelLayoutsAtom(id))
+  const safe = { ...patch }
+  if (safe.width !== undefined && Number.isFinite(safe.width))
+    set(scaffoldActiveResizeAtom(id), panelId)
+  if (safe.width !== undefined)
+    safe.width = Number.isFinite(safe.width)
+      ? Math.max(320, safe.width)
+      : undefined
+  if (safe.secondarySize !== undefined)
+    safe.secondarySize = Number.isFinite(safe.secondarySize)
+      ? Math.max(56, safe.secondarySize)
+      : undefined
+  set(scaffoldPanelLayoutsAtom(id), {
+    ...layouts,
+    [panelId]: { ...layouts[panelId], ...safe },
+  })
+})
+
 /** The whole state of one scaffold. This changes on every hover move, so a
  * component that reads one field should subscribe to that field's atom
  * instead: `useAtomValue(scaffoldInspectorOpenAtom("workspace"))`. */
-export const scaffoldStateAtom = readFamily<ScaffoldState>(
+export const scaffoldStateAtom = readFamily<IScaffoldState>(
   "state",
   (get, id) => ({
     inspectorOpen: get(scaffoldInspectorOpenAtom(id)),
+    inspectorWidth: get(scaffoldInspectorWidthAtom(id)),
+    panelLayouts: get(scaffoldPanelLayoutsAtom(id)),
     panelCapacity: get(scaffoldPanelCapacityAtom(id)),
     hiddenPanelIds: get(scaffoldHiddenPanelIdsAtom(id)),
     hoveredPanelId: get(scaffoldHoveredPanelIdAtom(id)),
@@ -235,7 +276,7 @@ export const scaffoldStateAtom = readFamily<ScaffoldState>(
 
 /** Re-settle the lists after any input moved. Inert when nothing changes —
  * `reconcileVisibility` returns `prev` untouched then. */
-function settleVisibility(get: Getter, set: Setter, id: ScaffoldInstanceId) {
+function settleVisibility(get: Getter, set: Setter, id: TScaffoldInstanceId) {
   const prev = get(scaffoldVisibilityAtom(id))
   const settled = reconcileVisibility(
     prev,
@@ -280,7 +321,7 @@ export const toggleScaffoldPanelAtom = actionFamily<[panelId: string]>(
       prev.autoHidden.includes(panelId) || prev.userHidden.includes(panelId)
     if (!hidden && prev.visibleOrder.length <= 1) return
 
-    const next: ScaffoldPanelVisibility = hidden
+    const next: IScaffoldPanelVisibility = hidden
       ? {
           // Showing: newest activation — reconcile evicts the oldest
           // visible panel if the canvas can't fit one more.
@@ -341,7 +382,7 @@ export const measureScaffoldCanvasAtom = actionFamily<[width: number]>(
 
 /** @internal Projection of the mounted root's controlled props. */
 export const projectScaffoldPropsAtom = actionFamily<
-  [config: ScaffoldConfig, inspectorOpen: boolean | undefined]
+  [config: IScaffoldConfig, inspectorOpen: boolean | undefined]
 >("projectProps", (_get, set, id, config, inspectorOpen) => {
   set(scaffoldConfigAtom(id), config)
   if (config.controlsInspector && inspectorOpen !== undefined)
@@ -350,7 +391,7 @@ export const projectScaffoldPropsAtom = actionFamily<
 
 /** @internal */
 export const setScaffoldHandlersAtom = actionFamily<
-  [handlers: ScaffoldHandlers]
+  [handlers: IScaffoldHandlers]
 >("setHandlers", (_get, set, id, handlers) => {
   set(scaffoldHandlersAtom(id), handlers)
 })
@@ -368,6 +409,9 @@ export const seedScaffoldInspectorAtom = actionFamily<[open: boolean]>(
 
 export const resetScaffoldAtom = actionFamily<[]>("reset", (_get, set, id) => {
   set(scaffoldInspectorOpenAtom(id), false)
+  set(scaffoldInspectorWidthAtom(id), null)
+  set(scaffoldPanelLayoutsAtom(id), {})
+  set(scaffoldActiveResizeAtom(id), null)
   set(scaffoldPanelIdsAtom(id), NO_PANEL_IDS)
   set(scaffoldMeasuredCapacityAtom(id), null)
   set(scaffoldVisibilityAtom(id), EMPTY_SCAFFOLD_VISIBILITY)
@@ -378,6 +422,6 @@ export const resetScaffoldAtom = actionFamily<[]>("reset", (_get, set, id) => {
 
 /** Forget a scaffold entirely — every family drops the key so the store can
  * release its state. Call on teardown of a named instance. */
-export function removeScaffoldInstance(id: ScaffoldInstanceId): void {
+export function removeScaffoldInstance(id: TScaffoldInstanceId): void {
   for (const family of families) family.remove(id)
 }