@lar-works/design-system 0.2.0 → 0.3.0

package/dist/board/AddItem.d.ts

@@ -0,0 +1,82 @@
+import { ReactNode, Ref } from "react";
+/** The title bar's Add item button, a Main action named by its `label`, which folds away, for screen readers only, on a
+ *  title bar under 70rem; `title` gives it whole with its shortcut, which `keyShortcuts` names. */
+export declare function AddItemButton({ label, title, keyShortcuts, onOpen }: {
+  label: string;
+  title: string;
+  keyShortcuts?: string;
+  onOpen: () => void;
+}): import("react").JSX.Element;
+/**
+ * A draft's fields as one group, which `disabled` locks: the `main` column (its title, editor and notes) beside the
+ * `details` panel, which `detailsLabel` names. Narrower than 40rem the panel stacks under the main column, which then
+ * grows with its text, and the two scroll as one; each row sizes to its content, so a long text pushes the panel down
+ * rather than running under it.
+ */
+export declare function DraftFields({ id, disabled, detailsLabel, main, details }: {
+  id: string;
+  disabled: boolean;
+  detailsLabel: string;
+  main: ReactNode;
+  details: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A field of a details panel under its small uppercase `heading`, which labels the field `htmlFor` names; without
+ * `htmlFor`, the field is a group of controls that the heading names, such as a ticket's labels (`id` and `ref` reach
+ * the group).
+ */
+export declare function PanelField({ heading, htmlFor, id, ref, children }: {
+  heading: string;
+  htmlFor?: string;
+  id?: string;
+  ref?: Ref<HTMLDivElement>;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The details panel's ticket part, ruled off from the fields above it: a ticket's own fields, or what a draft without
+ *  one keeps. */
+export declare function DraftTicketPart({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Create issue in the footer: its `checkbox`, then the `reason` it can't be ticked, kept to a readable width, and any
+ *  `error`. */
+export declare function CreateIssueChoice({ checkbox, reason, error }: {
+  checkbox: ReactNode;
+  reason?: ReactNode;
+  error?: ReactNode;
+}): import("react").JSX.Element;
+/** The Find a ticket pane, ruled off from the header: its notes and fields, one under the other, scrolling above the
+ *  footer when a long result list needs it. */
+export declare function TicketSearchPane({ id, children }: {
+  id: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A ticket a search found: its number, its title and a short `note`, such as that it is on the board already. */
+export interface TicketSearchMatch {
+  number: number;
+  title: string;
+  note?: string | undefined;
+}
+/**
+ * A search of a tracker's open tickets: the field (`fieldLabel` names it) with its Search button, which Enter also
+ * runs, the matches, each a button that picks it, and the search's `result`, announced. `id` prefixes the field's,
+ * the button's and the result's ids. `busy` stops a pick while a search or a pick runs, and `picking` marks the list
+ * as busy.
+ */
+export declare function TicketSearch({ id, query, onQueryChange, onSearch, fieldLabel, placeholder, searchLabel, disabled, searchDisabled, tickets, listLabel, busy, picking, onPick, result }: {
+  id: string;
+  query: string;
+  onQueryChange: (query: string) => void;
+  onSearch: () => void;
+  fieldLabel: string;
+  placeholder: string;
+  searchLabel: string;
+  disabled?: boolean | undefined;
+  searchDisabled?: boolean;
+  tickets: readonly TicketSearchMatch[];
+  listLabel: string;
+  busy?: boolean;
+  picking?: boolean;
+  onPick: (number: number) => void;
+  result: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AddItem.d.ts.map

package/dist/board/AddItem.js

@@ -0,0 +1,185 @@
+import { Button } from "../actions/Button.js";
+import { FormResult } from "../feedback/FormResult.js";
+import { FormFieldset } from "../forms/FormSection.js";
+import { Input } from "../forms/Input.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { buttonKind } from "./ButtonKinds.js";
+import { DetailsHeading } from "./ItemDetails.js";
+import { SquarePenIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/AddItem.tsx
+/** The title bar's Add item button, a Main action named by its `label`, which folds away, for screen readers only, on a
+*  title bar under 70rem; `title` gives it whole with its shortcut, which `keyShortcuts` names. */
+function AddItemButton({ label, title, keyShortcuts, onOpen }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonKind("main"),
+		className: "add-item px-2",
+		leftIcon: /* @__PURE__ */ jsx(SquarePenIcon, {}),
+		title,
+		"aria-keyshortcuts": keyShortcuts,
+		onClick: onOpen,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "@max-[70rem]:sr-only",
+			children: label
+		})
+	});
+}
+/**
+* A draft's fields as one group, which `disabled` locks: the `main` column (its title, editor and notes) beside the
+* `details` panel, which `detailsLabel` names. Narrower than 40rem the panel stacks under the main column, which then
+* grows with its text, and the two scroll as one; each row sizes to its content, so a long text pushes the panel down
+* rather than running under it.
+*/
+function DraftFields({ id, disabled, detailsLabel, main, details }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "@container flex min-h-0 flex-1 flex-col",
+		children: /* @__PURE__ */ jsxs(FormFieldset, {
+			id,
+			presentation: "group",
+			disabled,
+			className: "border-base-300 grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_16rem] border-t @max-[40rem]:auto-rows-max @max-[40rem]:grid-cols-[minmax(0,1fr)] @max-[40rem]:content-start @max-[40rem]:overflow-y-auto",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex min-h-0 flex-col gap-3 overflow-y-auto px-5 pt-4 pb-5 sm:px-6 @max-[40rem]:min-h-80 @max-[40rem]:overflow-visible",
+				children: main
+			}), /* @__PURE__ */ jsx("aside", {
+				"aria-label": detailsLabel,
+				className: "border-base-300 bg-base-50/60 grid content-start gap-5 overflow-y-auto border-l px-4 py-4 @max-[40rem]:overflow-visible @max-[40rem]:border-t @max-[40rem]:border-l-0",
+				children: details
+			})]
+		})
+	});
+}
+/**
+* A field of a details panel under its small uppercase `heading`, which labels the field `htmlFor` names; without
+* `htmlFor`, the field is a group of controls that the heading names, such as a ticket's labels (`id` and `ref` reach
+* the group).
+*/
+function PanelField({ heading, htmlFor, id, ref, children }) {
+	if (htmlFor) return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-1.5",
+		children: [/* @__PURE__ */ jsx(DetailsHeading, {
+			presentation: "label",
+			as: "label",
+			htmlFor,
+			children: heading
+		}), children]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		id,
+		role: "group",
+		"aria-label": heading,
+		className: "grid gap-1.5",
+		children: [/* @__PURE__ */ jsx(DetailsHeading, {
+			presentation: "label",
+			as: "span",
+			children: heading
+		}), children]
+	});
+}
+/** The details panel's ticket part, ruled off from the fields above it: a ticket's own fields, or what a draft without
+*  one keeps. */
+function DraftTicketPart({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-base-300 grid gap-3 border-t pt-4",
+		children
+	});
+}
+/** Create issue in the footer: its `checkbox`, then the `reason` it can't be ticked, kept to a readable width, and any
+*  `error`. */
+function CreateIssueChoice({ checkbox, reason, error }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-1",
+		children: [
+			checkbox,
+			reason && /* @__PURE__ */ jsx("div", {
+				className: "max-w-md",
+				children: reason
+			}),
+			error
+		]
+	});
+}
+/** The Find a ticket pane, ruled off from the header: its notes and fields, one under the other, scrolling above the
+*  footer when a long result list needs it. */
+function TicketSearchPane({ id, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: "border-base-300 grid min-h-0 content-start gap-4 overflow-y-auto border-t px-5 pt-4 pb-5 sm:px-6",
+		children
+	});
+}
+/**
+* A search of a tracker's open tickets: the field (`fieldLabel` names it) with its Search button, which Enter also
+* runs, the matches, each a button that picks it, and the search's `result`, announced. `id` prefixes the field's,
+* the button's and the result's ids. `busy` stops a pick while a search or a pick runs, and `picking` marks the list
+* as busy.
+*/
+function TicketSearch({ id, query, onQueryChange, onSearch, fieldLabel, placeholder, searchLabel, disabled = false, searchDisabled = false, tickets, listLabel, busy = false, picking = false, onPick, result }) {
+	const onKey = (event) => {
+		if (event.key !== "Enter") return;
+		event.preventDefault();
+		onSearch();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-2",
+		"data-ticket-picker": true,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					id: `${id}-query`,
+					type: "search",
+					value: query,
+					onChange: (event) => onQueryChange(event.currentTarget.value),
+					onKeyDown: onKey,
+					disabled,
+					autoComplete: "off",
+					"aria-label": fieldLabel,
+					placeholder,
+					className: "min-w-0 flex-1"
+				}), /* @__PURE__ */ jsx(Button, {
+					...buttonKind("other"),
+					id: `${id}-search`,
+					disabled: searchDisabled,
+					onClick: onSearch,
+					children: searchLabel
+				})]
+			}),
+			tickets.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "m-0 grid list-none gap-0.5 p-0",
+				"aria-label": listLabel,
+				"aria-busy": picking,
+				children: tickets.map((ticket) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					...tabbable,
+					type: "button",
+					"data-ticket": ticket.number,
+					disabled: busy,
+					onClick: () => onPick(ticket.number),
+					className: "hover:bg-base-200/70 focus-visible:outline-primary flex w-full min-w-0 items-baseline gap-2 rounded-md px-2 py-1.5 text-left text-sm focus-visible:outline-2 disabled:opacity-60",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 text-(--muted-foreground) tabular-nums",
+							children: ["#", ticket.number]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: ticket.title
+						}),
+						ticket.note && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-xs text-(--muted-foreground)",
+							children: ticket.note
+						})
+					]
+				}) }, ticket.number))
+			}),
+			/* @__PURE__ */ jsx(FormResult, {
+				id: `${id}-result`,
+				text: result
+			})
+		]
+	});
+}
+export { AddItemButton, CreateIssueChoice, DraftFields, DraftTicketPart, PanelField, TicketSearch, TicketSearchPane };
+
+//# sourceMappingURL=AddItem.js.map

package/dist/board/AddItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddItem.js","names":[],"sources":["../../src/board/AddItem.tsx"],"sourcesContent":["// Lar Factory's Add item: the title bar's button that opens it, the New work pane's fields beside their details panel,\n// the panel's labelled fields and ticket part, the Create issue choice, and the Find a ticket pane with its search.\n\nimport { SquarePenIcon } from 'lucide-react';\nimport type { KeyboardEvent, ReactNode, Ref } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { FormResult } from '../feedback/FormResult';\nimport { FormFieldset } from '../forms/FormSection';\nimport { Input } from '../forms/Input';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { buttonKind } from './ButtonKinds';\nimport { DetailsHeading } from './ItemDetails';\n\n/** The title bar's Add item button, a Main action named by its `label`, which folds away, for screen readers only, on a\n *  title bar under 70rem; `title` gives it whole with its shortcut, which `keyShortcuts` names. */\nexport function AddItemButton({\n    label,\n    title,\n    keyShortcuts,\n    onOpen,\n}: {\n    label: string;\n    title: string;\n    keyShortcuts?: string;\n    onOpen: () => void;\n}) {\n    return (\n        <Button\n            {...buttonKind('main')}\n            className=\"add-item px-2\"\n            leftIcon={<SquarePenIcon />}\n            title={title}\n            aria-keyshortcuts={keyShortcuts}\n            onClick={onOpen}\n        >\n            <span className=\"@max-[70rem]:sr-only\">{label}</span>\n        </Button>\n    );\n}\n\n/**\n * A draft's fields as one group, which `disabled` locks: the `main` column (its title, editor and notes) beside the\n * `details` panel, which `detailsLabel` names. Narrower than 40rem the panel stacks under the main column, which then\n * grows with its text, and the two scroll as one; each row sizes to its content, so a long text pushes the panel down\n * rather than running under it.\n */\nexport function DraftFields({\n    id,\n    disabled,\n    detailsLabel,\n    main,\n    details,\n}: {\n    id: string;\n    disabled: boolean;\n    detailsLabel: string;\n    main: ReactNode;\n    details: ReactNode;\n}) {\n    return (\n        <div className=\"@container flex min-h-0 flex-1 flex-col\">\n            <FormFieldset\n                id={id}\n                presentation=\"group\"\n                disabled={disabled}\n                className=\"border-base-300 grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_16rem] border-t @max-[40rem]:auto-rows-max @max-[40rem]:grid-cols-[minmax(0,1fr)] @max-[40rem]:content-start @max-[40rem]:overflow-y-auto\"\n            >\n                <div className=\"flex min-h-0 flex-col gap-3 overflow-y-auto px-5 pt-4 pb-5 sm:px-6 @max-[40rem]:min-h-80 @max-[40rem]:overflow-visible\">\n                    {main}\n                </div>\n                <aside\n                    aria-label={detailsLabel}\n                    className=\"border-base-300 bg-base-50/60 grid content-start gap-5 overflow-y-auto border-l px-4 py-4 @max-[40rem]:overflow-visible @max-[40rem]:border-t @max-[40rem]:border-l-0\"\n                >\n                    {details}\n                </aside>\n            </FormFieldset>\n        </div>\n    );\n}\n\n/**\n * A field of a details panel under its small uppercase `heading`, which labels the field `htmlFor` names; without\n * `htmlFor`, the field is a group of controls that the heading names, such as a ticket's labels (`id` and `ref` reach\n * the group).\n */\nexport function PanelField({\n    heading,\n    htmlFor,\n    id,\n    ref,\n    children,\n}: {\n    heading: string;\n    htmlFor?: string;\n    id?: string;\n    ref?: Ref<HTMLDivElement>;\n    children: ReactNode;\n}) {\n    if (htmlFor)\n        return (\n            <div className=\"grid gap-1.5\">\n                <DetailsHeading presentation=\"label\" as=\"label\" htmlFor={htmlFor}>\n                    {heading}\n                </DetailsHeading>\n                {children}\n            </div>\n        );\n\n    return (\n        <div ref={ref} id={id} role=\"group\" aria-label={heading} className=\"grid gap-1.5\">\n            <DetailsHeading presentation=\"label\" as=\"span\">\n                {heading}\n            </DetailsHeading>\n            {children}\n        </div>\n    );\n}\n\n/** The details panel's ticket part, ruled off from the fields above it: a ticket's own fields, or what a draft without\n *  one keeps. */\nexport function DraftTicketPart({ children }: { children: ReactNode }) {\n    return <div className=\"border-base-300 grid gap-3 border-t pt-4\">{children}</div>;\n}\n\n/** Create issue in the footer: its `checkbox`, then the `reason` it can't be ticked, kept to a readable width, and any\n *  `error`. */\nexport function CreateIssueChoice({\n    checkbox,\n    reason,\n    error,\n}: {\n    checkbox: ReactNode;\n    reason?: ReactNode;\n    error?: ReactNode;\n}) {\n    return (\n        <div className=\"grid gap-1\">\n            {checkbox}\n            {reason && <div className=\"max-w-md\">{reason}</div>}\n            {error}\n        </div>\n    );\n}\n\n/** The Find a ticket pane, ruled off from the header: its notes and fields, one under the other, scrolling above the\n *  footer when a long result list needs it. */\nexport function TicketSearchPane({ id, children }: { id: string; children: ReactNode }) {\n    return (\n        <div\n            id={id}\n            className=\"border-base-300 grid min-h-0 content-start gap-4 overflow-y-auto border-t px-5 pt-4 pb-5 sm:px-6\"\n        >\n            {children}\n        </div>\n    );\n}\n\n/** A ticket a search found: its number, its title and a short `note`, such as that it is on the board already. */\nexport interface TicketSearchMatch {\n    number: number;\n    title: string;\n    note?: string | undefined;\n}\n\n/**\n * A search of a tracker's open tickets: the field (`fieldLabel` names it) with its Search button, which Enter also\n * runs, the matches, each a button that picks it, and the search's `result`, announced. `id` prefixes the field's,\n * the button's and the result's ids. `busy` stops a pick while a search or a pick runs, and `picking` marks the list\n * as busy.\n */\nexport function TicketSearch({\n    id,\n    query,\n    onQueryChange,\n    onSearch,\n    fieldLabel,\n    placeholder,\n    searchLabel,\n    disabled = false,\n    searchDisabled = false,\n    tickets,\n    listLabel,\n    busy = false,\n    picking = false,\n    onPick,\n    result,\n}: {\n    id: string;\n    query: string;\n    onQueryChange: (query: string) => void;\n    onSearch: () => void;\n    fieldLabel: string;\n    placeholder: string;\n    searchLabel: string;\n    disabled?: boolean | undefined;\n    searchDisabled?: boolean;\n    tickets: readonly TicketSearchMatch[];\n    listLabel: string;\n    busy?: boolean;\n    picking?: boolean;\n    onPick: (number: number) => void;\n    result: string;\n}) {\n    const onKey = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key !== 'Enter') return;\n\n        event.preventDefault();\n        onSearch();\n    };\n\n    return (\n        <div className=\"grid gap-2\" data-ticket-picker>\n            <div className=\"flex gap-2\">\n                <Input\n                    id={`${id}-query`}\n                    type=\"search\"\n                    value={query}\n                    onChange={(event) => onQueryChange(event.currentTarget.value)}\n                    onKeyDown={onKey}\n                    disabled={disabled}\n                    autoComplete=\"off\"\n                    aria-label={fieldLabel}\n                    placeholder={placeholder}\n                    className=\"min-w-0 flex-1\"\n                />\n                <Button {...buttonKind('other')} id={`${id}-search`} disabled={searchDisabled} onClick={onSearch}>\n                    {searchLabel}\n                </Button>\n            </div>\n            {tickets.length > 0 && (\n                <ul className=\"m-0 grid list-none gap-0.5 p-0\" aria-label={listLabel} aria-busy={picking}>\n                    {tickets.map((ticket) => (\n                        <li key={ticket.number}>\n                            <button\n                                {...tabbable}\n                                type=\"button\"\n                                data-ticket={ticket.number}\n                                disabled={busy}\n                                onClick={() => onPick(ticket.number)}\n                                className=\"hover:bg-base-200/70 focus-visible:outline-primary flex w-full min-w-0 items-baseline gap-2 rounded-md px-2 py-1.5 text-left text-sm focus-visible:outline-2 disabled:opacity-60\"\n                            >\n                                <span className=\"shrink-0 text-(--muted-foreground) tabular-nums\">\n                                    #{ticket.number}\n                                </span>\n                                <span className=\"min-w-0 flex-1 truncate\">{ticket.title}</span>\n                                {ticket.note && (\n                                    <span className=\"shrink-0 text-xs text-(--muted-foreground)\">{ticket.note}</span>\n                                )}\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            )}\n            <FormResult id={`${id}-result`} text={result} />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/board/Archive.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+/** A row's actions at its right, with what they last did and an error under them. */
+export declare function ActionStack({ children, below, error }: {
+  children: ReactNode;
+  below?: ReactNode;
+  error?: string | null;
+}): import("react").JSX.Element;
+/** A setting's confirmation, inline under it, before it saves: what it would do now, the work it names, and the
+ *  buttons that cancel or go ahead. */
+export declare function SettingConfirm({ label, message, items, actions }: {
+  label: string;
+  message: string;
+  items: readonly string[];
+  actions: ReactNode;
+}): import("react").JSX.Element;
+/** What a setting's last run did, and each thing it kept with why. */
+export declare function SettingLastRun({ summary, kept }: {
+  summary: string;
+  kept: readonly string[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=Archive.d.ts.map

package/dist/board/Archive.js

@@ -0,0 +1,63 @@
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Archive.tsx
+/** A row's actions at its right, with what they last did and an error under them. */
+function ActionStack({ children, below, error }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex flex-col items-end gap-1",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex flex-wrap items-center gap-2",
+				children
+			}),
+			below,
+			error && /* @__PURE__ */ jsx(Text, {
+				variant: "caption",
+				tone: "danger",
+				role: "alert",
+				children: error
+			})
+		]
+	});
+}
+/** A setting's confirmation, inline under it, before it saves: what it would do now, the work it names, and the
+*  buttons that cancel or go ahead. */
+function SettingConfirm({ label, message, items, actions }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-2 rounded-lg border border-(--border) p-3 text-sm",
+		role: "alertdialog",
+		"aria-label": label,
+		"data-delete-confirm": true,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "m-0",
+				children: message
+			}),
+			items.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "m-0 grid gap-0.5 pl-4",
+				children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: item }, index))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex gap-2",
+				children: actions
+			})
+		]
+	});
+}
+/** What a setting's last run did, and each thing it kept with why. */
+function SettingLastRun({ summary, kept }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-1 text-xs text-(--muted-foreground)",
+		"data-last-delete": true,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "m-0",
+			children: summary
+		}), kept.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "m-0 grid gap-0.5 pl-4",
+			children: kept.map((line, index) => /* @__PURE__ */ jsx("li", { children: line }, index))
+		})]
+	});
+}
+export { ActionStack, SettingConfirm, SettingLastRun };
+
+//# sourceMappingURL=Archive.js.map

package/dist/board/Archive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Archive.js","names":[],"sources":["../../src/board/Archive.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Text } from '../typography/Typography';\n\n/** A row's actions at its right, with what they last did and an error under them. */\nexport function ActionStack({\n    children,\n    below,\n    error,\n}: {\n    children: ReactNode;\n    below?: ReactNode;\n    error?: string | null;\n}) {\n    return (\n        <span className=\"flex flex-col items-end gap-1\">\n            <span className=\"flex flex-wrap items-center gap-2\">{children}</span>\n            {below}\n            {error && (\n                <Text variant=\"caption\" tone=\"danger\" role=\"alert\">\n                    {error}\n                </Text>\n            )}\n        </span>\n    );\n}\n\n/** A setting's confirmation, inline under it, before it saves: what it would do now, the work it names, and the\n *  buttons that cancel or go ahead. */\nexport function SettingConfirm({\n    label,\n    message,\n    items,\n    actions,\n}: {\n    label: string;\n    message: string;\n    items: readonly string[];\n    actions: ReactNode;\n}) {\n    return (\n        <div\n            className=\"grid gap-2 rounded-lg border border-(--border) p-3 text-sm\"\n            role=\"alertdialog\"\n            aria-label={label}\n            data-delete-confirm\n        >\n            <p className=\"m-0\">{message}</p>\n            {items.length > 0 && (\n                <ul className=\"m-0 grid gap-0.5 pl-4\">\n                    {items.map((item, index) => (\n                        <li key={index}>{item}</li>\n                    ))}\n                </ul>\n            )}\n            <span className=\"flex gap-2\">{actions}</span>\n        </div>\n    );\n}\n\n/** What a setting's last run did, and each thing it kept with why. */\nexport function SettingLastRun({ summary, kept }: { summary: string; kept: readonly string[] }) {\n    return (\n        <div className=\"grid gap-1 text-xs text-(--muted-foreground)\" data-last-delete>\n            <p className=\"m-0\">{summary}</p>\n            {kept.length > 0 && (\n                <ul className=\"m-0 grid gap-0.5 pl-4\">\n                    {kept.map((line, index) => (\n                        <li key={index}>{line}</li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;AAKA,SAAgB,YAAY,EACxB,UACA,OACA,SAKD;CACC,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACI,oBAAC,QAAD;IAAM,WAAU;IAAqC;GAAe,CAAA;GACnE;GACA,SACG,oBAAC,MAAD;IAAM,SAAQ;IAAU,MAAK;IAAS,MAAK;IACtC,UAAA;GACC,CAAA;EAER;;AAEd;;;AAIA,SAAgB,eAAe,EAC3B,OACA,SACA,OACA,WAMD;CACC,OACI,qBAAC,OAAD;EACI,WAAU;EACV,MAAK;EACL,cAAY;EACZ,uBAAA;EAJJ,UAAA;GAMI,oBAAC,KAAD;IAAG,WAAU;IAAO,UAAA;GAAW,CAAA;GAC9B,MAAM,SAAS,KACZ,oBAAC,MAAD;IAAI,WAAU;IACT,UAAA,MAAM,KAAK,MAAM,UACd,oBAAC,MAAD,EAAA,UAAiB,KAAS,GAAjB,KAAiB,CAC7B;GACD,CAAA;GAER,oBAAC,QAAD;IAAM,WAAU;IAAc,UAAA;GAAc,CAAA;EAC3C;;AAEb;;AAGA,SAAgB,eAAe,EAAE,SAAS,QAAsD;CAC5F,OACI,qBAAC,OAAD;EAAK,WAAU;EAA+C,oBAAA;EAA9D,UAAA,CACI,oBAAC,KAAD;GAAG,WAAU;GAAO,UAAA;EAAW,CAAA,GAC9B,KAAK,SAAS,KACX,oBAAC,MAAD;GAAI,WAAU;GACT,UAAA,KAAK,KAAK,MAAM,UACb,oBAAC,MAAD,EAAA,UAAiB,KAAS,GAAjB,KAAiB,CAC7B;EACD,CAAA,CAEP;;AAEb"}

package/dist/board/Attention.d.ts

@@ -0,0 +1,66 @@
+import { DataAttributes } from "./DataAttributes.js";
+import { ReactNode } from "react";
+declare const TONE: {
+  readonly yours: 'text-(--warning-foreground)';
+  readonly decision: 'text-(--primary)';
+  readonly blocked: 'text-(--st-review)';
+  readonly waiting: 'text-(--muted-foreground)';
+  readonly ready: 'text-(--st-now)';
+  readonly fog: 'text-(--st-amber)';
+};
+/** An attention row's tone, which colours its label. */
+export type AttentionTone = keyof typeof TONE;
+/** The attention rows, each a label in its tone with how many entries it has, then its entries. */
+export declare function AttentionList({ rows }: {
+  rows: {
+    key: string;
+    label: string;
+    tone: AttentionTone;
+    entries: ReactNode[];
+  }[];
+}): import("react").JSX.Element;
+/** What the attention list says when nothing holds the work up. */
+export declare function AttentionNone({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** One entry of an attention row, with what it waits on or its next action at the right. */
+export declare function AttentionEntry({ main, side }: {
+  main: ReactNode;
+  side?: ReactNode;
+}): import("react").JSX.Element;
+/** An entry's text as a plain button that opens what it names. */
+export declare function EntryButton({ onOpen, children }: {
+  onOpen: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A reference to an item, such as `#12`, as a button that opens it; `title` names it. */
+export declare function RefButton({ title, onOpen, children }: {
+  title: string;
+  onOpen: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare const MARKS: {
+  readonly blocked: import("react").JSX.Element;
+  readonly met: import("react").JSX.Element;
+  readonly fog: import("react").JSX.Element;
+};
+/** An entry's text after a mark: blocked, met, or an open question (fog). `clamp` keeps it to two lines. */
+export declare function AttentionMark({ mark, clamp, children, ...data }: {
+  mark: keyof typeof MARKS;
+  clamp?: boolean;
+  children: ReactNode;
+} & DataAttributes): import("react").JSX.Element;
+/** A part's source, status glyph and title, up to two lines. */
+export declare function PartName({ source, glyph, children }: {
+  source: ReactNode;
+  glyph: ReactNode;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A part's PartName as a button that opens it; `title` names it. */
+export declare function PartLink({ title, onOpen, children }: {
+  title: string;
+  onOpen: () => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Attention.d.ts.map

package/dist/board/Attention.js

@@ -0,0 +1,122 @@
+import { ROW_OPENS } from "./RowStyles.js";
+import { BanIcon, CheckIcon, CircleHelpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/Attention.tsx
+const TONE = {
+	yours: "text-(--warning-foreground)",
+	decision: "text-(--primary)",
+	blocked: "text-(--st-review)",
+	waiting: "text-(--muted-foreground)",
+	ready: "text-(--st-now)",
+	fog: "text-(--st-amber)"
+};
+/** The attention rows, each a label in its tone with how many entries it has, then its entries. */
+function AttentionList({ rows }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: "m-0 grid grid-cols-[minmax(7.5rem,max-content)_minmax(0,1fr)] gap-x-4 gap-y-2",
+		"data-attention": true,
+		children: rows.map((r) => /* @__PURE__ */ jsxs("div", {
+			className: "contents",
+			"data-attention-row": r.key,
+			children: [/* @__PURE__ */ jsxs("dt", {
+				className: `pt-2 text-[11px] font-medium tracking-wide whitespace-nowrap uppercase ${TONE[r.tone]}`,
+				children: [
+					r.label,
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: r.entries.length
+					})
+				]
+			}), /* @__PURE__ */ jsx("dd", {
+				className: "m-0 grid gap-1",
+				children: r.entries
+			})]
+		}, r.key))
+	});
+}
+/** What the attention list says when nothing holds the work up. */
+function AttentionNone({ children }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: "m-0 text-[13px] text-(--muted-foreground)",
+		"data-attention-none": true,
+		children
+	});
+}
+/** One entry of an attention row, with what it waits on or its next action at the right. */
+function AttentionEntry({ main, side }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-9 min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 rounded-md px-2 py-1.5 hover:bg-(--soft)",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 basis-64",
+			children: main
+		}), side && /* @__PURE__ */ jsx("span", {
+			className: "ml-auto shrink-0 text-xs text-(--muted-foreground)",
+			children: side
+		})]
+	});
+}
+/** An entry's text as a plain button that opens what it names. */
+function EntryButton({ onOpen, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onOpen,
+		children
+	});
+}
+/** A reference to an item, such as `#12`, as a button that opens it; `title` names it. */
+function RefButton({ title, onOpen, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onOpen,
+		title,
+		className: "rounded px-0.5 font-medium text-(--primary) tabular-nums hover:bg-(--accent)",
+		children
+	});
+}
+const MARKS = {
+	blocked: /* @__PURE__ */ jsx(BanIcon, { className: "mt-0.5 size-3.5 shrink-0 text-(--st-review)" }),
+	met: /* @__PURE__ */ jsx(CheckIcon, { className: "mt-0.5 size-3.5 shrink-0 text-(--st-done)" }),
+	fog: /* @__PURE__ */ jsx(CircleHelpIcon, { className: "mt-0.5 size-3.5 shrink-0 text-(--st-amber)" })
+};
+/** An entry's text after a mark: blocked, met, or an open question (fog). `clamp` keeps it to two lines. */
+function AttentionMark({ mark, clamp = false, children, ...data }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...data,
+		className: `flex ${clamp ? "min-w-0 " : ""}items-start gap-1.5 text-[13px]`,
+		children: [MARKS[mark], /* @__PURE__ */ jsx("span", {
+			className: clamp ? "line-clamp-2" : void 0,
+			children
+		})]
+	});
+}
+/** A part's source, status glyph and title, up to two lines. */
+function PartName({ source, glyph, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-start gap-1.5 text-sm",
+		children: [
+			source,
+			/* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 inline-flex",
+				children: glyph
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "line-clamp-2",
+				children
+			})
+		]
+	});
+}
+/** A part's PartName as a button that opens it; `title` names it. */
+function PartLink({ title, onOpen, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onOpen,
+		title,
+		className: `min-w-0 rounded text-left hover:underline ${ROW_OPENS}`,
+		children
+	});
+}
+export { AttentionEntry, AttentionList, AttentionMark, AttentionNone, EntryButton, PartLink, PartName, RefButton };
+
+//# sourceMappingURL=Attention.js.map

package/dist/board/Attention.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attention.js","names":[],"sources":["../../src/board/Attention.tsx"],"sourcesContent":["// An expanded dossier's attention list: what keeps its work moving, as labelled rows of entries, and the parts and\n// references its entries name.\n\nimport { BanIcon, CheckIcon, CircleHelpIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport type { DataAttributes } from './DataAttributes';\nimport { ROW_OPENS } from './RowStyles';\n\nconst TONE = {\n    yours: 'text-(--warning-foreground)',\n    decision: 'text-(--primary)',\n    blocked: 'text-(--st-review)',\n    waiting: 'text-(--muted-foreground)',\n    ready: 'text-(--st-now)',\n    fog: 'text-(--st-amber)',\n} as const;\n\n/** An attention row's tone, which colours its label. */\nexport type AttentionTone = keyof typeof TONE;\n\n/** The attention rows, each a label in its tone with how many entries it has, then its entries. */\nexport function AttentionList({\n    rows,\n}: {\n    rows: { key: string; label: string; tone: AttentionTone; entries: ReactNode[] }[];\n}) {\n    return (\n        // The labels' column is 7.5rem, or as wide as the longest label so none wraps (\"To verify or merge\" needs more).\n        <dl className=\"m-0 grid grid-cols-[minmax(7.5rem,max-content)_minmax(0,1fr)] gap-x-4 gap-y-2\" data-attention>\n            {rows.map((r) => (\n                <div key={r.key} className=\"contents\" data-attention-row={r.key}>\n                    <dt\n                        className={`pt-2 text-[11px] font-medium tracking-wide whitespace-nowrap uppercase ${TONE[r.tone]}`}\n                    >\n                        {r.label} <span className=\"tabular-nums\">{r.entries.length}</span>\n                    </dt>\n                    <dd className=\"m-0 grid gap-1\">{r.entries}</dd>\n                </div>\n            ))}\n        </dl>\n    );\n}\n\n/** What the attention list says when nothing holds the work up. */\nexport function AttentionNone({ children }: { children: ReactNode }) {\n    return (\n        <p className=\"m-0 text-[13px] text-(--muted-foreground)\" data-attention-none>\n            {children}\n        </p>\n    );\n}\n\n/** One entry of an attention row, with what it waits on or its next action at the right. */\nexport function AttentionEntry({ main, side }: { main: ReactNode; side?: ReactNode }) {\n    return (\n        <div className=\"flex min-h-9 min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 rounded-md px-2 py-1.5 hover:bg-(--soft)\">\n            <span className=\"min-w-0 flex-1 basis-64\">{main}</span>\n            {side && <span className=\"ml-auto shrink-0 text-xs text-(--muted-foreground)\">{side}</span>}\n        </div>\n    );\n}\n\n/** An entry's text as a plain button that opens what it names. */\nexport function EntryButton({ onOpen, children }: { onOpen: () => void; children: ReactNode }) {\n    return (\n        <button type=\"button\" onClick={onOpen}>\n            {children}\n        </button>\n    );\n}\n\n/** A reference to an item, such as `#12`, as a button that opens it; `title` names it. */\nexport function RefButton({ title, onOpen, children }: { title: string; onOpen: () => void; children: ReactNode }) {\n    return (\n        <button\n            type=\"button\"\n            onClick={onOpen}\n            title={title}\n            className=\"rounded px-0.5 font-medium text-(--primary) tabular-nums hover:bg-(--accent)\"\n        >\n            {children}\n        </button>\n    );\n}\n\nconst MARKS = {\n    blocked: <BanIcon className=\"mt-0.5 size-3.5 shrink-0 text-(--st-review)\" />,\n    met: <CheckIcon className=\"mt-0.5 size-3.5 shrink-0 text-(--st-done)\" />,\n    fog: <CircleHelpIcon className=\"mt-0.5 size-3.5 shrink-0 text-(--st-amber)\" />,\n} as const;\n\n/** An entry's text after a mark: blocked, met, or an open question (fog). `clamp` keeps it to two lines. */\nexport function AttentionMark({\n    mark,\n    clamp = false,\n    children,\n    ...data\n}: {\n    mark: keyof typeof MARKS;\n    clamp?: boolean;\n    children: ReactNode;\n} & DataAttributes) {\n    return (\n        <span {...data} className={`flex ${clamp ? 'min-w-0 ' : ''}items-start gap-1.5 text-[13px]`}>\n            {MARKS[mark]}\n            <span className={clamp ? 'line-clamp-2' : undefined}>{children}</span>\n        </span>\n    );\n}\n\n/** A part's source, status glyph and title, up to two lines. */\nexport function PartName({ source, glyph, children }: { source: ReactNode; glyph: ReactNode; children: ReactNode }) {\n    return (\n        <span className=\"flex min-w-0 items-start gap-1.5 text-sm\">\n            {source}\n            <span className=\"mt-0.5 inline-flex\">{glyph}</span>\n            <span className=\"line-clamp-2\">{children}</span>\n        </span>\n    );\n}\n\n/** A part's PartName as a button that opens it; `title` names it. */\nexport function PartLink({ title, onOpen, children }: { title: string; onOpen: () => void; children: ReactNode }) {\n    return (\n        <button\n            type=\"button\"\n            onClick={onOpen}\n            title={title}\n            className={`min-w-0 rounded text-left hover:underline ${ROW_OPENS}`}\n        >\n            {children}\n        </button>\n    );\n}\n"],"mappings":";;;;AASA,MAAM,OAAO;CACT,OAAO;CACP,UAAU;CACV,SAAS;CACT,SAAS;CACT,OAAO;CACP,KAAK;AACT;;AAMA,SAAgB,cAAc,EAC1B,QAGD;CACC,OAEI,oBAAC,MAAD;EAAI,WAAU;EAAgF,kBAAA;EACzF,UAAA,KAAK,KAAK,MACP,qBAAC,OAAD;GAAiB,WAAU;GAAW,sBAAoB,EAAE;GAA5D,UAAA,CACI,qBAAC,MAAD;IACI,WAAW,0EAA0E,KAAK,EAAE;IADhG,UAAA;KAGK,EAAE;KAAM;KAAC,oBAAC,QAAD;MAAM,WAAU;MAAgB,UAAA,EAAE,QAAQ;KAAa,CAAA;IACjE;GACJ,CAAA,GAAA,oBAAC,MAAD;IAAI,WAAU;IAAkB,UAAA,EAAE;GAAY,CAAA,CAC7C;EAPK,GAAA,EAAE,GAOP,CACR;CACD,CAAA;AAEZ;;AAGA,SAAgB,cAAc,EAAE,YAAqC;CACjE,OACI,oBAAC,KAAD;EAAG,WAAU;EAA4C,uBAAA;EACpD;CACF,CAAA;AAEX;;AAGA,SAAgB,eAAe,EAAE,MAAM,QAA+C;CAClF,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAW,CAAA,GACrD,QAAQ,oBAAC,QAAD;GAAM,WAAU;GAAsD,UAAA;EAAW,CAAA,CACzF;;AAEb;;AAGA,SAAgB,YAAY,EAAE,QAAQ,YAAyD;CAC3F,OACI,oBAAC,UAAD;EAAQ,MAAK;EAAS,SAAS;EAC1B;CACG,CAAA;AAEhB;;AAGA,SAAgB,UAAU,EAAE,OAAO,QAAQ,YAAwE;CAC/G,OACI,oBAAC,UAAD;EACI,MAAK;EACL,SAAS;EACF;EACP,WAAU;EAET;CACG,CAAA;AAEhB;AAEA,MAAM,QAAQ;CACV,SAAS,oBAAC,SAAD,EAAS,WAAU,8CAA+C,CAAA;CAC3E,KAAK,oBAAC,WAAD,EAAW,WAAU,4CAA6C,CAAA;CACvE,KAAK,oBAAC,gBAAD,EAAgB,WAAU,6CAA8C,CAAA;AACjF;;AAGA,SAAgB,cAAc,EAC1B,MACA,QAAQ,OACR,UACA,GAAG,QAKa;CAChB,OACI,qBAAC,QAAD;EAAM,GAAI;EAAM,WAAW,QAAQ,QAAQ,aAAa,GAAG;EAA3D,UAAA,CACK,MAAM,OACP,oBAAC,QAAD;GAAM,WAAW,QAAQ,iBAAiB,KAAA;GAAY;EAAe,CAAA,CACnE;;AAEd;;AAGA,SAAgB,SAAS,EAAE,QAAQ,OAAO,YAA0E;CAChH,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACK;GACD,oBAAC,QAAD;IAAM,WAAU;IAAsB,UAAA;GAAY,CAAA;GAClD,oBAAC,QAAD;IAAM,WAAU;IAAgB;GAAe,CAAA;EAC7C;;AAEd;;AAGA,SAAgB,SAAS,EAAE,OAAO,QAAQ,YAAwE;CAC9G,OACI,oBAAC,UAAD;EACI,MAAK;EACL,SAAS;EACF;EACP,WAAW,6CAA6C;EAEvD;CACG,CAAA;AAEhB"}

package/dist/board/BoardShell.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+/** Lar Factory's window: the board's main area filling the window, and beside it, outside `main`, what sits over the
+ *  board (its dialogs, live regions and notifications), so their announcements sit apart from the page. */
+export declare function BoardShell({ children, overlays }: {
+  children: ReactNode;
+  overlays?: ReactNode;
+}): import("react").JSX.Element;
+/** Everything under the title bar, which scrolls as one page; nothing in it shrinks to fit. */
+export declare function BoardContent({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A line that stands in for content the board is still reading, centred in its area. */
+export declare function ReadingLine({ label }: {
+  label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=BoardShell.d.ts.map

package/dist/board/BoardShell.js

@@ -0,0 +1,35 @@
+import { Loading } from "../feedback/Loading.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/board/BoardShell.tsx
+/** Lar Factory's window: the board's main area filling the window, and beside it, outside `main`, what sits over the
+*  board (its dialogs, live regions and notifications), so their announcements sit apart from the page. */
+function BoardShell({ children, overlays }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 flex flex-col bg-(--background) text-(--foreground)",
+		children: [/* @__PURE__ */ jsx("main", {
+			className: "flex min-h-0 min-w-0 flex-1 flex-col",
+			children
+		}), overlays]
+	});
+}
+/** Everything under the title bar, which scrolls as one page; nothing in it shrinks to fit. */
+function BoardContent({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-6 pt-3 pb-4 *:shrink-0",
+		children
+	});
+}
+/** A line that stands in for content the board is still reading, centred in its area. */
+function ReadingLine({ label }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: "text-base-700 m-0 flex items-center justify-center gap-2 p-6 text-sm",
+		"data-reading": true,
+		children: /* @__PURE__ */ jsx(Loading, {
+			label,
+			presentation: "line"
+		})
+	});
+}
+export { BoardContent, BoardShell, ReadingLine };
+
+//# sourceMappingURL=BoardShell.js.map

package/dist/board/BoardShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardShell.js","names":[],"sources":["../../src/board/BoardShell.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Loading } from '../feedback/Loading';\n\n/** Lar Factory's window: the board's main area filling the window, and beside it, outside `main`, what sits over the\n *  board (its dialogs, live regions and notifications), so their announcements sit apart from the page. */\nexport function BoardShell({ children, overlays }: { children: ReactNode; overlays?: ReactNode }) {\n    return (\n        <div className=\"fixed inset-0 flex flex-col bg-(--background) text-(--foreground)\">\n            <main className=\"flex min-h-0 min-w-0 flex-1 flex-col\">{children}</main>\n            {overlays}\n        </div>\n    );\n}\n\n/** Everything under the title bar, which scrolls as one page; nothing in it shrinks to fit. */\nexport function BoardContent({ children }: { children: ReactNode }) {\n    return (\n        <div className=\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-6 pt-3 pb-4 *:shrink-0\">{children}</div>\n    );\n}\n\n/** A line that stands in for content the board is still reading, centred in its area. */\nexport function ReadingLine({ label }: { label: string }) {\n    return (\n        <p className=\"text-base-700 m-0 flex items-center justify-center gap-2 p-6 text-sm\" data-reading>\n            <Loading label={label} presentation=\"line\" />\n        </p>\n    );\n}\n"],"mappings":";;;;;AAMA,SAAgB,WAAW,EAAE,UAAU,YAA2D;CAC9F,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,oBAAC,QAAD;GAAM,WAAU;GAAwC;EAAe,CAAA,GACtE,QACA;;AAEb;;AAGA,SAAgB,aAAa,EAAE,YAAqC;CAChE,OACI,oBAAC,OAAD;EAAK,WAAU;EAAgF;CAAc,CAAA;AAErH;;AAGA,SAAgB,YAAY,EAAE,SAA4B;CACtD,OACI,oBAAC,KAAD;EAAG,WAAU;EAAuE,gBAAA;EAChF,UAAA,oBAAC,SAAD;GAAgB;GAAO,cAAa;EAAQ,CAAA;CAC7C,CAAA;AAEX"}