@misoto22/design 0.3.1 → 0.5.0

package/dist/components/Command/Command.js

@@ -13,7 +13,7 @@ function Command({
     CommandPrimitive,
     {
       className: cn(
-        "flex w-full flex-col overflow-hidden rounded-(--radius) border border-(--rule-2) bg-(--paper)",
+        "flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur",
         className
       ),
       ...props
@@ -24,13 +24,13 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 border-b border-(--rule) px-3.5", children: [
-    /* @__PURE__ */ jsx(Search, { size: 16, strokeWidth: 1.5, "aria-hidden": true, className: "shrink-0 text-(--ink-3-aa)" }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-(--rule) px-4", children: [
+    /* @__PURE__ */ jsx(Search, { size: 18, strokeWidth: 1.5, "aria-hidden": true, className: "shrink-0 text-(--ink-3-aa)" }),
     /* @__PURE__ */ jsx(
       CommandPrimitive.Input,
       {
         className: cn(
-          "h-11 w-full bg-transparent text-sm text-(--ink) outline-none placeholder:text-(--ink-3-aa)",
+          "h-13 w-full bg-transparent text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)",
           className
         ),
         ...props
@@ -111,7 +111,7 @@ function CommandItem({ shortcut, icon, meta, className, children, ...props }) {
     CommandPrimitive.Item,
     {
       className: cn(
-        "flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm text-(--ink-2) outline-none transition-colors duration-(--duration-fast)",
+        "flex cursor-pointer items-center gap-3 rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)",
         // The highlighted row is a chosen state, and law 7 says a chosen state
         // reads --accent. The leading rule gives it an edge the eye catches
         // while scrolling, which a fill alone does not.
@@ -137,12 +137,12 @@ function CommandDialog({ open, onOpenChange, label, children }) {
       title: label,
       hideTitle: true,
       showClose: false,
-      className: "top-[12vh] w-[min(92vw,40rem)] translate-y-0 overflow-hidden p-0",
+      className: "top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]",
       children: /* @__PURE__ */ jsx(
         Command,
         {
           label,
-          className: "rounded-none border-0 [&_[cmdk-list]]:max-h-[22rem] [&_[cmdk-list]]:scroll-hairline",
+          className: "rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline",
           children
         }
       )

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius) border border-(--rule-2) bg-(--paper)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-2.5 border-b border-(--rule) px-3.5\">\n      <Search size={16} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-11 w-full bg-transparent text-sm text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Pass the icon element, sized 16.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {icon}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        className=\"top-[12vh] w-[min(92vw,40rem)] translate-y-0 overflow-hidden p-0\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[22rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":";AAmCI,cAgBA,YAhBA;AAjCJ,SAAS,WAAW,wBAAwB;AAC5C,SAAS,cAAc;AAEvB,SAAS,UAAU;AACnB,SAAS,QAAQ,qBAAqB;AACtC,SAAS,WAAW;AAuBb,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE,qBAAC,SAAI,WAAU,6DACb;AAAA,wBAAC,UAAO,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,WAAU,8BAA6B;AAAA,IACvF;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW,GAAG,8DAA8D,SAAS;AAAA,MACpF,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,aAAa,OAAsD;AACjF,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ;AAeO,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAA0B;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAUO,SAAS,YAAY,EAAE,MAAM,UAAU,WAAW,GAAG,MAAM,GAAqB;AACrF,SACE,qBAAC,UAAK,WAAW,GAAG,yDAAyD,SAAS,GAAI,GAAG,OAC1F;AAAA,SAAK,IAAI,CAAC,QACT,oBAAC,OAAe,iBAAN,GAAU,CACrB;AAAA,IACA;AAAA,KACH;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAWO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAoBO,SAAS,YAAY,EAAE,UAAU,MAAM,MAAM,WAAW,UAAU,GAAG,MAAM,GAAqB;AACrG,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBACC,oBAAC,UAAK,WAAU,4EACb,gBACH;AAAA,QAED;AAAA,QACA,QAAQ,oBAAC,UAAK,WAAU,4CAA4C,gBAAK;AAAA,QACzE,YAAY,oBAAC,OAAI,WAAW,GAAG,OAAO,KAAK,SAAS,GAAI,oBAAS;AAAA;AAAA;AAAA,EACpE;AAEJ;AAgBO,SAAS,cAAc,EAAE,MAAM,cAAc,OAAO,SAAS,GAAuB;AACzF,SACE,oBAAC,UAAO,MAAY,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAS;AAAA,MACT,WAAW;AAAA,MAIX,WAAU;AAAA,MAOV;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <Search size={18} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Pass the icon element, sized 16.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {icon}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className=\"top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":"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","names":[]}

package/dist/components/ContextMenu/ContextMenu.js

@@ -17,7 +17,7 @@ function ContextMenuContent({
       collisionPadding: 8,
       "data-m22-animated": true,
       className: cn(
-        "z-(--z-dropdown) min-w-44 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-1.5",
+        "z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur",
         "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
         className
       ),
@@ -36,7 +36,7 @@ function ContextMenuItem({
     ContextMenuPrimitive.Item,
     {
       className: cn(
-        "flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)",
+        "flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)",
         destructive ? "text-(--danger)" : "text-(--ink-2) data-[highlighted]:text-(--ink)",
         className
       ),

package/dist/components/ContextMenu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix ContextMenu root and trigger, as typed passthroughs. */\nexport const ContextMenu = ContextMenuPrimitive.Root\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\n/**\n * The menu a right-click opens.\n *\n * Never the only way to reach an action. A context menu is opened by a\n * secondary pointer button or a keyboard's own menu key, and a meaningful share\n * of readers have neither — a touch user, someone on a trackpad they have not\n * configured, anyone driving the page by keyboard alone. Whatever is in here\n * belongs somewhere reachable too: a row's overflow button, a toolbar.\n *\n * @example\n * <ContextMenu>\n *   <ContextMenuTrigger asChild><Card>Right-click me</Card></ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem icon={Copy}>Copy</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n */\nexport function ContextMenuContent({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  const container = useOverlayContainer()\n\n  return (\n    <ContextMenuPrimitive.Portal container={container ?? undefined}>\n      <ContextMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-1.5',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nexport interface ContextMenuItemProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Item> {\n  icon?: LucideIcon\n  destructive?: boolean\n}\n\n/** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */\nexport function ContextMenuItem({\n  icon: Icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {Icon && <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />}\n      {children}\n    </ContextMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between groups. */\nexport function ContextMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...rest} />\n  )\n}\n\n/** Mono eyebrow heading for a group. */\nexport function ContextMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Label>) {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default ContextMenu\n"],"mappings":";AAqCM,cA8BF,YA9BE;AAnCN,YAAY,0BAA0B;AAGtC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,cAAc,qBAAqB;AACzC,MAAM,qBAAqB,qBAAqB;AAmBhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,aAAa,QACnD;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AASO,SAAS,gBAAgB;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAAA,QAC3E;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE,oBAAC,qBAAqB,WAArB,EAA+B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAEjG;AAGO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix ContextMenu root and trigger, as typed passthroughs. */\nexport const ContextMenu = ContextMenuPrimitive.Root\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\n/**\n * The menu a right-click opens.\n *\n * Never the only way to reach an action. A context menu is opened by a\n * secondary pointer button or a keyboard's own menu key, and a meaningful share\n * of readers have neither — a touch user, someone on a trackpad they have not\n * configured, anyone driving the page by keyboard alone. Whatever is in here\n * belongs somewhere reachable too: a row's overflow button, a toolbar.\n *\n * @example\n * <ContextMenu>\n *   <ContextMenuTrigger asChild><Card>Right-click me</Card></ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem icon={Copy}>Copy</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n */\nexport function ContextMenuContent({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  const container = useOverlayContainer()\n\n  return (\n    <ContextMenuPrimitive.Portal container={container ?? undefined}>\n      <ContextMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nexport interface ContextMenuItemProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Item> {\n  icon?: LucideIcon\n  destructive?: boolean\n}\n\n/** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */\nexport function ContextMenuItem({\n  icon: Icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {Icon && <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />}\n      {children}\n    </ContextMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between groups. */\nexport function ContextMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...rest} />\n  )\n}\n\n/** Mono eyebrow heading for a group. */\nexport function ContextMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Label>) {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default ContextMenu\n"],"mappings":";AAqCM,cA8BF,YA9BE;AAnCN,YAAY,0BAA0B;AAGtC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,cAAc,qBAAqB;AACzC,MAAM,qBAAqB,qBAAqB;AAmBhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,aAAa,QACnD;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AASO,SAAS,gBAAgB;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAAA,QAC3E;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE,oBAAC,qBAAqB,WAArB,EAA+B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAEjG;AAGO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Diagram/Diagram.d.ts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+
+interface DiagramNode {
+    /** Only needed when an edge names this node. */
+    id?: string;
+    /** The node's name, set in the interface face. */
+    label: string;
+    /** What it is — one short line, a step back. */
+    note?: string;
+    /** The one node the diagram is about. At most one or two per diagram. */
+    accent?: boolean;
+    /** How this node's children are laid out. Defaults to a row. */
+    direction?: 'row' | 'column';
+    children?: DiagramNode[];
+    /** A line printed under the frame, outside it — what the box means. */
+    footnote?: string;
+}
+interface DiagramEdge {
+    from: string;
+    to: string;
+    label?: string;
+}
+interface DiagramSpec {
+    /** How the top-level nodes are laid out. Defaults to a row. */
+    direction?: 'row' | 'column';
+    nodes: DiagramNode[];
+    /** Arrows between adjacent top-level nodes, by id. */
+    edges?: DiagramEdge[];
+    /** The figure's caption. */
+    caption?: string;
+    /** Names the figure for assistive tech when the caption does not. */
+    label?: string;
+}
+interface DiagramProps {
+    spec: DiagramSpec;
+    className?: string;
+}
+/**
+ * A flow or architecture diagram, drawn out of the system's own parts.
+ *
+ * The alternative it replaces is a fenced block of box-drawing characters —
+ * `┌──────┬──────┐` — which is a picture rendered in a font chosen for code. It
+ * inherits the code block's frame and scrollbar, so a diagram reads as terminal
+ * output; it cannot wrap, so on a phone it either overflows or is scaled to
+ * nothing; the box edges are text, so a screen reader reads the rules out loud;
+ * and none of it responds to the theme.
+ *
+ * The other alternative is a diagramming library, which is several hundred
+ * kilobytes of layout engine, renders after hydration, and draws in its own
+ * palette. This is neither: hairline frames on the radius scale, mono labels,
+ * the muted step for anything supporting — so a diagram belongs to the page it
+ * sits on. It server-renders, because it is markup.
+ *
+ * NESTING IS CONTAINMENT, which is what most architecture diagrams actually
+ * describe: this is inside that, and these two sit beside each other. Edges are
+ * for the sequence between siblings, not for arbitrary wiring — a diagram that
+ * needs arbitrary wiring is a diagram that wants a drawing, and this will not
+ * pretend otherwise.
+ *
+ * It takes a spec rather than markup, so a fenced ```diagram block in an
+ * article and a hand-written figure on a page are one renderer and one look —
+ * and a wrong diagram is corrected by editing data.
+ *
+ * @example
+ * <Diagram
+ *   spec={{
+ *     caption: 'One request, end to end.',
+ *     edges: [{ from: 'edge', to: 'app', label: 'HTTPS' }],
+ *     nodes: [
+ *       { id: 'edge', label: 'Edge', note: 'CDN' },
+ *       { id: 'app', label: 'Application', accent: true, children: [
+ *         { label: 'Router' },
+ *         { label: 'Handlers' },
+ *       ] },
+ *     ],
+ *   }}
+ * />
+ */
+declare function Diagram({ spec, className }: DiagramProps): react.JSX.Element;
+
+export { Diagram, type DiagramEdge, type DiagramNode, type DiagramProps, type DiagramSpec, Diagram as default };

package/dist/components/Diagram/Diagram.js

@@ -0,0 +1,139 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function Diagram({ spec, className }) {
+  const { nodes, edges = [], direction = "row", caption, label } = spec;
+  return /* @__PURE__ */ jsxs("figure", { className: cn("m-0", className), role: "group", "aria-label": label ?? caption ?? void 0, children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--paper-2) p-[clamp(1.125rem,calc(2.5*var(--fluid)),1.875rem)] scroll-slim", children: /* @__PURE__ */ jsx(NodeList, { nodes, edges, direction, depth: 0 }) }),
+    caption && // A <div>, not a <figcaption>. A long-form stylesheet dropped around
+    // this will style `figcaption` and `p` unlayered, and an unlayered rule
+    // beats a utility whatever the specificity — inside an article a real
+    // figcaption came out uppercased and every label in the diagram
+    // inherited a paragraph margin. Nothing here uses a tag prose reaches
+    // for.
+    /* @__PURE__ */ jsx("div", { className: "mt-3 mono-meta leading-[1.6] text-(--ink-3-aa)", children: caption })
+  ] });
+}
+function NodeList({
+  nodes,
+  edges,
+  direction,
+  depth
+}) {
+  const row = direction === "row";
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 gap-3", row ? "flex-col sm:flex-row" : "flex-col"), children: nodes.map((node, index) => /* @__PURE__ */ jsx(
+    NodeFrame,
+    {
+      node,
+      edges,
+      depth,
+      lead: index > 0 ? findEdge(edges, nodes[index - 1], node) : void 0,
+      row
+    },
+    node.id ?? `${node.label}-${index}`
+  )) });
+}
+function findEdge(edges, from, to) {
+  if (!from.id || !to.id) return void 0;
+  return edges.find((edge) => edge.from === from.id && edge.to === to.id);
+}
+function NodeFrame({
+  node,
+  edges,
+  depth,
+  lead,
+  row
+}) {
+  const children = node.children ?? [];
+  const isGroup = children.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    lead && /* @__PURE__ */ jsx(EdgeMark, { label: lead.label, row }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      isGroup ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "min-w-0 flex-1 border-t pt-3",
+            depth === 0 ? "border-(--ink)" : "border-(--rule-2)"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-3 gap-y-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-sans text-[13.5px] leading-[1.35] text-(--ink)", children: node.label }),
+              node.note && /* @__PURE__ */ jsx("span", { className: "mono-meta text-(--ink-3-aa)", children: node.note })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+              NodeList,
+              {
+                nodes: children,
+                edges,
+                direction: node.direction ?? "row",
+                depth: depth + 1
+              }
+            ) })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 flex-1 flex-col justify-center rounded-(--radius) px-3.5 py-3",
+            node.accent ? "bg-(--accent)" : "border border-(--rule-2) bg-(--paper)"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block break-words font-sans text-[13.5px] leading-[1.35]",
+                  node.accent ? "text-(--accent-foreground)" : "text-(--ink)"
+                ),
+                children: node.label
+              }
+            ),
+            node.note && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mt-1 block mono-meta",
+                  node.accent ? "text-(--accent-foreground) opacity-70" : "text-(--ink-3-aa)"
+                ),
+                children: node.note
+              }
+            )
+          ]
+        }
+      ),
+      node.footnote && /* @__PURE__ */ jsx("span", { className: "mt-2 block mono-meta text-(--ink-3-aa)", children: node.footnote })
+    ] })
+  ] });
+}
+function EdgeMark({ label, row }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "flex flex-none items-center justify-center gap-1.5 text-(--ink-3-aa)",
+        row ? "sm:flex-col" : "flex-col"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "font-mono text-[13px] leading-none",
+              row ? "rotate-90 sm:rotate-0 sm:rtl:-scale-x-100" : "rotate-90"
+            ),
+            children: "\u2192"
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { className: "mono-meta whitespace-nowrap", children: label })
+      ]
+    }
+  );
+}
+var Diagram_default = Diagram;
+export {
+  Diagram,
+  Diagram_default as default
+};
+//# sourceMappingURL=Diagram.js.map

package/dist/components/Diagram/Diagram.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Diagram/Diagram.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface DiagramNode {\n  /** Only needed when an edge names this node. */\n  id?: string\n  /** The node's name, set in the interface face. */\n  label: string\n  /** What it is — one short line, a step back. */\n  note?: string\n  /** The one node the diagram is about. At most one or two per diagram. */\n  accent?: boolean\n  /** How this node's children are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  children?: DiagramNode[]\n  /** A line printed under the frame, outside it — what the box means. */\n  footnote?: string\n}\n\nexport interface DiagramEdge {\n  from: string\n  to: string\n  label?: string\n}\n\nexport interface DiagramSpec {\n  /** How the top-level nodes are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  nodes: DiagramNode[]\n  /** Arrows between adjacent top-level nodes, by id. */\n  edges?: DiagramEdge[]\n  /** The figure's caption. */\n  caption?: string\n  /** Names the figure for assistive tech when the caption does not. */\n  label?: string\n}\n\nexport interface DiagramProps {\n  spec: DiagramSpec\n  className?: string\n}\n\n/**\n * A flow or architecture diagram, drawn out of the system's own parts.\n *\n * The alternative it replaces is a fenced block of box-drawing characters —\n * `┌──────┬──────┐` — which is a picture rendered in a font chosen for code. It\n * inherits the code block's frame and scrollbar, so a diagram reads as terminal\n * output; it cannot wrap, so on a phone it either overflows or is scaled to\n * nothing; the box edges are text, so a screen reader reads the rules out loud;\n * and none of it responds to the theme.\n *\n * The other alternative is a diagramming library, which is several hundred\n * kilobytes of layout engine, renders after hydration, and draws in its own\n * palette. This is neither: hairline frames on the radius scale, mono labels,\n * the muted step for anything supporting — so a diagram belongs to the page it\n * sits on. It server-renders, because it is markup.\n *\n * NESTING IS CONTAINMENT, which is what most architecture diagrams actually\n * describe: this is inside that, and these two sit beside each other. Edges are\n * for the sequence between siblings, not for arbitrary wiring — a diagram that\n * needs arbitrary wiring is a diagram that wants a drawing, and this will not\n * pretend otherwise.\n *\n * It takes a spec rather than markup, so a fenced ```diagram block in an\n * article and a hand-written figure on a page are one renderer and one look —\n * and a wrong diagram is corrected by editing data.\n *\n * @example\n * <Diagram\n *   spec={{\n *     caption: 'One request, end to end.',\n *     edges: [{ from: 'edge', to: 'app', label: 'HTTPS' }],\n *     nodes: [\n *       { id: 'edge', label: 'Edge', note: 'CDN' },\n *       { id: 'app', label: 'Application', accent: true, children: [\n *         { label: 'Router' },\n *         { label: 'Handlers' },\n *       ] },\n *     ],\n *   }}\n * />\n */\nexport function Diagram({ spec, className }: DiagramProps) {\n  const { nodes, edges = [], direction = 'row', caption, label } = spec\n\n  return (\n    <figure className={cn('m-0', className)} role=\"group\" aria-label={label ?? caption ?? undefined}>\n      <div className=\"overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--paper-2) p-[clamp(1.125rem,calc(2.5*var(--fluid)),1.875rem)] scroll-slim\">\n        <NodeList nodes={nodes} edges={edges} direction={direction} depth={0} />\n      </div>\n      {caption && (\n        // A <div>, not a <figcaption>. A long-form stylesheet dropped around\n        // this will style `figcaption` and `p` unlayered, and an unlayered rule\n        // beats a utility whatever the specificity — inside an article a real\n        // figcaption came out uppercased and every label in the diagram\n        // inherited a paragraph margin. Nothing here uses a tag prose reaches\n        // for.\n        <div className=\"mt-3 mono-meta leading-[1.6] text-(--ink-3-aa)\">{caption}</div>\n      )}\n    </figure>\n  )\n}\n\n/** One rank of the diagram: the nodes, and any arrows between them. */\nfunction NodeList({\n  nodes,\n  edges,\n  direction,\n  depth,\n}: {\n  nodes: DiagramNode[]\n  edges: DiagramEdge[]\n  direction: 'row' | 'column'\n  depth: number\n}) {\n  const row = direction === 'row'\n\n  return (\n    <div className={cn('flex min-w-0 gap-3', row ? 'flex-col sm:flex-row' : 'flex-col')}>\n      {nodes.map((node, index) => (\n        <NodeFrame\n          key={node.id ?? `${node.label}-${index}`}\n          node={node}\n          edges={edges}\n          depth={depth}\n          lead={index > 0 ? findEdge(edges, nodes[index - 1]!, node) : undefined}\n          row={row}\n        />\n      ))}\n    </div>\n  )\n}\n\n/** The arrow that sits between two adjacent nodes, when an edge names them. */\nfunction findEdge(edges: DiagramEdge[], from: DiagramNode, to: DiagramNode): DiagramEdge | undefined {\n  if (!from.id || !to.id) return undefined\n  return edges.find((edge) => edge.from === from.id && edge.to === to.id)\n}\n\n/**\n * A node is one of two things, and they are drawn differently on purpose.\n *\n * A LEAF is a plate: a bordered card on paper, or ink-filled when it is what\n * the diagram is about. A CONTAINER is a band: a labelled hairline with its\n * children underneath, and NO frame of its own.\n *\n * That distinction is the whole design. Drawing a container as another box puts\n * three borders around anything two levels deep — the figure's frame, the\n * group's, and the plate's — and the result reads as packaging rather than as\n * structure. A rule with a name on it says \"these belong together\" using the\n * device every section head already uses, and leaves the borders to the things\n * that are actually objects.\n */\nfunction NodeFrame({\n  node,\n  edges,\n  depth,\n  lead,\n  row,\n}: {\n  node: DiagramNode\n  edges: DiagramEdge[]\n  depth: number\n  lead?: DiagramEdge\n  row: boolean\n}) {\n  const children = node.children ?? []\n  const isGroup = children.length > 0\n\n  return (\n    <>\n      {lead && <EdgeMark label={lead.label} row={row} />}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {isGroup ? (\n          <div\n            className={cn(\n              'min-w-0 flex-1 border-t pt-3',\n              depth === 0 ? 'border-(--ink)' : 'border-(--rule-2)',\n            )}\n          >\n            <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-0.5\">\n              <span className=\"font-sans text-[13.5px] leading-[1.35] text-(--ink)\">\n                {node.label}\n              </span>\n              {node.note && <span className=\"mono-meta text-(--ink-3-aa)\">{node.note}</span>}\n            </div>\n            <div className=\"mt-3\">\n              <NodeList\n                nodes={children}\n                edges={edges}\n                direction={node.direction ?? 'row'}\n                depth={depth + 1}\n              />\n            </div>\n          </div>\n        ) : (\n          <div\n            className={cn(\n              'flex min-w-0 flex-1 flex-col justify-center rounded-(--radius) px-3.5 py-3',\n              node.accent ? 'bg-(--accent)' : 'border border-(--rule-2) bg-(--paper)',\n            )}\n          >\n            {/* An identifier can be one long word — `TenantMainMiddleware` —\n                with no break opportunity, so it runs into the plate's edge\n                unless it is allowed to break inside itself. */}\n            <span\n              className={cn(\n                'block break-words font-sans text-[13.5px] leading-[1.35]',\n                node.accent ? 'text-(--accent-foreground)' : 'text-(--ink)',\n              )}\n            >\n              {node.label}\n            </span>\n            {node.note && (\n              <span\n                className={cn(\n                  'mt-1 block mono-meta',\n                  node.accent ? 'text-(--accent-foreground) opacity-70' : 'text-(--ink-3-aa)',\n                )}\n              >\n                {node.note}\n              </span>\n            )}\n          </div>\n        )}\n\n        {node.footnote && (\n          <span className=\"mt-2 block mono-meta text-(--ink-3-aa)\">{node.footnote}</span>\n        )}\n      </div>\n    </>\n  )\n}\n\n/**\n * The connector. An arrow and, when the edge is named, the name under it —\n * hidden from assistive tech, which reads the nodes in document order anyway\n * and has no use for a glyph pointing at the next one.\n */\nfunction EdgeMark({ label, row }: { label?: string; row: boolean }): ReactNode {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        'flex flex-none items-center justify-center gap-1.5 text-(--ink-3-aa)',\n        row ? 'sm:flex-col' : 'flex-col',\n      )}\n    >\n      {/* One glyph, turned. A row stacks into a column below `sm`, so the arrow\n          has to point the way the layout actually runs at that width. In RTL the\n          inline axis reverses, so the flat arrow is mirrored with it. */}\n      <span\n        className={cn(\n          'font-mono text-[13px] leading-none',\n          row ? 'rotate-90 sm:rotate-0 sm:rtl:-scale-x-100' : 'rotate-90',\n        )}\n      >\n        →\n      </span>\n      {label && <span className=\"mono-meta whitespace-nowrap\">{label}</span>}\n    </div>\n  )\n}\n\nexport default Diagram\n"],"mappings":"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","names":[]}

package/dist/components/Dialog/Dialog.js

@@ -39,7 +39,7 @@ function DialogContent({
       {
         "data-m22-animated": true,
         className: cn(
-          "fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--rule-2) bg-(--paper) p-6 scroll-slim",
+          "fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 panel-blur scroll-slim",
           "data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]",
           className
         ),

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Dialog root + trigger + close, re-exported as typed passthroughs. */\nexport const Dialog = DialogPrimitive.Root\nexport const DialogTrigger = DialogPrimitive.Trigger\nexport const DialogClose = DialogPrimitive.Close\n\n/** Title + description stack; renders nothing when both are omitted. */\nfunction DialogHeader({\n  title,\n  description,\n  hidden,\n}: {\n  title?: ReactNode\n  description?: ReactNode\n  hidden: boolean\n}) {\n  if (title === undefined && description === undefined) return null\n  return (\n    <div className={cn('mb-4 flex flex-col gap-1 pe-8', hidden && 'sr-only')}>\n      {title !== undefined && (\n        <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n          {title}\n        </DialogPrimitive.Title>\n      )}\n      {description !== undefined && (\n        <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n          {description}\n        </DialogPrimitive.Description>\n      )}\n    </div>\n  )\n}\n\nexport interface DialogContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {\n  /** Heading text. When omitted, a visually-hidden title is rendered for a11y. */\n  title?: ReactNode\n  /** Sub-heading under the title. */\n  description?: ReactNode\n  className?: string\n  /** Show the top-right close control (default true). */\n  showClose?: boolean\n  /**\n   * Keeps the title for assistive tech and hides it visually.\n   *\n   * For a surface whose purpose is obvious to anyone who can see it — a command\n   * palette, a media lightbox — where a printed heading would be furniture. The\n   * title itself is never optional: Radix requires one, and a modal with no\n   * accessible name drops a screen reader into an unnamed region.\n   */\n  hideTitle?: boolean\n}\n\n/**\n * A modal surface: portal → scrim → centred panel.\n *\n * Radix owns the focus trap, the escape key, the scroll lock and the\n * `aria-modal` wiring — all of which a hand-rolled dialog gets subtly wrong,\n * usually by leaving focus behind in the page underneath.\n *\n * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog\n * without a visible heading still renders a hidden one rather than logging a\n * warning and shipping an unnamed modal.\n *\n * @example\n * <Dialog>\n *   <DialogTrigger asChild><Button>Delete</Button></DialogTrigger>\n *   <DialogContent title=\"Delete file\" description=\"This cannot be undone.\">\n *     <DialogClose asChild><Button variant=\"secondary\">Cancel</Button></DialogClose>\n *   </DialogContent>\n * </Dialog>\n */\nexport function DialogContent({\n  title,\n  description,\n  children,\n  className,\n  showClose = true,\n  hideTitle = false,\n  ...rest\n}: DialogContentProps) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className=\"fixed inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]\"\n      />\n      <DialogPrimitive.Content\n        data-m22-animated\n        className={cn(\n          'fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--rule-2) bg-(--paper) p-6 scroll-slim',\n          'data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]',\n          className,\n        )}\n        {...rest}\n      >\n        <DialogHeader title={title} description={description} hidden={hideTitle} />\n\n        {title === undefined && (\n          <DialogPrimitive.Title className=\"sr-only\">Dialog</DialogPrimitive.Title>\n        )}\n\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={16} strokeWidth={1.5} aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Dialog\n"],"mappings":";AAwBI,SAEI,KAFJ;AAtBJ,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AAGZ,MAAM,SAAS,gBAAgB;AAC/B,MAAM,gBAAgB,gBAAgB;AACtC,MAAM,cAAc,gBAAgB;AAG3C,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,UAAa,gBAAgB,OAAW,QAAO;AAC7D,SACE,qBAAC,SAAI,WAAW,GAAG,iCAAiC,UAAU,SAAS,GACpE;AAAA,cAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,IAED,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,KAEJ;AAEJ;AAyCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,SACE,qBAAC,gBAAgB,QAAhB,EACC;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,OAAc,aAA0B,QAAQ,WAAW;AAAA,UAExE,UAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAU,oBAAM;AAAA,UAGlD,aACC;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAGD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Dialog root + trigger + close, re-exported as typed passthroughs. */\nexport const Dialog = DialogPrimitive.Root\nexport const DialogTrigger = DialogPrimitive.Trigger\nexport const DialogClose = DialogPrimitive.Close\n\n/** Title + description stack; renders nothing when both are omitted. */\nfunction DialogHeader({\n  title,\n  description,\n  hidden,\n}: {\n  title?: ReactNode\n  description?: ReactNode\n  hidden: boolean\n}) {\n  if (title === undefined && description === undefined) return null\n  return (\n    <div className={cn('mb-4 flex flex-col gap-1 pe-8', hidden && 'sr-only')}>\n      {title !== undefined && (\n        <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n          {title}\n        </DialogPrimitive.Title>\n      )}\n      {description !== undefined && (\n        <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n          {description}\n        </DialogPrimitive.Description>\n      )}\n    </div>\n  )\n}\n\nexport interface DialogContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {\n  /** Heading text. When omitted, a visually-hidden title is rendered for a11y. */\n  title?: ReactNode\n  /** Sub-heading under the title. */\n  description?: ReactNode\n  className?: string\n  /** Show the top-right close control (default true). */\n  showClose?: boolean\n  /**\n   * Keeps the title for assistive tech and hides it visually.\n   *\n   * For a surface whose purpose is obvious to anyone who can see it — a command\n   * palette, a media lightbox — where a printed heading would be furniture. The\n   * title itself is never optional: Radix requires one, and a modal with no\n   * accessible name drops a screen reader into an unnamed region.\n   */\n  hideTitle?: boolean\n}\n\n/**\n * A modal surface: portal → scrim → centred panel.\n *\n * Radix owns the focus trap, the escape key, the scroll lock and the\n * `aria-modal` wiring — all of which a hand-rolled dialog gets subtly wrong,\n * usually by leaving focus behind in the page underneath.\n *\n * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog\n * without a visible heading still renders a hidden one rather than logging a\n * warning and shipping an unnamed modal.\n *\n * @example\n * <Dialog>\n *   <DialogTrigger asChild><Button>Delete</Button></DialogTrigger>\n *   <DialogContent title=\"Delete file\" description=\"This cannot be undone.\">\n *     <DialogClose asChild><Button variant=\"secondary\">Cancel</Button></DialogClose>\n *   </DialogContent>\n * </Dialog>\n */\nexport function DialogContent({\n  title,\n  description,\n  children,\n  className,\n  showClose = true,\n  hideTitle = false,\n  ...rest\n}: DialogContentProps) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className=\"fixed inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]\"\n      />\n      <DialogPrimitive.Content\n        data-m22-animated\n        className={cn(\n          'fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 panel-blur scroll-slim',\n          'data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]',\n          className,\n        )}\n        {...rest}\n      >\n        <DialogHeader title={title} description={description} hidden={hideTitle} />\n\n        {title === undefined && (\n          <DialogPrimitive.Title className=\"sr-only\">Dialog</DialogPrimitive.Title>\n        )}\n\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={16} strokeWidth={1.5} aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Dialog\n"],"mappings":";AAwBI,SAEI,KAFJ;AAtBJ,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AAGZ,MAAM,SAAS,gBAAgB;AAC/B,MAAM,gBAAgB,gBAAgB;AACtC,MAAM,cAAc,gBAAgB;AAG3C,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,UAAa,gBAAgB,OAAW,QAAO;AAC7D,SACE,qBAAC,SAAI,WAAW,GAAG,iCAAiC,UAAU,SAAS,GACpE;AAAA,cAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,IAED,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,KAEJ;AAEJ;AAyCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,SACE,qBAAC,gBAAgB,QAAhB,EACC;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,OAAc,aAA0B,QAAQ,WAAW;AAAA,UAExE,UAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAU,oBAAM;AAAA,UAGlD,aACC;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAGD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -20,7 +20,7 @@ function DropdownMenuContent({
       sideOffset,
       "data-m22-animated": true,
       className: cn(
-        "z-(--z-dropdown) min-w-44 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-1.5",
+        "z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur",
         "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
         className
       ),
@@ -40,7 +40,7 @@ function DropdownMenuItem({
     DropdownMenuPrimitive.Item,
     {
       className: cn(
-        "flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)",
+        "flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)",
         destructive ? "text-(--danger)" : "text-(--ink-2) data-[highlighted]:text-(--ink)",
         className
       ),

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix DropdownMenu root + trigger, re-exported as typed passthroughs. */\nexport const DropdownMenu = DropdownMenuPrimitive.Root\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nexport type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content>\n\n/**\n * A menu surface.\n *\n * A menu is a list of ACTIONS. If the items navigate somewhere, they belong in\n * a nav; if they set a value, that is a `Select` or a `RadioGroup` — Radix has\n * menu variants for both, and a plain item pretending to be a choice loses the\n * checked state a screen reader needs.\n *\n * @example\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button variant=\"secondary\">Menu</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuLabel>Account</DropdownMenuLabel>\n *     <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem icon={LogOut}>Sign out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n */\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 6,\n  children,\n  ...rest\n}: DropdownMenuContentProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <DropdownMenuPrimitive.Portal container={container ?? undefined}>\n      <DropdownMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        sideOffset={sideOffset}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-1.5',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nexport interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenuPrimitive.Item> {\n  /** Optional leading icon, rendered before the label. */\n  icon?: LucideIcon\n  /** Paints the row as destructive. Use for delete, revoke, disconnect. */\n  destructive?: boolean\n}\n\n/**\n * A menu row.\n *\n * Highlight is driven by Radix's `data-highlighted`, which covers both pointer\n * hover and keyboard focus — styling `:hover` alone leaves the keyboard user\n * unable to see where they are.\n */\nexport function DropdownMenuItem({\n  icon: Icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {Icon && <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />}\n      {children}\n    </DropdownMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between menu groups. */\nexport function DropdownMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Mono eyebrow heading for a group of items. */\nexport function DropdownMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof DropdownMenuPrimitive.Label>) {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default DropdownMenu\n"],"mappings":";AA2CM,cAwCF,YAxCE;AAzCN,YAAY,2BAA2B;AAGvC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,eAAe,sBAAsB;AAC3C,MAAM,sBAAsB,sBAAsB;AAuBlD,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,sBAAsB,QAAtB,EAA6B,WAAW,aAAa,QACpD;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB;AAAA,MACA,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,iBAAiB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAAA,QAC3E;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,GAAG;AACL,GAA2D;AACzD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix DropdownMenu root + trigger, re-exported as typed passthroughs. */\nexport const DropdownMenu = DropdownMenuPrimitive.Root\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nexport type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content>\n\n/**\n * A menu surface.\n *\n * A menu is a list of ACTIONS. If the items navigate somewhere, they belong in\n * a nav; if they set a value, that is a `Select` or a `RadioGroup` — Radix has\n * menu variants for both, and a plain item pretending to be a choice loses the\n * checked state a screen reader needs.\n *\n * @example\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button variant=\"secondary\">Menu</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuLabel>Account</DropdownMenuLabel>\n *     <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem icon={LogOut}>Sign out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n */\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 6,\n  children,\n  ...rest\n}: DropdownMenuContentProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <DropdownMenuPrimitive.Portal container={container ?? undefined}>\n      <DropdownMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        sideOffset={sideOffset}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nexport interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenuPrimitive.Item> {\n  /** Optional leading icon, rendered before the label. */\n  icon?: LucideIcon\n  /** Paints the row as destructive. Use for delete, revoke, disconnect. */\n  destructive?: boolean\n}\n\n/**\n * A menu row.\n *\n * Highlight is driven by Radix's `data-highlighted`, which covers both pointer\n * hover and keyboard focus — styling `:hover` alone leaves the keyboard user\n * unable to see where they are.\n */\nexport function DropdownMenuItem({\n  icon: Icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {Icon && <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />}\n      {children}\n    </DropdownMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between menu groups. */\nexport function DropdownMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Mono eyebrow heading for a group of items. */\nexport function DropdownMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof DropdownMenuPrimitive.Label>) {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default DropdownMenu\n"],"mappings":";AA2CM,cAwCF,YAxCE;AAzCN,YAAY,2BAA2B;AAGvC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,eAAe,sBAAsB;AAC3C,MAAM,sBAAsB,sBAAsB;AAuBlD,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,sBAAsB,QAAtB,EAA6B,WAAW,aAAa,QACpD;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB;AAAA,MACA,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,iBAAiB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAAA,QAC3E;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,GAAG;AACL,GAA2D;AACzD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/components/FigureBand/FigureBand.js

@@ -12,36 +12,47 @@ function FigureBand({
   ...rest
 }) {
   if (figures.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    "dl",
-    {
-      "aria-label": label,
-      className: cn(
-        // A container, not a viewport reader: four figures across is a decision
-        // about how wide THIS band is, and it is wrong in a 390px frame inside a
-        // 1440px window.
-        // `w-full` is load-bearing: `@container` applies `contain: inline-size`,
-        // which computes the element's width WITHOUT looking at its contents.
-        // As a shrink-to-fit flex item that resolved to zero, and the band
-        // rendered as two 0px columns of overlapping text.
-        "@container m-0 w-full grid grid-cols-2 border-y border-(--rule) @5xl:grid-cols-4",
-        "[&>div]:border-(--rule) @max-5xl:[&>div:nth-child(even)]:border-s @max-5xl:[&>div:nth-child(n+3)]:border-t @5xl:[&>div:not(:first-child)]:border-s",
-        className
-      ),
-      ...rest,
-      children: figures.map((figure) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "bg-transparent px-[clamp(1rem,calc(3*var(--fluid)),1.625rem)] py-[clamp(1.5rem,calc(4*var(--fluid)),2.25rem)]",
-          children: [
-            /* @__PURE__ */ jsx("dt", { className: "mb-3 eyebrow text-(--ink-3-aa)", children: figure.label }),
-            /* @__PURE__ */ jsx("dd", { className: cn("m-0 font-heading font-normal text-(--ink)", VALUE_SCALE[scale]), children: figure.value }),
-            figure.note !== void 0 && figure.note !== null && /* @__PURE__ */ jsx("dd", { className: "m-0 mt-2.5 font-sans text-[13px] font-light leading-[1.5] text-(--ink-3-aa)", children: figure.note })
-          ]
-        },
-        figure.id
-      ))
-    }
+  return (
+    // The container is a WRAPPER, and it has to be. A container query resolves
+    // against an ANCESTOR container, never against the element that declares
+    // one — so `@container … @5xl:grid-cols-4` written on the `<dl>` itself
+    // could never match, and the band stayed two columns at every width. Four
+    // figures on a 1288px page came out as a 2×2 block with a hole in it, which
+    // is the arrangement this replaces.
+    //
+    // `w-full` is load-bearing: `@container` applies `contain: inline-size`,
+    // which computes the element's width WITHOUT looking at its contents. As a
+    // shrink-to-fit flex item that resolved to zero, and the band rendered as
+    // two 0px columns of overlapping text.
+    /* @__PURE__ */ jsx("div", { className: "@container w-full", children: /* @__PURE__ */ jsx(
+      "dl",
+      {
+        "aria-label": label,
+        className: cn(
+          // A container, not a viewport reader: four figures across is a
+          // decision about how wide THIS band is, and it is wrong in a 390px
+          // frame inside a 1440px window.
+          "m-0 grid w-full grid-cols-2 border-y border-(--rule) @3xl:grid-cols-4",
+          // Each divider width names the cells that do NOT open a row rather
+          // than adding a rule and taking it back.
+          "[&>div]:border-(--rule) @max-3xl:[&>div:nth-child(even)]:border-s @max-3xl:[&>div:nth-child(n+3)]:border-t @3xl:[&>div:not(:first-child)]:border-s",
+          className
+        ),
+        ...rest,
+        children: figures.map((figure) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bg-transparent px-[clamp(1rem,calc(3*var(--fluid)),1.625rem)] py-[clamp(1.5rem,calc(4*var(--fluid)),2.25rem)]",
+            children: [
+              /* @__PURE__ */ jsx("dt", { className: "mb-3 eyebrow text-(--ink-3-aa)", children: figure.label }),
+              /* @__PURE__ */ jsx("dd", { className: cn("m-0 font-heading font-normal text-(--ink)", VALUE_SCALE[scale]), children: figure.value }),
+              figure.note !== void 0 && figure.note !== null && /* @__PURE__ */ jsx("dd", { className: "m-0 mt-2.5 font-sans text-[13px] font-light leading-[1.5] text-(--ink-3-aa)", children: figure.note })
+            ]
+          },
+          figure.id
+        ))
+      }
+    ) })
   );
 }
 var FigureBand_default = FigureBand;

package/dist/components/FigureBand/FigureBand.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FigureBand/FigureBand.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface Figure {\n  /** Stable key; also what a caller keys its own data by. */\n  id: string\n  /** The mono kicker over the value. */\n  label: string\n  /** The value itself, set in the serif at the band's scale. */\n  value: ReactNode\n  /** The quiet line under it — a trend, a qualifier, a second fact. */\n  note?: ReactNode\n}\n\nexport interface FigureBandProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children'> {\n  figures: Figure[]\n  /**\n   * How large the value is set.\n   *\n   * `lead` is for a band that is the point of its page — a stats headline,\n   * where the numbers ARE the content. `sub` is for a band that supports the\n   * page around it, and keeps the ladder honest: a supporting figure must not\n   * be set at the same size as the page's own subject.\n   */\n  scale?: 'lead' | 'sub'\n  /** Names the band for assistive tech when it has no visible heading of its own. */\n  label?: string\n}\n\nconst VALUE_SCALE = {\n  lead: 'text-[length:var(--fs-lead)] leading-[1.1] tracking-[-0.02em]',\n  sub: 'text-[length:var(--fs-sub)] leading-[1.2]',\n} as const\n\n/**\n * A row of counted facts, divided by hairlines and nothing else.\n *\n * A `<dl>`, because that is what this is: each cell is a term and its value,\n * and a grid of `<div>`s tells a screen reader nothing about which number goes\n * with which label.\n *\n * Each divider width names the cells that do NOT open a row rather than adding\n * a rule and taking it back — an `undo` at equal specificity resolves on\n * Tailwind's own sort order, which is not something a layout should depend on.\n * Drawn this way, no edge is ever painted past the last column.\n *\n * @example\n * <FigureBand\n *   label=\"At a glance\"\n *   figures={[\n *     { id: 'posts', label: 'Posts', value: '48', note: '+6 this year' },\n *     { id: 'photos', label: 'Frames', value: '1,204' },\n *   ]}\n * />\n */\nexport function FigureBand({\n  figures,\n  scale = 'lead',\n  label,\n  className,\n  ...rest\n}: FigureBandProps) {\n  if (figures.length === 0) return null\n\n  return (\n    <dl\n      aria-label={label}\n      className={cn(\n        // A container, not a viewport reader: four figures across is a decision\n        // about how wide THIS band is, and it is wrong in a 390px frame inside a\n        // 1440px window.\n        // `w-full` is load-bearing: `@container` applies `contain: inline-size`,\n        // which computes the element's width WITHOUT looking at its contents.\n        // As a shrink-to-fit flex item that resolved to zero, and the band\n        // rendered as two 0px columns of overlapping text.\n        '@container m-0 w-full grid grid-cols-2 border-y border-(--rule) @5xl:grid-cols-4',\n        '[&>div]:border-(--rule) @max-5xl:[&>div:nth-child(even)]:border-s @max-5xl:[&>div:nth-child(n+3)]:border-t @5xl:[&>div:not(:first-child)]:border-s',\n        className,\n      )}\n      {...rest}\n    >\n      {figures.map((figure) => (\n        <div\n          key={figure.id}\n          className=\"bg-transparent px-[clamp(1rem,calc(3*var(--fluid)),1.625rem)] py-[clamp(1.5rem,calc(4*var(--fluid)),2.25rem)]\"\n        >\n          <dt className=\"mb-3 eyebrow text-(--ink-3-aa)\">{figure.label}</dt>\n          <dd className={cn('m-0 font-heading font-normal text-(--ink)', VALUE_SCALE[scale])}>\n            {figure.value}\n          </dd>\n          {figure.note !== undefined && figure.note !== null && (\n            <dd className=\"m-0 mt-2.5 font-sans text-[13px] font-light leading-[1.5] text-(--ink-3-aa)\">\n              {figure.note}\n            </dd>\n          )}\n        </div>\n      ))}\n    </dl>\n  )\n}\n\nexport default FigureBand\n"],"mappings":"AAkFQ,SAIE,KAJF;AAjFR,SAAS,UAAU;AA4BnB,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACP;AAuBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,gCAAC,QAAG,WAAU,kCAAkC,iBAAO,OAAM;AAAA,YAC7D,oBAAC,QAAG,WAAW,GAAG,6CAA6C,YAAY,KAAK,CAAC,GAC9E,iBAAO,OACV;AAAA,YACC,OAAO,SAAS,UAAa,OAAO,SAAS,QAC5C,oBAAC,QAAG,WAAU,+EACX,iBAAO,MACV;AAAA;AAAA;AAAA,QAVG,OAAO;AAAA,MAYd,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/FigureBand/FigureBand.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface Figure {\n  /** Stable key; also what a caller keys its own data by. */\n  id: string\n  /** The mono kicker over the value. */\n  label: string\n  /** The value itself, set in the serif at the band's scale. */\n  value: ReactNode\n  /** The quiet line under it — a trend, a qualifier, a second fact. */\n  note?: ReactNode\n}\n\nexport interface FigureBandProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children'> {\n  figures: Figure[]\n  /**\n   * How large the value is set.\n   *\n   * `lead` is for a band that is the point of its page — a stats headline,\n   * where the numbers ARE the content. `sub` is for a band that supports the\n   * page around it, and keeps the ladder honest: a supporting figure must not\n   * be set at the same size as the page's own subject.\n   */\n  scale?: 'lead' | 'sub'\n  /** Names the band for assistive tech when it has no visible heading of its own. */\n  label?: string\n}\n\nconst VALUE_SCALE = {\n  lead: 'text-[length:var(--fs-lead)] leading-[1.1] tracking-[-0.02em]',\n  sub: 'text-[length:var(--fs-sub)] leading-[1.2]',\n} as const\n\n/**\n * A row of counted facts, divided by hairlines and nothing else.\n *\n * A `<dl>`, because that is what this is: each cell is a term and its value,\n * and a grid of `<div>`s tells a screen reader nothing about which number goes\n * with which label.\n *\n * Each divider width names the cells that do NOT open a row rather than adding\n * a rule and taking it back — an `undo` at equal specificity resolves on\n * Tailwind's own sort order, which is not something a layout should depend on.\n * Drawn this way, no edge is ever painted past the last column.\n *\n * @example\n * <FigureBand\n *   label=\"At a glance\"\n *   figures={[\n *     { id: 'posts', label: 'Posts', value: '48', note: '+6 this year' },\n *     { id: 'photos', label: 'Frames', value: '1,204' },\n *   ]}\n * />\n */\nexport function FigureBand({\n  figures,\n  scale = 'lead',\n  label,\n  className,\n  ...rest\n}: FigureBandProps) {\n  if (figures.length === 0) return null\n\n  return (\n    // The container is a WRAPPER, and it has to be. A container query resolves\n    // against an ANCESTOR container, never against the element that declares\n    // one — so `@container … @5xl:grid-cols-4` written on the `<dl>` itself\n    // could never match, and the band stayed two columns at every width. Four\n    // figures on a 1288px page came out as a 2×2 block with a hole in it, which\n    // is the arrangement this replaces.\n    //\n    // `w-full` is load-bearing: `@container` applies `contain: inline-size`,\n    // which computes the element's width WITHOUT looking at its contents. As a\n    // shrink-to-fit flex item that resolved to zero, and the band rendered as\n    // two 0px columns of overlapping text.\n    <div className=\"@container w-full\">\n      <dl\n        aria-label={label}\n        className={cn(\n          // A container, not a viewport reader: four figures across is a\n          // decision about how wide THIS band is, and it is wrong in a 390px\n          // frame inside a 1440px window.\n          'm-0 grid w-full grid-cols-2 border-y border-(--rule) @3xl:grid-cols-4',\n          // Each divider width names the cells that do NOT open a row rather\n          // than adding a rule and taking it back.\n          '[&>div]:border-(--rule) @max-3xl:[&>div:nth-child(even)]:border-s @max-3xl:[&>div:nth-child(n+3)]:border-t @3xl:[&>div:not(:first-child)]:border-s',\n          className,\n        )}\n        {...rest}\n      >\n        {figures.map((figure) => (\n          <div\n            key={figure.id}\n            className=\"bg-transparent px-[clamp(1rem,calc(3*var(--fluid)),1.625rem)] py-[clamp(1.5rem,calc(4*var(--fluid)),2.25rem)]\"\n          >\n            <dt className=\"mb-3 eyebrow text-(--ink-3-aa)\">{figure.label}</dt>\n            <dd className={cn('m-0 font-heading font-normal text-(--ink)', VALUE_SCALE[scale])}>\n              {figure.value}\n            </dd>\n            {figure.note !== undefined && figure.note !== null && (\n              <dd className=\"m-0 mt-2.5 font-sans text-[13px] font-light leading-[1.5] text-(--ink-3-aa)\">\n                {figure.note}\n              </dd>\n            )}\n          </div>\n        ))}\n      </dl>\n    </div>\n  )\n}\n\nexport default FigureBand\n"],"mappings":"AA4FU,SAIE,KAJF;AA3FV,SAAS,UAAU;AA4BnB,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACP;AAuBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYE,oBAAC,SAAI,WAAU,qBACb;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,WAAW;AAAA;AAAA;AAAA;AAAA,UAIT;AAAA;AAAA;AAAA,UAGA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA,kCAAC,QAAG,WAAU,kCAAkC,iBAAO,OAAM;AAAA,cAC7D,oBAAC,QAAG,WAAW,GAAG,6CAA6C,YAAY,KAAK,CAAC,GAC9E,iBAAO,OACV;AAAA,cACC,OAAO,SAAS,UAAa,OAAO,SAAS,QAC5C,oBAAC,QAAG,WAAU,+EACX,iBAAO,MACV;AAAA;AAAA;AAAA,UAVG,OAAO;AAAA,QAYd,CACD;AAAA;AAAA,IACH,GACF;AAAA;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}