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

package/dist/components/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Menu.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { Check } from 'lucide-react';\nimport { cn, recipe } from '../lib/recipe';\nimport { usePortalThemeAttribute } from './portalTheme';\nimport { floatingSurface, floatingParts } from './floatingSurface';\nimport type { OverlayAlign, OverlaySide } from './Tooltip';\n\nexport interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {\n  /**\n   * The control that opens it — one element that forwards its ref, such as\n   * `Button`. Its accessible name becomes the menu's: Base UI labels the\n   * `role=\"menu\"` popup by the trigger, so name the trigger for what the\n   * menu holds.\n   */\n  trigger: ReactElement;\n  /** `MenuItem`, `MenuRadioGroup` and `MenuSeparator`, in order. */\n  children: ReactNode;\n  /** The preferred side. `bottom` by default; flips when there is no room. */\n  side?: OverlaySide;\n  /** Alignment along the trigger's edge. `start` by default. */\n  align?: OverlayAlign;\n  /** Controlled open state. Leave unset and the menu manages its own. */\n  open?: boolean;\n  /** Open on first render, uncontrolled — for a story or a walkthrough. */\n  defaultOpen?: boolean;\n  /** Called with the next open state, whatever caused the change. */\n  onOpenChange?: (open: boolean) => void;\n  /** Merged into the popup's classes. */\n  className?: string;\n}\n\n// A list: a minimum width so short labels do not make a sliver, and the\n// available height as a cap, so a long menu scrolls inside itself.\nconst menu = recipe({\n  extend: floatingSurface,\n  slots: { popup: 'min-w-48 max-h-(--available-height) overflow-y-auto py-1' },\n});\n\n/**\n * A list of actions or choices, opened from a button.\n *\n * The *Context actions* capability: rename, duplicate, delete, or a choice\n * between a few settings, behind one control rather than spread across a\n * toolbar. Built on `@base-ui/react/menu`, which owns the keyboard model —\n * Enter, Space or ArrowDown on the trigger opens it on the first item,\n * ArrowUp on the last; the arrow keys move and wrap; Home and End jump;\n * typing a letter jumps to the item that starts with it; Enter or a click\n * selects; Escape or a press outside closes and returns focus to the\n * trigger. Tab closes it too, rather than stepping through the items: a menu\n * is one stop in the tab order.\n *\n * Escape closes only the topmost surface — a menu opened inside a `Modal`\n * closes and leaves the modal open, the stack #162 established.\n *\n * @example\n * ```tsx\n * <Menu trigger={<Button size=\"sm\">ACTIONS</Button>}>\n *   <MenuItem onClick={rename}>Rename</MenuItem>\n *   <MenuItem disabled>Move</MenuItem>\n *   <MenuSeparator />\n *   <MenuItem intent=\"danger\" onClick={remove}>Delete</MenuItem>\n * </Menu>\n * ```\n */\nexport const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(\n  {\n    trigger,\n    children,\n    side = 'bottom',\n    align = 'start',\n    open,\n    defaultOpen,\n    onOpenChange,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const styles = menu();\n\n  const portalTheme = usePortalThemeAttribute();\n  return (\n    <BaseMenu.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange ? (next) => onOpenChange(next) : undefined}\n    >\n      <BaseMenu.Trigger render={trigger} />\n      <BaseMenu.Portal>\n        <BaseMenu.Positioner\n          {...portalTheme}\n          side={side}\n          align={align}\n          sideOffset={6}\n          collisionPadding={8}\n          data-slot=\"menu-positioner\"\n          className={styles.positioner()}\n        >\n          <BaseMenu.Popup\n            ref={ref}\n            data-slot=\"menu\"\n            className={styles.popup({ class: className })}\n            {...props}\n          >\n            {children}\n          </BaseMenu.Popup>\n        </BaseMenu.Positioner>\n      </BaseMenu.Portal>\n    </BaseMenu.Root>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {\n  /** The label. Its first letter is what typeahead matches. */\n  children: ReactNode;\n  /**\n   * `danger` for the destructive action — the `intent.danger` ink, and the\n   * danger fill when highlighted. Put it last, after a `MenuSeparator`.\n   */\n  intent?: 'danger';\n  /**\n   * Shown muted and cannot be activated. It stays in the arrow-key sequence,\n   * announced as unavailable, rather than vanishing from it.\n   */\n  disabled?: boolean;\n  /**\n   * Close the menu when the item is chosen. On by default; turn it off for an\n   * item that changes something the user will want to change again at once.\n   */\n  closeOnClick?: boolean;\n  /** Merged into the item's classes. */\n  className?: string;\n}\n\n/**\n * One action in a {@link Menu}.\n *\n * Handle it with `onClick`, which fires for a pointer press and for Enter or\n * Space alike — Base UI routes the keyboard through the same handler.\n */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n  { children, intent, disabled = false, closeOnClick = true, className, ...props },\n  ref,\n) {\n  const parts = floatingParts();\n\n  // A disabled item stays in Base UI's roving list, as the WAI-ARIA menu\n  // pattern recommends: the arrow keys still land on it, so a keyboard or\n  // screen-reader user learns the action exists and is unavailable, rather\n  // than finding a gap. Base UI marks it `aria-disabled` and never fires it.\n  return (\n    <BaseMenu.Item\n      ref={ref}\n      disabled={disabled}\n      closeOnClick={closeOnClick}\n      data-slot=\"menu-item\"\n      className={cn(\n        parts.item(),\n        intent === 'danger' && parts.danger(),\n        disabled && parts.disabled(),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </BaseMenu.Item>\n  );\n});\n\nexport interface MenuRadioGroupProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'className'> {\n  /**\n   * The group's visible heading, and its accessible name — Base UI wires the\n   * label's id to the group's `aria-labelledby`, so the name lands on the\n   * `role=\"group\"` element rather than on a wrapper.\n   */\n  label?: string;\n  /** The chosen item's `value`. Controlled; pair with `onValueChange`. */\n  value?: string;\n  /** The initially chosen value, uncontrolled. */\n  defaultValue?: string;\n  /** Called with the chosen item's `value`. */\n  onValueChange?: (value: string) => void;\n  /** `MenuRadioItem`s. */\n  children: ReactNode;\n  /** Merged into the group's classes. */\n  className?: string;\n}\n\n/**\n * A choose-one set inside a {@link Menu} — a setting rather than an action.\n * The chosen item carries `aria-checked` and a check mark; the mark, not the\n * colour, is what says which one is chosen.\n */\nexport const MenuRadioGroup = forwardRef<HTMLDivElement, MenuRadioGroupProps>(\n  function MenuRadioGroup(\n    { label, value, defaultValue, onValueChange, children, className, ...props },\n    ref,\n  ) {\n    const parts = floatingParts();\n\n    return (\n      <BaseMenu.RadioGroup\n        ref={ref}\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onValueChange ? (next: string) => onValueChange(next) : undefined}\n        data-slot=\"menu-radio-group\"\n        className={className}\n        {...props}\n      >\n        {label ? (\n          <BaseMenu.GroupLabel data-slot=\"menu-group-label\" className={parts.groupLabel()}>\n            {label}\n          </BaseMenu.GroupLabel>\n        ) : null}\n        {children}\n      </BaseMenu.RadioGroup>\n    );\n  },\n);\n\nexport interface MenuRadioItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {\n  /** What choosing this item sets the group's value to. */\n  value: string;\n  /** The label. Its first letter is what typeahead matches. */\n  children: ReactNode;\n  /**\n   * Close the menu once a value is chosen. Off by default, as Base UI's is —\n   * a setting is often adjusted and checked in one visit. A picker whose\n   * choice is the whole point, like a theme, turns it on.\n   */\n  closeOnClick?: boolean;\n  /** Merged into the item's classes. */\n  className?: string;\n}\n\n/** One choice in a {@link MenuRadioGroup}. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(\n  function MenuRadioItem({ value, children, closeOnClick = false, className, ...props }, ref) {\n    const parts = floatingParts();\n\n    return (\n      <BaseMenu.RadioItem\n        ref={ref}\n        value={value}\n        closeOnClick={closeOnClick}\n        data-slot=\"menu-radio-item\"\n        className={cn(parts.item(), className)}\n        {...props}\n      >\n        {/* The slot is always there so labels align whether or not they are\n            chosen; only the mark inside it mounts and unmounts. */}\n        <span aria-hidden=\"true\" className={parts.indicator()}>\n          <BaseMenu.RadioItemIndicator data-slot=\"menu-radio-indicator\">\n            <Check size={14} strokeWidth={3} />\n          </BaseMenu.RadioItemIndicator>\n        </span>\n        {children}\n      </BaseMenu.RadioItem>\n    );\n  },\n);\n\nexport interface MenuSeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {\n  /** Merged into the rule's classes. */\n  className?: string;\n}\n\n/**\n * A rule between groups of items — before the destructive action, or between\n * actions and settings. Announced as a separator; never a keyboard stop.\n */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(\n  function MenuSeparator({ className, ...props }, ref) {\n    const parts = floatingParts();\n    return (\n      <BaseMenu.Separator\n        ref={ref}\n        data-slot=\"menu-separator\"\n        className={cn(parts.separator(), className)}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":"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","names":["Menu","MenuItem","MenuRadioGroup","MenuRadioItem","MenuSeparator"]}

package/dist/components/MetadataGrid.js

@@ -0,0 +1,184 @@
+// src/components/MetadataGrid.tsx
+import { forwardRef } from "react";
+import { cn } from "../lib/recipe.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MetadataGrid = forwardRef(
+  function MetadataGrid2({
+    published,
+    readTime,
+    series,
+    tags,
+    items,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "metadata-grid",
+        className: cn("@container", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 @md:grid-cols-4 border-2 border-edge-strong bg-surface-base font-mono text-xs text-content-primary divide-y-2 @md:divide-y-0 @md:divide-x-2 divide-edge-strong [&>*:nth-child(even)]:border-l-2 [&>*:nth-child(even)]:border-edge-strong @md:[&>*:nth-child(even)]:border-l-0 shadow-hard-sm", children: items ? items.map((item, idx) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "metadata-grid-cell",
+            className: "p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "data-slot": "metadata-grid-label",
+                  className: "text-[10px] font-black uppercase text-content-muted tracking-wide mb-1",
+                  children: [
+                    "[\xA0",
+                    item.label,
+                    "\xA0]"
+                  ]
+                }
+              ),
+              item.href ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: item.href,
+                  className: "text-xs font-bold text-accent-secondary hover:underline truncate",
+                  children: item.value
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-content-primary tracking-wide", children: item.value })
+            ]
+          },
+          `grid-custom-${idx}`
+        )) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "metadata-grid-cell",
+              className: "p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "metadata-grid-label",
+                    className: "text-[10px] font-black uppercase text-content-muted tracking-wide mb-1",
+                    children: "[\xA0PUBLISHED\xA0]"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "metadata-grid-value",
+                    className: "text-xs font-bold text-content-primary tracking-wide",
+                    children: published ?? "\u2014"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "metadata-grid-cell",
+              className: "p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "metadata-grid-label",
+                    className: "text-[10px] font-black uppercase text-content-muted tracking-wide mb-1",
+                    children: "[\xA0READ TIME\xA0]"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "metadata-grid-value",
+                    className: "text-xs font-bold text-accent-primary tracking-wide",
+                    children: readTime ?? "\u2014"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "metadata-grid-cell",
+              className: "p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "metadata-grid-label",
+                    className: "text-[10px] font-black uppercase text-content-muted tracking-wide mb-1",
+                    children: "[\xA0SERIES TRACK\xA0]"
+                  }
+                ),
+                series ? series.href ? /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: series.href,
+                    className: "text-xs font-bold text-accent-secondary hover:underline break-words",
+                    title: series.name,
+                    children: [
+                      series.name,
+                      series.part !== void 0 && ` (${series.part}/${series.totalParts ?? "?"})`
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "text-xs font-bold text-accent-secondary break-words",
+                    title: series.name,
+                    children: [
+                      series.name,
+                      series.part !== void 0 && ` (${series.part}/${series.totalParts ?? "?"})`
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-content-muted", children: "STANDALONE" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "metadata-grid-cell",
+              className: "p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "metadata-grid-label",
+                    className: "text-[10px] font-black uppercase text-content-muted tracking-wide mb-1",
+                    children: "[\xA0TOPICS\xA0]"
+                  }
+                ),
+                tags && tags.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5 mt-0.5", children: [
+                  tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "px-1.5 py-0.5 text-[10px] font-bold bg-surface-sunken text-content-secondary border border-edge-subtle hover:border-accent-primary hover:text-accent-primary transition-colors",
+                      children: [
+                        "#",
+                        tag.toUpperCase()
+                      ]
+                    },
+                    tag
+                  )),
+                  tags.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-bold text-content-muted self-center", children: [
+                    "+",
+                    tags.length - 3
+                  ] })
+                ] }) : /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-content-muted", children: "\u2014" })
+              ]
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+MetadataGrid.displayName = "MetadataGrid";
+export {
+  MetadataGrid
+};
+//# sourceMappingURL=MetadataGrid.js.map

package/dist/components/MetadataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MetadataGrid.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../lib/recipe';\n\nexport interface MetadataGridSeries {\n  /** Series title or name. */\n  name: string;\n  /** Current part index (e.g. 2). */\n  part?: number;\n  /** Total parts in the series (e.g. 5). */\n  totalParts?: number;\n  /** Optional destination link for the series catalog. */\n  href?: string;\n}\n\nexport interface MetadataGridCustomItem {\n  /** Column category label (e.g. \"STATUS\", \"AUTHOR\"). */\n  label: string;\n  /** Primary cell content. */\n  value: ReactNode;\n  /** Optional link destination for the value. */\n  href?: string;\n}\n\nexport interface MetadataGridProps extends HTMLAttributes<HTMLDivElement> {\n  /** Publication date string (e.g. \"2026-09-14\" or \"September 14, 2026\"). */\n  published?: string;\n  /** Estimated reading time or word count (e.g. \"12 MIN READ\" or \"~3,400 WORDS\"). */\n  readTime?: string;\n  /** Optional series context (e.g. { name: \"DISTRIBUTED // PART 02\", part: 2, totalParts: 5 }). */\n  series?: MetadataGridSeries;\n  /** List of topic or technology tags. */\n  tags?: string[];\n  /** Arbitrary custom cells to override or augment standard editorial cells. */\n  items?: MetadataGridCustomItem[];\n}\n\n/**\n * High-density 4-column brutalist metadata grid.\n *\n * Formats frontmatter, series hierarchy, and article taxonomy into a structured\n * key/value matrix. Features hard cell borders, monospace category headers, and\n * responsive 2-to-4 column reflow.\n *\n * @example\n * ```tsx\n * <MetadataGrid\n *   published=\"SEPTEMBER 16, 2026\"\n *   readTime=\"14 MIN READ\"\n *   series={{ name: \"DISTRIBUTED SYSTEMS\", part: 2, totalParts: 4 }}\n *   tags={[\"rust\", \"consensus\", \"raft\"]}\n * />\n * ```\n */\nexport const MetadataGrid = forwardRef<HTMLDivElement, MetadataGridProps>(\n  function MetadataGrid(\n    {\n      published,\n      readTime,\n      series,\n      tags,\n      items,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"metadata-grid\"\n        className={cn('@container', className)}\n        {...props}\n      >\n        <div className=\"grid grid-cols-2 @md:grid-cols-4 border-2 border-edge-strong bg-surface-base font-mono text-xs text-content-primary divide-y-2 @md:divide-y-0 @md:divide-x-2 divide-edge-strong [&>*:nth-child(even)]:border-l-2 [&>*:nth-child(even)]:border-edge-strong @md:[&>*:nth-child(even)]:border-l-0 shadow-hard-sm\">\n        {items ? (\n          items.map((item, idx) => (\n            <div\n              key={`grid-custom-${idx}`}\n              data-slot=\"metadata-grid-cell\"\n              className=\"p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors\"\n            >\n              <span\n                data-slot=\"metadata-grid-label\"\n                className=\"text-[10px] font-black uppercase text-content-muted tracking-wide mb-1\"\n              >\n                [&nbsp;{item.label}&nbsp;]\n              </span>\n              {item.href ? (\n                <a\n                  href={item.href}\n                  className=\"text-xs font-bold text-accent-secondary hover:underline truncate\"\n                >\n                  {item.value}\n                </a>\n              ) : (\n                <span className=\"text-xs font-bold text-content-primary tracking-wide\">\n                  {item.value}\n                </span>\n              )}\n            </div>\n          ))\n        ) : (\n          <>\n            {/* 1. PUBLISHED */}\n            <div\n              data-slot=\"metadata-grid-cell\"\n              className=\"p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors\"\n            >\n              <span\n                data-slot=\"metadata-grid-label\"\n                className=\"text-[10px] font-black uppercase text-content-muted tracking-wide mb-1\"\n              >\n                [&nbsp;PUBLISHED&nbsp;]\n              </span>\n              <span\n                data-slot=\"metadata-grid-value\"\n                className=\"text-xs font-bold text-content-primary tracking-wide\"\n              >\n                {published ?? '—'}\n              </span>\n            </div>\n\n            {/* 2. READ TIME */}\n            <div\n              data-slot=\"metadata-grid-cell\"\n              className=\"p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors\"\n            >\n              <span\n                data-slot=\"metadata-grid-label\"\n                className=\"text-[10px] font-black uppercase text-content-muted tracking-wide mb-1\"\n              >\n                [&nbsp;READ TIME&nbsp;]\n              </span>\n              <span\n                data-slot=\"metadata-grid-value\"\n                className=\"text-xs font-bold text-accent-primary tracking-wide\"\n              >\n                {readTime ?? '—'}\n              </span>\n            </div>\n\n            {/* 3. SERIES */}\n            <div\n              data-slot=\"metadata-grid-cell\"\n              className=\"p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors\"\n            >\n              <span\n                data-slot=\"metadata-grid-label\"\n                className=\"text-[10px] font-black uppercase text-content-muted tracking-wide mb-1\"\n              >\n                [&nbsp;SERIES TRACK&nbsp;]\n              </span>\n              {series ? (\n                series.href ? (\n                  <a\n                    href={series.href}\n                    className=\"text-xs font-bold text-accent-secondary hover:underline break-words\"\n                    title={series.name}\n                  >\n                    {series.name}\n                    {series.part !== undefined &&\n                      ` (${series.part}/${series.totalParts ?? '?'})`}\n                  </a>\n                ) : (\n                  <span\n                    className=\"text-xs font-bold text-accent-secondary break-words\"\n                    title={series.name}\n                  >\n                    {series.name}\n                    {series.part !== undefined &&\n                      ` (${series.part}/${series.totalParts ?? '?'})`}\n                  </span>\n                )\n              ) : (\n                <span className=\"text-xs font-bold text-content-muted\">\n                  STANDALONE\n                </span>\n              )}\n            </div>\n\n            {/* 4. TAGS */}\n            <div\n              data-slot=\"metadata-grid-cell\"\n              className=\"p-3.5 flex flex-col justify-between hover:bg-surface-raised transition-colors\"\n            >\n              <span\n                data-slot=\"metadata-grid-label\"\n                className=\"text-[10px] font-black uppercase text-content-muted tracking-wide mb-1\"\n              >\n                [&nbsp;TOPICS&nbsp;]\n              </span>\n              {tags && tags.length > 0 ? (\n                <div className=\"flex flex-wrap gap-1.5 mt-0.5\">\n                  {tags.slice(0, 3).map((tag) => (\n                    <span\n                      key={tag}\n                      className=\"px-1.5 py-0.5 text-[10px] font-bold bg-surface-sunken text-content-secondary border border-edge-subtle hover:border-accent-primary hover:text-accent-primary transition-colors\"\n                    >\n                      #{tag.toUpperCase()}\n                    </span>\n                  ))}\n                  {tags.length > 3 && (\n                    <span className=\"text-[10px] font-bold text-content-muted self-center\">\n                      +{tags.length - 3}\n                    </span>\n                  )}\n                </div>\n              ) : (\n                <span className=\"text-xs font-bold text-content-muted\">—</span>\n              )}\n            </div>\n          </>\n        )}\n        </div>\n      </div>\n    );\n  },\n);\n\nMetadataGrid.displayName = 'MetadataGrid';\n"],"mappings":"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","names":["MetadataGrid"]}

package/dist/components/MobileNav.js

@@ -0,0 +1,120 @@
+"use client";
+
+// src/components/MobileNav.tsx
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { Menu as MenuIcon } from "lucide-react";
+import { cn } from "../lib/recipe.js";
+import { Button } from "./Button.js";
+import { Drawer } from "./Drawer.js";
+import { SiteNav } from "./SiteNav.js";
+import { COLLAPSE_QUERY, SiteHeaderCollapseContext, SiteNavContext } from "./siteNavContext.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function canMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+function useMatches(query) {
+  const subscribe = useCallback(
+    (onChange) => {
+      if (!query || !canMatchMedia()) return () => {
+      };
+      const list = window.matchMedia(query);
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => Boolean(query) && canMatchMedia() && window.matchMedia(query).matches,
+    () => false
+  );
+}
+var MobileNav = forwardRef(function MobileNav2({
+  label,
+  children,
+  title = "Menu",
+  triggerLabel = "MENU",
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  footer,
+  className,
+  ...props
+}, ref) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const isOpen = open ?? uncontrolled;
+  const collapseAt = useContext(SiteHeaderCollapseContext);
+  const collapseQuery = collapseAt ? COLLAPSE_QUERY[collapseAt] : void 0;
+  const collapsed = useMatches(collapseQuery);
+  const drawerOpen = isOpen && !collapsed;
+  const onChange = useRef(onOpenChange);
+  useEffect(() => {
+    onChange.current = onOpenChange;
+  });
+  const controlled = open !== void 0;
+  const setOpen = useCallback(
+    (next) => {
+      if (!controlled) setUncontrolled(next);
+      onChange.current?.(next);
+    },
+    [controlled]
+  );
+  useEffect(() => {
+    if (!isOpen || !collapseQuery || !canMatchMedia()) return void 0;
+    const list = window.matchMedia(collapseQuery);
+    const onWiden = () => {
+      if (list.matches) setOpen(false);
+    };
+    list.addEventListener("change", onWiden);
+    return () => list.removeEventListener("change", onWiden);
+  }, [isOpen, collapseQuery, setOpen]);
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const context = useMemo(
+    () => ({ orientation: "vertical", inMenu: false, onNavigate: close }),
+    [close]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        "data-slot": "mobile-nav-trigger",
+        "aria-haspopup": "dialog",
+        "aria-expanded": drawerOpen,
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsx(MenuIcon, { size: 16, strokeWidth: 3, "aria-hidden": "true" }),
+          triggerLabel
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        ref,
+        isOpen: drawerOpen,
+        onClose: close,
+        placement: "left",
+        title,
+        footer,
+        ...props,
+        className: cn(className),
+        children: /* @__PURE__ */ jsx(SiteNavContext.Provider, { value: context, children: /* @__PURE__ */ jsx(SiteNav, { label, orientation: "vertical", children }) })
+      }
+    )
+  ] });
+});
+export {
+  MobileNav
+};
+//# sourceMappingURL=MobileNav.js.map

package/dist/components/MobileNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MobileNav.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Menu as MenuIcon } from 'lucide-react';\nimport { cn } from '../lib/recipe';\nimport { Button } from './Button';\nimport { Drawer } from './Drawer';\nimport { SiteNav } from './SiteNav';\nimport { COLLAPSE_QUERY, SiteHeaderCollapseContext, SiteNavContext } from './siteNavContext';\n\nfunction canMatchMedia(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n}\n\n// Whether the viewport is at or past `query`; false with no query, on the\n// server, and where there is no `matchMedia`.\nfunction useMatches(query: string | undefined): boolean {\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      if (!query || !canMatchMedia()) return () => {};\n      const list = window.matchMedia(query);\n      list.addEventListener('change', onChange);\n      return () => list.removeEventListener('change', onChange);\n    },\n    [query],\n  );\n  return useSyncExternalStore(\n    subscribe,\n    () => Boolean(query) && canMatchMedia() && window.matchMedia(query as string).matches,\n    () => false,\n  );\n}\n\nexport interface MobileNavProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title' | 'className'> {\n  /**\n   * The `<nav>` landmark's accessible name inside the drawer. Give it the same\n   * name as the desktop `SiteNav` it stands in for: at any one width only one\n   * of the two is rendered, and it is the same navigation.\n   */\n  label: string;\n  /** `SiteNavItem`s — normally the very same ones the desktop `SiteNav` gets. */\n  children: ReactNode;\n  /** The drawer's title, and so its accessible name. `Menu` by default. */\n  title?: string;\n  /** The trigger button's visible label, and so its accessible name. `MENU` by default. */\n  triggerLabel?: string;\n  /** Controlled open state. Leave unset and the component manages its own. */\n  open?: boolean;\n  /** Open on first render, uncontrolled — for a story or a walkthrough. */\n  defaultOpen?: boolean;\n  /** Called with the next open state, whatever caused the change. */\n  onOpenChange?: (open: boolean) => void;\n  /** Replaces the drawer's default close button — a theme control, a CTA. */\n  footer?: ReactNode;\n  /** Merged into the drawer panel's classes. */\n  className?: string;\n}\n\n/**\n * The narrow-viewport navigation: a trigger button that opens the site's nav\n * in a {@link Drawer} from the left.\n *\n * It is `Drawer`, not a second off-canvas implementation. Focus moves into the\n * panel on open and back to the trigger on close; Escape, the backdrop and the\n * close control dismiss it; it sits on the dialog stack, so a group's `Menu`\n * opened inside it closes first on Escape; the page behind is scroll-locked\n * and hidden from assistive technology. All of that is inherited, and none of\n * it is written here.\n *\n * What is its own is small: the trigger, which says whether it is expanded;\n * the vertical `SiteNav` inside the panel; and closing the drawer when an item\n * is followed, because under a client-side router following a link does not\n * unload the page the drawer is open over.\n *\n * {@link SiteHeader} shows it below its `collapseAt` breakpoint and hides it\n * above, where the desktop `SiteNav` takes over. Like `SiteNav` it carries no\n * items and no current-page logic of its own.\n *\n * Forwards its ref, and any other props, to the drawer panel.\n *\n * @example\n * ```tsx\n * <MobileNav label=\"Primary\">\n *   <SiteNavItem href=\"/writing\">Writing</SiteNavItem>\n *   <SiteNavItem href=\"/projects\">Projects</SiteNavItem>\n * </MobileNav>\n * ```\n */\nexport const MobileNav = forwardRef<HTMLDivElement, MobileNavProps>(function MobileNav(\n  {\n    label,\n    children,\n    title = 'Menu',\n    triggerLabel = 'MENU',\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    footer,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const isOpen = open ?? uncontrolled;\n  // Inside a `SiteHeader`, past its `collapseAt` the trigger is hidden by CSS\n  // but the portalled drawer is not, so the drawer is kept shut there and an\n  // open one is closed as the viewport widens past it.\n  const collapseAt = useContext(SiteHeaderCollapseContext);\n  const collapseQuery = collapseAt ? COLLAPSE_QUERY[collapseAt] : undefined;\n  const collapsed = useMatches(collapseQuery);\n  const drawerOpen = isOpen && !collapsed;\n\n  // The latest callback, read at call time, so `setOpen` keeps one identity\n  // and the effect below does not re-report a close on every render.\n  const onChange = useRef(onOpenChange);\n  useEffect(() => {\n    onChange.current = onOpenChange;\n  });\n  const controlled = open !== undefined;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!controlled) setUncontrolled(next);\n      onChange.current?.(next);\n    },\n    [controlled],\n  );\n\n  // Closed from the media query's own change event rather than from a render,\n  // so a widening reports one close to the owner.\n  useEffect(() => {\n    if (!isOpen || !collapseQuery || !canMatchMedia()) return undefined;\n    const list = window.matchMedia(collapseQuery);\n    const onWiden = () => {\n      if (list.matches) setOpen(false);\n    };\n    list.addEventListener('change', onWiden);\n    return () => list.removeEventListener('change', onWiden);\n  }, [isOpen, collapseQuery, setOpen]);\n\n  const close = useCallback(() => setOpen(false), [setOpen]);\n  const context = useMemo(\n    () => ({ orientation: 'vertical' as const, inMenu: false, onNavigate: close }),\n    [close],\n  );\n\n  return (\n    <>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        data-slot=\"mobile-nav-trigger\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={drawerOpen}\n        onClick={() => setOpen(true)}\n      >\n        <MenuIcon size={16} strokeWidth={3} aria-hidden=\"true\" />\n        {triggerLabel}\n      </Button>\n      <Drawer\n        ref={ref}\n        isOpen={drawerOpen}\n        onClose={close}\n        placement=\"left\"\n        title={title}\n        footer={footer}\n        {...props}\n        className={cn(className)}\n      >\n        <SiteNavContext.Provider value={context}>\n          <SiteNav label={label} orientation=\"vertical\">\n            {children}\n          </SiteNav>\n        </SiteNavContext.Provider>\n      </Drawer>\n    </>\n  );\n});\n"],"mappings":"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","names":["MobileNav"]}

package/dist/components/Modal.js

@@ -0,0 +1,79 @@
+"use client";
+
+// src/components/Modal.tsx
+import { forwardRef } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+import { cn } from "../lib/recipe.js";
+import { usePortalThemeAttribute } from "./portalTheme.js";
+import { dialogSurface } from "./dialogSurface.js";
+import { usePopupRef } from "./dialogPopupRef.js";
+import { Button } from "./Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Modal = forwardRef(function Modal2({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  closeOnBackdropClick = true,
+  className,
+  ...props
+}, ref) {
+  const slots = dialogSurface();
+  const [popup, attachPopup] = usePopupRef(ref);
+  const portalTheme = usePortalThemeAttribute();
+  return /* @__PURE__ */ jsx(
+    Dialog.Root,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      disablePointerDismissal: !closeOnBackdropClick,
+      children: /* @__PURE__ */ jsxs(Dialog.Portal, { ...portalTheme, children: [
+        /* @__PURE__ */ jsx(Dialog.Backdrop, { "data-slot": "modal-backdrop", className: slots.backdrop() }),
+        /* @__PURE__ */ jsx(Dialog.Viewport, { "data-slot": "modal-viewport", className: slots.viewport(), children: /* @__PURE__ */ jsxs(
+          Dialog.Popup,
+          {
+            ref: attachPopup,
+            initialFocus: () => popup.current,
+            "data-slot": "modal",
+            className: cn(slots.popup(), className),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxs("div", { "data-slot": "modal-header", className: slots.header(), children: [
+                /* @__PURE__ */ jsx(
+                  Dialog.Title,
+                  {
+                    "data-slot": "modal-title",
+                    className: slots.title(),
+                    render: /* @__PURE__ */ jsxs("h3", { children: [
+                      "[ ",
+                      title,
+                      " ]"
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Dialog.Close,
+                  {
+                    "data-slot": "modal-close",
+                    className: slots.close(),
+                    "aria-label": "Close dialog",
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { "data-slot": "modal-body", className: slots.body(), children }),
+              /* @__PURE__ */ jsx("div", { "data-slot": "modal-footer", className: slots.footer(), children: footer || /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", bracketed: true, size: "sm", children: "CLOSE" }) })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+});
+export {
+  Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Dialog } from '@base-ui/react/dialog';\nimport { cn } from '../lib/recipe';\nimport { usePortalThemeAttribute } from './portalTheme';\nimport { dialogSurface } from './dialogSurface';\nimport { usePopupRef } from './dialogPopupRef';\nimport { Button } from './Button';\n\nexport interface ModalProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'className'> {\n  isOpen: boolean;\n  onClose: () => void;\n  title: string;\n  children: ReactNode;\n  footer?: ReactNode;\n  /**\n   * Close when the backdrop is clicked. On for the usual case; turn it off for\n   * a dialog holding unsaved input, where a stray click should not discard it.\n   */\n  closeOnBackdropClick?: boolean;\n  className?: string;\n}\n\n/**\n * A modal dialog, on Base UI's `dialog`.\n *\n * \"Modal\" is a behavioural claim, not a visual one: while it is open, the rest\n * of the page is inert. This component used to make that claim and hand-roll\n * every part of it — a capture-phase `document` listener for Escape, a\n * first/last focus trap, `body.style.overflow`, and focus return through a ref\n * captured at open time. All of it is deleted. What replaced it is not a\n * smaller version of the same code; it is the primitive that owns the problem.\n *\n * Three defects went with the deletion, each of which the hand-rolled version\n * had and none of which was cheap to fix in place:\n *\n *   1. **No dialog stack.** Two open dialogs both listened on `document` in\n *      the capture phase, so Escape closed both. Base UI keeps a stack, and\n *      Escape now closes the topmost surface only — the invariant every\n *      overlay added after this one inherits.\n *   2. **The background was never hidden from assistive technology.** Nothing\n *      set `inert` or `aria-hidden`, so a screen reader's virtual cursor\n *      walked the page behind the dialog even though Tab could not. Base UI\n *      marks every sibling of the portal `aria-hidden` while the dialog is\n *      open — `aria-hidden`, not `inert`, which is worth knowing when reading\n *      the DOM: the outside content stays in the tab order's way only as far\n *      as the focus guards allow, and the guards are what stop it.\n *   3. **The focus trap read the DOM once, by first and last.** Content that\n *      changed while open — a list that filtered, a button that became\n *      disabled — left the boundary pointing at a node that was no longer\n *      focusable.\n *\n * ## What is deliberately kept\n *\n * `ModalProps` is unchanged, so no consumer moves. `isOpen`/`onClose` stay the\n * API rather than becoming Base UI's `open`/`onOpenChange`: this is a\n * controlled dialog in both consumers, and a compound `Dialog.Root`/`Trigger`\n * composition would be a breaking change bought for nothing they need.\n *\n * Focus goes to the **popup**, not to the first tabbable element inside it.\n * Base UI's default would land on the close button, which a screen reader\n * announces as \"Close dialog, button\" — the dialog's own title never read.\n * Pointing `initialFocus` at the popup restores what the hand-rolled\n * `tabIndex={-1}` container was for.\n */\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  {\n    isOpen,\n    onClose,\n    title,\n    children,\n    footer,\n    closeOnBackdropClick = true,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const slots = dialogSurface();\n  const [popup, attachPopup] = usePopupRef(ref);\n\n  const portalTheme = usePortalThemeAttribute();\n  return (\n    <Dialog.Root\n      open={isOpen}\n      onOpenChange={(open) => {\n        if (!open) onClose();\n      }}\n      // Base UI's own name for \"a click outside does not dismiss this\". The\n      // prop is inverted because the published API asks the question the other\n      // way round, and the published API is the one that stays.\n      disablePointerDismissal={!closeOnBackdropClick}\n    >\n      <Dialog.Portal {...portalTheme}>\n        <Dialog.Backdrop data-slot=\"modal-backdrop\" className={slots.backdrop()} />\n        <Dialog.Viewport data-slot=\"modal-viewport\" className={slots.viewport()}>\n          <Dialog.Popup\n            ref={attachPopup}\n            // Base UI's default is the first tabbable element, which here is\n            // the close button. Pointing at the popup itself is what the\n            // hand-rolled `tabIndex={-1}` container did, and it is why the\n            // dialog's own title is what gets announced.\n            // The function form, not the ref form: Base UI reads a `RefObject`\n            // early enough that the popup is sometimes still `null`, and it\n            // then silently falls back to the first tabbable element. Reading\n            // `.current` at focus time is the same intent without the race.\n            initialFocus={() => popup.current}\n            data-slot=\"modal\"\n            // `class`, not an appended string: a caller's `max-w-3xl` would\n            // otherwise emit alongside `max-w-lg` and leave CSS source order to\n            // pick one. A dialog is sized by its caller often enough that this\n            // is the prop most likely to be reached for.\n            className={cn(slots.popup(), className)}\n            {...props}\n          >\n            <div data-slot=\"modal-header\" className={slots.header()}>\n              {/*\n                * The heading text lives on the render element rather than on\n                * `Title`: Base UI keeps the element's own children, and the\n                * a11y lint rule can only see content it can read literally.\n                */}\n              <Dialog.Title\n                data-slot=\"modal-title\"\n                className={slots.title()}\n                render={<h3>[ {title} ]</h3>}\n              />\n              <Dialog.Close\n                data-slot=\"modal-close\"\n                className={slots.close()}\n                aria-label=\"Close dialog\"\n              >\n                &times;\n              </Dialog.Close>\n            </div>\n\n            <div data-slot=\"modal-body\" className={slots.body()}>\n              {children}\n            </div>\n\n            <div data-slot=\"modal-footer\" className={slots.footer()}>\n              {footer || (\n                <Button onClick={onClose} variant=\"tertiary\" bracketed size=\"sm\">\n                  CLOSE\n                </Button>\n              )}\n            </div>\n          </Dialog.Popup>\n        </Dialog.Viewport>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAE3B,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAwFf,cA8BgB,YA9BhB;AA7BD,IAAM,QAAQ,WAAuC,SAASA,OACnE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,QAAQ,cAAc;AAC5B,QAAM,CAAC,OAAO,WAAW,IAAI,YAAY,GAAG;AAE5C,QAAM,cAAc,wBAAwB;AAC5C,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,SAAS;AACtB,YAAI,CAAC,KAAM,SAAQ;AAAA,MACrB;AAAA,MAIA,yBAAyB,CAAC;AAAA,MAE1B,+BAAC,OAAO,QAAP,EAAe,GAAG,aACjB;AAAA,4BAAC,OAAO,UAAP,EAAgB,aAAU,kBAAiB,WAAW,MAAM,SAAS,GAAG;AAAA,QACzE,oBAAC,OAAO,UAAP,EAAgB,aAAU,kBAAiB,WAAW,MAAM,SAAS,GACpE;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,KAAK;AAAA,YASL,cAAc,MAAM,MAAM;AAAA,YAC1B,aAAU;AAAA,YAKV,WAAW,GAAG,MAAM,MAAM,GAAG,SAAS;AAAA,YACrC,GAAG;AAAA,YAEJ;AAAA,mCAAC,SAAI,aAAU,gBAAe,WAAW,MAAM,OAAO,GAMpD;AAAA;AAAA,kBAAC,OAAO;AAAA,kBAAP;AAAA,oBACC,aAAU;AAAA,oBACV,WAAW,MAAM,MAAM;AAAA,oBACvB,QAAQ,qBAAC,QAAG;AAAA;AAAA,sBAAG;AAAA,sBAAM;AAAA,uBAAE;AAAA;AAAA,gBACzB;AAAA,gBACA;AAAA,kBAAC,OAAO;AAAA,kBAAP;AAAA,oBACC,aAAU;AAAA,oBACV,WAAW,MAAM,MAAM;AAAA,oBACvB,cAAW;AAAA,oBACZ;AAAA;AAAA,gBAED;AAAA,iBACF;AAAA,cAEA,oBAAC,SAAI,aAAU,cAAa,WAAW,MAAM,KAAK,GAC/C,UACH;AAAA,cAEA,oBAAC,SAAI,aAAU,gBAAe,WAAW,MAAM,OAAO,GACnD,oBACC,oBAAC,UAAO,SAAS,SAAS,SAAQ,YAAW,WAAS,MAAC,MAAK,MAAK,mBAEjE,GAEJ;AAAA;AAAA;AAAA,QACF,GACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Modal"]}

package/dist/components/NerdIcon.js

@@ -0,0 +1,177 @@
+// src/components/NerdIcon.tsx
+import { recipe } from "../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NERD_GLYPHS = {
+  // Navigation & Sorting
+  "sort": "\uF0DC",
+  // 
+  "sort-asc": "\uF0DE",
+  // 
+  "sort-desc": "\uF0DD",
+  // 
+  "chevron-right": "\uF054",
+  // 
+  "chevron-left": "\uF053",
+  // 
+  "chevron-up": "\uF077",
+  // 
+  "chevron-down": "\uF078",
+  // 
+  "arrow-right": "\uF061",
+  // 
+  "arrow-left": "\uF060",
+  // 
+  "arrow-up": "\uF062",
+  // 
+  "arrow-down": "\uF063",
+  // 
+  "expand": "\uF065",
+  // 
+  "compress": "\uF066",
+  // 
+  // Git & DevOps
+  "git-branch": "\uF126",
+  // 
+  "git-commit": "\uF417",
+  // 
+  "git-merge": "\uF419",
+  // 
+  "git-pull-request": "\uF407",
+  // 
+  "docker": "\uF308",
+  // 
+  "kubernetes": "\u{F10FE}",
+  "aws": "\u{F0E0F}",
+  "linux": "\uF17C",
+  // 
+  "apple": "\uF179",
+  // 
+  "windows": "\uF17A",
+  // 
+  "database": "\uF1C0",
+  // 
+  "server": "\uF233",
+  // 
+  "terminal": "\uF120",
+  // 
+  "code": "\uF121",
+  // 
+  "bug": "\uF188",
+  // 
+  "cpu": "\uF4BC",
+  "ram": "\uEFC5",
+  // System & Chrome Actions
+  "search": "\uF002",
+  // 
+  "settings": "\uF013",
+  // 
+  "check": "\uF00C",
+  // 
+  "close": "\uF00D",
+  // 
+  "alert": "\uF071",
+  // 
+  "info": "\uF05A",
+  // 
+  "help": "\uF059",
+  // 
+  "refresh": "\uF021",
+  // 
+  "sync": "\uF46A",
+  // 
+  "copy": "\uF0C5",
+  // 
+  "external-link": "\uF08E",
+  // 
+  "trash": "\uF1F8",
+  // 
+  "edit": "\uF044",
+  // 
+  "plus": "\uF067",
+  // 
+  "minus": "\uF068",
+  // 
+  "filter": "\uF0B0",
+  // 
+  "folder": "\uF07B",
+  // 
+  "folder-open": "\uF07C",
+  // 📂
+  "file": "\uF15B",
+  // 
+  "file-code": "\uF1C9",
+  // 
+  "lock": "\uF023",
+  // 
+  "unlock": "\uF09C",
+  // 
+  "link": "\uF0C1",
+  // 
+  "play": "\uF04B",
+  // 
+  "pause": "\uF04C",
+  // 
+  "stop": "\uF04D"
+  // 
+};
+var iconStyles = recipe({
+  slots: {
+    root: "inline-flex items-center font-mono select-none",
+    symbol: "font-mono text-center inline-block leading-none"
+  },
+  variants: {
+    accent: {
+      primary: { symbol: "text-accent-primary" },
+      secondary: { symbol: "text-accent-secondary" },
+      tertiary: { symbol: "text-accent-tertiary" },
+      success: { symbol: "text-intent-success" },
+      warning: { symbol: "text-intent-warning" },
+      danger: { symbol: "text-intent-danger" },
+      info: { symbol: "text-intent-info" },
+      muted: { symbol: "text-content-muted" }
+    },
+    size: {
+      xs: { symbol: "text-[10px]" },
+      sm: { symbol: "text-xs" },
+      md: { symbol: "text-sm" },
+      lg: { symbol: "text-base" },
+      xl: { symbol: "text-lg" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function NerdIcon({
+  name,
+  accent,
+  size,
+  bracketed = false,
+  label,
+  className,
+  ...props
+}) {
+  const glyph = NERD_GLYPHS[name] || "?";
+  const styles = iconStyles({ accent, size });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "nerd-icon",
+      className: styles.root({ class: className }),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": !label,
+      ...props,
+      children: [
+        bracketed && /* @__PURE__ */ jsx("span", { className: "text-content-muted font-bold mr-0.5", children: "[" }),
+        /* @__PURE__ */ jsx("span", { className: styles.symbol(), children: glyph }),
+        bracketed && /* @__PURE__ */ jsx("span", { className: "text-content-muted font-bold ml-0.5", children: "]" })
+      ]
+    }
+  );
+}
+export {
+  NERD_GLYPHS,
+  NerdIcon
+};
+//# sourceMappingURL=NerdIcon.js.map