@heyramzi/ui 2.21.0 → 2.22.0

package/dist/components/list-page/toolbar-density.js

@@ -0,0 +1,26 @@
+import { getContext, setContext } from "svelte";
+// WHY context: the shell owns the measurement and 26 pages render their tabs
+// through a snippet, so a prop would be an edit on every page.
+const KEY = Symbol("list-page.toolbar-density");
+export function setToolbarDensity(density) {
+	setContext(KEY, density);
+}
+/** Undefined outside a list-page toolbar, where nothing ever folds. */
+export function getToolbarDensity() {
+	return getContext(KEY);
+}
+/**
+* The width a row needs to sit on one line with every child at its natural
+* size. Read in one synchronous pass, so the browser never paints the probe.
+*/
+// WHY `max-content` on a probe, not the row's own width: the row is sized by
+// its container, so reading it back always says "it fits" (see collapse.ts).
+export function naturalRowWidth(row) {
+	const { width, flexWrap } = row.style;
+	row.style.width = "max-content";
+	row.style.flexWrap = "nowrap";
+	const needed = row.getBoundingClientRect().width;
+	row.style.width = width;
+	row.style.flexWrap = flexWrap;
+	return needed;
+}

package/dist/shadcn/alert/alert-variants.js

@@ -0,0 +1,9 @@
+import { tv } from "tailwind-variants";
+export const alertVariants = tv({
+	base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+	} },
+	defaultVariants: { variant: "default" }
+});

package/dist/shadcn/alert/index.js

@@ -1,7 +1,7 @@
 import Root from "../../../src/shadcn/alert/alert.svelte";
 import Description from "../../../src/shadcn/alert/alert-description.svelte";
 import Title from "../../../src/shadcn/alert/alert-title.svelte";
-export { alertVariants } from "../../../src/shadcn/alert/alert.svelte";
+export { alertVariants } from "./alert-variants.js";
 export { Root, Description, Title, 
 //
  Root as Alert, Description as AlertDescription, Title as AlertTitle };

package/dist/shadcn/badge/badge-variants.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const badgeVariants = tv({
+	// The chip radius, not a pill: DESIGN.md keeps `rounded-full` for status and counts,
+	// which `StatusBadge` owns. Tabular figures so a count that ticks doesn't shift.
+	base: "h-5 gap-1 rounded-sm border border-transparent px-2 py-0.5 text-xs font-medium tabular-nums has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] [&>svg]:pointer-events-none",
+	variants: { 
+	// Three weights a label can carry: filled, tinted, outlined. Severity is the
+	// `tone` prop, which reads `TONE_CLASS`, not a variant.
+variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		// For a consumer that wants one "this is wrong" badge without a tone prop.
+		destructive: "bg-destructive/10 text-destructive-ink [a]:hover:bg-destructive/20"
+	} },
+	defaultVariants: { variant: "default" }
+});

package/dist/shadcn/badge/index.js

@@ -1,2 +1,2 @@
 export { default as Badge } from "../../../src/shadcn/badge/badge.svelte";
-export { badgeVariants } from "../../../src/shadcn/badge/badge.svelte";
+export { badgeVariants } from "./badge-variants.js";

package/dist/shadcn/toggle/index.js

@@ -1,5 +1,5 @@
 import Root from "../../../src/shadcn/toggle/toggle.svelte";
-export { toggleVariants } from "../../../src/shadcn/toggle/toggle.svelte";
+export { toggleVariants } from "./toggle-variants.js";
 export { Root, 
 //
  Root as Toggle };

package/dist/shadcn/toggle/toggle-variants.js

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants";
+export const toggleVariants = tv({
+	base: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-btn"
+		},
+		size: {
+			// Same steps as Button: sm 28, default 32, lg 36. 40 went with the scale.
+			default: "h-8 min-w-8 px-2",
+			sm: "h-7 min-w-7 px-1.5",
+			lg: "h-9 min-w-9 px-2.5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});

package/dist/status/index.js

@@ -2,4 +2,5 @@ export { default as StatusBadge } from "../../src/status/status-badge.svelte";
 export { default as StatusDot } from "../../src/status/status-dot.svelte";
 export { default as StatusIcon } from "../../src/status/status-icon.svelte";
 export { defineStatuses } from "./define-statuses.js";
-export { default as StatusPill, PILL_TINT } from "../../src/status/status-pill.svelte";
+export { default as StatusPill } from "../../src/status/status-pill.svelte";
+export { PILL_TINT } from "./pill-tint.js";

package/dist/status/pill-tint.js

@@ -0,0 +1,13 @@
+// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
+// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
+// the canvas and vanishes there (tokens board, "what fights the new scale").
+// It lives in a .ts module, not status-pill.svelte's module script, so a plain tsc consumer
+// can import it: tsc's `*.svelte` shim only knows a default export.
+export const PILL_TINT = {
+	neutral: "bg-foreground/6 text-muted-foreground",
+	accent: "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+	info: "bg-info/12 text-info-800 dark:text-info-400",
+	success: "bg-success/12 text-success-800 dark:text-success-400",
+	warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
+	destructive: "bg-destructive/10 text-destructive-ink"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -387,29 +387,29 @@
   "dependencies": {
     "@dagrejs/dagre": "^3.1.3",
     "@shadcn-svelte/primitives": "^0.0.1",
-    "@tiptap/core": "^3.32.0",
-    "@tiptap/extension-drag-handle": "^3.32.0",
-    "@tiptap/extension-image": "^3.32.0",
-    "@tiptap/extension-list": "^3.32.0",
-    "@tiptap/extension-placeholder": "^3.32.0",
-    "@tiptap/extension-table": "^3.32.0",
-    "@tiptap/pm": "^3.32.0",
-    "@tiptap/starter-kit": "^3.32.0",
-    "@zag-js/svelte": "^1.46.0",
-    "@zag-js/tour": "^1.46.0",
+    "@tiptap/core": "^3.32.2",
+    "@tiptap/extension-drag-handle": "^3.32.2",
+    "@tiptap/extension-image": "^3.32.2",
+    "@tiptap/extension-list": "^3.32.2",
+    "@tiptap/extension-placeholder": "^3.32.2",
+    "@tiptap/extension-table": "^3.32.2",
+    "@tiptap/pm": "^3.32.2",
+    "@tiptap/starter-kit": "^3.32.2",
+    "@zag-js/svelte": "^1.47.0",
+    "@zag-js/tour": "^1.47.0",
     "clsx": "^2.1.1",
     "cuelume": "^0.2.8",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "layerchart": "^2.9.1",
+    "d3-scale": "^4.0.3",
+    "d3-shape": "^3.2.1",
+    "layerchart": "^2.9.2",
     "markdown-it": "^15.0.3",
-    "marked": "^18.1.2",
+    "marked": "^18.1.3",
     "perfect-freehand": "^1.2.3",
     "phosphor-svelte": "^3.1.1",
     "roughjs": "^4.6.6",
-    "shiki": "^4.5.0",
+    "shiki": "^4.6.0",
     "tailwind-merge": "^3.7.0",
-    "tailwind-variants": "^3.3.1",
+    "tailwind-variants": "^4.0.1",
     "zod": "^4.6.7"
   },
   "devDependencies": {
@@ -417,16 +417,16 @@
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.2.0",
-    "@types/node": "^26.6.5",
-    "@xyflow/svelte": "^1.7.0",
-    "bits-ui": "^2.20.2",
+    "@types/node": "^26.6.6",
+    "@xyflow/svelte": "^1.7.1",
+    "bits-ui": "^2.20.3",
     "jsdom": "^30.1.3",
     "mode-watcher": "^1.1.0",
     "svelte": "^5.57.3",
-    "svelte-check": "^4.7.7",
-    "svelte-sonner": "^1.2.1",
+    "svelte-check": "^4.7.8",
+    "svelte-sonner": "^1.2.3",
     "typescript": "~7.0.2",
-    "vite-plus": "1.4.0"
+    "vite-plus": "1.5.0"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.4",

package/src/components/list-page/list-page-shell.svelte

@@ -8,6 +8,7 @@
 	import { pageGutterClass } from "../../lib/layout.js";
 	import { getSectionHost } from "./section-host.js";
 	import SectionRuns from "../segmented/section-runs.svelte";
+	import { naturalRowWidth, setToolbarDensity } from "./toolbar-density.js";
 	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
 	// =========================
@@ -67,6 +68,16 @@
 	// =========================
 	// Null off an app shell, where the toolbar just has no section strip to draw.
 	const section = getSectionHost();
+	let row = $state<HTMLElement>();
+	let tabsBox = $state<HTMLElement>();
+	// True when the row at full size would wrap. The tabs then draw as one
+	// dropdown, the first control with a smaller self that still does its job.
+	let compact = $state(false);
+	setToolbarDensity({
+		get compact() {
+			return compact;
+		},
+	});
 
 	// =========================
 	// DERIVED
@@ -90,6 +101,37 @@
 		if (!hasToolbar) return;
 		return section?.claim();
 	});
+	// One row, never two (Ramzi, 9 Nov 2026): /tasks at 1500px put its status
+	// tabs and actions on a second line under search and filters.
+	// WHY the tabs' full width is remembered: once folded, the row only holds the
+	// dropdown, and a probe of it would say the full strip fits when it doesn't.
+	$effect(() => {
+		if (!row) return;
+		const el = row;
+		let fullTabs = 0;
+		let frame = 0;
+		const measure = () => {
+			frame = 0;
+			const needed = naturalRowWidth(el);
+			const tabs = tabsBox?.getBoundingClientRect().width ?? 0;
+			if (!compact) fullTabs = tabs;
+			const full = compact ? needed - tabs + fullTabs : needed;
+			compact = full > el.clientWidth + 0.5;
+		};
+		// A frame's delay folds a burst of resizes into one probe and keeps the
+		// observer from looping on its own state change.
+		const schedule = () => (frame ||= requestAnimationFrame(measure));
+		const observer = new ResizeObserver(schedule);
+		observer.observe(el);
+		for (const child of el.children) observer.observe(child);
+		// Scheduled, not called: a direct call would make this effect track
+		// `compact` and rerun on every fold, dropping the remembered width.
+		schedule();
+		return () => {
+			observer.disconnect();
+			cancelAnimationFrame(frame);
+		};
+	});
 	// The shared gutter from `lib/layout.ts`. A typed one put the search field
 	// 8px left of the section tabs above it.
 	let outerClass = $derived(
@@ -127,7 +169,16 @@
 			<div
 				class="@container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-card/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-card/70"
 			>
-				<div class={cn("flex flex-wrap items-center gap-2", toolbarClass)}>
+				<!-- Folded and still short of room, the row stops wrapping and the
+				     filters strip scrolls, since it's the one part that already can. -->
+				<div
+					bind:this={row}
+					class={cn(
+						"flex flex-wrap items-center gap-2",
+						compact && "@3xl/toolbar:flex-nowrap",
+						toolbarClass,
+					)}
+				>
 					<!-- The section tabs lead: which page comes before which slice of it.
 					     One row replaces two rows that held four controls. -->
 					{#if section?.strip}
@@ -148,10 +199,14 @@
 							class={cn(
 								"order-2 flex min-w-0 flex-wrap items-center gap-2 @3xl/toolbar:order-3",
 								hasLeading ? "@3xl/toolbar:ms-auto" : "flex-1",
+								compact && "@3xl/toolbar:shrink-0",
 							)}
 						>
 							{#if tabs}
-								<div class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}>
+								<div
+									bind:this={tabsBox}
+									class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}
+								>
 									{@render tabs()}
 								</div>
 							{/if}

package/src/components/list-page/toolbar-density.ts

@@ -0,0 +1,38 @@
+import { getContext, setContext } from "svelte";
+
+/**
+ * Whether the list-page toolbar has run out of room. `ListPageShell` measures
+ * its row and sets this; a control inside it reads it and draws a smaller self.
+ */
+export interface ToolbarDensity {
+  readonly compact: boolean;
+}
+
+// WHY context: the shell owns the measurement and 26 pages render their tabs
+// through a snippet, so a prop would be an edit on every page.
+const KEY = Symbol("list-page.toolbar-density");
+
+export function setToolbarDensity(density: ToolbarDensity): void {
+  setContext(KEY, density);
+}
+
+/** Undefined outside a list-page toolbar, where nothing ever folds. */
+export function getToolbarDensity(): ToolbarDensity | undefined {
+  return getContext<ToolbarDensity | undefined>(KEY);
+}
+
+/**
+ * The width a row needs to sit on one line with every child at its natural
+ * size. Read in one synchronous pass, so the browser never paints the probe.
+ */
+// WHY `max-content` on a probe, not the row's own width: the row is sized by
+// its container, so reading it back always says "it fits" (see collapse.ts).
+export function naturalRowWidth(row: HTMLElement): number {
+  const { width, flexWrap } = row.style;
+  row.style.width = "max-content";
+  row.style.flexWrap = "nowrap";
+  const needed = row.getBoundingClientRect().width;
+  row.style.width = width;
+  row.style.flexWrap = flexWrap;
+  return needed;
+}

package/src/components/segmented/segmented-filter.svelte

@@ -15,6 +15,10 @@
 	import { segmentedTriggerClass } from "./segmented.js";
 	import { Icon } from "../icon/index.js";
 	import { Mark } from "../mark/index.js";
+	import { CaretDown } from "phosphor-svelte";
+	import { Picker } from "../picker/index.js";
+	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+	import { getToolbarDensity } from "../list-page/toolbar-density.js";
 
 	// =========================
 	// TYPES
@@ -87,6 +91,20 @@
 		),
 	);
 
+	// Inside a list-page toolbar that ran out of room, the strip folds into one
+	// dropdown that names the current option. See `ListPageShell`.
+	const density = getToolbarDensity();
+	let folded = $derived(density?.compact === true);
+	let current = $derived(merged.find((option) => option.value === value) ?? merged[0]);
+	let pickerOptions = $derived(
+		merged.map((option) => ({
+			value: option.value,
+			label: option.label,
+			hint: option.count != null ? String(option.count) : undefined,
+			icon: option.icon,
+		})),
+	);
+
 	function pick(next: T) {
 		value = next;
 		onValueChange?.(next);
@@ -98,53 +116,71 @@
 <!-- =========================== -->
 <!-- WHY scroll, not wrap: it's one object. Past `max` the tail collapses into
      a menu first, so scrolling is the last resort. -->
-<div
-	class={cn("no-scrollbar flex max-w-full min-w-0 overflow-x-auto", className)}
-	role="group"
-	aria-label={ariaLabel}
->
-	<SegmentedTrack fill={block}>
-		{#each split.visible as option (option.value)}
-			{@const active = value === option.value}
-			{@const markOnly = iconOnly && Boolean(option.image || option.icon)}
-			<button
-				type="button"
-				class={segmentedTriggerClass({ fill: block, active })}
-				onclick={() => pick(option.value)}
-				aria-pressed={active}
-				aria-label={markOnly ? option.label : undefined}
-				title={markOnly ? option.label : undefined}
-			>
-				<!-- WHY the mark is drawn here, not by `Segment`: `Segment` always
+{#if folded && current}
+	<Picker
+		options={pickerOptions}
+		{value}
+		onSelect={pick}
+		triggerClass={toolbarTriggerClass({ className: "group/segment text-foreground" })}
+		triggerLabel={`${ariaLabel}: ${current.label}`}
+		align="end"
+	>
+		{#snippet trigger()}
+			<Segment label={current.label} count={current.count} icon={current.icon} active />
+			<CaretDown
+				class="size-3 shrink-0 opacity-60 transition-transform duration-150 group-data-[state=open]/segment:rotate-180"
+			/>
+		{/snippet}
+	</Picker>
+{:else}
+	<div
+		class={cn("no-scrollbar flex max-w-full min-w-0 overflow-x-auto", className)}
+		role="group"
+		aria-label={ariaLabel}
+	>
+		<SegmentedTrack fill={block}>
+			{#each split.visible as option (option.value)}
+				{@const active = value === option.value}
+				{@const markOnly = iconOnly && Boolean(option.image || option.icon)}
+				<button
+					type="button"
+					class={segmentedTriggerClass({ fill: block, active })}
+					onclick={() => pick(option.value)}
+					aria-pressed={active}
+					aria-label={markOnly ? option.label : undefined}
+					title={markOnly ? option.label : undefined}
+				>
+					<!-- WHY the mark is drawn here, not by `Segment`: `Segment` always
 				     writes the label, and a count or dot beside a bare mark reads as noise. -->
-				{#if markOnly && option.image}
-					<Mark
-						src={option.image}
-						label={option.label}
-						class={cn(
-							"opacity-75 transition-opacity duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-hover/segment:opacity-100",
-							active && "opacity-100",
-						)}
-					/>
-				{:else if markOnly && option.icon}
-					<Icon icon={option.icon} size={16} class="shrink-0" />
-				{:else}
-					<Segment
-						label={option.label}
-						count={option.count}
-						icon={option.icon}
-						image={option.image}
-						done={option.done}
-						badge={option.badge}
-						{active}
-					/>
+					{#if markOnly && option.image}
+						<Mark
+							src={option.image}
+							label={option.label}
+							class={cn(
+								"opacity-75 transition-opacity duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-hover/segment:opacity-100",
+								active && "opacity-100",
+							)}
+						/>
+					{:else if markOnly && option.icon}
+						<Icon icon={option.icon} size={16} class="shrink-0" />
+					{:else}
+						<Segment
+							label={option.label}
+							count={option.count}
+							icon={option.icon}
+							image={option.image}
+							done={option.done}
+							badge={option.badge}
+							{active}
+						/>
+					{/if}
+				</button>
+			{/each}
+			{#snippet after()}
+				{#if split.hidden.length > 0}
+					<SegmentedOverflow items={split.hidden} onSelect={pick} label={moreLabel} fill={block} />
 				{/if}
-			</button>
-		{/each}
-		{#snippet after()}
-			{#if split.hidden.length > 0}
-				<SegmentedOverflow items={split.hidden} onSelect={pick} label={moreLabel} fill={block} />
-			{/if}
-		{/snippet}
-	</SegmentedTrack>
-</div>
+			{/snippet}
+		</SegmentedTrack>
+	</div>
+{/if}

package/src/record/record-rail.svelte

@@ -51,7 +51,11 @@
 
 <!-- A record's side rail with tabs: the fields in one, a thread or a log in the next,
      so the thread sits beside the record and not a screen below it. One tab draws no strip. -->
-<Tabs.Root value={open} onValueChange={(next) => (value = next)} class={cn("min-w-0 gap-0", className)}>
+<Tabs.Root
+	value={open}
+	onValueChange={(next) => (value = next)}
+	class={cn("min-w-0 gap-0", className)}
+>
 	{#if tabs.length > 1}
 		<div class={cn("pb-3", listClass)}>
 			<Tabs.List size="sm" class="w-full" aria-label={label}>

package/src/shadcn/alert/alert-variants.ts

@@ -0,0 +1,17 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export const alertVariants = tv({
+  base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      destructive:
+        "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type AlertVariant = VariantProps<typeof alertVariants>["variant"];

package/src/shadcn/alert/alert.svelte

@@ -1,21 +1,7 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { alertVariants, type AlertVariant } from "./alert-variants.js";
 
-	export const alertVariants = tv({
-		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-		variants: {
-			variant: {
-				default: "bg-card text-card-foreground",
-				destructive:
-					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+	export { alertVariants, type AlertVariant };
 </script>
 
 <script lang="ts">

package/src/shadcn/alert/index.ts

@@ -1,7 +1,7 @@
 import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
-export { alertVariants, type AlertVariant } from "./alert.svelte";
+export { alertVariants, type AlertVariant } from "./alert-variants.js";
 
 export {
   Root,

package/src/shadcn/badge/badge-variants.ts

@@ -0,0 +1,23 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export const badgeVariants = tv({
+  // The chip radius, not a pill: DESIGN.md keeps `rounded-full` for status and counts,
+  // which `StatusBadge` owns. Tabular figures so a count that ticks doesn't shift.
+  base: "h-5 gap-1 rounded-sm border border-transparent px-2 py-0.5 text-xs font-medium tabular-nums has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] [&>svg]:pointer-events-none",
+  variants: {
+    // Three weights a label can carry: filled, tinted, outlined. Severity is the
+    // `tone` prop, which reads `TONE_CLASS`, not a variant.
+    variant: {
+      default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+      secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+      outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+      // For a consumer that wants one "this is wrong" badge without a tone prop.
+      destructive: "bg-destructive/10 text-destructive-ink [a]:hover:bg-destructive/20",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];

package/src/shadcn/badge/badge.svelte

@@ -1,27 +1,7 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { badgeVariants, type BadgeVariant } from "./badge-variants.js";
 
-	export const badgeVariants = tv({
-		// The chip radius, not a pill: DESIGN.md keeps `rounded-full` for status and counts,
-		// which `StatusBadge` owns. Tabular figures so a count that ticks doesn't shift.
-		base: "h-5 gap-1 rounded-sm border border-transparent px-2 py-0.5 text-xs font-medium tabular-nums has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] [&>svg]:pointer-events-none",
-		variants: {
-			// Three weights a label can carry: filled, tinted, outlined. Severity is the
-			// `tone` prop, which reads `TONE_CLASS`, not a variant.
-			variant: {
-				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-				// For a consumer that wants one "this is wrong" badge without a tone prop.
-				destructive: "bg-destructive/10 text-destructive-ink [a]:hover:bg-destructive/20",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+	export { badgeVariants, type BadgeVariant };
 </script>
 
 <script lang="ts">

package/src/shadcn/badge/index.ts

@@ -1,2 +1,2 @@
 export { default as Badge } from "./badge.svelte";
-export { badgeVariants, type BadgeVariant } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge-variants.js";

package/src/shadcn/toggle/index.ts

@@ -4,7 +4,7 @@ export {
   type ToggleSize,
   type ToggleVariant,
   type ToggleVariants,
-} from "./toggle.svelte";
+} from "./toggle-variants.js";
 
 export {
   Root,

package/src/shadcn/toggle/toggle-variants.ts

@@ -0,0 +1,26 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export const toggleVariants = tv({
+  base: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline:
+        "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-btn",
+    },
+    size: {
+      // Same steps as Button: sm 28, default 32, lg 36. 40 went with the scale.
+      default: "h-8 min-w-8 px-2",
+      sm: "h-7 min-w-7 px-1.5",
+      lg: "h-9 min-w-9 px-2.5",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+export type ToggleVariants = VariantProps<typeof toggleVariants>;

package/src/shadcn/toggle/toggle.svelte

@@ -1,30 +1,12 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import {
+		toggleVariants,
+		type ToggleSize,
+		type ToggleVariant,
+		type ToggleVariants,
+	} from "./toggle-variants.js";
 
-	export const toggleVariants = tv({
-		base: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline:
-					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-btn",
-			},
-			size: {
-				// Same steps as Button: sm 28, default 32, lg 36. 40 went with the scale.
-				default: "h-8 min-w-8 px-2",
-				sm: "h-7 min-w-7 px-1.5",
-				lg: "h-9 min-w-9 px-2.5",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
-
-	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
-	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
-	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+	export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants };
 </script>
 
 <script lang="ts">

package/src/status/index.ts

@@ -9,4 +9,5 @@ export type {
   StatusMap,
   Statuses,
 } from "./status-types.js";
-export { default as StatusPill, PILL_TINT } from "./status-pill.svelte";
+export { default as StatusPill } from "./status-pill.svelte";
+export { PILL_TINT } from "./pill-tint.js";

package/src/status/pill-tint.ts

@@ -0,0 +1,16 @@
+import type { Tone } from "../lib/tone.js";
+
+// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
+// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
+// the canvas and vanishes there (tokens board, "what fights the new scale").
+// It lives in a .ts module, not status-pill.svelte's module script, so a plain tsc consumer
+// can import it: tsc's `*.svelte` shim only knows a default export.
+export const PILL_TINT: Record<Tone, string> = {
+  neutral: "bg-foreground/6 text-muted-foreground",
+  accent:
+    "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "bg-info/12 text-info-800 dark:text-info-400",
+  success: "bg-success/12 text-success-800 dark:text-success-400",
+  warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
+  destructive: "bg-destructive/10 text-destructive-ink",
+};

package/src/status/status-pill.svelte

@@ -1,18 +1,8 @@
 <script lang="ts" module>
 	import type { Tone } from "../lib/tone.js";
+	import { PILL_TINT } from "./pill-tint.js";
 
-	// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
-	// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
-	// the canvas and vanishes there (tokens board, "what fights the new scale").
-	export const PILL_TINT: Record<Tone, string> = {
-		neutral: "bg-foreground/6 text-muted-foreground",
-		accent:
-			"bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
-		info: "bg-info/12 text-info-800 dark:text-info-400",
-		success: "bg-success/12 text-success-800 dark:text-success-400",
-		warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
-		destructive: "bg-destructive/10 text-destructive-ink",
-	};
+	export { PILL_TINT };
 </script>
 
 <script lang="ts">

package/src/svelte-reexports.test.ts

@@ -0,0 +1,43 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vite-plus/test";
+
+// A plain tsc consumer (upsys app-cli) reads this package's src through a `*.svelte` shim that
+// only knows a default export. A .ts file that re-exports a named value from a .svelte module
+// fails there, as PILL_TINT did in 2.21.0. Named values live in a .ts module the component imports.
+const root = import.meta.dirname;
+
+function tsFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) return tsFiles(path);
+    return entry.name.endsWith(".ts") && !entry.name.endsWith(".d.ts") ? [path] : [];
+  });
+}
+
+const reexport =
+  /export\s+(type\s+)?(\*|\{[^}]*\})\s*(?:as\s+\w+\s*)?from\s*["']([^"']+\.svelte)["']/g;
+
+describe("re-exports from .svelte modules", () => {
+  it("carry only the default export or types", () => {
+    const offenders: string[] = [];
+    for (const file of tsFiles(root)) {
+      for (const [, typeOnly, list, from] of readFileSync(file, "utf8").matchAll(reexport)) {
+        if (typeOnly) continue;
+        const names =
+          list === "*"
+            ? ["*"]
+            : list
+                .slice(1, -1)
+                .split(",")
+                .map((n) => n.trim());
+        const values = names.filter(
+          (n) => n && n !== "default" && !/^(type\s|default\s+as\s)/.test(n),
+        );
+        if (values.length)
+          offenders.push(`${relative(root, file)}: ${values.join(", ")} from ${from}`);
+      }
+    }
+    expect(offenders).toEqual([]);
+  });
+});