@ruckc/truss-ui 1.0.0 → 1.1.1

package/README.md

@@ -87,6 +87,18 @@ scripts/              API-reference and token extraction for the docs
 
 The API reference is **generated from the source** (`npm run docs`), so it can't drift from the code. The test suite is described in [Testing](https://truss.ruck.io/docs/testing/).
 
+## Releases
+
+Every push to `main` that passes CI is released automatically: the version is worked out from the commit messages ([Conventional Commits](https://www.conventionalcommits.org)), all four packages are published to npm at that same version, and a GitHub release and `CHANGELOG.md` entry are created.
+
+| Commit | Release |
+| --- | --- |
+| `feat: …` | minor |
+| `fix:`, `perf:`, `revert:`, `docs:`, `refactor:`, `test:`, `build:`, `ci:`, `chore:`, `style:` | patch |
+| any type with `!` (e.g. `feat!: …`) or a `BREAKING CHANGE:` footer | major |
+
+Commits that don't follow the format (no `type:` prefix) don't trigger a release on their own. Publishing uses npm [trusted publishing](https://docs.npmjs.com/trusted-publishers) (OIDC from the `ci.yml` workflow), so no npm token is stored anywhere. Each package's trusted publisher on npmjs.com must be for workflow `ci.yml` with the **`npm publish`** action allowed (the default is only `npm stage publish`, which npm rejects with `403 OIDC permission denied for this action`).
+
 ## Licence
 
 MIT © Curtis Ruck. The bundled Inter and JetBrains Mono fonts are under the SIL Open Font License 1.1.

package/dist/components/DialogHost.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { dialogs } from '../dialogs.svelte.js';
+	import DialogRequest from './internal/DialogRequest.svelte';
+
+	const req = $derived(dialogs.current);
+</script>
+
+{#if req}{#key req.id}<DialogRequest {req} />{/key}{/if}

package/dist/components/DialogHost.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DialogHost: import("svelte").Component<Record<string, never>, {}, "">;
+type DialogHost = ReturnType<typeof DialogHost>;
+export default DialogHost;

package/dist/components/internal/DialogRequest.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import Button from '../Button.svelte';
+	import Dialog from '../Dialog.svelte';
+	import Input from '../Input.svelte';
+	import Textarea from '../Textarea.svelte';
+	import Icon from '../../icons/Icon.svelte';
+	import { dialogs, type DialogRequest } from '../../dialogs.svelte.js';
+
+	/** One on-screen dialog for a queued `dialogs.alert/confirm/prompt` call. Used by DialogHost. */
+	let { req }: { req: DialogRequest } = $props();
+	// the host remounts this component per request (keyed), so reading `req` once is intended
+
+	const glyph = { primary: 'info', warning: 'warning', danger: 'error' } as const;
+	const formId = $props.id();
+
+	let open = $state(true);
+	// svelte-ignore state_referenced_locally
+	let value = $state(req.defaultValue ?? '');
+	let error = $state<string>();
+	let body = $state<HTMLElement>();
+	let chosen = false;
+	let result: unknown;
+
+	function done(v: unknown) {
+		chosen = true;
+		result = v;
+		open = false; // close natively first so focus returns to the opener; `onclose` then settles
+	}
+	function submit(e?: Event) {
+		e?.preventDefault();
+		if (req.kind === 'prompt') {
+			const msg = req.validate?.(value);
+			if (msg) { error = msg; return; }
+			done(value);
+		} else done(req.kind === 'confirm' ? true : undefined);
+	}
+	function closed() {
+		dialogs.settle(req.id, chosen ? result : req.kind === 'confirm' ? false : req.kind === 'prompt' ? null : undefined);
+	}
+
+	// Native dialogs put you straight into the answer: the field, the OK button, or Cancel for destructive confirmations.
+	$effect(() => {
+		const target = body?.closest('dialog')?.querySelector<HTMLElement>('[data-autofocus]');
+		target?.focus();
+		if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) target.select();
+	});
+</script>
+
+<Dialog bind:open title={req.title} size="sm" alert={req.kind !== 'prompt'} onclose={closed}>
+	<div bind:this={body} class="row" data-intent={req.intent}>
+		<span class="ic"><Icon name={glyph[req.intent]} size={20} /></span>
+		<form id={formId} onsubmit={submit}>
+			<p class="msg">{req.message}</p>
+			{#if req.kind === 'prompt'}
+				{#if req.multiline}
+					<Textarea
+						bind:value
+						label={req.label}
+						{error}
+						placeholder={req.placeholder}
+						data-autofocus
+						oninput={() => (error = undefined)}
+						onkeydown={(e) => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) submit(e); }}
+					/>
+				{:else}
+					<Input
+						bind:value
+						label={req.label}
+						{error}
+						type={req.type ?? 'text'}
+						placeholder={req.placeholder}
+						data-autofocus
+						oninput={() => (error = undefined)}
+					/>
+				{/if}
+			{/if}
+		</form>
+	</div>
+	{#snippet footer()}
+		{#if req.kind !== 'alert'}
+			<Button variant="minimal" intent="neutral" data-autofocus={req.intent === 'danger' && req.kind === 'confirm' ? '' : undefined} onclick={() => done(req.kind === 'confirm' ? false : null)}>{req.cancelLabel}</Button>
+		{/if}
+		<Button
+			type="submit"
+			form={formId}
+			intent={req.intent}
+			data-autofocus={req.kind === 'alert' || (req.kind === 'confirm' && req.intent !== 'danger') ? '' : undefined}
+		>{req.okLabel}</Button>
+	{/snippet}
+</Dialog>
+
+<style>
+	.row { display: flex; gap: 12px; line-height: 1.45; }
+	.row form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
+	.msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding-top: 5px; }
+	.ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tr-primary-container); color: var(--tr-on-primary-container); }
+	.row[data-intent='warning'] .ic { background: var(--tr-warning-container); color: var(--tr-on-warning-container); }
+	.row[data-intent='danger'] .ic { background: var(--tr-danger-container); color: var(--tr-on-danger-container); }
+</style>

package/dist/components/internal/DialogRequest.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type DialogRequest } from '../../dialogs.svelte.js';
+type $$ComponentProps = {
+    req: DialogRequest;
+};
+declare const DialogRequest: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogRequest = ReturnType<typeof DialogRequest>;
+export default DialogRequest;

package/dist/dialogs.svelte.d.ts

@@ -0,0 +1,63 @@
+export type DialogIntent = 'primary' | 'warning' | 'danger';
+export type DialogKind = 'alert' | 'confirm' | 'prompt';
+type Base = {
+    /** Heading shown in the dialog header. Defaults to "Notice", "Confirm" or "Input". */
+    title?: string;
+    intent?: DialogIntent;
+    /** Label of the confirming button. Defaults to "OK". */
+    okLabel?: string;
+};
+export type AlertOptions = Base;
+export type ConfirmOptions = Base & {
+    /** Label of the dismissing button. Defaults to "Cancel". */
+    cancelLabel?: string;
+};
+export type PromptOptions = ConfirmOptions & {
+    /** Label above the field. */
+    label?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    type?: 'text' | 'password' | 'email' | 'url' | 'number' | 'tel';
+    /** Use a multi-line field (Ctrl/Cmd+Enter submits). */
+    multiline?: boolean;
+    /** Return an error message to keep the dialog open, or nothing when the value is acceptable. */
+    validate?: (value: string) => string | null | undefined | false | void;
+};
+export type DialogRequest = {
+    id: number;
+    kind: DialogKind;
+    message: string;
+    title: string;
+    intent: DialogIntent;
+    okLabel: string;
+    cancelLabel: string;
+    label?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    type?: PromptOptions['type'];
+    multiline?: boolean;
+    validate?: PromptOptions['validate'];
+    resolve: (value: any) => void;
+};
+/**
+ * Promise-based replacements for the browser's `alert()`, `confirm()` and `prompt()`.
+ * Requests are shown one at a time, in order, by a single `<DialogHost />`.
+ */
+declare class DialogStore {
+    #private;
+    queue: DialogRequest[];
+    /** The request currently on screen. */
+    get current(): DialogRequest | undefined;
+    /** Show a message; resolves when it is acknowledged (or dismissed). */
+    alert(message: string, opts?: AlertOptions): Promise<void>;
+    /** Ask a yes/no question; resolves `true` on OK and `false` on Cancel, Escape or backdrop click. */
+    confirm(message: string, opts?: ConfirmOptions): Promise<boolean>;
+    /** Ask for text; resolves the entered string on OK and `null` on Cancel, Escape or backdrop click. */
+    prompt(message: string, opts?: PromptOptions): Promise<string | null>;
+    /** Resolve a request and move on to the next one. Used by `<DialogHost />`; safe to call twice. */
+    settle(id: number, value: unknown): void;
+    /** Dismiss every pending dialog as if cancelled. */
+    clear(): void;
+}
+export declare const dialogs: DialogStore;
+export {};

package/dist/dialogs.svelte.js

@@ -0,0 +1,54 @@
+const titles = { alert: 'Notice', confirm: 'Confirm', prompt: 'Input' };
+/**
+ * Promise-based replacements for the browser's `alert()`, `confirm()` and `prompt()`.
+ * Requests are shown one at a time, in order, by a single `<DialogHost />`.
+ */
+class DialogStore {
+    queue = $state([]);
+    #next = 1;
+    /** The request currently on screen. */
+    get current() {
+        return this.queue[0];
+    }
+    #ask(kind, message, o) {
+        return new Promise((resolve) => {
+            this.queue.push({
+                ...o,
+                id: this.#next++,
+                kind,
+                message,
+                title: o.title ?? titles[kind],
+                intent: o.intent ?? 'primary',
+                okLabel: o.okLabel ?? 'OK',
+                cancelLabel: o.cancelLabel ?? 'Cancel',
+                resolve
+            });
+        });
+    }
+    /** Show a message; resolves when it is acknowledged (or dismissed). */
+    alert(message, opts = {}) {
+        return this.#ask('alert', message, opts);
+    }
+    /** Ask a yes/no question; resolves `true` on OK and `false` on Cancel, Escape or backdrop click. */
+    confirm(message, opts = {}) {
+        return this.#ask('confirm', message, opts);
+    }
+    /** Ask for text; resolves the entered string on OK and `null` on Cancel, Escape or backdrop click. */
+    prompt(message, opts = {}) {
+        return this.#ask('prompt', message, opts);
+    }
+    /** Resolve a request and move on to the next one. Used by `<DialogHost />`; safe to call twice. */
+    settle(id, value) {
+        const r = this.queue.find((q) => q.id === id);
+        if (!r)
+            return;
+        this.queue = this.queue.filter((q) => q.id !== id);
+        r.resolve(value);
+    }
+    /** Dismiss every pending dialog as if cancelled. */
+    clear() {
+        for (const r of [...this.queue])
+            this.settle(r.id, r.kind === 'confirm' ? false : r.kind === 'prompt' ? null : undefined);
+    }
+}
+export const dialogs = new DialogStore();

package/dist/index.d.ts

@@ -59,11 +59,14 @@ export { default as Badge } from './components/Badge.svelte';
 export { default as DataTable } from './components/DataTable.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Toaster } from './components/Toaster.svelte';
+export { default as DialogHost } from './components/DialogHost.svelte';
 export { default as Icon } from './icons/Icon.svelte';
 export { toasts } from './toast.svelte.js';
+export { dialogs } from './dialogs.svelte.js';
 export type { IconName } from './icons/paths.js';
 export type { ColumnFilters, SortState, TreeNode, UploadItem, MenuEntry, Option, DateRange, Column, MenuItem, Intent } from './types.js';
 export type { Toast, ToastIntent } from './toast.svelte.js';
+export type { AlertOptions, ConfirmOptions, PromptOptions, DialogIntent, DialogKind } from './dialogs.svelte.js';
 export { parseDuration, formatDuration } from './duration.js';
 export type { DurationUnit } from './duration.js';
 export { parseHex, toHex, contrast } from './color.js';

package/dist/index.js

@@ -59,7 +59,9 @@ export { default as Badge } from './components/Badge.svelte';
 export { default as DataTable } from './components/DataTable.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Toaster } from './components/Toaster.svelte';
+export { default as DialogHost } from './components/DialogHost.svelte';
 export { default as Icon } from './icons/Icon.svelte';
 export { toasts } from './toast.svelte.js';
+export { dialogs } from './dialogs.svelte.js';
 export { parseDuration, formatDuration } from './duration.js';
 export { parseHex, toHex, contrast } from './color.js';

package/package.json

@@ -1,77 +1,89 @@
 {
-	"name": "@ruckc/truss-ui",
-	"version": "1.0.0",
-	"description": "Svelte 5 / SvelteKit design system blending Material 3 surfaces with Blueprint density",
-	"keywords": [
-		"svelte",
-		"sveltekit",
-		"design-system",
-		"ui",
-		"components",
-		"accessible",
-		"material",
-		"blueprint"
-	],
-	"type": "module",
-	"license": "MIT",
-	"author": "Curtis Ruck",
-	"homepage": "https://truss.ruck.io",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/ruckc/truss-ui.git"
-	},
-	"bugs": {
-		"url": "https://github.com/ruckc/truss-ui/issues"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"docs": "node scripts/extract-api.mjs",
-		"build": "npm run docs && vite build",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package",
-		"package:all": "npm run package && npm run package --workspaces",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"test": "playwright test",
-		"test:quick": "playwright test tests/lib.spec.ts tests/inputs.spec.ts tests/misc.spec.ts"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./styles.css": "./dist/styles/index.css",
-		"./tokens.css": "./dist/styles/tokens.css",
-		"./fonts.css": "./dist/styles/fonts.css"
-	},
-	"peerDependencies": {
-		"svelte": "^5.20.0"
-	},
-	"devDependencies": {
-		"@playwright/test": "^1.65.0",
-		"@sveltejs/adapter-static": "^4.0.1",
-		"@sveltejs/kit": "^2.20.0",
-		"@sveltejs/package": "^2.3.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@types/node": "^26.6.6",
-		"svelte": "^5.20.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.6.0",
-		"vite": "^7.0.0"
-	},
-	"workspaces": [
-		"packages/*"
-	]
+  "author": "Curtis Ruck",
+  "bugs": {
+    "url": "https://github.com/ruckc/truss-ui/issues"
+  },
+  "description": "Svelte 5 / SvelteKit design system blending Material 3 surfaces with Blueprint density",
+  "devDependencies": {
+    "@playwright/test": "^1.65.0",
+    "@semantic-release/changelog": "^7.0.0",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^11.0.1",
+    "@sveltejs/adapter-static": "^4.0.1",
+    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/package": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@types/node": "^26.6.6",
+    "conventional-changelog-conventionalcommits": "^8.0.0",
+    "semantic-release": "^25.0.9",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.5",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.12"
+  },
+  "engines": {
+    "node": ">=22.17"
+  },
+  "exports": {
+    ".": {
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./fonts.css": "./dist/styles/fonts.css",
+    "./styles.css": "./dist/styles/index.css",
+    "./tokens.css": "./dist/styles/tokens.css"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "homepage": "https://truss.ruck.io",
+  "imports": {
+    "#lib": "./src/lib/index.ts",
+    "#lib/*": "./src/lib/*"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "design-system",
+    "ui",
+    "components",
+    "accessible",
+    "material",
+    "blueprint"
+  ],
+  "license": "MIT",
+  "name": "@ruckc/truss-ui",
+  "peerDependencies": {
+    "svelte": "^5.20.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ruckc/truss-ui.git"
+  },
+  "scripts": {
+    "build": "npm run docs && vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "dev": "vite dev",
+    "docs": "node scripts/extract-api.mjs",
+    "package": "svelte-kit sync && svelte-package",
+    "package:all": "npm run package && npm run package --workspaces",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:quick": "playwright test tests/lib.spec.ts tests/inputs.spec.ts tests/misc.spec.ts"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "version": "1.1.1",
+  "workspaces": [
+    "packages/*"
+  ]
 }