@lar-works/design-system 0.2.1 → 0.3.0

package/dist/board/List.js

@@ -0,0 +1,118 @@
+import { Button } from "../actions/Button.js";
+import { Badge } from "../display/Badge.js";
+import { Loading } from "../feedback/Loading.js";
+import { SidebarNavigationItem } from "../layout/sidebar/SidebarNavigationItem.js";
+import { buttonKind } from "./ButtonKinds.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/List.tsx
+/** 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. */
+function ListButton({ label, icon, count, loadingLabel, onOpen }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...buttonKind("control"),
+		className: "list-button px-2",
+		leftIcon: icon,
+		title: label,
+		onClick: onOpen,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "@max-[70rem]:sr-only",
+			children: label
+		}), count === void 0 ? /* @__PURE__ */ jsx(Loading, {
+			presentation: "inline",
+			title: loadingLabel
+		}) : /* @__PURE__ */ jsx(Badge, { children: count })]
+	});
+}
+/** 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. */
+function ListGroupItem({ label, count, icon, active, onPick }) {
+	return /* @__PURE__ */ jsxs(SidebarNavigationItem, {
+		active,
+		onClick: onPick,
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: "name min-w-0 flex-1 truncate text-left",
+				children: label
+			}),
+			count !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "count text-base-700 text-xs tabular-nums",
+				children: count
+			})
+		]
+	});
+}
+/** 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. */
+function ListHeader({ search, add, title, count, scope, sort, filters }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 flex-col gap-2 px-5 sm:px-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 [&>[data-slot=button]]:shrink-0",
+				children: [search, add]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-base-content truncate text-sm font-semibold",
+						children: title
+					}),
+					count !== void 0 && /* @__PURE__ */ jsx(Badge, { children: count }),
+					scope,
+					/* @__PURE__ */ jsx("span", {
+						className: "sort ml-auto",
+						children: sort
+					})
+				]
+			}),
+			filters
+		]
+	});
+}
+/** An item in the List's right pane, opening the item dialog. */
+function ListItemRow({ item, name, onOpen, source, reference, title, repoIcon, meta, chips, details }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onOpen,
+		"data-item": item,
+		title: name,
+		className: "hover:bg-base-200/70 focus-visible:outline-primary flex w-full min-w-0 items-start gap-2 rounded-md px-2 py-1.5 text-left focus-visible:outline-2 focus-visible:-outline-offset-2",
+		children: [source, /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-base-content block truncate text-[13px] leading-5 font-medium",
+					children: [reference ? /* @__PURE__ */ jsxs("span", {
+						className: "text-base-700 font-normal",
+						children: [reference, " "]
+					}) : null, title]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "text-base-700 me-1 flex min-w-0 items-center gap-1 text-[11px] leading-4",
+						children: [repoIcon, /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate tabular-nums",
+							children: meta
+						})]
+					}), chips]
+				}),
+				details
+			]
+		})]
+	});
+}
+/** 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. */
+function ListNote({ children, reading = false }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: `text-base-700 m-0 p-4 text-sm ${reading ? "" : "empty"}`,
+		"data-reading": reading || void 0,
+		children
+	});
+}
+export { ListButton, ListGroupItem, ListHeader, ListItemRow, ListNote };
+
+//# sourceMappingURL=List.js.map

package/dist/board/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":[],"sources":["../../src/board/List.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { Badge } from '../display/Badge';\nimport { Loading } from '../feedback/Loading';\nimport { SidebarNavigationItem } from '../layout/sidebar/SidebarNavigationItem';\nimport { buttonKind } from './ButtonKinds';\n\ninterface ListButtonProps {\n    label: string;\n    icon: ReactNode;\n    /** How many items are in List; none while the first read could still add some, which shows a loading cue. */\n    count: number | undefined;\n    loadingLabel: string;\n    onOpen: () => void;\n}\n\n/** The title bar's List button, \"List <count>\": an App control whose label folds away, for screen readers only, on a\n *  title bar under 70rem. */\nexport function ListButton({ label, icon, count, loadingLabel, onOpen }: ListButtonProps) {\n    return (\n        <Button {...buttonKind('control')} className=\"list-button px-2\" leftIcon={icon} title={label} onClick={onOpen}>\n            <span className=\"@max-[70rem]:sr-only\">{label}</span>\n            {count === undefined ? <Loading presentation=\"inline\" title={loadingLabel} /> : <Badge>{count}</Badge>}\n        </Button>\n    );\n}\n\n/** A group in the List's left pane: its icon, its name and how many of its items match; a group still reading shows\n *  no count. */\nexport function ListGroupItem({\n    label,\n    count,\n    icon,\n    active,\n    onPick,\n}: {\n    label: string;\n    count?: number;\n    icon: ReactNode;\n    active: boolean;\n    onPick: () => void;\n}) {\n    return (\n        <SidebarNavigationItem active={active} onClick={onPick}>\n            {icon}\n            <span className=\"name min-w-0 flex-1 truncate text-left\">{label}</span>\n            {count !== undefined && <span className=\"count text-base-700 text-xs tabular-nums\">{count}</span>}\n        </SidebarNavigationItem>\n    );\n}\n\ninterface ListHeaderProps {\n    /** The search field, and beside it Add item. */\n    search: ReactNode;\n    add: ReactNode;\n    /** The chosen group's name and how many of its items show; no count while it's still reading. */\n    title: string;\n    count?: number;\n    /** After the count: a toggle that scopes the board to the group, and at the right the sort menu. */\n    scope?: ReactNode;\n    sort: ReactNode;\n    filters: ReactNode;\n}\n\n/** The List's right pane's head: the search with Add item, then the chosen group with its count, scope toggle and sort,\n *  then the filters. */\nexport function ListHeader({ search, add, title, count, scope, sort, filters }: ListHeaderProps) {\n    return (\n        <div className=\"flex shrink-0 flex-col gap-2 px-5 sm:px-6\">\n            <div className=\"flex items-center gap-2 [&>[data-slot=button]]:shrink-0\">\n                {search}\n                {add}\n            </div>\n            <div className=\"flex min-w-0 items-center gap-2\">\n                <span className=\"text-base-content truncate text-sm font-semibold\">{title}</span>\n                {count !== undefined && <Badge>{count}</Badge>}\n                {scope}\n                <span className=\"sort ml-auto\">{sort}</span>\n            </div>\n            {filters}\n        </div>\n    );\n}\n\ninterface ListItemRowProps {\n    /** The item's id, as `data-item`. */\n    item: string;\n    /** Its title in full, for the tooltip. */\n    name: string;\n    onOpen: () => void;\n    /** Where the item comes from. */\n    source: ReactNode;\n    /** The ticket's reference, such as \"#61\", before the title; none for an item with no ticket. */\n    reference?: string;\n    title: string;\n    /** The repository's icon, when the list mixes repositories, and the meta line's text: its name and age. */\n    repoIcon?: ReactNode;\n    meta: string;\n    /** After the meta line: the item's kind, labels and sync state. */\n    chips?: ReactNode;\n    /** More under the meta line, such as a work item's fields. */\n    details?: ReactNode;\n}\n\n/** An item in the List's right pane, opening the item dialog. */\nexport function ListItemRow({\n    item,\n    name,\n    onOpen,\n    source,\n    reference,\n    title,\n    repoIcon,\n    meta,\n    chips,\n    details,\n}: ListItemRowProps) {\n    return (\n        <button\n            type=\"button\"\n            onClick={onOpen}\n            data-item={item}\n            title={name}\n            className=\"hover:bg-base-200/70 focus-visible:outline-primary flex w-full min-w-0 items-start gap-2 rounded-md px-2 py-1.5 text-left focus-visible:outline-2 focus-visible:-outline-offset-2\"\n        >\n            {source}\n            <span className=\"min-w-0 flex-1\">\n                <span className=\"text-base-content block truncate text-[13px] leading-5 font-medium\">\n                    {reference ? <span className=\"text-base-700 font-normal\">{reference} </span> : null}\n                    {title}\n                </span>\n                <span className=\"flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1\">\n                    <span className=\"text-base-700 me-1 flex min-w-0 items-center gap-1 text-[11px] leading-4\">\n                        {repoIcon}\n                        <span className=\"min-w-0 truncate tabular-nums\">{meta}</span>\n                    </span>\n                    {chips}\n                </span>\n                {details}\n            </span>\n        </button>\n    );\n}\n\n/** What the List says in place of items: nothing matches, nothing in List, or still loading. With `reading`, it\n *  follows items as more may arrive. */\nexport function ListNote({ children, reading = false }: { children: ReactNode; reading?: boolean }) {\n    return (\n        <p className={`text-base-700 m-0 p-4 text-sm ${reading ? '' : 'empty'}`} data-reading={reading || undefined}>\n            {children}\n        </p>\n    );\n}\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,WAAW,EAAE,OAAO,MAAM,OAAO,cAAc,UAA2B;CACtF,OACI,qBAAC,QAAD;EAAQ,GAAI,WAAW,SAAS;EAAG,WAAU;EAAmB,UAAU;EAAM,OAAO;EAAO,SAAS;EAAvG,UAAA,CACI,oBAAC,QAAD;GAAM,WAAU;GAAwB,UAAA;EAAY,CAAA,GACnD,UAAU,KAAA,IAAY,oBAAC,SAAD;GAAS,cAAa;GAAS,OAAO;EAAe,CAAA,IAAI,oBAAC,OAAD,EAAA,UAAQ,MAAa,CAAA,CACjG;;AAEhB;;;AAIA,SAAgB,cAAc,EAC1B,OACA,OACA,MACA,QACA,UAOD;CACC,OACI,qBAAC,uBAAD;EAA+B;EAAQ,SAAS;EAAhD,UAAA;GACK;GACD,oBAAC,QAAD;IAAM,WAAU;IAA0C,UAAA;GAAY,CAAA;GACrE,UAAU,KAAA,KAAa,oBAAC,QAAD;IAAM,WAAU;IAA4C,UAAA;GAAY,CAAA;EAC7E;;AAE/B;;;AAiBA,SAAgB,WAAW,EAAE,QAAQ,KAAK,OAAO,OAAO,OAAO,MAAM,WAA4B;CAC7F,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACK,QACA,GACA;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,oBAAC,QAAD;MAAM,WAAU;MAAoD,UAAA;KAAY,CAAA;KAC/E,UAAU,KAAA,KAAa,oBAAC,OAAD,EAAA,UAAQ,MAAa,CAAA;KAC5C;KACD,oBAAC,QAAD;MAAM,WAAU;MAAgB,UAAA;KAAW,CAAA;IAC1C;;GACJ;EACA;;AAEb;;AAuBA,SAAgB,YAAY,EACxB,MACA,MACA,QACA,QACA,WACA,OACA,UACA,MACA,OACA,WACiB;CACjB,OACI,qBAAC,UAAD;EACI,MAAK;EACL,SAAS;EACT,aAAW;EACX,OAAO;EACP,WAAU;EALd,UAAA,CAOK,QACD,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACI,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACK,YAAY,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CAA6C,WAAU,GAAO;KAAI,CAAA,IAAA,MAC9E,KACC;;IACN,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACI,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACK,UACD,oBAAC,QAAD;OAAM,WAAU;OAAiC,UAAA;MAAW,CAAA,CAC1D;KACL,CAAA,GAAA,KACC;;IACL;GACC;EACF,CAAA,CAAA;;AAEhB;;;AAIA,SAAgB,SAAS,EAAE,UAAU,UAAU,SAAqD;CAChG,OACI,oBAAC,KAAD;EAAG,WAAW,iCAAiC,UAAU,KAAK;EAAW,gBAAc,WAAW,KAAA;EAC7F;CACF,CAAA;AAEX"}

package/dist/board/LoadingScreen.d.ts

@@ -0,0 +1,38 @@
+/** The Lar mark's paths on its viewBox, drawn in the order the screen animates them. */
+export interface LoadingMark {
+  viewBox: string;
+  /** The block, which springs in first, in the brand's block colour. */
+  block: string;
+  blockColor: string;
+  /** The L's centre line, which a stroke `bar` wide traces around the block. */
+  centreLine: string;
+  bar: number;
+  /** The filled L, which stands in for the trace once it is drawn. */
+  l: string;
+}
+/** A line of the screen's step text; a new `id` rolls it in. */
+export interface LoadingLine {
+  id: number;
+  text: string;
+}
+interface LoadingScreenProps {
+  mark: LoadingMark;
+  /** The product's name after the lockup's "ar", such as "Factory". */
+  product: string;
+  /** Whether the mark is already drawn, as by the desktop's starting page; otherwise it plays its draw. */
+  drawn: boolean;
+  /** Fades the screen out, once. */
+  leaving: boolean;
+  /** The step line, and for a moment after a change the old one rolling out. */
+  line: LoadingLine;
+  leavingLine?: LoadingLine;
+  /** Whether the line rolled in; the first line and every line under reduced motion just show. */
+  rolled: boolean;
+}
+/**
+ * The board's loading screen: the Lar lockup, whose L draws itself around the block, over one line naming the first
+ * read's step. It covers the window, drags it, and fades out once.
+ */
+export declare function LoadingScreen({ mark, product, drawn, leaving, line, leavingLine, rolled }: LoadingScreenProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=LoadingScreen.d.ts.map

package/dist/board/LoadingScreen.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/LoadingScreen.tsx
+/**
+* The board's loading screen: the Lar lockup, whose L draws itself around the block, over one line naming the first
+* read's step. It covers the window, drags it, and fades out once.
+*/
+function LoadingScreen({ mark, product, drawn, leaving, line, leavingLine, rolled }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `loading-screen ${drawn ? "is-drawn" : ""} ${leaving ? "is-leaving" : ""}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "loading-lockup",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "loading-wordmark",
+				children: [
+					/* @__PURE__ */ jsxs("svg", {
+						className: "loading-mark",
+						viewBox: mark.viewBox,
+						"aria-hidden": true,
+						children: [
+							/* @__PURE__ */ jsx("path", {
+								className: "loading-mark-block",
+								d: mark.block,
+								fill: mark.blockColor
+							}),
+							/* @__PURE__ */ jsx("path", {
+								className: "loading-mark-trace",
+								d: mark.centreLine,
+								pathLength: 1,
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: mark.bar,
+								strokeLinecap: "butt",
+								strokeLinejoin: "miter"
+							}),
+							/* @__PURE__ */ jsx("path", {
+								className: "loading-mark-fill",
+								d: mark.l,
+								fill: "currentColor"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "loading-lar",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "loading-lar-slide",
+							children: "ar"
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "loading-factory",
+						children: product
+					})
+				]
+			}), /* @__PURE__ */ jsx("p", {
+				className: "loading-line",
+				role: "status",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "loading-line-slot",
+					children: [leavingLine && /* @__PURE__ */ jsx("span", {
+						className: "loading-roll-out",
+						"aria-hidden": true,
+						children: leavingLine.text
+					}, leavingLine.id), /* @__PURE__ */ jsx("span", {
+						className: rolled ? "loading-roll-in" : void 0,
+						children: line.text
+					}, line.id)]
+				})
+			})]
+		})
+	});
+}
+export { LoadingScreen };
+
+//# sourceMappingURL=LoadingScreen.js.map

package/dist/board/LoadingScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingScreen.js","names":[],"sources":["../../src/board/LoadingScreen.tsx"],"sourcesContent":["/** The Lar mark's paths on its viewBox, drawn in the order the screen animates them. */\nexport interface LoadingMark {\n    viewBox: string;\n    /** The block, which springs in first, in the brand's block colour. */\n    block: string;\n    blockColor: string;\n    /** The L's centre line, which a stroke `bar` wide traces around the block. */\n    centreLine: string;\n    bar: number;\n    /** The filled L, which stands in for the trace once it is drawn. */\n    l: string;\n}\n\n/** A line of the screen's step text; a new `id` rolls it in. */\nexport interface LoadingLine {\n    id: number;\n    text: string;\n}\n\ninterface LoadingScreenProps {\n    mark: LoadingMark;\n    /** The product's name after the lockup's \"ar\", such as \"Factory\". */\n    product: string;\n    /** Whether the mark is already drawn, as by the desktop's starting page; otherwise it plays its draw. */\n    drawn: boolean;\n    /** Fades the screen out, once. */\n    leaving: boolean;\n    /** The step line, and for a moment after a change the old one rolling out. */\n    line: LoadingLine;\n    leavingLine?: LoadingLine;\n    /** Whether the line rolled in; the first line and every line under reduced motion just show. */\n    rolled: boolean;\n}\n\n/**\n * The board's loading screen: the Lar lockup, whose L draws itself around the block, over one line naming the first\n * read's step. It covers the window, drags it, and fades out once.\n */\nexport function LoadingScreen({ mark, product, drawn, leaving, line, leavingLine, rolled }: LoadingScreenProps) {\n    return (\n        <div className={`loading-screen ${drawn ? 'is-drawn' : ''} ${leaving ? 'is-leaving' : ''}`}>\n            <div className=\"loading-lockup\">\n                <div className=\"loading-wordmark\">\n                    <svg className=\"loading-mark\" viewBox={mark.viewBox} aria-hidden>\n                        <path className=\"loading-mark-block\" d={mark.block} fill={mark.blockColor} />\n                        <path\n                            className=\"loading-mark-trace\"\n                            d={mark.centreLine}\n                            pathLength={1}\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeWidth={mark.bar}\n                            strokeLinecap=\"butt\"\n                            strokeLinejoin=\"miter\"\n                        />\n                        <path className=\"loading-mark-fill\" d={mark.l} fill=\"currentColor\" />\n                    </svg>\n                    <span className=\"loading-lar\">\n                        <span className=\"loading-lar-slide\">ar</span>\n                    </span>\n                    <span className=\"loading-factory\">{product}</span>\n                </div>\n                <p className=\"loading-line\" role=\"status\">\n                    <span className=\"loading-line-slot\">\n                        {leavingLine && (\n                            <span key={leavingLine.id} className=\"loading-roll-out\" aria-hidden>\n                                {leavingLine.text}\n                            </span>\n                        )}\n                        <span key={line.id} className={rolled ? 'loading-roll-in' : undefined}>\n                            {line.text}\n                        </span>\n                    </span>\n                </p>\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAsCA,SAAgB,cAAc,EAAE,MAAM,SAAS,OAAO,SAAS,MAAM,aAAa,UAA8B;CAC5G,OACI,oBAAC,OAAD;EAAK,WAAW,kBAAkB,QAAQ,aAAa,GAAG,GAAG,UAAU,eAAe;EAClF,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,qBAAC,OAAD;MAAK,WAAU;MAAe,SAAS,KAAK;MAAS,eAAA;MAArD,UAAA;OACI,oBAAC,QAAD;QAAM,WAAU;QAAqB,GAAG,KAAK;QAAO,MAAM,KAAK;OAAa,CAAA;OAC5E,oBAAC,QAAD;QACI,WAAU;QACV,GAAG,KAAK;QACR,YAAY;QACZ,MAAK;QACL,QAAO;QACP,aAAa,KAAK;QAClB,eAAc;QACd,gBAAe;OAClB,CAAA;OACD,oBAAC,QAAD;QAAM,WAAU;QAAoB,GAAG,KAAK;QAAG,MAAK;OAAgB,CAAA;MACnE;;KACL,oBAAC,QAAD;MAAM,WAAU;MACZ,UAAA,oBAAC,QAAD;OAAM,WAAU;OAAoB,UAAA;MAAQ,CAAA;KAC1C,CAAA;KACN,oBAAC,QAAD;MAAM,WAAU;MAAmB,UAAA;KAAc,CAAA;IAChD;GACL,CAAA,GAAA,oBAAC,KAAD;IAAG,WAAU;IAAe,MAAK;IAC7B,UAAA,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACK,eACG,oBAAC,QAAD;MAA2B,WAAU;MAAmB,eAAA;MACnD,UAAA,YAAY;KACX,GAFK,YAAY,EAEjB,GAEV,oBAAC,QAAD;MAAoB,WAAW,SAAS,oBAAoB,KAAA;MACvD,UAAA,KAAK;KACJ,GAFK,KAAK,EAEV,CACJ;;GACP,CAAA,CACF;;CACJ,CAAA;AAEb"}

package/dist/board/NeedsYou.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+/** The reason a piece of work needs you, in the warning tone, then the `actions` that answer it and any `result`. */
+export declare function NeedsYouNotice({ reason, actions, children }: {
+  reason: ReactNode;
+  actions: ReactNode;
+  /** What the last choice left to say, under the actions. */
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/** What a choice's cleanup left to say, announced. */
+export declare function NeedsYouResult({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=NeedsYou.d.ts.map

package/dist/board/NeedsYou.js

@@ -0,0 +1,31 @@
+import { WARNING_PANEL } from "./RowStyles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/NeedsYou.tsx
+/** The reason a piece of work needs you, in the warning tone, then the `actions` that answer it and any `result`. */
+function NeedsYouNotice({ reason, actions, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `grid gap-2 ${WARNING_PANEL}`,
+		"data-needs-you-reason": true,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "m-0 font-medium text-(--warning-foreground)",
+				children: reason
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex flex-wrap gap-1.5",
+				children: actions
+			}),
+			children
+		]
+	});
+}
+/** What a choice's cleanup left to say, announced. */
+function NeedsYouResult({ children }) {
+	return /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		children
+	});
+}
+export { NeedsYouNotice, NeedsYouResult };
+
+//# sourceMappingURL=NeedsYou.js.map

package/dist/board/NeedsYou.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeedsYou.js","names":[],"sources":["../../src/board/NeedsYou.tsx"],"sourcesContent":["// Why a piece of work waits on the user, in the item dialog: the reason and the choices the board offers for it.\n\nimport type { ReactNode } from 'react';\n\nimport { WARNING_PANEL } from './RowStyles';\n\n/** The reason a piece of work needs you, in the warning tone, then the `actions` that answer it and any `result`. */\nexport function NeedsYouNotice({\n    reason,\n    actions,\n    children,\n}: {\n    reason: ReactNode;\n    actions: ReactNode;\n    /** What the last choice left to say, under the actions. */\n    children?: ReactNode;\n}) {\n    return (\n        <div className={`grid gap-2 ${WARNING_PANEL}`} data-needs-you-reason>\n            <p className=\"m-0 font-medium text-(--warning-foreground)\">{reason}</p>\n            <span className=\"flex flex-wrap gap-1.5\">{actions}</span>\n            {children}\n        </div>\n    );\n}\n\n/** What a choice's cleanup left to say, announced. */\nexport function NeedsYouResult({ children }: { children: ReactNode }) {\n    return <p role=\"alert\">{children}</p>;\n}\n"],"mappings":";;;;AAOA,SAAgB,eAAe,EAC3B,QACA,SACA,YAMD;CACC,OACI,qBAAC,OAAD;EAAK,WAAW,cAAc;EAAiB,yBAAA;EAA/C,UAAA;GACI,oBAAC,KAAD;IAAG,WAAU;IAA+C,UAAA;GAAU,CAAA;GACtE,oBAAC,QAAD;IAAM,WAAU;IAA0B,UAAA;GAAc,CAAA;GACvD;EACA;;AAEb;;AAGA,SAAgB,eAAe,EAAE,YAAqC;CAClE,OAAO,oBAAC,KAAD;EAAG,MAAK;EAAS;CAAY,CAAA;AACxC"}

package/dist/board/Onboarding.d.ts

@@ -0,0 +1,53 @@
+import { DataAttributes } from "./DataAttributes.js";
+import { ReactNode } from "react";
+/** The board's main area while it has nothing to show, such as before its first Project: it scrolls on its own. */
+export declare function EmptyBoard({ children, ...data }: {
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** The cards of Projects still setting up, above the board: at most about a third of its height, then scrolling. */
+export declare function SetupCardList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The setup dialog's place under its title: the Project's `icon` beside the `place` line, over the `progress` bar. */
+export declare function SetupHeader({ icon, place, progress }: {
+  icon?: ReactNode;
+  place: ReactNode;
+  progress: ReactNode;
+}): import("react").JSX.Element;
+/** A setup step's parts, one under the other: close together for a list of `checks`, further apart for a `form`'s
+ *  groups. */
+export declare function SetupStep({ presentation, children, ...data }: {
+  presentation?: 'checks' | 'form';
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/**
+ * A T3 project on one line: its `icon`, its `name` and `badge`, then its `path`, which gives way first, with the
+ * `fullPath` on hover and for screen readers. A long name leaves room for some path beside the badge on a narrow page,
+ * and takes at most half the line from sm up.
+ */
+export declare function ProjectLine({ icon, name, badge, path, fullPath }: {
+  icon: ReactNode;
+  name: string;
+  badge?: string | null | undefined;
+  path: string;
+  fullPath: string;
+}): import("react").JSX.Element;
+/** The choice that adds a folder as a new project: the folder icon, its `title`, then a muted `hint` that gives way. */
+export declare function AddFolderLine({ title, hint }: {
+  title: string;
+  hint: string;
+}): import("react").JSX.Element;
+/** What a choice asks for once picked, such as the folder to add, framed under the choices. */
+export declare function ChoiceDetails({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A list of projects that can't be picked, such as in a framed Disclosure. */
+export declare function ProjectList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A project in a ProjectList, with the `reason` it can't be picked under it, lined up with its name. */
+export declare function ProjectListItem({ reason, children }: {
+  reason?: string | undefined;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Onboarding.d.ts.map

package/dist/board/Onboarding.js

@@ -0,0 +1,122 @@
+import { Badge } from "../display/Badge.js";
+import { FolderPlusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Onboarding.tsx
+/** The board's main area while it has nothing to show, such as before its first Project: it scrolls on its own. */
+function EmptyBoard({ children, ...data }) {
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		className: "min-h-0 flex-1 overflow-y-auto",
+		children
+	});
+}
+/** The cards of Projects still setting up, above the board: at most about a third of its height, then scrolling. */
+function SetupCardList({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid max-h-[35%] shrink-0 gap-2 overflow-y-auto",
+		children
+	});
+}
+/** The setup dialog's place under its title: the Project's `icon` beside the `place` line, over the `progress` bar. */
+function SetupHeader({ icon, place, progress }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid shrink-0 gap-2 px-5 pb-4 sm:px-6",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [icon, place]
+		}), progress]
+	});
+}
+/** A setup step's parts, one under the other: close together for a list of `checks`, further apart for a `form`'s
+*  groups. */
+function SetupStep({ presentation = "checks", children, ...data }) {
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		className: `grid min-w-0 ${presentation === "form" ? "gap-5" : "gap-3"}`,
+		children
+	});
+}
+/**
+* A T3 project on one line: its `icon`, its `name` and `badge`, then its `path`, which gives way first, with the
+* `fullPath` on hover and for screen readers. A long name leaves room for some path beside the badge on a narrow page,
+* and takes at most half the line from sm up.
+*/
+function ProjectLine({ icon, name, badge, path, fullPath }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 items-center gap-2 text-sm",
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				title: name,
+				className: "max-w-[30%] shrink-0 truncate font-medium sm:max-w-1/2",
+				children: name
+			}),
+			badge && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 whitespace-nowrap",
+				children: /* @__PURE__ */ jsx(Badge, { children: badge })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-project-path": true,
+				"aria-hidden": true,
+				title: fullPath,
+				className: "text-base-700 min-w-0 flex-1 truncate text-xs",
+				children: path
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: fullPath
+			})
+		]
+	});
+}
+/** The choice that adds a folder as a new project: the folder icon, its `title`, then a muted `hint` that gives way. */
+function AddFolderLine({ title, hint }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(FolderPlusIcon, {
+				"aria-hidden": true,
+				className: "size-4 shrink-0"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 font-medium wrap-anywhere",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-base-700 min-w-0 flex-1 truncate text-xs",
+				children: hint
+			})
+		]
+	});
+}
+/** What a choice asks for once picked, such as the folder to add, framed under the choices. */
+function ChoiceDetails({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-3 rounded-lg border p-3",
+		children
+	});
+}
+/** A list of projects that can't be picked, such as in a framed Disclosure. */
+function ProjectList({ children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 grid min-w-0 list-none gap-2 p-0",
+		children
+	});
+}
+/** A project in a ProjectList, with the `reason` it can't be picked under it, lined up with its name. */
+function ProjectListItem({ reason, children }) {
+	if (reason === void 0) return /* @__PURE__ */ jsx("li", {
+		className: "flex min-w-0",
+		children
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: "grid min-w-0 gap-0.5",
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "text-base-700 pl-6 text-xs",
+			children: reason
+		})]
+	});
+}
+export { AddFolderLine, ChoiceDetails, EmptyBoard, ProjectLine, ProjectList, ProjectListItem, SetupCardList, SetupHeader, SetupStep };
+
+//# sourceMappingURL=Onboarding.js.map

package/dist/board/Onboarding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Onboarding.js","names":[],"sources":["../../src/board/Onboarding.tsx"],"sourcesContent":["// Lar Factory's onboarding: the empty board's area, the cards of Projects still setting up, the setup dialog's\n// progress and steps, and the T3 projects its first step lists.\n\nimport { FolderPlusIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { Badge } from '../display/Badge';\nimport type { DataAttributes } from './DataAttributes';\n\n/** The board's main area while it has nothing to show, such as before its first Project: it scrolls on its own. */\nexport function EmptyBoard({ children, ...data }: { children: ReactNode } & DataAttributes) {\n    return (\n        <div {...data} className=\"min-h-0 flex-1 overflow-y-auto\">\n            {children}\n        </div>\n    );\n}\n\n/** The cards of Projects still setting up, above the board: at most about a third of its height, then scrolling. */\nexport function SetupCardList({ children }: { children: ReactNode }) {\n    return <div className=\"grid max-h-[35%] shrink-0 gap-2 overflow-y-auto\">{children}</div>;\n}\n\n/** The setup dialog's place under its title: the Project's `icon` beside the `place` line, over the `progress` bar. */\nexport function SetupHeader({ icon, place, progress }: { icon?: ReactNode; place: ReactNode; progress: ReactNode }) {\n    return (\n        <div className=\"grid shrink-0 gap-2 px-5 pb-4 sm:px-6\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n                {icon}\n                {place}\n            </div>\n            {progress}\n        </div>\n    );\n}\n\n/** A setup step's parts, one under the other: close together for a list of `checks`, further apart for a `form`'s\n *  groups. */\nexport function SetupStep({\n    presentation = 'checks',\n    children,\n    ...data\n}: { presentation?: 'checks' | 'form'; children: ReactNode } & DataAttributes) {\n    return (\n        <div {...data} className={`grid min-w-0 ${presentation === 'form' ? 'gap-5' : 'gap-3'}`}>\n            {children}\n        </div>\n    );\n}\n\n/**\n * A T3 project on one line: its `icon`, its `name` and `badge`, then its `path`, which gives way first, with the\n * `fullPath` on hover and for screen readers. A long name leaves room for some path beside the badge on a narrow page,\n * and takes at most half the line from sm up.\n */\nexport function ProjectLine({\n    icon,\n    name,\n    badge,\n    path,\n    fullPath,\n}: {\n    icon: ReactNode;\n    name: string;\n    badge?: string | null | undefined;\n    path: string;\n    fullPath: string;\n}) {\n    return (\n        <span className=\"flex min-w-0 flex-1 items-center gap-2 text-sm\">\n            {icon}\n            <span title={name} className=\"max-w-[30%] shrink-0 truncate font-medium sm:max-w-1/2\">\n                {name}\n            </span>\n            {badge && (\n                <span className=\"shrink-0 whitespace-nowrap\">\n                    <Badge>{badge}</Badge>\n                </span>\n            )}\n            <span\n                data-project-path\n                aria-hidden\n                title={fullPath}\n                className=\"text-base-700 min-w-0 flex-1 truncate text-xs\"\n            >\n                {path}\n            </span>\n            <span className=\"sr-only\">{fullPath}</span>\n        </span>\n    );\n}\n\n/** The choice that adds a folder as a new project: the folder icon, its `title`, then a muted `hint` that gives way. */\nexport function AddFolderLine({ title, hint }: { title: string; hint: string }) {\n    return (\n        <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n            <FolderPlusIcon aria-hidden className=\"size-4 shrink-0\" />\n            <span className=\"min-w-0 font-medium wrap-anywhere\">{title}</span>\n            <span className=\"text-base-700 min-w-0 flex-1 truncate text-xs\">{hint}</span>\n        </span>\n    );\n}\n\n/** What a choice asks for once picked, such as the folder to add, framed under the choices. */\nexport function ChoiceDetails({ children }: { children: ReactNode }) {\n    return <div className=\"grid gap-3 rounded-lg border p-3\">{children}</div>;\n}\n\n/** A list of projects that can't be picked, such as in a framed Disclosure. */\nexport function ProjectList({ children }: { children: ReactNode }) {\n    return <ul className=\"m-0 grid min-w-0 list-none gap-2 p-0\">{children}</ul>;\n}\n\n/** A project in a ProjectList, with the `reason` it can't be picked under it, lined up with its name. */\nexport function ProjectListItem({ reason, children }: { reason?: string | undefined; children: ReactNode }) {\n    if (reason === undefined) return <li className=\"flex min-w-0\">{children}</li>;\n\n    return (\n        <li className=\"grid min-w-0 gap-0.5\">\n            {children}\n            <span className=\"text-base-700 pl-6 text-xs\">{reason}</span>\n        </li>\n    );\n}\n"],"mappings":";;;;;AAUA,SAAgB,WAAW,EAAE,UAAU,GAAG,QAAkD;CACxF,OACI,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAU;EACpB;CACA,CAAA;AAEb;;AAGA,SAAgB,cAAc,EAAE,YAAqC;CACjE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAmD;CAAc,CAAA;AAC3F;;AAGA,SAAgB,YAAY,EAAE,MAAM,OAAO,YAAyE;CAChH,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACK,MACA,KACA;EACJ,CAAA,GAAA,QACA;;AAEb;;;AAIA,SAAgB,UAAU,EACtB,eAAe,UACf,UACA,GAAG,QACwE;CAC3E,OACI,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,gBAAgB,iBAAiB,SAAS,UAAU;EACzE;CACA,CAAA;AAEb;;;;;;AAOA,SAAgB,YAAY,EACxB,MACA,MACA,OACA,MACA,YAOD;CACC,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACK;GACD,oBAAC,QAAD;IAAM,OAAO;IAAM,WAAU;IACxB,UAAA;GACC,CAAA;GACL,SACG,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,OAAD,EAAA,UAAQ,MAAa,CAAA;GACnB,CAAA;GAEV,oBAAC,QAAD;IACI,qBAAA;IACA,eAAA;IACA,OAAO;IACP,WAAU;IAET,UAAA;GACC,CAAA;GACN,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAe,CAAA;EACxC;;AAEd;;AAGA,SAAgB,cAAc,EAAE,OAAO,QAAyC;CAC5E,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACI,oBAAC,gBAAD;IAAgB,eAAA;IAAY,WAAU;GAAmB,CAAA;GACzD,oBAAC,QAAD;IAAM,WAAU;IAAqC,UAAA;GAAY,CAAA;GACjE,oBAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAW,CAAA;EAC1E;;AAEd;;AAGA,SAAgB,cAAc,EAAE,YAAqC;CACjE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAoC;CAAc,CAAA;AAC5E;;AAGA,SAAgB,YAAY,EAAE,YAAqC;CAC/D,OAAO,oBAAC,MAAD;EAAI,WAAU;EAAwC;CAAa,CAAA;AAC9E;;AAGA,SAAgB,gBAAgB,EAAE,QAAQ,YAAkE;CACxG,IAAI,WAAW,KAAA,GAAW,OAAO,oBAAC,MAAD;EAAI,WAAU;EAAgB;CAAa,CAAA;CAE5E,OACI,qBAAC,MAAD;EAAI,WAAU;EAAd,UAAA,CACK,UACD,oBAAC,QAAD;GAAM,WAAU;GAA8B,UAAA;EAAa,CAAA,CAC3D;;AAEZ"}

package/dist/board/PartsList.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from "react";
+declare const KIND_ICON: {
+  readonly grill: import("lucide-react").LucideIcon;
+  readonly prototype: import("lucide-react").LucideIcon;
+  readonly research: import("lucide-react").LucideIcon;
+  readonly task: import("lucide-react").LucideIcon;
+  readonly decision: import("lucide-react").LucideIcon;
+  readonly build: import("lucide-react").LucideIcon;
+};
+/** What a dossier's part is: a decision's method, or a build. */
+export type PartKind = keyof typeof KIND_ICON;
+/** A part's method or kind with its icon, in the one place and style every dossier surface shows it. */
+export declare function PartKindLabel({ kind, children }: {
+  kind: PartKind;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The parts, in two columns where there's room, then `showDone`, the button that unfolds the done ones. */
+export declare function PartsList({ showDone, children }: {
+  showDone?: ReactNode;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The button under the parts that shows or hides the done ones. */
+export declare function ShowDoneToggle({ open, onToggle, children }: {
+  open: boolean;
+  onToggle: () => void;
+  children: string;
+}): import("react").JSX.Element;
+/**
+ * A part: one button opens its item from its `name` and `meta` (kind, repository, track, status), what it asks next
+ * (`action`) sits beside that button, then its `second` line (a RowSecondLine) and any `foot`, its start's message or
+ * error, under that.
+ */
+export declare function PartRow({ id, picked, title, onOpen, name, meta, action, second, foot }: {
+  id: string;
+  picked: boolean;
+  title: string;
+  onOpen: () => void;
+  name: ReactNode;
+  meta: ReactNode;
+  action: ReactNode;
+  second?: ReactNode;
+  foot?: ReactNode;
+}): import("react").JSX.Element;
+/** A part's stage track in its meta line, at a fixed width so the tracks line up. */
+export declare function PartTrack({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** What a part waits on, beside its action, truncating. */
+export declare function PartWaits({ children }: {
+  children: string;
+}): import("react").JSX.Element;
+/** A part's thread in its second line: its glyph, `name` and `state`; `title` names it in full. */
+export declare function ThreadLine({ glyph, name, state, title }: {
+  glyph: ReactNode;
+  name: string;
+  state: string;
+  title?: string | undefined;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PartsList.d.ts.map