@heyramzi/ui 2.0.1 → 2.2.0

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

@@ -1,83 +1,86 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { getContext } from "svelte";
-import { cn } from "../../lib/utils.js";
-import { MASTER_DETAIL_PANE, type MasterDetailPane } from "./queue-rail.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { getContext } from "svelte";
+	import { cn } from "../../lib/utils.js";
+	import {
+		MASTER_DETAIL_PANE,
+		type MasterDetailPane,
+	} from "./queue-rail.js";
 
-// =========================
-// TYPES
-// =========================
-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;
-	selected?: boolean;
-	onclick: () => void;
-	// A thumbnail or avatar ahead of the title.
-	leading?: Snippet;
-	// The record's state, at the end of the preview line. Never beside the title,
-	// where it competes with the name.
-	trailing?: Snippet;
-	// One line of the record's own words, under the title.
-	preview?: string | null;
-	// Dot-separated facts under the preview. Falsy entries drop out.
-	meta?: Array<string | null | undefined | false>;
-	// Which fact gives up its width first. The others hold their full text, so
-	// a date or a count never truncates to nonsense.
-	metaTruncate?: "first" | "last";
-	// Icons that qualify the facts (a waiting reply, a removed comment).
-	metaTrail?: Snippet;
-	// Controls that appear on hover, over the row's top-right corner.
-	actions?: Snippet;
-	// Long records (thread titles) need two lines to be recognisable.
-	titleLines?: 1 | 2;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	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;
+		selected?: boolean;
+		onclick: () => void;
+		// A thumbnail or avatar ahead of the title.
+		leading?: Snippet;
+		// The record's state, at the end of the preview line. Never beside the title,
+		// where it competes with the name.
+		trailing?: Snippet;
+		// One line of the record's own words, under the title.
+		preview?: string | null;
+		// Dot-separated facts under the preview. Falsy entries drop out.
+		meta?: Array<string | null | undefined | false>;
+		// Which fact gives up its width first. The others hold their full text, so
+		// a date or a count never truncates to nonsense.
+		metaTruncate?: "first" | "last";
+		// Icons that qualify the facts (a waiting reply, a removed comment).
+		metaTrail?: Snippet;
+		// Controls that appear on hover, over the row's top-right corner.
+		actions?: Snippet;
+		// Long records (thread titles) need two lines to be recognisable.
+		titleLines?: 1 | 2;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	title,
-	selected = false,
-	onclick,
-	leading,
-	trailing,
-	preview,
-	meta,
-	metaTruncate = "first",
-	metaTrail,
-	actions,
-	titleLines = 1,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		title,
+		selected = false,
+		onclick,
+		leading,
+		trailing,
+		preview,
+		meta,
+		metaTruncate = "first",
+		metaTrail,
+		actions,
+		titleLines = 1,
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let facts = $derived((meta ?? []).filter((item): item is string => Boolean(item)));
+	// =========================
+	// DERIVED
+	// =========================
+	let facts = $derived((meta ?? []).filter((item): item is string => Boolean(item)));
 
-// =========================
-// FUNCTIONS
-// =========================
-// Picking a row moves a phone from list to record. `undefined` outside a
-// `MasterDetail`, where a rail is just a list.
-let row = $state<HTMLDivElement>();
+	// =========================
+	// FUNCTIONS
+	// =========================
+	// Picking a row moves a phone from list to record. `undefined` outside a
+	// `MasterDetail`, where a rail is just a list.
+	let row = $state<HTMLDivElement>();
 
-// A row picked from a link, a shortcut or the next arrow can sit below the fold.
-$effect(() => {
-	if (selected) row?.scrollIntoView({ block: "nearest" });
-});
+	// A row picked from a link, a shortcut or the next arrow can sit below the fold.
+	$effect(() => {
+		if (selected) row?.scrollIntoView({ block: "nearest" });
+	});
 
-let pane = getContext<MasterDetailPane | undefined>(MASTER_DETAIL_PANE);
+	let pane = getContext<MasterDetailPane | undefined>(MASTER_DETAIL_PANE);
 
-function select() {
-	onclick();
-	pane?.open();
-}
+	function select() {
+		onclick();
+		pane?.open();
+	}
 </script>
 
 <!-- =========================== -->
@@ -130,7 +133,8 @@ function select() {
 						<span class="truncate">{preview}</span>
 					{/if}
 					{#if trailing}
-						<span class="ml-auto flex shrink-0 items-center gap-1.5 pl-2">{@render trailing()}</span>
+						<span class="ml-auto flex shrink-0 items-center gap-1.5 pl-2">{@render trailing()}</span
+						>
 					{/if}
 				</span>
 			{/if}

package/src/components/list-page/section-host.ts

@@ -2,9 +2,8 @@ import { getContext, setContext } from "svelte";
 import type { SectionStrip } from "../segmented/section-runs.svelte";
 
 /**
- * What an app shell gives a list page so the page's toolbar can draw the
- * section strip. `strip` must be reactive (a `$state` field), and `claim` tells
- * the shell a toolbar is drawing it and returns the release.
+ * What an app shell gives a list page's toolbar to draw the section strip; `strip` must be
+ * reactive (a `$state` field), and `claim` returns the release.
  */
 export interface SectionHost {
   readonly strip: SectionStrip | null;

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

@@ -1,49 +1,49 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { SegmentedFilter, type TabDef } from "../segmented/index.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { SegmentedFilter, type TabDef } from "../segmented/index.js";
 
-// =========================
-// TYPES
-// =========================
-type LocaleOption = {
-	value: string;
-	label: string;
-	flag: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	type LocaleOption = {
+		value: string;
+		label: string;
+		flag: string;
+	};
 
-interface Props {
-	// Wraps `SegmentedFilter` so it shares one track with every other strip. It
-	// only adds each language's flag.
-	value: string;
-	onchange: (value: string) => void;
-	options?: LocaleOption[];
-	/** Names the control for a screen reader. Without it the group is two bare letters. */
-	ariaLabel?: string;
-	class?: string;
-};
+	interface Props {
+		// Wraps `SegmentedFilter` so it shares one track with every other strip. It
+		// only adds each language's flag.
+		value: string;
+		onchange: (value: string) => void;
+		options?: LocaleOption[];
+		/** Names the control for a screen reader. Without it the group is two bare letters. */
+		ariaLabel?: string;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	value,
-	onchange,
-	options = [
-		{ value: "en", label: "EN", flag: "/flags/US.svg" },
-		{ value: "fr", label: "FR", flag: "/flags/FR.svg" },
-	],
-	ariaLabel = "Language",
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		value,
+		onchange,
+		options = [
+			{ value: "en", label: "EN", flag: "/flags/US.svg" },
+			{ value: "fr", label: "FR", flag: "/flags/FR.svg" },
+		],
+		ariaLabel = "Language",
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let segments = $derived<TabDef<string>[]>(
-	options.map((option) => ({ value: option.value, label: option.label, image: option.flag })),
-);
+	// =========================
+	// DERIVED
+	// =========================
+	let segments = $derived<TabDef<string>[]>(
+		options.map((option) => ({ value: option.value, label: option.label, image: option.flag })),
+	);
 </script>
 
 <!-- =========================== -->

package/src/components/mark/mark.svelte

@@ -1,42 +1,42 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
+	// =========================
+	// TYPES
+	// =========================
 
-/**
- * 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.
- */
-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. */
-	label: string;
-	/** `circle` crops a photograph to a disc, `square` fits a logo whole. */
-	shape?: "square" | "circle";
-	class?: string;
-};
+	/**
+	 * 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.
+	 */
+	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. */
+		label: string;
+		/** `circle` crops a photograph to a disc, `square` fits a logo whole. */
+		shape?: "square" | "circle";
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { src, label, shape = "square", class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { src, label, shape = "square", class: className }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-/** The src that failed, so a later one gets its own chance to load. */
-let broken = $state("");
+	// =========================
+	// STATE
+	// =========================
+	/** The src that failed, so a later one gets its own chance to load. */
+	let broken = $state("");
 
-// =========================
-// DERIVED
-// =========================
-let round = $derived(shape === "circle");
+	// =========================
+	// DERIVED
+	// =========================
+	let round = $derived(shape === "circle");
 </script>
 
 <!-- =========================== -->
@@ -50,11 +50,7 @@ let round = $derived(shape === "circle");
 		alt=""
 		loading="lazy"
 		referrerpolicy="no-referrer"
-		class={cn(
-			"size-4 shrink-0",
-			round ? "rounded-full object-cover" : "object-contain",
-			className,
-		)}
+		class={cn("size-4 shrink-0", round ? "rounded-full object-cover" : "object-contain", className)}
 		onerror={() => (broken = src)}
 	/>
 {:else}

package/src/components/open-in/index.ts

@@ -1,6 +1,2 @@
 export { default as OpenIn } from "./open-in.svelte";
-export type {
-  OpenInSize,
-  OpenInTool,
-  OpenInVariant,
-} from "./open-in.svelte";
+export type { OpenInSize, OpenInTool, OpenInVariant } from "./open-in.svelte";

package/src/components/open-in/open-in.svelte

@@ -20,49 +20,49 @@
 </script>
 
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { ArrowSquareOut } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { buttonVariants } from "../../shadcn/button/index.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { ArrowSquareOut } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../../shadcn/button/index.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** The tool to link to: its name, accessible sentence and mark. */
-	tool: OpenInTool;
-	href: string;
-	variant?: OpenInVariant;
-	size?: OpenInSize;
-	/** Overrides the visible text. The accessible name is `title`, never this. */
-	label?: string;
-	/** The accessible sentence, translated by the caller. */
-	title?: string;
-	class?: string;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** The tool to link to: its name, accessible sentence and mark. */
+		tool: OpenInTool;
+		href: string;
+		variant?: OpenInVariant;
+		size?: OpenInSize;
+		/** Overrides the visible text. The accessible name is `title`, never this. */
+		label?: string;
+		/** The accessible sentence, translated by the caller. */
+		title?: string;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	tool,
-	href,
-	variant = "chip",
-	size = "default",
-	label,
-	title,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		tool,
+		href,
+		variant = "chip",
+		size = "default",
+		label,
+		title,
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let Icon = $derived(tool.icon);
-let iconSize = $derived(size === "sm" ? 12 : 14);
-let action = $derived(title ?? tool.action);
-let text = $derived(label ?? tool.name);
+	// =========================
+	// DERIVED
+	// =========================
+	let Icon = $derived(tool.icon);
+	let iconSize = $derived(size === "sm" ? 12 : 14);
+	let action = $derived(title ?? tool.action);
+	let text = $derived(label ?? tool.name);
 </script>
 
 <!-- =========================== -->

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

@@ -1,57 +1,57 @@
 <script lang="ts" generics="V extends string">
-// =========================
-// IMPORTS
-// =========================
-import { CaretDown } from "phosphor-svelte";
-import { Mark } from "../mark/index.js";
-import { cn } from "../../lib/utils.js";
-import Picker from "./picker.svelte";
-import { pickerTriggerClass } from "./trigger.js";
-import type { PickerOption } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { CaretDown } from "phosphor-svelte";
+	import { Mark } from "../mark/index.js";
+	import { cn } from "../../lib/utils.js";
+	import Picker from "./picker.svelte";
+	import { pickerTriggerClass } from "./trigger.js";
+	import type { PickerOption } from "./types.js";
 
-// =========================
-// TYPES
-// =========================
+	// =========================
+	// TYPES
+	// =========================
 
-/**
- * The picker for named things carrying a mark: a kit, a channel, a client. It
- * wraps `Picker` because the kit strip and the channel row wrote the same two
- * snippets.
- */
-interface Props {
-	options: PickerOption<V>[];
-	value: V | null;
-	onSelect: (value: V) => void;
-	ariaLabel: string;
-	/** Said by the trigger when nothing in the list is the current value. */
-	placeholder?: string;
-	/** The search field's own prompt, on a list long enough to show one. */
-	searchPlaceholder?: string;
-	/** `circle` for a face or an avatar, `square` for a logo. */
-	shape?: "square" | "circle";
-	width?: "sm" | "default" | "lg";
-	class?: string;
-};
+	/**
+	 * The picker for named things carrying a mark: a kit, a channel, a client. It
+	 * wraps `Picker` because the kit strip and the channel row wrote the same two
+	 * snippets.
+	 */
+	interface Props {
+		options: PickerOption<V>[];
+		value: V | null;
+		onSelect: (value: V) => void;
+		ariaLabel: string;
+		/** Said by the trigger when nothing in the list is the current value. */
+		placeholder?: string;
+		/** The search field's own prompt, on a list long enough to show one. */
+		searchPlaceholder?: string;
+		/** `circle` for a face or an avatar, `square` for a logo. */
+		shape?: "square" | "circle";
+		width?: "sm" | "default" | "lg";
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	options,
-	value,
-	onSelect,
-	ariaLabel,
-	placeholder = "Select",
-	searchPlaceholder = "Search",
-	shape = "square",
-	width = "lg",
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		options,
+		value,
+		onSelect,
+		ariaLabel,
+		placeholder = "Select",
+		searchPlaceholder = "Search",
+		shape = "square",
+		width = "lg",
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let selected = $derived(options.find((option) => option.value === value));
+	// =========================
+	// DERIVED
+	// =========================
+	let selected = $derived(options.find((option) => option.value === value));
 </script>
 
 <!-- =========================== -->

package/src/components/picker/picker.svelte

@@ -43,7 +43,7 @@
 		/** `sm` fits a word, `default` a name, `lg` a name and a date. */
 		width?: "sm" | "default" | "lg";
 		disabled?: boolean;
-	};
+	}
 
 	let {
 		options,
@@ -61,7 +61,7 @@
 		open = $bindable(false),
 		align = "start",
 		width = "default",
-		disabled = false
+		disabled = false,
 	}: Props = $props();
 
 	let resolved = $derived<PickerGroup<V>[]>(groups ?? [{ options: options ?? [] }]);
@@ -126,7 +126,9 @@
 									{option.label}
 								</span>
 								{#if option.hint}
-									<span class="text-muted-foreground shrink-0 text-xs tabular-nums">{option.hint}</span>
+									<span class="text-muted-foreground shrink-0 text-xs tabular-nums"
+										>{option.hint}</span
+									>
 								{/if}
 							</Command.Item>
 						{/each}

package/src/components/section-header/index.ts

@@ -1 +1,2 @@
 export { default as SectionHeader } from "./section-header.svelte";
+export { default as SectionLabel } from "./section-label.svelte";

package/src/components/section-header/section-header.svelte

@@ -3,7 +3,7 @@
 	// IMPORTS
 	// =========================
 	import type { Snippet } from "svelte";
-	import SectionLabel from "../list-page/section-label.svelte";
+	import SectionLabel from "./section-label.svelte";
 
 	// =========================
 	// TYPES

package/src/components/section-header/section-header.test.ts

@@ -7,7 +7,13 @@ function render(props: Record<string, unknown>) {
   document.body.appendChild(target);
   const app = mount(SectionHeader, { target, props: { title: "Lines", ...props } });
   flushSync();
-  return { target, done: () => { void unmount(app); target.remove(); } };
+  return {
+    target,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
 }
 
 describe("SectionHeader", () => {