@exegia/corpora-ui 0.21.0 → 0.22.0

package/src/components/user-avatar/utils.ts

@@ -6,3 +6,97 @@ export function initialsFrom(name: string): string {
   const last = parts.length > 1 ? (parts.at(-1)?.[0] ?? "") : ""
   return (first + last).toUpperCase()
 }
+
+/** Sampling grid for `measureRimTone`. 16² px is enough to average a rim. */
+const TONE_SAMPLE_SIZE = 16
+/** Pixels this far (in radii) from the centre count as rim — the band the
+ * bezel sits on. Matches the ring's mask, which fades in from ~78%. */
+const TONE_RIM_RADIUS = 0.6
+
+const toneCache = new Map<string, Promise<number | null>>()
+
+/**
+ * Average perceived lightness, 0 (black) → 1 (white), of an image's outer
+ * band — the pixels the bezel ring overlays — or `null` when it cannot be
+ * measured: no DOM/canvas (SSR, test DOM), a decode failure, or a host
+ * without CORS headers (the sample needs a CORS-clean image; the avatar's
+ * own `<img>` is left untouched, so a non-CORS host still displays).
+ * Results are memoised per `src`, so a room of the same face samples once.
+ */
+export function measureRimTone(src: string): Promise<number | null> {
+  const cached = toneCache.get(src)
+  if (cached) return cached
+  const promise = new Promise<number | null>((resolve) => {
+    if (typeof document === "undefined" || typeof Image === "undefined") {
+      resolve(null)
+      return
+    }
+    const image = new Image()
+    image.crossOrigin = "anonymous"
+    image.decoding = "async"
+    image.onerror = () => resolve(null)
+    image.onload = () => {
+      try {
+        const size = TONE_SAMPLE_SIZE
+        const canvas = document.createElement("canvas")
+        canvas.width = size
+        canvas.height = size
+        const context = canvas.getContext("2d", { willReadFrequently: true })
+        if (!context) {
+          resolve(null)
+          return
+        }
+        context.drawImage(image, 0, 0, size, size)
+        const { data } = context.getImageData(0, 0, size, size)
+        const centre = (size - 1) / 2
+        const rim = TONE_RIM_RADIUS * centre
+        let sum = 0
+        let count = 0
+        for (let y = 0; y < size; y++) {
+          for (let x = 0; x < size; x++) {
+            const dx = x - centre
+            const dy = y - centre
+            if (dx * dx + dy * dy < rim * rim) continue
+            const offset = (y * size + x) * 4
+            const r = data[offset] ?? 0
+            const g = data[offset + 1] ?? 0
+            const b = data[offset + 2] ?? 0
+            // Rec. 709 luma on the gamma-encoded channels: close enough to
+            // perceived lightness for a "light or dark?" verdict.
+            sum += (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255
+            count++
+          }
+        }
+        resolve(count === 0 ? null : sum / count)
+      } catch {
+        // A tainted canvas throws on getImageData.
+        resolve(null)
+      }
+    }
+    image.src = src
+  })
+  toneCache.set(src, promise)
+  // Only a real reading is worth keeping — a failed sample (flaky network,
+  // a host that gained CORS headers later) gets another go next mount.
+  void promise.then((tone) => {
+    if (tone === null) toneCache.delete(src)
+  })
+  return promise
+}
+
+/**
+ * Bezel highlight/shadow alphas for an image whose rim lightness is `tone`
+ * (0 → 1). Against a dark rim the white highlight is eased off (it glares)
+ * and the black shadow pushed up (it has to darken mid-tones to register);
+ * against a pale rim the reverse — the highlight can be full (it barely
+ * shows) and the shadow is what carries the emboss, so it sits lighter.
+ * Linear between; the end points are tuned by eye on a dark and a light
+ * photo in both themes.
+ */
+export function bezelAlphasForTone(tone: number): { hi: number; lo: number } {
+  const t = Math.min(1, Math.max(0, tone))
+  return {
+    hi: 0.7 + 0.3 * t,
+    lo: 0.6 - 0.4 * t,
+  }
+}

package/src/index.ts

@@ -24,6 +24,7 @@ export * from "./components/ui/spinner"
 export * from "./components/ui/textarea"
 
 // components
+export * from "./components/composed/logo"
 export * from "./components/composed/password-input"
 export * from "./components/composed/social-providers"
 export * from "./components/composed/tree"
@@ -69,7 +70,6 @@ export * from "./components/blocks/auth/passkey-manager-block"
 export * from "./components/blocks/auth/passkey-sign-in-block"
 export * from "./components/blocks/auth/signup-block"
 export * from "./components/blocks/auth/update-password-block"
-export * from "./components/blocks/nav/sidebar-block"
 export * from "./components/blocks/nav/sidebar"
 export * from "./components/blocks/shell"
 export { default as ShellLayout } from "./components/blocks/shell"

package/dist-lib/components/blocks/nav/sidebar-block.d.ts

@@ -1,14 +0,0 @@
-import { ISidebarBlockProps } from './types';
-import * as React from "react";
-export type { ISidebarBlockProps as SidebarBlockProps, ISidebarNavItem as SidebarNavItem, ISidebarNavSection as SidebarNavSection, ISidebarNavSubItem as SidebarNavSubItem, } from './types';
-/**
- * Application sidebar navigation, driven by data rather than composition.
- *
- * This is the navigation panel only — it claims no page layout, so place it
- * beside your own content. It owns its own sidebar context (⌘B toggles it);
- * pass `open`/`onOpenChange` to drive the rail, and `openMobile`/
- * `onOpenMobileChange` to open the drawer from a header button of your own.
- * Compose the underlying `AnimatedPanel*` parts directly when a screen
- * needs something this API does not cover.
- */
-export declare function SidebarBlock({ sections, activeId, onNavigate, header, footer, showTrigger, side, variant, collapsible, open, defaultOpen, onOpenChange, openMobile, defaultOpenMobile, onOpenMobileChange, width, iconWidth, mobileWidth, ariaLabel, className, }: ISidebarBlockProps): React.ReactElement;

package/dist-lib/components/blocks/nav/sidebar-nav-row.d.ts

@@ -1,3 +0,0 @@
-import { IRowProps } from './types';
-import * as React from "react";
-export declare function SidebarNavRow({ item, activeId, onNavigate }: IRowProps): React.JSX.Element;

package/dist-lib/components/blocks/nav/types.d.ts

@@ -1,60 +0,0 @@
-/** 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/dist-lib/components/blocks/nav/utils.d.ts

@@ -1 +0,0 @@
-export declare function isActive(id: string, activeId?: string): boolean;

package/dist-lib/components/blocks/shell/animated-sidebar-content.d.ts

@@ -1,2 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const AnimatedSidebarContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-footer.d.ts

@@ -1,2 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const AnimatedSidebarFooter: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-group-content.d.ts

@@ -1,2 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const AnimatedSidebarGroupContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-group-label.d.ts

@@ -1,2 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const AnimatedSidebarGroupLabel: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-group.d.ts

@@ -1,2 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const AnimatedSidebarGroup: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-header.d.ts

@@ -1,2 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const AnimatedSidebarHeader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-menu-button.d.ts

@@ -1,3 +0,0 @@
-import { AnimatedSidebarMenuButtonProps } from './type';
-import type * as React from "react";
-export declare function AnimatedSidebarMenuButton({ children, icon, badge, href, isActive, ariaExpanded, disabled, closeOnSelect, target, rel, onSelect, className, }: AnimatedSidebarMenuButtonProps): React.JSX.Element;

package/dist-lib/components/blocks/shell/animated-sidebar-menu-item.d.ts

@@ -1,2 +0,0 @@
-import { HTMLMotionProps } from 'motion/react';
-export declare const AnimatedSidebarMenuItem: import('react').ForwardRefExoticComponent<Omit<HTMLMotionProps<"li">, "ref"> & import('react').RefAttributes<HTMLLIElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-menu-sub-button.d.ts

@@ -1,3 +0,0 @@
-import { AnimatedSidebarMenuSubButtonProps } from './type';
-import type * as React from "react";
-export declare function AnimatedSidebarMenuSubButton({ children, icon, href, isActive, disabled, closeOnSelect, target, rel, onSelect, className, }: AnimatedSidebarMenuSubButtonProps): React.JSX.Element;

package/dist-lib/components/blocks/shell/animated-sidebar-menu-sub-item.d.ts

@@ -1,2 +0,0 @@
-import { HTMLMotionProps } from 'motion/react';
-export declare const AnimatedSidebarMenuSubItem: import('react').ForwardRefExoticComponent<Omit<HTMLMotionProps<"li">, "ref"> & import('react').RefAttributes<HTMLLIElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-menu-sub.d.ts

@@ -1,2 +0,0 @@
-import { AnimatedSidebarMenuSubProps } from './type';
-export declare const AnimatedSidebarMenuSub: import('react').ForwardRefExoticComponent<Omit<AnimatedSidebarMenuSubProps, "ref"> & import('react').RefAttributes<HTMLUListElement>>;

package/dist-lib/components/blocks/shell/animated-sidebar-menu.d.ts

@@ -1,2 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const AnimatedSidebarMenu: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & import('react').RefAttributes<HTMLUListElement>>;

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

@@ -1,125 +0,0 @@
-import { describe, expect, mock, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-
-import { SidebarBlock, type SidebarNavSection } from "../sidebar-block"
-
-const SECTIONS: SidebarNavSection[] = [
-  {
-    id: "work",
-    label: "Research",
-    items: [
-      { id: "search", label: "Search" },
-      {
-        id: "library",
-        label: "Library",
-        items: [
-          { id: "manuscripts", label: "Manuscripts" },
-          { id: "codices", label: "Codices" },
-        ],
-      },
-    ],
-  },
-  { id: "workspace", items: [{ id: "settings", label: "Settings" }] },
-]
-
-describe("SidebarBlock", () => {
-  test("renders the sections and their entries", () => {
-    render(<SidebarBlock ariaLabel="Main" sections={SECTIONS} />)
-
-    expect(screen.getByRole("navigation", { name: "Main" })).toBeDefined()
-    expect(screen.getByText("Research")).toBeDefined()
-    expect(screen.getByRole("button", { name: "Search" })).toBeDefined()
-    expect(screen.getByRole("button", { name: "Settings" })).toBeDefined()
-  })
-
-  test("marks the active entry", () => {
-    render(<SidebarBlock activeId="search" sections={SECTIONS} />)
-
-    expect(
-      screen
-        .getByRole("button", { name: "Search" })
-        .getAttribute("aria-current")
-    ).toBe("page")
-    expect(
-      screen
-        .getByRole("button", { name: "Settings" })
-        .getAttribute("aria-current")
-    ).toBeNull()
-  })
-
-  test("reports selections through onNavigate, after the entry's onSelect", async () => {
-    const user = userEvent.setup()
-    const calls: string[] = []
-    render(
-      <SidebarBlock
-        onNavigate={(item) => calls.push(`navigate:${item.id}`)}
-        sections={[
-          {
-            id: "work",
-            items: [
-              {
-                id: "search",
-                label: "Search",
-                onSelect: () => calls.push("select:search"),
-              },
-            ],
-          },
-        ]}
-      />
-    )
-
-    await user.click(screen.getByRole("button", { name: "Search" }))
-
-    expect(calls).toEqual(["select:search", "navigate:search"])
-  })
-
-  test("an entry with children expands instead of navigating", async () => {
-    const user = userEvent.setup()
-    const onNavigate = mock(() => {})
-    render(<SidebarBlock onNavigate={onNavigate} sections={SECTIONS} />)
-
-    const parent = screen.getByRole("button", { name: "Library" })
-    expect(parent.getAttribute("aria-expanded")).toBe("false")
-    expect(screen.queryByRole("button", { name: "Manuscripts" })).toBeNull()
-
-    await user.click(parent)
-
-    expect(
-      await screen.findByRole("button", { name: "Manuscripts" })
-    ).toBeDefined()
-    expect(parent.getAttribute("aria-expanded")).toBe("true")
-    expect(onNavigate).not.toHaveBeenCalled()
-  })
-
-  test("starts expanded when one of its children is active", async () => {
-    render(<SidebarBlock activeId="codices" sections={SECTIONS} />)
-
-    const child = await screen.findByRole("button", { name: "Codices" })
-    expect(child.getAttribute("aria-current")).toBe("page")
-    expect(
-      screen
-        .getByRole("button", { name: "Library" })
-        .getAttribute("aria-expanded")
-    ).toBe("true")
-  })
-
-  test("renders href entries as links", () => {
-    render(
-      <SidebarBlock
-        sections={[
-          {
-            id: "work",
-            items: [
-              { id: "docs", label: "Docs", href: "/docs", target: "_blank" },
-            ],
-          },
-        ]}
-      />
-    )
-
-    const link = screen.getByRole("link", { name: "Docs" })
-    expect(link.getAttribute("href")).toBe("/docs")
-    expect(link.getAttribute("rel")).toBe("noreferrer noopener")
-  })
-})

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

@@ -1,142 +0,0 @@
-"use client"
-
-import { PanelLeftIcon } from "lucide-react"
-import * as React from "react"
-
-import {
-  AnimatedPanel as AnimatedSidebar,
-  AnimatedPanelProvider as AnimatedSidebarProvider,
-  AnimatedPanelTrigger as AnimatedSidebarTrigger,
-  AnimatedSidebarContent,
-  AnimatedSidebarFooter,
-  AnimatedSidebarGroup,
-  AnimatedSidebarGroupContent,
-  AnimatedSidebarGroupLabel,
-  AnimatedSidebarHeader,
-  AnimatedSidebarMenu,
-} from "@/components/blocks/shell"
-import { cn } from "@/lib/utils"
-import { SidebarNavRow } from "@/components/blocks/nav/sidebar-nav-row"
-
-import type { ISidebarBlockProps } from "@/components/blocks/nav/types"
-
-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.
- *
- * This is the navigation panel only — it claims no page layout, so place it
- * beside your own content. It owns its own sidebar context (⌘B toggles it);
- * pass `open`/`onOpenChange` to drive the rail, and `openMobile`/
- * `onOpenMobileChange` to open the drawer from a header button of your own.
- * Compose the underlying `AnimatedPanel*` parts directly when a screen
- * needs something this API does not cover.
- */
-export function SidebarBlock({
-  sections,
-  activeId,
-  onNavigate,
-  header,
-  footer,
-  showTrigger = true,
-  side = "left",
-  variant = "sidebar",
-  collapsible = "icon",
-  open,
-  defaultOpen,
-  onOpenChange,
-  openMobile,
-  defaultOpenMobile,
-  onOpenMobileChange,
-  width,
-  iconWidth,
-  mobileWidth,
-  ariaLabel = "Main",
-  className,
-}: ISidebarBlockProps): React.ReactElement {
-  return (
-    <AnimatedSidebarProvider
-      // The provider ships a full-page flex shell; this block is just the
-      // panel, so the shell is flattened back to the panel's own box. The
-      // block is a single panel, so its scalar open props map onto the
-      // provider's side-keyed records under the block's own `side`.
-      className="h-full min-h-0 w-auto"
-      defaultOpen={{ [side]: defaultOpen ?? true }}
-      defaultOpenMobile={
-        defaultOpenMobile === undefined ? undefined : { [side]: defaultOpenMobile }
-      }
-      onOpenChange={(nextOpen, changedSide) => {
-        if (changedSide === side) onOpenChange?.(nextOpen)
-      }}
-      onOpenMobileChange={(nextOpen, changedSide) => {
-        if (changedSide === side) onOpenMobileChange?.(nextOpen)
-      }}
-      open={open === undefined ? undefined : { [side]: open }}
-      openMobile={openMobile === undefined ? undefined : { [side]: openMobile }}
-      style={{
-        ...(width ? { "--sidebar-width": width } : null),
-        ...(iconWidth ? { "--sidebar-width-icon": iconWidth } : null),
-        ...(mobileWidth ? { "--sidebar-width-mobile": mobileWidth } : null),
-      }}
-    >
-      <AnimatedSidebar
-        ariaLabel={ariaLabel}
-        // The panel is built for a full-page shell (`h-svh`, so its footer
-        // hangs below any shorter box). Fill the parent instead — in a
-        // full-height layout that comes to the same thing.
-        className={cn("h-full", className)}
-        collapsible={collapsible}
-        panelClassName="h-full"
-        // The panel is navigation and nothing else, so it names a navigation
-        // landmark rather than the complementary one <aside> implies. (The
-        // mobile drawer is a dialog and keeps that role.)
-        role="navigation"
-        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>}
-                {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 && (
-                <AnimatedSidebarGroupLabel>
-                  {section.label}
-                </AnimatedSidebarGroupLabel>
-              )}
-              <AnimatedSidebarGroupContent>
-                <AnimatedSidebarMenu>
-                  {section.items.map((item) => (
-                    <SidebarNavRow
-                      activeId={activeId}
-                      item={item}
-                      key={item.id}
-                      onNavigate={onNavigate}
-                    />
-                  ))}
-                </AnimatedSidebarMenu>
-              </AnimatedSidebarGroupContent>
-            </AnimatedSidebarGroup>
-          ))}
-        </AnimatedSidebarContent>
-        {footer && <AnimatedSidebarFooter>{footer}</AnimatedSidebarFooter>}
-      </AnimatedSidebar>
-    </AnimatedSidebarProvider>
-  )
-}

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

@@ -1,78 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import type { IRowProps, ISidebarNavItem, ISidebarNavSubItem } from "@/components/blocks/nav/types"
-import { isActive } from "@/components/blocks/nav/utils"
-import {
-  AnimatedSidebarMenuButton,
-  AnimatedSidebarMenuItem,
-  AnimatedSidebarMenuSub,
-  AnimatedSidebarMenuSubButton,
-  AnimatedSidebarMenuSubItem,
-} from "@/components/blocks/shell"
-
-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

@@ -1,65 +0,0 @@
-
-/** 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

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