entasis 0.13.4 → 0.13.6

package/dist/components/Form/MultiStepForm/multiStepForm.state.svelte.d.ts

@@ -437,6 +437,40 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
         [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | (Omit<{
+        type: "signature";
+    } & Omit<import("../Field/field.ts").InputProps<"signature">, "theme"> & {
+        format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
+        inkColor?: string;
+        strokeWidth?: number;
+        placeholder?: string;
+        clearLabel?: string;
+        undoLabel?: string;
+        i18n?: Partial<import("../../../i18n/en.ts").Messages>;
+        theme?: import("../SignatureInput/signatureInput.theme.ts").SignatureInputThemeProps & import("../Field/field.ts").InputProps<"signature">["theme"];
+    } & import("../../../types/props.ts").DataAttributes & {
+        [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
+    }, "visible"> & {
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | (Omit<{
+        type: "address";
+    } & Omit<import("../Field/field.ts").InputProps<"address">, "theme" | "placeholder"> & {
+        provider?: import("../../Address/address.ts").AddressProvider | null;
+        fields?: readonly import("../AddressInput/addressInput.props.ts").AddressFieldRow[];
+        editableFields?: readonly import("../../Address/address.ts").AddressField[];
+        requiredFields?: readonly import("../../Address/address.ts").AddressField[];
+        countries?: readonly string[];
+        defaultCountry?: string;
+        layout?: import("../AddressInput/addressInput.props.ts").AddressInputLayout;
+        minSearchLength?: number;
+        placeholder?: string;
+        onResolve?: (address: import("../../Address/address.ts").Address) => void;
+        i18n?: Partial<import("../../../i18n/en.ts").Messages>;
+        theme?: import("../AddressInput/addressInput.theme.ts").AddressInputThemeProps & import("../Field/field.ts").InputProps<"address">["theme"];
+    } & import("../../../types/props.ts").DataAttributes & {
+        [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
+    }, "visible"> & {
+        visible?: boolean | ((value: FormValueRecord) => boolean);
     }) | (Omit<{
         type: "slider";
     } & Omit<import("../Field/field.ts").InputProps<"slider">, "onValueChange" | "value" | "defaultValue" | "onValidate"> & {
@@ -1288,6 +1322,40 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
         [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | (Omit<{
+        type: "signature";
+    } & Omit<import("../Field/field.ts").InputProps<"signature">, "theme"> & {
+        format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
+        inkColor?: string;
+        strokeWidth?: number;
+        placeholder?: string;
+        clearLabel?: string;
+        undoLabel?: string;
+        i18n?: Partial<import("../../../i18n/en.ts").Messages>;
+        theme?: import("../SignatureInput/signatureInput.theme.ts").SignatureInputThemeProps & import("../Field/field.ts").InputProps<"signature">["theme"];
+    } & import("../../../types/props.ts").DataAttributes & {
+        [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
+    }, "visible"> & {
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | (Omit<{
+        type: "address";
+    } & Omit<import("../Field/field.ts").InputProps<"address">, "theme" | "placeholder"> & {
+        provider?: import("../../Address/address.ts").AddressProvider | null;
+        fields?: readonly import("../AddressInput/addressInput.props.ts").AddressFieldRow[];
+        editableFields?: readonly import("../../Address/address.ts").AddressField[];
+        requiredFields?: readonly import("../../Address/address.ts").AddressField[];
+        countries?: readonly string[];
+        defaultCountry?: string;
+        layout?: import("../AddressInput/addressInput.props.ts").AddressInputLayout;
+        minSearchLength?: number;
+        placeholder?: string;
+        onResolve?: (address: import("../../Address/address.ts").Address) => void;
+        i18n?: Partial<import("../../../i18n/en.ts").Messages>;
+        theme?: import("../AddressInput/addressInput.theme.ts").AddressInputThemeProps & import("../Field/field.ts").InputProps<"address">["theme"];
+    } & import("../../../types/props.ts").DataAttributes & {
+        [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
+    }, "visible"> & {
+        visible?: boolean | ((value: FormValueRecord) => boolean);
     }) | (Omit<{
         type: "slider";
     } & Omit<import("../Field/field.ts").InputProps<"slider">, "onValueChange" | "value" | "defaultValue" | "onValidate"> & {
@@ -2335,6 +2403,40 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
         [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | (Omit<{
+        type: "signature";
+    } & Omit<import("../Field/field.ts").InputProps<"signature">, "theme"> & {
+        format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
+        inkColor?: string;
+        strokeWidth?: number;
+        placeholder?: string;
+        clearLabel?: string;
+        undoLabel?: string;
+        i18n?: Partial<import("../../../i18n/en.ts").Messages>;
+        theme?: import("../SignatureInput/signatureInput.theme.ts").SignatureInputThemeProps & import("../Field/field.ts").InputProps<"signature">["theme"];
+    } & import("../../../types/props.ts").DataAttributes & {
+        [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
+    }, "visible"> & {
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | (Omit<{
+        type: "address";
+    } & Omit<import("../Field/field.ts").InputProps<"address">, "theme" | "placeholder"> & {
+        provider?: import("../../Address/address.ts").AddressProvider | null;
+        fields?: readonly import("../AddressInput/addressInput.props.ts").AddressFieldRow[];
+        editableFields?: readonly import("../../Address/address.ts").AddressField[];
+        requiredFields?: readonly import("../../Address/address.ts").AddressField[];
+        countries?: readonly string[];
+        defaultCountry?: string;
+        layout?: import("../AddressInput/addressInput.props.ts").AddressInputLayout;
+        minSearchLength?: number;
+        placeholder?: string;
+        onResolve?: (address: import("../../Address/address.ts").Address) => void;
+        i18n?: Partial<import("../../../i18n/en.ts").Messages>;
+        theme?: import("../AddressInput/addressInput.theme.ts").AddressInputThemeProps & import("../Field/field.ts").InputProps<"address">["theme"];
+    } & import("../../../types/props.ts").DataAttributes & {
+        [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
+    }, "visible"> & {
+        visible?: boolean | ((value: FormValueRecord) => boolean);
     }) | (Omit<{
         type: "slider";
     } & Omit<import("../Field/field.ts").InputProps<"slider">, "onValueChange" | "value" | "defaultValue" | "onValidate"> & {
@@ -3186,6 +3288,40 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
         [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | (Omit<{
+        type: "signature";
+    } & Omit<import("../Field/field.ts").InputProps<"signature">, "theme"> & {
+        format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
+        inkColor?: string;
+        strokeWidth?: number;
+        placeholder?: string;
+        clearLabel?: string;
+        undoLabel?: string;
+        i18n?: Partial<import("../../../i18n/en.ts").Messages>;
+        theme?: import("../SignatureInput/signatureInput.theme.ts").SignatureInputThemeProps & import("../Field/field.ts").InputProps<"signature">["theme"];
+    } & import("../../../types/props.ts").DataAttributes & {
+        [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
+    }, "visible"> & {
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | (Omit<{
+        type: "address";
+    } & Omit<import("../Field/field.ts").InputProps<"address">, "theme" | "placeholder"> & {
+        provider?: import("../../Address/address.ts").AddressProvider | null;
+        fields?: readonly import("../AddressInput/addressInput.props.ts").AddressFieldRow[];
+        editableFields?: readonly import("../../Address/address.ts").AddressField[];
+        requiredFields?: readonly import("../../Address/address.ts").AddressField[];
+        countries?: readonly string[];
+        defaultCountry?: string;
+        layout?: import("../AddressInput/addressInput.props.ts").AddressInputLayout;
+        minSearchLength?: number;
+        placeholder?: string;
+        onResolve?: (address: import("../../Address/address.ts").Address) => void;
+        i18n?: Partial<import("../../../i18n/en.ts").Messages>;
+        theme?: import("../AddressInput/addressInput.theme.ts").AddressInputThemeProps & import("../Field/field.ts").InputProps<"address">["theme"];
+    } & import("../../../types/props.ts").DataAttributes & {
+        [key: symbol]: import("svelte/attachments").Attachment<HTMLElement> | null | undefined;
+    }, "visible"> & {
+        visible?: boolean | ((value: FormValueRecord) => boolean);
     }) | (Omit<{
         type: "slider";
     } & Omit<import("../Field/field.ts").InputProps<"slider">, "onValueChange" | "value" | "defaultValue" | "onValidate"> & {

package/dist/components/Form/SignatureInput/SignatureInput.svelte

@@ -0,0 +1,327 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import Button from '../../Button/Button.svelte';
+	import { arrowCounterClockwiseIcon } from '../../Icons/arrowCounterClockwise.js';
+	import { eraserIcon } from '../../Icons/eraser.js';
+	import { tooltip } from '../../Tooltip/tooltip.attachment.svelte.js';
+	import Field from '../Field/Field.svelte';
+	import FieldHiddenInputs from '../Field/FieldHiddenInputs.svelte';
+	import { createFieldState } from '../Field/field.state.svelte.js';
+	import { useI18n } from '../../../i18n/context.svelte.js';
+	import type { SignatureInputProps } from './signatureInput.props.js';
+	import {
+		exportStrokes,
+		strokeShapes,
+		type SignaturePoint,
+		type SignatureStroke
+	} from './signatureInput.strokes.js';
+	import { useSignatureInputTheme } from './signatureInput.theme.js';
+
+	let {
+		defaultValue = null,
+		value = $bindable(),
+		errors = $bindable([]),
+		focused = $bindable(false),
+		required = false,
+		disabled,
+		readOnly,
+		messages,
+		name,
+		onValidate,
+		onValueChange,
+		visible,
+		size = 'normal',
+		format = 'png',
+		inkColor = '#000000',
+		strokeWidth = 2.5,
+		placeholder,
+		clearLabel,
+		undoLabel,
+		i18n,
+		label,
+		theme,
+		...rest
+	}: SignatureInputProps = $props();
+	if (value === undefined) value = untrack(() => defaultValue);
+
+	const id = $props.id();
+	const statusId = `${id}-status`;
+
+	const field = createFieldState({
+		id,
+		get value() {
+			return value;
+		},
+		set value(nextValue) {
+			value = nextValue;
+		},
+		get errors() {
+			return errors;
+		},
+		set errors(nextErrors: string[] | boolean) {
+			errors = nextErrors;
+		},
+		get focused() {
+			return focused;
+		},
+		set focused(nextFocused: boolean) {
+			focused = nextFocused;
+		},
+		onValueChange: (nextValue) => onValueChange?.(nextValue),
+		get disabled() {
+			return disabled;
+		},
+		set disabled(nextDisabled: boolean | undefined) {
+			disabled = nextDisabled;
+		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
+		get required() {
+			return required;
+		},
+		get name() {
+			return name;
+		},
+		set name(nextName: string | undefined) {
+			name = nextName;
+		},
+		get onValidate() {
+			return onValidate;
+		},
+		get visible() {
+			return visible;
+		},
+		type: 'signature'
+	});
+
+	const t = $derived(useI18n(i18n));
+	const classes = $derived(useSignatureInputTheme(theme));
+	const interactive = $derived(!field.disabled && !field.readOnly);
+	const resolvedClearLabel = $derived(clearLabel ?? t.signatureInputClear);
+	const resolvedUndoLabel = $derived(undoLabel ?? t.signatureInputUndo);
+
+	/** Finished strokes, drawn since the pad was last cleared. */
+	let strokes = $state<SignatureStroke[]>([]);
+	/** The stroke under the pointer, until the pointer is lifted. */
+	let current = $state<SignaturePoint[] | null>(null);
+	/** The value these strokes exported. Any other value came from outside. */
+	let exported = $state<string | null>(null);
+
+	// A value from outside (a saved signature, a reset) replaces the strokes: they no longer
+	// describe it, so it shows as an image until someone draws again.
+	$effect(() => {
+		const nextValue = field.value ?? null;
+		untrack(() => {
+			if (nextValue === exported) return;
+			strokes = [];
+			current = null;
+			exported = null;
+		});
+	});
+
+	const hasInk = $derived(strokes.length > 0 || current !== null);
+	const image = $derived(hasInk ? null : (field.value ?? null));
+	const shapes = $derived(
+		[...strokes, ...(current ? [current] : [])].flatMap((stroke) =>
+			strokeShapes(stroke, strokeWidth)
+		)
+	);
+
+	let pad = $state<HTMLDivElement | null>(null);
+	let pointerId: number | null = null;
+
+	const pointFrom = (event: PointerEvent): SignaturePoint => {
+		const box = pad!.getBoundingClientRect();
+		return {
+			x: event.clientX - box.left,
+			y: event.clientY - box.top,
+			pressure: event.pointerType === 'pen' && event.pressure > 0 ? event.pressure : 0.5
+		};
+	};
+
+	const commit = () => {
+		const next = exportStrokes(strokes, {
+			format,
+			color: inkColor,
+			width: strokeWidth,
+			padding: strokeWidth * 2,
+			scale: 2
+		});
+		exported = next;
+		field.setValue(next);
+	};
+
+	const finishStroke = () => {
+		if (!current) return;
+		strokes = [...strokes, current];
+		current = null;
+		pointerId = null;
+		commit();
+	};
+
+	const undo = () => {
+		if (!interactive || strokes.length === 0) return;
+		strokes = strokes.slice(0, -1);
+		commit();
+	};
+
+	const clear = () => {
+		if (!interactive || (!hasInk && !field.value)) return;
+		strokes = [];
+		current = null;
+		exported = null;
+		field.setValue(null);
+		pad?.focus();
+	};
+
+	const onpointerdown = (event: PointerEvent) => {
+		if (!interactive || !pad || current) return;
+		if (event.pointerType === 'mouse' && event.button !== 0) return;
+		// The pad's `touch-action: none` and `user-select: none` keep the page from scrolling or
+		// selecting under the stroke. The default is not prevented, so the browser focuses the pad
+		// as for any click, without a keyboard focus ring.
+		pointerId = event.pointerId;
+		pad.setPointerCapture?.(event.pointerId);
+		current = [pointFrom(event)];
+	};
+
+	const onpointermove = (event: PointerEvent) => {
+		if (!current || event.pointerId !== pointerId) return;
+		// Coalesced events carry the samples between frames, so a fast stroke stays round.
+		const samples = event.getCoalescedEvents?.() ?? [];
+		const next = [...current];
+		for (const sample of samples.length ? samples : [event]) {
+			const point = pointFrom(sample);
+			const last = next[next.length - 1]!;
+			if (Math.hypot(point.x - last.x, point.y - last.y) >= 1) next.push(point);
+		}
+		current = next;
+	};
+
+	const onpointerup = (event: PointerEvent) => {
+		if (event.pointerId === pointerId) finishStroke();
+	};
+
+	// Delete or Backspace clears the pad, Ctrl/Cmd+Z undoes the last stroke.
+	const onkeydown = (event: KeyboardEvent) => {
+		if (!interactive) return;
+		if (event.key === 'Delete' || event.key === 'Backspace') {
+			if (!hasInk && !field.value) return;
+			event.preventDefault();
+			clear();
+		} else if ((event.ctrlKey || event.metaKey) && !event.shiftKey && event.key === 'z') {
+			if (strokes.length === 0) return;
+			event.preventDefault();
+			undo();
+		}
+	};
+
+	// A pad disabled or made read-only mid-stroke drops the stroke it was drawing.
+	$effect(() => {
+		if (interactive) return;
+		untrack(() => {
+			current = null;
+			pointerId = null;
+		});
+	});
+</script>
+
+<Field {field} {size} {theme} {label} labelFor={false} {...rest}>
+	<div data-slot="signature-frame" class={classes.frame()}>
+		<!-- The pad is the field's control: it takes focus and carries the label, the state and the
+	     errors. Drawing is a pointer gesture; the buttons and the keys clear or undo it. -->
+		<div
+			bind:this={pad}
+			{@attach (node) => {
+				field.node = node;
+				return () => {
+					if (field.node === node) field.node = null;
+				};
+			}}
+			{id}
+			data-slot="signature-pad"
+			data-filled={field.value ? 'true' : undefined}
+			data-drawing={current ? 'true' : undefined}
+			role="img"
+			tabindex={field.disabled ? -1 : 0}
+			aria-label={label ? undefined : t.signatureInput}
+			aria-describedby={statusId}
+			aria-disabled={field.disabled || undefined}
+			class={classes.pad({
+				size,
+				interactive,
+				disabled: !!field.disabled,
+				hasError: field.hasError
+			})}
+			{onpointerdown}
+			{onpointermove}
+			{onpointerup}
+			onpointercancel={onpointerup}
+			onlostpointercapture={onpointerup}
+			{onkeydown}
+			onfocus={() => (field.focused = true)}
+			onblur={() => (field.focused = false)}
+		>
+			{#if !hasInk && !image}
+				<div
+					data-slot="signature-placeholder"
+					class={classes.placeholder({ size })}
+					aria-hidden="true"
+				>
+					<span>×</span>
+					<span>{placeholder ?? t.signatureInputPlaceholder}</span>
+				</div>
+			{/if}
+			{#if image}
+				<img data-slot="signature-image" src={image} alt="" class={classes.image()} />
+			{/if}
+			<svg data-slot="signature-ink" class={classes.ink()} aria-hidden="true" focusable="false">
+				<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+					{#each shapes as shape, index (index)}
+						{#if shape.kind === 'dot'}
+							<circle cx={shape.x} cy={shape.y} r={shape.r} fill="currentColor" stroke="none" />
+						{:else}
+							<path d={shape.d} stroke-width={shape.width} />
+						{/if}
+					{/each}
+				</g>
+			</svg>
+			<span id={statusId} class="sr-only">
+				{field.value ? t.signatureInputSigned : t.signatureInputEmpty}
+			</span>
+		</div>
+		{#if interactive && (hasInk || image)}
+			<div data-slot="signature-actions" class={classes.actions()}>
+				{#if strokes.length > 0}
+					<Button
+						variant="ghost"
+						color="neutral"
+						size="small"
+						squared
+						label={resolvedUndoLabel}
+						onclick={undo}
+						{@attach tooltip({ content: resolvedUndoLabel, position: 'top', size: 'small' })}
+					>
+						{@render arrowCounterClockwiseIcon({ size: 14 })}
+					</Button>
+				{/if}
+				<Button
+					variant="ghost"
+					color="neutral"
+					size="small"
+					squared
+					label={resolvedClearLabel}
+					onclick={clear}
+					{@attach tooltip({ content: resolvedClearLabel, position: 'top', size: 'small' })}
+				>
+					{@render eraserIcon({ size: 14 })}
+				</Button>
+			</div>
+		{/if}
+	</div>
+	<FieldHiddenInputs {field} value={field.value} />
+</Field>

package/dist/components/Form/SignatureInput/SignatureInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SignatureInputProps } from './signatureInput.props.js';
+declare const SignatureInput: import("svelte").Component<SignatureInputProps, {}, "value" | "errors" | "focused">;
+type SignatureInput = ReturnType<typeof SignatureInput>;
+export default SignatureInput;

package/dist/components/Form/SignatureInput/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SignatureInput } from './SignatureInput.svelte';
+export type { SignatureInputProps } from './signatureInput.props.js';
+export type { SignatureFormat, SignaturePoint, SignatureStroke } from './signatureInput.strokes.js';
+export { signatureInputTheme, setSignatureInputTheme, useSignatureInputTheme, type SignatureInputTheme, type SignatureInputThemeProps } from './signatureInput.theme.js';

package/dist/components/Form/SignatureInput/index.js

@@ -0,0 +1,2 @@
+export { default as SignatureInput } from './SignatureInput.svelte';
+export { signatureInputTheme, setSignatureInputTheme, useSignatureInputTheme } from './signatureInput.theme.js';

package/dist/components/Form/SignatureInput/signatureInput.mcp.d.ts

@@ -0,0 +1 @@
+export declare const signatureInputDescription = "\n# SignatureInput Component\n\nSignatureInput is a form field where a person signs with a mouse, a finger or a pen. Its value is the signature as an image: a data URL cropped to the ink (PNG by default, or SVG), ready to store, submit or place in a document.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import { SignatureInput } from './index.ts';\n\n  let signature = $state<string | null>(null);\n</script>\n\n<SignatureInput label=\"Signature\" required bind:value={signature} />\n```\n\nIn a Form or `ask()`, use `type: 'signature'`:\n\n```ts\nimport { ask } from 'entasis/ask';\n\nconst result = await ask({\n  title: 'Sign the mandate',\n  inputs: { signature: { type: 'signature', label: 'Signature', required: true } },\n  confirm: 'Sign',\n  cancel: 'Cancel'\n});\n```\n\n## Props\n\nExtends the shared Field props (`label`, `description`, `helper`, `required`, `disabled`, `readOnly`, `name`, `size`, `density`, `labelPosition`, `messages`, `onValidate`, `errors`, `focused`, `visible`) plus:\n\n- **value**: `string | null` (bindable) \u2014 the signature as a data URL, or `null` while the pad is empty.\n- **defaultValue**: `string | null` \u2014 initial value when `value` is omitted. Any image data URL works: a saved signature shows in the pad, scaled to fit.\n- **onValueChange**: `(value: string | null) => void` \u2014 called once per finished stroke, undo and clear.\n- **format**: `'png' | 'svg'` (default `'png'`) \u2014 the image the value holds. A PNG is drawn at twice the pad's resolution; an SVG keeps every stroke as a vector path.\n- **inkColor**: `string` (default `'#000000'`) \u2014 CSS color of the ink in the exported image, so a signature reads on a white document whatever the app's theme. The pad itself draws in the theme's text color.\n- **strokeWidth**: `number` (default `2.5`) \u2014 line width in CSS pixels at a medium pen pressure. A pen's pressure makes the line thinner or thicker (half to one and a half times); a mouse or a finger draws at this width.\n- **placeholder**: `string` \u2014 hint on the signing line while the pad is empty. Defaults to the i18n `signatureInputPlaceholder` (\"Sign here\").\n- **clearLabel**, **undoLabel**: `string` \u2014 accessible labels and tooltips of the two buttons.\n- **i18n**: `Partial<Messages>` \u2014 per-instance translations.\n- **size**: `'small' | 'normal' | 'large'` \u2014 pad height (112, 144 or 176 px) and placeholder text size. Override the height with the `pad` theme part.\n- **theme**: `SignatureInputThemeProps` and Field theme parts.\n\n## Behaviour\n\n- Each stroke runs from pointer down to pointer up and is smoothed through its samples. The value updates when a stroke ends, not while it is drawn.\n- The undo button (or Ctrl/Cmd+Z on the pad) removes the last stroke; the clear button (or Delete/Backspace on the pad) empties the pad and sets the value to `null`. Both show only while the pad is editable and has a signature.\n- A value set from outside (a saved signature, a Form reset) replaces the strokes and shows as an image. Drawing over it starts a new signature: the image is replaced, not added to. Undo only steps back through strokes drawn since.\n- `disabled` and `readOnly` stop drawing and hide the buttons; a read-only pad still shows, focuses, validates and submits its value. A stroke in progress is dropped when the pad becomes disabled or read-only.\n- Required: an empty pad (`null` or `''`) fails `required`.\n- Native forms: a hidden input (`FieldHiddenInputs`) submits the data URL under `name`.\n\n## Accessibility\n\n- The pad is the field's control: it is focusable, labelled by the field label (or \"Signature\" without one), and has `role=\"img\"` with a description of its state (\"No signature yet\u2026\" or \"Signed.\"). Errors and descriptions are linked by Field.\n- Drawing is a path-based gesture with no keyboard equivalent: signing by hand is the purpose of the field. Keyboard users can clear and undo with the buttons and keys above. When a keyboard-only path to consent is needed, pair the pad with another field (a typed full name, a consent checkbox).\n- The ink, placeholder and image are decorative (`aria-hidden`, empty `alt`).\n\n## Styling hooks\n\n- `data-slot`: `signature-frame`, `signature-pad`, `signature-ink`, `signature-image`, `signature-placeholder`, `signature-actions`.\n- On the pad: `data-filled=\"true\"` while it holds a signature, `data-drawing=\"true\"` during a stroke.\n\n## Theme parts\n\n`frame` (the pad and its buttons), `pad` (variants `size`, `interactive`, `disabled`, `hasError`), `ink` (the SVG of strokes), `image` (a value set from outside), `placeholder` (the signing line and hint), `actions` (the undo and clear buttons).\n\n## Exports\n\n`SignatureInput`, `SignatureInputProps`, `SignatureFormat`, `SignaturePoint`, `SignatureStroke`, `signatureInputTheme`, `setSignatureInputTheme`, `useSignatureInputTheme`, `SignatureInputTheme`, `SignatureInputThemeProps`.\n";

package/dist/components/Form/SignatureInput/signatureInput.mcp.js

@@ -0,0 +1,74 @@
+export const signatureInputDescription = `
+# SignatureInput Component
+
+SignatureInput is a form field where a person signs with a mouse, a finger or a pen. Its value is the signature as an image: a data URL cropped to the ink (PNG by default, or SVG), ready to store, submit or place in a document.
+
+## Basic usage
+
+\`\`\`svelte
+<script lang="ts">
+  import { SignatureInput } from './index.ts';
+
+  let signature = $state<string | null>(null);
+</script>
+
+<SignatureInput label="Signature" required bind:value={signature} />
+\`\`\`
+
+In a Form or \`ask()\`, use \`type: 'signature'\`:
+
+\`\`\`ts
+import { ask } from '../Ask/index.ts';
+
+const result = await ask({
+  title: 'Sign the mandate',
+  inputs: { signature: { type: 'signature', label: 'Signature', required: true } },
+  confirm: 'Sign',
+  cancel: 'Cancel'
+});
+\`\`\`
+
+## Props
+
+Extends the shared Field props (\`label\`, \`description\`, \`helper\`, \`required\`, \`disabled\`, \`readOnly\`, \`name\`, \`size\`, \`density\`, \`labelPosition\`, \`messages\`, \`onValidate\`, \`errors\`, \`focused\`, \`visible\`) plus:
+
+- **value**: \`string | null\` (bindable) — the signature as a data URL, or \`null\` while the pad is empty.
+- **defaultValue**: \`string | null\` — initial value when \`value\` is omitted. Any image data URL works: a saved signature shows in the pad, scaled to fit.
+- **onValueChange**: \`(value: string | null) => void\` — called once per finished stroke, undo and clear.
+- **format**: \`'png' | 'svg'\` (default \`'png'\`) — the image the value holds. A PNG is drawn at twice the pad's resolution; an SVG keeps every stroke as a vector path.
+- **inkColor**: \`string\` (default \`'#000000'\`) — CSS color of the ink in the exported image, so a signature reads on a white document whatever the app's theme. The pad itself draws in the theme's text color.
+- **strokeWidth**: \`number\` (default \`2.5\`) — line width in CSS pixels at a medium pen pressure. A pen's pressure makes the line thinner or thicker (half to one and a half times); a mouse or a finger draws at this width.
+- **placeholder**: \`string\` — hint on the signing line while the pad is empty. Defaults to the i18n \`signatureInputPlaceholder\` ("Sign here").
+- **clearLabel**, **undoLabel**: \`string\` — accessible labels and tooltips of the two buttons.
+- **i18n**: \`Partial<Messages>\` — per-instance translations.
+- **size**: \`'small' | 'normal' | 'large'\` — pad height (112, 144 or 176 px) and placeholder text size. Override the height with the \`pad\` theme part.
+- **theme**: \`SignatureInputThemeProps\` and Field theme parts.
+
+## Behaviour
+
+- Each stroke runs from pointer down to pointer up and is smoothed through its samples. The value updates when a stroke ends, not while it is drawn.
+- The undo button (or Ctrl/Cmd+Z on the pad) removes the last stroke; the clear button (or Delete/Backspace on the pad) empties the pad and sets the value to \`null\`. Both show only while the pad is editable and has a signature.
+- A value set from outside (a saved signature, a Form reset) replaces the strokes and shows as an image. Drawing over it starts a new signature: the image is replaced, not added to. Undo only steps back through strokes drawn since.
+- \`disabled\` and \`readOnly\` stop drawing and hide the buttons; a read-only pad still shows, focuses, validates and submits its value. A stroke in progress is dropped when the pad becomes disabled or read-only.
+- Required: an empty pad (\`null\` or \`''\`) fails \`required\`.
+- Native forms: a hidden input (\`FieldHiddenInputs\`) submits the data URL under \`name\`.
+
+## Accessibility
+
+- The pad is the field's control: it is focusable, labelled by the field label (or "Signature" without one), and has \`role="img"\` with a description of its state ("No signature yet…" or "Signed."). Errors and descriptions are linked by Field.
+- Drawing is a path-based gesture with no keyboard equivalent: signing by hand is the purpose of the field. Keyboard users can clear and undo with the buttons and keys above. When a keyboard-only path to consent is needed, pair the pad with another field (a typed full name, a consent checkbox).
+- The ink, placeholder and image are decorative (\`aria-hidden\`, empty \`alt\`).
+
+## Styling hooks
+
+- \`data-slot\`: \`signature-frame\`, \`signature-pad\`, \`signature-ink\`, \`signature-image\`, \`signature-placeholder\`, \`signature-actions\`.
+- On the pad: \`data-filled="true"\` while it holds a signature, \`data-drawing="true"\` during a stroke.
+
+## Theme parts
+
+\`frame\` (the pad and its buttons), \`pad\` (variants \`size\`, \`interactive\`, \`disabled\`, \`hasError\`), \`ink\` (the SVG of strokes), \`image\` (a value set from outside), \`placeholder\` (the signing line and hint), \`actions\` (the undo and clear buttons).
+
+## Exports
+
+\`SignatureInput\`, \`SignatureInputProps\`, \`SignatureFormat\`, \`SignaturePoint\`, \`SignatureStroke\`, \`signatureInputTheme\`, \`setSignatureInputTheme\`, \`useSignatureInputTheme\`, \`SignatureInputTheme\`, \`SignatureInputThemeProps\`.
+`;

package/dist/components/Form/SignatureInput/signatureInput.props.d.ts

@@ -0,0 +1,29 @@
+import type { Messages } from '../../../i18n/en.js';
+import type { WithAttachments } from '../../../types/props.js';
+import type { InputProps } from '../Field/field.js';
+import type { SignatureFormat } from './signatureInput.strokes.js';
+import type { SignatureInputThemeProps } from './signatureInput.theme.js';
+export type SignatureInputProps = WithAttachments<Omit<InputProps<'signature'>, 'theme'> & {
+    /**
+     * Image the value holds, as a data URL cropped to the ink: `'png'` (default, drawn at twice
+     * the pad's resolution) or `'svg'`.
+     */
+    format?: SignatureFormat;
+    /**
+     * CSS color of the ink in the exported image. Defaults to black, so a signature reads on a
+     * white document whatever the app's theme; the pad itself draws in the theme's text color.
+     */
+    inkColor?: string;
+    /** Line width in CSS pixels at a medium pen pressure. Defaults to 2.5. */
+    strokeWidth?: number;
+    /** Hint on the signing line while the pad is empty. Defaults to the i18n `signatureInputPlaceholder`. */
+    placeholder?: string;
+    /** Accessible label and tooltip of the clear button. */
+    clearLabel?: string;
+    /** Accessible label and tooltip of the undo button. */
+    undoLabel?: string;
+    /** Per-instance translations merged over the global i18n catalog. */
+    i18n?: Partial<Messages>;
+    /** Theme overrides for the pad parts and the surrounding field. */
+    theme?: SignatureInputThemeProps & InputProps<'signature'>['theme'];
+}>;

package/dist/components/Form/SignatureInput/signatureInput.props.js

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