@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/shell/app-command-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-command-palette.js","names":[],"sources":["../../src/shell/app-command-palette.tsx"],"sourcesContent":["'use client'\n\n/**\n * AppCommandPalette -- Application-level command palette wrapper.\n *\n * Props-driven: accepts navigation items, search callbacks, and user\n * info instead of reading from Zustand stores or Remix hooks.\n *\n * Depends on the CommandPalette shared component being available.\n */\nimport { IconFileText } from '@tabler/icons-react'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\n\nimport { type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, type FooterHint } from '../composed/command-palette'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport { useCommandRegistry } from './command-registry'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface SearchResult {\n  id: string\n  title: string\n  snippet?: string\n  entityType: string\n  projectId?: string | null\n  metadata?: Record<string, unknown>\n  /** Custom icon for this result. Overrides the default entity-type icon. */\n  icon?: React.ReactNode\n  /** Relevance score for sorting (higher = more relevant). */\n  rank?: number\n  /** Keyboard shortcut hint to display on this result. */\n  shortcut?: string\n  /** Navigation href. Used as fallback when onSearchResultSelect is not provided. */\n  href?: string\n}\n\n/** A group of search results with a label. */\nexport interface SearchResultGroup {\n  label: string\n  results: SearchResult[]\n}\n\nexport interface AppCommandPaletteUser {\n  name: string\n  role?: string\n}\n\nexport interface AppCommandPaletteProps\n  extends Omit<React.ComponentPropsWithRef<'div'>, 'onSearch'> {\n  /** Current user (used to determine admin access) */\n  user?: AppCommandPaletteUser | null\n  /** When true, shows admin command groups regardless of user.role. Takes precedence over role-based detection. */\n  isAdmin?: boolean\n  /** Additional command groups to show */\n  extraGroups?: CommandGroup[]\n  /** Called when the user selects a navigation target */\n  onNavigate?: (path: string) => void\n  /** Called when the search input changes (for server-side search) */\n  onSearch?: (query: string) => void\n  /** Flat search results (displayed in a single \"Search Results\" group).\n   *  For grouped results, use `searchResultGroups` instead. */\n  searchResults?: SearchResult[]\n  /** Grouped search results — displayed as multiple labeled sections.\n   *  Takes precedence over `searchResults` when provided. */\n  searchResultGroups?: SearchResultGroup[]\n  /** Whether a search is currently in progress */\n  isSearching?: boolean\n  /** Called when the user selects a search result. When provided, the component\n   *  does NOT perform internal navigation — the consumer owns routing entirely. */\n  onSearchResultSelect?: (result: SearchResult) => void\n  /** Custom label for the search results group. Overrides \"Search Results\" / \"Searching...\".\n   *  Can be a string or a function receiving the result count. */\n  searchResultsLabel?: string | ((count: number) => string)\n  // -- Pass-through CommandPalette props --\n  /** Controlled open state. */\n  open?: boolean\n  /** Default open state. */\n  defaultOpen?: boolean\n  /** Called when the open state changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Keybinding(s) to toggle. Pass `false` to disable. Default: 'mod+k'. */\n  keybinding?: CommandPaletteProps['keybinding']\n  /** Max height of results. Default '320px'. */\n  maxHeight?: CommandPaletteProps['maxHeight']\n  /** Custom empty state. */\n  emptyState?: React.ReactNode\n  /** Custom footer hints. Pass `false` to hide. */\n  footerHints?: FooterHint[] | false\n}\n\n// -----------------------------------------------------------------------\n// Constants\n// -----------------------------------------------------------------------\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\n/** Convert a SearchResult into a CommandItem. */\nfunction searchResultToCommandItem(\n  r: SearchResult,\n  onSearchResultSelect: ((result: SearchResult) => void) | undefined,\n  nav: (to: string) => void,\n): CommandItem {\n  return {\n    id: `search-${r.entityType}-${r.id}`,\n    label: r.title,\n    filterValue: r.title,\n    description: r.snippet,\n    icon: r.icon ?? <Icon icon={IconFileText} />,\n    shortcut: r.shortcut,\n    onSelect: () => {\n      if (onSearchResultSelect) {\n        onSearchResultSelect(r)\n      } else if (r.href) {\n        nav(r.href)\n      }\n    },\n  }\n}\n\n// -----------------------------------------------------------------------\n// AppCommandPalette\n// -----------------------------------------------------------------------\n\nconst AppCommandPalette = React.forwardRef<HTMLDivElement, AppCommandPaletteProps>(\n  function AppCommandPalette(\n    {\n      user,\n      isAdmin: isAdminProp,\n      extraGroups = [],\n      onNavigate,\n      onSearch,\n      searchResults = [],\n      searchResultGroups,\n      isSearching = false,\n      onSearchResultSelect,\n      searchResultsLabel,\n      open,\n      defaultOpen,\n      onOpenChange,\n      keybinding,\n      maxHeight,\n      emptyState,\n      footerHints,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  const isAdmin =\n    isAdminProp ?? (user?.role === 'Admin' || user?.role === 'SuperAdmin')\n\n  const registry = useCommandRegistry()\n\n  const nav = useCallback(\n    (to: string) => {\n      onNavigate?.(to)\n    },\n    [onNavigate],\n  )\n\n  // -- Static groups ---------------------------------------------------\n\n  const pagesGroup: CommandGroup = useMemo(\n    () => ({\n      label: 'Pages',\n      items: registry\n        ? registry.pages.map((p) => ({\n            id: p.id,\n            label: p.label,\n            icon: p.icon,\n            keywords: p.keywords,\n            onSelect: () => nav(p.path),\n          }))\n        : [],  // Consumer provides pages via CommandRegistryProvider\n    }),\n    [nav, registry],\n  )\n\n  const adminGroup: CommandGroup = useMemo(\n    () => ({\n      label: 'Admin',\n      items: registry\n        ? registry.adminPages.map((p) => ({\n            id: p.id,\n            label: p.label,\n            icon: p.icon,\n            keywords: p.keywords,\n            onSelect: () => nav(p.path),\n          }))\n        : [],  // Consumer provides admin pages via CommandRegistryProvider\n    }),\n    [nav, registry],\n  )\n\n  // -- Dynamic search results groups ------------------------------------\n\n  const searchGroups: CommandGroup[] = useMemo(() => {\n    // Grouped results take precedence (#2)\n    if (searchResultGroups && searchResultGroups.length > 0) {\n      return searchResultGroups.map((group) => {\n        // Sort by rank if provided\n        const sorted = group.results.some(r => r.rank != null)\n          ? [...group.results].sort((a, b) => (b.rank ?? 0) - (a.rank ?? 0))\n          : group.results\n\n        return {\n          label: group.label,\n          items: sorted.map(r => searchResultToCommandItem(r, onSearchResultSelect, nav)),\n        }\n      })\n    }\n\n    // Flat results (legacy behavior)\n    if (searchResults.length === 0) return []\n\n    // Sort by rank if any result has one\n    const sorted = searchResults.some(r => r.rank != null)\n      ? [...searchResults].sort((a, b) => (b.rank ?? 0) - (a.rank ?? 0))\n      : searchResults\n\n    const items = sorted.map(r => searchResultToCommandItem(r, onSearchResultSelect, nav))\n\n    // Resolve the label (#10)\n    let label: string\n    if (searchResultsLabel) {\n      label = typeof searchResultsLabel === 'function'\n        ? searchResultsLabel(items.length)\n        : searchResultsLabel\n    } else {\n      label = isSearching ? 'Searching...' : 'Search Results'\n    }\n\n    return [{ label, items }]\n  }, [searchResults, searchResultGroups, isSearching, nav, onSearchResultSelect, searchResultsLabel])\n\n  // -- Assemble groups -------------------------------------------------\n\n  const groups: CommandGroup[] = useMemo(() => {\n    const g: CommandGroup[] = []\n    g.push(...searchGroups)\n    g.push(pagesGroup)\n    if (isAdmin) g.push(adminGroup)\n    g.push(...extraGroups)\n    return g\n  }, [searchGroups, pagesGroup, isAdmin, adminGroup, extraGroups])\n\n  // -- Handle search ---------------------------------------------------\n\n  const handleSearch = useCallback(\n    (query: string) => {\n      onSearch?.(query)\n    },\n    [onSearch],\n  )\n\n  return (\n    <CommandPalette\n      ref={ref}\n      groups={groups}\n      placeholder=\"Search or jump to...\"\n      onSearch={handleSearch}\n      emptyMessage=\"No results found. Try a different search term.\"\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      keybinding={keybinding}\n      maxHeight={maxHeight}\n      emptyState={emptyState}\n      footerHints={footerHints}\n      className={cn(className)}\n      {...props}\n    />\n  )\n  },\n)\n\nAppCommandPalette.displayName = 'AppCommandPalette'\n\nexport { AppCommandPalette }\n"],"mappings":"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"}
+{"version":3,"file":"app-command-palette.js","names":[],"sources":["../../src/shell/app-command-palette.tsx"],"sourcesContent":["'use client'\n\n/**\n * AppCommandPalette -- Application-level command palette wrapper.\n *\n * Props-driven: accepts navigation items, search callbacks, and user\n * info instead of reading from Zustand stores or Remix hooks.\n *\n * Depends on the CommandPalette shared component being available.\n */\nimport { IconFileText } from '@tabler/icons-react'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\n\nimport { type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, type FooterHint } from '../composed/command-palette'\nimport { Icon } from '../ui/icon'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { cn } from '../ui/lib/utils'\nimport { useCommandRegistry } from './command-registry'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface SearchResult {\n  id: string\n  title: string\n  snippet?: string\n  entityType: string\n  projectId?: string | null\n  metadata?: Record<string, unknown>\n  /** Custom icon for this result. Overrides the default entity-type icon. */\n  icon?: IconInput\n  /** Relevance score for sorting (higher = more relevant). */\n  rank?: number\n  /** Keyboard shortcut hint to display on this result. */\n  shortcut?: string\n  /** Navigation href. Used as fallback when onSearchResultSelect is not provided. */\n  href?: string\n}\n\n/** A group of search results with a label. */\nexport interface SearchResultGroup {\n  label: string\n  results: SearchResult[]\n}\n\nexport interface AppCommandPaletteUser {\n  name: string\n  role?: string\n}\n\nexport interface AppCommandPaletteProps\n  extends Omit<React.ComponentPropsWithRef<'div'>, 'onSearch'> {\n  /** Current user (used to determine admin access) */\n  user?: AppCommandPaletteUser | null\n  /** When true, shows admin command groups regardless of user.role. Takes precedence over role-based detection. */\n  isAdmin?: boolean\n  /** Additional command groups to show */\n  extraGroups?: CommandGroup[]\n  /** Called when the user selects a navigation target */\n  onNavigate?: (path: string) => void\n  /** Called when the search input changes (for server-side search) */\n  onSearch?: (query: string) => void\n  /** Flat search results (displayed in a single \"Search Results\" group).\n   *  For grouped results, use `searchResultGroups` instead. */\n  searchResults?: SearchResult[]\n  /** Grouped search results — displayed as multiple labeled sections.\n   *  Takes precedence over `searchResults` when provided. */\n  searchResultGroups?: SearchResultGroup[]\n  /** Whether a search is currently in progress */\n  isSearching?: boolean\n  /** Called when the user selects a search result. When provided, the component\n   *  does NOT perform internal navigation — the consumer owns routing entirely. */\n  onSearchResultSelect?: (result: SearchResult) => void\n  /** Custom label for the search results group. Overrides \"Search Results\" / \"Searching...\".\n   *  Can be a string or a function receiving the result count. */\n  searchResultsLabel?: string | ((count: number) => string)\n  // -- Pass-through CommandPalette props --\n  /** Controlled open state. */\n  open?: boolean\n  /** Default open state. */\n  defaultOpen?: boolean\n  /** Called when the open state changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Keybinding(s) to toggle. Pass `false` to disable. Default: 'mod+k'. */\n  keybinding?: CommandPaletteProps['keybinding']\n  /** Max height of results. Default '320px'. */\n  maxHeight?: CommandPaletteProps['maxHeight']\n  /** Custom empty state. */\n  emptyState?: React.ReactNode\n  /** Custom footer hints. Pass `false` to hide. */\n  footerHints?: FooterHint[] | false\n}\n\n// -----------------------------------------------------------------------\n// Constants\n// -----------------------------------------------------------------------\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\n/** Convert a SearchResult into a CommandItem. */\nfunction searchResultToCommandItem(\n  r: SearchResult,\n  onSearchResultSelect: ((result: SearchResult) => void) | undefined,\n  nav: (to: string) => void,\n): CommandItem {\n  return {\n    id: `search-${r.entityType}-${r.id}`,\n    label: r.title,\n    filterValue: r.title,\n    description: r.snippet,\n    icon: r.icon ?? <Icon icon={IconFileText} />,\n    shortcut: r.shortcut,\n    onSelect: () => {\n      if (onSearchResultSelect) {\n        onSearchResultSelect(r)\n      } else if (r.href) {\n        nav(r.href)\n      }\n    },\n  }\n}\n\n// -----------------------------------------------------------------------\n// AppCommandPalette\n// -----------------------------------------------------------------------\n\nconst AppCommandPalette = React.forwardRef<HTMLDivElement, AppCommandPaletteProps>(\n  function AppCommandPalette(\n    {\n      user,\n      isAdmin: isAdminProp,\n      extraGroups = [],\n      onNavigate,\n      onSearch,\n      searchResults = [],\n      searchResultGroups,\n      isSearching = false,\n      onSearchResultSelect,\n      searchResultsLabel,\n      open,\n      defaultOpen,\n      onOpenChange,\n      keybinding,\n      maxHeight,\n      emptyState,\n      footerHints,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  const isAdmin =\n    isAdminProp ?? (user?.role === 'Admin' || user?.role === 'SuperAdmin')\n\n  const registry = useCommandRegistry()\n\n  const nav = useCallback(\n    (to: string) => {\n      onNavigate?.(to)\n    },\n    [onNavigate],\n  )\n\n  // -- Static groups ---------------------------------------------------\n\n  const pagesGroup: CommandGroup = useMemo(\n    () => ({\n      label: 'Pages',\n      items: registry\n        ? registry.pages.map((p) => ({\n            id: p.id,\n            label: p.label,\n            icon: p.icon,\n            keywords: p.keywords,\n            onSelect: () => nav(p.path),\n          }))\n        : [],  // Consumer provides pages via CommandRegistryProvider\n    }),\n    [nav, registry],\n  )\n\n  const adminGroup: CommandGroup = useMemo(\n    () => ({\n      label: 'Admin',\n      items: registry\n        ? registry.adminPages.map((p) => ({\n            id: p.id,\n            label: p.label,\n            icon: p.icon,\n            keywords: p.keywords,\n            onSelect: () => nav(p.path),\n          }))\n        : [],  // Consumer provides admin pages via CommandRegistryProvider\n    }),\n    [nav, registry],\n  )\n\n  // -- Dynamic search results groups ------------------------------------\n\n  const searchGroups: CommandGroup[] = useMemo(() => {\n    // Grouped results take precedence (#2)\n    if (searchResultGroups && searchResultGroups.length > 0) {\n      return searchResultGroups.map((group) => {\n        // Sort by rank if provided\n        const sorted = group.results.some(r => r.rank != null)\n          ? [...group.results].sort((a, b) => (b.rank ?? 0) - (a.rank ?? 0))\n          : group.results\n\n        return {\n          label: group.label,\n          items: sorted.map(r => searchResultToCommandItem(r, onSearchResultSelect, nav)),\n        }\n      })\n    }\n\n    // Flat results (legacy behavior)\n    if (searchResults.length === 0) return []\n\n    // Sort by rank if any result has one\n    const sorted = searchResults.some(r => r.rank != null)\n      ? [...searchResults].sort((a, b) => (b.rank ?? 0) - (a.rank ?? 0))\n      : searchResults\n\n    const items = sorted.map(r => searchResultToCommandItem(r, onSearchResultSelect, nav))\n\n    // Resolve the label (#10)\n    let label: string\n    if (searchResultsLabel) {\n      label = typeof searchResultsLabel === 'function'\n        ? searchResultsLabel(items.length)\n        : searchResultsLabel\n    } else {\n      label = isSearching ? 'Searching...' : 'Search Results'\n    }\n\n    return [{ label, items }]\n  }, [searchResults, searchResultGroups, isSearching, nav, onSearchResultSelect, searchResultsLabel])\n\n  // -- Assemble groups -------------------------------------------------\n\n  const groups: CommandGroup[] = useMemo(() => {\n    const g: CommandGroup[] = []\n    g.push(...searchGroups)\n    g.push(pagesGroup)\n    if (isAdmin) g.push(adminGroup)\n    g.push(...extraGroups)\n    return g\n  }, [searchGroups, pagesGroup, isAdmin, adminGroup, extraGroups])\n\n  // -- Handle search ---------------------------------------------------\n\n  const handleSearch = useCallback(\n    (query: string) => {\n      onSearch?.(query)\n    },\n    [onSearch],\n  )\n\n  return (\n    <CommandPalette\n      ref={ref}\n      groups={groups}\n      placeholder=\"Search or jump to...\"\n      onSearch={handleSearch}\n      emptyMessage=\"No results found. Try a different search term.\"\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      keybinding={keybinding}\n      maxHeight={maxHeight}\n      emptyState={emptyState}\n      footerHints={footerHints}\n      className={cn(className)}\n      {...props}\n    />\n  )\n  },\n)\n\nAppCommandPalette.displayName = 'AppCommandPalette'\n\nexport { AppCommandPalette }\n"],"mappings":"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"}

package/dist/shell/bottom-navbar.d.ts

@@ -1,9 +1,11 @@
 "use client";
+import { IconInput } from '../ui/lib/icon-input';
 import * as React from 'react';
 export interface BottomNavItem {
     title: string;
     href: string;
-    icon: React.ReactNode;
+    /** Icon for this nav item. Accepts any `IconInput`. */
+    icon: IconInput;
     /** When true, the route matches only when the path is exactly equal */
     exact?: boolean;
     /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = "99+" */

package/dist/shell/bottom-navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navbar.d.ts","sourceRoot":"","sources":["../../src/shell/bottom-navbar.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,aAAa,EAAE,CAAA;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4ED,QAAA,MAAM,YAAY,uFA6JjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"bottom-navbar.d.ts","sourceRoot":"","sources":["../../src/shell/bottom-navbar.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAUrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,uDAAuD;IACvD,IAAI,EAAE,SAAS,CAAA;IACf,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,aAAa,EAAE,CAAA;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4ED,QAAA,MAAM,YAAY,uFA6JjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/shell/bottom-navbar.js

@@ -1,145 +1,153 @@
 "use client";
-import { springs as e } from "../ui/lib/motion.js";
-import { cn as t } from "../ui/lib/utils.js";
-import { Icon as n } from "../ui/icon.js";
-import { n as r } from "../_chunks/link-context.js";
+import { IconProvider as e } from "../ui/icon-context.js";
+import { springs as t } from "../ui/lib/motion.js";
+import { cn as n } from "../ui/lib/utils.js";
+import { Icon as r } from "../ui/icon.js";
+import { t as i } from "../_chunks/normalize-icon.js";
+import { n as a } from "../_chunks/link-context.js";
 import "./link-context.js";
-import * as i from "react";
-import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { IconDots as f, IconX as p } from "@tabler/icons-react";
-import { AnimatePresence as m, motion as h, useReducedMotion as g } from "framer-motion";
+import * as o from "react";
+import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { IconDots as m, IconX as h } from "@tabler/icons-react";
+import { AnimatePresence as g, motion as _, useReducedMotion as v } from "framer-motion";
 //#region src/shell/bottom-navbar.tsx
-function _({ count: e }) {
+function y({ count: e }) {
 	if (!e || e <= 0) return null;
-	let n = e > 99 ? "99+" : String(e), r = e >= 10;
-	return /* @__PURE__ */ u("span", {
+	let t = e > 99 ? "99+" : String(e), r = e >= 10;
+	return /* @__PURE__ */ f("span", {
 		"aria-label": `${e} notifications`,
-		className: t("absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75", r ? "px-0.5" : ""),
-		children: n
+		className: n("absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75", r ? "px-0.5" : ""),
+		children: t
 	});
 }
-function v({ item: n, isActive: i, onClick: a }) {
-	let o = r(), s = g();
-	return /* @__PURE__ */ u(h.div, {
-		whileTap: s ? void 0 : { y: -2 },
-		transition: s ? { duration: 0 } : e.snappy,
+function b({ item: r, isActive: o, onClick: s }) {
+	let c = a(), l = v();
+	return /* @__PURE__ */ f(_.div, {
+		whileTap: l ? void 0 : { y: -2 },
+		transition: l ? { duration: 0 } : t.snappy,
 		className: "flex max-w-[70px] flex-1",
-		children: /* @__PURE__ */ u(o, {
-			href: n.href,
-			onClick: a,
-			"aria-label": n.title,
-			"aria-current": i ? "page" : void 0,
-			className: t("flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard", i ? "font-semibold text-accent-11" : "text-surface-fg-subtle"),
-			children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ f(c, {
+			href: r.href,
+			onClick: s,
+			"aria-label": r.title,
+			"aria-current": o ? "page" : void 0,
+			className: n("flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard", o ? "font-semibold text-accent-11" : "text-surface-fg-subtle"),
+			children: /* @__PURE__ */ p("div", {
 				className: "relative flex w-full flex-col items-center gap-ds-02",
 				children: [
-					i && /* @__PURE__ */ u(h.div, {
+					o && /* @__PURE__ */ f(_.div, {
 						layoutId: "bottom-nav-indicator",
-						className: "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0",
+						className: "absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0",
 						"aria-hidden": "true",
-						transition: s ? { duration: 0 } : e.snappy
+						transition: l ? { duration: 0 } : t.snappy
 					}),
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ p("div", {
 						className: "relative p-ds-03",
-						children: [/* @__PURE__ */ u("span", {
+						children: [/* @__PURE__ */ f("span", {
 							className: "[&>svg]:h-ico-md [&>svg]:w-ico-md",
 							"aria-hidden": "true",
-							children: n.icon
-						}), n.badge != null && /* @__PURE__ */ u(_, { count: n.badge })]
+							children: /* @__PURE__ */ f(e, {
+								size: "md",
+								children: i(r.icon)
+							})
+						}), r.badge != null && /* @__PURE__ */ f(y, { count: r.badge })]
 					}),
-					/* @__PURE__ */ u("span", {
+					/* @__PURE__ */ f("span", {
 						className: "text-center",
-						children: n.title
+						children: r.title
 					})
 				]
 			})
 		})
 	});
 }
-var y = i.forwardRef(({ currentPath: i = "/", user: _, primaryItems: y = [], moreItems: b = [], className: x, ...S }, C) => {
-	let w = r(), T = g(), [E, D] = c(!1), O = s(null), k = a(() => D(!1), []);
-	o(() => {
-		E && O.current && O.current.querySelector("a, button")?.focus();
-	}, [E]);
-	let A = (e, t = !1) => t || e === "/" ? i === e : i.startsWith(e), j = b.some((e) => A(e.href, e.exact));
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(m, { children: E && /* @__PURE__ */ d("div", {
+var x = o.forwardRef(({ currentPath: o = "/", user: y, primaryItems: x = [], moreItems: S = [], className: C, ...w }, T) => {
+	let E = a(), D = v(), [O, k] = u(!1), A = l(null), j = s(() => k(!1), []);
+	c(() => {
+		O && A.current && A.current.querySelector("a, button")?.focus();
+	}, [O]);
+	let M = (e, t = !1) => t || e === "/" ? o === e : o.startsWith(e), N = S.some((e) => M(e.href, e.exact));
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(g, { children: O && /* @__PURE__ */ p("div", {
 		className: "fixed inset-0 z-overlay md:hidden",
-		onClick: () => D(!1),
-		children: [/* @__PURE__ */ u("div", { className: "absolute inset-0 bg-overlay" }), /* @__PURE__ */ d(h.div, {
-			ref: O,
+		onClick: () => k(!1),
+		children: [/* @__PURE__ */ f("div", { className: "absolute inset-0 bg-overlay" }), /* @__PURE__ */ p(_.div, {
+			ref: A,
 			role: "dialog",
 			"aria-label": "More navigation",
 			initial: { y: "100%" },
 			animate: { y: 0 },
 			exit: { y: "100%" },
-			transition: T ? { duration: 0 } : e.smooth,
-			className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03",
+			transition: D ? { duration: 0 } : t.smooth,
+			className: "absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03",
 			onClick: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.stopPropagation(), e.key === "Escape" && k();
+				e.stopPropagation(), e.key === "Escape" && j();
 			},
-			children: [/* @__PURE__ */ d("div", {
+			children: [/* @__PURE__ */ p("div", {
 				className: "mb-ds-04 flex items-center justify-between",
-				children: [/* @__PURE__ */ u("span", {
+				children: [/* @__PURE__ */ f("span", {
 					className: "text-ds-md font-semibold text-surface-fg",
 					children: "More"
-				}), /* @__PURE__ */ u("button", {
-					onClick: () => D(!1),
+				}), /* @__PURE__ */ f("button", {
+					onClick: () => k(!1),
 					"aria-label": "Close more menu",
-					className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-raised-hover",
-					children: /* @__PURE__ */ u(n, {
-						icon: p,
+					className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover",
+					children: /* @__PURE__ */ f(r, {
+						icon: h,
 						size: "sm",
 						className: "text-surface-fg-muted"
 					})
 				})]
-			}), /* @__PURE__ */ u("div", {
+			}), /* @__PURE__ */ f("div", {
 				className: "grid grid-cols-4 gap-ds-03",
-				children: b.map((e) => /* @__PURE__ */ d(w, {
-					href: e.href,
-					onClick: () => D(!1),
-					className: t("flex flex-col items-center gap-ds-02b rounded-ds-xl p-ds-04 text-ds-sm transition-colors ease-productive-standard", A(e.href, e.exact) ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle hover:bg-surface-raised-hover"),
-					children: [/* @__PURE__ */ u("span", {
+				children: S.map((t) => /* @__PURE__ */ p(E, {
+					href: t.href,
+					onClick: () => k(!1),
+					className: n("flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-ds-sm transition-colors ease-productive-standard", M(t.href, t.exact) ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle hover:bg-surface-raised-hover"),
+					children: [/* @__PURE__ */ f("span", {
 						className: "[&>svg]:h-ico-md [&>svg]:w-ico-md",
-						children: e.icon
-					}), /* @__PURE__ */ u("span", {
+						children: /* @__PURE__ */ f(e, {
+							size: "md",
+							children: i(t.icon)
+						})
+					}), /* @__PURE__ */ f("span", {
 						className: "text-center",
-						children: e.title
+						children: t.title
 					})]
-				}, e.href))
+				}, t.href))
 			})]
 		})]
-	}) }), /* @__PURE__ */ d("nav", {
-		...S,
-		ref: C,
+	}) }), /* @__PURE__ */ p("nav", {
+		...w,
+		ref: T,
 		"aria-label": "Mobile navigation",
-		className: t("fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-raised px-ds-05 pb-safe pt-0 md:hidden", x),
-		children: [y.map((e) => /* @__PURE__ */ u(v, {
+		className: n("fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-raised px-ds-05 pb-safe pt-0 md:hidden", C),
+		children: [x.map((e) => /* @__PURE__ */ f(b, {
 			item: e,
-			isActive: A(e.href, e.exact)
-		}, e.href)), b.length > 0 && /* @__PURE__ */ u(h.button, {
+			isActive: M(e.href, e.exact)
+		}, e.href)), S.length > 0 && /* @__PURE__ */ f(_.button, {
 			type: "button",
-			onClick: () => D(!E),
+			onClick: () => k(!O),
 			"aria-label": "More navigation options",
-			"aria-expanded": E,
-			whileTap: T ? void 0 : { y: -2 },
-			transition: T ? { duration: 0 } : e.snappy,
-			className: t("flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm", E || j ? "font-semibold text-accent-11" : "text-surface-fg-subtle"),
-			children: /* @__PURE__ */ d("div", {
+			"aria-expanded": O,
+			whileTap: D ? void 0 : { y: -2 },
+			transition: D ? { duration: 0 } : t.snappy,
+			className: n("flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm", O || N ? "font-semibold text-accent-11" : "text-surface-fg-subtle"),
+			children: /* @__PURE__ */ p("div", {
 				className: "relative flex w-full flex-col items-center gap-ds-02",
 				children: [
-					(E || j) && /* @__PURE__ */ u(h.div, {
+					(O || N) && /* @__PURE__ */ f(_.div, {
 						layoutId: "bottom-nav-indicator",
-						className: "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0",
+						className: "absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0",
 						"aria-hidden": "true",
-						transition: T ? { duration: 0 } : e.snappy
+						transition: D ? { duration: 0 } : t.snappy
 					}),
-					/* @__PURE__ */ u("div", {
+					/* @__PURE__ */ f("div", {
 						className: "p-ds-03",
-						children: /* @__PURE__ */ u(n, { icon: f })
+						children: /* @__PURE__ */ f(r, { icon: m })
 					}),
-					/* @__PURE__ */ u("span", {
+					/* @__PURE__ */ f("span", {
 						className: "text-center",
 						children: "More"
 					})
@@ -148,6 +156,6 @@ var y = i.forwardRef(({ currentPath: i = "/", user: _, primaryItems: y = [], mor
 		})]
 	})] });
 });
-y.displayName = "BottomNavbar";
+x.displayName = "BottomNavbar";
 //#endregion
-export { y as BottomNavbar };
+export { x as BottomNavbar };

package/dist/shell/bottom-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  icon: React.ReactNode\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { y: -2 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\">{item.icon}</span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-ds-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-ds-xl p-ds-04 text-ds-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\">{item.icon}</span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-raised px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}
+{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { y: -2 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-ds-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-ds-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-raised px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}

package/dist/shell/command-registry.d.ts

@@ -1,9 +1,10 @@
 "use client";
+import { IconInput } from '../ui/lib/icon-input';
 import * as React from 'react';
 export interface CommandPageItem {
     id: string;
     label: string;
-    icon: React.ReactNode;
+    icon: IconInput;
     path: string;
     keywords?: string[];
 }

package/dist/shell/command-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-registry.d.ts","sourceRoot":"","sources":["../../src/shell/command-registry.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAYD,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,eAAe,CAAA;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,2CAM9B;yBATe,uBAAuB;;;AAiBvC,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,IAAI,CAE3D"}
+{"version":3,"file":"command-registry.d.ts","sourceRoot":"","sources":["../../src/shell/command-registry.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAMrD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAYD,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,eAAe,CAAA;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,2CAM9B;yBATe,uBAAuB;;;AAiBvC,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,IAAI,CAE3D"}

package/dist/shell/command-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-registry.js","names":[],"sources":["../../src/shell/command-registry.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface CommandPageItem {\n  id: string\n  label: string\n  icon: React.ReactNode\n  path: string\n  keywords?: string[]\n}\n\nexport interface CommandRegistry {\n  pages: CommandPageItem[]\n  adminPages: CommandPageItem[]\n}\n\n// -----------------------------------------------------------------------\n// Context\n// -----------------------------------------------------------------------\n\nconst CommandRegistryContext = React.createContext<CommandRegistry | null>(null)\n\n// -----------------------------------------------------------------------\n// Provider\n// -----------------------------------------------------------------------\n\nexport interface CommandRegistryProviderProps {\n  children: React.ReactNode\n  registry: CommandRegistry\n}\n\nexport function CommandRegistryProvider({\n  children,\n  registry,\n}: CommandRegistryProviderProps) {\n  return (\n    <CommandRegistryContext.Provider value={registry}>\n      {children}\n    </CommandRegistryContext.Provider>\n  )\n}\n\nCommandRegistryProvider.displayName = 'CommandRegistryProvider'\n\n// -----------------------------------------------------------------------\n// Hook\n// -----------------------------------------------------------------------\n\nexport function useCommandRegistry(): CommandRegistry | null {\n  return React.useContext(CommandRegistryContext)\n}\n"],"mappings":";;;;AAyBA,IAAM,IAAyB,EAAM,cAAsC,KAAK;AAWhF,SAAgB,EAAwB,EACtC,aACA,eAC+B;AAC/B,QACE,kBAAC,EAAuB,UAAxB;EAAiC,OAAO;EACrC;EAC+B,CAAA;;AAItC,EAAwB,cAAc;AAMtC,SAAgB,IAA6C;AAC3D,QAAO,EAAM,WAAW,EAAuB"}
+{"version":3,"file":"command-registry.js","names":[],"sources":["../../src/shell/command-registry.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport type { IconInput } from '../ui/lib/icon-input'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface CommandPageItem {\n  id: string\n  label: string\n  icon: IconInput\n  path: string\n  keywords?: string[]\n}\n\nexport interface CommandRegistry {\n  pages: CommandPageItem[]\n  adminPages: CommandPageItem[]\n}\n\n// -----------------------------------------------------------------------\n// Context\n// -----------------------------------------------------------------------\n\nconst CommandRegistryContext = React.createContext<CommandRegistry | null>(null)\n\n// -----------------------------------------------------------------------\n// Provider\n// -----------------------------------------------------------------------\n\nexport interface CommandRegistryProviderProps {\n  children: React.ReactNode\n  registry: CommandRegistry\n}\n\nexport function CommandRegistryProvider({\n  children,\n  registry,\n}: CommandRegistryProviderProps) {\n  return (\n    <CommandRegistryContext.Provider value={registry}>\n      {children}\n    </CommandRegistryContext.Provider>\n  )\n}\n\nCommandRegistryProvider.displayName = 'CommandRegistryProvider'\n\n// -----------------------------------------------------------------------\n// Hook\n// -----------------------------------------------------------------------\n\nexport function useCommandRegistry(): CommandRegistry | null {\n  return React.useContext(CommandRegistryContext)\n}\n"],"mappings":";;;;AA2BA,IAAM,IAAyB,EAAM,cAAsC,KAAK;AAWhF,SAAgB,EAAwB,EACtC,aACA,eAC+B;AAC/B,QACE,kBAAC,EAAuB,UAAxB;EAAiC,OAAO;EACrC;EAC+B,CAAA;;AAItC,EAAwB,cAAc;AAMtC,SAAgB,IAA6C;AAC3D,QAAO,EAAM,WAAW,EAAuB"}

package/dist/shell/notification-center.js

@@ -41,7 +41,7 @@ function k({ notification: e, onRead: n, onNavigate: i, getRoute: a, onDismiss:
 		children: [
 			/* @__PURE__ */ b("div", {
 				className: "mt-ds-02b flex shrink-0",
-				children: /* @__PURE__ */ b("span", { className: t("h-[8px] w-[8px] rounded-ds-full transition-opacity duration-fast-02 ease-productive-standard", O[e.tier] || O.INFO, e.isRead ? "opacity-20" : "opacity-100") })
+				children: /* @__PURE__ */ b("span", { className: t("h-[8px] w-[8px] rounded-pill transition-opacity duration-fast-02 ease-productive-standard", O[e.tier] || O.INFO, e.isRead ? "opacity-20" : "opacity-100") })
 			}),
 			/* @__PURE__ */ x("div", {
 				className: "min-w-0 flex-1",
@@ -75,7 +75,7 @@ function k({ notification: e, onRead: n, onNavigate: i, getRoute: a, onDismiss:
 								t.stopPropagation(), n.onClick(e.id);
 							},
 							onKeyDown: (e) => e.stopPropagation(),
-							className: t("rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard", n.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : n.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"),
+							className: t("rounded-control px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard", n.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : n.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"),
 							children: n.label
 						}, n.label))
 					})
@@ -88,7 +88,7 @@ function k({ notification: e, onRead: n, onNavigate: i, getRoute: a, onDismiss:
 					t.stopPropagation(), o(e.id);
 				},
 				onKeyDown: (e) => e.stopPropagation(),
-				className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex",
+				className: "absolute right-ds-03 top-ds-03 hidden rounded-control-inner p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex",
 				children: /* @__PURE__ */ b(r, {
 					icon: w,
 					size: "sm"
@@ -121,7 +121,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 					className: "text-ds-md font-semibold text-surface-fg",
 					children: "Notifications"
 				}), q > 0 && /* @__PURE__ */ b("span", {
-					className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11",
+					className: "flex h-5 min-w-5 items-center justify-center rounded-pill bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11",
 					children: q
 				})]
 			}), /* @__PURE__ */ x("div", {
@@ -145,7 +145,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 				className: "flex flex-col items-center justify-center px-ds-05 py-ds-09",
 				children: [
 					/* @__PURE__ */ b("div", {
-						className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised",
+						className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-pill bg-surface-raised",
 						children: /* @__PURE__ */ b(r, {
 							icon: C,
 							size: "lg",
@@ -198,7 +198,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 		...H,
 		ref: U,
 		"aria-label": q > 0 ? `Notifications, ${q} unread` : "Notifications",
-		className: t("relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover", V),
+		className: t("relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover", V),
 		children: [/* @__PURE__ */ b(r, {
 			icon: S,
 			size: "sm"
@@ -216,7 +216,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 				duration: e.slow01,
 				ease: "easeInOut"
 			},
-			className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg",
+			className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-pill bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg",
 			children: q > 99 ? "99+" : q
 		})]
 	});
@@ -256,7 +256,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 			align: "center",
 			children: "Notifications"
 		})] }), /* @__PURE__ */ b(o, {
-			className: t("w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating", B),
+			className: t("w-[380px] rounded-overlay-lg border border-surface-border-strong bg-surface-overlay p-0 shadow-floating", B),
 			sideOffset: 8,
 			align: "end",
 			children: Q