@heyramzi/ui 2.1.0 → 2.2.0

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

@@ -1,61 +1,61 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import * as ContextMenu from "../../shadcn/context-menu/index.js";
-import { HoldToConfirm } from "../hold-to-confirm/index.js";
-import { ArrowUpRight, Copy, LinkSimple, Trash } from "phosphor-svelte";
-import type { Snippet } from "svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import * as ContextMenu from "../../shadcn/context-menu/index.js";
+	import { HoldToConfirm } from "../hold-to-confirm/index.js";
+	import { ArrowUpRight, Copy, LinkSimple, Trash } from "phosphor-svelte";
+	import type { Snippet } from "svelte";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	onDelete: () => void;
-	href?: string;
-	id?: string;
-	deleteLabel?: string;
-	copyLinkLabel?: string;
-	copyIdLabel?: string;
-	/** Called after a successful clipboard copy so consumers can show their own toast */
-	onCopied?: () => void;
-	children: Snippet<[Record<string, unknown>]>;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		onDelete: () => void;
+		href?: string;
+		id?: string;
+		deleteLabel?: string;
+		copyLinkLabel?: string;
+		copyIdLabel?: string;
+		/** Called after a successful clipboard copy so consumers can show their own toast */
+		onCopied?: () => void;
+		children: Snippet<[Record<string, unknown>]>;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	onDelete,
-	href,
-	id,
-	deleteLabel = "Delete",
-	copyLinkLabel = "Copy link",
-	copyIdLabel = "Copy ID",
-	onCopied,
-	children,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		onDelete,
+		href,
+		id,
+		deleteLabel = "Delete",
+		copyLinkLabel = "Copy link",
+		copyIdLabel = "Copy ID",
+		onCopied,
+		children,
+	}: Props = $props();
 
-// =========================
-// FUNCTIONS
-// =========================
-function handleOpen() {
-	if (href) window.location.href = href;
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function handleOpen() {
+		if (href) window.location.href = href;
+	}
 
-// WHY the whole URL and not the path: what leaves this menu is pasted into a
-// message, a doc or an agent prompt, none of which can resolve "/clients/42".
-async function handleCopyLink() {
-	if (!href) return;
-	await navigator.clipboard.writeText(new URL(href, window.location.origin).href);
-	onCopied?.();
-}
+	// WHY the whole URL and not the path: what leaves this menu is pasted into a
+	// message, a doc or an agent prompt, none of which can resolve "/clients/42".
+	async function handleCopyLink() {
+		if (!href) return;
+		await navigator.clipboard.writeText(new URL(href, window.location.origin).href);
+		onCopied?.();
+	}
 
-async function handleCopyId() {
-	if (!id) return;
-	await navigator.clipboard.writeText(id);
-	onCopied?.();
-}
+	async function handleCopyId() {
+		if (!id) return;
+		await navigator.clipboard.writeText(id);
+		onCopied?.();
+	}
 </script>
 
 <!-- =========================== -->

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

@@ -1,34 +1,34 @@
 <script lang="ts" generics="T">
-import type { Snippet } from "svelte";
-import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import type { SortDirection, SortState } from "./data-table.js";
+	import type { Snippet } from "svelte";
+	import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import type { SortDirection, SortState } from "./data-table.js";
 
-// ========================= TYPES
-interface Props {
-	key: keyof T & string;
-	sort: SortState<T>;
-	onSort: (key: keyof T & string) => void;
-	class?: string;
-	children: Snippet;
-};
+	// ========================= TYPES
+	interface Props {
+		key: keyof T & string;
+		sort: SortState<T>;
+		onSort: (key: keyof T & string) => void;
+		class?: string;
+		children: Snippet;
+	}
 
-// ========================= PROPS
-let { key, sort, onSort, class: className, children }: Props = $props();
+	// ========================= PROPS
+	let { key, sort, onSort, class: className, children }: Props = $props();
 
-// ========================= DERIVED
-let active = $derived(sort?.key === key);
-let direction = $derived<SortDirection | null>(sort && active ? sort.direction : null);
-let ariaSort = $derived<"ascending" | "descending" | "none">(
-	direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
-);
+	// ========================= DERIVED
+	let active = $derived(sort?.key === key);
+	let direction = $derived<SortDirection | null>(sort && active ? sort.direction : null);
+	let ariaSort = $derived<"ascending" | "descending" | "none">(
+		direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
+	);
 
-function handleKeydown(e: KeyboardEvent) {
-	if (e.key === "Enter" || e.key === " ") {
-		e.preventDefault();
-		onSort(key);
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onSort(key);
+		}
 	}
-}
 </script>
 
 <th

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

@@ -1,43 +1,38 @@
 <script lang="ts">
-// ========================= IMPORTS
-import { Skeleton } from "../../shadcn/skeleton/index.js";
+	// ========================= IMPORTS
+	import { Skeleton } from "../../shadcn/skeleton/index.js";
 
-// ========================= TYPES
-type ColumnDef = {
-	width?: string;
-	align?: "left" | "center" | "right";
-	/** Show a small circle before the skeleton bar (e.g. logo/avatar column) */
-	circle?: boolean;
-};
+	// ========================= TYPES
+	type ColumnDef = {
+		width?: string;
+		align?: "left" | "center" | "right";
+		/** Show a small circle before the skeleton bar (e.g. logo/avatar column) */
+		circle?: boolean;
+	};
 
-interface Props {
-	/** Number of skeleton rows to render */
-	rows?: number;
-	/** Column definitions control skeleton widths and alignment */
-	columns?: ColumnDef[];
-	/** Simple mode: just specify column count */
-	columnCount?: number;
-	class?: string;
-};
+	interface Props {
+		/** Number of skeleton rows to render */
+		rows?: number;
+		/** Column definitions control skeleton widths and alignment */
+		columns?: ColumnDef[];
+		/** Simple mode: just specify column count */
+		columnCount?: number;
+		class?: string;
+	}
 
-// ========================= PROPS
-let {
-	rows = 5,
-	columns,
-	columnCount = 6,
-	class: className,
-}: Props = $props();
+	// ========================= PROPS
+	let { rows = 5, columns, columnCount = 6, class: className }: Props = $props();
 
-// ========================= DERIVED
-let cols = $derived(
-	columns ??
-		Array.from<unknown, ColumnDef>({ length: columnCount }, () => ({
-			width: undefined,
-			align: "left" as const,
-		})),
-);
+	// ========================= DERIVED
+	let cols = $derived(
+		columns ??
+			Array.from<unknown, ColumnDef>({ length: columnCount }, () => ({
+				width: undefined,
+				align: "left" as const,
+			})),
+	);
 
-const WIDTHS = ["w-24", "w-20", "w-28", "w-16", "w-32", "w-20"];
+	const WIDTHS = ["w-24", "w-20", "w-28", "w-16", "w-32", "w-20"];
 </script>
 
 <!-- =========================== -->
@@ -53,9 +48,19 @@ const WIDTHS = ["w-24", "w-20", "w-28", "w-16", "w-32", "w-20"];
 			{#each cols as col, colIdx (colIdx)}
 				<td
 					data-slot="table-cell"
-					class="h-11 px-2 {col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : ''}"
+					class="h-11 px-2 {col.align === 'center'
+						? 'text-center'
+						: col.align === 'right'
+							? 'text-right'
+							: ''}"
 				>
-					<div class="flex items-center gap-2 {col.align === 'center' ? 'justify-center' : col.align === 'right' ? 'justify-end' : ''}">
+					<div
+						class="flex items-center gap-2 {col.align === 'center'
+							? 'justify-center'
+							: col.align === 'right'
+								? 'justify-end'
+								: ''}"
+					>
 						{#if col.circle}
 							<Skeleton class="size-6 shrink-0 rounded-md" />
 						{/if}

package/src/components/docs/doc-page.svelte

@@ -81,17 +81,17 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<!-- The anatomy, once: header, then the reading column with its contents rail.
-     A surface supplies content and never lays this out, so two pages can't
-     arrive with different layouts. The pane is its own container, since the
-     room left after the map is what decides the rail, not the window. -->
+<!-- The one anatomy every doc page shares; the pane is its own container, since
+     the room left after the map, not the window, decides the rail. -->
 <div
 	bind:this={scroller}
 	class="doc-page @container/page thin-scrollbar relative min-h-0 flex-1 overflow-y-auto"
 >
 	{#if hasRail}
 		<!-- Below the rail's width the contents sit on a strip that stays put. -->
-		<div class="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur @3xl/page:hidden">
+		<div
+			class="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur @3xl/page:hidden"
+		>
 			<OnThisPage
 				variant="bar"
 				items={headings}
@@ -124,14 +124,21 @@
 							{title}
 						</h1>
 						{#if summary}
-							<p class="mt-1.5 max-w-[60ch] text-[15px] leading-relaxed text-muted-foreground text-pretty">
+							<p
+								class="mt-1.5 max-w-[60ch] text-[15px] leading-relaxed text-muted-foreground text-pretty"
+							>
 								{summary}
 							</p>
 						{/if}
 						{#if meta.length > 0}
-							<p class="mt-3 flex flex-wrap items-center gap-x-2 text-xs tabular-nums text-muted-foreground">
+							<p
+								class="mt-3 flex flex-wrap items-center gap-x-2 text-xs tabular-nums text-muted-foreground"
+							>
 								{#each meta as item, i (item)}
-									{#if i > 0}<span aria-hidden="true" class="size-0.5 rounded-full bg-current opacity-50"></span>{/if}
+									{#if i > 0}<span
+											aria-hidden="true"
+											class="size-0.5 rounded-full bg-current opacity-50"
+										></span>{/if}
 									<span>{item}</span>
 								{/each}
 							</p>
@@ -148,7 +155,9 @@
 
 		{#if hasRail}
 			<!-- `self-start`, since a sticky child only travels inside its own box. -->
-			<aside class="hidden w-48 shrink-0 self-start pt-10 @3xl/page:sticky @3xl/page:top-0 @3xl/page:block">
+			<aside
+				class="hidden w-48 shrink-0 self-start pt-10 @3xl/page:sticky @3xl/page:top-0 @3xl/page:block"
+			>
 				<OnThisPage
 					items={headings}
 					active={spy.active}

package/src/components/docs/on-this-page.svelte

@@ -42,8 +42,15 @@
 	// =========================
 	// DERIVED
 	// =========================
-	let activeIndex = $derived(Math.max(0, items.findIndex((item) => item.id === active)));
-	let activeLabel = $derived(items.find((item) => item.id === active)?.label ?? items[0]?.label ?? "");
+	let activeIndex = $derived(
+		Math.max(
+			0,
+			items.findIndex((item) => item.id === active),
+		),
+	);
+	let activeLabel = $derived(
+		items.find((item) => item.id === active)?.label ?? items[0]?.label ?? "",
+	);
 	// How far through the document: the bar's hairline, and the number a reader
 	// reads at a glance.
 	let progress = $derived(items.length > 1 ? activeIndex / (items.length - 1) : 0);
@@ -205,7 +212,13 @@
 
 	/* A long list fades into its edges instead of ending on a hard cut. */
 	.otp-fade {
-		mask-image: linear-gradient(to bottom, transparent, #000 0.5rem, #000 calc(100% - 1.5rem), transparent);
+		mask-image: linear-gradient(
+			to bottom,
+			transparent,
+			#000 0.5rem,
+			#000 calc(100% - 1.5rem),
+			transparent
+		);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/src/components/docs/scroll-spy.svelte.ts

@@ -6,9 +6,8 @@
 export type DocHeading = { id: string; label: string };
 
 /**
- * Where a heading sits inside the scroller, in scroller content coordinates.
- * The default reads the live DOM by id. A framed document supplies its own,
- * since its headings live in another document.
+ * A heading's offset in scroller coordinates. A framed document must supply its own, since
+ * its headings live in another document.
  */
 export type LocateHeading = (id: string) => number | null;
 

package/src/components/field-row/field-row.svelte

@@ -25,7 +25,15 @@
 	// =========================
 	// PROPS
 	// =========================
-	let { label, for: htmlFor, description, error, class: className, children, action }: Props = $props();
+	let {
+		label,
+		for: htmlFor,
+		description,
+		error,
+		class: className,
+		children,
+		action,
+	}: Props = $props();
 </script>
 
 <!-- =========================== -->
@@ -35,13 +43,7 @@
 <!-- WHY the coarse-pointer height: Button grows to 44px on touch and Input
      does not, so a row built from the two drew a 12px step. -->
 <!-- =========================== -->
-<Field.Simple
-	{label}
-	{description}
-	{error}
-	for={htmlFor}
-	class={cn("max-w-xl", className)}
->
+<Field.Simple {label} {description} {error} for={htmlFor} class={cn("max-w-xl", className)}>
 	<div
 		class="flex items-start gap-2 any-pointer-coarse:[&_[data-slot=input]]:h-11"
 		data-slot="field-row"

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

@@ -183,7 +183,11 @@
 		width: 2px;
 		margin-left: -2px;
 		opacity: 0;
-		background: color-mix(in oklch, var(--color-destructive-foreground) 65%, var(--color-destructive));
+		background: color-mix(
+			in oklch,
+			var(--color-destructive-foreground) 65%,
+			var(--color-destructive)
+		);
 		box-shadow: 0 0 4px 0 color-mix(in oklch, var(--color-destructive) 92%, transparent);
 		transition:
 			left var(--duration-quick) var(--ease-smooth-out),

package/src/components/icon/icon.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	icon: PhosphorIcon;
-	size?: number;
-	class?: string;
-	weight?: IconWeight;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		icon: PhosphorIcon;
+		size?: number;
+		class?: string;
+		weight?: IconWeight;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { icon: IconComp, size = 24, class: className = "", weight }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { icon: IconComp, size = 24, class: className = "", weight }: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/components/language-flag/language-flag.svelte

@@ -56,5 +56,7 @@
 		{/if}
 	</span>
 {:else if showLabel}
-	<span class={cn("text-xs font-medium uppercase text-muted-foreground", className)}>{language}</span>
+	<span class={cn("text-xs font-medium uppercase text-muted-foreground", className)}
+		>{language}</span
+	>
 {/if}

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

@@ -1,40 +1,40 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import EmptyState from "./empty-state.svelte";
-import { cn } from "../../lib/utils.js";
-import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import EmptyState from "./empty-state.svelte";
+	import { cn } from "../../lib/utils.js";
+	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-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;
-	iconWeight?: IconWeight;
-	title: string;
-	description?: string;
-	actionLabel?: string;
-	actionHref?: string;
-	onAction?: () => void;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	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;
+		iconWeight?: IconWeight;
+		title: string;
+		description?: string;
+		actionLabel?: string;
+		actionHref?: string;
+		onAction?: () => void;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	icon,
-	iconWeight,
-	title,
-	description,
-	actionLabel,
-	actionHref,
-	onAction,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		icon,
+		iconWeight,
+		title,
+		description,
+		actionLabel,
+		actionHref,
+		onAction,
+		class: className,
+	}: Props = $props();
 </script>
 
 <!-- =========================== -->

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

@@ -1,52 +1,61 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-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;
-	// The state chip beside the title.
-	badge?: Snippet;
-	// A picture ahead of the title, like a video frame or a deck cover. Some
-	// records aren't recognisable from their title alone.
-	leading?: Snippet;
-	// Facts about the record, rendered as one dot-separated line under the
-	// title. Falsy entries drop out, so a caller can inline its conditionals.
-	meta?: Array<string | null | undefined | false>;
-	// A sentence under the meta line, when the record explains itself.
-	note?: string | null;
-	// What you can do to the record. Pinned right of the identity block, EXCEPT
-	// when a picture leads: see the note in the markup.
-	actions?: Snippet;
-	// The top-right control, a record's way out. Pass `undefined` when empty:
-	// an empty snippet is still truthy and reserves the corner.
-	corner?: Snippet;
-	// Hairline-separated rows below the identity block. Use `DetailRow`.
-	children?: Snippet;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	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;
+		// The state chip beside the title.
+		badge?: Snippet;
+		// A picture ahead of the title, like a video frame or a deck cover. Some
+		// records aren't recognisable from their title alone.
+		leading?: Snippet;
+		// Facts about the record, rendered as one dot-separated line under the
+		// title. Falsy entries drop out, so a caller can inline its conditionals.
+		meta?: Array<string | null | undefined | false>;
+		// A sentence under the meta line, when the record explains itself.
+		note?: string | null;
+		// What you can do to the record. Pinned right of the identity block, EXCEPT
+		// when a picture leads: see the note in the markup.
+		actions?: Snippet;
+		// The top-right control, a record's way out. Pass `undefined` when empty:
+		// an empty snippet is still truthy and reserves the corner.
+		corner?: Snippet;
+		// Hairline-separated rows below the identity block. Use `DetailRow`.
+		children?: Snippet;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { title, badge, leading, meta, note, actions, corner, children, class: className }: Props =
-	$props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		title,
+		badge,
+		leading,
+		meta,
+		note,
+		actions,
+		corner,
+		children,
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let facts = $derived((meta ?? []).filter((item): item is string => Boolean(item)));
-// Actions stack under the meta when something else claims the right edge:
-// a picture, or the corner. Pinned beside a corner, they left the title
-// a third of the row.
-let stackActions = $derived(Boolean(leading || corner));
+	// =========================
+	// DERIVED
+	// =========================
+	let facts = $derived((meta ?? []).filter((item): item is string => Boolean(item)));
+	// Actions stack under the meta when something else claims the right edge:
+	// a picture, or the corner. Pinned beside a corner, they left the title
+	// a third of the row.
+	let stackActions = $derived(Boolean(leading || corner));
 </script>
 
 <!-- =========================== -->
@@ -69,8 +78,7 @@ let stackActions = $derived(Boolean(leading || corner));
 			<!-- No text-balance: it evens the lines out, so a two-line title stopped
 			     short of the corner instead of running the full width. -->
 			<h2 class="min-w-0 font-heading text-lg font-semibold leading-snug tracking-tight">
-				{title}{#if badge}<span class="ms-2 inline-flex align-middle">{@render badge()}</span
-					>{/if}
+				{title}{#if badge}<span class="ms-2 inline-flex align-middle">{@render badge()}</span>{/if}
 			</h2>
 			{#if facts.length > 0}
 				<!-- Each dot hangs off the fact it leads, so a wrapped line's dot stays