@ternkit/tern 1.13.0 → 1.15.0

package/dist/ui/SearchBox.svelte

@@ -0,0 +1,344 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import { goto } from '../runtime/router.svelte.js';
+	import Highlight from './Highlight.svelte';
+	import Spinner from './Spinner.svelte';
+	import type { SearchItem } from './search.js';
+
+	type Props = {
+		/** The results page the form goes to on Enter, such as "/search"; without JavaScript, the only way. */
+		action?: string;
+		/** The query's name in the results page's address. */
+		name?: string;
+		/** The query; bind it. */
+		value?: string;
+		/** Results as the user types, such as from a typed endpoint. Without it, the box is a plain search form. */
+		search?: (query: string, signal: AbortSignal) => Promise<SearchItem[]>;
+		/** Milliseconds to wait after typing before searching. */
+		debounce?: number;
+		/** The fewest characters to search for. */
+		minLength?: number;
+		/** A key that focuses the box from anywhere on the page, such as "/". */
+		hotkey?: string;
+		label?: string;
+		placeholder?: string;
+		/** Runs when a result is chosen; return false to stay on the page. */
+		onselect?: (item: SearchItem) => void | boolean;
+		class?: string;
+	};
+	let {
+		action,
+		name = 'q',
+		value = $bindable(''),
+		search,
+		debounce = 150,
+		minLength = 2,
+		hotkey,
+		label: labelProp,
+		placeholder: placeholderProp,
+		onselect,
+		class: klass = ''
+	}: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.search.label'));
+	const placeholder = $derived(placeholderProp ?? tb('tern.ui.search.placeholder'));
+
+	const uid = $props.id();
+	const id = `tern-search-${uid}`;
+	let input = $state<HTMLInputElement>();
+	let form = $state<HTMLFormElement>();
+	let items = $state<SearchItem[]>([]);
+	let searched = $state('');
+	let active = $state(-1);
+	let open = $state(false);
+	let searching = $state(false);
+	let failed = $state(false);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let controller: AbortController | undefined;
+
+	const query = $derived(value.trim());
+	const showAll = $derived(!!action && items.length > 0);
+	const count = $derived(items.length + (showAll ? 1 : 0));
+
+	function run() {
+		clearTimeout(timer);
+		controller?.abort();
+		if (!search || query.length < minLength) {
+			items = [];
+			searched = '';
+			searching = false;
+			open = false;
+			return;
+		}
+		const q = query;
+		timer = setTimeout(async () => {
+			const c = (controller = new AbortController());
+			searching = true;
+			failed = false;
+			try {
+				const got = await search!(q, c.signal);
+				if (c.signal.aborted) return;
+				items = got;
+				searched = q;
+				active = -1;
+				open = true;
+			} catch (e) {
+				if (c.signal.aborted) return;
+				items = [];
+				searched = q;
+				failed = true;
+				open = true;
+			} finally {
+				if (!c.signal.aborted) searching = false;
+			}
+		}, debounce);
+	}
+
+	function choose(i: number) {
+		if (i === items.length && showAll) {
+			form?.requestSubmit();
+			return;
+		}
+		const item = items[i];
+		if (!item) return;
+		open = false;
+		if (onselect?.(item) === false) return;
+		void goto(item.href);
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+			if (!open && items.length) open = true;
+			if (!count) return;
+			e.preventDefault();
+			const step = e.key === 'ArrowDown' ? 1 : -1;
+			active = active < 0 && step < 0 ? count - 1 : (active + step + count) % count;
+		} else if (e.key === 'Enter' && open && active >= 0) {
+			e.preventDefault();
+			choose(active);
+		} else if (e.key === 'Escape') {
+			if (open) {
+				e.preventDefault();
+				open = false;
+			} else if (value) {
+				e.preventDefault();
+				value = '';
+				run();
+			}
+		}
+	}
+
+	$effect(() => {
+		if (!hotkey) return;
+		const onKey = (e: KeyboardEvent) => {
+			const t = e.target instanceof Element ? e.target : null;
+			if (e.key !== hotkey || e.metaKey || e.ctrlKey || e.altKey || t?.closest('input, textarea, select, [contenteditable]')) return;
+			e.preventDefault();
+			input?.focus();
+		};
+		addEventListener('keydown', onKey);
+		return () => removeEventListener('keydown', onKey);
+	});
+	$effect(() => () => {
+		clearTimeout(timer);
+		controller?.abort();
+	});
+</script>
+
+<form bind:this={form} class="tern-search {klass}" role="search" method="GET" {action} onsubmit={(e) => !action && e.preventDefault()}>
+	<span class="glass" aria-hidden="true">
+		{#if searching}<Spinner size="0.875rem" />{:else}<svg viewBox="0 0 16 16" width="14" height="14"><circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.5" /><path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /></svg>{/if}
+	</span>
+	<input
+		bind:this={input}
+		bind:value
+		type="search"
+		{name}
+		{placeholder}
+		aria-label={label}
+		autocomplete="off"
+		spellcheck="false"
+		role={search ? 'combobox' : undefined}
+		aria-expanded={search ? open : undefined}
+		aria-controls={search ? `${id}-list` : undefined}
+		aria-autocomplete={search ? 'list' : undefined}
+		aria-activedescendant={open && active >= 0 ? `${id}-opt-${active}` : undefined}
+		oninput={run}
+		{onkeydown}
+		onfocus={() => items.length && (open = true)}
+		onblur={() => setTimeout(() => (open = false), 120)}
+	/>
+	{#if hotkey && !value}<kbd class="hotkey" aria-hidden="true">{hotkey}</kbd>{/if}
+	{#if search}
+		<div class="tern-sr-only" aria-live="polite">{open && !searching ? (failed ? tb('tern.ui.search.failed') : tb('tern.ui.search.results', { n: items.length })) : ''}</div>
+		{#if open}
+			<div id="{id}-list" class="list" role="listbox" aria-label={label}>
+				{#if failed}
+					<p class="note">{tb('tern.ui.search.failed')}</p>
+				{:else if items.length === 0}
+					<p class="note">{tb('tern.ui.search.empty', { query: searched })}</p>
+				{:else}
+					{#each items as item, i (item.href)}
+						<a
+							id="{id}-opt-{i}"
+							class="item"
+							class:active={i === active}
+							role="option"
+							aria-selected={i === active}
+							href={item.href}
+							tabindex="-1"
+							onpointerdown={(e) => e.preventDefault()}
+							onpointermove={() => (active = i)}
+							onclick={(e) => {
+								if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+								e.preventDefault();
+								choose(i);
+							}}
+						>
+							<span class="title"><Highlight text={item.title} />{#if item.meta}<span class="meta">{item.meta}</span>{/if}</span>
+							{#if item.snippet?.length}<span class="snippet"><Highlight text={item.snippet} /></span>{/if}
+						</a>
+					{/each}
+					{#if showAll}
+						<button
+							id="{id}-opt-{items.length}"
+							type="submit"
+							class="item all"
+							class:active={active === items.length}
+							role="option"
+							aria-selected={active === items.length}
+							tabindex="-1"
+							onpointerdown={(e) => e.preventDefault()}
+							onpointermove={() => (active = items.length)}>{tb('tern.ui.search.all', { query: searched })}</button
+						>
+					{/if}
+				{/if}
+			</div>
+		{/if}
+	{/if}
+</form>
+
+<style>
+	.tern-search {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		max-width: 32rem;
+		margin: 0;
+	}
+	.glass {
+		position: absolute;
+		left: 0.75rem;
+		display: grid;
+		place-items: center;
+		color: var(--tern-muted);
+		pointer-events: none;
+	}
+	input {
+		box-sizing: border-box;
+		width: 100%;
+		height: var(--tern-control-height);
+		padding: 0 2.25rem 0 2.25rem;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius-sm);
+		background: var(--tern-bg);
+		color: var(--tern-fg);
+		font: inherit;
+		font-size: 0.875rem;
+	}
+	input::-webkit-search-cancel-button {
+		-webkit-appearance: none;
+	}
+	input:focus-visible {
+		outline: none;
+		border-color: var(--tern-accent);
+		box-shadow: 0 0 0 3px var(--tern-ring);
+	}
+	.hotkey {
+		position: absolute;
+		right: 0.625rem;
+		padding: 0 0.375rem;
+		border: 1px solid var(--tern-border);
+		border-radius: 4px;
+		color: var(--tern-muted);
+		font: 0.75rem/1.4 var(--tern-font-mono);
+		pointer-events: none;
+	}
+	@media (pointer: coarse) {
+		.hotkey {
+			display: none;
+		}
+	}
+	.list {
+		box-sizing: border-box;
+		overflow-x: hidden;
+		position: absolute;
+		top: calc(100% + 0.375rem);
+		left: 0;
+		right: 0;
+		z-index: 50;
+		max-height: min(26rem, 70vh);
+		overflow-y: auto;
+		padding: 0.25rem;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		background: var(--tern-surface);
+		box-shadow: var(--tern-shadow-lg);
+	}
+	.item {
+		box-sizing: border-box;
+		display: grid;
+		gap: 0.125rem;
+		width: 100%;
+		padding: 0.5rem 0.625rem;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		background: none;
+		color: var(--tern-fg);
+		font: inherit;
+		font-size: 0.875rem;
+		text-align: start;
+		text-decoration: none;
+		cursor: pointer;
+	}
+	.item.active {
+		background: var(--tern-accent-soft);
+	}
+	.item,
+	.item:hover {
+		text-decoration: none;
+	}
+	.title {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		font-weight: 550;
+		overflow: hidden;
+	}
+	.meta {
+		margin-left: auto;
+		flex: none;
+		color: var(--tern-muted);
+		font-size: 0.75rem;
+		font-weight: 400;
+	}
+	.snippet {
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+	.all {
+		color: var(--tern-accent);
+		font-weight: 550;
+	}
+	.note {
+		margin: 0;
+		padding: 0.75rem 0.625rem;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+</style>

package/dist/ui/SearchBox.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { SearchItem } from './search.js';
+type Props = {
+    /** The results page the form goes to on Enter, such as "/search"; without JavaScript, the only way. */
+    action?: string;
+    /** The query's name in the results page's address. */
+    name?: string;
+    /** The query; bind it. */
+    value?: string;
+    /** Results as the user types, such as from a typed endpoint. Without it, the box is a plain search form. */
+    search?: (query: string, signal: AbortSignal) => Promise<SearchItem[]>;
+    /** Milliseconds to wait after typing before searching. */
+    debounce?: number;
+    /** The fewest characters to search for. */
+    minLength?: number;
+    /** A key that focuses the box from anywhere on the page, such as "/". */
+    hotkey?: string;
+    label?: string;
+    placeholder?: string;
+    /** Runs when a result is chosen; return false to stay on the page. */
+    onselect?: (item: SearchItem) => void | boolean;
+    class?: string;
+};
+declare const SearchBox: import("svelte").Component<Props, {}, "value">;
+type SearchBox = ReturnType<typeof SearchBox>;
+export default SearchBox;

package/dist/ui/admin.d.ts

@@ -0,0 +1,67 @@
+import type { FormField } from '../runtime/validate.js';
+/** A field on an admin screen, from the admin package's Field. */
+export type AdminField = {
+    name: string;
+    label: string;
+    description: string;
+    /** text, textarea, number, checkbox, date, datetime-local, email, url, password or select. */
+    input: string;
+    options: string[] | null;
+    list: boolean;
+    filter: boolean;
+    readonly: boolean;
+    /** The resource this field holds a key of. */
+    ref: string;
+    /** The field's rules, for the browser to check: a FormField. */
+    rules: Omit<FormField, 'kind'> & {
+        kind: string;
+    };
+};
+/** What the admin package's Load returns: admin.Page. */
+export type AdminPage = {
+    title: string;
+    base: string;
+    resources: {
+        name: string;
+        label: string;
+        href: string;
+    }[];
+    /** home, list or form. */
+    view: string;
+    resource: {
+        name: string;
+        label: string;
+        singular: string;
+        href: string;
+        key: string;
+        fields: AdminField[];
+        search: boolean;
+        create: boolean;
+        edit: boolean;
+        delete: boolean;
+    } | null;
+    list: {
+        rows: {
+            key: string;
+            values: Record<string, string>;
+        }[];
+        total: number;
+        page: number;
+        pages: number;
+        perPage: number;
+        search: string;
+        sort: string;
+        desc: boolean;
+        filters: Record<string, string>;
+    } | null;
+    record: {
+        key: string;
+        values: Record<string, string>;
+    } | null;
+    counts: number[];
+    notice: string;
+};
+/** A value as a list shows it: dates without seconds, checkboxes as words. */
+export declare function shown(f: AdminField, v: string | undefined, yes: string, no: string): string;
+/** The list's address with some of its query changed; page goes back to 1 unless it's set. */
+export declare function listHref(base: string, list: NonNullable<AdminPage['list']>, change: Record<string, string | number | null>): string;

package/dist/ui/admin.js

@@ -0,0 +1,32 @@
+/** A value as a list shows it: dates without seconds, checkboxes as words. */
+export function shown(f, v, yes, no) {
+    if (f.input === 'checkbox')
+        return v ? yes : no;
+    if (!v)
+        return '';
+    if (f.input === 'datetime-local')
+        return v.replace('T', ' ');
+    return v;
+}
+/** The list's address with some of its query changed; page goes back to 1 unless it's set. */
+export function listHref(base, list, change) {
+    const q = new URLSearchParams();
+    if (list.search)
+        q.set('q', list.search);
+    if (list.sort)
+        q.set('sort', (list.desc ? '-' : '') + list.sort);
+    for (const [k, v] of Object.entries(list.filters ?? {}))
+        q.set(k, v);
+    for (const [k, v] of Object.entries(change)) {
+        if (v === null || v === '')
+            q.delete(k);
+        else
+            q.set(k, String(v));
+    }
+    if (!('page' in change))
+        q.delete('page');
+    if (q.get('page') === '1')
+        q.delete('page');
+    const s = q.toString();
+    return s ? `${base}?${s}` : base;
+}

package/dist/ui/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Accordion } from './Accordion.svelte';
+export { default as Admin } from './Admin.svelte';
 export { default as Alert } from './Alert.svelte';
 export { default as AlertDialog } from './AlertDialog.svelte';
 export { default as AreaChart } from './AreaChart.svelte';
@@ -26,6 +27,7 @@ export { default as Drawer } from './Drawer.svelte';
 export { default as Empty } from './Empty.svelte';
 export { default as Field } from './Field.svelte';
 export { default as Form } from './Form.svelte';
+export { default as Highlight } from './Highlight.svelte';
 export { default as HoverCard } from './HoverCard.svelte';
 export { default as Input } from './Input.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
@@ -44,6 +46,7 @@ export { default as Progress } from './Progress.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as Resizable } from './Resizable.svelte';
 export { default as ScrollArea } from './ScrollArea.svelte';
+export { default as SearchBox } from './SearchBox.svelte';
 export { default as Select } from './Select.svelte';
 export { default as SelectMenu } from './SelectMenu.svelte';
 export { default as Separator } from './Separator.svelte';
@@ -84,6 +87,8 @@ export { dismiss, toast, toasts, type Toast, type Tone } from './toast.svelte.js
 export type { MenuItem } from './menu.js';
 export type { Align, Side } from './floating.js';
 export type { Option } from './options.js';
+export type { AdminField, AdminPage } from './admin.js';
+export type { SearchItem, Segment } from './search.js';
 export type { ISODate } from './dates.js';
 export type { DateRange } from './Calendar.svelte';
 export type { CommandItem } from './Command.svelte';

package/dist/ui/index.js

@@ -2,6 +2,7 @@
 // theme once (import '@ternkit/tern/ui/theme.css') and the components where
 // you use them. See docs/ui.md.
 export { default as Accordion } from './Accordion.svelte';
+export { default as Admin } from './Admin.svelte';
 export { default as Alert } from './Alert.svelte';
 export { default as AlertDialog } from './AlertDialog.svelte';
 export { default as AreaChart } from './AreaChart.svelte';
@@ -29,6 +30,7 @@ export { default as Drawer } from './Drawer.svelte';
 export { default as Empty } from './Empty.svelte';
 export { default as Field } from './Field.svelte';
 export { default as Form } from './Form.svelte';
+export { default as Highlight } from './Highlight.svelte';
 export { default as HoverCard } from './HoverCard.svelte';
 export { default as Input } from './Input.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
@@ -47,6 +49,7 @@ export { default as Progress } from './Progress.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as Resizable } from './Resizable.svelte';
 export { default as ScrollArea } from './ScrollArea.svelte';
+export { default as SearchBox } from './SearchBox.svelte';
 export { default as Select } from './Select.svelte';
 export { default as SelectMenu } from './SelectMenu.svelte';
 export { default as Separator } from './Separator.svelte';

package/dist/ui/search.d.ts

@@ -0,0 +1,16 @@
+/** A piece of a search snippet: text that matched, or text around it. The search package's Segment. */
+export type Segment = {
+    text: string;
+    match?: boolean;
+};
+/** A result in a SearchBox. */
+export type SearchItem = {
+    /** Where choosing it goes. */
+    href: string;
+    /** Its title, plain or with the matches marked. */
+    title: string | Segment[];
+    /** Text around what matched, such as a snippet of its body. */
+    snippet?: Segment[];
+    /** A short line beside the title, such as its section. */
+    meta?: string;
+};

package/dist/ui/search.js

@@ -0,0 +1 @@
+export {};

package/dist/vite/goscript.js

@@ -60,7 +60,9 @@ function scan(root) {
 export function exportedNames(source) {
     const values = [
         ...source.matchAll(/\b(?:State|Derived)(?:\[[^\]]*\])?\(\s*\w+\s*,\s*"([A-Za-z_$][\w$]*)"/g),
-        ...source.matchAll(/\.Show\(\s*\w+\s*,\s*"([A-Za-z_$][\w$]*)"/g)
+        ...source.matchAll(/\.Show\(\s*\w+\s*,\s*"([A-Za-z_$][\w$]*)"/g),
+        // A room's Show takes the room's key first: room.Show(c, "board:"+id, "people").
+        ...source.matchAll(/\.Show\(\s*\w+\s*,\s*(?:[^,()"]|"[^"]*"|\([^()]*\))+,\s*"([A-Za-z_$][\w$]*)"/g)
     ].map((m) => m[1]);
     const funcs = [...source.matchAll(/\.Func\(\s*"([A-Za-z_$][\w$]*)"/g)].map((m) => m[1]);
     return { values: [...new Set(values)], funcs: [...new Set(funcs)] };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ternkit/tern",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "description": "Client runtime and Vite plugin for Tern: Svelte on the client, Go on the server",
   "license": "MIT",
   "type": "module",