@exegia/corpora-ui 0.15.0 → 0.16.0

package/package.json

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

package/src/components/blocks/shell/__tests__/shell-layout.test.tsx

@@ -73,6 +73,25 @@ describe("ShellLayout", () => {
     expect(leftRail().getAttribute("data-state")).toBe("collapsed")
   })
 
+  test("a panel's trigger node replaces the default icon, keeping the toggle", async () => {
+    const user = userEvent.setup()
+    render(
+      <ShellLayout
+        panels={{
+          ...PANELS,
+          right: { ...PANELS.right!, trigger: <span>Custom trigger</span> },
+        }}
+        variant="web"
+      />
+    )
+
+    const rightTrigger = screen.getByRole("button", { name: "Toggle panel" })
+    expect(rightTrigger.textContent).toContain("Custom trigger")
+
+    await user.click(rightTrigger)
+    expect(rightDrawer().getAttribute("data-state")).toBe("expanded")
+  })
+
   test("a panel's own open flag seeds its side's initial state", () => {
     render(
       <ShellLayout

package/src/components/blocks/shell/shell-layout.tsx

@@ -65,12 +65,16 @@ export function ShellLayout({
         <header className="flex h-16 items-center justify-between gap-3 px-4 sm:px-6">
           <div className="flex min-w-0 items-center gap-3">
             <AnimatedSidebarTrigger>
-              <MotionIcon name="PanelLeft" size={24} animation="press" />
+              {panels?.left?.trigger ?? (
+                <MotionIcon name="PanelLeft" size={24} animation="press" />
+              )}
             </AnimatedSidebarTrigger>
           </div>
           <div className="flex shrink-0 items-center gap-3">
             <AnimatedSidebarTrigger aria-label="Toggle panel" side="right">
-              <MotionIcon name="PanelRight" size={24} animation="press" />
+              {panels?.right?.trigger ?? (
+                <MotionIcon name="PanelRight" size={24} animation="press" />
+              )}
             </AnimatedSidebarTrigger>
           </div>
         </header>

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

@@ -23,6 +23,10 @@ export interface IPanel {
   id: string
   name: string
   component: ReactNode
+  /** Replaces the default icon inside the panel's header trigger. The shell
+   * keeps the trigger button itself (toggle wiring, aria-label) — this only
+   * swaps what renders inside it. */
+  trigger?: ReactNode
   open: boolean
   defaultOpen?: boolean
   side: "left" | "bottom" | "right" | "sidebar"

package/src/components/motion/animated-sidebar.tsx

@@ -31,7 +31,7 @@ import { EASE_DRAWER, EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease"
 import { cn } from "@/lib/utils"
 
 export type SidebarSide = "left" | "right"
-/** Open flags keyed by side. Sides left out stay uncontrolled / at their
+/** Open flags keyed by the side. Sides left out stay uncontrolled / at their
  * default — there is no per-side prop, the record IS the API. */
 export type SidebarOpenState = Partial<Record<SidebarSide, boolean>>
 type SidebarVariant = "sidebar" | "floating" | "inset"
@@ -198,7 +198,7 @@ type SidebarProviderStyle = CSSProperties & {
 }
 
 export interface AnimatedSidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
-  /** Controlled desktop open state, keyed by side. A side left undefined
+  /** Controlled desktop open state, keyed by the side. A side left undefined
    * stays uncontrolled. */
   open?: SidebarOpenState
   /** Initial desktop open state, merged over `{ left: true, right: false }`. */
@@ -572,7 +572,7 @@ export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
         className={cn(
           "group/sidebar relative hidden h-auto shrink-0 will-change-[width] md:block",
           "peer flex!",
-          // The offcanvas panel keeps its full width and slides out of the
+          // The off canvas panel keeps its full width and slides out of the
           // zero-width rail, so clip it rather than letting it bleed past the
           // shell edge. The clip margin lets the panel's own shadow escape
           // without letting the slid-out panel escape with it
@@ -594,7 +594,7 @@ export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
           transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
           className={cn(
             "sticky top-0 flex h-svh w-full flex-col overflow-hidden",
-            collapsible === "offcanvas" && "w-[var(--sidebar-width)]",
+            collapsible === "offcanvas" && "w-(--sidebar-width)",
 
             variant === "floating" && "m-2 h-[calc(100svh-1rem)]",
             variant === "inset" && "m-2 h-[calc(100svh-1rem)]",