@heyramzi/ui 1.53.0 → 1.53.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "1.53.0",
+  "version": "1.53.1",
   "description": "Svelte 5 UI primitives: effects, animations, and shared component CSS.",
   "license": "MIT",
   "repository": {

package/scripts/lib/sync-core.mjs

@@ -15,7 +15,7 @@ const get = (url) => fetch(url, { headers: { "user-agent": "heyramzi-ui-sync" }
 
 export async function fetchText(url) {
   const res = await get(url);
-  if (!res.ok) throw new Error(`${res.status} ${res.statusText} — ${url}`);
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}: ${url}`);
   return await res.text();
 }
 

package/scripts/sync-shadcn.mjs

@@ -238,14 +238,14 @@ for (const { item, payload } of fetched) {
   };
 
   if (!moved.length && !gone.length) unchanged++;
-  else if (fresh) buckets.added.push(`${item.name} — ${files.length} files, new primitive`);
+  else if (fresh) buckets.added.push(`${item.name}: ${files.length} files, new primitive`);
   else if (blocked)
-    for (const s of moved) buckets.port.push(`${label(s.path)} — upstream moved, ${s.state} here`);
+    for (const s of moved) buckets.port.push(`${label(s.path)}: upstream moved, ${s.state} here`);
   else if (apply.length)
-    buckets.synced.push(`${item.name} — ${apply.map((s) => basename(s.path)).join(", ")}`);
+    buckets.synced.push(`${item.name}: ${apply.map((s) => basename(s.path)).join(", ")}`);
 
   for (const g of gone)
-    buckets.removed.push(`${label(g.path)} — gone upstream${g.ours ? ", kept (ours)" : ""}`);
+    buckets.removed.push(`${label(g.path)}: gone upstream${g.ours ? ", kept (ours)" : ""}`);
 
   if (CHECK) continue;
 
@@ -261,14 +261,14 @@ for (const { item, payload } of fetched) {
 
 for (const name of Object.keys(previous)) {
   if (entries[name]) continue;
-  buckets.removed.push(`${name} — gone from the registry`);
+  buckets.removed.push(`${name}: gone from the registry`);
   if (!CHECK) await removeDeep(`${VENDOR}/${name}`);
 }
 
 const ours = readdirSync(LOCAL, { withFileTypes: true })
   .filter((e) => e.isDirectory() && !entries[e.name] && !LOCAL_ONLY.has(e.name))
   .map((e) => e.name);
-for (const name of ours) buckets.unported.push(`${name} — in src/shadcn, not in the registry`);
+for (const name of ours) buckets.unported.push(`${name}: in src/shadcn, not in the registry`);
 
 /* The docs site's own demo for each primitive, vendored on the same three-way
  * rule. Upstream writes them; the site renders them. */
@@ -284,7 +284,7 @@ for (const name of demoNames) {
     fetchTextIf(`${DOCS}/content/components/${name}.md`),
   ]);
   if (raw === null) {
-    buckets.unported.push(`${name} — no demo upstream`);
+    buckets.unported.push(`${name}: no demo upstream`);
     continue;
   }
 
@@ -296,12 +296,12 @@ for (const name of demoNames) {
   // The imports of the demo that renders: ours when kept, upstream's when written.
   const shown = state === "diverged" ? local : next;
 
-  if (state === "dropped") buckets.removed.push(`${label(path)} — dropped here, kept out`);
+  if (state === "dropped") buckets.removed.push(`${label(path)}: dropped here, kept out`);
   else manifest.push({ name, ...meta(doc, name), imports: publicImports(shown) });
 
   if (base !== raw) {
-    if (state === "diverged") buckets.port.push(`${label(path)} — upstream moved, ours here`);
-    else if (state !== "current") buckets.synced.push(`${name} — demo`);
+    if (state === "diverged") buckets.port.push(`${label(path)}: upstream moved, ours here`);
+    else if (state !== "current") buckets.synced.push(`${name}: demo`);
   }
   if (CHECK) continue;
 
@@ -345,7 +345,7 @@ if (!CHECK) {
 
 process.exit(
   report({
-    title: `shadcn-svelte — ${items.length} primitives`,
+    title: `shadcn-svelte: ${items.length} primitives`,
     buckets,
     unchanged,
     footer: `${Object.values(entries).filter((e) => e.adapted).length} adapted here, ${LOCAL_ONLY.size} ours`,

package/scripts/sync-transitions.mjs

@@ -12,7 +12,7 @@
  */
 
 /*
- * Paid ones are dropped here and never vendored — Ramzi, 14 Sep 2026: "the pro effects we don't need them".
+ * Paid ones are dropped here and never vendored (Ramzi, 14 Sep 2026: "the pro effects we don't need them").
  */
 
 /*
@@ -100,20 +100,20 @@ for (const { slug, name, css } of free) {
   const hash = sha256(css);
   entries[slug] = { name, sha256: hash, local: PORTED[slug] ?? null };
 
-  if (!previous[slug]) buckets.added.push(`${slug} — ${name}`);
-  else if (previous[slug].sha256 !== hash) buckets.changed.push(`${slug} — ${name}`);
+  if (!previous[slug]) buckets.added.push(`${slug}: ${name}`);
+  else if (previous[slug].sha256 !== hash) buckets.changed.push(`${slug}: ${name}`);
   else unchanged++;
 
-  if (!PORTED[slug]) buckets.unported.push(`${slug} — nothing under src/ owns it`);
+  if (!PORTED[slug]) buckets.unported.push(`${slug}: nothing under src/ owns it`);
   else if (!existsSync(`${SRC}/${PORTED[slug]}`))
-    buckets.unported.push(`${slug} — PORTED says ${PORTED[slug]}, which is missing`);
+    buckets.unported.push(`${slug}: PORTED says ${PORTED[slug]}, which is missing`);
 
   if (!CHECK) await writeFileDeep(`${VENDOR}/${slug}.css`, css);
 }
 
 for (const slug of Object.keys(previous)) {
   if (entries[slug]) continue;
-  buckets.removed.push(`${slug} — gone upstream or moved to pro`);
+  buckets.removed.push(`${slug}: gone upstream or moved to pro`);
   if (!CHECK) await removeDeep(`${VENDOR}/${slug}.css`);
 }
 
@@ -138,7 +138,7 @@ if (!CHECK) {
 
 process.exit(
   report({
-    title: `transitions.dev — ${free.length} free`,
+    title: `transitions.dev: ${free.length} free`,
     buckets,
     unchanged,
     footer: `${paid} pro skipped`,

package/src/agents/agent-avatar.svelte

@@ -4,15 +4,15 @@
     BotAvatarShading,
     BotAvatarState,
     BotAvatarType,
-  } from './vendor/types';
-  import type { AgentAvatarProps } from './types';
-  import { botAvatarPresets, stateLabels } from './vendor/presets';
-  import { SHAPE_PATHS, SHAPE_PARTS } from './vendor/shapes';
-  import { autoInk, richer, shade } from './vendor/color';
-  import { Sim, restPose } from './vendor/engine';
-  import { draw, LIGHT_DEFAULTS, OVERSCAN, RISE, type DrawConfig } from './vendor/draw';
-  import { bakesPending, hurry, onLanded, takeMissed, warmPlastic, type FurStyle } from './vendor/plastic';
-  import { subscribe, pointer } from './vendor/ticker';
+  } from './vendor/types.js';
+  import type { AgentAvatarProps } from './types.js';
+  import { botAvatarPresets, stateLabels } from './vendor/presets.js';
+  import { SHAPE_PATHS, SHAPE_PARTS } from './vendor/shapes.js';
+  import { autoInk, richer, shade } from './vendor/color.js';
+  import { Sim, restPose } from './vendor/engine.js';
+  import { draw, LIGHT_DEFAULTS, OVERSCAN, RISE, type DrawConfig } from './vendor/draw.js';
+  import { bakesPending, hurry, onLanded, takeMissed, warmPlastic, type FurStyle } from './vendor/plastic.js';
+  import { subscribe, pointer } from './vendor/ticker.js';
   import {
     SHOW_WITHIN,
     bodyPath,
@@ -21,7 +21,7 @@
     partPaths,
     showReady,
     waiters,
-  } from './page-state';
+  } from './page-state.js';
   import {
     clamp,
     clampOpt,
@@ -33,9 +33,7 @@
     reducedMotion,
     resolveTheme as themeOf,
     warmIdle,
-  } from './helpers';
-
-  type Props = AgentAvatarProps;
+  } from './helpers.js';
 
   let {
     name,
@@ -106,7 +104,7 @@
     'aria-hidden': ariaHidden,
     onclick: userClick,
     ...rest
-  }: Props = $props();
+  }: AgentAvatarProps = $props();
 
   const shapePath = (t: BotAvatarType) => SHAPE_PATHS[t] ?? SHAPE_PATHS.clover;
 

package/src/agents/agent-cast.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import AgentAvatar from './agent-avatar.svelte';
-  import type { Agent, AgentState } from './types';
+  import type { Agent, AgentState } from './types.js';
 
-  type Props = {
+  interface Props {
     /** The cast to lay out. */
     agents: Agent[];
     /** Selected agent id, when the cast is a picker. */

package/src/agents/demo.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import AgentAvatar from './agent-avatar.svelte';
   import AgentCast from './agent-cast.svelte';
-  import type { Agent, AgentState } from './types';
+  import type { Agent, AgentState } from './types.js';
 
   const cast: Agent[] = [
     { id: 'ada', name: 'Ada', role: 'Researcher', shape: 'clover', color: '#41C4FF', group: 'Research' },

package/src/agents/helpers.ts

@@ -1,5 +1,5 @@
 /* Pure helpers for the avatar: numbers, theme, lights, idle scheduling. */
-import { stockLights } from './vendor/plastic';
+import { stockLights } from './vendor/plastic.js';
 
 export const clamp = (v: number, lo: number, hi: number) =>
   Math.min(hi, Math.max(lo, Number.isFinite(v) ? v : 1));

package/src/agents/index.ts

@@ -1,6 +1,6 @@
 export { default as AgentAvatar } from './agent-avatar.svelte';
 export { default as AgentCast } from './agent-cast.svelte';
-export type { Agent, AgentAvatarProps, AgentShape } from './types';
+export type { Agent, AgentAvatarProps, AgentShape } from './types.js';
 export {
   agentPresets,
   agentShapes,
@@ -8,4 +8,4 @@ export {
   agentStates,
   agentPalette,
   agentStateLabels,
-} from './types';
+} from './types.js';

package/src/agents/page-state.ts

@@ -1,6 +1,6 @@
 /* What every avatar on the page shares: the batching shown-gate, so a row of
    them comes in together, the path caches, and one theme watcher. */
-import { bakesPending } from './vendor/plastic';
+import { bakesPending } from './vendor/plastic.js';
 
 export const SHOW_WITHIN = 4000;
 export const waiters = new Map<object, { ready: () => boolean; show: () => void }>();

package/src/agents/types.ts

@@ -1,4 +1,4 @@
-import type { BotAvatarFace, BotAvatarProps, BotAvatarType } from './vendor/types';
+import type { BotAvatarFace, BotAvatarProps, BotAvatarType } from './vendor/types.js';
 
 /** The body shapes an agent can be drawn as. */
 export type AgentShape = BotAvatarType;
@@ -11,7 +11,7 @@ export type {
   BotAvatarHat as AgentHat,
   BotAvatarGlasses as AgentGlasses,
   BotAvatarPreset as AgentPreset,
-} from './vendor/types';
+} from './vendor/types.js';
 
 export {
   botAvatarPresets as agentPresets,
@@ -20,7 +20,7 @@ export {
   botAvatarStates as agentStates,
   botAvatarPalette as agentPalette,
   stateLabels as agentStateLabels,
-} from './vendor/presets';
+} from './vendor/presets.js';
 
 /** One member of a cast: a name, a role, and the face they draw. */
 export type Agent = {

package/src/components/copy/copy-button.test.ts

@@ -16,8 +16,10 @@ function render(props: Props) {
   document.body.appendChild(target);
   const app = mount(CopyButton, { target, props });
   flushSync();
+  const button = target.querySelector("button");
+  if (!button) throw new Error("CopyButton rendered no button");
   return {
-    button: target.querySelector("button")!,
+    button,
     target,
     done: () => {
       void unmount(app);

package/src/components/data-table/infinite-scroll.svelte

@@ -4,7 +4,7 @@ import type { Snippet } from "svelte";
 import { Spinner } from "../../shadcn/spinner/index.js";
 
 // ========================= TYPES
-type Props = {
+interface Props {
 	items: T[];
 	isDone: boolean;
 	isLoading: boolean;

package/src/components/data-table/pagination.svelte

@@ -4,7 +4,7 @@ import { Button } from "../../shadcn/button/index.js";
 import { totalPages as calcTotalPages } from "./data-table.js";
 
 // ========================= TYPES
-type Props = {
+interface Props {
 	page: number;
 	pageSize: number;
 	total: number;

package/src/components/data-table/row-arrow.svelte

@@ -8,7 +8,7 @@ import { cn } from "@heyramzi/utils";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	class?: string;
 };
 

package/src/components/data-table/row-context-menu.svelte

@@ -10,7 +10,7 @@ import type { Snippet } from "svelte";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	onDelete: () => void;
 	href?: string;
 	id?: string;

package/src/components/data-table/sortable-head.svelte

@@ -5,7 +5,7 @@ import { cn } from "@heyramzi/utils";
 import type { SortDirection, SortState } from "./data-table.js";
 
 // ========================= TYPES
-type Props = {
+interface Props {
 	key: keyof T & string;
 	sort: SortState<T>;
 	onSort: (key: keyof T & string) => void;

package/src/components/data-table/table-skeleton.svelte

@@ -10,7 +10,7 @@ type ColumnDef = {
 	circle?: boolean;
 };
 
-type Props = {
+interface Props {
 	/** Number of skeleton rows to render */
 	rows?: number;
 	/** Column definitions control skeleton widths and alignment */

package/src/components/hold-to-confirm/hold-to-confirm.svelte

@@ -6,7 +6,7 @@
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
 	// ========================= TYPES
-	type Props = {
+	interface Props extends Omit<HTMLButtonAttributes, "class"> {
 		duration?: number;
 		onConfirm: () => void;
 		disabled?: boolean;
@@ -19,7 +19,7 @@
 		class?: string;
 		idle: Snippet;
 		holding: Snippet;
-	} & HTMLButtonAttributes;
+	}
 
 	// ========================= PROPS
 	let {

package/src/components/icon/icon.svelte

@@ -4,7 +4,7 @@ import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	icon: PhosphorIcon;
 	size?: number;
 	class?: string;

package/src/components/list-page/detail-empty.svelte

@@ -9,7 +9,7 @@ import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// Shown when nothing is picked or the board is empty. Both mean "content
 	// goes here", so both get a dashed `border-2` edge.
 	icon?: PhosphorIcon;

package/src/components/list-page/detail-header.svelte

@@ -8,7 +8,7 @@ import { cn } from "@heyramzi/utils";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// Answers three questions in one order: what is this, what state is it in,
 	// what can I do with it. Each queue page used to order them differently.
 	title: string;

package/src/components/list-page/detail-panel.svelte

@@ -11,7 +11,7 @@ import type { PhosphorIcon } from "../../lib/icon-types.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// One panel per idea in a detail pane. Hand-rolled copies drifted between
 	// 8px and 12px corners, so rounded-xl lives here once.
 	label?: string;

package/src/components/list-page/detail-row.svelte

@@ -8,7 +8,7 @@ import { cn } from "@heyramzi/utils";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// A hairline band inside `DetailHeader` or `DetailPanel` for the record's
 	// own facts, so the page never nests cards inside cards.
 	muted?: boolean;

package/src/components/list-page/detail-stack.svelte

@@ -8,7 +8,7 @@ import { cn } from "@heyramzi/utils";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// A flat stack of panels at one gap. `xl:pr-1` keeps the top panel's
 	// corner clear of the shell's scrollbar.
 

package/src/components/list-page/filter-item.svelte

@@ -10,7 +10,7 @@ import { cn } from "@heyramzi/utils";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	checked: boolean;
 	onclick: () => void;
 	variant?: "checkbox" | "radio";

package/src/components/list-page/filter-popover.svelte

@@ -17,7 +17,7 @@ const DefaultFunnelIcon = FunnelIcon as unknown as PhosphorIcon;
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	label: string;
 	icon?: PhosphorIcon;
 	count?: number;

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

@@ -10,7 +10,7 @@
 	// =========================
 	// TYPES
 	// =========================
-	type Props = {
+	interface Props {
 		groups: TGroup[];
 		getKey: (group: TGroup) => string;
 		defaultCollapsed?: string[];

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

@@ -23,7 +23,7 @@
 		actionHref?: string;
 	};
 
-	type Props = {
+	interface Props {
 		isEmpty?: boolean;
 		emptyState?: EmptyConfig;
 		hideToolbarWhenEmpty?: boolean;

package/src/components/list-page/master-detail.svelte

@@ -12,7 +12,7 @@ import { MASTER_DETAIL_PANE, type MasterDetailPane } from "./queue-rail.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// The list rail (an <aside>) and the content pane. Pages style both; this
 	// shell owns the two columns and the min-h-0/min-w-0 scroll containment.
 	rail: Snippet;

package/src/components/list-page/prev-next.svelte

@@ -10,7 +10,7 @@ import { stepTo } from "./step.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	/** Ids in the order the list shows them. */
 	ids: readonly string[];
 	current: string | null | undefined;

package/src/components/list-page/rail-body.svelte

@@ -8,7 +8,7 @@ import { cn } from "@heyramzi/utils";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// The scroller under `RailHead`. `min-h-0` makes a flex child scroll instead
 	// of growing its parent, and it's the line hand-rolled rails forgot.
 	children: Snippet;

package/src/components/list-page/rail-head.svelte

@@ -9,7 +9,7 @@ import { cn } from "@heyramzi/utils";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// The fixed top of a queue rail: label, filter, search. A fixed height, so
 	// rows start on the same line on every queue page.
 	label?: string;

package/src/components/list-page/rail-row.svelte

@@ -10,7 +10,7 @@ import { MASTER_DETAIL_PANE, type MasterDetailPane } from "./queue-rail.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// One row shape for every queue rail, in a fixed order: identity, preview,
 	// facts. Three pages used to draw three different rows.
 	title: string;

package/src/components/list-page/section-label.svelte

@@ -9,7 +9,7 @@ import type { PhosphorIcon } from "../../lib/icon-types.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// The one label style for panel, rail group and sub-section headers. Retyped
 	// copies drifted to a different tracking value.
 	icon?: PhosphorIcon;

package/src/components/list-page/toolbar-search.svelte

@@ -9,7 +9,7 @@ import { cn } from "@heyramzi/utils";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	value: string;
 	placeholder?: string;
 	size?: "sm" | "default";

package/src/components/locale-switch/locale-switch.svelte

@@ -13,7 +13,7 @@ type LocaleOption = {
 	flag: string;
 };
 
-type Props = {
+interface Props {
 	// Wraps `SegmentedFilter` so it shares one track with every other strip. It
 	// only adds each language's flag.
 	value: string;

package/src/components/mark/mark.svelte

@@ -12,7 +12,7 @@ import { cn } from "@heyramzi/utils";
  * A brand's mark at glyph size: a kit icon, a channel avatar, a client logo.
  * One renderer, because three places each handled a missing file their own way.
  */
-type Props = {
+interface Props {
 	/** The file. A missing or broken one falls back to the label's initial. */
 	src?: string;
 	/** Read for the fallback letter. The mark itself is decorative. */

package/src/components/picker/mark-picker.svelte

@@ -18,7 +18,7 @@ import type { PickerOption } from "./types.js";
  * wraps `Picker` because the kit strip and the channel row wrote the same two
  * snippets.
  */
-type Props = {
+interface Props {
 	options: PickerOption<V>[];
 	value: V | null;
 	onSelect: (value: V) => void;

package/src/components/picker/picker.svelte

@@ -12,7 +12,7 @@
 	// It replaced four pickers in one sidebar, each built differently. Only one
 	// had search, only one had arrow keys, and the check mark sat in three places.
 
-	type Props = {
+	interface Props {
 		/** Flat list. Mutually exclusive with `groups`. */
 		options?: PickerOption<V>[];
 		/** Titled runs, when the menu has a shape worth naming. */

package/src/components/segmented/animated-tabs.svelte

@@ -40,7 +40,7 @@
 	// WHY re-declare `value` and `onValueChange`: the primitive types them as a
 	// bare `string`, so fourteen pages cast back to their union. Generic now, the
 	// one narrowing happens here.
-	type Props = Omit<TabsPrimitive.RootProps, "value" | "onValueChange"> & {
+	interface Props extends Omit<TabsPrimitive.RootProps, "value" | "onValueChange"> {
 		tabs: readonly TabDef<T>[];
 		value?: T;
 		onValueChange?: (value: T) => void;
@@ -67,7 +67,7 @@
 		max?: number;
 		// What the menu segment says. Translate at the call site.
 		moreLabel?: string;
-	};
+	}
 
 	let {
 		ref = $bindable(null),

package/src/components/segmented/segment.svelte

@@ -36,13 +36,13 @@ import { Mark } from "../mark/index.js";
 // =========================
 // TYPES
 // =========================
-type Props = SegmentContent & {
+interface Props extends SegmentContent {
 	/**
 	 * `true`/`false` when the caller owns the state. `"auto"` when bits-ui owns it
 	 * in a `data-state` on the trigger, and the stylesheet answers.
 	 */
 	active?: boolean | "auto";
-};
+}
 
 // =========================
 // PROPS

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

@@ -13,7 +13,7 @@ import { segmentedTriggerClass } from "./segmented.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// WHY: picks which rows are listed, with no panel of its own. That's a
 	// segmented control, not a tab set.
 

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

@@ -17,7 +17,7 @@ import { segmentedTriggerClass } from "./segmented.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// WHY a third component: tabs are a `tablist`, filters a `group` of toggles,
 	// and this goes to sibling pages, so it's a `nav` of links with `aria-current`.
 

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

@@ -18,7 +18,7 @@ import type { SegmentContent } from "./segment.svelte";
 
 // WHY never active: `splitSegments` pulls the current item into a visible slot,
 // so this never fights bits-ui's `data-state="open"`.
-type Props = {
+interface Props {
 	items: readonly (SegmentContent & { value: V })[];
 	onSelect: (value: V) => void;
 	/** What the segment says. Translate at the call site. */

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

@@ -10,7 +10,7 @@ import { slidingPill } from "../../lib/sliding-pill.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	/** Fill the row rather than sit at its natural width. */
 	fill?: boolean;
 	/** `pill`, a bordered well with a travelling highlight, or `underline`, a travelling rule. */
@@ -86,12 +86,17 @@ let {
 	.track :global(.ui-segment[data-state="active"] + .ui-segment)::before,
 	.track :global(.ui-segment[aria-current="page"] + .ui-segment)::before,
 	.track :global(.ui-segment[aria-pressed="true"] + .ui-segment)::before,
-	.track :global([data-slot="tabs-list"]:has(> .ui-segment:last-child[data-state="active"]) + .ui-segment)::before,
-	.track :global(.ui-segment:hover)::before,
-	.track :global(.ui-segment:hover + .ui-segment)::before {
+	.track :global([data-slot="tabs-list"]:has(> .ui-segment:last-child[data-state="active"]) + .ui-segment)::before {
 		opacity: 0;
 	}
 
+	@media (hover: hover) and (pointer: fine) {
+		.track :global(.ui-segment:hover)::before,
+		.track :global(.ui-segment:hover + .ui-segment)::before {
+			opacity: 0;
+		}
+	}
+
 	/* The label's colour lands with the pill, on the same fast step. */
 	.track :global(.ui-segment) {
 		transition:

package/src/components/star-rating-input/star-rating-input.svelte

@@ -25,7 +25,7 @@ const POP_WINDOW_MS = 350 + 4 * 40;
 import { Star } from "phosphor-svelte";
 import { cn } from "@heyramzi/utils";
 
-type Props = {
+interface Props {
 	/** Current rating value (0 = unrated). */
 	value: number;
 	/** Maximum rating. Defaults to 5. */
@@ -187,8 +187,10 @@ function handleLeave() {
 		box-shadow: 0 0 0 2px var(--color-ring);
 	}
 
-	.hit-button:not(.is-disabled):hover {
-		transform: scale(1.1);
+	@media (hover: hover) and (pointer: fine) {
+		.hit-button:not(.is-disabled):hover {
+			transform: scale(1.1);
+		}
 	}
 
 	.hit-button:not(.is-disabled):active {
@@ -248,9 +250,14 @@ function handleLeave() {
 			transition: none;
 		}
 
-		.hit-button:not(.is-disabled):hover,
 		.hit-button:not(.is-disabled):active {
 			transform: none;
 		}
+
+		@media (hover: hover) and (pointer: fine) {
+			.hit-button:not(.is-disabled):hover {
+				transform: none;
+			}
+		}
 	}
 </style>

package/src/effects/animated-beam/diagrams/BeamSvg.svelte

@@ -2,7 +2,7 @@
 	// =========================
 	// PROPS
 	// =========================
-	type Props = {
+	interface Props {
 		id: string;
 		class?: string;
 		width: number;

package/src/effects/animated-beam/path-calculator.svelte.ts

@@ -43,7 +43,7 @@ export function usePathCalculator() {
 
     // A cubic with horizontal handles, not a quadratic through a raised midpoint.
 
-    // The quadratic put its single control point at `midY - curvature`, which for a fan into one node lands past the far end:
+    // The quadratic put its single control point at `midY` minus `curvature`, which for a fan into one node lands past the far end:
 
     // the top beam dove below the hub and crossed the middle beam before arriving, and three beams bundled into a lens for the last stretch.
 

package/src/effects/border-beam/types.ts

@@ -24,7 +24,7 @@ export interface BorderBeamProps extends Omit<HTMLAttributes<HTMLDivElement>, "c
   // preset stop is mapped by index (cycling if shorter) so layout/timing
   // stay identical, only hues swap. Accepts hex (#rrggbb), rgb(), rgba().
   colors?: string[];
-  // WHY: the bloom layer is the single most expensive part of the beam — a blurred conic-gradient re-rasterized every frame.
+  // WHY: the bloom layer is the single most expensive part of the beam: a blurred conic-gradient re-rasterized every frame.
 
   // Opt-out gives a 2-3x perf win for callers who only need the stroke and inner shimmer.
   bloom?: boolean;

package/src/effects/interactive-hover-button/InteractiveHoverButton.svelte

@@ -7,7 +7,7 @@ import { ArrowRight } from "phosphor-svelte";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	href?: string;
 	/** `submit` posts the form the button sits in. */
 	type?: "button" | "submit";

package/src/effects/shader-gradient/shaders.ts

@@ -11,7 +11,7 @@
  */
 
 /*
- * irradiance * BRDF_Lambert(diffuse * (1 - metalness)) = (brightness * PI) * (1 / PI) * (base * 0.8) = brightness * 0.8 * base
+ * irradiance * BRDF_Lambert(diffuse * (1 minus metalness)) = (brightness * PI) * (1 / PI) * (base * 0.8) = brightness * 0.8 * base
  */
 
 /*

package/src/effects/spotlight/Spotlight.svelte

@@ -8,7 +8,7 @@
 	// =========================
 	// TYPES
 	// =========================
-	type Props = {
+	interface Props {
 		class?: string;
 		fill?: string;
 	};

package/src/icons/trades.ts

@@ -1,13 +1,13 @@
 /**
- * Trade icon map — Tabler covers the domain Lucide + Phosphor miss.
+ * Trade icon map. Tabler covers the domain Lucide and Phosphor miss.
  */
 
 /*
- * Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip: - Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
+ * Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip. Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
  */
 
 /*
- * `building`, `car` — but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. - Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller` — also no `trowel`.
+ * `building`, `car`, but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller`, and also no `trowel`.
  */
 
 /*

package/src/lib/sliding-pill.ts

@@ -18,8 +18,8 @@ export const slidingPill: Attachment<HTMLElement> = (pill) => {
 
   let settled = false;
 
-  function move(animate: boolean) {
-    const active = list!.querySelector<HTMLElement>(ACTIVE);
+  const move = (animate: boolean) => {
+    const active = list.querySelector<HTMLElement>(ACTIVE);
     if (!active) {
       pill.style.opacity = "0";
       return;
@@ -37,7 +37,7 @@ export const slidingPill: Attachment<HTMLElement> = (pill) => {
     pill.style.width = `${active.offsetWidth}px`;
     void pill.offsetWidth;
     pill.style.transition = "";
-  }
+  };
 
   // Position first, THEN hand the highlight over. Swapped, one frame draws both
   // the trigger's own background and a zero-width pill: a flicker on hydration.