@exegia/corpora-ui 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exegia/corpora-ui",
-  "version": "0.16.0",
+  "version": "0.17.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

@@ -92,12 +92,12 @@ describe("ShellLayout", () => {
     expect(rightDrawer().getAttribute("data-state")).toBe("expanded")
   })
 
-  test("a panel's own open flag seeds its side's initial state", () => {
+  test("a panel's own defaultOpen flag seeds its side's initial state", () => {
     render(
       <ShellLayout
         panels={{
           ...PANELS,
-          right: { ...PANELS.right!, open: true },
+          right: { ...PANELS.right!, defaultOpen: true },
         }}
         variant="web"
       />
@@ -112,7 +112,7 @@ describe("ShellLayout", () => {
         defaultOpen={{ left: false, right: false }}
         panels={{
           ...PANELS,
-          right: { ...PANELS.right!, open: true },
+          right: { ...PANELS.right!, defaultOpen: true },
         }}
         variant="web"
       />

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

@@ -19,6 +19,7 @@ export function ShellLayout({
   variant = "desktop",
   panels,
   className,
+  header,
   defaultOpen,
   ...panelControlProps
 }: ShellLayoutProps): React.ReactElement {
@@ -29,22 +30,27 @@ export function ShellLayout({
   // an explicit `defaultOpen` record — usually from useShellPanels — wins
   // per side.
   const initialOpen: ShellPanelControlProps["defaultOpen"] = {
-    ...(panels?.left && {
-      left: panels.left.defaultOpen ?? panels.left.open,
-    }),
-    ...(panels?.right && {
-      right: panels.right.defaultOpen ?? panels.right.open,
-    }),
-    ...(defaultOpen)
-  }
+      ...(panels?.left && {
+        left: panels.left.defaultOpen ?? true,
+      }),
+      ...(panels?.right && {
+        right: panels.right.defaultOpen ?? false,
+      }),
+      ...defaultOpen,
+    }
+
 
   return (
     <AnimatedSidebarProvider
       {...panelControlProps}
       defaultOpen={initialOpen}
-      className={cn("block-full", className, background, "relative pr-2")}
+      className={cn(
+        "relative block-full pr-2",
+        className,
+        background
+      )}
       style={{
-        paddingTop: variant === "desktop" ? TITLE_BAR_HEIGHT : 0
+        paddingTop: variant === "desktop" ? TITLE_BAR_HEIGHT : 0,
       }}
     >
       <AnimatedSidebar
@@ -56,24 +62,20 @@ export function ShellLayout({
         {panels?.left?.component}
       </AnimatedSidebar>
 
-      <AnimatedSidebarInset
-        className={cn(
-          "min-w-24 overflow-hidden border-t border-neutral-200 dark:border-neutral-700 inset-ring-1 inset-ring-neutral-50 dark:inset-ring-black bg-white dark:bg-card rounded-lg!",
-          `mx-0!`
-        )}
-      >
-        <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">
+      <AnimatedSidebarInset className="min-w-24">
+        <header className="flex h-12 items-center justify-between gap-2 px-2">
+          <div className="flex min-w-0 items-center gap-2">
             <AnimatedSidebarTrigger>
               {panels?.left?.trigger ?? (
                 <MotionIcon name="PanelLeft" size={24} animation="press" />
               )}
             </AnimatedSidebarTrigger>
           </div>
-          <div className="flex shrink-0 items-center gap-3">
+          {header && <div className="flex flex-1 items-center">{header}</div>}
+          <div className="flex shrink-0 items-center gap-2">
             <AnimatedSidebarTrigger aria-label="Toggle panel" side="right">
               {panels?.right?.trigger ?? (
-                <MotionIcon name="PanelRight" size={24} animation="press" />
+                <MotionIcon className="opacity-70" name="PanelRight" size={24}  />
               )}
             </AnimatedSidebarTrigger>
           </div>
@@ -87,16 +89,10 @@ export function ShellLayout({
         ariaLabel={panels?.right?.name ?? "Secondary panel"}
         // Below md the panel is portal led over the page, so it carries the
         // surface itself; the desktop rail keeps it on the inner panel.
-        className={cn("max-md:border-l max-md:border-neutral-200 max-md:bg-white dark:max-md:border-neutral-700 dark:max-md:bg-card")}
-        collapsible="offcanvas"
-        panelClassName={cn(
-          // The off canvas panel keeps a fixed width so it can slide out of the
-          // zero-width rail, so the inset gutter has to come out of that width
-          // rather than from a left margin.
-          "top-2 ml-0 h-[calc(100%-1rem)] min-w-[calc(var(--sidebar-width))]",
-          "rounded-lg border-t border-neutral-200 bg-white shadow-md inset-ring-1 inset-ring-neutral-50",
-          "dark:border-neutral-700 dark:bg-card dark:inset-ring-black"
+        className={cn(
+          "max-md:border-l max-md:border-neutral-200 max-md:bg-white dark:max-md:border-neutral-700 dark:max-md:bg-card"
         )}
+        collapsible="offcanvas"
         role="complementary"
         side="right"
         variant="inset"
@@ -109,16 +105,8 @@ export function ShellLayout({
 
 function ShellLayoutPlaceholder() {
   return (
-    <div className="grid gap-5">
-      <div className="grid gap-5 lg:grid-cols-3">
-        {Array.from({ length: 3 }).map((_, index) => (
-          <div
-            className="h-32 border border-border bg-background/60"
-            key={index}
-          />
-        ))}
-      </div>
-      <div className="h-72 border border-border bg-background/60" />
+    <div className="flex flex-col flex-1  p-4">
+      <div className="h-96 border border-border bg-muted-foreground/10 rounded-lg" />
     </div>
   )
 }

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

@@ -91,6 +91,7 @@ export interface ShellLayoutProps extends ShellPanelControlProps {
   /** Content for the shell's panels, keyed by the side. The shell renders
    * the `left` rail and the `right` drawer; other sides are reserved. */
   panels?: TPanelMap
+  header?: ReactNode
   className?: string
   variant?: "web" | "desktop"
 }

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

@@ -29,6 +29,7 @@ import { createPortal } from "react-dom"
 import { SharedLayoutBg } from "@/components/motion/shared-layout-bg"
 import { EASE_DRAWER, EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease"
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button";
 
 export type SidebarSide = "left" | "right"
 /** Open flags keyed by the side. Sides left out stay uncontrolled / at their
@@ -583,7 +584,9 @@ export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
         )}
       >
         {side === "right" && !collapsed && (
-          <motion.div className="h-full p-0.5 flex flex-1  bg-radial/decreasing from-amber-400 to-0% hover:to-50% ease-smooth-out to-amber-500/0 cursor-col-resize transition-colors duration-1000 animate-in" />
+          <motion.div className="flex h-full cursor-col-resize justify-center p-1 group relative">
+            <motion.div className="h-full w-full scale-y-0 animate-in bg-radial/decreasing from-amber-300/70 to-amber-500/0 to-40% transition-[colors,scale] duration-200 ease-smooth-out  group-hover:scale-y-100 absolute" />
+          </motion.div>
         )}
         <motion.div
           initial={false}
@@ -594,10 +597,19 @@ 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",
+            "bg-neutral-50 dark:bg-neutral-900",
+            "outline-offset-0.5 border-t-3 border-white outline-neutral-100 dark:border-neutral-800 dark:inset-ring-black",
+            "rounded-lg shadow-md shadow-neutral-200 dark:shadow-neutral-950",
             collapsible === "offcanvas" && "w-(--sidebar-width)",
 
             variant === "floating" && "m-2 h-[calc(100svh-1rem)]",
-            variant === "inset" && "m-2 h-[calc(100svh-1rem)]",
+            variant === "inset" && "my-2 h-[calc(100svh-1rem)]",
+            variant === "inset" &&
+              side === "right" &&
+              "w-[calc(var(--sidebar-width)-0.5rem)]",
+            variant === "inset" &&
+              side === "left" &&
+              "border-transparent! bg-transparent! shadow-none!",
             panelClassName
           )}
         >
@@ -620,7 +632,7 @@ export const AnimatedSidebarTrigger = forwardRef<
   HTMLButtonElement,
   AnimatedSidebarTriggerProps
 >(function AnimatedSidebarTrigger(
-  { className, onClick, side = "left", type = "button", ...props },
+  { onClick, side = "left", type = "button", ...props },
   forwardedRef
 ) {
   const context = useAnimatedSidebar()
@@ -630,7 +642,7 @@ export const AnimatedSidebarTrigger = forwardRef<
   const triggerRef = context.triggerRefs[side]
 
   return (
-    <button
+    <Button
       {...props}
       ref={(node) => {
         triggerRef.current = node
@@ -638,6 +650,8 @@ export const AnimatedSidebarTrigger = forwardRef<
         else if (forwardedRef) forwardedRef.current = node
       }}
       type={type}
+      variant="ghost"
+      size="icon-xl"
       aria-label={props["aria-label"] ?? "Toggle sidebar"}
       aria-expanded={expanded}
       data-slot="sidebar-trigger"
@@ -648,11 +662,6 @@ export const AnimatedSidebarTrigger = forwardRef<
         if (event.defaultPrevented) return
         context.toggleSidebar(side)
       }}
-      className={cn(
-        "inline-flex size-10 shrink-0 items-center justify-center rounded-xl outline-none",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        className
-      )}
     />
   )
 })
@@ -692,41 +701,6 @@ export const AnimatedSidebarClose = forwardRef<
   )
 })
 
-export interface AnimatedSidebarRailProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
-
-export const AnimatedSidebarRail = forwardRef<
-  HTMLButtonElement,
-  AnimatedSidebarRailProps
->(function AnimatedSidebarRail(
-  { className, onClick, type = "button", ...props },
-  forwardedRef
-) {
-  const context = useAnimatedSidebar()
-  const panel = useAnimatedSidebarPanel()
-
-  return (
-    <button
-      {...props}
-      ref={forwardedRef}
-      type={type}
-      data-side={panel.side}
-      aria-label={props["aria-label"] ?? "Toggle sidebar"}
-      title="Toggle sidebar"
-      tabIndex={-1}
-      onClick={(event) => {
-        onClick?.(event)
-        if (event.defaultPrevented) return
-        context.toggleSidebar(panel.side)
-      }}
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 outline-none md:block",
-        "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:bg-transparent after:transition-colors hover:after:bg-border",
-        "data-[side=left]:left-full data-[side=right]:right-0 data-[side=right]:translate-x-1/2",
-        className
-      )}
-    />
-  )
-})
 
 export interface AnimatedSidebarInsetProps extends HTMLMotionProps<"main"> {}
 
@@ -740,8 +714,9 @@ export const AnimatedSidebarInset = forwardRef<
       ref={forwardedRef}
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex min-w-0 flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:mr-1.5 md:peer-data-[variant=inset]:rounded-md md:peer-data-[variant=inset]:shadow-md",
+        "relative flex min-w-0 flex-1 flex-col bg-neutral-50 dark:bg-neutral-900",
+        "outline-offset-0.5 overflow-hidden border-t-3 border-white outline-neutral-100 dark:border-neutral-800 dark:inset-ring-black",
+        "m-2 mx-0 rounded-lg shadow-md shadow-neutral-200 dark:shadow-neutral-950",
         className
       )}
     />

package/src/components/ui/button.tsx

@@ -46,10 +46,10 @@ export const buttonVariants = cva(
       size: {
         default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
         icon: "size-9 sm:size-8",
-        "icon-lg": "size-10 sm:size-9",
-        "icon-sm": "size-8 sm:size-7",
+        "icon-lg": "size-8 sm:size-8",
+        "icon-sm": "size-7 sm:size-6",
         "icon-xl":
-          "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+          "size-10 sm:size-9 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
         "icon-xs":
           "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
         lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",