@lar-works/design-system 0.2.0 → 0.3.0

package/dist/collections/CollectionState.js

@@ -23,16 +23,23 @@ const variants = {
 		layout: "max-w-md px-4 py-5",
 		icon: "[&>svg]:size-6",
 		space: "related"
+	},
+	/** A first run's welcome in an app's empty main area: its `icon` (such as the brand mark) in its own colours over a
+	*  section-sized title. */
+	welcome: {
+		layout: "max-w-xl px-6 py-16",
+		icon: "",
+		space: "group"
 	}
 };
-function CollectionState({ actionLabel, description, icon, onAction, title, variant = "page" }) {
+function CollectionState({ action, actionLabel, description, icon, onAction, title, variant = "page" }) {
 	const compact = variant === "compact" || variant === "panel";
 	const state = /* @__PURE__ */ jsxs(Stack, {
 		align: "center",
 		space: variants[variant].space,
 		className: `mx-auto text-center ${variants[variant].layout}`,
 		children: [
-			icon ? /* @__PURE__ */ jsx("span", {
+			icon ? variant === "welcome" ? icon : /* @__PURE__ */ jsx("span", {
 				className: `text-base-500 ${variants[variant].icon}`,
 				children: icon
 			}) : null,
@@ -43,7 +50,7 @@ function CollectionState({ actionLabel, description, icon, onAction, title, vari
 					children: title
 				}) : /* @__PURE__ */ jsx(Heading, {
 					as: "h2",
-					variant: "subsection",
+					variant: variant === "welcome" ? "section" : "subsection",
 					children: title
 				}), /* @__PURE__ */ jsx(Text, {
 					variant: compact ? "caption" : "description",
@@ -51,12 +58,12 @@ function CollectionState({ actionLabel, description, icon, onAction, title, vari
 					children: description
 				})]
 			}),
-			actionLabel && onAction ? /* @__PURE__ */ jsx(Button, {
+			action ?? (actionLabel && onAction ? /* @__PURE__ */ jsx(Button, {
 				type: "button",
 				onClick: onAction,
 				variant: "secondary",
 				children: actionLabel
-			}) : null
+			}) : null)
 		]
 	});
 	return variant === "framed" || variant === "panel" ? /* @__PURE__ */ jsx("div", {

package/dist/collections/CollectionState.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionState.js","names":[],"sources":["../../src/collections/CollectionState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { Stack } from '../layout/Flow';\nimport { Heading, Text } from '../typography/Typography';\n\nconst page = { layout: 'max-w-lg px-6 py-16', icon: '[&>svg]:size-8', space: 'group' } as const;\nconst variants = {\n    page,\n    /** A placeholder outlining the content that will fill the region. */\n    framed: page,\n    /** Fits inside a panel or popover instead of owning a page region. */\n    compact: { layout: 'max-w-64 px-3 py-6', icon: '[&>svg]:size-6', space: 'related' },\n    /** A quiet empty state with the same surface as dashboard content. */\n    panel: { layout: 'max-w-md px-4 py-5', icon: '[&>svg]:size-6', space: 'related' },\n} as const;\n\ninterface CollectionStateProps {\n    actionLabel?: string;\n    description: string;\n    icon?: ReactNode;\n    onAction?: () => void;\n    title: string;\n    variant?: keyof typeof variants;\n}\n\nexport function CollectionState({\n    actionLabel,\n    description,\n    icon,\n    onAction,\n    title,\n    variant = 'page',\n}: CollectionStateProps) {\n    const compact = variant === 'compact' || variant === 'panel';\n    const state = (\n        <Stack\n            align=\"center\"\n            space={variants[variant].space}\n            className={`mx-auto text-center ${variants[variant].layout}`}\n        >\n            {icon ? <span className={`text-base-500 ${variants[variant].icon}`}>{icon}</span> : null}\n            <Stack space=\"tight\">\n                {compact ? (\n                    <Text variant=\"label\">{title}</Text>\n                ) : (\n                    <Heading as=\"h2\" variant=\"subsection\">\n                        {title}\n                    </Heading>\n                )}\n                <Text variant={compact ? 'caption' : 'description'} tone=\"muted\">\n                    {description}\n                </Text>\n            </Stack>\n            {actionLabel && onAction ? (\n                <Button type=\"button\" onClick={onAction} variant=\"secondary\">\n                    {actionLabel}\n                </Button>\n            ) : null}\n        </Stack>\n    );\n\n    return variant === 'framed' || variant === 'panel' ? (\n        <div\n            className={\n                variant === 'panel'\n                    ? 'border-base-300 bg-base-100 rounded-xl border'\n                    : 'border-base-300 rounded-xl border border-dashed'\n            }\n        >\n            {state}\n        </div>\n    ) : (\n        state\n    );\n}\n"],"mappings":";;;;;AAMA,MAAM,OAAO;CAAE,QAAQ;CAAuB,MAAM;CAAkB,OAAO;AAAQ;AACrF,MAAM,WAAW;CACb;;CAEA,QAAQ;;CAER,SAAS;EAAE,QAAQ;EAAsB,MAAM;EAAkB,OAAO;CAAU;;CAElF,OAAO;EAAE,QAAQ;EAAsB,MAAM;EAAkB,OAAO;CAAU;AACpF;AAWA,SAAgB,gBAAgB,EAC5B,aACA,aACA,MACA,UACA,OACA,UAAU,UACW;CACrB,MAAM,UAAU,YAAY,aAAa,YAAY;CACrD,MAAM,QACF,qBAAC,OAAD;EACI,OAAM;EACN,OAAO,SAAS,QAAQ,CAAC;EACzB,WAAW,uBAAuB,SAAS,QAAQ,CAAC;EAHxD,UAAA;GAKK,OAAO,oBAAC,QAAD;IAAM,WAAW,iBAAiB,SAAS,QAAQ,CAAC;IAAS,UAAA;GAAW,CAAA,IAAI;GACpF,qBAAC,OAAD;IAAO,OAAM;IAAb,UAAA,CACK,UACG,oBAAC,MAAD;KAAM,SAAQ;KAAS,UAAA;IAAY,CAAA,IAEnC,oBAAC,SAAD;KAAS,IAAG;KAAK,SAAQ;KACpB,UAAA;IACI,CAAA,GAEb,oBAAC,MAAD;KAAM,SAAS,UAAU,YAAY;KAAe,MAAK;KACpD,UAAA;IACC,CAAA,CACH;;GACN,eAAe,WACZ,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAS;IAAU,SAAQ;IAC5C,UAAA;GACG,CAAA,IACR;EACD;;CAGX,OAAO,YAAY,YAAY,YAAY,UACvC,oBAAC,OAAD;EACI,WACI,YAAY,UACN,kDACA;EAGT,UAAA;CACA,CAAA,IAEL;AAER"}
+{"version":3,"file":"CollectionState.js","names":[],"sources":["../../src/collections/CollectionState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { Stack } from '../layout/Flow';\nimport { Heading, Text } from '../typography/Typography';\n\nconst page = { layout: 'max-w-lg px-6 py-16', icon: '[&>svg]:size-8', space: 'group' } as const;\nconst variants = {\n    page,\n    /** A placeholder outlining the content that will fill the region. */\n    framed: page,\n    /** Fits inside a panel or popover instead of owning a page region. */\n    compact: { layout: 'max-w-64 px-3 py-6', icon: '[&>svg]:size-6', space: 'related' },\n    /** A quiet empty state with the same surface as dashboard content. */\n    panel: { layout: 'max-w-md px-4 py-5', icon: '[&>svg]:size-6', space: 'related' },\n    /** A first run's welcome in an app's empty main area: its `icon` (such as the brand mark) in its own colours over a\n     *  section-sized title. */\n    welcome: { layout: 'max-w-xl px-6 py-16', icon: '', space: 'group' },\n} as const;\n\ninterface CollectionStateProps {\n    /** The action in place of `actionLabel` and `onAction`, for a caller whose button has its own look or markers. */\n    action?: ReactNode;\n    actionLabel?: string;\n    description: string;\n    icon?: ReactNode;\n    onAction?: () => void;\n    title: string;\n    variant?: keyof typeof variants;\n}\n\nexport function CollectionState({\n    action,\n    actionLabel,\n    description,\n    icon,\n    onAction,\n    title,\n    variant = 'page',\n}: CollectionStateProps) {\n    const compact = variant === 'compact' || variant === 'panel';\n    const state = (\n        <Stack\n            align=\"center\"\n            space={variants[variant].space}\n            className={`mx-auto text-center ${variants[variant].layout}`}\n        >\n            {icon ? (\n                variant === 'welcome' ? (\n                    icon\n                ) : (\n                    <span className={`text-base-500 ${variants[variant].icon}`}>{icon}</span>\n                )\n            ) : null}\n            <Stack space=\"tight\">\n                {compact ? (\n                    <Text variant=\"label\">{title}</Text>\n                ) : (\n                    <Heading as=\"h2\" variant={variant === 'welcome' ? 'section' : 'subsection'}>\n                        {title}\n                    </Heading>\n                )}\n                <Text variant={compact ? 'caption' : 'description'} tone=\"muted\">\n                    {description}\n                </Text>\n            </Stack>\n            {action ??\n                (actionLabel && onAction ? (\n                    <Button type=\"button\" onClick={onAction} variant=\"secondary\">\n                        {actionLabel}\n                    </Button>\n                ) : null)}\n        </Stack>\n    );\n\n    return variant === 'framed' || variant === 'panel' ? (\n        <div\n            className={\n                variant === 'panel'\n                    ? 'border-base-300 bg-base-100 rounded-xl border'\n                    : 'border-base-300 rounded-xl border border-dashed'\n            }\n        >\n            {state}\n        </div>\n    ) : (\n        state\n    );\n}\n"],"mappings":";;;;;AAMA,MAAM,OAAO;CAAE,QAAQ;CAAuB,MAAM;CAAkB,OAAO;AAAQ;AACrF,MAAM,WAAW;CACb;;CAEA,QAAQ;;CAER,SAAS;EAAE,QAAQ;EAAsB,MAAM;EAAkB,OAAO;CAAU;;CAElF,OAAO;EAAE,QAAQ;EAAsB,MAAM;EAAkB,OAAO;CAAU;;;CAGhF,SAAS;EAAE,QAAQ;EAAuB,MAAM;EAAI,OAAO;CAAQ;AACvE;AAaA,SAAgB,gBAAgB,EAC5B,QACA,aACA,aACA,MACA,UACA,OACA,UAAU,UACW;CACrB,MAAM,UAAU,YAAY,aAAa,YAAY;CACrD,MAAM,QACF,qBAAC,OAAD;EACI,OAAM;EACN,OAAO,SAAS,QAAQ,CAAC;EACzB,WAAW,uBAAuB,SAAS,QAAQ,CAAC;EAHxD,UAAA;GAKK,OACG,YAAY,YACR,OAEA,oBAAC,QAAD;IAAM,WAAW,iBAAiB,SAAS,QAAQ,CAAC;IAAS,UAAA;GAAW,CAAA,IAE5E;GACJ,qBAAC,OAAD;IAAO,OAAM;IAAb,UAAA,CACK,UACG,oBAAC,MAAD;KAAM,SAAQ;KAAS,UAAA;IAAY,CAAA,IAEnC,oBAAC,SAAD;KAAS,IAAG;KAAK,SAAS,YAAY,YAAY,YAAY;KACzD,UAAA;IACI,CAAA,GAEb,oBAAC,MAAD;KAAM,SAAS,UAAU,YAAY;KAAe,MAAK;KACpD,UAAA;IACC,CAAA,CACH;;GACN,WACI,eAAe,WACZ,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAS;IAAU,SAAQ;IAC5C,UAAA;GACG,CAAA,IACR;EACL;;CAGX,OAAO,YAAY,YAAY,YAAY,UACvC,oBAAC,OAAD;EACI,WACI,YAAY,UACN,kDACA;EAGT,UAAA;CACA,CAAA,IAEL;AAER"}

package/dist/collections/ResultList.js

@@ -4,8 +4,8 @@ import { Stack } from "../layout/Flow.js";
 import { LinkBox, LinkOverlay } from "../typography/Link.js";
 import { Text } from "../typography/Typography.js";
 import { createContext, useContext } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/collections/ResultList.tsx
 const ResultListContext = createContext({
 	compact: false,

package/dist/collections/ScrollRow.js

@@ -1,8 +1,8 @@
 import { IconButton } from "../actions/IconButton.js";
 import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
 import { Inline } from "../layout/Flow.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/collections/ScrollRow.tsx
 const row = "-mx-1 flex snap-x scroll-px-1 gap-4 overflow-x-auto px-1 pt-1 pb-3";
 /** One row of wide cards, such as video stills, that scrolls sideways instead of wrapping. */

package/dist/collections/VirtualList.js

@@ -6,8 +6,8 @@ import { useCollectionViewport } from "./CollectionViewport.js";
 import { DataRow } from "./DataRow.js";
 import { useCollectionMotion } from "./useCollectionMotion.js";
 import { useCallback, useEffect, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useWindowVirtualizer } from "@tanstack/react-virtual";
 // src/collections/VirtualList.tsx
 function VirtualList({ columns, count, itemAt, itemLabel, label, onRangeChange, onSelect, itemHref, onNavigate, placeholderAt, itemKey, loading, section, sort, direction = "asc" }) {

package/dist/display/Avatar.d.ts

@@ -1,5 +1,8 @@
 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;
+type AvatarProps$1 = Omit<AvatarProps, 'color' | 'size' | 'radius'> & {
+  /** The 24px avatar beside a name in a dense list, such as a comment's author. */
+  compact?: boolean;
+};
+declare function Avatar$1({ compact, ...props }: AvatarProps$1): import("react").JSX.Element;
 export { Avatar$1 as Avatar };
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/display/Avatar.js

@@ -1,11 +1,11 @@
 import { Avatar } from "@ninna-ui/primitives";
 import { jsx } from "react/jsx-runtime";
 // src/display/Avatar.tsx
-function Avatar$1(props) {
+function Avatar$1({ compact = false, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar, {
 		...props,
 		color: "neutral",
-		size: "sm"
+		size: compact ? "xs" : "sm"
 	});
 }
 export { Avatar$1 as Avatar };

package/dist/display/Avatar.js.map

@@ -1 +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"}
+{"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    /** The 24px avatar beside a name in a dense list, such as a comment's author. */\n    compact?: boolean;\n};\n\nexport function Avatar({ compact = false, ...props }: AvatarProps) {\n    return <NinnaAvatar {...props} color=\"neutral\" size={compact ? 'xs' : 'sm'} />;\n}\n"],"mappings":";;;AAOA,SAAgBA,SAAO,EAAE,UAAU,OAAO,GAAG,SAAsB;CAC/D,OAAO,oBAACC,QAAD;EAAa,GAAI;EAAO,OAAM;EAAU,MAAM,UAAU,OAAO;CAAO,CAAA;AACjF"}

package/dist/display/Badge.d.ts

@@ -4,7 +4,12 @@ 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;
+  /** A tracker label's own colour, such as GitHub's, as a soft tint readable in both modes; anything but a colour
+   *  keeps the tone. */
+  labelColor?: string | undefined;
+  /** Dims the text to the muted colour, for an entry that is listed but switched off. */
+  muted?: boolean;
 };
-declare function Badge$1({ tone, hue, className, style, ...props }: BadgeProps$1): import("react").JSX.Element;
+declare function Badge$1({ tone, hue, labelColor, muted, 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

@@ -1,3 +1,4 @@
+import { tint } from "./LabelTint.js";
 import { Badge } from "@ninna-ui/primitives";
 import { jsx } from "react/jsx-runtime";
 // src/display/Badge.tsx
@@ -10,17 +11,21 @@ const toneClasses = {
 	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 }) {
+function Badge$1({ tone = "neutral", hue, labelColor, muted = false, className = "", style, ...props }) {
+	const labelTint = tint(labelColor);
 	return /* @__PURE__ */ jsx(Badge, {
 		...props,
 		color: tone === "accent" ? "primary" : tone,
 		size: "sm",
 		variant: "soft",
-		style: hue === void 0 ? style : {
+		style: hue !== void 0 ? {
 			...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}`
+		} : labelTint ? {
+			...style,
+			...labelTint
+		} : style,
+		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!"} ${muted ? "text-(--muted-foreground)" : ""} ${className}`
 	});
 }
 export { Badge$1 as Badge };

package/dist/display/Badge.js.map

@@ -1 +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"}
+{"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';\nimport { tint } from './LabelTint';\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    /** A tracker label's own colour, such as GitHub's, as a soft tint readable in both modes; anything but a colour\n     *  keeps the tone. */\n    labelColor?: string | undefined;\n    /** Dims the text to the muted colour, for an entry that is listed but switched off. */\n    muted?: boolean;\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({\n    tone = 'neutral',\n    hue,\n    labelColor,\n    muted = false,\n    className = '',\n    style,\n    ...props\n}: BadgeProps) {\n    const labelTint = tint(labelColor);\n\n    return (\n        <NinnaBadge\n            {...props}\n            color={tone === 'accent' ? 'primary' : tone}\n            size=\"sm\"\n            variant=\"soft\"\n            style={\n                hue !== undefined\n                    ? ({ ...style, '--lar-kind-hue': hue } as CSSProperties)\n                    : labelTint\n                      ? { ...style, ...labelTint }\n                      : style\n            }\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!'} ${muted ? 'text-(--muted-foreground)' : ''} ${className}`}\n        />\n    );\n}\n"],"mappings":";;;;;AAkBA,MAAM,cAA+D;CACjE,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACV;AAEA,SAAgBA,QAAM,EAClB,OAAO,WACP,KACA,YACA,QAAQ,OACR,YAAY,IACZ,OACA,GAAG,SACQ;CACX,MAAM,YAAY,KAAK,UAAU;CAEjC,OACI,oBAACC,OAAD;EACI,GAAI;EACJ,OAAO,SAAS,WAAW,YAAY;EACvC,MAAK;EACL,SAAQ;EACR,OACI,QAAQ,KAAA,IACD;GAAE,GAAG;GAAO,kBAAkB;EAAI,IACnC,YACE;GAAE,GAAG;GAAO,GAAG;EAAU,IACzB;EAEZ,WAAW,mFAAmF,QAAQ,KAAA,IAAY,YAAY,QAAQ,cAAc,GAAG,QAAQ,8BAA8B,GAAG,GAAG;CACtM,CAAA;AAET"}

package/dist/display/CheckList.js

@@ -1,6 +1,6 @@
 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/CheckList.tsx
 /** Short statements of what something does or includes, each with a check mark. */
 function CheckList({ items, label }) {

package/dist/display/Comment.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+/** The comments, newest first, one Comment each, such as a ticket's. */
+export declare function CommentList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** A comment: its author's avatar beside a card with their name and `time` over the comment. */
+export declare function Comment({ author, time, children }: {
+  author: string;
+  time: ReactNode;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Comment.d.ts.map

package/dist/display/Comment.js

@@ -0,0 +1,39 @@
+import { Avatar } from "./Avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/Comment.tsx
+/** The comments, newest first, one Comment each, such as a ticket's. */
+function CommentList({ children }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: "m-0 grid list-none grid-cols-[minmax(0,1fr)] gap-3 p-0",
+		children
+	});
+}
+/** A comment: its author's avatar beside a card with their name and `time` over the comment. */
+function Comment({ author, time, children }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex gap-3",
+		children: [/* @__PURE__ */ jsx(Avatar, {
+			name: author,
+			compact: true
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "border-border bg-base-100 min-w-0 flex-1 rounded-lg border",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "border-border flex items-center gap-2 border-b px-3 py-1.5 text-xs",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					"data-comment-author": true,
+					children: author
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-base-700",
+					children: time
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "px-3 py-2",
+				children
+			})]
+		})]
+	});
+}
+export { Comment, CommentList };
+
+//# sourceMappingURL=Comment.js.map

package/dist/display/Comment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comment.js","names":[],"sources":["../../src/display/Comment.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Avatar } from './Avatar';\n\n/** The comments, newest first, one Comment each, such as a ticket's. */\nexport function CommentList({ children }: { children: ReactNode }) {\n    return <ol className=\"m-0 grid list-none grid-cols-[minmax(0,1fr)] gap-3 p-0\">{children}</ol>;\n}\n\n/** A comment: its author's avatar beside a card with their name and `time` over the comment. */\nexport function Comment({ author, time, children }: { author: string; time: ReactNode; children: ReactNode }) {\n    return (\n        <li className=\"flex gap-3\">\n            <Avatar name={author} compact />\n            <div className=\"border-border bg-base-100 min-w-0 flex-1 rounded-lg border\">\n                <div className=\"border-border flex items-center gap-2 border-b px-3 py-1.5 text-xs\">\n                    <span className=\"font-medium\" data-comment-author>\n                        {author}\n                    </span>\n                    <span className=\"text-base-700\">{time}</span>\n                </div>\n                <div className=\"px-3 py-2\">{children}</div>\n            </div>\n        </li>\n    );\n}\n"],"mappings":";;;;AAKA,SAAgB,YAAY,EAAE,YAAqC;CAC/D,OAAO,oBAAC,MAAD;EAAI,WAAU;EAA0D;CAAa,CAAA;AAChG;;AAGA,SAAgB,QAAQ,EAAE,QAAQ,MAAM,YAAsE;CAC1G,OACI,qBAAC,MAAD;EAAI,WAAU;EAAd,UAAA,CACI,oBAAC,QAAD;GAAQ,MAAM;GAAQ,SAAA;EAAS,CAAA,GAC/B,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,QAAD;KAAM,WAAU;KAAc,uBAAA;KACzB,UAAA;IACC,CAAA,GACN,oBAAC,QAAD;KAAM,WAAU;KAAiB,UAAA;IAAW,CAAA,CAC3C;GACL,CAAA,GAAA,oBAAC,OAAD;IAAK,WAAU;IAAa;GAAc,CAAA,CACzC;EACL,CAAA,CAAA;;AAEZ"}

package/dist/display/CopyButton.d.ts

@@ -2,8 +2,16 @@ interface CopyButtonProps {
   copiedLabel: string;
   label: string;
   value: string;
+  /** `icon` is a copy icon that turns into a tick; `text` is a compact button that reads `copyText`, then
+   *  `copiedLabel`, as a dense tool's Copy beside a command. */
+  presentation?: 'icon' | 'text';
+  /** The text presentation's word before a copy, such as "Copy"; `label` stays its accessible name. */
+  copyText?: string;
+  /** Called after each copy, such as to announce it in a live region. */
+  onCopied?: () => void;
 }
-/** The LAN admin also runs over HTTP, where the async clipboard API is unavailable. */
-export declare function CopyButton({ copiedLabel, label, value }: CopyButtonProps): import("react").JSX.Element;
+/** Copies `value`. The LAN admin also runs over HTTP, where the async clipboard API is unavailable, so it falls back
+ *  to a selected textarea. */
+export declare function CopyButton({ copiedLabel, label, value, presentation, copyText, onCopied }: CopyButtonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=CopyButton.d.ts.map

package/dist/display/CopyButton.js

@@ -1,11 +1,13 @@
+import { Button } from "../actions/Button.js";
 import { IconButton } from "../actions/IconButton.js";
 import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { CheckIcon, CopyIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 // src/display/CopyButton.tsx
 const COPIED_FEEDBACK_MS = 1500;
-/** The LAN admin also runs over HTTP, where the async clipboard API is unavailable. */
-function CopyButton({ copiedLabel, label, value }) {
+/** Copies `value`. The LAN admin also runs over HTTP, where the async clipboard API is unavailable, so it falls back
+*  to a selected textarea. */
+function CopyButton({ copiedLabel, label, value, presentation = "icon", copyText = label, onCopied }) {
 	const [copiedValue, setCopiedValue] = useState(null);
 	const [copying, setCopying] = useState(false);
 	const copied = copiedValue === value;
@@ -14,24 +16,35 @@ function CopyButton({ copiedLabel, label, value }) {
 		const timer = window.setTimeout(() => setCopiedValue(null), COPIED_FEEDBACK_MS);
 		return () => window.clearTimeout(timer);
 	}, [copiedValue]);
+	const copy = async () => {
+		setCopying(true);
+		let done = false;
+		try {
+			if (navigator.clipboard) {
+				await navigator.clipboard.writeText(value);
+				done = true;
+			} else done = copySelection(value);
+		} catch {
+			done = copySelection(value);
+		} finally {
+			setCopiedValue(done ? value : null);
+			setCopying(false);
+		}
+		if (done) onCopied?.();
+	};
+	if (presentation === "text") return /* @__PURE__ */ jsx(Button, {
+		variant: "secondary",
+		compact: true,
+		"aria-label": label,
+		onClick: () => void copy(),
+		children: copied ? copiedLabel : copyText
+	});
 	return /* @__PURE__ */ jsx(IconButton, {
 		icon: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
 		"aria-label": copied ? copiedLabel : label,
 		title: copied ? copiedLabel : label,
 		loading: copying,
-		onClick: async () => {
-			setCopying(true);
-			try {
-				if (navigator.clipboard) {
-					await navigator.clipboard.writeText(value);
-					setCopiedValue(value);
-				} else setCopiedValue(copySelection(value) ? value : null);
-			} catch {
-				setCopiedValue(copySelection(value) ? value : null);
-			} finally {
-				setCopying(false);
-			}
-		},
+		onClick: copy,
 		tone: copied ? "success" : "neutral"
 	});
 }

package/dist/display/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","names":[],"sources":["../../src/display/CopyButton.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\n\nconst COPIED_FEEDBACK_MS = 1500;\n\ninterface CopyButtonProps {\n    copiedLabel: string;\n    label: string;\n    value: string;\n}\n\n/** The LAN admin also runs over HTTP, where the async clipboard API is unavailable. */\nexport function CopyButton({ copiedLabel, label, value }: CopyButtonProps) {\n    const [copiedValue, setCopiedValue] = useState<string | null>(null);\n    const [copying, setCopying] = useState(false);\n    const copied = copiedValue === value;\n\n    useEffect(() => {\n        if (copiedValue === null) return undefined;\n\n        const timer = window.setTimeout(() => setCopiedValue(null), COPIED_FEEDBACK_MS);\n\n        return () => window.clearTimeout(timer);\n    }, [copiedValue]);\n\n    return (\n        <IconButton\n            icon={copied ? <CheckIcon /> : <CopyIcon />}\n            aria-label={copied ? copiedLabel : label}\n            title={copied ? copiedLabel : label}\n            loading={copying}\n            onClick={async () => {\n                setCopying(true);\n\n                try {\n                    if (navigator.clipboard) {\n                        await navigator.clipboard.writeText(value);\n                        setCopiedValue(value);\n                    } else {\n                        setCopiedValue(copySelection(value) ? value : null);\n                    }\n                } catch {\n                    setCopiedValue(copySelection(value) ? value : null);\n                } finally {\n                    setCopying(false);\n                }\n            }}\n            tone={copied ? 'success' : 'neutral'}\n        />\n    );\n}\n\nfunction copySelection(value: string): boolean {\n    if (typeof document.execCommand !== 'function') return false;\n\n    const previousFocus = document.activeElement;\n    const input = document.createElement('textarea');\n\n    input.value = value;\n    input.readOnly = true;\n    input.className = 'fixed -left-full top-0 opacity-0';\n    document.body.append(input);\n    input.focus({ preventScroll: true });\n    input.select();\n\n    try {\n        return document.execCommand('copy');\n    } catch {\n        return false;\n    } finally {\n        input.remove();\n\n        if (previousFocus instanceof HTMLElement) previousFocus.focus();\n    }\n}\n"],"mappings":";;;;;AAKA,MAAM,qBAAqB;;AAS3B,SAAgB,WAAW,EAAE,aAAa,OAAO,SAA0B;CACvE,MAAM,CAAC,aAAa,kBAAkB,SAAwB,IAAI;CAClE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,SAAS,gBAAgB;CAE/B,gBAAgB;EACZ,IAAI,gBAAgB,MAAM,OAAO,KAAA;EAEjC,MAAM,QAAQ,OAAO,iBAAiB,eAAe,IAAI,GAAG,kBAAkB;EAE9E,aAAa,OAAO,aAAa,KAAK;CAC1C,GAAG,CAAC,WAAW,CAAC;CAEhB,OACI,oBAAC,YAAD;EACI,MAAM,SAAS,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;EAC1C,cAAY,SAAS,cAAc;EACnC,OAAO,SAAS,cAAc;EAC9B,SAAS;EACT,SAAS,YAAY;GACjB,WAAW,IAAI;GAEf,IAAI;IACA,IAAI,UAAU,WAAW;KACrB,MAAM,UAAU,UAAU,UAAU,KAAK;KACzC,eAAe,KAAK;IACxB,OACI,eAAe,cAAc,KAAK,IAAI,QAAQ,IAAI;GAE1D,QAAQ;IACJ,eAAe,cAAc,KAAK,IAAI,QAAQ,IAAI;GACtD,UAAU;IACN,WAAW,KAAK;GACpB;EACJ;EACA,MAAM,SAAS,YAAY;CAC9B,CAAA;AAET;AAEA,SAAS,cAAc,OAAwB;CAC3C,IAAI,OAAO,SAAS,gBAAgB,YAAY,OAAO;CAEvD,MAAM,gBAAgB,SAAS;CAC/B,MAAM,QAAQ,SAAS,cAAc,UAAU;CAE/C,MAAM,QAAQ;CACd,MAAM,WAAW;CACjB,MAAM,YAAY;CAClB,SAAS,KAAK,OAAO,KAAK;CAC1B,MAAM,MAAM,EAAE,eAAe,KAAK,CAAC;CACnC,MAAM,OAAO;CAEb,IAAI;EACA,OAAO,SAAS,YAAY,MAAM;CACtC,QAAQ;EACJ,OAAO;CACX,UAAU;EACN,MAAM,OAAO;EAEb,IAAI,yBAAyB,aAAa,cAAc,MAAM;CAClE;AACJ"}
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../src/display/CopyButton.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { IconButton } from '../actions/IconButton';\n\nconst COPIED_FEEDBACK_MS = 1500;\n\ninterface CopyButtonProps {\n    copiedLabel: string;\n    label: string;\n    value: string;\n    /** `icon` is a copy icon that turns into a tick; `text` is a compact button that reads `copyText`, then\n     *  `copiedLabel`, as a dense tool's Copy beside a command. */\n    presentation?: 'icon' | 'text';\n    /** The text presentation's word before a copy, such as \"Copy\"; `label` stays its accessible name. */\n    copyText?: string;\n    /** Called after each copy, such as to announce it in a live region. */\n    onCopied?: () => void;\n}\n\n/** Copies `value`. The LAN admin also runs over HTTP, where the async clipboard API is unavailable, so it falls back\n *  to a selected textarea. */\nexport function CopyButton({\n    copiedLabel,\n    label,\n    value,\n    presentation = 'icon',\n    copyText = label,\n    onCopied,\n}: CopyButtonProps) {\n    const [copiedValue, setCopiedValue] = useState<string | null>(null);\n    const [copying, setCopying] = useState(false);\n    const copied = copiedValue === value;\n\n    useEffect(() => {\n        if (copiedValue === null) return undefined;\n\n        const timer = window.setTimeout(() => setCopiedValue(null), COPIED_FEEDBACK_MS);\n\n        return () => window.clearTimeout(timer);\n    }, [copiedValue]);\n\n    const copy = async () => {\n        setCopying(true);\n\n        let done = false;\n\n        try {\n            if (navigator.clipboard) {\n                await navigator.clipboard.writeText(value);\n                done = true;\n            } else {\n                done = copySelection(value);\n            }\n        } catch {\n            done = copySelection(value);\n        } finally {\n            setCopiedValue(done ? value : null);\n            setCopying(false);\n        }\n\n        if (done) onCopied?.();\n    };\n\n    if (presentation === 'text')\n        return (\n            <Button variant=\"secondary\" compact aria-label={label} onClick={() => void copy()}>\n                {copied ? copiedLabel : copyText}\n            </Button>\n        );\n\n    return (\n        <IconButton\n            icon={copied ? <CheckIcon /> : <CopyIcon />}\n            aria-label={copied ? copiedLabel : label}\n            title={copied ? copiedLabel : label}\n            loading={copying}\n            onClick={copy}\n            tone={copied ? 'success' : 'neutral'}\n        />\n    );\n}\n\nfunction copySelection(value: string): boolean {\n    if (typeof document.execCommand !== 'function') return false;\n\n    const previousFocus = document.activeElement;\n    const input = document.createElement('textarea');\n\n    input.value = value;\n    input.readOnly = true;\n    input.className = 'fixed -left-full top-0 opacity-0';\n    document.body.append(input);\n    input.focus({ preventScroll: true });\n    input.select();\n\n    try {\n        return document.execCommand('copy');\n    } catch {\n        return false;\n    } finally {\n        input.remove();\n\n        if (previousFocus instanceof HTMLElement) previousFocus.focus();\n    }\n}\n"],"mappings":";;;;;;AAMA,MAAM,qBAAqB;;;AAiB3B,SAAgB,WAAW,EACvB,aACA,OACA,OACA,eAAe,QACf,WAAW,OACX,YACgB;CAChB,MAAM,CAAC,aAAa,kBAAkB,SAAwB,IAAI;CAClE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,SAAS,gBAAgB;CAE/B,gBAAgB;EACZ,IAAI,gBAAgB,MAAM,OAAO,KAAA;EAEjC,MAAM,QAAQ,OAAO,iBAAiB,eAAe,IAAI,GAAG,kBAAkB;EAE9E,aAAa,OAAO,aAAa,KAAK;CAC1C,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,OAAO,YAAY;EACrB,WAAW,IAAI;EAEf,IAAI,OAAO;EAEX,IAAI;GACA,IAAI,UAAU,WAAW;IACrB,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,OAAO;GACX,OACI,OAAO,cAAc,KAAK;EAElC,QAAQ;GACJ,OAAO,cAAc,KAAK;EAC9B,UAAU;GACN,eAAe,OAAO,QAAQ,IAAI;GAClC,WAAW,KAAK;EACpB;EAEA,IAAI,MAAM,WAAW;CACzB;CAEA,IAAI,iBAAiB,QACjB,OACI,oBAAC,QAAD;EAAQ,SAAQ;EAAY,SAAA;EAAQ,cAAY;EAAO,eAAe,KAAK,KAAK;EAC3E,UAAA,SAAS,cAAc;CACpB,CAAA;CAGhB,OACI,oBAAC,YAAD;EACI,MAAM,SAAS,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;EAC1C,cAAY,SAAS,cAAc;EACnC,OAAO,SAAS,cAAc;EAC9B,SAAS;EACT,SAAS;EACT,MAAM,SAAS,YAAY;CAC9B,CAAA;AAET;AAEA,SAAS,cAAc,OAAwB;CAC3C,IAAI,OAAO,SAAS,gBAAgB,YAAY,OAAO;CAEvD,MAAM,gBAAgB,SAAS;CAC/B,MAAM,QAAQ,SAAS,cAAc,UAAU;CAE/C,MAAM,QAAQ;CACd,MAAM,WAAW;CACjB,MAAM,YAAY;CAClB,SAAS,KAAK,OAAO,KAAK;CAC1B,MAAM,MAAM,EAAE,eAAe,KAAK,CAAC;CACnC,MAAM,OAAO;CAEb,IAAI;EACA,OAAO,SAAS,YAAY,MAAM;CACtC,QAAQ;EACJ,OAAO;CACX,UAAU;EACN,MAAM,OAAO;EAEb,IAAI,yBAAyB,aAAa,cAAc,MAAM;CAClE;AACJ"}

package/dist/display/Diagram.d.ts

@@ -0,0 +1,17 @@
+interface DiagramProps {
+  /** The diagram's text, such as a Mermaid flowchart. */
+  source: string;
+  /** Draws `source` as an SVG document's markup; `id` is unique to this diagram. A rejection shows `failedLabel`. */
+  draw: (source: string, id: string) => Promise<string>;
+  /** The drawing's accessible name. */
+  label: string;
+  /** Shown in place of the drawing when `draw` fails. */
+  failedLabel: string;
+  /** The disclosure that shows the source under the drawing. */
+  sourceLabel: string;
+}
+/** A drawn diagram in a bordered figure, with its source under it in a disclosure. The SVG comes from `draw`, so the
+ *  design system needs no diagram library; a drawing too wide for its figure scrolls inside it. */
+export declare function Diagram({ source, draw, label, failedLabel, sourceLabel }: DiagramProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Diagram.d.ts.map

package/dist/display/Diagram.js

@@ -0,0 +1,49 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/Diagram.tsx
+/** A drawn diagram in a bordered figure, with its source under it in a disclosure. The SVG comes from `draw`, so the
+*  design system needs no diagram library; a drawing too wide for its figure scrolls inside it. */
+function Diagram({ source, draw, label, failedLabel, sourceLabel }) {
+	const id = useId().replace(/[^a-zA-Z0-9]/g, "");
+	const host = useRef(null);
+	const [failed, setFailed] = useState(null);
+	useEffect(() => {
+		const drawn = new AbortController();
+		draw(source, id).then((svg) => {
+			if (!drawn.signal.aborted && host.current) host.current.innerHTML = svg;
+		}, () => {
+			if (!drawn.signal.aborted) setFailed(source);
+		});
+		return () => drawn.abort();
+	}, [
+		draw,
+		id,
+		source
+	]);
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "m-0 grid min-w-0 gap-2 rounded-lg border p-3",
+		"data-map-diagram": true,
+		children: [failed === source ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "text-base-700 m-0 text-xs",
+			children: failedLabel
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: host,
+			className: "overflow-auto [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full",
+			role: "img",
+			"aria-label": label
+		}), /* @__PURE__ */ jsxs("details", {
+			className: "text-base-700 text-xs",
+			children: [/* @__PURE__ */ jsx("summary", {
+				className: "cursor-pointer",
+				children: sourceLabel
+			}), /* @__PURE__ */ jsx("pre", {
+				className: "overflow-auto pt-2 whitespace-pre-wrap",
+				children: source
+			})]
+		})]
+	});
+}
+export { Diagram };
+
+//# sourceMappingURL=Diagram.js.map

package/dist/display/Diagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Diagram.js","names":[],"sources":["../../src/display/Diagram.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\n\ninterface DiagramProps {\n    /** The diagram's text, such as a Mermaid flowchart. */\n    source: string;\n    /** Draws `source` as an SVG document's markup; `id` is unique to this diagram. A rejection shows `failedLabel`. */\n    draw: (source: string, id: string) => Promise<string>;\n    /** The drawing's accessible name. */\n    label: string;\n    /** Shown in place of the drawing when `draw` fails. */\n    failedLabel: string;\n    /** The disclosure that shows the source under the drawing. */\n    sourceLabel: string;\n}\n\n/** A drawn diagram in a bordered figure, with its source under it in a disclosure. The SVG comes from `draw`, so the\n *  design system needs no diagram library; a drawing too wide for its figure scrolls inside it. */\nexport function Diagram({ source, draw, label, failedLabel, sourceLabel }: DiagramProps) {\n    const id = useId().replace(/[^a-zA-Z0-9]/g, '');\n    const host = useRef<HTMLDivElement>(null);\n    // The source the diagram failed on, so a new source draws afresh.\n    const [failed, setFailed] = useState<string | null>(null);\n\n    useEffect(() => {\n        const drawn = new AbortController();\n\n        draw(source, id).then(\n            (svg) => {\n                if (!drawn.signal.aborted && host.current) host.current.innerHTML = svg;\n            },\n            () => {\n                if (!drawn.signal.aborted) setFailed(source);\n            },\n        );\n\n        return () => drawn.abort();\n    }, [draw, id, source]);\n\n    return (\n        <figure className=\"m-0 grid min-w-0 gap-2 rounded-lg border p-3\" data-map-diagram>\n            {failed === source ? (\n                <p role=\"status\" className=\"text-base-700 m-0 text-xs\">\n                    {failedLabel}\n                </p>\n            ) : (\n                <div\n                    ref={host}\n                    className=\"overflow-auto [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full\"\n                    role=\"img\"\n                    aria-label={label}\n                />\n            )}\n            <details className=\"text-base-700 text-xs\">\n                <summary className=\"cursor-pointer\">{sourceLabel}</summary>\n                <pre className=\"overflow-auto pt-2 whitespace-pre-wrap\">{source}</pre>\n            </details>\n        </figure>\n    );\n}\n"],"mappings":";;;;;AAiBA,SAAgB,QAAQ,EAAE,QAAQ,MAAM,OAAO,aAAa,eAA6B;CACrF,MAAM,KAAK,MAAM,CAAC,CAAC,QAAQ,iBAAiB,EAAE;CAC9C,MAAM,OAAO,OAAuB,IAAI;CAExC,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CAExD,gBAAgB;EACZ,MAAM,QAAQ,IAAI,gBAAgB;EAElC,KAAK,QAAQ,EAAE,CAAC,CAAC,MACZ,QAAQ;GACL,IAAI,CAAC,MAAM,OAAO,WAAW,KAAK,SAAS,KAAK,QAAQ,YAAY;EACxE,SACM;GACF,IAAI,CAAC,MAAM,OAAO,SAAS,UAAU,MAAM;EAC/C,CACJ;EAEA,aAAa,MAAM,MAAM;CAC7B,GAAG;EAAC;EAAM;EAAI;CAAM,CAAC;CAErB,OACI,qBAAC,UAAD;EAAQ,WAAU;EAA+C,oBAAA;EAAjE,UAAA,CACK,WAAW,SACR,oBAAC,KAAD;GAAG,MAAK;GAAS,WAAU;GACtB,UAAA;EACF,CAAA,IAEH,oBAAC,OAAD;GACI,KAAK;GACL,WAAU;GACV,MAAK;GACL,cAAY;EACf,CAAA,GAEL,qBAAC,WAAD;GAAS,WAAU;GAAnB,UAAA,CACI,oBAAC,WAAD;IAAS,WAAU;IAAkB,UAAA;GAAqB,CAAA,GAC1D,oBAAC,OAAD;IAAK,WAAU;IAA0C,UAAA;GAAY,CAAA,CAChE;EACL,CAAA,CAAA;;AAEhB"}

package/dist/display/ImagePicker.js

@@ -2,8 +2,8 @@ import { Button } from "../actions/Button.js";
 import { tabbable } from "../foundations/KeyboardFocus.js";
 import { Artwork } from "./Artwork.js";
 import { useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, Disc3Icon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/display/ImagePicker.tsx
 function ImagePicker({ label, header, children }) {
 	return /* @__PURE__ */ jsxs("section", {

package/dist/display/InfoBox.js

@@ -1,7 +1,7 @@
 import { Heading, Text } from "../typography/Typography.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRightIcon } from "lucide-react";
 import { Alert } from "@ninna-ui/feedback";
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/display/InfoBox.tsx
 /**
 * A prominent, actionable introduction that opens optional guidance.

package/dist/display/InsetPanel.d.ts

@@ -3,11 +3,13 @@ interface InsetPanelProps {
   children: ReactNode;
   onClick?: () => void;
   presentation?: 'default' | 'settings';
+  /** Under a `settings` panel's rows, on the muted surface: the group's own action, such as an add button. */
+  footer?: ReactNode;
 }
 /**
  * A neutral surface that groups related content without adding message or status meaning.
  * Use Alert for current status, InfoBox for optional guidance, and NoticeCard for a decision item.
  */
-export declare function InsetPanel({ children, onClick, presentation }: InsetPanelProps): import("react").JSX.Element;
+export declare function InsetPanel({ children, onClick, presentation, footer }: InsetPanelProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=InsetPanel.d.ts.map

package/dist/display/InsetPanel.js

@@ -1,15 +1,18 @@
 import { tabbable } from "../foundations/KeyboardFocus.js";
 import { Stack } from "../layout/Flow.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/display/InsetPanel.tsx
 /**
 * A neutral surface that groups related content without adding message or status meaning.
 * Use Alert for current status, InfoBox for optional guidance, and NoticeCard for a decision item.
 */
-function InsetPanel({ children, onClick, presentation = "default" }) {
-	if (presentation === "settings") return /* @__PURE__ */ jsx("div", {
+function InsetPanel({ children, onClick, presentation = "default", footer }) {
+	if (presentation === "settings") return /* @__PURE__ */ jsxs("div", {
 		className: "divide-base-300 border-base-300 bg-base-100 divide-y overflow-hidden rounded-lg border shadow-xs/5",
-		children
+		children: [children, footer && /* @__PURE__ */ jsx("div", {
+			className: "rounded-b-xl bg-(--muted) px-4 py-2",
+			children: footer
+		})]
 	});
 	return /* @__PURE__ */ jsx(Stack, {
 		as: onClick ? "button" : "div",

package/dist/display/InsetPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsetPanel.js","names":[],"sources":["../../src/display/InsetPanel.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Stack } from '../layout/Flow';\n\ninterface InsetPanelProps {\n    children: ReactNode;\n    onClick?: () => void;\n    presentation?: 'default' | 'settings';\n}\n\n/**\n * A neutral surface that groups related content without adding message or status meaning.\n * Use Alert for current status, InfoBox for optional guidance, and NoticeCard for a decision item.\n */\nexport function InsetPanel({ children, onClick, presentation = 'default' }: InsetPanelProps) {\n    if (presentation === 'settings') {\n        return (\n            <div className=\"divide-base-300 border-base-300 bg-base-100 divide-y overflow-hidden rounded-lg border shadow-xs/5\">\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Stack\n            as={onClick ? 'button' : 'div'}\n            type={onClick ? 'button' : undefined}\n            tabIndex={onClick ? tabbable.tabIndex : undefined}\n            onClick={onClick}\n            space=\"related\"\n            className={`border-base-300 bg-base-100 rounded-lg border p-5 ${onClick ? 'focus-visible:outline-primary w-full cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-offset-2' : ''}`}\n        >\n            {children}\n        </Stack>\n    );\n}\n"],"mappings":";;;;;;;;AAeA,SAAgB,WAAW,EAAE,UAAU,SAAS,eAAe,aAA8B;CACzF,IAAI,iBAAiB,YACjB,OACI,oBAAC,OAAD;EAAK,WAAU;EACV;CACA,CAAA;CAIb,OACI,oBAAC,OAAD;EACI,IAAI,UAAU,WAAW;EACzB,MAAM,UAAU,WAAW,KAAA;EAC3B,UAAU,UAAU,SAAS,WAAW,KAAA;EAC/B;EACT,OAAM;EACN,WAAW,qDAAqD,UAAU,yHAAyH;EAElM;CACE,CAAA;AAEf"}
+{"version":3,"file":"InsetPanel.js","names":[],"sources":["../../src/display/InsetPanel.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Stack } from '../layout/Flow';\n\ninterface InsetPanelProps {\n    children: ReactNode;\n    onClick?: () => void;\n    presentation?: 'default' | 'settings';\n    /** Under a `settings` panel's rows, on the muted surface: the group's own action, such as an add button. */\n    footer?: ReactNode;\n}\n\n/**\n * A neutral surface that groups related content without adding message or status meaning.\n * Use Alert for current status, InfoBox for optional guidance, and NoticeCard for a decision item.\n */\nexport function InsetPanel({ children, onClick, presentation = 'default', footer }: InsetPanelProps) {\n    if (presentation === 'settings') {\n        return (\n            <div className=\"divide-base-300 border-base-300 bg-base-100 divide-y overflow-hidden rounded-lg border shadow-xs/5\">\n                {children}\n                {footer && <div className=\"rounded-b-xl bg-(--muted) px-4 py-2\">{footer}</div>}\n            </div>\n        );\n    }\n\n    return (\n        <Stack\n            as={onClick ? 'button' : 'div'}\n            type={onClick ? 'button' : undefined}\n            tabIndex={onClick ? tabbable.tabIndex : undefined}\n            onClick={onClick}\n            space=\"related\"\n            className={`border-base-300 bg-base-100 rounded-lg border p-5 ${onClick ? 'focus-visible:outline-primary w-full cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-offset-2' : ''}`}\n        >\n            {children}\n        </Stack>\n    );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,WAAW,EAAE,UAAU,SAAS,eAAe,WAAW,UAA2B;CACjG,IAAI,iBAAiB,YACjB,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACK,UACA,UAAU,oBAAC,OAAD;GAAK,WAAU;GAAuC,UAAA;EAAY,CAAA,CAC5E;;CAIb,OACI,oBAAC,OAAD;EACI,IAAI,UAAU,WAAW;EACzB,MAAM,UAAU,WAAW,KAAA;EAC3B,UAAU,UAAU,SAAS,WAAW,KAAA;EAC/B;EACT,OAAM;EACN,WAAW,qDAAqD,UAAU,yHAAyH;EAElM;CACE,CAAA;AAEf"}

package/dist/display/ItemAction.js

@@ -1,6 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-import { PencilIcon } from "lucide-react";
 import { Loading } from "@ninna-ui/feedback";
+import { PencilIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 // src/display/ItemAction.tsx
 function ItemAction({ action, loading = false, loadingLabel }) {
 	const disabled = loading || !action?.onClick;

package/dist/display/LabelChip.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+type DataAttributes = {
+  [key: `data-${string}`]: string | undefined;
+};
+interface LabelChipProps extends DataAttributes {
+  /** The label's name, truncating, which its tooltip gives whole. */
+  label: string;
+  /** The label's own colour, such as a tracker's, as Badge's `labelColor`; none keeps the neutral badge. */
+  color?: string | undefined;
+  /** Follows the name, faded, such as "new" for a label still to be created. */
+  note?: ReactNode;
+  /** A lock before the name, for a label that can't be edited here; `lockedLabel` says why. */
+  locked?: boolean;
+  lockedLabel?: string;
+  /** A × after the name, for a chip inside a control that removes it, such as an active filter's. */
+  removable?: boolean;
+  /** Its own × button, which `removeLabel` names, that removes the label. */
+  onRemove?: () => void;
+  removeLabel?: string;
+  disabled?: boolean;
+}
+/** 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
+ *  removes it. */
+export declare function LabelChip({ label, color, note, locked, lockedLabel, removable, onRemove, removeLabel, disabled, ...data }: LabelChipProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=LabelChip.d.ts.map

package/dist/display/LabelChip.js

@@ -0,0 +1,41 @@
+import { Badge } from "./Badge.js";
+import { LockIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/display/LabelChip.tsx
+/** 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
+*  removes it. */
+function LabelChip({ label, color, note, locked = false, lockedLabel, removable = false, onRemove, removeLabel, disabled = false, ...data }) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		"data-label-chip": "",
+		...data,
+		title: locked ? lockedLabel : void 0,
+		className: "max-w-full min-w-0",
+		labelColor: color,
+		children: [
+			locked && /* @__PURE__ */ jsx(LockIcon, { "aria-label": lockedLabel }),
+			/* @__PURE__ */ jsx("span", {
+				className: "max-w-52 truncate",
+				title: label,
+				children: label
+			}),
+			note && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("span", {
+				className: "opacity-70",
+				children: note
+			})] }),
+			onRemove ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cursor-pointer bg-transparent p-0",
+				"aria-label": removeLabel,
+				disabled,
+				onClick: onRemove,
+				children: "×"
+			}) : removable && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "×"
+			})
+		]
+	});
+}
+export { LabelChip };
+
+//# sourceMappingURL=LabelChip.js.map