@ternkit/tern 1.2.0 → 1.3.0

package/dist/ui/Tooltip.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** The tooltip's text. It describes the trigger; don't put anything interactive in it. */
+		text: string;
+		side?: 'top' | 'bottom';
+		/** How long to wait before showing, in milliseconds. */
+		delay?: number;
+		/** The trigger, which must be focusable, such as a Button. It receives aria-describedby through the snippet's props. */
+		children: Snippet<[{ 'aria-describedby': string }]>;
+	};
+	let { text, side = 'top', delay = 300, children }: Props = $props();
+	const uid = $props.id();
+	let open = $state(false);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	const show = (now = false) => {
+		clearTimeout(timer);
+		if (now) open = true;
+		else timer = setTimeout(() => (open = true), delay);
+	};
+	const hide = () => {
+		clearTimeout(timer);
+		open = false;
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	class="tern-tooltip"
+	onpointerenter={() => show()}
+	onpointerleave={hide}
+	onfocusin={() => show(true)}
+	onfocusout={hide}
+	onkeydown={(e) => e.key === 'Escape' && hide()}
+>
+	{@render children({ 'aria-describedby': `tern-tooltip-${uid}` })}
+	<span role="tooltip" id="tern-tooltip-{uid}" class="tip {side}" class:open>{text}</span>
+</span>
+
+<style>
+	.tern-tooltip {
+		position: relative;
+		display: inline-flex;
+	}
+	.tip {
+		position: absolute;
+		left: 50%;
+		z-index: 60;
+		width: max-content;
+		max-width: 16rem;
+		padding: 0.35rem 0.55rem;
+		border-radius: var(--tern-radius-sm);
+		background: var(--tern-fg);
+		color: var(--tern-bg);
+		font-size: 0.75rem;
+		line-height: 1.35;
+		pointer-events: none;
+		opacity: 0;
+		visibility: hidden;
+		translate: -50% 0;
+		transition:
+			opacity var(--tern-duration),
+			visibility var(--tern-duration);
+	}
+	.top {
+		bottom: calc(100% + 0.4rem);
+	}
+	.bottom {
+		top: calc(100% + 0.4rem);
+	}
+	.open {
+		opacity: 1;
+		visibility: visible;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** The tooltip's text. It describes the trigger; don't put anything interactive in it. */
+    text: string;
+    side?: 'top' | 'bottom';
+    /** How long to wait before showing, in milliseconds. */
+    delay?: number;
+    /** The trigger, which must be focusable, such as a Button. It receives aria-describedby through the snippet's props. */
+    children: Snippet<[{
+        'aria-describedby': string;
+    }]>;
+};
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/ui/field.d.ts

@@ -0,0 +1,10 @@
+/** What a Field tells the control inside it, so labels and messages are wired up. */
+export interface FieldContext {
+    readonly id: string;
+    readonly describedBy: string | undefined;
+    readonly invalid: boolean;
+    readonly required: boolean;
+    readonly disabled: boolean;
+}
+export declare function setField(ctx: FieldContext): void;
+export declare function getField(): FieldContext | undefined;

package/dist/ui/field.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('tern-field');
+export function setField(ctx) {
+    setContext(key, ctx);
+}
+export function getField() {
+    return getContext(key);
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,24 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Separator } from './Separator.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { dismiss, toast, toasts, type Toast, type Tone } from './toast.svelte.js';

package/dist/ui/index.js

@@ -0,0 +1,27 @@
+// Tern UI: accessible Svelte 5 components with Tern's own look. Import the
+// 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 Alert } from './Alert.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Separator } from './Separator.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { dismiss, toast, toasts } from './toast.svelte.js';

package/dist/ui/theme.css

@@ -0,0 +1,151 @@
+/*
+ * 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;
+	--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);
+	}
+}
+
+: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);
+}
+
+@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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ternkit/tern",
-  "version": "1.2.0",
+  "version": "1.3.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",