@stll/ui 0.55.1 → 0.57.0

package/dist/components/dialog.js

@@ -14,13 +14,26 @@ import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 const DialogCreateHandle = Dialog$1.createHandle;
 const DialogLabelsContext = createContext({
 	close: "Close",
-	unsavedChanges: "Unsaved changes. Press Esc again to discard"
+	unsavedChanges: "Unsaved changes. Press Esc again to discard",
+	unsavedChangesClose: "Unsaved changes. Close again to discard"
 });
 const DialogProvider = ({ labels, children }) => /* @__PURE__ */ jsx(DialogLabelsContext, {
 	value: labels,
 	children
 });
 const DialogDismissalContext = createContext("idle");
+/**
+* The close requests the guard holds back. A programmatic close
+* (`imperative-action`, or a controlled `open` set to false after a save) is
+* the owner's decision and passes straight through.
+*/
+const GUARDED_CLOSE_REASONS = /* @__PURE__ */ new Set([
+	"close-press",
+	"escape-key",
+	"focus-out",
+	"outside-press",
+	"trigger-press"
+]);
 const Dialog = ({ dirty = false, onOpenChange, onOpenChangeComplete, ...props }) => {
 	const [dismissal, setDismissal] = useState("idle");
 	const pendingDiscard = useRef([]);
@@ -36,9 +49,11 @@ const Dialog = ({ dirty = false, onOpenChange, onOpenChangeComplete, ...props })
 				...props,
 				onOpenChange: (open, details) => {
 					const hasChanges = dirty || [...forms.sources.values()].some((source) => source.dirty);
-					if (!open && details.reason === "escape-key" && hasChanges && (dismissal === "idle" || details.event.repeat)) {
+					const isEscape = details.reason === "escape-key";
+					const isRepeat = isEscape && details.event instanceof KeyboardEvent && details.event.repeat;
+					if (!open && hasChanges && GUARDED_CLOSE_REASONS.has(details.reason) && (dismissal === "idle" || isRepeat)) {
 						details.cancel();
-						setDismissal("confirm-discard");
+						setDismissal(isEscape ? "confirm-escape" : "confirm-close");
 						return;
 					}
 					onOpenChange?.(open, details);
@@ -111,7 +126,13 @@ const DIALOG_MOBILE_POPUP_CLASS_NAMES = {
 	centered: void 0,
 	fullscreen: "max-sm:h-full max-sm:max-w-none max-sm:rounded-none max-sm:border-0 max-sm:ps-(--safe-area-inline-start) max-sm:pe-(--safe-area-inline-end) max-sm:pt-(--safe-area-top) max-sm:pb-(--safe-area-bottom) max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden"
 };
-const DialogPopup = ({ backdropClassName, className, children, showCloseButton = true, mobileLayout = DIALOG_MOBILE_LAYOUT.bottomSheet, layer = "default", viewportClassName, ...props }) => {
+const DIALOG_SIZE_CLASS_NAMES = {
+	sm: "max-w-sm",
+	default: "max-w-lg",
+	lg: "max-w-2xl",
+	xl: "max-w-4xl"
+};
+const DialogPopup = ({ backdropClassName, className, children, showCloseButton = true, mobileLayout = DIALOG_MOBILE_LAYOUT.bottomSheet, layer = "default", size = "default", viewportClassName, ...props }) => {
 	const dismissal = useContext(DialogDismissalContext);
 	const labels = useContext(DialogLabelsContext);
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {
@@ -121,20 +142,21 @@ const DialogPopup = ({ backdropClassName, className, children, showCloseButton =
 		className: cn(DIALOG_MOBILE_VIEWPORT_CLASS_NAMES[mobileLayout], viewportClassName),
 		layer,
 		children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
-			className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-150 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", DIALOG_MOBILE_POPUP_CLASS_NAMES[mobileLayout], className),
+			className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-150 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", DIALOG_SIZE_CLASS_NAMES[size], DIALOG_MOBILE_POPUP_CLASS_NAMES[mobileLayout], className),
+			"data-size": size,
 			"data-slot": "dialog-popup",
 			...props,
 			children: [
-				dismissal === "confirm-discard" && /* @__PURE__ */ jsx("div", {
+				dismissal !== "idle" && /* @__PURE__ */ jsx("div", {
 					className: "flex shrink-0 justify-end ps-2 pe-12 pt-2",
 					children: /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground max-w-64 px-2 py-1 text-xs",
 						role: "status",
-						children: labels.unsavedChanges
+						children: dismissal === "confirm-escape" ? labels.unsavedChanges : labels.unsavedChangesClose
 					})
 				}),
 				children,
-				(showCloseButton || dismissal === "confirm-discard") && /* @__PURE__ */ jsx(Dialog$1.Close, {
+				(showCloseButton || dismissal !== "idle") && /* @__PURE__ */ jsx(Dialog$1.Close, {
 					"aria-label": labels.close,
 					className: "absolute end-2 top-2",
 					render: /* @__PURE__ */ jsx(Button, {
@@ -176,4 +198,4 @@ const DialogPanel = ({ className, scrollFade = true, ...props }) => /* @__PURE__
 	})
 });
 //#endregion
-export { DIALOG_MOBILE_LAYOUT, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };
+export { DIALOG_MOBILE_LAYOUT, DIALOG_SIZE_CLASS_NAMES, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/horizontal-scroller.js

@@ -2,6 +2,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { containedEventHandler } from "../hooks/use-contained-handler.js";
+import { SCROLL_EDGE_FADE_CLASS, writeScrollEdgeFade } from "../lib/scroll-edge-fade.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 //#region src/components/horizontal-scroller.tsx
@@ -13,6 +14,7 @@ const HorizontalScroller = ({ children, className, nextLabel, previousLabel, con
 		canScrollStart: false
 	});
 	const measure = useCallback((node) => {
+		writeScrollEdgeFade(node);
 		setState(scrollState(node.scrollLeft, node.scrollWidth, node.clientWidth, getComputedStyle(node).direction === "rtl" ? "rtl" : "ltr"));
 	}, []);
 	const viewportRef = useCallback((node) => {
@@ -55,40 +57,35 @@ const HorizontalScroller = ({ children, className, nextLabel, previousLabel, con
 			});
 		}),
 		...props,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: cn("scrollbar-subtle overflow-x-auto overscroll-x-contain", viewportClassName),
-				onScroll,
-				ref: viewportRef,
-				children: /* @__PURE__ */ jsx("div", {
-					className: cn("w-max min-w-full", contentClassName),
-					children
-				})
-			}),
-			state.canScrollStart && /* @__PURE__ */ jsx("div", { className: "from-background pointer-events-none absolute inset-y-0 start-0 w-10 bg-linear-to-r to-transparent rtl:bg-linear-to-l" }),
-			state.canScrollEnd && /* @__PURE__ */ jsx("div", { className: "from-background pointer-events-none absolute inset-y-0 end-0 w-10 bg-linear-to-l to-transparent rtl:bg-linear-to-r" }),
-			(state.canScrollStart || state.canScrollEnd) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-				"aria-disabled": !state.canScrollStart,
-				tabIndex: state.canScrollStart ? void 0 : -1,
-				"aria-label": previousLabel,
-				className: cn(CONTROL_CLASS, "start-1", !state.canScrollStart && "pointer-events-none opacity-0 focus-visible:opacity-100"),
-				onClick: () => {
-					if (state.canScrollStart) scroll(-1);
-				},
-				type: "button",
-				children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4 rtl:rotate-180" })
-			}), /* @__PURE__ */ jsx("button", {
-				"aria-disabled": !state.canScrollEnd,
-				tabIndex: state.canScrollEnd ? void 0 : -1,
-				"aria-label": nextLabel,
-				className: cn(CONTROL_CLASS, "end-1", !state.canScrollEnd && "pointer-events-none opacity-0 focus-visible:opacity-100"),
-				onClick: () => {
-					if (state.canScrollEnd) scroll(1);
-				},
-				type: "button",
-				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 rtl:rotate-180" })
-			})] })
-		]
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("scrollbar-subtle overflow-x-auto overscroll-x-contain [--fade-size:2.5rem]", SCROLL_EDGE_FADE_CLASS, viewportClassName),
+			onScroll,
+			ref: viewportRef,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("w-max min-w-full", contentClassName),
+				children
+			})
+		}), (state.canScrollStart || state.canScrollEnd) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			"aria-disabled": !state.canScrollStart,
+			tabIndex: state.canScrollStart ? void 0 : -1,
+			"aria-label": previousLabel,
+			className: cn(CONTROL_CLASS, "start-1", !state.canScrollStart && "pointer-events-none opacity-0 focus-visible:opacity-100"),
+			onClick: () => {
+				if (state.canScrollStart) scroll(-1);
+			},
+			type: "button",
+			children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4 rtl:rotate-180" })
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-disabled": !state.canScrollEnd,
+			tabIndex: state.canScrollEnd ? void 0 : -1,
+			"aria-label": nextLabel,
+			className: cn(CONTROL_CLASS, "end-1", !state.canScrollEnd && "pointer-events-none opacity-0 focus-visible:opacity-100"),
+			onClick: () => {
+				if (state.canScrollEnd) scroll(1);
+			},
+			type: "button",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 rtl:rotate-180" })
+		})] })]
 	});
 };
 const scrollState = (scrollLeft, scrollWidth, clientWidth, direction) => {

package/dist/components/input.native.d.ts

@@ -0,0 +1,23 @@
+import { InputContract, TextFieldContract } from "./input.shared.js";
+import { TextInputProps } from "react-native";
+//#region src/components/input.native.d.ts
+type NativeFieldProps = Omit<TextInputProps, keyof TextFieldContract> & TextFieldContract & {
+  className?: string | undefined;
+};
+/**
+ * A text field in the web's type and colours: the caret, placeholder and
+ * selection read the theme tokens, and `disabled` stops editing.
+ */
+export declare const NativeField: ({ box, className, disabled, editable, onChangeText, onValueChange, size, style, ...props }: NativeFieldProps & {
+  box: string;
+}) => import("react").JSX.Element;
+type InputProps = NativeFieldProps & {
+  type?: InputContract["type"];
+};
+/**
+ * The web's `Input` (./input.tsx) on a phone: one line of text, in the web's
+ * box, or iOS's filled search field for `type="search"`.
+ */
+export declare const Input: ({ type, unstyled, size, ...props }: InputProps) => import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/input.native.js

@@ -0,0 +1,66 @@
+import { textFontFamily } from "./text.native.js";
+import { jsx } from "react/jsx-runtime";
+import { TextInput } from "react-native";
+//#region src/components/input.native.tsx
+/** The field's text at each control size, as the web sets it on a phone. */
+const TEXT_SIZE = {
+	sm: "text-sm",
+	default: "text-base",
+	lg: "text-base"
+};
+/** The web input's box (hairline border, card fill) at each control size. */
+const BOX = {
+	sm: "min-h-9 rounded-lg border border-input bg-card px-3",
+	default: "min-h-11 rounded-lg border border-input bg-card px-3",
+	lg: "min-h-12 rounded-lg border border-input bg-card px-3"
+};
+/** A search field, filled and borderless, as iOS sets one over a list. */
+const SEARCH_BOX = "min-h-10 rounded-xl bg-secondary px-3";
+/**
+* A text field in the web's type and colours: the caret, placeholder and
+* selection read the theme tokens, and `disabled` stops editing.
+*/
+const NativeField = ({ box, className, disabled = false, editable = true, onChangeText, onValueChange, size = "default", style, ...props }) => /* @__PURE__ */ jsx(TextInput, {
+	cursorColorClassName: "accent-foreground",
+	placeholderTextColorClassName: "accent-muted-foreground",
+	selectionColorClassName: "accent-ring",
+	...props,
+	className: [
+		"text-foreground",
+		box,
+		TEXT_SIZE[size],
+		disabled ? "opacity-64" : "",
+		className ?? ""
+	].filter((name) => name !== "").join(" "),
+	editable: editable && !disabled,
+	onChangeText: (text) => {
+		onChangeText?.(text);
+		onValueChange?.(text);
+	},
+	style: [{ fontFamily: textFontFamily("body") }, style]
+});
+/** What each field type asks the platform's keyboard for. */
+const INPUT_MODE = {
+	email: "email",
+	search: "search",
+	tel: "tel",
+	text: "text",
+	url: "url"
+};
+/** The field's own box: none, iOS's search field, or the web's box. */
+const inputBox = (type, size, unstyled) => {
+	if (unstyled) return "min-h-9 py-2";
+	return type === "search" ? SEARCH_BOX : BOX[size];
+};
+/**
+* The web's `Input` (./input.tsx) on a phone: one line of text, in the web's
+* box, or iOS's filled search field for `type="search"`.
+*/
+const Input = ({ type = "text", unstyled = false, size = "default", ...props }) => /* @__PURE__ */ jsx(NativeField, {
+	inputMode: INPUT_MODE[type],
+	...props,
+	box: inputBox(type, size, unstyled),
+	size
+});
+//#endregion
+export { Input, NativeField };

package/dist/components/input.shared.d.ts

@@ -0,0 +1,19 @@
+import { ControlSize } from "../lib/control-size.js";
+//#region src/components/input.shared.d.ts
+/** The props every text field renderer accepts, with one meaning. */
+export type TextFieldContract = {
+  size?: ControlSize;
+  /** No box of its own, for a field inside a container that draws one. */
+  unstyled?: boolean;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  /** The field's new text, as typed. */
+  onValueChange?: (value: string) => void;
+};
+/** A single-line field also says what it holds; `search` draws a search field. */
+export type InputContract = TextFieldContract & {
+  type?: "email" | "search" | "tel" | "text" | "url";
+};
+//#endregion

package/dist/components/loader.d.ts

@@ -1,4 +1,5 @@
 import { ComponentProps } from "react";
+import { LoaderSize } from "./loader.shared.js";
 //#region src/components/loader.d.ts
 /**
  * The indeterminate loading indicator for a control or a row: a plain
@@ -15,12 +16,6 @@ declare const Loader: ({ label, variant, size, animation, className, ...props }:
  * Progress is stated in the detail text, never drawn as a bar that guesses.
  */
 declare const LoaderState: ({ label, detail, hint, className }: LoaderStateProps) => import("react").JSX.Element;
-declare const LOADER_SIZE: {
-  readonly sm: "size-4";
-  readonly md: "size-6";
-  readonly lg: "size-8";
-};
-type LoaderSize = keyof typeof LOADER_SIZE;
 type LoaderProps = Omit<ComponentProps<"span">, "children" | "role" | "aria-label" | "aria-hidden" | "aria-busy"> & {
   size?: LoaderSize;
   animation?: "none" | "spin";

package/dist/components/loader.native.d.ts

@@ -0,0 +1,28 @@
+import { ActivityIndicatorProps } from "react-native";
+import { LoaderContract, LoaderSize } from "./loader.shared.js";
+//#region src/components/loader.native.d.ts
+type LoaderProps = Omit<ActivityIndicatorProps, "size"> & {
+  className?: string | undefined;
+  /** The colour is the loader's own: the muted foreground, as on the web. */
+  color?: never;
+  /** Named through `label`, as on the web. */
+  accessibilityLabel?: never;
+  size?: LoaderSize | undefined;
+} & ({
+  variant?: "status";
+  /**
+   * What is pending. Optional on a phone, unlike the web: the
+   * platform's indicator already announces itself as in progress.
+   */
+  label?: string | undefined;
+} | {
+  variant: "decorative";
+  label?: never;
+});
+/**
+ * The indeterminate loading indicator, as the web's `Loader` (./loader.tsx):
+ * the platform's spinner in the muted foreground, at the web's sizes.
+ */
+export declare const Loader: ({ label, size, variant, ...props }: LoaderProps) => import("react").JSX.Element;
+//#endregion
+export type { LoaderContract };

package/dist/components/loader.native.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { ActivityIndicator } from "react-native";
+//#region src/components/loader.native.tsx
+/** The platform's indicator comes in two sizes; `lg` is a region's. */
+const INDICATOR_SIZE = {
+	sm: "small",
+	md: "small",
+	lg: "large"
+};
+/**
+* The indeterminate loading indicator, as the web's `Loader` (./loader.tsx):
+* the platform's spinner in the muted foreground, at the web's sizes.
+*/
+const Loader = ({ label, size = "md", variant = "status", ...props }) => /* @__PURE__ */ jsx(ActivityIndicator, {
+	...props,
+	accessibilityElementsHidden: variant === "decorative",
+	accessibilityLabel: label,
+	colorClassName: "accent-muted-foreground",
+	importantForAccessibility: variant === "decorative" ? "no-hide-descendants" : "auto",
+	size: INDICATOR_SIZE[size]
+});
+//#endregion
+export { Loader };

package/dist/components/loader.shared.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/loader.shared.d.ts
+/** Inline beside a busy control (`sm`), in a row or panel (`md`), or a region (`lg`). */
+export declare const LOADER_SIZES: readonly ["sm", "md", "lg"];
+export type LoaderSize = (typeof LOADER_SIZES)[number];
+/** The props every loader renderer accepts, with one meaning. */
+export type LoaderContract = {
+  size?: LoaderSize;
+} & ({
+  variant?: "status";
+  /** What is pending, for assistive technology ("Loading matters"). */
+  label: string;
+} | {
+  /** The surrounding control or text announces the pending state. */
+  variant: "decorative";
+  label?: never;
+});
+//#endregion

package/dist/components/loader.shared.js

@@ -0,0 +1,9 @@
+//#region src/components/loader.shared.ts
+/** Inline beside a busy control (`sm`), in a row or panel (`md`), or a region (`lg`). */
+const LOADER_SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+//#endregion
+export { LOADER_SIZES };

package/dist/components/matter-icon.d.ts

@@ -1,14 +1,8 @@
+import { MatterIconContract } from "./matter-icon.shared.js";
 //#region src/components/matter-icon.d.ts
 type MatterIconProps = {
   className?: string | undefined;
-} & ({
-  matter: {
-    id: string;
-    color: string | null;
-  };
-} | {
-  variant: "none" | "all";
-});
+} & MatterIconContract;
 export declare const MatterIcon: (props: MatterIconProps) => import("react").JSX.Element;
 export declare const MattersNavIcon: ({ className }: {
   className?: string | undefined;

package/dist/components/matter-icon.js

@@ -1,47 +1,27 @@
 import { LayersIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { resolveMatterColor } from "../lib/matter-colors.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ALL_MATTERS_STACK } from "./matter-icon.shared.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/matter-icon.tsx
-const ALL_MATTERS_STACK_COLORS = [
-	"var(--option-red)",
-	"var(--option-blue)",
-	"var(--option-green)"
-];
 const MatterIcon = (props) => {
 	if ("matter" in props) return /* @__PURE__ */ jsx(LayersIcon, {
 		"aria-hidden": "true",
 		className: cn(props.className),
 		style: { color: resolveMatterColor(props.matter.id, props.matter.color) }
 	});
-	if (props.variant === "all") return /* @__PURE__ */ jsxs("svg", {
+	if (props.variant === "all") return /* @__PURE__ */ jsx("svg", {
 		"aria-hidden": "true",
 		className: cn(props.className),
 		fill: "none",
 		viewBox: "0 0 24 24",
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
-				stroke: ALL_MATTERS_STACK_COLORS[0],
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: "2"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
-				stroke: ALL_MATTERS_STACK_COLORS[1],
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: "2"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
-				stroke: ALL_MATTERS_STACK_COLORS[2],
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: "2"
-			})
-		]
+		children: ALL_MATTERS_STACK.map(({ d, option }) => /* @__PURE__ */ jsx("path", {
+			d,
+			stroke: `var(--option-${option})`,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2"
+		}, option))
 	});
 	return /* @__PURE__ */ jsx(LayersIcon, {
 		"aria-hidden": "true",

package/dist/components/matter-icon.native.d.ts

@@ -0,0 +1,25 @@
+import { MatterIconContract } from "./matter-icon.shared.js";
+//#region src/components/matter-icon.native.d.ts
+/**
+ * The shared contract, with a matter's colour optional: the app's matter
+ * records leave it out when none is stored, which the web reads as null.
+ */
+type MatterIconProps = ({
+  matter: {
+    id: string;
+    color?: string | null | undefined;
+  };
+} | Exclude<MatterIconContract, {
+  matter: unknown;
+}>) & {
+  size?: number | undefined;
+};
+/**
+ * The web's `MatterIcon` (./matter-icon.tsx) on a phone: lucide's layers in
+ * the matter's own colour, resolved by the web's `resolveMatterColor` (the
+ * stored colour, else a swatch hashed from the id); the muted glyph for no
+ * matter; the tri-plane stack for all of them.
+ */
+export declare const MatterIcon: (props: MatterIconProps) => import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/matter-icon.native.js

@@ -0,0 +1,78 @@
+import { resolveMatterColor } from "../lib/matter-colors.js";
+import { ALL_MATTERS_STACK } from "./matter-icon.shared.js";
+import { jsx } from "react/jsx-runtime";
+import { LayersIcon } from "lucide-react-native";
+import Svg, { Path } from "react-native-svg";
+import { useCSSVariable } from "uniwind";
+//#region src/components/matter-icon.native.tsx
+/**
+* Every palette option a matter can be painted in, as a class. uniwind keeps
+* only the theme variables some class uses, so naming each option here keeps
+* its colour resolvable from a matter's stored `var(--option-<name>)`.
+*/
+const MATTER_OPTION_CLASS_NAMES = {
+	amber: "accent-option-amber",
+	blue: "accent-option-blue",
+	cyan: "accent-option-cyan",
+	emerald: "accent-option-emerald",
+	fuchsia: "accent-option-fuchsia",
+	gray: "accent-option-gray",
+	green: "accent-option-green",
+	indigo: "accent-option-indigo",
+	lime: "accent-option-lime",
+	orange: "accent-option-orange",
+	purple: "accent-option-purple",
+	red: "accent-option-red",
+	sky: "accent-option-sky",
+	teal: "accent-option-teal",
+	violet: "accent-option-violet",
+	yellow: "accent-option-yellow"
+};
+const MUTED = "--color-muted-foreground";
+/**
+* The theme variable a CSS colour from `resolveMatterColor` names
+* (`var(--option-blue)` is `--color-option-blue`), or null for a literal
+* colour such as a stored hex.
+*/
+const themeVariable = (css) => {
+	const option = /^var\(--option-([a-z]+)\)$/u.exec(css)?.[1];
+	if (option === void 0) return css.startsWith("var(") ? MUTED : null;
+	return option in MATTER_OPTION_CLASS_NAMES ? `--color-option-${option}` : MUTED;
+};
+/**
+* A theme variable's value as a colour. `currentColor` stands in only while
+* the theme has not resolved the variable, which a class in this file keeps
+* from happening.
+*/
+const asColour = (value) => typeof value === "string" ? value : "currentColor";
+/**
+* The web's `MatterIcon` (./matter-icon.tsx) on a phone: lucide's layers in
+* the matter's own colour, resolved by the web's `resolveMatterColor` (the
+* stored colour, else a swatch hashed from the id); the muted glyph for no
+* matter; the tri-plane stack for all of them.
+*/
+const MatterIcon = (props) => {
+	const size = props.size ?? 16;
+	const css = "matter" in props ? resolveMatterColor(props.matter.id, props.matter.color ?? null) : null;
+	const variable = css === null ? MUTED : themeVariable(css);
+	const [resolved, ...stack] = useCSSVariable([variable ?? MUTED, ...ALL_MATTERS_STACK.map(({ option }) => `--color-option-${option}`)]);
+	if ("variant" in props && props.variant === "all") return /* @__PURE__ */ jsx(Svg, {
+		fill: "none",
+		height: size,
+		viewBox: "0 0 24 24",
+		width: size,
+		children: ALL_MATTERS_STACK.map(({ d, option }, index) => /* @__PURE__ */ jsx(Path, {
+			d,
+			stroke: asColour(stack[index]),
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: 2
+		}, option))
+	});
+	return /* @__PURE__ */ jsx(LayersIcon, {
+		color: variable === null && css !== null ? css : asColour(resolved),
+		size
+	});
+};
+//#endregion
+export { MatterIcon };

package/dist/components/matter-icon.shared.d.ts

@@ -0,0 +1,21 @@
+//#region src/components/matter-icon.shared.d.ts
+export type MatterIconContract = {
+  matter: {
+    id: string;
+    color: string | null;
+  };
+} | {
+  variant: "none" | "all";
+};
+/** The three planes of the "all matters" glyph, top to bottom, in their tints. */
+export declare const ALL_MATTERS_STACK: readonly [{
+  readonly d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z";
+  readonly option: "red";
+}, {
+  readonly d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12";
+  readonly option: "blue";
+}, {
+  readonly d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17";
+  readonly option: "green";
+}];
+//#endregion

package/dist/components/matter-icon.shared.js

@@ -0,0 +1,18 @@
+//#region src/components/matter-icon.shared.ts
+/** The three planes of the "all matters" glyph, top to bottom, in their tints. */
+const ALL_MATTERS_STACK = [
+	{
+		d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+		option: "red"
+	},
+	{
+		d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+		option: "blue"
+	},
+	{
+		d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+		option: "green"
+	}
+];
+//#endregion
+export { ALL_MATTERS_STACK };

package/dist/components/separator.native.d.ts

@@ -0,0 +1,14 @@
+import { SeparatorContract } from "./separator.shared.js";
+import { ViewProps } from "react-native";
+//#region src/components/separator.native.d.ts
+/**
+ * The web's `Separator` (./separator.tsx) on a phone: a hairline in the
+ * border colour, across the container or, `vertical`, down it. A list passes
+ * it as the divider between its rows.
+ */
+export declare const Separator: ({ className, orientation, ...props }: ViewProps & SeparatorContract & {
+  className?: string | undefined;
+  /** A hairline holds nothing. */
+  children?: never;
+}) => import("react").JSX.Element;
+//#endregion

package/dist/components/separator.native.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+//#region src/components/separator.native.tsx
+/**
+* The web's `Separator` (./separator.tsx) on a phone: a hairline in the
+* border colour, across the container or, `vertical`, down it. A list passes
+* it as the divider between its rows.
+*/
+const Separator = ({ className, orientation = "horizontal", ...props }) => /* @__PURE__ */ jsx(View, {
+	...props,
+	accessibilityElementsHidden: true,
+	className: `bg-border ${orientation === "vertical" ? "w-px self-stretch" : "h-px w-full"} ${className ?? ""}`,
+	importantForAccessibility: "no-hide-descendants"
+});
+//#endregion
+export { Separator };