@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/blocks/shell/utils.ts

@@ -1,187 +0,0 @@
-export const SHELL_BEZEL_CLASSES =
-  "bezel-lit-t-2 bezel-lit-blur-2 bezel-lit/57 bezel-dim-b-2 bezel-dim-blur-3 bezel-dim/11 dark:bezel-lit-blur-3 dark:bezel-lit/14 dark:bezel-dim/78"
-
-export const TITLE_BAR_HEIGHT = 48
-// The desktop rail settles at a hard zero-width boundary. Keep the spring
-// critically damped so it cannot overshoot, pause against that boundary, and
-// then snap back during the final frame.
-import { EASE_OUT, EASE_DRAWER } from "@/lib/ease.ts"
-import type { Variants } from "motion/react"
-import { createContext, useContext, useSyncExternalStore } from "react"
-import type {
-  IAnimatedSidebarContextValue,
-  IAnimatedSidebarPanelContextValue,
-} from "./type"
-
-export const SIDEBAR_MORPH_TRANSITION = {
-  type: "spring",
-  stiffness: 380,
-  damping: 35,
-  mass: 0.75,
-} as const
-
-export const LABEL_ENTER_TRANSITION = {
-  duration: 0.2,
-  delay: 0.08,
-  ease: EASE_OUT,
-} as const
-
-export const LABEL_EXIT_TRANSITION = {
-  duration: 0.12,
-  ease: EASE_OUT,
-} as const
-
-export const PANEL_TRANSITION = {
-  duration: 0.36,
-  ease: EASE_DRAWER,
-} as const
-
-export const REDUCED_TRANSITION = {
-  duration: 0.16,
-  ease: EASE_OUT,
-} as const
-
-const SUBMENU_TRANSITION = {
-  duration: 0.18,
-  ease: EASE_OUT,
-} as const
-
-export const SUBMENU_VARIANTS: Variants = {
-  closed: {
-    opacity: 0,
-    clipPath: "inset(0 0 100% 0 round 8px)",
-    transition: {
-      duration: 0.14,
-      ease: EASE_OUT,
-      staggerChildren: 0.025,
-      staggerDirection: -1,
-    },
-  },
-  open: {
-    opacity: 1,
-    clipPath: "inset(0 0 0% 0 round 8px)",
-    transition: {
-      duration: 0.2,
-      delayChildren: 0.035,
-      ease: EASE_OUT,
-      staggerChildren: 0.045,
-    },
-  },
-}
-
-export const SUBMENU_ITEM_VARIANTS: Variants = {
-  closed: {
-    opacity: 0,
-    y: -6,
-    filter: "blur(3px)",
-  },
-  open: {
-    opacity: 1,
-    y: 0,
-    filter: "blur(0px)",
-    transition: SUBMENU_TRANSITION,
-  },
-}
-
-export const FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "[tabindex]:not([tabindex='-1'])",
-].join(",")
-
-export const MOBILE_QUERY = "(max-width: 767px)"
-export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-/**
- * The shell's layout contract, in px. Every entry lands on the provider's
- * wrapper as a CSS variable, so a consumer overrides a column by restyling it
- * rather than by passing a prop:
- *
- * | variable               | column                                    |
- * | ---------------------- | ----------------------------------------- |
- * | `--sidebar-width`      | left rail, expanded                       |
- * | `--sidebar-width-icon` | left rail, folded to icons                |
- * | `--panel-width`        | secondary panel: its floor AND its default |
- * | `--inset-min-width`    | the body's floor                          |
- *
- * These are only the defaults. Every measurement resolves the live variable,
- * so an override wins over the value written here.
- */
-export const SHELL_WIDTHS = {
-  "--sidebar-min-width": "180px",
-  "--sidebar-width": "256px",
-  "--sidebar-width-icon": "56px",
-  "--sidebar-width-mobile": "18rem",
-  "--panel-width": "320px",
-  "--inset-min-width": "360px",
-} as const
-
-/** The expanded width of a panel docked to `side`: the secondary panel opens
- * at `--panel-width`, the primary rail at `--sidebar-width`. */
-export function expandedWidthVar(side: "left" | "right") {
-  return side === "right" ? "var(--panel-width)" : "var(--sidebar-width)"
-}
-
-/** Resolve a CSS length — `var()` included — to px inside `host`'s cascade.
- * Custom properties inherit, so a throwaway probe mounted in `host` reads the
- * very `--sidebar-width` the shell lays out with, including a value a
- * consumer overrode on the provider. Returns 0 when `host` has no layout
- * (server render, `display: none`), so callers must fail open on 0 rather
- * than treat it as a real measurement. */
-export function resolveLength(host: HTMLElement, value: string) {
-  const probe = document.createElement("div")
-  probe.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;width:${value}`
-  host.appendChild(probe)
-  const px = probe.getBoundingClientRect().width
-  probe.remove()
-  return px
-}
-
-export const AnimatedSidebarContext =
-  createContext<IAnimatedSidebarContextValue | null>(null)
-
-export const AnimatedSidebarPanelContext =
-  createContext<IAnimatedSidebarPanelContextValue | null>(null)
-
-export function useAnimatedSidebar() {
-  const context = useContext(AnimatedSidebarContext)
-  if (!context) {
-    throw new Error(
-      "useAnimatedSidebar must be used inside AnimatedPanelProvider."
-    )
-  }
-  return context
-}
-
-function subscribeToMobileQuery(callback: () => void) {
-  const query = window.matchMedia(MOBILE_QUERY)
-  query.addEventListener("change", callback)
-  return () => query.removeEventListener("change", callback)
-}
-
-export function getMobileSnapshot() {
-  return window.matchMedia(MOBILE_QUERY).matches
-}
-
-export function getServerMobileSnapshot() {
-  return false
-}
-
-export function useIsMobile() {
-  return useSyncExternalStore(
-    subscribeToMobileQuery,
-    getMobileSnapshot,
-    getServerMobileSnapshot
-  )
-}
-
-export function useAnimatedSidebarPanel() {
-  const context = useContext(AnimatedSidebarPanelContext)
-  if (!context) {
-    throw new Error("Animated Sidebar parts must be used inside AnimatedPanel.")
-  }
-  return context
-}

package/src/components/blocks/sidebar/__tests__/ai-sidebar-atom.test.tsx

@@ -1,325 +0,0 @@
-import { describe, expect, mock, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { createStore } from "jotai"
-
-import { ExegiaProvider } from "@/lib/state"
-import { AISidebar } from "../ai-sidebar"
-import {
-  DEFAULT_AI_SIDEBAR_CONFIG,
-  aiSidebarAnnouncementAtom,
-  aiSidebarExpandedIdsAtom,
-  aiSidebarItemsAtom,
-  aiSidebarMovePendingAtom,
-  expandAISidebarRowAtom,
-  mountAISidebarAtom,
-  moveAISidebarRowAtom,
-  removeAISidebarInstance,
-  renameAISidebarRowAtom,
-  resetAISidebarAtom,
-  setAISidebarHandlersAtom,
-} from "../ai-sidebar-atom"
-import type { IAISidebarConfig, IAISidebarSeed, ISidebarResource } from "../type"
-import { useAISidebarActions, useAISidebarState } from "../use-ai-sidebar-state"
-
-type TStore = ReturnType<typeof createStore>
-
-const RESOURCES: ISidebarResource[] = [
-  {
-    id: "corpora",
-    label: "Corpora",
-    kind: "project",
-    children: [
-      { id: "manuscripts", label: "Manuscripts", kind: "folder" },
-      { id: "readme", label: "Field notes", kind: "file" },
-    ],
-  },
-  { id: "reading-list", label: "Reading list", kind: "bookmark" },
-  { id: "archive", label: "Archive", kind: "folder", disabled: true },
-]
-
-function mount(
-  store: TStore,
-  id: string,
-  config: Partial<IAISidebarConfig> = {},
-  seed: Partial<IAISidebarSeed> = {}
-) {
-  store.set(
-    mountAISidebarAtom(id),
-    { ...DEFAULT_AI_SIDEBAR_CONFIG, ...config },
-    {
-      items: RESOURCES,
-      activeId: null,
-      focusedId: null,
-      expandedIds: [],
-      ...seed,
-    }
-  )
-}
-
-const ids = (items: ISidebarResource[]) => items.map((item) => item.id)
-
-describe("ai-sidebar atoms · instance isolation", () => {
-  test("two ids never share state", () => {
-    const store = createStore()
-    mount(store, "a")
-    mount(store, "b")
-
-    store.set(expandAISidebarRowAtom("a"), "corpora")
-    expect(store.get(aiSidebarExpandedIdsAtom("a")).has("corpora")).toBe(true)
-    expect(store.get(aiSidebarExpandedIdsAtom("b")).has("corpora")).toBe(false)
-  })
-
-  test("two stores never share state under the same id", () => {
-    const one = createStore()
-    const two = createStore()
-    mount(one, "shared")
-    mount(two, "shared")
-
-    one.set(expandAISidebarRowAtom("shared"), "corpora")
-    expect(one.get(aiSidebarExpandedIdsAtom("shared")).has("corpora")).toBe(
-      true
-    )
-    expect(two.get(aiSidebarExpandedIdsAtom("shared")).has("corpora")).toBe(
-      false
-    )
-  })
-
-  test("removeAISidebarInstance drops the slice back to its defaults", () => {
-    const store = createStore()
-    mount(store, "gone")
-    store.set(expandAISidebarRowAtom("gone"), "corpora")
-
-    removeAISidebarInstance("gone")
-    expect(store.get(aiSidebarExpandedIdsAtom("gone")).size).toBe(0)
-    expect(store.get(aiSidebarItemsAtom("gone"))).toEqual([])
-  })
-})
-
-describe("ai-sidebar atoms · write gates", () => {
-  test("hook-owned data renames itself", () => {
-    const store = createStore()
-    mount(store, "owned")
-
-    store.set(renameAISidebarRowAtom("owned"), "reading-list", "  To read  ")
-    expect(store.get(aiSidebarItemsAtom("owned"))[1]?.label).toBe("To read")
-  })
-
-  test("a controlled items prop is never overwritten, only reported", () => {
-    const store = createStore()
-    const onItemsChange = mock((items: ISidebarResource[]) => void items)
-    mount(store, "controlled", { controlsItems: true })
-    store.set(setAISidebarHandlersAtom("controlled"), { onItemsChange })
-
-    store.set(renameAISidebarRowAtom("controlled"), "reading-list", "To read")
-    expect(store.get(aiSidebarItemsAtom("controlled"))[1]?.label).toBe(
-      "Reading list"
-    )
-    expect(onItemsChange).toHaveBeenCalledTimes(1)
-    expect(onItemsChange.mock.calls[0]![0][1]?.label).toBe("To read")
-
-    // A move is gated the same way: the atom keeps the prop's data, the
-    // consumer gets the next tree to apply themselves.
-    void store.set(moveAISidebarRowAtom("controlled"), {
-      itemId: "reading-list",
-      targetId: "corpora",
-      position: "before",
-    })
-    expect(ids(store.get(aiSidebarItemsAtom("controlled")))).toEqual([
-      "corpora",
-      "reading-list",
-      "archive",
-    ])
-    expect(onItemsChange).toHaveBeenCalledTimes(2)
-    expect(ids(onItemsChange.mock.calls[1]![0])).toEqual([
-      "reading-list",
-      "corpora",
-      "archive",
-    ])
-  })
-
-  test("reset replays the mount seed", () => {
-    const store = createStore()
-    mount(store, "replay", {}, { expandedIds: ["corpora"] })
-    store.set(expandAISidebarRowAtom("replay"), "manuscripts")
-    store.set(renameAISidebarRowAtom("replay"), "reading-list", "To read")
-
-    store.set(resetAISidebarAtom("replay"))
-    expect([...store.get(aiSidebarExpandedIdsAtom("replay"))]).toEqual([
-      "corpora",
-    ])
-    expect(store.get(aiSidebarItemsAtom("replay"))[1]?.label).toBe(
-      "Reading list"
-    )
-    expect(store.get(aiSidebarAnnouncementAtom("replay"))).toBe("")
-  })
-})
-
-describe("ai-sidebar atoms · optimistic move", () => {
-  test("a rejected onMove rolls the data back and announces it", async () => {
-    const store = createStore()
-    const onMoveError = mock(() => {})
-    mount(store, "rollback")
-    store.set(setAISidebarHandlersAtom("rollback"), {
-      onMove: () => Promise.reject(new Error("409")),
-      onMoveError,
-    })
-
-    const pending = store.set(moveAISidebarRowAtom("rollback"), {
-      itemId: "reading-list",
-      targetId: "corpora",
-      position: "before",
-    })
-    // The move applies optimistically and announces before onMove settles…
-    expect(ids(store.get(aiSidebarItemsAtom("rollback")))).toEqual([
-      "reading-list",
-      "corpora",
-      "archive",
-    ])
-    expect(store.get(aiSidebarAnnouncementAtom("rollback"))).toContain(
-      "Moved Reading list before Corpora"
-    )
-
-    await pending
-    // …and the rejection restores the previous order.
-    expect(ids(store.get(aiSidebarItemsAtom("rollback")))).toEqual([
-      "corpora",
-      "reading-list",
-      "archive",
-    ])
-    expect(store.get(aiSidebarAnnouncementAtom("rollback"))).toContain(
-      "Move failed"
-    )
-    expect(onMoveError).toHaveBeenCalled()
-    expect(store.get(aiSidebarMovePendingAtom("rollback"))).toBe(false)
-  })
-
-  test("a second move is refused while one is in flight", async () => {
-    const store = createStore()
-    let release!: () => void
-    mount(store, "pending")
-    store.set(setAISidebarHandlersAtom("pending"), {
-      onMove: () =>
-        new Promise<void>((resolve) => {
-          release = resolve
-        }),
-    })
-
-    const first = store.set(moveAISidebarRowAtom("pending"), {
-      itemId: "reading-list",
-      targetId: "corpora",
-      position: "before",
-    })
-    const second = store.set(moveAISidebarRowAtom("pending"), {
-      itemId: "archive",
-      targetId: "corpora",
-      position: "before",
-    })
-    // The second move never touched the data, only the live region.
-    expect(store.get(aiSidebarAnnouncementAtom("pending"))).toBe(
-      "Wait for the current move to finish."
-    )
-    expect(ids(store.get(aiSidebarItemsAtom("pending")))).toEqual([
-      "reading-list",
-      "corpora",
-      "archive",
-    ])
-
-    release()
-    await Promise.all([first, second])
-    expect(store.get(aiSidebarMovePendingAtom("pending"))).toBe(false)
-  })
-})
-
-describe("ExegiaProvider · driving a sidebar by id", () => {
-  /** A component with no relationship to the sidebar beyond its id. */
-  function Remote() {
-    const actions = useAISidebarActions("app-resources")
-    const { expandedIds } = useAISidebarState("app-resources")
-    return (
-      <button onClick={() => actions.expand("corpora")} type="button">
-        {`expand (${expandedIds.size})`}
-      </button>
-    )
-  }
-
-  test("a sibling component expands the sidebar through one provider", async () => {
-    const user = userEvent.setup()
-    render(
-      <ExegiaProvider store={createStore()}>
-        <AISidebar defaultItems={RESOURCES} sidebarId="app-resources" />
-        <Remote />
-      </ExegiaProvider>
-    )
-
-    // corpora starts collapsed, so its children start unmounted.
-    expect(screen.queryByRole("treeitem", { name: /Field notes/ })).toBeNull()
-
-    await user.click(screen.getByRole("button", { name: /^expand/ }))
-    expect(
-      await screen.findByRole("treeitem", { name: /Field notes/ })
-    ).toBeDefined()
-    // The remote reader saw the change too.
-    expect(screen.getByRole("button", { name: "expand (1)" })).toBeDefined()
-  })
-})
-
-describe("AISidebar · render granularity", () => {
-  test("expanding and selecting one row leave a sibling row untouched", async () => {
-    const user = userEvent.setup()
-    // `renderIcon` runs inside a row's render, so counting calls per id is a
-    // proxy for counting that row's renders.
-    const renders = new Map<string, number>()
-
-    function Driver() {
-      const actions = useAISidebarActions("granular")
-      return (
-        <>
-          <button onClick={() => actions.expand("corpora")} type="button">
-            open
-          </button>
-          <button onClick={() => actions.select("reading-list")} type="button">
-            pick
-          </button>
-        </>
-      )
-    }
-
-    render(
-      <ExegiaProvider store={createStore()}>
-        <AISidebar
-          defaultItems={RESOURCES}
-          renderIcon={(item) => {
-            renders.set(item.id, (renders.get(item.id) ?? 0) + 1)
-            return null
-          }}
-          sidebarId="granular"
-        />
-        <Driver />
-      </ExegiaProvider>
-    )
-
-    const beforeCorpora = renders.get("corpora") ?? 0
-    const beforeReadingList = renders.get("reading-list") ?? 0
-    const beforeArchive = renders.get("archive") ?? 0
-    expect(beforeCorpora).toBeGreaterThan(0)
-    expect(beforeReadingList).toBeGreaterThan(0)
-
-    await user.click(screen.getByRole("button", { name: "open" }))
-    await screen.findByRole("treeitem", { name: /Field notes/ })
-
-    // corpora's branch opened, so its row re-rendered…
-    expect(renders.get("corpora")).toBeGreaterThan(beforeCorpora)
-    // …and its siblings, whose atoms did not change, did not.
-    expect(renders.get("reading-list")).toBe(beforeReadingList)
-    expect(renders.get("archive")).toBe(beforeArchive)
-
-    const expandedCorpora = renders.get("corpora") ?? 0
-    await user.click(screen.getByRole("button", { name: "pick" }))
-
-    // Selection flips reading-list's own atom and nobody else's.
-    expect(renders.get("reading-list")).toBeGreaterThan(beforeReadingList)
-    expect(renders.get("corpora")).toBe(expandedCorpora)
-    expect(renders.get("archive")).toBe(beforeArchive)
-  })
-})

package/src/components/blocks/sidebar/__tests__/ai-sidebar.test.tsx

@@ -1,93 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-
-import { AISidebar } from "../ai-sidebar"
-import type { ISidebarResource } from "../type.ts"
-
-const RESOURCES: ISidebarResource[] = [
-  {
-    id: "corpora",
-    label: "Corpora",
-    kind: "project",
-    children: [
-      { id: "manuscripts", label: "Manuscripts", kind: "folder" },
-      { id: "readme", label: "Field notes", kind: "file" },
-    ],
-  },
-  { id: "reading-list", label: "Reading list", kind: "bookmark" },
-  { id: "empty-folder", label: "Empty folder", kind: "folder" },
-]
-
-const chevronOf = (row: HTMLElement) =>
-  row.querySelector("svg.lucide-chevron-right")
-
-describe("AISidebar", () => {
-  test("renders the tree and marks the active row", () => {
-    render(
-      <AISidebar defaultItems={RESOURCES} defaultActiveId="reading-list" />
-    )
-
-    expect(screen.getByRole("tree", { name: "Resources" })).toBeDefined()
-    const active = screen.getByRole("treeitem", { name: /Reading list/ })
-    expect(active.getAttribute("aria-selected")).toBe("true")
-    expect(active.className).toContain("bg-primary/10")
-  })
-
-  test("shows a trailing chevron only on root rows with children", () => {
-    render(
-      <AISidebar defaultItems={RESOURCES} defaultExpandedIds={["corpora"]} />
-    )
-
-    const root = screen.getByRole("treeitem", { name: /Corpora/ })
-    const chevron = chevronOf(root)
-    expect(chevron).not.toBeNull()
-    // Expanded root rows rotate the chevron to point down.
-    expect(chevron?.getAttribute("class")).toContain("rotate-90")
-
-    // Childless root folder and nested folder both render without one.
-    expect(
-      chevronOf(screen.getByRole("treeitem", { name: /Empty folder/ }))
-    ).toBeNull()
-    expect(
-      chevronOf(screen.getByRole("treeitem", { name: /Manuscripts/ }))
-    ).toBeNull()
-  })
-
-  test("chevron sits flat while the root row is collapsed", () => {
-    render(<AISidebar defaultItems={RESOURCES} />)
-
-    const chevron = chevronOf(
-      screen.getByRole("treeitem", { name: /Corpora/ })
-    )
-    expect(chevron).not.toBeNull()
-    expect(chevron?.getAttribute("class")).not.toContain("rotate-90")
-  })
-
-  test("renderActionsTrigger replaces the default actions button", async () => {
-    const user = userEvent.setup()
-    const selected: string[] = []
-    render(
-      <AISidebar
-        defaultItems={RESOURCES}
-        onActiveChange={(id) => selected.push(id)}
-        renderActionsTrigger={(item) => (
-          <button type="button" aria-label={`Custom actions ${item.label}`}>
-            *
-          </button>
-        )}
-      />
-    )
-
-    expect(
-      screen.queryByRole("button", { name: "Actions for Reading list" })
-    ).toBeNull()
-
-    // Opening the menu from the custom trigger must not select the row.
-    await user.click(
-      screen.getByRole("button", { name: "Custom actions Reading list" })
-    )
-    expect(await screen.findByText("Rename")).toBeDefined()
-    expect(selected).toEqual([])
-  })
-})