@marianmeres/stuic 3.176.0 → 3.178.0

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -94,7 +94,9 @@
 	<ModalDialog
 		bind:this={modal}
 		preEscapeClose={() => {
-			return isPending ? false : acp?.current.onEscape?.();
+			// `escape()` runs the current dialog's `onEscape` (defaults to `shift`); the
+			// handler owns the close. Refused while the OK handler is still pending.
+			return isPending ? false : acp?.escape();
 		}}
 		preClose={() => !acp.length}
 		noClickOutsideClose

package/dist/components/AlertConfirmPrompt/Current.svelte

@@ -78,6 +78,21 @@
 
 	let current = $derived(acp?.current!);
 
+	// The prompt field is bound to the dialog object itself (`current.value`). Svelte's
+	// `bind:value` on the underlying <input> registers an ASYNC "input" listener that
+	// re-reads the binding getter after `await tick()` (to respect validation in
+	// accessors), and `createOnClick` below dispatches a synthetic "input" event on OK.
+	// If the `onOk` worker shifts the stack within that microtask window (e.g.
+	// `Promise.resolve().then(() => acp.shift())`), the deferred read finds `current`
+	// already undefined and a plain `bind:value={current.value}` throws
+	// "Cannot read properties of undefined (reading 'value')" as an unhandled
+	// rejection. So the field binds through these null-safe accessors instead: after
+	// the dialog is gone the read yields undefined and the write is dropped.
+	const getValue = () => current?.value;
+	const setValue = (v: any) => {
+		if (current) current.value = v;
+	};
+
 	// Button config is layered: the dialog object's own value (most specific) wins over
 	// the component level prop - same as CmpButtonOk/Cancel/Custom below.
 
@@ -200,7 +215,7 @@
 					<div class={twMerge("input-box", "mt-3 p-1", classInputBox)}>
 						{#if current?.promptFieldProps?.options?.length}
 							<FieldSelect
-								bind:value={current.value}
+								bind:value={getValue, setValue}
 								bind:input={inputEl}
 								class={twMerge("input", "m-0", classInput)}
 								options={current.promptFieldProps.options}
@@ -210,7 +225,7 @@
 							/>
 						{:else}
 							<FieldInput
-								bind:value={current.value}
+								bind:value={getValue, setValue}
 								bind:input={inputEl}
 								class={twMerge("input", "m-0", classInput)}
 								renderSize="sm"

package/dist/components/AlertConfirmPrompt/README.md

@@ -37,8 +37,38 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
 - `alert(options)` - Show an alert dialog
 - `confirm(onOk, options)` - Show a confirm dialog with callback
 - `prompt(onOk, options)` - Show a prompt dialog with input field
-- `shift()` - Remove current dialog from queue
+- `shift()` - Remove current dialog from queue (revealing the next one, if any)
+- `escape()` - Run the current dialog's `onEscape` handler (defaults to `shift`); no-op on an empty queue
 - `reset()` - Clear all dialogs
+- `dump()` - Snapshot of the queue (current dialog first)
+- `current` / `length` - The dialog being shown / number of queued dialogs (reactive)
+
+### Closing a dialog: the handler owns the close
+
+A dialog leaves the queue only through `shift()`. Each of `onOk`, `onCancel` and `onEscape`
+defaults to `shift` when you do not supply it (so a plain `alert()` closes itself), but as
+soon as you pass your own handler, closing is your job: call `acp.shift()` from it when
+done. The stack deliberately does not close for you, so an async handler can validate,
+stage a second step, or keep a failed action's message on screen. The classic mistake is an
+`onOk` that does its work and never shifts: the work happens, the dialog stays, and the user
+clicks OK again.
+
+While the promise returned by the handler is pending, the dialog is in a "pending" state
+(buttons disabled, spinner shown, Escape refused). Return the promise rather than `void`-ing
+it to keep that state for the whole of your work:
+
+```ts
+acp.confirm(
+	async () => {
+		await deleteItem(); // dialog stays up and disabled until this settles
+		acp.shift();
+	},
+	{ title: "Delete?", variant: "warn" }
+);
+```
+
+If all you want is a dialog that closes when the user answers, use the Promise-based
+wrappers (`createAlert`, `createConfirm`, `createPrompt`) below; they shift for you.
 
 ### Dialog Options
 
@@ -87,6 +117,8 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
 
 ### Confirm
 
+Supplying `onOk` makes you responsible for closing (see above), hence the `acp.shift()`:
+
 ```svelte
 <script lang="ts">
 	acp.confirm(
@@ -105,6 +137,9 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
 
 ### Prompt
 
+Same rule: `onOk` receives the entered value and owns the close. The shift may happen at
+any time, synchronously or after an `await`:
+
 ```svelte
 <script lang="ts">
 	acp.prompt(

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.d.ts

@@ -57,6 +57,23 @@ export interface AlertConfirmPromptObj extends Record<string, any> {
  * Manages a FIFO queue of dialogs, allowing one dialog to be displayed at a time.
  * Provides a modern, customizable replacement for native browser dialogs.
  *
+ * **The handler owns the close.** A dialog is removed from the queue only by
+ * `shift()`. Each of `onOk`, `onCancel` and `onEscape` defaults to `shift` when the
+ * caller does not supply it, so an `alert()` with no callbacks closes itself. As soon
+ * as you pass your own handler, closing becomes your job: call `acp.shift()` when you
+ * are done. The stack does not close for you, so that an async handler can validate,
+ * stage a second step, or keep a failed action's message on screen. (An `onOk` that
+ * runs its work but never shifts is the classic mistake: the work happens, the dialog
+ * stays, and the user clicks OK again.)
+ *
+ * While a handler's returned promise is pending, the rendered dialog is in a "pending"
+ * state (buttons disabled, spinner shown, Escape refused). Return the promise - do not
+ * `void` it - to get that for the duration of your work.
+ *
+ * If all you want is "a dialog that closes when the user answers", use the
+ * Promise-based wrappers {@link createAlert}, {@link createConfirm} and
+ * {@link createPrompt} instead; they shift for you.
+ *
  * @example
  * ```ts
  * const acp = new AlertConfirmPromptStack({
@@ -64,18 +81,24 @@ export interface AlertConfirmPromptObj extends Record<string, any> {
  *   labelCancel: 'Dismiss'
  * });
  *
- * // Simple alert
+ * // Simple alert (no handler given, so OK/Escape default to `shift`)
  * acp.alert({ title: 'Notice', content: 'Operation complete' });
  *
- * // Confirm with callback
+ * // Confirm with callback. Supplying `onOk` makes YOU responsible for closing.
  * acp.confirm(
- *   () => console.log('Confirmed!'),
+ *   async () => {
+ *     await deleteItem(); // dialog is pending (OK disabled) until this settles
+ *     acp.shift();
+ *   },
  *   { title: 'Delete?', content: 'This cannot be undone', variant: 'warn' }
  * );
  *
- * // Prompt for input
+ * // Prompt for input. Same rule: shift when done.
  * acp.prompt(
- *   (value) => console.log('User entered:', value),
+ *   (value) => {
+ *     console.log('User entered:', value);
+ *     acp.shift();
+ *   },
  *   { title: 'Name', content: 'Enter your name', value: 'Default' }
  * );
  * ```
@@ -86,20 +109,38 @@ export declare class AlertConfirmPromptStack {
     constructor(defaults?: Partial<AlertConfirmPromptObj>);
     get length(): number;
     get current(): AlertConfirmPromptObj;
+    /** Removes the current dialog from the queue, revealing the next one (if any). */
     shift: () => AlertConfirmPromptObj | undefined;
+    /** Clears the whole queue. */
     reset: () => void;
+    /**
+     * Runs the current dialog's `onEscape` handler (which defaults to `shift`). Does
+     * nothing on an empty stack. The handler owns the close, exactly as with `onOk`
+     * and `onCancel`, so this does NOT shift on its own: a custom `onEscape` that
+     * does not shift keeps the dialog open, and one that does shift pops exactly one
+     * entry (not the one queued behind it as well).
+     */
     escape: () => void;
+    /** Snapshot of the queue (current dialog first). */
     dump: () => AlertConfirmPromptObj[];
     /**
-     * Main api.
+     * Queues an alert dialog (OK button only). With no `onOk`/`onEscape` given, both
+     * default to `shift`, so a plain alert closes itself. If you supply either, call
+     * `shift()` from it yourself.
      */
     alert: (o?: Partial<AlertConfirmPromptObj> | string) => void;
     /**
-     * Main api.
+     * Queues a confirm dialog (Cancel + OK). `onOk` owns the close: call `acp.shift()`
+     * from it when done (a returned promise keeps the dialog pending until it settles).
+     * `onCancel`/`onEscape` default to `shift`. For a self-closing, Promise-based
+     * confirm use {@link createConfirm}.
      */
     confirm: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptObj>) => void;
     /**
-     * Main api.
+     * Queues a prompt dialog (input + Cancel + OK). `onOk` receives the entered value
+     * and owns the close: call `acp.shift()` from it when done (a returned promise
+     * keeps the dialog pending until it settles). `onCancel`/`onEscape` default to
+     * `shift`. For a self-closing, Promise-based prompt use {@link createPrompt}.
      */
     prompt: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptObj>) => void;
 }

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.js

@@ -16,6 +16,23 @@ const ucf = (s) => `${s}`[0].toUpperCase() + `${s}`.slice(1);
  * Manages a FIFO queue of dialogs, allowing one dialog to be displayed at a time.
  * Provides a modern, customizable replacement for native browser dialogs.
  *
+ * **The handler owns the close.** A dialog is removed from the queue only by
+ * `shift()`. Each of `onOk`, `onCancel` and `onEscape` defaults to `shift` when the
+ * caller does not supply it, so an `alert()` with no callbacks closes itself. As soon
+ * as you pass your own handler, closing becomes your job: call `acp.shift()` when you
+ * are done. The stack does not close for you, so that an async handler can validate,
+ * stage a second step, or keep a failed action's message on screen. (An `onOk` that
+ * runs its work but never shifts is the classic mistake: the work happens, the dialog
+ * stays, and the user clicks OK again.)
+ *
+ * While a handler's returned promise is pending, the rendered dialog is in a "pending"
+ * state (buttons disabled, spinner shown, Escape refused). Return the promise - do not
+ * `void` it - to get that for the duration of your work.
+ *
+ * If all you want is "a dialog that closes when the user answers", use the
+ * Promise-based wrappers {@link createAlert}, {@link createConfirm} and
+ * {@link createPrompt} instead; they shift for you.
+ *
  * @example
  * ```ts
  * const acp = new AlertConfirmPromptStack({
@@ -23,18 +40,24 @@ const ucf = (s) => `${s}`[0].toUpperCase() + `${s}`.slice(1);
  *   labelCancel: 'Dismiss'
  * });
  *
- * // Simple alert
+ * // Simple alert (no handler given, so OK/Escape default to `shift`)
  * acp.alert({ title: 'Notice', content: 'Operation complete' });
  *
- * // Confirm with callback
+ * // Confirm with callback. Supplying `onOk` makes YOU responsible for closing.
  * acp.confirm(
- *   () => console.log('Confirmed!'),
+ *   async () => {
+ *     await deleteItem(); // dialog is pending (OK disabled) until this settles
+ *     acp.shift();
+ *   },
  *   { title: 'Delete?', content: 'This cannot be undone', variant: 'warn' }
  * );
  *
- * // Prompt for input
+ * // Prompt for input. Same rule: shift when done.
  * acp.prompt(
- *   (value) => console.log('User entered:', value),
+ *   (value) => {
+ *     console.log('User entered:', value);
+ *     acp.shift();
+ *   },
  *   { title: 'Name', content: 'Enter your name', value: 'Default' }
  * );
  * ```
@@ -80,19 +103,30 @@ export class AlertConfirmPromptStack {
         o._id = Math.random().toString(36).slice(2);
         this.#stack.push(o);
     };
+    /** Removes the current dialog from the queue, revealing the next one (if any). */
     shift = () => this.#stack.shift();
+    /** Clears the whole queue. */
     reset = () => {
         this.#stack = [];
     };
+    /**
+     * Runs the current dialog's `onEscape` handler (which defaults to `shift`). Does
+     * nothing on an empty stack. The handler owns the close, exactly as with `onOk`
+     * and `onCancel`, so this does NOT shift on its own: a custom `onEscape` that
+     * does not shift keeps the dialog open, and one that does shift pops exactly one
+     * entry (not the one queued behind it as well).
+     */
     escape = () => {
-        this.#stack?.[0]?.onEscape?.();
-        this.shift();
+        return this.#stack[0]?.onEscape?.();
     };
+    /** Snapshot of the queue (current dialog first). */
     dump = () => {
         return [...this.#stack];
     };
     /**
-     * Main api.
+     * Queues an alert dialog (OK button only). With no `onOk`/`onEscape` given, both
+     * default to `shift`, so a plain alert closes itself. If you supply either, call
+     * `shift()` from it yourself.
      */
     alert = (o) => {
         if (typeof o === "string")
@@ -100,13 +134,19 @@ export class AlertConfirmPromptStack {
         this.#push({ ...(o || {}), type: AlertConfirmPromptType.ALERT });
     };
     /**
-     * Main api.
+     * Queues a confirm dialog (Cancel + OK). `onOk` owns the close: call `acp.shift()`
+     * from it when done (a returned promise keeps the dialog pending until it settles).
+     * `onCancel`/`onEscape` default to `shift`. For a self-closing, Promise-based
+     * confirm use {@link createConfirm}.
      */
     confirm = (onOk, o) => {
         this.#push({ onOk, value: false, ...o, type: AlertConfirmPromptType.CONFIRM });
     };
     /**
-     * Main api.
+     * Queues a prompt dialog (input + Cancel + OK). `onOk` receives the entered value
+     * and owns the close: call `acp.shift()` from it when done (a returned promise
+     * keeps the dialog pending until it settles). `onCancel`/`onEscape` default to
+     * `shift`. For a self-closing, Promise-based prompt use {@link createPrompt}.
      */
     prompt = (onOk, o) => {
         this.#push({ onOk, value: "", ...o, type: AlertConfirmPromptType.PROMPT });

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -7,13 +7,21 @@
 		class?: string;
 		classContent?: string;
 		classIcon?: string;
+		/**
+		 * Message content. Any THC form — a string, `{ text }`, `{ html }`, `{ component }`,
+		 * `{ snippet }` or a bare snippet — is handed to `Thc` as-is; an `Error` is rendered
+		 * as `String(error)`. Empty/nullish renders nothing.
+		 */
 		message: THC | Error | undefined | null;
 		intent?: MessageIntent;
+		/** Render a string or `{ text }` message via `{@html}` (snippets/components ignore it). */
 		forceAsHtml?: boolean;
 		duration?: number;
 		onDismiss?: (() => void) | null | false;
 		withIcon?: boolean;
 		iconFn?: (() => string) | false;
+		/** Accessible name (`aria-label` + `title`) of the built-in dismiss button. */
+		dismissLabel?: string;
 	}
 </script>
 
@@ -21,7 +29,7 @@
 	import { untrack } from "svelte";
 	import { slide } from "svelte/transition";
 	import { twMerge } from "../../utils/tw-merge.js";
-	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
+	import Thc, { getTHCStringContent, isTHCNotEmpty } from "../Thc/Thc.svelte";
 	import Button from "../Button/Button.svelte";
 	import {
 		iconAlertWarning,
@@ -48,22 +56,36 @@
 		onDismiss,
 		withIcon,
 		iconFn,
+		dismissLabel = "Dismiss",
 	}: Props = $props();
 
+	// Only the non-THC member of the union needs coercing. Every THC form is passed to
+	// `Thc` intact — `String()`-ing the whole union used to flatten the object forms to
+	// "[object Object]" and a snippet to its source text.
+	let _message: THC = $derived(
+		message instanceof Error ? String(message) : (message ?? "")
+	);
+
 	// Track dismissal in local state instead of mutating the (non-bindable) `message`
 	// prop. Mutating a destructured prop var creates a local shadow that Svelte 5
 	// won't always overwrite when the parent re-passes the same value — so a user
 	// who dismissed an error would never see the SAME error message again, even
 	// after the parent re-set it. Keeping `_dismissed` separate sidesteps that and
 	// makes the dismiss state reset cleanly whenever the message changes.
-	let _message = $derived(message ? String(message) : "");
 	let _dismissed = $state(false);
 	let _show = $derived(isTHCNotEmpty(_message) && !_dismissed);
 
 	// Reset the dismissed flag whenever the message changes — a new (or re-set)
 	// message from the parent should re-show, even if the user previously dismissed.
+	//
+	// Keyed on the string content where there is one (string, Error, `{ text }`,
+	// `{ html }`), so an inline object literal — a new object on every parent render —
+	// does not re-show a dismissed message on unrelated state changes. Component and
+	// snippet forms have no string content and fall back to identity: a re-created
+	// snippet is a message rebuilt from new data and re-shows.
+	let _resetKey = $derived(getTHCStringContent(_message) || _message);
 	$effect(() => {
-		void _message;
+		void _resetKey;
 		untrack(() => {
 			if (_dismissed) _dismissed = false;
 		});
@@ -110,6 +132,8 @@
 					roundedFull
 					size="sm"
 					type="button"
+					title={dismissLabel}
+					aria-label={dismissLabel}
 					onclick={() => _onDismiss()}
 				/>
 			</div>

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

@@ -4,13 +4,21 @@ export interface Props {
     class?: string;
     classContent?: string;
     classIcon?: string;
+    /**
+     * Message content. Any THC form — a string, `{ text }`, `{ html }`, `{ component }`,
+     * `{ snippet }` or a bare snippet — is handed to `Thc` as-is; an `Error` is rendered
+     * as `String(error)`. Empty/nullish renders nothing.
+     */
     message: THC | Error | undefined | null;
     intent?: MessageIntent;
+    /** Render a string or `{ text }` message via `{@html}` (snippets/components ignore it). */
     forceAsHtml?: boolean;
     duration?: number;
     onDismiss?: (() => void) | null | false;
     withIcon?: boolean;
     iconFn?: (() => string) | false;
+    /** Accessible name (`aria-label` + `title`) of the built-in dismiss button. */
+    dismissLabel?: string;
 }
 declare const DismissibleMessage: import("svelte").Component<Props, {}, "">;
 type DismissibleMessage = ReturnType<typeof DismissibleMessage>;

package/dist/components/DismissibleMessage/README.md

@@ -4,15 +4,29 @@ A dismissible alert/message component with semantic intents and slide transition
 
 ## Props
 
-| Prop           | Type                                                | Default | Description                                        |
-| -------------- | --------------------------------------------------- | ------- | -------------------------------------------------- |
-| `message`      | `THC \| Error`                                      | -       | Message content (string, HTML, or Error object)    |
-| `intent`       | `"destructive" \| "warning" \| "success" \| "info"` | -       | Semantic color intent                              |
-| `forceAsHtml`  | `boolean`                                           | `true`  | Render message as HTML                             |
-| `duration`     | `number`                                            | `150`   | Slide transition duration (ms)                     |
-| `onDismiss`    | `(() => void) \| null \| false`                     | -       | Dismiss callback (set to `false` to hide X button) |
-| `class`        | `string`                                            | -       | CSS for container                                  |
-| `classContent` | `string`                                            | -       | CSS for content area                               |
+| Prop           | Type                                                | Default     | Description                                                                                                                                                           |
+| -------------- | --------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `message`      | `THC \| Error \| null \| undefined`                 | -           | Message content: any [THC](../Thc/README.md) form (string, `{ text }`, `{ html }`, `{ component }`, `{ snippet }`, bare snippet) or an `Error`. Empty renders nothing |
+| `intent`       | `"destructive" \| "warning" \| "success" \| "info"` | -           | Semantic color intent                                                                                                                                                 |
+| `forceAsHtml`  | `boolean`                                           | `true`      | Render a string or `{ text }` message via `{@html}`; snippets and components are unaffected                                                                           |
+| `duration`     | `number`                                            | `150`       | Slide transition duration (ms)                                                                                                                                        |
+| `onDismiss`    | `(() => void) \| null \| false`                     | -           | Dismiss callback (set to `false` to hide X button)                                                                                                                    |
+| `dismissLabel` | `string`                                            | `"Dismiss"` | Accessible name (`aria-label` + `title`) of the built-in dismiss button                                                                                               |
+| `withIcon`     | `boolean`                                           | -           | Show the default icon for the current `intent`                                                                                                                        |
+| `iconFn`       | `(() => string) \| false`                           | -           | Custom icon (returns an SVG string); `false` hides the icon                                                                                                           |
+| `class`        | `string`                                            | -           | CSS for container                                                                                                                                                     |
+| `classContent` | `string`                                            | -           | CSS for content area                                                                                                                                                  |
+| `classIcon`    | `string`                                            | -           | CSS for icon area                                                                                                                                                     |
+
+`message` is a THC, so anything `Thc` renders works: a string, `{ text }`, `{ html }`,
+`{ component, props }`, `{ snippet }` or a bare snippet. An `Error` is rendered as
+`String(error)` (i.e. `Error: <message>`).
+
+Dismissing hides the message locally; the dismissed state resets when the message changes.
+For string, `{ text }`, `{ html }` and `Error` messages "changes" means different text — an
+inline `{ text: t("saved") }` literal re-created on every parent render does **not** re-show a
+dismissed message. Snippet and component messages have no text to compare, so they are keyed
+on identity: a re-created snippet re-shows.
 
 ## Usage
 
@@ -51,6 +65,58 @@ A dismissible alert/message component with semantic intents and slide transition
 <DismissibleMessage message="New features are available" intent="info" />
 ```
 
+### Snippet Content (with an action button)
+
+Any THC form works as the message, so a banner that needs an action inside the alert is a
+snippet — no need to re-implement the alert markup:
+
+```svelte
+<script lang="ts">
+	import { Button, DismissibleMessage } from "@marianmeres/stuic";
+
+	let sending = $state(false);
+
+	async function resend() {
+		sending = true;
+		try {
+			await api.resendVerificationEmail();
+		} finally {
+			sending = false;
+		}
+	}
+</script>
+
+{#snippet body()}
+	<span class="flex-1">Your email address is not verified.</span>
+	<Button size="sm" variant="outline" disabled={sending} onclick={resend}>Resend</Button>
+{/snippet}
+
+<DismissibleMessage
+	message={body}
+	intent="warning"
+	withIcon
+	classContent="flex flex-wrap items-center gap-x-4 gap-y-2"
+	dismissLabel="Dismiss"
+/>
+```
+
+### Other THC Forms
+
+```svelte
+<!-- explicit text (rendered via {@html} under the default forceAsHtml — pass
+     forceAsHtml={false} to escape it) -->
+<DismissibleMessage message={{ text: "Operation completed" }} intent="success" />
+
+<!-- html -->
+<DismissibleMessage message={{ html: "<b>Saved.</b> You can close this tab." }} />
+
+<!-- component -->
+<DismissibleMessage
+	message={{ component: QuotaWarning, props: { used: 95 } }}
+	intent="warning"
+/>
+```
+
 ### Non-Dismissible
 
 ```svelte

package/dist/components/Thc/README.md

@@ -114,5 +114,5 @@ Many stuic components accept THC for labels and content:
 	description={{ html: "Enter your <strong>unique</strong> username" }}
 />
 
-<DismissibleMessage message={{ text: "Operation completed" }} theme="green" />
+<DismissibleMessage message={{ text: "Operation completed" }} intent="success" />
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.176.0",
+	"version": "3.178.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -141,8 +141,8 @@
 		"@codemirror/lang-markdown": "^6.5.2",
 		"@codemirror/language": "^6.12.4",
 		"@codemirror/language-data": "^6.5.2",
-		"@codemirror/state": "^6.7.2",
-		"@codemirror/view": "^6.43.10",
+		"@codemirror/state": "^6.7.4",
+		"@codemirror/view": "^6.43.11",
 		"@eslint/js": "^9.39.5",
 		"@marianmeres/random-human-readable": "^1.10.2",
 		"@marianmeres/trend-chart": "^0.5.0",
@@ -168,7 +168,7 @@
 		"dotenv": "^16.6.1",
 		"eslint": "^9.39.5",
 		"globals": "^16.5.0",
-		"playwright": "^1.62.1",
+		"playwright": "^1.63.0",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^3.5.2",
 		"publint": "^0.3.24",
@@ -187,7 +187,7 @@
 		"@marianmeres/clog": "^3.21.0",
 		"@marianmeres/countries": "^1.1.0",
 		"@marianmeres/cron-parser": "^1.0.1",
-		"@marianmeres/design-tokens": "^1.18.0",
+		"@marianmeres/design-tokens": "^1.20.0",
 		"@marianmeres/icons-fns": "^6.0.0",
 		"@marianmeres/item-collection": "^1.4.2",
 		"@marianmeres/paging-store": "^2.1.1",