entasis 0.13.7 → 0.13.8

package/dist/components/Form/Form/form.state.svelte.d.ts

@@ -527,6 +527,7 @@ export declare class FormState<I extends FormInputs = FormInputs> {
     } & Omit<import("../Field/field.js").InputProps<"signature">, "theme"> & {
         format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
         inkColor?: string;
+        imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk;
         strokeWidth?: number;
         placeholder?: string;
         clearLabel?: string;
@@ -1412,6 +1413,7 @@ export declare class FormState<I extends FormInputs = FormInputs> {
     } & Omit<import("../Field/field.js").InputProps<"signature">, "theme"> & {
         format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
         inkColor?: string;
+        imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk;
         strokeWidth?: number;
         placeholder?: string;
         clearLabel?: string;
@@ -2493,6 +2495,7 @@ export declare class FormState<I extends FormInputs = FormInputs> {
     } & Omit<import("../Field/field.js").InputProps<"signature">, "theme"> & {
         format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
         inkColor?: string;
+        imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk;
         strokeWidth?: number;
         placeholder?: string;
         clearLabel?: string;
@@ -3378,6 +3381,7 @@ export declare class FormState<I extends FormInputs = FormInputs> {
     } & Omit<import("../Field/field.js").InputProps<"signature">, "theme"> & {
         format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
         inkColor?: string;
+        imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk;
         strokeWidth?: number;
         placeholder?: string;
         clearLabel?: string;

package/dist/components/Form/Form/visibility.d.ts

@@ -1400,6 +1400,7 @@ export declare function prepareInputProps(input: FormFieldInput, size: Sizes, la
     format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat | undefined;
     clearLabel?: string | undefined;
     inkColor?: string | undefined;
+    imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk | undefined;
     strokeWidth?: number | undefined;
     undoLabel?: string | undefined;
     display?: string;
@@ -7755,6 +7756,7 @@ export declare function prepareInputProps(input: FormFieldInput, size: Sizes, la
     format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat | undefined;
     clearLabel?: string | undefined;
     inkColor?: string | undefined;
+    imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk | undefined;
     strokeWidth?: number | undefined;
     undoLabel?: string | undefined;
     display?: string;

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

@@ -442,6 +442,7 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
     } & Omit<import("../Field/field.ts").InputProps<"signature">, "theme"> & {
         format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
         inkColor?: string;
+        imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk;
         strokeWidth?: number;
         placeholder?: string;
         clearLabel?: string;
@@ -1327,6 +1328,7 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
     } & Omit<import("../Field/field.ts").InputProps<"signature">, "theme"> & {
         format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
         inkColor?: string;
+        imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk;
         strokeWidth?: number;
         placeholder?: string;
         clearLabel?: string;
@@ -2408,6 +2410,7 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
     } & Omit<import("../Field/field.ts").InputProps<"signature">, "theme"> & {
         format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
         inkColor?: string;
+        imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk;
         strokeWidth?: number;
         placeholder?: string;
         clearLabel?: string;
@@ -3293,6 +3296,7 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
     } & Omit<import("../Field/field.ts").InputProps<"signature">, "theme"> & {
         format?: import("../SignatureInput/signatureInput.strokes.ts").SignatureFormat;
         inkColor?: string;
+        imageInk?: import("../SignatureInput/signatureInput.props.ts").SignatureImageInk;
         strokeWidth?: number;
         placeholder?: string;
         clearLabel?: string;

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

@@ -33,6 +33,7 @@
 		size = 'normal',
 		format = 'png',
 		inkColor = '#000000',
+		imageInk = 'theme',
 		strokeWidth = 2.5,
 		placeholder,
 		clearLabel,
@@ -125,6 +126,27 @@
 
 	const hasInk = $derived(strokes.length > 0 || current !== null);
 	const image = $derived(hasInk ? null : (field.value ?? null));
+
+	// A mask image is fetched in CORS mode: a URL from another origin that does not allow it would
+	// paint nothing. Such a URL is probed once and, when refused, shown as the image itself.
+	let refusedMask = $state<string | null>(null);
+	const ownsImage = (url: string) =>
+		/^(data|blob):/.test(url) || new URL(url, location.href).origin === location.origin;
+	$effect(() => {
+		if (imageInk !== 'theme' || !image || ownsImage(image)) return;
+		const probe = new Image();
+		probe.crossOrigin = 'anonymous';
+		probe.onerror = () => (refusedMask = image);
+		probe.src = image;
+		return () => {
+			probe.onerror = null;
+		};
+	});
+	const imageMode = $derived(imageInk === 'theme' && refusedMask !== image ? 'theme' : 'as-is');
+	// Quoted for `url()`: a data URL may hold characters CSS would end the string on.
+	const maskImage = $derived(
+		image ? `url("${image.replace(/["\\\n]/g, (char) => encodeURIComponent(char))}")` : undefined
+	);
 	const shapes = $derived(
 		[...strokes, ...(current ? [current] : [])].flatMap((stroke) =>
 			strokeShapes(stroke, strokeWidth)
@@ -277,7 +299,23 @@
 				</div>
 			{/if}
 			{#if image}
-				<img data-slot="signature-image" src={image} alt="" class={classes.image()} />
+				{#if imageMode === 'theme'}
+					<span
+						data-slot="signature-image"
+						data-ink="theme"
+						class={classes.image({ ink: 'theme' })}
+						style:mask-image={maskImage}
+						style:-webkit-mask-image={maskImage}
+					></span>
+				{:else}
+					<img
+						data-slot="signature-image"
+						data-ink="as-is"
+						src={image}
+						alt=""
+						class={classes.image({ ink: 'as-is' })}
+					/>
+				{/if}
 			{/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">

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

@@ -1,4 +1,4 @@
 export { default as SignatureInput } from './SignatureInput.svelte';
-export type { SignatureInputProps } from './signatureInput.props.js';
+export type { SignatureImageInk, 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/signatureInput.mcp.d.ts

@@ -1 +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";
+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- **imageInk**: `'theme' | 'as-is'` (default `'theme'`) \u2014 how a value set from outside (a saved signature) shows in the pad. `'theme'` paints its shape in the pad's ink color, like live strokes (the image becomes a CSS mask over `bg-current`; only its transparency counts), so a black signature saved for paper reads on a dark theme without the app knowing which mode is on. `'as-is'` shows the image unchanged: for a signature with several colors or an opaque background. The value is never changed. A URL from another origin is fetched in CORS mode for the mask; when that origin refuses CORS, the pad falls back to the image as it is.\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

@@ -37,6 +37,7 @@ Extends the shared Field props (\`label\`, \`description\`, \`helper\`, \`requir
 - **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.
+- **imageInk**: \`'theme' | 'as-is'\` (default \`'theme'\`) — how a value set from outside (a saved signature) shows in the pad. \`'theme'\` paints its shape in the pad's ink color, like live strokes (the image becomes a CSS mask over \`bg-current\`; only its transparency counts), so a black signature saved for paper reads on a dark theme without the app knowing which mode is on. \`'as-is'\` shows the image unchanged: for a signature with several colors or an opaque background. The value is never changed. A URL from another origin is fetched in CORS mode for the mask; when that origin refuses CORS, the pad falls back to the image as it is.
 - **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.

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

@@ -3,6 +3,7 @@ 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 SignatureImageInk = 'theme' | 'as-is';
 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
@@ -14,6 +15,14 @@ export type SignatureInputProps = WithAttachments<Omit<InputProps<'signature'>,
      * white document whatever the app's theme; the pad itself draws in the theme's text color.
      */
     inkColor?: string;
+    /**
+     * How a value set from outside (a saved signature) shows in the pad. `'theme'` (default)
+     * paints its shape in the pad's ink color, as live strokes are, so a black signature saved
+     * for paper still reads on a dark theme; only its transparency counts. `'as-is'` shows the
+     * image unchanged: for a signature with several colors or an opaque background. The value
+     * itself is never changed.
+     */
+    imageInk?: SignatureImageInk;
     /** 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`. */

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

@@ -21,7 +21,12 @@ export declare const signatureInputTheme: {
         };
     }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
     ink: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
-    image: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    image: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        ink: {
+            theme: string;
+            'as-is': string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
     placeholder: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
@@ -55,7 +60,12 @@ export declare const setSignatureInputTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
     ink: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
-    image: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    image: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        ink: {
+            theme: string;
+            'as-is': string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
     placeholder: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
@@ -87,7 +97,12 @@ export declare const useSignatureInputTheme: import("../../../utils/cva/theme.ts
         };
     }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
     ink: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
-    image: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    image: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        ink: {
+            theme: string;
+            'as-is': string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
     placeholder: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;

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

@@ -37,9 +37,20 @@ const defaultPad = cva({
 const defaultInk = cva({
     base: 'pointer-events-none absolute inset-0 size-full overflow-visible'
 });
-// A value set from outside (a saved signature) shows as an image, scaled to fit the pad.
+// A value set from outside (a saved signature) shows scaled to fit the pad. With `imageInk`
+// 'theme' it is a mask over the pad's ink color (`bg-current`), so a black signature saved for
+// paper reads on a dark surface; 'as-is' is the image itself.
 const defaultImage = cva({
-    base: 'pointer-events-none absolute inset-0 size-full object-contain p-md'
+    base: 'pointer-events-none absolute inset-0 size-full p-md',
+    variants: {
+        ink: {
+            theme: 'bg-current [mask-clip:content-box] [mask-origin:content-box] [mask-position:center] [mask-repeat:no-repeat] [mask-size:contain]',
+            'as-is': 'object-contain'
+        }
+    },
+    defaultVariants: {
+        ink: 'theme'
+    }
 });
 // The line to sign on and its hint: decorative, gone as soon as there is ink.
 const defaultPlaceholder = cva({

package/dist/generated/componentContract.d.ts

@@ -799,7 +799,7 @@ export declare const componentInventory: readonly [{
     readonly id: "signature-input";
     readonly subpath: "entasis/signature-input";
     readonly sourceIndex: "src/lib/components/Form/SignatureInput/index.ts";
-    readonly exportedSymbols: readonly ["SignatureFormat", "SignatureInput", "SignatureInputProps", "SignatureInputTheme", "SignatureInputThemeProps", "SignaturePoint", "SignatureStroke", "setSignatureInputTheme", "signatureInputTheme", "useSignatureInputTheme"];
+    readonly exportedSymbols: readonly ["SignatureFormat", "SignatureImageInk", "SignatureInput", "SignatureInputProps", "SignatureInputTheme", "SignatureInputThemeProps", "SignaturePoint", "SignatureStroke", "setSignatureInputTheme", "signatureInputTheme", "useSignatureInputTheme"];
     readonly docs: readonly [{
         readonly id: "signature-input";
         readonly route: "/components/signature-input";

package/dist/generated/componentContract.js

@@ -1936,6 +1936,7 @@ export const componentInventory = [
         sourceIndex: 'src/lib/components/Form/SignatureInput/index.ts',
         exportedSymbols: [
             'SignatureFormat',
+            'SignatureImageInk',
             'SignatureInput',
             'SignatureInputProps',
             'SignatureInputTheme',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "entasis",
-	"version": "0.13.7",
+	"version": "0.13.8",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",