@heyramzi/ui 2.0.1 → 2.2.0

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

@@ -1,91 +1,94 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { setContext } from "svelte";
-import { CaretLeft } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import { MASTER_DETAIL_PANE, type MasterDetailPane } from "./queue-rail.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { setContext } from "svelte";
+	import { CaretLeft } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { Button } from "../../shadcn/button/index.js";
+	import {
+		MASTER_DETAIL_PANE,
+		type MasterDetailPane,
+	} from "./queue-rail.js";
 
-// =========================
-// TYPES
-// =========================
-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;
-	detail: Snippet;
-	// A full-width strip above both columns for facts to read before acting,
-	// like a posting cap. Pages wrapping the shell to add one broke the padding.
-	banner?: Snippet;
-	// WHY: a CSS grid track for the rail column ("16rem", "minmax(280px, 340px)").
-	// Queue pages pass `queueRailWidth` rather than a literal.
-	railWidth?: string;
-	// Stack to one column below this. "lg" because rail and detail can't both be
-	// read under 1024px. null only for a rail narrow enough for a phone.
-	stackBelow?: "lg" | "xl" | null;
-	// WHY: the phone back button says where it goes back to. "Back" alone is the
-	// browser's word and the reader has to remember what they left.
-	backLabel?: string;
-	// Bindable so a url naming a record opens on it after a refresh or a pasted
-	// link. The page sets it. Ignored above the stack breakpoint.
-	pane?: "rail" | "detail";
-	gap?: boolean;
-	pad?: boolean;
-	railClass?: string;
-	detailClass?: string;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	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;
+		detail: Snippet;
+		// A full-width strip above both columns for facts to read before acting,
+		// like a posting cap. Pages wrapping the shell to add one broke the padding.
+		banner?: Snippet;
+		// WHY: a CSS grid track for the rail column ("16rem", "minmax(280px, 340px)").
+		// Queue pages pass `queueRailWidth` rather than a literal.
+		railWidth?: string;
+		// Stack to one column below this. "lg" because rail and detail can't both be
+		// read under 1024px. null only for a rail narrow enough for a phone.
+		stackBelow?: "lg" | "xl" | null;
+		// WHY: the phone back button says where it goes back to. "Back" alone is the
+		// browser's word and the reader has to remember what they left.
+		backLabel?: string;
+		// Bindable so a url naming a record opens on it after a refresh or a pasted
+		// link. The page sets it. Ignored above the stack breakpoint.
+		pane?: "rail" | "detail";
+		gap?: boolean;
+		pad?: boolean;
+		railClass?: string;
+		detailClass?: string;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	rail,
-	detail,
-	banner,
-	railWidth = "minmax(260px, 320px)",
-	stackBelow = "lg",
-	backLabel = "Back to the list",
-	// The rail wins by default: an unpicked detail is an empty state or a
-	// guessed row, both worse than the list.
-	pane = $bindable("rail"),
-	gap = true,
-	pad = true,
-	railClass,
-	detailClass,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		rail,
+		detail,
+		banner,
+		railWidth = "minmax(260px, 320px)",
+		stackBelow = "lg",
+		backLabel = "Back to the list",
+		// The rail wins by default: an unpicked detail is an empty state or a
+		// guessed row, both worse than the list.
+		pane = $bindable("rail"),
+		gap = true,
+		pad = true,
+		railClass,
+		detailClass,
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-// One pane at a time when stacked. Two rows put a 34svh list scroller on top of
-// a record scroller, and neither was readable.
-let gridClass = $derived(
-	stackBelow === "xl"
-		? "grid-cols-1 grid-rows-[minmax(0,1fr)] xl:grid-rows-1 xl:[grid-template-columns:var(--md-cols)]"
-		: stackBelow === "lg"
-			? "grid-cols-1 grid-rows-[minmax(0,1fr)] lg:grid-rows-1 lg:[grid-template-columns:var(--md-cols)]"
-			: "[grid-template-columns:var(--md-cols)]",
-);
-// Hidden while stacked; back to normal above the breakpoint, where both panes show.
-let hideWhileStacked = $derived(stackBelow === "xl" ? "max-xl:hidden" : "max-lg:hidden");
-// Drawn only while stacked. The back bar has no job beside a visible rail.
-let stackedOnly = $derived(stackBelow === "xl" ? "xl:hidden" : "lg:hidden");
+	// =========================
+	// DERIVED
+	// =========================
+	// One pane at a time when stacked. Two rows put a 34svh list scroller on top of
+	// a record scroller, and neither was readable.
+	let gridClass = $derived(
+		stackBelow === "xl"
+			? "grid-cols-1 grid-rows-[minmax(0,1fr)] xl:grid-rows-1 xl:[grid-template-columns:var(--md-cols)]"
+			: stackBelow === "lg"
+				? "grid-cols-1 grid-rows-[minmax(0,1fr)] lg:grid-rows-1 lg:[grid-template-columns:var(--md-cols)]"
+				: "[grid-template-columns:var(--md-cols)]",
+	);
+	// Hidden while stacked; back to normal above the breakpoint, where both panes show.
+	let hideWhileStacked = $derived(stackBelow === "xl" ? "max-xl:hidden" : "max-lg:hidden");
+	// Drawn only while stacked. The back bar has no job beside a visible rail.
+	let stackedOnly = $derived(stackBelow === "xl" ? "xl:hidden" : "lg:hidden");
 
-// =========================
-// FUNCTIONS
-// =========================
-// `RailRow` calls this when a record is picked. Above the breakpoint the classes
-// that read `pane` are all prefixed away, so the flag changes nothing there.
-setContext<MasterDetailPane>(MASTER_DETAIL_PANE, {
-	open: () => {
-		if (stackBelow) pane = "detail";
-	},
-});
+	// =========================
+	// FUNCTIONS
+	// =========================
+	// `RailRow` calls this when a record is picked. Above the breakpoint the classes
+	// that read `pane` are all prefixed away, so the flag changes nothing there.
+	setContext<MasterDetailPane>(MASTER_DETAIL_PANE, {
+		open: () => {
+			if (stackBelow) pane = "detail";
+		},
+	});
 </script>
 
 <!-- =========================== -->
@@ -106,11 +109,7 @@ setContext<MasterDetailPane>(MASTER_DETAIL_PANE, {
 		data-stack={stackBelow ?? undefined}
 	>
 		<aside
-			class={cn(
-				"md-rail min-h-0",
-				railClass,
-				stackBelow && pane === "detail" && hideWhileStacked,
-			)}
+			class={cn("md-rail min-h-0", railClass, stackBelow && pane === "detail" && hideWhileStacked)}
 		>
 			{@render rail()}
 		</aside>

package/src/components/list-page/notice-bar.svelte

@@ -1,47 +1,47 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { Warning, Info, CheckCircle, WarningCircle } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { Alert } from "../../shadcn/alert/index.js";
-import { TONE_CLASS, type Tone as SeverityTone } from "../../lib/tone.js";
-import type { PhosphorIcon } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { Warning, Info, CheckCircle, WarningCircle } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { Alert } from "../../shadcn/alert/index.js";
+	import { TONE_CLASS, type Tone as SeverityTone } from "../../lib/tone.js";
+	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-// A strip that stops the reader is a severity. Neutral and accent are chip tones.
-type Tone = Extract<SeverityTone, "destructive" | "warning" | "info" | "success">;
+	// =========================
+	// TYPES
+	// =========================
+	// A strip that stops the reader is a severity. Neutral and accent are chip tones.
+	type Tone = Extract<SeverityTone, "destructive" | "warning" | "info" | "success">;
 
-interface Props {
-	// The "look at this before you act" strip. Hand-rolled ones used raw amber
-	// and sky, so one severity showed two colours one route apart.
-	tone?: Tone;
-	icon?: PhosphorIcon;
-	// The trailing control: a retry, a jump to the thing that needs fixing.
-	actions?: Snippet;
-	children: Snippet;
-	class?: string;
-}
+	interface Props {
+		// The "look at this before you act" strip. Hand-rolled ones used raw amber
+		// and sky, so one severity showed two colours one route apart.
+		tone?: Tone;
+		icon?: PhosphorIcon;
+		// The trailing control: a retry, a jump to the thing that needs fixing.
+		actions?: Snippet;
+		children: Snippet;
+		class?: string;
+	}
 
-const TONE_ICON: Record<Tone, PhosphorIcon> = {
-	destructive: Warning,
-	warning: WarningCircle,
-	info: Info,
-	success: CheckCircle,
-};
+	const TONE_ICON: Record<Tone, PhosphorIcon> = {
+		destructive: Warning,
+		warning: WarningCircle,
+		info: Info,
+		success: CheckCircle,
+	};
 
-// =========================
-// PROPS
-// =========================
-let { tone = "destructive", icon, actions, children, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { tone = "destructive", icon, actions, children, class: className }: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let Icon = $derived(icon ?? TONE_ICON[tone]);
+	// =========================
+	// DERIVED
+	// =========================
+	let Icon = $derived(icon ?? TONE_ICON[tone]);
 </script>
 
 <!-- =========================== -->

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

@@ -1,74 +1,74 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { CaretLeft, CaretRight } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import { stepTo } from "./step.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { CaretLeft, CaretRight } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { Button } from "../../shadcn/button/index.js";
+	import { stepTo } from "./step.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** Ids in the order the list shows them. */
-	ids: readonly string[];
-	current: string | null | undefined;
-	onselect: (id: string) => void;
-	previousLabel?: string;
-	nextLabel?: string;
-	/** Off when two steppers share a page, so one key press moves one list. */
-	keys?: boolean;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** Ids in the order the list shows them. */
+		ids: readonly string[];
+		current: string | null | undefined;
+		onselect: (id: string) => void;
+		previousLabel?: string;
+		nextLabel?: string;
+		/** Off when two steppers share a page, so one key press moves one list. */
+		keys?: boolean;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	ids,
-	current,
-	onselect,
-	previousLabel = "Previous",
-	nextLabel = "Next",
-	keys = true,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		ids,
+		current,
+		onselect,
+		previousLabel = "Previous",
+		nextLabel = "Next",
+		keys = true,
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let index = $derived(current ? ids.indexOf(current) : -1);
-let prev = $derived(stepTo(ids, current, -1));
-let next = $derived(stepTo(ids, current, 1));
+	// =========================
+	// DERIVED
+	// =========================
+	let index = $derived(current ? ids.indexOf(current) : -1);
+	let prev = $derived(stepTo(ids, current, -1));
+	let next = $derived(stepTo(ids, current, 1));
 
-// =========================
-// HANDLERS
-// =========================
-function isTyping(event: KeyboardEvent): boolean {
-	const target = event.target as HTMLElement | null;
-	return Boolean(target?.closest("input, textarea, select, [contenteditable='true']"));
-}
+	// =========================
+	// HANDLERS
+	// =========================
+	function isTyping(event: KeyboardEvent): boolean {
+		const target = event.target as HTMLElement | null;
+		return Boolean(target?.closest("input, textarea, select, [contenteditable='true']"));
+	}
 
-function ignored(event: KeyboardEvent): boolean {
-	const modified = event.metaKey || event.ctrlKey || event.altKey;
-	return !keys || modified || event.defaultPrevented || isTyping(event);
-}
+	function ignored(event: KeyboardEvent): boolean {
+		const modified = event.metaKey || event.ctrlKey || event.altKey;
+		return !keys || modified || event.defaultPrevented || isTyping(event);
+	}
 
-// K and J, as in Gmail: the arrows already belong to slide viewers and text fields.
-function targetFor(key: string): string | null {
-	if (key === "k") return prev;
-	if (key === "j") return next;
-	return null;
-}
+	// K and J, as in Gmail: the arrows already belong to slide viewers and text fields.
+	function targetFor(key: string): string | null {
+		if (key === "k") return prev;
+		if (key === "j") return next;
+		return null;
+	}
 
-function onkeydown(event: KeyboardEvent) {
-	if (ignored(event)) return;
-	const id = targetFor(event.key);
-	if (!id) return;
-	event.preventDefault();
-	onselect(id);
-}
+	function onkeydown(event: KeyboardEvent) {
+		if (ignored(event)) return;
+		const id = targetFor(event.key);
+		if (!id) return;
+		event.preventDefault();
+		onselect(id);
+	}
 </script>
 
 <svelte:window {onkeydown} />

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

@@ -1,24 +1,24 @@
 <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 {
-	// 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;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	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;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { children, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { children, class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->

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

@@ -1,36 +1,29 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { cn } from "../../lib/utils.js";
-import * as Empty from "../../shadcn/empty/index.js";
-import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "../../lib/utils.js";
+	import * as Empty from "../../shadcn/empty/index.js";
+	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	// Not `EmptyState`, which has a 48px icon and an action. This says a filter
-	// came back empty, in one sentence that fits a 280px rail.
-	icon?: PhosphorIcon;
-	iconWeight?: IconWeight;
-	iconClass?: string;
-	title: string;
-	hint?: string;
-	class?: string;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		// Not `EmptyState`, which has a 48px icon and an action. This says a filter
+		// came back empty, in one sentence that fits a 280px rail.
+		icon?: PhosphorIcon;
+		iconWeight?: IconWeight;
+		iconClass?: string;
+		title: string;
+		hint?: string;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	icon: Icon,
-	iconWeight,
-	iconClass,
-	title,
-	hint,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { icon: Icon, iconWeight, iconClass, title, hint, class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->

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

@@ -1,30 +1,30 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import SectionLabel from "./section-label.svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import SectionLabel from "../section-header/section-label.svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-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;
-	// A low-emphasis control beside the label (compose, refresh).
-	action?: Snippet;
-	// The filter, the search, whatever narrows the list. Optional: a rail of four
-	// records has nothing to narrow, and an empty strip under the label is chrome.
-	children?: Snippet;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	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;
+		// A low-emphasis control beside the label (compose, refresh).
+		action?: Snippet;
+		// The filter, the search, whatever narrows the list. Optional: a rail of four
+		// records has nothing to narrow, and an empty strip under the label is chrome.
+		children?: Snippet;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { label, action, children, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { label, action, children, class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->