@tangle-network/ui 11.16.11 → 11.19.0

package/dist/primitives/icon-tile.js

@@ -0,0 +1,49 @@
+import { cn } from "../lib/utils.js";
+import { TONE_CLASSES, toneFor } from "./tone.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/icon-tile.tsx
+const SIZE = {
+	xs: "size-5 rounded-[5px] text-[10px] [&_svg]:size-3",
+	sm: "size-6 rounded-md text-[11px] [&_svg]:size-3.5",
+	md: "size-8 rounded-md text-xs [&_svg]:size-4",
+	lg: "size-10 rounded-lg text-sm [&_svg]:size-5"
+};
+/** Up to two initials: the first letters of the first two words, or of the one word. */
+function initialsOf(name) {
+	const words = name.trim().split(/[\s._-]+/u).filter(Boolean);
+	if (words.length === 0) return "";
+	const first = (word) => Array.from(word)[0] ?? "";
+	return (words.length === 1 ? Array.from(words[0]).slice(0, 2).join("") : first(words[0]) + first(words[1])).toLocaleUpperCase();
+}
+const IconTile = React.forwardRef(({ className, tone, size = "md", src, icon, name, label, ...props }, ref) => {
+	const [failedSrc, setFailedSrc] = React.useState(null);
+	const imgRef = React.useRef(null);
+	React.useEffect(() => {
+		const img = imgRef.current;
+		if (img?.complete && img.naturalWidth === 0 && src) setFailedSrc(src);
+	}, [src]);
+	const resolvedTone = tone ?? (name ? toneFor(name) : "violet");
+	const classes = TONE_CLASSES[resolvedTone];
+	const showImage = Boolean(src) && failedSrc !== src;
+	const initials = name ? initialsOf(name) : "";
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		role: label ? "img" : void 0,
+		"aria-label": label,
+		"aria-hidden": label ? void 0 : true,
+		className: cn("inline-flex shrink-0 select-none items-center justify-center overflow-hidden border font-semibold", SIZE[size], showImage ? "border-[var(--border-subtle)] bg-[var(--surface-neutral-bg)]" : classes.surface, !showImage && icon ? classes.icon : null, className),
+		...props,
+		children: showImage ? /* @__PURE__ */ jsx("img", {
+			ref: imgRef,
+			src,
+			alt: "",
+			className: "size-full object-cover",
+			onError: () => setFailedSrc(src ?? null),
+			draggable: false
+		}) : icon ? icon : initials
+	});
+});
+IconTile.displayName = "IconTile";
+//#endregion
+export { IconTile, initialsOf };

package/dist/primitives/popover.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/primitives/popover.d.ts
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A floating card anchored to its trigger, on the same surface, border and
+ * shadow as `DropdownMenuContent`. Width defaults to 18rem; pass a width class
+ * for wider content and keep long text wrapping inside it.
+ */
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/primitives/popover.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/primitives/popover.tsx
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
+/**
+* A floating card anchored to its trigger, on the same surface, border and
+* shadow as `DropdownMenuContent`. Width defaults to 18rem; pass a width class
+* for wider content and keep long text wrapping inside it.
+*/
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+	ref,
+	align,
+	sideOffset,
+	className: cn("z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-card p-4 text-foreground shadow-[var(--shadow-card)] outline-hidden", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "motion-reduce:animate-none", className),
+	...props
+}) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+//#endregion
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/primitives/separator.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+//#region src/primitives/separator.d.ts
+/**
+ * A hairline rule on the border token. Decorative by default, so assistive
+ * technology skips it; pass `decorative={false}` when it separates groups a
+ * screen reader should announce.
+ */
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Separator };

package/dist/primitives/separator.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+//#region src/primitives/separator.tsx
+/**
+* A hairline rule on the border token. Decorative by default, so assistive
+* technology skips it; pass `decorative={false}` when it separates groups a
+* screen reader should announce.
+*/
+const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+	ref,
+	decorative,
+	orientation,
+	className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+	...props
+}));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+//#endregion
+export { Separator };

package/dist/primitives/sheet.d.ts

@@ -0,0 +1,28 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+//#region src/primitives/sheet.d.ts
+/** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetContent: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+  side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+  /** Hide only the built-in close button; Escape and outside clicks still dismiss. */
+  hideCloseButton?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace SheetHeader {
+  var displayName: string;
+}
+declare function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace SheetFooter {
+  var displayName: string;
+}
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };

package/dist/primitives/sheet.js

@@ -0,0 +1,70 @@
+"use client";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+//#region src/primitives/sheet.tsx
+/** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+	ref,
+	className: cn("fixed inset-0 z-50 bg-black/40", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+	...props
+}));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva([
+	"fixed z-50 flex flex-col gap-4 border-border bg-card shadow-lg",
+	"data-[state=closed]:animate-out data-[state=open]:animate-in",
+	"data-[state=closed]:duration-200 data-[state=open]:duration-300 ease-out motion-reduce:animate-none"
+], {
+	variants: { side: {
+		right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+		left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+		top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+		bottom: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+	} },
+	defaultVariants: { side: "right" }
+});
+const SheetContent = React.forwardRef(({ className, children, side = "right", hideCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+	ref,
+	className: cn(sheetVariants({ side }), className),
+	...props,
+	children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
+		className: cn("absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none", focusRing),
+		children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Close"
+		})]
+	})]
+})] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-1.5 p-4 pr-10", className),
+	...props
+});
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("mt-auto flex flex-col gap-2 p-4", className),
+	...props
+});
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
+	ref,
+	className: cn("font-semibold text-base text-foreground leading-tight", className),
+	...props
+}));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+	ref,
+	className: cn("text-muted-foreground text-sm", className),
+	...props
+}));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };

package/dist/primitives/slider.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+//#region src/primitives/slider.d.ts
+/**
+ * Range input with one thumb per value. A single value renders one thumb; an
+ * array of two renders a range. The thumbs are what assistive technology
+ * focuses, so the names go on them: `aria-label` / `aria-labelledby` name a
+ * single thumb, and `thumbLabels` names each thumb of a range.
+ */
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+  thumbLabels?: string[];
+} & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Slider };

package/dist/primitives/slider.js

@@ -0,0 +1,37 @@
+"use client";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+//#region src/primitives/slider.tsx
+/**
+* Range input with one thumb per value. A single value renders one thumb; an
+* array of two renders a range. The thumbs are what assistive technology
+* focuses, so the names go on them: `aria-label` / `aria-labelledby` name a
+* single thumb, and `thumbLabels` names each thumb of a range.
+*/
+const Slider = React.forwardRef(({ className, defaultValue, value, min = 0, max = 100, thumbLabels, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
+	const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min];
+	const single = values.length === 1;
+	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+		ref,
+		defaultValue,
+		value,
+		min,
+		max,
+		className: cn("relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
+			className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5",
+			children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" })
+		}), values.map((_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
+			"aria-label": thumbLabels?.[index] ?? (single ? ariaLabel : void 0),
+			"aria-labelledby": single && !thumbLabels?.[index] ? ariaLabelledBy : void 0,
+			className: cn("block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[box-shadow] disabled:pointer-events-none", focusRing)
+		}, index))]
+	});
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+//#endregion
+export { Slider };

package/dist/primitives/tag.d.ts

@@ -0,0 +1,36 @@
+import { Tone } from "./tone.js";
+import * as React from "react";
+//#region src/primitives/tag.d.ts
+/**
+ * A static label for what something IS: a category, a kind, a named value.
+ *
+ * Tags are squared-off (`rounded-md`) where `StatusPill` is fully round, so a
+ * category and a state never share a silhouette even before colour is read.
+ * For a state, use `StatusPill`. For a label the user presses, use `Chip`.
+ *
+ * `onRemove` adds a native remove button after the label — the removable
+ * variant, for a recipient, an applied filter or an attached item. The tag
+ * itself stays non-interactive, so the remove button is the only tab stop.
+ * Removing a tag unmounts its focused button; move focus to the next tag or
+ * the input that adds tags, or keyboard focus falls to the page.
+ */
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  children: React.ReactNode;
+  /** Categorical tone, or `neutral` (the default) for an uncategorised label. */
+  tone?: Tone;
+  /** `soft` fills the tag; `outline` keeps only the border, for dense rows. */
+  emphasis?: "soft" | "outline";
+  size?: "sm" | "md";
+  /** A leading glyph, drawn in the tone's icon colour. Decorative. */
+  icon?: React.ReactNode;
+  /** Shows a remove button; called when it is pressed. */
+  onRemove?: () => void;
+  /**
+   * Accessible name of the remove button. Defaults to "Remove <label>" when
+   * the label is a string; pass it when the label is not plain text.
+   */
+  removeLabel?: string;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Tag };

package/dist/primitives/tag.js

@@ -0,0 +1,42 @@
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { TONE_CLASSES } from "./tone.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/primitives/tag.tsx
+const SIZE = {
+	sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3",
+	md: "h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5"
+};
+const Tag = React.forwardRef(({ className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, ...props }, ref) => {
+	const classes = TONE_CLASSES[tone];
+	const label = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cn("inline-flex min-w-0 max-w-full shrink-0 items-center rounded-md border font-medium", SIZE[size], emphasis === "outline" ? classes.outline : classes.surface, onRemove && (size === "sm" ? "pr-0.5" : "pr-1"), className),
+		...props,
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("inline-flex shrink-0", classes.icon),
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				title: typeof children === "string" ? children : void 0,
+				children
+			}),
+			onRemove ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": label,
+				onClick: onRemove,
+				className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']", size === "sm" ? "size-5" : "size-6", focusRing),
+				children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+			}) : null
+		]
+	});
+});
+Tag.displayName = "Tag";
+//#endregion
+export { Tag };

package/dist/primitives/theme-toggle.js

@@ -12,9 +12,17 @@ const namedModes = [
 		dark: "arena",
 		light: "arena-light"
 	},
+	{
+		dark: "super",
+		light: "super-light"
+	},
 	{
 		dark: "tangle-dark",
 		light: "tangle-light"
+	},
+	{
+		dark: "agents",
+		light: "agents-light"
 	}
 ];
 let preference;

package/dist/primitives/tone.d.ts

@@ -0,0 +1,40 @@
+//#region src/primitives/tone.d.ts
+/**
+ * Categorical tones: the colours that tell KINDS of things apart — an entity,
+ * a file type, a channel, a capability. A category never reports a state; that
+ * is `StatusPill`'s job, on its own success / warning / danger / info / neutral
+ * triples. See "Color Roles" in the brand guidelines.
+ *
+ * Each tone reads one matched family from `@tangle-network/brand`
+ * (`--tone-<name>-{bg,bg-hover,bg-selected,border,border-selected,text,icon}`),
+ * solved so the text and icon clear their floors on every fill in both themes.
+ *
+ * Every class below is written out in full: Tailwind and the sandbox-ui style
+ * bundle read this file statically, so an interpolated class name would never
+ * be generated.
+ */
+export declare const CATEGORY_TONES: readonly ["violet", "orange", "teal", "blue", "pink", "brown", "cyan", "lime"];
+export type CategoryTone = (typeof CATEGORY_TONES)[number];
+/** A categorical tone, or `neutral` for a label that is not a category. */
+export type Tone = CategoryTone | "neutral";
+export interface ToneClasses {
+  /** Resting fill, border and label colour. */
+  surface: string;
+  /** Border only; the label keeps the tone's text colour. */
+  outline: string;
+  /** Hover fill for an interactive surface. */
+  hover: string;
+  /** Fill and border of a selected chip. */
+  selected: string;
+  /** The glyph colour, for an icon beside a label or inside a tile. */
+  icon: string;
+}
+export declare const TONE_CLASSES: Record<Tone, ToneClasses>;
+/**
+ * A stable categorical tone for a key — an account id, a channel, a project
+ * name — for things that need telling apart but have no category of their own.
+ * The same key always gets the same tone, in every product and session.
+ * Distinct keys can share a tone, so the label or glyph must still name it.
+ */
+export declare function toneFor(key: string): CategoryTone;
+//#endregion

package/dist/primitives/tone.js

@@ -0,0 +1,106 @@
+//#region src/primitives/tone.ts
+/**
+* Categorical tones: the colours that tell KINDS of things apart — an entity,
+* a file type, a channel, a capability. A category never reports a state; that
+* is `StatusPill`'s job, on its own success / warning / danger / info / neutral
+* triples. See "Color Roles" in the brand guidelines.
+*
+* Each tone reads one matched family from `@tangle-network/brand`
+* (`--tone-<name>-{bg,bg-hover,bg-selected,border,border-selected,text,icon}`),
+* solved so the text and icon clear their floors on every fill in both themes.
+*
+* Every class below is written out in full: Tailwind and the sandbox-ui style
+* bundle read this file statically, so an interpolated class name would never
+* be generated.
+*/
+const CATEGORY_TONES = [
+	"violet",
+	"orange",
+	"teal",
+	"blue",
+	"pink",
+	"brown",
+	"cyan",
+	"lime"
+];
+const TONE_CLASSES = {
+	violet: {
+		surface: "border-[var(--tone-violet-border)] bg-[var(--tone-violet-bg)] text-[var(--tone-violet-text)]",
+		outline: "border-[var(--tone-violet-border)] bg-transparent text-[var(--tone-violet-text)]",
+		hover: "hover:bg-[var(--tone-violet-bg-hover)]",
+		selected: "border-[var(--tone-violet-border-selected)] bg-[var(--tone-violet-bg-selected)]",
+		icon: "text-[var(--tone-violet-icon)]"
+	},
+	orange: {
+		surface: "border-[var(--tone-orange-border)] bg-[var(--tone-orange-bg)] text-[var(--tone-orange-text)]",
+		outline: "border-[var(--tone-orange-border)] bg-transparent text-[var(--tone-orange-text)]",
+		hover: "hover:bg-[var(--tone-orange-bg-hover)]",
+		selected: "border-[var(--tone-orange-border-selected)] bg-[var(--tone-orange-bg-selected)]",
+		icon: "text-[var(--tone-orange-icon)]"
+	},
+	teal: {
+		surface: "border-[var(--tone-teal-border)] bg-[var(--tone-teal-bg)] text-[var(--tone-teal-text)]",
+		outline: "border-[var(--tone-teal-border)] bg-transparent text-[var(--tone-teal-text)]",
+		hover: "hover:bg-[var(--tone-teal-bg-hover)]",
+		selected: "border-[var(--tone-teal-border-selected)] bg-[var(--tone-teal-bg-selected)]",
+		icon: "text-[var(--tone-teal-icon)]"
+	},
+	blue: {
+		surface: "border-[var(--tone-blue-border)] bg-[var(--tone-blue-bg)] text-[var(--tone-blue-text)]",
+		outline: "border-[var(--tone-blue-border)] bg-transparent text-[var(--tone-blue-text)]",
+		hover: "hover:bg-[var(--tone-blue-bg-hover)]",
+		selected: "border-[var(--tone-blue-border-selected)] bg-[var(--tone-blue-bg-selected)]",
+		icon: "text-[var(--tone-blue-icon)]"
+	},
+	pink: {
+		surface: "border-[var(--tone-pink-border)] bg-[var(--tone-pink-bg)] text-[var(--tone-pink-text)]",
+		outline: "border-[var(--tone-pink-border)] bg-transparent text-[var(--tone-pink-text)]",
+		hover: "hover:bg-[var(--tone-pink-bg-hover)]",
+		selected: "border-[var(--tone-pink-border-selected)] bg-[var(--tone-pink-bg-selected)]",
+		icon: "text-[var(--tone-pink-icon)]"
+	},
+	brown: {
+		surface: "border-[var(--tone-brown-border)] bg-[var(--tone-brown-bg)] text-[var(--tone-brown-text)]",
+		outline: "border-[var(--tone-brown-border)] bg-transparent text-[var(--tone-brown-text)]",
+		hover: "hover:bg-[var(--tone-brown-bg-hover)]",
+		selected: "border-[var(--tone-brown-border-selected)] bg-[var(--tone-brown-bg-selected)]",
+		icon: "text-[var(--tone-brown-icon)]"
+	},
+	cyan: {
+		surface: "border-[var(--tone-cyan-border)] bg-[var(--tone-cyan-bg)] text-[var(--tone-cyan-text)]",
+		outline: "border-[var(--tone-cyan-border)] bg-transparent text-[var(--tone-cyan-text)]",
+		hover: "hover:bg-[var(--tone-cyan-bg-hover)]",
+		selected: "border-[var(--tone-cyan-border-selected)] bg-[var(--tone-cyan-bg-selected)]",
+		icon: "text-[var(--tone-cyan-icon)]"
+	},
+	lime: {
+		surface: "border-[var(--tone-lime-border)] bg-[var(--tone-lime-bg)] text-[var(--tone-lime-text)]",
+		outline: "border-[var(--tone-lime-border)] bg-transparent text-[var(--tone-lime-text)]",
+		hover: "hover:bg-[var(--tone-lime-bg-hover)]",
+		selected: "border-[var(--tone-lime-border-selected)] bg-[var(--tone-lime-bg-selected)]",
+		icon: "text-[var(--tone-lime-icon)]"
+	},
+	neutral: {
+		surface: "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--text-secondary)]",
+		outline: "border-[var(--border-default)] bg-transparent text-[var(--text-secondary)]",
+		hover: "hover:bg-[color-mix(in_srgb,var(--surface-neutral-bg),var(--text-primary)_6%)]",
+		selected: "border-[var(--text-dim)] bg-[color-mix(in_srgb,var(--surface-neutral-bg),var(--text-primary)_12%)] text-[var(--text-primary)]",
+		icon: "text-[var(--text-dim)]"
+	}
+};
+/**
+* A stable categorical tone for a key — an account id, a channel, a project
+* name — for things that need telling apart but have no category of their own.
+* The same key always gets the same tone, in every product and session.
+* Distinct keys can share a tone, so the label or glyph must still name it.
+*/
+function toneFor(key) {
+	let hash = 2166136261;
+	for (let i = 0; i < key.length; i++) {
+		hash ^= key.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return CATEGORY_TONES[(hash >>> 0) % CATEGORY_TONES.length];
+}
+//#endregion
+export { CATEGORY_TONES, TONE_CLASSES, toneFor };

package/dist/primitives/tooltip.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+//#region src/primitives/tooltip.d.ts
+declare function TooltipProvider({ delayDuration, skipDelayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare namespace TooltipProvider {
+  var displayName: string;
+}
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Inverse-surface label for a control whose name is otherwise only an icon.
+ * It is supplementary: the trigger still needs its own accessible name.
+ */
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/primitives/tooltip.js

@@ -0,0 +1,32 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+//#region src/primitives/tooltip.tsx
+/**
+* Wrap an app (or a toolbar) once. The open delay applies to the first tooltip;
+* moving between triggers inside `skipDelayDuration` opens the next one at
+* once, which keeps an icon rail fast to scan.
+*/
+const TooltipProvider = ({ delayDuration = 400, skipDelayDuration = 300, ...props }) => /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+	delayDuration,
+	skipDelayDuration,
+	...props
+});
+TooltipProvider.displayName = "TooltipProvider";
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+/**
+* Inverse-surface label for a control whose name is otherwise only an icon.
+* It is supplementary: the trigger still needs its own accessible name.
+*/
+const TooltipContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+	ref,
+	sideOffset,
+	className: cn("z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2.5 py-1.5 text-background text-xs leading-snug shadow-md", "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "duration-150 ease-out motion-reduce:animate-none", className),
+	...props
+}) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/primitives.d.ts

@@ -2,6 +2,11 @@ import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { ArtifactPane, ArtifactPaneProps } from "./primitives/artifact-pane.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardTitleProps } from "./primitives/card.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/collapsible.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./primitives/context-menu.js";
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
+import { Slider } from "./primitives/slider.js";
 import { Input, InputProps, Textarea, TextareaProps } from "./primitives/input.js";
 import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
@@ -12,6 +17,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
 import { SegmentedControl, SegmentedControlOption, SegmentedControlProps } from "./primitives/segmented-control.js";
 import { Progress } from "./primitives/progress.js";
 import { Switch } from "./primitives/switch.js";
+import { Checkbox } from "./primitives/checkbox.js";
+import { Separator } from "./primitives/separator.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
 import { Skeleton, SkeletonCard, SkeletonTable } from "./primitives/skeleton.js";
 import { TextShimmer, TextShimmerProps } from "./primitives/text-shimmer.js";
 import { Toast, ToastContainer, ToastProvider, useToast } from "./primitives/toast.js";
@@ -29,7 +38,11 @@ import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
+import { Tag, TagProps } from "./primitives/tag.js";
+import { Chip, ChipProps } from "./primitives/chip.js";
+import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, CodeBlock, type CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };