@lar-works/design-system 0.2.0 → 0.3.0

package/dist/board/BoardTitleBar.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+interface BoardTitleBarProps {
+  /** The lockup on the left, such as BoardBrand. */
+  brand: ReactNode;
+  /** The page's heading, for screen readers only, as the brand is hidden from them. A closing dialog whose opener
+   *  went away can put the focus on it. */
+  heading?: string;
+  /** How the board is doing, in the status strip: the Refreshed time, then the counters after a divider. */
+  refreshed?: ReactNode;
+  counters?: ReactNode;
+  /** The search field, up to 26rem wide beside the actions. */
+  search?: ReactNode;
+  actions: ReactNode;
+  /** In the Mac app, where macOS draws the traffic lights; in a browser, grey stand-ins hold their place. */
+  nativeWindow: boolean;
+  /** Starts the bar past the traffic lights; off while full screen hides them. */
+  pastLights: boolean;
+}
+/**
+ * Lar Factory's title bar, laid out as lar-server's on the design system's TitleBar: the brand and how the board is
+ * doing on the left, the search field and what you can do on the right. The bar drags the window, except on its
+ * controls, and folds by its own width: below 48rem the actions take their own row and the status strip goes.
+ */
+export declare function BoardTitleBar({ brand, heading, refreshed, counters, search, actions, nativeWindow, pastLights }: BoardTitleBarProps): import("react").JSX.Element;
+/** The product's lockup in the title bar: the Lar mark, "ar" and the product's name. Screen readers skip it: the
+ *  page's heading names the page. */
+export declare function BoardBrand({ product }: {
+  product: string;
+}): import("react").JSX.Element;
+/** A divider between groups of the title bar's actions. */
+export declare function TitleBarDivider(): import("react").JSX.Element;
+export type RefreshHealth = 'waiting' | 'live' | 'stale' | 'disconnected';
+interface RefreshIndicatorProps {
+  health: RefreshHealth;
+  /** What the time says, such as "12s" or "Stale · 2m"; hidden on a narrow bar, where the dot speaks alone. */
+  label: ReactNode;
+  /** A count of reads landed while this page was open: each new one pings the dot once, while live. */
+  landed: number;
+  /** The tooltip's two lines: when the board last read, then how it reads or what went wrong. */
+  detail: string;
+  secondaryDetail: string;
+}
+/**
+ * How fresh the board is, in the title bar's status strip: a dot in the health's colour (amber when stale, red while
+ * the page has lost the board server) and the time since the last read, with more in a tooltip. A tab stop, so
+ * keyboard users reach its tooltip.
+ */
+export declare function RefreshIndicator({ health, label, landed, detail, secondaryDetail }: RefreshIndicatorProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=BoardTitleBar.d.ts.map

package/dist/board/BoardTitleBar.js

@@ -0,0 +1,125 @@
+import { BrandMark } from "../display/BrandMark.js";
+import { TitleBar } from "../layout/TitleBar.js";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../overlays/Tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/board/BoardTitleBar.tsx
+/** The window drags from the bar, but never from a control in it. */
+const drag = "[-webkit-app-region:drag] [&_:is(button,a,[tabindex])]:[-webkit-app-region:no-drag]";
+/**
+* Lar Factory's title bar, laid out as lar-server's on the design system's TitleBar: the brand and how the board is
+* doing on the left, the search field and what you can do on the right. The bar drags the window, except on its
+* controls, and folds by its own width: below 48rem the actions take their own row and the status strip goes.
+*/
+function BoardTitleBar({ brand, heading, refreshed, counters, search, actions, nativeWindow, pastLights }) {
+	const status = refreshed || counters;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-native-window": nativeWindow || void 0,
+		className: `title-bar border-base-300 shrink-0 border-b select-none ${pastLights ? "pl-[74px]" : ""} ${drag}`,
+		children: [
+			nativeWindow ? null : /* @__PURE__ */ jsx(TrafficLights, {}),
+			heading ? /* @__PURE__ */ jsx("h1", {
+				className: "sr-only",
+				tabIndex: -1,
+				children: heading
+			}) : null,
+			/* @__PURE__ */ jsx(TitleBar, {
+				brand,
+				title: status || search ? /* @__PURE__ */ jsxs(Fragment, { children: [status ? /* @__PURE__ */ jsxs("div", {
+					className: "status-strip border-base-300 bg-base-200/60 flex shrink-0 items-center gap-0.5 rounded-lg border pr-0.5 pl-1.5",
+					children: [
+						refreshed,
+						refreshed && counters ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "bg-base-300 mx-0.5 h-4 w-px @max-[40rem]:hidden"
+						}) : null,
+						counters
+					]
+				}) : null, search] }) : null,
+				actions
+			})
+		]
+	});
+}
+/** In a browser, the traffic lights' grey stand-ins, 16 px in and centred in the 52 px bar, where macOS draws them. */
+function TrafficLights() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "browser-window-controls pointer-events-none fixed top-0 left-0 z-50 flex h-13 items-center",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "traffic-lights absolute left-4 flex gap-2",
+			"aria-hidden": "true",
+			children: [
+				"close",
+				"minimize",
+				"zoom"
+			].map((light) => /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-(--traffic-stand-in)" }, light))
+		})
+	});
+}
+/** The product's lockup in the title bar: the Lar mark, "ar" and the product's name. Screen readers skip it: the
+*  page's heading names the page. */
+function BoardBrand({ product }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "brand inline-flex shrink-0",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(BrandMark, {
+			label: `Lar ${product}`,
+			product
+		})
+	});
+}
+/** A divider between groups of the title bar's actions. */
+function TitleBarDivider() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "app-divider bg-base-300 mx-1 h-5 w-px shrink-0"
+	});
+}
+const dots = {
+	waiting: "bg-base-500",
+	live: "bg-success",
+	stale: "bg-amber-500",
+	disconnected: "bg-danger"
+};
+/**
+* How fresh the board is, in the title bar's status strip: a dot in the health's colour (amber when stale, red while
+* the page has lost the board server) and the time since the last read, with more in a tooltip. A tab stop, so
+* keyboard users reach its tooltip.
+*/
+function RefreshIndicator({ health, label, landed, detail, secondaryDetail }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("span", {
+			tabIndex: 0,
+			className: "refreshed text-base-700 focus-visible:ring-primary inline-flex h-6 shrink-0 items-center gap-1.5 rounded-sm px-1 text-xs whitespace-nowrap tabular-nums outline-none focus-visible:ring-2 @max-[40rem]:hidden @min-[48rem]:min-w-30",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "relative grid size-2 place-items-center",
+				children: [landed > 0 && health === "live" && /* @__PURE__ */ jsx("span", {
+					"data-ping": true,
+					className: "bg-success absolute size-1.5 rounded-full motion-safe:animate-[refreshed-ping_1.2s_ease-out_forwards]"
+				}, landed), /* @__PURE__ */ jsx("span", {
+					"data-dot": true,
+					className: `size-1.5 rounded-full ${dots[health]}`
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "@max-[48rem]:sr-only",
+				children: label
+			})]
+		})
+	}), /* @__PURE__ */ jsx(TooltipPopup, {
+		side: "bottom",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-line": true,
+				children: detail
+			}), /* @__PURE__ */ jsx("span", {
+				"data-line": true,
+				className: "text-base-700",
+				children: secondaryDetail
+			})]
+		})
+	})] });
+}
+export { BoardBrand, BoardTitleBar, RefreshIndicator, TitleBarDivider };
+
+//# sourceMappingURL=BoardTitleBar.js.map

package/dist/board/BoardTitleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardTitleBar.js","names":[],"sources":["../../src/board/BoardTitleBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { BrandMark } from '../display/BrandMark';\nimport { TitleBar } from '../layout/TitleBar';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '../overlays/Tooltip';\n\n/** The window drags from the bar, but never from a control in it. */\nconst drag = '[-webkit-app-region:drag] [&_:is(button,a,[tabindex])]:[-webkit-app-region:no-drag]';\n\ninterface BoardTitleBarProps {\n    /** The lockup on the left, such as BoardBrand. */\n    brand: ReactNode;\n    /** The page's heading, for screen readers only, as the brand is hidden from them. A closing dialog whose opener\n     *  went away can put the focus on it. */\n    heading?: string;\n    /** How the board is doing, in the status strip: the Refreshed time, then the counters after a divider. */\n    refreshed?: ReactNode;\n    counters?: ReactNode;\n    /** The search field, up to 26rem wide beside the actions. */\n    search?: ReactNode;\n    actions: ReactNode;\n    /** In the Mac app, where macOS draws the traffic lights; in a browser, grey stand-ins hold their place. */\n    nativeWindow: boolean;\n    /** Starts the bar past the traffic lights; off while full screen hides them. */\n    pastLights: boolean;\n}\n\n/**\n * Lar Factory's title bar, laid out as lar-server's on the design system's TitleBar: the brand and how the board is\n * doing on the left, the search field and what you can do on the right. The bar drags the window, except on its\n * controls, and folds by its own width: below 48rem the actions take their own row and the status strip goes.\n */\nexport function BoardTitleBar({\n    brand,\n    heading,\n    refreshed,\n    counters,\n    search,\n    actions,\n    nativeWindow,\n    pastLights,\n}: BoardTitleBarProps) {\n    const status = refreshed || counters;\n\n    return (\n        <div\n            data-native-window={nativeWindow || undefined}\n            className={`title-bar border-base-300 shrink-0 border-b select-none ${pastLights ? 'pl-[74px]' : ''} ${drag}`}\n        >\n            {nativeWindow ? null : <TrafficLights />}\n            {heading ? (\n                <h1 className=\"sr-only\" tabIndex={-1}>\n                    {heading}\n                </h1>\n            ) : null}\n            <TitleBar\n                brand={brand}\n                title={\n                    status || search ? (\n                        <>\n                            {status ? (\n                                <div className=\"status-strip border-base-300 bg-base-200/60 flex shrink-0 items-center gap-0.5 rounded-lg border pr-0.5 pl-1.5\">\n                                    {refreshed}\n                                    {refreshed && counters ? (\n                                        <span\n                                            aria-hidden=\"true\"\n                                            className=\"bg-base-300 mx-0.5 h-4 w-px @max-[40rem]:hidden\"\n                                        />\n                                    ) : null}\n                                    {counters}\n                                </div>\n                            ) : null}\n                            {search}\n                        </>\n                    ) : null\n                }\n                actions={actions}\n            />\n        </div>\n    );\n}\n\n/** In a browser, the traffic lights' grey stand-ins, 16 px in and centred in the 52 px bar, where macOS draws them. */\nfunction TrafficLights() {\n    return (\n        <div className=\"browser-window-controls pointer-events-none fixed top-0 left-0 z-50 flex h-13 items-center\">\n            <span className=\"traffic-lights absolute left-4 flex gap-2\" aria-hidden=\"true\">\n                {['close', 'minimize', 'zoom'].map((light) => (\n                    <span key={light} className=\"size-3 rounded-full bg-(--traffic-stand-in)\" />\n                ))}\n            </span>\n        </div>\n    );\n}\n\n/** The product's lockup in the title bar: the Lar mark, \"ar\" and the product's name. Screen readers skip it: the\n *  page's heading names the page. */\nexport function BoardBrand({ product }: { product: string }) {\n    return (\n        <span className=\"brand inline-flex shrink-0\" aria-hidden=\"true\">\n            <BrandMark label={`Lar ${product}`} product={product} />\n        </span>\n    );\n}\n\n/** A divider between groups of the title bar's actions. */\nexport function TitleBarDivider() {\n    return <span aria-hidden=\"true\" className=\"app-divider bg-base-300 mx-1 h-5 w-px shrink-0\" />;\n}\n\nexport type RefreshHealth = 'waiting' | 'live' | 'stale' | 'disconnected';\n\nconst dots: Record<RefreshHealth, string> = {\n    waiting: 'bg-base-500',\n    live: 'bg-success',\n    stale: 'bg-amber-500',\n    disconnected: 'bg-danger',\n};\n\ninterface RefreshIndicatorProps {\n    health: RefreshHealth;\n    /** What the time says, such as \"12s\" or \"Stale · 2m\"; hidden on a narrow bar, where the dot speaks alone. */\n    label: ReactNode;\n    /** A count of reads landed while this page was open: each new one pings the dot once, while live. */\n    landed: number;\n    /** The tooltip's two lines: when the board last read, then how it reads or what went wrong. */\n    detail: string;\n    secondaryDetail: string;\n}\n\n/**\n * How fresh the board is, in the title bar's status strip: a dot in the health's colour (amber when stale, red while\n * the page has lost the board server) and the time since the last read, with more in a tooltip. A tab stop, so\n * keyboard users reach its tooltip.\n */\nexport function RefreshIndicator({ health, label, landed, detail, secondaryDetail }: RefreshIndicatorProps) {\n    return (\n        <Tooltip>\n            <TooltipTrigger asChild>\n                <span\n                    tabIndex={0}\n                    className=\"refreshed text-base-700 focus-visible:ring-primary inline-flex h-6 shrink-0 items-center gap-1.5 rounded-sm px-1 text-xs whitespace-nowrap tabular-nums outline-none focus-visible:ring-2 @max-[40rem]:hidden @min-[48rem]:min-w-30\"\n                >\n                    <span className=\"relative grid size-2 place-items-center\">\n                        {landed > 0 && health === 'live' && (\n                            <span\n                                key={landed}\n                                data-ping\n                                className=\"bg-success absolute size-1.5 rounded-full motion-safe:animate-[refreshed-ping_1.2s_ease-out_forwards]\"\n                            />\n                        )}\n                        <span data-dot className={`size-1.5 rounded-full ${dots[health]}`} />\n                    </span>\n                    <span className=\"@max-[48rem]:sr-only\">{label}</span>\n                </span>\n            </TooltipTrigger>\n            <TooltipPopup side=\"bottom\">\n                <span className=\"flex flex-col gap-0.5\">\n                    <span data-line>{detail}</span>\n                    <span data-line className=\"text-base-700\">\n                        {secondaryDetail}\n                    </span>\n                </span>\n            </TooltipPopup>\n        </Tooltip>\n    );\n}\n"],"mappings":";;;;;;AAOA,MAAM,OAAO;;;;;;AAyBb,SAAgB,cAAc,EAC1B,OACA,SACA,WACA,UACA,QACA,SACA,cACA,cACmB;CACnB,MAAM,SAAS,aAAa;CAE5B,OACI,qBAAC,OAAD;EACI,sBAAoB,gBAAgB,KAAA;EACpC,WAAW,2DAA2D,aAAa,cAAc,GAAG,GAAG;EAF3G,UAAA;GAIK,eAAe,OAAO,oBAAC,eAAD,CAAgB,CAAA;GACtC,UACG,oBAAC,MAAD;IAAI,WAAU;IAAU,UAAU;IAC7B,UAAA;GACD,CAAA,IACJ;GACJ,oBAAC,UAAD;IACW;IACP,OACI,UAAU,SACN,qBAAA,UAAA,EAAA,UAAA,CACK,SACG,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACK;MACA,aAAa,WACV,oBAAC,QAAD;OACI,eAAY;OACZ,WAAU;MACb,CAAA,IACD;MACH;KACA;IACL,CAAA,IAAA,MACH,MACH,EAAA,CAAA,IACF;IAEC;GACZ,CAAA;EACA;;AAEb;;AAGA,SAAS,gBAAgB;CACrB,OACI,oBAAC,OAAD;EAAK,WAAU;EACX,UAAA,oBAAC,QAAD;GAAM,WAAU;GAA4C,eAAY;GACnE,UAAA;IAAC;IAAS;IAAY;GAAM,CAAC,CAAC,KAAK,UAChC,oBAAC,QAAD,EAAkB,WAAU,8CAA+C,GAAhE,KAAgE,CAC9E;EACC,CAAA;CACL,CAAA;AAEb;;;AAIA,SAAgB,WAAW,EAAE,WAAgC;CACzD,OACI,oBAAC,QAAD;EAAM,WAAU;EAA6B,eAAY;EACrD,UAAA,oBAAC,WAAD;GAAW,OAAO,OAAO;GAAoB;EAAU,CAAA;CACrD,CAAA;AAEd;;AAGA,SAAgB,kBAAkB;CAC9B,OAAO,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;CAAkD,CAAA;AAChG;AAIA,MAAM,OAAsC;CACxC,SAAS;CACT,MAAM;CACN,OAAO;CACP,cAAc;AAClB;;;;;;AAkBA,SAAgB,iBAAiB,EAAE,QAAQ,OAAO,QAAQ,QAAQ,mBAA0C;CACxG,OACI,qBAAC,SAAD,EAAA,UAAA,CACI,oBAAC,gBAAD;EAAgB,SAAA;EACZ,UAAA,qBAAC,QAAD;GACI,UAAU;GACV,WAAU;GAFd,UAAA,CAII,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACK,SAAS,KAAK,WAAW,UACtB,oBAAC,QAAD;KAEI,aAAA;KACA,WAAU;IACb,GAHQ,MAGR,GAEL,oBAAC,QAAD;KAAM,YAAA;KAAS,WAAW,yBAAyB,KAAK;IAAY,CAAA,CAClE;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAU;IAAwB,UAAA;GAAY,CAAA,CAClD;;CACM,CAAA,GAChB,oBAAC,cAAD;EAAc,MAAK;EACf,UAAA,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACI,oBAAC,QAAD;IAAM,aAAA;IAAW,UAAA;GAAa,CAAA,GAC9B,oBAAC,QAAD;IAAM,aAAA;IAAU,WAAU;IACrB,UAAA;GACC,CAAA,CACJ;;CACI,CAAA,CACT,EAAA,CAAA;AAEjB"}

package/dist/board/ButtonKinds.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Lar Factory's five kinds of button. A Main action, at most one per area, is filled; a Start is tinted, with the play
+ * icon; an Open is outlined, with the thread or pull request icon; an App control has no border and an icon; any Other
+ * button is outlined, with no icon. A dialog or a form is an area of its own, so its submit is its Main action. Every
+ * kind is the compact 28px Button and keeps its look while disabled.
+ */
+export type ButtonKind = 'main' | 'start' | 'open' | 'control' | 'other';
+declare const recipe: {
+  readonly main: 'primary';
+  readonly start: 'tinted';
+  readonly open: 'secondary';
+  readonly control: 'quiet';
+  readonly other: 'secondary';
+};
+/** Props to spread on the design system's Button for a kind: its recipe, the compact size, and `data-kind`, which
+ *  names the kind for tests and the board's sheets. A destructive confirm, such as Reset or Abandon, is its
+ *  area's Main action filled in the danger colour. */
+export declare const buttonKind: <K extends ButtonKind, T extends (K extends 'main' ? 'danger' : never) | undefined = undefined>(kind: K, tone?: T) => {
+  variant: T extends 'danger' ? 'destructive' : (typeof recipe)[K];
+  compact: boolean;
+  'data-kind': K;
+};
+export {};
+//# sourceMappingURL=ButtonKinds.d.ts.map

package/dist/board/ButtonKinds.js

@@ -0,0 +1,19 @@
+// src/board/ButtonKinds.ts
+const recipe = {
+	main: "primary",
+	start: "tinted",
+	open: "secondary",
+	control: "quiet",
+	other: "secondary"
+};
+/** Props to spread on the design system's Button for a kind: its recipe, the compact size, and `data-kind`, which
+*  names the kind for tests and the board's sheets. A destructive confirm, such as Reset or Abandon, is its
+*  area's Main action filled in the danger colour. */
+const buttonKind = (kind, tone) => ({
+	variant: tone ? "destructive" : recipe[kind],
+	compact: true,
+	"data-kind": kind
+});
+export { buttonKind };
+
+//# sourceMappingURL=ButtonKinds.js.map

package/dist/board/ButtonKinds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonKinds.js","names":[],"sources":["../../src/board/ButtonKinds.ts"],"sourcesContent":["import type { ButtonProps } from '../actions/Button';\n\n/**\n * Lar Factory's five kinds of button. A Main action, at most one per area, is filled; a Start is tinted, with the play\n * icon; an Open is outlined, with the thread or pull request icon; an App control has no border and an icon; any Other\n * button is outlined, with no icon. A dialog or a form is an area of its own, so its submit is its Main action. Every\n * kind is the compact 28px Button and keeps its look while disabled.\n */\nexport type ButtonKind = 'main' | 'start' | 'open' | 'control' | 'other';\n\nconst recipe = {\n    main: 'primary',\n    start: 'tinted',\n    open: 'secondary',\n    control: 'quiet',\n    other: 'secondary',\n} as const satisfies Record<ButtonKind, ButtonProps['variant']>;\n\n/** Props to spread on the design system's Button for a kind: its recipe, the compact size, and `data-kind`, which\n *  names the kind for tests and the board's sheets. A destructive confirm, such as Reset or Abandon, is its\n *  area's Main action filled in the danger colour. */\nexport const buttonKind = <\n    K extends ButtonKind,\n    T extends (K extends 'main' ? 'danger' : never) | undefined = undefined,\n>(\n    kind: K,\n    tone?: T,\n) => ({\n    variant: (tone ? 'destructive' : recipe[kind]) as T extends 'danger' ? 'destructive' : (typeof recipe)[K],\n    compact: true,\n    'data-kind': kind,\n});\n"],"mappings":";AAUA,MAAM,SAAS;CACX,MAAM;CACN,OAAO;CACP,MAAM;CACN,SAAS;CACT,OAAO;AACX;;;;AAKA,MAAa,cAIT,MACA,UACE;CACF,SAAU,OAAO,gBAAgB,OAAO;CACxC,SAAS;CACT,aAAa;AACjB"}

package/dist/board/Cleanup.d.ts

@@ -0,0 +1,8 @@
+/** Each branch with the files and commits deleting it would lose, as a nested bulleted list. */
+export declare function LossList({ branches }: {
+  branches: {
+    name: string;
+    losses: string[];
+  }[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=Cleanup.d.ts.map

package/dist/board/Cleanup.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Cleanup.tsx
+/** Each branch with the files and commits deleting it would lose, as a nested bulleted list. */
+function LossList({ branches }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 list-disc ps-5 wrap-anywhere",
+		children: branches.map((branch) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", { children: branch.name }), /* @__PURE__ */ jsx("ul", {
+			className: "m-0 list-disc ps-5",
+			children: branch.losses.map((loss) => /* @__PURE__ */ jsx("li", { children: loss }, loss))
+		})] }, branch.name))
+	});
+}
+export { LossList };
+
+//# sourceMappingURL=Cleanup.js.map

package/dist/board/Cleanup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cleanup.js","names":[],"sources":["../../src/board/Cleanup.tsx"],"sourcesContent":["// What removing work's old branches and worktrees would lose, in a confirmation.\n\n/** Each branch with the files and commits deleting it would lose, as a nested bulleted list. */\nexport function LossList({ branches }: { branches: { name: string; losses: string[] }[] }) {\n    return (\n        <ul className=\"m-0 list-disc ps-5 wrap-anywhere\">\n            {branches.map((branch) => (\n                <li key={branch.name}>\n                    <span>{branch.name}</span>\n                    <ul className=\"m-0 list-disc ps-5\">\n                        {branch.losses.map((loss) => (\n                            <li key={loss}>{loss}</li>\n                        ))}\n                    </ul>\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;AAGA,SAAgB,SAAS,EAAE,YAAgE;CACvF,OACI,oBAAC,MAAD;EAAI,WAAU;EACT,UAAA,SAAS,KAAK,WACX,qBAAC,MAAD,EAAA,UAAA,CACI,oBAAC,QAAD,EAAA,UAAO,OAAO,KAAW,CAAA,GACzB,oBAAC,MAAD;GAAI,WAAU;GACT,UAAA,OAAO,OAAO,KAAK,SAChB,oBAAC,MAAD,EAAA,UAAgB,KAAS,GAAhB,IAAgB,CAC5B;EACD,CAAA,CACJ,EAAA,GAPK,OAAO,IAOZ,CACP;CACD,CAAA;AAEZ"}

package/dist/board/Counters.d.ts

@@ -0,0 +1,101 @@
+import { ReactNode } from "react";
+/** The title bar's counters, in its status strip after the Refreshed time. */
+export declare function BoardCounters({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** How wide a counter's value stays from dash or loader to number: a count, a count over a limit, or a spend under
+ *  $1,000 with its plus. */
+declare const valueWidths: {
+  count: string;
+  limit: string;
+  spend: string;
+};
+/** Which counters the title bar's width folds away: Shaping and Shipped below 54rem, then Spend below 66rem. */
+declare const folds: {
+  never: string;
+  medium: string;
+  wide: string;
+};
+interface BoardCounterProps {
+  /** The status's glyph, in its own colour. */
+  icon: ReactNode;
+  value: ReactNode;
+  width?: keyof typeof valueWidths;
+  /** Names the counter for screen readers, with `hint`: "need you: 2 items waiting on your answer". */
+  label: string;
+  /** What the number means, in the tooltip. */
+  hint: string;
+  fold?: keyof typeof folds;
+  /** The panel's head: its title and, at its right, a figure such as the count. */
+  title: string;
+  sub?: ReactNode;
+  /** A note under the panel's list. */
+  foot?: ReactNode;
+  /** The panel's list, which scrolls. */
+  children: ReactNode;
+}
+/** One counter: an App control with a glyph and a tabular value, its tooltip, and the panel it opens, padded as a
+ *  menu, of everything behind the number. */
+export declare function BoardCounter({ icon, value, width, label, hint, fold, title, sub, foot, children }: BoardCounterProps): import("react").JSX.Element;
+/** The divider before the spend counter, which folds with it. */
+export declare function CounterDivider(): import("react").JSX.Element;
+/** A panel's list split by status, each part under its name and count. */
+export declare function CounterGroups({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function CounterGroup({ title, count, children }: {
+  title: string;
+  count: number;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** What a panel says when its list is empty, or what is still loading. */
+export declare function CounterEmpty({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function CounterList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+interface CounterItemProps {
+  /** The item's id, as `data-item`. */
+  item: string;
+  /** The row's accessible name, the item's name. */
+  label: string;
+  /** The item's status glyph and source icon. */
+  leading: ReactNode;
+  title: ReactNode;
+  /** At the right: CounterAge, or a figure such as its spend. */
+  trailing: ReactNode;
+  onOpen: () => void;
+}
+/** One item in a panel, as a menu's row; picking it closes the panel and opens the item. */
+export declare function CounterItem({ item, label, leading, title, trailing, onOpen }: CounterItemProps): import("react").JSX.Element;
+/** A row's repository icon and age. */
+export declare function CounterAge({ icon, age }: {
+  icon: ReactNode;
+  age: string;
+}): import("react").JSX.Element;
+/** A row's figure, such as its spend. */
+export declare function CounterFigure({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A value not known yet, as nothing has been read. */
+export declare function CounterDash(): import("react").JSX.Element;
+/** A count over a limit, such as builds at work over the build limit: "2/3". */
+export declare function CounterOfLimit({ count, limit }: {
+  count: ReactNode;
+  limit: number;
+}): import("react").JSX.Element;
+/** A figure that covers only part of what it sums, marked with a plus: amber while some of it is unavailable, muted
+ *  while some is still loading. */
+export declare function CounterPartial({ figure, unavailable }: {
+  figure: string;
+  unavailable: boolean;
+}): import("react").JSX.Element;
+/** The build limit as bars, then the count over it: one bar per build it allows, filled for each build at work, and
+ *  extra builds past it after a gap. */
+export declare function LimitBars({ used, limit }: {
+  used: number;
+  limit: number;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Counters.d.ts.map

package/dist/board/Counters.js

@@ -0,0 +1,202 @@
+import { Button } from "../actions/Button.js";
+import { Popover } from "../overlays/Popover.js";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../overlays/Tooltip.js";
+import { buttonKind } from "./ButtonKinds.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/board/Counters.tsx
+/** The title bar's counters, in its status strip after the Refreshed time. */
+function BoardCounters({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "counters flex shrink-0 items-center gap-0.5 whitespace-nowrap",
+		children
+	});
+}
+/** How wide a counter's value stays from dash or loader to number: a count, a count over a limit, or a spend under
+*  $1,000 with its plus. */
+const valueWidths = {
+	count: "min-w-[2ch]",
+	limit: "min-w-[4ch]",
+	spend: "min-w-[8ch]"
+};
+/** Which counters the title bar's width folds away: Shaping and Shipped below 54rem, then Spend below 66rem. */
+const folds = {
+	never: "",
+	medium: "hidden @min-[54rem]:inline-flex",
+	wide: "hidden @min-[66rem]:inline-flex"
+};
+/** One counter: an App control with a glyph and a tabular value, its tooltip, and the panel it opens, padded as a
+*  menu, of everything behind the number. */
+function BoardCounter({ icon, value, width = "count", label, hint, fold = "never", title, sub, foot, children }) {
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				...buttonKind("control"),
+				"aria-label": `${label}: ${hint}`,
+				className: `text-base-700 hover:text-base-content data-[state=open]:bg-base-300/60 data-[state=open]:text-base-content min-w-0 gap-1.5 ${folds[fold]}`,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "counter-icon grid size-4 shrink-0 place-items-center [&_svg]:size-4",
+					children: icon
+				}), /* @__PURE__ */ jsx("span", {
+					className: `counter-value text-base-content inline-flex items-center leading-4 font-medium tabular-nums [&_[data-loader]]:w-full [&_[data-loader]]:justify-center [&_svg]:size-3 ${valueWidths[width]}`,
+					children: value
+				})]
+			})
+		})
+	}), /* @__PURE__ */ jsx(TooltipPopup, {
+		side: "bottom",
+		children: hint
+	})] }), /* @__PURE__ */ jsx(Popover.Content, {
+		side: "bottom",
+		align: "end",
+		layout: "fill",
+		presentation: "menu",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "counter-popup flex max-h-112 min-h-0 w-96 max-w-full flex-col",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "counter-head text-base-700 flex h-7 shrink-0 items-center gap-2 px-2 text-xs font-medium",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: title
+					}), sub !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 font-normal tabular-nums",
+						children: sub
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+					children
+				}),
+				foot !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-1 shrink-0 border-t border-(--border) px-2 pt-1.5 pb-1 text-xs text-(--muted-foreground)",
+					children: foot
+				})
+			]
+		})
+	})] });
+}
+/** The divider before the spend counter, which folds with it. */
+function CounterDivider() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "mx-1 hidden h-4 w-px shrink-0 bg-(--border) @min-[66rem]:block"
+	});
+}
+/** A panel's list split by status, each part under its name and count. */
+function CounterGroups({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-1",
+		children
+	});
+}
+function CounterGroup({ title, count, children }) {
+	return /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsxs("h3", {
+		className: "m-0 flex h-7 items-center gap-1 px-2 text-xs font-medium text-(--muted-foreground)",
+		children: [
+			title,
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: count
+			})
+		]
+	}), children] });
+}
+/** What a panel says when its list is empty, or what is still loading. */
+function CounterEmpty({ children }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: "m-0 flex min-h-20 items-center justify-center px-2 py-4 text-center text-xs text-(--muted-foreground)",
+		children
+	});
+}
+function CounterList({ children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 grid list-none grid-cols-[minmax(0,1fr)] gap-px p-0",
+		children
+	});
+}
+/** One item in a panel, as a menu's row; picking it closes the panel and opens the item. */
+function CounterItem({ item, label, leading, title, trailing, onOpen }) {
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Popover.Close, {
+		asChild: true,
+		"aria-label": label,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: onOpen,
+			"data-item": item,
+			className: "text-base-content hover:bg-base-200 focus-visible:bg-base-200 flex min-h-7 w-full cursor-default items-center gap-2 rounded-[0.375rem] px-2 py-1 text-left text-sm outline-none max-lg:min-h-11 pointer-coarse:min-h-11",
+			children: [
+				leading,
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 items-center gap-1.5 text-[11px] text-(--muted-foreground) tabular-nums",
+					children: trailing
+				})
+			]
+		})
+	}) });
+}
+/** A row's repository icon and age. */
+function CounterAge({ icon, age }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsx("span", {
+		className: "min-w-7 text-right whitespace-nowrap",
+		children: age
+	})] });
+}
+/** A row's figure, such as its spend. */
+function CounterFigure({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "font-medium text-(--foreground)",
+		children
+	});
+}
+/** A value not known yet, as nothing has been read. */
+function CounterDash() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "font-normal text-(--muted-foreground)",
+		children: "–"
+	});
+}
+/** A count over a limit, such as builds at work over the build limit: "2/3". */
+function CounterOfLimit({ count, limit }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [count, /* @__PURE__ */ jsxs("span", {
+		className: "font-normal text-(--muted-foreground)",
+		children: ["/", limit]
+	})] });
+}
+/** A figure that covers only part of what it sums, marked with a plus: amber while some of it is unavailable, muted
+*  while some is still loading. */
+function CounterPartial({ figure, unavailable }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [figure, /* @__PURE__ */ jsx("span", {
+		className: `font-normal ${unavailable ? "text-(--you)" : "text-(--muted-foreground)"}`,
+		children: "+"
+	})] });
+}
+/** The build limit as bars, then the count over it: one bar per build it allows, filled for each build at work, and
+*  extra builds past it after a gap. */
+function LimitBars({ used, limit }) {
+	const bar = (n, on) => /* @__PURE__ */ jsx("span", { className: `h-1.5 w-3 rounded-full ${on ? "bg-(--thread)" : "bg-(--border)"}` }, n);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-[3px]",
+				children: [Array.from({ length: limit }, (_, n) => bar(n, n < used)), used > limit && /* @__PURE__ */ jsx("span", {
+					className: "ml-1 inline-flex gap-[3px]",
+					children: Array.from({ length: used - limit }, (_, n) => bar(limit + n, true))
+				})]
+			}),
+			used,
+			"/",
+			limit
+		]
+	});
+}
+export { BoardCounter, BoardCounters, CounterAge, CounterDash, CounterDivider, CounterEmpty, CounterFigure, CounterGroup, CounterGroups, CounterItem, CounterList, CounterOfLimit, CounterPartial, LimitBars };
+
+//# sourceMappingURL=Counters.js.map

package/dist/board/Counters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Counters.js","names":[],"sources":["../../src/board/Counters.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { Popover } from '../overlays/Popover';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '../overlays/Tooltip';\nimport { buttonKind } from './ButtonKinds';\n\n/** The title bar's counters, in its status strip after the Refreshed time. */\nexport function BoardCounters({ children }: { children: ReactNode }) {\n    return <div className=\"counters flex shrink-0 items-center gap-0.5 whitespace-nowrap\">{children}</div>;\n}\n\n/** How wide a counter's value stays from dash or loader to number: a count, a count over a limit, or a spend under\n *  $1,000 with its plus. */\nconst valueWidths = { count: 'min-w-[2ch]', limit: 'min-w-[4ch]', spend: 'min-w-[8ch]' };\n\n/** Which counters the title bar's width folds away: Shaping and Shipped below 54rem, then Spend below 66rem. */\nconst folds = { never: '', medium: 'hidden @min-[54rem]:inline-flex', wide: 'hidden @min-[66rem]:inline-flex' };\n\ninterface BoardCounterProps {\n    /** The status's glyph, in its own colour. */\n    icon: ReactNode;\n    value: ReactNode;\n    width?: keyof typeof valueWidths;\n    /** Names the counter for screen readers, with `hint`: \"need you: 2 items waiting on your answer\". */\n    label: string;\n    /** What the number means, in the tooltip. */\n    hint: string;\n    fold?: keyof typeof folds;\n    /** The panel's head: its title and, at its right, a figure such as the count. */\n    title: string;\n    sub?: ReactNode;\n    /** A note under the panel's list. */\n    foot?: ReactNode;\n    /** The panel's list, which scrolls. */\n    children: ReactNode;\n}\n\n/** One counter: an App control with a glyph and a tabular value, its tooltip, and the panel it opens, padded as a\n *  menu, of everything behind the number. */\nexport function BoardCounter({\n    icon,\n    value,\n    width = 'count',\n    label,\n    hint,\n    fold = 'never',\n    title,\n    sub,\n    foot,\n    children,\n}: BoardCounterProps) {\n    return (\n        <Popover>\n            <Tooltip>\n                <TooltipTrigger asChild>\n                    <Popover.Trigger asChild>\n                        <Button\n                            {...buttonKind('control')}\n                            aria-label={`${label}: ${hint}`}\n                            className={`text-base-700 hover:text-base-content data-[state=open]:bg-base-300/60 data-[state=open]:text-base-content min-w-0 gap-1.5 ${folds[fold]}`}\n                        >\n                            <span className=\"counter-icon grid size-4 shrink-0 place-items-center [&_svg]:size-4\">\n                                {icon}\n                            </span>\n                            <span\n                                className={`counter-value text-base-content inline-flex items-center leading-4 font-medium tabular-nums [&_[data-loader]]:w-full [&_[data-loader]]:justify-center [&_svg]:size-3 ${valueWidths[width]}`}\n                            >\n                                {value}\n                            </span>\n                        </Button>\n                    </Popover.Trigger>\n                </TooltipTrigger>\n                <TooltipPopup side=\"bottom\">{hint}</TooltipPopup>\n            </Tooltip>\n            <Popover.Content side=\"bottom\" align=\"end\" layout=\"fill\" presentation=\"menu\">\n                <div className=\"counter-popup flex max-h-112 min-h-0 w-96 max-w-full flex-col\">\n                    <div className=\"counter-head text-base-700 flex h-7 shrink-0 items-center gap-2 px-2 text-xs font-medium\">\n                        <span className=\"min-w-0 flex-1 truncate\">{title}</span>\n                        {sub !== undefined && <span className=\"shrink-0 font-normal tabular-nums\">{sub}</span>}\n                    </div>\n                    <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">{children}</div>\n                    {foot !== undefined && (\n                        <div className=\"mt-1 shrink-0 border-t border-(--border) px-2 pt-1.5 pb-1 text-xs text-(--muted-foreground)\">\n                            {foot}\n                        </div>\n                    )}\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n\n/** The divider before the spend counter, which folds with it. */\nexport function CounterDivider() {\n    return <span aria-hidden=\"true\" className=\"mx-1 hidden h-4 w-px shrink-0 bg-(--border) @min-[66rem]:block\" />;\n}\n\n/** A panel's list split by status, each part under its name and count. */\nexport function CounterGroups({ children }: { children: ReactNode }) {\n    return <div className=\"grid gap-1\">{children}</div>;\n}\n\nexport function CounterGroup({ title, count, children }: { title: string; count: number; children: ReactNode }) {\n    return (\n        <section>\n            <h3 className=\"m-0 flex h-7 items-center gap-1 px-2 text-xs font-medium text-(--muted-foreground)\">\n                {title} <span className=\"tabular-nums\">{count}</span>\n            </h3>\n            {children}\n        </section>\n    );\n}\n\n/** What a panel says when its list is empty, or what is still loading. */\nexport function CounterEmpty({ children }: { children: ReactNode }) {\n    return (\n        <p className=\"m-0 flex min-h-20 items-center justify-center px-2 py-4 text-center text-xs text-(--muted-foreground)\">\n            {children}\n        </p>\n    );\n}\n\nexport function CounterList({ children }: { children: ReactNode }) {\n    return <ul className=\"m-0 grid list-none grid-cols-[minmax(0,1fr)] gap-px p-0\">{children}</ul>;\n}\n\ninterface CounterItemProps {\n    /** The item's id, as `data-item`. */\n    item: string;\n    /** The row's accessible name, the item's name. */\n    label: string;\n    /** The item's status glyph and source icon. */\n    leading: ReactNode;\n    title: ReactNode;\n    /** At the right: CounterAge, or a figure such as its spend. */\n    trailing: ReactNode;\n    onOpen: () => void;\n}\n\n/** One item in a panel, as a menu's row; picking it closes the panel and opens the item. */\nexport function CounterItem({ item, label, leading, title, trailing, onOpen }: CounterItemProps) {\n    return (\n        <li>\n            <Popover.Close asChild aria-label={label}>\n                <button\n                    type=\"button\"\n                    onClick={onOpen}\n                    data-item={item}\n                    className=\"text-base-content hover:bg-base-200 focus-visible:bg-base-200 flex min-h-7 w-full cursor-default items-center gap-2 rounded-[0.375rem] px-2 py-1 text-left text-sm outline-none max-lg:min-h-11 pointer-coarse:min-h-11\"\n                >\n                    {leading}\n                    <span className=\"min-w-0 flex-1 truncate\">{title}</span>\n                    <span className=\"flex shrink-0 items-center gap-1.5 text-[11px] text-(--muted-foreground) tabular-nums\">\n                        {trailing}\n                    </span>\n                </button>\n            </Popover.Close>\n        </li>\n    );\n}\n\n/** A row's repository icon and age. */\nexport function CounterAge({ icon, age }: { icon: ReactNode; age: string }) {\n    return (\n        <>\n            {icon}\n            <span className=\"min-w-7 text-right whitespace-nowrap\">{age}</span>\n        </>\n    );\n}\n\n/** A row's figure, such as its spend. */\nexport function CounterFigure({ children }: { children: ReactNode }) {\n    return <span className=\"font-medium text-(--foreground)\">{children}</span>;\n}\n\n/** A value not known yet, as nothing has been read. */\nexport function CounterDash() {\n    return <span className=\"font-normal text-(--muted-foreground)\">–</span>;\n}\n\n/** A count over a limit, such as builds at work over the build limit: \"2/3\". */\nexport function CounterOfLimit({ count, limit }: { count: ReactNode; limit: number }) {\n    return (\n        <>\n            {count}\n            <span className=\"font-normal text-(--muted-foreground)\">/{limit}</span>\n        </>\n    );\n}\n\n/** A figure that covers only part of what it sums, marked with a plus: amber while some of it is unavailable, muted\n *  while some is still loading. */\nexport function CounterPartial({ figure, unavailable }: { figure: string; unavailable: boolean }) {\n    return (\n        <>\n            {figure}\n            <span className={`font-normal ${unavailable ? 'text-(--you)' : 'text-(--muted-foreground)'}`}>+</span>\n        </>\n    );\n}\n\n/** The build limit as bars, then the count over it: one bar per build it allows, filled for each build at work, and\n *  extra builds past it after a gap. */\nexport function LimitBars({ used, limit }: { used: number; limit: number }) {\n    const bar = (n: number, on: boolean) => (\n        <span key={n} className={`h-1.5 w-3 rounded-full ${on ? 'bg-(--thread)' : 'bg-(--border)'}`} />\n    );\n\n    return (\n        <span className=\"inline-flex items-center gap-2\">\n            <span className=\"inline-flex items-center gap-[3px]\">\n                {Array.from({ length: limit }, (_, n) => bar(n, n < used))}\n                {used > limit && (\n                    <span className=\"ml-1 inline-flex gap-[3px]\">\n                        {Array.from({ length: used - limit }, (_, n) => bar(limit + n, true))}\n                    </span>\n                )}\n            </span>\n            {used}/{limit}\n        </span>\n    );\n}\n"],"mappings":"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"}

package/dist/board/DataAttributes.d.ts

@@ -0,0 +1,6 @@
+/** The `data-*` attributes a board composition passes on to its root element, which name what it shows for the
+ *  board's tests and keyboard focus (such as `data-item` or `data-stage`). */
+export type DataAttributes = {
+  [name: `data-${string}`]: string | number | boolean | undefined;
+};
+//# sourceMappingURL=DataAttributes.d.ts.map

package/dist/board/Dependencies.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+/** The Dependencies, one DependencyItem each. */
+export declare function DependencyList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** 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`. */
+export declare function DependencyItem({ id, owner, need, read, evidence, notice, action }: {
+  id: string;
+  owner: ReactNode;
+  need: ReactNode;
+  read: ReactNode;
+  evidence: ReactNode;
+  notice?: ReactNode;
+  action: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Dependencies.d.ts.map