@wells-nelson/interactions 0.0.0-stage → 1.0.0

package/dist/CollapsibleSection.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type Snippet } from 'svelte';
+import { type DragData, type DropZoneOptions } from './dnd.js';
+type $$ComponentProps = {
+    title: string;
+    count: number;
+    countLabel?: (count: number) => string;
+    collapsed: boolean;
+    ontogglecollapse: () => void;
+    /** Opens the section's settings (pencil icon, right of the plus). */
+    onedit?: () => void;
+    editLabel?: string;
+    onadd?: () => void;
+    addLabel?: string;
+    /** Set to make the whole section long-press draggable (reordering sections). */
+    dragData?: DragData;
+    ondragstart?: () => void;
+    ondragend?: () => void;
+    /** Accept dropped rows. */
+    drop?: DropZoneOptions;
+    /** `subtle` gives the header a muted background (e.g. an "unallocated" bucket). */
+    variant?: 'default' | 'subtle';
+    /**
+     * `card` (default): a rounded card. `lines`: fills its container edge to edge with no card,
+     * so sections and rows read like lines on paper. The pinned header needs an opaque
+     * background: set `--section-header-bg` to whatever it sits on (default `--bg`).
+     */
+    appearance?: 'card' | 'lines';
+    /** The fixed app header, measured when scrolling a collapsed section back into view. */
+    appHeaderSelector?: string;
+    children: Snippet;
+};
+declare const CollapsibleSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type CollapsibleSection = ReturnType<typeof CollapsibleSection>;
+export default CollapsibleSection;

package/dist/Combobox.svelte

@@ -0,0 +1,201 @@
+<script lang="ts" module>
+	export type ComboChoice = { id: string } | { newName: string } | null;
+	export interface ComboOption {
+		id: string;
+		label: string;
+	}
+
+	export function sameName(a: string, b: string) {
+		return a.trim().toLocaleLowerCase() === b.trim().toLocaleLowerCase();
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * Dropdown with type-to-filter. Typing text that doesn't exactly match an option (ignoring
+	 * case and surrounding spaces) offers to create a new entry with that name.
+	 */
+	let {
+		label,
+		options,
+		choice = $bindable(null),
+		placeholder = 'Select or type to create…',
+		createLabel = 'Create',
+		error,
+		hideLabel = false
+	}: {
+		label: string;
+		options: ComboOption[];
+		choice?: ComboChoice;
+		placeholder?: string;
+		createLabel?: string;
+		error?: string | null;
+		hideLabel?: boolean;
+	} = $props();
+
+	const id = $props.id();
+	const listId = `${id}-list`;
+
+	function labelFor(c: ComboChoice) {
+		if (!c) return '';
+		if ('newName' in c) return c.newName;
+		return options.find((o) => o.id === c.id)?.label ?? '';
+	}
+
+	let text = $state(labelFor(choice));
+	let open = $state(false);
+	let highlighted = $state(0);
+	let filtering = $state(false);
+
+	const query = $derived(text.trim());
+	const filtered = $derived(
+		filtering && query
+			? options.filter((o) => o.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()))
+			: options
+	);
+	const exact = $derived(options.find((o) => sameName(o.label, query)));
+	const canCreate = $derived(query.length > 0 && !exact);
+	const rows = $derived<Array<{ kind: 'option'; option: ComboOption } | { kind: 'create' }>>([
+		...filtered.map((option) => ({ kind: 'option' as const, option })),
+		...(canCreate ? [{ kind: 'create' as const }] : [])
+	]);
+
+	function select(row: (typeof rows)[number]) {
+		if (row.kind === 'option') {
+			choice = { id: row.option.id };
+			text = row.option.label;
+		} else {
+			choice = { newName: query };
+			text = query;
+		}
+		open = false;
+		filtering = false;
+	}
+
+	function onInput() {
+		open = true;
+		filtering = true;
+		highlighted = 0;
+		// Keep the choice in step with what's typed.
+		choice = exact ? { id: exact.id } : query ? { newName: query } : null;
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			open = true;
+			highlighted = Math.min(highlighted + 1, rows.length - 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlighted = Math.max(highlighted - 1, 0);
+		} else if (e.key === 'Enter' && open && rows[highlighted]) {
+			e.preventDefault();
+			select(rows[highlighted]);
+		} else if (e.key === 'Escape' && open) {
+			e.preventDefault();
+			e.stopPropagation();
+			open = false;
+		}
+	}
+
+	let blurTimer: ReturnType<typeof setTimeout> | undefined;
+	// Don't let a pending blur timer run after the component is gone (e.g. its modal closed).
+	$effect(() => () => clearTimeout(blurTimer));
+
+	function onBlur() {
+		// Let a click on an option land before closing.
+		clearTimeout(blurTimer);
+		blurTimer = setTimeout(() => {
+			open = false;
+			filtering = false;
+			text = labelFor(choice);
+		}, 150);
+	}
+</script>
+
+<div class="combo">
+	<label for={id} class:visually-hidden={hideLabel}>{label}</label>
+	<input
+		{id}
+		type="text"
+		role="combobox"
+		autocomplete="off"
+		aria-expanded={open}
+		aria-controls={listId}
+		aria-autocomplete="list"
+		aria-invalid={error ? 'true' : undefined}
+		{placeholder}
+		bind:value={text}
+		oninput={onInput}
+		onfocus={() => (open = true)}
+		onclick={() => (open = true)}
+		onblur={onBlur}
+		onkeydown={onKeydown}
+	/>
+	{#if open && rows.length > 0}
+		<ul id={listId} role="listbox" class="options">
+			{#each rows as row, i (row.kind === 'option' ? row.option.id : '__create')}
+				<li
+					role="option"
+					aria-selected={i === highlighted}
+					class:highlighted={i === highlighted}
+					class:create={row.kind === 'create'}
+					onmousedown={(e) => {
+						e.preventDefault();
+						select(row);
+					}}
+					onmouseenter={() => (highlighted = i)}
+				>
+					{#if row.kind === 'option'}{row.option.label}{:else}{createLabel} “{query}”{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+	{#if error}<p class="error">{error}</p>{/if}
+</div>
+
+<style>
+	.combo {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+	label {
+		font-weight: 600;
+		font-size: 0.9rem;
+	}
+	.options {
+		position: absolute;
+		z-index: 20;
+		top: 100%;
+		left: 0;
+		right: 0;
+		margin: 0.25rem 0 0;
+		padding: 0.25rem;
+		list-style: none;
+		max-height: 14rem;
+		overflow-y: auto;
+		background: var(--surface);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--radius);
+		box-shadow: var(--shadow-lg);
+	}
+	li {
+		padding: 0.55rem 0.75rem;
+		border-radius: calc(var(--radius) - 2px);
+		cursor: pointer;
+	}
+	li.highlighted {
+		background: var(--surface-hover);
+	}
+	li.create {
+		color: var(--accent-text);
+		font-weight: 600;
+	}
+	.error {
+		margin: 0;
+		color: var(--danger);
+		font-size: 0.85rem;
+	}
+</style>

package/dist/Combobox.svelte.d.ts

@@ -0,0 +1,22 @@
+export type ComboChoice = {
+    id: string;
+} | {
+    newName: string;
+} | null;
+export interface ComboOption {
+    id: string;
+    label: string;
+}
+export declare function sameName(a: string, b: string): boolean;
+type $$ComponentProps = {
+    label: string;
+    options: ComboOption[];
+    choice?: ComboChoice;
+    placeholder?: string;
+    createLabel?: string;
+    error?: string | null;
+    hideLabel?: boolean;
+};
+declare const Combobox: import("svelte").Component<$$ComponentProps, {}, "choice">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/DevWipeButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { ConfirmDialog, IconButton } from '@wells-nelson/displays';
+
+	/**
+	 * Development-only "wipe everything" button (trash icon, danger color) with a confirmation.
+	 * Pair it with `wipeAllData`; render it only in dev builds.
+	 */
+	let {
+		onconfirm,
+		message = 'Development only: deletes every database and setting in this browser, signs you out here, and reloads so the app starts from scratch.\n\nNothing is deleted on the server.',
+		title = 'Wipe all data?',
+		label = 'Wipe all local data (dev only)',
+		confirmLabel = 'Wipe everything'
+	}: {
+		onconfirm: () => void | Promise<void>;
+		message?: string;
+		title?: string;
+		label?: string;
+		confirmLabel?: string;
+	} = $props();
+
+	let confirming = $state(false);
+</script>
+
+<span class="dev-wipe">
+	<IconButton icon="trash" {label} onclick={() => (confirming = true)} />
+</span>
+
+<ConfirmDialog bind:open={confirming} {title} {message} {confirmLabel} danger {onconfirm} />
+
+<style>
+	.dev-wipe {
+		display: inline-flex;
+		color: var(--danger);
+	}
+</style>

package/dist/DevWipeButton.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    onconfirm: () => void | Promise<void>;
+    message?: string;
+    title?: string;
+    label?: string;
+    confirmLabel?: string;
+};
+declare const DevWipeButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type DevWipeButton = ReturnType<typeof DevWipeButton>;
+export default DevWipeButton;

package/dist/SearchBar.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Icon, IconButton } from '@wells-nelson/displays';
+
+	let { value = $bindable(''), placeholder = 'Search', clearLabel = 'Clear search' }: { value?: string; placeholder?: string; clearLabel?: string } =
+		$props();
+</script>
+
+<div class="search-bar">
+	<div class="inner">
+		<Icon name="search" />
+		<input type="search" bind:value {placeholder} aria-label={placeholder} enterkeyhint="search" />
+		{#if value}
+			<IconButton icon="x" label={clearLabel} size={18} onclick={() => (value = '')} />
+		{/if}
+	</div>
+</div>
+<div class="spacer" aria-hidden="true"></div>
+
+<style>
+	.search-bar {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 40;
+		padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
+		background: linear-gradient(to top, var(--bg) 70%, transparent);
+	}
+	.inner {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		max-width: var(--content-w);
+		margin: 0 auto;
+		padding: 0 0.25rem 0 0.9rem;
+		background: var(--surface);
+		border: 1px solid var(--border-strong);
+		border-radius: 2rem;
+		box-shadow: var(--shadow);
+		color: var(--muted);
+	}
+	.inner:focus-within {
+		border-color: var(--accent);
+	}
+	input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		background: transparent;
+		padding: 0.7rem 0;
+		color: var(--text);
+		box-shadow: none !important;
+	}
+	input::-webkit-search-cancel-button {
+		display: none;
+	}
+	.spacer {
+		height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
+	}
+</style>

package/dist/SearchBar.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    clearLabel?: string;
+};
+declare const SearchBar: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;

package/dist/Segmented.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" generics="T extends string | number | boolean">
+	/** A row of mutually exclusive options (radio group styled as joined buttons). */
+	let {
+		label,
+		options,
+		value = $bindable(),
+		disabled = false,
+		onchange
+	}: {
+		label: string;
+		options: { value: T; label: string }[];
+		value: T;
+		disabled?: boolean;
+		onchange?: (value: T) => void;
+	} = $props();
+
+	const id = $props.id();
+</script>
+
+<fieldset class="segmented" {disabled}>
+	<legend>{label}</legend>
+	<div class="options">
+		{#each options as option, i (i)}
+			<label class:selected={option.value === value}>
+				<input
+					type="radio"
+					name={id}
+					checked={option.value === value}
+					onchange={() => {
+						value = option.value;
+						onchange?.(option.value);
+					}}
+				/>
+				{option.label}
+			</label>
+		{/each}
+	</div>
+</fieldset>
+
+<style>
+	.segmented {
+		border: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+	legend {
+		font-weight: 600;
+		font-size: 0.9rem;
+		padding: 0;
+		margin-bottom: 0.35rem;
+	}
+	.options {
+		display: flex;
+		border: 1px solid var(--border-strong);
+		border-radius: var(--radius);
+		overflow: hidden;
+	}
+	label {
+		position: relative;
+		flex: 1;
+		display: grid;
+		place-items: center;
+		min-height: 2.5rem;
+		padding: 0 0.5rem;
+		text-align: center;
+		cursor: pointer;
+		background: var(--surface);
+		font-weight: 500;
+	}
+	label + label {
+		border-left: 1px solid var(--border-strong);
+	}
+	label.selected {
+		background: var(--accent);
+		color: var(--on-accent);
+		font-weight: 700;
+	}
+	input {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		margin: 0;
+		cursor: pointer;
+	}
+	label:has(input:focus-visible) {
+		outline: 2px solid var(--accent);
+		outline-offset: -3px;
+	}
+	fieldset:disabled label {
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+</style>

package/dist/Segmented.svelte.d.ts

@@ -0,0 +1,33 @@
+declare function $$render<T extends string | number | boolean>(): {
+    props: {
+        label: string;
+        options: {
+            value: T;
+            label: string;
+        }[];
+        value: T;
+        disabled?: boolean;
+        onchange?: (value: T) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number | boolean> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number | boolean>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number | boolean>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Segmented: $$IsomorphicComponent;
+type Segmented<T extends string | number | boolean> = InstanceType<typeof Segmented<T>>;
+export default Segmented;

package/dist/TextField.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	let {
+		label,
+		value = $bindable(''),
+		error,
+		hint,
+		...rest
+	}: HTMLInputAttributes & { label: string; value?: string; error?: string | null; hint?: string } = $props();
+
+	const id = $props.id();
+</script>
+
+<div class="field">
+	<label for={id}>{label}</label>
+	<input {id} bind:value aria-invalid={error ? 'true' : undefined} {...rest} />
+	{#if error}<p class="error">{error}</p>{:else if hint}<p class="hint">{hint}</p>{/if}
+</div>
+
+<style>
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+	label {
+		font-weight: 600;
+		font-size: 0.9rem;
+	}
+	.error,
+	.hint {
+		margin: 0;
+		font-size: 0.85rem;
+	}
+	.error {
+		color: var(--danger);
+	}
+	.hint {
+		color: var(--muted);
+	}
+</style>

package/dist/TextField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLInputAttributes & {
+    label: string;
+    value?: string;
+    error?: string | null;
+    hint?: string;
+};
+declare const TextField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/Toggle.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	let {
+		checked = $bindable(false),
+		label,
+		disabled = false,
+		onchange
+	}: { checked?: boolean; label: string; disabled?: boolean; onchange?: (checked: boolean) => void } = $props();
+</script>
+
+<label class="toggle" class:disabled>
+	<span class="text">{label}</span>
+	<input type="checkbox" role="switch" bind:checked {disabled} onchange={() => onchange?.(checked)} />
+	<span class="track" aria-hidden="true"><span class="thumb"></span></span>
+</label>
+
+<style>
+	.toggle {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.6rem;
+		cursor: pointer;
+		user-select: none;
+	}
+	.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	/* The real input covers the whole control (invisible), so every tap lands on it. */
+	input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: pointer;
+		z-index: 1;
+	}
+	input:disabled {
+		cursor: not-allowed;
+	}
+	.track {
+		position: relative;
+		width: 2.6rem;
+		height: 1.5rem;
+		border-radius: 1rem;
+		background: var(--border-strong);
+		transition: background-color 0.15s;
+	}
+	.thumb {
+		position: absolute;
+		top: 0.15rem;
+		left: 0.15rem;
+		width: 1.2rem;
+		height: 1.2rem;
+		border-radius: 50%;
+		background: #fff;
+		box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
+		transition: transform 0.15s;
+	}
+	input:checked + .track {
+		background: var(--accent);
+	}
+	input:checked + .track .thumb {
+		transform: translateX(1.1rem);
+	}
+	input:focus-visible + .track {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+</style>

package/dist/Toggle.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    checked?: boolean;
+    label: string;
+    disabled?: boolean;
+    onchange?: (checked: boolean) => void;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/UndoButton.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Icon } from '@wells-nelson/displays';
+	import type { UndoStack } from './undo.svelte.js';
+
+	/** Floating Undo button, bottom left (above a `SearchBar`), shown while `stack.visible`. */
+	let { stack, label = 'Undo' }: { stack: UndoStack; label?: string } = $props();
+</script>
+
+{#if stack.visible}
+	<button type="button" class="undo" onclick={() => stack.undo()}>
+		<Icon name="undo" size={18} />
+		{label}
+	</button>
+{/if}
+
+<style>
+	.undo {
+		position: fixed;
+		left: max(1rem, calc(50vw - var(--content-w) / 2 + 1rem));
+		bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
+		z-index: 45;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.6rem 1rem;
+		border: none;
+		border-radius: 2rem;
+		background: var(--text);
+		color: var(--bg);
+		font-weight: 600;
+		box-shadow: var(--shadow-lg);
+		cursor: pointer;
+		animation: pop 0.15s ease-out;
+	}
+	@keyframes pop {
+		from {
+			transform: translateY(0.5rem);
+			opacity: 0;
+		}
+	}
+</style>

package/dist/UndoButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UndoStack } from './undo.svelte.js';
+type $$ComponentProps = {
+    stack: UndoStack;
+    label?: string;
+};
+declare const UndoButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type UndoButton = ReturnType<typeof UndoButton>;
+export default UndoButton;