@lar-works/design-system 0.2.1 → 0.3.0

package/dist/board/Dependencies.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Dependencies.tsx
+/** The Dependencies, one DependencyItem each. */
+function DependencyList({ children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 grid list-none gap-3 p-0 text-sm",
+		children
+	});
+}
+/** A Dependency: who owns it and whether it's met, its need, its latest read and evidence, what the board asks about it,
+*  and its `action`. */
+function DependencyItem({ id, owner, need, read, evidence, notice, action }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "grid gap-1",
+		"data-dependency": id,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				"data-dependency-owner": true,
+				children: owner
+			}),
+			/* @__PURE__ */ jsx("span", { children: need }),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs text-(--muted-foreground)",
+				"data-dependency-read": true,
+				children: read
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs text-(--muted-foreground)",
+				"data-dependency-evidence": true,
+				children: evidence
+			}),
+			notice && /* @__PURE__ */ jsx("p", {
+				className: "m-0 text-xs font-medium text-(--warning-foreground)",
+				"data-dependency-notice": true,
+				children: notice
+			}),
+			/* @__PURE__ */ jsx("span", { children: action })
+		]
+	});
+}
+export { DependencyItem, DependencyList };
+
+//# sourceMappingURL=Dependencies.js.map

package/dist/board/Dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dependencies.js","names":[],"sources":["../../src/board/Dependencies.tsx"],"sourcesContent":["// The Dependencies holding a build, in the item dialog.\n\nimport type { ReactNode } from 'react';\n\n/** The Dependencies, one DependencyItem each. */\nexport function DependencyList({ children }: { children: ReactNode }) {\n    return <ul className=\"m-0 grid list-none gap-3 p-0 text-sm\">{children}</ul>;\n}\n\n/** A Dependency: who owns it and whether it's met, its need, its latest read and evidence, what the board asks about it,\n *  and its `action`. */\nexport function DependencyItem({\n    id,\n    owner,\n    need,\n    read,\n    evidence,\n    notice,\n    action,\n}: {\n    id: string;\n    owner: ReactNode;\n    need: ReactNode;\n    read: ReactNode;\n    evidence: ReactNode;\n    notice?: ReactNode;\n    action: ReactNode;\n}) {\n    return (\n        <li className=\"grid gap-1\" data-dependency={id}>\n            <span className=\"font-medium\" data-dependency-owner>\n                {owner}\n            </span>\n            <span>{need}</span>\n            <span className=\"text-xs text-(--muted-foreground)\" data-dependency-read>\n                {read}\n            </span>\n            <span className=\"text-xs text-(--muted-foreground)\" data-dependency-evidence>\n                {evidence}\n            </span>\n            {notice && (\n                <p className=\"m-0 text-xs font-medium text-(--warning-foreground)\" data-dependency-notice>\n                    {notice}\n                </p>\n            )}\n            <span>{action}</span>\n        </li>\n    );\n}\n"],"mappings":";;;AAKA,SAAgB,eAAe,EAAE,YAAqC;CAClE,OAAO,oBAAC,MAAD;EAAI,WAAU;EAAwC;CAAa,CAAA;AAC9E;;;AAIA,SAAgB,eAAe,EAC3B,IACA,OACA,MACA,MACA,UACA,QACA,UASD;CACC,OACI,qBAAC,MAAD;EAAI,WAAU;EAAa,mBAAiB;EAA5C,UAAA;GACI,oBAAC,QAAD;IAAM,WAAU;IAAc,yBAAA;IACzB,UAAA;GACC,CAAA;GACN,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GAClB,oBAAC,QAAD;IAAM,WAAU;IAAoC,wBAAA;IAC/C,UAAA;GACC,CAAA;GACN,oBAAC,QAAD;IAAM,WAAU;IAAoC,4BAAA;IAC/C,UAAA;GACC,CAAA;GACL,UACG,oBAAC,KAAD;IAAG,WAAU;IAAsD,0BAAA;IAC9D,UAAA;GACF,CAAA;GAEP,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA;EACpB;;AAEZ"}

package/dist/board/Desk.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+interface DeskSectionProps {
+  title: string;
+  /** How many cards show; with none, `empty` says why in one small line. */
+  count: number;
+  empty?: ReactNode;
+  children?: ReactNode;
+}
+/** "Your desk": the items awaiting your action as small cards in one row that scrolls sideways under the page's padding
+ *  to the window's edges. An empty desk is one small line. */
+export declare function DeskSection({ title, count, empty, children }: DeskSectionProps): import("react").JSX.Element;
+interface DeskCardProps {
+  /** The item's id, as `data-item`. */
+  item: string;
+  /** Whether the item dialog shows this item now. */
+  picked: boolean;
+  onOpen: () => void;
+  /** The first row: where the item comes from, its kind and its age. */
+  source: ReactNode;
+  kind: ReactNode;
+  age: ReactNode;
+  title: ReactNode;
+  /** The title's full text, for its tooltip. */
+  name: string;
+  /** More about the item under its title, such as a work item's fields. */
+  details?: ReactNode;
+  statusIcon: ReactNode;
+  status: string;
+  /** Beside the status: the next step, such as DeskMergeState or DeskHint. */
+  next?: ReactNode;
+  /** The card's actions, in its right corner, the board's button kinds drawn 32px tall there. A click beside them
+   *  opens the item, as anywhere else on the card. */
+  actions: ReactNode;
+}
+/**
+ * An item on your desk, opening the item dialog. Every card has the same four rows at the same heights, so they line
+ * up across cards: source, kind and age; the title; the status and next step; and the card's actions. Its summary is a
+ * button too, so the keyboard can open it.
+ */
+export declare function DeskCard({ item, picked, onOpen, source, kind, age, title, name, details, statusIcon, status, next, actions }: DeskCardProps): import("react").JSX.Element;
+export type MergeState = 'can merge' | 'checking' | 'blocked' | 'conflicts';
+/** A desk card's next step while its pull request is open: its merge state, then its checks. */
+export declare function DeskMergeState({ state, checks }: {
+  state: MergeState;
+  checks: string;
+}): import("react").JSX.Element;
+/** A desk card's next step as a hint, such as what its status waits for. */
+export declare function DeskHint({ children }: {
+  children?: string | undefined;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Desk.d.ts.map

package/dist/board/Desk.js

@@ -0,0 +1,130 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/board/Desk.tsx
+/** "Your desk": the items awaiting your action as small cards in one row that scrolls sideways under the page's padding
+*  to the window's edges. An empty desk is one small line. */
+function DeskSection({ title, count, empty, children }) {
+	if (!count) return /* @__PURE__ */ jsxs("section", {
+		className: "desk flex shrink-0 items-baseline gap-2 text-xs text-(--muted-foreground)",
+		"aria-labelledby": "desk-h",
+		children: [/* @__PURE__ */ jsx("h2", {
+			id: "desk-h",
+			className: "m-0 text-[13px] font-medium text-(--foreground)",
+			children: title
+		}), /* @__PURE__ */ jsx("p", {
+			className: "m-0",
+			children: empty
+		})]
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: "desk grid shrink-0 gap-2",
+		"aria-labelledby": "desk-h",
+		children: [/* @__PURE__ */ jsxs("h2", {
+			id: "desk-h",
+			className: "m-0 text-[13px] font-medium",
+			children: [
+				title,
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "text-(--muted-foreground)",
+					children: count
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "-mx-6 flex [scrollbar-width:none] items-start gap-3 overflow-x-auto px-6 py-1 [&::-webkit-scrollbar]:hidden",
+			children
+		})]
+	});
+}
+/**
+* An item on your desk, opening the item dialog. Every card has the same four rows at the same heights, so they line
+* up across cards: source, kind and age; the title; the status and next step; and the card's actions. Its summary is a
+* button too, so the keyboard can open it.
+*/
+function DeskCard({ item, picked, onOpen, source, kind, age, title, name, details, statusIcon, status, next, actions }) {
+	return /* @__PURE__ */ jsxs("div", {
+		onClick: onOpen,
+		"data-item": item,
+		className: `desk-card relative grid w-88 shrink-0 cursor-pointer content-start gap-2 rounded-xl border border-[color-mix(in_srgb,var(--warning)_45%,var(--border))] bg-(--card) py-3 pr-3 pl-4 shadow-[inset_3px_0_0_var(--warning)] hover:bg-(--accent) ${picked ? "ring-2 ring-(--primary) ring-offset-1 ring-offset-(--background)" : ""}`,
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "grid min-w-0 gap-2 rounded text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--primary)",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "desk-meta flex h-6 min-w-0 items-center gap-2 text-[11px]",
+						children: [
+							source,
+							kind,
+							/* @__PURE__ */ jsx("span", {
+								className: "ml-auto shrink-0 text-(--muted-foreground)",
+								children: age
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "desk-title h-5 truncate text-[13px]/5 font-medium",
+						title: name,
+						children: title
+					}),
+					details
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex shrink-0 items-center gap-1.5 text-[11px] [&_svg]:size-3",
+					children: [statusIcon, /* @__PURE__ */ jsx("span", {
+						className: "font-semibold text-(--warning-foreground)",
+						children: status
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "desk-next flex h-5 min-w-0 flex-1 items-center gap-1.5 text-[11px] text-(--muted-foreground) tabular-nums",
+					children: next
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "desk-actions flex h-8 shrink-0 items-center justify-end gap-1.5 [&_[data-kind]:not([data-toggle])]:h-8 [&_[data-kind][data-icon-only]]:w-8!",
+				onClick: (event) => {
+					if (event.target !== event.currentTarget) event.stopPropagation();
+				},
+				children: actions
+			})
+		]
+	});
+}
+const mergeDots = {
+	"can merge": "bg-(--build)",
+	checking: "bg-(--warning)",
+	blocked: "bg-(--muted-foreground)",
+	conflicts: "bg-(--error)"
+};
+/** A desk card's next step while its pull request is open: its merge state, then its checks. */
+function DeskMergeState({ state, checks }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", { className: `size-2 shrink-0 rounded-full ${mergeDots[state]}` }),
+		/* @__PURE__ */ jsx("span", {
+			className: "shrink-0 font-medium text-(--foreground)",
+			children: state
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "truncate",
+			title: `${state} · ${checks}`,
+			children: [
+				" ",
+				"· ",
+				checks
+			]
+		})
+	] });
+}
+/** A desk card's next step as a hint, such as what its status waits for. */
+function DeskHint({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		title: children,
+		children
+	});
+}
+export { DeskCard, DeskHint, DeskMergeState, DeskSection };
+
+//# sourceMappingURL=Desk.js.map

package/dist/board/Desk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Desk.js","names":[],"sources":["../../src/board/Desk.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\ninterface DeskSectionProps {\n    title: string;\n    /** How many cards show; with none, `empty` says why in one small line. */\n    count: number;\n    empty?: ReactNode;\n    children?: ReactNode;\n}\n\n/** \"Your desk\": the items awaiting your action as small cards in one row that scrolls sideways under the page's padding\n *  to the window's edges. An empty desk is one small line. */\nexport function DeskSection({ title, count, empty, children }: DeskSectionProps) {\n    if (!count)\n        return (\n            <section\n                className=\"desk flex shrink-0 items-baseline gap-2 text-xs text-(--muted-foreground)\"\n                aria-labelledby=\"desk-h\"\n            >\n                <h2 id=\"desk-h\" className=\"m-0 text-[13px] font-medium text-(--foreground)\">\n                    {title}\n                </h2>\n                <p className=\"m-0\">{empty}</p>\n            </section>\n        );\n\n    return (\n        <section className=\"desk grid shrink-0 gap-2\" aria-labelledby=\"desk-h\">\n            <h2 id=\"desk-h\" className=\"m-0 text-[13px] font-medium\">\n                {title} <span className=\"text-(--muted-foreground)\">{count}</span>\n            </h2>\n            <div className=\"-mx-6 flex [scrollbar-width:none] items-start gap-3 overflow-x-auto px-6 py-1 [&::-webkit-scrollbar]:hidden\">\n                {children}\n            </div>\n        </section>\n    );\n}\n\ninterface DeskCardProps {\n    /** The item's id, as `data-item`. */\n    item: string;\n    /** Whether the item dialog shows this item now. */\n    picked: boolean;\n    onOpen: () => void;\n    /** The first row: where the item comes from, its kind and its age. */\n    source: ReactNode;\n    kind: ReactNode;\n    age: ReactNode;\n    title: ReactNode;\n    /** The title's full text, for its tooltip. */\n    name: string;\n    /** More about the item under its title, such as a work item's fields. */\n    details?: ReactNode;\n    statusIcon: ReactNode;\n    status: string;\n    /** Beside the status: the next step, such as DeskMergeState or DeskHint. */\n    next?: ReactNode;\n    /** The card's actions, in its right corner, the board's button kinds drawn 32px tall there. A click beside them\n     *  opens the item, as anywhere else on the card. */\n    actions: ReactNode;\n}\n\n/**\n * An item on your desk, opening the item dialog. Every card has the same four rows at the same heights, so they line\n * up across cards: source, kind and age; the title; the status and next step; and the card's actions. Its summary is a\n * button too, so the keyboard can open it.\n */\nexport function DeskCard({\n    item,\n    picked,\n    onOpen,\n    source,\n    kind,\n    age,\n    title,\n    name,\n    details,\n    statusIcon,\n    status,\n    next,\n    actions,\n}: DeskCardProps) {\n    return (\n        <div\n            onClick={onOpen}\n            data-item={item}\n            className={`desk-card relative grid w-88 shrink-0 cursor-pointer content-start gap-2 rounded-xl border border-[color-mix(in_srgb,var(--warning)_45%,var(--border))] bg-(--card) py-3 pr-3 pl-4 shadow-[inset_3px_0_0_var(--warning)] hover:bg-(--accent) ${picked ? 'ring-2 ring-(--primary) ring-offset-1 ring-offset-(--background)' : ''}`}\n        >\n            <button\n                type=\"button\"\n                className=\"grid min-w-0 gap-2 rounded text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--primary)\"\n            >\n                <span className=\"desk-meta flex h-6 min-w-0 items-center gap-2 text-[11px]\">\n                    {source}\n                    {kind}\n                    <span className=\"ml-auto shrink-0 text-(--muted-foreground)\">{age}</span>\n                </span>\n                <span className=\"desk-title h-5 truncate text-[13px]/5 font-medium\" title={name}>\n                    {title}\n                </span>\n                {details}\n            </button>\n            <span className=\"flex min-w-0 items-center gap-2\">\n                <span className=\"flex shrink-0 items-center gap-1.5 text-[11px] [&_svg]:size-3\">\n                    {statusIcon}\n                    <span className=\"font-semibold text-(--warning-foreground)\">{status}</span>\n                </span>\n                <span className=\"desk-next flex h-5 min-w-0 flex-1 items-center gap-1.5 text-[11px] text-(--muted-foreground) tabular-nums\">\n                    {next}\n                </span>\n            </span>\n            <div\n                className=\"desk-actions flex h-8 shrink-0 items-center justify-end gap-1.5 [&_[data-kind]:not([data-toggle])]:h-8 [&_[data-kind][data-icon-only]]:w-8!\"\n                // The actions keep their clicks from the card; a click on the row's own empty space still opens it.\n                onClick={(event) => {\n                    if (event.target !== event.currentTarget) event.stopPropagation();\n                }}\n            >\n                {actions}\n            </div>\n        </div>\n    );\n}\n\nexport type MergeState = 'can merge' | 'checking' | 'blocked' | 'conflicts';\n\nconst mergeDots: Record<MergeState, string> = {\n    'can merge': 'bg-(--build)',\n    checking: 'bg-(--warning)',\n    blocked: 'bg-(--muted-foreground)',\n    conflicts: 'bg-(--error)',\n};\n\n/** A desk card's next step while its pull request is open: its merge state, then its checks. */\nexport function DeskMergeState({ state, checks }: { state: MergeState; checks: string }) {\n    return (\n        <>\n            <span className={`size-2 shrink-0 rounded-full ${mergeDots[state]}`} />\n            <span className=\"shrink-0 font-medium text-(--foreground)\">{state}</span>\n            <span className=\"truncate\" title={`${state} · ${checks}`}>\n                {' '}\n                · {checks}\n            </span>\n        </>\n    );\n}\n\n/** A desk card's next step as a hint, such as what its status waits for. */\nexport function DeskHint({ children }: { children?: string | undefined }) {\n    return (\n        <span className=\"truncate\" title={children}>\n            {children}\n        </span>\n    );\n}\n"],"mappings":";;;;AAYA,SAAgB,YAAY,EAAE,OAAO,OAAO,OAAO,YAA8B;CAC7E,IAAI,CAAC,OACD,OACI,qBAAC,WAAD;EACI,WAAU;EACV,mBAAgB;EAFpB,UAAA,CAII,oBAAC,MAAD;GAAI,IAAG;GAAS,WAAU;GACrB,UAAA;EACD,CAAA,GACJ,oBAAC,KAAD;GAAG,WAAU;GAAO,UAAA;EAAS,CAAA,CACxB;;CAGjB,OACI,qBAAC,WAAD;EAAS,WAAU;EAA2B,mBAAgB;EAA9D,UAAA,CACI,qBAAC,MAAD;GAAI,IAAG;GAAS,WAAU;GAA1B,UAAA;IACK;IAAM;IAAC,oBAAC,QAAD;KAAM,WAAU;KAA6B,UAAA;IAAY,CAAA;GACjE;EACJ,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GACV;EACA,CAAA,CACA;;AAEjB;;;;;;AA+BA,SAAgB,SAAS,EACrB,MACA,QACA,QACA,QACA,MACA,KACA,OACA,MACA,SACA,YACA,QACA,MACA,WACc;CACd,OACI,qBAAC,OAAD;EACI,SAAS;EACT,aAAW;EACX,WAAW,gPAAgP,SAAS,qEAAqE;EAH7U,UAAA;GAKI,qBAAC,UAAD;IACI,MAAK;IACL,WAAU;IAFd,UAAA;KAII,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACK;OACA;OACD,oBAAC,QAAD;QAAM,WAAU;QAA8C,UAAA;OAAU,CAAA;MACtE;;KACN,oBAAC,QAAD;MAAM,WAAU;MAAoD,OAAO;MACtE,UAAA;KACC,CAAA;KACL;IACG;;GACR,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACI,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACK,YACD,oBAAC,QAAD;MAAM,WAAU;MAA6C,UAAA;KAAa,CAAA,CACxE;IACN,CAAA,GAAA,oBAAC,QAAD;KAAM,WAAU;KACX,UAAA;IACC,CAAA,CACJ;;GACN,oBAAC,OAAD;IACI,WAAU;IAEV,UAAU,UAAU;KAChB,IAAI,MAAM,WAAW,MAAM,eAAe,MAAM,gBAAgB;IACpE;IAEC,UAAA;GACA,CAAA;EACJ;;AAEb;AAIA,MAAM,YAAwC;CAC1C,aAAa;CACb,UAAU;CACV,SAAS;CACT,WAAW;AACf;;AAGA,SAAgB,eAAe,EAAE,OAAO,UAAiD;CACrF,OACI,qBAAA,UAAA,EAAA,UAAA;EACI,oBAAC,QAAD,EAAM,WAAW,gCAAgC,UAAU,SAAW,CAAA;EACtE,oBAAC,QAAD;GAAM,WAAU;GAA4C,UAAA;EAAY,CAAA;EACxE,qBAAC,QAAD;GAAM,WAAU;GAAW,OAAO,GAAG,MAAM,KAAK;GAAhD,UAAA;IACK;IAAI;IACF;GACD;;CACR,EAAA,CAAA;AAEV;;AAGA,SAAgB,SAAS,EAAE,YAA+C;CACtE,OACI,oBAAC,QAAD;EAAM,WAAU;EAAW,OAAO;EAC7B;CACC,CAAA;AAEd"}

package/dist/board/Dossier.d.ts

@@ -0,0 +1,100 @@
+import { MouseEvent, ReactNode } from "react";
+/** A dossier, named by `label`; `id` names it as `data-dossier`. */
+export declare function DossierRow({ id, label, children }: {
+  id: string;
+  label: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The dossiers in the dock. */
+export declare function DossierList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The chevron that expands a dossier in place, named by what it does now. */
+export declare function DossierToggle({ open, label, onToggle }: {
+  open: boolean;
+  label: string;
+  onToggle: () => void;
+}): import("react").JSX.Element;
+/** A dossier's line: a click anywhere on it but its controls goes to `onClick`; `title` gives what its chips and threads
+ *  say. */
+export declare function DossierLine({ item, picked, title, onClick, children }: {
+  item: string;
+  picked: boolean;
+  title?: string | undefined;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The dossier line's title cell: its title, tracker fields, note and other repositories, the title keeping its room. */
+export declare function DossierTitleCell({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The dossier's title as the button that opens its item; `name` gives it whole. */
+export declare function DossierTitle({ name, onOpen, children }: {
+  name: string;
+  onOpen: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** After the title: the tracker's fields, which give up their room before the title does, ending in an ellipsis. Below
+ *  `lg` they may shrink to nothing, so a narrow line's title keeps its room. */
+export declare function DossierFields({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** After the fields: a note, such as where its planning is saved; its clicks stay there. */
+export declare function DossierNote({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The repositories its parts work in beyond its own. */
+export declare function DossierRepos({ children }: {
+  children: string;
+}): import("react").JSX.Element;
+/** A dossier chip's tone. */
+export type DossierChipTone = 'warning' | 'danger' | 'neutral' | 'accent' | 'success';
+/** The dossier's first chip whole, at its full width, and how many `more` its line's tooltip names. Its clicks stay
+ *  there. */
+export declare function DossierChips({ first, more }: {
+  first: {
+    words: string;
+    tone: DossierChipTone;
+    icon?: ReactNode;
+    refined?: boolean | undefined;
+  };
+  /** The other chips' words. */
+  more: string[];
+}): import("react").JSX.Element;
+/** An expanded dossier's view controls, in its action slot. */
+export declare function DossierTools({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** What's next, as a sentence in the second line's text slot: a `word` naming it, in the warning tone when it waits on
+ *  you, screen-reader text alone when `unseen`, then the `text` that names it. */
+export declare function DossierNext({ word, yours, unseen, text }: {
+  word?: string | undefined;
+  yours?: boolean;
+  unseen?: boolean;
+  text: string;
+}): import("react").JSX.Element;
+/** One part in PartsBar: its name and state, its colour, and whether it pulses while at work. */
+export interface PartSegment {
+  key: string;
+  title: string;
+  color: string;
+  pulse?: boolean;
+}
+/** Every part as a segment in its colour, so the bar fills left to right, then a dashed one per part the board
+ *  doesn't read. */
+export declare function PartsBar({ title, parts, unread }: {
+  title: string;
+  parts: PartSegment[];
+  unread: number;
+}): import("react").JSX.Element;
+/** What an expanded dossier holds, under its line. */
+export declare function DossierBody({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Where a dossier's planning is saved, as a quiet label; hovering or focusing it reads the whole `note`. */
+export declare function PlanningNote({ note, role, children }: {
+  note: string;
+  role: 'status' | 'note';
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Dossier.d.ts.map

package/dist/board/Dossier.js

@@ -0,0 +1,194 @@
+import { Badge } from "../display/Badge.js";
+import { ambientMotion } from "../foundations/AmbientMotion.js";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../overlays/Tooltip.js";
+import { ROW_OPENS, ROW_RULE, pickedRow } from "./RowStyles.js";
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Dossier.tsx
+const stop = (event) => event.stopPropagation();
+/** A dossier, named by `label`; `id` names it as `data-dossier`. */
+function DossierRow({ id, label, children }) {
+	return /* @__PURE__ */ jsx("article", {
+		className: `@container ${ROW_RULE}`,
+		"data-dossier": id,
+		"aria-label": label,
+		children
+	});
+}
+/** The dossiers in the dock. */
+function DossierList({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-dossiers": true,
+		children
+	});
+}
+/** The chevron that expands a dossier in place, named by what it does now. */
+function DossierToggle({ open, label, onToggle }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-dossier-open": true,
+		"aria-expanded": open,
+		"aria-label": label,
+		onClick: (event) => {
+			stop(event);
+			onToggle();
+		},
+		className: `grid size-6 shrink-0 place-items-center rounded-md text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) ${ROW_OPENS}`,
+		children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: `size-4 ${open ? "rotate-90" : ""}` })
+	});
+}
+/** A dossier's line: a click anywhere on it but its controls goes to `onClick`; `title` gives what its chips and threads
+*  say. */
+function DossierLine({ item, picked, title, onClick, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		onClick,
+		"data-item": item,
+		title,
+		className: `cursor-pointer py-2 hover:bg-(--accent) ${pickedRow(picked)}`,
+		children
+	});
+}
+/** The dossier line's title cell: its title, tracker fields, note and other repositories, the title keeping its room. */
+function DossierTitleCell({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex min-w-0 items-center gap-1.5",
+		"data-line": "1",
+		"data-title-cell": true,
+		children
+	});
+}
+/** The dossier's title as the button that opens its item; `name` gives it whole. */
+function DossierTitle({ name, onOpen, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: (event) => {
+			stop(event);
+			onOpen();
+		},
+		title: name,
+		"data-title": true,
+		className: `min-w-0 truncate rounded text-left text-sm leading-7 font-medium text-(--foreground) hover:underline ${ROW_OPENS}`,
+		children
+	});
+}
+/** After the title: the tracker's fields, which give up their room before the title does, ending in an ellipsis. Below
+*  `lg` they may shrink to nothing, so a narrow line's title keeps its room. */
+function DossierFields({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 shrink-[1000] truncate empty:hidden lg:min-w-10",
+		children
+	});
+}
+/** After the fields: a note, such as where its planning is saved; its clicks stay there. */
+function DossierNote({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		onClick: stop,
+		className: "flex shrink-0 items-center pl-1 empty:hidden",
+		children
+	});
+}
+/** The repositories its parts work in beyond its own. */
+function DossierRepos({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-col": "repos",
+		className: "min-w-16 shrink-[100] truncate text-(--muted-foreground) empty:hidden",
+		title: children || void 0,
+		children
+	});
+}
+/** The dossier's first chip whole, at its full width, and how many `more` its line's tooltip names. Its clicks stay
+*  there. */
+function DossierChips({ first, more }) {
+	return /* @__PURE__ */ jsxs("span", {
+		onClick: stop,
+		className: "flex shrink-0 items-center gap-1",
+		"data-chips": true,
+		children: [/* @__PURE__ */ jsxs(Badge, {
+			tone: first.tone,
+			className: "whitespace-nowrap tabular-nums",
+			"data-chip": true,
+			"data-refined": first.refined || void 0,
+			children: [first.icon, first.words]
+		}), more.length > 0 && /* @__PURE__ */ jsxs("span", {
+			className: "text-(--muted-foreground) tabular-nums",
+			"data-chips-more": true,
+			children: [/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				children: ["+", more.length]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: more.join(", ")
+			})]
+		})]
+	});
+}
+/** An expanded dossier's view controls, in its action slot. */
+function DossierTools({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex shrink-0 items-center",
+		"data-dossier-tools": true,
+		children
+	});
+}
+/** What's next, as a sentence in the second line's text slot: a `word` naming it, in the warning tone when it waits on
+*  you, screen-reader text alone when `unseen`, then the `text` that names it. */
+function DossierNext({ word, yours = false, unseen = false, text }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "min-w-0",
+		"data-next": true,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [word && /* @__PURE__ */ jsx("span", {
+				className: `shrink-0 font-medium ${yours ? "text-(--warning-foreground)" : "text-(--muted-foreground)"} ${unseen ? "sr-only" : ""}`,
+				children: word
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				title: text,
+				children: text
+			})]
+		})
+	});
+}
+/** Every part as a segment in its colour, so the bar fills left to right, then a dashed one per part the board
+*  doesn't read. */
+function PartsBar({ title, parts, unread }) {
+	return /* @__PURE__ */ jsxs("ol", {
+		className: "m-0 flex min-w-0 list-none gap-[2px] overflow-hidden p-0",
+		title,
+		"data-part-bar": true,
+		children: [parts.map((p) => /* @__PURE__ */ jsx("li", {
+			ref: p.pulse ? ambientMotion : void 0,
+			title: p.title,
+			className: `h-1.5 min-w-[3px] flex-1 rounded-full ${p.pulse ? "status-pulse" : ""}`,
+			style: { background: p.color }
+		}, p.key)), Array.from({ length: Math.max(0, unread) }, (_, n) => /* @__PURE__ */ jsx("li", { className: "h-1.5 min-w-[3px] flex-1 rounded-full border border-dashed border-(--input)" }, `u${n}`))]
+	});
+}
+/** What an expanded dossier holds, under its line. */
+function DossierBody({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-3 border-t border-(--border) p-3",
+		"data-dossier-body": true,
+		children
+	});
+}
+/** Where a dossier's planning is saved, as a quiet label; hovering or focusing it reads the whole `note`. */
+function PlanningNote({ note, role, children }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("span", {
+			tabIndex: 0,
+			role,
+			"aria-label": note,
+			"data-structure-sync": true,
+			className: "rounded whitespace-nowrap text-(--muted-foreground) focus-visible:outline-2 focus-visible:outline-(--primary)",
+			children
+		})
+	}), /* @__PURE__ */ jsx(TooltipPopup, {
+		side: "bottom",
+		children: note
+	})] });
+}
+export { DossierBody, DossierChips, DossierFields, DossierLine, DossierList, DossierNext, DossierNote, DossierRepos, DossierRow, DossierTitle, DossierTitleCell, DossierToggle, DossierTools, PartsBar, PlanningNote };
+
+//# sourceMappingURL=Dossier.js.map

package/dist/board/Dossier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dossier.js","names":[],"sources":["../../src/board/Dossier.tsx"],"sourcesContent":["// A dossier in Lar Factory's board's dock (Concepts and linked work): its one line, on the stage rows' columns, which\n// expands in place to its body, and what the line holds: its toggle, title, chips, what's next and the bar of its parts.\n\nimport { ChevronRightIcon } from 'lucide-react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { Badge } from '../display/Badge';\nimport { ambientMotion } from '../foundations/AmbientMotion';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '../overlays/Tooltip';\nimport { pickedRow, ROW_OPENS, ROW_RULE } from './RowStyles';\n\nconst stop = (event: MouseEvent) => event.stopPropagation();\n\n/** A dossier, named by `label`; `id` names it as `data-dossier`. */\nexport function DossierRow({ id, label, children }: { id: string; label: string; children: ReactNode }) {\n    return (\n        <article className={`@container ${ROW_RULE}`} data-dossier={id} aria-label={label}>\n            {children}\n        </article>\n    );\n}\n\n/** The dossiers in the dock. */\nexport function DossierList({ children }: { children: ReactNode }) {\n    return <div data-dossiers>{children}</div>;\n}\n\n/** The chevron that expands a dossier in place, named by what it does now. */\nexport function DossierToggle({ open, label, onToggle }: { open: boolean; label: string; onToggle: () => void }) {\n    return (\n        <button\n            type=\"button\"\n            data-dossier-open\n            aria-expanded={open}\n            aria-label={label}\n            onClick={(event) => {\n                stop(event);\n                onToggle();\n            }}\n            className={`grid size-6 shrink-0 place-items-center rounded-md text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) ${ROW_OPENS}`}\n        >\n            <ChevronRightIcon className={`size-4 ${open ? 'rotate-90' : ''}`} />\n        </button>\n    );\n}\n\n/** A dossier's line: a click anywhere on it but its controls goes to `onClick`; `title` gives what its chips and threads\n *  say. */\nexport function DossierLine({\n    item,\n    picked,\n    title,\n    onClick,\n    children,\n}: {\n    item: string;\n    picked: boolean;\n    title?: string | undefined;\n    onClick?: (event: MouseEvent<HTMLDivElement>) => void;\n    children: ReactNode;\n}) {\n    return (\n        <div\n            onClick={onClick}\n            data-item={item}\n            title={title}\n            className={`cursor-pointer py-2 hover:bg-(--accent) ${pickedRow(picked)}`}\n        >\n            {children}\n        </div>\n    );\n}\n\n/** The dossier line's title cell: its title, tracker fields, note and other repositories, the title keeping its room. */\nexport function DossierTitleCell({ children }: { children: ReactNode }) {\n    return (\n        <span className=\"flex min-w-0 items-center gap-1.5\" data-line=\"1\" data-title-cell>\n            {children}\n        </span>\n    );\n}\n\n/** The dossier's title as the button that opens its item; `name` gives it whole. */\nexport function DossierTitle({ name, onOpen, children }: { name: string; onOpen: () => void; children: ReactNode }) {\n    return (\n        <button\n            type=\"button\"\n            onClick={(event) => {\n                stop(event);\n                onOpen();\n            }}\n            title={name}\n            data-title\n            className={`min-w-0 truncate rounded text-left text-sm leading-7 font-medium text-(--foreground) hover:underline ${ROW_OPENS}`}\n        >\n            {children}\n        </button>\n    );\n}\n\n/** After the title: the tracker's fields, which give up their room before the title does, ending in an ellipsis. Below\n *  `lg` they may shrink to nothing, so a narrow line's title keeps its room. */\nexport function DossierFields({ children }: { children: ReactNode }) {\n    return <span className=\"min-w-0 shrink-[1000] truncate empty:hidden lg:min-w-10\">{children}</span>;\n}\n\n/** After the fields: a note, such as where its planning is saved; its clicks stay there. */\nexport function DossierNote({ children }: { children: ReactNode }) {\n    return (\n        <span onClick={stop} className=\"flex shrink-0 items-center pl-1 empty:hidden\">\n            {children}\n        </span>\n    );\n}\n\n/** The repositories its parts work in beyond its own. */\nexport function DossierRepos({ children }: { children: string }) {\n    return (\n        <span\n            data-col=\"repos\"\n            className=\"min-w-16 shrink-[100] truncate text-(--muted-foreground) empty:hidden\"\n            title={children || undefined}\n        >\n            {children}\n        </span>\n    );\n}\n\n/** A dossier chip's tone. */\nexport type DossierChipTone = 'warning' | 'danger' | 'neutral' | 'accent' | 'success';\n\n/** The dossier's first chip whole, at its full width, and how many `more` its line's tooltip names. Its clicks stay\n *  there. */\nexport function DossierChips({\n    first,\n    more,\n}: {\n    first: { words: string; tone: DossierChipTone; icon?: ReactNode; refined?: boolean | undefined };\n    /** The other chips' words. */\n    more: string[];\n}) {\n    return (\n        <span onClick={stop} className=\"flex shrink-0 items-center gap-1\" data-chips>\n            <Badge\n                tone={first.tone}\n                className=\"whitespace-nowrap tabular-nums\"\n                data-chip\n                data-refined={first.refined || undefined}\n            >\n                {first.icon}\n                {first.words}\n            </Badge>\n            {more.length > 0 && (\n                <span className=\"text-(--muted-foreground) tabular-nums\" data-chips-more>\n                    <span aria-hidden=\"true\">+{more.length}</span>\n                    <span className=\"sr-only\">{more.join(', ')}</span>\n                </span>\n            )}\n        </span>\n    );\n}\n\n/** An expanded dossier's view controls, in its action slot. */\nexport function DossierTools({ children }: { children: ReactNode }) {\n    return (\n        <span className=\"flex shrink-0 items-center\" data-dossier-tools>\n            {children}\n        </span>\n    );\n}\n\n/** What's next, as a sentence in the second line's text slot: a `word` naming it, in the warning tone when it waits on\n *  you, screen-reader text alone when `unseen`, then the `text` that names it. */\nexport function DossierNext({\n    word,\n    yours = false,\n    unseen = false,\n    text,\n}: {\n    word?: string | undefined;\n    yours?: boolean;\n    unseen?: boolean;\n    text: string;\n}) {\n    return (\n        <span className=\"min-w-0\" data-next>\n            <span className=\"flex min-w-0 items-center gap-2\">\n                {word && (\n                    <span\n                        className={`shrink-0 font-medium ${yours ? 'text-(--warning-foreground)' : 'text-(--muted-foreground)'} ${unseen ? 'sr-only' : ''}`}\n                    >\n                        {word}\n                    </span>\n                )}\n                <span className=\"min-w-0 truncate\" title={text}>\n                    {text}\n                </span>\n            </span>\n        </span>\n    );\n}\n\n/** One part in PartsBar: its name and state, its colour, and whether it pulses while at work. */\nexport interface PartSegment {\n    key: string;\n    title: string;\n    color: string;\n    pulse?: boolean;\n}\n\n/** Every part as a segment in its colour, so the bar fills left to right, then a dashed one per part the board\n *  doesn't read. */\nexport function PartsBar({ title, parts, unread }: { title: string; parts: PartSegment[]; unread: number }) {\n    return (\n        <ol className=\"m-0 flex min-w-0 list-none gap-[2px] overflow-hidden p-0\" title={title} data-part-bar>\n            {parts.map((p) => (\n                <li\n                    key={p.key}\n                    ref={p.pulse ? ambientMotion : undefined}\n                    title={p.title}\n                    className={`h-1.5 min-w-[3px] flex-1 rounded-full ${p.pulse ? 'status-pulse' : ''}`}\n                    style={{ background: p.color }}\n                />\n            ))}\n            {Array.from({ length: Math.max(0, unread) }, (_, n) => (\n                <li\n                    key={`u${n}`}\n                    className=\"h-1.5 min-w-[3px] flex-1 rounded-full border border-dashed border-(--input)\"\n                />\n            ))}\n        </ol>\n    );\n}\n\n/** What an expanded dossier holds, under its line. */\nexport function DossierBody({ children }: { children: ReactNode }) {\n    return (\n        <div className=\"grid gap-3 border-t border-(--border) p-3\" data-dossier-body>\n            {children}\n        </div>\n    );\n}\n\n/** Where a dossier's planning is saved, as a quiet label; hovering or focusing it reads the whole `note`. */\nexport function PlanningNote({ note, role, children }: { note: string; role: 'status' | 'note'; children: ReactNode }) {\n    return (\n        <Tooltip>\n            <TooltipTrigger asChild>\n                <span\n                    tabIndex={0}\n                    role={role}\n                    aria-label={note}\n                    data-structure-sync\n                    className=\"rounded whitespace-nowrap text-(--muted-foreground) focus-visible:outline-2 focus-visible:outline-(--primary)\"\n                >\n                    {children}\n                </span>\n            </TooltipTrigger>\n            <TooltipPopup side=\"bottom\">{note}</TooltipPopup>\n        </Tooltip>\n    );\n}\n"],"mappings":"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"}

package/dist/board/Filters.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+/** The List's filters: menus of checklists, then the active choices as chips that remove themselves, then Clear. */
+export declare const FilterBar: import("react").ForwardRefExoticComponent<{
+  children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+interface FilterMenuProps {
+  /** What the menu filters, as `data-filter`. */
+  which: string;
+  name: string;
+  /** How many of its choices are on, after its name. */
+  picked: number;
+  children: ReactNode;
+}
+/** A filter's button, its name and how many choices are on, opening its checklist. */
+export declare function FilterMenu({ which, name, picked, children }: FilterMenuProps): import("react").JSX.Element;
+/** A filter menu's checklist. */
+export declare function FilterChoices({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** One choice in a filter's checklist: its checkbox, then what it is, such as a badge. */
+export declare function FilterChoice({ checked, onToggle, children }: {
+  checked: boolean;
+  onToggle: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** An active choice as a chip, such as a badge ending in ×, which removes the choice. */
+export declare function FilterChip({ removeLabel, onRemove, children }: {
+  removeLabel: string;
+  onRemove: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Filters.d.ts.map