@heyramzi/ui 3.1.0 → 3.2.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/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.2.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",

package/scripts/sync-shadcn.mjs

@@ -76,19 +76,14 @@ 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;