@exegia/corpora-ui 0.19.0 → 0.21.0

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

@@ -1,10 +1,31 @@
 import { describe, expect, mock, test } from "bun:test"
-import { render, screen, waitFor } from "@testing-library/react"
+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 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
+globalThis.ResizeObserver = class {
+  constructor(callback: ResizeObserverCallback) {
+    observeCanvas = callback
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+} as unknown as typeof ResizeObserver
+
+const resizeCanvas = (width: number) =>
+  act(() => {
+    observeCanvas?.(
+      [{ contentRect: { width } }] as unknown as ResizeObserverEntry[],
+      undefined as unknown as ResizeObserver
+    )
+  })
 
 function Strip() {
   return <span>Strip</span>
@@ -268,6 +289,16 @@ describe("Scaffold", () => {
     expect(inspector().getAttribute("aria-hidden")).toBe("true")
   })
 
+  test("capacity grants each panel 320px plus the gaps between them", () => {
+    expect(getPanelCapacity(null)).toBe(3)
+    expect(getPanelCapacity(976)).toBe(3) // 3×320 + 2×8
+    expect(getPanelCapacity(975)).toBe(2)
+    expect(getPanelCapacity(648)).toBe(2) // 2×320 + 8
+    expect(getPanelCapacity(647)).toBe(1)
+    expect(getPanelCapacity(100)).toBe(1) // never below one panel
+    expect(getPanelCapacity(5000)).toBe(3) // never above the cap
+  })
+
   test("root manages inspector state itself when uncontrolled", () => {
     render(
       <Scaffold.Root defaultInspectorOpen>
@@ -284,3 +315,131 @@ describe("Scaffold", () => {
     ).toBeDefined()
   })
 })
+
+const PANEL_IDS = ["one", "two", "three"] as const
+
+function ResponsiveWorkspace() {
+  return (
+    <Scaffold.Root>
+      <Scaffold.Main>
+        <Scaffold.Actions>
+          {PANEL_IDS.map((id) => (
+            <Scaffold.Tab key={id} panelId={id}>
+              {`Tab ${id}`}
+            </Scaffold.Tab>
+          ))}
+        </Scaffold.Actions>
+        <Scaffold.Canvas>
+          {PANEL_IDS.map((id) => (
+            <Scaffold.Panel key={id} id={id} name={`Panel ${id}`}>
+              <span>{`Body ${id}`}</span>
+            </Scaffold.Panel>
+          ))}
+        </Scaffold.Canvas>
+      </Scaffold.Main>
+    </Scaffold.Root>
+  )
+}
+
+const panel = (id: string) =>
+  screen.queryByRole("region", { name: `Panel ${id}` })
+
+const tab = (id: string) => screen.getByRole("button", { name: `Tab ${id}` })
+
+describe("Scaffold responsive panels", () => {
+  test("narrowing hides the oldest panel; widening restores it", async () => {
+    render(<ResponsiveWorkspace />)
+
+    resizeCanvas(976)
+    for (const id of PANEL_IDS) expect(panel(id)).not.toBeNull()
+
+    // Two panels' worth of room — the least-recently-activated hides.
+    resizeCanvas(700)
+    await settleExit()
+    expect(panel("one")).toBeNull()
+    expect(panel("two")).not.toBeNull()
+    expect(panel("three")).not.toBeNull()
+    expect(
+      tab("one")
+        .closest('[data-slot="scaffold-tab"]')
+        ?.getAttribute("data-panel-hidden")
+    ).toBe("")
+    expect(tab("one").getAttribute("aria-pressed")).toBe("false")
+
+    // Room returns — the auto-hidden panel comes back by itself.
+    resizeCanvas(1200)
+    expect(await screen.findByRole("region", { name: "Panel one" })).toBeDefined()
+    expect(tab("one").getAttribute("aria-pressed")).toBe("true")
+  })
+
+  test("pressing a hidden tab shows its panel, hiding the oldest visible one", async () => {
+    const user = userEvent.setup()
+    render(<ResponsiveWorkspace />)
+
+    resizeCanvas(700)
+    await settleExit()
+    expect(panel("one")).toBeNull()
+
+    await user.click(tab("one"))
+    await settleExit()
+    expect(panel("one")).not.toBeNull()
+    expect(panel("two")).toBeNull()
+    expect(panel("three")).not.toBeNull()
+  })
+
+  test("pressing a visible tab hides its panel; the last one never hides", async () => {
+    const user = userEvent.setup()
+    render(<ResponsiveWorkspace />)
+
+    resizeCanvas(400)
+    await settleExit()
+    // One panel's worth of room — only the newest activation stays.
+    expect(panel("one")).toBeNull()
+    expect(panel("two")).toBeNull()
+    expect(panel("three")).not.toBeNull()
+
+    // The sole visible panel refuses to hide.
+    await user.click(tab("three"))
+    await settleExit()
+    expect(panel("three")).not.toBeNull()
+
+    // Activating another trades places with it.
+    await user.click(tab("one"))
+    await settleExit()
+    expect(panel("one")).not.toBeNull()
+    expect(panel("three")).toBeNull()
+  })
+
+  test("hovering a tab spotlights its panel and dims the others", async () => {
+    const user = userEvent.setup()
+    render(<ResponsiveWorkspace />)
+
+    resizeCanvas(1200)
+    await user.hover(tab("two"))
+    expect(panel("two")?.getAttribute("data-dimmed")).toBeNull()
+    expect(panel("one")?.getAttribute("data-dimmed")).toBe("")
+    expect(panel("three")?.getAttribute("data-dimmed")).toBe("")
+
+    await user.unhover(tab("two"))
+    expect(panel("one")?.getAttribute("data-dimmed")).toBeNull()
+    expect(panel("three")?.getAttribute("data-dimmed")).toBeNull()
+  })
+
+  test("user-hidden panels stay hidden when the canvas widens", async () => {
+    const user = userEvent.setup()
+    render(<ResponsiveWorkspace />)
+
+    resizeCanvas(1200)
+    await user.click(tab("two"))
+    await settleExit()
+    expect(panel("two")).toBeNull()
+
+    resizeCanvas(1400)
+    await settleExit()
+    expect(panel("two")).toBeNull()
+
+    // Its tab presses back to visible.
+    await user.click(tab("two"))
+    expect(await screen.findByRole("region", { name: "Panel two" })).toBeDefined()
+  })
+})

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

@@ -8,6 +8,13 @@ export const SCAFFOLD_INSPECTOR_WIDTH = 272
  * count reaches it so the Add segment hides. */
 export const SCAFFOLD_PANEL_CAPACITY = 3
 
+/** Narrowest a panel may render, in px. When the canvas can't grant every
+ * panel this width, the scaffold hides panels until the rest fit. */
+export const SCAFFOLD_PANEL_MIN_WIDTH = 320
+
+/** Gap in px between side-by-side panels on the canvas (`gap-2`). */
+export const SCAFFOLD_CANVAS_GAP = 8
+
 /** Gap in px between the drawer/actions and the viewport edges. */
 export const SCAFFOLD_EDGE_GUTTER = 10
 

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

@@ -145,6 +145,9 @@ export function PanelMenuButton({
             size="icon-sm"
             variant="ghost"
             sound={sound}
+            // The hidden Expand|Swap|Close side stretches the pill to the sm
+            // button height — match it so the collapsed toggle stays square.
+            className="size-8 sm:size-7"
             data-slot="scaffold-panel-menu-toggle"
             onClick={handleOnExpand}
             onPointerEnter={handleToggleHover}

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

@@ -4,26 +4,69 @@ import { AnimatePresence } from "motion/react"
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import type { ScaffoldCanvasProps } from "./type"
+import { useScaffoldContext } from "./scaffold-context"
+import type { ScaffoldCanvasProps, ScaffoldPanelProps } 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))
+    return undefined
+  const id = child.props.id
+  return typeof id === "string" ? id : undefined
+}
 
 /**
  * The panel row below the action cluster: 8px gutters, 8px gaps, panels
  * side by side. Key each `Scaffold.Panel` child so closes animate out.
+ * Measures its own width and hides id'd panels (oldest activation first)
+ * whenever it can't grant each one `SCAFFOLD_PANEL_MIN_WIDTH`.
  */
 export function ScaffoldCanvas({
   className,
   children,
   ...rest
 }: ScaffoldCanvasProps): React.ReactElement {
+  const { hiddenPanelIds, registerPanelIds, setCanvasWidth } =
+    useScaffoldContext()
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  React.useLayoutEffect(() => {
+    const element = ref.current
+    if (!element || typeof ResizeObserver === "undefined") return
+    const observer = new ResizeObserver(([entry]) =>
+      setCanvasWidth(entry.contentRect.width)
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [setCanvasWidth])
+
+  const childArray = React.Children.toArray(children)
+  const panelIds = childArray
+    .map(panelIdOf)
+    .filter((id): id is string => id !== undefined)
+  const idsKey = panelIds.join(" ")
+
+  React.useLayoutEffect(() => {
+    registerPanelIds(panelIds)
+    // panelIds is rebuilt each render; idsKey carries its identity.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [idsKey, registerPanelIds])
+
+  const visibleChildren = childArray.filter((child) => {
+    const id = panelIdOf(child)
+    return id === undefined || !hiddenPanelIds.includes(id)
+  })
+
   return (
     <div
-      className={cn("relative flex w-full flex-1 gap-2", className)}
+      className={cn("relative flex min-h-0 w-full flex-1 gap-2", className)}
       data-slot="scaffold-canvas"
+      ref={ref}
       {...rest}
     >
-      <AnimatePresence initial={false} mode="popLayout">
-        {children}
-      </AnimatePresence>
+      {/* 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>
     </div>
   )
 }

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

@@ -53,7 +53,7 @@ export function ScaffoldInspector({
       {...rest}
     >
       <GlassContainer
-        className="flex flex-1 flex-col rounded-md border-t border-white bg-neutral-50/10 shadow-inner shadow-md dark:border-neutral-800 dark:bg-black/5"
+        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"
         glassVariant="subtle"
       >
         <div
@@ -65,7 +65,8 @@ export function ScaffoldInspector({
           </span>
           <Button
             size="icon-xs"
-            variant="secondary"
+            variant="glass"
+            glassVariant="subtle"
             className="scale-85"
             aria-label="Close inspector"
             onClick={toggleInspector}

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

@@ -18,7 +18,7 @@ export function ScaffoldMain({
   return (
     <div
       id="scaffold-main"
-      className={cn("relative flex h-full min-w-0 flex-1 flex-col", className)}
+      className={cn("relative flex min-w-0 flex-1 flex-col", className)}
       data-slot="scaffold-main"
       {...rest}
     >

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

@@ -5,8 +5,13 @@ import * as React from "react"
 import { useState } from "react"
 
 import { cn } from "@/lib/utils"
-import { SCAFFOLD_EASE, SCAFFOLD_MORPH_DURATION } from "./constants"
+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"
 
@@ -18,6 +23,7 @@ import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-pane
  * primary slot while the primary card shrinks down into the strip.
  */
 export function ScaffoldPanel({
+  id,
   children,
   SecondaryPanel,
   onSwap,
@@ -27,8 +33,14 @@ export function ScaffoldPanel({
   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,
@@ -48,17 +60,41 @@ export function ScaffoldPanel({
     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}
     >

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-12 shrink-0 flex-col items-center gap-1 pt-10 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

@@ -5,10 +5,11 @@ 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, LucideX } from "lucide-react"
+import { LucideAppWindow, LucideEyeOff, LucideX } from "lucide-react"
 import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group.tsx"
 
 /**
@@ -16,25 +17,51 @@ import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group.tsx
  * 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 } : "visible"}
+      animate={reduce ? { opacity: 1, width: "auto" } : "visible"}
       data-slot="scaffold-tab"
-      exit={reduce ? { opacity: 0 } : "exit"}
-      initial={reduce ? { opacity: 0 } : "hidden"}
+      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"
@@ -42,11 +69,22 @@ export function ScaffoldTab({
       {...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")}
+        className={cn(
+          "gap-2.5 rounded-sm pl-2",
+          onClose && "pr-2",
+          hidden && "text-muted-foreground/70"
+        )}
       >
-        <LucideAppWindow size={16} />
+        {hidden ? <LucideEyeOff size={16} /> : <LucideAppWindow size={16} />}
         {children}
       </Button>
       {onClose && (
@@ -56,7 +94,7 @@ export function ScaffoldTab({
           size="icon-sm"
           sound={sound}
           variant="ghost"
-          className="rounded-none!"
+          className="self-center rounded-none!"
         >
           <LucideX size={16} />
         </Button>

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

@@ -8,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"> {
@@ -62,6 +81,11 @@ 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. */
@@ -88,6 +112,10 @@ export interface ScaffoldTabProps extends MotionSafe<
 > {
   /** 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). */