@exegia/corpora-ui 0.18.0 → 0.20.0

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

@@ -1,25 +1,48 @@
 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>
 }
 
 function Workspace({
-  onClose,
   onSwap,
+  onCloseSecondary,
   onAdd,
-  overflowCount,
+  tabs,
   SecondaryPanel = <Strip />,
 }: {
-  onClose?: () => void
   onSwap?: () => void
+  onCloseSecondary?: () => void
   onAdd?: () => void
-  overflowCount?: number
+  /** Rendered as Actions children — the panel tabs. */
+  tabs?: ReactNode
   /** Pass null to render the panel without a secondary strip. */
   SecondaryPanel?: TScaffoldPanelChild | null
 }) {
@@ -33,12 +56,12 @@ function Workspace({
         </button>
       </Scaffold.Sidebar>
       <Scaffold.Main>
-        <Scaffold.Actions onAdd={onAdd} overflowCount={overflowCount} />
+        <Scaffold.Actions onAdd={onAdd}>{tabs}</Scaffold.Actions>
         <Scaffold.Canvas>
           <Scaffold.Panel
             key="alpha"
             name="Alpha"
-            onClose={onClose}
+            onCloseSecondary={onCloseSecondary}
             onSwap={onSwap}
             SecondaryPanel={SecondaryPanel ?? undefined}
           >
@@ -57,6 +80,12 @@ function Workspace({
 const menuToggle = () =>
   screen.queryByRole("button", { name: "Swap panel content" })
 
+/** Under the id'd `#scaffold-actions` ancestor, happy-dom serves stale
+ * selector-cache results to `waitFor` queries that start while an
+ * AnimatePresence exit is still running — let the exit settle on real
+ * timers, then query once. */
+const settleExit = () => new Promise((resolve) => setTimeout(resolve, 400))
+
 describe("Scaffold", () => {
   test("renders rail, panel surfaces and secondary strip", () => {
     render(<Workspace />)
@@ -67,18 +96,38 @@ describe("Scaffold", () => {
     expect(panel.textContent).toContain("Strip")
   })
 
-  test("close and menu buttons render only with their callbacks", async () => {
-    const user = userEvent.setup()
-    const onClose = mock(() => {})
-
+  test("seam menu renders only with a callback; actions stay hidden until opened", () => {
     const { rerender } = render(<Workspace />)
-    expect(screen.queryByRole("button", { name: "Close panel" })).toBeNull()
     expect(menuToggle()).toBeNull()
 
-    rerender(<Workspace onClose={onClose} onSwap={() => {}} />)
-    await user.click(screen.getByRole("button", { name: "Close panel" }))
-    expect(onClose).toHaveBeenCalledTimes(1)
+    rerender(<Workspace onSwap={() => {}} />)
+    expect(menuToggle()).toBeDefined()
+    // Collapsed: the action segment is aria-hidden and inert.
+    expect(screen.queryByRole("button", { name: "Swap" })).toBeNull()
+
+    // The Close action alone also earns the menu.
+    rerender(<Workspace onCloseSecondary={() => {}} />)
+    expect(menuToggle()).toBeDefined()
+  })
+
+  test("seam menu Close renders only with onCloseSecondary, fires and collapses", async () => {
+    const user = userEvent.setup()
+    const onCloseSecondary = mock(() => {})
+
+    const { rerender } = render(<Workspace onSwap={() => {}} />)
+    await user.click(menuToggle() as HTMLElement)
+    expect(await screen.findByRole("button", { name: "Swap" })).toBeDefined()
+    expect(screen.queryByRole("button", { name: "Close" })).toBeNull()
+
+    rerender(
+      <Workspace onCloseSecondary={onCloseSecondary} onSwap={() => {}} />
+    )
+    await user.click(screen.getByRole("button", { name: "Close" }))
+    expect(onCloseSecondary).toHaveBeenCalledTimes(1)
+
+    // Acting collapses the menu back to the compact toggle.
     expect(menuToggle()).toBeDefined()
+    expect(screen.queryByRole("button", { name: "Close" })).toBeNull()
   })
 
   test("seam menu opens; Swap fires onSwap, flips the panel and collapses the menu", async () => {
@@ -140,31 +189,86 @@ describe("Scaffold", () => {
     expect(bottom.getAttribute("data-expanded")).toBeNull()
   })
 
+  test("expand chevron mirrors when the panel is swapped", async () => {
+    const user = userEvent.setup()
+    render(<Workspace onSwap={() => {}} />)
+
+    // Swap first — column-reverse puts the strip visually on top.
+    await user.click(menuToggle() as HTMLElement)
+    await user.click(await screen.findByRole("button", { name: "Swap" }))
+
+    // Primary still holds the flexible slot, but the strip that grows
+    // next now sits on top — the chevron points up.
+    await user.click(
+      await screen.findByRole("button", { name: "Swap panel content" })
+    )
+    const expandButton = await screen.findByRole("button", { name: "Expand" })
+    const chevron = () => expandButton.querySelector("svg.lucide-chevron-down")
+    expect(chevron()?.classList.contains("rotate-180")).toBe(true)
+
+    // After expanding, the primary — now visually at the bottom — grows
+    // next: the chevron points down again.
+    await user.click(expandButton)
+    await user.click(
+      await screen.findByRole("button", { name: "Swap panel content" })
+    )
+    expect(chevron()?.classList.contains("rotate-180")).toBe(false)
+  })
+
   test("seam menu needs a secondary strip", () => {
     render(<Workspace onSwap={() => {}} SecondaryPanel={null} />)
 
     expect(menuToggle()).toBeNull()
   })
 
-  test("actions cluster: Add fires, overflow segment follows the count", async () => {
+  test("actions cluster: Add renders only with onAdd and fires", async () => {
     const user = userEvent.setup()
     const onAdd = mock(() => {})
 
-    const { rerender } = render(<Workspace onAdd={onAdd} />)
-    expect(screen.queryByRole("button", { name: "Browse panels" })).toBeNull()
+    // Consumers omit onAdd at SCAFFOLD_PANEL_CAPACITY — the segment hides.
+    const { rerender } = render(<Workspace />)
+    expect(screen.queryByRole("button", { name: "Panel" })).toBeNull()
 
+    rerender(<Workspace onAdd={onAdd} />)
     await user.click(screen.getByRole("button", { name: "Panel" }))
     expect(onAdd).toHaveBeenCalledTimes(1)
 
-    // Zero overflowed panels: the segment shows without a badge.
-    rerender(<Workspace overflowCount={0} onAdd={onAdd} />)
-    expect(
-      screen.getByRole("button", { name: "Browse panels" }).textContent
-    ).toBe("")
+    rerender(<Workspace />)
+    await settleExit()
+    expect(screen.queryByRole("button", { name: "Panel" })).toBeNull()
+  })
+
+  test("panel tabs show their label; close renders only with onClose and fires", async () => {
+    const user = userEvent.setup()
+    const onCloseTab = mock(() => {})
+
+    // Consumers omit onClose on the last remaining panel's tab.
+    const { rerender } = render(
+      <Workspace tabs={<Scaffold.Tab key="alpha">Alpha</Scaffold.Tab>} />
+    )
+    expect(screen.getByText("Alpha")).toBeDefined()
+    expect(screen.queryByRole("button", { name: "Close Alpha" })).toBeNull()
+
+    rerender(
+      <Workspace
+        tabs={
+          <Scaffold.Tab
+            key="alpha"
+            closeLabel="Close Alpha"
+            onClose={onCloseTab}
+          >
+            Alpha
+          </Scaffold.Tab>
+        }
+      />
+    )
+    await user.click(screen.getByRole("button", { name: "Close Alpha" }))
+    expect(onCloseTab).toHaveBeenCalledTimes(1)
 
-    rerender(<Workspace overflowCount={2} onAdd={onAdd} />)
-    const browse = screen.getByRole("button", { name: "Browse panels" })
-    expect(browse.textContent).toContain("2")
+    // Closing removes the tab — it animates out of the pill.
+    rerender(<Workspace tabs={null} />)
+    await settleExit()
+    expect(screen.queryByText("Alpha")).toBeNull()
   })
 
   test("inspector opens from outside state and hides again", async () => {
@@ -185,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>
@@ -201,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

@@ -4,6 +4,17 @@ export const SCAFFOLD_SIDEBAR_WIDTH = 64
 /** Inspector drawer width in px. */
 export const SCAFFOLD_INSPECTOR_WIDTH = 272
 
+/** Most panels the canvas holds at once — omit Actions' `onAdd` when the
+ * 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/index.ts

@@ -7,6 +7,7 @@ import { ScaffoldMain } from "./scaffold-main"
 import { ScaffoldPanel } from "./scaffold-panel"
 import { ScaffoldRoot } from "./scaffold-root"
 import { ScaffoldSidebar } from "./scaffold-sidebar"
+import { ScaffoldTab } from "./scaffold-tab"
 import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-panel.tsx"
 
 export { useScaffoldContext } from "./scaffold-context"
@@ -24,6 +25,7 @@ export {
   ScaffoldPanel,
   ScaffoldRoot,
   ScaffoldSidebar,
+  ScaffoldTab,
 }
 
 export const Scaffold = {
@@ -33,6 +35,7 @@ export const Scaffold = {
   Actions: ScaffoldActions,
   Canvas: ScaffoldCanvas,
   Panel: ScaffoldPanel,
+  Tab: ScaffoldTab,
   Inspector: ScaffoldInspector,
-  SubPanel: ScaffoldSubPanel
+  SubPanel: ScaffoldSubPanel,
 }