@lar-works/design-system 0.2.1 → 0.3.0

package/dist/board/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","names":[],"sources":["../../src/board/Settings.tsx"],"sourcesContent":["// Lar Factory's settings: the title bar's button that opens them, the sections' sidebar, the column of a page's groups,\n// the short reason a setting can't be changed, and the parts its rows show under and beside their controls.\n\nimport { SettingsIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { SidebarPane } from '../layout/sidebar/SidebarPane';\nimport { HelpTip } from '../overlays/HelpTip';\nimport { buttonKind } from './ButtonKinds';\nimport type { DataAttributes } from './DataAttributes';\n\n/** The title bar's last button, which opens Settings: an icon-only App control named by its `label`, its 20px icon in\n *  the text colour rather than the muted one, so it holds its own beside the labelled controls. */\nexport function OpenSettingsButton({ label, onOpen }: { label: string; onOpen: () => void }) {\n    return (\n        <Button\n            {...buttonKind('control')}\n            iconOnly\n            className=\"open-settings text-base-content [&_svg]:size-5\"\n            aria-label={label}\n            title={label}\n            onClick={onOpen}\n        >\n            <SettingsIcon />\n        </Button>\n    );\n}\n\n/**\n * Settings' sidebar: the `search` field over the sections' groups (SidebarNavigationGroup), and `empty`, announced,\n * when a search leaves none. `label` names the navigation.\n */\nexport function SettingsNav({\n    label,\n    search,\n    empty,\n    children,\n    ...data\n}: {\n    label: string;\n    search: ReactNode;\n    empty?: string | undefined;\n    children: ReactNode;\n} & DataAttributes) {\n    return (\n        <div {...data} className=\"contents\">\n            <SidebarPane label={label}>\n                <div className=\"w-44 shrink-0 md:mb-3 md:w-auto\">{search}</div>\n                {empty && (\n                    <p role=\"status\" data-no-match className=\"text-base-700 m-0 px-2 py-1 text-xs\">\n                        {empty}\n                    </p>\n                )}\n                {children}\n            </SidebarPane>\n        </div>\n    );\n}\n\n/**\n * Why a setting can't be changed, in a short muted line that wraps: the `reason`, a help popover with the whole\n * `explanation` (`helpLabel` names its button), then the `action` that checks again, such as an InlineLink with `onClick`.\n */\nexport function ReasonNote({\n    reason,\n    explanation,\n    helpLabel,\n    action,\n}: {\n    reason: string;\n    explanation: ReactNode;\n    helpLabel: string;\n    action?: ReactNode;\n}) {\n    return (\n        <span className=\"inline-flex min-w-0 flex-wrap items-center gap-1 text-xs text-(--muted-foreground)\">\n            <span>{reason}</span>\n            <HelpTip label={helpLabel}>{explanation}</HelpTip>\n            {action}\n        </span>\n    );\n}\n\n/** A settings group's note under its panel, such as what the group's last call did: small lines, stacked. `busy` marks\n *  it as still loading for assistive technology. */\nexport function SettingsNote({ busy, children, ...data }: { busy?: boolean; children: ReactNode } & DataAttributes) {\n    return (\n        <div {...data} className=\"grid gap-2 px-1\" aria-busy={busy}>\n            {children}\n        </div>\n    );\n}\n\n/** What a setting row shows under its control, such as an install's progress, in small stacked lines; `breaks` lets a\n *  long path break anywhere. */\nexport function SettingDetails({ breaks = false, children }: { breaks?: boolean; children: ReactNode }) {\n    return <div className={`grid gap-2 text-xs${breaks ? ' [overflow-wrap:anywhere]' : ''}`}>{children}</div>;\n}\n\n/** A setting's control with its error under it, at most 20rem wide. */\nexport function SettingControl({ children }: { children: ReactNode }) {\n    return <div className=\"grid max-w-80 gap-2\">{children}</div>;\n}\n\n/** A small list of each Project's value for a setting, the Project left and its value muted right, wrapping. */\nexport function ProjectValueList({\n    label,\n    rows,\n}: {\n    label: string;\n    rows: readonly { key: string; name: string; value: string }[];\n}) {\n    return (\n        <ul className=\"m-0 grid list-none gap-1 p-0 text-xs\" aria-label={label}>\n            {rows.map(({ key, name, value }) => (\n                <li key={key} className=\"flex flex-wrap justify-between gap-x-3\">\n                    <span className=\"[overflow-wrap:anywhere]\">{name}</span>{' '}\n                    <span className=\"[overflow-wrap:anywhere] text-(--muted-foreground)\">{value}</span>\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,mBAAmB,EAAE,OAAO,UAAiD;CACzF,OACI,oBAAC,QAAD;EACI,GAAI,WAAW,SAAS;EACxB,UAAA;EACA,WAAU;EACV,cAAY;EACZ,OAAO;EACP,SAAS;EAET,UAAA,oBAAC,cAAD,CAAe,CAAA;CACX,CAAA;AAEhB;;;;;AAMA,SAAgB,YAAY,EACxB,OACA,QACA,OACA,UACA,GAAG,QAMa;CAChB,OACI,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAU;EACrB,UAAA,qBAAC,aAAD;GAAoB;GAApB,UAAA;IACI,oBAAC,OAAD;KAAK,WAAU;KAAmC,UAAA;IAAY,CAAA;IAC7D,SACG,oBAAC,KAAD;KAAG,MAAK;KAAS,iBAAA;KAAc,WAAU;KACpC,UAAA;IACF,CAAA;IAEN;GACQ;;CACZ,CAAA;AAEb;;;;;AAMA,SAAgB,WAAW,EACvB,QACA,aACA,WACA,UAMD;CACC,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACI,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA;GACpB,oBAAC,SAAD;IAAS,OAAO;IAAY,UAAA;GAAqB,CAAA;GAChD;EACC;;AAEd;;;AAIA,SAAgB,aAAa,EAAE,MAAM,UAAU,GAAG,QAAkE;CAChH,OACI,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAU;EAAkB,aAAW;EACjD;CACA,CAAA;AAEb;;;AAIA,SAAgB,eAAe,EAAE,SAAS,OAAO,YAAuD;CACpG,OAAO,oBAAC,OAAD;EAAK,WAAW,qBAAqB,SAAS,8BAA8B;EAAO;CAAc,CAAA;AAC5G;;AAGA,SAAgB,eAAe,EAAE,YAAqC;CAClE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAuB;CAAc,CAAA;AAC/D;;AAGA,SAAgB,iBAAiB,EAC7B,OACA,QAID;CACC,OACI,oBAAC,MAAD;EAAI,WAAU;EAAuC,cAAY;EAC5D,UAAA,KAAK,KAAK,EAAE,KAAK,MAAM,YACpB,qBAAC,MAAD;GAAc,WAAU;GAAxB,UAAA;IACI,oBAAC,QAAD;KAAM,WAAU;KAA4B,UAAA;IAAW,CAAA;IAAE;IACzD,oBAAC,QAAD;KAAM,WAAU;KAAsD,UAAA;IAAY,CAAA;GAClF;EAHK,GAAA,GAGL,CACP;CACD,CAAA;AAEZ"}

package/dist/board/Slices.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+/** Where a slice stands. */
+export type SliceProgress = 'done' | 'active' | 'blocked' | 'unknown' | 'waiting';
+/** A 6px segment for each slice, named by its tooltip; waiting segments are faint, and an active one pulses unless
+ *  `still`. */
+export declare function SliceBar({ slices, still }: {
+  slices: {
+    name: string;
+    progress: SliceProgress;
+  }[];
+  still?: boolean;
+}): import("react").JSX.Element | null;
+/** A slice's state as a ring: ticked when done, a question mark when unknown, a dot pulsing unless `still` while
+ *  active. */
+export declare function SliceMark({ progress, still }: {
+  progress: SliceProgress;
+  still?: boolean;
+}): import("react").JSX.Element;
+/** The slices of a piece of work, one SliceRow each. */
+export declare function SliceList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A slice in SliceList: where its ticket is saved, its mark, number, title (struck through when done) and state. */
+export declare function SliceRow({ source, progress, still, number, title }: {
+  source: ReactNode;
+  progress: SliceProgress;
+  still?: boolean;
+  /** The slice's ticket number; a slice with none shows none. */
+  number?: number | undefined;
+  title: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Slices.d.ts.map

package/dist/board/Slices.js

@@ -0,0 +1,88 @@
+import { ambientMotion } from "../foundations/AmbientMotion.js";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Slices.tsx
+const SLICE_COLOR = {
+	done: "var(--st-done)",
+	active: "var(--st-now)",
+	blocked: "var(--st-review)",
+	unknown: "var(--muted-foreground)",
+	waiting: "var(--input)"
+};
+/** A 6px segment for each slice, named by its tooltip; waiting segments are faint, and an active one pulses unless
+*  `still`. */
+function SliceBar({ slices, still = false }) {
+	if (!slices.length) return null;
+	return /* @__PURE__ */ jsx("ol", {
+		className: "m-0 flex list-none gap-[2px] p-0",
+		children: slices.map((s, i) => /* @__PURE__ */ jsx("li", {
+			ref: s.progress === "active" && !still ? ambientMotion : void 0,
+			title: s.name,
+			className: `h-1.5 flex-1 rounded-full ${s.progress === "active" && !still ? "status-pulse" : ""}`,
+			style: { background: s.progress === "waiting" ? "var(--soft)" : SLICE_COLOR[s.progress] }
+		}, i))
+	});
+}
+/** A slice's state as a ring: ticked when done, a question mark when unknown, a dot pulsing unless `still` while
+*  active. */
+function SliceMark({ progress, still = false }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "grid size-4 shrink-0 place-items-center rounded-full border-[1.5px]",
+		style: {
+			borderColor: SLICE_COLOR[progress],
+			background: progress === "done" ? "var(--st-done)" : "transparent"
+		},
+		children: [
+			progress === "unknown" && /* @__PURE__ */ jsx("span", {
+				className: "text-[9px] leading-none",
+				children: "?"
+			}),
+			progress === "done" && /* @__PURE__ */ jsx(CheckIcon, {
+				className: "size-2.5 text-white",
+				strokeWidth: 3
+			}),
+			progress === "active" && /* @__PURE__ */ jsx("span", {
+				ref: still ? void 0 : ambientMotion,
+				className: `${still ? "" : "status-pulse "}size-1.5 rounded-full bg-(--st-now)`
+			})
+		]
+	});
+}
+/** The slices of a piece of work, one SliceRow each. */
+function SliceList({ children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 grid list-none grid-cols-[minmax(0,1fr)] gap-0.5 p-0",
+		children
+	});
+}
+/** A slice in SliceList: where its ticket is saved, its mark, number, title (struck through when done) and state. */
+function SliceRow({ source, progress, still = false, number, title }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex items-start gap-2 rounded-md px-2 py-1 text-[13px] hover:bg-(--soft)",
+		children: [
+			source,
+			/* @__PURE__ */ jsx("span", {
+				className: "mt-0.5",
+				children: /* @__PURE__ */ jsx(SliceMark, {
+					progress,
+					still
+				})
+			}),
+			!!number && /* @__PURE__ */ jsxs("span", {
+				className: "shrink-0 text-(--muted-foreground) tabular-nums",
+				children: ["#", number]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: `min-w-0 flex-1 wrap-anywhere ${progress === "done" ? "text-(--muted-foreground) line-through" : progress === "active" ? "font-medium" : ""}`,
+				children: title
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mt-px shrink-0 text-[11px] text-(--muted-foreground)",
+				children: progress
+			})
+		]
+	});
+}
+export { SliceBar, SliceList, SliceMark, SliceRow };
+
+//# sourceMappingURL=Slices.js.map

package/dist/board/Slices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slices.js","names":[],"sources":["../../src/board/Slices.tsx"],"sourcesContent":["// A piece of work's slices: the bar every view of the board draws, and a list with each slice's mark.\n\nimport { CheckIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { ambientMotion } from '../foundations/AmbientMotion';\n\n/** Where a slice stands. */\nexport type SliceProgress = 'done' | 'active' | 'blocked' | 'unknown' | 'waiting';\n\nconst SLICE_COLOR: Record<SliceProgress, string> = {\n    done: 'var(--st-done)',\n    active: 'var(--st-now)',\n    blocked: 'var(--st-review)',\n    unknown: 'var(--muted-foreground)',\n    waiting: 'var(--input)',\n};\n\n/** A 6px segment for each slice, named by its tooltip; waiting segments are faint, and an active one pulses unless\n *  `still`. */\nexport function SliceBar({\n    slices,\n    still = false,\n}: {\n    slices: { name: string; progress: SliceProgress }[];\n    still?: boolean;\n}) {\n    if (!slices.length) return null;\n\n    return (\n        <ol className=\"m-0 flex list-none gap-[2px] p-0\">\n            {slices.map((s, i) => (\n                <li\n                    key={i}\n                    ref={s.progress === 'active' && !still ? ambientMotion : undefined}\n                    title={s.name}\n                    className={`h-1.5 flex-1 rounded-full ${s.progress === 'active' && !still ? 'status-pulse' : ''}`}\n                    style={{ background: s.progress === 'waiting' ? 'var(--soft)' : SLICE_COLOR[s.progress] }}\n                />\n            ))}\n        </ol>\n    );\n}\n\n/** A slice's state as a ring: ticked when done, a question mark when unknown, a dot pulsing unless `still` while\n *  active. */\nexport function SliceMark({ progress, still = false }: { progress: SliceProgress; still?: boolean }) {\n    return (\n        <span\n            className=\"grid size-4 shrink-0 place-items-center rounded-full border-[1.5px]\"\n            style={{\n                borderColor: SLICE_COLOR[progress],\n                background: progress === 'done' ? 'var(--st-done)' : 'transparent',\n            }}\n        >\n            {progress === 'unknown' && <span className=\"text-[9px] leading-none\">?</span>}\n            {progress === 'done' && <CheckIcon className=\"size-2.5 text-white\" strokeWidth={3} />}\n            {progress === 'active' && (\n                <span\n                    ref={still ? undefined : ambientMotion}\n                    className={`${still ? '' : 'status-pulse '}size-1.5 rounded-full bg-(--st-now)`}\n                />\n            )}\n        </span>\n    );\n}\n\n/** The slices of a piece of work, one SliceRow each. */\nexport function SliceList({ children }: { children: ReactNode }) {\n    return <ul className=\"m-0 grid list-none grid-cols-[minmax(0,1fr)] gap-0.5 p-0\">{children}</ul>;\n}\n\n/** A slice in SliceList: where its ticket is saved, its mark, number, title (struck through when done) and state. */\nexport function SliceRow({\n    source,\n    progress,\n    still = false,\n    number,\n    title,\n}: {\n    source: ReactNode;\n    progress: SliceProgress;\n    still?: boolean;\n    /** The slice's ticket number; a slice with none shows none. */\n    number?: number | undefined;\n    title: string;\n}) {\n    return (\n        <li className=\"flex items-start gap-2 rounded-md px-2 py-1 text-[13px] hover:bg-(--soft)\">\n            {source}\n            <span className=\"mt-0.5\">\n                <SliceMark progress={progress} still={still} />\n            </span>\n            {!!number && <span className=\"shrink-0 text-(--muted-foreground) tabular-nums\">#{number}</span>}\n            <span\n                className={`min-w-0 flex-1 wrap-anywhere ${progress === 'done' ? 'text-(--muted-foreground) line-through' : progress === 'active' ? 'font-medium' : ''}`}\n            >\n                {title}\n            </span>\n            <span className=\"mt-px shrink-0 text-[11px] text-(--muted-foreground)\">{progress}</span>\n        </li>\n    );\n}\n"],"mappings":";;;;AAUA,MAAM,cAA6C;CAC/C,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;AACb;;;AAIA,SAAgB,SAAS,EACrB,QACA,QAAQ,SAIT;CACC,IAAI,CAAC,OAAO,QAAQ,OAAO;CAE3B,OACI,oBAAC,MAAD;EAAI,WAAU;EACT,UAAA,OAAO,KAAK,GAAG,MACZ,oBAAC,MAAD;GAEI,KAAK,EAAE,aAAa,YAAY,CAAC,QAAQ,gBAAgB,KAAA;GACzD,OAAO,EAAE;GACT,WAAW,6BAA6B,EAAE,aAAa,YAAY,CAAC,QAAQ,iBAAiB;GAC7F,OAAO,EAAE,YAAY,EAAE,aAAa,YAAY,gBAAgB,YAAY,EAAE,UAAU;EAC3F,GALQ,CAKR,CACJ;CACD,CAAA;AAEZ;;;AAIA,SAAgB,UAAU,EAAE,UAAU,QAAQ,SAAuD;CACjG,OACI,qBAAC,QAAD;EACI,WAAU;EACV,OAAO;GACH,aAAa,YAAY;GACzB,YAAY,aAAa,SAAS,mBAAmB;EACzD;EALJ,UAAA;GAOK,aAAa,aAAa,oBAAC,QAAD;IAAM,WAAU;IAA0B,UAAA;GAAO,CAAA;GAC3E,aAAa,UAAU,oBAAC,WAAD;IAAW,WAAU;IAAsB,aAAa;GAAI,CAAA;GACnF,aAAa,YACV,oBAAC,QAAD;IACI,KAAK,QAAQ,KAAA,IAAY;IACzB,WAAW,GAAG,QAAQ,KAAK,gBAAgB;GAC9C,CAAA;EAEH;;AAEd;;AAGA,SAAgB,UAAU,EAAE,YAAqC;CAC7D,OAAO,oBAAC,MAAD;EAAI,WAAU;EAA4D;CAAa,CAAA;AAClG;;AAGA,SAAgB,SAAS,EACrB,QACA,UACA,QAAQ,OACR,QACA,SAQD;CACC,OACI,qBAAC,MAAD;EAAI,WAAU;EAAd,UAAA;GACK;GACD,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,WAAD;KAAqB;KAAiB;IAAQ,CAAA;GAC5C,CAAA;GACL,CAAC,CAAC,UAAU,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAAkE,KAAE,MAAa;;GAC9F,oBAAC,QAAD;IACI,WAAW,gCAAgC,aAAa,SAAS,2CAA2C,aAAa,WAAW,gBAAgB;IAEnJ,UAAA;GACC,CAAA;GACN,oBAAC,QAAD;IAAM,WAAU;IAAwD,UAAA;GAAe,CAAA;EACvF;;AAEZ"}

package/dist/board/SourceIcon.d.ts

@@ -0,0 +1,12 @@
+/** Where a piece of work's ticket is saved: a GitHub issue, an Azure DevOps work item, or only on this machine. */
+export type ItemSource = 'github' | 'azure' | 'local';
+/**
+ * Where an item's ticket is saved, as a small muted mark named by `label`: a bordered square in rows and details, or
+ * with `corner` a tab in a card's top right corner, which lets clicks through to the card.
+ */
+export declare function SourceIcon({ source, label, corner }: {
+  source: ItemSource;
+  label: string;
+  corner?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SourceIcon.d.ts.map

package/dist/board/SourceIcon.js

@@ -0,0 +1,24 @@
+import { AzureDevOpsIcon, GitHubIcon } from "../icons/BrandIcons.js";
+import { LaptopIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+// src/board/SourceIcon.tsx
+/**
+* Where an item's ticket is saved, as a small muted mark named by `label`: a bordered square in rows and details, or
+* with `corner` a tab in a card's top right corner, which lets clicks through to the card.
+*/
+function SourceIcon({ source, label, corner = false }) {
+	return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": label,
+		title: label,
+		className: `grid place-items-center border-(--border) bg-(--soft) text-(--muted-foreground) ${corner ? "absolute right-0 top-0 z-10 size-6 rounded-bl-lg rounded-tr-[inherit] border-b border-l pointer-events-none" : "size-5 shrink-0 rounded-md border"}`,
+		children: source === "local" ? /* @__PURE__ */ jsx(LaptopIcon, {
+			className: "size-3",
+			strokeWidth: 1.75,
+			"aria-hidden": "true"
+		}) : source === "github" ? /* @__PURE__ */ jsx(GitHubIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(AzureDevOpsIcon, { className: "size-3" })
+	});
+}
+export { SourceIcon };
+
+//# sourceMappingURL=SourceIcon.js.map

package/dist/board/SourceIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SourceIcon.js","names":[],"sources":["../../src/board/SourceIcon.tsx"],"sourcesContent":["import { LaptopIcon } from 'lucide-react';\n\nimport { AzureDevOpsIcon, GitHubIcon } from '../icons/BrandIcons';\n\n/** Where a piece of work's ticket is saved: a GitHub issue, an Azure DevOps work item, or only on this machine. */\nexport type ItemSource = 'github' | 'azure' | 'local';\n\n/**\n * Where an item's ticket is saved, as a small muted mark named by `label`: a bordered square in rows and details, or\n * with `corner` a tab in a card's top right corner, which lets clicks through to the card.\n */\nexport function SourceIcon({ source, label, corner = false }: { source: ItemSource; label: string; corner?: boolean }) {\n    const shape = corner\n        ? 'absolute right-0 top-0 z-10 size-6 rounded-bl-lg rounded-tr-[inherit] border-b border-l pointer-events-none'\n        : 'size-5 shrink-0 rounded-md border';\n\n    return (\n        <span\n            role=\"img\"\n            aria-label={label}\n            title={label}\n            className={`grid place-items-center border-(--border) bg-(--soft) text-(--muted-foreground) ${shape}`}\n        >\n            {source === 'local' ? (\n                <LaptopIcon className=\"size-3\" strokeWidth={1.75} aria-hidden=\"true\" />\n            ) : source === 'github' ? (\n                <GitHubIcon className=\"size-3\" />\n            ) : (\n                <AzureDevOpsIcon className=\"size-3\" />\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,WAAW,EAAE,QAAQ,OAAO,SAAS,SAAkE;CAKnH,OACI,oBAAC,QAAD;EACI,MAAK;EACL,cAAY;EACZ,OAAO;EACP,WAAW,mFATL,SACR,gHACA;EASG,UAAA,WAAW,UACR,oBAAC,YAAD;GAAY,WAAU;GAAS,aAAa;GAAM,eAAY;EAAQ,CAAA,IACtE,WAAW,WACX,oBAAC,YAAD,EAAY,WAAU,SAAU,CAAA,IAEhC,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;CAEvC,CAAA;AAEd"}

package/dist/board/StagePane.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+/** A stage's section: its status glyph, title and count, anything at the header's `right`, then its rows. */
+export declare function StagePane({ id, title, glyph, count, right, children }: {
+  /** Names the section, as `data-stage`, and its heading's id. */
+  id: string;
+  title: string;
+  glyph?: ReactNode;
+  count: number;
+  right?: ReactNode;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The rows of a stage's section. */
+export declare function StageList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** What a section says with no row: that it's loading, that nothing is in it, or that the filters hide every row. */
+export declare function StagePaneEmpty({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Builds at work against the build limit, in a section's header: one bar per build the `limit` allows, more when
+ *  they're over it, the bars at work in `color`, then the count in words. */
+export declare function BuildLimit({ building, limit, color, title, children }: {
+  building: number;
+  limit?: number | undefined;
+  color: string;
+  title: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A switch in a section's header with its visible `label` before it, and before that any `hold` that keeps it from
+ *  acting, truncating; `title` says what it would do. */
+export declare function HeaderSwitch({ label, title, hold, control }: {
+  label: string;
+  title: string;
+  hold?: string | undefined;
+  /** The Switch, named by `label` for assistive technology. */
+  control: ReactNode;
+}): import("react").JSX.Element;
+/** The stages' sections, one under another, named by `label`. */
+export declare function StageSections({ label, children }: {
+  label: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=StagePane.d.ts.map

package/dist/board/StagePane.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/StagePane.tsx
+/** A stage's section: its status glyph, title and count, anything at the header's `right`, then its rows. */
+function StagePane({ id, title, glyph, count, right, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"data-stage": id,
+		"aria-labelledby": `${id}-h`,
+		className: "min-w-0 overflow-hidden rounded-xl border border-(--border) bg-(--card) shadow-xs",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex min-h-10 flex-wrap items-center gap-x-2 gap-y-1 border-b border-(--border) px-3 py-1",
+			children: [
+				glyph,
+				/* @__PURE__ */ jsxs("h3", {
+					id: `${id}-h`,
+					className: "m-0 text-[13px] font-medium whitespace-nowrap",
+					children: [
+						title,
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "font-normal text-(--muted-foreground) tabular-nums",
+							children: count
+						})
+					]
+				}),
+				right && /* @__PURE__ */ jsx("span", {
+					className: "ml-auto flex max-w-full min-w-0 items-center",
+					children: right
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "@container",
+			children
+		})]
+	});
+}
+/** The rows of a stage's section. */
+function StageList({ children }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: "m-0 grid list-none p-0",
+		children
+	});
+}
+/** What a section says with no row: that it's loading, that nothing is in it, or that the filters hide every row. */
+function StagePaneEmpty({ children }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-pane-empty": true,
+		className: "m-0 px-3 py-3 text-[12px] text-(--muted-foreground)",
+		children
+	});
+}
+/** Builds at work against the build limit, in a section's header: one bar per build the `limit` allows, more when
+*  they're over it, the bars at work in `color`, then the count in words. */
+function BuildLimit({ building, limit, color, title, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "build-limit inline-flex items-center gap-1.5 text-[11px] whitespace-nowrap text-(--muted-foreground) tabular-nums",
+		title,
+		children: [limit !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "inline-flex gap-[3px]",
+			children: Array.from({ length: Math.max(limit, building) }, (_, n) => /* @__PURE__ */ jsx("span", {
+				className: "bar h-1.5 w-3 rounded-full",
+				style: { background: n < building ? color : "var(--border)" }
+			}, n))
+		}), children]
+	});
+}
+/** A switch in a section's header with its visible `label` before it, and before that any `hold` that keeps it from
+*  acting, truncating; `title` says what it would do. */
+function HeaderSwitch({ label, title, hold, control }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "auto-build inline-flex min-w-0 items-center gap-1.5 text-[11px] whitespace-nowrap text-(--muted-foreground)",
+		title,
+		children: [
+			hold && /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				title: hold,
+				"data-auto-build-hold": true,
+				children: hold
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: label
+			}),
+			control
+		]
+	});
+}
+/** The stages' sections, one under another, named by `label`. */
+function StageSections({ label, children }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: "stages flex flex-col gap-3",
+		"aria-label": label,
+		children
+	});
+}
+export { BuildLimit, HeaderSwitch, StageList, StagePane, StagePaneEmpty, StageSections };
+
+//# sourceMappingURL=StagePane.js.map

package/dist/board/StagePane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StagePane.js","names":[],"sources":["../../src/board/StagePane.tsx"],"sourcesContent":["// A section of Lar Factory's board's work by stage (Queue, Shaping, Ready to build, Build, Concepts and linked work): a\n// titled list that takes the height of its rows, so a section with none stays small and the page scrolls past them all.\n\nimport type { ReactNode } from 'react';\n\n/** A stage's section: its status glyph, title and count, anything at the header's `right`, then its rows. */\nexport function StagePane({\n    id,\n    title,\n    glyph,\n    count,\n    right,\n    children,\n}: {\n    /** Names the section, as `data-stage`, and its heading's id. */\n    id: string;\n    title: string;\n    glyph?: ReactNode;\n    count: number;\n    right?: ReactNode;\n    children: ReactNode;\n}) {\n    return (\n        <section\n            data-stage={id}\n            aria-labelledby={`${id}-h`}\n            className=\"min-w-0 overflow-hidden rounded-xl border border-(--border) bg-(--card) shadow-xs\"\n        >\n            <header className=\"flex min-h-10 flex-wrap items-center gap-x-2 gap-y-1 border-b border-(--border) px-3 py-1\">\n                {glyph}\n                <h3 id={`${id}-h`} className=\"m-0 text-[13px] font-medium whitespace-nowrap\">\n                    {title} <span className=\"font-normal text-(--muted-foreground) tabular-nums\">{count}</span>\n                </h3>\n                {right && <span className=\"ml-auto flex max-w-full min-w-0 items-center\">{right}</span>}\n            </header>\n            <div className=\"@container\">{children}</div>\n        </section>\n    );\n}\n\n/** The rows of a stage's section. */\nexport function StageList({ children }: { children: ReactNode }) {\n    return <ol className=\"m-0 grid list-none p-0\">{children}</ol>;\n}\n\n/** What a section says with no row: that it's loading, that nothing is in it, or that the filters hide every row. */\nexport function StagePaneEmpty({ children }: { children: ReactNode }) {\n    return (\n        <p data-pane-empty className=\"m-0 px-3 py-3 text-[12px] text-(--muted-foreground)\">\n            {children}\n        </p>\n    );\n}\n\n/** Builds at work against the build limit, in a section's header: one bar per build the `limit` allows, more when\n *  they're over it, the bars at work in `color`, then the count in words. */\nexport function BuildLimit({\n    building,\n    limit,\n    color,\n    title,\n    children,\n}: {\n    building: number;\n    limit?: number | undefined;\n    color: string;\n    title: string;\n    children: ReactNode;\n}) {\n    return (\n        <span\n            className=\"build-limit inline-flex items-center gap-1.5 text-[11px] whitespace-nowrap text-(--muted-foreground) tabular-nums\"\n            title={title}\n        >\n            {limit !== undefined && (\n                <span className=\"inline-flex gap-[3px]\">\n                    {Array.from({ length: Math.max(limit, building) }, (_, n) => (\n                        <span\n                            key={n}\n                            className=\"bar h-1.5 w-3 rounded-full\"\n                            style={{ background: n < building ? color : 'var(--border)' }}\n                        />\n                    ))}\n                </span>\n            )}\n            {children}\n        </span>\n    );\n}\n\n/** A switch in a section's header with its visible `label` before it, and before that any `hold` that keeps it from\n *  acting, truncating; `title` says what it would do. */\nexport function HeaderSwitch({\n    label,\n    title,\n    hold,\n    control,\n}: {\n    label: string;\n    title: string;\n    hold?: string | undefined;\n    /** The Switch, named by `label` for assistive technology. */\n    control: ReactNode;\n}) {\n    return (\n        <span\n            className=\"auto-build inline-flex min-w-0 items-center gap-1.5 text-[11px] whitespace-nowrap text-(--muted-foreground)\"\n            title={title}\n        >\n            {hold && (\n                <span className=\"min-w-0 truncate\" title={hold} data-auto-build-hold>\n                    {hold}\n                </span>\n            )}\n            <span aria-hidden=\"true\">{label}</span>\n            {control}\n        </span>\n    );\n}\n\n/** The stages' sections, one under another, named by `label`. */\nexport function StageSections({ label, children }: { label: string; children: ReactNode }) {\n    return (\n        <section className=\"stages flex flex-col gap-3\" aria-label={label}>\n            {children}\n        </section>\n    );\n}\n"],"mappings":";;;AAMA,SAAgB,UAAU,EACtB,IACA,OACA,OACA,OACA,OACA,YASD;CACC,OACI,qBAAC,WAAD;EACI,cAAY;EACZ,mBAAiB,GAAG,GAAG;EACvB,WAAU;EAHd,UAAA,CAKI,qBAAC,UAAD;GAAQ,WAAU;GAAlB,UAAA;IACK;IACD,qBAAC,MAAD;KAAI,IAAI,GAAG,GAAG;KAAK,WAAU;KAA7B,UAAA;MACK;MAAM;MAAC,oBAAC,QAAD;OAAM,WAAU;OAAsD,UAAA;MAAY,CAAA;KAC1F;;IACH,SAAS,oBAAC,QAAD;KAAM,WAAU;KAAgD,UAAA;IAAY,CAAA;GAClF;EACR,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GAAc;EAAc,CAAA,CACtC;;AAEjB;;AAGA,SAAgB,UAAU,EAAE,YAAqC;CAC7D,OAAO,oBAAC,MAAD;EAAI,WAAU;EAA0B;CAAa,CAAA;AAChE;;AAGA,SAAgB,eAAe,EAAE,YAAqC;CAClE,OACI,oBAAC,KAAD;EAAG,mBAAA;EAAgB,WAAU;EACxB;CACF,CAAA;AAEX;;;AAIA,SAAgB,WAAW,EACvB,UACA,OACA,OACA,OACA,YAOD;CACC,OACI,qBAAC,QAAD;EACI,WAAU;EACH;EAFX,UAAA,CAIK,UAAU,KAAA,KACP,oBAAC,QAAD;GAAM,WAAU;GACX,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,OAAO,QAAQ,EAAE,IAAI,GAAG,MACnD,oBAAC,QAAD;IAEI,WAAU;IACV,OAAO,EAAE,YAAY,IAAI,WAAW,QAAQ,gBAAgB;GAC/D,GAHQ,CAGR,CACJ;EACC,CAAA,GAET,QACC;;AAEd;;;AAIA,SAAgB,aAAa,EACzB,OACA,OACA,MACA,WAOD;CACC,OACI,qBAAC,QAAD;EACI,WAAU;EACH;EAFX,UAAA;GAIK,QACG,oBAAC,QAAD;IAAM,WAAU;IAAmB,OAAO;IAAM,wBAAA;IAC3C,UAAA;GACC,CAAA;GAEV,oBAAC,QAAD;IAAM,eAAY;IAAQ,UAAA;GAAY,CAAA;GACrC;EACC;;AAEd;;AAGA,SAAgB,cAAc,EAAE,OAAO,YAAoD;CACvF,OACI,oBAAC,WAAD;EAAS,WAAU;EAA6B,cAAY;EACvD;CACI,CAAA;AAEjB"}

package/dist/board/StageRow.d.ts

@@ -0,0 +1,141 @@
+import { MouseEvent, ReactNode } from "react";
+/** A stage row: `item` names it as `data-item`, and `picked` marks the item the dialog shows. */
+export declare function StageRowItem({ item, picked, children }: {
+  item: string;
+  picked: boolean;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A row's first line: its cells, then its side. */
+export declare function RowFirst({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A row's first line's cells as the one button that opens its item. */
+export declare function RowOpen({ onOpen, children }: {
+  onOpen: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A row's first line's cells, when its title opens the item and the rest of the line does something else. */
+export declare function RowCells({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The first cell: the item's status glyph. */
+export declare function RowGlyph({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The first cell of a Queue row: its place in the Queue. */
+export declare function QueuePlace({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Where the item's ticket is saved and its repository, in the source cell. */
+export declare function RowIdentity({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The kind cell. */
+export declare function RowKindCell({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The title cell: the RowTitle and what it is part of. */
+export declare function RowTitleCell({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The row's title, truncating; `name` gives it whole. */
+export declare function RowTitle({ name, children }: {
+  name: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** After the title: which concept or parent the row's work belongs to, giving its room up first. */
+export declare function RowPartOf({ children }: {
+  children: string;
+}): import("react").JSX.Element;
+/** The state cell, which `clips` what overflows it unless what it holds keeps its own width. */
+export declare function RowStateCell({ clips, children }: {
+  clips?: boolean;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The row's state in words; `title` says more. */
+export declare function RowState({ title, children }: {
+  title?: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A Queue row's state: how long it has waited. */
+export declare function QueueAge({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The row's action slot, at its right. With `passEmpty`, clicks on its controls stay there, and a click beside them
+ *  reaches the row. */
+export declare function RowSide({ passEmpty, children }: {
+  passEmpty?: boolean;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Where to act on an item that waits on you, in its action slot. */
+export declare function OnYourDesk({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A row's second line: `bar` and `count` on the left, `children` in its text slot, then its pull requests and
+ *  figures. A click on it beside its controls goes to `onClick`. */
+export declare function RowSecondLine({ bar, count, prs, figures, onClick, children }: {
+  bar?: ReactNode;
+  /** A RowCount or RowSliceToggle; with none, its cell stays empty. */
+  count?: ReactNode;
+  /** The pull requests, as PullRequestRefs. */
+  prs?: ReactNode;
+  figures?: ReactNode;
+  onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/** The second line's count, such as `2/5 parts`. */
+export declare function RowCount({ title, children }: {
+  title?: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The second line's slice count as a button that unfolds the row's slices under it. */
+export declare function RowSliceToggle({ open, label, onToggle, children }: {
+  open: boolean;
+  /** Names the button, as what it does now. */
+  label: string;
+  onToggle: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Why the row is blocked, as a danger badge in its second line that truncates. */
+export declare function RowBlocked({ children }: {
+  children: string;
+}): import("react").JSX.Element;
+declare const SLICE_TONE: {
+  readonly blocked: 'text-(--st-review)';
+  readonly active: 'text-(--st-now)';
+};
+/** The second line's word on the row's slices: its first blocked or active slice, `more` after it, and anything `after`
+ *  that (such as that every slice is implemented); `title` lists them all. */
+export declare function RowSliceNote({ title, first, more, after }: {
+  title?: string | undefined;
+  first?: {
+    word: string;
+    tone: keyof typeof SLICE_TONE;
+    title: string;
+  } | undefined;
+  more?: string | undefined;
+  after?: string | undefined;
+}): import("react").JSX.Element;
+/** Under a row: Start's message or error and what Auto-build says of it, taking no room when empty. */
+export declare function RowFoot({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Under a row: its unfolded slices. */
+export declare function RowSlices({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The agent figures on one line, at the row's right: `text`, ending in a + when `partial`, or `incomplete` when there
+ *  are no figures to show; while `updating`, a spinner named by it leads them. A row that stops animating keeps its
+ *  spinner `still`. */
+export declare function UsageFigures({ title, text, updating, still, partial, incomplete }: {
+  title: string;
+  text?: string | null | undefined;
+  updating?: string | undefined;
+  still?: boolean;
+  /** Screen-reader words for the +. */
+  partial?: string | undefined;
+  /** The words in place of figures for an incomplete total with none to show. */
+  incomplete?: string | undefined;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=StageRow.d.ts.map