@heyramzi/ui 3.1.0 → 3.3.0

package/dist/lib/sliding-pill.js

@@ -2,10 +2,10 @@
 // WHY attach to the pill, not the list: the pill finds its list via
 // `parentElement`, so any strip that renders one span gets the motion.
 // WHY measure: the active item's width is its label. The selector covers the
-// three ways a strip marks it: a tab, a nav link, a toggle.
+// ways a strip marks it: a tab, a nav link, a pressed button, a bits-ui toggle group item.
 // Per transitions.dev `tabs-sliding`: first paint and resizes write the
 // position with the transition off, so the pill snaps in instead of flying.
-const ACTIVE = "[data-state=\"active\"],[aria-current=\"page\"],[aria-pressed=\"true\"]";
+const ACTIVE = "[data-state=\"active\"],[aria-current=\"page\"],[aria-pressed=\"true\"],[data-state=\"on\"]";
 export const slidingPill = (pill) => {
 	const list = pill.parentElement;
 	if (!list) return;

package/dist/record/measure-clamp.js

@@ -0,0 +1,23 @@
+import { untrack } from "svelte";
+/** Reports whether a line-clamped box cuts its text, so "More" shows only then. */
+// WHY measure: a note that fits two lines at 1280px overflows at 390px.
+// WHY untracked: an open box keeps its last answer, so a fold never remounts the toggle under focus.
+export function measureClamp(expanded, onCut) {
+	return (el) => {
+		const measure = () => untrack(() => {
+			if (!expanded()) onCut(el.scrollHeight > el.clientHeight + 1);
+		});
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		// A web font landing rewraps the text in a box that keeps its height, and the observer stays quiet.
+		let live = true;
+		void document.fonts?.ready.then(() => live && measure());
+		document.fonts?.addEventListener("loadingdone", measure);
+		return () => {
+			live = false;
+			observer.disconnect();
+			document.fonts?.removeEventListener("loadingdone", measure);
+		};
+	};
+}

package/dist/shadcn/button-group/index.js

@@ -0,0 +1,6 @@
+import Separator from "../../../src/shadcn/button-group/button-group-separator.svelte";
+import Text from "../../../src/shadcn/button-group/button-group-text.svelte";
+import Root, { buttonGroupVariants } from "../../../src/shadcn/button-group/button-group.svelte";
+export { Root, Text, Separator, buttonGroupVariants, 
+//
+ Root as ButtonGroup, Text as ButtonGroupText, Separator as ButtonGroupSeparator };

package/dist/shadcn/checkbox/checkbox-box.js

@@ -0,0 +1,3 @@
+// The checkbox's square, shared with rows that draw it as a picture inside a menu item,
+// where a real checkbox would put a button inside a button.
+export const checkboxBoxClass = "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 not-data-checked:enabled:hover:border-foreground/30 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-[15px] disabled:cursor-not-allowed disabled:opacity-50";

package/dist/shadcn/drawer/index.js

@@ -0,0 +1,14 @@
+import Close from "../../../src/shadcn/drawer/drawer-close.svelte";
+import Content from "../../../src/shadcn/drawer/drawer-content.svelte";
+import Description from "../../../src/shadcn/drawer/drawer-description.svelte";
+import Footer from "../../../src/shadcn/drawer/drawer-footer.svelte";
+import Header from "../../../src/shadcn/drawer/drawer-header.svelte";
+import NestedRoot from "../../../src/shadcn/drawer/drawer-nested.svelte";
+import Overlay from "../../../src/shadcn/drawer/drawer-overlay.svelte";
+import Portal from "../../../src/shadcn/drawer/drawer-portal.svelte";
+import Title from "../../../src/shadcn/drawer/drawer-title.svelte";
+import Trigger from "../../../src/shadcn/drawer/drawer-trigger.svelte";
+import Root from "../../../src/shadcn/drawer/drawer.svelte";
+export { Root, NestedRoot, Content, Description, Overlay, Footer, Header, Title, Trigger, Portal, Close, 
+//
+ Root as Drawer, NestedRoot as DrawerNestedRoot, Content as DrawerContent, Description as DrawerDescription, Overlay as DrawerOverlay, Footer as DrawerFooter, Header as DrawerHeader, Title as DrawerTitle, Trigger as DrawerTrigger, Portal as DrawerPortal, Close as DrawerClose };

package/dist/shadcn/input-group/index.js

@@ -0,0 +1,9 @@
+import Addon from "../../../src/shadcn/input-group/input-group-addon.svelte";
+import Button from "../../../src/shadcn/input-group/input-group-button.svelte";
+import Input from "../../../src/shadcn/input-group/input-group-input.svelte";
+import Text from "../../../src/shadcn/input-group/input-group-text.svelte";
+import Textarea from "../../../src/shadcn/input-group/input-group-textarea.svelte";
+import Root from "../../../src/shadcn/input-group/input-group.svelte";
+export { Root, Addon, Button, Input, Text, Textarea, 
+//
+ Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/shadcn/item/index.js

@@ -0,0 +1,13 @@
+import Actions from "../../../src/shadcn/item/item-actions.svelte";
+import Content from "../../../src/shadcn/item/item-content.svelte";
+import Description from "../../../src/shadcn/item/item-description.svelte";
+import Footer from "../../../src/shadcn/item/item-footer.svelte";
+import Group from "../../../src/shadcn/item/item-group.svelte";
+import Header from "../../../src/shadcn/item/item-header.svelte";
+import Media from "../../../src/shadcn/item/item-media.svelte";
+import Separator from "../../../src/shadcn/item/item-separator.svelte";
+import Title from "../../../src/shadcn/item/item-title.svelte";
+import Root from "../../../src/shadcn/item/item.svelte";
+export { Root, Group, Separator, Header, Footer, Content, Title, Description, Actions, Media, 
+//
+ Root as Item, Group as ItemGroup, Separator as ItemSeparator, Header as ItemHeader, Footer as ItemFooter, Content as ItemContent, Title as ItemTitle, Description as ItemDescription, Actions as ItemActions, Media as ItemMedia };

package/dist/shadcn/native-select/index.js

@@ -0,0 +1,6 @@
+import Root from "../../../src/shadcn/native-select/native-select.svelte";
+import Option from "../../../src/shadcn/native-select/native-select-option.svelte";
+import OptGroup from "../../../src/shadcn/native-select/native-select-opt-group.svelte";
+export { Root, Option, OptGroup, 
+//
+ Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };

package/dist/shadcn/pagination/index.js

@@ -0,0 +1,12 @@
+import Content from "../../../src/shadcn/pagination/pagination-content.svelte";
+import Ellipsis from "../../../src/shadcn/pagination/pagination-ellipsis.svelte";
+import Item from "../../../src/shadcn/pagination/pagination-item.svelte";
+import Link from "../../../src/shadcn/pagination/pagination-link.svelte";
+import NextButton from "../../../src/shadcn/pagination/pagination-next-button.svelte";
+import Next from "../../../src/shadcn/pagination/pagination-next.svelte";
+import PrevButton from "../../../src/shadcn/pagination/pagination-prev-button.svelte";
+import Previous from "../../../src/shadcn/pagination/pagination-previous.svelte";
+import Root from "../../../src/shadcn/pagination/pagination.svelte";
+export { Root, Content, Item, Link, PrevButton, NextButton, Ellipsis, Previous, Next, 
+//
+ Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, NextButton as PaginationNextButton, Ellipsis as PaginationEllipsis, Previous as PaginationPrevious, Next as PaginationNext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.1.0",
+  "version": "3.3.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",
@@ -353,6 +353,7 @@
     "svelte-sonner": "^1.2.3",
     "svelte2tsx": "^0.7.63",
     "typescript": "~7.0.2",
+    "vaul-svelte": "1.0.0-next.7",
     "vite-plus": "1.5.0"
   },
   "peerDependencies": {
@@ -361,7 +362,8 @@
     "bits-ui": "^2.19.5",
     "mode-watcher": "^1.1.0",
     "svelte": "^5.57.2",
-    "svelte-sonner": "^1.2.1"
+    "svelte-sonner": "^1.2.1",
+    "vaul-svelte": "^1.0.0-next.7"
   },
   "peerDependenciesMeta": {
     "mode-watcher": {
@@ -375,6 +377,9 @@
     },
     "@xyflow/svelte": {
       "optional": true
+    },
+    "vaul-svelte": {
+      "optional": true
     }
   },
   "scripts": {

package/scripts/sync-shadcn.mjs

@@ -76,19 +76,13 @@ const DEMO_ALIASES = [
 /* Registry primitives this package does not ship: no product imports them. Skipped, so a sync does not bring them back. */
 const NOT_SHIPPED = new Set([
   "aspect-ratio",
-  "button-group",
   "carousel",
   "chart",
   "data-table",
-  "drawer",
   "form",
-  "input-group",
-  "item",
   "kbd",
   "menubar",
-  "native-select",
   "navigation-menu",
-  "pagination",
   "range-calendar",
   "resizable",
   // Its `pascalToKebab` has no importer, in the registry or here.

package/src/ai/generation-progress/GenerationProgress.svelte

@@ -19,6 +19,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { Progress as ProgressPrimitive } from "bits-ui";
 	import { cn } from "../../lib/utils.js";
 
 	// =========================
@@ -104,21 +105,22 @@
 			</span>
 		</div>
 
-		<div
-			class="gen-track"
-			data-indeterminate={progress ? undefined : true}
-			role="progressbar"
+		<!-- Bits' root, not the shadcn bar: that one has no indeterminate look and fills with primary. -->
+		<ProgressPrimitive.Root
+			value={progress ? progress.completed : null}
+			max={progress?.total}
 			aria-label={heading}
-			aria-valuemin={progress ? 0 : undefined}
-			aria-valuemax={progress?.total}
-			aria-valuenow={progress?.completed}
 			aria-valuetext={progress ? `${progress.completed} of ${progress.total}` : undefined}
 		>
-			<div
-				class="gen-fill"
-				style:transform={progress ? `scaleX(${percent / 100})` : undefined}
-			></div>
-		</div>
+			{#snippet child({ props })}
+				<div {...props} class="gen-track">
+					<div
+						class="gen-fill"
+						style:transform={progress ? `scaleX(${percent / 100})` : undefined}
+					></div>
+				</div>
+			{/snippet}
+		</ProgressPrimitive.Root>
 
 		{#if progress?.currentStep}
 			{#key progress.currentStep}

package/src/canvas/pen/PenOverlay.svelte

@@ -8,6 +8,7 @@
 	import type { PenOp } from "./ops.js";
 	import { createPenSession, type PenPreview } from "./pen-session.js";
 	import type { PenColor, PenTool } from "./types.js";
+	import { forwardWheel } from "../ui/forward-wheel.js";
 
 	// =========================
 	// TYPES
@@ -106,36 +107,6 @@
 		if (event.key === "Escape") session.cancel();
 	}
 
-	// The overlay sits above xyflow's zoom pane, so a wheel or a trackpad pinch would
-	// never reach it. Hand those to the pane so you can zoom and pan mid-drawing.
-	function forwardWheel(node: HTMLElement) {
-		const handler = (event: WheelEvent) => {
-			const zoomPane = node.closest(".svelte-flow")?.querySelector(".svelte-flow__zoom");
-			if (!zoomPane) return;
-			event.preventDefault();
-			zoomPane.dispatchEvent(
-				new WheelEvent("wheel", {
-					deltaX: event.deltaX,
-					deltaY: event.deltaY,
-					deltaZ: event.deltaZ,
-					deltaMode: event.deltaMode,
-					clientX: event.clientX,
-					clientY: event.clientY,
-					screenX: event.screenX,
-					screenY: event.screenY,
-					ctrlKey: event.ctrlKey,
-					shiftKey: event.shiftKey,
-					altKey: event.altKey,
-					metaKey: event.metaKey,
-					bubbles: true,
-					cancelable: true,
-				}),
-			);
-		};
-		node.addEventListener("wheel", handler, { passive: false });
-		return () => node.removeEventListener("wheel", handler);
-	}
-
 	function cursorFor(current: PenTool): string {
 		if (current === "text") return "text";
 		return "crosshair";

package/src/canvas/screen/PartView.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { tick } from "svelte";
+	import { Toggle } from "../../shadcn/toggle/index.js";
 	import GlyphIcon from "./GlyphIcon.svelte";
 	import { addItem, removeItem, setItem } from "./parts.js";
 	import type { ScreenLabels } from "./labels.js";
@@ -206,15 +207,19 @@
 	{#if !readonly}
 		<div class="cv-tools nodrag">
 			{#if part.kind === "button"}
-				<button
-					type="button"
-					class="cv-tool is-text"
-					aria-pressed={part.variant !== "secondary"}
-					onclick={() =>
-						onCommit({ variant: part.variant === "secondary" ? "primary" : "secondary" }, false)}
+				<!-- The button is drawn here, so the card's own classes replace the toggle's utilities. -->
+				<Toggle
+					bind:pressed={
+						() => part.variant !== "secondary",
+						(primary) => onCommit({ variant: primary ? "primary" : "secondary" }, false)
+					}
 				>
-					{part.variant === "secondary" ? labels.secondary : labels.primary}
-				</button>
+					{#snippet child({ props })}
+						<button {...props} class="cv-tool is-text">
+							{part.variant === "secondary" ? labels.secondary : labels.primary}
+						</button>
+					{/snippet}
+				</Toggle>
 			{/if}
 			<button
 				type="button"

package/src/canvas/screen/ScreenBody.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { RadioGroup } from "bits-ui";
 	import { getDiagramEditorContext } from "../editor/editor-context.js";
 	import { isLocked } from "../editor/lock.js";
 	import { DEFAULT_SCREEN_LABELS, type ScreenLabels } from "./labels.js";
@@ -71,6 +72,13 @@
 		if (mode !== screen.mode) write({ mode });
 	}
 
+	// Svelte Flow nudges a selected card on an arrow, so the mode switch keeps the keys it moves by.
+	function keepArrows(event: KeyboardEvent) {
+		if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") {
+			event.stopPropagation();
+		}
+	}
+
 	function add(kind: PartKind) {
 		write({ parts: addPart(screen.parts, kind) });
 		tray = false;
@@ -104,20 +112,19 @@
 			}}
 		/>
 		{#if !readonly}
-			<div class="cv-switch nodrag" role="radiogroup" aria-label={labels.mode}>
+			<RadioGroup.Root
+				class="cv-switch nodrag"
+				orientation="horizontal"
+				aria-label={labels.mode}
+				bind:value={() => screen.mode, (mode) => setMode(mode as ScreenMode)}
+				onkeydown={keepArrows}
+			>
 				{#each SCREEN_MODES as mode (mode)}
-					<button
-						type="button"
-						role="radio"
-						class="cv-seg"
-						aria-checked={screen.mode === mode}
-						data-mode-option={mode}
-						onclick={() => setMode(mode)}
-					>
+					<RadioGroup.Item value={mode} class="cv-seg" data-mode-option={mode}>
 						{labels.modes[mode]}
-					</button>
+					</RadioGroup.Item>
 				{/each}
-			</div>
+			</RadioGroup.Root>
 		{/if}
 	</div>
 

package/src/canvas/ui/BarTooltip.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { Kbd } from "../../shadcn/kbd/index.js";
+	import * as Tooltip from "../../shadcn/tooltip/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** Shown in the tooltip, and the button's name unless `name` is set. */
+		label: string;
+		/** The name a screen reader reads, when it needs more than the tooltip, like "Fill: Red". */
+		name?: string;
+		/** The single key that picks this tool, shown beside the label and set as aria-keyshortcuts. */
+		shortcut?: string;
+		side?: "top" | "right" | "bottom" | "left";
+		/** The bar control. Spread `props` on it, so the tooltip opens from it and names it. */
+		child: Snippet<[{ props: Record<string, unknown> }]>;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	// Renamed, because the trigger's own `child` snippet below would shadow it.
+	let { label, name = label, shortcut, side = "top", child: control }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Tooltip.Root>
+	<Tooltip.Trigger>
+		{#snippet child({ props })}
+			{@render control({
+				props: { ...props, "aria-label": name, "aria-keyshortcuts": shortcut || undefined },
+			})}
+		{/snippet}
+	</Tooltip.Trigger>
+	<Tooltip.Content {side} sideOffset={10} class="flex items-center gap-2">
+		{label}
+		{#if shortcut}<Kbd>{shortcut}</Kbd>{/if}
+	</Tooltip.Content>
+</Tooltip.Root>

package/src/canvas/ui/BarTooltip.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Shown in the tooltip, and the button's name unless `name` is set. */
+    label: string;
+    /** The name a screen reader reads, when it needs more than the tooltip, like "Fill: Red". */
+    name?: string;
+    /** The single key that picks this tool, shown beside the label and set as aria-keyshortcuts. */
+    shortcut?: string;
+    side?: "top" | "right" | "bottom" | "left";
+    /** The bar control. Spread `props` on it, so the tooltip opens from it and names it. */
+    child: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;