@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/LineDiff.js

@@ -0,0 +1,95 @@
+import { jsx as t, jsxs as x, Fragment as y } from "react/jsx-runtime";
+import { useMemo as D, useState as A } from "react";
+import { tv as C } from "tailwind-variants";
+import { cn as k } from "../lib/cn.js";
+import { diffLines as R, splitLines as z, DEFAULT_CONTEXT as S, foldGaps as I, gapState as T, expand as F, NOTHING as G, EXPAND_STEP as g } from "../lib/line-diff-model.js";
+import { Button as u } from "./Button.js";
+import { Icon as w } from "./Icon.js";
+import { useUiStrings as E } from "../lib/i18n/provider.js";
+import { useNumberFormat as L } from "../lib/i18n/number-format.js";
+const v = C({
+  base: "flex min-w-0 gap-2 rounded-sm px-2 py-0.5 font-mono text-xs whitespace-pre-wrap [overflow-wrap:anywhere]",
+  variants: {
+    kind: {
+      unchanged: "text-secondary",
+      removed: "bg-danger-subtle text-danger-text",
+      added: "bg-success-subtle text-success-text",
+      gap: "bg-surface-inset text-tertiary italic"
+    }
+  }
+}), U = {
+  unchanged: " ",
+  removed: "−",
+  added: "+"
+};
+function V({ before: e, after: r, label: i, context: a, expandable: s = !1, className: o }) {
+  const c = E().lineDiff, p = L(), f = D(() => R(z(e), z(r)), [e, r]);
+  if (s)
+    return /* @__PURE__ */ t(j, { lines: f, label: i, context: a ?? S, className: o });
+  const l = O(f, a);
+  return /* @__PURE__ */ t("div", { role: "group", "aria-label": i, "data-slot": "line-diff", className: k("flex flex-col", o), children: l.map(
+    (n, m) => n.kind === "gap" ? /* @__PURE__ */ x("div", { "data-slot": "line-diff-gap", className: v({ kind: "gap" }), children: [
+      /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "select-none opacity-60", children: "⋯" }),
+      /* @__PURE__ */ t("span", { children: c.unchangedLines(n.hidden, p(n.hidden)) })
+    ] }, m) : /* @__PURE__ */ t(h, { line: n }, m)
+  ) });
+}
+function h({ line: e }) {
+  return /* @__PURE__ */ x("div", { className: v({ kind: e.kind }), children: [
+    /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "shrink-0 select-none opacity-60", children: U[e.kind] }),
+    /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", children: e.text.length === 0 ? " " : e.text })
+  ] });
+}
+function j({ lines: e, label: r, context: i, className: a }) {
+  const s = D(() => I(e, i), [e, i]), [o, c] = A({}), p = new Map(s.map((l) => [l.start, l])), f = [];
+  for (let l = 0; l < e.length; l++) {
+    const n = p.get(l);
+    if (n === void 0) {
+      f.push(/* @__PURE__ */ t(h, { line: e[l] }, l));
+      continue;
+    }
+    const { top: m, bottom: M, hidden: N } = T(n, o[n.start]);
+    for (let d = n.start; d < n.start + m; d++) f.push(/* @__PURE__ */ t(h, { line: e[d] }, d));
+    N > 0 && f.push(
+      /* @__PURE__ */ t(
+        B,
+        {
+          gap: n,
+          hidden: N,
+          onExpand: (d) => c((b) => ({ ...b, [n.start]: F(n, b[n.start] ?? G, d) }))
+        },
+        `gap-${n.start}`
+      )
+    );
+    for (let d = n.end - M; d < n.end; d++) f.push(/* @__PURE__ */ t(h, { line: e[d] }, d));
+    l = n.end - 1;
+  }
+  return /* @__PURE__ */ t("div", { role: "group", "aria-label": r, "data-slot": "line-diff", className: k("flex flex-col", a), children: f });
+}
+function B({ gap: e, hidden: r, onExpand: i }) {
+  const a = E().lineDiff, s = L(), o = a.unchangedLines(r, s(r));
+  return /* @__PURE__ */ t("div", { role: "group", "aria-label": o, "data-slot": "line-diff-gap", className: k(v({ kind: "gap" }), "flex-wrap items-center not-italic"), children: r <= g ? /* @__PURE__ */ t(u, { size: "sm", variant: "ghost", leadingIcon: /* @__PURE__ */ t(w, { name: e.atStart ? "arrow-up" : "arrow-down", size: "xs" }), onClick: () => i("all"), children: a.showLines(r, s(r)) }) : /* @__PURE__ */ x(y, { children: [
+    e.atStart ? null : /* @__PURE__ */ t(u, { size: "sm", variant: "ghost", leadingIcon: /* @__PURE__ */ t(w, { name: "arrow-down", size: "xs" }), onClick: () => i("down"), children: a.showMoreBelow(s(g)) }),
+    e.atEnd ? null : /* @__PURE__ */ t(u, { size: "sm", variant: "ghost", leadingIcon: /* @__PURE__ */ t(w, { name: "arrow-up", size: "xs" }), onClick: () => i("up"), children: a.showMoreAbove(s(g)) }),
+    /* @__PURE__ */ t(u, { size: "sm", variant: "ghost", onClick: () => i("all"), children: a.showAll }),
+    /* @__PURE__ */ t("span", { "aria-hidden": !0, children: o })
+  ] }) });
+}
+function O(e, r) {
+  if (r === void 0) return e;
+  const i = e.map(() => !1);
+  e.forEach((o, c) => {
+    if (o.kind !== "unchanged")
+      for (let p = Math.max(0, c - r); p <= Math.min(e.length - 1, c + r); p++) i[p] = !0;
+  });
+  const a = [];
+  let s = 0;
+  return e.forEach((o, c) => {
+    i[c] ? (s > 0 && a.push({ kind: "gap", hidden: s }), s = 0, a.push(o)) : s++;
+  }), s > 0 && a.push({ kind: "gap", hidden: s }), a;
+}
+export {
+  V as LineDiff,
+  v as lineDiffRow
+};
+//# sourceMappingURL=LineDiff.js.map

package/dist/components/LineDiff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineDiff.js","sources":["../../src/components/LineDiff.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../lib/i18n\";\nimport { DEFAULT_CONTEXT, EXPAND_STEP, NOTHING, diffLines, expand, foldGaps, gapState, splitLines, type DiffKind, type DiffLine, type Expand, type Gap, type Reveal } from \"../lib/line-diff-model\";\nimport { Button } from \"./Button\";\nimport { Icon } from \"./Icon\";\n\n/* ============================================================================\n   LINE DIFF — comparing a text value against its baseline, one line at a\n   time. DX-3787.\n\n   WHY THIS EXISTS. The plan-event-text editing panel needs to show an\n   operator exactly what a customized event text changed relative to the\n   board's global default, inline, as they edit — not a separate \"compare\"\n   screen, and not a wall of prose restating the two values. Nothing in this\n   library rendered a diff at all before this (confirmed by grep over\n   `src/components/`), so this is the first one.\n\n   WHY LINE-BASED, NOT WORD/CHAR-BASED. The text this compares is authored\n   prose and templated copy — event text, not source code — where the unit an\n   author actually edits is the LINE: a whole sentence or paragraph rewritten,\n   a line added or removed. A character-level diff on prose produces a\n   scattering of tiny insertions/deletions inside a rewritten sentence that is\n   technically accurate and practically unreadable — every word looks half\n   red and half green. Diffing whole lines instead means a rewritten line\n   reads as exactly what it is: the old line removed, the new line added,\n   each shown whole. This also keeps the algorithm cheap and dependency-free:\n   an O(n*m) LCS over a few dozen lines is trivial, where a real word/char\n   diff worth using would mean pulling in a diffing library this component\n   has no other reason to need.\n\n   THE ALGORITHM IS A SMALL PURE FUNCTION, co-located and unexported. It has\n   exactly one caller and no reason yet to be usable without React (contrast\n   `lib/markdown/project.ts` or `lib/board`, which are exported precisely\n   because something ELSE consumes them headlessly) — see `src/pure.ts`'s own\n   module comment for what earns a spot on that entry. If a second consumer\n   needs the raw diff later, promote it then rather than speculatively now.\n\n   A CHANGED LINE RENDERS AS A REMOVAL FOLLOWED BY AN ADDITION, never a third\n   \"modified\" style. The LCS only ever classifies a line as kept, removed or\n   added; a line edited in place is, from the algorithm's view, one line\n   disappearing and a different one appearing at the same position — which is\n   also the more informative rendering for a reader scanning for exactly what\n   changed, `−`/`+` markers matching the convention a unified text diff\n   already uses.\n\n   LONG TEXT COLLAPSES, ON REQUEST (DX-4041). A page's whole source is hundreds\n   of lines of which a reviewer cares about the dozen that changed, so showing\n   every line buries the change — the failure the operator named on the docs\n   review screen. `context` is `git diff -U<n>`: keep that many unchanged lines\n   either side of a change and fold every longer unchanged run into one gap row\n   that says how many lines it hid. It is a prop rather than a default because\n   the board's event-text panel (DX-3787) wants every line of a short value, and\n   the two answers differ only by what the caller knows about the text's length.\n   Two changes whose unchanged lines between them fit inside `2 * context` merge\n   into one hunk with no gap — folding fewer lines than the gap row itself costs\n   to read would be noise. The gap row is not interactive: expanding it is a\n   second interaction model for a comparison the library keeps read-only.\n\n   EXPANDABLE CONTEXT (DXUI-38). `expandable` turns each folded run into\n   something a person can open, as a code host's diff does: the gap row becomes\n   buttons that reveal the next lines under the change above, the next lines\n   over the change below, or the whole run, and the model (`lib/line-diff-model`,\n   ported from the approved DX-6188 review design) tracks how much of each gap\n   is open. It is a prop, not the default, so the fixed `context` mode every\n   existing caller relies on is untouched.\n\n   LONG UNBROKEN TEXT WRAPS (DXUI-38). A URL or a hash has no break opportunity,\n   so `whitespace-pre-wrap` alone let it push the row wider than a phone and\n   clip. Every row's text now breaks anywhere when it must (`overflow-wrap:\n   anywhere`) and can shrink inside the flex row (`min-w-0`).\n\n   ACCESSIBLE AS ONE COMPARISON REGION. `role=\"group\"` + `aria-label={label}`\n   on the outer element — the same pattern `InlineMarkdownEdit`'s\n   `RestingMarkdown` uses for a single named region — so a screen reader\n   announces this as one labelled comparison rather than a loose list of\n   lines with no context for why some are marked.\n   ========================================================================= */\n\n/** Shared with `PatchDiff` (DX-5271): one row look for every line diff the library draws. */\nexport const lineDiffRow = tv({\n  base: \"flex min-w-0 gap-2 rounded-sm px-2 py-0.5 font-mono text-xs whitespace-pre-wrap [overflow-wrap:anywhere]\",\n  variants: {\n    kind: {\n      unchanged: \"text-secondary\",\n      removed: \"bg-danger-subtle text-danger-text\",\n      added: \"bg-success-subtle text-success-text\",\n      gap: \"bg-surface-inset text-tertiary italic\",\n    },\n  },\n});\n\nconst MARKER: Record<DiffKind, string> = {\n  unchanged: \" \",\n  removed: \"−\",\n  added: \"+\",\n};\n\nexport interface LineDiffProps {\n  /** The baseline/default text this compares `after` against. */\n  before: string;\n  /** The current text being compared against `before`. */\n  after: string;\n  /** The accessible name for the diff region. */\n  label: string;\n  /**\n   * Show only this many unchanged lines either side of a change, folding each\n   * longer unchanged run into a \"N unchanged lines\" row (`git diff -U<n>`).\n   * Omitted: every line is shown. `0` shows the changed lines alone. DX-4041.\n   */\n  context?: number;\n  /**\n   * Fold each unchanged run longer than `context` (default 2) into a row a\n   * person can open: a few lines at a time under the change above or over the\n   * change below, or the whole run. Off: the fixed `context` mode. DXUI-38.\n   */\n  expandable?: boolean;\n  className?: string;\n}\n\n/**\n * Renders a line-based diff of `after` against `before`: lines common to both\n * are shown once, plain; a line only in `before` is shown once, styled as a\n * removal; a line only in `after` is shown once, styled as an addition. A\n * line edited in place shows as its old form removed immediately followed by\n * its new form added. Identical `before`/`after` renders every line\n * unchanged, with no added/removed markers at all.\n */\nexport function LineDiff({ before, after, label, context, expandable = false, className }: LineDiffProps) {\n  const strings = useUiStrings().lineDiff;\n  const fmt = useNumberFormat();\n  const lines = useMemo(() => diffLines(splitLines(before), splitLines(after)), [before, after]);\n  if (expandable) {\n    return <ExpandableRows lines={lines} label={label} context={context ?? DEFAULT_CONTEXT} className={className} />;\n  }\n  const rows = foldUnchanged(lines, context);\n  return (\n    <div role=\"group\" aria-label={label} data-slot=\"line-diff\" className={cn(\"flex flex-col\", className)}>\n      {rows.map((row, index) =>\n        row.kind === \"gap\" ? (\n          <div key={index} data-slot=\"line-diff-gap\" className={lineDiffRow({ kind: \"gap\" })}>\n            <span aria-hidden className=\"select-none opacity-60\">\n              ⋯\n            </span>\n            <span>{strings.unchangedLines(row.hidden, fmt(row.hidden))}</span>\n          </div>\n        ) : (\n          <DiffRow key={index} line={row} />\n        ),\n      )}\n    </div>\n  );\n}\n\nfunction DiffRow({ line }: { line: DiffLine }) {\n  return (\n    <div className={lineDiffRow({ kind: line.kind })}>\n      <span aria-hidden className=\"shrink-0 select-none opacity-60\">\n        {MARKER[line.kind]}\n      </span>\n      <span className=\"min-w-0 flex-1\">{line.text.length === 0 ? \" \" : line.text}</span>\n    </div>\n  );\n}\n\n/** The expandable mode (DXUI-38): rows around each change, every longer unchanged run a gap the person opens. */\nfunction ExpandableRows({ lines, label, context, className }: { lines: DiffLine[]; label: string; context: number; className?: string }) {\n  const gaps = useMemo(() => foldGaps(lines, context), [lines, context]);\n  const [reveals, setReveals] = useState<Record<number, Reveal>>({});\n  const gapAt = new Map(gaps.map((g) => [g.start, g]));\n\n  const rows: ReactNode[] = [];\n  for (let i = 0; i < lines.length; i++) {\n    const gap = gapAt.get(i);\n    if (gap === undefined) {\n      rows.push(<DiffRow key={i} line={lines[i]!} />);\n      continue;\n    }\n    const { top, bottom, hidden } = gapState(gap, reveals[gap.start]);\n    for (let k = gap.start; k < gap.start + top; k++) rows.push(<DiffRow key={k} line={lines[k]!} />);\n    if (hidden > 0) {\n      rows.push(\n        <GapControls\n          key={`gap-${gap.start}`}\n          gap={gap}\n          hidden={hidden}\n          onExpand={(how) => setReveals((r) => ({ ...r, [gap.start]: expand(gap, r[gap.start] ?? NOTHING, how) }))}\n        />,\n      );\n    }\n    for (let k = gap.end - bottom; k < gap.end; k++) rows.push(<DiffRow key={k} line={lines[k]!} />);\n    i = gap.end - 1;\n  }\n  return (\n    <div role=\"group\" aria-label={label} data-slot=\"line-diff\" className={cn(\"flex flex-col\", className)}>\n      {rows}\n    </div>\n  );\n}\n\nfunction GapControls({ gap, hidden, onExpand }: { gap: Gap; hidden: number; onExpand: (how: Expand) => void }) {\n  const strings = useUiStrings().lineDiff;\n  const fmt = useNumberFormat();\n  const folded = strings.unchangedLines(hidden, fmt(hidden));\n  return (\n    <div role=\"group\" aria-label={folded} data-slot=\"line-diff-gap\" className={cn(lineDiffRow({ kind: \"gap\" }), \"flex-wrap items-center not-italic\")}>\n      {hidden <= EXPAND_STEP ? (\n        <Button size=\"sm\" variant=\"ghost\" leadingIcon={<Icon name={gap.atStart ? \"arrow-up\" : \"arrow-down\"} size=\"xs\" />} onClick={() => onExpand(\"all\")}>\n          {strings.showLines(hidden, fmt(hidden))}\n        </Button>\n      ) : (\n        <>\n          {gap.atStart ? null : (\n            <Button size=\"sm\" variant=\"ghost\" leadingIcon={<Icon name=\"arrow-down\" size=\"xs\" />} onClick={() => onExpand(\"down\")}>\n              {strings.showMoreBelow(fmt(EXPAND_STEP))}\n            </Button>\n          )}\n          {gap.atEnd ? null : (\n            <Button size=\"sm\" variant=\"ghost\" leadingIcon={<Icon name=\"arrow-up\" size=\"xs\" />} onClick={() => onExpand(\"up\")}>\n              {strings.showMoreAbove(fmt(EXPAND_STEP))}\n            </Button>\n          )}\n          <Button size=\"sm\" variant=\"ghost\" onClick={() => onExpand(\"all\")}>\n            {strings.showAll}\n          </Button>\n          <span aria-hidden>{folded}</span>\n        </>\n      )}\n    </div>\n  );\n}\n\ninterface GapRow {\n  kind: \"gap\";\n  hidden: number;\n}\n\n/**\n * DX-4041: folds every run of unchanged lines that sits further than `context`\n * lines from a change into one `gap` row. A line is kept when a changed line\n * is within `context` of it, which is what makes two close changes one hunk.\n * An all-unchanged diff folds to a single gap row when a `context` was asked\n * for, because nothing in it is worth reading.\n */\nfunction foldUnchanged(lines: DiffLine[], context: number | undefined): (DiffLine | GapRow)[] {\n  if (context === undefined) return lines;\n  const keep = lines.map(() => false);\n  lines.forEach((line, index) => {\n    if (line.kind === \"unchanged\") return;\n    for (let k = Math.max(0, index - context); k <= Math.min(lines.length - 1, index + context); k++) keep[k] = true;\n  });\n  const rows: (DiffLine | GapRow)[] = [];\n  let hidden = 0;\n  lines.forEach((line, index) => {\n    if (keep[index]) {\n      if (hidden > 0) rows.push({ kind: \"gap\", hidden });\n      hidden = 0;\n      rows.push(line);\n    } else {\n      hidden++;\n    }\n  });\n  if (hidden > 0) rows.push({ kind: \"gap\", hidden });\n  return rows;\n}\n"],"names":["lineDiffRow","tv","MARKER","LineDiff","before","after","label","context","expandable","className","strings","useUiStrings","fmt","useNumberFormat","lines","useMemo","diffLines","splitLines","ExpandableRows","DEFAULT_CONTEXT","rows","foldUnchanged","jsx","cn","row","index","jsxs","DiffRow","line","gaps","foldGaps","reveals","setReveals","useState","gapAt","g","i","gap","top","bottom","hidden","gapState","k","GapControls","how","r","expand","NOTHING","onExpand","folded","EXPAND_STEP","Button","Icon","Fragment","keep"],"mappings":"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"}

package/dist/components/ListHeader.js

@@ -0,0 +1,72 @@
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { useId as A } from "react";
+import { createPortal as B } from "react-dom";
+import { Badge as z } from "./Badge.js";
+import { FilterMenu as E, FilterChips as g } from "./FilterMenu.js";
+import { Icon as N } from "./Icon.js";
+import { IconButton as H } from "./IconButton.js";
+import { Popover as P, Tooltip as _ } from "./Popover.js";
+import { SearchInput as j } from "./SearchInput.js";
+import { useUiStrings as D } from "../lib/i18n/provider.js";
+const b = 20;
+function C({ searchLabel: a, searchPlaceholder: u, query: s, onQueryChange: r, onQueryCommit: o, search: w = "box", filters: l, children: I, controlsHost: d }) {
+  const S = D().listHeader, m = A(), t = a !== void 0 && s !== void 0 && r !== void 0, p = t && w === "button", e = (s ?? "").trim(), v = e.length > b, f = t ? (
+    /* `SearchInput` carries the x that empties the box. An emptied box is committed at once, never waiting for a blur the x's own click has already spent. */
+    /* @__PURE__ */ i(
+      j,
+      {
+        size: "sm",
+        value: s,
+        placeholder: u,
+        "aria-label": a,
+        onValueChange: (n) => {
+          r(n), n === "" && o?.("");
+        },
+        onKeyDown: o === void 0 ? void 0 : (n) => n.key === "Enter" && o(s),
+        onBlur: o === void 0 ? void 0 : () => o(s)
+      }
+    )
+  ) : null, h = /* @__PURE__ */ i(
+    z,
+    {
+      "data-search-chip": "",
+      icon: /* @__PURE__ */ i(N, { name: "search", size: "xs" }),
+      dismiss: {
+        label: S.removeSearch(e),
+        onDismiss: () => {
+          r?.(""), o?.("");
+        }
+      },
+      children: v ? `${e.slice(0, b).trimEnd()}…` : e
+    }
+  ), x = /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2", children: [
+    t ? p ? /* @__PURE__ */ i(
+      P,
+      {
+        align: "start",
+        "aria-labelledby": m,
+        trigger: /* @__PURE__ */ i(H, { icon: /* @__PURE__ */ i(N, { name: "search", size: "sm" }), label: a, variant: e === "" ? "outline" : "solid", size: "sm" }),
+        children: /* @__PURE__ */ c("div", { className: "flex w-full min-w-0 flex-col gap-2", children: [
+          /* @__PURE__ */ i("span", { id: m, className: "sr-only", children: a }),
+          f
+        ] })
+      }
+    ) : (
+      /* The `Input` fills whatever box it is in (it has no wrapper class of its own), so the box carries the sizing. */
+      /* @__PURE__ */ i("div", { className: "min-w-0 flex-1 basis-40", children: f })
+    ) : null,
+    l !== void 0 && /* @__PURE__ */ i(E, { "aria-label": l.label, icon: l.icon, fields: l.fields, onClearAll: l.onClearAll }),
+    I
+  ] });
+  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
+    d === void 0 ? x : d === null ? null : B(x, d),
+    p && e !== "" ? /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [
+      v ? /* @__PURE__ */ i(_, { content: e, children: h }) : h,
+      l !== void 0 && /* @__PURE__ */ i(g, { className: "contents", fields: l.fields })
+    ] }) : l !== void 0 && /* @__PURE__ */ i(g, { fields: l.fields })
+  ] });
+}
+export {
+  C as ListHeader
+};
+//# sourceMappingURL=ListHeader.js.map

package/dist/components/ListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListHeader.js","sources":["../../src/components/ListHeader.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Badge } from \"./Badge\";\nimport { FilterChips, FilterMenu, type FilterField } from \"./FilterMenu\";\nimport { Icon, type IconName } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Popover, Tooltip } from \"./Popover\";\nimport { SearchInput } from \"./SearchInput\";\n\n/** DXUI-47: how many characters of an applied search its chip shows before cutting it short with an ellipsis; the full text is on hover. */\nconst SEARCH_CHIP_MAX_CHARS = 20;\n\n/* ----------------------------------------------------------------------------\n   LIST HEADER (DX-5711, moved from the dashboard's CardList by DX-5374's header)\n\n   THE ONE LIST HEADER: the search box, then the filter icon button, then the\n   sort, in one row, with the applied filters as removable chips on a line of\n   their own under it. Every list's search + filters + sort row is this, in the\n   dashboard and in the docs viewer alike, so the filter pattern is one thing.\n   The caller keeps the state (a URL, a store); this draws it. The sort is the\n   caller's `SortMenu`, passed as children so it lands at the row's end.\n   -------------------------------------------------------------------------- */\n\n/** A list's filters as `FilterMenu` and `FilterChips` draw them: the fields, the one step that turns them all off, and the control's name. */\nexport interface ListFilters {\n  fields: readonly FilterField[];\n  onClearAll: () => void;\n  /** Names the filter button for assistive technology, e.g. \"Filter feedback\". */\n  label: string;\n  /** The button's icon when the list filters by one kind of thing (a comment thread's tags); the funnel otherwise. */\n  icon?: IconName;\n}\n\nexport interface ListHeaderProps {\n  /**\n   * DXUI-97: the keyword search is optional. `searchLabel` (the box's accessible name), `searchPlaceholder`, `query` and `onQueryChange` are passed\n   * together or not at all; a list with no keyword search (API keys, sessions Recent) passes none and the header draws no search box, button or chip.\n   */\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  query?: string;\n  onQueryChange?: (query: string) => void;\n  /**\n   * Told the box's text on Enter, when the box loses focus and when it is emptied (typed empty or cleared with its x button), for a list that\n   * reads once per search and not once per keystroke.\n   */\n  onQueryCommit?: (query: string) => void;\n  /**\n   * DXUI-47: how the keyword search is drawn. `\"box\"` (the default) is the open search box. `\"button\"` is a search icon button, named by\n   * `searchLabel`, that opens a popover holding the box; the applied search then shows as a short removable chip beside the filter\n   * chips, and the button shows it is active. For a search that sits beside something else you type into (a comment thread), where an\n   * open box reads as the place to write. The `query` / `onQueryChange` / `onQueryCommit` contract is the same in both.\n   */\n  search?: \"box\" | \"button\";\n  /** The list's filters: ONE filter icon button right after the search box (before the sort), the applied ones as chips under the row. Never a row of `Select`s. */\n  filters?: ListFilters;\n  /** The controls at the row's end: the sort, and the caller's own. */\n  children?: ReactNode;\n  /**\n   * DXUI-94: where the controls row (the search, the filter button, the caller's own controls and the sort) is drawn. Passed, the row goes into that\n   * element, which a caller puts elsewhere (an overlay's title row) while the applied filters' chips stay under the header where it is; `null` is an\n   * element that has not mounted yet and draws no controls for now. Omitted (the default), the row sits in the header as always.\n   */\n  controlsHost?: HTMLElement | null;\n}\n\nexport function ListHeader({ searchLabel, searchPlaceholder, query, onQueryChange, onQueryCommit, search = \"box\", filters, children, controlsHost }: ListHeaderProps) {\n  const strings = useUiStrings().listHeader;\n  const popoverNameId = useId();\n  const hasSearch = searchLabel !== undefined && query !== undefined && onQueryChange !== undefined;\n  const asButton = hasSearch && search === \"button\";\n  const applied = (query ?? \"\").trim();\n  const clipped = applied.length > SEARCH_CHIP_MAX_CHARS;\n  const searchBox = !hasSearch ? null : (\n    /* `SearchInput` carries the x that empties the box. An emptied box is committed at once, never waiting for a blur the x's own click has already spent. */\n    <SearchInput\n      size=\"sm\"\n      value={query}\n      placeholder={searchPlaceholder}\n      aria-label={searchLabel}\n      onValueChange={(next) => {\n        onQueryChange(next);\n        if (next === \"\") onQueryCommit?.(\"\");\n      }}\n      onKeyDown={onQueryCommit === undefined ? undefined : (event) => event.key === \"Enter\" && onQueryCommit(query)}\n      onBlur={onQueryCommit === undefined ? undefined : () => onQueryCommit(query)}\n    />\n  );\n  const chip = (\n    <Badge\n      data-search-chip=\"\"\n      icon={<Icon name=\"search\" size=\"xs\" />}\n      dismiss={{\n        label: strings.removeSearch(applied),\n        onDismiss: () => {\n          onQueryChange?.(\"\");\n          onQueryCommit?.(\"\");\n        },\n      }}\n    >\n      {clipped ? `${applied.slice(0, SEARCH_CHIP_MAX_CHARS).trimEnd()}…` : applied}\n    </Badge>\n  );\n\n  const controls = (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      {!hasSearch ? null : asButton ? (\n        <Popover\n          align=\"start\"\n          aria-labelledby={popoverNameId}\n          trigger={<IconButton icon={<Icon name=\"search\" size=\"sm\" />} label={searchLabel} variant={applied === \"\" ? \"outline\" : \"solid\"} size=\"sm\" />}\n        >\n          <div className=\"flex w-full min-w-0 flex-col gap-2\">\n            <span id={popoverNameId} className=\"sr-only\">\n              {searchLabel}\n            </span>\n            {searchBox}\n          </div>\n        </Popover>\n      ) : (\n        /* The `Input` fills whatever box it is in (it has no wrapper class of its own), so the box carries the sizing. */\n        <div className=\"min-w-0 flex-1 basis-40\">{searchBox}</div>\n      )}\n      {filters !== undefined && <FilterMenu aria-label={filters.label} icon={filters.icon} fields={filters.fields} onClearAll={filters.onClearAll} />}\n      {children}\n    </div>\n  );\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {controlsHost === undefined ? controls : controlsHost === null ? null : createPortal(controls, controlsHost)}\n      {asButton && applied !== \"\" ? (\n        <div className=\"flex min-w-0 flex-wrap items-center gap-1.5\">\n          {clipped ? <Tooltip content={applied}>{chip}</Tooltip> : chip}\n          {filters !== undefined && <FilterChips className=\"contents\" fields={filters.fields} />}\n        </div>\n      ) : (\n        filters !== undefined && <FilterChips fields={filters.fields} />\n      )}\n    </div>\n  );\n}\n"],"names":["SEARCH_CHIP_MAX_CHARS","ListHeader","searchLabel","searchPlaceholder","query","onQueryChange","onQueryCommit","search","filters","children","controlsHost","strings","useUiStrings","popoverNameId","useId","hasSearch","asButton","applied","clipped","searchBox","jsx","SearchInput","next","event","chip","Badge","Icon","controls","jsxs","Popover","IconButton","FilterMenu","createPortal","Tooltip","FilterChips"],"mappings":"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"}

package/dist/components/Loading.js

@@ -0,0 +1,111 @@
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { tv as g } from "tailwind-variants";
+import { cn as i } from "../lib/cn.js";
+import { Spinner as h } from "./Spinner.js";
+import { useUiStrings as f } from "../lib/i18n/provider.js";
+const v = g({
+  base: [
+    "block bg-surface-inset",
+    /* A pulse, not a sweep, by default. A sweep everywhere reads as 2019-era,
+       and with sub-second queries the sweep frequently never completes — and a
+       half-finished sweep is the ugliest state a skeleton has. A pulse
+       degrades gracefully at any duration. */
+    "animate-pulse"
+  ],
+  variants: {
+    shape: {
+      text: "h-[1em] rounded-sm",
+      block: "rounded-md",
+      circle: "aspect-square rounded-full",
+      pill: "rounded-full"
+    },
+    /* Opt-in sweep for large hero or table regions, where the extra motion
+       reads as substantial rather than busy. */
+    sweep: { true: "dx-sweep animate-none", false: "" }
+  },
+  defaultVariants: { shape: "block", sweep: !1 }
+});
+function x({
+  shape: e,
+  sweep: r,
+  className: n,
+  width: s,
+  height: d,
+  style: c,
+  ref: o,
+  repeat: l
+}) {
+  const m = f().loading, t = i(v({ shape: e, sweep: r }), n), u = { width: s, height: d, ...c };
+  return l && l > 1 ? /* @__PURE__ */ a("span", { ref: o, className: "flex flex-col gap-3", "aria-busy": "true", "aria-label": m.loading, children: Array.from({ length: l }, (N, b) => /* @__PURE__ */ a("span", { "aria-hidden": !0, className: t, style: u }, b)) }) : /* @__PURE__ */ a("span", { ref: o, "aria-hidden": !0, className: t, style: u });
+}
+function A({ lines: e = 3, className: r }) {
+  return /* @__PURE__ */ a("span", { className: i("flex flex-col gap-2", r), children: Array.from({ length: e }, (n, s) => /* @__PURE__ */ a(
+    x,
+    {
+      shape: "text",
+      className: s === e - 1 && e > 1 ? "w-[62%]" : "w-full"
+    },
+    s
+  )) });
+}
+function y({ active: e, message: r, children: n, className: s }) {
+  return /* @__PURE__ */ p("div", { className: i("relative", s), children: [
+    /* @__PURE__ */ a("div", { inert: e || void 0, children: n }),
+    e && /* @__PURE__ */ a(
+      "div",
+      {
+        className: i(
+          "absolute inset-0 z-(--z-overlay) grid place-items-center rounded-[inherit]",
+          /* `veil`, not `scrim`: a scrim is built to push a whole page back
+                         behind a modal, and using it here lays a grey sheet over content
+                         that is supposed to stay readable.
+          
+                         NO BACKDROP BLUR. A 1px blur is below the threshold where the eye
+                         reads "blurred" and above the threshold where it reads "badly
+                         rendered" — text underneath goes soft and appears to shimmer as
+                         the veil fades. Dimming alone communicates "busy" without
+                         touching how crisply anything is drawn. Blur belongs on a modal
+                         scrim, at a radius large enough to be obviously deliberate. */
+          "bg-veil",
+          "animate-fade-in"
+        ),
+        children: /* @__PURE__ */ p(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            className: i(
+              "flex items-center gap-3 rounded-lg border border-border bg-surface-overlay",
+              "px-4 py-3 shadow-lg",
+              "animate-rise-in"
+            ),
+            children: [
+              /* @__PURE__ */ a(h, { size: "md", className: "text-accent" }),
+              r && /* @__PURE__ */ a("span", { className: "text-sm font-medium text-primary", children: r })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function L({ loading: e, hasContent: r, skeleton: n, label: s, message: d, children: c, className: o }) {
+  const l = f().loading, m = e && !r, t = e;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: t ? "group" : void 0,
+      "aria-busy": t || void 0,
+      "aria-label": t ? s ?? l.loading : void 0,
+      className: o,
+      children: m ? n : /* @__PURE__ */ a(y, { active: e, message: d, children: c })
+    }
+  );
+}
+export {
+  L as LoadRegion,
+  y as LoadingOverlay,
+  x as Skeleton,
+  A as SkeletonText
+};
+//# sourceMappingURL=Loading.js.map

package/dist/components/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sources":["../../src/components/Loading.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Spinner } from \"./Spinner\";\n\n/* ============================================================================\n   TWO DIFFERENT LOADS, TWO DIFFERENT TREATMENTS\n\n   Loading from NOTHING and REPLACING what is already there are not the same\n   event, and using one treatment for both is the most common loading mistake\n   in a data-heavy UI:\n\n     Nothing yet   -> SKELETON. It reserves the layout, so arriving content\n                      does not shove the page around, and it previews the shape\n                      of what is coming.\n     Already have  -> REFRESH OVERLAY. Never a skeleton: swapping real data for\n                      grey bars destroys the context someone was reading, and\n                      makes a 200ms refresh feel like a page change. The\n                      existing content stays visible, dimmed, under a centred\n                      card.\n   ========================================================================= */\n\nconst skeleton = tv({\n  base: [\n    \"block bg-surface-inset\",\n    /* A pulse, not a sweep, by default. A sweep everywhere reads as 2019-era,\n       and with sub-second queries the sweep frequently never completes — and a\n       half-finished sweep is the ugliest state a skeleton has. A pulse\n       degrades gracefully at any duration. */\n    \"animate-pulse\",\n  ],\n  variants: {\n    shape: {\n      text: \"h-[1em] rounded-sm\",\n      block: \"rounded-md\",\n      circle: \"aspect-square rounded-full\",\n      pill: \"rounded-full\",\n    },\n    /* Opt-in sweep for large hero or table regions, where the extra motion\n       reads as substantial rather than busy. */\n    sweep: { true: \"dx-sweep animate-none\", false: \"\" },\n  },\n  defaultVariants: { shape: \"block\", sweep: false },\n});\n\nexport interface SkeletonProps extends VariantProps<typeof skeleton> {\n  className?: string;\n  width?: string | number;\n  height?: string | number;\n  style?: CSSProperties;\n  ref?: Ref<HTMLSpanElement>;\n  /**\n   * Stack this many bars in a column instead of rendering one (SG-833\n   * slice 7) — for a loading LIST (a table's rows, a feed's cards), where the\n   * shape being previewed is \"several of these\", not one field.\n   *\n   * Extracted because every consumer needing this had written the same three\n   * lines by hand: `Array.from({ length: n }, (_, i) => <Skeleton key={i}\n   * .../>)` inside a `flex flex-col gap-3` wrapper carrying `aria-busy`/\n   * `aria-label=\"Loading\"` — gpt-manager's Demand Desk had exactly this as its\n   * own `LoadingRows` component. `shape`/`sweep`/`className`/`width`/`height`\n   * apply to EACH bar; `repeat` only changes how many render and how they are\n   * laid out.\n   *\n   * 1 or omitted renders the plain single bar, unchanged from before this\n   * prop existed — including staying `aria-hidden` rather than gaining the\n   * wrapper's live-region treatment, so a lone field's skeleton doesn't start\n   * announcing itself.\n   */\n  repeat?: number;\n}\n\nexport function Skeleton({\n  shape,\n  sweep,\n  className,\n  width,\n  height,\n  style,\n  ref,\n  repeat,\n}: SkeletonProps) {\n  const strings = useUiStrings().loading;\n  /* aria-hidden on every bar regardless of `repeat` — the LIVE REGION belongs\n     on the wrapper below when there is one. A screen reader announcing\n     \"loading\" once per bar turns a twelve-row table into twelve\n     announcements; the bars are visual scaffolding, and only the region they\n     fill is worth reporting. */\n  const barClassName = cn(skeleton({ shape, sweep }), className);\n  const barStyle = { width, height, ...style };\n\n  if (repeat && repeat > 1) {\n    return (\n      <span ref={ref} className=\"flex flex-col gap-3\" aria-busy=\"true\" aria-label={strings.loading}>\n        {Array.from({ length: repeat }, (_, i) => (\n          <span key={i} aria-hidden className={barClassName} style={barStyle} />\n        ))}\n      </span>\n    );\n  }\n\n  /* Unchanged from before `repeat` existed: one bar, `ref` on the one element\n     rendered. */\n  return <span ref={ref} aria-hidden className={barClassName} style={barStyle} />;\n}\n\nexport interface SkeletonTextProps {\n  /** How many lines to draw. */\n  lines?: number;\n  className?: string;\n}\n\n/**\n * A paragraph-shaped skeleton.\n *\n * The last line is short. That single detail is what makes it read as text\n * rather than as a stack of bars — every real paragraph ends mid-line, and a\n * block of equal-length bars reads as a table.\n */\nexport function SkeletonText({ lines = 3, className }: SkeletonTextProps) {\n  return (\n    <span className={cn(\"flex flex-col gap-2\", className)}>\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton\n          key={i}\n          shape=\"text\"\n          className={i === lines - 1 && lines > 1 ? \"w-[62%]\" : \"w-full\"}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport interface LoadingOverlayProps {\n  /** Whether the overlay is showing. */\n  active: boolean;\n  /** Text inside the card. Keep it short — it sits over content being read. */\n  message?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Dims existing content and floats a card over it while that content is being\n * replaced.\n *\n * TWO DETAILS DO THE REAL WORK.\n *\n * The veil is `inert`, not `pointer-events: none`. Blocking the mouse alone\n * leaves every control underneath reachable by Tab and clickable by Enter, so\n * a keyboard user can act on data that is mid-replacement — which is exactly\n * the race the overlay exists to prevent. `inert` removes the subtree from the\n * tab order and the accessibility tree together.\n *\n * The card is OPAQUE while the veil is translucent. A translucent card over\n * translucent content produces text over text, which is unreadable at\n * precisely the moment someone is trying to work out what is happening.\n */\nexport function LoadingOverlay({ active, message, children, className }: LoadingOverlayProps) {\n  return (\n    <div className={cn(\"relative\", className)}>\n      <div inert={active || undefined}>{children}</div>\n\n      {active && (\n        <div\n          className={cn(\n            \"absolute inset-0 z-(--z-overlay) grid place-items-center rounded-[inherit]\",\n            /* `veil`, not `scrim`: a scrim is built to push a whole page back\n               behind a modal, and using it here lays a grey sheet over content\n               that is supposed to stay readable.\n\n               NO BACKDROP BLUR. A 1px blur is below the threshold where the eye\n               reads \"blurred\" and above the threshold where it reads \"badly\n               rendered\" — text underneath goes soft and appears to shimmer as\n               the veil fades. Dimming alone communicates \"busy\" without\n               touching how crisply anything is drawn. Blur belongs on a modal\n               scrim, at a radius large enough to be obviously deliberate. */\n            \"bg-veil\",\n            \"animate-fade-in\",\n          )}\n        >\n          <div\n            /* `polite`, never `assertive`: a refresh is not an emergency, and\n               assertive would interrupt whatever the person is reading — the\n               very content this overlay is protecting. */\n            role=\"status\"\n            aria-live=\"polite\"\n            className={cn(\n              \"flex items-center gap-3 rounded-lg border border-border bg-surface-overlay\",\n              \"px-4 py-3 shadow-lg\",\n              \"animate-rise-in\",\n            )}\n          >\n            <Spinner size=\"md\" className=\"text-accent\" />\n            {message && <span className=\"text-sm font-medium text-primary\">{message}</span>}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadRegionProps {\n  /** True while the region's data is loading: the first load, or any later one (a filter, search, sort or page change, a refetch). */\n  loading: boolean;\n  /**\n   * Whether the region has ever had content to show. This is the caller's fact, never inferred from `loading`: a region that mounts\n   * idle and starts loading with nothing to show (a panel waiting on a choice, a load that failed) must still draw the skeleton.\n   */\n  hasContent: boolean;\n  /** Drawn only while `loading` and there is no content. */\n  skeleton: ReactNode;\n  /** Accessible name of the region while it loads. Defaults to the library's \"Loading\". */\n  label?: string;\n  /** Text inside the overlay card, when `loading` over content. */\n  message?: ReactNode;\n  /** The content. It must keep rendering its last data while `loading`, so the overlay has something to sit on. */\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * The one decision between the two treatments above, for a list or panel that loads its own data: `loading && !hasContent` is the\n * skeleton, `loading && hasContent` is the content kept on screen under the refresh overlay, and anything else is the content.\n *\n * The content sits in one tree for the overlay and the idle states, so a reload starting remounts nothing and keeps focus and\n * scroll inside it. A region is `aria-busy` and named (`role=\"group\"`) exactly while it loads.\n *\n * NOT FOR A `DataTable`: it already takes `loading` (first load) and `refreshing` (a reload over rows) and draws both itself.\n * Wrapping one in this would stack a second overlay on its own.\n */\nexport function LoadRegion({ loading, hasContent, skeleton, label, message, children, className }: LoadRegionProps) {\n  const strings = useUiStrings().loading;\n  const showSkeleton = loading && !hasContent;\n  const busy = loading;\n  return (\n    <div\n      role={busy ? \"group\" : undefined}\n      aria-busy={busy || undefined}\n      aria-label={busy ? (label ?? strings.loading) : undefined}\n      className={className}\n    >\n      {showSkeleton ? skeleton : <LoadingOverlay active={loading} message={message}>{children}</LoadingOverlay>}\n    </div>\n  );\n}\n"],"names":["skeleton","tv","Skeleton","shape","sweep","className","width","height","style","ref","repeat","strings","useUiStrings","barClassName","cn","barStyle","jsx","_","i","SkeletonText","lines","LoadingOverlay","active","message","children","jsxs","Spinner","LoadRegion","loading","hasContent","label","showSkeleton","busy"],"mappings":"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"}

package/dist/components/Markdown.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import { memo as m, useMemo as i } from "react";
+import { cn as a } from "../lib/cn.js";
+import { CodeEditor as s, CodeEditorToolbar as c, CodeEditorCaption as l } from "./CodeEditor.js";
+import { parseMarkdown as u } from "../lib/syntax/markdown/parse.js";
+import { MarkdownNodes as p } from "../lib/syntax/markdown/render.js";
+function f({ code: o, language: r, filename: d, streaming: n, className: t }) {
+  return /* @__PURE__ */ e(
+    s,
+    {
+      value: o,
+      language: r ?? void 0,
+      filename: d,
+      view: "source",
+      className: a("my-2", t),
+      toolbar: n ? /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(l, {}) }) : void 0
+    }
+  );
+}
+const g = (o) => /* @__PURE__ */ e(f, { code: o.code, language: o.language, streaming: o.open }), E = m(function({ children: r, className: d, renderCode: n }) {
+  const t = i(() => u(r), [r]);
+  return /* @__PURE__ */ e("div", { className: a("text-sm leading-relaxed text-secondary", d), children: /* @__PURE__ */ e(p, { nodes: t, renderCode: n ?? g }) });
+});
+export {
+  f as CodeBlock,
+  E as Markdown
+};
+//# sourceMappingURL=Markdown.js.map

package/dist/components/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.js","sources":["../../src/components/Markdown.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { CodeEditor, CodeEditorCaption, CodeEditorToolbar } from \"./CodeEditor\";\nimport { parseMarkdown, MarkdownNodes } from \"../lib/syntax/markdown\";\nimport type { MdCodeRenderer } from \"../lib/syntax/markdown\";\n\n/* ============================================================================\n   MARKDOWN — the one component that turns a markdown string into React.\n\n   This is the public face of `lib/syntax/markdown`'s `parseMarkdown` +\n   `MarkdownNodes`: a memoised parse and a default fenced-code renderer, so a\n   consumer can write `<Markdown>{text}</Markdown>` without wiring the tree\n   walk itself. Anything more specialised — the caret-aware WYSIWYG surface,\n   the streaming chat variant — composes THIS component or the lower-level\n   `parseMarkdown`/`MarkdownNodes` pair directly; neither one forks the parser.\n\n   `renderCode` is left overridable (not just the default) for the same reason\n   `MarkdownNodes` itself takes it as a prop: a docs page and a chat transcript\n   can both want a fenced block to look different without either one forking\n   this file.\n   ========================================================================= */\n\nexport interface CodeBlockProps {\n  code: string;\n  language?: string | null;\n  filename?: string;\n  /** Still filling — suppresses the copy button, which would copy a fragment. */\n  streaming?: boolean;\n  className?: string;\n}\n\n/**\n * A fenced code block, rendered through the shared `CodeEditor` viewer.\n *\n * `view=\"source\"` is pinned rather than left to `CodeEditor`'s own default:\n * left alone, a fence whose language is literally `markdown` would flip\n * `CodeEditor` into ITS OWN rendered-preview mode, so a ```markdown block\n * quoted inside a document would render as prose nested inside prose instead\n * of the literal source the author fenced off. Every other language already\n * defaults to `\"source\"`, so this only changes behaviour for that one case.\n */\nexport function CodeBlock({ code, language, filename, streaming, className }: CodeBlockProps) {\n  return (\n    <CodeEditor\n      value={code}\n      language={language ?? undefined}\n      filename={filename}\n      view=\"source\"\n      className={cn(\"my-2\", className)}\n      /* While a block is still arriving, the toolbar keeps its caption and\n         loses its copy button: copying a fragment gives you something that\n         looks like code and does not run. Composing the toolbar is how the\n         component says that, rather than a `hideCopy` boolean nobody would\n         find. */\n      toolbar={\n        streaming ? (\n          <CodeEditorToolbar>\n            <CodeEditorCaption />\n          </CodeEditorToolbar>\n        ) : undefined\n      }\n    />\n  );\n}\n\n/** `block.open` is a real field on every fenced-code node (parse.ts sets it\n    for an unclosed fence, streaming or not) — reusing it here means a\n    genuinely truncated document hides its copy button too, for the same\n    reason a still-arriving one does, with no extra plumbing. */\nconst defaultRenderCode: MdCodeRenderer = (block) => (\n  <CodeBlock code={block.code} language={block.language} streaming={block.open} />\n);\n\nexport interface MarkdownProps {\n  children: string;\n  className?: string;\n  /** Defaults to a `CodeEditor`-backed viewer with a copy button. */\n  renderCode?: MdCodeRenderer;\n}\n\n/**\n * Renders a complete markdown string as a document.\n *\n * This is the general-purpose entry point — the one nearly every consumer\n * wants: a card description, a comment, a retro field, a plan record. It\n * parses ONCE per `children` change and hands the tree straight to\n * `MarkdownNodes`; there is no second parser, no block-splitting of its own.\n */\nexport const Markdown = memo(function Markdown({ children, className, renderCode }: MarkdownProps) {\n  const nodes = useMemo(() => parseMarkdown(children), [children]);\n  return (\n    <div className={cn(\"text-sm leading-relaxed text-secondary\", className)}>\n      <MarkdownNodes nodes={nodes} renderCode={renderCode ?? defaultRenderCode} />\n    </div>\n  );\n});\n"],"names":["CodeBlock","code","language","filename","streaming","className","jsx","CodeEditor","cn","CodeEditorToolbar","CodeEditorCaption","defaultRenderCode","block","Markdown","memo","children","renderCode","nodes","useMemo","parseMarkdown","MarkdownNodes"],"mappings":";;;;;;AAyCO,SAASA,EAAU,EAAE,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,WAAAC,GAAW,WAAAC,KAA6B;AAC5F,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAON;AAAA,MACP,UAAUC,KAAY;AAAA,MACtB,UAAAC;AAAA,MACA,MAAK;AAAA,MACL,WAAWK,EAAG,QAAQH,CAAS;AAAA,MAM/B,SACED,IACE,gBAAAE,EAACG,KACC,UAAA,gBAAAH,EAACI,GAAA,EAAkB,GACrB,IACE;AAAA,IAAA;AAAA,EAAA;AAIZ;AAMA,MAAMC,IAAoC,CAACC,MACzC,gBAAAN,EAACN,GAAA,EAAU,MAAMY,EAAM,MAAM,UAAUA,EAAM,UAAU,WAAWA,EAAM,KAAA,CAAM,GAkBnEC,IAAWC,EAAK,SAAkB,EAAE,UAAAC,GAAU,WAAAV,GAAW,YAAAW,KAA6B;AACjG,QAAMC,IAAQC,EAAQ,MAAMC,EAAcJ,CAAQ,GAAG,CAACA,CAAQ,CAAC;AAC/D,SACE,gBAAAT,EAAC,OAAA,EAAI,WAAWE,EAAG,0CAA0CH,CAAS,GACpE,UAAA,gBAAAC,EAACc,GAAA,EAAc,OAAAH,GAAc,YAAYD,KAAcL,GAAmB,GAC5E;AAEJ,CAAC;"}