@lar-works/design-system 0.2.0 → 0.3.0

package/dist/board/PartsList.js

@@ -0,0 +1,115 @@
+import { ROW_OPENS, pickedRow } from "./RowStyles.js";
+import { BookOpenIcon, HammerIcon, ListChecksIcon, MessagesSquareIcon, ShapesIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/PartsList.tsx
+const KIND_ICON = {
+	grill: MessagesSquareIcon,
+	prototype: ShapesIcon,
+	research: BookOpenIcon,
+	task: ListChecksIcon,
+	decision: MessagesSquareIcon,
+	build: HammerIcon
+};
+/** A part's method or kind with its icon, in the one place and style every dossier surface shows it. */
+function PartKindLabel({ kind, children }) {
+	const Icon = KIND_ICON[kind];
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex shrink-0 items-center gap-1.5 text-[11px] text-(--muted-foreground)",
+		"data-part-kind": true,
+		children: [/* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0" }), children]
+	});
+}
+/** The parts, in two columns where there's room, then `showDone`, the button that unfolds the done ones. */
+function PartsList({ showDone, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-1",
+		children: [/* @__PURE__ */ jsx("ol", {
+			className: "m-0 grid list-none gap-x-4 gap-y-1 p-0 @4xl:grid-cols-2",
+			"data-parts-list": true,
+			children
+		}), showDone]
+	});
+}
+/** The button under the parts that shows or hides the done ones. */
+function ShowDoneToggle({ open, onToggle, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-expanded": open,
+		onClick: onToggle,
+		className: "justify-self-start rounded px-2 py-1 text-[11px] text-(--muted-foreground) hover:bg-(--accent)",
+		children
+	});
+}
+/**
+* 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.
+*/
+function PartRow({ id, picked, title, onOpen, name, meta, action, second, foot }) {
+	return /* @__PURE__ */ jsxs("li", {
+		"data-part": id,
+		className: `@container rounded-md px-3 py-2 hover:bg-(--accent) ${pickedRow(picked)}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-x-3",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"data-row-open": true,
+					onClick: onOpen,
+					title,
+					className: `grid min-w-0 flex-1 gap-y-1 rounded text-left ${ROW_OPENS}`,
+					children: [name, /* @__PURE__ */ jsx("span", {
+						className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 pl-5 text-xs text-(--muted-foreground)",
+						"data-part-meta": true,
+						children: meta
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					"data-part-action": true,
+					className: "flex min-h-7 shrink-0 items-center justify-end gap-2 text-xs text-(--muted-foreground)",
+					children: action
+				})]
+			}),
+			second,
+			foot && /* @__PURE__ */ jsx("span", {
+				className: "block pt-1 pl-5 empty:hidden",
+				children: foot
+			})
+		]
+	});
+}
+/** A part's stage track in its meta line, at a fixed width so the tracks line up. */
+function PartTrack({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "w-28 shrink-0",
+		children
+	});
+}
+/** What a part waits on, beside its action, truncating. */
+function PartWaits({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "max-w-48 truncate",
+		title: children,
+		children
+	});
+}
+/** A part's thread in its second line: its glyph, `name` and `state`; `title` names it in full. */
+function ThreadLine({ glyph, name, state, title }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-center gap-1.5",
+		title,
+		children: [
+			glyph,
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: name
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "shrink-0",
+				children: ["· ", state]
+			})
+		]
+	});
+}
+export { PartKindLabel, PartRow, PartTrack, PartWaits, PartsList, ShowDoneToggle, ThreadLine };
+
+//# sourceMappingURL=PartsList.js.map

package/dist/board/PartsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartsList.js","names":[],"sources":["../../src/board/PartsList.tsx"],"sourcesContent":["// An expanded dossier's parts list: each part with what it asks next, its stage track, figures, thread and slices, the\n// done parts folded away; and a part's kind as every surface of the dossier names it.\n\nimport { BookOpenIcon, HammerIcon, ListChecksIcon, MessagesSquareIcon, ShapesIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { pickedRow, ROW_OPENS } from './RowStyles';\n\nconst KIND_ICON = {\n    grill: MessagesSquareIcon,\n    prototype: ShapesIcon,\n    research: BookOpenIcon,\n    task: ListChecksIcon,\n    decision: MessagesSquareIcon,\n    build: HammerIcon,\n} as const;\n\n/** What a dossier's part is: a decision's method, or a build. */\nexport type PartKind = keyof typeof KIND_ICON;\n\n/** A part's method or kind with its icon, in the one place and style every dossier surface shows it. */\nexport function PartKindLabel({ kind, children }: { kind: PartKind; children: ReactNode }) {\n    const Icon = KIND_ICON[kind];\n\n    return (\n        <span\n            className=\"inline-flex shrink-0 items-center gap-1.5 text-[11px] text-(--muted-foreground)\"\n            data-part-kind\n        >\n            <Icon className=\"size-3.5 shrink-0\" />\n            {children}\n        </span>\n    );\n}\n\n/** The parts, in two columns where there's room, then `showDone`, the button that unfolds the done ones. */\nexport function PartsList({ showDone, children }: { showDone?: ReactNode; children: ReactNode }) {\n    return (\n        <div className=\"grid gap-1\">\n            <ol className=\"m-0 grid list-none gap-x-4 gap-y-1 p-0 @4xl:grid-cols-2\" data-parts-list>\n                {children}\n            </ol>\n            {showDone}\n        </div>\n    );\n}\n\n/** The button under the parts that shows or hides the done ones. */\nexport function ShowDoneToggle({\n    open,\n    onToggle,\n    children,\n}: {\n    open: boolean;\n    onToggle: () => void;\n    children: string;\n}) {\n    return (\n        <button\n            type=\"button\"\n            aria-expanded={open}\n            onClick={onToggle}\n            className=\"justify-self-start rounded px-2 py-1 text-[11px] text-(--muted-foreground) hover:bg-(--accent)\"\n        >\n            {children}\n        </button>\n    );\n}\n\n/**\n * A part: one button opens its item from its `name` and `meta` (kind, repository, track, status), what it asks next\n * (`action`) sits beside that button, then its `second` line (a RowSecondLine) and any `foot`, its start's message or\n * error, under that.\n */\nexport function PartRow({\n    id,\n    picked,\n    title,\n    onOpen,\n    name,\n    meta,\n    action,\n    second,\n    foot,\n}: {\n    id: string;\n    picked: boolean;\n    title: string;\n    onOpen: () => void;\n    name: ReactNode;\n    meta: ReactNode;\n    action: ReactNode;\n    second?: ReactNode;\n    foot?: ReactNode;\n}) {\n    return (\n        <li data-part={id} className={`@container rounded-md px-3 py-2 hover:bg-(--accent) ${pickedRow(picked)}`}>\n            <div className=\"flex items-start gap-x-3\">\n                <button\n                    type=\"button\"\n                    data-row-open\n                    onClick={onOpen}\n                    title={title}\n                    className={`grid min-w-0 flex-1 gap-y-1 rounded text-left ${ROW_OPENS}`}\n                >\n                    {name}\n                    <span\n                        className=\"flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 pl-5 text-xs text-(--muted-foreground)\"\n                        data-part-meta\n                    >\n                        {meta}\n                    </span>\n                </button>\n                <span\n                    data-part-action\n                    className=\"flex min-h-7 shrink-0 items-center justify-end gap-2 text-xs text-(--muted-foreground)\"\n                >\n                    {action}\n                </span>\n            </div>\n            {second}\n            {foot && <span className=\"block pt-1 pl-5 empty:hidden\">{foot}</span>}\n        </li>\n    );\n}\n\n/** A part's stage track in its meta line, at a fixed width so the tracks line up. */\nexport function PartTrack({ children }: { children: ReactNode }) {\n    return <span className=\"w-28 shrink-0\">{children}</span>;\n}\n\n/** What a part waits on, beside its action, truncating. */\nexport function PartWaits({ children }: { children: string }) {\n    return (\n        <span className=\"max-w-48 truncate\" title={children}>\n            {children}\n        </span>\n    );\n}\n\n/** A part's thread in its second line: its glyph, `name` and `state`; `title` names it in full. */\nexport function ThreadLine({\n    glyph,\n    name,\n    state,\n    title,\n}: {\n    glyph: ReactNode;\n    name: string;\n    state: string;\n    title?: string | undefined;\n}) {\n    return (\n        <span className=\"flex min-w-0 items-center gap-1.5\" title={title}>\n            {glyph}\n            <span className=\"truncate\">{name}</span>\n            <span className=\"shrink-0\">· {state}</span>\n        </span>\n    );\n}\n"],"mappings":";;;;AAQA,MAAM,YAAY;CACd,OAAO;CACP,WAAW;CACX,UAAU;CACV,MAAM;CACN,UAAU;CACV,OAAO;AACX;;AAMA,SAAgB,cAAc,EAAE,MAAM,YAAqD;CACvF,MAAM,OAAO,UAAU;CAEvB,OACI,qBAAC,QAAD;EACI,WAAU;EACV,kBAAA;EAFJ,UAAA,CAII,oBAAC,MAAD,EAAM,WAAU,oBAAqB,CAAA,GACpC,QACC;;AAEd;;AAGA,SAAgB,UAAU,EAAE,UAAU,YAA2D;CAC7F,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,oBAAC,MAAD;GAAI,WAAU;GAA0D,mBAAA;GACnE;EACD,CAAA,GACH,QACA;;AAEb;;AAGA,SAAgB,eAAe,EAC3B,MACA,UACA,YAKD;CACC,OACI,oBAAC,UAAD;EACI,MAAK;EACL,iBAAe;EACf,SAAS;EACT,WAAU;EAET;CACG,CAAA;AAEhB;;;;;;AAOA,SAAgB,QAAQ,EACpB,IACA,QACA,OACA,QACA,MACA,MACA,QACA,QACA,QAWD;CACC,OACI,qBAAC,MAAD;EAAI,aAAW;EAAI,WAAW,uDAAuD,UAAU,MAAM;EAArG,UAAA;GACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,qBAAC,UAAD;KACI,MAAK;KACL,iBAAA;KACA,SAAS;KACF;KACP,WAAW,iDAAiD;KALhE,UAAA,CAOK,MACD,oBAAC,QAAD;MACI,WAAU;MACV,kBAAA;MAEC,UAAA;KACC,CAAA,CACF;IACR,CAAA,GAAA,oBAAC,QAAD;KACI,oBAAA;KACA,WAAU;KAET,UAAA;IACC,CAAA,CACL;;GACJ;GACA,QAAQ,oBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA;GAAW,CAAA;EACpE;;AAEZ;;AAGA,SAAgB,UAAU,EAAE,YAAqC;CAC7D,OAAO,oBAAC,QAAD;EAAM,WAAU;EAAiB;CAAe,CAAA;AAC3D;;AAGA,SAAgB,UAAU,EAAE,YAAkC;CAC1D,OACI,oBAAC,QAAD;EAAM,WAAU;EAAoB,OAAO;EACtC;CACC,CAAA;AAEd;;AAGA,SAAgB,WAAW,EACvB,OACA,MACA,OACA,SAMD;CACC,OACI,qBAAC,QAAD;EAAM,WAAU;EAA2C;EAA3D,UAAA;GACK;GACD,oBAAC,QAAD;IAAM,WAAU;IAAY,UAAA;GAAW,CAAA;GACvC,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAA2B,MAAG,KAAY;;EACxC;;AAEd"}

package/dist/board/ProjectIcon.d.ts

@@ -0,0 +1,51 @@
+import { DataAttributes } from "./DataAttributes.js";
+/** T3's project icon colours, which tint a lucide icon or a monogram. */
+export type ProjectIconColor = 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
+/** What a project's square shows over its initial: a lucide icon by name, an emoji, up to two characters of a
+ *  monogram, or a favicon at `src`. */
+export type ProjectIconSource = {
+  kind: 'lucide';
+  name: string;
+  color: ProjectIconColor;
+} | {
+  kind: 'emoji';
+  emoji: string;
+} | {
+  kind: 'monogram';
+  text: string;
+  color: ProjectIconColor;
+} | {
+  kind: 'favicon';
+  src: string;
+};
+declare const SIZES: {
+  small: {
+    square: string;
+    emoji: string;
+    monogram: string;
+  };
+  row: {
+    square: string;
+    emoji: string;
+    monogram: string;
+  };
+  medium: {
+    square: string;
+    emoji: string;
+    monogram: string;
+  };
+};
+export type ProjectIconSize = keyof typeof SIZES;
+/**
+ * A project's icon in a square of its `size`: `icon`, or its `name`'s initial on the colour of its `place` among the
+ * board's repositories (muted for a project the board doesn't list), with a favicon or lucide icon laid over the
+ * initial once it has loaded.
+ */
+export declare function ProjectIcon({ icon, name, place, size, ...data }: {
+  icon?: ProjectIconSource | null | undefined;
+  name: string;
+  place?: number | undefined;
+  size: ProjectIconSize;
+} & DataAttributes): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ProjectIcon.d.ts.map

package/dist/board/ProjectIcon.js

@@ -0,0 +1,120 @@
+import { Suspense, lazy, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/ProjectIcon.tsx
+/** The board's palette of repository colours, which the repositories take in their list order. */
+const REPO_TONES = 8;
+const SIZES = {
+	small: {
+		square: "size-3.5 text-[8px]",
+		emoji: "text-[10px]",
+		monogram: "text-[7px]"
+	},
+	row: {
+		square: "size-4 text-[9px]",
+		emoji: "text-xs",
+		monogram: "text-[8px]"
+	},
+	medium: {
+		square: "size-5 text-[10px]",
+		emoji: "text-sm",
+		monogram: "text-[10px]"
+	}
+};
+/** Whole class names, as Tailwind only finds those. */
+const COLORS = {
+	gray: "text-gray-500",
+	red: "text-red-500",
+	orange: "text-orange-500",
+	amber: "text-amber-500",
+	yellow: "text-yellow-500",
+	lime: "text-lime-500",
+	green: "text-green-500",
+	emerald: "text-emerald-500",
+	teal: "text-teal-500",
+	cyan: "text-cyan-500",
+	sky: "text-sky-500",
+	blue: "text-blue-500",
+	indigo: "text-indigo-500",
+	violet: "text-violet-500",
+	purple: "text-purple-500",
+	fuchsia: "text-fuchsia-500",
+	pink: "text-pink-500",
+	rose: "text-rose-500"
+};
+const OVERLAY = "absolute inset-0 size-full bg-base-100";
+/** lucide's name map and its icons are lazy chunks, loaded when first shown. DynamicIcon draws nothing for a name
+*  lucide lacks or an icon that won't load, and a name map that won't load draws nothing here. */
+const LucideIcon = lazy(() => import("../icons/dynamic.js").then((lucide) => ({ default: lucide.DynamicIcon }), () => ({ default: () => null })));
+function Favicon({ src }) {
+	const [loaded, setLoaded] = useState(false);
+	const [failed, setFailed] = useState(false);
+	if (failed) return null;
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt: "",
+		hidden: !loaded,
+		onLoad: () => setLoaded(true),
+		onError: () => setFailed(true),
+		className: `${OVERLAY} object-contain`
+	});
+}
+const graphemes = new Intl.Segmenter();
+const firstGraphemes = (text, count) => {
+	let shown = "";
+	let length = 0;
+	for (const { segment } of graphemes.segment(text)) {
+		shown += segment;
+		if (++length === count) break;
+	}
+	return shown;
+};
+/**
+* A project's icon in a square of its `size`: `icon`, or its `name`'s initial on the colour of its `place` among the
+* board's repositories (muted for a project the board doesn't list), with a favicon or lucide icon laid over the
+* initial once it has loaded.
+*/
+function ProjectIcon({ icon, name, place, size, ...data }) {
+	const { square, emoji, monogram } = SIZES[size];
+	const shared = `${square} relative grid shrink-0 place-items-center overflow-hidden rounded-md font-bold`;
+	if (icon?.kind === "emoji") return /* @__PURE__ */ jsx("span", {
+		...data,
+		"data-project-icon": true,
+		className: shared,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", {
+			className: emoji,
+			children: icon.emoji
+		})
+	});
+	if (icon?.kind === "monogram") return /* @__PURE__ */ jsx("span", {
+		...data,
+		"data-project-icon": true,
+		className: `${shared} ${COLORS[icon.color]}`,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", {
+			className: `${monogram} leading-none whitespace-nowrap`,
+			children: firstGraphemes(icon.text, 2)
+		})
+	});
+	const tone = place === void 0 ? "repo-tone-none" : `repo-tone-${place % REPO_TONES}`;
+	return /* @__PURE__ */ jsxs("span", {
+		...data,
+		"data-project-icon": true,
+		className: `${tone} ${shared} bg-[var(--k,var(--color-base-600))] text-white`,
+		"aria-hidden": "true",
+		children: [
+			firstGraphemes(name, 1).toUpperCase(),
+			icon?.kind === "favicon" && /* @__PURE__ */ jsx(Favicon, { src: icon.src }, icon.src),
+			icon?.kind === "lucide" && /* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(LucideIcon, {
+					name: icon.name,
+					className: `${OVERLAY} ${COLORS[icon.color]}`
+				}, icon.name)
+			})
+		]
+	});
+}
+export { ProjectIcon };
+
+//# sourceMappingURL=ProjectIcon.js.map

package/dist/board/ProjectIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectIcon.js","names":[],"sources":["../../src/board/ProjectIcon.tsx"],"sourcesContent":["// A project's icon, in a fixed square. An emoji or monogram chosen in T3 takes the square. Otherwise it holds the\n// toned initial, with the favicon or lucide icon laid over it once that has loaded, so the square keeps its size either\n// way and a missing or broken one leaves the initial. Decorative, as a name sits beside it. An SVG favicon only ever\n// renders through this <img>, which runs none of its scripts.\n\nimport { lazy, Suspense, useState, type ComponentProps, type ComponentType } from 'react';\n\nimport type { DynamicIcon } from '../icons/dynamic';\nimport type { DataAttributes } from './DataAttributes';\n\n/** T3's project icon colours, which tint a lucide icon or a monogram. */\nexport type ProjectIconColor =\n    | 'gray'\n    | 'red'\n    | 'orange'\n    | 'amber'\n    | 'yellow'\n    | 'lime'\n    | 'green'\n    | 'emerald'\n    | 'teal'\n    | 'cyan'\n    | 'sky'\n    | 'blue'\n    | 'indigo'\n    | 'violet'\n    | 'purple'\n    | 'fuchsia'\n    | 'pink'\n    | 'rose';\n\n/** What a project's square shows over its initial: a lucide icon by name, an emoji, up to two characters of a\n *  monogram, or a favicon at `src`. */\nexport type ProjectIconSource =\n    | { kind: 'lucide'; name: string; color: ProjectIconColor }\n    | { kind: 'emoji'; emoji: string }\n    | { kind: 'monogram'; text: string; color: ProjectIconColor }\n    | { kind: 'favicon'; src: string };\n\n/** The board's palette of repository colours, which the repositories take in their list order. */\nconst REPO_TONES = 8;\n\nconst SIZES = {\n    small: { square: 'size-3.5 text-[8px]', emoji: 'text-[10px]', monogram: 'text-[7px]' },\n    row: { square: 'size-4 text-[9px]', emoji: 'text-xs', monogram: 'text-[8px]' },\n    medium: { square: 'size-5 text-[10px]', emoji: 'text-sm', monogram: 'text-[10px]' },\n};\n\nexport type ProjectIconSize = keyof typeof SIZES;\n\n/** Whole class names, as Tailwind only finds those. */\nconst COLORS: Record<ProjectIconColor, string> = {\n    gray: 'text-gray-500',\n    red: 'text-red-500',\n    orange: 'text-orange-500',\n    amber: 'text-amber-500',\n    yellow: 'text-yellow-500',\n    lime: 'text-lime-500',\n    green: 'text-green-500',\n    emerald: 'text-emerald-500',\n    teal: 'text-teal-500',\n    cyan: 'text-cyan-500',\n    sky: 'text-sky-500',\n    blue: 'text-blue-500',\n    indigo: 'text-indigo-500',\n    violet: 'text-violet-500',\n    purple: 'text-purple-500',\n    fuchsia: 'text-fuchsia-500',\n    pink: 'text-pink-500',\n    rose: 'text-rose-500',\n};\n\nconst OVERLAY = 'absolute inset-0 size-full bg-base-100';\n\n/** lucide's name map and its icons are lazy chunks, loaded when first shown. DynamicIcon draws nothing for a name\n *  lucide lacks or an icon that won't load, and a name map that won't load draws nothing here. */\nconst LucideIcon = lazy<ComponentType<ComponentProps<typeof DynamicIcon>>>(() =>\n    import('../icons/dynamic').then(\n        (lucide) => ({ default: lucide.DynamicIcon }),\n        () => ({ default: () => null }),\n    ),\n);\n\nfunction Favicon({ src }: { src: string }) {\n    const [loaded, setLoaded] = useState(false);\n    const [failed, setFailed] = useState(false);\n\n    if (failed) return null;\n\n    return (\n        <img\n            src={src}\n            alt=\"\"\n            hidden={!loaded}\n            onLoad={() => setLoaded(true)}\n            onError={() => setFailed(true)}\n            className={`${OVERLAY} object-contain`}\n        />\n    );\n}\n\nconst graphemes = new Intl.Segmenter();\nconst firstGraphemes = (text: string, count: number) => {\n    let shown = '';\n    let length = 0;\n\n    for (const { segment } of graphemes.segment(text)) {\n        shown += segment;\n\n        if (++length === count) break;\n    }\n\n    return shown;\n};\n\n/**\n * A project's icon in a square of its `size`: `icon`, or its `name`'s initial on the colour of its `place` among the\n * board's repositories (muted for a project the board doesn't list), with a favicon or lucide icon laid over the\n * initial once it has loaded.\n */\nexport function ProjectIcon({\n    icon,\n    name,\n    place,\n    size,\n    ...data\n}: {\n    icon?: ProjectIconSource | null | undefined;\n    name: string;\n    place?: number | undefined;\n    size: ProjectIconSize;\n} & DataAttributes) {\n    const { square, emoji, monogram } = SIZES[size];\n    const shared = `${square} relative grid shrink-0 place-items-center overflow-hidden rounded-md font-bold`;\n\n    if (icon?.kind === 'emoji')\n        return (\n            <span {...data} data-project-icon className={shared} aria-hidden=\"true\">\n                <span className={emoji}>{icon.emoji}</span>\n            </span>\n        );\n\n    if (icon?.kind === 'monogram')\n        return (\n            <span {...data} data-project-icon className={`${shared} ${COLORS[icon.color]}`} aria-hidden=\"true\">\n                <span className={`${monogram} leading-none whitespace-nowrap`}>{firstGraphemes(icon.text, 2)}</span>\n            </span>\n        );\n\n    const tone = place === undefined ? 'repo-tone-none' : `repo-tone-${place % REPO_TONES}`;\n\n    return (\n        <span\n            {...data}\n            data-project-icon\n            className={`${tone} ${shared} bg-[var(--k,var(--color-base-600))] text-white`}\n            aria-hidden=\"true\"\n        >\n            {firstGraphemes(name, 1).toUpperCase()}\n            {icon?.kind === 'favicon' && <Favicon key={icon.src} src={icon.src} />}\n            {icon?.kind === 'lucide' && (\n                <Suspense fallback={null}>\n                    <LucideIcon\n                        key={icon.name}\n                        name={icon.name as ComponentProps<typeof DynamicIcon>['name']}\n                        className={`${OVERLAY} ${COLORS[icon.color]}`}\n                    />\n                </Suspense>\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;AAwCA,MAAM,aAAa;AAEnB,MAAM,QAAQ;CACV,OAAO;EAAE,QAAQ;EAAuB,OAAO;EAAe,UAAU;CAAa;CACrF,KAAK;EAAE,QAAQ;EAAqB,OAAO;EAAW,UAAU;CAAa;CAC7E,QAAQ;EAAE,QAAQ;EAAsB,OAAO;EAAW,UAAU;CAAc;AACtF;;AAKA,MAAM,SAA2C;CAC7C,MAAM;CACN,KAAK;CACL,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAM;CACN,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;AACV;AAEA,MAAM,UAAU;;;AAIhB,MAAM,aAAa,WACf,OAAO,sBAAmB,CAAC,MACtB,YAAY,EAAE,SAAS,OAAO,YAAY,WACpC,EAAE,eAAe,KAAK,EACjC,CACJ;AAEA,SAAS,QAAQ,EAAE,OAAwB;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,IAAI,QAAQ,OAAO;CAEnB,OACI,oBAAC,OAAD;EACS;EACL,KAAI;EACJ,QAAQ,CAAC;EACT,cAAc,UAAU,IAAI;EAC5B,eAAe,UAAU,IAAI;EAC7B,WAAW,GAAG,QAAQ;CACzB,CAAA;AAET;AAEA,MAAM,YAAY,IAAI,KAAK,UAAU;AACrC,MAAM,kBAAkB,MAAc,UAAkB;CACpD,IAAI,QAAQ;CACZ,IAAI,SAAS;CAEb,KAAK,MAAM,EAAE,aAAa,UAAU,QAAQ,IAAI,GAAG;EAC/C,SAAS;EAET,IAAI,EAAE,WAAW,OAAO;CAC5B;CAEA,OAAO;AACX;;;;;;AAOA,SAAgB,YAAY,EACxB,MACA,MACA,OACA,MACA,GAAG,QAMa;CAChB,MAAM,EAAE,QAAQ,OAAO,aAAa,MAAM;CAC1C,MAAM,SAAS,GAAG,OAAO;CAEzB,IAAI,MAAM,SAAS,SACf,OACI,oBAAC,QAAD;EAAM,GAAI;EAAM,qBAAA;EAAkB,WAAW;EAAQ,eAAY;EAC7D,UAAA,oBAAC,QAAD;GAAM,WAAW;GAAQ,UAAA,KAAK;EAAY,CAAA;CACxC,CAAA;CAGd,IAAI,MAAM,SAAS,YACf,OACI,oBAAC,QAAD;EAAM,GAAI;EAAM,qBAAA;EAAkB,WAAW,GAAG,OAAO,GAAG,OAAO,KAAK;EAAU,eAAY;EACxF,UAAA,oBAAC,QAAD;GAAM,WAAW,GAAG,SAAS;GAAmC,UAAA,eAAe,KAAK,MAAM,CAAC;EAAQ,CAAA;CACjG,CAAA;CAGd,MAAM,OAAO,UAAU,KAAA,IAAY,mBAAmB,aAAa,QAAQ;CAE3E,OACI,qBAAC,QAAD;EACI,GAAI;EACJ,qBAAA;EACA,WAAW,GAAG,KAAK,GAAG,OAAO;EAC7B,eAAY;EAJhB,UAAA;GAMK,eAAe,MAAM,CAAC,CAAC,CAAC,YAAY;GACpC,MAAM,SAAS,aAAa,oBAAC,SAAD,EAAwB,KAAK,KAAK,IAAM,GAA1B,KAAK,GAAqB;GACpE,MAAM,SAAS,YACZ,oBAAC,UAAD;IAAU,UAAU;IAChB,UAAA,oBAAC,YAAD;KAEI,MAAM,KAAK;KACX,WAAW,GAAG,QAAQ,GAAG,OAAO,KAAK;IACxC,GAHQ,KAAK,IAGb;GACK,CAAA;EAEZ;;AAEd"}

package/dist/board/PullRequests.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+/** The pull requests in a list, one PullRequestRow each. */
+export declare function PullRequestList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A pull request: its icon and label linking to it in a new tab, then its `checks` and `readiness`. */
+export declare function PullRequestRow({ href, label, checks, readiness }: {
+  href: string;
+  label: string;
+  checks?: ReactNode;
+  readiness?: ReactNode;
+}): import("react").JSX.Element;
+declare const CHECKS_COLOR: {
+  readonly failed: 'var(--error)';
+  readonly running: 'var(--warning)';
+  readonly passed: 'var(--st-done)';
+};
+/** A pull request's checks as a coloured dot and their state, then any `counts`. */
+export declare function ChecksState({ state, counts }: {
+  state: keyof typeof CHECKS_COLOR;
+  counts?: string;
+}): import("react").JSX.Element;
+/** A pull request as a row names it: its icon and short label, `title` naming it in full. */
+export declare function PullRequestRef({ label, title }: {
+  label: string;
+  title?: string;
+}): import("react").JSX.Element;
+/** A pull request's readiness under its row: the `toggle` that shows it, then the `details` while shown. */
+export declare function PullRequestReadiness({ toggle, details }: {
+  toggle: ReactNode;
+  details?: ReactNode;
+}): import("react").JSX.Element;
+/** What a readiness read says: its `status`, when it was `observed` and what blocks it, a `note`, and `refresh`. */
+export declare function ReadinessDetails({ id, status, observed, blockers, note, refresh }: {
+  id: string;
+  status: ReactNode;
+  observed?: ReactNode;
+  blockers?: string[];
+  note: ReactNode;
+  refresh: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PullRequests.d.ts.map

package/dist/board/PullRequests.js

@@ -0,0 +1,83 @@
+import { GitPullRequestIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/board/PullRequests.tsx
+/** The pull requests in a list, one PullRequestRow each. */
+function PullRequestList({ children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 grid list-none grid-cols-[minmax(0,1fr)] gap-1 p-0",
+		children
+	});
+}
+/** A pull request: its icon and label linking to it in a new tab, then its `checks` and `readiness`. */
+function PullRequestRow({ href, label, checks, readiness }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-wrap items-center gap-x-2 gap-y-1 rounded-lg border border-(--border) bg-(--card) px-3 py-2",
+		children: [
+			/* @__PURE__ */ jsx(GitPullRequestIcon, { className: "size-4 shrink-0 text-(--st-done)" }),
+			/* @__PURE__ */ jsx("a", {
+				href,
+				target: "_blank",
+				rel: "noopener",
+				className: "min-w-0 flex-1 basis-24 font-medium wrap-anywhere hover:underline",
+				children: label
+			}),
+			checks,
+			readiness
+		]
+	});
+}
+const CHECKS_COLOR = {
+	failed: "var(--error)",
+	running: "var(--warning)",
+	passed: "var(--st-done)"
+};
+/** A pull request's checks as a coloured dot and their state, then any `counts`. */
+function ChecksState({ state, counts }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex shrink-0 items-center gap-1.5 text-xs text-(--muted-foreground)",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "size-2 rounded-full",
+				style: { background: CHECKS_COLOR[state] }
+			}),
+			"checks ",
+			state,
+			counts && /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums",
+				children: ["· ", counts]
+			})
+		]
+	});
+}
+/** A pull request as a row names it: its icon and short label, `title` naming it in full. */
+function PullRequestRef({ label, title }) {
+	return /* @__PURE__ */ jsxs("span", {
+		title,
+		className: "inline-flex shrink-0 items-center gap-1",
+		children: [/* @__PURE__ */ jsx(GitPullRequestIcon, { className: "size-3 shrink-0 text-(--st-done)" }), label]
+	});
+}
+/** A pull request's readiness under its row: the `toggle` that shows it, then the `details` while shown. */
+function PullRequestReadiness({ toggle, details }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "basis-full text-xs text-(--muted-foreground)",
+		children: [toggle, details]
+	});
+}
+/** What a readiness read says: its `status`, when it was `observed` and what blocks it, a `note`, and `refresh`. */
+function ReadinessDetails({ id, status, observed, blockers = [], note, refresh }) {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "status",
+		"aria-live": "polite",
+		children: [
+			/* @__PURE__ */ jsx("p", { children: status }),
+			observed && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: observed }), /* @__PURE__ */ jsx("ul", { children: blockers.map((b) => /* @__PURE__ */ jsx("li", { children: b }, b)) })] }),
+			/* @__PURE__ */ jsx("p", { children: note }),
+			refresh
+		]
+	});
+}
+export { ChecksState, PullRequestList, PullRequestReadiness, PullRequestRef, PullRequestRow, ReadinessDetails };
+
+//# sourceMappingURL=PullRequests.js.map

package/dist/board/PullRequests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PullRequests.js","names":[],"sources":["../../src/board/PullRequests.tsx"],"sourcesContent":["// A piece of work's pull requests: a list with each one's checks and readiness, and the short reference rows show.\n\nimport { GitPullRequestIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\n/** The pull requests in a list, one PullRequestRow each. */\nexport function PullRequestList({ children }: { children: ReactNode }) {\n    return <ul className=\"m-0 grid list-none grid-cols-[minmax(0,1fr)] gap-1 p-0\">{children}</ul>;\n}\n\n/** A pull request: its icon and label linking to it in a new tab, then its `checks` and `readiness`. */\nexport function PullRequestRow({\n    href,\n    label,\n    checks,\n    readiness,\n}: {\n    href: string;\n    label: string;\n    checks?: ReactNode;\n    readiness?: ReactNode;\n}) {\n    return (\n        <li className=\"flex flex-wrap items-center gap-x-2 gap-y-1 rounded-lg border border-(--border) bg-(--card) px-3 py-2\">\n            <GitPullRequestIcon className=\"size-4 shrink-0 text-(--st-done)\" />\n            <a\n                href={href}\n                target=\"_blank\"\n                rel=\"noopener\"\n                className=\"min-w-0 flex-1 basis-24 font-medium wrap-anywhere hover:underline\"\n            >\n                {label}\n            </a>\n            {checks}\n            {readiness}\n        </li>\n    );\n}\n\nconst CHECKS_COLOR = { failed: 'var(--error)', running: 'var(--warning)', passed: 'var(--st-done)' } as const;\n\n/** A pull request's checks as a coloured dot and their state, then any `counts`. */\nexport function ChecksState({ state, counts }: { state: keyof typeof CHECKS_COLOR; counts?: string }) {\n    return (\n        <span className=\"inline-flex shrink-0 items-center gap-1.5 text-xs text-(--muted-foreground)\">\n            <span className=\"size-2 rounded-full\" style={{ background: CHECKS_COLOR[state] }} />\n            checks {state}\n            {counts && <span className=\"tabular-nums\">· {counts}</span>}\n        </span>\n    );\n}\n\n/** A pull request as a row names it: its icon and short label, `title` naming it in full. */\nexport function PullRequestRef({ label, title }: { label: string; title?: string }) {\n    return (\n        <span title={title} className=\"inline-flex shrink-0 items-center gap-1\">\n            <GitPullRequestIcon className=\"size-3 shrink-0 text-(--st-done)\" />\n            {label}\n        </span>\n    );\n}\n\n/** A pull request's readiness under its row: the `toggle` that shows it, then the `details` while shown. */\nexport function PullRequestReadiness({ toggle, details }: { toggle: ReactNode; details?: ReactNode }) {\n    return (\n        <div className=\"basis-full text-xs text-(--muted-foreground)\">\n            {toggle}\n            {details}\n        </div>\n    );\n}\n\n/** What a readiness read says: its `status`, when it was `observed` and what blocks it, a `note`, and `refresh`. */\nexport function ReadinessDetails({\n    id,\n    status,\n    observed,\n    blockers = [],\n    note,\n    refresh,\n}: {\n    id: string;\n    status: ReactNode;\n    observed?: ReactNode;\n    blockers?: string[];\n    note: ReactNode;\n    refresh: ReactNode;\n}) {\n    return (\n        <div id={id} role=\"status\" aria-live=\"polite\">\n            <p>{status}</p>\n            {observed && (\n                <>\n                    <p>{observed}</p>\n                    <ul>\n                        {blockers.map((b) => (\n                            <li key={b}>{b}</li>\n                        ))}\n                    </ul>\n                </>\n            )}\n            <p>{note}</p>\n            {refresh}\n        </div>\n    );\n}\n"],"mappings":";;;;AAMA,SAAgB,gBAAgB,EAAE,YAAqC;CACnE,OAAO,oBAAC,MAAD;EAAI,WAAU;EAA0D;CAAa,CAAA;AAChG;;AAGA,SAAgB,eAAe,EAC3B,MACA,OACA,QACA,aAMD;CACC,OACI,qBAAC,MAAD;EAAI,WAAU;EAAd,UAAA;GACI,oBAAC,oBAAD,EAAoB,WAAU,mCAAoC,CAAA;GAClE,oBAAC,KAAD;IACU;IACN,QAAO;IACP,KAAI;IACJ,WAAU;IAET,UAAA;GACF,CAAA;GACF;GACA;EACD;;AAEZ;AAEA,MAAM,eAAe;CAAE,QAAQ;CAAgB,SAAS;CAAkB,QAAQ;AAAiB;;AAGnG,SAAgB,YAAY,EAAE,OAAO,UAAiE;CAClG,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACI,oBAAC,QAAD;IAAM,WAAU;IAAsB,OAAO,EAAE,YAAY,aAAa,OAAO;GAAI,CAAA;GAAC;GAC5E;GACP,UAAU,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAA+B,MAAG,MAAa;;EACxD;;AAEd;;AAGA,SAAgB,eAAe,EAAE,OAAO,SAA4C;CAChF,OACI,qBAAC,QAAD;EAAa;EAAO,WAAU;EAA9B,UAAA,CACI,oBAAC,oBAAD,EAAoB,WAAU,mCAAoC,CAAA,GACjE,KACC;;AAEd;;AAGA,SAAgB,qBAAqB,EAAE,QAAQ,WAAuD;CAClG,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACK,QACA,OACA;;AAEb;;AAGA,SAAgB,iBAAiB,EAC7B,IACA,QACA,UACA,WAAW,CAAC,GACZ,MACA,WAQD;CACC,OACI,qBAAC,OAAD;EAAS;EAAI,MAAK;EAAS,aAAU;EAArC,UAAA;GACI,oBAAC,KAAD,EAAA,UAAI,OAAU,CAAA;GACb,YACG,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,KAAD,EAAA,UAAI,SAAY,CAAA,GAChB,oBAAC,MAAD,EAAA,UACK,SAAS,KAAK,MACX,oBAAC,MAAD,EAAA,UAAa,EAAM,GAAV,CAAU,CACtB,EACD,CAAA,CACN,EAAA,CAAA;GAEN,oBAAC,KAAD,EAAA,UAAI,KAAQ,CAAA;GACX;EACA;;AAEb"}

package/dist/board/RowStyles.js

@@ -0,0 +1,14 @@
+// src/board/RowStyles.ts
+/** The rule under a row, which takes no height, so every row of a type measures the same. */
+const ROW_RULE = "shadow-[inset_0_-1px_var(--border)] last:shadow-none";
+/** A row's own buttons draw their focus ring inside the pane that clips them. */
+const ROW_OPENS = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--primary)";
+/** What a row's action slot holds, centred and against its right edge. */
+const ROW_ACTION = "flex min-w-0 flex-wrap items-center justify-end gap-x-2 gap-y-1 text-right text-xs text-(--muted-foreground)";
+/** A row the item dialog shows now: tinted and ringed. */
+const pickedRow = (picked) => picked ? "bg-(--accent) ring-2 ring-inset ring-(--primary)" : "";
+/** The panel a warning about a piece of work sits in, such as why it needs you or is paused. */
+const WARNING_PANEL = "rounded-xl border border-[color-mix(in_srgb,var(--warning)_35%,transparent)] bg-(--warning-surface) px-3 py-2.5";
+export { ROW_ACTION, ROW_OPENS, ROW_RULE, WARNING_PANEL, pickedRow };
+
+//# sourceMappingURL=RowStyles.js.map

package/dist/board/RowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowStyles.js","names":[],"sources":["../../src/board/RowStyles.ts"],"sourcesContent":["// What the board's rows share: the rule under a row, the focus ring of a row's own buttons, the action slot, and how\n// the row the item dialog shows is marked; and the warning panel its notes share.\n\n/** The rule under a row, which takes no height, so every row of a type measures the same. */\nexport const ROW_RULE = 'shadow-[inset_0_-1px_var(--border)] last:shadow-none';\n/** A row's own buttons draw their focus ring inside the pane that clips them. */\nexport const ROW_OPENS = 'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--primary)';\n/** What a row's action slot holds, centred and against its right edge. */\nexport const ROW_ACTION =\n    'flex min-w-0 flex-wrap items-center justify-end gap-x-2 gap-y-1 text-right text-xs text-(--muted-foreground)';\n\n/** A row the item dialog shows now: tinted and ringed. */\nexport const pickedRow = (picked: boolean) => (picked ? 'bg-(--accent) ring-2 ring-inset ring-(--primary)' : '');\n\n/** The panel a warning about a piece of work sits in, such as why it needs you or is paused. */\nexport const WARNING_PANEL =\n    'rounded-xl border border-[color-mix(in_srgb,var(--warning)_35%,transparent)] bg-(--warning-surface) px-3 py-2.5';\n"],"mappings":";;AAIA,MAAa,WAAW;;AAExB,MAAa,YAAY;;AAEzB,MAAa,aACT;;AAGJ,MAAa,aAAa,WAAqB,SAAS,qDAAqD;;AAG7G,MAAa,gBACT"}

package/dist/board/Settings.d.ts

@@ -0,0 +1,54 @@
+import { DataAttributes } from "./DataAttributes.js";
+import { ReactNode } from "react";
+/** The title bar's last button, which opens Settings: an icon-only App control named by its `label`, its 20px icon in
+ *  the text colour rather than the muted one, so it holds its own beside the labelled controls. */
+export declare function OpenSettingsButton({ label, onOpen }: {
+  label: string;
+  onOpen: () => void;
+}): import("react").JSX.Element;
+/**
+ * Settings' sidebar: the `search` field over the sections' groups (SidebarNavigationGroup), and `empty`, announced,
+ * when a search leaves none. `label` names the navigation.
+ */
+export declare function SettingsNav({ label, search, empty, children, ...data }: {
+  label: string;
+  search: ReactNode;
+  empty?: string | undefined;
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/**
+ * Why a setting can't be changed, in a short muted line that wraps: the `reason`, a help popover with the whole
+ * `explanation` (`helpLabel` names its button), then the `action` that checks again, such as an InlineLink with `onClick`.
+ */
+export declare function ReasonNote({ reason, explanation, helpLabel, action }: {
+  reason: string;
+  explanation: ReactNode;
+  helpLabel: string;
+  action?: ReactNode;
+}): import("react").JSX.Element;
+/** A settings group's note under its panel, such as what the group's last call did: small lines, stacked. `busy` marks
+ *  it as still loading for assistive technology. */
+export declare function SettingsNote({ busy, children, ...data }: {
+  busy?: boolean;
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** What a setting row shows under its control, such as an install's progress, in small stacked lines; `breaks` lets a
+ *  long path break anywhere. */
+export declare function SettingDetails({ breaks, children }: {
+  breaks?: boolean;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A setting's control with its error under it, at most 20rem wide. */
+export declare function SettingControl({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A small list of each Project's value for a setting, the Project left and its value muted right, wrapping. */
+export declare function ProjectValueList({ label, rows }: {
+  label: string;
+  rows: readonly {
+    key: string;
+    name: string;
+    value: string;
+  }[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=Settings.d.ts.map

package/dist/board/Settings.js

@@ -0,0 +1,112 @@
+import { Button } from "../actions/Button.js";
+import { SidebarPane } from "../layout/sidebar/SidebarPane.js";
+import { HelpTip } from "../overlays/HelpTip.js";
+import { buttonKind } from "./ButtonKinds.js";
+import { SettingsIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Settings.tsx
+/** The title bar's last button, which opens Settings: an icon-only App control named by its `label`, its 20px icon in
+*  the text colour rather than the muted one, so it holds its own beside the labelled controls. */
+function OpenSettingsButton({ label, onOpen }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonKind("control"),
+		iconOnly: true,
+		className: "open-settings text-base-content [&_svg]:size-5",
+		"aria-label": label,
+		title: label,
+		onClick: onOpen,
+		children: /* @__PURE__ */ jsx(SettingsIcon, {})
+	});
+}
+/**
+* Settings' sidebar: the `search` field over the sections' groups (SidebarNavigationGroup), and `empty`, announced,
+* when a search leaves none. `label` names the navigation.
+*/
+function SettingsNav({ label, search, empty, children, ...data }) {
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		className: "contents",
+		children: /* @__PURE__ */ jsxs(SidebarPane, {
+			label,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "w-44 shrink-0 md:mb-3 md:w-auto",
+					children: search
+				}),
+				empty && /* @__PURE__ */ jsx("p", {
+					role: "status",
+					"data-no-match": true,
+					className: "text-base-700 m-0 px-2 py-1 text-xs",
+					children: empty
+				}),
+				children
+			]
+		})
+	});
+}
+/**
+* Why a setting can't be changed, in a short muted line that wraps: the `reason`, a help popover with the whole
+* `explanation` (`helpLabel` names its button), then the `action` that checks again, such as an InlineLink with `onClick`.
+*/
+function ReasonNote({ reason, explanation, helpLabel, action }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 flex-wrap items-center gap-1 text-xs text-(--muted-foreground)",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: reason }),
+			/* @__PURE__ */ jsx(HelpTip, {
+				label: helpLabel,
+				children: explanation
+			}),
+			action
+		]
+	});
+}
+/** A settings group's note under its panel, such as what the group's last call did: small lines, stacked. `busy` marks
+*  it as still loading for assistive technology. */
+function SettingsNote({ busy, children, ...data }) {
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		className: "grid gap-2 px-1",
+		"aria-busy": busy,
+		children
+	});
+}
+/** What a setting row shows under its control, such as an install's progress, in small stacked lines; `breaks` lets a
+*  long path break anywhere. */
+function SettingDetails({ breaks = false, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-2 text-xs${breaks ? " [overflow-wrap:anywhere]" : ""}`,
+		children
+	});
+}
+/** A setting's control with its error under it, at most 20rem wide. */
+function SettingControl({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid max-w-80 gap-2",
+		children
+	});
+}
+/** A small list of each Project's value for a setting, the Project left and its value muted right, wrapping. */
+function ProjectValueList({ label, rows }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 grid list-none gap-1 p-0 text-xs",
+		"aria-label": label,
+		children: rows.map(({ key, name, value }) => /* @__PURE__ */ jsxs("li", {
+			className: "flex flex-wrap justify-between gap-x-3",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "[overflow-wrap:anywhere]",
+					children: name
+				}),
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "[overflow-wrap:anywhere] text-(--muted-foreground)",
+					children: value
+				})
+			]
+		}, key))
+	});
+}
+export { OpenSettingsButton, ProjectValueList, ReasonNote, SettingControl, SettingDetails, SettingsNav, SettingsNote };
+
+//# sourceMappingURL=Settings.js.map