@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/dist/components/AppShell.js

@@ -0,0 +1,261 @@
+"use client";
+
+// src/components/AppShell.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { Menu as MenuIcon } from "lucide-react";
+import { recipe } from "../lib/recipe.js";
+import { Button } from "./Button.js";
+import { Drawer } from "./Drawer.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WIDE_QUERY = "(min-width: 64rem)";
+function canMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+function subscribeToWidth(onChange) {
+  if (!canMatchMedia()) return () => {
+  };
+  const query = window.matchMedia(WIDE_QUERY);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+function isWide() {
+  return canMatchMedia() && window.matchMedia(WIDE_QUERY).matches;
+}
+function isWideOnServer() {
+  return false;
+}
+var AppShellContext = createContext(null);
+var shell = recipe({
+  slots: {
+    root: "flex min-h-screen bg-surface-base font-sans text-content-primary",
+    column: "flex min-w-0 flex-1 flex-col"
+  }
+});
+var AppShell = forwardRef(function AppShell2({
+  sidebar,
+  topbar,
+  children,
+  sidebarOpen,
+  defaultSidebarOpen = false,
+  onSidebarOpenChange,
+  className,
+  ...props
+}, ref) {
+  const styles = shell();
+  const [ownOpen, setOwnOpen] = useState(defaultSidebarOpen);
+  const open = sidebarOpen ?? ownOpen;
+  const wide = useSyncExternalStore(subscribeToWidth, isWide, isWideOnServer);
+  const hasSidebar = sidebar != null && sidebar !== false;
+  const drawerOpen = hasSidebar && open && !wide;
+  const onChange = useRef(onSidebarOpenChange);
+  useEffect(() => {
+    onChange.current = onSidebarOpenChange;
+  });
+  const controlled = sidebarOpen !== void 0;
+  const setSidebarOpen = useCallback(
+    (next) => {
+      if (!controlled) setOwnOpen(next);
+      onChange.current?.(next);
+    },
+    [controlled]
+  );
+  useEffect(() => {
+    if (wide && open) setSidebarOpen(false);
+  }, [wide, open, setSidebarOpen]);
+  const context = useMemo(
+    () => ({ hasSidebar, drawerOpen, setSidebarOpen }),
+    [hasSidebar, drawerOpen, setSidebarOpen]
+  );
+  return /* @__PURE__ */ jsx(AppShellContext.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { ref, "data-slot": "app-shell", className: styles.root({ class: className }), ...props, children: [
+    sidebar,
+    /* @__PURE__ */ jsxs("div", { "data-slot": "app-shell-column", className: styles.column(), children: [
+      topbar,
+      children
+    ] })
+  ] }) });
+});
+var sidebarStyles = recipe({
+  slots: {
+    aside: "hidden w-72 shrink-0 flex-col border-r-4 border-edge-strong bg-surface-base lg:sticky lg:top-0 lg:flex lg:h-screen",
+    header: "border-b-2 border-edge-strong px-6 py-5",
+    body: "flex-1 overflow-y-auto px-4 py-5",
+    footer: "border-t-2 border-edge-strong px-4 py-4",
+    drawerHeader: "mb-5 border-b-2 border-edge-strong pb-4"
+  }
+});
+var AppSidebar = forwardRef(function AppSidebar2({ label, header, children, footer, className, ...props }, ref) {
+  const styles = sidebarStyles();
+  const context = useContext(AppShellContext);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        ref,
+        "aria-label": label,
+        "data-slot": "app-sidebar",
+        className: styles.aside({ class: className }),
+        ...props,
+        children: [
+          header != null && /* @__PURE__ */ jsx("div", { "data-slot": "app-sidebar-header", className: styles.header(), children: header }),
+          /* @__PURE__ */ jsx("div", { "data-slot": "app-sidebar-body", className: styles.body(), children }),
+          footer != null && /* @__PURE__ */ jsx("div", { "data-slot": "app-sidebar-footer", className: styles.footer(), children: footer })
+        ]
+      }
+    ),
+    context && /* @__PURE__ */ jsxs(
+      Drawer,
+      {
+        isOpen: context.drawerOpen,
+        onClose: () => context.setSidebarOpen(false),
+        placement: "left",
+        title: label,
+        footer: footer ?? void 0,
+        children: [
+          header != null && /* @__PURE__ */ jsx("div", { className: styles.drawerHeader(), children: header }),
+          children
+        ]
+      }
+    )
+  ] });
+});
+var navStyles = recipe({
+  slots: {
+    nav: "font-mono text-sm",
+    heading: "mb-2 px-3 font-mono text-xs font-bold uppercase tracking-widest text-content-muted",
+    list: "flex flex-col gap-1.5",
+    nested: "mt-1.5 ml-3 flex flex-col gap-1.5 border-l-2 border-edge-strong pl-3",
+    entry: "flex w-full items-center gap-2.5 border-2 px-3 py-2 text-left font-bold uppercase no-underline",
+    iconFrame: "inline-flex shrink-0",
+    icon: "h-4 w-4",
+    label: "min-w-0 flex-1 truncate",
+    group: "flex items-center gap-2.5 px-3 py-2 font-bold uppercase text-content-muted"
+  },
+  variants: {
+    active: {
+      true: { entry: "border-edge-strong bg-accent-primary text-content-inverse shadow-hard-sm" },
+      false: { entry: "border-transparent text-content-primary hover:border-edge-strong hover:bg-surface-raised" }
+    }
+  }
+});
+var AppSidebarNav = forwardRef(function AppSidebarNav2({ label, items, activeId, onNavigate, heading, className, ...props }, ref) {
+  const styles = navStyles();
+  const context = useContext(AppShellContext);
+  const choose = (id) => {
+    onNavigate?.(id);
+    context?.setSidebarOpen(false);
+  };
+  const renderEntry = (item) => {
+    const active = item.id === activeId;
+    const entry = navStyles({ active });
+    const Icon = item.icon;
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      Icon && /* @__PURE__ */ jsx("span", { className: styles.iconFrame(), "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { className: styles.icon() }) }),
+      /* @__PURE__ */ jsx("span", { className: styles.label(), children: item.label }),
+      item.badge
+    ] });
+    if (item.href !== void 0) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          "aria-current": active ? "page" : void 0,
+          className: entry.entry(),
+          onClick: () => choose(item.id),
+          children: inner
+        }
+      );
+    }
+    if (item.items && !onNavigate) {
+      return /* @__PURE__ */ jsx("span", { className: styles.group(), children: inner });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-current": active ? "page" : void 0,
+        className: entry.entry(),
+        onClick: () => choose(item.id),
+        children: inner
+      }
+    );
+  };
+  const renderList = (list, depth) => /* @__PURE__ */ jsx("ul", { className: depth === 0 ? styles.list() : styles.nested(), children: list.map((item) => /* @__PURE__ */ jsxs("li", { children: [
+    renderEntry(item),
+    item.items && item.items.length > 0 && renderList(item.items, depth + 1)
+  ] }, item.id)) });
+  return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": label, "data-slot": "app-sidebar-nav", className: styles.nav({ class: className }), ...props, children: [
+    heading != null && /* @__PURE__ */ jsx("p", { className: styles.heading(), children: heading }),
+    renderList(items, 0)
+  ] });
+});
+var topbarStyles = recipe({
+  slots: {
+    header: "flex flex-wrap items-center gap-4 border-b-4 border-edge-strong bg-surface-base px-4 py-3 md:px-8",
+    toggle: "shrink-0 px-3 lg:hidden",
+    lead: "flex min-w-0 flex-auto flex-wrap items-center gap-3",
+    actions: "ml-auto flex shrink-0 flex-wrap items-center gap-3"
+  }
+});
+var AppTopbar = forwardRef(function AppTopbar2({
+  label = "Application",
+  children,
+  actions,
+  sidebarToggleLabel = "Open navigation",
+  className,
+  ...props
+}, ref) {
+  const styles = topbarStyles();
+  const context = useContext(AppShellContext);
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      "aria-label": label,
+      "data-slot": "app-topbar",
+      className: styles.header({ class: className }),
+      ...props,
+      children: [
+        context?.hasSidebar && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            "aria-label": sidebarToggleLabel,
+            "aria-haspopup": "dialog",
+            "aria-expanded": context.drawerOpen,
+            "data-slot": "app-sidebar-toggle",
+            className: styles.toggle(),
+            onClick: () => context.setSidebarOpen(true),
+            children: /* @__PURE__ */ jsx(MenuIcon, { className: "h-5 w-5", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-slot": "app-topbar-lead", className: styles.lead(), children }),
+        actions != null && /* @__PURE__ */ jsx("div", { "data-slot": "app-topbar-actions", className: styles.actions(), children: actions })
+      ]
+    }
+  );
+});
+var mainStyles = recipe({
+  base: "flex min-w-0 flex-1 flex-col gap-6 p-4 md:p-8"
+});
+var AppMain = forwardRef(function AppMain2({ label = "Content", children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("main", { ref, "aria-label": label, "data-slot": "app-main", className: mainStyles({ class: className }), ...props, children });
+});
+export {
+  AppMain,
+  AppShell,
+  AppSidebar,
+  AppSidebarNav,
+  AppTopbar
+};
+//# sourceMappingURL=AppShell.js.map

package/dist/components/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AppShell.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\nimport type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { Menu as MenuIcon } from 'lucide-react';\nimport { recipe } from '../lib/recipe';\nimport { Button } from './Button';\nimport { Drawer } from './Drawer';\n\n// The width at which the sidebar stops being off-canvas and stays on the page.\n// Tailwind's `lg` step, written as the same query so the CSS that shows the\n// persistent sidebar and the script that suppresses the drawer agree on one\n// number — a gap between them would leave a band of widths with both, or\n// neither.\nconst WIDE_QUERY = '(min-width: 64rem)';\n\nfunction canMatchMedia(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n}\n\nfunction subscribeToWidth(onChange: () => void): () => void {\n  if (!canMatchMedia()) return () => {};\n  const query = window.matchMedia(WIDE_QUERY);\n  query.addEventListener('change', onChange);\n  return () => query.removeEventListener('change', onChange);\n}\n\nfunction isWide(): boolean {\n  return canMatchMedia() && window.matchMedia(WIDE_QUERY).matches;\n}\n\n// The server renders narrow: the persistent sidebar is shown by CSS alone, so\n// the only thing a narrow first paint decides is that no drawer is open yet.\nfunction isWideOnServer(): boolean {\n  return false;\n}\n\ninterface AppShellContextValue {\n  /** Whether `AppShell` was given a sidebar, so the topbar knows to offer a toggle. */\n  hasSidebar: boolean;\n  /** The off-canvas sidebar is open. Always false at desktop width. */\n  drawerOpen: boolean;\n  setSidebarOpen: (open: boolean) => void;\n}\n\nconst AppShellContext = createContext<AppShellContextValue | null>(null);\n\nconst shell = recipe({\n  slots: {\n    root: 'flex min-h-screen bg-surface-base font-sans text-content-primary',\n    column: 'flex min-w-0 flex-1 flex-col',\n  },\n});\n\nexport interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {\n  /**\n   * The navigation column — an `AppSidebar`. Persistent at desktop width;\n   * below it, the same content opens off-canvas in a `Drawer` from the\n   * topbar's toggle. Omit it for an application with no navigation, and the\n   * toggle goes with it.\n   */\n  sidebar?: ReactNode;\n  /** The bar above the content — an `AppTopbar`. */\n  topbar?: ReactNode;\n  /**\n   * The page — an `AppMain`, which is the one `<main>` landmark. The shell\n   * does not render `<main>` itself, so a page never ends up with two.\n   */\n  children: ReactNode;\n  /**\n   * Whether the off-canvas sidebar is open, controlled. Only means anything\n   * below desktop width, where the sidebar is off-canvas; leave it unset and\n   * the shell keeps its own state.\n   */\n  sidebarOpen?: boolean;\n  /** Open the off-canvas sidebar on first render, uncontrolled — for a story or a walkthrough. */\n  defaultSidebarOpen?: boolean;\n  /**\n   * Called with the next open state: the toggle, a dismissal, a navigation\n   * from inside the drawer, or the viewport widening past the breakpoint.\n   */\n  onSidebarOpenChange?: (open: boolean) => void;\n  /** Merged into the root's classes. */\n  className?: string;\n}\n\n/**\n * The application layout: a navigation column, a bar, and the page.\n *\n * The *Application layout* capability (#247). Five pieces that compose into a\n * working app with no CSS of the consumer's own:\n *\n * - `AppShell` — the frame, and the owner of the sidebar's open state.\n * - `AppSidebar` — a labelled `<aside>` at desktop width; below it, the same\n *   content in a left `Drawer`, which brings focus in on open, traps it, and\n *   returns it to the toggle on close.\n * - `AppSidebarNav` — a labelled `<nav>` over a navigation tree the consumer\n *   supplies, of any depth.\n * - `AppTopbar` — the `<header>`, with the sidebar toggle below desktop width,\n *   a leading slot for a title or status, and an `actions` slot.\n * - `AppMain` — the single `<main>`.\n *\n * The account area is a slot — `AppSidebar`'s `footer` — rather than a user\n * prop with a name and an avatar: what an application shows about who is\n * signed in, if anyone is, is the application's business. The shell makes no\n * assumption about the domain it is holding either; the navigation, the\n * status, the actions and the content are all supplied.\n *\n * @example\n * ```tsx\n * <AppShell\n *   sidebar={\n *     <AppSidebar label=\"Workspace\" header={<strong>ACME</strong>} footer={<AccountMenu />}>\n *       <AppSidebarNav label=\"Primary\" items={nav} activeId=\"projects\" />\n *     </AppSidebar>\n *   }\n *   topbar={<AppTopbar actions={<Button size=\"sm\">NEW</Button>}>PROJECTS</AppTopbar>}\n * >\n *   <AppMain>…</AppMain>\n * </AppShell>\n * ```\n */\nexport const AppShell = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(\n  {\n    sidebar,\n    topbar,\n    children,\n    sidebarOpen,\n    defaultSidebarOpen = false,\n    onSidebarOpenChange,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const styles = shell();\n  const [ownOpen, setOwnOpen] = useState(defaultSidebarOpen);\n  const open = sidebarOpen ?? ownOpen;\n  const wide = useSyncExternalStore(subscribeToWidth, isWide, isWideOnServer);\n  const hasSidebar = sidebar != null && sidebar !== false;\n  // One derived value, read everywhere: the drawer, the toggle's\n  // `aria-expanded` and the context all ask the same question of the same\n  // inputs, so they cannot disagree about whether the drawer is showing.\n  const drawerOpen = hasSidebar && open && !wide;\n\n  // The latest callback, read at call time, so `setSidebarOpen` keeps one\n  // identity for as long as the shell is controlled the same way — a caller\n  // passing an inline arrow would otherwise re-run the effect below on every\n  // render and report the same close over and over.\n  const onChange = useRef(onSidebarOpenChange);\n  useEffect(() => {\n    onChange.current = onSidebarOpenChange;\n  });\n  const controlled = sidebarOpen !== undefined;\n\n  const setSidebarOpen = useCallback(\n    (next: boolean) => {\n      if (!controlled) setOwnOpen(next);\n      onChange.current?.(next);\n    },\n    [controlled],\n  );\n\n  // Widening past the breakpoint with the drawer open closes it, rather than\n  // leaving it to reappear the next time the window narrows.\n  useEffect(() => {\n    if (wide && open) setSidebarOpen(false);\n  }, [wide, open, setSidebarOpen]);\n\n  const context = useMemo(\n    () => ({ hasSidebar, drawerOpen, setSidebarOpen }),\n    [hasSidebar, drawerOpen, setSidebarOpen],\n  );\n\n  return (\n    <AppShellContext.Provider value={context}>\n      <div ref={ref} data-slot=\"app-shell\" className={styles.root({ class: className })} {...props}>\n        {sidebar}\n        <div data-slot=\"app-shell-column\" className={styles.column()}>\n          {topbar}\n          {children}\n        </div>\n      </div>\n    </AppShellContext.Provider>\n  );\n});\n\nconst sidebarStyles = recipe({\n  slots: {\n    aside:\n      'hidden w-72 shrink-0 flex-col border-r-4 border-edge-strong bg-surface-base '\n      + 'lg:sticky lg:top-0 lg:flex lg:h-screen',\n    header: 'border-b-2 border-edge-strong px-6 py-5',\n    body: 'flex-1 overflow-y-auto px-4 py-5',\n    footer: 'border-t-2 border-edge-strong px-4 py-4',\n    drawerHeader: 'mb-5 border-b-2 border-edge-strong pb-4',\n  },\n});\n\nexport interface AppSidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> {\n  /**\n   * The sidebar's accessible name — the `<aside>` landmark's label at\n   * desktop width, and the drawer's title below it. Required: an unlabelled\n   * complementary region and a dialog announced as \"dialog\" both leave a\n   * screen reader user guessing.\n   */\n  label: string;\n  /** Above the navigation: the application's name or mark. */\n  header?: ReactNode;\n  /** The navigation — normally one or more `AppSidebarNav`. */\n  children: ReactNode;\n  /**\n   * Below the navigation: the account area, as a slot. A `Menu` behind an\n   * `Avatar`, a sign-in link, or nothing. In the drawer it takes the place of\n   * the default close button; the drawer's own close control stays.\n   */\n  footer?: ReactNode;\n  /** Merged into the `<aside>`'s classes. */\n  className?: string;\n}\n\n/**\n * The navigation column: a labelled `<aside>` at desktop width, a left\n * `Drawer` below it.\n *\n * The content is written once and rendered in whichever of the two the\n * viewport calls for. The persistent column is hidden by CSS below `lg`, which\n * takes it out of the accessibility tree too; the drawer only exists while it\n * is open, and it never opens at desktop width. Outside an `AppShell` there is\n * no open state to read, so only the persistent column renders.\n */\nexport const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(function AppSidebar(\n  { label, header, children, footer, className, ...props },\n  ref,\n) {\n  const styles = sidebarStyles();\n  const context = useContext(AppShellContext);\n\n  return (\n    <>\n      <aside\n        ref={ref}\n        aria-label={label}\n        data-slot=\"app-sidebar\"\n        className={styles.aside({ class: className })}\n        {...props}\n      >\n        {header != null && <div data-slot=\"app-sidebar-header\" className={styles.header()}>{header}</div>}\n        <div data-slot=\"app-sidebar-body\" className={styles.body()}>{children}</div>\n        {footer != null && <div data-slot=\"app-sidebar-footer\" className={styles.footer()}>{footer}</div>}\n      </aside>\n      {context && (\n        <Drawer\n          isOpen={context.drawerOpen}\n          onClose={() => context.setSidebarOpen(false)}\n          placement=\"left\"\n          title={label}\n          footer={footer ?? undefined}\n        >\n          {header != null && <div className={styles.drawerHeader()}>{header}</div>}\n          {children}\n        </Drawer>\n      )}\n    </>\n  );\n});\n\n/**\n * One entry in the navigation tree. The tree is the consumer's: any labels,\n * any depth, links or actions.\n */\nexport interface AppNavItem {\n  /** Unique within the tree. Matched against `activeId`, and passed to `onNavigate`. */\n  id: string;\n  /** What the entry reads as. */\n  label: ReactNode;\n  /**\n   * Where it goes. Present, the entry is an `<a>`; absent, it is a button that\n   * reports through `onNavigate` — or, with `items` and no `onNavigate`, a\n   * plain group heading.\n   */\n  href?: string;\n  /**\n   * A component, not a rendered element — `LayoutDashboard`, never\n   * `<LayoutDashboard />` — matching `StatCard` and `PageHeader`.\n   */\n  icon?: ElementType<{ className?: string }>;\n  /** Trailing content: a count, a `Badge`. */\n  badge?: ReactNode;\n  /** Children, rendered as a nested list under this entry. */\n  items?: readonly AppNavItem[];\n}\n\nconst navStyles = recipe({\n  slots: {\n    nav: 'font-mono text-sm',\n    heading: 'mb-2 px-3 font-mono text-xs font-bold uppercase tracking-widest text-content-muted',\n    list: 'flex flex-col gap-1.5',\n    nested: 'mt-1.5 ml-3 flex flex-col gap-1.5 border-l-2 border-edge-strong pl-3',\n    entry:\n      'flex w-full items-center gap-2.5 border-2 px-3 py-2 text-left font-bold uppercase no-underline',\n    iconFrame: 'inline-flex shrink-0',\n    icon: 'h-4 w-4',\n    label: 'min-w-0 flex-1 truncate',\n    group: 'flex items-center gap-2.5 px-3 py-2 font-bold uppercase text-content-muted',\n  },\n  variants: {\n    active: {\n      true: { entry: 'border-edge-strong bg-accent-primary text-content-inverse shadow-hard-sm' },\n      false: { entry: 'border-transparent text-content-primary hover:border-edge-strong hover:bg-surface-raised' },\n    },\n  },\n});\n\nexport interface AppSidebarNavProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> {\n  /**\n   * The `<nav>` landmark's accessible name — `Primary`, `Projects`. Required,\n   * because a sidebar can hold more than one, and two unnamed navigation\n   * landmarks are indistinguishable.\n   */\n  label: string;\n  /** The tree. */\n  items: readonly AppNavItem[];\n  /** The entry for the current page, marked `aria-current=\"page\"` and filled. */\n  activeId?: string;\n  /**\n   * Called with an entry's `id` when it is chosen, link or button. Inside an\n   * `AppShell` a choice also closes the off-canvas sidebar, since the reader\n   * has gone where they opened it to go.\n   */\n  onNavigate?: (id: string) => void;\n  /** Shown above the list as a small caps heading. The landmark's name is `label` either way. */\n  heading?: ReactNode;\n  /** Merged into the `<nav>`'s classes. */\n  className?: string;\n}\n\n/**\n * A labelled `<nav>` over a navigation tree the consumer supplies.\n *\n * Entries with an `href` are links; entries without one are buttons that\n * report through `onNavigate`, which is where a client-side router takes\n * over. An entry with `items` nests them, to any depth. The current entry\n * carries `aria-current=\"page\"` — on the element a screen reader lands on, not\n * a wrapper — and the filled, shadowed treatment.\n */\nexport const AppSidebarNav = forwardRef<HTMLElement, AppSidebarNavProps>(function AppSidebarNav(\n  { label, items, activeId, onNavigate, heading, className, ...props },\n  ref,\n) {\n  const styles = navStyles();\n  const context = useContext(AppShellContext);\n\n  const choose = (id: string) => {\n    onNavigate?.(id);\n    context?.setSidebarOpen(false);\n  };\n\n  const renderEntry = (item: AppNavItem) => {\n    const active = item.id === activeId;\n    const entry = navStyles({ active });\n    const Icon = item.icon;\n    const inner = (\n      <>\n        {Icon && (\n          <span className={styles.iconFrame()} aria-hidden=\"true\">\n            <Icon className={styles.icon()} />\n          </span>\n        )}\n        <span className={styles.label()}>{item.label}</span>\n        {item.badge}\n      </>\n    );\n\n    if (item.href !== undefined) {\n      return (\n        <a\n          href={item.href}\n          aria-current={active ? 'page' : undefined}\n          className={entry.entry()}\n          onClick={() => choose(item.id)}\n        >\n          {inner}\n        </a>\n      );\n    }\n    if (item.items && !onNavigate) {\n      return <span className={styles.group()}>{inner}</span>;\n    }\n    return (\n      <button\n        type=\"button\"\n        aria-current={active ? 'page' : undefined}\n        className={entry.entry()}\n        onClick={() => choose(item.id)}\n      >\n        {inner}\n      </button>\n    );\n  };\n\n  const renderList = (list: readonly AppNavItem[], depth: number) => (\n    <ul className={depth === 0 ? styles.list() : styles.nested()}>\n      {list.map((item) => (\n        <li key={item.id}>\n          {renderEntry(item)}\n          {item.items && item.items.length > 0 && renderList(item.items, depth + 1)}\n        </li>\n      ))}\n    </ul>\n  );\n\n  return (\n    <nav ref={ref} aria-label={label} data-slot=\"app-sidebar-nav\" className={styles.nav({ class: className })} {...props}>\n      {heading != null && <p className={styles.heading()}>{heading}</p>}\n      {renderList(items, 0)}\n    </nav>\n  );\n});\n\nconst topbarStyles = recipe({\n  slots: {\n    header:\n      'flex flex-wrap items-center gap-4 border-b-4 border-edge-strong bg-surface-base px-4 py-3 md:px-8',\n    toggle: 'shrink-0 px-3 lg:hidden',\n    lead: 'flex min-w-0 flex-auto flex-wrap items-center gap-3',\n    actions: 'ml-auto flex shrink-0 flex-wrap items-center gap-3',\n  },\n});\n\nexport interface AppTopbarProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {\n  /**\n   * The `<header>` landmark's accessible name. `Application` by default; name\n   * it for the application when a page carries more than one header.\n   */\n  label?: string;\n  /** The leading slot: the page's title, a breadcrumb, status badges. */\n  children?: ReactNode;\n  /** The trailing slot: actions, a search field, a status area. */\n  actions?: ReactNode;\n  /**\n   * The sidebar toggle's accessible name. It is an icon, so this is all a\n   * screen reader hears of it; name it for what it opens.\n   */\n  sidebarToggleLabel?: string;\n  /** Merged into the `<header>`'s classes. */\n  className?: string;\n}\n\n/**\n * The bar above the page — a labelled `<header>`.\n *\n * Inside an `AppShell` with a sidebar it leads with the sidebar toggle, shown\n * below desktop width only. The toggle is a real button in the tab order,\n * named by `sidebarToggleLabel`, reporting `aria-expanded`; opening it moves\n * focus into the drawer, and closing the drawer returns focus here.\n *\n * When the leading slot and the actions do not fit on one line, the actions\n * wrap onto a second, right-aligned, rather than overlapping the lead.\n */\nexport const AppTopbar = forwardRef<HTMLElement, AppTopbarProps>(function AppTopbar(\n  {\n    label = 'Application',\n    children,\n    actions,\n    sidebarToggleLabel = 'Open navigation',\n    className,\n    ...props\n  },\n  ref,\n) {\n  const styles = topbarStyles();\n  const context = useContext(AppShellContext);\n\n  return (\n    <header\n      ref={ref}\n      aria-label={label}\n      data-slot=\"app-topbar\"\n      className={styles.header({ class: className })}\n      {...props}\n    >\n      {context?.hasSidebar && (\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          aria-label={sidebarToggleLabel}\n          aria-haspopup=\"dialog\"\n          aria-expanded={context.drawerOpen}\n          data-slot=\"app-sidebar-toggle\"\n          className={styles.toggle()}\n          onClick={() => context.setSidebarOpen(true)}\n        >\n          <MenuIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n        </Button>\n      )}\n      <div data-slot=\"app-topbar-lead\" className={styles.lead()}>{children}</div>\n      {actions != null && <div data-slot=\"app-topbar-actions\" className={styles.actions()}>{actions}</div>}\n    </header>\n  );\n});\n\nconst mainStyles = recipe({\n  base: 'flex min-w-0 flex-1 flex-col gap-6 p-4 md:p-8',\n});\n\nexport interface AppMainProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {\n  /**\n   * The `<main>` landmark's accessible name. `Content` by default; the page's\n   * title is the better name when it has one.\n   */\n  label?: string;\n  /** The page. Stacked with the system's gap, so sections need no spacing of their own. */\n  children: ReactNode;\n  /** Merged into the `<main>`'s classes. */\n  className?: string;\n}\n\n/**\n * The page's one `<main>` landmark, labelled, padded and stacking its\n * children with a consistent gap — so a page of `PageHeader`, `Card` and\n * `DataTable` needs no layout CSS of its own.\n */\nexport const AppMain = forwardRef<HTMLElement, AppMainProps>(function AppMain(\n  { label = 'Content', children, className, ...props },\n  ref,\n) {\n  return (\n    <main ref={ref} aria-label={label} data-slot=\"app-main\" className={mainStyles({ class: className })} {...props}>\n      {children}\n    </main>\n  );\n});\n"],"mappings":"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","names":["AppShell","AppSidebar","AppSidebarNav","AppTopbar","AppMain"]}

package/dist/components/AsciiDivider.js

@@ -0,0 +1,8 @@
+// src/components/AsciiDivider.tsx
+import { Divider } from "./Divider.js";
+import { jsx } from "react/jsx-runtime";
+var AsciiDivider = (props) => /* @__PURE__ */ jsx(Divider, { ...props });
+export {
+  AsciiDivider
+};
+//# sourceMappingURL=AsciiDivider.js.map

package/dist/components/AsciiDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AsciiDivider.tsx"],"sourcesContent":["import type React from 'react';\nimport { Divider } from './Divider';\nimport type { DividerProps } from './Divider';\n\nexport type AsciiDividerProps = DividerProps;\n\n/**\n * @deprecated Use {@link Divider}. This name described the mark (`//====//`),\n * which is only the mark the *dark* levels draw — the light levels draw a\n * pencil rule. `Divider` names the role instead, and picks the mark from the\n * level's polarity.\n *\n * Kept as a thin alias so existing call sites keep compiling. Note that the\n * bare `.ascii-divider` class is gone: it existed only as a hook for a\n * consumer's `::after`, and that behaviour is now a variant on `Divider`.\n * Anything rendering `<div className=\"ascii-divider\" />` directly must render\n * the component instead.\n */\nexport const AsciiDivider: React.FC<AsciiDividerProps> = (props) => <Divider {...props} />;\n"],"mappings":";AACA,SAAS,eAAe;AAiB4C;AAA7D,IAAM,eAA4C,CAAC,UAAU,oBAAC,WAAS,GAAG,OAAO;","names":[]}

package/dist/components/AsciiGauge.js

@@ -0,0 +1,130 @@
+// src/components/AsciiGauge.tsx
+import { forwardRef } from "react";
+import { accentTextClass } from "../lib/accentClasses.js";
+import { cn } from "../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLYPH_SETS = {
+  block: { fill: "\u2588", empty: "\u2591", target: "|" },
+  shade: { fill: "\u2593", empty: "\u2591", target: "|", shades: ["\u2593", "\u2592", "\u2591"] },
+  line: { fill: "=", empty: "-", target: "|" },
+  ascii: { fill: "#", empty: "-", target: "|" }
+};
+var AsciiGauge = forwardRef(
+  function AsciiGauge2({
+    label = "Progress",
+    value,
+    min = 0,
+    max = 100,
+    target,
+    length = 10,
+    brackets = ["[", "]"],
+    variant = "block",
+    accent = "primary",
+    showValue = false,
+    valueFormat,
+    className,
+    ...props
+  }, ref) {
+    const span = Math.max(1e-4, max - min);
+    const clampedValue = Math.min(max, Math.max(min, value));
+    const ratio = Math.min(1, Math.max(0, (clampedValue - min) / span));
+    const filledCount = Math.round(ratio * length);
+    const glyphs = GLYPH_SETS[variant] ?? GLYPH_SETS.block;
+    const targetIndex = target !== void 0 && target >= min && target <= max ? Math.min(
+      length - 1,
+      Math.max(0, Math.round((target - min) / span * length))
+    ) : null;
+    const chars = [];
+    for (let i = 0; i < length; i++) {
+      const isTarget = targetIndex !== null && i === targetIndex;
+      if (isTarget && i >= filledCount) {
+        chars.push({ char: glyphs.target, isFilled: false, isTarget: true });
+      } else if (i < filledCount) {
+        if (variant === "shade" && glyphs.shades) {
+          const shadeIndex = Math.min(
+            glyphs.shades.length - 1,
+            Math.floor((1 - i / filledCount) * glyphs.shades.length)
+          );
+          chars.push({
+            char: glyphs.shades[shadeIndex],
+            isFilled: true,
+            isTarget
+          });
+        } else {
+          chars.push({ char: glyphs.fill, isFilled: true, isTarget });
+        }
+      } else {
+        chars.push({ char: glyphs.empty, isFilled: false, isTarget });
+      }
+    }
+    const [openBracket, closeBracket] = brackets ?? ["", ""];
+    const formattedValue = valueFormat ? valueFormat(clampedValue, ratio) : `${Math.round(ratio * 100)}%`;
+    const accentClass = accentTextClass(accent);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        role: "meter",
+        "aria-label": label ?? (props["aria-label"] || "Progress"),
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "data-slot": "ascii-gauge",
+        className: cn(
+          "inline-flex items-center font-mono text-xs select-none tracking-tight",
+          className
+        ),
+        ...props,
+        children: [
+          openBracket && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "ascii-gauge-bracket",
+              "aria-hidden": "true",
+              className: "text-content-muted",
+              children: openBracket
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "ascii-gauge-bar",
+              "aria-hidden": "true",
+              className: "inline-flex",
+              children: chars.map((item, idx) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: item.isTarget ? "text-intent-warning font-bold" : item.isFilled ? accentClass : "text-content-muted",
+                  children: item.char
+                },
+                `gauge-char-${idx}`
+              ))
+            }
+          ),
+          closeBracket && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "ascii-gauge-bracket",
+              "aria-hidden": "true",
+              className: "text-content-muted",
+              children: closeBracket
+            }
+          ),
+          showValue && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "ascii-gauge-value",
+              className: "ml-1.5 font-mono text-xs font-bold text-content-primary",
+              children: formattedValue
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AsciiGauge.displayName = "AsciiGauge";
+export {
+  AsciiGauge
+};
+//# sourceMappingURL=AsciiGauge.js.map

package/dist/components/AsciiGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AsciiGauge.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { accentTextClass } from '../lib/accentClasses';\nimport { cn } from '../lib/recipe';\nimport type { AccentToken } from '../lib/theme';\n\nexport type AsciiGaugeVariant =\n  | 'block'\n  | 'shade'\n  | 'line'\n  | 'ascii';\n\nexport interface AsciiGaugeProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {\n  /** Accessible label describing what the meter measures (default 'Progress'). */\n  label?: string;\n  /** Current value between min and max. */\n  value: number;\n  /** Minimum value range (default 0). */\n  min?: number;\n  /** Maximum value range (default 100). */\n  max?: number;\n  /** Optional target or benchmark threshold value. When provided, renders a target pin inside the bar. */\n  target?: number;\n  /** Total character length of inner bar (excluding brackets, default 10). */\n  length?: number;\n  /** Enclosing boundary characters (default ['[', ']']). Pass null for bare meter. */\n  brackets?: [string, string] | null;\n  /** Visual glyph set (default 'block'). */\n  variant?: AsciiGaugeVariant;\n  /** Accent role token for filled glyphs (default 'primary'). */\n  accent?: AccentToken;\n  /** Show numeric percentage readout after bar (default false). */\n  showValue?: boolean;\n  /** Custom formatter for numeric readout. */\n  valueFormat?: (value: number, ratio: number) => string;\n}\n\nconst GLYPH_SETS: Record<\n  AsciiGaugeVariant,\n  { fill: string; empty: string; target: string; shades?: string[] }\n> = {\n  block: { fill: '█', empty: '░', target: '|' },\n  shade: { fill: '▓', empty: '░', target: '|', shades: ['▓', '▒', '░'] },\n  line: { fill: '=', empty: '-', target: '|' },\n  ascii: { fill: '#', empty: '-', target: '|' },\n};\n\n/**\n * Foundational zero-dependency monospace meter primitive.\n *\n * Emits pure UTF-8 character progress bars and benchmark comparisons for terminal HUDs,\n * CLI logs, and table cells. Co-exists alongside SVG BulletChart by addressing text-mode\n * environments and compact monospace contexts. Conforms to 0px border radius and\n * accessible role=\"meter\".\n *\n * @example\n * ```tsx\n * <AsciiGauge value={68} target={80} variant=\"block\" accent=\"primary\" showValue />\n * ```\n */\nexport const AsciiGauge = forwardRef<HTMLSpanElement, AsciiGaugeProps>(\n  function AsciiGauge(\n    {\n      label = 'Progress',\n      value,\n      min = 0,\n      max = 100,\n      target,\n      length = 10,\n      brackets = ['[', ']'],\n      variant = 'block',\n      accent = 'primary',\n      showValue = false,\n      valueFormat,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const span = Math.max(0.0001, max - min);\n    const clampedValue = Math.min(max, Math.max(min, value));\n    const ratio = Math.min(1, Math.max(0, (clampedValue - min) / span));\n    const filledCount = Math.round(ratio * length);\n\n    const glyphs = GLYPH_SETS[variant] ?? GLYPH_SETS.block;\n    const targetIndex =\n      target !== undefined && target >= min && target <= max\n        ? Math.min(\n            length - 1,\n            Math.max(0, Math.round(((target - min) / span) * length)),\n          )\n        : null;\n\n    // Build character array\n    const chars: { char: string; isFilled: boolean; isTarget: boolean }[] = [];\n\n    for (let i = 0; i < length; i++) {\n      const isTarget = targetIndex !== null && i === targetIndex;\n      if (isTarget && i >= filledCount) {\n        chars.push({ char: glyphs.target, isFilled: false, isTarget: true });\n      } else if (i < filledCount) {\n        if (variant === 'shade' && glyphs.shades) {\n          const shadeIndex = Math.min(\n            glyphs.shades.length - 1,\n            Math.floor((1 - i / filledCount) * glyphs.shades.length),\n          );\n          chars.push({\n            char: glyphs.shades[shadeIndex],\n            isFilled: true,\n            isTarget,\n          });\n        } else {\n          chars.push({ char: glyphs.fill, isFilled: true, isTarget });\n        }\n      } else {\n        chars.push({ char: glyphs.empty, isFilled: false, isTarget });\n      }\n    }\n\n    const [openBracket, closeBracket] = brackets ?? ['', ''];\n    const formattedValue = valueFormat\n      ? valueFormat(clampedValue, ratio)\n      : `${Math.round(ratio * 100)}%`;\n\n    const accentClass = accentTextClass(accent);\n\n    return (\n      <span\n        ref={ref}\n        role=\"meter\"\n        aria-label={label ?? (props['aria-label'] || 'Progress')}\n        aria-valuenow={clampedValue}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        data-slot=\"ascii-gauge\"\n        className={cn(\n          'inline-flex items-center font-mono text-xs select-none tracking-tight',\n          className,\n        )}\n        {...props}\n      >\n        {openBracket && (\n          <span\n            data-slot=\"ascii-gauge-bracket\"\n            aria-hidden=\"true\"\n            className=\"text-content-muted\"\n          >\n            {openBracket}\n          </span>\n        )}\n        <span\n          data-slot=\"ascii-gauge-bar\"\n          aria-hidden=\"true\"\n          className=\"inline-flex\"\n        >\n          {chars.map((item, idx) => (\n            <span\n              key={`gauge-char-${idx}`}\n              className={\n                item.isTarget\n                  ? 'text-intent-warning font-bold'\n                  : item.isFilled\n                    ? accentClass\n                    : 'text-content-muted'\n              }\n            >\n              {item.char}\n            </span>\n          ))}\n        </span>\n        {closeBracket && (\n          <span\n            data-slot=\"ascii-gauge-bracket\"\n            aria-hidden=\"true\"\n            className=\"text-content-muted\"\n          >\n            {closeBracket}\n          </span>\n        )}\n        {showValue && (\n          <span\n            data-slot=\"ascii-gauge-value\"\n            className=\"ml-1.5 font-mono text-xs font-bold text-content-primary\"\n          >\n            {formattedValue}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\n\nAsciiGauge.displayName = 'AsciiGauge';\n"],"mappings":"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","names":["AsciiGauge"]}

package/dist/components/Avatar.js

@@ -0,0 +1,87 @@
+"use client";
+
+// src/components/Avatar.tsx
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { forwardRef } from "react";
+import { accentVar } from "../lib/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Avatar = forwardRef(function Avatar2({
+  src,
+  alt = "Avatar",
+  fallback = "RK",
+  size = "md",
+  accent = "primary",
+  className = "",
+  style,
+  ...props
+}, ref) {
+  const getSizePx = () => {
+    switch (size) {
+      case "sm":
+        return "32px";
+      case "lg":
+        return "56px";
+      default:
+        return "44px";
+    }
+  };
+  const accentColor = accentVar(accent);
+  const sizePx = getSizePx();
+  return /* @__PURE__ */ jsxs(
+    BaseAvatar.Root,
+    {
+      render: (rootProps) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rootProps,
+          ...props,
+          ref,
+          "data-slot": "avatar",
+          className,
+          style: {
+            width: sizePx,
+            height: sizePx,
+            border: "2px solid var(--ds-border-strong)",
+            boxShadow: `3px 3px 0px 0px ${accentColor}`,
+            backgroundColor: "var(--ds-surface-base)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+            boxSizing: "border-box",
+            ...style
+          }
+        }
+      ),
+      children: [
+        src && /* @__PURE__ */ jsx(
+          BaseAvatar.Image,
+          {
+            src,
+            alt,
+            "data-slot": "avatar-image",
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BaseAvatar.Fallback,
+          {
+            "data-slot": "avatar-fallback",
+            style: {
+              fontFamily: "var(--ds-font-display)",
+              fontWeight: 800,
+              fontSize: size === "sm" ? "0.75rem" : size === "lg" ? "1.2rem" : "0.95rem",
+              color: accentColor,
+              textTransform: "uppercase"
+            },
+            children: fallback
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { forwardRef } from 'react';\nimport { accentVar } from '../lib/theme';\nimport type { AccentToken } from '../lib/theme';\nimport type React from 'react';\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  fallback?: string;\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Which accent draws the ring and the offset shadow.\n   *\n   * Roles only: `primary`, `secondary`, `tertiary`, `quiet`, and the four\n   * intents. The hue names this used to accept are gone.\n   *\n   * The hue names also mislead now that `palette` exists. On `sketch`,\n   * `accent=\"primary\"` renders `#1450d7` — blue — because it was never asking for\n   * cyan, it was asking for the primary accent. Use the role.\n   */\n  accent?: AccentToken;\n}\n\n/**\n * An avatar, on Base UI's `avatar`.\n *\n * The part that matters is the failure path: this rendered a bare `<img src>`\n * with no `onError`, so a URL that 404s showed the browser's broken-image glyph\n * rather than the initials — the one state a fallback exists for, and the one\n * that was never reached. `Avatar.Image` only renders once the image has\n * actually loaded, and `Avatar.Fallback` covers every other case, including the\n * moment before it does.\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar({\n  src,\n  alt = 'Avatar',\n  fallback = 'RK',\n  size = 'md',\n  accent = 'primary',\n  className = '',\n  style,\n  ...props\n}, ref) {\n  const getSizePx = () => {\n    switch (size) {\n      case 'sm': return '32px';\n      case 'lg': return '56px';\n      default: return '44px';\n    }\n  };\n\n  // `accentVar` owns the resolution. Duplicating it here as a switch is how the\n  // two drifted before: a role added to the token layer rendered as `primary`\n  // in this component and nowhere else, silently.\n  const accentColor = accentVar(accent);\n\n  const sizePx = getSizePx();\n\n  return (\n    <BaseAvatar.Root\n      /*\n       * The *function* form of `render`, as `Input` uses for `Field.Control`.\n       * Base UI's root is typed to a `span`; `AvatarProps extends\n       * HTMLAttributes<HTMLDivElement>` is the published type. Spreading\n       * div-typed props through the element form is a type error rather than a\n       * cosmetic one, and changing the published type to match a library's\n       * default element is the tail wagging the dog.\n       */\n      render={(rootProps) => (\n        <div\n          {...rootProps}\n          {...props}\n          ref={ref}\n          data-slot=\"avatar\"\n          className={className}\n          style={{\n            width: sizePx,\n            height: sizePx,\n            border: '2px solid var(--ds-border-strong)',\n            boxShadow: `3px 3px 0px 0px ${accentColor}`,\n            backgroundColor: 'var(--ds-surface-base)',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            overflow: 'hidden',\n            boxSizing: 'border-box',\n            ...style,\n          }}\n        />\n      )}\n    >\n      {src && (\n        <BaseAvatar.Image\n          src={src}\n          alt={alt}\n          data-slot=\"avatar-image\"\n          style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n        />\n      )}\n      <BaseAvatar.Fallback\n        data-slot=\"avatar-fallback\"\n        style={{\n            fontFamily: 'var(--ds-font-display)',\n            fontWeight: 800,\n            fontSize: size === 'sm' ? '0.75rem' : size === 'lg' ? '1.2rem' : '0.95rem',\n            color: accentColor,\n          textTransform: 'uppercase',\n        }}\n      >\n        {fallback}\n      </BaseAvatar.Fallback>\n    </BaseAvatar.Root>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,UAAU,kBAAkB;AACrC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AA0DtB,SAUI,KAVJ;AA1BG,IAAM,SAAS,WAAwC,SAASA,QAAO;AAAA,EAC5E;AAAA,EACA,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,YAAY,MAAM;AACtB,YAAQ,MAAM;AAAA,MACZ,KAAK;AAAM,eAAO;AAAA,MAClB,KAAK;AAAM,eAAO;AAAA,MAClB;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AAKA,QAAM,cAAc,UAAU,MAAM;AAEpC,QAAM,SAAS,UAAU;AAEzB,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MASC,QAAQ,CAAC,cACP;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA,UACA,aAAU;AAAA,UACV;AAAA,UACA,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,WAAW,mBAAmB,WAAW;AAAA,YACzC,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,UAAU;AAAA,YACV,WAAW;AAAA,YACX,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA,MAGD;AAAA,eACC;AAAA,UAAC,WAAW;AAAA,UAAX;AAAA,YACC;AAAA,YACA;AAAA,YACA,aAAU;AAAA,YACV,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,QAAQ;AAAA;AAAA,QAC7D;AAAA,QAEF;AAAA,UAAC,WAAW;AAAA,UAAX;AAAA,YACC,aAAU;AAAA,YACV,OAAO;AAAA,cACH,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,UAAU,SAAS,OAAO,YAAY,SAAS,OAAO,WAAW;AAAA,cACjE,OAAO;AAAA,cACT,eAAe;AAAA,YACjB;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Avatar"]}

package/dist/components/Badge.js

@@ -0,0 +1,25 @@
+// src/components/Badge.tsx
+import { forwardRef } from "react";
+import { accentVar } from "../lib/theme.js";
+import { cn } from "../lib/recipe.js";
+import { jsx } from "react/jsx-runtime";
+var Badge = forwardRef(function Badge2({ children, accent = "primary", className = "", style, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge",
+      ref,
+      className: cn(
+        "inline-flex items-center gap-[0.4rem] border-2 border-edge-strong bg-surface-base px-[0.6rem] py-[0.2rem] font-mono text-[0.75rem] font-bold",
+        className
+      ),
+      style: { color: accentVar(accent), ...style },
+      ...props,
+      children
+    }
+  );
+});
+export {
+  Badge
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type React from 'react';\nimport { accentVar } from '../lib/theme';\nimport type { AccentToken } from '../lib/theme';\nimport { cn } from '../lib/recipe';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The label: a state, a count, a category. Short by construction: the badge\n   * does not wrap, so anything long enough to need two lines is a `Tag` or\n   * prose, not a badge.\n   */\n  children: React.ReactNode;\n  /**\n   * Semantic role. Accepts an `Emphasis` (`primary`…`quiet`) or an `Intent`\n   * (`info`/`success`/`warning`/`danger`); the legacy palette names still\n   * resolve to the same values.\n   */\n  accent?: AccentToken;\n}\n\n/**\n * A short, inline status marker — `STABLE`, `3 FAILING`, `DRAFT`.\n *\n * It states what something *is*, and nothing about it is interactive: no\n * click, no focus, no keyboard affordance. A badge that needs to be pressed is\n * a `Button`, and one that needs to be removed is a `Tag`.\n *\n * The accent carries the meaning, so choose it by role rather than by colour —\n * `intent.danger` for a failure, `quiet` for a neutral count. On `midnight`\n * that is pink and grey; on another level it is whatever those roles resolve\n * to, and the badge stays correct because it never names a hue.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { children, accent = 'primary', className = '', style, ...props },\n  ref,\n) {\n  return (\n    <span data-slot=\"badge\"\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-[0.4rem] border-2 border-edge-strong bg-surface-base px-[0.6rem] py-[0.2rem] font-mono text-[0.75rem] font-bold',\n        className\n      )}\n      // `text-[0.75rem]` rather than `text-xs`: the named size ships a paired\n      // line-height, and the class this replaced set font-size alone so the\n      // badge inherited the article's unitless 1.5. Pinning any explicit\n      // leading changes the line box. The accent is a runtime value, so it\n      // stays an inline custom style rather than a build-time utility.\n      style={{ color: accentVar(accent), ...style }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAE1B,SAAS,UAAU;AAkCf;AALG,IAAM,QAAQ,WAAwC,SAASA,OACpE,EAAE,UAAU,SAAS,WAAW,YAAY,IAAI,OAAO,GAAG,MAAM,GAChE,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAAK,aAAU;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAMA,OAAO,EAAE,OAAO,UAAU,MAAM,GAAG,GAAG,MAAM;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["Badge"]}