@exegia/corpora-ui 0.17.0 → 0.19.0

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"
 

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

@@ -1,2 +1,143 @@
-
 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 {
+  AnimatedSidebarContextValue,
+  AnimatedSidebarPanelContextValue,
+} 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"
+
+
+export const AnimatedSidebarContext =
+  createContext<AnimatedSidebarContextValue | null>(null)
+
+export const AnimatedSidebarPanelContext =
+  createContext<AnimatedSidebarPanelContextValue | 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/docs/demo-controls.tsx

@@ -124,7 +124,7 @@ export function DemoStage({
       <div
         className={
           canvasClassName ??
-          "flex min-h-32 w-full items-center justify-center rounded-lg"
+          "flex min-h-24 max-h-32 w-full items-center justify-center rounded-lg"
         }
       >
         {children}