@exegia/corpora-ui 0.27.0 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exegia/corpora-ui",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "shadcn-ready React UI library for the corpora manuscript-research apps.",
   "license": "MIT",
   "repository": {

package/src/components/blocks/profile/__tests__/profile-card-block.test.tsx

@@ -151,9 +151,11 @@ describe("ProfileCardBlock", () => {
     const identity = trigger.querySelector('[data-slot="profile-card-identity"]');
     expect(identity?.getAttribute("aria-hidden")).toBe("true");
     expect(identity?.textContent).toContain("Jenny Hamilton");
-    // 40px tile, like the tree rail: no inset, avatar centred.
+    // Full-width h-10 row, like the tree rail's tiles: avatar centred on
+    // the rail's own centre line, no inset.
     expect(trigger.className).toContain("justify-center");
-    expect(trigger.className).toContain("size-10");
+    expect(trigger.className).toContain("h-10");
+    expect(trigger.className).toContain("w-full");
     expect(trigger.className).toContain("p-0");
 
     rerender(<ProfileCardBlock user={USER} variant="expanded" />);

package/src/components/blocks/profile/profile-card-block.tsx

@@ -233,18 +233,18 @@ export function ProfileCardBlock({
               // Quiet at rest — the background only surfaces on hover or
               // while the menu is open.
               "h-auto w-full justify-between py-1.5 pl-1.5 data-popup-open:bg-accent sm:h-auto",
-              // Folded: a 40px avatar tile, the size the tree rail uses. It
-              // is 8px wider than a footer's 32px inner box on purpose — the
-              // -mx-1 lets it borrow the footer padding so the 32px avatar
-              // clears the 1px border and sits dead centre. The label spans
-              // below fold to zero width rather than unmounting so the change
-              // animates. Button's own gap-2 stays: its always-mounted loading
-              // slot carries a -ms-2 that cancels it, so zeroing the gap would
-              // pull the avatar 8px left; the folded chevron cancels its own
-              // gap instead (see below). `sm:size-10` because the base carries
-              // an `sm:h-auto` that an unprefixed size would not beat.
+              // Folded: a full-width h-10 row matching the tree rail's tiles,
+              // avatar centred — a fixed-width tile drifted off the rail's
+              // centre line whenever the collapsed panel was wider than it.
+              // The label spans below fold to zero width rather than
+              // unmounting so the change animates. Button's own gap-2 stays:
+              // its always-mounted loading slot carries a -ms-2 that cancels
+              // it, so zeroing the gap would pull the avatar 8px left; the
+              // folded chevron cancels its own gap instead (see below).
+              // `sm:h-10` because the base carries an `sm:h-auto` that an
+              // unprefixed height would not beat.
               collapsed &&
-                "-mx-1 size-10 shrink-0 justify-center rounded-xl p-0 sm:size-10",
+                "h-10 w-full shrink-0 justify-center rounded-xl p-0 sm:h-10",
               className
             )}
             data-collapsed={collapsed ? "" : undefined}

package/src/components/composed/tree/CLAUDE.md

@@ -15,9 +15,9 @@ first; this file only holds what is specific to the tree.
 | `use-tree-state.ts` | `useTreeState(id)` (reads, re-renders on any change) and `useTreeActions(id)` (writes only, never re-renders). |
 | `use-tree-dnd.ts`   | Stable drag handlers for `files`; they read `draggedId`/`dropTarget` out of the store at call time.       |
 | `tree-context.ts`   | Context value = `{ treeId, renderTrailing, dnd }` only. Never the controller.                            |
-| `tree.tsx`          | `Tree` (props form → `UncontrolledTree`, controller form → `TreeView`), rail width measurement, roving keyboard nav. |
+| `tree.tsx`          | `Tree` (props form → `UncontrolledTree`, controller form → `TreeView`), roving keyboard nav. |
 | `tree-node.tsx`     | `TreeRow` (memoized). Per-node atom subscriptions, row kind resolution, rename input, tooltip, toc overlay toggle, trailing slot, branch animation. |
-| `constants.ts`      | Durations, easings, `RAIL_COLLAPSED_WIDTH`, motion variants.                                            |
+| `constants.ts`      | Durations, easings, motion variants.                                                                    |
 | `utils.ts`          | Pure tree helpers (`findNode`, `moveNode`, `renameNode`, ancestor walks).                               |
 | `index.ts`          | Barrel. Public atoms are listed explicitly — never `export *`.                                          |
 | `__tests__/`        | `tree.test.tsx` (rendering per variant), `use-tree.test.tsx` (controller/hook), `tree-atom.test.tsx` (store + memo guard). |
@@ -43,10 +43,10 @@ first; this file only holds what is specific to the tree.
   `rowInteractionProps`, spread onto the Button; Base UI's `mergeProps` lets
   them override Button's own `data-slot="button"`. `sound` is forwarded to the
   Button so its press/release cues follow the tree's `sound` prop.
-- Collapsed sidebar rows are `h-10! rounded-xl! justify-center px-0` tiles;
-  the rail is `w-10` (40px). `RAIL_COLLAPSED_WIDTH` **must equal** the class
-  (a test pins it to 40) — the motion target and the resting class must agree
-  or the rail jumps on its first fold.
+- Collapsed sidebar rows are `h-10! rounded-xl! justify-center px-0` tiles
+  spanning the **full rail width** — the rail itself stays `w-full` in both
+  states; its fold is the container's width change (an icon-collapsed panel)
+  plus the labels folding. Folded icons step up to `size-5 text-foreground`.
 - Row kinds (`rowKindOf`): `link` (selectable, `aria-expanded` absent),
   `toggle` (parent in navigation/files, `aria-expanded` on the row),
   `section` (top level of a 3-level navigation tree). `toc` parents are
@@ -68,11 +68,11 @@ first; this file only holds what is specific to the tree.
 3. **Keep the rail label mounted.** Unmounting the label on collapse killed
    the fold animation; it animates `width/opacity/x/display` in place and the
    test asserts `display: none`, not absence. (12b6a1f)
-4. **Both rail width endpoints must be px.** Motion cannot tween a number
+4. **Both rail width endpoints must be px** *(historical — the rail no
+   longer animates its own width; the container's fold carries it, see the
+   fix/tree-collapsed-behavior entry)*. Motion cannot tween a number
    against `"100%"`; doing so pinned the inline width at the collapsed value
-   and the rail never reopened. The expanded width is measured off the
-   container, only while expanded, with the list's inline width cleared for
-   the sample. (a69072d, 2f7539f)
+   and the rail never reopened. (a69072d, 2f7539f)
 5. **Tooltip is disabled, not unmounted, when the rail expands.** Swapping the
    wrapper remounts the row and cuts the label fold short. Test asserts row
    identity across collapse.
@@ -109,6 +109,19 @@ first; this file only holds what is specific to the tree.
 
 ## Change log
 
+- **2026-08-22 — fix/tree-collapsed-behavior** (on `release/v0.28.0`)
+  - `tree.tsx`: the rail no longer narrows itself — the `w-10` collapsed
+    class, the width measurement (`railRef`/ResizeObserver) and the px width
+    tween are gone. The list is `w-full` in both states (root `motion.ul` →
+    plain `ul`); the nav wrapper dropped `justify-center` for `w-full`. The
+    fold is the hosting panel's width change plus the labels folding.
+  - `tree-node.tsx`: folded rail icons step up to `size-5` and take
+    `text-foreground` (rows are icon-only, so muted-at-rest read as disabled).
+  - `constants.ts`: `RAIL_COLLAPSED_WIDTH` removed (was internal-only).
+  - `blocks/profile/profile-card-block.tsx`: the folded card is a full-width
+    `h-10 w-full` row (was a `-mx-1 size-10` tile) so the avatar centres on
+    the rail's own centre line regardless of panel width.
+
 - **2026-08-18 — fix/tree-collapsed** (on `release/v0.21.0`)
   - `tree-node.tsx`: link/toggle rows render the shared `Button` (ghost /
     secondary when active on sidebar); anchor branch removed; collapsed rail

package/src/components/composed/tree/__tests__/tree.test.tsx

@@ -3,7 +3,6 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { FileTextIcon, FolderIcon, SearchIcon } from "lucide-react"
 
-import { RAIL_COLLAPSED_WIDTH } from "../constants"
 import { Tree } from "../index"
 import type { TreeNode } from "../type"
 import { moveNode } from "../utils"
@@ -271,12 +270,10 @@ describe("Tree · toc", () => {
 })
 
 describe("Tree · sidebar", () => {
-  test("the rail's width class tracks collapsed in both directions", async () => {
-    // Locks the resting widths to the class, so the rail is right even when
-    // the animation never applies. NB this does NOT reproduce the bug it was
-    // written alongside — that was an inline width pinned at 44px by a
-    // px-against-"100%" motion target, and motion sets no inline styles
-    // under happy-dom. Only a real browser catches that one.
+  test("the rail spans its container in both states", async () => {
+    // The rail no longer narrows itself to a fixed px column — its fold is
+    // the container's width change (an icon-collapsed panel). Both states
+    // must keep w-full so rows span the rail edge to edge.
     const { rerender } = render(<Tree items={RAIL} variant="sidebar" />)
     const rail = () => document.querySelector('[data-slot="tree"]')
 
@@ -285,30 +282,30 @@ describe("Tree · sidebar", () => {
 
     rerender(<Tree collapsed items={RAIL} variant="sidebar" />)
     await settleExit()
-    expect(rail()?.className).toContain("w-10")
+    expect(rail()?.className).toContain("w-full")
+    expect(rail()?.className).not.toContain("w-10")
     expect(rail()?.getAttribute("data-collapsed")).toBe("")
-    // Collapsed rows are square-ish tiles that fill the 40px rail.
+    // Collapsed rows are full-width tiles with the icon centred, stepped up
+    // to size-5 and foreground colour — the icon is the whole row.
     const row = screen.getByRole("button", { name: "Search" })
     expect(row.className).toContain("h-10!")
     expect(row.className).toContain("rounded-xl!")
     expect(row.className).toContain("justify-center")
+    expect(row.className).toContain("w-full")
+    const icon = row.querySelector('[data-slot="tree-row-icon"]')
+    expect(icon?.className).toContain("size-5")
+    expect(icon?.className).toContain("text-foreground")
 
-    // Back open — the direction that was broken.
+    // Back open — rows drop the tile treatment, icons step back down.
     rerender(<Tree items={RAIL} variant="sidebar" />)
     await settleExit()
     expect(rail()?.className).toContain("w-full")
-    expect(rail()?.className).not.toContain("w-10")
     expect(rail()?.getAttribute("data-collapsed")).toBeNull()
-    expect(screen.getByRole("button", { name: "Search" }).className).not.toContain(
-      "h-10!"
-    )
-  })
-
-  test("the collapsed px target matches the resting width class", () => {
-    // tree.tsx animates the rail to RAIL_COLLAPSED_WIDTH once measured, and
-    // falls back to the class before that. Tailwind's w-10 is 2.5rem = 40px;
-    // the two must agree or the rail jumps on its first collapse.
-    expect(RAIL_COLLAPSED_WIDTH).toBe(40)
+    const reopened = screen.getByRole("button", { name: "Search" })
+    expect(reopened.className).not.toContain("h-10!")
+    expect(
+      reopened.querySelector('[data-slot="tree-row-icon"]')?.className
+    ).not.toContain("size-5")
   })
 
   test("collapsed shows icon-only rows that keep an accessible name", async () => {

package/src/components/composed/tree/constants.ts

@@ -15,11 +15,6 @@ export const TREE_MICRO_DURATION = 0.15
 /** Sidebar rail label reveal/hide when `collapsed` flips. */
 export const TREE_COLLAPSE_DURATION = 0.2
 
-/** The collapsed rail's width in px — one `h-10 rounded-xl` icon row, edge
- * to edge. Kept in sync with the `w-10` resting class the rail falls back to
- * before its expanded width has been measured. */
-export const RAIL_COLLAPSED_WIDTH = 40
-
 /** Rail label text fade — starts as the width growth is finishing, so the
  * label never reads as clipped mid-grow. */
 export const TREE_LABEL_REVEAL_DELAY = 0.01

package/src/components/composed/tree/tree-node.tsx

@@ -295,9 +295,15 @@ function TreeRowImpl({ node, depth }: TreeRowProps): React.ReactElement {
       {kind !== "section" && node.icon && (
         <span
           className={cn(
-            "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+            "flex size-4 shrink-0 items-center justify-center transition-[width,height,color] duration-150 [&>svg]:size-4",
+            // Folded rail: the icon is the whole row, so it steps up a size
+            // and takes the foreground colour instead of muted.
+            variant === "sidebar" &&
+              collapsed &&
+              "size-5 text-foreground [&>svg]:size-5",
             active && "text-accent-foreground"
           )}
+          data-slot="tree-row-icon"
         >
           {node.icon}
         </span>

package/src/components/composed/tree/tree.tsx

@@ -13,14 +13,8 @@ import type {
   TreeNode,
   TreeProps,
 } from "./type"
-import {
-  RAIL_COLLAPSED_WIDTH,
-  TREE_COLLAPSE_DURATION,
-  TREE_EASE,
-} from "./constants"
 import { useTree } from "./use-tree"
 import { useTreeDndHandlers } from "./use-tree-dnd"
-import { motion, useReducedMotion } from "motion/react"
 
 const DEFAULT_LABELS: Record<TreeController["variant"], string> = {
   navigation: "Main",
@@ -109,43 +103,6 @@ function TreeView({
 }: TreeViewProps): React.ReactElement {
   const { variant, items, sectioned, collapsed } = tree
   const rootRef = React.useRef<HTMLUListElement>(null)
-  const reduce = useReducedMotion()
-
-  // The rail animates between two px widths, so the expanded one has to be
-  // measured off the container. Watched rather than read once: the rail is
-  // as wide as whatever holds it, which can change on resize.
-  //
-  // A container with no width of its own sizes to the list — so it shrinks
-  // around the 40px rail once collapsed and follows the list mid-tween. Both
-  // would feed the list's own width back in as its target and pin it. So:
-  // no observing while collapsed (the last expanded width stands), and each
-  // sample is taken with the list's inline width cleared, so the classes'
-  // resting width — not the tween — is what the container is holding.
-  const railRef = React.useRef<HTMLElement>(null)
-  const [railWidth, setRailWidth] = React.useState<number | null>(null)
-  React.useLayoutEffect(() => {
-    const container = railRef.current
-    const list = rootRef.current
-    if (variant !== "sidebar" || collapsed || !container || !list) return
-    const measure = () => {
-      const inline = list.style.width
-      list.style.width = ""
-      const width = container.clientWidth
-      list.style.width = inline
-      setRailWidth(width)
-    }
-    measure()
-    const observer = new ResizeObserver(measure)
-    observer.observe(container)
-    return () => observer.disconnect()
-  }, [variant, collapsed])
-
-  // Until the measurement lands the className carries the width, so the
-  // rail is never wrong — just not animated on its very first frame.
-  const railTarget =
-    variant === "sidebar" && railWidth !== null
-      ? { width: collapsed ? RAIL_COLLAPSED_WIDTH : railWidth }
-      : undefined
 
   // Roving over the DOM rather than a parallel model: collapsed branches
   // unmount, so a row query is exactly the visible set in order.
@@ -225,26 +182,17 @@ function TreeView({
 
   const label = ariaLabel ?? DEFAULT_LABELS[variant]
   let rendered = (
-    <motion.ul
+    <ul
       aria-label={label}
       className={cn(
-        "flex h-full min-w-0 flex-col",
-        // Resting widths, and the fallback until the rail is measured. The
-        // motion target below overrides these with an inline width.
-        collapsed ? "w-10 gap-y-2!" : "w-full",
+        // The list always spans its container — collapsed included. The
+        // rail's fold is its container's width change (an icon-collapsed
+        // panel) plus the labels folding; rows keep the full width so their
+        // hit areas and hover surfaces span the rail edge to edge.
+        "flex h-full w-full min-w-0 flex-col",
+        collapsed && "gap-y-2!",
         variant === "files" ? "gap-px" : sectioned ? "gap-3" : "gap-0.5"
       )}
-      // Both endpoints must be px: motion cannot interpolate a number
-      // against "100%", and animating 40 -> "100%" pinned the inline width
-      // at 40px, so the rail collapsed once and never reopened. The
-      // expanded target is the rail's own measured width.
-      initial={false}
-      animate={railTarget}
-      transition={
-        reduce
-          ? { duration: 0 }
-          : { duration: TREE_COLLAPSE_DURATION, ease: TREE_EASE }
-      }
       data-collapsed={collapsed ? "" : undefined}
       data-slot="tree"
       data-variant={variant}
@@ -255,7 +203,7 @@ function TreeView({
       {items.map((node) => (
         <TreeRow depth={0} key={node.id} node={node} />
       ))}
-    </motion.ul>
+    </ul>
   )
 
   // The collapsed rail's rows carry tooltips — one provider groups their
@@ -274,9 +222,8 @@ function TreeView({
       ) : (
         <nav
           aria-label={label}
-          className={cn("flex h-full min-w-0 justify-center", className)}
+          className={cn("flex h-full w-full min-w-0", className)}
           data-slot="tree-root"
-          ref={railRef}
         >
           {rendered}
         </nav>