@exegia/corpora-ui 0.10.0 → 0.12.0

package/src/components/blocks/nav/sidebar-block.tsx

@@ -12,149 +12,20 @@ import {
   AnimatedSidebarGroupLabel,
   AnimatedSidebarHeader,
   AnimatedSidebarMenu,
-  AnimatedSidebarMenuButton,
-  AnimatedSidebarMenuItem,
-  AnimatedSidebarMenuSub,
-  AnimatedSidebarMenuSubButton,
-  AnimatedSidebarMenuSubItem,
   AnimatedSidebarProvider,
   AnimatedSidebarTrigger,
 } from "@/components/motion/animated-sidebar"
 import { cn } from "@/lib/utils"
+import { SidebarNavRow } from "@/components/blocks/nav/sidebar-nav-row"
 
-/** A nested link, one level under a top-level entry. */
-export interface SidebarNavSubItem {
-  id: string
-  label: string
-  icon?: React.ReactNode
-  /** Renders an anchor. Without one the row is a button. */
-  href?: string
-  disabled?: boolean
-  target?: "_blank" | "_self" | "_parent" | "_top"
-  onSelect?: () => void
-}
-
-/** A top-level entry. With `items` it expands instead of navigating. */
-export interface SidebarNavItem extends SidebarNavSubItem {
-  /** Trailing hint — a count, a "New" pill. Hidden while collapsed. */
-  badge?: React.ReactNode
-  items?: SidebarNavSubItem[]
-  /** Start expanded. Defaults to expanded when one of its children is active. */
-  defaultOpen?: boolean
-}
-
-/** A titled run of entries. The title hides while the rail is collapsed. */
-export interface SidebarNavSection {
-  id: string
-  label?: string
-  items: SidebarNavItem[]
-}
-
-export interface SidebarBlockProps {
-  sections: SidebarNavSection[]
-  /** `id` of the current entry — matches top-level and nested ids alike. */
-  activeId?: string
-  /** Fires for every selection, after the entry's own `onSelect`. */
-  onNavigate?: (item: SidebarNavItem | SidebarNavSubItem) => void
-  /** Brand row above the navigation. */
-  header?: React.ReactNode
-  /** Pinned below the navigation — an account card, a version note. */
-  footer?: React.ReactNode
-  /** Collapse toggle in the header row. */
-  showTrigger?: boolean
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  /** How the rail collapses: to icons, off-canvas, or not at all. */
-  collapsible?: "offcanvas" | "icon" | "none"
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  /** Under 768px the panel is a drawer — drive it from your own header. */
-  openMobile?: boolean
-  defaultOpenMobile?: boolean
-  onOpenMobileChange?: (open: boolean) => void
-  /** Rail widths. CSS lengths, e.g. "16rem". */
-  width?: string
-  iconWidth?: string
-  mobileWidth?: string
-  ariaLabel?: string
-  className?: string
-}
-
-function isActive(id: string, activeId?: string): boolean {
-  return activeId !== undefined && id === activeId
-}
-
-interface RowProps {
-  item: SidebarNavItem
-  activeId?: string
-  onNavigate?: (item: SidebarNavItem | SidebarNavSubItem) => void
-}
+import type { ISidebarBlockProps } from "@/components/blocks/nav/types"
 
-function SidebarNavRow({ item, activeId, onNavigate }: RowProps) {
-  const children = item.items ?? []
-  const hasChildren = children.length > 0
-  const childActive = children.some((child) => isActive(child.id, activeId))
-  // null = follow the active child; a boolean = the reader has said otherwise.
-  const [toggled, setToggled] = React.useState<boolean | null>(null)
-  const [wasChildActive, setWasChildActive] = React.useState(childActive)
-
-  // Navigating into a nested route from elsewhere reveals its parent, even if
-  // the reader had collapsed it. Adjusted during render rather than in an
-  // effect, so the group never paints closed for a frame first.
-  if (childActive !== wasChildActive) {
-    setWasChildActive(childActive)
-    if (childActive) setToggled(null)
-  }
-
-  const open = toggled ?? item.defaultOpen ?? childActive
-
-  function select(entry: SidebarNavItem | SidebarNavSubItem) {
-    entry.onSelect?.()
-    onNavigate?.(entry)
-  }
-
-  return (
-    <AnimatedSidebarMenuItem>
-      <AnimatedSidebarMenuButton
-        ariaExpanded={hasChildren ? open : undefined}
-        badge={item.badge}
-        disabled={item.disabled}
-        href={hasChildren ? undefined : item.href}
-        icon={item.icon}
-        isActive={isActive(item.id, activeId)}
-        onSelect={() => {
-          if (hasChildren) {
-            setToggled(!open)
-            return
-          }
-          select(item)
-        }}
-        target={item.target}
-      >
-        {item.label}
-      </AnimatedSidebarMenuButton>
-      {hasChildren ? (
-        <AnimatedSidebarMenuSub open={open}>
-          {children.map((child) => (
-            <AnimatedSidebarMenuSubItem key={child.id}>
-              <AnimatedSidebarMenuSubButton
-                disabled={child.disabled}
-                href={child.href}
-                icon={child.icon}
-                isActive={isActive(child.id, activeId)}
-                onSelect={() => select(child)}
-                target={child.target}
-              >
-                {child.label}
-              </AnimatedSidebarMenuSubButton>
-            </AnimatedSidebarMenuSubItem>
-          ))}
-        </AnimatedSidebarMenuSub>
-      ) : null}
-    </AnimatedSidebarMenuItem>
-  )
-}
+export type {
+  ISidebarBlockProps as SidebarBlockProps,
+  ISidebarNavItem as SidebarNavItem,
+  ISidebarNavSection as SidebarNavSection,
+  ISidebarNavSubItem as SidebarNavSubItem,
+} from "@/components/blocks/nav/types"
 
 /**
  * Application sidebar navigation, driven by data rather than composition.
@@ -187,7 +58,7 @@ export function SidebarBlock({
   mobileWidth,
   ariaLabel = "Main",
   className,
-}: SidebarBlockProps): React.ReactElement {
+}: ISidebarBlockProps): React.ReactElement {
   return (
     <AnimatedSidebarProvider
       // The provider ships a full-page flex shell; this block is just the
@@ -220,26 +91,27 @@ export function SidebarBlock({
         side={side}
         variant={variant}
       >
-        {header || showTrigger ? (
-          <AnimatedSidebarHeader>
-            <div className="flex min-w-0 items-center justify-between gap-2">
-              {header ? <div className="min-w-0 flex-1">{header}</div> : null}
-              {showTrigger ? (
-                <AnimatedSidebarTrigger className="text-muted-foreground hover:text-foreground">
-                  <PanelLeftIcon className="size-4.5" />
-                </AnimatedSidebarTrigger>
-              ) : null}
-            </div>
-          </AnimatedSidebarHeader>
-        ) : null}
+        {header ||
+          (showTrigger && (
+            <AnimatedSidebarHeader>
+              <div className="flex min-w-0 items-center justify-between gap-2">
+                {header && <div className="min-w-0 flex-1">{header}</div>}
+                {showTrigger && (
+                  <AnimatedSidebarTrigger className="text-muted-foreground hover:text-foreground">
+                    <PanelLeftIcon className="size-4.5" />
+                  </AnimatedSidebarTrigger>
+                )}
+              </div>
+            </AnimatedSidebarHeader>
+          ))}
         <AnimatedSidebarContent>
           {sections.map((section) => (
             <AnimatedSidebarGroup key={section.id}>
-              {section.label ? (
+              {section.label && (
                 <AnimatedSidebarGroupLabel>
                   {section.label}
                 </AnimatedSidebarGroupLabel>
-              ) : null}
+              )}
               <AnimatedSidebarGroupContent>
                 <AnimatedSidebarMenu>
                   {section.items.map((item) => (
@@ -255,9 +127,7 @@ export function SidebarBlock({
             </AnimatedSidebarGroup>
           ))}
         </AnimatedSidebarContent>
-        {footer ? (
-          <AnimatedSidebarFooter>{footer}</AnimatedSidebarFooter>
-        ) : null}
+        {footer && <AnimatedSidebarFooter>{footer}</AnimatedSidebarFooter>}
       </AnimatedSidebar>
     </AnimatedSidebarProvider>
   )

package/src/components/blocks/nav/sidebar-nav-row.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  AnimatedSidebarMenuButton,
+  AnimatedSidebarMenuItem,
+  AnimatedSidebarMenuSub,
+  AnimatedSidebarMenuSubButton,
+  AnimatedSidebarMenuSubItem,
+} from "@/components/motion/animated-sidebar"
+
+import type { IRowProps, ISidebarNavItem, ISidebarNavSubItem } from "@/components/blocks/nav/types"
+import { isActive } from "@/components/blocks/nav/utils"
+
+export function SidebarNavRow({ item, activeId, onNavigate }: IRowProps) {
+  const children = item.items ?? []
+  const hasChildren = children.length > 0
+  const childActive = children.some((child) => isActive(child.id, activeId))
+  // null = follow the active child; a boolean = the reader has said otherwise.
+  const [toggled, setToggled] = React.useState<boolean | null>(null)
+  const [wasChildActive, setWasChildActive] = React.useState(childActive)
+
+  // Navigating into a nested route from elsewhere reveals its parent, even if
+  // the reader had collapsed it. Adjusted during render rather than in an
+  // effect, so the group never paints closed for a frame first.
+  if (childActive !== wasChildActive) {
+    setWasChildActive(childActive)
+    if (childActive) setToggled(null)
+  }
+
+  const open = toggled ?? item.defaultOpen ?? childActive
+
+  function select(entry: ISidebarNavItem | ISidebarNavSubItem) {
+    entry.onSelect?.()
+    onNavigate?.(entry)
+  }
+
+  return (
+    <AnimatedSidebarMenuItem>
+      <AnimatedSidebarMenuButton
+        ariaExpanded={hasChildren ? open : undefined}
+        badge={item.badge}
+        disabled={item.disabled}
+        href={hasChildren ? undefined : item.href}
+        icon={item.icon}
+        isActive={isActive(item.id, activeId)}
+        onSelect={() => {
+          if (hasChildren) {
+            setToggled(!open)
+            return
+          }
+          select(item)
+        }}
+        target={item.target}
+      >
+        {item.label}
+      </AnimatedSidebarMenuButton>
+      {hasChildren ? (
+        <AnimatedSidebarMenuSub open={open}>
+          {children.map((child) => (
+            <AnimatedSidebarMenuSubItem key={child.id}>
+              <AnimatedSidebarMenuSubButton
+                disabled={child.disabled}
+                href={child.href}
+                icon={child.icon}
+                isActive={isActive(child.id, activeId)}
+                onSelect={() => select(child)}
+                target={child.target}
+              >
+                {child.label}
+              </AnimatedSidebarMenuSubButton>
+            </AnimatedSidebarMenuSubItem>
+          ))}
+        </AnimatedSidebarMenuSub>
+      ) : null}
+    </AnimatedSidebarMenuItem>
+  )
+}

package/src/components/blocks/nav/types.ts

@@ -0,0 +1,65 @@
+
+/** A nested link, one level under a top-level entry. */
+export interface ISidebarNavSubItem {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  /** Renders an anchor. Without one the row is a button. */
+  href?: string
+  disabled?: boolean
+  target?: "_blank" | "_self" | "_parent" | "_top"
+  onSelect?: () => void
+}
+
+/** A top-level entry. With `items` it expands instead of navigating. */
+export interface ISidebarNavItem extends ISidebarNavSubItem {
+  /** Trailing hint — a count, a "New" pill. Hidden while collapsed. */
+  badge?: React.ReactNode
+  items?: ISidebarNavSubItem[]
+  /** Start expanded. Defaults to expanded when one of its children is active. */
+  defaultOpen?: boolean
+}
+
+/** A titled run of entries. The title hides while the rail is collapsed. */
+export interface ISidebarNavSection {
+  id: string
+  label?: string
+  items: ISidebarNavItem[]
+}
+
+export interface ISidebarBlockProps {
+  sections: ISidebarNavSection[]
+  /** `id` of the current entry — matches top-level and nested ids alike. */
+  activeId?: string
+  /** Fires for every selection, after the entry's own `onSelect`. */
+  onNavigate?: (item: ISidebarNavItem | ISidebarNavSubItem) => void
+  /** Brand row above the navigation. */
+  header?: React.ReactNode
+  /** Pinned below the navigation — an account card, a version note. */
+  footer?: React.ReactNode
+  /** Collapse toggle in the header row. */
+  showTrigger?: boolean
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  /** How the rail collapses: to icons, off-canvas, or not at all. */
+  collapsible?: "offcanvas" | "icon" | "none"
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Under 768px the panel is a drawer — drive it from your own header. */
+  openMobile?: boolean
+  defaultOpenMobile?: boolean
+  onOpenMobileChange?: (open: boolean) => void
+  /** Rail widths. CSS lengths, e.g. "16rem". */
+  width?: string
+  iconWidth?: string
+  mobileWidth?: string
+  ariaLabel?: string
+  className?: string
+}
+
+export interface IRowProps {
+  item: ISidebarNavItem
+  activeId?: string
+  onNavigate?: (item: ISidebarNavItem | ISidebarNavSubItem) => void
+}

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

@@ -0,0 +1,4 @@
+
+export function isActive(id: string, activeId?: string): boolean {
+    return activeId !== undefined && id === activeId
+}

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

@@ -109,6 +109,11 @@ export interface ProfileCardBlockProps {
   open?: boolean
   defaultOpen?: boolean
   onOpenChange?: MenuPrimitive.Root.Props["onOpenChange"]
+  /**
+   * "content" sizes the menu to its items; "card" locks it to the trigger's
+   * width, so `align` stops mattering horizontally.
+   */
+  menuWidth?: "content" | "card"
   /**
    * Emit cuelume press/release on the card and play the open/close cues.
    * Inert unless the app opts into interaction sound via `bindSounds()`.
@@ -158,6 +163,7 @@ export function ProfileCardBlock({
   align = "center",
   side = "bottom",
   sideOffset = 8,
+  menuWidth = "content",
   open,
   defaultOpen,
   onOpenChange,
@@ -212,13 +218,15 @@ export function ProfileCardBlock({
             // avatar sits inside the button and the handle is a second line.
             aria-label={`${user.name}${user.username ? ` ${user.username}` : ""}, account menu`}
             className={cn(
-              "h-auto w-full justify-between py-1.5 pl-1.5 sm:h-auto",
+              // 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",
               className
             )}
             data-slot="profile-card"
             loading={busy}
             sound={sound}
-            variant="outline"
+            variant="ghost"
           >
             <span className="flex w-full min-w-0 items-center justify-start gap-2">
               <UserAvatar
@@ -243,11 +251,14 @@ export function ProfileCardBlock({
       />
       <DropdownMenuContent
         align={align}
-        // Content-width menu (not the card's width) so `align` reads: a popup
-        // locked to `--anchor-width` lands in the same place for every value.
-        // `!` because the popup's own `not-[class*='w-']:min-w-32` compiles to
+        // Content-width by default so `align` reads: a popup locked to
+        // `--anchor-width` lands in the same place for every value. `!`
+        // because the popup's own `not-[class*='w-']:min-w-32` compiles to
         // a higher-specificity `:not(:is())` that would otherwise win.
-        className="min-w-44! origin-(--transform-origin) transition-[opacity,scale,translate] duration-150 ease-smooth-out data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-100 data-starting-style:scale-98 data-starting-style:opacity-0 data-[side=bottom]:data-ending-style:-translate-y-1 data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=top]:data-ending-style:translate-y-1 data-[side=top]:data-starting-style:translate-y-1 motion-reduce:transition-none"
+        className={cn(
+          menuWidth === "card" ? "w-(--anchor-width)" : "min-w-44!",
+          "origin-(--transform-origin) transition-[opacity,scale,translate] duration-150 ease-smooth-out data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-100 data-starting-style:scale-98 data-starting-style:opacity-0 data-[side=bottom]:data-ending-style:-translate-y-1 data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=top]:data-ending-style:translate-y-1 data-[side=top]:data-starting-style:translate-y-1 motion-reduce:transition-none"
+        )}
         side={side}
         sideOffset={sideOffset}
       >

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

@@ -0,0 +1 @@
+export * from "./shell-layout"

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

@@ -0,0 +1,115 @@
+"use client"
+
+import { MenuIcon, PanelRightIcon } from "lucide-react"
+import * as React from "react"
+
+import {
+  AnimatedSidebar,
+  AnimatedSidebarInset,
+  AnimatedSidebarProvider,
+  AnimatedSidebarTrigger,
+} from "@/components/motion/animated-sidebar"
+import { cn } from "@/lib/utils"
+import type { ShellLayoutProps } from "./type"
+import { TITLE_BAR_HEIGHT } from "./utils"
+import type { ClassNameValue } from "tailwind-merge"
+
+export function ShellLayout({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  rightDrawer,
+  rightOpen,
+  defaultRightOpen,
+  onRightOpenChange,
+  variant = "desktop",
+  className,
+}: ShellLayoutProps): React.ReactElement {
+
+  const background: ClassNameValue = `bg-linear-to-tr/increasing from-neutral-200 via-neutral-100 to-stone-200 dark:from-neutral-900 dark:via-neutral-950 dark:to-stone-950`
+  return (
+    <AnimatedSidebarProvider
+      className={cn("block-full", className, background, 'relative pr-2')}
+      defaultOpen={defaultOpen}
+      defaultOpenRight={defaultRightOpen}
+      onOpenChange={onOpenChange}
+      onOpenRightChange={onRightOpenChange}
+      open={open}
+      openRight={rightOpen}
+      style={{
+        paddingTop: variant === "desktop" ? TITLE_BAR_HEIGHT : 0
+      }}
+    >
+      <AnimatedSidebar
+        ariaLabel="Primary navigation"
+        className={cn("")}
+        collapsible="icon"
+        role="navigation"
+        variant="inset"
+      ></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">
+            <AnimatedSidebarTrigger>
+              <MenuIcon className="size-5" />
+            </AnimatedSidebarTrigger>
+          </div>
+          <div className="flex shrink-0 items-center gap-3">
+            <AnimatedSidebarTrigger aria-label="Toggle panel" side="right">
+              <PanelRightIcon className="size-5" />
+            </AnimatedSidebarTrigger>
+          </div>
+        </header>
+        <div className="min-h-24 flex-1 overflow-auto">
+          {children ?? <ShellLayoutPlaceholder />}
+        </div>
+      </AnimatedSidebarInset>
+
+
+
+      <AnimatedSidebar
+        ariaLabel="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"
+        )}
+        role="complementary"
+        side="right"
+        variant="inset"
+      >
+        {rightDrawer}
+      </AnimatedSidebar>
+    </AnimatedSidebarProvider>
+  )
+}
+
+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>
+  )
+}

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

@@ -0,0 +1,50 @@
+// import type {
+//   ISidebarNavItem,
+//   ISidebarNavSection,
+//   ISidebarNavSubItem,
+// } from "@/components/blocks/nav/types"
+
+
+export interface ShellAction {
+  id: string
+  label: string
+  icon: React.ReactNode
+  badge?: React.ReactNode
+  onSelect?: () => void
+}
+
+export interface ShellWorkspace {
+  name: string
+  logo?: React.ReactNode
+  meta?: React.ReactNode
+}
+
+export interface ShellLayoutProps {
+  children?: React.ReactNode
+ // sections?: ISidebarNavSection[]
+  //activeId?: string
+//  onNavigate?: (item: ISidebarNavItem | ISidebarNavSubItem) => void
+//  workspace?: ShellWorkspace
+  //sidebarFooter?: React.ReactNode
+ // topActions?: ShellAction[]
+  //title?: React.ReactNode
+  //eyebrow?: React.ReactNode
+  //searchPlaceholder?: string
+  //searchShortcut?: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Content of the right drawer. It has no icon rail — it is either fully
+   * shown or fully hidden. */
+  rightDrawer?: React.ReactNode
+  rightOpen?: boolean
+  defaultRightOpen?: boolean
+  onRightOpenChange?: (open: boolean) => void
+ // openMobile?: boolean
+  //defaultOpenMobile?: boolean
+  //onOpenMobileChange?: (open: boolean) => void
+  className?: string
+   variant: 'web' | 'desktop'
+  //sidebarClassName?: string
+  //contentClassName?: string
+}

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

@@ -0,0 +1,2 @@
+
+export const TITLE_BAR_HEIGHT = 48