@lar-works/design-system 0.2.0 → 0.3.0

package/dist/board/ItemDialog.d.ts

@@ -0,0 +1,73 @@
+import { DataAttributes } from "./DataAttributes.js";
+import { ReactNode } from "react";
+/**
+ * The summary under the dialog's title, a row each: `line` (the item's source, repository, status and age), its
+ * `parent`, its `kind` and its ticket `actions`.
+ */
+export declare function ItemSummary({ line, parent, kind, actions, ...data }: {
+  line: ReactNode;
+  parent?: ReactNode;
+  kind: ReactNode;
+  actions: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** The summary's status word, in the text colour. */
+export declare function SummaryStatus({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The summary's age, which a narrow dialog leaves out. */
+export declare function SummaryAge({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** What blocks the item, as a small chip in the danger colours. */
+export declare function SummaryBlocked({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The item's parent: `prefix` ("Part of"), then its `name`, linked when `href` opens it. */
+export declare function SummaryParent({ prefix, name, href, ...data }: {
+  prefix: string;
+  name: string;
+  href?: string | undefined;
+} & DataAttributes): import("react").JSX.Element;
+/** A labelled control the summary opens in place, such as Attach a ticket's picker: `label` over it. */
+export declare function SummaryPanel({ label, children }: {
+  label: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The dialog body's column: the progress, notes, meta area, record, description, comments and sidebar, one under the
+ * other; when it `fill`s, a column whose description and comments take what the rest leave.
+ */
+export declare function ItemDialogBody({ fill, children, ...data }: {
+  fill: boolean;
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/**
+ * The main column with the sidebar beside it once the dialog is 45rem wide, when there is an `aside`. Filling, the
+ * main column's open editor takes the height the rest leaves.
+ */
+export declare function ItemDialogColumns({ aside, fill, children }: {
+  aside: boolean;
+  fill: boolean;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The sidebar beside the main column, ruled off from it once there is room. */
+export declare function ItemDialogAside({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A warning about the item, such as why it is paused, in the warning panel: `icon` (a status glyph) before it when
+ *  given. */
+export declare function WarningNote({ icon, children, ...data }: {
+  icon?: ReactNode;
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** Why the factory can't write to the item's tracker, announced, and the `action` that checks again. */
+export declare function AccessNotice({ message, action }: {
+  message: string;
+  action: ReactNode;
+}): import("react").JSX.Element;
+/** A group of the footer's actions: the `leading` ones that move the item, in small text, or the rest at its end. */
+export declare function DialogActions({ presentation, children }: {
+  presentation?: 'leading' | 'trailing';
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ItemDialog.d.ts.map

package/dist/board/ItemDialog.js

@@ -0,0 +1,140 @@
+import { WARNING_PANEL } from "./RowStyles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/ItemDialog.tsx
+/**
+* The summary under the dialog's title, a row each: `line` (the item's source, repository, status and age), its
+* `parent`, its `kind` and its ticket `actions`.
+*/
+function ItemSummary({ line, parent, kind, actions, ...data }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...data,
+		className: "border-base-300 text-base-700 @container grid shrink-0 gap-1 border-b px-5 pb-3 text-xs sm:px-6",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-2",
+				children: line
+			}),
+			parent,
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: kind
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-start gap-2",
+				children: actions
+			})
+		]
+	});
+}
+/** The summary's status word, in the text colour. */
+function SummaryStatus({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-base-content font-medium",
+		children
+	});
+}
+/** The summary's age, which a narrow dialog leaves out. */
+function SummaryAge({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate @max-[30rem]:hidden",
+		children
+	});
+}
+/** What blocks the item, as a small chip in the danger colours. */
+function SummaryBlocked({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "rounded bg-(--error-surface) px-1.5 text-(--error-foreground)",
+		children
+	});
+}
+/** The item's parent: `prefix` ("Part of"), then its `name`, linked when `href` opens it. */
+function SummaryParent({ prefix, name, href, ...data }) {
+	return /* @__PURE__ */ jsxs("p", {
+		...data,
+		className: "m-0 min-w-0 wrap-anywhere",
+		children: [
+			prefix,
+			" ",
+			href ? /* @__PURE__ */ jsx("a", {
+				href,
+				target: "_blank",
+				rel: "noopener",
+				className: "underline",
+				children: name
+			}) : name
+		]
+	});
+}
+/** A labelled control the summary opens in place, such as Attach a ticket's picker: `label` over it. */
+function SummaryPanel({ label, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		className: "grid gap-1.5 pt-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-base-content text-xs font-medium",
+			children: label
+		}), children]
+	});
+}
+/**
+* The dialog body's column: the progress, notes, meta area, record, description, comments and sidebar, one under the
+* other; when it `fill`s, a column whose description and comments take what the rest leave.
+*/
+function ItemDialogBody({ fill, children, ...data }) {
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		className: `@container gap-3 pt-2 ${fill ? "flex min-h-0 flex-1 flex-col" : "grid grid-cols-[minmax(0,1fr)]"}`,
+		children
+	});
+}
+/**
+* The main column with the sidebar beside it once the dialog is 45rem wide, when there is an `aside`. Filling, the
+* main column's open editor takes the height the rest leaves.
+*/
+function ItemDialogColumns({ aside, fill, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid grid-cols-[minmax(0,1fr)] gap-x-6 gap-y-4 ${aside ? "@min-[45rem]:grid-cols-[minmax(0,1fr)_16rem]" : ""} ${fill ? "min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto]" : aside ? "@min-[45rem]:grid-rows-[auto_1fr]" : ""}`,
+		children
+	});
+}
+/** The sidebar beside the main column, ruled off from it once there is room. */
+function ItemDialogAside({ children }) {
+	return /* @__PURE__ */ jsx("aside", {
+		className: "grid min-w-0 grid-cols-[minmax(0,1fr)] content-start gap-4 @min-[45rem]:col-start-2 @min-[45rem]:row-span-2 @min-[45rem]:row-start-1 @min-[45rem]:border-l @min-[45rem]:border-(--border) @min-[45rem]:pl-6",
+		children
+	});
+}
+/** A warning about the item, such as why it is paused, in the warning panel: `icon` (a status glyph) before it when
+*  given. */
+function WarningNote({ icon, children, ...data }) {
+	if (icon) return /* @__PURE__ */ jsxs("div", {
+		...data,
+		className: `flex items-center gap-3 ${WARNING_PANEL}`,
+		children: [icon, /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 font-medium text-(--warning-foreground)",
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsx("p", {
+		...data,
+		className: `m-0 ${WARNING_PANEL} font-medium text-(--warning-foreground)`,
+		children
+	});
+}
+/** Why the factory can't write to the item's tracker, announced, and the `action` that checks again. */
+function AccessNotice({ message, action }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		children: [/* @__PURE__ */ jsx("p", { children: message }), action]
+	});
+}
+/** A group of the footer's actions: the `leading` ones that move the item, in small text, or the rest at its end. */
+function DialogActions({ presentation = "trailing", children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: presentation === "leading" ? "inline-flex items-center gap-3 text-xs" : "inline-flex items-center gap-1.5",
+		children
+	});
+}
+export { AccessNotice, DialogActions, ItemDialogAside, ItemDialogBody, ItemDialogColumns, ItemSummary, SummaryAge, SummaryBlocked, SummaryPanel, SummaryParent, SummaryStatus, WarningNote };
+
+//# sourceMappingURL=ItemDialog.js.map

package/dist/board/ItemDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemDialog.js","names":[],"sources":["../../src/board/ItemDialog.tsx"],"sourcesContent":["// The frame of Lar Factory's item dialog: the summary under its title, the body's column with the main column and the\n// sidebar beside it, its notes, and the footer's groups of actions.\n\nimport type { ReactNode } from 'react';\n\nimport type { DataAttributes } from './DataAttributes';\nimport { WARNING_PANEL } from './RowStyles';\n\n/**\n * The summary under the dialog's title, a row each: `line` (the item's source, repository, status and age), its\n * `parent`, its `kind` and its ticket `actions`.\n */\nexport function ItemSummary({\n    line,\n    parent,\n    kind,\n    actions,\n    ...data\n}: {\n    line: ReactNode;\n    parent?: ReactNode;\n    kind: ReactNode;\n    actions: ReactNode;\n} & DataAttributes) {\n    return (\n        <div\n            {...data}\n            className=\"border-base-300 text-base-700 @container grid shrink-0 gap-1 border-b px-5 pb-3 text-xs sm:px-6\"\n        >\n            <div className=\"flex min-w-0 flex-wrap items-center gap-2\">{line}</div>\n            {parent}\n            <div className=\"flex flex-wrap items-center gap-2\">{kind}</div>\n            <div className=\"flex flex-wrap items-start gap-2\">{actions}</div>\n        </div>\n    );\n}\n\n/** The summary's status word, in the text colour. */\nexport function SummaryStatus({ children }: { children: ReactNode }) {\n    return <span className=\"text-base-content font-medium\">{children}</span>;\n}\n\n/** The summary's age, which a narrow dialog leaves out. */\nexport function SummaryAge({ children }: { children: ReactNode }) {\n    return <span className=\"min-w-0 truncate @max-[30rem]:hidden\">{children}</span>;\n}\n\n/** What blocks the item, as a small chip in the danger colours. */\nexport function SummaryBlocked({ children }: { children: ReactNode }) {\n    return <span className=\"rounded bg-(--error-surface) px-1.5 text-(--error-foreground)\">{children}</span>;\n}\n\n/** The item's parent: `prefix` (\"Part of\"), then its `name`, linked when `href` opens it. */\nexport function SummaryParent({\n    prefix,\n    name,\n    href,\n    ...data\n}: {\n    prefix: string;\n    name: string;\n    href?: string | undefined;\n} & DataAttributes) {\n    return (\n        <p {...data} className=\"m-0 min-w-0 wrap-anywhere\">\n            {prefix}{' '}\n            {href ? (\n                <a href={href} target=\"_blank\" rel=\"noopener\" className=\"underline\">\n                    {name}\n                </a>\n            ) : (\n                name\n            )}\n        </p>\n    );\n}\n\n/** A labelled control the summary opens in place, such as Attach a ticket's picker: `label` over it. */\nexport function SummaryPanel({ label, children }: { label: string; children: ReactNode }) {\n    return (\n        <section aria-label={label} className=\"grid gap-1.5 pt-1\">\n            <span className=\"text-base-content text-xs font-medium\">{label}</span>\n            {children}\n        </section>\n    );\n}\n\n/**\n * The dialog body's column: the progress, notes, meta area, record, description, comments and sidebar, one under the\n * other; when it `fill`s, a column whose description and comments take what the rest leave.\n */\nexport function ItemDialogBody({ fill, children, ...data }: { fill: boolean; children: ReactNode } & DataAttributes) {\n    return (\n        <div\n            {...data}\n            className={`@container gap-3 pt-2 ${fill ? 'flex min-h-0 flex-1 flex-col' : 'grid grid-cols-[minmax(0,1fr)]'}`}\n        >\n            {children}\n        </div>\n    );\n}\n\n/**\n * The main column with the sidebar beside it once the dialog is 45rem wide, when there is an `aside`. Filling, the\n * main column's open editor takes the height the rest leaves.\n */\nexport function ItemDialogColumns({ aside, fill, children }: { aside: boolean; fill: boolean; children: ReactNode }) {\n    const rows = fill\n        ? 'min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto]'\n        : aside\n          ? '@min-[45rem]:grid-rows-[auto_1fr]'\n          : '';\n\n    return (\n        <div\n            className={`grid grid-cols-[minmax(0,1fr)] gap-x-6 gap-y-4 ${aside ? '@min-[45rem]:grid-cols-[minmax(0,1fr)_16rem]' : ''} ${rows}`}\n        >\n            {children}\n        </div>\n    );\n}\n\n/** The sidebar beside the main column, ruled off from it once there is room. */\nexport function ItemDialogAside({ children }: { children: ReactNode }) {\n    return (\n        <aside className=\"grid min-w-0 grid-cols-[minmax(0,1fr)] content-start gap-4 @min-[45rem]:col-start-2 @min-[45rem]:row-span-2 @min-[45rem]:row-start-1 @min-[45rem]:border-l @min-[45rem]:border-(--border) @min-[45rem]:pl-6\">\n            {children}\n        </aside>\n    );\n}\n\n/** A warning about the item, such as why it is paused, in the warning panel: `icon` (a status glyph) before it when\n *  given. */\nexport function WarningNote({ icon, children, ...data }: { icon?: ReactNode; children: ReactNode } & DataAttributes) {\n    if (icon)\n        return (\n            <div {...data} className={`flex items-center gap-3 ${WARNING_PANEL}`}>\n                {icon}\n                <span className=\"min-w-0 flex-1 font-medium text-(--warning-foreground)\">{children}</span>\n            </div>\n        );\n\n    return (\n        <p {...data} className={`m-0 ${WARNING_PANEL} font-medium text-(--warning-foreground)`}>\n            {children}\n        </p>\n    );\n}\n\n/** Why the factory can't write to the item's tracker, announced, and the `action` that checks again. */\nexport function AccessNotice({ message, action }: { message: string; action: ReactNode }) {\n    return (\n        <div role=\"status\">\n            <p>{message}</p>\n            {action}\n        </div>\n    );\n}\n\n/** A group of the footer's actions: the `leading` ones that move the item, in small text, or the rest at its end. */\nexport function DialogActions({\n    presentation = 'trailing',\n    children,\n}: {\n    presentation?: 'leading' | 'trailing';\n    children: ReactNode;\n}) {\n    return (\n        <span\n            className={\n                presentation === 'leading'\n                    ? 'inline-flex items-center gap-3 text-xs'\n                    : 'inline-flex items-center gap-1.5'\n            }\n        >\n            {children}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,YAAY,EACxB,MACA,QACA,MACA,SACA,GAAG,QAMa;CAChB,OACI,qBAAC,OAAD;EACI,GAAI;EACJ,WAAU;EAFd,UAAA;GAII,oBAAC,OAAD;IAAK,WAAU;IAA6C,UAAA;GAAU,CAAA;GACrE;GACD,oBAAC,OAAD;IAAK,WAAU;IAAqC,UAAA;GAAU,CAAA;GAC9D,oBAAC,OAAD;IAAK,WAAU;IAAoC,UAAA;GAAa,CAAA;EAC/D;;AAEb;;AAGA,SAAgB,cAAc,EAAE,YAAqC;CACjE,OAAO,oBAAC,QAAD;EAAM,WAAU;EAAiC;CAAe,CAAA;AAC3E;;AAGA,SAAgB,WAAW,EAAE,YAAqC;CAC9D,OAAO,oBAAC,QAAD;EAAM,WAAU;EAAwC;CAAe,CAAA;AAClF;;AAGA,SAAgB,eAAe,EAAE,YAAqC;CAClE,OAAO,oBAAC,QAAD;EAAM,WAAU;EAAiE;CAAe,CAAA;AAC3G;;AAGA,SAAgB,cAAc,EAC1B,QACA,MACA,MACA,GAAG,QAKa;CAChB,OACI,qBAAC,KAAD;EAAG,GAAI;EAAM,WAAU;EAAvB,UAAA;GACK;GAAQ;GACR,OACG,oBAAC,KAAD;IAAS;IAAM,QAAO;IAAS,KAAI;IAAW,WAAU;IACnD,UAAA;GACF,CAAA,IAEH;EAEL;;AAEX;;AAGA,SAAgB,aAAa,EAAE,OAAO,YAAoD;CACtF,OACI,qBAAC,WAAD;EAAS,cAAY;EAAO,WAAU;EAAtC,UAAA,CACI,oBAAC,QAAD;GAAM,WAAU;GAAyC,UAAA;EAAY,CAAA,GACpE,QACI;;AAEjB;;;;;AAMA,SAAgB,eAAe,EAAE,MAAM,UAAU,GAAG,QAAiE;CACjH,OACI,oBAAC,OAAD;EACI,GAAI;EACJ,WAAW,yBAAyB,OAAO,iCAAiC;EAE3E;CACA,CAAA;AAEb;;;;;AAMA,SAAgB,kBAAkB,EAAE,OAAO,MAAM,YAAoE;CAOjH,OACI,oBAAC,OAAD;EACI,WAAW,kDAAkD,QAAQ,iDAAiD,GAAG,GARpH,OACP,kDACA,QACE,sCACA;EAMC;CACA,CAAA;AAEb;;AAGA,SAAgB,gBAAgB,EAAE,YAAqC;CACnE,OACI,oBAAC,SAAD;EAAO,WAAU;EACZ;CACE,CAAA;AAEf;;;AAIA,SAAgB,YAAY,EAAE,MAAM,UAAU,GAAG,QAAoE;CACjH,IAAI,MACA,OACI,qBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,2BAA2B;EAArD,UAAA,CACK,MACD,oBAAC,QAAD;GAAM,WAAU;GAA0D;EAAe,CAAA,CACxF;;CAGb,OACI,oBAAC,KAAD;EAAG,GAAI;EAAM,WAAW,OAAO,cAAc;EACxC;CACF,CAAA;AAEX;;AAGA,SAAgB,aAAa,EAAE,SAAS,UAAkD;CACtF,OACI,qBAAC,OAAD;EAAK,MAAK;EAAV,UAAA,CACI,oBAAC,KAAD,EAAA,UAAI,QAAW,CAAA,GACd,MACA;;AAEb;;AAGA,SAAgB,cAAc,EAC1B,eAAe,YACf,YAID;CACC,OACI,oBAAC,QAAD;EACI,WACI,iBAAiB,YACX,2CACA;EAGT;CACC,CAAA;AAEd"}

package/dist/board/ItemParts.d.ts

@@ -0,0 +1,42 @@
+import { DataAttributes } from "./DataAttributes.js";
+import { ReactNode } from "react";
+/** A title with its ticket's reference (`#12`) before it, muted, the way the board lists every item; captured work has
+ *  no reference. */
+export declare function ItemTitle({ reference, title }: {
+  reference?: string | undefined;
+  title: string;
+}): import("react").JSX.Element;
+/** A title with its reference as a link to its ticket in a new tab, or as text when it has no page, as a sentence names
+ *  it. */
+export declare function TitleLink({ reference, title, href }: {
+  reference?: string | undefined;
+  title: string;
+  href?: string | undefined;
+}): import("react").JSX.Element;
+/** A repository as a badge: its project icon and name. */
+export declare function RepoTag({ icon, name }: {
+  icon: ReactNode;
+  name: string;
+}): import("react").JSX.Element;
+/** A repository's project icon and name together, the name truncating: in a row's line, or roomier on the work map,
+ *  where `title` names it in full. `wrap` is roomier still and wraps the name, anywhere if it must, for a line that
+ *  says more than the name, such as an archived item's repository, number and state. */
+export declare function RepoIdentity({ icon, name, title, presentation, ...data }: {
+  icon: ReactNode;
+  name: string;
+  title?: string;
+  presentation?: 'row' | 'map' | 'wrap';
+} & DataAttributes): import("react").JSX.Element;
+/** A tracker's fields for the item (such as Azure's type, state and assignee) as one muted line that truncates, its
+ *  tooltip giving it whole. */
+export declare function ItemFields({ text, ...data }: {
+  text: string;
+} & DataAttributes): import("react").JSX.Element;
+/** Beside a kind badge, in muted text: the kind the ticket says instead, `said`, until someone answers. */
+export declare function KindMarker({ said, label, title, ...data }: {
+  said: string;
+  /** The sentence assistive technology reads. */
+  label: string;
+  title: string;
+} & DataAttributes): import("react").JSX.Element;
+//# sourceMappingURL=ItemParts.d.ts.map

package/dist/board/ItemParts.js

@@ -0,0 +1,82 @@
+import { Badge } from "../display/Badge.js";
+import { ArrowLeftRightIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/board/ItemParts.tsx
+/** A title with its ticket's reference (`#12`) before it, muted, the way the board lists every item; captured work has
+*  no reference. */
+function ItemTitle({ reference, title }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [reference ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "font-normal text-(--muted-foreground) tabular-nums",
+		children: reference
+	}), " "] }) : null, title] });
+}
+/** A title with its reference as a link to its ticket in a new tab, or as text when it has no page, as a sentence names
+*  it. */
+function TitleLink({ reference, title, href }) {
+	const text = /* @__PURE__ */ jsxs(Fragment, { children: [reference ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "ref",
+		children: reference
+	}), " "] }) : null, title] });
+	return href ? /* @__PURE__ */ jsx("a", {
+		className: "title",
+		href,
+		target: "_blank",
+		rel: "noopener",
+		children: text
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "title",
+		children: text
+	});
+}
+/** A repository as a badge: its project icon and name. */
+function RepoTag({ icon, name }) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		className: "gap-1.5",
+		children: [icon, name]
+	});
+}
+const identities = {
+	row: "flex min-w-0 items-center gap-1",
+	map: "inline-flex min-w-0 items-center gap-1.5",
+	wrap: "inline-flex min-w-0 items-center gap-2"
+};
+/** A repository's project icon and name together, the name truncating: in a row's line, or roomier on the work map,
+*  where `title` names it in full. `wrap` is roomier still and wraps the name, anywhere if it must, for a line that
+*  says more than the name, such as an archived item's repository, number and state. */
+function RepoIdentity({ icon, name, title, presentation = "row", ...data }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...data,
+		title,
+		className: identities[presentation],
+		children: [icon, /* @__PURE__ */ jsx("span", {
+			className: presentation === "wrap" ? "min-w-0 wrap-anywhere" : "truncate",
+			children: name
+		})]
+	});
+}
+/** A tracker's fields for the item (such as Azure's type, state and assignee) as one muted line that truncates, its
+*  tooltip giving it whole. */
+function ItemFields({ text, ...data }) {
+	return /* @__PURE__ */ jsx("span", {
+		...data,
+		title: text,
+		className: "block min-w-0 truncate text-xs text-(--muted-foreground)",
+		children: text
+	});
+}
+/** Beside a kind badge, in muted text: the kind the ticket says instead, `said`, until someone answers. */
+function KindMarker({ said, label, title, ...data }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...data,
+		title,
+		"aria-label": label,
+		className: "inline-flex items-center gap-0.5 text-[11px] text-(--muted-foreground)",
+		children: [/* @__PURE__ */ jsx(ArrowLeftRightIcon, {
+			className: "size-2.5",
+			"aria-hidden": "true"
+		}), said]
+	});
+}
+export { ItemFields, ItemTitle, KindMarker, RepoIdentity, RepoTag, TitleLink };
+
+//# sourceMappingURL=ItemParts.js.map

package/dist/board/ItemParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemParts.js","names":[],"sources":["../../src/board/ItemParts.tsx"],"sourcesContent":["// The bits every view of Lar Factory's board draws for a piece of work: its numbered title, title link, repository,\n// tracker fields, kind marker, label chips and planning notes.\n\nimport { ArrowLeftRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { Badge } from '../display/Badge';\nimport type { DataAttributes } from './DataAttributes';\n\n/** A title with its ticket's reference (`#12`) before it, muted, the way the board lists every item; captured work has\n *  no reference. */\nexport function ItemTitle({ reference, title }: { reference?: string | undefined; title: string }) {\n    return (\n        <>\n            {reference ? (\n                <>\n                    <span className=\"font-normal text-(--muted-foreground) tabular-nums\">{reference}</span>{' '}\n                </>\n            ) : null}\n            {title}\n        </>\n    );\n}\n\n/** A title with its reference as a link to its ticket in a new tab, or as text when it has no page, as a sentence names\n *  it. */\nexport function TitleLink({\n    reference,\n    title,\n    href,\n}: {\n    reference?: string | undefined;\n    title: string;\n    href?: string | undefined;\n}) {\n    const text = (\n        <>\n            {reference ? (\n                <>\n                    <span className=\"ref\">{reference}</span>{' '}\n                </>\n            ) : null}\n            {title}\n        </>\n    );\n\n    return href ? (\n        <a className=\"title\" href={href} target=\"_blank\" rel=\"noopener\">\n            {text}\n        </a>\n    ) : (\n        <span className=\"title\">{text}</span>\n    );\n}\n\n/** A repository as a badge: its project icon and name. */\nexport function RepoTag({ icon, name }: { icon: ReactNode; name: string }) {\n    return (\n        <Badge className=\"gap-1.5\">\n            {icon}\n            {name}\n        </Badge>\n    );\n}\n\nconst identities = {\n    row: 'flex min-w-0 items-center gap-1',\n    map: 'inline-flex min-w-0 items-center gap-1.5',\n    wrap: 'inline-flex min-w-0 items-center gap-2',\n} as const;\n\n/** A repository's project icon and name together, the name truncating: in a row's line, or roomier on the work map,\n *  where `title` names it in full. `wrap` is roomier still and wraps the name, anywhere if it must, for a line that\n *  says more than the name, such as an archived item's repository, number and state. */\nexport function RepoIdentity({\n    icon,\n    name,\n    title,\n    presentation = 'row',\n    ...data\n}: {\n    icon: ReactNode;\n    name: string;\n    title?: string;\n    presentation?: 'row' | 'map' | 'wrap';\n} & DataAttributes) {\n    return (\n        <span {...data} title={title} className={identities[presentation]}>\n            {icon}\n            <span className={presentation === 'wrap' ? 'min-w-0 wrap-anywhere' : 'truncate'}>{name}</span>\n        </span>\n    );\n}\n\n/** A tracker's fields for the item (such as Azure's type, state and assignee) as one muted line that truncates, its\n *  tooltip giving it whole. */\nexport function ItemFields({ text, ...data }: { text: string } & DataAttributes) {\n    return (\n        <span {...data} title={text} className=\"block min-w-0 truncate text-xs text-(--muted-foreground)\">\n            {text}\n        </span>\n    );\n}\n\n/** Beside a kind badge, in muted text: the kind the ticket says instead, `said`, until someone answers. */\nexport function KindMarker({\n    said,\n    label,\n    title,\n    ...data\n}: {\n    said: string;\n    /** The sentence assistive technology reads. */\n    label: string;\n    title: string;\n} & DataAttributes) {\n    return (\n        <span\n            {...data}\n            title={title}\n            aria-label={label}\n            className=\"inline-flex items-center gap-0.5 text-[11px] text-(--muted-foreground)\"\n        >\n            <ArrowLeftRightIcon className=\"size-2.5\" aria-hidden=\"true\" />\n            {said}\n        </span>\n    );\n}\n"],"mappings":";;;;;;AAWA,SAAgB,UAAU,EAAE,WAAW,SAA4D;CAC/F,OACI,qBAAA,UAAA,EAAA,UAAA,CACK,YACG,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;EAAM,WAAU;EAAsD,UAAA;CAAgB,CAAA,GAAE,GAC1F,EAAA,CAAA,IACF,MACH,KACH,EAAA,CAAA;AAEV;;;AAIA,SAAgB,UAAU,EACtB,WACA,OACA,QAKD;CACC,MAAM,OACF,qBAAA,UAAA,EAAA,UAAA,CACK,YACG,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;EAAM,WAAU;EAAO,UAAA;CAAgB,CAAA,GAAE,GAC3C,EAAA,CAAA,IACF,MACH,KACH,EAAA,CAAA;CAGN,OAAO,OACH,oBAAC,KAAD;EAAG,WAAU;EAAc;EAAM,QAAO;EAAS,KAAI;EAChD,UAAA;CACF,CAAA,IAEH,oBAAC,QAAD;EAAM,WAAU;EAAS,UAAA;CAAW,CAAA;AAE5C;;AAGA,SAAgB,QAAQ,EAAE,MAAM,QAA2C;CACvE,OACI,qBAAC,OAAD;EAAO,WAAU;EAAjB,UAAA,CACK,MACA,IACE;;AAEf;AAEA,MAAM,aAAa;CACf,KAAK;CACL,KAAK;CACL,MAAM;AACV;;;;AAKA,SAAgB,aAAa,EACzB,MACA,MACA,OACA,eAAe,OACf,GAAG,QAMa;CAChB,OACI,qBAAC,QAAD;EAAM,GAAI;EAAa;EAAO,WAAW,WAAW;EAApD,UAAA,CACK,MACD,oBAAC,QAAD;GAAM,WAAW,iBAAiB,SAAS,0BAA0B;GAAa,UAAA;EAAW,CAAA,CAC3F;;AAEd;;;AAIA,SAAgB,WAAW,EAAE,MAAM,GAAG,QAA2C;CAC7E,OACI,oBAAC,QAAD;EAAM,GAAI;EAAM,OAAO;EAAM,WAAU;EAClC,UAAA;CACC,CAAA;AAEd;;AAGA,SAAgB,WAAW,EACvB,MACA,OACA,OACA,GAAG,QAMa;CAChB,OACI,qBAAC,QAAD;EACI,GAAI;EACG;EACP,cAAY;EACZ,WAAU;EAJd,UAAA,CAMI,oBAAC,oBAAD;GAAoB,WAAU;GAAW,eAAY;EAAQ,CAAA,GAC5D,IACC;;AAEd"}

package/dist/board/ItemProgress.d.ts

@@ -0,0 +1,56 @@
+import { DataAttributes } from "./DataAttributes.js";
+import { SliceProgress } from "./Slices.js";
+import { ReactNode } from "react";
+/** The dialog's progress block: the steps, the parts, the activity and the slices, stacked. */
+export declare function ItemProgressPanel({ children, ...data }: {
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** A count's line over its bar, such as "Slices · 2/3 done": `label` in the text colour, then `children`. */
+export declare function ProgressCount({ label, children }: {
+  label: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The workflow's active steps as a bar: the past ones slim and darker, the upcoming faint, and the current one widest,
+ * named `name` with its step number, in a gradient of `color`, or `bar` (such as its slices) in that gradient's place.
+ * Each step's `label` is what assistive technology reads and its `title` its tooltip.
+ */
+export declare function WorkflowSteps({ steps, at, name, color, bar }: {
+  steps: readonly {
+    title: string;
+    label: string;
+  }[];
+  /** The current step's index. */
+  at: number;
+  name: string;
+  color: string;
+  bar?: ReactNode;
+}): import("react").JSX.Element;
+/** A concept's parts done out of its parts, as a ProgressCount over a bar in the done colour. */
+export declare function PartsProgress({ label, completed, total, children }: {
+  label: string;
+  completed: number;
+  total: number;
+  /** What the count says, such as "4/9 done". */
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The activity under the steps: its track, then its label. */
+export declare function ProgressActivity({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The slices under the steps: their `count` line, a slice `bar` when the steps don't hold it, and a SliceChip each. */
+export declare function SliceChips({ count, bar, children }: {
+  count: ReactNode;
+  bar?: ReactNode;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A slice as a chip: where its ticket is saved, its mark, number, title (muted when done, medium while active) and
+ *  state; `title` names it in full. */
+export declare function SliceChip({ title, source, progress, number, name }: {
+  title: string;
+  source: ReactNode;
+  progress: SliceProgress;
+  number?: number | undefined;
+  name: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ItemProgress.d.ts.map

package/dist/board/ItemProgress.js

@@ -0,0 +1,138 @@
+import { SliceMark } from "./Slices.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/ItemProgress.tsx
+const PAST = "color-mix(in srgb, var(--foreground) 28%, transparent)";
+/** The dialog's progress block: the steps, the parts, the activity and the slices, stacked. */
+function ItemProgressPanel({ children, ...data }) {
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		className: "grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2",
+		children
+	});
+}
+/** A count's line over its bar, such as "Slices · 2/3 done": `label` in the text colour, then `children`. */
+function ProgressCount({ label, children }) {
+	return /* @__PURE__ */ jsxs("p", {
+		className: "m-0 text-xs text-(--muted-foreground)",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-(--foreground)",
+				children: label
+			}),
+			" · ",
+			children
+		]
+	});
+}
+/**
+* The workflow's active steps as a bar: the past ones slim and darker, the upcoming faint, and the current one widest,
+* named `name` with its step number, in a gradient of `color`, or `bar` (such as its slices) in that gradient's place.
+* Each step's `label` is what assistive technology reads and its `title` its tooltip.
+*/
+function WorkflowSteps({ steps, at, name, color, bar }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: "m-0 flex list-none items-end gap-[3px] p-0",
+		"data-steps": true,
+		children: steps.map((step, i) => i !== at ? /* @__PURE__ */ jsx("li", {
+			title: step.title,
+			"aria-label": step.label,
+			className: "h-1.5 min-w-1.5 flex-1 rounded-full",
+			style: { background: i < at ? PAST : "var(--soft)" }
+		}, i) : /* @__PURE__ */ jsxs("li", {
+			title: step.title,
+			"aria-label": step.label,
+			"aria-current": "step",
+			className: "grid min-w-26 flex-[6] gap-1",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-baseline justify-between gap-2 text-xs leading-4",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium",
+					children: name
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "shrink-0 text-(--muted-foreground) tabular-nums",
+					children: [
+						i + 1,
+						"/",
+						steps.length
+					]
+				})]
+			}), bar ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				children: bar
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "h-1.5 rounded-full",
+				style: { background: `linear-gradient(90deg, color-mix(in srgb, ${color} 55%, transparent), ${color})` }
+			})]
+		}, i))
+	});
+}
+/** A concept's parts done out of its parts, as a ProgressCount over a bar in the done colour. */
+function PartsProgress({ label, completed, total, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-1",
+		"data-parts-progress": true,
+		children: [/* @__PURE__ */ jsx(ProgressCount, {
+			label,
+			children
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "h-1.5 overflow-hidden rounded-full bg-(--soft)",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded-full bg-(--st-done)",
+				style: { width: `${total > 0 ? completed / total * 100 : 0}%` }
+			})
+		})]
+	});
+}
+/** The activity under the steps: its track, then its label. */
+function ProgressActivity({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-1",
+		children
+	});
+}
+/** The slices under the steps: their `count` line, a slice `bar` when the steps don't hold it, and a SliceChip each. */
+function SliceChips({ count, bar, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2",
+		"data-slices": true,
+		children: [
+			count,
+			bar && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				children: bar
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "m-0 flex list-none flex-wrap gap-1.5 p-0",
+				children
+			})
+		]
+	});
+}
+/** A slice as a chip: where its ticket is saved, its mark, number, title (muted when done, medium while active) and
+*  state; `title` names it in full. */
+function SliceChip({ title, source, progress, number, name }) {
+	return /* @__PURE__ */ jsxs("li", {
+		title,
+		className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-(--border) bg-(--card) py-0.5 ps-1 pe-2.5 text-xs",
+		children: [
+			source,
+			/* @__PURE__ */ jsx(SliceMark, { progress }),
+			!!number && /* @__PURE__ */ jsxs("span", {
+				className: "shrink-0 text-(--muted-foreground) tabular-nums",
+				children: ["#", number]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: `min-w-0 truncate ${progress === "done" ? "text-(--muted-foreground)" : progress === "active" ? "font-medium" : ""}`,
+				children: name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-[11px] text-(--muted-foreground)",
+				children: progress
+			})
+		]
+	});
+}
+export { ItemProgressPanel, PartsProgress, ProgressActivity, ProgressCount, SliceChip, SliceChips, WorkflowSteps };
+
+//# sourceMappingURL=ItemProgress.js.map

package/dist/board/ItemProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemProgress.js","names":[],"sources":["../../src/board/ItemProgress.tsx"],"sourcesContent":["// The progress at the top of Lar Factory's item dialog: the workflow's steps as a bar, a concept's parts done, and a\n// piece of work's slices as chips under their count.\n\nimport type { ReactNode } from 'react';\n\nimport type { DataAttributes } from './DataAttributes';\nimport type { SliceProgress } from './Slices';\nimport { SliceMark } from './Slices';\n\nconst PAST = 'color-mix(in srgb, var(--foreground) 28%, transparent)';\n\n/** The dialog's progress block: the steps, the parts, the activity and the slices, stacked. */\nexport function ItemProgressPanel({ children, ...data }: { children: ReactNode } & DataAttributes) {\n    return (\n        <div {...data} className=\"grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2\">\n            {children}\n        </div>\n    );\n}\n\n/** A count's line over its bar, such as \"Slices · 2/3 done\": `label` in the text colour, then `children`. */\nexport function ProgressCount({ label, children }: { label: string; children: ReactNode }) {\n    return (\n        <p className=\"m-0 text-xs text-(--muted-foreground)\">\n            <span className=\"font-medium text-(--foreground)\">{label}</span> · {children}\n        </p>\n    );\n}\n\n/**\n * The workflow's active steps as a bar: the past ones slim and darker, the upcoming faint, and the current one widest,\n * named `name` with its step number, in a gradient of `color`, or `bar` (such as its slices) in that gradient's place.\n * Each step's `label` is what assistive technology reads and its `title` its tooltip.\n */\nexport function WorkflowSteps({\n    steps,\n    at,\n    name,\n    color,\n    bar,\n}: {\n    steps: readonly { title: string; label: string }[];\n    /** The current step's index. */\n    at: number;\n    name: string;\n    color: string;\n    bar?: ReactNode;\n}) {\n    return (\n        <ol className=\"m-0 flex list-none items-end gap-[3px] p-0\" data-steps>\n            {steps.map((step, i) =>\n                i !== at ? (\n                    <li\n                        key={i}\n                        title={step.title}\n                        aria-label={step.label}\n                        className=\"h-1.5 min-w-1.5 flex-1 rounded-full\"\n                        style={{ background: i < at ? PAST : 'var(--soft)' }}\n                    />\n                ) : (\n                    <li\n                        key={i}\n                        title={step.title}\n                        aria-label={step.label}\n                        aria-current=\"step\"\n                        className=\"grid min-w-26 flex-[6] gap-1\"\n                    >\n                        <span className=\"flex items-baseline justify-between gap-2 text-xs leading-4\">\n                            <span className=\"truncate font-medium\">{name}</span>\n                            <span className=\"shrink-0 text-(--muted-foreground) tabular-nums\">\n                                {i + 1}/{steps.length}\n                            </span>\n                        </span>\n                        {bar ? (\n                            <div aria-hidden>{bar}</div>\n                        ) : (\n                            <span\n                                className=\"h-1.5 rounded-full\"\n                                style={{\n                                    background: `linear-gradient(90deg, color-mix(in srgb, ${color} 55%, transparent), ${color})`,\n                                }}\n                            />\n                        )}\n                    </li>\n                ),\n            )}\n        </ol>\n    );\n}\n\n/** A concept's parts done out of its parts, as a ProgressCount over a bar in the done colour. */\nexport function PartsProgress({\n    label,\n    completed,\n    total,\n    children,\n}: {\n    label: string;\n    completed: number;\n    total: number;\n    /** What the count says, such as \"4/9 done\". */\n    children: ReactNode;\n}) {\n    return (\n        <div className=\"grid gap-1\" data-parts-progress>\n            <ProgressCount label={label}>{children}</ProgressCount>\n            <div aria-hidden className=\"h-1.5 overflow-hidden rounded-full bg-(--soft)\">\n                <div\n                    className=\"h-full rounded-full bg-(--st-done)\"\n                    style={{ width: `${total > 0 ? (completed / total) * 100 : 0}%` }}\n                />\n            </div>\n        </div>\n    );\n}\n\n/** The activity under the steps: its track, then its label. */\nexport function ProgressActivity({ children }: { children: ReactNode }) {\n    return <div className=\"grid gap-1\">{children}</div>;\n}\n\n/** The slices under the steps: their `count` line, a slice `bar` when the steps don't hold it, and a SliceChip each. */\nexport function SliceChips({ count, bar, children }: { count: ReactNode; bar?: ReactNode; children: ReactNode }) {\n    return (\n        <div className=\"grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2\" data-slices>\n            {count}\n            {bar && <div aria-hidden>{bar}</div>}\n            <ul className=\"m-0 flex list-none flex-wrap gap-1.5 p-0\">{children}</ul>\n        </div>\n    );\n}\n\n/** A slice as a chip: where its ticket is saved, its mark, number, title (muted when done, medium while active) and\n *  state; `title` names it in full. */\nexport function SliceChip({\n    title,\n    source,\n    progress,\n    number,\n    name,\n}: {\n    title: string;\n    source: ReactNode;\n    progress: SliceProgress;\n    number?: number | undefined;\n    name: string;\n}) {\n    return (\n        <li\n            title={title}\n            className=\"inline-flex max-w-full items-center gap-1.5 rounded-full border border-(--border) bg-(--card) py-0.5 ps-1 pe-2.5 text-xs\"\n        >\n            {source}\n            <SliceMark progress={progress} />\n            {!!number && <span className=\"shrink-0 text-(--muted-foreground) tabular-nums\">#{number}</span>}\n            <span\n                className={`min-w-0 truncate ${progress === 'done' ? 'text-(--muted-foreground)' : progress === 'active' ? 'font-medium' : ''}`}\n            >\n                {name}\n            </span>\n            <span className=\"shrink-0 text-[11px] text-(--muted-foreground)\">{progress}</span>\n        </li>\n    );\n}\n"],"mappings":";;;AASA,MAAM,OAAO;;AAGb,SAAgB,kBAAkB,EAAE,UAAU,GAAG,QAAkD;CAC/F,OACI,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAU;EACpB;CACA,CAAA;AAEb;;AAGA,SAAgB,cAAc,EAAE,OAAO,YAAoD;CACvF,OACI,qBAAC,KAAD;EAAG,WAAU;EAAb,UAAA;GACI,oBAAC,QAAD;IAAM,WAAU;IAAmC,UAAA;GAAY,CAAA;GAAC;GAAI;EACrE;;AAEX;;;;;;AAOA,SAAgB,cAAc,EAC1B,OACA,IACA,MACA,OACA,OAQD;CACC,OACI,oBAAC,MAAD;EAAI,WAAU;EAA6C,cAAA;EACtD,UAAA,MAAM,KAAK,MAAM,MACd,MAAM,KACF,oBAAC,MAAD;GAEI,OAAO,KAAK;GACZ,cAAY,KAAK;GACjB,WAAU;GACV,OAAO,EAAE,YAAY,IAAI,KAAK,OAAO,cAAc;EACtD,GALQ,CAKR,IAED,qBAAC,MAAD;GAEI,OAAO,KAAK;GACZ,cAAY,KAAK;GACjB,gBAAa;GACb,WAAU;GALd,UAAA,CAOI,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACI,oBAAC,QAAD;KAAM,WAAU;KAAwB,UAAA;IAAW,CAAA,GACnD,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACK,IAAI;MAAE;MAAE,MAAM;KACb;IACJ,CAAA,CAAA;GACL,CAAA,GAAA,MACG,oBAAC,OAAD;IAAK,eAAA;IAAa,UAAA;GAAS,CAAA,IAE3B,oBAAC,QAAD;IACI,WAAU;IACV,OAAO,EACH,YAAY,6CAA6C,MAAM,sBAAsB,MAAM,GAC/F;GACH,CAAA,CAEL;EAtBK,GAAA,CAsBL,CAEZ;CACA,CAAA;AAEZ;;AAGA,SAAgB,cAAc,EAC1B,OACA,WACA,OACA,YAOD;CACC,OACI,qBAAC,OAAD;EAAK,WAAU;EAAa,uBAAA;EAA5B,UAAA,CACI,oBAAC,eAAD;GAAsB;GAAQ;EAAwB,CAAA,GACtD,oBAAC,OAAD;GAAK,eAAA;GAAY,WAAU;GACvB,UAAA,oBAAC,OAAD;IACI,WAAU;IACV,OAAO,EAAE,OAAO,GAAG,QAAQ,IAAK,YAAY,QAAS,MAAM,EAAE,GAAG;GACnE,CAAA;EACA,CAAA,CACJ;;AAEb;;AAGA,SAAgB,iBAAiB,EAAE,YAAqC;CACpE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAc;CAAc,CAAA;AACtD;;AAGA,SAAgB,WAAW,EAAE,OAAO,KAAK,YAAwE;CAC7G,OACI,qBAAC,OAAD;EAAK,WAAU;EAA+C,eAAA;EAA9D,UAAA;GACK;GACA,OAAO,oBAAC,OAAD;IAAK,eAAA;IAAa,UAAA;GAAS,CAAA;GACnC,oBAAC,MAAD;IAAI,WAAU;IAA4C;GAAa,CAAA;EACtE;;AAEb;;;AAIA,SAAgB,UAAU,EACtB,OACA,QACA,UACA,QACA,QAOD;CACC,OACI,qBAAC,MAAD;EACW;EACP,WAAU;EAFd,UAAA;GAIK;GACD,oBAAC,WAAD,EAAqB,SAAW,CAAA;GAC/B,CAAC,CAAC,UAAU,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAAkE,KAAE,MAAa;;GAC9F,oBAAC,QAAD;IACI,WAAW,oBAAoB,aAAa,SAAS,8BAA8B,aAAa,WAAW,gBAAgB;IAE1H,UAAA;GACC,CAAA;GACN,oBAAC,QAAD;IAAM,WAAU;IAAkD,UAAA;GAAe,CAAA;EACjF;;AAEZ"}

package/dist/board/List.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from "react";
+interface ListButtonProps {
+  label: string;
+  icon: ReactNode;
+  /** How many items are in List; none while the first read could still add some, which shows a loading cue. */
+  count: number | undefined;
+  loadingLabel: string;
+  onOpen: () => void;
+}
+/** The title bar's List button, "List <count>": an App control whose label folds away, for screen readers only, on a
+ *  title bar under 70rem. */
+export declare function ListButton({ label, icon, count, loadingLabel, onOpen }: ListButtonProps): import("react").JSX.Element;
+/** A group in the List's left pane: its icon, its name and how many of its items match; a group still reading shows
+ *  no count. */
+export declare function ListGroupItem({ label, count, icon, active, onPick }: {
+  label: string;
+  count?: number;
+  icon: ReactNode;
+  active: boolean;
+  onPick: () => void;
+}): import("react").JSX.Element;
+interface ListHeaderProps {
+  /** The search field, and beside it Add item. */
+  search: ReactNode;
+  add: ReactNode;
+  /** The chosen group's name and how many of its items show; no count while it's still reading. */
+  title: string;
+  count?: number;
+  /** After the count: a toggle that scopes the board to the group, and at the right the sort menu. */
+  scope?: ReactNode;
+  sort: ReactNode;
+  filters: ReactNode;
+}
+/** The List's right pane's head: the search with Add item, then the chosen group with its count, scope toggle and sort,
+ *  then the filters. */
+export declare function ListHeader({ search, add, title, count, scope, sort, filters }: ListHeaderProps): import("react").JSX.Element;
+interface ListItemRowProps {
+  /** The item's id, as `data-item`. */
+  item: string;
+  /** Its title in full, for the tooltip. */
+  name: string;
+  onOpen: () => void;
+  /** Where the item comes from. */
+  source: ReactNode;
+  /** The ticket's reference, such as "#61", before the title; none for an item with no ticket. */
+  reference?: string;
+  title: string;
+  /** The repository's icon, when the list mixes repositories, and the meta line's text: its name and age. */
+  repoIcon?: ReactNode;
+  meta: string;
+  /** After the meta line: the item's kind, labels and sync state. */
+  chips?: ReactNode;
+  /** More under the meta line, such as a work item's fields. */
+  details?: ReactNode;
+}
+/** An item in the List's right pane, opening the item dialog. */
+export declare function ListItemRow({ item, name, onOpen, source, reference, title, repoIcon, meta, chips, details }: ListItemRowProps): import("react").JSX.Element;
+/** What the List says in place of items: nothing matches, nothing in List, or still loading. With `reading`, it
+ *  follows items as more may arrive. */
+export declare function ListNote({ children, reading }: {
+  children: ReactNode;
+  reading?: boolean;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=List.d.ts.map