@lar-works/design-system 0.2.0 → 0.3.0

package/dist/board/Warnings.js

@@ -0,0 +1,85 @@
+import { BrandMark } from "../display/BrandMark.js";
+import { DismissButton } from "../feedback/DismissButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Warnings.tsx
+/** The board's warnings, in a banner under the title bar: connection problems stay in a collapsed list, inline
+*  details that never open a notification or a dialog. */
+function BoardWarnings({ lead, summary, children, action }) {
+	return /* @__PURE__ */ jsx("aside", {
+		"data-board-notices": true,
+		className: "shrink-0 border-b bg-(--warning-surface) px-6 py-2 text-(--foreground)",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [lead, summary ? /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer text-xs font-medium",
+					children: summary
+				}), /* @__PURE__ */ jsx("div", {
+					className: "mt-2 max-h-48 overflow-auto",
+					children
+				})] }) : null]
+			}), action]
+		})
+	});
+}
+/** One warning in the banner: its title, what to do, and a close button. Commands in it wrap anywhere. */
+function BoardWarning({ name, title, dismissLabel, onDismiss, action, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "notice",
+		className: "relative border-t py-3 pr-8 text-xs first:border-t-0 first:py-1",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-warning": name,
+			className: "[&_code]:wrap-anywhere",
+			children: [
+				/* @__PURE__ */ jsx(DismissButton, {
+					label: dismissLabel,
+					onClick: onDismiss
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "title",
+					className: "font-medium",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "description",
+					className: "text-base-700 mt-1",
+					children
+				}),
+				action && /* @__PURE__ */ jsx("div", {
+					className: "mt-2",
+					children: action
+				})
+			]
+		})
+	});
+}
+/** What fills the board's main area while a tool it can't work without is missing: the Lar mark, what's missing, why
+*  and how to fix it, and a way to look again. */
+function ToolMissing({ title, children, action }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "tool-missing grid flex-1 place-items-center p-5",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "tool-missing-box max-w-130 rounded-(--radius) border bg-(--card) px-6 py-5 [&_code]:wrap-anywhere [&_code]:text-(--foreground)",
+			role: "alert",
+			children: [
+				/* @__PURE__ */ jsx(BrandMark, { label: "Lar" }),
+				/* @__PURE__ */ jsx("h1", {
+					className: "mt-3 mb-0 text-(length:--text-base) font-semibold tracking-[-0.01em]",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-3 mb-0 text-(--muted-foreground)",
+					children
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-3 mb-0 text-(--muted-foreground)",
+					children: action
+				})
+			]
+		})
+	});
+}
+export { BoardWarning, BoardWarnings, ToolMissing };
+
+//# sourceMappingURL=Warnings.js.map

package/dist/board/Warnings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Warnings.js","names":[],"sources":["../../src/board/Warnings.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\n\nimport { BrandMark } from '../display/BrandMark';\nimport { DismissButton } from '../feedback/DismissButton';\n\ninterface BoardWarningsProps {\n    /** A warning shown open above the rest, such as a lost board server, which every number on the page depends on. */\n    lead?: ReactNode;\n    /** The collapsed list's summary, such as \"2 connections need attention\"; without it, no list. */\n    summary?: ReactNode;\n    /** The warnings in the collapsed list. */\n    children?: ReactNode;\n    /** At the banner's right, such as Diagnostics. */\n    action: ReactNode;\n}\n\n/** The board's warnings, in a banner under the title bar: connection problems stay in a collapsed list, inline\n *  details that never open a notification or a dialog. */\nexport function BoardWarnings({ lead, summary, children, action }: BoardWarningsProps) {\n    return (\n        <aside data-board-notices className=\"shrink-0 border-b bg-(--warning-surface) px-6 py-2 text-(--foreground)\">\n            <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"min-w-0 flex-1\">\n                    {lead}\n                    {summary ? (\n                        <details>\n                            <summary className=\"cursor-pointer text-xs font-medium\">{summary}</summary>\n                            <div className=\"mt-2 max-h-48 overflow-auto\">{children}</div>\n                        </details>\n                    ) : null}\n                </div>\n                {action}\n            </div>\n        </aside>\n    );\n}\n\ninterface BoardWarningProps {\n    /** What the warning is about, as `data-warning`. */\n    name: string;\n    title: string;\n    dismissLabel: string;\n    onDismiss: (event: MouseEvent<HTMLButtonElement>) => void;\n    /** Under the text, such as a button that fixes it. */\n    action?: ReactNode;\n    children: ReactNode;\n}\n\n/** One warning in the banner: its title, what to do, and a close button. Commands in it wrap anywhere. */\nexport function BoardWarning({ name, title, dismissLabel, onDismiss, action, children }: BoardWarningProps) {\n    return (\n        <div data-slot=\"notice\" className=\"relative border-t py-3 pr-8 text-xs first:border-t-0 first:py-1\">\n            <div data-warning={name} className=\"[&_code]:wrap-anywhere\">\n                <DismissButton label={dismissLabel} onClick={onDismiss} />\n                <div data-slot=\"title\" className=\"font-medium\">\n                    {title}\n                </div>\n                <div data-slot=\"description\" className=\"text-base-700 mt-1\">\n                    {children}\n                </div>\n                {action && <div className=\"mt-2\">{action}</div>}\n            </div>\n        </div>\n    );\n}\n\n/** What fills the board's main area while a tool it can't work without is missing: the Lar mark, what's missing, why\n *  and how to fix it, and a way to look again. */\nexport function ToolMissing({ title, children, action }: { title: string; children: ReactNode; action: ReactNode }) {\n    return (\n        <div className=\"tool-missing grid flex-1 place-items-center p-5\">\n            <div\n                className=\"tool-missing-box max-w-130 rounded-(--radius) border bg-(--card) px-6 py-5 [&_code]:wrap-anywhere [&_code]:text-(--foreground)\"\n                role=\"alert\"\n            >\n                <BrandMark label=\"Lar\" />\n                <h1 className=\"mt-3 mb-0 text-(length:--text-base) font-semibold tracking-[-0.01em]\">{title}</h1>\n                <p className=\"mt-3 mb-0 text-(--muted-foreground)\">{children}</p>\n                <p className=\"mt-3 mb-0 text-(--muted-foreground)\">{action}</p>\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,cAAc,EAAE,MAAM,SAAS,UAAU,UAA8B;CACnF,OACI,oBAAC,SAAD;EAAO,sBAAA;EAAmB,WAAU;EAChC,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACK,MACA,UACG,qBAAC,WAAD,EAAA,UAAA,CACI,oBAAC,WAAD;KAAS,WAAU;KAAsC,UAAA;IAAiB,CAAA,GAC1E,oBAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACvD,EAAA,CAAA,IACT,IACH;GACJ,CAAA,GAAA,MACA;;CACF,CAAA;AAEf;;AAcA,SAAgB,aAAa,EAAE,MAAM,OAAO,cAAc,WAAW,QAAQ,YAA+B;CACxG,OACI,oBAAC,OAAD;EAAK,aAAU;EAAS,WAAU;EAC9B,UAAA,qBAAC,OAAD;GAAK,gBAAc;GAAM,WAAU;GAAnC,UAAA;IACI,oBAAC,eAAD;KAAe,OAAO;KAAc,SAAS;IAAY,CAAA;IACzD,oBAAC,OAAD;KAAK,aAAU;KAAQ,WAAU;KAC5B,UAAA;IACA,CAAA;IACL,oBAAC,OAAD;KAAK,aAAU;KAAc,WAAU;KAClC;IACA,CAAA;IACJ,UAAU,oBAAC,OAAD;KAAK,WAAU;KAAQ,UAAA;IAAY,CAAA;GAC7C;;CACJ,CAAA;AAEb;;;AAIA,SAAgB,YAAY,EAAE,OAAO,UAAU,UAAqE;CAChH,OACI,oBAAC,OAAD;EAAK,WAAU;EACX,UAAA,qBAAC,OAAD;GACI,WAAU;GACV,MAAK;GAFT,UAAA;IAII,oBAAC,WAAD,EAAW,OAAM,MAAO,CAAA;IACxB,oBAAC,MAAD;KAAI,WAAU;KAAwE,UAAA;IAAU,CAAA;IAChG,oBAAC,KAAD;KAAG,WAAU;KAAuC;IAAY,CAAA;IAChE,oBAAC,KAAD;KAAG,WAAU;KAAuC,UAAA;IAAU,CAAA;GAC7D;;CACJ,CAAA;AAEb"}

package/dist/board/WorkMap.d.ts

@@ -0,0 +1,136 @@
+import { ReactNode, Ref } from "react";
+/** The map's frame, which scrolls sideways when the map is wider; `frameRef` measures its width. */
+export declare function WorkMapFrame({ frameRef, children }: {
+  frameRef?: Ref<HTMLDivElement>;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The map's drawing area, `width` by `height` pixels, which places what it holds absolutely. */
+export declare function MapCanvas({ width, height, children }: {
+  width: number;
+  height: number;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A lane's band across the map, banded on odd `index`es, with its `name` in a label that stays in view as the map
+ *  scrolls. */
+export declare function MapBand({ index, top, height, width, labelWidth, children }: {
+  index: number;
+  top: number;
+  height: number;
+  width: number;
+  labelWidth: number;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A lane's name with its icon: the decisions' lane, or the dossier's own repository's builds. */
+export declare function MapLaneName({ lane, children }: {
+  lane: 'decisions' | 'builds';
+  children: string;
+}): import("react").JSX.Element;
+/** An arrow from one part to another: `d` is its line; a `done` one is solid in the done colour. `lit` draws it bold
+ *  while either end is hovered, and `dim` faint while another is. */
+export interface MapEdge {
+  key: string;
+  d: string;
+  done: boolean;
+  lit: boolean;
+  dim: boolean;
+}
+/** The map's arrows, under its parts. `markerId` is unique to the map. */
+export declare function MapEdges({ width, height, markerId, edges }: {
+  width: number;
+  height: number;
+  markerId: string;
+  edges: MapEdge[];
+}): import("react").JSX.Element;
+/** An arrow's label, at `left`/`top` and at most `maxWidth` wide: a button that opens what it stands for, its tooltip
+ *  naming them (`names`). */
+export declare function MapEdgeLabel({ edge, label, names, left, top, maxWidth, onOpen }: {
+  edge: string;
+  label: string;
+  names: string;
+  left: number;
+  top: number;
+  maxWidth: number;
+  onOpen: () => void;
+}): import("react").JSX.Element;
+/** A node's place on the map, faint while `dim`; hovering it lights its arrows. */
+export declare function MapNode({ left, top, dim, onHover, children }: {
+  left: number;
+  top: number;
+  dim: boolean;
+  onHover: (hovered: boolean) => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The group finished history folds into, across the map at `top`: a button with its `glyph` and `text` that shows or
+ *  hides the finished parts, saying which it does. */
+export declare function MapHistoryGroup({ open, top, height, dim, glyph, text, showLabel, hideLabel, onToggle, onHover }: {
+  open: boolean;
+  top: number;
+  height: number;
+  dim: boolean;
+  glyph: ReactNode;
+  text: string;
+  showLabel: string;
+  hideLabel: string;
+  onToggle: () => void;
+  onHover: (hovered: boolean) => void;
+}): import("react").JSX.Element;
+/** The finished parts under the map, `width` wide, one HistoryRow each. */
+export declare function MapHistoryList({ width, children }: {
+  width: number;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A finished part as one row of the history: its glyph, kind, title opening it, what it followed, and at its right its
+ *  repository, pull requests and thread. */
+export declare function HistoryRow({ id, glyph, kind, name, onOpen, title, after, afterTitle, side }: {
+  id: string;
+  glyph: ReactNode;
+  kind: ReactNode;
+  /** The part's full name, for its title's tooltip. */
+  name: string;
+  onOpen: () => void;
+  title: ReactNode;
+  after?: string | undefined;
+  afterTitle?: string | undefined;
+  side: ReactNode;
+}): import("react").JSX.Element;
+declare const NODE_TONE: {
+  readonly default: 'border-(--border)';
+  readonly asks: 'border-[color-mix(in_srgb,var(--warning)_45%,var(--border))] shadow-[inset_3px_0_0_var(--warning)]';
+  readonly waits: 'border-dashed border-(--input)';
+};
+/**
+ * A part on the map, `width` by `height`: a card that opens it (`openLabel` names the button, `title` says it all),
+ * with its `source` in the corner, a `head` line (kind, repository, fields) with its `action` at the right, its title,
+ * its `glyph` and `facts`, and its `slices` along the bottom. It `asks` (an answer from you) or `waits` (on other work)
+ * in its border's tone, and is ringed while `picked`.
+ */
+export declare function MapPartNode({ id, width, height, tone, picked, openLabel, title, onOpen, source, head, action, name, glyph, facts, slices }: {
+  id: string;
+  width: number;
+  height: number;
+  tone?: keyof typeof NODE_TONE;
+  picked: boolean;
+  openLabel: string;
+  title: string;
+  onOpen: () => void;
+  source: ReactNode;
+  head: ReactNode;
+  action?: ReactNode;
+  name: ReactNode;
+  glyph: ReactNode;
+  facts: string;
+  slices?: ReactNode;
+}): import("react").JSX.Element;
+/** The end-to-end check at the end of the map, `width` by `height`: its `label`, title, then its `glyph` and `steps`
+ *  (how many, and what it comes after), which `stepsTitle` says in full. */
+export declare function MapCheckNode({ width, height, label, title, glyph, steps, stepsTitle }: {
+  width: number;
+  height: number;
+  label: string;
+  title: string;
+  glyph: ReactNode;
+  steps: string;
+  stepsTitle?: string | undefined;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=WorkMap.d.ts.map

package/dist/board/WorkMap.js

@@ -0,0 +1,274 @@
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../overlays/Tooltip.js";
+import { ChevronDownIcon, ChevronRightIcon, FlaskConicalIcon, HammerIcon, LightbulbIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/board/WorkMap.tsx
+/** The map's frame, which scrolls sideways when the map is wider; `frameRef` measures its width. */
+function WorkMapFrame({ frameRef, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref: frameRef,
+		className: "overflow-x-auto rounded-lg border border-(--border) bg-(--background)",
+		"data-work-map": true,
+		children
+	});
+}
+/** The map's drawing area, `width` by `height` pixels, which places what it holds absolutely. */
+function MapCanvas({ width, height, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative",
+		style: {
+			width,
+			height
+		},
+		"data-map-canvas": true,
+		children
+	});
+}
+/** A lane's band across the map, banded on odd `index`es, with its `name` in a label that stays in view as the map
+*  scrolls. */
+function MapBand({ index, top, height, width, labelWidth, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `absolute left-0 ${index ? "border-t border-(--border)" : ""} ${index % 2 ? "bg-[color-mix(in_srgb,var(--muted)_50%,transparent)]" : ""}`,
+		style: {
+			top,
+			height,
+			width
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sticky left-0 flex h-full flex-col justify-center gap-0.5 bg-[color-mix(in_srgb,var(--background)_85%,transparent)] px-3",
+			style: { width: labelWidth },
+			children: /* @__PURE__ */ jsx("span", {
+				className: "flex min-w-0 items-center gap-1.5 text-xs font-medium",
+				children
+			})
+		})
+	});
+}
+/** A lane's name with its icon: the decisions' lane, or the dossier's own repository's builds. */
+function MapLaneName({ lane, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(lane === "decisions" ? LightbulbIcon : HammerIcon, { className: "size-3.5 text-(--muted-foreground)" }), children] });
+}
+/** The map's arrows, under its parts. `markerId` is unique to the map. */
+function MapEdges({ width, height, markerId, edges }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "pointer-events-none absolute inset-0",
+		width,
+		height,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("defs", { children: ["done", "open"].map((k) => /* @__PURE__ */ jsx("marker", {
+			id: `${markerId}-${k}`,
+			viewBox: "0 0 8 8",
+			refX: "7",
+			refY: "4",
+			markerWidth: "7",
+			markerHeight: "7",
+			orient: "auto",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0 0 8 4 0 8z",
+				fill: k === "done" ? "var(--st-done)" : "var(--muted-foreground)"
+			})
+		}, k)) }), edges.map((e) => /* @__PURE__ */ jsx("path", {
+			d: e.d,
+			fill: "none",
+			"data-edge": e.key,
+			stroke: e.done ? "var(--st-done)" : "var(--muted-foreground)",
+			strokeWidth: e.lit ? 2.5 : 1.5,
+			strokeDasharray: e.done ? void 0 : "5 4",
+			opacity: e.dim ? .2 : e.done ? .7 : .9,
+			markerEnd: `url(#${markerId}-${e.done ? "done" : "open"})`
+		}, e.key))]
+	});
+}
+/** An arrow's label, at `left`/`top` and at most `maxWidth` wide: a button that opens what it stands for, its tooltip
+*  naming them (`names`). */
+function MapEdgeLabel({ edge, label, names, left, top, maxWidth, onOpen }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": `${label}: ${names}`,
+			onClick: onOpen,
+			"data-edge-label": edge,
+			className: "absolute truncate rounded text-left text-[11px] leading-3.5 text-(--muted-foreground) hover:text-(--foreground) hover:underline focus-visible:outline-2 focus-visible:outline-(--primary)",
+			style: {
+				left,
+				top,
+				maxWidth
+			},
+			children: label
+		})
+	}), /* @__PURE__ */ jsx(TooltipPopup, {
+		side: "top",
+		children: names
+	})] });
+}
+/** A node's place on the map, faint while `dim`; hovering it lights its arrows. */
+function MapNode({ left, top, dim, onHover, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `absolute transition-opacity ${dim ? "opacity-40" : ""}`,
+		style: {
+			left,
+			top
+		},
+		onMouseEnter: () => onHover(true),
+		onMouseLeave: () => onHover(false),
+		children
+	});
+}
+/** The group finished history folds into, across the map at `top`: a button with its `glyph` and `text` that shows or
+*  hides the finished parts, saying which it does. */
+function MapHistoryGroup({ open, top, height, dim, glyph, text, showLabel, hideLabel, onToggle, onHover }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-expanded": open,
+		onClick: onToggle,
+		"data-map-history": true,
+		onMouseEnter: () => onHover(true),
+		onMouseLeave: () => onHover(false),
+		className: `absolute flex items-center gap-2 rounded-lg border border-(--border) bg-(--card) px-2.5 text-left text-xs shadow-xs transition-opacity hover:bg-(--accent) focus-visible:outline-2 focus-visible:outline-(--primary) ${dim ? "opacity-40" : ""}`,
+		style: {
+			left: 12,
+			right: 12,
+			top,
+			height
+		},
+		children: [
+			glyph,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate font-medium",
+				children: text
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "inline-flex shrink-0 items-center gap-1 text-(--muted-foreground)",
+				children: open ? /* @__PURE__ */ jsxs(Fragment, { children: [hideLabel, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5" })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [showLabel, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })] })
+			})
+		]
+	});
+}
+/** The finished parts under the map, `width` wide, one HistoryRow each. */
+function MapHistoryList({ width, children }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: "m-0 grid list-none grid-cols-[repeat(auto-fill,minmax(min(100%,28rem),1fr))] gap-x-4 gap-y-1 px-3 pb-3",
+		style: { width },
+		"data-map-history-parts": true,
+		children
+	});
+}
+/** A finished part as one row of the history: its glyph, kind, title opening it, what it followed, and at its right its
+*  repository, pull requests and thread. */
+function HistoryRow({ id, glyph, kind, name, onOpen, title, after, afterTitle, side }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex min-h-12 min-w-0 items-center gap-3 rounded-md px-3 text-[13px] hover:bg-(--soft)",
+		"data-history-part": id,
+		children: [
+			glyph,
+			/* @__PURE__ */ jsx("span", {
+				className: "w-22 shrink-0",
+				children: kind
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onOpen,
+				title: name,
+				className: "min-w-0 truncate rounded text-left hover:underline focus-visible:outline-2 focus-visible:outline-(--primary)",
+				children: title
+			}),
+			after && /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 shrink-[1000] truncate text-[11px] text-(--muted-foreground)",
+				title: afterTitle,
+				children: after
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ml-auto flex shrink-0 items-center gap-2 text-[11px] text-(--muted-foreground)",
+				children: side
+			})
+		]
+	});
+}
+const NODE_TONE = {
+	default: "border-(--border)",
+	asks: "border-[color-mix(in_srgb,var(--warning)_45%,var(--border))] shadow-[inset_3px_0_0_var(--warning)]",
+	waits: "border-dashed border-(--input)"
+};
+/**
+* A part on the map, `width` by `height`: a card that opens it (`openLabel` names the button, `title` says it all),
+* with its `source` in the corner, a `head` line (kind, repository, fields) with its `action` at the right, its title,
+* its `glyph` and `facts`, and its `slices` along the bottom. It `asks` (an answer from you) or `waits` (on other work)
+* in its border's tone, and is ringed while `picked`.
+*/
+function MapPartNode({ id, width, height, tone = "default", picked, openLabel, title, onOpen, source, head, action, name, glyph, facts, slices }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width,
+			height
+		},
+		"data-map-part": id,
+		className: `relative flex flex-col gap-1 overflow-hidden rounded-lg border bg-(--card) px-2.5 py-2 text-left shadow-xs ${NODE_TONE[tone]} ${picked ? "ring-2 ring-(--primary) ring-offset-1 ring-offset-(--card)" : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": openLabel,
+				title,
+				onClick: onOpen,
+				className: "absolute inset-0 rounded-lg hover:bg-[color-mix(in_srgb,var(--accent)_60%,transparent)] focus-visible:outline-2 focus-visible:outline-(--primary)"
+			}),
+			source,
+			/* @__PURE__ */ jsxs("span", {
+				className: "pointer-events-none relative flex min-h-6 min-w-0 items-center gap-1.5 pr-5 text-[11px] text-(--muted-foreground)",
+				"data-map-head": true,
+				children: [head, action && /* @__PURE__ */ jsx("span", {
+					className: "pointer-events-auto ml-auto shrink-0",
+					children: action
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none relative line-clamp-2 text-[13px] leading-snug font-medium",
+				children: name
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "pointer-events-none relative mt-auto flex min-w-0 items-center gap-1.5 text-xs",
+				children: [glyph, /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate",
+					"data-map-facts": true,
+					children: facts
+				})]
+			}),
+			slices && /* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute inset-x-2.5 bottom-0.5",
+				children: slices
+			})
+		]
+	});
+}
+/** The end-to-end check at the end of the map, `width` by `height`: its `label`, title, then its `glyph` and `steps`
+*  (how many, and what it comes after), which `stepsTitle` says in full. */
+function MapCheckNode({ width, height, label, title, glyph, steps, stepsTitle }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width,
+			height
+		},
+		"data-map-check": true,
+		className: "flex flex-col gap-1 rounded-lg border-2 border-dashed border-(--input) bg-(--card) px-2.5 py-2 shadow-xs",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5 text-[11px] text-(--muted-foreground)",
+				children: [/* @__PURE__ */ jsx(FlaskConicalIcon, { className: "size-3.5" }), label]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "line-clamp-2 text-[13px] leading-snug font-medium",
+				children: title
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "mt-auto flex min-w-0 items-center gap-1.5 text-xs",
+				children: [glyph, /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate",
+					title: stepsTitle,
+					children: steps
+				})]
+			})
+		]
+	});
+}
+export { HistoryRow, MapBand, MapCanvas, MapCheckNode, MapEdgeLabel, MapEdges, MapHistoryGroup, MapHistoryList, MapLaneName, MapNode, MapPartNode, WorkMapFrame };
+
+//# sourceMappingURL=WorkMap.js.map

package/dist/board/WorkMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkMap.js","names":[],"sources":["../../src/board/WorkMap.tsx"],"sourcesContent":["// A dossier's Work map: lanes of parts placed left to right by what they wait on, arrows between them, the end-to-end\n// check, and finished history folded into one group below. The board lays it out; these draw it at the given places.\n\nimport { ChevronDownIcon, ChevronRightIcon, FlaskConicalIcon, HammerIcon, LightbulbIcon } from 'lucide-react';\nimport type { ReactNode, Ref } from 'react';\n\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '../overlays/Tooltip';\n\n/** The map's frame, which scrolls sideways when the map is wider; `frameRef` measures its width. */\nexport function WorkMapFrame({ frameRef, children }: { frameRef?: Ref<HTMLDivElement>; children: ReactNode }) {\n    return (\n        <div\n            ref={frameRef}\n            className=\"overflow-x-auto rounded-lg border border-(--border) bg-(--background)\"\n            data-work-map\n        >\n            {children}\n        </div>\n    );\n}\n\n/** The map's drawing area, `width` by `height` pixels, which places what it holds absolutely. */\nexport function MapCanvas({ width, height, children }: { width: number; height: number; children: ReactNode }) {\n    return (\n        <div className=\"relative\" style={{ width, height }} data-map-canvas>\n            {children}\n        </div>\n    );\n}\n\n/** A lane's band across the map, banded on odd `index`es, with its `name` in a label that stays in view as the map\n *  scrolls. */\nexport function MapBand({\n    index,\n    top,\n    height,\n    width,\n    labelWidth,\n    children,\n}: {\n    index: number;\n    top: number;\n    height: number;\n    width: number;\n    labelWidth: number;\n    children: ReactNode;\n}) {\n    return (\n        <div\n            className={`absolute left-0 ${index ? 'border-t border-(--border)' : ''} ${index % 2 ? 'bg-[color-mix(in_srgb,var(--muted)_50%,transparent)]' : ''}`}\n            style={{ top, height, width }}\n        >\n            <div\n                className=\"sticky left-0 flex h-full flex-col justify-center gap-0.5 bg-[color-mix(in_srgb,var(--background)_85%,transparent)] px-3\"\n                style={{ width: labelWidth }}\n            >\n                <span className=\"flex min-w-0 items-center gap-1.5 text-xs font-medium\">{children}</span>\n            </div>\n        </div>\n    );\n}\n\n/** A lane's name with its icon: the decisions' lane, or the dossier's own repository's builds. */\nexport function MapLaneName({ lane, children }: { lane: 'decisions' | 'builds'; children: string }) {\n    const Icon = lane === 'decisions' ? LightbulbIcon : HammerIcon;\n\n    return (\n        <>\n            <Icon className=\"size-3.5 text-(--muted-foreground)\" />\n            {children}\n        </>\n    );\n}\n\n/** An arrow from one part to another: `d` is its line; a `done` one is solid in the done colour. `lit` draws it bold\n *  while either end is hovered, and `dim` faint while another is. */\nexport interface MapEdge {\n    key: string;\n    d: string;\n    done: boolean;\n    lit: boolean;\n    dim: boolean;\n}\n\n/** The map's arrows, under its parts. `markerId` is unique to the map. */\nexport function MapEdges({\n    width,\n    height,\n    markerId,\n    edges,\n}: {\n    width: number;\n    height: number;\n    markerId: string;\n    edges: MapEdge[];\n}) {\n    return (\n        <svg className=\"pointer-events-none absolute inset-0\" width={width} height={height} aria-hidden=\"true\">\n            <defs>\n                {['done', 'open'].map((k) => (\n                    <marker\n                        key={k}\n                        id={`${markerId}-${k}`}\n                        viewBox=\"0 0 8 8\"\n                        refX=\"7\"\n                        refY=\"4\"\n                        markerWidth=\"7\"\n                        markerHeight=\"7\"\n                        orient=\"auto\"\n                    >\n                        <path d=\"M0 0 8 4 0 8z\" fill={k === 'done' ? 'var(--st-done)' : 'var(--muted-foreground)'} />\n                    </marker>\n                ))}\n            </defs>\n            {edges.map((e) => (\n                <path\n                    key={e.key}\n                    d={e.d}\n                    fill=\"none\"\n                    data-edge={e.key}\n                    stroke={e.done ? 'var(--st-done)' : 'var(--muted-foreground)'}\n                    strokeWidth={e.lit ? 2.5 : 1.5}\n                    strokeDasharray={e.done ? undefined : '5 4'}\n                    opacity={e.dim ? 0.2 : e.done ? 0.7 : 0.9}\n                    markerEnd={`url(#${markerId}-${e.done ? 'done' : 'open'})`}\n                />\n            ))}\n        </svg>\n    );\n}\n\n/** An arrow's label, at `left`/`top` and at most `maxWidth` wide: a button that opens what it stands for, its tooltip\n *  naming them (`names`). */\nexport function MapEdgeLabel({\n    edge,\n    label,\n    names,\n    left,\n    top,\n    maxWidth,\n    onOpen,\n}: {\n    edge: string;\n    label: string;\n    names: string;\n    left: number;\n    top: number;\n    maxWidth: number;\n    onOpen: () => void;\n}) {\n    return (\n        <Tooltip>\n            <TooltipTrigger asChild>\n                <button\n                    type=\"button\"\n                    aria-label={`${label}: ${names}`}\n                    onClick={onOpen}\n                    data-edge-label={edge}\n                    className=\"absolute truncate rounded text-left text-[11px] leading-3.5 text-(--muted-foreground) hover:text-(--foreground) hover:underline focus-visible:outline-2 focus-visible:outline-(--primary)\"\n                    style={{ left, top, maxWidth }}\n                >\n                    {label}\n                </button>\n            </TooltipTrigger>\n            <TooltipPopup side=\"top\">{names}</TooltipPopup>\n        </Tooltip>\n    );\n}\n\n/** A node's place on the map, faint while `dim`; hovering it lights its arrows. */\nexport function MapNode({\n    left,\n    top,\n    dim,\n    onHover,\n    children,\n}: {\n    left: number;\n    top: number;\n    dim: boolean;\n    onHover: (hovered: boolean) => void;\n    children: ReactNode;\n}) {\n    return (\n        <div\n            className={`absolute transition-opacity ${dim ? 'opacity-40' : ''}`}\n            style={{ left, top }}\n            onMouseEnter={() => onHover(true)}\n            onMouseLeave={() => onHover(false)}\n        >\n            {children}\n        </div>\n    );\n}\n\n/** The group finished history folds into, across the map at `top`: a button with its `glyph` and `text` that shows or\n *  hides the finished parts, saying which it does. */\nexport function MapHistoryGroup({\n    open,\n    top,\n    height,\n    dim,\n    glyph,\n    text,\n    showLabel,\n    hideLabel,\n    onToggle,\n    onHover,\n}: {\n    open: boolean;\n    top: number;\n    height: number;\n    dim: boolean;\n    glyph: ReactNode;\n    text: string;\n    showLabel: string;\n    hideLabel: string;\n    onToggle: () => void;\n    onHover: (hovered: boolean) => void;\n}) {\n    return (\n        <button\n            type=\"button\"\n            aria-expanded={open}\n            onClick={onToggle}\n            data-map-history\n            onMouseEnter={() => onHover(true)}\n            onMouseLeave={() => onHover(false)}\n            className={`absolute flex items-center gap-2 rounded-lg border border-(--border) bg-(--card) px-2.5 text-left text-xs shadow-xs transition-opacity hover:bg-(--accent) focus-visible:outline-2 focus-visible:outline-(--primary) ${dim ? 'opacity-40' : ''}`}\n            style={{ left: 12, right: 12, top, height }}\n        >\n            {glyph}\n            <span className=\"min-w-0 truncate font-medium\">{text}</span>\n            <span className=\"inline-flex shrink-0 items-center gap-1 text-(--muted-foreground)\">\n                {open ? (\n                    <>\n                        {hideLabel}\n                        <ChevronDownIcon className=\"size-3.5\" />\n                    </>\n                ) : (\n                    <>\n                        {showLabel}\n                        <ChevronRightIcon className=\"size-3.5\" />\n                    </>\n                )}\n            </span>\n        </button>\n    );\n}\n\n/** The finished parts under the map, `width` wide, one HistoryRow each. */\nexport function MapHistoryList({ width, children }: { width: number; children: ReactNode }) {\n    return (\n        <ol\n            className=\"m-0 grid list-none grid-cols-[repeat(auto-fill,minmax(min(100%,28rem),1fr))] gap-x-4 gap-y-1 px-3 pb-3\"\n            style={{ width }}\n            data-map-history-parts\n        >\n            {children}\n        </ol>\n    );\n}\n\n/** A finished part as one row of the history: its glyph, kind, title opening it, what it followed, and at its right its\n *  repository, pull requests and thread. */\nexport function HistoryRow({\n    id,\n    glyph,\n    kind,\n    name,\n    onOpen,\n    title,\n    after,\n    afterTitle,\n    side,\n}: {\n    id: string;\n    glyph: ReactNode;\n    kind: ReactNode;\n    /** The part's full name, for its title's tooltip. */\n    name: string;\n    onOpen: () => void;\n    title: ReactNode;\n    after?: string | undefined;\n    afterTitle?: string | undefined;\n    side: ReactNode;\n}) {\n    return (\n        <li\n            className=\"flex min-h-12 min-w-0 items-center gap-3 rounded-md px-3 text-[13px] hover:bg-(--soft)\"\n            data-history-part={id}\n        >\n            {glyph}\n            <span className=\"w-22 shrink-0\">{kind}</span>\n            <button\n                type=\"button\"\n                onClick={onOpen}\n                title={name}\n                className=\"min-w-0 truncate rounded text-left hover:underline focus-visible:outline-2 focus-visible:outline-(--primary)\"\n            >\n                {title}\n            </button>\n            {after && (\n                <span\n                    className=\"min-w-0 shrink-[1000] truncate text-[11px] text-(--muted-foreground)\"\n                    title={afterTitle}\n                >\n                    {after}\n                </span>\n            )}\n            <span className=\"ml-auto flex shrink-0 items-center gap-2 text-[11px] text-(--muted-foreground)\">\n                {side}\n            </span>\n        </li>\n    );\n}\n\nconst NODE_TONE = {\n    default: 'border-(--border)',\n    asks: 'border-[color-mix(in_srgb,var(--warning)_45%,var(--border))] shadow-[inset_3px_0_0_var(--warning)]',\n    waits: 'border-dashed border-(--input)',\n} as const;\n\n/**\n * A part on the map, `width` by `height`: a card that opens it (`openLabel` names the button, `title` says it all),\n * with its `source` in the corner, a `head` line (kind, repository, fields) with its `action` at the right, its title,\n * its `glyph` and `facts`, and its `slices` along the bottom. It `asks` (an answer from you) or `waits` (on other work)\n * in its border's tone, and is ringed while `picked`.\n */\nexport function MapPartNode({\n    id,\n    width,\n    height,\n    tone = 'default',\n    picked,\n    openLabel,\n    title,\n    onOpen,\n    source,\n    head,\n    action,\n    name,\n    glyph,\n    facts,\n    slices,\n}: {\n    id: string;\n    width: number;\n    height: number;\n    tone?: keyof typeof NODE_TONE;\n    picked: boolean;\n    openLabel: string;\n    title: string;\n    onOpen: () => void;\n    source: ReactNode;\n    head: ReactNode;\n    action?: ReactNode;\n    name: ReactNode;\n    glyph: ReactNode;\n    facts: string;\n    slices?: ReactNode;\n}) {\n    return (\n        <div\n            style={{ width, height }}\n            data-map-part={id}\n            className={`relative flex flex-col gap-1 overflow-hidden rounded-lg border bg-(--card) px-2.5 py-2 text-left shadow-xs ${NODE_TONE[tone]} ${picked ? 'ring-2 ring-(--primary) ring-offset-1 ring-offset-(--card)' : ''}`}\n        >\n            <button\n                type=\"button\"\n                aria-label={openLabel}\n                title={title}\n                onClick={onOpen}\n                className=\"absolute inset-0 rounded-lg hover:bg-[color-mix(in_srgb,var(--accent)_60%,transparent)] focus-visible:outline-2 focus-visible:outline-(--primary)\"\n            />\n            {source}\n            <span\n                className=\"pointer-events-none relative flex min-h-6 min-w-0 items-center gap-1.5 pr-5 text-[11px] text-(--muted-foreground)\"\n                data-map-head\n            >\n                {head}\n                {action && <span className=\"pointer-events-auto ml-auto shrink-0\">{action}</span>}\n            </span>\n            <span className=\"pointer-events-none relative line-clamp-2 text-[13px] leading-snug font-medium\">\n                {name}\n            </span>\n            <span className=\"pointer-events-none relative mt-auto flex min-w-0 items-center gap-1.5 text-xs\">\n                {glyph}\n                <span className=\"min-w-0 flex-1 truncate\" data-map-facts>\n                    {facts}\n                </span>\n            </span>\n            {slices && <span className=\"pointer-events-none absolute inset-x-2.5 bottom-0.5\">{slices}</span>}\n        </div>\n    );\n}\n\n/** The end-to-end check at the end of the map, `width` by `height`: its `label`, title, then its `glyph` and `steps`\n *  (how many, and what it comes after), which `stepsTitle` says in full. */\nexport function MapCheckNode({\n    width,\n    height,\n    label,\n    title,\n    glyph,\n    steps,\n    stepsTitle,\n}: {\n    width: number;\n    height: number;\n    label: string;\n    title: string;\n    glyph: ReactNode;\n    steps: string;\n    stepsTitle?: string | undefined;\n}) {\n    return (\n        <div\n            style={{ width, height }}\n            data-map-check\n            className=\"flex flex-col gap-1 rounded-lg border-2 border-dashed border-(--input) bg-(--card) px-2.5 py-2 shadow-xs\"\n        >\n            <span className=\"flex items-center gap-1.5 text-[11px] text-(--muted-foreground)\">\n                <FlaskConicalIcon className=\"size-3.5\" />\n                {label}\n            </span>\n            <span className=\"line-clamp-2 text-[13px] leading-snug font-medium\">{title}</span>\n            <span className=\"mt-auto flex min-w-0 items-center gap-1.5 text-xs\">\n                {glyph}\n                <span className=\"min-w-0 truncate\" title={stepsTitle}>\n                    {steps}\n                </span>\n            </span>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/board/index.d.ts

@@ -0,0 +1,42 @@
+import { AddItemButton, CreateIssueChoice, DraftFields, DraftTicketPart, PanelField, TicketSearch, TicketSearchMatch, TicketSearchPane } from "./AddItem.js";
+import { ActionStack, SettingConfirm, SettingLastRun } from "./Archive.js";
+import { BoardContent, BoardShell, ReadingLine } from "./BoardShell.js";
+import { BoardBrand, BoardTitleBar, RefreshHealth, RefreshIndicator, TitleBarDivider } from "./BoardTitleBar.js";
+import { ButtonKind, buttonKind } from "./ButtonKinds.js";
+import { BoardCounter, BoardCounters, CounterAge, CounterDash, CounterDivider, CounterEmpty, CounterFigure, CounterGroup, CounterGroups, CounterItem, CounterList, CounterOfLimit, CounterPartial, LimitBars } from "./Counters.js";
+import { DeskCard, DeskHint, DeskMergeState, DeskSection, MergeState } from "./Desk.js";
+import { FilterBar, FilterChip, FilterChoice, FilterChoices, FilterMenu } from "./Filters.js";
+import { ListButton, ListGroupItem, ListHeader, ListItemRow, ListNote } from "./List.js";
+import { LoadingLine, LoadingMark, LoadingScreen } from "./LoadingScreen.js";
+import { ReleaseNote, ReleaseNotes, UpdateDownloading, UpdatePill, UpdateStatusIcon } from "./UpdatePill.js";
+import { BoardWarning, BoardWarnings, ToolMissing } from "./Warnings.js";
+import { ActivityLine, ActivityState, AgentAge, AgentList, AgentRow, WorkingAgents } from "./ActivityLine.js";
+import { ActivityLabel, ActivityTrack } from "./ActivityTrack.js";
+import { DataAttributes } from "./DataAttributes.js";
+import { AttentionEntry, AttentionList, AttentionMark, AttentionNone, AttentionTone, EntryButton, PartLink, PartName, RefButton } from "./Attention.js";
+import { LossList } from "./Cleanup.js";
+import { DependencyItem, DependencyList } from "./Dependencies.js";
+import { DossierBody, DossierChipTone, DossierChips, DossierFields, DossierLine, DossierList, DossierNext, DossierNote, DossierRepos, DossierRow, DossierTitle, DossierTitleCell, DossierToggle, DossierTools, PartSegment, PartsBar, PlanningNote } from "./Dossier.js";
+import { ItemFields, ItemTitle, KindMarker, RepoIdentity, RepoTag, TitleLink } from "./ItemParts.js";
+import { NeedsYouNotice, NeedsYouResult } from "./NeedsYou.js";
+import { PartKind, PartKindLabel, PartRow, PartTrack, PartWaits, PartsList, ShowDoneToggle, ThreadLine } from "./PartsList.js";
+import { ChecksState, PullRequestList, PullRequestReadiness, PullRequestRef, PullRequestRow, ReadinessDetails } from "./PullRequests.js";
+import { SliceBar, SliceList, SliceMark, SliceProgress, SliceRow } from "./Slices.js";
+import { ItemSource, SourceIcon } from "./SourceIcon.js";
+import { BuildLimit, HeaderSwitch, StageList, StagePane, StagePaneEmpty, StageSections } from "./StagePane.js";
+import { OnYourDesk, QueueAge, QueuePlace, RowBlocked, RowCells, RowCount, RowFirst, RowFoot, RowGlyph, RowIdentity, RowKindCell, RowOpen, RowPartOf, RowSecondLine, RowSide, RowSliceNote, RowSliceToggle, RowSlices, RowState, RowStateCell, RowTitle, RowTitleCell, StageRowItem, UsageFigures } from "./StageRow.js";
+import { StageTrack } from "./StageTrack.js";
+import { ActionError, StartGroup, StartLine, StartNote, StartTag } from "./StartControls.js";
+import { BoardStatus, statusColor } from "./StatusColors.js";
+import { StatusGlyph } from "./StatusGlyph.js";
+import { EarlierThread, EarlierThreadList } from "./Threads.js";
+import { HistoryRow, MapBand, MapCanvas, MapCheckNode, MapEdge, MapEdgeLabel, MapEdges, MapHistoryGroup, MapHistoryList, MapLaneName, MapNode, MapPartNode, WorkMapFrame } from "./WorkMap.js";
+import { AccessNotice, DialogActions, ItemDialogAside, ItemDialogBody, ItemDialogColumns, ItemSummary, SummaryAge, SummaryBlocked, SummaryPanel, SummaryParent, SummaryStatus, WarningNote } from "./ItemDialog.js";
+import { AttachmentLink, ChangeFailed, CheckRun, ChipGroup, DetailFact, DetailsHeading, DetailsSection, DetailsText, EditActions, EditorSlot, FactList, FocusPanel, HeaderStatus, InlineList, KindQuestion, LabelEditorPanel, MainColumnSlot, MainSection, MetaArea, OutgoingTicket, SectionHeader, SpecSync, SprintCount, TextSection, TicketLink, TicketLinkList, WaitsOnList } from "./ItemDetails.js";
+import { ItemProgressPanel, PartsProgress, ProgressActivity, ProgressCount, SliceChip, SliceChips, WorkflowSteps } from "./ItemProgress.js";
+import { ProjectIcon, ProjectIconColor, ProjectIconSize, ProjectIconSource } from "./ProjectIcon.js";
+import { OpenSettingsButton, ProjectValueList, ReasonNote, SettingControl, SettingDetails, SettingsNav, SettingsNote } from "./Settings.js";
+import { CreateLabelForm, TrackerLabelEditor, TrackerLabelList, TrackerLabelRow } from "./TrackerLabels.js";
+import { LabelChooser, LabelChooserEmpty, LabelChooserFooter, LabelChooserList, LabelChooserOption, VocabularyMore, VocabularyRow, VocabularySuggestion } from "./Vocabulary.js";
+import { AddFolderLine, ChoiceDetails, EmptyBoard, ProjectLine, ProjectList, ProjectListItem, SetupCardList, SetupHeader, SetupStep } from "./Onboarding.js";
+export { AccessNotice, ActionError, ActionStack, ActivityLabel, ActivityLine, type ActivityState, ActivityTrack, AddFolderLine, AddItemButton, AgentAge, AgentList, AgentRow, AttachmentLink, AttentionEntry, AttentionList, AttentionMark, AttentionNone, type AttentionTone, BoardBrand, BoardContent, BoardCounter, BoardCounters, BoardShell, type BoardStatus, BoardTitleBar, BoardWarning, BoardWarnings, BuildLimit, type ButtonKind, ChangeFailed, CheckRun, ChecksState, ChipGroup, ChoiceDetails, CounterAge, CounterDash, CounterDivider, CounterEmpty, CounterFigure, CounterGroup, CounterGroups, CounterItem, CounterList, CounterOfLimit, CounterPartial, CreateIssueChoice, CreateLabelForm, type DataAttributes, DependencyItem, DependencyList, DeskCard, DeskHint, DeskMergeState, DeskSection, DetailFact, DetailsHeading, DetailsSection, DetailsText, DialogActions, DossierBody, type DossierChipTone, DossierChips, DossierFields, DossierLine, DossierList, DossierNext, DossierNote, DossierRepos, DossierRow, DossierTitle, DossierTitleCell, DossierToggle, DossierTools, DraftFields, DraftTicketPart, EarlierThread, EarlierThreadList, EditActions, EditorSlot, EmptyBoard, EntryButton, FactList, FilterBar, FilterChip, FilterChoice, FilterChoices, FilterMenu, FocusPanel, HeaderStatus, HeaderSwitch, HistoryRow, InlineList, ItemDialogAside, ItemDialogBody, ItemDialogColumns, ItemFields, ItemProgressPanel, type ItemSource, ItemSummary, ItemTitle, KindMarker, KindQuestion, LabelChooser, LabelChooserEmpty, LabelChooserFooter, LabelChooserList, LabelChooserOption, LabelEditorPanel, LimitBars, ListButton, ListGroupItem, ListHeader, ListItemRow, ListNote, type LoadingLine, type LoadingMark, LoadingScreen, LossList, MainColumnSlot, MainSection, MapBand, MapCanvas, MapCheckNode, type MapEdge, MapEdgeLabel, MapEdges, MapHistoryGroup, MapHistoryList, MapLaneName, MapNode, MapPartNode, type MergeState, MetaArea, NeedsYouNotice, NeedsYouResult, OnYourDesk, OpenSettingsButton, OutgoingTicket, PanelField, type PartKind, PartKindLabel, PartLink, PartName, PartRow, type PartSegment, PartTrack, PartWaits, PartsBar, PartsList, PartsProgress, PlanningNote, ProgressActivity, ProgressCount, ProjectIcon, type ProjectIconColor, type ProjectIconSize, type ProjectIconSource, ProjectLine, ProjectList, ProjectListItem, ProjectValueList, PullRequestList, PullRequestReadiness, PullRequestRef, PullRequestRow, QueueAge, QueuePlace, ReadinessDetails, ReadingLine, ReasonNote, RefButton, type RefreshHealth, RefreshIndicator, type ReleaseNote, ReleaseNotes, RepoIdentity, RepoTag, RowBlocked, RowCells, RowCount, RowFirst, RowFoot, RowGlyph, RowIdentity, RowKindCell, RowOpen, RowPartOf, RowSecondLine, RowSide, RowSliceNote, RowSliceToggle, RowSlices, RowState, RowStateCell, RowTitle, RowTitleCell, SectionHeader, SettingConfirm, SettingControl, SettingDetails, SettingLastRun, SettingsNav, SettingsNote, SetupCardList, SetupHeader, SetupStep, ShowDoneToggle, SliceBar, SliceChip, SliceChips, SliceList, SliceMark, type SliceProgress, SliceRow, SourceIcon, SpecSync, SprintCount, StageList, StagePane, StagePaneEmpty, StageRowItem, StageSections, StageTrack, StartGroup, StartLine, StartNote, StartTag, StatusGlyph, SummaryAge, SummaryBlocked, SummaryPanel, SummaryParent, SummaryStatus, TextSection, ThreadLine, TicketLink, TicketLinkList, TicketSearch, type TicketSearchMatch, TicketSearchPane, TitleBarDivider, TitleLink, ToolMissing, TrackerLabelEditor, TrackerLabelList, TrackerLabelRow, UpdateDownloading, UpdatePill, UpdateStatusIcon, UsageFigures, VocabularyMore, VocabularyRow, VocabularySuggestion, WaitsOnList, WarningNote, WorkMapFrame, WorkflowSteps, WorkingAgents, buttonKind, statusColor };

package/dist/collections/CollectionState.d.ts

@@ -23,8 +23,17 @@ declare const variants: {
     readonly icon: '[&>svg]:size-6';
     readonly space: 'related';
   };
+  /** A first run's welcome in an app's empty main area: its `icon` (such as the brand mark) in its own colours over a
+   *  section-sized title. */
+  readonly welcome: {
+    readonly layout: 'max-w-xl px-6 py-16';
+    readonly icon: '';
+    readonly space: 'group';
+  };
 };
 interface CollectionStateProps {
+  /** The action in place of `actionLabel` and `onAction`, for a caller whose button has its own look or markers. */
+  action?: ReactNode;
   actionLabel?: string;
   description: string;
   icon?: ReactNode;
@@ -32,6 +41,6 @@ interface CollectionStateProps {
   title: string;
   variant?: keyof typeof variants;
 }
-export declare function CollectionState({ actionLabel, description, icon, onAction, title, variant }: CollectionStateProps): import("react").JSX.Element;
+export declare function CollectionState({ action, actionLabel, description, icon, onAction, title, variant }: CollectionStateProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=CollectionState.d.ts.map