@lar-works/design-system 0.2.0 → 0.3.0

package/dist/display/LabelChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelChip.js","names":[],"sources":["../../src/display/LabelChip.tsx"],"sourcesContent":["import { LockIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { Badge } from './Badge';\n\ntype DataAttributes = { [key: `data-${string}`]: string | undefined };\n\ninterface LabelChipProps extends DataAttributes {\n    /** The label's name, truncating, which its tooltip gives whole. */\n    label: string;\n    /** The label's own colour, such as a tracker's, as Badge's `labelColor`; none keeps the neutral badge. */\n    color?: string | undefined;\n    /** Follows the name, faded, such as \"new\" for a label still to be created. */\n    note?: ReactNode;\n    /** A lock before the name, for a label that can't be edited here; `lockedLabel` says why. */\n    locked?: boolean;\n    lockedLabel?: string;\n    /** A × after the name, for a chip inside a control that removes it, such as an active filter's. */\n    removable?: boolean;\n    /** Its own × button, which `removeLabel` names, that removes the label. */\n    onRemove?: () => void;\n    removeLabel?: string;\n    disabled?: boolean;\n}\n\n/** A label as a chip in its own colour, such as a tracker's: its name truncating, then any note, and a lock or a × that\n *  removes it. */\nexport function LabelChip({\n    label,\n    color,\n    note,\n    locked = false,\n    lockedLabel,\n    removable = false,\n    onRemove,\n    removeLabel,\n    disabled = false,\n    ...data\n}: LabelChipProps) {\n    return (\n        <Badge\n            data-label-chip=\"\"\n            {...data}\n            title={locked ? lockedLabel : undefined}\n            className=\"max-w-full min-w-0\"\n            labelColor={color}\n        >\n            {locked && <LockIcon aria-label={lockedLabel} />}\n            <span className=\"max-w-52 truncate\" title={label}>\n                {label}\n            </span>\n            {note && (\n                <>\n                    {' '}\n                    <span className=\"opacity-70\">{note}</span>\n                </>\n            )}\n            {onRemove ? (\n                <button\n                    type=\"button\"\n                    className=\"cursor-pointer bg-transparent p-0\"\n                    aria-label={removeLabel}\n                    disabled={disabled}\n                    onClick={onRemove}\n                >\n                    ×\n                </button>\n            ) : (\n                removable && <span aria-hidden=\"true\">×</span>\n            )}\n        </Badge>\n    );\n}\n"],"mappings":";;;;;;AA2BA,SAAgB,UAAU,EACtB,OACA,OACA,MACA,SAAS,OACT,aACA,YAAY,OACZ,UACA,aACA,WAAW,OACX,GAAG,QACY;CACf,OACI,qBAAC,OAAD;EACI,mBAAgB;EAChB,GAAI;EACJ,OAAO,SAAS,cAAc,KAAA;EAC9B,WAAU;EACV,YAAY;EALhB,UAAA;GAOK,UAAU,oBAAC,UAAD,EAAU,cAAY,YAAc,CAAA;GAC/C,oBAAC,QAAD;IAAM,WAAU;IAAoB,OAAO;IACtC,UAAA;GACC,CAAA;GACL,QACG,qBAAA,UAAA,EAAA,UAAA,CACK,KACD,oBAAC,QAAD;IAAM,WAAU;IAAc,UAAA;GAAW,CAAA,CAC3C,EAAA,CAAA;GAEL,WACG,oBAAC,UAAD;IACI,MAAK;IACL,WAAU;IACV,cAAY;IACF;IACV,SAAS;IACZ,UAAA;GAEO,CAAA,IAER,aAAa,oBAAC,QAAD;IAAM,eAAY;IAAO,UAAA;GAAO,CAAA;EAE9C;;AAEf"}

package/dist/display/LabelTint.js

@@ -0,0 +1,60 @@
+// src/display/LabelTint.ts
+/** WCAG AA for text this small. */
+const CONTRAST_FLOOR = 4.5;
+/** The palette's foreground, and the surface a chip's text contrasts least with: the accent a hovered or picked row fills with. */
+const PALETTE = {
+	light: {
+		foreground: "#27272a",
+		surface: "#f4f4f5"
+	},
+	dark: {
+		foreground: "#f5f5f5",
+		surface: "#161616"
+	}
+};
+const FILL = .16;
+const TEXT_SHARE = .55;
+const rgbOf = (hex) => {
+	const digits = /^#?([0-9a-f]{6})$/i.exec(hex)?.[1];
+	return digits ? [
+		0,
+		2,
+		4
+	].map((at) => parseInt(digits.slice(at, at + 2), 16)) : null;
+};
+const mixed = (a, b, share) => a.map((part, at) => part * share + b[at] * (1 - share));
+const hexOf = (color) => `#${color.map((part) => Math.round(part).toString(16).padStart(2, "0")).join("")}`;
+const luminance = (color) => {
+	const [r, g, b] = color.map((part) => {
+		const linear = part / 255;
+		return linear <= .03928 ? linear / 12.92 : ((linear + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+};
+/** The WCAG contrast ratio of two colours. */
+function contrastRatio(a, b) {
+	const [lighter, darker] = [luminance(rgbOf(a)), luminance(rgbOf(b))].sort((x, y) => y - x);
+	return (lighter + .05) / (darker + .05);
+}
+/** A chip's fill in `mode`, as tint's `color-mix` paints it over the palette's surface. */
+const chipFill = (color, mode) => hexOf(mixed(rgbOf(color), rgbOf(PALETTE[mode].surface), FILL));
+/** A chip's text in `mode`: as much of the label's colour as the contrast floor allows. The foreground alone always clears it. */
+function chipText(color, mode) {
+	const label = rgbOf(color);
+	const foreground = rgbOf(PALETTE[mode].foreground);
+	const fill = chipFill(color, mode);
+	for (let share = TEXT_SHARE; share > 0; share -= .05) {
+		const text = hexOf(mixed(label, foreground, share));
+		if (contrastRatio(text, fill) >= 4.5) return text;
+	}
+	return PALETTE[mode].foreground;
+}
+/** A soft tint of a tracker's label colour with its name readable in both modes; none, or one that isn't a colour, keeps the Badge's neutral style. */
+const tint = (color) => color && rgbOf(color) ? {
+	backgroundColor: `color-mix(in srgb, ${color} ${FILL * 100}%, transparent)`,
+	color: `light-dark(${chipText(color, "light")}, ${chipText(color, "dark")})`,
+	boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color} 40%, transparent)`
+} : void 0;
+export { CONTRAST_FLOOR, PALETTE, chipFill, chipText, contrastRatio, tint };
+
+//# sourceMappingURL=LabelTint.js.map

package/dist/display/LabelTint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelTint.js","names":[],"sources":["../../src/display/LabelTint.ts"],"sourcesContent":["// A tracker's label colour (GitHub's, say) as a chip's style. A label's colour says nothing about what it sits on, so the text starts from a\n// mix with the foreground and moves towards the foreground, in each mode, until it reaches the contrast a chip's name needs.\n\ntype Rgb = readonly [number, number, number];\ntype Mode = 'light' | 'dark';\n\n/** WCAG AA for text this small. */\nexport const CONTRAST_FLOOR = 4.5;\n\n/** The palette's foreground, and the surface a chip's text contrasts least with: the accent a hovered or picked row fills with. */\nexport const PALETTE: Record<Mode, { foreground: string; surface: string }> = {\n    light: { foreground: '#27272a', surface: '#f4f4f5' },\n    dark: { foreground: '#f5f5f5', surface: '#161616' },\n};\n\nconst FILL = 0.16;\nconst TEXT_SHARE = 0.55;\n\nconst rgbOf = (hex: string): Rgb | null => {\n    const digits = /^#?([0-9a-f]{6})$/i.exec(hex)?.[1];\n\n    return digits ? ([0, 2, 4].map((at) => parseInt(digits.slice(at, at + 2), 16)) as unknown as Rgb) : null;\n};\nconst mixed = (a: Rgb, b: Rgb, share: number): Rgb =>\n    a.map((part, at) => part * share + b[at]! * (1 - share)) as unknown as Rgb;\nconst hexOf = (color: Rgb) => `#${color.map((part) => Math.round(part).toString(16).padStart(2, '0')).join('')}`;\n\nconst luminance = (color: Rgb): number => {\n    const [r, g, b] = color.map((part) => {\n        const linear = part / 255;\n\n        return linear <= 0.03928 ? linear / 12.92 : ((linear + 0.055) / 1.055) ** 2.4;\n    }) as unknown as Rgb;\n\n    return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\n/** The WCAG contrast ratio of two colours. */\nexport function contrastRatio(a: string, b: string): number {\n    const [lighter, darker] = [luminance(rgbOf(a)!), luminance(rgbOf(b)!)].sort((x, y) => y - x) as [number, number];\n\n    return (lighter + 0.05) / (darker + 0.05);\n}\n\n/** A chip's fill in `mode`, as tint's `color-mix` paints it over the palette's surface. */\nexport const chipFill = (color: string, mode: Mode): string =>\n    hexOf(mixed(rgbOf(color)!, rgbOf(PALETTE[mode].surface)!, FILL));\n\n/** A chip's text in `mode`: as much of the label's colour as the contrast floor allows. The foreground alone always clears it. */\nexport function chipText(color: string, mode: Mode): string {\n    const label = rgbOf(color)!;\n    const foreground = rgbOf(PALETTE[mode].foreground)!;\n    const fill = chipFill(color, mode);\n\n    for (let share = TEXT_SHARE; share > 0; share -= 0.05) {\n        const text = hexOf(mixed(label, foreground, share));\n\n        if (contrastRatio(text, fill) >= CONTRAST_FLOOR) return text;\n    }\n\n    return PALETTE[mode].foreground;\n}\n\n/** A soft tint of a tracker's label colour with its name readable in both modes; none, or one that isn't a colour, keeps the Badge's neutral style. */\nexport const tint = (color: string | undefined) =>\n    color && rgbOf(color)\n        ? {\n              backgroundColor: `color-mix(in srgb, ${color} ${FILL * 100}%, transparent)`,\n              color: `light-dark(${chipText(color, 'light')}, ${chipText(color, 'dark')})`,\n              boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color} 40%, transparent)`,\n          }\n        : undefined;\n"],"mappings":";;AAOA,MAAa,iBAAiB;;AAG9B,MAAa,UAAiE;CAC1E,OAAO;EAAE,YAAY;EAAW,SAAS;CAAU;CACnD,MAAM;EAAE,YAAY;EAAW,SAAS;CAAU;AACtD;AAEA,MAAM,OAAO;AACb,MAAM,aAAa;AAEnB,MAAM,SAAS,QAA4B;CACvC,MAAM,SAAS,qBAAqB,KAAK,GAAG,CAAC,GAAG;CAEhD,OAAO,SAAU;EAAC;EAAG;EAAG;CAAC,CAAC,CAAC,KAAK,OAAO,SAAS,OAAO,MAAM,IAAI,KAAK,CAAC,GAAG,EAAE,CAAC,IAAuB;AACxG;AACA,MAAM,SAAS,GAAQ,GAAQ,UAC3B,EAAE,KAAK,MAAM,OAAO,OAAO,QAAQ,EAAE,OAAQ,IAAI,MAAM;AAC3D,MAAM,SAAS,UAAe,IAAI,MAAM,KAAK,SAAS,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;AAE7G,MAAM,aAAa,UAAuB;CACtC,MAAM,CAAC,GAAG,GAAG,KAAK,MAAM,KAAK,SAAS;EAClC,MAAM,SAAS,OAAO;EAEtB,OAAO,UAAU,SAAU,SAAS,UAAU,SAAS,QAAS,UAAU;CAC9E,CAAC;CAED,OAAO,QAAS,IAAI,QAAS,IAAI,QAAS;AAC9C;;AAGA,SAAgB,cAAc,GAAW,GAAmB;CACxD,MAAM,CAAC,SAAS,UAAU,CAAC,UAAU,MAAM,CAAC,CAAE,GAAG,UAAU,MAAM,CAAC,CAAE,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CAE3F,QAAQ,UAAU,QAAS,SAAS;AACxC;;AAGA,MAAa,YAAY,OAAe,SACpC,MAAM,MAAM,MAAM,KAAK,GAAI,MAAM,QAAQ,KAAK,CAAC,OAAO,GAAI,IAAI,CAAC;;AAGnE,SAAgB,SAAS,OAAe,MAAoB;CACxD,MAAM,QAAQ,MAAM,KAAK;CACzB,MAAM,aAAa,MAAM,QAAQ,KAAK,CAAC,UAAU;CACjD,MAAM,OAAO,SAAS,OAAO,IAAI;CAEjC,KAAK,IAAI,QAAQ,YAAY,QAAQ,GAAG,SAAS,KAAM;EACnD,MAAM,OAAO,MAAM,MAAM,OAAO,YAAY,KAAK,CAAC;EAElD,IAAI,cAAc,MAAM,IAAI,KAAA,KAAqB,OAAO;CAC5D;CAEA,OAAO,QAAQ,KAAK,CAAC;AACzB;;AAGA,MAAa,QAAQ,UACjB,SAAS,MAAM,KAAK,IACd;CACI,iBAAiB,sBAAsB,MAAM,GAAG,OAAO,IAAI;CAC3D,OAAO,cAAc,SAAS,OAAO,OAAO,EAAE,IAAI,SAAS,OAAO,MAAM,EAAE;CAC1E,WAAW,sCAAsC,MAAM;AAC3D,IACA,KAAA"}

package/dist/display/Person.d.ts

@@ -0,0 +1,5 @@
+/** A person: their avatar and name, the name wrapping. */
+export declare function Person({ name }: {
+  name: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Person.d.ts.map

package/dist/display/Person.js

@@ -0,0 +1,19 @@
+import { Avatar } from "./Avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/Person.tsx
+/** A person: their avatar and name, the name wrapping. */
+function Person({ name }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex max-w-full min-w-0 items-center gap-1.5",
+		children: [/* @__PURE__ */ jsx(Avatar, {
+			name,
+			compact: true
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 wrap-anywhere",
+			children: name
+		})]
+	});
+}
+export { Person };
+
+//# sourceMappingURL=Person.js.map

package/dist/display/Person.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Person.js","names":[],"sources":["../../src/display/Person.tsx"],"sourcesContent":["import { Avatar } from './Avatar';\n\n/** A person: their avatar and name, the name wrapping. */\nexport function Person({ name }: { name: string }) {\n    return (\n        <span className=\"inline-flex max-w-full min-w-0 items-center gap-1.5\">\n            <Avatar name={name} compact />\n            <span className=\"min-w-0 wrap-anywhere\">{name}</span>\n        </span>\n    );\n}\n"],"mappings":";;;;AAGA,SAAgB,OAAO,EAAE,QAA0B;CAC/C,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACI,oBAAC,QAAD;GAAc;GAAM,SAAA;EAAS,CAAA,GAC7B,oBAAC,QAAD;GAAM,WAAU;GAAyB,UAAA;EAAW,CAAA,CAClD;;AAEd"}

package/dist/display/PropertySheet.js

@@ -3,8 +3,8 @@ import { Heading, Text } from "../typography/Typography.js";
 import { BadgeList } from "./BadgeList.js";
 import { InsetPanel } from "./InsetPanel.js";
 import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/display/PropertySheet.tsx
 /** A titled sheet of facts about one thing; the body is label/value rows, a row of tags, or a short note. */
 function PropertySheetRoot({ children, loading = false, loadingLabel, title }) {

package/dist/display/RadioChoice.d.ts

@@ -1,9 +1,16 @@
 import { ReactNode } from "react";
-export declare function RadioChoice({ name, checked, onChange, children, trailing }: {
+type DataAttributes = {
+  [key: `data-${string}`]: string | undefined;
+};
+/** One choice of a group of radios, a row of an InsetPanel's `settings` panel: the radio and its content, which can
+ *  shrink so a long title in it truncates, then any `trailing` content. Data attributes, such as the value it names,
+ *  go on the row. */
+export declare function RadioChoice({ name, checked, onChange, children, trailing, ...data }: {
   name: string;
   checked: boolean;
   onChange: () => void;
   children: ReactNode;
   trailing?: ReactNode;
-}): import("react").JSX.Element;
+} & DataAttributes): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=RadioChoice.d.ts.map

package/dist/display/RadioChoice.js

@@ -1,8 +1,12 @@
 import { tabbable } from "../foundations/KeyboardFocus.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/display/RadioChoice.tsx
-function RadioChoice({ name, checked, onChange, children, trailing }) {
+/** One choice of a group of radios, a row of an InsetPanel's `settings` panel: the radio and its content, which can
+*  shrink so a long title in it truncates, then any `trailing` content. Data attributes, such as the value it names,
+*  go on the row. */
+function RadioChoice({ name, checked, onChange, children, trailing, ...data }) {
 	return /* @__PURE__ */ jsxs("div", {
+		...data,
 		className: "hover:bg-base-100 has-checked:bg-primary/10 has-focus-visible:ring-primary flex min-w-0 items-center gap-3 transition-colors has-focus-visible:ring-2 has-focus-visible:ring-inset has-disabled:opacity-60",
 		children: [/* @__PURE__ */ jsxs("label", {
 			className: "flex min-w-0 flex-1 cursor-pointer items-center gap-3 px-4 py-3 has-disabled:cursor-default",

package/dist/display/RadioChoice.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioChoice.js","names":[],"sources":["../../src/display/RadioChoice.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport function RadioChoice({\n    name,\n    checked,\n    onChange,\n    children,\n    trailing,\n}: {\n    name: string;\n    checked: boolean;\n    onChange: () => void;\n    children: ReactNode;\n    trailing?: ReactNode;\n}) {\n    return (\n        <div className=\"hover:bg-base-100 has-checked:bg-primary/10 has-focus-visible:ring-primary flex min-w-0 items-center gap-3 transition-colors has-focus-visible:ring-2 has-focus-visible:ring-inset has-disabled:opacity-60\">\n            <label className=\"flex min-w-0 flex-1 cursor-pointer items-center gap-3 px-4 py-3 has-disabled:cursor-default\">\n                <input\n                    {...tabbable}\n                    type=\"radio\"\n                    name={name}\n                    checked={checked}\n                    onChange={onChange}\n                    className=\"accent-primary size-4 shrink-0\"\n                />\n                <span className=\"min-w-0 flex-1\">{children}</span>\n            </label>\n            {trailing ? <div className=\"flex shrink-0 items-center gap-3 pr-4\">{trailing}</div> : null}\n        </div>\n    );\n}\n"],"mappings":";;;AAIA,SAAgB,YAAY,EACxB,MACA,SACA,UACA,UACA,YAOD;CACC,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,qBAAC,SAAD;GAAO,WAAU;GAAjB,UAAA,CACI,oBAAC,SAAD;IACI,GAAI;IACJ,MAAK;IACC;IACG;IACC;IACV,WAAU;GACb,CAAA,GACD,oBAAC,QAAD;IAAM,WAAU;IAAkB;GAAe,CAAA,CAC9C;EACN,CAAA,GAAA,WAAW,oBAAC,OAAD;GAAK,WAAU;GAAyC,UAAA;EAAc,CAAA,IAAI,IACrF;;AAEb"}
+{"version":3,"file":"RadioChoice.js","names":[],"sources":["../../src/display/RadioChoice.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\ntype DataAttributes = { [key: `data-${string}`]: string | undefined };\n\n/** One choice of a group of radios, a row of an InsetPanel's `settings` panel: the radio and its content, which can\n *  shrink so a long title in it truncates, then any `trailing` content. Data attributes, such as the value it names,\n *  go on the row. */\nexport function RadioChoice({\n    name,\n    checked,\n    onChange,\n    children,\n    trailing,\n    ...data\n}: {\n    name: string;\n    checked: boolean;\n    onChange: () => void;\n    children: ReactNode;\n    trailing?: ReactNode;\n} & DataAttributes) {\n    return (\n        <div\n            {...data}\n            className=\"hover:bg-base-100 has-checked:bg-primary/10 has-focus-visible:ring-primary flex min-w-0 items-center gap-3 transition-colors has-focus-visible:ring-2 has-focus-visible:ring-inset has-disabled:opacity-60\"\n        >\n            <label className=\"flex min-w-0 flex-1 cursor-pointer items-center gap-3 px-4 py-3 has-disabled:cursor-default\">\n                <input\n                    {...tabbable}\n                    type=\"radio\"\n                    name={name}\n                    checked={checked}\n                    onChange={onChange}\n                    className=\"accent-primary size-4 shrink-0\"\n                />\n                <span className=\"min-w-0 flex-1\">{children}</span>\n            </label>\n            {trailing ? <div className=\"flex shrink-0 items-center gap-3 pr-4\">{trailing}</div> : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AASA,SAAgB,YAAY,EACxB,MACA,SACA,UACA,UACA,UACA,GAAG,QAOa;CAChB,OACI,qBAAC,OAAD;EACI,GAAI;EACJ,WAAU;EAFd,UAAA,CAII,qBAAC,SAAD;GAAO,WAAU;GAAjB,UAAA,CACI,oBAAC,SAAD;IACI,GAAI;IACJ,MAAK;IACC;IACG;IACC;IACV,WAAU;GACb,CAAA,GACD,oBAAC,QAAD;IAAM,WAAU;IAAkB;GAAe,CAAA,CAC9C;EACN,CAAA,GAAA,WAAW,oBAAC,OAAD;GAAK,WAAU;GAAyC,UAAA;EAAc,CAAA,IAAI,IACrF;;AAEb"}

package/dist/display/RatingLink.js

@@ -1,7 +1,7 @@
 import { Link } from "../typography/Link.js";
 import { Text } from "../typography/Typography.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/display/RatingLink.tsx
 /** The sources' own marks and colors, as the Apple apps draw them. Anything else reads by its name. */
 function ratingMark(source) {

package/dist/display/RichText.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export type RichTextFormat = 'markdown' | 'html';
+interface RichTextProps {
+  text: string;
+  format: RichTextFormat;
+  /** Draws each fenced ```mermaid block of Markdown, such as with `Diagram`, between the text around it. */
+  renderDiagram?: (source: string) => ReactNode;
+}
+/** A provider's text, sanitized and styled; with `renderDiagram`, Markdown's Mermaid blocks draw as diagrams. */
+export declare function RichText({ text, format, renderDiagram }: RichTextProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=RichText.d.ts.map

package/dist/display/RichText.js

@@ -0,0 +1,94 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import Markdown from "react-markdown";
+import rehypeParse from "rehype-parse";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import { unified } from "unified";
+// src/display/RichText.tsx
+const link = (properties, children) => ({
+	type: "element",
+	tagName: "a",
+	properties: {
+		...properties,
+		target: "_blank",
+		rel: ["noopener", "noreferrer"]
+	},
+	children
+});
+/** Turns every image into a link to it and gives every link a new tab. An image inside a link, or without a
+*  usable source, becomes its text, since a link cannot hold a link. */
+function rehypeImagesAsLinks() {
+	const walk = (node, inLink) => {
+		node.children = node.children.map((child) => {
+			if (child.type !== "element") return child;
+			if (child.tagName === "img") {
+				const src = typeof child.properties.src === "string" ? child.properties.src : "";
+				const text = {
+					type: "text",
+					value: String(child.properties.alt || src)
+				};
+				return src && !inLink ? link({ href: src }, [text]) : text;
+			}
+			walk(child, inLink || child.tagName === "a");
+			return child.tagName === "a" ? link(child.properties, child.children) : child;
+		});
+	};
+	return (tree) => walk(tree, false);
+}
+const schema = {
+	...defaultSchema,
+	strip: [...defaultSchema.strip ?? [], "style"]
+};
+const rehypePlugins = [
+	rehypeRaw,
+	[rehypeSanitize, schema],
+	rehypeImagesAsLinks
+];
+const htmlProcessor = unified().use(rehypeParse, { fragment: true }).use(rehypeSanitize, schema).use(rehypeImagesAsLinks);
+const body = [
+	"min-w-0 max-w-full text-sm leading-relaxed break-words [overflow-wrap:anywhere]",
+	"[&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_blockquote]:my-2",
+	"[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold",
+	"[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:font-semibold [&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:font-semibold [&_h5]:font-semibold [&_h6]:font-semibold",
+	"[&_ul]:list-disc [&_ul]:ps-6 [&_ol]:list-decimal [&_ol]:ps-6 [&_li]:my-0.5 [&_.task-list-item]:list-none [&_.task-list-item]:ms-[-1.5rem] [&_input]:me-1.5",
+	"[&_a]:text-(--lar-info-text) [&_a]:underline [&_a]:underline-offset-2",
+	"[&_blockquote]:border-s-2 [&_blockquote]:ps-3 [&_blockquote]:text-base-700",
+	"[&_hr]:my-4",
+	"[&_pre]:my-2 [&_pre]:max-w-full [&_pre]:overflow-x-hidden [&_pre]:whitespace-pre-wrap [&_pre]:rounded-md [&_pre]:bg-base-200 [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-xs",
+	"[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-base-200 [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-xs",
+	"[&_table]:my-2 [&_table]:w-full [&_table]:max-w-full [&_table]:table-fixed [&_th]:border [&_th]:px-2 [&_th]:py-1 [&_th]:text-start [&_td]:border [&_td]:px-2 [&_td]:py-1",
+	"[&_details]:my-2 [&_summary]:cursor-pointer [&_summary]:font-medium"
+].join(" ");
+/** A provider's text, sanitized and styled; with `renderDiagram`, Markdown's Mermaid blocks draw as diagrams. */
+function RichText({ text, format, renderDiagram }) {
+	if (text === "") return null;
+	if (renderDiagram && format === "markdown") {
+		const parts = text.split(/```mermaid[^\S\r\n]*\r?\n([\s\S]*?)```/g);
+		if (parts.length > 1) return /* @__PURE__ */ jsx("div", {
+			className: "grid min-w-0 gap-3",
+			"data-slot": "rich-text-with-diagrams",
+			children: parts.map((part, index) => index % 2 === 1 ? /* @__PURE__ */ jsx(Fragment, { children: renderDiagram(part.trim()) }, index) : part.trim() ? /* @__PURE__ */ jsx(RichText, {
+				text: part,
+				format: "markdown"
+			}, index) : null)
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: body,
+		"data-slot": "rich-text",
+		children: format === "markdown" ? /* @__PURE__ */ jsx(Markdown, {
+			rehypePlugins,
+			remarkPlugins: [remarkGfm],
+			children: text
+		}) : toJsxRuntime(htmlProcessor.runSync(htmlProcessor.parse(text)), {
+			Fragment,
+			jsx,
+			jsxs
+		})
+	});
+}
+export { RichText };
+
+//# sourceMappingURL=RichText.js.map

package/dist/display/RichText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichText.js","names":[],"sources":["../../src/display/RichText.tsx"],"sourcesContent":["// Renders a GitHub or Azure DevOps description or comment the way the provider shows it. Markdown is\n// GitHub-flavoured and may hold raw HTML; an Azure DevOps field may be HTML. Both go through the same\n// sanitizer, then images become links (the page never loads a remote image) and links open in a new tab. The output\n// never makes its container scroll sideways.\nimport type { Element, ElementContent, Root } from 'hast';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport type { ReactNode } from 'react';\nimport Markdown from 'react-markdown';\nimport { Fragment, jsx, jsxs } from 'react/jsx-runtime';\nimport rehypeParse from 'rehype-parse';\nimport rehypeRaw from 'rehype-raw';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport remarkGfm from 'remark-gfm';\nimport { unified } from 'unified';\nimport type { PluggableList } from 'unified';\n\nexport type RichTextFormat = 'markdown' | 'html';\n\nconst link = (properties: Element['properties'], children: ElementContent[]): Element => ({\n    type: 'element',\n    tagName: 'a',\n    properties: { ...properties, target: '_blank', rel: ['noopener', 'noreferrer'] },\n    children,\n});\n\n/** Turns every image into a link to it and gives every link a new tab. An image inside a link, or without a\n *  usable source, becomes its text, since a link cannot hold a link. */\nfunction rehypeImagesAsLinks() {\n    const walk = (node: Root | Element, inLink: boolean): void => {\n        node.children = node.children.map((child) => {\n            if (child.type !== 'element') return child;\n\n            if (child.tagName === 'img') {\n                const src = typeof child.properties.src === 'string' ? child.properties.src : '';\n                const text: ElementContent = { type: 'text', value: String(child.properties.alt || src) };\n\n                return src && !inLink ? link({ href: src }, [text]) : text;\n            }\n\n            walk(child, inLink || child.tagName === 'a');\n\n            return child.tagName === 'a' ? link(child.properties, child.children) : child;\n        });\n    };\n\n    return (tree: Root) => walk(tree, false);\n}\n\n// The default schema is GitHub's: it keeps <details>, tables and task-list checkboxes and drops scripts,\n// handlers, javascript: URLs, iframes and styles. It keeps a dropped <style>'s text, so strip that element whole.\nconst schema = { ...defaultSchema, strip: [...(defaultSchema.strip ?? []), 'style'] };\nconst rehypePlugins: PluggableList = [rehypeRaw, [rehypeSanitize, schema], rehypeImagesAsLinks];\nconst htmlProcessor = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeSanitize, schema)\n    .use(rehypeImagesAsLinks);\n\n// Tailwind has no typography plugin and its preflight resets headings, lists and tables, so the elements a\n// provider's text holds are styled here.\nconst body = [\n    'min-w-0 max-w-full text-sm leading-relaxed break-words [overflow-wrap:anywhere]',\n    '[&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_blockquote]:my-2',\n    '[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold',\n    '[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:font-semibold [&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:font-semibold [&_h5]:font-semibold [&_h6]:font-semibold',\n    '[&_ul]:list-disc [&_ul]:ps-6 [&_ol]:list-decimal [&_ol]:ps-6 [&_li]:my-0.5 [&_.task-list-item]:list-none [&_.task-list-item]:ms-[-1.5rem] [&_input]:me-1.5',\n    '[&_a]:text-(--lar-info-text) [&_a]:underline [&_a]:underline-offset-2',\n    '[&_blockquote]:border-s-2 [&_blockquote]:ps-3 [&_blockquote]:text-base-700',\n    '[&_hr]:my-4',\n    '[&_pre]:my-2 [&_pre]:max-w-full [&_pre]:overflow-x-hidden [&_pre]:whitespace-pre-wrap [&_pre]:rounded-md [&_pre]:bg-base-200 [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-xs',\n    '[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-base-200 [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-xs',\n    '[&_table]:my-2 [&_table]:w-full [&_table]:max-w-full [&_table]:table-fixed [&_th]:border [&_th]:px-2 [&_th]:py-1 [&_th]:text-start [&_td]:border [&_td]:px-2 [&_td]:py-1',\n    '[&_details]:my-2 [&_summary]:cursor-pointer [&_summary]:font-medium',\n].join(' ');\n\ninterface RichTextProps {\n    text: string;\n    format: RichTextFormat;\n    /** Draws each fenced ```mermaid block of Markdown, such as with `Diagram`, between the text around it. */\n    renderDiagram?: (source: string) => ReactNode;\n}\n\n/** A provider's text, sanitized and styled; with `renderDiagram`, Markdown's Mermaid blocks draw as diagrams. */\nexport function RichText({ text, format, renderDiagram }: RichTextProps) {\n    if (text === '') return null;\n\n    if (renderDiagram && format === 'markdown') {\n        const parts = text.split(/```mermaid[^\\S\\r\\n]*\\r?\\n([\\s\\S]*?)```/g);\n\n        if (parts.length > 1)\n            return (\n                <div className=\"grid min-w-0 gap-3\" data-slot=\"rich-text-with-diagrams\">\n                    {parts.map((part, index) =>\n                        index % 2 === 1 ? (\n                            <Fragment key={index}>{renderDiagram(part.trim())}</Fragment>\n                        ) : part.trim() ? (\n                            <RichText key={index} text={part} format=\"markdown\" />\n                        ) : null,\n                    )}\n                </div>\n            );\n    }\n\n    return (\n        <div className={body} data-slot=\"rich-text\">\n            {format === 'markdown' ? (\n                <Markdown rehypePlugins={rehypePlugins} remarkPlugins={[remarkGfm]}>\n                    {text}\n                </Markdown>\n            ) : (\n                toJsxRuntime(htmlProcessor.runSync(htmlProcessor.parse(text)), { Fragment, jsx, jsxs })\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQ,YAAmC,cAAyC;CACtF,MAAM;CACN,SAAS;CACT,YAAY;EAAE,GAAG;EAAY,QAAQ;EAAU,KAAK,CAAC,YAAY,YAAY;CAAE;CAC/E;AACJ;;;AAIA,SAAS,sBAAsB;CAC3B,MAAM,QAAQ,MAAsB,WAA0B;EAC1D,KAAK,WAAW,KAAK,SAAS,KAAK,UAAU;GACzC,IAAI,MAAM,SAAS,WAAW,OAAO;GAErC,IAAI,MAAM,YAAY,OAAO;IACzB,MAAM,MAAM,OAAO,MAAM,WAAW,QAAQ,WAAW,MAAM,WAAW,MAAM;IAC9E,MAAM,OAAuB;KAAE,MAAM;KAAQ,OAAO,OAAO,MAAM,WAAW,OAAO,GAAG;IAAE;IAExF,OAAO,OAAO,CAAC,SAAS,KAAK,EAAE,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;GAC1D;GAEA,KAAK,OAAO,UAAU,MAAM,YAAY,GAAG;GAE3C,OAAO,MAAM,YAAY,MAAM,KAAK,MAAM,YAAY,MAAM,QAAQ,IAAI;EAC5E,CAAC;CACL;CAEA,QAAQ,SAAe,KAAK,MAAM,KAAK;AAC3C;AAIA,MAAM,SAAS;CAAE,GAAG;CAAe,OAAO,CAAC,GAAI,cAAc,SAAS,CAAC,GAAI,OAAO;AAAE;AACpF,MAAM,gBAA+B;CAAC;CAAW,CAAC,gBAAgB,MAAM;CAAG;AAAmB;AAC9F,MAAM,gBAAgB,QAAQ,CAAC,CAC1B,IAAI,aAAa,EAAE,UAAU,KAAK,CAAC,CAAC,CACpC,IAAI,gBAAgB,MAAM,CAAC,CAC3B,IAAI,mBAAmB;AAI5B,MAAM,OAAO;CACT;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACJ,CAAC,CAAC,KAAK,GAAG;;AAUV,SAAgB,SAAS,EAAE,MAAM,QAAQ,iBAAgC;CACrE,IAAI,SAAS,IAAI,OAAO;CAExB,IAAI,iBAAiB,WAAW,YAAY;EACxC,MAAM,QAAQ,KAAK,MAAM,yCAAyC;EAElE,IAAI,MAAM,SAAS,GACf,OACI,oBAAC,OAAD;GAAK,WAAU;GAAqB,aAAU;GACzC,UAAA,MAAM,KAAK,MAAM,UACd,QAAQ,MAAM,IACV,oBAAC,UAAD,EAAA,UAAuB,cAAc,KAAK,KAAK,CAAC,EAAY,GAA7C,KAA6C,IAC5D,KAAK,KAAK,IACV,oBAAC,UAAD;IAAsB,MAAM;IAAM,QAAO;GAAY,GAAtC,KAAsC,IACrD,IACR;EACC,CAAA;CAEjB;CAEA,OACI,oBAAC,OAAD;EAAK,WAAW;EAAM,aAAU;EAC3B,UAAA,WAAW,aACR,oBAAC,UAAD;GAAyB;GAAe,eAAe,CAAC,SAAS;GAC5D,UAAA;EACK,CAAA,IAEV,aAAa,cAAc,QAAQ,cAAc,MAAM,IAAI,CAAC,GAAG;GAAE;GAAU;GAAK;EAAK,CAAC;CAEzF,CAAA;AAEb"}

package/dist/display/RowList.js

@@ -1,8 +1,8 @@
 import { LinkBox, LinkOverlay } from "../typography/Link.js";
 import { Text } from "../typography/Typography.js";
 import { toneTileClasses } from "./ToneTile.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/display/RowList.tsx
 /** Rows of one list inside a single bordered panel, separated by rules; or ruled rows in two columns on wide screens. */
 function RowList({ children, label, layout = "panel" }) {

package/dist/display/index.d.ts

@@ -8,11 +8,13 @@ import { BrandLink, BrandMark } from "./BrandMark.js";
 import { ChangeList, ChangeListItem } from "./ChangeList.js";
 import { CheckList, CheckListItem } from "./CheckList.js";
 import { CodeBlock } from "./CodeBlock.js";
+import { Comment, CommentList } from "./Comment.js";
 import { CopyButton } from "./CopyButton.js";
 import { DataTable, DataTableCell, DataTableRow } from "./DataTable.js";
 import { DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags } from "./DetailHero.js";
 import { DetailList } from "./DetailList.js";
 import { DeviceCard } from "./DeviceCard.js";
+import { Diagram } from "./Diagram.js";
 import { Identity } from "./Identity.js";
 import { ImageCard } from "./ImageCard.js";
 import { ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload } from "./ImagePicker.js";
@@ -20,19 +22,22 @@ import { InfoBox } from "./InfoBox.js";
 import { InsetPanel } from "./InsetPanel.js";
 import { Kbd } from "./Kbd.js";
 import { KindIcon } from "./KindIcon.js";
+import { LabelChip } from "./LabelChip.js";
 import { NoticeCard } from "./NoticeCard.js";
 import { PairingList, PairingListItem } from "./PairingList.js";
 import { PathList } from "./PathList.js";
 import { PeoplePreview } from "./PeoplePreview.js";
+import { Person } from "./Person.js";
 import { PropertySheet, PropertySheetRow, PropertySheetTag } from "./PropertySheet.js";
 import { QrCode } from "./QrCode.js";
 import { RadioChoice } from "./RadioChoice.js";
 import { RatingLink } from "./RatingLink.js";
 import { ResourceCard, ResourceCardSkeleton } from "./ResourceCard.js";
+import { RichText, RichTextFormat } from "./RichText.js";
 import { RowList, RowListItem } from "./RowList.js";
 import { MeterLegend, MeterSegment, MeterTone, StackedMeter } from "./StackedMeter.js";
 import { StatTile } from "./StatTile.js";
 import { StepList } from "./StepList.js";
 import { TextPreview } from "./TextPreview.js";
 import { TimeSeriesChart, TimeSeriesChartSkeleton, TimeSeriesPoint } from "./TimeSeriesChart.js";
-export { ActivityCard, ActivityCardSkeleton, Artwork, Avatar, Badge, BadgeList, type BadgeListItem, type BadgeProps, BrandLink, BrandMark, ChangeList, type ChangeListItem, CheckList, type CheckListItem, CodeBlock, CopyButton, DataTable, type DataTableCell, type DataTableRow, DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags, DetailList, DeviceCard, Identity, ImageCard, ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload, InfoBox, InsetPanel, ItemAction, Kbd, KindIcon, MeterLegend, type MeterSegment, type MeterTone, NoticeCard, PairingList, type PairingListItem, PathList, PeoplePreview, PropertySheet, type PropertySheetRow, type PropertySheetTag, QrCode, RadioChoice, RatingLink, ResourceCard, ResourceCardSkeleton, RowList, RowListItem, StackedMeter, StatTile, StepList, TextPreview, TimeSeriesChart, TimeSeriesChartSkeleton, type TimeSeriesPoint };
+export { ActivityCard, ActivityCardSkeleton, Artwork, Avatar, Badge, BadgeList, type BadgeListItem, type BadgeProps, BrandLink, BrandMark, ChangeList, type ChangeListItem, CheckList, type CheckListItem, CodeBlock, Comment, CommentList, CopyButton, DataTable, type DataTableCell, type DataTableRow, DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags, DetailList, DeviceCard, Diagram, Identity, ImageCard, ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload, InfoBox, InsetPanel, ItemAction, Kbd, KindIcon, LabelChip, MeterLegend, type MeterSegment, type MeterTone, NoticeCard, PairingList, type PairingListItem, PathList, PeoplePreview, Person, PropertySheet, type PropertySheetRow, type PropertySheetTag, QrCode, RadioChoice, RatingLink, ResourceCard, ResourceCardSkeleton, RichText, type RichTextFormat, RowList, RowListItem, StackedMeter, StatTile, StepList, TextPreview, TimeSeriesChart, TimeSeriesChartSkeleton, type TimeSeriesPoint };

package/dist/feedback/Alert.js

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
 import { Alert } from "@ninna-ui/feedback";
+import { jsx } from "react/jsx-runtime";
 // src/feedback/Alert.tsx
 /**
 * An immediate status about a condition or operation. Compact notes can hold short inline guidance.

package/dist/feedback/AsyncState.js

@@ -1,7 +1,7 @@
 import { Button } from "../actions/Button.js";
 import { SkeletonLoader } from "./SkeletonLoader.js";
-import { jsx } from "react/jsx-runtime";
 import { Alert } from "@ninna-ui/feedback";
+import { jsx } from "react/jsx-runtime";
 // src/feedback/AsyncState.tsx
 /** Owns a region's loading geometry and load failure; use Alert for other operation feedback. */
 function AsyncState({ error, errorTitle, label, loading, onRetry, presentation = "card", placeholder, retryLabel, retrying = false }) {

package/dist/feedback/DismissButton.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from "react";
+/**
+ * The close button every failure, warning and notification carries; `label` names what it closes, such as
+ * "Dismiss: Moved #61". In the `corner` it floats to the top right of the text it closes; `inline` sits in a line of
+ * text, after an error message.
+ */
+export declare function DismissButton({ label, onClick, placement }: {
+  label: string;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+  placement?: 'corner' | 'inline';
+}): import("react").JSX.Element;
+//# sourceMappingURL=DismissButton.d.ts.map

package/dist/feedback/DismissButton.js

@@ -0,0 +1,20 @@
+import { IconButton } from "../actions/IconButton.js";
+import { XIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+// src/feedback/DismissButton.tsx
+/**
+* The close button every failure, warning and notification carries; `label` names what it closes, such as
+* "Dismiss: Moved #61". In the `corner` it floats to the top right of the text it closes; `inline` sits in a line of
+* text, after an error message.
+*/
+function DismissButton({ label, onClick, placement = "corner" }) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		className: `dismiss ${placement === "inline" ? "float-none -my-1 ml-0.5 align-middle" : "float-right -mt-0.75 -mr-1.5 ml-2"}`,
+		"aria-label": label,
+		icon: /* @__PURE__ */ jsx(XIcon, {}),
+		onClick
+	});
+}
+export { DismissButton };
+
+//# sourceMappingURL=DismissButton.js.map

package/dist/feedback/DismissButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DismissButton.js","names":[],"sources":["../../src/feedback/DismissButton.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\nimport type { MouseEvent } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\n\n/**\n * The close button every failure, warning and notification carries; `label` names what it closes, such as\n * \"Dismiss: Moved #61\". In the `corner` it floats to the top right of the text it closes; `inline` sits in a line of\n * text, after an error message.\n */\nexport function DismissButton({\n    label,\n    onClick,\n    placement = 'corner',\n}: {\n    label: string;\n    onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n    placement?: 'corner' | 'inline';\n}) {\n    return (\n        <IconButton\n            className={`dismiss ${placement === 'inline' ? 'float-none -my-1 ml-0.5 align-middle' : 'float-right -mt-0.75 -mr-1.5 ml-2'}`}\n            aria-label={label}\n            icon={<XIcon />}\n            onClick={onClick}\n        />\n    );\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,cAAc,EAC1B,OACA,SACA,YAAY,YAKb;CACC,OACI,oBAAC,YAAD;EACI,WAAW,WAAW,cAAc,WAAW,yCAAyC;EACxF,cAAY;EACZ,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACL;CACZ,CAAA;AAET"}

package/dist/feedback/ErrorNotification.js

@@ -1,7 +1,9 @@
+import { forgetNotificationSlots } from "./Notifications.js";
 import { toast } from "@ninna-ui/feedback";
 // src/feedback/ErrorNotification.ts
 function dismissAllNotifications() {
 	toast.dismissAll();
+	forgetNotificationSlots();
 }
 function showErrorNotification(notification) {
 	toast.create({

package/dist/feedback/ErrorNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorNotification.js","names":[],"sources":["../../src/feedback/ErrorNotification.ts"],"sourcesContent":["import { toast } from '@ninna-ui/feedback';\n\nexport interface ErrorNotification {\n    description: string;\n    title: string;\n}\n\nexport function dismissAllNotifications(): void {\n    toast.dismissAll();\n}\n\nexport function showErrorNotification(notification: ErrorNotification): void {\n    toast.create({\n        ...notification,\n        color: 'danger',\n    });\n}\n\nexport function showSuccessNotification(message: string): void {\n    toast.create({\n        color: 'success',\n        title: message,\n    });\n}\n"],"mappings":";;AAOA,SAAgB,0BAAgC;CAC5C,MAAM,WAAW;AACrB;AAEA,SAAgB,sBAAsB,cAAuC;CACzE,MAAM,OAAO;EACT,GAAG;EACH,OAAO;CACX,CAAC;AACL;AAEA,SAAgB,wBAAwB,SAAuB;CAC3D,MAAM,OAAO;EACT,OAAO;EACP,OAAO;CACX,CAAC;AACL"}
+{"version":3,"file":"ErrorNotification.js","names":[],"sources":["../../src/feedback/ErrorNotification.ts"],"sourcesContent":["import { toast } from '@ninna-ui/feedback';\n\nimport { forgetNotificationSlots } from './Notifications';\n\nexport interface ErrorNotification {\n    description: string;\n    title: string;\n}\n\nexport function dismissAllNotifications(): void {\n    toast.dismissAll();\n    forgetNotificationSlots();\n}\n\nexport function showErrorNotification(notification: ErrorNotification): void {\n    toast.create({\n        ...notification,\n        color: 'danger',\n    });\n}\n\nexport function showSuccessNotification(message: string): void {\n    toast.create({\n        color: 'success',\n        title: message,\n    });\n}\n"],"mappings":";;;AASA,SAAgB,0BAAgC;CAC5C,MAAM,WAAW;CACjB,wBAAwB;AAC5B;AAEA,SAAgB,sBAAsB,cAAuC;CACzE,MAAM,OAAO;EACT,GAAG;EACH,OAAO;CACX,CAAC;AACL;AAEA,SAAgB,wBAAwB,SAAuB;CAC3D,MAAM,OAAO;EACT,OAAO;EACP,OAAO;CACX,CAAC;AACL"}

package/dist/feedback/FormResult.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+/**
+ * A form's result, such as a dialog's validation message or what its submit did. It stays mounted as a live region,
+ * so screen readers hear each new message; empty, it has no border, padding or icon. With no tone it is a warning, as
+ * a validation message is. Line breaks in `text` show.
+ */
+export declare function FormResult({ id, text, tone, children, list }: {
+  id: string;
+  text: string;
+  tone?: 'success' | 'warning' | 'error' | undefined;
+  /** Shown under the text. */
+  children?: ReactNode;
+  /** A list under the text, such as the paths a call touched, indented and wrapping normally. */
+  list?: readonly ReactNode[] | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=FormResult.d.ts.map

package/dist/feedback/FormResult.js

@@ -0,0 +1,30 @@
+import { Alert } from "./Alert.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/feedback/FormResult.tsx
+/**
+* A form's result, such as a dialog's validation message or what its submit did. It stays mounted as a live region,
+* so screen readers hear each new message; empty, it has no border, padding or icon. With no tone it is a warning, as
+* a validation message is. Line breaks in `text` show.
+*/
+function FormResult({ id, text, tone = "warning", children, list }) {
+	return /* @__PURE__ */ jsx(Alert, {
+		id,
+		tone: tone === "error" ? "danger" : tone,
+		"data-tone": tone,
+		role: "status",
+		"aria-atomic": "true",
+		showIcon: Boolean(text),
+		className: text ? "wrap-anywhere whitespace-pre-line" : "border-0 p-0",
+		children: text && /* @__PURE__ */ jsxs(Fragment, { children: [
+			text,
+			children,
+			list && list.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "pl-4.5 whitespace-normal",
+				children: list.map((entry, index) => /* @__PURE__ */ jsx("li", { children: entry }, index))
+			})
+		] })
+	});
+}
+export { FormResult };
+
+//# sourceMappingURL=FormResult.js.map

package/dist/feedback/FormResult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormResult.js","names":[],"sources":["../../src/feedback/FormResult.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Alert } from './Alert';\n\n/**\n * A form's result, such as a dialog's validation message or what its submit did. It stays mounted as a live region,\n * so screen readers hear each new message; empty, it has no border, padding or icon. With no tone it is a warning, as\n * a validation message is. Line breaks in `text` show.\n */\nexport function FormResult({\n    id,\n    text,\n    tone = 'warning',\n    children,\n    list,\n}: {\n    id: string;\n    text: string;\n    tone?: 'success' | 'warning' | 'error' | undefined;\n    /** Shown under the text. */\n    children?: ReactNode;\n    /** A list under the text, such as the paths a call touched, indented and wrapping normally. */\n    list?: readonly ReactNode[] | undefined;\n}) {\n    return (\n        <Alert\n            id={id}\n            tone={tone === 'error' ? 'danger' : tone}\n            data-tone={tone}\n            role=\"status\"\n            aria-atomic=\"true\"\n            showIcon={Boolean(text)}\n            className={text ? 'wrap-anywhere whitespace-pre-line' : 'border-0 p-0'}\n        >\n            {text && (\n                <>\n                    {text}\n                    {children}\n                    {list && list.length > 0 && (\n                        <ul className=\"pl-4.5 whitespace-normal\">\n                            {list.map((entry, index) => (\n                                <li key={index}>{entry}</li>\n                            ))}\n                        </ul>\n                    )}\n                </>\n            )}\n        </Alert>\n    );\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,WAAW,EACvB,IACA,MACA,OAAO,WACP,UACA,QASD;CACC,OACI,oBAAC,OAAD;EACQ;EACJ,MAAM,SAAS,UAAU,WAAW;EACpC,aAAW;EACX,MAAK;EACL,eAAY;EACZ,UAAU,QAAQ,IAAI;EACtB,WAAW,OAAO,sCAAsC;EAEvD,UAAA,QACG,qBAAA,UAAA,EAAA,UAAA;GACK;GACA;GACA,QAAQ,KAAK,SAAS,KACnB,oBAAC,MAAD;IAAI,WAAU;IACT,UAAA,KAAK,KAAK,OAAO,UACd,oBAAC,MAAD,EAAA,UAAiB,MAAU,GAAlB,KAAkB,CAC9B;GACD,CAAA;EAEV,EAAA,CAAA;CAEH,CAAA;AAEf"}

package/dist/feedback/LiveRegion.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+/** An out-of-sight polite live region: screen readers read what it says each time that changes, such as "Copied". */
+export declare function LiveRegion({ id, children }: {
+  id?: string;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=LiveRegion.d.ts.map

package/dist/feedback/LiveRegion.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+// src/feedback/LiveRegion.tsx
+/** An out-of-sight polite live region: screen readers read what it says each time that changes, such as "Copied". */
+function LiveRegion({ id, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: "sr-only",
+		role: "status",
+		"aria-live": "polite",
+		children
+	});
+}
+export { LiveRegion };
+
+//# sourceMappingURL=LiveRegion.js.map

package/dist/feedback/LiveRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.js","names":[],"sources":["../../src/feedback/LiveRegion.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** An out-of-sight polite live region: screen readers read what it says each time that changes, such as \"Copied\". */\nexport function LiveRegion({ id, children }: { id?: string; children?: ReactNode }) {\n    return (\n        <div id={id} className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;AAGA,SAAgB,WAAW,EAAE,IAAI,YAAmD;CAChF,OACI,oBAAC,OAAD;EAAS;EAAI,WAAU;EAAU,MAAK;EAAS,aAAU;EACpD;CACA,CAAA;AAEb"}

package/dist/feedback/Loading.d.ts

@@ -0,0 +1,19 @@
+import { LoadingProps } from "@ninna-ui/feedback";
+import "lucide-react";
+/** What shows in place of something still loading: ninna-ui's announced spinner, or with a `presentation`, a small
+ *  spinner, still under reduced motion, and what loads. */
+declare const Loading$1: import("react").ForwardRefExoticComponent<Omit<LoadingProps, "title"> & {
+  /** What loads. Without a `presentation` it names ninna-ui's spinner for screen readers only; with one it shows
+   *  beside the spinner. */
+  label?: string;
+  /** With no label, names the spinner alone, as a cue beside values already shown. */
+  title?: string | undefined;
+  /** Stops it spinning. */
+  still?: boolean;
+  /** Without it, ninna-ui's announced spinner. `inline` is a small spinner and what loads in a line of 12px text;
+   *  `line` stands on its own line of body text; `status` is a step's own loading line, announced, muted body text
+   *  with room above and below that keeps turning as a pending action's spinner does. */
+  presentation?: 'inline' | 'line' | 'status';
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { Loading$1 as Loading };
+//# sourceMappingURL=Loading.d.ts.map

package/dist/feedback/Loading.js

@@ -0,0 +1,63 @@
+import { ambientMotion } from "../foundations/AmbientMotion.js";
+import { forwardRef } from "react";
+import { Loading } from "@ninna-ui/feedback";
+import { LoaderCircleIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/feedback/Loading.tsx
+const motions = {
+	spin: "motion-safe:animate-spin",
+	always: "animate-spin",
+	status: "status-spin",
+	still: ""
+};
+/**
+* The loader icon, spinning on a box around it: above a device scale of 1 Chromium can't run a root svg's transform on
+* the compositor, so the page would render every frame. It pauses while out of view or in a hidden window.
+*/
+function SpinnerIcon({ motion = "spin", ...icon }) {
+	const spin = motions[motion];
+	return /* @__PURE__ */ jsx("span", {
+		ref: spin ? ambientMotion : void 0,
+		className: `flex w-fit shrink-0 ${spin}`,
+		children: /* @__PURE__ */ jsx(LoaderCircleIcon, { ...icon })
+	});
+}
+/** What shows in place of something still loading: ninna-ui's announced spinner, or with a `presentation`, a small
+*  spinner, still under reduced motion, and what loads. */
+const Loading$1 = forwardRef(({ presentation, label, title, still = false, ...props }, ref) => {
+	if (!presentation) return /* @__PURE__ */ jsx(Loading, {
+		ref,
+		label,
+		title,
+		...props
+	});
+	if (presentation === "status") return /* @__PURE__ */ jsxs("p", {
+		role: "status",
+		className: "text-base-700 m-0 flex items-center gap-2 py-4 text-sm",
+		children: [/* @__PURE__ */ jsx(SpinnerIcon, {
+			motion: still ? "still" : "always",
+			"aria-hidden": "true",
+			className: "size-4"
+		}), label]
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"data-loader": true,
+		className: "inline-flex min-w-0 items-center gap-1.5",
+		title,
+		children: [/* @__PURE__ */ jsx(SpinnerIcon, {
+			motion: still ? "still" : "spin",
+			"aria-hidden": "true",
+			className: presentation === "line" ? "size-4" : "size-3"
+		}), label ? /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: label
+		}) : title && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: title
+		})]
+	});
+});
+Loading$1.displayName = "Loading";
+export { Loading$1 as Loading, SpinnerIcon };
+
+//# sourceMappingURL=Loading.js.map