@exegia/corpora-ui 0.18.0 → 0.20.0

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

@@ -2,14 +2,18 @@
 
 import { motion, useReducedMotion } from "motion/react"
 import * as React from "react"
+import { useState } from "react"
 
 import { cn } from "@/lib/utils"
-import { SCAFFOLD_EASE, SCAFFOLD_MORPH_DURATION } from "./constants"
-import { PanelCloseButton } from "./panel-close-button"
+import {
+  SCAFFOLD_EASE,
+  SCAFFOLD_MORPH_DURATION,
+  SCAFFOLD_PANEL_MIN_WIDTH,
+} from "./constants"
 import { PanelMenuButton } from "./panel-menu-button.tsx"
+import { useScaffoldContext } from "./scaffold-context"
 import type { ScaffoldPanelProps, TSubPanelPosition } from "./type"
 import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-panel.tsx"
-import { useState } from "react"
 
 /**
  * A canvas panel: a primary card plus an optional secondary strip below it,
@@ -19,80 +23,102 @@ import { useState } from "react"
  * primary slot while the primary card shrinks down into the strip.
  */
 export function ScaffoldPanel({
+  id,
   children,
   SecondaryPanel,
-  onClose,
   onSwap,
+  onCloseSecondary,
   name,
-  closeLabel = "Close panel",
   swapLabel = "Swap panel content",
   sound = true,
   className,
 }: ScaffoldPanelProps): React.ReactElement {
-
+  const { hoveredPanelId } = useScaffoldContext()
   const reducedMotion = useReducedMotion()
 
+  // A hovered tab spotlights its own panel — every other id'd panel
+  // fades back so the pairing reads at a glance.
+  const dimmed =
+    id !== undefined && hoveredPanelId !== null && hoveredPanelId !== id
+
   const transition = {
     duration: reducedMotion ? 0 : SCAFFOLD_MORPH_DURATION,
     ease: SCAFFOLD_EASE,
   }
 
-  const [subPanelPosition, setSubPanelPosition] = useState<TSubPanelPosition>("top")
+  const [subPanelPosition, setSubPanelPosition] =
+    useState<TSubPanelPosition>("top")
   const [isSwapped, setIsSwapped] = useState<boolean>(false)
   const handleSwap = () => {
-    setIsSwapped((prev) => !prev);
-    onSwap?.();
-  };
+    setIsSwapped((prev) => !prev)
+    onSwap?.()
+  }
 
   // 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"));
-  };
+    setSubPanelPosition((prev) => (prev === "top" ? "bottom" : "top"))
+  }
+
+  // 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 }
 
   return (
     <motion.section
-      id="scaffold-panel"
-      animate={{ flexDirection: isSwapped ? "column-reverse" : "column" }}
+      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,
+        flexDirection: isSwapped ? "column-reverse" : "column",
+        // 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,
+      }}
+      initial={hidden}
+      exit={hidden}
+      style={{ originX: 0.5 }}
       aria-label={name}
       className={cn(
-        "group/panel relative flex min-w-80 flex-1 flex-col",
+        "group/panel relative flex min-w-0 flex-1 flex-col w-full",
         className
       )}
-      layout
+      layout={"size"}
       data-slot="scaffold-panel"
+      data-dimmed={dimmed ? "" : undefined}
       data-swapped={isSwapped ? "" : undefined}
       transition={transition}
     >
-      <ScaffoldSubPanel
-        id="top"
-        expanded={subPanelPosition === "top"}
-        primary
-      >
+      <ScaffoldSubPanel id="top" expanded={subPanelPosition === "top"} primary>
         {children}
       </ScaffoldSubPanel>
-      {onSwap && SecondaryPanel && (
-        <div className="relative flex items-center justify-center h-2">
+      {(onSwap || onCloseSecondary) && SecondaryPanel && (
+        <div 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}
           />
         </div>
       )}
       {SecondaryPanel && (
-        <ScaffoldSubPanel
-          id="bottom"
-          expanded={subPanelPosition === "bottom"}
-        >
+        <ScaffoldSubPanel id="bottom" expanded={subPanelPosition === "bottom"}>
           {SecondaryPanel}
         </ScaffoldSubPanel>
       )}
-      {onClose && (
-        <PanelCloseButton label={closeLabel} onClick={onClose} sound={sound} />
-      )}
     </motion.section>
   )
 }

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

@@ -5,6 +5,7 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 import { SCAFFOLD_INSPECTOR_WIDTH } from "./constants"
 import { ScaffoldContext } from "./scaffold-context"
+import { usePanelVisibility } from "./use-panel-visibility"
 import type { ScaffoldContextValue, ScaffoldRootProps } from "./type"
 import type { ClassNameValue } from "tailwind-merge"
 
@@ -41,9 +42,23 @@ export function ScaffoldRoot({
     [inspectorOpen, setInspectorOpen]
   )
 
+  const panelVisibility = usePanelVisibility()
+
   const value = React.useMemo<ScaffoldContextValue>(
-    () => ({ inspectorOpen, inspectorWidth, setInspectorOpen, toggleInspector }),
-    [inspectorOpen, inspectorWidth, setInspectorOpen, toggleInspector]
+    () => ({
+      inspectorOpen,
+      inspectorWidth,
+      setInspectorOpen,
+      toggleInspector,
+      ...panelVisibility,
+    }),
+    [
+      inspectorOpen,
+      inspectorWidth,
+      setInspectorOpen,
+      toggleInspector,
+      panelVisibility,
+    ]
   )
 
   return (
@@ -54,7 +69,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 h-full w-full flex-1 overflow-clip pr-2 pb-2",
+          "relative isolate flex size-full flex-1 overflow-clip pr-2 pb-2",
           background,
           className
         )}

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

@@ -19,7 +19,7 @@ export function ScaffoldSidebar({
       id="scaffold-sidebar"
       aria-label="Primary"
       className={cn(
-        "flex min-w-20 shrink-0 flex-col items-center gap-1 pt-8 pb-2",
+        "flex h-full min-w-12 shrink-0 flex-col items-center gap-1 overflow-y-auto pt-10 pb-2",
         className
       )}
       data-slot="scaffold-sidebar"

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

@@ -0,0 +1,104 @@
+"use client"
+
+import { useReducedMotion } from "motion/react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { SPRING_LAYOUT } from "@/lib/ease.ts"
+import { useScaffoldContext } from "./scaffold-context"
+import type { ScaffoldTabProps } from "./type"
+import { segmentVariants } from "./utils"
+import { Button } from "@/components/ui/button"
+import { LucideAppWindow, LucideEyeOff, LucideX } from "lucide-react"
+import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group.tsx"
+
+/**
+ * A panel's tab inside the action cluster: its label plus a close
+ * affordance. Render one per open panel as Actions children, keyed —
+ * closes animate out of the pill. Omit `onClose` on the last remaining
+ * panel's tab; the canvas keeps at least one panel open.
+ *
+ * With `panelId` (matching a `Scaffold.Panel`'s `id`), the tab also fronts
+ * that panel's visibility: a hidden panel dims its tab behind an eye-off
+ * icon, and pressing the label toggles the panel — showing one past
+ * capacity hides the least-recently-activated panel in its place.
+ */
+export function ScaffoldTab({
+  children,
+  panelId,
+  onClose,
+  closeLabel = "Close panel",
+  sound = true,
+  className,
+  ...rest
+}: ScaffoldTabProps): React.ReactElement {
+  const { isPanelHidden, togglePanelVisibility, setPanelHovered } =
+    useScaffoldContext()
+  const reduce = useReducedMotion()
+  const transition = reduce ? { duration: 0 } : SPRING_LAYOUT
+
+  const hidden = panelId !== undefined && isPanelHidden(panelId)
+
+  // A tab closed mid-hover never fires pointer-leave — release the
+  // spotlight it holds so the canvas doesn't stay dimmed.
+  React.useEffect(() => {
+    if (panelId === undefined) return
+    return () => setPanelHovered(panelId, false)
+  }, [panelId, setPanelHovered])
+
+  return (
+    <GlassButtonGroup
+      layout
+      animate={reduce ? { opacity: 1, width: "auto" } : "visible"}
+      data-slot="scaffold-tab"
+      data-panel-hidden={hidden ? "" : undefined}
+      onPointerEnter={
+        panelId !== undefined ? () => setPanelHovered(panelId, true) : undefined
+      }
+      onPointerLeave={
+        panelId !== undefined
+          ? () => setPanelHovered(panelId, false)
+          : undefined
+      }
+      exit={reduce ? { opacity: 0, width: 0 } : "exit"}
+      initial={reduce ? { opacity: 0, width: 0 } : "hidden"}
+      transition={transition}
+      variants={segmentVariants}
+      glassVariant="subtle"
+      className={cn("h-full rounded-sm", className)}
+      {...rest}
+    >
+      <Button
+        aria-pressed={panelId !== undefined ? !hidden : undefined}
+        onClick={
+          panelId !== undefined
+            ? () => togglePanelVisibility(panelId)
+            : undefined
+        }
+        size="sm"
+        sound={sound}
+        variant="ghost"
+        className={cn(
+          "gap-2.5 rounded-sm pl-2",
+          onClose && "pr-2",
+          hidden && "text-muted-foreground/70"
+        )}
+      >
+        {hidden ? <LucideEyeOff size={16} /> : <LucideAppWindow size={16} />}
+        {children}
+      </Button>
+      {onClose && (
+        <Button
+          aria-label={closeLabel}
+          onClick={onClose}
+          size="icon-sm"
+          sound={sound}
+          variant="ghost"
+          className="self-center rounded-none!"
+        >
+          <LucideX size={16} />
+        </Button>
+      )}
+    </GlassButtonGroup>
+  )
+}

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

@@ -1,8 +1,4 @@
-import React, {
-  type ComponentProps,
-  type ReactElement,
-  type ReactNode,
-} from "react"
+import React, { type ComponentProps, type ReactElement, type ReactNode, } from "react"
 
 /** Inspector state shared by every scaffold part through ScaffoldContext. */
 export interface ScaffoldContextValue {
@@ -12,6 +8,25 @@ export interface ScaffoldContextValue {
   inspectorWidth: number
   setInspectorOpen: (open: boolean) => void
   toggleInspector: () => void
+  /** How many panels currently fit side by side, from the measured canvas
+   * width at `SCAFFOLD_PANEL_MIN_WIDTH` per panel (1..`SCAFFOLD_PANEL_CAPACITY`). */
+  panelCapacity: number
+  /** Ids of id'd panels the scaffold is currently hiding — auto-hidden by
+   * capacity pressure or toggled away from a tab. */
+  hiddenPanelIds: readonly string[]
+  isPanelHidden: (id: string) => boolean
+  /** Show/hide an id'd panel. Showing past capacity auto-hides the
+   * least-recently-activated visible panel; the last visible one never hides. */
+  togglePanelVisibility: (id: string) => void
+  /** Id of the panel whose tab the pointer is resting on — the canvas
+   * spotlights it by fading every other id'd panel to 0.35 opacity. */
+  hoveredPanelId: string | null
+  /** @internal Tabs report pointer enter/leave on their label. */
+  setPanelHovered: (id: string, hovered: boolean) => void
+  /** @internal Canvas reports its ordered panel ids. */
+  registerPanelIds: (ids: readonly string[]) => void
+  /** @internal Canvas reports its measured width. */
+  setCanvasWidth: (width: number) => void
 }
 
 export interface ScaffoldRootProps extends ComponentProps<"div"> {
@@ -46,23 +61,16 @@ type MotionSafe<T> = Omit<
 export interface ScaffoldActionsProps extends MotionSafe<
   Omit<ComponentProps<"div">, "children">
 > {
-  /** Called when the Add segment is pressed. */
+  /** Called when the Add segment is pressed. The segment renders only
+   * while this is present — omit it to hide Add, e.g. once the canvas
+   * holds `SCAFFOLD_PANEL_CAPACITY` panels. */
   onAdd?: () => void
   /** Label of the Add segment. */
   addLabel?: ReactNode
   /** Replaces the default add icon. */
   addIcon?: ReactNode
-  /** Number of non-visible panels tucked into the overflow dropdown —
-   * the badge on the browse segment. The segment renders when this or
-   * `onBrowse` is present; the badge only when > 0. Per the design
-   * comments the dropdown menu itself is a later iteration; for now the
-   * segment just keeps the count. */
-  overflowCount?: number
-  /** Called when the overflow (stacked-panels) segment is pressed. */
-  onBrowse?: () => void
-  /** Accessible name of the overflow segment. */
-  browseLabel?: string
-  /** Extra segments appended after the built-in ones. */
+  /** The panel tabs (`Scaffold.Tab`, one per open panel) and any extra
+   * segments, rendered before Add. Key each tab — closes animate out. */
   children?: ReactNode
   /** Emit interaction-sound attributes (inert until an app binds cuelume). */
   sound?: boolean
@@ -73,36 +81,51 @@ export type TScaffoldPanelChild<
 > = ReactElement<T, React.JSXElementConstructor<T>>
 
 export interface ScaffoldPanelProps {
+  /** Stable id opting the panel into responsive hiding: the canvas hides
+   * id'd panels when it can't grant each `SCAFFOLD_PANEL_MIN_WIDTH`, and a
+   * `Scaffold.Tab` with the matching `panelId` reflects and toggles it.
+   * Omitted, the panel always renders. */
+  id?: string
   /** The panel's content, rendered in a card with a drop shadow. */
   children: ReactNode
   /** The panel's content, rendered in a card with a drop shadow. */
   SecondaryPanel?: TScaffoldPanelChild
-  /** Renders the floating close button in the panel's top-right corner. */
-  onClose?: () => void
-  /** Renders the floating swap button over the primary/secondary gap.
-   * Only shown when `secondary` is present. Clicking it trades the two
-   * cards with a layout morph — flip the slot content here so each card
-   * carries its subject to its new home. */
+  /** Reveals the Swap action in the seam menu (needs `SecondaryPanel`).
+   * Swapping trades the two cards with a layout morph — flip the slot
+   * content here so each card carries its subject to its new home. */
   onSwap?: () => void
-  /** Controlled swap state — while true the strip's card sits in the
-   * primary slot. Omit letting the panel toggle it on swap clicks. */
-  swapped?: boolean
-  /** Initial swap state when uncontrolled. */
-  defaultSwapped?: boolean
-  /** Fixed width in px; omitted, the panel flexes to share the canvas. */
-  width?: number
+  /** Reveals the Close action in the seam menu — remove `SecondaryPanel`
+   * here; the strip and the menu leave together. */
+  onCloseSecondary?: () => void
   /** Accessible name of the panel region. */
   name?: string
   /** Emit interaction-sound attributes on the floating buttons. */
   sound?: boolean
-  /** Accessible name of the close button. */
-  closeLabel?: string
-  /** Accessible name of the swap button. */
+  /** Accessible name of the seam-menu toggle. */
   swapLabel?: string
   /** Extra class names for the panel's root element. */
   className?: string
 }
 
+export interface ScaffoldTabProps extends MotionSafe<
+  Omit<ComponentProps<"div">, "children">
+> {
+  /** The tab's label. */
+  children?: ReactNode
+  /** Id of the panel this tab fronts (`Scaffold.Panel`'s `id`). The tab
+   * then shows whether the panel is hidden and pressing its label toggles
+   * visibility — showing past capacity hides another panel in its place. */
+  panelId?: string
+  /** Renders the tab's close button. The button renders only while this
+   * is present — omit it to pin the tab, e.g. on the last remaining
+   * panel (the canvas keeps at least one open). */
+  onClose?: () => void
+  /** Accessible name of the close button. */
+  closeLabel?: string
+  /** Emit interaction-sound attributes on the close button. */
+  sound?: boolean
+}
+
 export type TSubPanelPosition = "bottom" | "top"
 export type TSubPanelVariant = "card" | "subtle" | "inset"
 
@@ -147,9 +170,15 @@ export interface PanelMenuButtonProps extends PanelFloatingButtonProps {
   /** Called when the Expand action is pressed — the panel trades which
    * sub-panel holds the flexible slot. */
   onExpand?: () => void
+  /** Renders the Close action; called when it is pressed — the consumer
+   * removes the secondary strip. */
+  onCloseSecondary?: () => void
   /** Whether the secondary strip currently holds the flexible slot —
    * flips the Expand chevron between down and up. */
   secondaryExpanded?: boolean
+  /** Whether the panel is swapped (column-reverse). Mirrors the Expand
+   * chevron so it keeps pointing at the sub-panel that grows next. */
+  swapped?: boolean
 }
 
 export interface UseScaffoldOptions {

package/src/components/blocks/scaffold/use-panel-visibility.ts

@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+
+import { SCAFFOLD_PANEL_CAPACITY } from "./constants"
+import { getPanelCapacity } from "./utils"
+
+/**
+ * Internal bookkeeping for responsive panel hiding.
+ *
+ * - `visibleOrder`: visible panel ids, least-recently-activated first — the
+ *   front is what capacity pressure evicts next.
+ * - `autoHidden`: panels the scaffold hid because the canvas shrank, most
+ *   recent last. They return on their own when room comes back.
+ * - `userHidden`: panels hidden by a tab press. They stay hidden until the
+ *   tab is pressed again, however wide the canvas grows.
+ */
+interface PanelVisibilityState {
+  visibleOrder: string[]
+  autoHidden: string[]
+  userHidden: string[]
+}
+
+const EMPTY_STATE: PanelVisibilityState = {
+  visibleOrder: [],
+  autoHidden: [],
+  userHidden: [],
+}
+
+/** Fold the registered ids and current capacity into a settled state:
+ * prune departed panels, admit new ones, evict the least-recently-activated
+ * visible panels past capacity, and restore auto-hidden ones when room
+ * returns. Returns `prev` untouched when nothing changes. */
+function reconcile(
+  prev: PanelVisibilityState,
+  ids: readonly string[],
+  capacity: number
+): PanelVisibilityState {
+  const known = new Set(ids)
+  const visibleOrder = prev.visibleOrder.filter((id) => known.has(id))
+  const autoHidden = prev.autoHidden.filter((id) => known.has(id))
+  const userHidden = prev.userHidden.filter((id) => known.has(id))
+
+  const tracked = new Set([...visibleOrder, ...autoHidden, ...userHidden])
+  for (const id of ids) if (!tracked.has(id)) visibleOrder.push(id)
+
+  while (visibleOrder.length > capacity && visibleOrder.length > 1) {
+    autoHidden.push(visibleOrder.shift() as string)
+  }
+  while (visibleOrder.length < capacity && autoHidden.length > 0) {
+    visibleOrder.push(autoHidden.pop() as string)
+  }
+
+  const unchanged =
+    visibleOrder.join(" ") === prev.visibleOrder.join(" ") &&
+    autoHidden.join(" ") === prev.autoHidden.join(" ") &&
+    userHidden.join(" ") === prev.userHidden.join(" ")
+  return unchanged ? prev : { visibleOrder, autoHidden, userHidden }
+}
+
+export interface PanelVisibility {
+  /** How many panels currently fit side by side (1..capacity cap). */
+  panelCapacity: number
+  /** Ids of panels currently hidden (auto + user), for tabs to reflect. */
+  hiddenPanelIds: readonly string[]
+  isPanelHidden: (id: string) => boolean
+  togglePanelVisibility: (id: string) => void
+  /** Id of the panel whose tab is hovered — the canvas spotlights it. */
+  hoveredPanelId: string | null
+  /** @internal Tabs report pointer enter/leave on their label. */
+  setPanelHovered: (id: string, hovered: boolean) => void
+  /** @internal Canvas reports its ordered panel ids each render. */
+  registerPanelIds: (ids: readonly string[]) => void
+  /** @internal Canvas reports its measured width. */
+  setCanvasWidth: (width: number) => void
+}
+
+/** Owns which panels are hidden as the canvas gains and loses room.
+ * Lives in `Scaffold.Root`; Canvas and Tab reach it through context. */
+export function usePanelVisibility(): PanelVisibility {
+  const [panelIds, setPanelIds] = React.useState<readonly string[]>([])
+  const [measuredCapacity, setMeasuredCapacity] = React.useState<number | null>(
+    null
+  )
+  const [state, setState] = React.useState<PanelVisibilityState>(EMPTY_STATE)
+  const [hoveredPanelId, setHoveredPanelId] = React.useState<string | null>(
+    null
+  )
+
+  const panelCapacity = measuredCapacity ?? SCAFFOLD_PANEL_CAPACITY
+
+  const registerPanelIds = React.useCallback((ids: readonly string[]) => {
+    setPanelIds((prev) =>
+      prev.length === ids.length && prev.every((id, i) => id === ids[i])
+        ? prev
+        : [...ids]
+    )
+  }, [])
+
+  // Store the derived capacity, not the raw width — resize storms only
+  // re-render the tree when a panel actually gains or loses room.
+  const setCanvasWidth = React.useCallback((width: number) => {
+    setMeasuredCapacity(getPanelCapacity(width))
+  }, [])
+
+  // Settle during render (the derive-state-while-rendering pattern): ids
+  // and capacity arrive as state, so an effect here would only add a
+  // cascading render after each change.
+  const settled = reconcile(state, panelIds, panelCapacity)
+  if (settled !== state) setState(settled)
+
+  const togglePanelVisibility = React.useCallback(
+    (id: string) => {
+      setState((prev) => {
+        if (!panelIds.includes(id)) return prev
+        const hidden =
+          prev.autoHidden.includes(id) || prev.userHidden.includes(id)
+        if (!hidden && prev.visibleOrder.length <= 1) return prev
+
+        const next: PanelVisibilityState = hidden
+          ? {
+              // Showing: newest activation — reconcile evicts the oldest
+              // visible panel if the canvas can't fit one more.
+              visibleOrder: [...prev.visibleOrder, id],
+              autoHidden: prev.autoHidden.filter((other) => other !== id),
+              userHidden: prev.userHidden.filter((other) => other !== id),
+            }
+          : {
+              visibleOrder: prev.visibleOrder.filter((other) => other !== id),
+              autoHidden: prev.autoHidden,
+              userHidden: [...prev.userHidden, id],
+            }
+        return reconcile(next, panelIds, panelCapacity)
+      })
+    },
+    [panelIds, panelCapacity]
+  )
+
+  // Leaving clears only its own id — a tab that unmounts mid-hover must
+  // not wipe out a hover the pointer has already moved on to.
+  const setPanelHovered = React.useCallback((id: string, hovered: boolean) => {
+    setHoveredPanelId((prev) => {
+      if (hovered) return id
+      return prev === id ? null : prev
+    })
+  }, [])
+
+  const hiddenPanelIds = React.useMemo(
+    () => [...settled.autoHidden, ...settled.userHidden],
+    [settled]
+  )
+
+  const isPanelHidden = React.useCallback(
+    (id: string) => hiddenPanelIds.includes(id),
+    [hiddenPanelIds]
+  )
+
+  return React.useMemo(
+    () => ({
+      panelCapacity,
+      hiddenPanelIds,
+      isPanelHidden,
+      togglePanelVisibility,
+      hoveredPanelId,
+      setPanelHovered,
+      registerPanelIds,
+      setCanvasWidth,
+    }),
+    [
+      panelCapacity,
+      hiddenPanelIds,
+      isPanelHidden,
+      togglePanelVisibility,
+      hoveredPanelId,
+      setPanelHovered,
+      registerPanelIds,
+      setCanvasWidth,
+    ]
+  )
+}