@heyramzi/ui 7.0.0 → 8.0.0

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

@@ -0,0 +1,232 @@
+<script lang="ts">
+	// ========================= IMPORTS
+	import { cn } from "@heyramzi/utils";
+	import { buttonVariants, type ButtonSize, type ButtonVariant } from "../../shadcn/button/index.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	// ========================= TYPES
+	type Props = {
+		duration?: number;
+		onConfirm: () => void;
+		disabled?: boolean;
+		/** Uses the button recipe so call sites stop drawing their own.
+		 *  `variant: null` opts out, for a caller that really is a menu row. */
+		variant?: ButtonVariant | null;
+		size?: ButtonSize;
+		/** Square, for a glyph with no label. Mirrors `Button`. */
+		icon?: boolean;
+		class?: string;
+		idle: Snippet;
+		holding: Snippet;
+	} & HTMLButtonAttributes;
+
+	// ========================= PROPS
+	let {
+		duration = 800,
+		onConfirm,
+		disabled = false,
+		variant = "destructive",
+		size = "default",
+		icon = false,
+		class: className = "",
+		idle,
+		holding,
+		...restProps
+	}: Props = $props();
+
+	// ========================= STATE
+	let progress = $state(0);
+	let isHolding = $state(false);
+	let rafId: number | null = $state(null);
+	let startTime: number | null = $state(null);
+
+	// ========================= FUNCTIONS
+	function startHold() {
+		if (disabled) return;
+		isHolding = true;
+		startTime = performance.now();
+		tick();
+	}
+
+	function tick() {
+		if (!isHolding || !startTime) return;
+
+		const elapsed = performance.now() - startTime;
+		progress = Math.min(elapsed / duration, 1);
+
+		if (progress >= 1) {
+			complete();
+			return;
+		}
+
+		rafId = requestAnimationFrame(tick);
+	}
+
+	function cancelHold() {
+		if (!isHolding) return;
+		isHolding = false;
+		startTime = null;
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+		// WHY: dropping is-holding lets the fill retract via the CSS transition below
+		progress = 0;
+	}
+
+	function complete() {
+		isHolding = false;
+		startTime = null;
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+		onConfirm();
+		// Reset after confirm fires
+		progress = 0;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			startHold();
+		}
+	}
+
+	function handleKeyup(e: KeyboardEvent) {
+		if (e.key === " " || e.key === "Enter") {
+			cancelHold();
+		}
+	}
+</script>
+
+<!-- ========================= MARKUP -->
+<button
+	{...restProps}
+	type="button"
+	class={cn(
+		// Callers size this at about 22px. On touch, a hold needs a box the finger
+		// can stay inside for the whole press without cancelling it.
+		"hold-to-confirm relative overflow-hidden select-none",
+		"any-pointer-coarse:inline-flex any-pointer-coarse:min-h-10 any-pointer-coarse:min-w-10 any-pointer-coarse:items-center any-pointer-coarse:justify-center",
+		variant && buttonVariants({ variant, size, icon }),
+		disabled && "pointer-events-none opacity-50",
+		className,
+	)}
+	style="--progress: {progress}"
+	data-holding={isHolding}
+	onpointerdown={startHold}
+	onpointerup={cancelHold}
+	onpointerleave={cancelHold}
+	onpointercancel={cancelHold}
+	onkeydown={handleKeydown}
+	onkeyup={handleKeyup}
+	{disabled}
+>
+	<!-- Fill sweep: scales from the left across the whole control -->
+	<span
+		class="hold-to-confirm-fill pointer-events-none absolute inset-0 z-0 origin-left bg-destructive"
+		class:is-holding={isHolding}
+	></span>
+
+	<!-- Leading edge: a bright sliver that rides the head of the fill -->
+	<span
+		class="hold-to-confirm-edge pointer-events-none absolute inset-y-0 z-0"
+		class:is-holding={isHolding}
+	></span>
+
+	<!-- Content -->
+	<span class="relative z-[1] flex items-center gap-1.5">
+		{#if isHolding}
+			<span class="hold-to-confirm-text flex items-center gap-1.5 text-destructive-foreground">
+				{@render holding()}
+			</span>
+		{:else}
+			<span class="hold-to-confirm-text flex items-center gap-1.5">
+				{@render idle()}
+			</span>
+		{/if}
+	</span>
+</button>
+
+<!-- ========================= STYLE -->
+<style>
+	.hold-to-confirm {
+		touch-action: none;
+	}
+
+	.hold-to-confirm:active:not(:disabled) {
+		transform: scale(0.97);
+	}
+
+	/* Fill: GPU-friendly scaleX. A vertical sheen survives the horizontal
+	   scale because it runs top-to-bottom, so the wipe keeps a crisp surface. */
+	.hold-to-confirm-fill {
+		transform: scaleX(var(--progress, 0));
+		background-image: linear-gradient(
+			to bottom,
+			color-mix(in oklch, var(--color-destructive-foreground) 14%, transparent),
+			transparent 55%
+		);
+		transition: transform var(--duration-quick) var(--ease-smooth-out);
+	}
+
+	.hold-to-confirm-fill.is-holding {
+		transition: none;
+	}
+
+	/* Leading edge: positioned (not scaled) so its glow stays crisp at any
+	   width. Sits exactly at the head of the fill and fades in while held. */
+	.hold-to-confirm-edge {
+		left: calc(var(--progress, 0) * 100%);
+		width: 2px;
+		margin-left: -2px;
+		opacity: 0;
+		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),
+			opacity var(--duration-quick) var(--ease-out);
+	}
+
+	.hold-to-confirm-edge.is-holding {
+		opacity: 1;
+		transition: opacity var(--duration-quick) var(--ease-out);
+	}
+
+	.hold-to-confirm-text {
+		animation: holdTextFadeIn var(--duration-quick) var(--ease-out);
+	}
+
+	@keyframes holdTextFadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hold-to-confirm:active:not(:disabled) {
+			transform: none;
+		}
+
+		.hold-to-confirm-fill {
+			transition: none;
+			transform: scaleX(var(--progress, 0));
+			background-image: none;
+			opacity: 0.5;
+		}
+
+		.hold-to-confirm-edge {
+			transition: none;
+			box-shadow: none;
+		}
+
+		.hold-to-confirm-text {
+			animation: none;
+		}
+	}
+</style>

package/src/components/hold-to-confirm/index.ts

@@ -0,0 +1 @@
+export { default as HoldToConfirm } from "./hold-to-confirm.svelte";

package/src/components/icon/icon.svelte

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

package/src/components/icon/index.ts

@@ -0,0 +1 @@
+export { default as Icon } from "./icon.svelte";

package/src/components/language-flag/index.ts

@@ -0,0 +1 @@
+export { default as LanguageFlag } from "./language-flag.svelte";

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "@heyramzi/utils";
+
+	// =========================
+	// CONSTANTS
+	// =========================
+	// The host serves these files from /flags. Pass `flags` for another set or path.
+	const DEFAULT_FLAGS: Record<string, string> = {
+		en: "/flags/US.svg",
+		fr: "/flags/FR.svg",
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		language: string;
+		/** Language code to image URL. */
+		flags?: Record<string, string>;
+		size?: "sm" | "md";
+		showLabel?: boolean;
+		class?: string;
+	}
+
+	let {
+		language,
+		flags = DEFAULT_FLAGS,
+		size = "sm",
+		showLabel = false,
+		class: className,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let src = $derived(flags[language]);
+	let sizeClass = $derived(size === "md" ? "size-5" : "size-3.5");
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if src}
+	<span class={cn("inline-flex items-center gap-1.5", className)}>
+		<img
+			{src}
+			alt={language.toUpperCase()}
+			class={cn("shrink-0 rounded-sm", sizeClass)}
+			loading="lazy"
+		/>
+		{#if showLabel}
+			<span class="text-xs font-medium uppercase text-muted-foreground">{language}</span>
+		{/if}
+	</span>
+{:else if showLabel}
+	<span class={cn("text-xs font-medium uppercase text-muted-foreground", className)}>{language}</span>
+{/if}

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import EmptyState from "./empty-state.svelte";
+import { cn } from "@heyramzi/utils";
+import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+
+// =========================
+// TYPES
+// =========================
+type 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();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	class={cn(
+		"flex h-full items-center justify-center rounded-xl border-2 border-dashed border-border",
+		className,
+	)}
+>
+	<EmptyState {icon} {iconWeight} {title} {description} {actionLabel} {actionHref} {onAction} />
+</div>

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { cn } from "@heyramzi/utils";
+
+// =========================
+// TYPES
+// =========================
+type 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();
+
+// =========================
+// 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>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<section class={cn("overflow-hidden rounded-xl border border-border bg-card", className)}>
+	<div class="flex flex-wrap items-start justify-between gap-x-4 gap-y-3 p-4">
+		{#if leading}
+			<div class="shrink-0">{@render leading()}</div>
+		{/if}
+		<div class="min-w-0 flow-root flex-1 basis-64">
+			<!-- The corner floats, so only the lines beside it give way. Reserved
+			     across the whole row it took ~150px off every line and wrapped a
+			     normal title to three. -->
+			{#if corner}
+				<div class="float-end ms-3">{@render corner()}</div>
+			{/if}
+			<!-- The badge sits inline in the h2 so it trails the last word. As a
+			     flex sibling it wrapped to its own row on every two-line title. -->
+			<!-- 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}
+			</h2>
+			{#if facts.length > 0}
+				<!-- Each dot hangs off the fact it leads, so a wrapped line's dot stays
+				     in the gutter. A standalone flex-item dot dangled on the line above. -->
+				<div class="mt-1 overflow-hidden">
+					<p class="-ms-3 flex flex-wrap items-center text-sm text-muted-foreground">
+						{#each facts as fact, i (i)}
+							<span
+								class="relative ps-3 before:absolute before:start-1 before:opacity-40 before:content-['·']"
+								>{fact}</span
+							>
+						{/each}
+					</p>
+				</div>
+			{/if}
+			{#if note}
+				<p class="mt-1 text-sm text-muted-foreground">{note}</p>
+			{/if}
+			<!-- With a picture or a corner, actions sit in this column. Pinned right
+			     they wrapped under the picture and read like its caption. -->
+			{#if actions && stackActions}
+				<div class="clear-both flex flex-wrap items-center gap-2 pt-3">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+		{#if actions && !stackActions}
+			<div class="flex flex-wrap items-center gap-2">{@render actions()}</div>
+		{/if}
+	</div>
+	{#if children}
+		{@render children()}
+	{/if}
+</section>

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import SectionLabel from "./section-label.svelte";
+import { cn } from "@heyramzi/utils";
+import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+
+// =========================
+// TYPES
+// =========================
+type 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;
+	labelIcon?: PhosphorIcon;
+	// A mark the icon set does not carry (a platform logo), drawn ahead of the
+	// label at the same optical size.
+	labelLead?: Snippet;
+	// The right side of the header bar: a count, a hint, a button cluster.
+	actions?: Snippet;
+	// WHY: a panel whose body is a media grid or a full-bleed list supplies its
+	// own padding, so the shell must be able to step out of the way.
+	pad?: boolean;
+	// Takes the height the panels above it did not use, inside a `fill` stack.
+	// One panel per stack, and it is the one the reader works in.
+	grow?: boolean;
+	children: Snippet;
+	class?: string;
+	bodyClass?: string;
+};
+
+// =========================
+// PROPS
+// =========================
+let {
+	label,
+	labelIcon,
+	labelLead,
+	actions,
+	pad = true,
+	grow = false,
+	children,
+	class: className,
+	bodyClass,
+}: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let hasHeader = $derived(Boolean(label || labelLead || actions));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<section
+	class={cn(
+		panelShellClass,
+		grow && "flex min-h-0 flex-1 flex-col",
+		className,
+	)}
+>
+	{#if hasHeader}
+		<div
+			class={panelHeaderClass}
+		>
+			{#if label || labelLead}
+				<SectionLabel icon={labelIcon}>
+					{#if labelLead}
+						{@render labelLead()}
+					{/if}
+					{label}
+				</SectionLabel>
+			{:else}
+				<span></span>
+			{/if}
+			{#if actions}
+				<div class="flex min-w-0 flex-wrap items-center justify-end gap-2">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+	<div class={cn(pad && "p-4", grow && "flex min-h-0 flex-1 flex-col", bodyClass)}>
+		{@render children()}
+	</div>
+</section>

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { cn } from "@heyramzi/utils";
+
+// =========================
+// TYPES
+// =========================
+type Props = {
+	// A hairline band inside `DetailHeader` or `DetailPanel` for the record's
+	// own facts, so the page never nests cards inside cards.
+	muted?: boolean;
+	children: Snippet;
+	class?: string;
+};
+
+// =========================
+// PROPS
+// =========================
+let { muted = false, children, class: className }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	class={cn(
+		"border-t border-border px-4 py-3 text-sm leading-relaxed",
+		muted && "text-xs text-muted-foreground",
+		className,
+	)}
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { cn } from "@heyramzi/utils";
+
+// =========================
+// TYPES
+// =========================
+type Props = {
+	// A flat stack of panels at one gap. `xl:pr-1` keeps the top panel's
+	// corner clear of the shell's scrollbar.
+
+	// `fill` makes the stack at least as tall as its scroller, so a `grow`
+	// panel (like a writing box) takes the empty bottom third back.
+	fill?: boolean;
+	children: Snippet;
+	class?: string;
+};
+
+// =========================
+// PROPS
+// =========================
+let { fill = false, children, class: className }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class={cn("flex flex-col gap-4 xl:pr-1", fill && "min-h-full", className)}>
+	{@render children()}
+</div>