@exegia/corpora-ui 1.0.0 → 3.0.0

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

@@ -1,6 +1,5 @@
 "use client"
 
-import { AnimatePresence } from "motion/react"
 import * as React from "react"
 import { useAtomValue, useSetAtom } from "jotai"
 
@@ -9,13 +8,15 @@ import {
   measureScaffoldCanvasAtom,
   registerScaffoldPanelIdsAtom,
   scaffoldHiddenPanelIdsAtom,
+  scaffoldPanelLayoutsAtom,
+  scaffoldActiveResizeAtom,
 } from "./scaffold-atom"
 import { useScaffoldContext } from "./scaffold-context"
-import type { ScaffoldCanvasProps, ScaffoldPanelProps } from "./type"
+import type { TScaffoldCanvasProps, IScaffoldPanelProps } from "./type"
 
 /** A canvas child's panel id when it opted into responsive hiding. */
 function panelIdOf(child: React.ReactNode): string | undefined {
-  if (!React.isValidElement<Pick<ScaffoldPanelProps, "id">>(child))
+  if (!React.isValidElement<Pick<IScaffoldPanelProps, "id">>(child))
     return undefined
   const id = child.props.id
   return typeof id === "string" ? id : undefined
@@ -31,19 +32,23 @@ export function ScaffoldCanvas({
   className,
   children,
   ...rest
-}: ScaffoldCanvasProps): React.ReactElement {
+}: TScaffoldCanvasProps): React.ReactElement {
   const { scaffoldId } = useScaffoldContext()
+  const layouts = useAtomValue(scaffoldPanelLayoutsAtom(scaffoldId))
+  const activeResize = useAtomValue(scaffoldActiveResizeAtom(scaffoldId))
   const hiddenPanelIds = useAtomValue(scaffoldHiddenPanelIdsAtom(scaffoldId))
   const registerPanelIds = useSetAtom(registerScaffoldPanelIdsAtom(scaffoldId))
   const measureCanvas = useSetAtom(measureScaffoldCanvasAtom(scaffoldId))
+  const [width, setWidth] = React.useState(0)
   const ref = React.useRef<HTMLDivElement>(null)
 
   React.useLayoutEffect(() => {
     const element = ref.current
     if (!element || typeof ResizeObserver === "undefined") return
-    const observer = new ResizeObserver(([entry]) =>
+    const observer = new ResizeObserver(([entry]) => {
       measureCanvas(entry.contentRect.width)
-    )
+      setWidth(entry.contentRect.width)
+    })
     observer.observe(element)
     return () => observer.disconnect()
   }, [measureCanvas])
@@ -68,16 +73,90 @@ export function ScaffoldCanvas({
     return id === undefined || !hiddenPanelIds.includes(id)
   })
 
+  // With three columns, the center consumes the flexible space so Motion
+  // Panels has at most one sized surface on either side.
+  const fillChild =
+    visibleChildren.length > 2
+      ? visibleChildren[Math.floor(visibleChildren.length / 2)]
+      : ([...visibleChildren]
+          .reverse()
+          .find((child) => panelIdOf(child) !== activeResize) ??
+        visibleChildren.at(-1))
+  const count = visibleChildren.length
+  const equalWidth =
+    width > 0 ? (width - Math.max(0, count - 1) * 8) / Math.max(1, count) : 320
+  const sized = visibleChildren.filter((child) => child !== fillChild)
+  const fillRequest =
+    panelIdOf(fillChild) === activeResize
+      ? (layouts[activeResize ?? ""]?.width ?? 320)
+      : 320
+  const fillReserve = Math.max(
+    320,
+    Math.min(fillRequest, width - Math.max(0, count - 1) * 328)
+  )
+  const availableExtra = Math.max(
+    0,
+    width - Math.max(0, count - 1) * 8 - (count - 1) * 320 - fillReserve
+  )
+  const requestedExtra = sized.reduce<number>(
+    (sum, child) =>
+      sum +
+      Math.max(0, (layouts[panelIdOf(child) ?? ""]?.width ?? equalWidth) - 320),
+    0
+  )
+  const resizingFill = panelIdOf(fillChild) === activeResize
+  const ratio =
+    requestedExtra > 0 && (resizingFill || requestedExtra > availableExtra)
+      ? availableExtra / requestedExtra
+      : 1
+  const widths = new Map(
+    sized.map((child) => [
+      child,
+      320 +
+        (resizingFill && requestedExtra === 0
+          ? availableExtra / Math.max(1, sized.length)
+          : Math.max(
+              0,
+              (layouts[panelIdOf(child) ?? ""]?.width ?? equalWidth) - 320
+            ) * ratio),
+    ])
+  )
+
   return (
     <div
-      className={cn("relative flex min-h-0 w-full flex-1 gap-2", className)}
+      className={cn("min-h-0 gap-2 relative flex w-full flex-1", className)}
       data-slot="scaffold-canvas"
+      data-motion-panels-fill=""
       ref={ref}
       {...rest}
     >
-      {/* Sync mode (no `mode="wait"`): an exiting panel shrinks in place
-          while its siblings grow into the freed room in the same beat. */}
-      <AnimatePresence initial={false}>{visibleChildren}</AnimatePresence>
+      {/* Keep folded panels mounted to preserve their content state. */}
+      {childArray.map((child) => {
+        if (!React.isValidElement(child)) return child
+        const hidden = !visibleChildren.includes(child)
+        return React.cloneElement(
+          child as React.ReactElement<Record<string, unknown>>,
+          {
+            _panelHidden: hidden,
+            _panelFill: child === fillChild,
+            _panelEnd:
+              childArray.indexOf(child) < childArray.indexOf(fillChild!),
+            _panelMax: Math.max(
+              320,
+              width -
+                Math.max(0, count - 1) * 8 -
+                320 -
+                sized
+                  .filter((other) => other !== child)
+                  .reduce<number>(
+                    (sum, other) => sum + (widths.get(other) ?? 320),
+                    0
+                  )
+            ),
+            _panelWidth: widths.get(child) ?? equalWidth,
+          }
+        )
+      })}
     </div>
   )
 }

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

@@ -2,16 +2,16 @@
 
 import * as React from "react"
 
-import type { ScaffoldContextValue } from "./type"
+import type { IScaffoldContextValue } from "./type"
 
-export const ScaffoldContext = React.createContext<ScaffoldContextValue | null>(
+export const ScaffoldContext = React.createContext<IScaffoldContextValue | null>(
   null
 )
 
 /** Read the scaffold's identity (`scaffoldId`, `inspectorWidth`); must run
  * under `Scaffold.Root`. State itself lives in the store — subscribe to the
  * atoms, or reach them by id through `useScaffoldState` / `useScaffoldActions`. */
-export function useScaffoldContext(): ScaffoldContextValue {
+export function useScaffoldContext(): IScaffoldContextValue {
   const context = React.useContext(ScaffoldContext)
   if (!context) {
     throw new Error("useScaffoldContext must be used within <Scaffold.Root>")

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

@@ -5,17 +5,25 @@ import * as React from "react"
 
 import { useAtomValue, useSetAtom } from "jotai"
 
+import { useMotionPanel } from "@/lib/use-motion-panel"
 import { cn } from "@/lib/utils"
-import { SCAFFOLD_EASE, SCAFFOLD_EDGE_GUTTER, SCAFFOLD_MORPH_DURATION } from "./constants"
+import {
+  SCAFFOLD_EASE,
+  SCAFFOLD_EDGE_GUTTER,
+  SCAFFOLD_MORPH_DURATION,
+} from "./constants"
 import {
   scaffoldInspectorOpenAtom,
   toggleScaffoldInspectorAtom,
+  resizeScaffoldInspectorAtom,
+  setScaffoldInspectorOpenAtom,
 } from "./scaffold-atom"
 import { useScaffoldContext } from "./scaffold-context"
-import type { ScaffoldInspectorProps } from "./type"
+import type { IScaffoldInspectorProps } from "./type"
 import { GlassContainer } from "@/components/ui/glasscn/glass-container.tsx"
 import { Button } from "@/components/ui/button"
 import { LucideX } from "lucide-react"
+import { SCAFFOLD_BEZEL_CLASSES } from "./utils"
 
 /**
  * The right-hand drawer: a brighter card that slides in over the canvas,
@@ -28,23 +36,53 @@ export function ScaffoldInspector({
   name = "Inspector",
   className,
   ...rest
-}: ScaffoldInspectorProps): React.ReactElement {
+}: IScaffoldInspectorProps): React.ReactElement {
   const { scaffoldId, inspectorWidth } = useScaffoldContext()
   const inspectorOpen = useAtomValue(scaffoldInspectorOpenAtom(scaffoldId))
   const toggleInspector = useSetAtom(toggleScaffoldInspectorAtom(scaffoldId))
   const reducedMotion = useReducedMotion()
 
+  const resizeInspector = useSetAtom(resizeScaffoldInspectorAtom(scaffoldId))
+  const setInspectorOpen = useSetAtom(setScaffoldInspectorOpenAtom(scaffoldId))
+  const [availableWidth, setAvailableWidth] = React.useState<number>(Infinity)
+  const { panelRef, gripRef } = useMotionPanel({
+    size: Math.min(inspectorWidth, availableWidth),
+    minSize: 180,
+    maxSize: "90%",
+    defaultSize: 272,
+    collapsed: !inspectorOpen,
+    overshoot: false,
+    onSizeChange: (size) => resizeInspector(Number(size)),
+    onCollapsedChange: (collapsed) => setInspectorOpen(!collapsed),
+    transition: reducedMotion
+      ? { duration: 0 }
+      : { duration: SCAFFOLD_MORPH_DURATION, ease: SCAFFOLD_EASE },
+  })
+
+  React.useLayoutEffect(() => {
+    const parent = panelRef.current?.parentElement
+    if (!parent) return
+    const measure = () => {
+      if (parent.clientWidth) setAvailableWidth(parent.clientWidth * 0.9)
+    }
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(parent)
+    return () => observer.disconnect()
+  }, [panelRef])
+
   // Slide fully past the edge gutter and the drop shadow's blur radius.
   const offcanvasX = inspectorWidth + SCAFFOLD_EDGE_GUTTER + 12
 
   return (
     <motion.aside
       id="scaffold-inspector"
+      ref={panelRef}
       animate={{ x: inspectorOpen ? 0 : offcanvasX }}
       aria-hidden={inspectorOpen ? undefined : true}
       aria-label={name}
       className={cn(
-        "absolute right-0 z-20 my-2 flex h-full max-h-[calc(100%-0.5rem)] w-96 flex-col",
+        "right-0 my-2 w-96 absolute z-20 flex h-full max-h-[calc(100%-0.5rem)] flex-col",
         !inspectorOpen && "pointer-events-none",
         className
       )}
@@ -52,20 +90,31 @@ export function ScaffoldInspector({
       inert={inspectorOpen ? undefined : true}
       initial={false}
       role="complementary"
-      style={{ width: inspectorWidth }}
+      style={{ overflow: inspectorOpen ? undefined : "clip" }}
       transition={{
         duration: reducedMotion ? 0 : SCAFFOLD_MORPH_DURATION,
         ease: SCAFFOLD_EASE,
       }}
       {...rest}
     >
+      <div
+        ref={gripRef}
+        role="separator"
+        aria-label="Resize inspector"
+        aria-orientation="vertical"
+        tabIndex={inspectorOpen ? 0 : -1}
+        className="inset-y-0 -left-1 w-2 absolute z-30 cursor-col-resize touch-none focus-visible:outline-2 focus-visible:outline-ring"
+      />
       <GlassContainer
-        className="flex flex-1 flex-col rounded-md border-t border-white bg-neutral-50/20 shadow-inner shadow-lg dark:border-neutral-800 dark:bg-black/5"
+        className={cn(
+          "bg-neutral-50/20 dark:bg-black/5 flex flex-1 flex-col rounded-md",
+          SCAFFOLD_BEZEL_CLASSES
+        )}
         glassVariant="subtle"
       >
         <div
           id="scaffold-inspector-header"
-          className="flex h-12 items-center justify-between gap-2 border-b pr-3 pl-4"
+          className="h-12 gap-2 pr-3 pl-4 flex items-center justify-between border-b"
         >
           <span className="text-base font-normal text-card-foreground/70">
             {name}

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import type { ScaffoldMainProps } from "./type"
+import type { TScaffoldMainProps } from "./type"
 
 /**
  * The region right of the rail. Hosts `Scaffold.Actions` (top-right),
@@ -14,7 +14,7 @@ export function ScaffoldMain({
   className,
   children,
   ...rest
-}: ScaffoldMainProps): React.ReactElement {
+}: TScaffoldMainProps): React.ReactElement {
   return (
     <div
       id="scaffold-main"

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

@@ -2,7 +2,7 @@
 
 import { motion, useReducedMotion } from "motion/react"
 import * as React from "react"
-import { useState } from "react"
+import { useId } from "react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -10,12 +10,18 @@ import {
   SCAFFOLD_MORPH_DURATION,
   SCAFFOLD_PANEL_MIN_WIDTH,
 } from "./constants"
-import { useAtomValue } from "jotai"
+import { useAtomValue, useSetAtom } from "jotai"
 
+import { useMotionPanel } from "@/lib/use-motion-panel"
 import { PanelMenuButton } from "./panel-menu-button.tsx"
-import { scaffoldPanelDimmedAtom } from "./scaffold-atom"
+import {
+  scaffoldPanelDimmedAtom,
+  scaffoldPanelLayoutsAtom,
+  updateScaffoldPanelLayoutAtom,
+  toggleScaffoldPanelAtom,
+} from "./scaffold-atom"
 import { useScaffoldContext } from "./scaffold-context"
-import type { ScaffoldPanelProps, TSubPanelPosition } from "./type"
+import type { IScaffoldPanelProps } from "./type"
 import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-panel.tsx"
 
 /**
@@ -27,6 +33,11 @@ import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-pane
  */
 export function ScaffoldPanel({
   id,
+  _panelHidden = false,
+  _panelFill = true,
+  _panelWidth = 320,
+  _panelMax = 640,
+  _panelEnd = true,
   children,
   SecondaryPanel,
   onSwap,
@@ -35,7 +46,13 @@ export function ScaffoldPanel({
   swapLabel = "Swap panel content",
   sound = true,
   className,
-}: ScaffoldPanelProps): React.ReactElement {
+}: IScaffoldPanelProps & {
+  _panelHidden?: boolean
+  _panelFill?: boolean
+  _panelWidth?: number
+  _panelMax?: number
+  _panelEnd?: boolean
+}): React.ReactElement {
   const { scaffoldId } = useScaffoldContext()
   const reducedMotion = useReducedMotion()
 
@@ -50,89 +67,120 @@ export function ScaffoldPanel({
     ease: SCAFFOLD_EASE,
   }
 
-  const [subPanelPosition, setSubPanelPosition] =
-    useState<TSubPanelPosition>("top")
-  const [isSwapped, setIsSwapped] = useState<boolean>(false)
+  const generatedId = useId()
+  const panelId = id ?? generatedId
+  const layouts = useAtomValue(scaffoldPanelLayoutsAtom(scaffoldId))
+  const updateLayout = useSetAtom(updateScaffoldPanelLayoutAtom(scaffoldId))
+  const togglePanel = useSetAtom(toggleScaffoldPanelAtom(scaffoldId))
+  const panelLayout = layouts[panelId] ?? {}
+  const isSwapped = panelLayout.swapped ?? false
+  const secondaryExpanded = panelLayout.secondaryExpanded ?? false
   const handleSwap = () => {
-    setIsSwapped((prev) => !prev)
+    updateLayout(panelId, { swapped: !isSwapped })
     onSwap?.()
   }
+  const handleExpand = () =>
+    updateLayout(panelId, { secondaryExpanded: !secondaryExpanded })
+  const { panelRef, gripRef } = useMotionPanel({
+    size: _panelWidth,
+    minSize: SCAFFOLD_PANEL_MIN_WIDTH,
+    maxSize: _panelMax,
 
-  // Trades which sub-panel holds the flexible slot — the collapsed card grows
-  // into `flex-1` while the expanded one shrinks to the `min-h-14` strip.
-  const handleExpand = () => {
-    setSubPanelPosition((prev) => (prev === "top" ? "bottom" : "top"))
-  }
+    enabled: !_panelFill,
+    collapsed: _panelHidden,
+    overshoot: false,
+    transition,
+    onSizeChange: (size) => updateLayout(panelId, { width: Number(size) }),
+    onCollapsedChange: id
+      ? (collapsed) => {
+          if (collapsed !== _panelHidden) togglePanel(id)
+        }
+      : undefined,
+  })
 
-  // Enter/exit grow and shrink the panel's slot in the flex row: flexGrow
-  // carries the width (the panel is basis-0, so `width` itself is inert on
-  // the main axis) and minWidth releases the 320px floor so the slot can
-  // reach zero. scaleX pins the visual anchor to the panel's center —
-  // flexbox collapses a slot toward whichever edge its neighbors grow
-  // from, so without it the panel would wipe from one side.
-  const hidden = { flexGrow: 0, minWidth: 0, scaleX: 0, opacity: 0 }
+  const primaryPanel = (
+    <ScaffoldSubPanel
+      key="top"
+      id="top"
+      expanded={!secondaryExpanded}
+      primary
+      panelId={panelId}
+    >
+      {children}
+    </ScaffoldSubPanel>
+  )
+  const secondaryPanel = SecondaryPanel ? (
+    <ScaffoldSubPanel
+      key="bottom"
+      id="bottom"
+      expanded={secondaryExpanded}
+      panelId={panelId}
+      swapped={isSwapped}
+    >
+      {SecondaryPanel}
+    </ScaffoldSubPanel>
+  ) : null
+  const seam = (onSwap || onCloseSecondary) && SecondaryPanel && (
+    // `layout` keeps the seam glued to the moving boundary while the
+    // cards trade places around it.
+    <motion.div
+      key="seam"
+      layout="position"
+      data-motion-panels-separator=""
+      transition={transition}
+      className="h-2 relative flex items-center justify-center"
+    >
+      <PanelMenuButton
+        label={swapLabel}
+        onClick={handleSwap}
+        onExpand={handleExpand}
+        onCloseSecondary={onCloseSecondary}
+        secondaryExpanded={secondaryExpanded}
+        swapped={isSwapped}
+        sound={sound}
+      />
+    </motion.div>
+  )
 
   return (
     <motion.section
+      initial={false}
       id={id ?? "scaffold-panel"}
-      animate={{
-        flexGrow: 1,
-        // id panels opt into responsive hiding, so each visible one can
-        // hold the 320px floor — the canvas hides siblings before this
-        // floor would overflow it.
-        minWidth: id !== undefined ? SCAFFOLD_PANEL_MIN_WIDTH : 0,
-        scaleX: 1,
-        // The hovered tab's panel keeps full opacity; the rest fade back
-        // so the tab↔panel pairing reads at a glance. Inline (not a
-        // class) because motion owns this element's opacity.
-        opacity: dimmed ? 0.35 : 1,
+      ref={panelRef}
+      data-motion-panels-fill={_panelFill ? "" : undefined}
+      data-motion-panels-separator={_panelHidden ? "" : undefined}
+      aria-hidden={_panelHidden || undefined}
+      inert={_panelHidden || undefined}
+      animate={{ opacity: dimmed ? 0.35 : 1 }}
+      style={{
+        flex: _panelFill ? "1 1 0%" : "0 0 auto",
+        minWidth: 0,
+        marginRight: _panelHidden ? -8 : 0,
+        overflow: _panelHidden ? "clip" : undefined,
       }}
-      initial={hidden}
-      exit={hidden}
-      style={{ originX: 0.5 }}
       aria-label={name}
-      className={cn(
-        "group/panel relative flex w-full min-w-0 flex-1",
-        // Swap flips the direction as a class, NOT an animate target:
-        // flex-direction is discrete, so motion would apply it instantly —
-        // the flip lands in one commit and the children's `layout` FLIP is
-        // what glides the cards past each other.
-        isSwapped ? "flex-col-reverse" : "flex-col",
-        className
-      )}
-      layout
+      className={cn("group/panel min-w-0 relative flex", "flex-col", className)}
       data-slot="scaffold-panel"
       data-dimmed={dimmed ? "" : undefined}
       data-swapped={isSwapped ? "" : undefined}
       transition={transition}
     >
-      <ScaffoldSubPanel id="top" expanded={subPanelPosition === "top"} primary>
-        {children}
-      </ScaffoldSubPanel>
-      {(onSwap || onCloseSecondary) && SecondaryPanel && (
-        // `layout` keeps the seam glued to the moving boundary while the
-        // cards trade places around it.
-        <motion.div
-          layout
-          transition={transition}
-          className="relative flex h-2 items-center justify-center"
-        >
-          <PanelMenuButton
-            label={swapLabel}
-            onClick={handleSwap}
-            onExpand={handleExpand}
-            onCloseSecondary={onCloseSecondary}
-            secondaryExpanded={subPanelPosition === "bottom"}
-            swapped={isSwapped}
-            sound={sound}
-          />
-        </motion.div>
-      )}
-      {SecondaryPanel && (
-        <ScaffoldSubPanel id="bottom" expanded={subPanelPosition === "bottom"}>
-          {SecondaryPanel}
-        </ScaffoldSubPanel>
+      {!_panelFill && (
+        <div
+          ref={gripRef}
+          role="separator"
+          aria-label={`Resize ${name ?? "panel"}`}
+          aria-orientation="vertical"
+          tabIndex={_panelHidden ? -1 : 0}
+          className={cn(
+            "inset-y-0 w-2 absolute z-10 cursor-col-resize touch-none focus-visible:outline-2 focus-visible:outline-ring",
+            _panelEnd ? "-right-1" : "-left-1"
+          )}
+        />
       )}
+      {isSwapped ? secondaryPanel : primaryPanel}
+      {seam}
+      {isSwapped ? primaryPanel : secondaryPanel}
     </motion.section>
   )
 }

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

@@ -1,22 +1,23 @@
 "use client"
 
 import * as React from "react"
-import { useSetAtom } from "jotai"
+import { useAtomValue, useSetAtom } from "jotai"
 
 import { cn } from "@/lib/utils"
 import { SCAFFOLD_INSPECTOR_WIDTH } from "./constants"
 import {
   projectScaffoldPropsAtom,
+  scaffoldInspectorWidthAtom,
   removeScaffoldInstance,
   seedScaffoldInspectorAtom,
   setScaffoldHandlersAtom,
 } from "./scaffold-atom"
 import { ScaffoldContext } from "./scaffold-context"
 import type {
-  ScaffoldConfig,
-  ScaffoldContextValue,
-  ScaffoldHandlers,
-  ScaffoldRootProps,
+  IScaffoldConfig,
+  IScaffoldContextValue,
+  IScaffoldHandlers,
+  IScaffoldRootProps,
 } from "./type"
 import type { ClassNameValue } from "tailwind-merge"
 
@@ -43,17 +44,17 @@ export function ScaffoldRoot({
   className,
   children,
   ...rest
-}: ScaffoldRootProps): React.ReactElement {
+}: IScaffoldRootProps): React.ReactElement {
   const generatedId = React.useId()
   const scaffoldId = scaffoldIdProp ?? generatedId
   const background: ClassNameValue = `bg-linear-to-tr/increasing from-neutral-200 via-neutral-100 to-stone-200 dark:from-neutral-900 dark:via-neutral-950 dark:to-stone-950`
 
   const controlsInspector = inspectorOpenProp !== undefined
-  const config = React.useMemo<ScaffoldConfig>(
+  const config = React.useMemo<IScaffoldConfig>(
     () => ({ controlsInspector }),
     [controlsInspector]
   )
-  const handlers = React.useMemo<ScaffoldHandlers>(
+  const handlers = React.useMemo<IScaffoldHandlers>(
     () => ({ onInspectorOpenChange }),
     [onInspectorOpenChange]
   )
@@ -91,9 +92,10 @@ export function ScaffoldRoot({
     return () => removeScaffoldInstance(scaffoldId)
   }, [scaffoldIdProp, scaffoldId])
 
-  const value = React.useMemo<ScaffoldContextValue>(
-    () => ({ scaffoldId, inspectorWidth }),
-    [scaffoldId, inspectorWidth]
+  const storedWidth = useAtomValue(scaffoldInspectorWidthAtom(scaffoldId))
+  const value = React.useMemo<IScaffoldContextValue>(
+    () => ({ scaffoldId, inspectorWidth: storedWidth ?? inspectorWidth }),
+    [scaffoldId, inspectorWidth, storedWidth]
   )
 
   return (
@@ -104,7 +106,7 @@ export function ScaffoldRoot({
           // `clip`, not `hidden`: the off canvas inspector extends the
           // scrollable overflow, and focus/scrollIntoView would scroll a
           // hidden-overflow root sideways to reveal it.
-          "relative isolate flex size-full flex-1 overflow-clip pr-2 pb-2",
+          "pr-2 pb-2 relative isolate flex size-full flex-1 overflow-clip",
           background,
           className
         )}

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import type { ScaffoldSidebarProps } from "./type"
+import type { TScaffoldSidebarProps } from "./type"
 
 /**
  * The 64px icon rail on the left edge. Transparent — it sits directly on
@@ -13,7 +13,7 @@ export function ScaffoldSidebar({
   className,
   children,
   ...rest
-}: ScaffoldSidebarProps): React.ReactElement {
+}: TScaffoldSidebarProps): React.ReactElement {
   return (
     <nav
       id="scaffold-sidebar"