@flanksource/clicky-ui 0.3.45 → 0.3.47

package/dist/data/CodeDiff.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeDiff.js","sources":["../../src/data/CodeDiff.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { SegmentedControl, type SegmentedOption } from \"../components/SegmentedControl\";\nimport { UiColumns, UiFile, UiRows } from \"../icons\";\nimport {\n  computeLineDiff,\n  parseUnifiedDiff,\n  type DiffHunk,\n  type DiffLine,\n  type DiffLineType,\n} from \"./code-diff\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport type CodeDiffView = \"unified\" | \"split\";\n\n// Rows = stacked/unified; columns = side-by-side/split.\nconst DIFF_VIEW_OPTIONS: SegmentedOption<CodeDiffView>[] = [\n  { id: \"unified\", label: \"Unified\", icon: UiRows, title: \"Unified view\" },\n  { id: \"split\", label: \"Split\", icon: UiColumns, title: \"Split view\" },\n];\n\n// Either two blobs (diffed in-repo) or a ready unified-diff string (what\n// `GitDiffPanel` already receives). `never` on the absent keys keeps the shapes\n// mutually exclusive.\ntype CodeDiffInput =\n  | { original: string; modified: string; unified?: never }\n  | { unified: string; original?: never; modified?: never };\n\nexport type CodeDiffProps = CodeDiffInput & {\n  /** Highlighter language hint, e.g. `typescript`, `go`, `python`. */\n  language?: string | undefined;\n  /** Unified (single column) or split (side-by-side). Defaults to `unified`. */\n  view?: CodeDiffView | undefined;\n  /** Show old/new line-number gutters. Defaults to `true`. */\n  showLineNumbers?: boolean | undefined;\n  /** Render only the rows — no border, background, or language header. */\n  bare?: boolean | undefined;\n  className?: string | undefined;\n};\n\ntype ResolvedLine = {\n  line: DiffLine;\n  oldTokens: HighlightedLine | undefined;\n  newTokens: HighlightedLine | undefined;\n};\n\ntype ResolvedHunk = { header: string | undefined; path: string | undefined; lines: ResolvedLine[] };\n\n// Row background tint — theme-aware via `[[data-theme=dark]_&]` (plain `dark:`\n// compiles to prefers-color-scheme in the built dist and ignores `data-theme`).\nconst ROW_TINT: Record<DiffLineType, string | undefined> = {\n  context: undefined,\n  add: \"bg-emerald-500/10\",\n  remove: \"bg-rose-500/10\",\n};\n\nconst MARKER_TONE: Record<DiffLineType, string> = {\n  context: \"text-muted-foreground\",\n  add: \"text-emerald-700 [[data-theme=dark]_&]:text-emerald-300\",\n  remove: \"text-rose-700 [[data-theme=dark]_&]:text-rose-300\",\n};\n\nconst MARKER: Record<DiffLineType, string> = { context: \"\", add: \"+\", remove: \"-\" };\n\nexport function CodeDiff(props: CodeDiffProps) {\n  const { language, view: viewProp = \"unified\", showLineNumbers = true, bare = false, className } = props;\n  const { unified, original, modified } = props;\n\n  // `view` prop seeds the default; the header toggle then owns it.\n  const [view, setView] = useState<CodeDiffView>(viewProp);\n\n  const hunks = useMemo<DiffHunk[]>(\n    () =>\n      unified !== undefined\n        ? parseUnifiedDiff(unified)\n        : computeLineDiff(original ?? \"\", modified ?? \"\"),\n    [unified, original, modified],\n  );\n\n  const { oldSource, newSource } = useMemo(() => buildSides(hunks), [hunks]);\n\n  // Raw first paint, highlighted tokens swap in — matches CodeBlock. `null`\n  // means \"not highlighted\" (empty/unsupported/loading); rows fall back to plain\n  // text token-by-token.\n  const [tokens, setTokens] = useState<{\n    old: HighlightedLine[] | null;\n    mod: HighlightedLine[] | null;\n  }>({ old: null, mod: null });\n\n  useEffect(() => {\n    if (!language) {\n      setTokens({ old: null, mod: null });\n      return;\n    }\n    let cancelled = false;\n    Promise.all([\n      highlightToLines(oldSource, { lang: language }),\n      highlightToLines(newSource, { lang: language }),\n    ]).then(([old, mod]) => {\n      if (!cancelled) setTokens({ old, mod });\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [language, oldSource, newSource]);\n\n  const resolved = useMemo(\n    () => resolveHunks(hunks, tokens.old, tokens.mod),\n    [hunks, tokens],\n  );\n\n  // Only a diff that spans more than one file labels its hunks with the path —\n  // a single-file diff's path is already known from its surrounding context.\n  const multiFile =\n    new Set(resolved.map((hunk) => hunk.path).filter((p) => p !== undefined)).size > 1;\n\n  let lastPath: string | undefined;\n  const rows = resolved.map((hunk, index) => {\n    const filePath =\n      multiFile && hunk.path !== undefined && hunk.path !== lastPath ? hunk.path : undefined;\n    lastPath = hunk.path;\n    return (\n      <Fragment key={index}>\n        {filePath && <FileHeader path={filePath} />}\n        {view === \"split\" ? (\n          <SplitHunk hunk={hunk} showLineNumbers={showLineNumbers} />\n        ) : (\n          <UnifiedHunk hunk={hunk} showLineNumbers={showLineNumbers} />\n        )}\n      </Fragment>\n    );\n  });\n\n  if (bare) {\n    return (\n      <div className={cn(\"overflow-x-auto font-mono text-xs leading-relaxed\", className)}>\n        {rows}\n      </div>\n    );\n  }\n  return (\n    <div className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}>\n      <div className=\"flex items-center justify-between gap-2 border-b border-border px-3 py-1.5\">\n        <span className=\"text-[11px] uppercase tracking-wide text-muted-foreground\">\n          {language || \"diff\"}\n        </span>\n        <SegmentedControl\n          size=\"sm\"\n          aria-label=\"Diff view\"\n          value={view}\n          onChange={setView}\n          options={DIFF_VIEW_OPTIONS}\n        />\n      </div>\n      <div className=\"overflow-x-auto font-mono text-xs leading-relaxed\">{rows}</div>\n    </div>\n  );\n}\n\n// Reconstruct the full old side (context + remove) and new side (context + add)\n// as text — highlighting each side as a coherent blob so grammar state is intact.\nfunction buildSides(hunks: DiffHunk[]): { oldSource: string; newSource: string } {\n  const oldLines: string[] = [];\n  const newLines: string[] = [];\n  for (const hunk of hunks) {\n    for (const line of hunk.lines) {\n      if (line.type !== \"add\") oldLines.push(line.content);\n      if (line.type !== \"remove\") newLines.push(line.content);\n    }\n  }\n  return { oldSource: oldLines.join(\"\\n\"), newSource: newLines.join(\"\\n\") };\n}\n\n// Map each diff line to its highlighted tokens via a sequential cursor per side\n// (not absolute line number, so unified-diff gaps between hunks stay aligned).\nfunction resolveHunks(\n  hunks: DiffHunk[],\n  oldTokens: HighlightedLine[] | null,\n  newTokens: HighlightedLine[] | null,\n): ResolvedHunk[] {\n  let oldCursor = 0;\n  let newCursor = 0;\n  return hunks.map((hunk) => ({\n    header: hunk.header,\n    path: hunk.path,\n    lines: hunk.lines.map((line) => {\n      const resolved: ResolvedLine = {\n        line,\n        oldTokens: line.type === \"add\" ? undefined : oldTokens?.[oldCursor],\n        newTokens: line.type === \"remove\" ? undefined : newTokens?.[newCursor],\n      };\n      if (line.type !== \"add\") oldCursor += 1;\n      if (line.type !== \"remove\") newCursor += 1;\n      return resolved;\n    }),\n  }));\n}\n\nfunction UnifiedHunk({ hunk, showLineNumbers }: { hunk: ResolvedHunk; showLineNumbers: boolean }) {\n  return (\n    <>\n      {hunk.header && <HunkHeader header={hunk.header} />}\n      {hunk.lines.map((resolved, index) => {\n        const { line } = resolved;\n        const tokens = line.type === \"remove\" ? resolved.oldTokens : resolved.newTokens;\n        return (\n          <div key={index} className={cn(\"flex\", ROW_TINT[line.type])} data-diff-line={line.type}>\n            {showLineNumbers && (\n              <>\n                <Gutter value={line.oldNumber} />\n                <Gutter value={line.newNumber} />\n              </>\n            )}\n            <Marker type={line.type} />\n            <code className=\"whitespace-pre pl-1 pr-3\">\n              <HighlightedTokens tokens={tokens} content={line.content} />\n            </code>\n          </div>\n        );\n      })}\n    </>\n  );\n}\n\nfunction SplitHunk({ hunk, showLineNumbers }: { hunk: ResolvedHunk; showLineNumbers: boolean }) {\n  const pairs = useMemo(() => pairLines(hunk.lines), [hunk.lines]);\n  return (\n    <>\n      {hunk.header && <HunkHeader header={hunk.header} />}\n      {pairs.map((pair, index) => (\n        <div key={index} className=\"flex\">\n          <SplitCell resolved={pair.left} side=\"old\" showLineNumbers={showLineNumbers} />\n          <span aria-hidden className=\"w-px shrink-0 bg-border\" />\n          <SplitCell resolved={pair.right} side=\"new\" showLineNumbers={showLineNumbers} />\n        </div>\n      ))}\n    </>\n  );\n}\n\ntype SplitPair = { left: ResolvedLine | undefined; right: ResolvedLine | undefined };\n\n// Pair consecutive remove/add runs (remove[i] ↔ add[i]); leftovers get a blank\n// opposite cell. Context is one aligned row on both sides.\nfunction pairLines(lines: ResolvedLine[]): SplitPair[] {\n  const pairs: SplitPair[] = [];\n  let removes: ResolvedLine[] = [];\n  let adds: ResolvedLine[] = [];\n  const flush = () => {\n    const max = Math.max(removes.length, adds.length);\n    for (let i = 0; i < max; i++) pairs.push({ left: removes[i], right: adds[i] });\n    removes = [];\n    adds = [];\n  };\n  for (const resolved of lines) {\n    if (resolved.line.type === \"remove\") removes.push(resolved);\n    else if (resolved.line.type === \"add\") adds.push(resolved);\n    else {\n      flush();\n      pairs.push({ left: resolved, right: resolved });\n    }\n  }\n  flush();\n  return pairs;\n}\n\nfunction SplitCell({\n  resolved,\n  side,\n  showLineNumbers,\n}: {\n  resolved: ResolvedLine | undefined;\n  side: \"old\" | \"new\";\n  showLineNumbers: boolean;\n}) {\n  if (!resolved) return <div className=\"min-w-0 flex-1\" />;\n  const { line } = resolved;\n  const active =\n    (side === \"old\" && line.type === \"remove\") || (side === \"new\" && line.type === \"add\");\n  const type: DiffLineType = active ? line.type : \"context\";\n  const number = side === \"old\" ? line.oldNumber : line.newNumber;\n  const tokens = side === \"old\" ? resolved.oldTokens : resolved.newTokens;\n  return (\n    <div className={cn(\"flex min-w-0 flex-1\", active && ROW_TINT[line.type])} data-diff-line={type}>\n      {showLineNumbers && <Gutter value={number} />}\n      <Marker type={type} />\n      <code className=\"min-w-0 whitespace-pre pl-1 pr-3\">\n        <HighlightedTokens tokens={tokens} content={line.content} />\n      </code>\n    </div>\n  );\n}\n\nfunction FileHeader({ path }: { path: string }) {\n  return (\n    <div\n      data-diff-file={path}\n      className=\"flex items-center gap-1.5 border-b border-border bg-muted px-2 py-1 font-medium text-foreground\"\n    >\n      <UiFile className=\"size-3.5 shrink-0 text-muted-foreground\" />\n      <span className=\"truncate\">{path}</span>\n    </div>\n  );\n}\n\nfunction HunkHeader({ header }: { header: string }) {\n  return (\n    <div className=\"select-none bg-muted/60 px-2 py-0.5 text-muted-foreground\">{header}</div>\n  );\n}\n\nfunction Gutter({ value }: { value: number | undefined }) {\n  return (\n    <span className=\"w-10 shrink-0 select-none px-2 text-right tabular-nums text-muted-foreground\">\n      {value ?? \"\"}\n    </span>\n  );\n}\n\nfunction Marker({ type }: { type: DiffLineType }) {\n  return (\n    <span className={cn(\"w-4 shrink-0 select-none text-center\", MARKER_TONE[type])}>\n      {MARKER[type]}\n    </span>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}
+{"version":3,"file":"CodeDiff.js","sources":["../../src/data/CodeDiff.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { SegmentedControl, type SegmentedOption } from \"../components/SegmentedControl\";\nimport { UiAdd, UiColumns, UiFile, UiRows } from \"../icons\";\nimport {\n  computeLineDiff,\n  parseUnifiedDiff,\n  type DiffHunk,\n  type DiffLine,\n  type DiffLineType,\n} from \"./code-diff\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport type CodeDiffView = \"unified\" | \"split\";\n\n// Rows = stacked/unified; columns = side-by-side/split.\nconst DIFF_VIEW_OPTIONS: SegmentedOption<CodeDiffView>[] = [\n  { id: \"unified\", label: \"Unified\", icon: UiRows, title: \"Unified view\" },\n  { id: \"split\", label: \"Split\", icon: UiColumns, title: \"Split view\" },\n];\n\n// Either two blobs (diffed in-repo) or a ready unified-diff string (what\n// `GitDiffPanel` already receives). `never` on the absent keys keeps the shapes\n// mutually exclusive.\ntype CodeDiffInput =\n  | { original: string; modified: string; unified?: never }\n  | { unified: string; original?: never; modified?: never };\n\nexport type DiffSide = \"old\" | \"new\";\n\n/** The diff line a gutter \"+\" button was clicked on. */\nexport interface DiffLineTarget {\n  side: DiffSide;\n  line: number;\n  content: string;\n}\n\n/** A node rendered as a full-width row directly below the row at `(side, line)`. */\nexport interface DiffLineWidget {\n  key: string;\n  side: DiffSide;\n  line: number;\n  node: ReactNode;\n}\n\ntype LineAnnotations = {\n  onLineAction: ((target: DiffLineTarget) => void) | undefined;\n  lineWidgets: DiffLineWidget[] | undefined;\n};\n\nexport type CodeDiffProps = CodeDiffInput & {\n  /**\n   * When set, every numbered line shows a \"+\" button in its gutter (on row hover\n   * or keyboard focus). Added/context lines report side `new`, deleted lines\n   * `old`; in split view the left column is `old` and the right `new`.\n   */\n  onLineAction?: ((target: DiffLineTarget) => void) | undefined;\n  /**\n   * Rendered as a full-width row directly below the row matching `(side, line)`,\n   * in array order. A context line matches both its `old` and `new` number.\n   */\n  lineWidgets?: DiffLineWidget[] | undefined;\n  /** Highlighter language hint, e.g. `typescript`, `go`, `python`. */\n  language?: string | undefined;\n  /** Unified (single column) or split (side-by-side). Defaults to `unified`. */\n  view?: CodeDiffView | undefined;\n  /** Show old/new line-number gutters. Defaults to `true`. */\n  showLineNumbers?: boolean | undefined;\n  /** Render only the rows — no border, background, or language header. */\n  bare?: boolean | undefined;\n  className?: string | undefined;\n};\n\ntype ResolvedLine = {\n  line: DiffLine;\n  oldTokens: HighlightedLine | undefined;\n  newTokens: HighlightedLine | undefined;\n};\n\ntype ResolvedHunk = { header: string | undefined; path: string | undefined; lines: ResolvedLine[] };\n\n// Row background tint — theme-aware via `[[data-theme=dark]_&]` (plain `dark:`\n// compiles to prefers-color-scheme in the built dist and ignores `data-theme`).\nconst ROW_TINT: Record<DiffLineType, string | undefined> = {\n  context: undefined,\n  add: \"bg-emerald-500/10\",\n  remove: \"bg-rose-500/10\",\n};\n\nconst MARKER_TONE: Record<DiffLineType, string> = {\n  context: \"text-muted-foreground\",\n  add: \"text-emerald-700 [[data-theme=dark]_&]:text-emerald-300\",\n  remove: \"text-rose-700 [[data-theme=dark]_&]:text-rose-300\",\n};\n\nconst MARKER: Record<DiffLineType, string> = { context: \"\", add: \"+\", remove: \"-\" };\n\nexport function CodeDiff(props: CodeDiffProps) {\n  const { language, view: viewProp = \"unified\", showLineNumbers = true, bare = false, className } = props;\n  const { unified, original, modified, onLineAction, lineWidgets } = props;\n  const annotations: LineAnnotations = { onLineAction, lineWidgets };\n\n  // `view` prop seeds the default; the header toggle then owns it.\n  const [view, setView] = useState<CodeDiffView>(viewProp);\n\n  const hunks = useMemo<DiffHunk[]>(\n    () =>\n      unified !== undefined\n        ? parseUnifiedDiff(unified)\n        : computeLineDiff(original ?? \"\", modified ?? \"\"),\n    [unified, original, modified],\n  );\n\n  const { oldSource, newSource } = useMemo(() => buildSides(hunks), [hunks]);\n\n  // Raw first paint, highlighted tokens swap in — matches CodeBlock. `null`\n  // means \"not highlighted\" (empty/unsupported/loading); rows fall back to plain\n  // text token-by-token.\n  const [tokens, setTokens] = useState<{\n    old: HighlightedLine[] | null;\n    mod: HighlightedLine[] | null;\n  }>({ old: null, mod: null });\n\n  useEffect(() => {\n    if (!language) {\n      setTokens({ old: null, mod: null });\n      return;\n    }\n    let cancelled = false;\n    Promise.all([\n      highlightToLines(oldSource, { lang: language }),\n      highlightToLines(newSource, { lang: language }),\n    ]).then(([old, mod]) => {\n      if (!cancelled) setTokens({ old, mod });\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [language, oldSource, newSource]);\n\n  const resolved = useMemo(\n    () => resolveHunks(hunks, tokens.old, tokens.mod),\n    [hunks, tokens],\n  );\n\n  // Only a diff that spans more than one file labels its hunks with the path —\n  // a single-file diff's path is already known from its surrounding context.\n  const multiFile =\n    new Set(resolved.map((hunk) => hunk.path).filter((p) => p !== undefined)).size > 1;\n\n  let lastPath: string | undefined;\n  const rows = resolved.map((hunk, index) => {\n    const filePath =\n      multiFile && hunk.path !== undefined && hunk.path !== lastPath ? hunk.path : undefined;\n    lastPath = hunk.path;\n    return (\n      <Fragment key={index}>\n        {filePath && <FileHeader path={filePath} />}\n        {view === \"split\" ? (\n          <SplitHunk hunk={hunk} showLineNumbers={showLineNumbers} annotations={annotations} />\n        ) : (\n          <UnifiedHunk hunk={hunk} showLineNumbers={showLineNumbers} annotations={annotations} />\n        )}\n      </Fragment>\n    );\n  });\n\n  if (bare) {\n    return (\n      <div className={cn(\"overflow-x-auto font-mono text-xs leading-relaxed\", className)}>\n        {rows}\n      </div>\n    );\n  }\n  return (\n    <div className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}>\n      <div className=\"flex items-center justify-between gap-2 border-b border-border px-3 py-1.5\">\n        <span className=\"text-[11px] uppercase tracking-wide text-muted-foreground\">\n          {language || \"diff\"}\n        </span>\n        <SegmentedControl\n          size=\"sm\"\n          aria-label=\"Diff view\"\n          value={view}\n          onChange={setView}\n          options={DIFF_VIEW_OPTIONS}\n        />\n      </div>\n      <div className=\"overflow-x-auto font-mono text-xs leading-relaxed\">{rows}</div>\n    </div>\n  );\n}\n\n// Reconstruct the full old side (context + remove) and new side (context + add)\n// as text — highlighting each side as a coherent blob so grammar state is intact.\nfunction buildSides(hunks: DiffHunk[]): { oldSource: string; newSource: string } {\n  const oldLines: string[] = [];\n  const newLines: string[] = [];\n  for (const hunk of hunks) {\n    for (const line of hunk.lines) {\n      if (line.type !== \"add\") oldLines.push(line.content);\n      if (line.type !== \"remove\") newLines.push(line.content);\n    }\n  }\n  return { oldSource: oldLines.join(\"\\n\"), newSource: newLines.join(\"\\n\") };\n}\n\n// Map each diff line to its highlighted tokens via a sequential cursor per side\n// (not absolute line number, so unified-diff gaps between hunks stay aligned).\nfunction resolveHunks(\n  hunks: DiffHunk[],\n  oldTokens: HighlightedLine[] | null,\n  newTokens: HighlightedLine[] | null,\n): ResolvedHunk[] {\n  let oldCursor = 0;\n  let newCursor = 0;\n  return hunks.map((hunk) => ({\n    header: hunk.header,\n    path: hunk.path,\n    lines: hunk.lines.map((line) => {\n      const resolved: ResolvedLine = {\n        line,\n        oldTokens: line.type === \"add\" ? undefined : oldTokens?.[oldCursor],\n        newTokens: line.type === \"remove\" ? undefined : newTokens?.[newCursor],\n      };\n      if (line.type !== \"add\") oldCursor += 1;\n      if (line.type !== \"remove\") newCursor += 1;\n      return resolved;\n    }),\n  }));\n}\n\ntype HunkProps = {\n  hunk: ResolvedHunk;\n  showLineNumbers: boolean;\n  annotations: LineAnnotations;\n};\n\n// Which side of `line` a widget at (side, number) attaches to: context lines\n// carry both numbers, add lines only `new`, remove lines only `old`.\nfunction lineHasPosition(line: DiffLine, side: DiffSide, number: number): boolean {\n  if (side === \"old\") return line.type !== \"add\" && line.oldNumber === number;\n  return line.type !== \"remove\" && line.newNumber === number;\n}\n\nfunction WidgetRows({ widgets }: { widgets: DiffLineWidget[] }) {\n  return (\n    <>\n      {widgets.map((widget) => (\n        <div\n          key={widget.key}\n          data-diff-widget={widget.key}\n          className=\"whitespace-normal border-y border-border bg-background px-3 py-2 font-sans text-sm leading-normal text-foreground\"\n        >\n          {widget.node}\n        </div>\n      ))}\n    </>\n  );\n}\n\nfunction UnifiedHunk({ hunk, showLineNumbers, annotations }: HunkProps) {\n  const { onLineAction, lineWidgets } = annotations;\n  return (\n    <>\n      {hunk.header && <HunkHeader header={hunk.header} />}\n      {hunk.lines.map((resolved, index) => {\n        const { line } = resolved;\n        const tokens = line.type === \"remove\" ? resolved.oldTokens : resolved.newTokens;\n        const actionSide: DiffSide = line.type === \"remove\" ? \"old\" : \"new\";\n        const widgets = lineWidgets?.filter((w) => lineHasPosition(line, w.side, w.line));\n        return (\n          <Fragment key={index}>\n            <div className={cn(\"group flex\", ROW_TINT[line.type])} data-diff-line={line.type}>\n              {showLineNumbers && (\n                <>\n                  <Gutter\n                    value={line.oldNumber}\n                    line={line}\n                    side=\"old\"\n                    actionSide={actionSide}\n                    onLineAction={onLineAction}\n                  />\n                  <Gutter\n                    value={line.newNumber}\n                    line={line}\n                    side=\"new\"\n                    actionSide={actionSide}\n                    onLineAction={onLineAction}\n                  />\n                </>\n              )}\n              <Marker type={line.type} />\n              <code className=\"whitespace-pre pl-1 pr-3\">\n                <HighlightedTokens tokens={tokens} content={line.content} />\n              </code>\n            </div>\n            {widgets && <WidgetRows widgets={widgets} />}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n}\n\nfunction SplitHunk({ hunk, showLineNumbers, annotations }: HunkProps) {\n  const pairs = useMemo(() => pairLines(hunk.lines), [hunk.lines]);\n  const { onLineAction, lineWidgets } = annotations;\n  return (\n    <>\n      {hunk.header && <HunkHeader header={hunk.header} />}\n      {pairs.map((pair, index) => {\n        const widgets = lineWidgets?.filter(\n          (w) =>\n            (pair.left !== undefined && lineHasPosition(pair.left.line, w.side, w.line) && w.side === \"old\") ||\n            (pair.right !== undefined && lineHasPosition(pair.right.line, w.side, w.line) && w.side === \"new\"),\n        );\n        return (\n          <Fragment key={index}>\n            <div className=\"flex\">\n              <SplitCell\n                resolved={pair.left}\n                side=\"old\"\n                showLineNumbers={showLineNumbers}\n                onLineAction={onLineAction}\n              />\n              <span aria-hidden className=\"w-px shrink-0 bg-border\" />\n              <SplitCell\n                resolved={pair.right}\n                side=\"new\"\n                showLineNumbers={showLineNumbers}\n                onLineAction={onLineAction}\n              />\n            </div>\n            {widgets && <WidgetRows widgets={widgets} />}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n}\n\ntype SplitPair = { left: ResolvedLine | undefined; right: ResolvedLine | undefined };\n\n// Pair consecutive remove/add runs (remove[i] ↔ add[i]); leftovers get a blank\n// opposite cell. Context is one aligned row on both sides.\nfunction pairLines(lines: ResolvedLine[]): SplitPair[] {\n  const pairs: SplitPair[] = [];\n  let removes: ResolvedLine[] = [];\n  let adds: ResolvedLine[] = [];\n  const flush = () => {\n    const max = Math.max(removes.length, adds.length);\n    for (let i = 0; i < max; i++) pairs.push({ left: removes[i], right: adds[i] });\n    removes = [];\n    adds = [];\n  };\n  for (const resolved of lines) {\n    if (resolved.line.type === \"remove\") removes.push(resolved);\n    else if (resolved.line.type === \"add\") adds.push(resolved);\n    else {\n      flush();\n      pairs.push({ left: resolved, right: resolved });\n    }\n  }\n  flush();\n  return pairs;\n}\n\nfunction SplitCell({\n  resolved,\n  side,\n  showLineNumbers,\n  onLineAction,\n}: {\n  resolved: ResolvedLine | undefined;\n  side: DiffSide;\n  showLineNumbers: boolean;\n  onLineAction: LineAnnotations[\"onLineAction\"];\n}) {\n  if (!resolved) return <div className=\"min-w-0 flex-1\" />;\n  const { line } = resolved;\n  const active =\n    (side === \"old\" && line.type === \"remove\") || (side === \"new\" && line.type === \"add\");\n  const type: DiffLineType = active ? line.type : \"context\";\n  const number = side === \"old\" ? line.oldNumber : line.newNumber;\n  const tokens = side === \"old\" ? resolved.oldTokens : resolved.newTokens;\n  return (\n    <div\n      className={cn(\"group flex min-w-0 flex-1\", active && ROW_TINT[line.type])}\n      data-diff-line={type}\n    >\n      {showLineNumbers && (\n        <Gutter value={number} line={line} side={side} actionSide={side} onLineAction={onLineAction} />\n      )}\n      <Marker type={type} />\n      <code className=\"min-w-0 whitespace-pre pl-1 pr-3\">\n        <HighlightedTokens tokens={tokens} content={line.content} />\n      </code>\n    </div>\n  );\n}\n\nfunction FileHeader({ path }: { path: string }) {\n  return (\n    <div\n      data-diff-file={path}\n      className=\"flex items-center gap-1.5 border-b border-border bg-muted px-2 py-1 font-medium text-foreground\"\n    >\n      <UiFile className=\"size-3.5 shrink-0 text-muted-foreground\" />\n      <span className=\"truncate\">{path}</span>\n    </div>\n  );\n}\n\nfunction HunkHeader({ header }: { header: string }) {\n  return (\n    <div className=\"select-none bg-muted/60 px-2 py-0.5 text-muted-foreground\">{header}</div>\n  );\n}\n\n// `side` is the number this gutter shows; the \"+\" button only renders in the\n// `actionSide` gutter so a unified row (two gutters) exposes exactly one.\nfunction Gutter({\n  value,\n  line,\n  side,\n  actionSide,\n  onLineAction,\n}: {\n  value: number | undefined;\n  line: DiffLine;\n  side: DiffSide;\n  actionSide: DiffSide;\n  onLineAction: LineAnnotations[\"onLineAction\"];\n}) {\n  const showAction = onLineAction !== undefined && value !== undefined && side === actionSide;\n  return (\n    <span className=\"relative w-10 shrink-0 select-none px-2 text-right tabular-nums text-muted-foreground\">\n      {value ?? \"\"}\n      {showAction && (\n        <button\n          type=\"button\"\n          aria-label={`Comment on line ${value}`}\n          onClick={() => onLineAction({ side, line: value, content: line.content })}\n          className=\"absolute inset-y-0 left-0.5 flex items-center rounded-sm bg-background text-primary opacity-0 hover:text-primary/80 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring group-hover:opacity-100\"\n        >\n          <UiAdd className=\"size-3.5\" />\n        </button>\n      )}\n    </span>\n  );\n}\n\nfunction Marker({ type }: { type: DiffLineType }) {\n  return (\n    <span className={cn(\"w-4 shrink-0 select-none text-center\", MARKER_TONE[type])}>\n      {MARKER[type]}\n    </span>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/data/FilterPill.cjs

@@ -112,6 +112,7 @@ function FilterPill({
   className
 }) {
   const triState = !!onModeChange;
+  const iconNode = icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" });
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -123,10 +124,22 @@ function FilterPill({
         children: count
       }
     ),
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" }),
+    iconNode,
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
   ] });
   if (triState) {
+    const optionContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      iconNode,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+      count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "shrink-0 text-[10px] tabular-nums text-muted-foreground",
+          "data-pill-count": "",
+          children: count
+        }
+      )
+    ] });
     const control = /* @__PURE__ */ jsxRuntime.jsx(
       TristateSwitch,
       {
@@ -136,7 +149,7 @@ function FilterPill({
         ...title ? { ariaLabel: title } : {}
       }
     );
-    const labelContent = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: content });
+    const labelContent = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: optionContent });
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("inline-flex items-center gap-1.5 select-none", className), title, children: togglePosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       labelContent,
       control

package/dist/data/FilterPill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.cjs","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","Fragment","cn","Icon","UiClose","UiCheck","UiAdd","UiRemove"],"mappings":"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"}
+{"version":3,"file":"FilterPill.cjs","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count: a badge before the label, or muted text after it on a tri-state option. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const iconNode = icon && (\n    <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n  );\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {iconNode}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    // In an option list the count is a facet of the label, not a badge: it\n    // trails the label in muted text so the labels stay aligned.\n    const optionContent = (\n      <>\n        {iconNode}\n        <span className=\"truncate\">{label}</span>\n        {count !== undefined && (\n          <span\n            className=\"shrink-0 text-[10px] tabular-nums text-muted-foreground\"\n            data-pill-count=\"\"\n          >\n            {count}\n          </span>\n        )}\n      </>\n    );\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {optionContent}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","Fragment","cn","Icon","UiClose","UiCheck","UiAdd","UiRemove"],"mappings":"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"}

package/dist/data/FilterPill.d.ts

@@ -6,7 +6,7 @@ export type FilterPillProps = {
     mode?: FilterMode;
     /** Primary visible label. */
     label: ReactNode;
-    /** Optional count badge rendered before the label. */
+    /** Optional count: a badge before the label, or muted text after it on a tri-state option. */
     count?: number;
     /** Iconify name or imported icon component. */
     icon?: string | StaticIconComponent;

package/dist/data/FilterPill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/data/FilterPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0HF,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAuB,EACvB,WAAkB,EAClB,SAAS,GACV,EAAE,eAAe,+BAoEjB;AAeD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,+BAE5E;AAED,wBAAgB,eAAe,gCAM9B"}
+{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/data/FilterPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0HF,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAuB,EACvB,WAAkB,EAClB,SAAS,GACV,EAAE,eAAe,+BAqFjB;AAeD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,+BAE5E;AAED,wBAAgB,eAAe,gCAM9B"}

package/dist/data/FilterPill.js

@@ -110,6 +110,7 @@ function FilterPill({
   className
 }) {
   const triState = !!onModeChange;
+  const iconNode = icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" });
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     count !== void 0 && /* @__PURE__ */ jsx(
       "span",
@@ -121,10 +122,22 @@ function FilterPill({
         children: count
       }
     ),
-    icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" }),
+    iconNode,
     /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
   ] });
   if (triState) {
+    const optionContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      iconNode,
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+      count !== void 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "shrink-0 text-[10px] tabular-nums text-muted-foreground",
+          "data-pill-count": "",
+          children: count
+        }
+      )
+    ] });
     const control = /* @__PURE__ */ jsx(
       TristateSwitch,
       {
@@ -134,7 +147,7 @@ function FilterPill({
         ...title ? { ariaLabel: title } : {}
       }
     );
-    const labelContent = /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: content });
+    const labelContent = /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: optionContent });
     return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center gap-1.5 select-none", className), title, children: togglePosition === "right" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       labelContent,
       control

package/dist/data/FilterPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.js","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterPill.js","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count: a badge before the label, or muted text after it on a tri-state option. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const iconNode = icon && (\n    <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n  );\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {iconNode}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    // In an option list the count is a facet of the label, not a badge: it\n    // trails the label in muted text so the labels stay aligned.\n    const optionContent = (\n      <>\n        {iconNode}\n        <span className=\"truncate\">{label}</span>\n        {count !== undefined && (\n          <span\n            className=\"shrink-0 text-[10px] tabular-nums text-muted-foreground\"\n            data-pill-count=\"\"\n          >\n            {count}\n          </span>\n        )}\n      </>\n    );\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {optionContent}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA2CA,SAAS,YAAY,MAA0B;AAC7C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EAAA;AAEb;AAIA,MAAM,iBAA2C;AAAA,EAC/C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAKG;AACD,QAAM,OACJ,SAAS,YAAY,YAAY,SAAS,YAAY,YAAY;AACpE,QAAM,KACJ,SAAS,YAAY,kBAAkB,SAAS,YAAY,oBAAoB;AAQlF,QAAM,SAAS,CAAC,MAAkB,eAChC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,wBAAsB;AAAA,MACtB,SAAS,CAAC,UAAU;AAClB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAS,IAAI;AAAA,MACf;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA;AAId,QAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,OAAO,SAAS,YAAY,YAAY,WAAW,SAAS;AAAA,IAC5D,OAAO,iBAAiB,IAAI,GAAG,SAAS;AAAA,IACxC,OAAO,SAAS,YAAY,YAAY,WAAW,SAAS;AAAA,IAC7D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA,UAIT;AAAA,UACA,eAAe,IAAI;AAAA,QAAA;AAAA,QAGpB,mBAAS,aACR;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,SAAS,YAAY,UAAU;AAAA,YACrC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,aAAa;AAAA,cACtB,SAAS,aAAa;AAAA,YAAA;AAAA,UACxB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ,GACF;AAGF,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EAAA;AAKF,MAAI,CAAC,aAAa;AAChB,+BACG,QAAA,EAAK,eAAW,MAAC,WAAW,cAC1B,UAAA,SACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS,CAAC,UAAU;AAGlB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAS,iBAAiB,IAAI,CAAC;AAAA,MACjC;AAAA,MACA,WAAW;AAAA,MAEV,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAAS,WAAW;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,QAAM,WAAW,CAAC,CAAC;AACnB,QAAM,WAAW,QACf,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,GAAS,WAAU,WAAU;AAExF,QAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,UAAU,UACT;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,QAGV,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ;AAAA,IACD,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,EAAA,GACpC;AAGF,MAAI,UAAU;AAGZ,UAAM,gBACJ,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,OAAM;AAAA,MACjC,UAAU,UACT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,mBAAgB;AAAA,UAEf,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAEF,UAAM,UACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACC,GAAI,QAAQ,EAAE,WAAW,UAAU,CAAA;AAAA,MAAC;AAAA,IAAA;AAGzC,UAAM,eACJ,oBAAC,QAAA,EAAK,WAAU,oEACb,UAAA,eACH;AAGF,WACE,oBAAC,QAAA,EAAK,WAAW,GAAG,gDAAgD,SAAS,GAAG,OAC7E,UAAA,mBAAmB,UAClB,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,IAEA,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,EAAA,CAEJ;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,gBAAa,MAAY;AAAA,QACzB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,aAAa,EAAE,QAA8B;AACpD,MAAI,SAAS,UAAW,QAAO,oBAAC,QAAK,MAAM,OAAO,WAAU,WAAU;AACtE,MAAI,SAAS,UAAW,QAAO,oBAAC,QAAK,MAAM,UAAU,WAAU,WAAU;AACzE,MAAI,SAAS,SAAU,QAAO,oBAAC,QAAA,EAAK,WAAU,mCAAkC;AAChF,SAAO,oBAAC,QAAA,EAAK,WAAU,6CAAA,CAA6C;AACtE;AAEA,SAAS,iBAAiB,MAA8B;AACtD,MAAI,SAAS,UAAW,QAAO;AAC/B,MAAI,SAAS,UAAW,QAAO;AAC/B,SAAO;AACT;AASO,SAAS,gBAAgB,EAAE,UAAU,aAAmC;AAC7E,6BAAQ,OAAA,EAAI,WAAW,GAAG,uCAAuC,SAAS,GAAI,UAAS;AACzF;AAEO,SAAS,kBAAkB;AAChC,6BACG,QAAA,EAAK,eAAW,MAAC,WAAU,sBAAqB,UAAA,KAEjD;AAEJ;"}

package/dist/data/GraphDiagram.cjs

@@ -7,7 +7,9 @@ const IconButton = require("../components/IconButton.cjs");
 const graphColumnsLayout = require("./graph-columns-layout.cjs");
 const graphLayout = require("./graph-layout.cjs");
 const GraphDiagramEdges = require("./GraphDiagramEdges.cjs");
+const GraphDiagramGroups = require("./GraphDiagramGroups.cjs");
 const GraphDiagramNodes = require("./GraphDiagramNodes.cjs");
+const useGroupWindows = require("./use-group-windows.cjs");
 const graphDiagramModel = require("./graph-diagram-model.cjs");
 const useEdgeFocus = require("./use-edge-focus.cjs");
 const usePanZoom = require("./use-pan-zoom.cjs");
@@ -19,9 +21,23 @@ const UiHome = require("../icons/components/UiHome.cjs");
 const DEFAULT_NODE_WIDTH = 168;
 const DEFAULT_NODE_HEIGHT = 60;
 const DEFAULT_COMPACT_NODE_HEIGHT = 24;
-function compactHeights(nodes, layout, compactNodeHeight) {
+function compactHeights(nodes, layout, compactNodeHeight, standIns, headerHeight) {
   if (layout !== "columns") return {};
-  return Object.fromEntries(nodes.filter((node) => node.size === "compact").map((node) => [node.id, compactNodeHeight]));
+  return Object.fromEntries(nodes.flatMap((node) => {
+    if (standIns.has(node.id)) return [[node.id, headerHeight]];
+    return node.size === "compact" ? [[node.id, compactNodeHeight]] : [];
+  }));
+}
+function collapsedStandIns(nodes, groups) {
+  const collapsed = new Set(groups == null ? void 0 : groups.filter((group) => group.collapsed === true).map((group) => group.id));
+  const standIns = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    if (node.group === void 0 || !collapsed.has(node.group)) continue;
+    const held = standIns.get(node.group);
+    if (held !== void 0) throw new Error(`GraphDiagram: collapsed group "${node.group}" holds "${held}" and "${node.id}"; it draws one stand-in`);
+    standIns.set(node.group, node.id);
+  }
+  return standIns;
 }
 function assertEdgesReferenceKnownNodes(nodes, edges) {
   const ids = new Set(nodes.map((node) => node.id));
@@ -40,7 +56,7 @@ function requireLevel(node) {
   }
   return node.level;
 }
-function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }) {
+function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap }) {
   switch (layout) {
     case "ring":
       return { ...graphLayout.ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };
@@ -57,6 +73,9 @@ function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeH
           nodeWidth,
           nodeHeight,
           compactNodeHeight,
+          records,
+          collapsed,
+          recordHeaderHeight,
           ...columnGap !== void 0 ? { columnGap } : {},
           ...rowGap !== void 0 ? { rowGap } : {}
         }
@@ -99,9 +118,11 @@ function GraphDiagram({
   onEdgeSelect,
   edgeFocus = "auto",
   groups,
+  onGroupToggle,
   nodeWidth = DEFAULT_NODE_WIDTH,
   nodeHeight = DEFAULT_NODE_HEIGHT,
   compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,
+  recordHeaderHeight = 24,
   columnGap,
   rowGap,
   zoomable = false,
@@ -114,22 +135,39 @@ function GraphDiagram({
 }) {
   assertEdgesReferenceKnownNodes(nodes, edges);
   const markerPrefix = `graph-diagram-${react.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
-  const { width, height, positions, groups: groupBoxes } = react.useMemo(
-    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }),
-    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap]
+  const records = react.useMemo(() => (groups == null ? void 0 : groups.filter((group) => group.variant === "record").map((group) => group.id)) ?? [], [groups]);
+  const recordNodes = react.useMemo(() => new Set(layout === "columns" ? nodes.filter((node) => node.group !== void 0 && records.includes(node.group)).map((node) => node.id) : []), [layout, nodes, records]);
+  const standIns = react.useMemo(() => layout === "columns" ? collapsedStandIns(nodes, groups) : /* @__PURE__ */ new Map(), [layout, nodes, groups]);
+  const collapsed = react.useMemo(() => [...standIns.keys()], [standIns]);
+  const { width, height, positions: laidOut, groups: groupBoxes } = react.useMemo(
+    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap }),
+    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap]
   );
-  const nodeHeights = react.useMemo(() => compactHeights(nodes, layout, compactNodeHeight), [nodes, layout, compactNodeHeight]);
-  const routes = react.useMemo(
-    () => graphEdgeRouting.routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === "columns" ? "side" : "center" }),
-    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout]
+  const nodeHeights = react.useMemo(
+    () => compactHeights(nodes, layout, compactNodeHeight, new Set(standIns.values()), recordHeaderHeight),
+    [nodes, layout, compactNodeHeight, standIns, recordHeaderHeight]
   );
   const panZoom = usePanZoom.usePanZoom({
     enabled: zoomable,
     wheel: wheelZoom,
     contentWidth: width,
     contentHeight: height,
-    opening: openingFit(positions, fitMinScale, focusId)
+    opening: openingFit(laidOut, fitMinScale, focusId)
   });
+  const windows = useGroupWindows.useGroupWindows({ boxes: groupBoxes, positions: laidOut, reveal: selectedId ?? focusId, stageRef: panZoom.contentRef, scale: zoomable ? panZoom.transform.scale : 1 });
+  const { positions } = windows;
+  const routes = react.useMemo(
+    () => graphEdgeRouting.routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === "columns" ? "side" : "center" }),
+    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout]
+  );
+  const drawnNodes = react.useMemo(() => {
+    const standing = new Set(standIns.values());
+    return nodes.filter((node) => !windows.hidden.has(node.id) && !standing.has(node.id));
+  }, [nodes, windows.hidden, standIns]);
+  const windowOf = react.useMemo(
+    () => new Map(groupBoxes.flatMap((box) => box.window ? box.window.members.map((id) => [id, box.id]) : [])),
+    [groupBoxes]
+  );
   const natural = layout === "columns" || zoomable;
   const place = natural ? ({ x, y }) => ({ left: x, top: y }) : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });
   const focus = useEdgeFocus.useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });
@@ -155,7 +193,19 @@ function GraphDiagram({
             className: utils.cn("relative", natural ? !zoomable && "mx-auto" : "w-full"),
             style: stageStyle({ width, height }, natural, zoomable ? panZoom : void 0),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(GraphDiagramNodes.GraphDiagramGroupBoxes, { boxes: groupBoxes, groups }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                GraphDiagramGroups.GraphDiagramGroupBoxes,
+                {
+                  boxes: groupBoxes,
+                  groups,
+                  starts: windows.starts,
+                  onScroll: windows.scroll,
+                  onGroupToggle,
+                  standIns,
+                  selectedId,
+                  onNodeSelect
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 GraphDiagramEdges.GraphDiagramEdgePaths,
                 {
@@ -175,12 +225,14 @@ function GraphDiagram({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   GraphDiagramNodes.GraphDiagramNodes,
                   {
-                    nodes,
+                    nodes: drawnNodes,
                     positions,
+                    windowOf,
                     place,
                     nodeWidth,
                     nodeHeight,
                     nodeHeights,
+                    recordNodes,
                     selectedId,
                     onNodeSelect,
                     onNodeExpand,

package/dist/data/GraphDiagram.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GraphDiagram.cjs","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useId, useMemo, type CSSProperties } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiFullscreen, UiHome, UiZoomIn, UiZoomOut } from \"../icons\";\nimport { columnsLayout, type ColumnsLayoutResult } from \"./graph-columns-layout\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\nimport { GraphDiagramEdgeLabels, GraphDiagramEdgePaths } from \"./GraphDiagramEdges\";\nimport { GraphDiagramGroupBoxes, GraphDiagramNodes } from \"./GraphDiagramNodes\";\nimport {\n  requireEntry,\n  type GraphDiagramEdge,\n  type GraphDiagramEdgeFocus,\n  type GraphDiagramGroup,\n  type GraphDiagramLayout,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\nimport { useEdgeFocus } from \"./use-edge-focus\";\nimport { usePanZoom, type FitOptions, type PanZoom, type WheelMode } from \"./use-pan-zoom\";\n\nexport type {\n  GraphDiagramEdge,\n  GraphDiagramEdgeFocus,\n  GraphDiagramGroup,\n  GraphDiagramLayout,\n  GraphDiagramNode,\n} from \"./graph-diagram-model\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram. It knows\n// nothing about the domain: a producer maps its data into\n// GraphDiagramNode/GraphDiagramEdge and gets layout, edge routing and\n// selection behaviour.\n//\n// \"ring\" suits a small cycle of resources and processes — relationships with\n// back edges or reciprocal pairs. \"columns\" suits a directed graph with a\n// natural depth (a call graph, a dependency chain): nodes sit in the column of\n// their `level`, grouped and boxed by `group`.\n//\n// The \"columns\" layout, and any zoomable diagram, is drawn at its natural\n// pixel size so node boxes, edges and group boxes share one coordinate system\n// at every container width and zoom level. A non-zoomable \"ring\" keeps scaling\n// its node positions to the container width.\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Defaults to \"ring\". \"columns\" needs a `level` on every node. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  /** Called by a node's `+N` control (see `expandCount`); does not select the node. */\n  onNodeExpand?: (id: string) => void;\n  selectedEdgeId?: string;\n  /** Makes edges, and their label pills, selectable. */\n  onEdgeSelect?: (id: string) => void;\n  /**\n   * Whether an edge shows its pill only while in focus, and fades while another is. Defaults to\n   * \"auto\": a diagram with more than 32 edges is focused, a smaller one shows everything.\n   */\n  edgeFocus?: GraphDiagramEdgeFocus;\n  /** \"columns\" layout: captions for the group rectangles. A group without an entry shows its id. */\n  groups?: GraphDiagramGroup[];\n  nodeWidth?: number;\n  nodeHeight?: number;\n  /**\n   * \"columns\" layout: the height of a node with `size: \"compact\"`, drawn on one line. A group of only\n   * compact nodes stacks them closer and pads them tighter. Defaults to 24.\n   */\n  compactNodeHeight?: number;\n  /** \"columns\" layout: horizontal gap between columns in px. Leave room for edge label pills. */\n  columnGap?: number;\n  /** \"columns\" layout: vertical gap between stacked nodes in px. */\n  rowGap?: number;\n  /** Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear. */\n  zoomable?: boolean;\n  /** Zoomable: \"zoom\" makes a plain mouse wheel zoom too, for a diagram that fills its pane. Defaults to \"modifier\". */\n  wheelZoom?: WheelMode;\n  /**\n   * Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too\n   * large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to\n   * view` still shows everything, and `Reset view` returns here. Unset, the diagram opens whole.\n   */\n  fitMinScale?: number;\n  /** Zoomable: the node an overflowing diagram opens centred on. Defaults to the diagram's centre. */\n  focusId?: string;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\nconst DEFAULT_COMPACT_NODE_HEIGHT = 24;\n\ninterface LayoutOptions {\n  layout: GraphDiagramLayout;\n  nodeWidth: number;\n  nodeHeight: number;\n  compactNodeHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\n}\n\n/** The heights of the nodes not drawn at the node height: the compact ones, in the \"columns\" layout. */\nfunction compactHeights(nodes: GraphDiagramNode[], layout: GraphDiagramLayout, compactNodeHeight: number): Record<string, number> {\n  if (layout !== \"columns\") return {};\n  return Object.fromEntries(nodes.filter((node) => node.size === \"compact\").map((node) => [node.id, compactNodeHeight]));\n}\n\nfunction assertEdgesReferenceKnownNodes(nodes: GraphDiagramNode[], edges: GraphDiagramEdge[]): void {\n  const ids = new Set(nodes.map((node) => node.id));\n  for (const edge of edges) {\n    if (!ids.has(edge.from)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!ids.has(edge.to)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n  }\n}\n\nfunction requireLevel(node: GraphDiagramNode): number {\n  if (node.level === undefined || !Number.isFinite(node.level)) {\n    throw new Error(`GraphDiagram: node \"${node.id}\" needs a finite level for the \"columns\" layout`);\n  }\n  return node.level;\n}\n\nfunction layoutNodes(\n  nodes: GraphDiagramNode[],\n  edges: GraphDiagramEdge[],\n  { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }: LayoutOptions,\n): ColumnsLayoutResult {\n  switch (layout) {\n    case \"ring\":\n      return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };\n    case \"columns\":\n      return columnsLayout(\n        nodes.map((node) => ({\n          id: node.id,\n          level: requireLevel(node),\n          ...(node.group !== undefined ? { group: node.group } : {}),\n          ...(node.size === \"compact\" ? { compact: true } : {}),\n        })),\n        edges,\n        {\n          nodeWidth,\n          nodeHeight,\n          compactNodeHeight,\n          ...(columnGap !== undefined ? { columnGap } : {}),\n          ...(rowGap !== undefined ? { rowGap } : {}),\n        },\n      );\n    default:\n      throw new Error(`GraphDiagram: unknown layout \"${layout satisfies never}\"`);\n  }\n}\n\nfunction toPercent(value: number, extent: number): string {\n  return `${(value / extent) * 100}%`;\n}\n\nfunction stageStyle(size: { width: number; height: number }, natural: boolean, panZoom: PanZoom | undefined): CSSProperties {\n  if (!natural) return { aspectRatio: `${size.width} / ${size.height}` };\n  if (!panZoom) return size;\n  const { x, y, scale } = panZoom.transform;\n  return { ...size, transform: `translate(${x}px, ${y}px) scale(${scale})`, transformOrigin: \"0 0\" };\n}\n\n/** `resettable`: the diagram opens at another view than the whole of it, so there is one to return to. */\nfunction ZoomControls({ panZoom, resettable }: { panZoom: PanZoom; resettable: boolean }) {\n  return (\n    <div className=\"absolute right-2 top-2 flex cursor-default gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\">\n      <IconButton icon={UiZoomOut} label=\"Zoom out\" className=\"size-6\" onClick={panZoom.zoomOut} />\n      <IconButton icon={UiZoomIn} label=\"Zoom in\" className=\"size-6\" onClick={panZoom.zoomIn} />\n      <IconButton icon={UiFullscreen} label=\"Fit to view\" className=\"size-6\" onClick={panZoom.fit} />\n      {resettable && <IconButton icon={UiHome} label=\"Reset view\" className=\"size-6\" onClick={panZoom.reset} />}\n    </div>\n  );\n}\n\n/** How a zoomable diagram opens: no smaller than `fitMinScale`, centred on the `focusId` node. */\nfunction openingFit(\n  positions: Record<string, GraphLayoutPosition>,\n  fitMinScale: number | undefined,\n  focusId: string | undefined,\n): FitOptions {\n  return {\n    ...(fitMinScale !== undefined ? { minScale: fitMinScale } : {}),\n    ...(focusId !== undefined ? { focus: requireEntry(positions, focusId, \"layout position\") } : {}),\n  };\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  selectedEdgeId,\n  onEdgeSelect,\n  edgeFocus = \"auto\",\n  groups,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,\n  columnGap,\n  rowGap,\n  zoomable = false,\n  wheelZoom = \"modifier\",\n  fitMinScale,\n  focusId,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n  const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const { width, height, positions, groups: groupBoxes } = useMemo(\n    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap],\n  );\n  const nodeHeights = useMemo(() => compactHeights(nodes, layout, compactNodeHeight), [nodes, layout, compactNodeHeight]);\n  const routes = useMemo(\n    () =>\n      routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === \"columns\" ? \"side\" : \"center\" }),\n    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    wheel: wheelZoom,\n    contentWidth: width,\n    contentHeight: height,\n    opening: openingFit(positions, fitMinScale, focusId),\n  });\n  const natural = layout === \"columns\" || zoomable;\n  const place: GraphPlacer = natural\n    ? ({ x, y }) => ({ left: x, top: y })\n    : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });\n  const focus = useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });\n  const edgeSelection = { selectedEdgeId, onEdgeSelect, focus: focus.state };\n\n  return (\n    <div\n      ref={panZoom.viewportRef}\n      className={cn(\n        \"w-full\",\n        zoomable ? \"relative touch-none overflow-hidden\" : \"overflow-auto\",\n        zoomable && (panZoom.panning ? \"cursor-grabbing select-none\" : \"cursor-grab\"),\n        className,\n      )}\n      style={maxHeight != null ? { maxHeight } : undefined}\n      {...panZoom.handlers}\n    >\n      <div\n        ref={panZoom.contentRef}\n        data-graph-stage=\"\"\n        className={cn(\"relative\", natural ? !zoomable && \"mx-auto\" : \"w-full\")}\n        style={stageStyle({ width, height }, natural, zoomable ? panZoom : undefined)}\n      >\n        <GraphDiagramGroupBoxes boxes={groupBoxes} groups={groups} />\n        <GraphDiagramEdgePaths\n          edges={edges}\n          nodes={nodes}\n          routes={routes}\n          width={width}\n          height={height}\n          ariaLabel={ariaLabel}\n          markerPrefix={markerPrefix}\n          onEdgeHover={focus.onEdgeHover}\n          {...edgeSelection}\n        />\n        <div className=\"pointer-events-none absolute inset-0\">\n          <GraphDiagramEdgeLabels edges={edges} routes={routes} place={place} spread={natural} {...edgeSelection} />\n          <GraphDiagramNodes\n            nodes={nodes}\n            positions={positions}\n            place={place}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            nodeHeights={nodeHeights}\n            selectedId={selectedId}\n            onNodeSelect={onNodeSelect}\n            onNodeExpand={onNodeExpand}\n            onNodeHover={focus.onNodeHover}\n          />\n        </div>\n      </div>\n      {zoomable && <ZoomControls panZoom={panZoom} resettable={fitMinScale !== undefined} />}\n    </div>\n  );\n}\n"],"names":["ringLayout","columnsLayout","jsxs","jsx","IconButton","UiZoomOut","UiZoomIn","UiFullscreen","UiHome","requireEntry","useId","useMemo","routeEdges","usePanZoom","useEdgeFocus","cn","GraphDiagramGroupBoxes","GraphDiagramEdgePaths","GraphDiagramEdgeLabels","GraphDiagramNodes"],"mappings":";;;;;;;;;;;;;;;;;;AA0FA,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AAYpC,SAAS,eAAe,OAA2B,QAA4B,mBAAmD;AAChI,MAAI,WAAW,UAAW,QAAO,CAAA;AACjC,SAAO,OAAO,YAAY,MAAM,OAAO,CAAC,SAAS,KAAK,SAAS,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,iBAAiB,CAAC,CAAC;AACvH;AAEA,SAAS,+BAA+B,OAA2B,OAAiC;AAClG,QAAM,MAAM,IAAI,IAAI,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC;AAChD,aAAW,QAAQ,OAAO;AACxB,QAAI,CAAC,IAAI,IAAI,KAAK,IAAI,GAAG;AACvB,YAAM,IAAI,MAAM,uBAAuB,KAAK,EAAE,8BAA8B,KAAK,IAAI,GAAG;AAAA,IAC1F;AACA,QAAI,CAAC,IAAI,IAAI,KAAK,EAAE,GAAG;AACrB,YAAM,IAAI,MAAM,uBAAuB,KAAK,EAAE,8BAA8B,KAAK,EAAE,GAAG;AAAA,IACxF;AAAA,EACF;AACF;AAEA,SAAS,aAAa,MAAgC;AACpD,MAAI,KAAK,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,KAAK,GAAG;AAC5D,UAAM,IAAI,MAAM,uBAAuB,KAAK,EAAE,iDAAiD;AAAA,EACjG;AACA,SAAO,KAAK;AACd;AAEA,SAAS,YACP,OACA,OACA,EAAE,QAAQ,WAAW,YAAY,mBAAmB,WAAW,UAC1C;AACrB,UAAQ,QAAA;AAAA,IACN,KAAK;AACH,aAAO,EAAE,GAAGA,YAAAA,WAAW,OAAO,EAAE,WAAW,WAAA,CAAY,GAAG,QAAQ,GAAC;AAAA,IACrE,KAAK;AACH,aAAOC,mBAAAA;AAAAA,QACL,MAAM,IAAI,CAAC,UAAU;AAAA,UACnB,IAAI,KAAK;AAAA,UACT,OAAO,aAAa,IAAI;AAAA,UACxB,GAAI,KAAK,UAAU,SAAY,EAAE,OAAO,KAAK,MAAA,IAAU,CAAA;AAAA,UACvD,GAAI,KAAK,SAAS,YAAY,EAAE,SAAS,KAAA,IAAS,CAAA;AAAA,QAAC,EACnD;AAAA,QACF;AAAA,QACA;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,UAC9C,GAAI,WAAW,SAAY,EAAE,WAAW,CAAA;AAAA,QAAC;AAAA,MAC3C;AAAA,IAEJ;AACE,YAAM,IAAI,MAAM,iCAAiC,MAAsB,GAAG;AAAA,EAAA;AAEhF;AAEA,SAAS,UAAU,OAAe,QAAwB;AACxD,SAAO,GAAI,QAAQ,SAAU,GAAG;AAClC;AAEA,SAAS,WAAW,MAAyC,SAAkB,SAA6C;AAC1H,MAAI,CAAC,QAAS,QAAO,EAAE,aAAa,GAAG,KAAK,KAAK,MAAM,KAAK,MAAM,GAAA;AAClE,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,EAAE,GAAG,GAAG,MAAA,IAAU,QAAQ;AAChC,SAAO,EAAE,GAAG,MAAM,WAAW,aAAa,CAAC,OAAO,CAAC,aAAa,KAAK,KAAK,iBAAiB,MAAA;AAC7F;AAGA,SAAS,aAAa,EAAE,SAAS,cAAyD;AACxF,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,oHACb,UAAA;AAAA,IAAAC,2BAAAA,IAACC,WAAAA,YAAA,EAAW,MAAMC,UAAAA,WAAW,OAAM,YAAW,WAAU,UAAS,SAAS,QAAQ,QAAA,CAAS;AAAA,IAC3FF,2BAAAA,IAACC,WAAAA,YAAA,EAAW,MAAME,SAAAA,UAAU,OAAM,WAAU,WAAU,UAAS,SAAS,QAAQ,OAAA,CAAQ;AAAA,IACxFH,2BAAAA,IAACC,WAAAA,YAAA,EAAW,MAAMG,aAAAA,cAAc,OAAM,eAAc,WAAU,UAAS,SAAS,QAAQ,IAAA,CAAK;AAAA,IAC5F,cAAcJ,2BAAAA,IAACC,WAAAA,YAAA,EAAW,MAAMI,OAAAA,QAAQ,OAAM,cAAa,WAAU,UAAS,SAAS,QAAQ,MAAA,CAAO;AAAA,EAAA,GACzG;AAEJ;AAGA,SAAS,WACP,WACA,aACA,SACY;AACZ,SAAO;AAAA,IACL,GAAI,gBAAgB,SAAY,EAAE,UAAU,YAAA,IAAgB,CAAA;AAAA,IAC5D,GAAI,YAAY,SAAY,EAAE,OAAOC,kBAAAA,aAAa,WAAW,SAAS,iBAAiB,MAAM,CAAA;AAAA,EAAC;AAElG;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,iCAA+B,OAAO,KAAK;AAC3C,QAAM,eAAe,iBAAiBC,MAAAA,MAAA,EAAQ,QAAQ,mBAAmB,EAAE,CAAC;AAE5E,QAAM,EAAE,OAAO,QAAQ,WAAW,QAAQ,eAAeC,MAAAA;AAAAA,IACvD,MAAM,YAAY,OAAO,OAAO,EAAE,QAAQ,WAAW,YAAY,mBAAmB,WAAW,QAAQ;AAAA,IACvG,CAAC,QAAQ,OAAO,OAAO,WAAW,YAAY,mBAAmB,WAAW,MAAM;AAAA,EAAA;AAEpF,QAAM,cAAcA,MAAAA,QAAQ,MAAM,eAAe,OAAO,QAAQ,iBAAiB,GAAG,CAAC,OAAO,QAAQ,iBAAiB,CAAC;AACtH,QAAM,SAASA,MAAAA;AAAAA,IACb,MACEC,iBAAAA,WAAW,OAAO,WAAW,EAAE,WAAW,YAAY,eAAe,EAAE,QAAQ,WAAW,YAAY,SAAS,UAAU;AAAA,IAC3H,CAAC,OAAO,WAAW,WAAW,YAAY,aAAa,MAAM;AAAA,EAAA;AAG/D,QAAM,UAAUC,WAAAA,WAAW;AAAA,IACzB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,SAAS,WAAW,WAAW,aAAa,OAAO;AAAA,EAAA,CACpD;AACD,QAAM,UAAU,WAAW,aAAa;AACxC,QAAM,QAAqB,UACvB,CAAC,EAAE,GAAG,EAAA,OAAS,EAAE,MAAM,GAAG,KAAK,EAAA,KAC/B,CAAC,EAAE,GAAG,EAAA,OAAS,EAAE,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,UAAU,GAAG,MAAM,EAAA;AACxE,QAAM,QAAQC,aAAAA,aAAa,EAAE,MAAM,WAAW,OAAO,YAAY,gBAAgB;AACjF,QAAM,gBAAgB,EAAE,gBAAgB,cAAc,OAAO,MAAM,MAAA;AAEnE,SACEZ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,WAAWa,MAAAA;AAAAA,QACT;AAAA,QACA,WAAW,wCAAwC;AAAA,QACnD,aAAa,QAAQ,UAAU,gCAAgC;AAAA,QAC/D;AAAA,MAAA;AAAA,MAEF,OAAO,aAAa,OAAO,EAAE,cAAc;AAAA,MAC1C,GAAG,QAAQ;AAAA,MAEZ,UAAA;AAAA,QAAAb,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK,QAAQ;AAAA,YACb,oBAAiB;AAAA,YACjB,WAAWa,MAAAA,GAAG,YAAY,UAAU,CAAC,YAAY,YAAY,QAAQ;AAAA,YACrE,OAAO,WAAW,EAAE,OAAO,UAAU,SAAS,WAAW,UAAU,MAAS;AAAA,YAE5E,UAAA;AAAA,cAAAZ,2BAAAA,IAACa,kBAAAA,wBAAA,EAAuB,OAAO,YAAY,OAAA,CAAgB;AAAA,cAC3Db,2BAAAA;AAAAA,gBAACc,kBAAAA;AAAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,aAAa,MAAM;AAAA,kBAClB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAENf,2BAAAA,KAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,gBAAAC,+BAACe,kBAAAA,0BAAuB,OAAc,QAAgB,OAAc,QAAQ,SAAU,GAAG,eAAe;AAAA,gBACxGf,2BAAAA;AAAAA,kBAACgB,kBAAAA;AAAAA,kBAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,aAAa,MAAM;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACrB,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAED,YAAYhB,2BAAAA,IAAC,cAAA,EAAa,SAAkB,YAAY,gBAAgB,OAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1F;;"}
+{"version":3,"file":"GraphDiagram.cjs","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useId, useMemo, type CSSProperties } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiFullscreen, UiHome, UiZoomIn, UiZoomOut } from \"../icons\";\nimport { columnsLayout, type ColumnsLayoutResult } from \"./graph-columns-layout\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\nimport { GraphDiagramEdgeLabels, GraphDiagramEdgePaths } from \"./GraphDiagramEdges\";\nimport { GraphDiagramGroupBoxes } from \"./GraphDiagramGroups\";\nimport { GraphDiagramNodes } from \"./GraphDiagramNodes\";\nimport { useGroupWindows } from \"./use-group-windows\";\nimport {\n  requireEntry,\n  type GraphDiagramEdge,\n  type GraphDiagramEdgeFocus,\n  type GraphDiagramGroup,\n  type GraphDiagramLayout,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\nimport { useEdgeFocus } from \"./use-edge-focus\";\nimport { usePanZoom, type FitOptions, type PanZoom, type WheelMode } from \"./use-pan-zoom\";\n\nexport type {\n  GraphDiagramEdge,\n  GraphDiagramEdgeFocus,\n  GraphDiagramGroup,\n  GraphDiagramLayout,\n  GraphDiagramNode,\n} from \"./graph-diagram-model\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram. It knows\n// nothing about the domain: a producer maps its data into\n// GraphDiagramNode/GraphDiagramEdge and gets layout, edge routing and\n// selection behaviour.\n//\n// \"ring\" suits a small cycle of resources and processes — relationships with\n// back edges or reciprocal pairs. \"columns\" suits a directed graph with a\n// natural depth (a call graph, a dependency chain): nodes sit in the column of\n// their `level`, grouped and boxed by `group`.\n//\n// The \"columns\" layout, and any zoomable diagram, is drawn at its natural\n// pixel size so node boxes, edges and group boxes share one coordinate system\n// at every container width and zoom level. A non-zoomable \"ring\" keeps scaling\n// its node positions to the container width.\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Defaults to \"ring\". \"columns\" needs a `level` on every node. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  /** Called by a node's `+N` control (see `expandCount`); does not select the node. */\n  onNodeExpand?: (id: string) => void;\n  selectedEdgeId?: string;\n  /** Makes edges, and their label pills, selectable. */\n  onEdgeSelect?: (id: string) => void;\n  /**\n   * Whether an edge shows its pill only while in focus, and fades while another is. Defaults to\n   * \"auto\": a diagram with more than 32 edges is focused, a smaller one shows everything.\n   */\n  edgeFocus?: GraphDiagramEdgeFocus;\n  /**\n   * \"columns\" layout: captions for the group rectangles. A group without an entry shows its id. A group\n   * with more than `GROUP_MEMBER_WINDOW` members in a column scrolls them in a window that many rows tall.\n   */\n  groups?: GraphDiagramGroup[];\n  /** \"columns\" layout: the chevron of a group whose `collapsed` is set asks to collapse or expand it. */\n  onGroupToggle?: (groupId: string) => void;\n  nodeWidth?: number;\n  nodeHeight?: number;\n  /**\n   * \"columns\" layout: the height of a node with `size: \"compact\"`, drawn on one line. A group of only\n   * compact nodes stacks them closer and pads them tighter. Defaults to 24.\n   */\n  compactNodeHeight?: number;\n  /** \"columns\" layout: height of a record group's header in px. Defaults to 24. */\n  recordHeaderHeight?: number;\n  /** \"columns\" layout: horizontal gap between columns in px. Leave room for edge label pills. */\n  columnGap?: number;\n  /** \"columns\" layout: vertical gap between stacked nodes in px. */\n  rowGap?: number;\n  /** Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear. */\n  zoomable?: boolean;\n  /** Zoomable: \"zoom\" makes a plain mouse wheel zoom too, for a diagram that fills its pane. Defaults to \"modifier\". */\n  wheelZoom?: WheelMode;\n  /**\n   * Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too\n   * large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to\n   * view` still shows everything, and `Reset view` returns here. Unset, the diagram opens whole.\n   */\n  fitMinScale?: number;\n  /** Zoomable: the node an overflowing diagram opens centred on. Defaults to the diagram's centre. */\n  focusId?: string;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\nconst DEFAULT_COMPACT_NODE_HEIGHT = 24;\n\ninterface LayoutOptions {\n  layout: GraphDiagramLayout;\n  nodeWidth: number;\n  nodeHeight: number;\n  compactNodeHeight: number;\n  records: readonly string[];\n  collapsed: readonly string[];\n  recordHeaderHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\n}\n\n/**\n * The heights of the nodes not drawn at the node height, in the \"columns\" layout: the compact ones, and\n * the stand-ins of collapsed groups, as tall as the header they are drawn as.\n */\nfunction compactHeights(nodes: GraphDiagramNode[], layout: GraphDiagramLayout, compactNodeHeight: number, standIns: ReadonlySet<string>, headerHeight: number): Record<string, number> {\n  if (layout !== \"columns\") return {};\n  return Object.fromEntries(nodes.flatMap((node): [string, number][] => {\n    if (standIns.has(node.id)) return [[node.id, headerHeight]];\n    return node.size === \"compact\" ? [[node.id, compactNodeHeight]] : [];\n  }));\n}\n\n/** The one node each collapsed group holds, by group id. */\nfunction collapsedStandIns(nodes: GraphDiagramNode[], groups: GraphDiagramGroup[] | undefined): Map<string, string> {\n  const collapsed = new Set(groups?.filter((group) => group.collapsed === true).map((group) => group.id));\n  const standIns = new Map<string, string>();\n  for (const node of nodes) {\n    if (node.group === undefined || !collapsed.has(node.group)) continue;\n    const held = standIns.get(node.group);\n    if (held !== undefined) throw new Error(`GraphDiagram: collapsed group \"${node.group}\" holds \"${held}\" and \"${node.id}\"; it draws one stand-in`);\n    standIns.set(node.group, node.id);\n  }\n  return standIns;\n}\n\nfunction assertEdgesReferenceKnownNodes(nodes: GraphDiagramNode[], edges: GraphDiagramEdge[]): void {\n  const ids = new Set(nodes.map((node) => node.id));\n  for (const edge of edges) {\n    if (!ids.has(edge.from)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!ids.has(edge.to)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n  }\n}\n\nfunction requireLevel(node: GraphDiagramNode): number {\n  if (node.level === undefined || !Number.isFinite(node.level)) {\n    throw new Error(`GraphDiagram: node \"${node.id}\" needs a finite level for the \"columns\" layout`);\n  }\n  return node.level;\n}\n\nfunction layoutNodes(\n  nodes: GraphDiagramNode[],\n  edges: GraphDiagramEdge[],\n  { layout, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap }: LayoutOptions,\n): ColumnsLayoutResult {\n  switch (layout) {\n    case \"ring\":\n      return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };\n    case \"columns\":\n      return columnsLayout(\n        nodes.map((node) => ({\n          id: node.id,\n          level: requireLevel(node),\n          ...(node.group !== undefined ? { group: node.group } : {}),\n          ...(node.size === \"compact\" ? { compact: true } : {}),\n        })),\n        edges,\n        {\n          nodeWidth,\n          nodeHeight,\n          compactNodeHeight,\n          records,\n          collapsed,\n          recordHeaderHeight,\n          ...(columnGap !== undefined ? { columnGap } : {}),\n          ...(rowGap !== undefined ? { rowGap } : {}),\n        },\n      );\n    default:\n      throw new Error(`GraphDiagram: unknown layout \"${layout satisfies never}\"`);\n  }\n}\n\nfunction toPercent(value: number, extent: number): string {\n  return `${(value / extent) * 100}%`;\n}\n\nfunction stageStyle(size: { width: number; height: number }, natural: boolean, panZoom: PanZoom | undefined): CSSProperties {\n  if (!natural) return { aspectRatio: `${size.width} / ${size.height}` };\n  if (!panZoom) return size;\n  const { x, y, scale } = panZoom.transform;\n  return { ...size, transform: `translate(${x}px, ${y}px) scale(${scale})`, transformOrigin: \"0 0\" };\n}\n\n/** `resettable`: the diagram opens at another view than the whole of it, so there is one to return to. */\nfunction ZoomControls({ panZoom, resettable }: { panZoom: PanZoom; resettable: boolean }) {\n  return (\n    <div className=\"absolute right-2 top-2 flex cursor-default gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\">\n      <IconButton icon={UiZoomOut} label=\"Zoom out\" className=\"size-6\" onClick={panZoom.zoomOut} />\n      <IconButton icon={UiZoomIn} label=\"Zoom in\" className=\"size-6\" onClick={panZoom.zoomIn} />\n      <IconButton icon={UiFullscreen} label=\"Fit to view\" className=\"size-6\" onClick={panZoom.fit} />\n      {resettable && <IconButton icon={UiHome} label=\"Reset view\" className=\"size-6\" onClick={panZoom.reset} />}\n    </div>\n  );\n}\n\n/** How a zoomable diagram opens: no smaller than `fitMinScale`, centred on the `focusId` node. */\nfunction openingFit(\n  positions: Record<string, GraphLayoutPosition>,\n  fitMinScale: number | undefined,\n  focusId: string | undefined,\n): FitOptions {\n  return {\n    ...(fitMinScale !== undefined ? { minScale: fitMinScale } : {}),\n    ...(focusId !== undefined ? { focus: requireEntry(positions, focusId, \"layout position\") } : {}),\n  };\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  selectedEdgeId,\n  onEdgeSelect,\n  edgeFocus = \"auto\",\n  groups,\n  onGroupToggle,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,\n  recordHeaderHeight = 24,\n  columnGap,\n  rowGap,\n  zoomable = false,\n  wheelZoom = \"modifier\",\n  fitMinScale,\n  focusId,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n  const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const records = useMemo(() => groups?.filter((group) => group.variant === \"record\").map((group) => group.id) ?? [], [groups]);\n  const recordNodes = useMemo(() => new Set(layout === \"columns\" ? nodes.filter((node) => node.group !== undefined && records.includes(node.group)).map((node) => node.id) : []), [layout, nodes, records]);\n  const standIns = useMemo(() => (layout === \"columns\" ? collapsedStandIns(nodes, groups) : new Map<string, string>()), [layout, nodes, groups]);\n  const collapsed = useMemo(() => [...standIns.keys()], [standIns]);\n\n  const { width, height, positions: laidOut, groups: groupBoxes } = useMemo(\n    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap],\n  );\n  const nodeHeights = useMemo(\n    () => compactHeights(nodes, layout, compactNodeHeight, new Set(standIns.values()), recordHeaderHeight),\n    [nodes, layout, compactNodeHeight, standIns, recordHeaderHeight],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    wheel: wheelZoom,\n    contentWidth: width,\n    contentHeight: height,\n    opening: openingFit(laidOut, fitMinScale, focusId),\n  });\n  const windows = useGroupWindows({ boxes: groupBoxes, positions: laidOut, reveal: selectedId ?? focusId, stageRef: panZoom.contentRef, scale: zoomable ? panZoom.transform.scale : 1 });\n  const { positions } = windows;\n  const routes = useMemo(\n    () =>\n      routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === \"columns\" ? \"side\" : \"center\" }),\n    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout],\n  );\n  const drawnNodes = useMemo(() => {\n    const standing = new Set(standIns.values());\n    return nodes.filter((node) => !windows.hidden.has(node.id) && !standing.has(node.id));\n  }, [nodes, windows.hidden, standIns]);\n  const windowOf = useMemo(\n    () => new Map(groupBoxes.flatMap((box) => (box.window ? box.window.members.map((id): [string, string] => [id, box.id]) : []))),\n    [groupBoxes],\n  );\n  const natural = layout === \"columns\" || zoomable;\n  const place: GraphPlacer = natural\n    ? ({ x, y }) => ({ left: x, top: y })\n    : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });\n  const focus = useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });\n  const edgeSelection = { selectedEdgeId, onEdgeSelect, focus: focus.state };\n\n  return (\n    <div\n      ref={panZoom.viewportRef}\n      className={cn(\n        \"w-full\",\n        zoomable ? \"relative touch-none overflow-hidden\" : \"overflow-auto\",\n        zoomable && (panZoom.panning ? \"cursor-grabbing select-none\" : \"cursor-grab\"),\n        className,\n      )}\n      style={maxHeight != null ? { maxHeight } : undefined}\n      {...panZoom.handlers}\n    >\n      <div\n        ref={panZoom.contentRef}\n        data-graph-stage=\"\"\n        className={cn(\"relative\", natural ? !zoomable && \"mx-auto\" : \"w-full\")}\n        style={stageStyle({ width, height }, natural, zoomable ? panZoom : undefined)}\n      >\n        <GraphDiagramGroupBoxes boxes={groupBoxes} groups={groups} starts={windows.starts} onScroll={windows.scroll} onGroupToggle={onGroupToggle}\n          standIns={standIns} selectedId={selectedId} onNodeSelect={onNodeSelect} />\n        <GraphDiagramEdgePaths\n          edges={edges}\n          nodes={nodes}\n          routes={routes}\n          width={width}\n          height={height}\n          ariaLabel={ariaLabel}\n          markerPrefix={markerPrefix}\n          onEdgeHover={focus.onEdgeHover}\n          {...edgeSelection}\n        />\n        <div className=\"pointer-events-none absolute inset-0\">\n          <GraphDiagramEdgeLabels edges={edges} routes={routes} place={place} spread={natural} {...edgeSelection} />\n          <GraphDiagramNodes\n            nodes={drawnNodes}\n            positions={positions}\n            windowOf={windowOf}\n            place={place}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            nodeHeights={nodeHeights}\n            recordNodes={recordNodes}\n            selectedId={selectedId}\n            onNodeSelect={onNodeSelect}\n            onNodeExpand={onNodeExpand}\n            onNodeHover={focus.onNodeHover}\n          />\n        </div>\n      </div>\n      {zoomable && <ZoomControls panZoom={panZoom} resettable={fitMinScale !== undefined} />}\n    </div>\n  );\n}\n"],"names":["ringLayout","columnsLayout","jsxs","jsx","IconButton","UiZoomOut","UiZoomIn","UiFullscreen","UiHome","requireEntry","useId","useMemo","usePanZoom","useGroupWindows","routeEdges","useEdgeFocus","cn","GraphDiagramGroupBoxes","GraphDiagramEdgePaths","GraphDiagramEdgeLabels","GraphDiagramNodes"],"mappings":"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"}