@ternkit/tern 1.2.1 → 1.4.0

package/dist/ui/menu.d.ts

@@ -0,0 +1,25 @@
+/** An entry in a Menu, ContextMenu or Menubar. */
+export type MenuItem = {
+    /** The text; also what typing a letter jumps to. */
+    label?: string;
+    onselect?: () => void;
+    /** Makes the item a link. */
+    href?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    /** A keyboard shortcut to show, such as "⌘K". It's only shown: bind the key yourself. */
+    shortcut?: string;
+    /** For type "checkbox" or "radio": whether it's checked. Flip it in onselect. */
+    checked?: boolean;
+    type?: 'checkbox' | 'radio';
+    /** Items of a submenu, opened with ArrowRight, Enter or by hovering. */
+    items?: MenuItem[];
+    /** Draws a line instead of an item. */
+    separator?: boolean;
+    /** Starts a labelled group of the items after it. */
+    heading?: string;
+};
+export type MenuClose = {
+    all: boolean;
+    returnFocus: boolean;
+};

package/dist/ui/menu.js

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

package/dist/ui/options.d.ts

@@ -0,0 +1,17 @@
+/** An option in a Combobox or SelectMenu. */
+export type Option = {
+    value: string;
+    label: string;
+    /** A second line, such as an email under a name. */
+    description?: string;
+    disabled?: boolean;
+    /** Groups options under this heading. */
+    group?: string;
+};
+/** Matches when every word of the query starts a word of the text, or, from three letters, appears anywhere in it. Ignores case and accents. */
+export declare function matches(text: string, query: string): boolean;
+/** Splits options into groups, keeping their order. */
+export declare function grouped(options: Option[]): {
+    group?: string;
+    options: Option[];
+}[];

package/dist/ui/options.js

@@ -0,0 +1,22 @@
+/** Matches when every word of the query starts a word of the text, or, from three letters, appears anywhere in it. Ignores case and accents. */
+export function matches(text, query) {
+    const norm = (s) => s.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase();
+    const words = norm(text).split(/[\s\-_/.@]+/);
+    const hay = norm(text);
+    return norm(query)
+        .split(/\s+/)
+        .filter(Boolean)
+        .every((q) => words.some((w) => w.startsWith(q)) || (q.length >= 3 && hay.includes(q)));
+}
+/** Splits options into groups, keeping their order. */
+export function grouped(options) {
+    const out = [];
+    for (const o of options) {
+        const last = out[out.length - 1];
+        if (last && last.group === o.group)
+            last.options.push(o);
+        else
+            out.push({ group: o.group, options: [o] });
+    }
+    return out;
+}

package/dist/ui/table.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+/** A column of a Table or DataTable. */
+export type Column<R> = {
+    /** The field shown, or an id when cell draws it. */
+    key: keyof R & string;
+    header: string;
+    /** end for numbers. */
+    align?: 'start' | 'end' | 'center';
+    /** Draws the cell instead of the value. */
+    cell?: Snippet<[R]>;
+    /** For DataTable: whether the column sorts. */
+    sortable?: boolean;
+    /** For DataTable: the value it sorts and filters by, if not the field. */
+    value?: (row: R) => string | number | Date | null | undefined;
+    width?: string;
+};
+/** What a DataTable shows: passed to onquery when the server sorts, searches and pages. */
+export type DataQuery = {
+    page: number;
+    pageSize: number;
+    sort: {
+        key: string;
+        dir: 'asc' | 'desc';
+    } | null;
+    search: string;
+};

package/dist/ui/table.js

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

package/dist/ui/theme.css

@@ -0,0 +1,176 @@
+/*
+ * Tern UI theme. Import once, in your root layout:
+ *
+ *   import '@ternkit/tern/ui/theme.css';
+ *
+ * Every component reads these custom properties, so a theme is a set of
+ * overrides on :root (or any element, for a part of the page). Dark mode
+ * follows the system, or set data-theme="dark" / "light" on <html>.
+ */
+:root {
+	color-scheme: light;
+	--tern-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+	--tern-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+
+	/* Surfaces and ink */
+	--tern-bg: oklch(0.99 0.004 220);
+	--tern-surface: oklch(1 0 0);
+	--tern-surface-2: oklch(0.97 0.006 220);
+	--tern-fg: oklch(0.24 0.02 240);
+	--tern-muted: oklch(0.5 0.02 240);
+	--tern-border: oklch(0.9 0.01 230);
+	--tern-border-strong: oklch(0.8 0.015 230);
+
+	/* The accent: a deep sea teal */
+	--tern-accent: oklch(0.52 0.1 205);
+	--tern-accent-hover: oklch(0.46 0.1 205);
+	--tern-accent-fg: oklch(0.99 0.01 205);
+	--tern-accent-soft: oklch(0.95 0.03 205);
+
+	--tern-danger: oklch(0.55 0.19 25);
+	--tern-danger-hover: oklch(0.49 0.19 25);
+	--tern-danger-fg: oklch(0.99 0 0);
+	--tern-danger-soft: oklch(0.96 0.03 25);
+	--tern-success: oklch(0.55 0.13 155);
+	--tern-success-soft: oklch(0.96 0.04 155);
+	--tern-warning: oklch(0.6 0.13 75);
+	--tern-warning-soft: oklch(0.97 0.05 85);
+
+	--tern-ring: oklch(0.6 0.12 205);
+	--tern-radius: 10px;
+	--tern-radius-sm: 7px;
+	--tern-shadow: 0 1px 2px oklch(0.24 0.02 240 / 0.06), 0 1px 1px oklch(0.24 0.02 240 / 0.04);
+	--tern-shadow-lg: 0 12px 32px -8px oklch(0.24 0.02 240 / 0.18), 0 2px 6px oklch(0.24 0.02 240 / 0.08);
+	--tern-control-height: 2.25rem;
+	/* Chart series, in order; validated for color vision deficiencies on these surfaces. */
+	--tern-chart-1: #2a78d6;
+	--tern-chart-2: #eb6834;
+	--tern-chart-3: #1baf7a;
+	--tern-chart-4: #eda100;
+	--tern-chart-5: #e87ba4;
+	--tern-chart-6: #008300;
+	--tern-chart-7: #6250d6;
+	--tern-chart-8: #e34948;
+	--tern-duration: 140ms;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		color-scheme: dark;
+		--tern-bg: oklch(0.17 0.015 240);
+		--tern-surface: oklch(0.21 0.017 240);
+		--tern-surface-2: oklch(0.25 0.018 240);
+		--tern-fg: oklch(0.94 0.01 230);
+		--tern-muted: oklch(0.7 0.02 230);
+		--tern-border: oklch(0.32 0.02 240);
+		--tern-border-strong: oklch(0.42 0.02 240);
+		--tern-accent: oklch(0.72 0.11 200);
+		--tern-accent-hover: oklch(0.78 0.1 200);
+		--tern-accent-fg: oklch(0.18 0.03 220);
+		--tern-accent-soft: oklch(0.3 0.05 205);
+		--tern-danger: oklch(0.7 0.17 25);
+		--tern-danger-hover: oklch(0.76 0.15 25);
+		--tern-danger-fg: oklch(0.18 0.04 25);
+		--tern-danger-soft: oklch(0.3 0.07 25);
+		--tern-success: oklch(0.72 0.14 155);
+		--tern-success-soft: oklch(0.29 0.05 155);
+		--tern-warning: oklch(0.78 0.13 80);
+		--tern-warning-soft: oklch(0.31 0.05 80);
+		--tern-ring: oklch(0.75 0.11 200);
+		--tern-shadow: 0 1px 2px oklch(0 0 0 / 0.4);
+		--tern-shadow-lg: 0 16px 40px -8px oklch(0 0 0 / 0.6), 0 2px 8px oklch(0 0 0 / 0.4);
+		--tern-chart-1: #3987e5;
+		--tern-chart-2: #d95926;
+		--tern-chart-3: #199e70;
+		--tern-chart-4: #c98500;
+		--tern-chart-5: #d55181;
+		--tern-chart-6: #008300;
+		--tern-chart-7: #9085e9;
+		--tern-chart-8: #e66767;
+	}
+}
+
+:root[data-theme='dark'] {
+	color-scheme: dark;
+	--tern-bg: oklch(0.17 0.015 240);
+	--tern-surface: oklch(0.21 0.017 240);
+	--tern-surface-2: oklch(0.25 0.018 240);
+	--tern-fg: oklch(0.94 0.01 230);
+	--tern-muted: oklch(0.7 0.02 230);
+	--tern-border: oklch(0.32 0.02 240);
+	--tern-border-strong: oklch(0.42 0.02 240);
+	--tern-accent: oklch(0.72 0.11 200);
+	--tern-accent-hover: oklch(0.78 0.1 200);
+	--tern-accent-fg: oklch(0.18 0.03 220);
+	--tern-accent-soft: oklch(0.3 0.05 205);
+	--tern-danger: oklch(0.7 0.17 25);
+	--tern-danger-hover: oklch(0.76 0.15 25);
+	--tern-danger-fg: oklch(0.18 0.04 25);
+	--tern-danger-soft: oklch(0.3 0.07 25);
+	--tern-success: oklch(0.72 0.14 155);
+	--tern-success-soft: oklch(0.29 0.05 155);
+	--tern-warning: oklch(0.78 0.13 80);
+	--tern-warning-soft: oklch(0.31 0.05 80);
+	--tern-ring: oklch(0.75 0.11 200);
+	--tern-shadow: 0 1px 2px oklch(0 0 0 / 0.4);
+	--tern-shadow-lg: 0 16px 40px -8px oklch(0 0 0 / 0.6), 0 2px 8px oklch(0 0 0 / 0.4);
+	--tern-chart-1: #3987e5;
+	--tern-chart-2: #d95926;
+	--tern-chart-3: #199e70;
+	--tern-chart-4: #c98500;
+	--tern-chart-5: #d55181;
+	--tern-chart-6: #008300;
+	--tern-chart-7: #9085e9;
+	--tern-chart-8: #e66767;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--tern-duration: 0ms;
+	}
+}
+
+/* Base styles, opt-in with class="tern" on <body> or any container. */
+.tern {
+	font-family: var(--tern-font);
+	color: var(--tern-fg);
+	background: var(--tern-bg);
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+/* Semantic tables: <table class="tern-table">. */
+.tern-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.875rem;
+}
+.tern-table th {
+	text-align: start;
+	font-weight: 600;
+	color: var(--tern-muted);
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+.tern-table th,
+.tern-table td {
+	padding: 0.625rem 0.75rem;
+	border-bottom: 1px solid var(--tern-border);
+}
+.tern-table tbody tr:hover {
+	background: var(--tern-surface-2);
+}
+
+/* Hidden visually, still read by screen readers. */
+.tern-sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}

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

@@ -0,0 +1,19 @@
+export type Tone = 'neutral' | 'success' | 'danger' | 'warning';
+export interface Toast {
+    id: number;
+    message: string;
+    description?: string;
+    tone: Tone;
+    /** How long it stays, in milliseconds; 0 keeps it until dismissed. */
+    duration: number;
+}
+export declare const toasts: Toast[];
+/** Shows a toast and returns its id. */
+export declare function toast(message: string, opts?: Partial<Omit<Toast, 'id' | 'message'>>): number;
+export declare namespace toast {
+    var success: (message: string, opts?: Partial<Omit<Toast, "id" | "message" | "tone">>) => number;
+    var error: (message: string, opts?: Partial<Omit<Toast, "id" | "message" | "tone">>) => number;
+    var warning: (message: string, opts?: Partial<Omit<Toast, "id" | "message" | "tone">>) => number;
+}
+/** Removes a toast. */
+export declare function dismiss(id: number): void;

package/dist/ui/toast.svelte.js

@@ -0,0 +1,18 @@
+// Toasts: short messages that confirm what happened, shown by <Toaster />.
+let next = 1;
+export const toasts = $state([]);
+/** Shows a toast and returns its id. */
+export function toast(message, opts = {}) {
+    const t = { id: next++, message, tone: 'neutral', duration: opts.tone === 'danger' ? 8000 : 5000, ...opts };
+    toasts.push(t);
+    return t.id;
+}
+/** Removes a toast. */
+export function dismiss(id) {
+    const i = toasts.findIndex((t) => t.id === id);
+    if (i >= 0)
+        toasts.splice(i, 1);
+}
+toast.success = (message, opts) => toast(message, { ...opts, tone: 'success' });
+toast.error = (message, opts) => toast(message, { ...opts, tone: 'danger' });
+toast.warning = (message, opts) => toast(message, { ...opts, tone: 'warning' });

package/dist/vite/goscript.d.ts

@@ -6,6 +6,20 @@ export declare function exportedNames(source: string): {
     values: string[];
     funcs: string[];
 };
+/**
+ * The TypeScript that replaces a live component's Go script. The markup
+ * sees each State, Derived and Show value, each Func (callable, with
+ * .pending, .error, .optimistic and .debounce) and live: the connection,
+ * pending state, bindings, and live.props, everything the parent passed,
+ * such as children and event handlers.
+ */
+export declare function liveBindings(id: string, values: string[], funcs: string[]): string;
+/**
+ * Wraps a live component's markup so it renders once the component has
+ * state (at once after a server render, after the first message after a
+ * client-side navigation), and embeds the server-rendered state.
+ */
+export declare function wrapLiveMarkup(content: string): string;
 /** Replaces <script lang="go"> with the JavaScript that binds it to Go. */
 export declare function goScriptPreprocessor(getRoot: () => string): PreprocessorGroup;
 /** Builds the Go code at startup and on changes. */

package/dist/vite/goscript.js

@@ -136,6 +136,46 @@ function initialState(root, id) {
         return {};
     }
 }
+/**
+ * The TypeScript that replaces a live component's Go script. The markup
+ * sees each State, Derived and Show value, each Func (callable, with
+ * .pending, .error, .optimistic and .debounce) and live: the connection,
+ * pending state, bindings, and live.props, everything the parent passed,
+ * such as children and event handlers.
+ */
+export function liveBindings(id, values, funcs) {
+    const taken = new Set([...values, ...funcs]);
+    let code = `
+	import { useLive } from '@ternkit/tern/goscript';
+	let __goProps = $props();
+	const __goUID = $props.id();
+	const __go = useLive(${JSON.stringify(id)}, __goUID, () => ({ ...__goProps }));
+`;
+    if (!taken.has('live'))
+        code += '\tconst live = __go;\n';
+    for (const v of values)
+        code += `\tconst ${v} = $derived(__go.state[${JSON.stringify(v)}] as any);\n`;
+    for (const f of funcs)
+        code += `\tconst ${f}: any = __go.fn(${JSON.stringify(f)});\n`;
+    return code;
+}
+/** Top-level blocks that stay outside the markup's {#if}. */
+const OUTSIDE = /<script\b[\s\S]*?<\/script>|<style\b[\s\S]*?<\/style>|<svelte:head\b[\s\S]*?<\/svelte:head>|<svelte:(?:options|window|document|body)\b[^>]*?\/>|<svelte:(window|document|body)\b[^>]*?>[\s\S]*?<\/svelte:\1>/g;
+/**
+ * Wraps a live component's markup so it renders once the component has
+ * state (at once after a server render, after the first message after a
+ * client-side navigation), and embeds the server-rendered state.
+ */
+export function wrapLiveMarkup(content) {
+    const kept = [];
+    let markup = content.replace(OUTSIDE, (block) => {
+        kept.push(block);
+        // Keep line numbers for the markup's compile errors.
+        return '\n'.repeat(block.split('\n').length - 1);
+    });
+    markup = markup.trim() ? `{#if __go.loaded}${markup}{/if}` : markup;
+    return markup + '\n' + kept.join('\n') + '\n<svelte:head>{@html __go.stateScript}</svelte:head>\n';
+}
 /** Replaces <script lang="go"> with the JavaScript that binds it to Go. */
 export function goScriptPreprocessor(getRoot) {
     return {
@@ -146,30 +186,19 @@ export function goScriptPreprocessor(getRoot) {
             const m = GO_SCRIPT.exec(content);
             if (!m || !/(^|\s)live(\s|=|$)/.test(m[1]))
                 return;
-            return { code: content + '\n<svelte:head>{@html __go.stateScript}</svelte:head>\n' };
+            return { code: wrapLiveMarkup(content) };
         },
         script({ content, attributes, filename }) {
             if (attributes.lang !== 'go' || !filename)
                 return;
             const root = getRoot();
-            if (!goScriptEnabled(root)) {
-                throw new Error(`${filename}: <script lang="go"> is experimental; enable it with "experimental": { "goScript": true } in tern.json`);
-            }
             const id = componentID(root, filename);
             const { values, funcs } = exportedNames(content);
             const { lang: _lang, live, ...rest } = attributes;
-            if (live) {
-                let code = `
-	import { useLive } from '@ternkit/tern/goscript';
-	let __goProps = $props();
-	const __goUID = $props.id();
-	const __go = useLive(${JSON.stringify(id)}, __goUID, () => ({ ...__goProps }));
-`;
-                for (const v of values)
-                    code += `\tconst ${v} = $derived(__go.state[${JSON.stringify(v)}] as any);\n`;
-                for (const f of funcs)
-                    code += `\tconst ${f} = (...args: unknown[]): any => __go.call(${JSON.stringify(f)}, ...args);\n`;
-                return { code, attributes: { ...rest, lang: 'ts' } };
+            if (live)
+                return { code: liveBindings(id, values, funcs), attributes: { ...rest, lang: 'ts' } };
+            if (!goScriptEnabled(root)) {
+                throw new Error(`${filename}: <script lang="go"> in WebAssembly is experimental; enable it with "experimental": { "goScript": true } in tern.json, or add live to run it on the server`);
             }
             const base = path.join(root, DIR).split(path.sep).join('/');
             let code = `

package/dist/vite/index.js

@@ -66,7 +66,7 @@ export function tern(options = {}) {
                         target: 'es2022',
                         rolldownOptions: {
                             input: source,
-                            output: { format: 'iife', entryFileNames: 'service-worker.js' }
+                            output: { format: 'iife', entryFileNames: 'service-worker.js', banner: '"use strict";' }
                         }
                     }
                 };
@@ -84,7 +84,10 @@ export function tern(options = {}) {
                         target: 'es2023',
                         rolldownOptions: {
                             input: path.join(root, SERVER_ENTRY),
-                            output: { format: 'iife', name: '__tern_server', entryFileNames: 'server.js' }
+                            // Strict, like the modules it is built from: the minifier's output
+                            // assumes it, and in sloppy mode a renamed block-level function can
+                            // shadow a variable (Annex B), which made bindings loop forever.
+                            output: { format: 'iife', name: '__tern_server', entryFileNames: 'server.js', banner: '"use strict";' }
                         }
                     },
                     // One self-contained file: the renderer runs in an embedded engine
@@ -125,8 +128,16 @@ export function tern(options = {}) {
                 }
             };
         },
-        resolveId(id) {
-            return id === SW_MODULE ? '\0' + SW_MODULE : undefined;
+        resolveId(id, importer) {
+            if (id === SW_MODULE)
+                return '\0' + SW_MODULE;
+            // ./$forms sits next to ./$types, in .tern/types, written by tern gen.
+            if (id === './$forms' && importer) {
+                const dir = path.relative(root, path.dirname(importer.split('?')[0]));
+                if (!dir.startsWith('..'))
+                    return path.join(root, '.tern/types', dir, '$forms.js');
+            }
+            return undefined;
         },
         load(id) {
             if (id !== '\0' + SW_MODULE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ternkit/tern",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Client runtime and Vite plugin for Tern: Svelte on the client, Go on the server",
   "license": "MIT",
   "type": "module",
@@ -34,6 +34,12 @@
       "svelte": "./dist/goscript/index.svelte.js",
       "default": "./dist/goscript/index.svelte.js"
     },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "svelte": "./dist/ui/index.js",
+      "default": "./dist/ui/index.js"
+    },
+    "./ui/theme.css": "./dist/ui/theme.css",
     "./server": {
       "types": "./dist/server/index.d.ts",
       "svelte": "./dist/server/index.js",