@exegia/corpora-ui 0.17.0 → 0.18.0

package/src/components/blocks/shell/animated-sidebar-menu-button.tsx

@@ -0,0 +1,151 @@
+import type * as React from "react"
+import { ChevronRight } from "lucide-react"
+import { motion } from "motion/react"
+import { SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease"
+import { cn } from "@/lib/utils"
+import type { AnimatedSidebarMenuButtonProps } from "./type"
+import {
+  LABEL_ENTER_TRANSITION,
+  LABEL_EXIT_TRANSITION,
+  REDUCED_TRANSITION,
+  useAnimatedSidebar,
+  useAnimatedSidebarPanel,
+} from "./utils"
+
+export function AnimatedSidebarMenuButton({
+  children,
+  icon,
+  badge,
+  href,
+  isActive = false,
+  ariaExpanded,
+  disabled = false,
+  closeOnSelect,
+  target,
+  rel,
+  onSelect,
+  className,
+}: AnimatedSidebarMenuButtonProps) {
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
+  const textLabel = typeof children === "string" ? children : undefined
+
+  const select = (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => {
+    if (disabled) {
+      event.preventDefault()
+      return
+    }
+    onSelect?.()
+    const shouldCloseOnSelect = closeOnSelect ?? ariaExpanded === undefined
+    if (context.isMobile && shouldCloseOnSelect) {
+      context.setOpenMobile(false, panel.side)
+    }
+  }
+
+  const content = (
+    <>
+      {isActive ? (
+        <motion.span
+          layoutId={context.layoutId}
+          transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
+          className="absolute inset-0 rounded-xl bg-muted"
+        />
+      ) : null}
+      {icon ? (
+        <span
+          aria-hidden="true"
+          className="relative z-10 grid size-5 shrink-0 place-items-center"
+        >
+          {icon}
+        </span>
+      ) : null}
+      <motion.span
+        initial={false}
+        animate={{
+          opacity: panel.collapsed ? 0 : 1,
+          x: panel.collapsed ? -4 : 0,
+        }}
+        transition={
+          context.reduce
+            ? REDUCED_TRANSITION
+            : panel.collapsed
+              ? LABEL_EXIT_TRANSITION
+              : LABEL_ENTER_TRANSITION
+        }
+        aria-hidden={panel.collapsed}
+        className={cn(
+          "relative z-10 min-w-0 flex-1 truncate",
+          panel.collapsed && "pointer-events-none"
+        )}
+      >
+        {children}
+      </motion.span>
+      {badge && !panel.collapsed ? (
+        <span className="relative z-10 shrink-0 text-xs text-muted-foreground">
+          {badge}
+        </span>
+      ) : null}
+      {ariaExpanded !== undefined ? (
+        <motion.span
+          aria-hidden="true"
+          initial={false}
+          animate={{
+            opacity: panel.collapsed ? 0 : 1,
+            rotate: ariaExpanded ? 90 : 0,
+            x: panel.collapsed ? 4 : 0,
+          }}
+          transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
+          className="relative z-10 grid size-4 shrink-0 place-items-center text-muted-foreground"
+        >
+          <ChevronRight className="size-3.5" />
+        </motion.span>
+      ) : null}
+    </>
+  )
+
+  const interactiveClassName = cn(
+    "relative flex min-h-9 w-full min-w-0 items-center gap-2.5 overflow-hidden rounded-xl px-3 text-left text-sm font-medium outline-none",
+    "text-muted-foreground transition-colors hover:text-foreground",
+    "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
+    isActive && "text-foreground",
+    disabled && "cursor-not-allowed opacity-40",
+    className
+  )
+
+  return href ? (
+    <motion.a
+      href={href}
+      target={target}
+      rel={rel ?? (target === "_blank" ? "noreferrer noopener" : undefined)}
+      aria-current={isActive ? "page" : undefined}
+      aria-expanded={ariaExpanded}
+      aria-disabled={disabled || undefined}
+      aria-label={panel.collapsed ? textLabel : undefined}
+      title={panel.collapsed ? textLabel : undefined}
+      tabIndex={disabled ? -1 : undefined}
+      onClick={select}
+      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={interactiveClassName}
+    >
+      {content}
+    </motion.a>
+  ) : (
+    <motion.button
+      type="button"
+      disabled={disabled}
+      aria-current={isActive ? "page" : undefined}
+      aria-expanded={ariaExpanded}
+      aria-label={panel.collapsed ? textLabel : undefined}
+      title={panel.collapsed ? textLabel : undefined}
+      onClick={select}
+      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={interactiveClassName}
+    >
+      {content}
+    </motion.button>
+  )
+}

package/src/components/blocks/shell/animated-sidebar-menu-item.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from "react"
+import { motion, type HTMLMotionProps } from "motion/react"
+import { SPRING_LAYOUT } from "@/lib/ease"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarMenuItem = forwardRef<
+  HTMLLIElement,
+  HTMLMotionProps<"li">
+>(function AnimatedSidebarMenuItem({ className, ...props }, forwardedRef) {
+  return (
+    <motion.li
+      {...props}
+      ref={forwardedRef}
+      layout="position"
+      transition={SPRING_LAYOUT}
+      data-slot="sidebar-menu-item"
+      className={cn("relative", className)}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-menu-sub-button.tsx

@@ -0,0 +1,85 @@
+import type * as React from "react"
+import { motion } from "motion/react"
+import { SPRING_PRESS } from "@/lib/ease"
+import { cn } from "@/lib/utils"
+import type { AnimatedSidebarMenuSubButtonProps } from "./type"
+import { useAnimatedSidebar, useAnimatedSidebarPanel } from "./utils"
+
+export function AnimatedSidebarMenuSubButton({
+  children,
+  icon,
+  href,
+  isActive = false,
+  disabled = false,
+  closeOnSelect = true,
+  target,
+  rel,
+  onSelect,
+  className,
+}: AnimatedSidebarMenuSubButtonProps) {
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
+
+  const select = (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => {
+    if (disabled) {
+      event.preventDefault()
+      return
+    }
+    onSelect?.()
+    if (context.isMobile && closeOnSelect) {
+      context.setOpenMobile(false, panel.side)
+    }
+  }
+
+  const content = (
+    <>
+      <span
+        aria-hidden="true"
+        className="grid size-4 shrink-0 place-items-center"
+      >
+        {icon ?? <span className="size-1 rounded-full bg-current" />}
+      </span>
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+    </>
+  )
+
+  const interactiveClassName = cn(
+    "flex min-h-8 w-full min-w-0 items-center gap-2 rounded-lg px-2 text-left text-xs outline-none",
+    "text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+    "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
+    isActive && "bg-muted/70 text-foreground",
+    disabled && "cursor-not-allowed opacity-40",
+    className
+  )
+
+  return href ? (
+    <motion.a
+      href={href}
+      target={target}
+      rel={rel ?? (target === "_blank" ? "noreferrer noopener" : undefined)}
+      aria-current={isActive ? "page" : undefined}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : undefined}
+      onClick={select}
+      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={interactiveClassName}
+    >
+      {content}
+    </motion.a>
+  ) : (
+    <motion.button
+      type="button"
+      disabled={disabled}
+      aria-current={isActive ? "page" : undefined}
+      onClick={select}
+      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={interactiveClassName}
+    >
+      {content}
+    </motion.button>
+  )
+}

package/src/components/blocks/shell/animated-sidebar-menu-sub-item.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react"
+import { motion, type HTMLMotionProps } from "motion/react"
+import { cn } from "@/lib/utils"
+import { SUBMENU_ITEM_VARIANTS } from "./utils"
+
+export const AnimatedSidebarMenuSubItem = forwardRef<
+  HTMLLIElement,
+  HTMLMotionProps<"li">
+>(function AnimatedSidebarMenuSubItem({ className, ...props }, forwardedRef) {
+  return (
+    <motion.li
+      {...props}
+      ref={forwardedRef}
+      variants={SUBMENU_ITEM_VARIANTS}
+      data-slot="sidebar-menu-sub-item"
+      className={cn("relative min-w-0", className)}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-menu-sub.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from "react"
+import { AnimatePresence, motion } from "motion/react"
+import { cn } from "@/lib/utils"
+import type { AnimatedSidebarMenuSubProps } from "./type"
+import {
+  SUBMENU_VARIANTS,
+  useAnimatedSidebar,
+  useAnimatedSidebarPanel,
+} from "./utils"
+
+export const AnimatedSidebarMenuSub = forwardRef<
+  HTMLUListElement,
+  AnimatedSidebarMenuSubProps
+>(function AnimatedSidebarMenuSub(
+  { open, children, className, ...props },
+  forwardedRef
+) {
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
+
+  return (
+    <AnimatePresence initial={false} mode="popLayout">
+      {open && !panel.collapsed ? (
+        <motion.ul
+          {...props}
+          ref={forwardedRef}
+          key="sidebar-submenu"
+          variants={context.reduce ? undefined : SUBMENU_VARIANTS}
+          initial={context.reduce ? false : "closed"}
+          animate={context.reduce ? { opacity: 1 } : "open"}
+          exit={context.reduce ? { opacity: 0 } : "closed"}
+          transition={context.reduce ? { duration: 0.12 } : undefined}
+          data-slot="sidebar-menu-sub"
+          className={cn(
+            "relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-l border-border pl-3",
+            className
+          )}
+        >
+          {children}
+        </motion.ul>
+      ) : null}
+    </AnimatePresence>
+  )
+})

package/src/components/blocks/shell/animated-sidebar-menu.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type HTMLAttributes, type Ref } from "react"
+import { SharedLayoutBg } from "@/components/motion/shared-layout-bg"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarMenu = forwardRef<
+  HTMLUListElement,
+  HTMLAttributes<HTMLUListElement>
+>(function AnimatedSidebarMenu(
+  { children, className, ...props },
+  forwardedRef
+) {
+  return (
+    <SharedLayoutBg
+      {...props}
+      ref={forwardedRef as Ref<HTMLElement>}
+      as="ul"
+      inset={0}
+      pillClassName="rounded-xl bg-muted/70"
+      pillContainerClassName="inset-y-auto top-0 h-9"
+      data-slot="sidebar-menu"
+      className={cn("flex w-full min-w-0 list-none flex-col gap-0.5", className)}
+    >
+      {children}
+    </SharedLayoutBg>
+  )
+})

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

@@ -4,4 +4,22 @@ export type * from "./type"
 export * from "./use-shell-panels"
 export * from "./utils"
 
+export * from "./animated-panel"
+export * from "./animated-panel-inset"
+export * from "./animated-panel-provider"
+export * from "./animated-panel-trigger"
+
+export * from "./animated-sidebar-header"
+export * from "./animated-sidebar-content"
+export * from "./animated-sidebar-footer"
+export * from "./animated-sidebar-group"
+export * from "./animated-sidebar-group-label"
+export * from "./animated-sidebar-group-content"
+export * from "./animated-sidebar-menu"
+export * from "./animated-sidebar-menu-item"
+export * from "./animated-sidebar-menu-sub"
+export * from "./animated-sidebar-menu-sub-item"
+export * from "./animated-sidebar-menu-sub-button"
+export * from "./animated-sidebar-menu-button"
+
 export { ShellLayout as default }

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

@@ -4,15 +4,15 @@ import { MotionIcon } from "motion-icons-react"
 import * as React from "react"
 
 import {
-  AnimatedSidebar,
-  AnimatedSidebarInset,
-  AnimatedSidebarProvider,
-  AnimatedSidebarTrigger,
-} from "@/components/motion/animated-sidebar"
+  AnimatedPanel
+} from "./animated-panel.tsx"
 import { cn } from "@/lib/utils"
 import type { ShellLayoutProps, ShellPanelControlProps } from "./type"
 import { TITLE_BAR_HEIGHT } from "./utils"
 import type { ClassNameValue } from "tailwind-merge"
+import { AnimatedPanelProvider } from "./animated-panel-provider.tsx"
+import { AnimatedPanelTrigger } from "./animated-panel-trigger.tsx"
+import { AnimatedPanelInset } from "./animated-panel-inset.tsx"
 
 export function ShellLayout({
   children,
@@ -41,56 +41,56 @@ export function ShellLayout({
 
 
   return (
-    <AnimatedSidebarProvider
+    <AnimatedPanelProvider
       {...panelControlProps}
       defaultOpen={initialOpen}
-      className={cn(
-        "relative block-full pr-2",
-        className,
-        background
-      )}
+      className={cn("relative h-full min-h-0 pb-2", className, background)}
       style={{
         paddingTop: variant === "desktop" ? TITLE_BAR_HEIGHT : 0,
       }}
     >
-      <AnimatedSidebar
+      <AnimatedPanel
         ariaLabel="Primary navigation"
         collapsible="icon"
         role="navigation"
         variant="inset"
       >
         {panels?.left?.component}
-      </AnimatedSidebar>
+      </AnimatedPanel>
 
-      <AnimatedSidebarInset className="min-w-24">
-        <header className="flex h-12 items-center justify-between gap-2 px-2">
+      <AnimatedPanelInset className="min-w-24">
+        <header className="flex h-12 items-center justify-between gap-2 border-b px-2">
           <div className="flex min-w-0 items-center gap-2">
-            <AnimatedSidebarTrigger>
+            <AnimatedPanelTrigger>
               {panels?.left?.trigger ?? (
                 <MotionIcon name="PanelLeft" size={24} animation="press" />
               )}
-            </AnimatedSidebarTrigger>
+            </AnimatedPanelTrigger>
           </div>
           {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">
+            <AnimatedPanelTrigger aria-label="Toggle panel" side="right">
               {panels?.right?.trigger ?? (
-                <MotionIcon className="opacity-70" name="PanelRight" size={24}  />
+                <MotionIcon
+                  className="opacity-70"
+                  name="PanelRight"
+                  size={24}
+                />
               )}
-            </AnimatedSidebarTrigger>
+            </AnimatedPanelTrigger>
           </div>
         </header>
-        <div className="min-h-24 flex-1 overflow-auto">
-          {children ?? <ShellLayoutPlaceholder />}
-        </div>
-      </AnimatedSidebarInset>
+        <div className="min-h-24 flex-1 overflow-auto">{children}</div>
+      </AnimatedPanelInset>
 
-      <AnimatedSidebar
+      <AnimatedPanel
         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"
+          "mr-2 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900",
+          "outline-offset-0.5 border-t-3 border-white outline-neutral-100 dark:inset-ring-black",
+          "rounded-lg shadow-md shadow-neutral-200 dark:shadow-neutral-950"
         )}
         collapsible="offcanvas"
         role="complementary"
@@ -98,15 +98,7 @@ export function ShellLayout({
         variant="inset"
       >
         {panels?.right?.component}
-      </AnimatedSidebar>
-    </AnimatedSidebarProvider>
-  )
-}
-
-function ShellLayoutPlaceholder() {
-  return (
-    <div className="flex flex-col flex-1  p-4">
-      <div className="h-96 border border-border bg-muted-foreground/10 rounded-lg" />
-    </div>
+      </AnimatedPanel>
+    </AnimatedPanelProvider>
   )
 }

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

@@ -1,9 +1,11 @@
 import type { ReactNode } from "react"
 
-import type {
-  AnimatedSidebarProviderProps,
-  SidebarSide,
-} from "@/components/motion/animated-sidebar"
+import {
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type HTMLAttributes,
+} from "react"
+import type { HTMLMotionProps } from "motion/react"
 
 export interface ShellAction {
   id: string
@@ -47,7 +49,7 @@ export type TPanelMap<Side extends TPanelSide = TPanelSide> = Partial<
 >
 
 /** The open/close surface of the shell's panels, lifted straight from
- * AnimatedSidebarProvider — every prop is keyed by side, there are no
+ * AnimatedPanelProvider — every prop is keyed by side, there are no
  * explicit per-side props. `useShellPanels` produces the controlled subset
  * of these as `providerProps`. */
 export type ShellPanelControlProps = Pick<
@@ -82,7 +84,7 @@ export interface ShellPanelControls {
   /** Desktop-only convenience — the in-shell triggers already pick the
    * mobile state themselves when the viewport is narrow. */
   toggle: (side: SidebarSide) => void
-  /** Spread onto ShellLayout (or AnimatedSidebarProvider directly). */
+  /** Spread onto ShellLayout (or AnimatedPanelProvider directly). */
   providerProps: ShellPanelControlProps
 }
 
@@ -95,3 +97,107 @@ export interface ShellLayoutProps extends ShellPanelControlProps {
   className?: string
   variant?: "web" | "desktop"
 }
+
+
+export type SidebarSide = "left" | "right"
+/** 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>>
+export type SidebarVariant = "sidebar" | "floating" | "inset"
+export type SidebarCollapsible = "offcanvas" | "icon" | "none"
+
+export interface AnimatedSidebarContextValue {
+  isMobile: boolean
+  layoutId: string
+  /** Desktop open state, keyed by side. */
+  open: Record<SidebarSide, boolean>
+  /** Mobile overlay open state, keyed by side. */
+  openMobile: Record<SidebarSide, boolean>
+  reduce: boolean
+  setOpen: (open: boolean, side: SidebarSide) => void
+  setOpenMobile: (open: boolean, side: SidebarSide) => void
+  /** Mobile-aware: toggles the overlay below md, the docked panel above. */
+  toggleSidebar: (side: SidebarSide) => void
+  triggerRefs: Record<SidebarSide, React.RefObject<HTMLButtonElement | null>>
+}
+
+export interface AnimatedSidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
+  /** 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 }`. */
+  defaultOpen?: SidebarOpenState
+  onOpenChange?: (open: boolean, side: SidebarSide) => void
+  /** Controlled mobile overlay state, keyed by side. */
+  openMobile?: SidebarOpenState
+  /** Initial mobile overlay state — every side starts closed. */
+  defaultOpenMobile?: SidebarOpenState
+  onOpenMobileChange?: (open: boolean, side: SidebarSide) => void
+  style?: SidebarProviderStyle
+}
+
+export type SidebarProviderStyle = CSSProperties & {
+  "--sidebar-width"?: string
+  "--sidebar-width-icon"?: string
+  "--sidebar-width-mobile"?: string
+}
+
+export type AnimatedSidebarInsetProps = HTMLMotionProps<"main">
+
+export interface AnimatedSidebarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  side?: SidebarSide
+}
+
+export interface AnimatedSidebarPanelContextValue {
+  collapsed: boolean
+  collapsible: SidebarCollapsible
+  side: SidebarSide
+}
+
+export interface AnimatedSidebarProps extends Omit<
+  HTMLMotionProps<"aside">,
+  "children"
+> {
+  children?: ReactNode
+  side?: SidebarSide
+  variant?: SidebarVariant
+  collapsible?: SidebarCollapsible
+  ariaLabel?: string
+  panelClassName?: string
+}
+
+export interface AnimatedSidebarMenuSubProps extends Omit<
+  HTMLMotionProps<"ul">,
+  "children"
+> {
+  open: boolean
+  children?: ReactNode
+}
+
+export interface AnimatedSidebarMenuSubButtonProps {
+  children: ReactNode
+  icon?: ReactNode
+  href?: string
+  isActive?: boolean
+  disabled?: boolean
+  closeOnSelect?: boolean
+  target?: "_blank" | "_self" | "_parent" | "_top"
+  rel?: string
+  onSelect?: () => void
+  className?: string
+}
+
+export interface AnimatedSidebarMenuButtonProps {
+  children: ReactNode
+  icon?: ReactNode
+  badge?: ReactNode
+  href?: string
+  isActive?: boolean
+  ariaExpanded?: boolean
+  disabled?: boolean
+  closeOnSelect?: boolean
+  target?: "_blank" | "_self" | "_parent" | "_top"
+  rel?: string
+  onSelect?: () => void
+  className?: string
+}

package/src/components/blocks/shell/use-shell-panels.ts

@@ -2,10 +2,10 @@
 
 import { useCallback, useMemo, useState } from "react"
 
-import type { SidebarSide } from "@/components/motion/animated-sidebar"
 import type {
   ShellPanelControlProps,
   ShellPanelControls,
+  SidebarSide,
   UseShellPanelsOptions,
 } from "./type"