@heyramzi/ui 2.21.0 → 2.21.1

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.21.1",
   "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/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([]);
+  });
+});