@misoto22/folio 0.0.0 → 0.16.0

package/dist/components/Markdown/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from 'react'\nimport { Code } from '../Code/Code'\nimport { CodeBlock } from '../CodeBlock/CodeBlock'\nimport { Heading } from '../Heading/Heading'\nimport { LinkArrow } from '../LinkArrow/LinkArrow'\nimport { Separator } from '../Separator/Separator'\nimport { Text } from '../Text/Text'\nimport { isOutbound } from './inline'\nimport type { MarkdownHeadingLevel, MarkdownInline, MarkdownNode } from './nodes'\nimport { parseMarkdown } from './parse'\nimport { slugify } from './slug'\n\nexport type { MarkdownHeadingLevel, MarkdownInline, MarkdownNode } from './nodes'\nexport { parseMarkdown } from './parse'\nexport { slugify } from './slug'\n\n/** The plain text of an inline run — what a heading's id is derived from. */\nfunction textOf(nodes: MarkdownInline[]): string {\n  return nodes\n    .map((node) => {\n      if (node.type === 'text' || node.type === 'code') return node.value\n      if (node.type === 'image') return node.alt\n      return textOf(node.children)\n    })\n    .join('')\n}\n\ninterface RenderContext {\n  headingLevelStart: MarkdownHeadingLevel\n  idPrefix?: string\n  markExternalLinks: boolean\n  /** How many headings have already claimed each slug, for the `-2` suffix. */\n  taken: Map<string, number>\n}\n\nfunction headingId(text: string, context: RenderContext): string {\n  const base = slugify(text) || 'section'\n  const seen = (context.taken.get(base) ?? 0) + 1\n  context.taken.set(base, seen)\n  const id = seen === 1 ? base : `${base}-${seen}`\n  return context.idPrefix ? `${context.idPrefix}-${id}` : id\n}\n\nfunction renderInline(node: MarkdownInline, key: number, context: RenderContext): ReactNode {\n  switch (node.type) {\n    case 'text':\n      return node.value\n    case 'code':\n      return <Code key={key}>{node.value}</Code>\n    case 'strong':\n      return (\n        <strong key={key} className=\"font-medium text-(--ink)\">\n          {node.children.map((child, index) => renderInline(child, index, context))}\n        </strong>\n      )\n    case 'emphasis':\n      return (\n        <em key={key} className=\"italic\">\n          {node.children.map((child, index) => renderInline(child, index, context))}\n        </em>\n      )\n    case 'image':\n      return (\n        <img\n          key={key}\n          src={node.src}\n          alt={node.alt}\n          loading=\"lazy\"\n          className=\"h-auto max-w-full rounded-(--radius)\"\n        />\n      )\n    case 'link': {\n      // Refusing `javascript:` keeps the link from EXECUTING; `rel` keeps it\n      // from spending the page's reputation and its reader's location. The\n      // author of this href is the untrusted party the component exists for,\n      // so an outbound link they wrote passes no ranking on (`nofollow`) and\n      // hands the destination no `Referer` to read the current URL out of\n      // (`noreferrer`). A relative href cannot leave, so it is left alone.\n      const outbound = isOutbound(node.href)\n      return (\n        <a\n          key={key}\n          href={node.href}\n          rel={outbound ? 'noreferrer nofollow' : undefined}\n          className=\"text-(--ink) underline decoration-[var(--rule-2)] underline-offset-4 transition-[text-decoration-color] duration-(--duration-fast) hover:decoration-[var(--ink)]\"\n        >\n          {node.children.map((child, index) => renderInline(child, index, context))}\n          {outbound && context.markExternalLinks ? <LinkArrow /> : null}\n        </a>\n      )\n    }\n  }\n}\n\n/**\n * A list item's blocks, unwrapped when there is only prose in it.\n *\n * A one-paragraph item renders its inline content directly, so a tight list\n * does not put a `<p>` inside every `<li>` — which is what Markdown means by a\n * tight list, and what keeps the item's line spacing the list's rather than the\n * paragraph's.\n */\nfunction renderItem(blocks: MarkdownNode[], key: number, context: RenderContext): ReactNode {\n  const first = blocks[0]\n  const only = blocks.length === 1 && first?.type === 'paragraph' ? first : undefined\n  return (\n    <li key={key} className=\"relative\">\n      {only\n        ? only.children.map((child, i) => renderInline(child, i, context))\n        : blocks.map((block, i) => renderBlock(block, i, context))}\n    </li>\n  )\n}\n\nfunction renderBlock(node: MarkdownNode, key: number, context: RenderContext): ReactNode {\n  switch (node.type) {\n    case 'heading': {\n      // Clamped, not wrapped: a level past six has nowhere to go, and an <h7>\n      // is a <span> as far as every screen reader is concerned.\n      const level = Math.min(6, node.level + context.headingLevelStart - 1) as MarkdownHeadingLevel\n      return (\n        <Heading key={key} level={level} id={headingId(textOf(node.children), context)}>\n          {node.children.map((child, index) => renderInline(child, index, context))}\n        </Heading>\n      )\n    }\n    case 'paragraph':\n      return (\n        <Text key={key}>{node.children.map((child, index) => renderInline(child, index, context))}</Text>\n      )\n    case 'code':\n      return <CodeBlock key={key} code={node.value} lang={node.lang} />\n    case 'rule':\n      // Not decorative: a thematic break is a change of subject the author\n      // wrote, so it is announced rather than drawn and hidden.\n      return <Separator key={key} weight=\"edge\" decorative={false} />\n    case 'quote':\n      return (\n        <blockquote\n          key={key}\n          className=\"m-0 border-s-2 border-(--rule-hard) ps-[1.25em] font-serif text-[length:var(--fs-item)] leading-[1.55] text-(--ink) [&>*+*]:mt-[0.6em]\"\n        >\n          {node.children.map((child, i) => renderBlock(child, i, context))}\n        </blockquote>\n      )\n    case 'list':\n      return node.ordered ? (\n        <ol\n          key={key}\n          className=\"m-0 list-decimal ps-[1.4em] text-(--ink-2) marker:text-(--ink-3-aa) [&>li+li]:mt-[0.4em]\"\n        >\n          {node.items.map((item, i) => renderItem(item, i, context))}\n        </ol>\n      ) : (\n        // The marker is a hairline dash drawn on `::before`, not a disc: the\n        // system's only filled circle is a status dot. `article.css` draws the\n        // same dash on the same pseudo-element, so markdown dropped into an\n        // Article coincides with the stylesheet rather than doubling it.\n        <ul\n          key={key}\n          className=\"m-0 list-none ps-[1.15em] text-(--ink-2) [&>li+li]:mt-[0.4em] [&>li]:before:absolute [&>li]:before:start-[-1.15em] [&>li]:before:top-[0.85em] [&>li]:before:h-px [&>li]:before:w-[0.55em] [&>li]:before:bg-(--rule-2) [&>li]:before:content-['']\"\n        >\n          {node.items.map((item, i) => renderItem(item, i, context))}\n        </ul>\n      )\n  }\n}\n\nexport interface MarkdownProps {\n  /** The Markdown source. A string — not nodes, not HTML. */\n  children: string\n  /**\n   * The level the document's top heading renders at.\n   *\n   * Markdown is written as a document, so its `#` is an `<h1>`. Dropped into a\n   * page that already has one — inside an `<h2>` section, in a card, under a\n   * dialog's title — that produces two first-level headings and an outline a\n   * screen reader cannot navigate. Set this to the level BELOW the heading the\n   * content sits under, and every level in the document shifts with it.\n   */\n  headingLevelStart?: MarkdownHeadingLevel\n  /**\n   * Namespaces the generated heading ids.\n   *\n   * Two documents on one page both containing \"Installation\" would otherwise\n   * both claim `#installation`, and a fragment link would land on whichever the\n   * browser found first.\n   */\n  idPrefix?: string\n  /**\n   * Adds the system's outbound arrow to links that leave for another site.\n   *\n   * Off by default, and opt-in rather than automatic for two reasons. The mark\n   * is an addition to a sentence the component did not write, which is a\n   * different kind of act from styling one. And `Markdown` has no idea what\n   * origin it is being rendered on, so \"leaves for another site\" can only mean\n   * \"carries an `http`/`https` scheme\" — an absolute link back to your own\n   * domain gets the arrow too. A caller who knows the shape of their content\n   * turns it on; one who does not should not have it turned on for them.\n   *\n   * The `rel` on an outbound link is NOT opt-in and cannot be turned off: it\n   * is the security half of the same boundary as the scheme check.\n   */\n  markExternalLinks?: boolean\n  /**\n   * Bring your own parser.\n   *\n   * Anything that turns the source into `MarkdownNode`s: markdown-it, remark,\n   * or a pipeline that already has an AST and only needs mapping. The node\n   * shapes are exported alongside the component as `MarkdownNode`,\n   * `MarkdownInline` and `MarkdownHeadingLevel`. The built-in parser covers the\n   * subset this system styles; this is the seam for tables, footnotes, task\n   * lists and everything else.\n   */\n  parse?: (source: string) => MarkdownNode[]\n}\n\n/**\n * A Markdown string, rendered as this system's components.\n *\n * The gap it fills is content nobody on this side wrote: a comment, a README, a\n * model's answer, a description out of a database. `Article` cannot take those\n * — it renders HTML through `dangerouslySetInnerHTML` and is documented as\n * trusted-input-only — and until now the alternative was a `<pre>` or a\n * sanitiser bolted onto a styling primitive.\n *\n * IT IS NOT AN `Article`, and the two do not merge. `Markdown` turns a string\n * into nodes; `Article` is the reading column those nodes can sit in. It\n * renders a FRAGMENT rather than a wrapper, which is what makes that nesting\n * work — `Article`'s rhythm is a direct-child combinator, so any element\n * between the two, `display: contents` included, would cost every paragraph\n * its spacing.\n *\n * ── It brings type and colour, and no vertical rhythm ──\n *\n * The nodes carry the system's faces and inks on their own, so one of these\n * looks right in isolation. It is not SPACED in isolation: every node renders\n * `m-0`, and a fragment has no box of its own to put a gap in. Nor does a\n * uniform `gap` on a container reproduce it, because prose spacing is not\n * uniform — `article.css` gives a heading 2.25em above and 0.75em below, which\n * is what sits a heading with the paragraph it introduces rather than midway\n * between two. For anything longer than a sentence — a comment, an answer, a\n * README — put it in `<Article as=\"div\">` and get the real rhythm for the cost\n * of one element.\n *\n * ── A fenced code block brings a client component with it ──\n *\n * The renderer is plain functions and has no state, but a fenced block renders\n * `CodeBlock`, which is `'use client'` and arrives with `useState`,\n * `useEffect` and two icons. That is correct — the copy button is the reason\n * the block exists — but \"server-rendered\" only holds for content with no code\n * in it, which is worth knowing before this goes into a route that has no\n * client bundle yet.\n *\n * ── Why there is no parser in `dependencies` ──\n *\n * Three options, and the decision is written here because it is the one a\n * reader will want to argue with.\n *\n *  1. BUNDLE A PARSER. markdown-it is the obvious pick, and the documentation\n *     site already depends on it — but the site is an app and this is a\n *     library, where the dependency list is part of the contract every consumer\n *     signs. Measured with the same esbuild pass `check:size` uses, markdown-it\n *     is 110.7 kB minified against the 38.9 kB this package had left under its\n *     bundle budget. It is not close, and \"we will raise the budget\" is how a\n *     design system becomes the largest thing on a page.\n *  2. TAKE PRE-PARSED HTML, the way `Article` does. Cheapest, and wrong for the\n *     case this exists for: HTML from an untrusted author is the input this is\n *     supposed to make safe, and it cannot carry `headingLevelStart` or stable\n *     heading ids without the component parsing markup back apart to find them.\n *  3. PARSE THE SUBSET WE STYLE, and take a `parse` function for the rest.\n *     Chosen. The block grammar is line-based and small (see `parse.ts`), it\n *     emits React elements rather than markup — so there is no\n *     `dangerouslySetInnerHTML` in this path at all, no sanitiser to configure\n *     and no sanitiser to get wrong — and a consumer who needs tables,\n *     footnotes or task lists passes `parse` and keeps every other promise the\n *     component makes.\n *\n * Headings carry an `id` slugged from their own text and deduplicated within\n * the document, so a table of contents can link to them without the caller\n * post-processing the DOM to find out where they went.\n *\n * A link in the source is validated here, at the boundary: a scheme that is not\n * `http`, `https`, `mailto` or `tel` never becomes a link, and one that leaves\n * for another site carries `rel=\"noreferrer nofollow\"` — so an author the page\n * does not trust cannot spend its ranking or read its URL out of the `Referer`.\n *\n * @example\n * // A comment body or an answer: the reading column is what spaces it.\n * <Article as=\"div\">\n *   <Markdown headingLevelStart={3} idPrefix=\"answer\">{answer}</Markdown>\n * </Article>\n * @example\n * // A whole document, in the column it was written for.\n * <Article><Markdown>{readme}</Markdown></Article>\n * @example\n * // Tables and footnotes, via the consumer's own pipeline.\n * <Markdown parse={(source) => toMarkdownNodes(md.parse(source, {}))}>{post}</Markdown>\n */\nexport function Markdown({\n  children,\n  headingLevelStart = 1,\n  idPrefix,\n  markExternalLinks = false,\n  parse = parseMarkdown,\n}: MarkdownProps) {\n  const context: RenderContext = { headingLevelStart, idPrefix, markExternalLinks, taken: new Map() }\n  const nodes = typeof children === 'string' ? parse(children) : []\n\n  return <Fragment>{nodes.map((node, index) => renderBlock(node, index, context))}</Fragment>\n}\n\nexport default Markdown\n"],"mappings":"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","names":["parseMarkdown","slugify"]}

package/dist/components/Markdown/inline.d.ts

@@ -0,0 +1,29 @@
+import { MarkdownInline } from './nodes.js';
+
+/**
+ * The schemes a link is allowed to carry, and the reason this function exists
+ * at all.
+ *
+ * `Markdown` renders strings nobody on this side wrote — a comment, a README,
+ * a model's answer — so the href is untrusted input arriving at a system
+ * boundary and is validated there (HAR-SEC-002). A URL with no scheme is
+ * relative and cannot reach a scheme handler, so it passes; a URL WITH one has
+ * to be on this list, which is what turns `[click](javascript:…)` into plain
+ * text instead of a working control.
+ *
+ * @returns the href, or `undefined` when it must not be linked.
+ */
+declare function safeHref(raw: string): string | undefined;
+/**
+ * Whether a validated href can leave this origin.
+ *
+ * `safeHref` decides what may be linked at all; this decides what a link is
+ * allowed to take with it. Only `http` and `https` reach another site — a
+ * relative href resolves against the page, and `mailto:` and `tel:` hand the
+ * URL to a handler rather than to a document that could read a `Referer`.
+ */
+declare function isOutbound(href: string): boolean;
+/** One run of text, as inline nodes. */
+declare function parseInline(text: string): MarkdownInline[];
+
+export { isOutbound, parseInline, safeHref };

package/dist/components/Markdown/inline.js

@@ -0,0 +1,74 @@
+function safeHref(raw) {
+  const href = raw.trim();
+  if (href === "") return void 0;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(href);
+  if (!scheme) return href;
+  return ["http", "https", "mailto", "tel"].includes((scheme[1] ?? "").toLowerCase()) ? href : void 0;
+}
+function isOutbound(href) {
+  return /^https?:/i.test(href);
+}
+const INLINE = new RegExp(
+  [
+    // `\x60` is a backtick. Written as an escape because these are raw strings
+    // in a template literal, where a real backtick needs escaping and the raw
+    // form then keeps the backslash — which is a different pattern than the one
+    // it looks like.
+    String.raw`(?<escape>\\[\\\x60*_{}[\]()#+\-.!>])`,
+    String.raw`(?<ticks>\x60+)(?<code>[\s\S]*?)\k<ticks>`,
+    String.raw`!\[(?<alt>[^\]]*)\]\((?<src>[^)\s]+)\)`,
+    String.raw`\[(?<text>[^\]]*)\]\((?<href>[^)\s]+)\)`,
+    String.raw`\*\*(?<strongStar>[\s\S]+?)\*\*`,
+    String.raw`(?<![A-Za-z0-9])__(?<strongUnderscore>[\s\S]+?)__(?![A-Za-z0-9])`,
+    String.raw`\*(?<emphasisStar>[^*\n][\s\S]*?)\*`,
+    String.raw`(?<![A-Za-z0-9])_(?<emphasisUnderscore>[^_\n][\s\S]*?)_(?![A-Za-z0-9])`
+  ].join("|"),
+  "g"
+);
+function tokenOf(groups) {
+  if (groups.escape !== void 0) return { type: "text", value: groups.escape.slice(1) };
+  if (groups.code !== void 0) return { type: "code", value: groups.code.trim() };
+  if (groups.src !== void 0) {
+    const src = safeHref(groups.src);
+    return src ? { type: "image", src, alt: groups.alt ?? "" } : { type: "text", value: groups.alt ?? "" };
+  }
+  if (groups.href !== void 0) {
+    const href = safeHref(groups.href);
+    const children = parseInline(groups.text ?? "");
+    return href ? { type: "link", href, children } : { type: "text", value: groups.text ?? "" };
+  }
+  const strong = groups.strongStar ?? groups.strongUnderscore;
+  if (strong !== void 0) return { type: "strong", children: parseInline(strong) };
+  return {
+    type: "emphasis",
+    children: parseInline(groups.emphasisStar ?? groups.emphasisUnderscore ?? "")
+  };
+}
+function merge(nodes) {
+  const out = [];
+  for (const node of nodes) {
+    const last = out[out.length - 1];
+    if (node.type === "text" && node.value === "") continue;
+    if (node.type === "text" && last?.type === "text") last.value += node.value;
+    else out.push(node);
+  }
+  return out;
+}
+function parseInline(text) {
+  const nodes = [];
+  let cursor = 0;
+  for (const match of text.matchAll(INLINE)) {
+    const at = match.index;
+    if (at > cursor) nodes.push({ type: "text", value: text.slice(cursor, at) });
+    nodes.push(tokenOf(match.groups ?? {}));
+    cursor = at + match[0].length;
+  }
+  if (cursor < text.length) nodes.push({ type: "text", value: text.slice(cursor) });
+  return merge(nodes);
+}
+export {
+  isOutbound,
+  parseInline,
+  safeHref
+};
+//# sourceMappingURL=inline.js.map

package/dist/components/Markdown/inline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Markdown/inline.ts"],"sourcesContent":["import type { MarkdownInline } from './nodes'\n\n/**\n * The schemes a link is allowed to carry, and the reason this function exists\n * at all.\n *\n * `Markdown` renders strings nobody on this side wrote — a comment, a README,\n * a model's answer — so the href is untrusted input arriving at a system\n * boundary and is validated there (HAR-SEC-002). A URL with no scheme is\n * relative and cannot reach a scheme handler, so it passes; a URL WITH one has\n * to be on this list, which is what turns `[click](javascript:…)` into plain\n * text instead of a working control.\n *\n * @returns the href, or `undefined` when it must not be linked.\n */\nexport function safeHref(raw: string): string | undefined {\n  const href = raw.trim()\n  if (href === '') return undefined\n  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(href)\n  if (!scheme) return href\n  return ['http', 'https', 'mailto', 'tel'].includes((scheme[1] ?? '').toLowerCase())\n    ? href\n    : undefined\n}\n\n/**\n * Whether a validated href can leave this origin.\n *\n * `safeHref` decides what may be linked at all; this decides what a link is\n * allowed to take with it. Only `http` and `https` reach another site — a\n * relative href resolves against the page, and `mailto:` and `tel:` hand the\n * URL to a handler rather than to a document that could read a `Referer`.\n */\nexport function isOutbound(href: string): boolean {\n  return /^https?:/i.test(href)\n}\n\n/**\n * Every inline construct, in one ordered alternation.\n *\n * Order is the precedence: an escape beats everything, a code span beats the\n * emphasis markers inside it, an image beats the link it otherwise looks like,\n * and `**` beats `*`. One pass with `matchAll` rather than a nest of\n * `String.replace` calls, because replace-based Markdown is how a link's URL\n * ends up italicised by an underscore in a query string.\n *\n * The `_` forms carry word-boundary guards and the `*` forms do not, which is\n * the rule every implementation converges on: `snake_case_name` is an\n * identifier, and `a*b*c` is emphasis.\n */\nconst INLINE = new RegExp(\n  [\n    // `\\x60` is a backtick. Written as an escape because these are raw strings\n    // in a template literal, where a real backtick needs escaping and the raw\n    // form then keeps the backslash — which is a different pattern than the one\n    // it looks like.\n    String.raw`(?<escape>\\\\[\\\\\\x60*_{}[\\]()#+\\-.!>])`,\n    String.raw`(?<ticks>\\x60+)(?<code>[\\s\\S]*?)\\k<ticks>`,\n    String.raw`!\\[(?<alt>[^\\]]*)\\]\\((?<src>[^)\\s]+)\\)`,\n    String.raw`\\[(?<text>[^\\]]*)\\]\\((?<href>[^)\\s]+)\\)`,\n    String.raw`\\*\\*(?<strongStar>[\\s\\S]+?)\\*\\*`,\n    String.raw`(?<![A-Za-z0-9])__(?<strongUnderscore>[\\s\\S]+?)__(?![A-Za-z0-9])`,\n    String.raw`\\*(?<emphasisStar>[^*\\n][\\s\\S]*?)\\*`,\n    String.raw`(?<![A-Za-z0-9])_(?<emphasisUnderscore>[^_\\n][\\s\\S]*?)_(?![A-Za-z0-9])`,\n  ].join('|'),\n  'g',\n)\n\n/** One match, as the node it stands for. */\nfunction tokenOf(groups: Record<string, string | undefined>): MarkdownInline {\n  if (groups.escape !== undefined) return { type: 'text', value: groups.escape.slice(1) }\n  if (groups.code !== undefined) return { type: 'code', value: groups.code.trim() }\n\n  if (groups.src !== undefined) {\n    const src = safeHref(groups.src)\n    // A blocked image degrades to its own alt text, which is the description\n    // the author wrote for exactly this situation.\n    return src ? { type: 'image', src, alt: groups.alt ?? '' } : { type: 'text', value: groups.alt ?? '' }\n  }\n\n  if (groups.href !== undefined) {\n    const href = safeHref(groups.href)\n    const children = parseInline(groups.text ?? '')\n    return href ? { type: 'link', href, children } : { type: 'text', value: groups.text ?? '' }\n  }\n\n  const strong = groups.strongStar ?? groups.strongUnderscore\n  if (strong !== undefined) return { type: 'strong', children: parseInline(strong) }\n\n  return {\n    type: 'emphasis',\n    children: parseInline(groups.emphasisStar ?? groups.emphasisUnderscore ?? ''),\n  }\n}\n\n/** Adjacent text runs are one run; an empty one is nothing at all. */\nfunction merge(nodes: MarkdownInline[]): MarkdownInline[] {\n  const out: MarkdownInline[] = []\n  for (const node of nodes) {\n    const last = out[out.length - 1]\n    if (node.type === 'text' && node.value === '') continue\n    if (node.type === 'text' && last?.type === 'text') last.value += node.value\n    else out.push(node)\n  }\n  return out\n}\n\n/** One run of text, as inline nodes. */\nexport function parseInline(text: string): MarkdownInline[] {\n  const nodes: MarkdownInline[] = []\n  let cursor = 0\n\n  for (const match of text.matchAll(INLINE)) {\n    const at = match.index\n    if (at > cursor) nodes.push({ type: 'text', value: text.slice(cursor, at) })\n    nodes.push(tokenOf(match.groups ?? {}))\n    cursor = at + match[0].length\n  }\n  if (cursor < text.length) nodes.push({ type: 'text', value: text.slice(cursor) })\n\n  return merge(nodes)\n}\n"],"mappings":"AAeO,SAAS,SAAS,KAAiC;AACxD,QAAM,OAAO,IAAI,KAAK;AACtB,MAAI,SAAS,GAAI,QAAO;AACxB,QAAM,SAAS,yBAAyB,KAAK,IAAI;AACjD,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,CAAC,QAAQ,SAAS,UAAU,KAAK,EAAE,UAAU,OAAO,CAAC,KAAK,IAAI,YAAY,CAAC,IAC9E,OACA;AACN;AAUO,SAAS,WAAW,MAAuB;AAChD,SAAO,YAAY,KAAK,IAAI;AAC9B;AAeA,MAAM,SAAS,IAAI;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT,EAAE,KAAK,GAAG;AAAA,EACV;AACF;AAGA,SAAS,QAAQ,QAA4D;AAC3E,MAAI,OAAO,WAAW,OAAW,QAAO,EAAE,MAAM,QAAQ,OAAO,OAAO,OAAO,MAAM,CAAC,EAAE;AACtF,MAAI,OAAO,SAAS,OAAW,QAAO,EAAE,MAAM,QAAQ,OAAO,OAAO,KAAK,KAAK,EAAE;AAEhF,MAAI,OAAO,QAAQ,QAAW;AAC5B,UAAM,MAAM,SAAS,OAAO,GAAG;AAG/B,WAAO,MAAM,EAAE,MAAM,SAAS,KAAK,KAAK,OAAO,OAAO,GAAG,IAAI,EAAE,MAAM,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,EACvG;AAEA,MAAI,OAAO,SAAS,QAAW;AAC7B,UAAM,OAAO,SAAS,OAAO,IAAI;AACjC,UAAM,WAAW,YAAY,OAAO,QAAQ,EAAE;AAC9C,WAAO,OAAO,EAAE,MAAM,QAAQ,MAAM,SAAS,IAAI,EAAE,MAAM,QAAQ,OAAO,OAAO,QAAQ,GAAG;AAAA,EAC5F;AAEA,QAAM,SAAS,OAAO,cAAc,OAAO;AAC3C,MAAI,WAAW,OAAW,QAAO,EAAE,MAAM,UAAU,UAAU,YAAY,MAAM,EAAE;AAEjF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,YAAY,OAAO,gBAAgB,OAAO,sBAAsB,EAAE;AAAA,EAC9E;AACF;AAGA,SAAS,MAAM,OAA2C;AACxD,QAAM,MAAwB,CAAC;AAC/B,aAAW,QAAQ,OAAO;AACxB,UAAM,OAAO,IAAI,IAAI,SAAS,CAAC;AAC/B,QAAI,KAAK,SAAS,UAAU,KAAK,UAAU,GAAI;AAC/C,QAAI,KAAK,SAAS,UAAU,MAAM,SAAS,OAAQ,MAAK,SAAS,KAAK;AAAA,QACjE,KAAI,KAAK,IAAI;AAAA,EACpB;AACA,SAAO;AACT;AAGO,SAAS,YAAY,MAAgC;AAC1D,QAAM,QAA0B,CAAC;AACjC,MAAI,SAAS;AAEb,aAAW,SAAS,KAAK,SAAS,MAAM,GAAG;AACzC,UAAM,KAAK,MAAM;AACjB,QAAI,KAAK,OAAQ,OAAM,KAAK,EAAE,MAAM,QAAQ,OAAO,KAAK,MAAM,QAAQ,EAAE,EAAE,CAAC;AAC3E,UAAM,KAAK,QAAQ,MAAM,UAAU,CAAC,CAAC,CAAC;AACtC,aAAS,KAAK,MAAM,CAAC,EAAE;AAAA,EACzB;AACA,MAAI,SAAS,KAAK,OAAQ,OAAM,KAAK,EAAE,MAAM,QAAQ,OAAO,KAAK,MAAM,MAAM,EAAE,CAAC;AAEhF,SAAO,MAAM,KAAK;AACpB;","names":[]}

package/dist/components/Markdown/nodes.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The node shapes `Markdown` renders, and the contract a custom `parse`
+ * function has to meet.
+ *
+ * Deliberately small. It is not an attempt at mdast: it is the set of blocks
+ * this design system has an opinion about, which is the set `article.css`
+ * already styles. Anything outside it — footnotes, tables, task lists,
+ * definition lists, embedded HTML — is a `parse` away, and the point of naming
+ * the shapes here rather than accepting a foreign AST is that a consumer
+ * bringing markdown-it or remark maps into a surface the package can promise
+ * to keep rendering.
+ */
+type MarkdownHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** A run of text, and the four things that can happen inside one. */
+type MarkdownInline = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'code';
+    value: string;
+} | {
+    type: 'strong';
+    children: MarkdownInline[];
+} | {
+    type: 'emphasis';
+    children: MarkdownInline[];
+} | {
+    type: 'link';
+    href: string;
+    children: MarkdownInline[];
+} | {
+    type: 'image';
+    src: string;
+    alt: string;
+};
+/**
+ * A block.
+ *
+ * `list` items and `quote` children are blocks in turn, which is what makes a
+ * nested list, or a fence inside a bullet, fall out of the same recursion
+ * rather than needing a case of its own.
+ */
+type MarkdownNode = {
+    type: 'heading';
+    level: MarkdownHeadingLevel;
+    children: MarkdownInline[];
+} | {
+    type: 'paragraph';
+    children: MarkdownInline[];
+} | {
+    type: 'code';
+    value: string;
+    lang?: string;
+} | {
+    type: 'list';
+    ordered: boolean;
+    items: MarkdownNode[][];
+} | {
+    type: 'quote';
+    children: MarkdownNode[];
+} | {
+    type: 'rule';
+};
+
+export type { MarkdownHeadingLevel, MarkdownInline, MarkdownNode };

package/dist/components/Markdown/nodes.js

@@ -0,0 +1 @@
+//# sourceMappingURL=nodes.js.map

package/dist/components/Markdown/nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/Markdown/parse.d.ts

@@ -0,0 +1,24 @@
+import { MarkdownNode } from './nodes.js';
+
+/**
+ * A Markdown string, as nodes.
+ *
+ * The supported subset, stated so nobody has to find its edges by experiment:
+ * ATX headings, paragraphs, fenced code with an info string, blockquotes,
+ * ordered and unordered lists including nesting, thematic breaks — and inline
+ * emphasis, strong, code spans, links, images and backslash escapes.
+ *
+ * What is NOT here, and is deliberate: tables, footnotes, task lists, setext
+ * headings, reference links, hard line breaks, and raw HTML. Raw HTML is the
+ * one that matters — it is left as text rather than rendered, so this path has
+ * no `dangerouslySetInnerHTML` anywhere in it and cannot be talked into one. A
+ * document that needs the rest brings its own parser through `Markdown`'s
+ * `parse` prop.
+ *
+ * Never throws. Malformed input is not an error condition here — it is Tuesday
+ * — so an unterminated fence, a stray bracket or an empty string each produce
+ * the nodes they can and no more.
+ */
+declare function parseMarkdown(source: string): MarkdownNode[];
+
+export { parseMarkdown };

package/dist/components/Markdown/parse.js

@@ -0,0 +1,110 @@
+import { parseInline } from "./inline.js";
+const FENCE = /^ {0,3}(`{3,}|~{3,})\s*([^\s`]*)\s*$/;
+const HEADING = /^ {0,3}(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^ {0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/;
+const QUOTE = /^ {0,3}>\s?(.*)$/;
+const ITEM = /^(\s*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
+const lineAt = (lines, index) => lines[index] ?? "";
+const opensBlock = (line) => HEADING.test(line) || RULE.test(line) || FENCE.test(line) || QUOTE.test(line) || ITEM.test(line);
+const closesFence = (line, marker) => new RegExp(`^ {0,3}${marker.charAt(0)}{${marker.length},}\\s*$`).test(line);
+function takeFence(lines, start, out) {
+  const fence = FENCE.exec(lineAt(lines, start));
+  if (!fence) return start + 1;
+  const [, marker = "", info = ""] = fence;
+  const body = [];
+  let i = start + 1;
+  while (i < lines.length && !closesFence(lineAt(lines, i), marker)) {
+    body.push(lineAt(lines, i));
+    i += 1;
+  }
+  out.push({ type: "code", value: body.join("\n"), lang: info || void 0 });
+  return i < lines.length ? i + 1 : i;
+}
+function takeQuote(lines, start, out) {
+  const body = [];
+  let i = start;
+  while (i < lines.length) {
+    const quoted = QUOTE.exec(lineAt(lines, i));
+    if (!quoted) break;
+    body.push(quoted[1] ?? "");
+    i += 1;
+  }
+  out.push({ type: "quote", children: parseBlocks(body) });
+  return i;
+}
+function takeList(lines, start, out) {
+  const first = ITEM.exec(lineAt(lines, start));
+  if (!first) return start + 1;
+  const baseIndent = (first[1] ?? "").length;
+  const ordered = /\d/.test(first[2] ?? "");
+  const items = [];
+  let current;
+  let indent = 0;
+  let i = start;
+  while (i < lines.length) {
+    const line = lineAt(lines, i);
+    const item = ITEM.exec(line);
+    const [, gap = "", bullet = "", rest = ""] = item ?? [];
+    if (item && gap.length <= baseIndent) {
+      if (ordered !== /\d/.test(bullet)) break;
+      if (current) items.push(parseBlocks(current));
+      indent = gap.length + bullet.length + 1;
+      current = [rest];
+      i += 1;
+      continue;
+    }
+    if (current !== void 0 && (line.trim() === "" || line.startsWith(" ".repeat(indent)))) {
+      current.push(line.slice(indent));
+      i += 1;
+      continue;
+    }
+    break;
+  }
+  if (current) items.push(parseBlocks(current));
+  out.push({ type: "list", ordered, items });
+  return i;
+}
+function takeParagraph(lines, start, out) {
+  const body = [];
+  let i = start;
+  for (let line = lineAt(lines, i); i < lines.length; line = lineAt(lines, i)) {
+    if (line.trim() === "" || opensBlock(line)) break;
+    body.push(line.trim());
+    i += 1;
+  }
+  if (body.length === 0) return start + 1;
+  out.push({ type: "paragraph", children: parseInline(body.join(" ")) });
+  return i;
+}
+function parseBlocks(lines) {
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lineAt(lines, i);
+    const heading = HEADING.exec(line);
+    if (line.trim() === "") i += 1;
+    else if (FENCE.test(line)) i = takeFence(lines, i, out);
+    else if (heading) {
+      out.push({
+        type: "heading",
+        level: (heading[1] ?? "#").length,
+        children: parseInline(heading[2] ?? "")
+      });
+      i += 1;
+    } else if (RULE.test(line)) {
+      out.push({ type: "rule" });
+      i += 1;
+    } else if (QUOTE.test(line)) i = takeQuote(lines, i, out);
+    else if (ITEM.test(line)) i = takeList(lines, i, out);
+    else i = takeParagraph(lines, i, out);
+  }
+  return out;
+}
+function parseMarkdown(source) {
+  if (typeof source !== "string" || source.trim() === "") return [];
+  return parseBlocks(source.replace(/\r\n?/g, "\n").split("\n"));
+}
+export {
+  parseMarkdown
+};
+//# sourceMappingURL=parse.js.map

package/dist/components/Markdown/parse.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Markdown/parse.ts"],"sourcesContent":["import { parseInline } from './inline'\nimport type { MarkdownHeadingLevel, MarkdownNode } from './nodes'\n\n/**\n * The block grammar, as the six line shapes it recognises.\n *\n * Line-based rather than character-based, which is what keeps this small enough\n * to live in a design system: Markdown's blocks are decided by how a line\n * STARTS, and the interesting half — emphasis, links, code spans — is the\n * inline pass, which runs once per block.\n */\nconst FENCE = /^ {0,3}(`{3,}|~{3,})\\s*([^\\s`]*)\\s*$/\nconst HEADING = /^ {0,3}(#{1,6})\\s+(.*?)\\s*#*\\s*$/\nconst RULE = /^ {0,3}(?:-{3,}|\\*{3,}|_{3,})\\s*$/\nconst QUOTE = /^ {0,3}>\\s?(.*)$/\nconst ITEM = /^(\\s*)([-*+]|\\d{1,9}[.)])\\s+(.*)$/\n\n/**\n * A line, or the empty string past the end.\n *\n * `noUncheckedIndexedAccess` is on, and every scanner below walks off the end\n * of the array by construction — reading one line ahead is how a list decides\n * whether a blank line ended it. An empty string matches none of the patterns,\n * which is exactly the answer wanted there.\n */\nconst lineAt = (lines: string[], index: number): string => lines[index] ?? ''\n\nconst opensBlock = (line: string): boolean =>\n  HEADING.test(line) || RULE.test(line) || FENCE.test(line) || QUOTE.test(line) || ITEM.test(line)\n\n/** A fence closes on the same character, at the same length or longer. */\nconst closesFence = (line: string, marker: string): boolean =>\n  new RegExp(`^ {0,3}${marker.charAt(0)}{${marker.length},}\\\\s*$`).test(line)\n\nfunction takeFence(lines: string[], start: number, out: MarkdownNode[]): number {\n  const fence = FENCE.exec(lineAt(lines, start))\n  if (!fence) return start + 1\n  const [, marker = '', info = ''] = fence\n\n  const body: string[] = []\n  let i = start + 1\n  while (i < lines.length && !closesFence(lineAt(lines, i), marker)) {\n    body.push(lineAt(lines, i))\n    i += 1\n  }\n  out.push({ type: 'code', value: body.join('\\n'), lang: info || undefined })\n\n  // An unclosed fence runs to the end of the document rather than throwing.\n  // That is what CommonMark specifies, and it is also the exact shape of a\n  // model's answer that hit its token limit mid-snippet.\n  return i < lines.length ? i + 1 : i\n}\n\nfunction takeQuote(lines: string[], start: number, out: MarkdownNode[]): number {\n  const body: string[] = []\n  let i = start\n  while (i < lines.length) {\n    const quoted = QUOTE.exec(lineAt(lines, i))\n    if (!quoted) break\n    body.push(quoted[1] ?? '')\n    i += 1\n  }\n  // Recursive, so a list, a fence or a nested quote inside a blockquote is the\n  // same code path rather than five more cases.\n  out.push({ type: 'quote', children: parseBlocks(body) })\n  return i\n}\n\nfunction takeList(lines: string[], start: number, out: MarkdownNode[]): number {\n  const first = ITEM.exec(lineAt(lines, start))\n  if (!first) return start + 1\n\n  const baseIndent = (first[1] ?? '').length\n  const ordered = /\\d/.test(first[2] ?? '')\n  const items: MarkdownNode[][] = []\n  let current: string[] | undefined\n  let indent = 0\n  let i = start\n\n  while (i < lines.length) {\n    const line = lineAt(lines, i)\n    const item = ITEM.exec(line)\n    const [, gap = '', bullet = '', rest = ''] = item ?? []\n\n    if (item && gap.length <= baseIndent) {\n      // A bullet directly under a number is a second list, not a stray item.\n      if (ordered !== /\\d/.test(bullet)) break\n      if (current) items.push(parseBlocks(current))\n      indent = gap.length + bullet.length + 1\n      current = [rest]\n      i += 1\n      continue\n    }\n    if (current !== undefined && (line.trim() === '' || line.startsWith(' '.repeat(indent)))) {\n      current.push(line.slice(indent))\n      i += 1\n      continue\n    }\n    break\n  }\n\n  if (current) items.push(parseBlocks(current))\n  out.push({ type: 'list', ordered, items })\n  return i\n}\n\nfunction takeParagraph(lines: string[], start: number, out: MarkdownNode[]): number {\n  const body: string[] = []\n  let i = start\n  for (let line = lineAt(lines, i); i < lines.length; line = lineAt(lines, i)) {\n    if (line.trim() === '' || opensBlock(line)) break\n    body.push(line.trim())\n    i += 1\n  }\n  if (body.length === 0) return start + 1\n\n  // Soft line breaks join with a space, which is what Markdown means by them:\n  // a paragraph hard-wrapped at 80 columns is one paragraph.\n  out.push({ type: 'paragraph', children: parseInline(body.join(' ')) })\n  return i\n}\n\nfunction parseBlocks(lines: string[]): MarkdownNode[] {\n  const out: MarkdownNode[] = []\n  let i = 0\n  while (i < lines.length) {\n    const line = lineAt(lines, i)\n    const heading = HEADING.exec(line)\n\n    if (line.trim() === '') i += 1\n    else if (FENCE.test(line)) i = takeFence(lines, i, out)\n    else if (heading) {\n      out.push({\n        type: 'heading',\n        level: (heading[1] ?? '#').length as MarkdownHeadingLevel,\n        children: parseInline(heading[2] ?? ''),\n      })\n      i += 1\n    } else if (RULE.test(line)) {\n      out.push({ type: 'rule' })\n      i += 1\n    } else if (QUOTE.test(line)) i = takeQuote(lines, i, out)\n    else if (ITEM.test(line)) i = takeList(lines, i, out)\n    else i = takeParagraph(lines, i, out)\n  }\n  return out\n}\n\n/**\n * A Markdown string, as nodes.\n *\n * The supported subset, stated so nobody has to find its edges by experiment:\n * ATX headings, paragraphs, fenced code with an info string, blockquotes,\n * ordered and unordered lists including nesting, thematic breaks — and inline\n * emphasis, strong, code spans, links, images and backslash escapes.\n *\n * What is NOT here, and is deliberate: tables, footnotes, task lists, setext\n * headings, reference links, hard line breaks, and raw HTML. Raw HTML is the\n * one that matters — it is left as text rather than rendered, so this path has\n * no `dangerouslySetInnerHTML` anywhere in it and cannot be talked into one. A\n * document that needs the rest brings its own parser through `Markdown`'s\n * `parse` prop.\n *\n * Never throws. Malformed input is not an error condition here — it is Tuesday\n * — so an unterminated fence, a stray bracket or an empty string each produce\n * the nodes they can and no more.\n */\nexport function parseMarkdown(source: string): MarkdownNode[] {\n  if (typeof source !== 'string' || source.trim() === '') return []\n  return parseBlocks(source.replace(/\\r\\n?/g, '\\n').split('\\n'))\n}\n"],"mappings":"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","names":[]}

package/dist/components/Markdown/slug.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A heading's text, as an anchor id.
+ *
+ * Exported because a table of contents has to arrive at the SAME id the
+ * rendered heading got, and the alternative is building the list by reading it
+ * back off the DOM — which a server render does not have.
+ *
+ * Letters and numbers survive in any script (`\p{L}`, not `a-z`), so a Chinese
+ * or Greek heading keeps its characters instead of slugging away to nothing and
+ * colliding with every other one on the page. `Markdown` deduplicates what does
+ * collide by appending `-2`, `-3`, and so on in document order.
+ */
+declare function slugify(text: string): string;
+
+export { slugify };

package/dist/components/Markdown/slug.js

@@ -0,0 +1,7 @@
+function slugify(text) {
+  return text.trim().toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "");
+}
+export {
+  slugify
+};
+//# sourceMappingURL=slug.js.map

package/dist/components/Markdown/slug.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Markdown/slug.ts"],"sourcesContent":["/**\n * A heading's text, as an anchor id.\n *\n * Exported because a table of contents has to arrive at the SAME id the\n * rendered heading got, and the alternative is building the list by reading it\n * back off the DOM — which a server render does not have.\n *\n * Letters and numbers survive in any script (`\\p{L}`, not `a-z`), so a Chinese\n * or Greek heading keeps its characters instead of slugging away to nothing and\n * colliding with every other one on the page. `Markdown` deduplicates what does\n * collide by appending `-2`, `-3`, and so on in document order.\n */\nexport function slugify(text: string): string {\n  return text\n    .trim()\n    .toLowerCase()\n    .replace(/[^\\p{L}\\p{N}]+/gu, '-')\n    .replace(/^-+|-+$/g, '')\n}\n"],"mappings":"AAYO,SAAS,QAAQ,MAAsB;AAC5C,SAAO,KACJ,KAAK,EACL,YAAY,EACZ,QAAQ,oBAAoB,GAAG,EAC/B,QAAQ,YAAY,EAAE;AAC3B;","names":[]}

package/dist/components/Metric/Metric.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { StatusTone } from '../StatusDot/StatusDot.js';
+
+interface MetricProps extends HTMLAttributes<HTMLElement> {
+    /** What the figure counts. */
+    label: ReactNode;
+    /** The figure, already formatted — this does not guess a unit or a locale. */
+    value: ReactNode;
+    /** One line of context. A figure without it is a number, not a reading. */
+    detail?: ReactNode;
+    /**
+     * How the reading stands. Drawn as a dot beside the label, and only ever a
+     * SECOND carrier: the dot is `aria-hidden`, so whatever the tone means has to
+     * be in `detail` as well or it reaches nobody who cannot see it.
+     */
+    tone?: StatusTone;
+    /** A sparkline, a denominator, a caveat. Sits under the figure. */
+    aside?: ReactNode;
+    /**
+     * Render `children` as the tile instead of the `<article>`, keeping these
+     * styles — how a linkable tile gets a router's own `Link` without this
+     * package importing one.
+     *
+     * The slotted element must take no children of its own: the label, the figure
+     * and everything under them are injected INTO it, which is the point. A whole
+     * tile inside one link also means the link's accessible name is every word in
+     * it, read in order — "Rows, 63,851, newest yesterday" — so keep `detail`
+     * short enough to be heard as part of a link.
+     */
+    asChild?: boolean;
+    /** The element the tile becomes under `asChild`. Ignored without it. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * One reading, on a plate: a label, a figure, and what qualifies it.
+ *
+ * Distinct from `BigNumber`, which is the same idea at headline scale for the
+ * ONE figure a view is about, and which needs the charts entry. This is the
+ * tile that appears four across on a console: smaller, monospaced rather than
+ * editorial, and carrying two things `BigNumber` has nowhere for — a status
+ * tone, and a free slot under the number that is not a delta. Those two are the
+ * whole reason it exists; a dashboard whose tiles have to be a `<div>` because
+ * the delta does not apply is a dashboard with two tile designs in it.
+ *
+ * The figure is monospace and tabular by construction, because four of these in
+ * a row are read down the column as much as along it, and proportional digits
+ * put the same magnitude at two different widths.
+ *
+ * @example
+ * <Metric label="Rows" value="63,851" detail="newest yesterday" tone="success" />
+ * @example
+ * // A tile that is also a link, with the router's own component.
+ * <Metric asChild label="Jobs" value="12" detail="3 waiting">
+ *   <Link href="/jobs" />
+ * </Metric>
+ */
+declare function Metric({ label, value, detail, tone, aside, asChild, children, className, ...rest }: MetricProps): react.JSX.Element;
+
+export { Metric, type MetricProps, Metric as default };

package/dist/components/Metric/Metric.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { StatusDot } from "../StatusDot/StatusDot.js";
+import { cn } from "../../lib/cn.js";
+const CLASS = {
+  card: "flex flex-col gap-1 rounded-(--radius) border border-(--rule) p-3",
+  /* The link affordance, and only under `asChild`: a plate that lifts under the
+     pointer when nothing happens on a click is a plate that has promised
+     something. */
+  link: "no-underline transition-colors duration-(--duration-fast) hover:border-(--rule-2) hover:bg-(--stone)",
+  head: "flex items-start justify-between gap-2",
+  label: "eyebrow text-(--ink-3-aa)",
+  /* Mono and tabular: the figures line up between tiles and stay comparable
+     down a column, which is the whole reason four of these sit in a row. */
+  value: "font-mono text-[length:var(--fs-item)] leading-none tabular-nums text-(--ink)",
+  detail: "text-xs text-(--ink-2)"
+};
+function Metric({
+  label,
+  value,
+  detail,
+  tone,
+  aside,
+  asChild = false,
+  children,
+  className,
+  ...rest
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: CLASS.head, children: [
+      /* @__PURE__ */ jsx("span", { className: CLASS.label, children: label }),
+      tone !== void 0 && /* @__PURE__ */ jsx(StatusDot, { tone, pulse: false })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: CLASS.value, children: value }),
+    detail !== void 0 && /* @__PURE__ */ jsx("p", { className: CLASS.detail, children: detail }),
+    aside
+  ] });
+  if (asChild) {
+    return /* @__PURE__ */ jsxs(Slot, { className: cn(CLASS.card, CLASS.link, className), ...rest, children: [
+      /* @__PURE__ */ jsx(Slottable, { children }),
+      body
+    ] });
+  }
+  return /* @__PURE__ */ jsx("article", { className: cn(CLASS.card, className), ...rest, children: body });
+}
+var Metric_default = Metric;
+export {
+  Metric,
+  Metric_default as default
+};
+//# sourceMappingURL=Metric.js.map

package/dist/components/Metric/Metric.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Metric/Metric.tsx"],"sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { StatusDot, type StatusTone } from '../StatusDot/StatusDot'\nimport { cn } from '../../lib/cn'\n\n/**\n * The parts, named. A caller adjusts the tile's placement with `className` and\n * never has to reach for one of these.\n */\nconst CLASS = {\n  card: 'flex flex-col gap-1 rounded-(--radius) border border-(--rule) p-3',\n  /* The link affordance, and only under `asChild`: a plate that lifts under the\n     pointer when nothing happens on a click is a plate that has promised\n     something. */\n  link: 'no-underline transition-colors duration-(--duration-fast) hover:border-(--rule-2) hover:bg-(--stone)',\n  head: 'flex items-start justify-between gap-2',\n  label: 'eyebrow text-(--ink-3-aa)',\n  /* Mono and tabular: the figures line up between tiles and stay comparable\n     down a column, which is the whole reason four of these sit in a row. */\n  value: 'font-mono text-[length:var(--fs-item)] leading-none tabular-nums text-(--ink)',\n  detail: 'text-xs text-(--ink-2)',\n} as const\n\nexport interface MetricProps extends HTMLAttributes<HTMLElement> {\n  /** What the figure counts. */\n  label: ReactNode\n  /** The figure, already formatted — this does not guess a unit or a locale. */\n  value: ReactNode\n  /** One line of context. A figure without it is a number, not a reading. */\n  detail?: ReactNode\n  /**\n   * How the reading stands. Drawn as a dot beside the label, and only ever a\n   * SECOND carrier: the dot is `aria-hidden`, so whatever the tone means has to\n   * be in `detail` as well or it reaches nobody who cannot see it.\n   */\n  tone?: StatusTone\n  /** A sparkline, a denominator, a caveat. Sits under the figure. */\n  aside?: ReactNode\n  /**\n   * Render `children` as the tile instead of the `<article>`, keeping these\n   * styles — how a linkable tile gets a router's own `Link` without this\n   * package importing one.\n   *\n   * The slotted element must take no children of its own: the label, the figure\n   * and everything under them are injected INTO it, which is the point. A whole\n   * tile inside one link also means the link's accessible name is every word in\n   * it, read in order — \"Rows, 63,851, newest yesterday\" — so keep `detail`\n   * short enough to be heard as part of a link.\n   */\n  asChild?: boolean\n  /** The element the tile becomes under `asChild`. Ignored without it. */\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * One reading, on a plate: a label, a figure, and what qualifies it.\n *\n * Distinct from `BigNumber`, which is the same idea at headline scale for the\n * ONE figure a view is about, and which needs the charts entry. This is the\n * tile that appears four across on a console: smaller, monospaced rather than\n * editorial, and carrying two things `BigNumber` has nowhere for — a status\n * tone, and a free slot under the number that is not a delta. Those two are the\n * whole reason it exists; a dashboard whose tiles have to be a `<div>` because\n * the delta does not apply is a dashboard with two tile designs in it.\n *\n * The figure is monospace and tabular by construction, because four of these in\n * a row are read down the column as much as along it, and proportional digits\n * put the same magnitude at two different widths.\n *\n * @example\n * <Metric label=\"Rows\" value=\"63,851\" detail=\"newest yesterday\" tone=\"success\" />\n * @example\n * // A tile that is also a link, with the router's own component.\n * <Metric asChild label=\"Jobs\" value=\"12\" detail=\"3 waiting\">\n *   <Link href=\"/jobs\" />\n * </Metric>\n */\nexport function Metric({\n  label,\n  value,\n  detail,\n  tone,\n  aside,\n  asChild = false,\n  children,\n  className,\n  ...rest\n}: MetricProps) {\n  const body = (\n    <>\n      <div className={CLASS.head}>\n        <span className={CLASS.label}>{label}</span>\n        {tone !== undefined && <StatusDot tone={tone} pulse={false} />}\n      </div>\n      <p className={CLASS.value}>{value}</p>\n      {detail !== undefined && <p className={CLASS.detail}>{detail}</p>}\n      {aside}\n    </>\n  )\n\n  if (asChild) {\n    // `Slottable` rather than a bare `Slot`: a bare one hands the child the\n    // PROPS and leaves it holding its own content, and this component's content\n    // is the whole tile. Marking the child slottable makes it the element and\n    // the siblings its children, which is the only arrangement where a caller\n    // writes `<Link href=\"…\" />` and gets a tile rather than an empty box.\n    return (\n      <Slot className={cn(CLASS.card, CLASS.link, className)} {...rest}>\n        <Slottable>{children}</Slottable>\n        {body}\n      </Slot>\n    )\n  }\n\n  return (\n    <article className={cn(CLASS.card, className)} {...rest}>\n      {body}\n    </article>\n  )\n}\n\nexport default Metric\n"],"mappings":"AA0FI,mBAEI,KADF,YADF;AA1FJ,SAAS,MAAM,iBAAiB;AAEhC,SAAS,iBAAkC;AAC3C,SAAS,UAAU;AAMnB,MAAM,QAAQ;AAAA,EACZ,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA,EAGP,OAAO;AAAA,EACP,QAAQ;AACV;AAyDO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,OACJ,iCACE;AAAA,yBAAC,SAAI,WAAW,MAAM,MACpB;AAAA,0BAAC,UAAK,WAAW,MAAM,OAAQ,iBAAM;AAAA,MACpC,SAAS,UAAa,oBAAC,aAAU,MAAY,OAAO,OAAO;AAAA,OAC9D;AAAA,IACA,oBAAC,OAAE,WAAW,MAAM,OAAQ,iBAAM;AAAA,IACjC,WAAW,UAAa,oBAAC,OAAE,WAAW,MAAM,QAAS,kBAAO;AAAA,IAC5D;AAAA,KACH;AAGF,MAAI,SAAS;AAMX,WACE,qBAAC,QAAK,WAAW,GAAG,MAAM,MAAM,MAAM,MAAM,SAAS,GAAI,GAAG,MAC1D;AAAA,0BAAC,aAAW,UAAS;AAAA,MACpB;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,oBAAC,aAAQ,WAAW,GAAG,MAAM,MAAM,SAAS,GAAI,GAAG,MAChD,gBACH;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/NativeSelect/NativeSelect.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { SelectHTMLAttributes, Ref } from 'react';
+
+interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
+    invalid?: boolean;
+    ref?: Ref<HTMLSelectElement>;
+}
+/**
+ * A native `<select>`, restyled.
+ *
+ * The escape hatch, not the default — `Select` is the styled one. Reach for
+ * this where the platform's own picker is genuinely better: a very long list on
+ * a phone, a form that must work without JavaScript, a page where the last
+ * kilobyte matters. The browser gives typeahead and the mobile wheel for free,
+ * and those are real.
+ *
+ * What it cannot do is look like the rest of the system once open. The option
+ * list is drawn by the operating system, so it carries none of these tokens —
+ * which is exactly why it stopped being the default.
+ *
+ * `className` sizes the WRAPPER, not the `<select>` inside it. This is the one
+ * control here that renders two elements, and the chevron is pinned to the
+ * wrapper's end edge: a width on the select alone narrowed the box and left the
+ * arrow floating at the far side of the row. The select fills whatever the
+ * wrapper is.
+ *
+ * @example
+ * <NativeSelect defaultValue="au"><option value="au">Australia</option></NativeSelect>
+ */
+declare function NativeSelect({ invalid, className, ref, children, 'aria-invalid': ariaInvalid, ...rest }: NativeSelectProps): react.JSX.Element;
+
+export { NativeSelect, type NativeSelectProps, NativeSelect as default };

package/dist/components/NativeSelect/NativeSelect.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiArrowDownSLine } from "@remixicon/react";
+import { cn } from "../../lib/cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+function NativeSelect({
+  invalid,
+  className,
+  ref,
+  children,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) {
+  const bad = isInvalid(invalid, ariaInvalid);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref,
+        "aria-invalid": ariaInvalid ?? (invalid ? true : void 0),
+        className: cn(
+          CONTROL_BASE,
+          "cursor-pointer appearance-none pe-9",
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting
+        ),
+        ...rest,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RiArrowDownSLine,
+      {
+        size: 16,
+        className: "pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-(--ink-3-aa)",
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
+var NativeSelect_default = NativeSelect;
+export {
+  NativeSelect,
+  NativeSelect_default as default
+};
+//# sourceMappingURL=NativeSelect.js.map

package/dist/components/NativeSelect/NativeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import { RiArrowDownSLine } from '@remixicon/react'\nimport type { Ref, SelectHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\nexport interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLSelectElement>\n}\n\n/**\n * A native `<select>`, restyled.\n *\n * The escape hatch, not the default — `Select` is the styled one. Reach for\n * this where the platform's own picker is genuinely better: a very long list on\n * a phone, a form that must work without JavaScript, a page where the last\n * kilobyte matters. The browser gives typeahead and the mobile wheel for free,\n * and those are real.\n *\n * What it cannot do is look like the rest of the system once open. The option\n * list is drawn by the operating system, so it carries none of these tokens —\n * which is exactly why it stopped being the default.\n *\n * `className` sizes the WRAPPER, not the `<select>` inside it. This is the one\n * control here that renders two elements, and the chevron is pinned to the\n * wrapper's end edge: a width on the select alone narrowed the box and left the\n * arrow floating at the far side of the row. The select fills whatever the\n * wrapper is.\n *\n * @example\n * <NativeSelect defaultValue=\"au\"><option value=\"au\">Australia</option></NativeSelect>\n */\nexport function NativeSelect({\n  invalid,\n  className,\n  ref,\n  children,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: NativeSelectProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  return (\n    <div className={cn('relative', className)}>\n      <select\n        ref={ref}\n        aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n        className={cn(\n          CONTROL_BASE,\n          'cursor-pointer appearance-none pe-9',\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n        )}\n        {...rest}\n      >\n        {children}\n      </select>\n      <RiArrowDownSLine\n        size={16}\n        className=\"pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-(--ink-3-aa)\"\n        aria-hidden\n      />\n    </div>\n  )\n}\n\nexport default NativeSelect\n"],"mappings":"AA2CI,SACE,KADF;AA3CJ,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AA8BjD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM,UAAU,SAAS,WAAW;AAC1C,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,gBAAc,gBAAgB,UAAU,OAAO;AAAA,QAC/C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,MAAM,eAAe,UAAU,eAAe;AAAA,QAChD;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,QACV,eAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}