@lar-works/design-system 0.0.0-stage → 0.1.1

package/dist/collections/index.d.ts

@@ -0,0 +1,10 @@
+import { CollectionSectionHeader } from "./CollectionSectionHeader.js";
+import { CollectionState } from "./CollectionState.js";
+import { DataRow } from "./DataRow.js";
+import { ResultEmpty, ResultList, ResultRow, ResultRowProps } from "./ResultList.js";
+import { ScrollRow, ScrollRowArrows, ScrollRowItem } from "./ScrollRow.js";
+import { useCollectionMotion } from "./useCollectionMotion.js";
+import { revealInRow, useScrollRow } from "./useScrollRow.js";
+import { VirtualGrid } from "./VirtualGrid.js";
+import { ListColumn, VirtualList, VirtualListProps } from "./VirtualList.js";
+export { CollectionSectionHeader, CollectionState, DataRow, type ListColumn, ResultEmpty, ResultList, ResultRow, type ResultRowProps, ScrollRow, ScrollRowArrows, ScrollRowItem, VirtualGrid, VirtualList, type VirtualListProps, revealInRow, useCollectionMotion, useScrollRow };

package/dist/collections/useCollectionMotion.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+export declare function useCollectionMotion(root: RefObject<HTMLDivElement | null>): void;
+//# sourceMappingURL=useCollectionMotion.d.ts.map

package/dist/collections/useCollectionMotion.js

@@ -0,0 +1,34 @@
+import { useLayoutEffect, useRef } from "react";
+// src/collections/useCollectionMotion.ts
+function useCollectionMotion(root) {
+	const positions = useRef(/* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		const next = /* @__PURE__ */ new Map();
+		const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+		for (const element of root.current?.querySelectorAll("[data-collection-key]") ?? []) {
+			const key = element.dataset.collectionKey;
+			const position = {
+				index: element.dataset.index,
+				x: element.offsetLeft,
+				y: element.offsetTop
+			};
+			const previous = positions.current.get(key);
+			next.set(key, position);
+			if (reducedMotion || !element.animate) continue;
+			if (previous && previous.index !== position.index && (previous.x !== position.x || previous.y !== position.y)) {
+				element.getAnimations().forEach((animation) => animation.cancel());
+				element.animate([{ transform: `translate(${previous.x - position.x}px, ${previous.y - position.y}px)` }, { transform: "translate(0, 0)" }], {
+					duration: 280,
+					easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
+				});
+			} else if (!previous) element.animate([{ opacity: 0 }, { opacity: 1 }], {
+				duration: 220,
+				easing: "ease-out"
+			});
+		}
+		positions.current = next;
+	});
+}
+export { useCollectionMotion };
+
+//# sourceMappingURL=useCollectionMotion.js.map

package/dist/collections/useCollectionMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollectionMotion.js","names":[],"sources":["../../src/collections/useCollectionMotion.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect, useRef } from 'react';\n\n// Children identify their domain key and collection index, even across virtual\n// rows. Only mounted items are measured, keeping large catalogs bounded.\nexport function useCollectionMotion(root: RefObject<HTMLDivElement | null>) {\n    const positions = useRef(new Map<string, { index: string | undefined; x: number; y: number }>());\n\n    useLayoutEffect(() => {\n        const next = new Map<string, { index: string | undefined; x: number; y: number }>();\n        const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\n        for (const element of root.current?.querySelectorAll<HTMLElement>('[data-collection-key]') ?? []) {\n            const key = element.dataset.collectionKey!;\n            const position = { index: element.dataset.index, x: element.offsetLeft, y: element.offsetTop };\n            const previous = positions.current.get(key);\n\n            next.set(key, position);\n\n            if (reducedMotion || !element.animate) continue;\n\n            // Initial measurement and resizing can change coordinates without\n            // changing order. Translate only to make room or reorder items.\n            if (\n                previous &&\n                previous.index !== position.index &&\n                (previous.x !== position.x || previous.y !== position.y)\n            ) {\n                element.getAnimations().forEach((animation) => animation.cancel());\n                element.animate(\n                    [\n                        { transform: `translate(${previous.x - position.x}px, ${previous.y - position.y}px)` },\n                        { transform: 'translate(0, 0)' },\n                    ],\n                    { duration: 280, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)' },\n                );\n            } else if (!previous) {\n                element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 220, easing: 'ease-out' });\n            }\n        }\n        positions.current = next;\n    });\n}\n"],"mappings":";;AAIA,SAAgB,oBAAoB,MAAwC;CACxE,MAAM,YAAY,uBAAO,IAAI,IAAiE,CAAC;CAE/F,sBAAsB;EAClB,MAAM,uBAAO,IAAI,IAAiE;EAClF,MAAM,gBAAgB,OAAO,aAAa,kCAAkC,CAAC,CAAC,WAAW;EAEzF,KAAK,MAAM,WAAW,KAAK,SAAS,iBAA8B,uBAAuB,KAAK,CAAC,GAAG;GAC9F,MAAM,MAAM,QAAQ,QAAQ;GAC5B,MAAM,WAAW;IAAE,OAAO,QAAQ,QAAQ;IAAO,GAAG,QAAQ;IAAY,GAAG,QAAQ;GAAU;GAC7F,MAAM,WAAW,UAAU,QAAQ,IAAI,GAAG;GAE1C,KAAK,IAAI,KAAK,QAAQ;GAEtB,IAAI,iBAAiB,CAAC,QAAQ,SAAS;GAIvC,IACI,YACA,SAAS,UAAU,SAAS,UAC3B,SAAS,MAAM,SAAS,KAAK,SAAS,MAAM,SAAS,IACxD;IACE,QAAQ,cAAc,CAAC,CAAC,SAAS,cAAc,UAAU,OAAO,CAAC;IACjE,QAAQ,QACJ,CACI,EAAE,WAAW,aAAa,SAAS,IAAI,SAAS,EAAE,MAAM,SAAS,IAAI,SAAS,EAAE,KAAK,GACrF,EAAE,WAAW,kBAAkB,CACnC,GACA;KAAE,UAAU;KAAK,QAAQ;IAAiC,CAC9D;GACJ,OAAO,IAAI,CAAC,UACR,QAAQ,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,GAAG;IAAE,UAAU;IAAK,QAAQ;GAAW,CAAC;EAE/F;EACA,UAAU,UAAU;CACxB,CAAC;AACL"}

package/dist/collections/useScrollRow.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Scrolls `row` sideways, never its page, just far enough to show all of `item`. A snapping row settles on an item's
+ * start, so it scrolls to the first start that still shows all of `item`.
+ */
+export declare function revealInRow(row: HTMLElement, item: Element | null | undefined): void;
+/**
+ * Pairs a `ScrollRow` with `ScrollRowArrows` placed elsewhere, such as in its section header. `content` is a stable
+ * key for what the row shows, such as its item count, so the arrows re-measure when it changes.
+ */
+export declare function useScrollRow(content?: unknown): {
+  row: HTMLUListElement | null;
+  setRow: import("react").Dispatch<import("react").SetStateAction<HTMLUListElement | null>>;
+  canScrollBack: boolean;
+  canScrollForward: boolean;
+  scroll: (direction: 1 | -1) => void | undefined;
+};
+//# sourceMappingURL=useScrollRow.d.ts.map

package/dist/collections/useScrollRow.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+// src/collections/useScrollRow.ts
+/**
+* Scrolls `row` sideways, never its page, just far enough to show all of `item`. A snapping row settles on an item's
+* start, so it scrolls to the first start that still shows all of `item`.
+*/
+function revealInRow(row, item) {
+	if (!item) return;
+	const bounds = row.getBoundingClientRect();
+	const { left, right } = item.getBoundingClientRect();
+	const fit = right - bounds.right;
+	const style = getComputedStyle(row);
+	const padding = parseFloat(style.scrollPaddingLeft) || 0;
+	const starts = style.scrollSnapType && style.scrollSnapType !== "none" ? Array.from(row.children, (child) => child.getBoundingClientRect().left - bounds.left - padding).filter((start) => start >= fit) : [];
+	const offset = left < bounds.left ? left - bounds.left : fit > 0 ? starts.length ? Math.min(...starts) : fit : 0;
+	if (offset) row.scrollTo({
+		left: row.scrollLeft + offset,
+		behavior: "smooth"
+	});
+}
+/**
+* Pairs a `ScrollRow` with `ScrollRowArrows` placed elsewhere, such as in its section header. `content` is a stable
+* key for what the row shows, such as its item count, so the arrows re-measure when it changes.
+*/
+function useScrollRow(content) {
+	const [row, setRow] = useState(null);
+	const [ends, setEnds] = useState({
+		back: false,
+		forward: false
+	});
+	useEffect(() => {
+		const measure = () => {
+			const back = Boolean(row && row.scrollLeft > 1);
+			const forward = Boolean(row && row.scrollLeft + row.clientWidth < row.scrollWidth - 1);
+			setEnds((current) => current.back === back && current.forward === forward ? current : {
+				back,
+				forward
+			});
+		};
+		measure();
+		if (!row) return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(row);
+		row.addEventListener("scroll", measure, { passive: true });
+		return () => {
+			observer.disconnect();
+			row.removeEventListener("scroll", measure);
+		};
+	}, [row, content]);
+	return {
+		row,
+		setRow,
+		canScrollBack: ends.back,
+		canScrollForward: ends.forward,
+		scroll: (direction) => row?.scrollBy({
+			left: direction * row.clientWidth * .8,
+			behavior: "smooth"
+		})
+	};
+}
+export { revealInRow, useScrollRow };
+
+//# sourceMappingURL=useScrollRow.js.map

package/dist/collections/useScrollRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollRow.js","names":[],"sources":["../../src/collections/useScrollRow.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Scrolls `row` sideways, never its page, just far enough to show all of `item`. A snapping row settles on an item's\n * start, so it scrolls to the first start that still shows all of `item`.\n */\nexport function revealInRow(row: HTMLElement, item: Element | null | undefined) {\n    if (!item) return;\n\n    const bounds = row.getBoundingClientRect();\n    const { left, right } = item.getBoundingClientRect();\n    const fit = right - bounds.right;\n    const style = getComputedStyle(row);\n    const padding = parseFloat(style.scrollPaddingLeft) || 0;\n    const starts =\n        style.scrollSnapType && style.scrollSnapType !== 'none'\n            ? Array.from(row.children, (child) => child.getBoundingClientRect().left - bounds.left - padding).filter(\n                  (start) => start >= fit,\n              )\n            : [];\n    const offset = left < bounds.left ? left - bounds.left : fit > 0 ? (starts.length ? Math.min(...starts) : fit) : 0;\n\n    if (offset) row.scrollTo({ left: row.scrollLeft + offset, behavior: 'smooth' });\n}\n\n/**\n * Pairs a `ScrollRow` with `ScrollRowArrows` placed elsewhere, such as in its section header. `content` is a stable\n * key for what the row shows, such as its item count, so the arrows re-measure when it changes.\n */\nexport function useScrollRow(content?: unknown) {\n    const [row, setRow] = useState<HTMLUListElement | null>(null);\n    const [ends, setEnds] = useState({ back: false, forward: false });\n\n    useEffect(() => {\n        const measure = () => {\n            const back = Boolean(row && row.scrollLeft > 1);\n            const forward = Boolean(row && row.scrollLeft + row.clientWidth < row.scrollWidth - 1);\n\n            setEnds((current) => (current.back === back && current.forward === forward ? current : { back, forward }));\n        };\n\n        measure();\n\n        if (!row) return;\n\n        const observer = new ResizeObserver(measure);\n\n        observer.observe(row);\n        row.addEventListener('scroll', measure, { passive: true });\n\n        return () => {\n            observer.disconnect();\n            row.removeEventListener('scroll', measure);\n        };\n    }, [row, content]);\n\n    return {\n        row,\n        setRow,\n        canScrollBack: ends.back,\n        canScrollForward: ends.forward,\n        scroll: (direction: 1 | -1) => row?.scrollBy({ left: direction * row.clientWidth * 0.8, behavior: 'smooth' }),\n    };\n}\n"],"mappings":";;;;;;AAMA,SAAgB,YAAY,KAAkB,MAAkC;CAC5E,IAAI,CAAC,MAAM;CAEX,MAAM,SAAS,IAAI,sBAAsB;CACzC,MAAM,EAAE,MAAM,UAAU,KAAK,sBAAsB;CACnD,MAAM,MAAM,QAAQ,OAAO;CAC3B,MAAM,QAAQ,iBAAiB,GAAG;CAClC,MAAM,UAAU,WAAW,MAAM,iBAAiB,KAAK;CACvD,MAAM,SACF,MAAM,kBAAkB,MAAM,mBAAmB,SAC3C,MAAM,KAAK,IAAI,WAAW,UAAU,MAAM,sBAAsB,CAAC,CAAC,OAAO,OAAO,OAAO,OAAO,CAAC,CAAC,QAC3F,UAAU,SAAS,GACxB,IACA,CAAC;CACX,MAAM,SAAS,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,MAAM,IAAK,OAAO,SAAS,KAAK,IAAI,GAAG,MAAM,IAAI,MAAO;CAEjH,IAAI,QAAQ,IAAI,SAAS;EAAE,MAAM,IAAI,aAAa;EAAQ,UAAU;CAAS,CAAC;AAClF;;;;;AAMA,SAAgB,aAAa,SAAmB;CAC5C,MAAM,CAAC,KAAK,UAAU,SAAkC,IAAI;CAC5D,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,MAAM;EAAO,SAAS;CAAM,CAAC;CAEhE,gBAAgB;EACZ,MAAM,gBAAgB;GAClB,MAAM,OAAO,QAAQ,OAAO,IAAI,aAAa,CAAC;GAC9C,MAAM,UAAU,QAAQ,OAAO,IAAI,aAAa,IAAI,cAAc,IAAI,cAAc,CAAC;GAErF,SAAS,YAAa,QAAQ,SAAS,QAAQ,QAAQ,YAAY,UAAU,UAAU;IAAE;IAAM;GAAQ,CAAE;EAC7G;EAEA,QAAQ;EAER,IAAI,CAAC,KAAK;EAEV,MAAM,WAAW,IAAI,eAAe,OAAO;EAE3C,SAAS,QAAQ,GAAG;EACpB,IAAI,iBAAiB,UAAU,SAAS,EAAE,SAAS,KAAK,CAAC;EAEzD,aAAa;GACT,SAAS,WAAW;GACpB,IAAI,oBAAoB,UAAU,OAAO;EAC7C;CACJ,GAAG,CAAC,KAAK,OAAO,CAAC;CAEjB,OAAO;EACH;EACA;EACA,eAAe,KAAK;EACpB,kBAAkB,KAAK;EACvB,SAAS,cAAsB,KAAK,SAAS;GAAE,MAAM,YAAY,IAAI,cAAc;GAAK,UAAU;EAAS,CAAC;CAChH;AACJ"}

package/dist/display/ActivityCard.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+interface ActivityCardProps {
+  loading?: boolean;
+  /** Cover, poster, or icon; the card gives it a fixed square to fill. */
+  artwork: ReactNode;
+  badges?: ReactNode;
+  /** A dense row of artwork and title with one subtitle, without the card chrome, detail, or badges. */
+  compact?: boolean;
+  detail?: string;
+  subtitle?: string;
+  title: string;
+}
+/** One thing happening on the server, whatever the media type: what it is, who has it, and how. */
+export declare function ActivityCard({ artwork, badges, compact, detail, subtitle, title, loading }: ActivityCardProps): import("react").JSX.Element;
+export declare function ActivityCardSkeleton(): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ActivityCard.d.ts.map

package/dist/display/ActivityCard.js

@@ -0,0 +1,58 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Inline, Stack } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/ActivityCard.tsx
+/** One thing happening on the server, whatever the media type: what it is, who has it, and how. */
+function ActivityCard({ artwork, badges, compact = false, detail, subtitle, title, loading = false }) {
+	return /* @__PURE__ */ jsxs("article", {
+		className: `flex min-w-0 items-center ${compact ? "gap-3 rounded-lg p-2" : "border-base-300 bg-base-100 gap-4 rounded-xl border p-3 shadow-xs"}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `shrink-0 ${compact ? "size-10" : "size-20"}`,
+			children: artwork
+		}), /* @__PURE__ */ jsxs(Stack, {
+			space: "tight",
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				space: "none",
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "label",
+					truncate: true,
+					title,
+					loading,
+					children: title
+				}), Object.entries(compact ? { subtitle } : {
+					subtitle,
+					detail
+				}).map(([key, line]) => line ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "caption",
+					tone: "muted",
+					truncate: true,
+					title: line,
+					loading,
+					children: line
+				}, key) : null)]
+			}), !compact && badges ? /* @__PURE__ */ jsx(Inline, {
+				wrap: true,
+				space: "tight",
+				children: badges
+			}) : null]
+		})]
+	});
+}
+function ActivityCardSkeleton() {
+	return /* @__PURE__ */ jsx(ActivityCard, {
+		loading: true,
+		artwork: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "artwork" }),
+		title: "",
+		subtitle: " ",
+		detail: " ",
+		badges: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "wide" })
+	});
+}
+export { ActivityCard, ActivityCardSkeleton };
+
+//# sourceMappingURL=ActivityCard.js.map

package/dist/display/ActivityCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityCard.js","names":[],"sources":["../../src/display/ActivityCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Inline, Stack } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\n\ninterface ActivityCardProps {\n    loading?: boolean;\n    /** Cover, poster, or icon; the card gives it a fixed square to fill. */\n    artwork: ReactNode;\n    badges?: ReactNode;\n    /** A dense row of artwork and title with one subtitle, without the card chrome, detail, or badges. */\n    compact?: boolean;\n    detail?: string;\n    subtitle?: string;\n    title: string;\n}\n\n/** One thing happening on the server, whatever the media type: what it is, who has it, and how. */\nexport function ActivityCard({\n    artwork,\n    badges,\n    compact = false,\n    detail,\n    subtitle,\n    title,\n    loading = false,\n}: ActivityCardProps) {\n    return (\n        <article\n            className={`flex min-w-0 items-center ${compact ? 'gap-3 rounded-lg p-2' : 'border-base-300 bg-base-100 gap-4 rounded-xl border p-3 shadow-xs'}`}\n        >\n            <div className={`shrink-0 ${compact ? 'size-10' : 'size-20'}`}>{artwork}</div>\n            <Stack space=\"tight\" className=\"min-w-0 flex-1\">\n                <Stack space=\"none\" className=\"min-w-0\">\n                    <Text as=\"span\" variant=\"label\" truncate title={title} loading={loading}>\n                        {title}\n                    </Text>\n                    {Object.entries(compact ? { subtitle } : { subtitle, detail }).map(([key, line]) =>\n                        line ? (\n                            <Text\n                                key={key}\n                                as=\"span\"\n                                variant=\"caption\"\n                                tone=\"muted\"\n                                truncate\n                                title={line}\n                                loading={loading}\n                            >\n                                {line}\n                            </Text>\n                        ) : null,\n                    )}\n                </Stack>\n                {!compact && badges ? (\n                    <Inline wrap space=\"tight\">\n                        {badges}\n                    </Inline>\n                ) : null}\n            </Stack>\n        </article>\n    );\n}\n\nexport function ActivityCardSkeleton() {\n    return (\n        <ActivityCard\n            loading\n            artwork={<SkeletonLoader.Shape presentation=\"artwork\" />}\n            title=\"\"\n            subtitle=\" \"\n            detail=\" \"\n            badges={<SkeletonLoader.Shape width=\"wide\" />}\n        />\n    );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,aAAa,EACzB,SACA,QACA,UAAU,OACV,QACA,UACA,OACA,UAAU,SACQ;CAClB,OACI,qBAAC,WAAD;EACI,WAAW,6BAA6B,UAAU,yBAAyB;EAD/E,UAAA,CAGI,oBAAC,OAAD;GAAK,WAAW,YAAY,UAAU,YAAY;GAAc,UAAA;EAAa,CAAA,GAC7E,qBAAC,OAAD;GAAO,OAAM;GAAQ,WAAU;GAA/B,UAAA,CACI,qBAAC,OAAD;IAAO,OAAM;IAAO,WAAU;IAA9B,UAAA,CACI,oBAAC,MAAD;KAAM,IAAG;KAAO,SAAQ;KAAQ,UAAA;KAAgB;KAAgB;KAC3D,UAAA;IACC,CAAA,GACL,OAAO,QAAQ,UAAU,EAAE,SAAS,IAAI;KAAE;KAAU;IAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,UACtE,OACI,oBAAC,MAAD;KAEI,IAAG;KACH,SAAQ;KACR,MAAK;KACL,UAAA;KACA,OAAO;KACE;KAER,UAAA;IACC,GATG,GASH,IACN,IACR,CACG;GACN,CAAA,GAAA,CAAC,WAAW,SACT,oBAAC,QAAD;IAAQ,MAAA;IAAK,OAAM;IACd,UAAA;GACG,CAAA,IACR,IACD;EACF,CAAA,CAAA;;AAEjB;AAEA,SAAgB,uBAAuB;CACnC,OACI,oBAAC,cAAD;EACI,SAAA;EACA,SAAS,oBAAC,eAAe,OAAhB,EAAsB,cAAa,UAAW,CAAA;EACvD,OAAM;EACN,UAAS;EACT,QAAO;EACP,QAAQ,oBAAC,eAAe,OAAhB,EAAsB,OAAM,OAAQ,CAAA;CAC/C,CAAA;AAET"}

package/dist/display/Artwork.d.ts

@@ -0,0 +1,25 @@
+import { ItemActionProps } from "./ItemAction.js";
+import { HTMLAttributeReferrerPolicy, ReactNode } from "react";
+export interface ArtworkProps {
+  alt: string;
+  aspect?: 'square' | 'video' | 'poster' | 'logo';
+  error?: boolean;
+  errorLabel?: string;
+  fallback?: ReactNode;
+  loadingLabel?: string;
+  pendingLabel?: string;
+  editAction?: ItemActionProps;
+  /** Makes the whole image a button, typically to enlarge it; offered only when there is an image to show. */
+  viewAction?: {
+    label: string;
+    onClick: () => void;
+  };
+  showLoadingIndicator?: boolean;
+  pending?: boolean;
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
+  sizes?: string;
+  src?: string;
+  srcSet?: string;
+}
+export declare function Artwork({ alt, aspect, error, errorLabel, fallback, loadingLabel, pendingLabel, editAction, viewAction, showLoadingIndicator, pending, referrerPolicy, sizes, src, srcSet }: ArtworkProps): import("react").JSX.Element;
+//# sourceMappingURL=Artwork.d.ts.map

package/dist/display/Artwork.js

@@ -0,0 +1,97 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { ItemAction } from "./ItemAction.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/Artwork.tsx
+function Artwork({ alt, aspect = "square", error = false, errorLabel, fallback, loadingLabel, pendingLabel, editAction, viewAction, showLoadingIndicator = true, pending = false, referrerPolicy, sizes, src, srcSet }) {
+	const [failedSource, setFailedSource] = useState();
+	const [loadedSource, setLoadedSource] = useState();
+	const [slowSource, setSlowSource] = useState();
+	const imageRef = useRef(null);
+	const failed = error || Boolean(src && failedSource === src);
+	const loaded = Boolean(src && !failed && loadedSource === src);
+	const shouldLoad = Boolean(src && !failed);
+	const loading = !loaded && !failed && Boolean(pending || pendingLabel || loadingLabel || shouldLoad);
+	const state = loadingLabel || pendingLabel ? "loading" : loaded ? "ready" : loading ? "loading" : "placeholder";
+	const showLoading = state === "loading" && Boolean(loadingLabel || !pendingLabel && src && slowSource === src);
+	const revealImage = useCallback((image, source) => {
+		if (!source) return;
+		const current = () => imageRef.current === image && image.getAttribute("src") === source;
+		const reveal = () => {
+			if (!current()) return;
+			setLoadedSource(source);
+		};
+		if (typeof image.decode === "function") image.decode().then(reveal, () => {
+			if (current()) setFailedSource(source);
+		});
+		else reveal();
+	}, []);
+	const attachImage = useCallback((image) => {
+		imageRef.current = image;
+		if (image?.complete && image.naturalWidth > 0) revealImage(image, src);
+	}, [revealImage, src]);
+	useEffect(() => {
+		if (!shouldLoad || loaded) return;
+		const timeout = window.setTimeout(() => setSlowSource(src), 150);
+		return () => window.clearTimeout(timeout);
+	}, [
+		loaded,
+		shouldLoad,
+		src
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		role: pendingLabel ? "status" : void 0,
+		"aria-label": pendingLabel,
+		"aria-busy": state === "loading",
+		className: `relative overflow-hidden rounded-lg ${aspect === "logo" ? "aspect-[3/1]" : aspect === "poster" ? "bg-base-200 aspect-[2/3]" : aspect === "video" ? "bg-base-200 aspect-video" : "bg-base-200 aspect-square"}`,
+		"data-state": state,
+		children: [
+			loading ? /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				children: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: aspect === "poster" ? "poster" : "artwork" })
+			}) : !loaded ? /* @__PURE__ */ jsx("span", {
+				role: failed && errorLabel ? "img" : void 0,
+				"aria-label": failed ? errorLabel : void 0,
+				"aria-hidden": failed && errorLabel ? void 0 : true,
+				className: "text-base-400 absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "size-1/3 max-h-16 min-h-4 max-w-16 min-w-4 [&>svg]:size-full",
+					children: fallback
+				})
+			}) : null,
+			showLoading && showLoadingIndicator || editAction && state !== "loading" ? /* @__PURE__ */ jsx("div", {
+				className: "absolute right-2 bottom-2 z-10",
+				children: /* @__PURE__ */ jsx(ItemAction, {
+					action: editAction,
+					loading: showLoading,
+					loadingLabel
+				})
+			}) : null,
+			shouldLoad ? /* @__PURE__ */ jsx("img", {
+				alt,
+				ref: attachImage,
+				className: `absolute inset-0 size-full ${aspect === "logo" ? "object-contain" : "object-cover"} ${loaded ? "opacity-100" : "opacity-0"}`,
+				decoding: "async",
+				loading: "lazy",
+				referrerPolicy,
+				sizes,
+				src,
+				srcSet,
+				onError: () => setFailedSource(src),
+				onLoad: (event) => revealImage(event.currentTarget, src)
+			}) : null,
+			viewAction && shouldLoad ? /* @__PURE__ */ jsx("button", {
+				...tabbable,
+				type: "button",
+				"aria-label": viewAction.label,
+				title: viewAction.label,
+				className: "hover:bg-base-900/10 focus-visible:outline-primary absolute inset-0 cursor-zoom-in rounded-lg transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 motion-reduce:transition-none",
+				onClick: viewAction.onClick
+			}) : null
+		]
+	});
+}
+export { Artwork };
+
+//# sourceMappingURL=Artwork.js.map

package/dist/display/Artwork.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Artwork.js","names":[],"sources":["../../src/display/Artwork.tsx"],"sourcesContent":["import { type HTMLAttributeReferrerPolicy, type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { ItemAction, type ItemActionProps } from './ItemAction';\n\nexport interface ArtworkProps {\n    alt: string;\n    aspect?: 'square' | 'video' | 'poster' | 'logo';\n    error?: boolean;\n    errorLabel?: string;\n    fallback?: ReactNode;\n    loadingLabel?: string;\n    pendingLabel?: string;\n    editAction?: ItemActionProps;\n    /** Makes the whole image a button, typically to enlarge it; offered only when there is an image to show. */\n    viewAction?: { label: string; onClick: () => void };\n    showLoadingIndicator?: boolean;\n    pending?: boolean;\n    referrerPolicy?: HTMLAttributeReferrerPolicy;\n    sizes?: string;\n    src?: string;\n    srcSet?: string;\n}\n\nexport function Artwork({\n    alt,\n    aspect = 'square',\n    error = false,\n    errorLabel,\n    fallback,\n    loadingLabel,\n    pendingLabel,\n    editAction,\n    viewAction,\n    showLoadingIndicator = true,\n    pending = false,\n    referrerPolicy,\n    sizes,\n    src,\n    srcSet,\n}: ArtworkProps) {\n    const [failedSource, setFailedSource] = useState<string>();\n    const [loadedSource, setLoadedSource] = useState<string>();\n    const [slowSource, setSlowSource] = useState<string>();\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const failed = error || Boolean(src && failedSource === src);\n    const loaded = Boolean(src && !failed && loadedSource === src);\n    const shouldLoad = Boolean(src && !failed);\n    const loading = !loaded && !failed && Boolean(pending || pendingLabel || loadingLabel || shouldLoad);\n    const state = loadingLabel || pendingLabel ? 'loading' : loaded ? 'ready' : loading ? 'loading' : 'placeholder';\n    const showLoading = state === 'loading' && Boolean(loadingLabel || (!pendingLabel && src && slowSource === src));\n    const revealImage = useCallback((image: HTMLImageElement, source: string | undefined) => {\n        if (!source) return;\n\n        const current = () => imageRef.current === image && image.getAttribute('src') === source;\n        const reveal = () => {\n            if (!current()) return;\n\n            setLoadedSource(source);\n        };\n\n        if (typeof image.decode === 'function') {\n            void image.decode().then(reveal, () => {\n                if (current()) setFailedSource(source);\n            });\n        } else reveal();\n    }, []);\n    const attachImage = useCallback(\n        (image: HTMLImageElement | null) => {\n            imageRef.current = image;\n\n            if (image?.complete && image.naturalWidth > 0) revealImage(image, src);\n        },\n        [revealImage, src],\n    );\n\n    useEffect(() => {\n        if (!shouldLoad || loaded) return;\n\n        const timeout = window.setTimeout(() => setSlowSource(src), 150);\n\n        return () => window.clearTimeout(timeout);\n    }, [loaded, shouldLoad, src]);\n\n    return (\n        <div\n            role={pendingLabel ? 'status' : undefined}\n            aria-label={pendingLabel}\n            aria-busy={state === 'loading'}\n            className={`relative overflow-hidden rounded-lg ${aspect === 'logo' ? 'aspect-[3/1]' : aspect === 'poster' ? 'bg-base-200 aspect-[2/3]' : aspect === 'video' ? 'bg-base-200 aspect-video' : 'bg-base-200 aspect-square'}`}\n            data-state={state}\n        >\n            {loading ? (\n                <div className=\"absolute inset-0\">\n                    <SkeletonLoader.Shape presentation={aspect === 'poster' ? 'poster' : 'artwork'} />\n                </div>\n            ) : !loaded ? (\n                <span\n                    role={failed && errorLabel ? 'img' : undefined}\n                    aria-label={failed ? errorLabel : undefined}\n                    aria-hidden={failed && errorLabel ? undefined : true}\n                    className=\"text-base-400 absolute inset-0 flex items-center justify-center\"\n                >\n                    <span className=\"size-1/3 max-h-16 min-h-4 max-w-16 min-w-4 [&>svg]:size-full\">{fallback}</span>\n                </span>\n            ) : null}\n            {(showLoading && showLoadingIndicator) || (editAction && state !== 'loading') ? (\n                <div className=\"absolute right-2 bottom-2 z-10\">\n                    <ItemAction action={editAction} loading={showLoading} loadingLabel={loadingLabel} />\n                </div>\n            ) : null}\n            {shouldLoad ? (\n                <img\n                    alt={alt}\n                    ref={attachImage}\n                    className={`absolute inset-0 size-full ${aspect === 'logo' ? 'object-contain' : 'object-cover'} ${loaded ? 'opacity-100' : 'opacity-0'}`}\n                    decoding=\"async\"\n                    loading=\"lazy\"\n                    referrerPolicy={referrerPolicy}\n                    sizes={sizes}\n                    src={src}\n                    srcSet={srcSet}\n                    onError={() => setFailedSource(src)}\n                    onLoad={(event) => revealImage(event.currentTarget, src)}\n                />\n            ) : null}\n            {viewAction && shouldLoad ? (\n                <button\n                    {...tabbable}\n                    type=\"button\"\n                    aria-label={viewAction.label}\n                    title={viewAction.label}\n                    className=\"hover:bg-base-900/10 focus-visible:outline-primary absolute inset-0 cursor-zoom-in rounded-lg transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 motion-reduce:transition-none\"\n                    onClick={viewAction.onClick}\n                />\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/display/Avatar.d.ts

@@ -0,0 +1,5 @@
+import { AvatarProps } from "@ninna-ui/primitives";
+type AvatarProps$1 = Omit<AvatarProps, 'color' | 'size' | 'radius'>;
+declare function Avatar$1(props: AvatarProps$1): import("react").JSX.Element;
+export { Avatar$1 as Avatar };
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/display/Avatar.js

@@ -0,0 +1,13 @@
+import { Avatar } from "@ninna-ui/primitives";
+import { jsx } from "react/jsx-runtime";
+// src/display/Avatar.tsx
+function Avatar$1(props) {
+	return /* @__PURE__ */ jsx(Avatar, {
+		...props,
+		color: "neutral",
+		size: "sm"
+	});
+}
+export { Avatar$1 as Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/display/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":["Avatar","NinnaAvatar"],"sources":["../../src/display/Avatar.tsx"],"sourcesContent":["import { Avatar as NinnaAvatar, type AvatarProps as NinnaAvatarProps } from '@ninna-ui/primitives';\n\ntype AvatarProps = Omit<NinnaAvatarProps, 'color' | 'size' | 'radius'>;\n\nexport function Avatar(props: AvatarProps) {\n    return <NinnaAvatar {...props} color=\"neutral\" size=\"sm\" />;\n}\n"],"mappings":";;;AAIA,SAAgBA,SAAO,OAAoB;CACvC,OAAO,oBAACC,QAAD;EAAa,GAAI;EAAO,OAAM;EAAU,MAAK;CAAM,CAAA;AAC9D"}

package/dist/display/Badge.d.ts

@@ -0,0 +1,10 @@
+import { StatusTone } from "../feedback/StatusIndicator.js";
+import { BadgeProps } from "@ninna-ui/primitives";
+type BadgeProps$1 = Omit<BadgeProps, 'color' | 'size' | 'variant'> & {
+  tone?: StatusTone | 'accent';
+  /** A lar-brand app hue that colours the badge in place of its tone. */
+  hue?: number;
+};
+declare function Badge$1({ tone, hue, className, style, ...props }: BadgeProps$1): import("react").JSX.Element;
+export { Badge$1 as Badge, BadgeProps$1 as BadgeProps };
+//# sourceMappingURL=Badge.d.ts.map

package/dist/display/Badge.js

@@ -0,0 +1,28 @@
+import { Badge } from "@ninna-ui/primitives";
+import { jsx } from "react/jsx-runtime";
+// src/display/Badge.tsx
+/** T3 Code's badge: a 6px-radius label on an 8% tint of its tone, in the tone's foreground colour. */
+const toneClasses = {
+	neutral: "bg-base-200 text-base-800 dark:bg-base-300 dark:text-base-800",
+	accent: "bg-primary/10 text-primary dark:bg-primary/20 dark:text-[color-mix(in_srgb,var(--color-primary)_55%,white)]",
+	success: "bg-success/10 text-(--lar-success-text) dark:bg-success/16",
+	warning: "bg-warning/12 text-(--lar-warning-text) dark:bg-warning/16",
+	danger: "bg-danger/10 text-(--lar-danger-text) dark:bg-danger/16",
+	info: "bg-info/10 text-(--lar-info-text) dark:bg-info/16"
+};
+function Badge$1({ tone = "neutral", hue, className = "", style, ...props }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		...props,
+		color: tone === "accent" ? "primary" : tone,
+		size: "sm",
+		variant: "soft",
+		style: hue === void 0 ? style : {
+			...style,
+			"--lar-kind-hue": hue
+		},
+		className: `h-5 gap-1 rounded-sm px-1.5 text-xs font-medium [&>svg]:size-3 [&>svg]:shrink-0 ${hue === void 0 ? toneClasses[tone] : "kind-badge!"} ${className}`
+	});
+}
+export { Badge$1 as Badge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/display/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["Badge","NinnaBadge"],"sources":["../../src/display/Badge.tsx"],"sourcesContent":["import { Badge as NinnaBadge, type BadgeProps as NinnaBadgeProps } from '@ninna-ui/primitives';\nimport type { CSSProperties } from 'react';\n\nimport type { StatusTone } from '../feedback/StatusIndicator';\n\nexport type BadgeProps = Omit<NinnaBadgeProps, 'color' | 'size' | 'variant'> & {\n    tone?: StatusTone | 'accent';\n    /** A lar-brand app hue that colours the badge in place of its tone. */\n    hue?: number;\n};\n\n/** T3 Code's badge: a 6px-radius label on an 8% tint of its tone, in the tone's foreground colour. */\nconst toneClasses: Record<NonNullable<BadgeProps['tone']>, string> = {\n    neutral: 'bg-base-200 text-base-800 dark:bg-base-300 dark:text-base-800',\n    accent: 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-[color-mix(in_srgb,var(--color-primary)_55%,white)]',\n    success: 'bg-success/10 text-(--lar-success-text) dark:bg-success/16',\n    warning: 'bg-warning/12 text-(--lar-warning-text) dark:bg-warning/16',\n    danger: 'bg-danger/10 text-(--lar-danger-text) dark:bg-danger/16',\n    info: 'bg-info/10 text-(--lar-info-text) dark:bg-info/16',\n};\n\nexport function Badge({ tone = 'neutral', hue, className = '', style, ...props }: BadgeProps) {\n    return (\n        <NinnaBadge\n            {...props}\n            color={tone === 'accent' ? 'primary' : tone}\n            size=\"sm\"\n            variant=\"soft\"\n            style={hue === undefined ? style : ({ ...style, '--lar-kind-hue': hue } as CSSProperties)}\n            className={`h-5 gap-1 rounded-sm px-1.5 text-xs font-medium [&>svg]:size-3 [&>svg]:shrink-0 ${hue === undefined ? toneClasses[tone] : 'kind-badge!'} ${className}`}\n        />\n    );\n}\n"],"mappings":";;;;AAYA,MAAM,cAA+D;CACjE,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACV;AAEA,SAAgBA,QAAM,EAAE,OAAO,WAAW,KAAK,YAAY,IAAI,OAAO,GAAG,SAAqB;CAC1F,OACI,oBAACC,OAAD;EACI,GAAI;EACJ,OAAO,SAAS,WAAW,YAAY;EACvC,MAAK;EACL,SAAQ;EACR,OAAO,QAAQ,KAAA,IAAY,QAAS;GAAE,GAAG;GAAO,kBAAkB;EAAI;EACtE,WAAW,mFAAmF,QAAQ,KAAA,IAAY,YAAY,QAAQ,cAAc,GAAG;CAC1J,CAAA;AAET"}

package/dist/display/BadgeList.d.ts

@@ -0,0 +1,11 @@
+export interface BadgeListItem {
+  id: string;
+  label: string;
+  /** Shown struck through, as a warning, when the item doesn't apply. */
+  struck?: boolean;
+}
+export declare function BadgeList({ items, label }: {
+  items: readonly BadgeListItem[];
+  label?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=BadgeList.d.ts.map

package/dist/display/BadgeList.js

@@ -0,0 +1,20 @@
+import { Badge } from "./Badge.js";
+import { jsx } from "react/jsx-runtime";
+// src/display/BadgeList.tsx
+function BadgeList({ items, label }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: "flex flex-wrap gap-2",
+		children: items.map(({ id, label: text, struck = false }) => /* @__PURE__ */ jsx("li", {
+			className: "max-w-full min-w-0",
+			children: /* @__PURE__ */ jsx(Badge, {
+				tone: struck ? "warning" : "neutral",
+				className: "max-w-full wrap-break-word whitespace-normal",
+				children: struck ? /* @__PURE__ */ jsx("del", { children: text }) : text
+			})
+		}, id))
+	});
+}
+export { BadgeList };
+
+//# sourceMappingURL=BadgeList.js.map

package/dist/display/BadgeList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeList.js","names":[],"sources":["../../src/display/BadgeList.tsx"],"sourcesContent":["import { Badge } from './Badge';\n\nexport interface BadgeListItem {\n    id: string;\n    label: string;\n    /** Shown struck through, as a warning, when the item doesn't apply. */\n    struck?: boolean;\n}\n\nexport function BadgeList({ items, label }: { items: readonly BadgeListItem[]; label?: string }) {\n    return (\n        <ul aria-label={label} className=\"flex flex-wrap gap-2\">\n            {items.map(({ id, label: text, struck = false }) => (\n                <li key={id} className=\"max-w-full min-w-0\">\n                    <Badge\n                        tone={struck ? 'warning' : 'neutral'}\n                        className=\"max-w-full wrap-break-word whitespace-normal\"\n                    >\n                        {struck ? <del>{text}</del> : text}\n                    </Badge>\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;AASA,SAAgB,UAAU,EAAE,OAAO,SAA8D;CAC7F,OACI,oBAAC,MAAD;EAAI,cAAY;EAAO,WAAU;EAC5B,UAAA,MAAM,KAAK,EAAE,IAAI,OAAO,MAAM,SAAS,YACpC,oBAAC,MAAD;GAAa,WAAU;GACnB,UAAA,oBAAC,OAAD;IACI,MAAM,SAAS,YAAY;IAC3B,WAAU;IAET,UAAA,SAAS,oBAAC,OAAD,EAAA,UAAM,KAAU,CAAA,IAAI;GAC3B,CAAA;EACP,GAPK,EAOL,CACP;CACD,CAAA;AAEZ"}

package/dist/display/BrandMark.d.ts

@@ -0,0 +1,21 @@
+import { AnchorHTMLAttributes } from "react";
+declare const sizes: {
+  readonly md: 'text-xl';
+  readonly lg: 'text-[1.6rem]';
+};
+/** The Lar lockup: the mark stands in for the L, on the baseline, then "ar", then an optional product name in grey
+ *  after a 0.26em space (lar-brand SPEC.md). */
+export declare function BrandMark({ label, product, size }: {
+  label: string;
+  product?: string;
+  size?: keyof typeof sizes;
+}): import("react").JSX.Element;
+interface BrandLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {
+  href: string;
+  label: string;
+  onNavigate: (href: string) => void;
+}
+/** The lockup as the link home. */
+export declare function BrandLink({ href, label, onNavigate, ...props }: BrandLinkProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=BrandMark.d.ts.map

package/dist/display/BrandMark.js

@@ -0,0 +1,60 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/BrandMark.tsx
+const MARK_L = "M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z";
+const MARK_S = "M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z";
+const sizes = {
+	md: "text-xl",
+	lg: "text-[1.6rem]"
+};
+/** The Lar lockup: the mark stands in for the L, on the baseline, then "ar", then an optional product name in grey
+*  after a 0.26em space (lar-brand SPEC.md). */
+function BrandMark({ label, product, size = "md" }) {
+	return /* @__PURE__ */ jsxs("span", {
+		role: "img",
+		"aria-label": label,
+		className: `lar-brand-mark inline-flex shrink-0 items-baseline leading-none ${sizes[size]}`,
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": true,
+				viewBox: "0 0 100 100",
+				className: "mr-[0.07em] size-[0.705em] shrink-0",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: MARK_L,
+					fill: "currentColor"
+				}), /* @__PURE__ */ jsx("path", {
+					d: MARK_S,
+					fill: "#355292"
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "font-bold tracking-[-0.03em]",
+				children: "ar"
+			}),
+			product ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "ml-[0.26em] font-medium tracking-[-0.02em] text-[#6b6b73] dark:text-[#8b8b94]",
+				children: product
+			}) : null
+		]
+	});
+}
+/** The lockup as the link home. */
+function BrandLink({ href, label, onNavigate, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		...tabbable,
+		...props,
+		href,
+		onClick: (event) => {
+			if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+			event.preventDefault();
+			onNavigate(href);
+		},
+		className: "focus-visible:outline-primary -mx-1 inline-flex items-center rounded-md px-1 py-1 focus-visible:outline-2",
+		children: /* @__PURE__ */ jsx(BrandMark, { label })
+	});
+}
+export { BrandLink, BrandMark };
+
+//# sourceMappingURL=BrandMark.js.map

package/dist/display/BrandMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandMark.js","names":[],"sources":["../../src/display/BrandMark.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\n// The lar mark on a 100-unit box: the L takes the ink colour, the block is always lar blue.\nconst MARK_L = 'M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z';\nconst MARK_S =\n    'M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z';\n\nconst sizes = { md: 'text-xl', lg: 'text-[1.6rem]' } as const;\n\n/** The Lar lockup: the mark stands in for the L, on the baseline, then \"ar\", then an optional product name in grey\n *  after a 0.26em space (lar-brand SPEC.md). */\nexport function BrandMark({\n    label,\n    product,\n    size = 'md',\n}: {\n    label: string;\n    product?: string;\n    size?: keyof typeof sizes;\n}) {\n    return (\n        <span\n            role=\"img\"\n            aria-label={label}\n            className={`lar-brand-mark inline-flex shrink-0 items-baseline leading-none ${sizes[size]}`}\n        >\n            <svg aria-hidden viewBox=\"0 0 100 100\" className=\"mr-[0.07em] size-[0.705em] shrink-0\">\n                <path d={MARK_L} fill=\"currentColor\" />\n                <path d={MARK_S} fill=\"#355292\" />\n            </svg>\n            <span aria-hidden className=\"font-bold tracking-[-0.03em]\">\n                ar\n            </span>\n            {product ? (\n                <span\n                    aria-hidden\n                    className=\"ml-[0.26em] font-medium tracking-[-0.02em] text-[#6b6b73] dark:text-[#8b8b94]\"\n                >\n                    {product}\n                </span>\n            ) : null}\n        </span>\n    );\n}\n\ninterface BrandLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {\n    href: string;\n    label: string;\n    onNavigate: (href: string) => void;\n}\n\n/** The lockup as the link home. */\nexport function BrandLink({ href, label, onNavigate, ...props }: BrandLinkProps) {\n    return (\n        <a\n            {...tabbable}\n            {...props}\n            href={href}\n            onClick={(event) => {\n                if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;\n\n                event.preventDefault();\n                onNavigate(href);\n            }}\n            className=\"focus-visible:outline-primary -mx-1 inline-flex items-center rounded-md px-1 py-1 focus-visible:outline-2\"\n        >\n            <BrandMark label={label} />\n        </a>\n    );\n}\n"],"mappings":";;;AAKA,MAAM,SAAS;AACf,MAAM,SACF;AAEJ,MAAM,QAAQ;CAAE,IAAI;CAAW,IAAI;AAAgB;;;AAInD,SAAgB,UAAU,EACtB,OACA,SACA,OAAO,QAKR;CACC,OACI,qBAAC,QAAD;EACI,MAAK;EACL,cAAY;EACZ,WAAW,mEAAmE,MAAM;EAHxF,UAAA;GAKI,qBAAC,OAAD;IAAK,eAAA;IAAY,SAAQ;IAAc,WAAU;IAAjD,UAAA,CACI,oBAAC,QAAD;KAAM,GAAG;KAAQ,MAAK;IAAgB,CAAA,GACtC,oBAAC,QAAD;KAAM,GAAG;KAAQ,MAAK;IAAW,CAAA,CAChC;;GACL,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAU;IAA+B,UAAA;GAErD,CAAA;GACL,UACG,oBAAC,QAAD;IACI,eAAA;IACA,WAAU;IAET,UAAA;GACC,CAAA,IACN;EACF;;AAEd;;AASA,SAAgB,UAAU,EAAE,MAAM,OAAO,YAAY,GAAG,SAAyB;CAC7E,OACI,oBAAC,KAAD;EACI,GAAI;EACJ,GAAI;EACE;EACN,UAAU,UAAU;GAChB,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,GAAG;GAE5E,MAAM,eAAe;GACrB,WAAW,IAAI;EACnB;EACA,WAAU;EAEV,UAAA,oBAAC,WAAD,EAAkB,MAAQ,CAAA;CAC3B,CAAA;AAEX"}

package/dist/display/ChangeList.d.ts

@@ -0,0 +1,16 @@
+export interface ChangeListItem {
+  changes: readonly {
+    from: string;
+    key: string;
+    label: string;
+    to: string;
+  }[];
+  key: string;
+  title: string;
+}
+/** Before → after values grouped under the item they belong to. */
+export declare function ChangeList({ items, label }: {
+  items: readonly ChangeListItem[];
+  label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ChangeList.d.ts.map