@lar-works/design-system 0.2.0 → 0.3.0

package/dist/board/TrackerLabels.d.ts

@@ -0,0 +1,27 @@
+import { DataAttributes } from "./DataAttributes.js";
+import { FormEvent, ReactNode } from "react";
+/** The tracker's labels, a row each, in a bordered list that never grows past its section. */
+export declare function TrackerLabelList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A label's row: its `chip`, its `detail` (truncating, its tooltip giving it whole), then its `actions`, with the
+ * `editor` it has open under them.
+ */
+export declare function TrackerLabelRow({ chip, detail, actions, editor, ...data }: {
+  chip: ReactNode;
+  detail?: string | undefined;
+  actions?: ReactNode;
+  editor?: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** The editor a label's row opens, ruled off under it on a faint tint. */
+export declare function TrackerLabelEditor({ onSubmit, children }: {
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The line that creates a label: its name field and the button that submits it, wrapping when they don't fit. */
+export declare function CreateLabelForm({ onSubmit, children }: {
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=TrackerLabels.d.ts.map

package/dist/board/TrackerLabels.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/TrackerLabels.tsx
+/** The tracker's labels, a row each, in a bordered list that never grows past its section. */
+function TrackerLabelList({ children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 grid list-none grid-cols-[minmax(0,1fr)] overflow-hidden rounded-lg border p-0",
+		children
+	});
+}
+/**
+* A label's row: its `chip`, its `detail` (truncating, its tooltip giving it whole), then its `actions`, with the
+* `editor` it has open under them.
+*/
+function TrackerLabelRow({ chip, detail, actions, editor, ...data }) {
+	return /* @__PURE__ */ jsxs("li", {
+		...data,
+		className: "border-b last:border-b-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-3 px-3 py-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "max-w-[45%] min-w-0",
+					children: chip
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-base-700 min-w-0 flex-1 truncate text-xs",
+					title: detail,
+					children: detail
+				}),
+				actions && /* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 gap-1",
+					children: actions
+				})
+			]
+		}), editor]
+	});
+}
+/** The editor a label's row opens, ruled off under it on a faint tint. */
+function TrackerLabelEditor({ onSubmit, children }) {
+	return /* @__PURE__ */ jsx("form", {
+		className: "bg-base-200/40 grid gap-3 border-t p-3",
+		onSubmit,
+		children
+	});
+}
+/** The line that creates a label: its name field and the button that submits it, wrapping when they don't fit. */
+function CreateLabelForm({ onSubmit, children }) {
+	return /* @__PURE__ */ jsx("form", {
+		className: "flex max-w-full min-w-0 flex-wrap gap-2",
+		onSubmit,
+		children
+	});
+}
+export { CreateLabelForm, TrackerLabelEditor, TrackerLabelList, TrackerLabelRow };
+
+//# sourceMappingURL=TrackerLabels.js.map

package/dist/board/TrackerLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackerLabels.js","names":[],"sources":["../../src/board/TrackerLabels.tsx"],"sourcesContent":["// The tracker's labels on a Lar Factory project's settings page: the list of them, each row with its chip, detail and\n// actions and the editor it opens, and the line that creates one.\n\nimport type { FormEvent, ReactNode } from 'react';\n\nimport type { DataAttributes } from './DataAttributes';\n\n/** The tracker's labels, a row each, in a bordered list that never grows past its section. */\nexport function TrackerLabelList({ children }: { children: ReactNode }) {\n    return (\n        <ul className=\"m-0 grid list-none grid-cols-[minmax(0,1fr)] overflow-hidden rounded-lg border p-0\">\n            {children}\n        </ul>\n    );\n}\n\n/**\n * A label's row: its `chip`, its `detail` (truncating, its tooltip giving it whole), then its `actions`, with the\n * `editor` it has open under them.\n */\nexport function TrackerLabelRow({\n    chip,\n    detail,\n    actions,\n    editor,\n    ...data\n}: {\n    chip: ReactNode;\n    detail?: string | undefined;\n    actions?: ReactNode;\n    editor?: ReactNode;\n} & DataAttributes) {\n    return (\n        <li {...data} className=\"border-b last:border-b-0\">\n            <div className=\"flex min-w-0 items-center gap-3 px-3 py-1.5\">\n                <span className=\"max-w-[45%] min-w-0\">{chip}</span>\n                <span className=\"text-base-700 min-w-0 flex-1 truncate text-xs\" title={detail}>\n                    {detail}\n                </span>\n                {actions && <span className=\"flex shrink-0 gap-1\">{actions}</span>}\n            </div>\n            {editor}\n        </li>\n    );\n}\n\n/** The editor a label's row opens, ruled off under it on a faint tint. */\nexport function TrackerLabelEditor({\n    onSubmit,\n    children,\n}: {\n    onSubmit: (event: FormEvent<HTMLFormElement>) => void;\n    children: ReactNode;\n}) {\n    return (\n        <form className=\"bg-base-200/40 grid gap-3 border-t p-3\" onSubmit={onSubmit}>\n            {children}\n        </form>\n    );\n}\n\n/** The line that creates a label: its name field and the button that submits it, wrapping when they don't fit. */\nexport function CreateLabelForm({\n    onSubmit,\n    children,\n}: {\n    onSubmit: (event: FormEvent<HTMLFormElement>) => void;\n    children: ReactNode;\n}) {\n    return (\n        <form className=\"flex max-w-full min-w-0 flex-wrap gap-2\" onSubmit={onSubmit}>\n            {children}\n        </form>\n    );\n}\n"],"mappings":";;;AAQA,SAAgB,iBAAiB,EAAE,YAAqC;CACpE,OACI,oBAAC,MAAD;EAAI,WAAU;EACT;CACD,CAAA;AAEZ;;;;;AAMA,SAAgB,gBAAgB,EAC5B,MACA,QACA,SACA,QACA,GAAG,QAMa;CAChB,OACI,qBAAC,MAAD;EAAI,GAAI;EAAM,WAAU;EAAxB,UAAA,CACI,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACI,oBAAC,QAAD;KAAM,WAAU;KAAuB,UAAA;IAAW,CAAA;IAClD,oBAAC,QAAD;KAAM,WAAU;KAAgD,OAAO;KAClE,UAAA;IACC,CAAA;IACL,WAAW,oBAAC,QAAD;KAAM,WAAU;KAAuB,UAAA;IAAc,CAAA;GAChE;EACJ,CAAA,GAAA,MACD;;AAEZ;;AAGA,SAAgB,mBAAmB,EAC/B,UACA,YAID;CACC,OACI,oBAAC,QAAD;EAAM,WAAU;EAAmD;EAC9D;CACC,CAAA;AAEd;;AAGA,SAAgB,gBAAgB,EAC5B,UACA,YAID;CACC,OACI,oBAAC,QAAD;EAAM,WAAU;EAAoD;EAC/D;CACC,CAAA;AAEd"}

package/dist/board/UpdatePill.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+/** The pill's icon: an arrow for an available update, a progress ring in the primary colour while it downloads, and a
+ *  restart arrow once it's downloaded. 16 px, as every title bar icon is. */
+export declare function UpdateStatusIcon({ status, percent }: {
+  status: 'available' | 'downloading' | 'downloaded';
+  /** The download's whole percentage, 0 to 100. */
+  percent?: number;
+}): import("react").JSX.Element;
+/** The pill while the update downloads: nothing to click, a progress bar to screen readers, with more in its tooltip.
+ *  `text` is what it says before the percentage, `label` its accessible name. */
+export declare function UpdateDownloading({ percent, text, label, tooltip }: {
+  percent: number;
+  text: string;
+  label: string;
+  tooltip: string;
+}): import("react").JSX.Element;
+interface UpdatePillProps {
+  /** Whether the update is downloaded and waits for a restart, or still to download. */
+  status: 'available' | 'downloaded';
+  /** What the pill says, such as "Update available" or "Installing…". */
+  label: string;
+  /** The popover's heading, such as "Lar Factory 1.4.0 is available". */
+  heading: string;
+  /** The update's changes, such as ReleaseNotes. */
+  notes?: ReactNode;
+  /** The popover's button, such as "Download". */
+  actionLabel: string;
+  disabled: boolean;
+  /** Runs the step: the pill and the popover's button both run it. */
+  onRun: () => void;
+}
+/**
+ * The pill with an update to download or install. Clicking it runs that step. Hovering it, or focusing it from the
+ * keyboard, opens the changelog below it, with the step's button; it closes 150 ms after the pointer leaves both, and
+ * on Escape. The focus stays on the pill.
+ */
+export declare function UpdatePill({ status, label, heading, notes, actionLabel, disabled, onRun }: UpdatePillProps): import("react").JSX.Element;
+export interface ReleaseNote {
+  version: string;
+  /** The section's heading, such as "What's changed" or "Changes in 1.3.0". */
+  title: string;
+  items: readonly string[];
+  /** What the app left out, such as "3 more changes in this Release". */
+  more?: string;
+}
+/** Each Release's changes, newest first, and a note of older Releases left out. */
+export declare function ReleaseNotes({ releases, older }: {
+  releases: readonly ReleaseNote[];
+  older?: string;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=UpdatePill.d.ts.map

package/dist/board/UpdatePill.js

@@ -0,0 +1,188 @@
+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 { useEffect, useRef, useState } from "react";
+import { ArrowDownToLineIcon, RotateCcwIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/board/UpdatePill.tsx
+const RADIUS = 7;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const CLOSE_DELAY_MS = 150;
+/** The pill's icon: an arrow for an available update, a progress ring in the primary colour while it downloads, and a
+*  restart arrow once it's downloaded. 16 px, as every title bar icon is. */
+function UpdateStatusIcon({ status, percent = 0 }) {
+	if (status === "downloading") return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		className: "size-4 shrink-0 -rotate-90",
+		viewBox: "0 0 20 20",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "10",
+			cy: "10",
+			r: RADIUS,
+			fill: "none",
+			stroke: "currentColor",
+			strokeOpacity: "0.2",
+			strokeWidth: "2"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "10",
+			cy: "10",
+			r: RADIUS,
+			fill: "none",
+			className: "stroke-primary transition-[stroke-dashoffset] duration-300 ease-out motion-reduce:transition-none",
+			strokeDasharray: CIRCUMFERENCE,
+			strokeDashoffset: CIRCUMFERENCE * (1 - percent / 100),
+			strokeLinecap: "round",
+			strokeWidth: "2"
+		})]
+	});
+	return /* @__PURE__ */ jsx(status === "downloaded" ? RotateCcwIcon : ArrowDownToLineIcon, {
+		className: "size-4 shrink-0",
+		"aria-hidden": "true"
+	});
+}
+/** The pill while the update downloads: nothing to click, a progress bar to screen readers, with more in its tooltip.
+*  `text` is what it says before the percentage, `label` its accessible name. */
+function UpdateDownloading({ percent, text, label, tooltip }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("span", {
+			tabIndex: 0,
+			role: "progressbar",
+			"aria-label": label,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": percent,
+			"data-kind": "control",
+			className: "update-button text-primary focus-visible:ring-primary inline-flex h-7 items-center gap-1.5 rounded-md bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-base-100))] px-[11px] text-xs font-medium outline-none hover:bg-[color-mix(in_srgb,var(--color-primary)_18%,var(--color-base-100))] focus-visible:ring-2",
+			children: [
+				/* @__PURE__ */ jsx(UpdateStatusIcon, {
+					status: "downloading",
+					percent
+				}),
+				text,
+				" ",
+				/* @__PURE__ */ jsxs("span", {
+					className: "w-7 tabular-nums",
+					children: [percent, "%"]
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsx(TooltipPopup, {
+		side: "bottom",
+		children: tooltip
+	})] });
+}
+/** Open while the pointer is on the pill or its popover, and for 150 ms after it leaves both. */
+function useHoverOpen() {
+	const [open, setOpen] = useState(false);
+	const timer = useRef(void 0);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const show = () => {
+		clearTimeout(timer.current);
+		setOpen(true);
+	};
+	const close = () => {
+		clearTimeout(timer.current);
+		setOpen(false);
+	};
+	return {
+		open,
+		show,
+		close,
+		hover: {
+			onPointerEnter: (event) => event.pointerType !== "touch" && show(),
+			onPointerLeave: (event) => {
+				if (event.pointerType === "touch") return;
+				clearTimeout(timer.current);
+				timer.current = setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
+			}
+		}
+	};
+}
+/**
+* The pill with an update to download or install. Clicking it runs that step. Hovering it, or focusing it from the
+* keyboard, opens the changelog below it, with the step's button; it closes 150 ms after the pointer leaves both, and
+* on Escape. The focus stays on the pill.
+*/
+function UpdatePill({ status, label, heading, notes, actionLabel, disabled, onRun }) {
+	const { open, show, close, hover } = useHoverOpen();
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => !next && close(),
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				...buttonKind("control"),
+				variant: "tinted",
+				"aria-disabled": disabled || void 0,
+				className: `update-button gap-1.5 font-medium ${disabled ? "cursor-not-allowed" : ""}`,
+				onClick: (event) => {
+					event.preventDefault();
+					if (!disabled) onRun();
+				},
+				onFocus: (event) => event.currentTarget.matches(":focus-visible") && show(),
+				...hover,
+				children: [/* @__PURE__ */ jsx(UpdateStatusIcon, { status }), label]
+			})
+		}), /* @__PURE__ */ jsx(Popover.Content, {
+			side: "bottom",
+			align: "end",
+			onOpenAutoFocus: (event) => event.preventDefault(),
+			onCloseAutoFocus: (event) => event.preventDefault(),
+			...hover,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "grid w-80 max-w-full gap-3 text-left",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "update-heading text-base-content m-0 text-sm font-medium",
+						children: heading
+					}),
+					notes ? /* @__PURE__ */ jsx("div", {
+						className: "max-h-[min(28rem,calc(100vh-10rem))] overflow-y-auto",
+						children: notes
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "justify-self-start",
+						children: /* @__PURE__ */ jsx(Button, {
+							...buttonKind("main"),
+							className: "update-next",
+							disabled,
+							onClick: onRun,
+							children: actionLabel
+						})
+					})
+				]
+			})
+		})]
+	});
+}
+/** Each Release's changes, newest first, and a note of older Releases left out. */
+function ReleaseNotes({ releases, older }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [releases.map((note) => /* @__PURE__ */ jsxs("section", {
+		className: "not-first:border-base-300 not-first:mt-3 not-first:border-t not-first:pt-3",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-base-content m-0 text-xs leading-4 font-semibold",
+				children: note.title
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "text-base-700 m-0 mt-2 space-y-1.5 pl-4 text-xs leading-5",
+				children: note.items.map((item, i) => /* @__PURE__ */ jsx("li", {
+					className: "list-disc break-words",
+					children: item
+				}, i))
+			}),
+			note.more ? /* @__PURE__ */ jsx("p", {
+				className: "text-base-700 m-0 mt-2 text-xs leading-5",
+				children: note.more
+			}) : null
+		]
+	}, note.version)), older ? /* @__PURE__ */ jsx("p", {
+		className: "border-base-300 text-base-700 m-0 mt-3 border-t pt-3 text-xs leading-5",
+		children: older
+	}) : null] });
+}
+export { ReleaseNotes, UpdateDownloading, UpdatePill, UpdateStatusIcon };
+
+//# sourceMappingURL=UpdatePill.js.map

package/dist/board/UpdatePill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpdatePill.js","names":[],"sources":["../../src/board/UpdatePill.tsx"],"sourcesContent":["// The title bar's update pill, from T3 Code's update pill (apps/web/src/components/sidebar/SidebarUpdatePill.tsx at\n// d53873b) and its status icon (DesktopUpdateStatusIcon.tsx at 9a391eb), drawn as the board's other App controls are,\n// tinted in every state, instead of as T3's pill. Copyright (c) 2026 T3 Tools Inc. MIT License.\n\nimport { ArrowDownToLineIcon, RotateCcwIcon } from 'lucide-react';\nimport { type PointerEvent, type ReactNode, useEffect, useRef, useState } 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\nconst RADIUS = 7;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\nconst CLOSE_DELAY_MS = 150;\n\n/** The pill's icon: an arrow for an available update, a progress ring in the primary colour while it downloads, and a\n *  restart arrow once it's downloaded. 16 px, as every title bar icon is. */\nexport function UpdateStatusIcon({\n    status,\n    percent = 0,\n}: {\n    status: 'available' | 'downloading' | 'downloaded';\n    /** The download's whole percentage, 0 to 100. */\n    percent?: number;\n}) {\n    if (status === 'downloading')\n        return (\n            <svg aria-hidden=\"true\" className=\"size-4 shrink-0 -rotate-90\" viewBox=\"0 0 20 20\">\n                <circle\n                    cx=\"10\"\n                    cy=\"10\"\n                    r={RADIUS}\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeOpacity=\"0.2\"\n                    strokeWidth=\"2\"\n                />\n                <circle\n                    cx=\"10\"\n                    cy=\"10\"\n                    r={RADIUS}\n                    fill=\"none\"\n                    className=\"stroke-primary transition-[stroke-dashoffset] duration-300 ease-out motion-reduce:transition-none\"\n                    strokeDasharray={CIRCUMFERENCE}\n                    strokeDashoffset={CIRCUMFERENCE * (1 - percent / 100)}\n                    strokeLinecap=\"round\"\n                    strokeWidth=\"2\"\n                />\n            </svg>\n        );\n\n    const Icon = status === 'downloaded' ? RotateCcwIcon : ArrowDownToLineIcon;\n\n    return <Icon className=\"size-4 shrink-0\" aria-hidden=\"true\" />;\n}\n\n/** The pill while the update downloads: nothing to click, a progress bar to screen readers, with more in its tooltip.\n *  `text` is what it says before the percentage, `label` its accessible name. */\nexport function UpdateDownloading({\n    percent,\n    text,\n    label,\n    tooltip,\n}: {\n    percent: number;\n    text: string;\n    label: string;\n    tooltip: string;\n}) {\n    return (\n        <Tooltip>\n            <TooltipTrigger asChild>\n                <span\n                    tabIndex={0}\n                    role=\"progressbar\"\n                    aria-label={label}\n                    aria-valuemin={0}\n                    aria-valuemax={100}\n                    aria-valuenow={percent}\n                    data-kind=\"control\"\n                    className=\"update-button text-primary focus-visible:ring-primary inline-flex h-7 items-center gap-1.5 rounded-md bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-base-100))] px-[11px] text-xs font-medium outline-none hover:bg-[color-mix(in_srgb,var(--color-primary)_18%,var(--color-base-100))] focus-visible:ring-2\"\n                >\n                    <UpdateStatusIcon status=\"downloading\" percent={percent} />\n                    {text} <span className=\"w-7 tabular-nums\">{percent}%</span>\n                </span>\n            </TooltipTrigger>\n            <TooltipPopup side=\"bottom\">{tooltip}</TooltipPopup>\n        </Tooltip>\n    );\n}\n\n/** Open while the pointer is on the pill or its popover, and for 150 ms after it leaves both. */\nfunction useHoverOpen() {\n    const [open, setOpen] = useState(false);\n    const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n    useEffect(() => () => clearTimeout(timer.current), []);\n\n    const show = () => {\n        clearTimeout(timer.current);\n        setOpen(true);\n    };\n    const close = () => {\n        clearTimeout(timer.current);\n        setOpen(false);\n    };\n    const hover = {\n        // A touch has no hover: a tap runs the step.\n        onPointerEnter: (event: PointerEvent) => event.pointerType !== 'touch' && show(),\n        onPointerLeave: (event: PointerEvent) => {\n            if (event.pointerType === 'touch') return;\n\n            clearTimeout(timer.current);\n            timer.current = setTimeout(() => setOpen(false), CLOSE_DELAY_MS);\n        },\n    };\n\n    return { open, show, close, hover };\n}\n\ninterface UpdatePillProps {\n    /** Whether the update is downloaded and waits for a restart, or still to download. */\n    status: 'available' | 'downloaded';\n    /** What the pill says, such as \"Update available\" or \"Installing…\". */\n    label: string;\n    /** The popover's heading, such as \"Lar Factory 1.4.0 is available\". */\n    heading: string;\n    /** The update's changes, such as ReleaseNotes. */\n    notes?: ReactNode;\n    /** The popover's button, such as \"Download\". */\n    actionLabel: string;\n    disabled: boolean;\n    /** Runs the step: the pill and the popover's button both run it. */\n    onRun: () => void;\n}\n\n/**\n * The pill with an update to download or install. Clicking it runs that step. Hovering it, or focusing it from the\n * keyboard, opens the changelog below it, with the step's button; it closes 150 ms after the pointer leaves both, and\n * on Escape. The focus stays on the pill.\n */\nexport function UpdatePill({ status, label, heading, notes, actionLabel, disabled, onRun }: UpdatePillProps) {\n    const { open, show, close, hover } = useHoverOpen();\n\n    return (\n        <Popover open={open} onOpenChange={(next) => !next && close()}>\n            <Popover.Trigger asChild>\n                <Button\n                    {...buttonKind('control')}\n                    variant=\"tinted\"\n                    aria-disabled={disabled || undefined}\n                    className={`update-button gap-1.5 font-medium ${disabled ? 'cursor-not-allowed' : ''}`}\n                    // The pill runs the step; the changelog opens on hover and focus, not on the click.\n                    onClick={(event) => {\n                        event.preventDefault();\n\n                        if (!disabled) onRun();\n                    }}\n                    onFocus={(event) => event.currentTarget.matches(':focus-visible') && show()}\n                    {...hover}\n                >\n                    <UpdateStatusIcon status={status} />\n                    {label}\n                </Button>\n            </Popover.Trigger>\n            <Popover.Content\n                side=\"bottom\"\n                align=\"end\"\n                onOpenAutoFocus={(event) => event.preventDefault()}\n                onCloseAutoFocus={(event) => event.preventDefault()}\n                {...hover}\n            >\n                <div className=\"grid w-80 max-w-full gap-3 text-left\">\n                    <p className=\"update-heading text-base-content m-0 text-sm font-medium\">{heading}</p>\n                    {notes ? <div className=\"max-h-[min(28rem,calc(100vh-10rem))] overflow-y-auto\">{notes}</div> : null}\n                    <span className=\"justify-self-start\">\n                        <Button {...buttonKind('main')} className=\"update-next\" disabled={disabled} onClick={onRun}>\n                            {actionLabel}\n                        </Button>\n                    </span>\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n\nexport interface ReleaseNote {\n    version: string;\n    /** The section's heading, such as \"What's changed\" or \"Changes in 1.3.0\". */\n    title: string;\n    items: readonly string[];\n    /** What the app left out, such as \"3 more changes in this Release\". */\n    more?: string;\n}\n\n/** Each Release's changes, newest first, and a note of older Releases left out. */\nexport function ReleaseNotes({ releases, older }: { releases: readonly ReleaseNote[]; older?: string }) {\n    return (\n        <>\n            {releases.map((note) => (\n                <section\n                    className=\"not-first:border-base-300 not-first:mt-3 not-first:border-t not-first:pt-3\"\n                    key={note.version}\n                >\n                    <h3 className=\"text-base-content m-0 text-xs leading-4 font-semibold\">{note.title}</h3>\n                    <ul className=\"text-base-700 m-0 mt-2 space-y-1.5 pl-4 text-xs leading-5\">\n                        {note.items.map((item, i) => (\n                            <li className=\"list-disc break-words\" key={i}>\n                                {item}\n                            </li>\n                        ))}\n                    </ul>\n                    {note.more ? <p className=\"text-base-700 m-0 mt-2 text-xs leading-5\">{note.more}</p> : null}\n                </section>\n            ))}\n            {older ? (\n                <p className=\"border-base-300 text-base-700 m-0 mt-3 border-t pt-3 text-xs leading-5\">{older}</p>\n            ) : null}\n        </>\n    );\n}\n"],"mappings":"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"}

package/dist/board/Vocabulary.d.ts

@@ -0,0 +1,56 @@
+import { DataAttributes } from "./DataAttributes.js";
+import { ReactNode } from "react";
+/**
+ * One kind's row: its `title`, its `type` control, then its labels' chips in a group `labelsLabel` names, which take a
+ * line of their own on a narrow page, ending with the `chooser` that edits them; what the row says about them (notes,
+ * problems, actions) follows under it.
+ */
+export declare function VocabularyRow({ title, type, labels, labelsLabel, chooser, children, ...data }: {
+  title: string;
+  type: ReactNode;
+  labels: ReactNode;
+  labelsLabel: string;
+  chooser: ReactNode;
+  children?: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** The chip that stands for the labels past the first few, which opens the chooser (`label` names it). */
+export declare function VocabularyMore({ label, onClick, children }: {
+  label: string;
+  onClick: () => void;
+  children: string;
+}): import("react").JSX.Element;
+/** A suggested label, dashed, which a press maps. */
+export declare function VocabularySuggestion({ disabled, onClick, children }: {
+  disabled?: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The chooser's panel inside its popover: the search field, the list, then its actions, one under the other. */
+export declare function LabelChooser({ children, ...data }: {
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** The chooser's list of labels, which picks several (`label` names it); its wheel scrolls the list alone. */
+export declare function LabelChooserList({ id, label, children }: {
+  id: string;
+  label: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** One label in the chooser's list, highlighted while `active`. A press picks it and keeps focus in the search field. */
+export declare function LabelChooserOption({ id, selected, disabled, active, onHover, onPick, children }: {
+  id: string;
+  selected: boolean;
+  disabled: boolean;
+  active: boolean;
+  onHover: () => void;
+  onPick: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** What the chooser's list says when no label matches, announced. */
+export declare function LabelChooserEmpty({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The chooser's closing actions, at either end of a ruled line. */
+export declare function LabelChooserFooter({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Vocabulary.d.ts.map

package/dist/board/Vocabulary.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Vocabulary.tsx
+/**
+* One kind's row: its `title`, its `type` control, then its labels' chips in a group `labelsLabel` names, which take a
+* line of their own on a narrow page, ending with the `chooser` that edits them; what the row says about them (notes,
+* problems, actions) follows under it.
+*/
+function VocabularyRow({ title, type, labels, labelsLabel, chooser, children, ...data }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...data,
+		className: "grid min-w-0 gap-2 px-3 py-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "grid min-w-0 grid-cols-[minmax(0,1fr)_8.5rem] items-center gap-x-3 gap-y-2 sm:grid-cols-[5.5rem_8.5rem_minmax(0,1fr)]",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] font-medium",
+					children: title
+				}),
+				type,
+				/* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"aria-label": labelsLabel,
+					className: "col-span-2 flex min-w-0 flex-wrap items-center gap-1 sm:col-span-1",
+					children: [labels, /* @__PURE__ */ jsx("span", {
+						className: "ms-auto flex",
+						children: chooser
+					})]
+				})
+			]
+		}), children]
+	});
+}
+/** The chip that stands for the labels past the first few, which opens the chooser (`label` names it). */
+function VocabularyMore({ label, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "cursor-pointer rounded-full bg-(--muted) px-2 text-xs",
+		"aria-label": label,
+		onClick,
+		children
+	});
+}
+/** A suggested label, dashed, which a press maps. */
+function VocabularySuggestion({ disabled = false, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled,
+		className: "cursor-pointer rounded-full border border-dashed border-(--border) px-2 py-0.5 text-xs",
+		onClick,
+		children
+	});
+}
+/** The chooser's panel inside its popover: the search field, the list, then its actions, one under the other. */
+function LabelChooser({ children, ...data }) {
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		className: "grid w-full min-w-0 gap-2",
+		children
+	});
+}
+/** The chooser's list of labels, which picks several (`label` names it); its wheel scrolls the list alone. */
+function LabelChooserList({ id, label, children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		id,
+		role: "listbox",
+		"aria-multiselectable": true,
+		"aria-label": label,
+		className: "m-0 h-64 list-none overflow-y-auto overscroll-contain p-0",
+		onWheel: (event) => event.stopPropagation(),
+		children
+	});
+}
+/** One label in the chooser's list, highlighted while `active`. A press picks it and keeps focus in the search field. */
+function LabelChooserOption({ id, selected, disabled, active, onHover, onPick, children }) {
+	return /* @__PURE__ */ jsx("li", {
+		id,
+		role: "option",
+		"aria-selected": selected,
+		"aria-disabled": disabled,
+		className: `cursor-pointer rounded px-2 py-1 text-[13px] wrap-anywhere ${active ? "bg-(--muted)" : ""}`,
+		onMouseMove: onHover,
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: onPick,
+		children
+	});
+}
+/** What the chooser's list says when no label matches, announced. */
+function LabelChooserEmpty({ children }) {
+	return /* @__PURE__ */ jsx("li", {
+		role: "status",
+		className: "px-2 py-2 text-xs text-(--muted-foreground)",
+		children
+	});
+}
+/** The chooser's closing actions, at either end of a ruled line. */
+function LabelChooserFooter({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-between gap-2 border-t border-(--border) pt-2",
+		children
+	});
+}
+export { LabelChooser, LabelChooserEmpty, LabelChooserFooter, LabelChooserList, LabelChooserOption, VocabularyMore, VocabularyRow, VocabularySuggestion };
+
+//# sourceMappingURL=Vocabulary.js.map

package/dist/board/Vocabulary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Vocabulary.js","names":[],"sources":["../../src/board/Vocabulary.tsx"],"sourcesContent":["// A project's kind vocabulary in Lar Factory's settings and onboarding: each kind's row, with its type and the chips of\n// its labels, and the chooser that picks them from the tracker's labels.\n\nimport type { ReactNode } from 'react';\n\nimport type { DataAttributes } from './DataAttributes';\n\n/**\n * One kind's row: its `title`, its `type` control, then its labels' chips in a group `labelsLabel` names, which take a\n * line of their own on a narrow page, ending with the `chooser` that edits them; what the row says about them (notes,\n * problems, actions) follows under it.\n */\nexport function VocabularyRow({\n    title,\n    type,\n    labels,\n    labelsLabel,\n    chooser,\n    children,\n    ...data\n}: {\n    title: string;\n    type: ReactNode;\n    labels: ReactNode;\n    labelsLabel: string;\n    chooser: ReactNode;\n    children?: ReactNode;\n} & DataAttributes) {\n    return (\n        <div {...data} className=\"grid min-w-0 gap-2 px-3 py-3\">\n            <div className=\"grid min-w-0 grid-cols-[minmax(0,1fr)_8.5rem] items-center gap-x-3 gap-y-2 sm:grid-cols-[5.5rem_8.5rem_minmax(0,1fr)]\">\n                <span className=\"text-[13px] font-medium\">{title}</span>\n                {type}\n                <div\n                    role=\"group\"\n                    aria-label={labelsLabel}\n                    className=\"col-span-2 flex min-w-0 flex-wrap items-center gap-1 sm:col-span-1\"\n                >\n                    {labels}\n                    <span className=\"ms-auto flex\">{chooser}</span>\n                </div>\n            </div>\n            {children}\n        </div>\n    );\n}\n\n/** The chip that stands for the labels past the first few, which opens the chooser (`label` names it). */\nexport function VocabularyMore({ label, onClick, children }: { label: string; onClick: () => void; children: string }) {\n    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer rounded-full bg-(--muted) px-2 text-xs\"\n            aria-label={label}\n            onClick={onClick}\n        >\n            {children}\n        </button>\n    );\n}\n\n/** A suggested label, dashed, which a press maps. */\nexport function VocabularySuggestion({\n    disabled = false,\n    onClick,\n    children,\n}: {\n    disabled?: boolean;\n    onClick: () => void;\n    children: ReactNode;\n}) {\n    return (\n        <button\n            type=\"button\"\n            disabled={disabled}\n            className=\"cursor-pointer rounded-full border border-dashed border-(--border) px-2 py-0.5 text-xs\"\n            onClick={onClick}\n        >\n            {children}\n        </button>\n    );\n}\n\n/** The chooser's panel inside its popover: the search field, the list, then its actions, one under the other. */\nexport function LabelChooser({ children, ...data }: { children: ReactNode } & DataAttributes) {\n    return (\n        <div {...data} className=\"grid w-full min-w-0 gap-2\">\n            {children}\n        </div>\n    );\n}\n\n/** The chooser's list of labels, which picks several (`label` names it); its wheel scrolls the list alone. */\nexport function LabelChooserList({ id, label, children }: { id: string; label: string; children: ReactNode }) {\n    return (\n        <ul\n            id={id}\n            role=\"listbox\"\n            aria-multiselectable\n            aria-label={label}\n            className=\"m-0 h-64 list-none overflow-y-auto overscroll-contain p-0\"\n            onWheel={(event) => event.stopPropagation()}\n        >\n            {children}\n        </ul>\n    );\n}\n\n/** One label in the chooser's list, highlighted while `active`. A press picks it and keeps focus in the search field. */\nexport function LabelChooserOption({\n    id,\n    selected,\n    disabled,\n    active,\n    onHover,\n    onPick,\n    children,\n}: {\n    id: string;\n    selected: boolean;\n    disabled: boolean;\n    active: boolean;\n    onHover: () => void;\n    onPick: () => void;\n    children: ReactNode;\n}) {\n    return (\n        <li\n            id={id}\n            role=\"option\"\n            aria-selected={selected}\n            aria-disabled={disabled}\n            className={`cursor-pointer rounded px-2 py-1 text-[13px] wrap-anywhere ${active ? 'bg-(--muted)' : ''}`}\n            onMouseMove={onHover}\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={onPick}\n        >\n            {children}\n        </li>\n    );\n}\n\n/** What the chooser's list says when no label matches, announced. */\nexport function LabelChooserEmpty({ children }: { children: ReactNode }) {\n    return (\n        <li role=\"status\" className=\"px-2 py-2 text-xs text-(--muted-foreground)\">\n            {children}\n        </li>\n    );\n}\n\n/** The chooser's closing actions, at either end of a ruled line. */\nexport function LabelChooserFooter({ children }: { children: ReactNode }) {\n    return <div className=\"flex justify-between gap-2 border-t border-(--border) pt-2\">{children}</div>;\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,cAAc,EAC1B,OACA,MACA,QACA,aACA,SACA,UACA,GAAG,QAQa;CAChB,OACI,qBAAC,OAAD;EAAK,GAAI;EAAM,WAAU;EAAzB,UAAA,CACI,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACI,oBAAC,QAAD;KAAM,WAAU;KAA2B,UAAA;IAAY,CAAA;IACtD;IACD,qBAAC,OAAD;KACI,MAAK;KACL,cAAY;KACZ,WAAU;KAHd,UAAA,CAKK,QACD,oBAAC,QAAD;MAAM,WAAU;MAAgB,UAAA;KAAc,CAAA,CAC7C;;GACJ;EACJ,CAAA,GAAA,QACA;;AAEb;;AAGA,SAAgB,eAAe,EAAE,OAAO,SAAS,YAAsE;CACnH,OACI,oBAAC,UAAD;EACI,MAAK;EACL,WAAU;EACV,cAAY;EACH;EAER;CACG,CAAA;AAEhB;;AAGA,SAAgB,qBAAqB,EACjC,WAAW,OACX,SACA,YAKD;CACC,OACI,oBAAC,UAAD;EACI,MAAK;EACK;EACV,WAAU;EACD;EAER;CACG,CAAA;AAEhB;;AAGA,SAAgB,aAAa,EAAE,UAAU,GAAG,QAAkD;CAC1F,OACI,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAU;EACpB;CACA,CAAA;AAEb;;AAGA,SAAgB,iBAAiB,EAAE,IAAI,OAAO,YAAgE;CAC1G,OACI,oBAAC,MAAD;EACQ;EACJ,MAAK;EACL,wBAAA;EACA,cAAY;EACZ,WAAU;EACV,UAAU,UAAU,MAAM,gBAAgB;EAEzC;CACD,CAAA;AAEZ;;AAGA,SAAgB,mBAAmB,EAC/B,IACA,UACA,UACA,QACA,SACA,QACA,YASD;CACC,OACI,oBAAC,MAAD;EACQ;EACJ,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,WAAW,8DAA8D,SAAS,iBAAiB;EACnG,aAAa;EACb,cAAc,UAAU,MAAM,eAAe;EAC7C,SAAS;EAER;CACD,CAAA;AAEZ;;AAGA,SAAgB,kBAAkB,EAAE,YAAqC;CACrE,OACI,oBAAC,MAAD;EAAI,MAAK;EAAS,WAAU;EACvB;CACD,CAAA;AAEZ;;AAGA,SAAgB,mBAAmB,EAAE,YAAqC;CACtE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAA8D;CAAc,CAAA;AACtG"}

package/dist/board/Warnings.d.ts

@@ -0,0 +1,35 @@
+import { MouseEvent, ReactNode } from "react";
+interface BoardWarningsProps {
+  /** A warning shown open above the rest, such as a lost board server, which every number on the page depends on. */
+  lead?: ReactNode;
+  /** The collapsed list's summary, such as "2 connections need attention"; without it, no list. */
+  summary?: ReactNode;
+  /** The warnings in the collapsed list. */
+  children?: ReactNode;
+  /** At the banner's right, such as Diagnostics. */
+  action: ReactNode;
+}
+/** The board's warnings, in a banner under the title bar: connection problems stay in a collapsed list, inline
+ *  details that never open a notification or a dialog. */
+export declare function BoardWarnings({ lead, summary, children, action }: BoardWarningsProps): import("react").JSX.Element;
+interface BoardWarningProps {
+  /** What the warning is about, as `data-warning`. */
+  name: string;
+  title: string;
+  dismissLabel: string;
+  onDismiss: (event: MouseEvent<HTMLButtonElement>) => void;
+  /** Under the text, such as a button that fixes it. */
+  action?: ReactNode;
+  children: ReactNode;
+}
+/** One warning in the banner: its title, what to do, and a close button. Commands in it wrap anywhere. */
+export declare function BoardWarning({ name, title, dismissLabel, onDismiss, action, children }: BoardWarningProps): import("react").JSX.Element;
+/** What fills the board's main area while a tool it can't work without is missing: the Lar mark, what's missing, why
+ *  and how to fix it, and a way to look again. */
+export declare function ToolMissing({ title, children, action }: {
+  title: string;
+  children: ReactNode;
+  action: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Warnings.d.ts.map