@happyvertical/smrt-ui 0.52.0 → 0.53.0

package/dist/components/forms/native-file-field.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Framework-free helpers that let a capture component (`CameraCapture`,
+ * `SignaturePad`) post a `File` it created through a plain
+ * `<form method="POST" enctype="multipart/form-data">`, without the caller
+ * wiring a hidden input or intercepting submit.
+ *
+ * Two strategies, chosen once per page by {@link detectNativeFileFieldStrategy}:
+ *
+ * - `data-transfer` (preferred): the component renders a hidden
+ *   `<input type="file" name>` and fills it with `new DataTransfer()`, so the
+ *   browser posts the file exactly like a user-picked one. Needs a constructible
+ *   `DataTransfer` whose `files` an input accepts (Chrome 60+, Firefox 62+,
+ *   Safari 14.1+).
+ * - `formdata-event` (fallback when `DataTransfer` is unavailable): the hidden
+ *   input carries no `name`, and a capture-phase `formdata` listener appends the
+ *   file to the form's entry list while the browser builds it. The browser fires
+ *   `formdata` for native navigation submits as well as `new FormData(form)`, so
+ *   the request is the same.
+ * - `none`: neither API exists. Nothing is posted for the field; the
+ *   component's `onCapture` callback remains the only channel. Components expose
+ *   the active strategy as `data-smrt-file-field` for diagnostics.
+ *
+ * In both posting strategies an uncommitted field posts what an empty native
+ * file input posts (an empty, unnamed `application/octet-stream` file), so the
+ * server sees one shape regardless of strategy; inside a disabled `<fieldset>`
+ * both post nothing, as a disabled native control does. A reset of the owning form
+ * empties the field like a native file input ({@link attachFormResetListener}).
+ */
+/** How a capture component posts its file in a native form. */
+export type NativeFileFieldStrategy = 'data-transfer' | 'formdata-event' | 'none';
+/** Globals the strategy probe reads; injectable for tests. */
+export interface NativeFileFieldEnvironment {
+    DataTransfer?: unknown;
+    FormDataEvent?: unknown;
+    File?: unknown;
+    /** Creates a detached `<input type="file">` for the assignment probe. */
+    createFileInput?: () => HTMLInputElement;
+}
+/**
+ * Put `file` into `input` through a fresh `DataTransfer`. Returns `true` only
+ * when the input now holds exactly one file. Old engines expose a
+ * `DataTransfer` interface whose constructor throws ("Illegal constructor"), or
+ * reject the `files` assignment; both report `false`.
+ */
+export declare function assignFileWithDataTransfer(input: HTMLInputElement, file: File, DataTransferCtor?: unknown): boolean;
+/**
+ * Empty a file input so it posts the native "no file chosen" entry. Scripts may
+ * always set a file input's value to the empty string (only non-empty values
+ * throw).
+ */
+export declare function clearFileInput(input: HTMLInputElement): void;
+/** Pick the strategy for this page. Safe during SSR (returns `none`). */
+export declare function detectNativeFileFieldStrategy(env?: NativeFileFieldEnvironment): NativeFileFieldStrategy;
+/** The entry a `formdata`-event field contributes, read at submit time. */
+export interface FormDataFieldEntry {
+    /** The form whose entry list receives the file (the hidden input's `form`). */
+    form: HTMLFormElement | null;
+    name: string;
+    /** The committed file, or `null` to post the native empty-file entry. */
+    file: File | null;
+    /**
+     * The component's hidden input. While it is `:disabled` (inside a disabled
+     * `<fieldset>`), nothing is appended — the browser leaves a disabled native
+     * control out of the entry list, and this appended entry must match.
+     */
+    source?: Element | null;
+}
+/** The native "no file chosen" entry: an empty, unnamed octet-stream file. */
+export declare function emptyFileEntry(): File;
+/**
+ * Install the `formdata`-event fallback. The listener runs in the capture
+ * phase on `target` (normally `document`), so it sees the event whichever form
+ * currently owns the field, then appends only for that form. Returns a disposer.
+ */
+export declare function attachFormDataFallback(target: Pick<EventTarget, 'addEventListener' | 'removeEventListener'>, readEntry: () => FormDataFieldEntry | null): () => void;
+/**
+ * Call `onReset` whenever the form returned by `readForm` resets
+ * (`form.reset()`, a reset button, or SvelteKit `enhance`'s `update()` after a
+ * success). A native file input is emptied by its form's reset; a capture
+ * component must empty its own committed state at the same moment, or it keeps
+ * showing a file that no longer posts.
+ *
+ * Like {@link attachFormDataFallback}, the listener runs in the capture phase
+ * on `target` (normally `document`) and reads the owning form at dispatch
+ * time, so a field moved between forms needs no re-wiring and a page listener
+ * that stops propagation cannot hide the reset. `reset` fires before the
+ * browser resets the controls, and `onReset` runs even if a later listener
+ * cancels it: the component and the posted entry are then both empty, which
+ * keeps what is shown equal to what posts. Returns a disposer.
+ */
+export declare function attachFormResetListener(target: Pick<EventTarget, 'addEventListener' | 'removeEventListener'>, readForm: () => HTMLFormElement | null | undefined, onReset: () => void): () => void;
+/** `photo` + `image/png` → `photo.png`; unknown types fall back to `bin`. */
+export declare function fileNameForType(base: string, type: string): string;
+//# sourceMappingURL=native-file-field.d.ts.map

package/dist/components/forms/native-file-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-file-field.d.ts","sourceRoot":"","sources":["../../../src/components/forms/native-file-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,+DAA+D;AAC/D,MAAM,MAAM,uBAAuB,GAC/B,eAAe,GACf,gBAAgB,GAChB,MAAM,CAAC;AAEX,8DAA8D;AAC9D,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,gBAAgB,CAAC;CAC1C;AAqBD;;;;;GAKG;AACH,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,IAAI,EACV,gBAAgB,GAAE,OACH,GACd,OAAO,CAUT;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAE5D;AAED,yEAAyE;AACzE,wBAAgB,6BAA6B,CAC3C,GAAG,GAAE,0BAAiD,GACrD,uBAAuB,CAoBzB;AAED,2EAA2E;AAC3E,MAAM,WAAW,kBAAkB;IACjC,+EAA+E;IAC/E,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CACzB;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,IAAI,IAAI,CAErC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,EACrE,SAAS,EAAE,MAAM,kBAAkB,GAAG,IAAI,GACzC,MAAM,IAAI,CAYZ;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,EACrE,QAAQ,EAAE,MAAM,eAAe,GAAG,IAAI,GAAG,SAAS,EAClD,OAAO,EAAE,MAAM,IAAI,GAClB,MAAM,IAAI,CAOZ;AAQD,6EAA6E;AAC7E,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAElE"}

package/dist/components/forms/native-file-field.js

@@ -0,0 +1,147 @@
+/**
+ * Framework-free helpers that let a capture component (`CameraCapture`,
+ * `SignaturePad`) post a `File` it created through a plain
+ * `<form method="POST" enctype="multipart/form-data">`, without the caller
+ * wiring a hidden input or intercepting submit.
+ *
+ * Two strategies, chosen once per page by {@link detectNativeFileFieldStrategy}:
+ *
+ * - `data-transfer` (preferred): the component renders a hidden
+ *   `<input type="file" name>` and fills it with `new DataTransfer()`, so the
+ *   browser posts the file exactly like a user-picked one. Needs a constructible
+ *   `DataTransfer` whose `files` an input accepts (Chrome 60+, Firefox 62+,
+ *   Safari 14.1+).
+ * - `formdata-event` (fallback when `DataTransfer` is unavailable): the hidden
+ *   input carries no `name`, and a capture-phase `formdata` listener appends the
+ *   file to the form's entry list while the browser builds it. The browser fires
+ *   `formdata` for native navigation submits as well as `new FormData(form)`, so
+ *   the request is the same.
+ * - `none`: neither API exists. Nothing is posted for the field; the
+ *   component's `onCapture` callback remains the only channel. Components expose
+ *   the active strategy as `data-smrt-file-field` for diagnostics.
+ *
+ * In both posting strategies an uncommitted field posts what an empty native
+ * file input posts (an empty, unnamed `application/octet-stream` file), so the
+ * server sees one shape regardless of strategy; inside a disabled `<fieldset>`
+ * both post nothing, as a disabled native control does. A reset of the owning form
+ * empties the field like a native file input ({@link attachFormResetListener}).
+ */
+function browserEnvironment() {
+    const scope = globalThis;
+    return {
+        DataTransfer: scope.DataTransfer,
+        FormDataEvent: scope.FormDataEvent,
+        File: scope.File,
+        createFileInput: typeof document === 'undefined'
+            ? undefined
+            : () => {
+                const input = document.createElement('input');
+                input.type = 'file';
+                return input;
+            },
+    };
+}
+/**
+ * Put `file` into `input` through a fresh `DataTransfer`. Returns `true` only
+ * when the input now holds exactly one file. Old engines expose a
+ * `DataTransfer` interface whose constructor throws ("Illegal constructor"), or
+ * reject the `files` assignment; both report `false`.
+ */
+export function assignFileWithDataTransfer(input, file, DataTransferCtor = globalThis
+    .DataTransfer) {
+    if (typeof DataTransferCtor !== 'function')
+        return false;
+    try {
+        const transfer = new DataTransferCtor();
+        transfer.items.add(file);
+        input.files = transfer.files;
+        return input.files?.length === 1;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Empty a file input so it posts the native "no file chosen" entry. Scripts may
+ * always set a file input's value to the empty string (only non-empty values
+ * throw).
+ */
+export function clearFileInput(input) {
+    input.value = '';
+}
+/** Pick the strategy for this page. Safe during SSR (returns `none`). */
+export function detectNativeFileFieldStrategy(env = browserEnvironment()) {
+    const FileCtor = env.File;
+    if (env.createFileInput && typeof FileCtor === 'function') {
+        try {
+            const probe = new FileCtor([], 'probe.bin');
+            if (assignFileWithDataTransfer(env.createFileInput(), probe, env.DataTransfer)) {
+                return 'data-transfer';
+            }
+        }
+        catch {
+            // Fall through to the next strategy.
+        }
+    }
+    if (typeof env.FormDataEvent === 'function')
+        return 'formdata-event';
+    return 'none';
+}
+/** The native "no file chosen" entry: an empty, unnamed octet-stream file. */
+export function emptyFileEntry() {
+    return new File([], '', { type: 'application/octet-stream' });
+}
+/**
+ * Install the `formdata`-event fallback. The listener runs in the capture
+ * phase on `target` (normally `document`), so it sees the event whichever form
+ * currently owns the field, then appends only for that form. Returns a disposer.
+ */
+export function attachFormDataFallback(target, readEntry) {
+    const listener = (event) => {
+        const entry = readEntry();
+        if (!entry?.form || !entry.name || event.target !== entry.form)
+            return;
+        if (entry.source?.matches(':disabled'))
+            return;
+        const formData = event.formData;
+        if (!formData)
+            return;
+        const file = entry.file ?? emptyFileEntry();
+        formData.append(entry.name, file, file.name);
+    };
+    target.addEventListener('formdata', listener, true);
+    return () => target.removeEventListener('formdata', listener, true);
+}
+/**
+ * Call `onReset` whenever the form returned by `readForm` resets
+ * (`form.reset()`, a reset button, or SvelteKit `enhance`'s `update()` after a
+ * success). A native file input is emptied by its form's reset; a capture
+ * component must empty its own committed state at the same moment, or it keeps
+ * showing a file that no longer posts.
+ *
+ * Like {@link attachFormDataFallback}, the listener runs in the capture phase
+ * on `target` (normally `document`) and reads the owning form at dispatch
+ * time, so a field moved between forms needs no re-wiring and a page listener
+ * that stops propagation cannot hide the reset. `reset` fires before the
+ * browser resets the controls, and `onReset` runs even if a later listener
+ * cancels it: the component and the posted entry are then both empty, which
+ * keeps what is shown equal to what posts. Returns a disposer.
+ */
+export function attachFormResetListener(target, readForm, onReset) {
+    const listener = (event) => {
+        const form = readForm();
+        if (form && event.target === form)
+            onReset();
+    };
+    target.addEventListener('reset', listener, true);
+    return () => target.removeEventListener('reset', listener, true);
+}
+const EXTENSIONS = {
+    'image/jpeg': 'jpg',
+    'image/png': 'png',
+    'image/webp': 'webp',
+};
+/** `photo` + `image/png` → `photo.png`; unknown types fall back to `bin`. */
+export function fileNameForType(base, type) {
+    return `${base}.${EXTENSIONS[type] ?? 'bin'}`;
+}

package/dist/components/forms/signature-pad-logic.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Pure input logic for `SignaturePad.svelte`: the pointer-type gate and the
+ * pointer-to-canvas coordinate mapping. Free of DOM and settings dependencies
+ * so both are testable without a browser. The component takes `stylusOnly` as a
+ * prop the caller resolves (from a tenant setting, a device profile, …) and
+ * never decides it itself.
+ *
+ * Ported from teamworks-os `signature-pad-logic.ts`, smrt#3290.
+ */
+/** `PointerEvent.pointerType`; browsers may report values beyond the three known ones. */
+export type SignaturePointerType = 'pen' | 'touch' | 'mouse' | (string & {});
+/**
+ * Paper and ink colours for the signature bitmap. A signature is document
+ * content, not chrome: it stays dark ink on white paper in every theme and
+ * colour scheme, so the exported PNG reads the same wherever it is shown.
+ */
+export declare const SIGNATURE_PAPER_COLOR = "#ffffff";
+export declare const SIGNATURE_INK_COLOR = "#111111";
+/**
+ * Whether a pointer of `pointerType` may draw a stroke.
+ *
+ * With `stylusOnly`, only `pen` is accepted: finger and mouse input are
+ * ignored outright, since nothing at the pointer-event level can tell a
+ * gloved finger from a stylus. Otherwise pen, touch and mouse are accepted.
+ * Unknown pointer types are rejected in both modes.
+ */
+export declare function isAcceptedPointerType(pointerType: SignaturePointerType, stylusOnly: boolean): boolean;
+/** The subset of `DOMRect` the coordinate mapping needs. */
+export interface CanvasDisplayRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Maps viewport `clientX`/`clientY` (CSS pixels) to the canvas's backing-pixel
+ * space.
+ *
+ * The canvas has a fixed backing resolution but is displayed at `width: 100%`,
+ * so the raw `clientX - rect.left` offset is only right when the displayed size
+ * happens to equal the backing size; anywhere else the ink drifts from the
+ * stylus and clips near the edges. Scaling by `backing / displayed` keeps them
+ * aligned. A zero-size rect (not laid out yet) falls back to 1:1 instead of
+ * dividing by zero.
+ */
+export declare function mapPointerToCanvasPoint(clientX: number, clientY: number, rect: CanvasDisplayRect, canvasWidth: number, canvasHeight: number): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=signature-pad-logic.d.ts.map

package/dist/components/forms/signature-pad-logic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature-pad-logic.d.ts","sourceRoot":"","sources":["../../../src/components/forms/signature-pad-logic.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,0FAA0F;AAC1F,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,YAAY,CAAC;AAC/C,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAE7C;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,oBAAoB,EACjC,UAAU,EAAE,OAAO,GAClB,OAAO,CAKT;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAO1B"}

package/dist/components/forms/signature-pad-logic.js

@@ -0,0 +1,48 @@
+/**
+ * Pure input logic for `SignaturePad.svelte`: the pointer-type gate and the
+ * pointer-to-canvas coordinate mapping. Free of DOM and settings dependencies
+ * so both are testable without a browser. The component takes `stylusOnly` as a
+ * prop the caller resolves (from a tenant setting, a device profile, …) and
+ * never decides it itself.
+ *
+ * Ported from teamworks-os `signature-pad-logic.ts`, smrt#3290.
+ */
+/**
+ * Paper and ink colours for the signature bitmap. A signature is document
+ * content, not chrome: it stays dark ink on white paper in every theme and
+ * colour scheme, so the exported PNG reads the same wherever it is shown.
+ */
+export const SIGNATURE_PAPER_COLOR = '#ffffff';
+export const SIGNATURE_INK_COLOR = '#111111';
+/**
+ * Whether a pointer of `pointerType` may draw a stroke.
+ *
+ * With `stylusOnly`, only `pen` is accepted: finger and mouse input are
+ * ignored outright, since nothing at the pointer-event level can tell a
+ * gloved finger from a stylus. Otherwise pen, touch and mouse are accepted.
+ * Unknown pointer types are rejected in both modes.
+ */
+export function isAcceptedPointerType(pointerType, stylusOnly) {
+    if (stylusOnly)
+        return pointerType === 'pen';
+    return (pointerType === 'pen' || pointerType === 'touch' || pointerType === 'mouse');
+}
+/**
+ * Maps viewport `clientX`/`clientY` (CSS pixels) to the canvas's backing-pixel
+ * space.
+ *
+ * The canvas has a fixed backing resolution but is displayed at `width: 100%`,
+ * so the raw `clientX - rect.left` offset is only right when the displayed size
+ * happens to equal the backing size; anywhere else the ink drifts from the
+ * stylus and clips near the edges. Scaling by `backing / displayed` keeps them
+ * aligned. A zero-size rect (not laid out yet) falls back to 1:1 instead of
+ * dividing by zero.
+ */
+export function mapPointerToCanvasPoint(clientX, clientY, rect, canvasWidth, canvasHeight) {
+    const scaleX = rect.width > 0 ? canvasWidth / rect.width : 1;
+    const scaleY = rect.height > 0 ? canvasHeight / rect.height : 1;
+    return {
+        x: (clientX - rect.left) * scaleX,
+        y: (clientY - rect.top) * scaleY,
+    };
+}

package/dist/components/forms/types.d.ts

@@ -11,4 +11,45 @@ export interface RangeSliderValue {
 export interface SegmentedControlOption extends ControlOption {
     icon?: string;
 }
+/** What `CameraCapture` and `SignaturePad` hand to `onCapture`. */
+export interface CaptureResult {
+    /** The encoded image (JPEG/PNG/WebP for photos, PNG for signatures). */
+    blob: Blob;
+    /** The same image as a `data:` URL, convenient for an inline preview. */
+    dataUrl: string;
+}
+/** Rendered states of `CameraCapture`, exposed as its `data-state` attribute. */
+export type CameraCaptureState = 'off' | 'starting' | 'streaming' | 'reviewing' | 'committed' | 'permission-denied' | 'no-camera' | 'unsupported' | 'error' | 'fallback';
+/** Text overrides for `CameraCapture`; defaults come from the `ui` i18n catalog. */
+export interface CameraCaptureLabels {
+    region: string;
+    preview: string;
+    starting: string;
+    off: string;
+    unsupported: string;
+    permissionDenied: string;
+    noCamera: string;
+    error: string;
+    retry: string;
+    capture: string;
+    retake: string;
+    usePhoto: string;
+    reviewAlt: string;
+    committedAlt: string;
+    committed: string;
+    choosePhoto: string;
+}
+/** Rendered states of `SignaturePad`, exposed as its `data-state` attribute. */
+export type SignaturePadState = 'empty' | 'signed' | 'committed';
+/** Text overrides for `SignaturePad`; defaults come from the `ui` i18n catalog. */
+export interface SignaturePadLabels {
+    region: string;
+    canvasEmpty: string;
+    canvasSigned: string;
+    hintAny: string;
+    hintStylus: string;
+    clear: string;
+    useSignature: string;
+    committed: string;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/forms/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/forms/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/forms/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mEAAmE;AACnE,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,IAAI,EAAE,IAAI,CAAC;IACX,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,iFAAiF;AACjF,MAAM,MAAM,kBAAkB,GAC1B,KAAK,GACL,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,mBAAmB,GACnB,WAAW,GACX,aAAa,GACb,OAAO,GACP,UAAU,CAAC;AAEf,oFAAoF;AACpF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,gFAAgF;AAChF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEjE,mFAAmF;AACnF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/components/nav/FilterChips.svelte

@@ -11,6 +11,8 @@ import { Icon } from '../display/index.js';
 import type { FilterOption } from './types.js';
 
 export interface Props {
+  /** Target density; omit to inherit the ThemeProvider setting. */
+  density?: 'comfortable' | 'touch';
   /** Available filter options */
   options: FilterOption[];
   /** Currently selected value */
@@ -32,6 +34,7 @@ const {
   size = 'md',
   showAll = false,
   allLabel = 'All',
+  density,
 }: Props = $props();
 
 // Build full options list with optional "all"
@@ -54,7 +57,7 @@ function handleClick(value: string) {
 }
 </script>
 
-<div class="filter-chips" class:sm={size === 'sm'} role="radiogroup">
+<div data-density={density} class="filter-chips" class:sm={size === 'sm'} role="radiogroup">
   {#each allOptions as option (option.value)}
     {@const isActive = option.value === selected}
     <button
@@ -149,4 +152,8 @@ function handleClick(value: string) {
   .active .chip-count {
     color: var(--smrt-color-on-secondary-container);
   }
+
+  .filter-chips[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .filter-chips[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+  .filter-chip { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
 </style>

package/dist/components/nav/FilterChips.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { FilterOption } from './types.js';
 export interface Props {
+    /** Target density; omit to inherit the ThemeProvider setting. */
+    density?: 'comfortable' | 'touch';
     /** Available filter options */
     options: FilterOption[];
     /** Currently selected value */

package/dist/components/nav/FilterChips.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChips.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/nav/FilterChips.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAyDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilterChips.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/nav/FilterChips.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,WAAW,KAAK;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,+BAA+B;IAC/B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0DD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/ui/Button.svelte

@@ -14,6 +14,8 @@ import type { ButtonSize, ButtonVariant } from '../../types-generic';
 
 /** Props for Button component */
 export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
+  /** Target density; omit to inherit the ThemeProvider setting. */
+  density?: 'comfortable' | 'touch';
   /** Visual variant */
   variant?: ButtonVariant;
   /** Size variant */
@@ -62,6 +64,7 @@ const {
   target,
   rel,
   download,
+  density,
   ...rest
 }: Props = $props();
 
@@ -118,7 +121,7 @@ function handleClick(event: MouseEvent) {
     {target}
     {rel}
     {download}
-    class="button {variant} {size} {className}"
+    data-density={density} class="button {variant} {size} {className}"
     class:disabled={isDisabled}
     class:full-width={fullWidth}
     class:loading
@@ -140,7 +143,7 @@ function handleClick(event: MouseEvent) {
     {type}
     disabled={isDisabled}
     aria-busy={loading}
-    class="button {variant} {size} {className}"
+    data-density={density} class="button {variant} {size} {className}"
     class:full-width={fullWidth}
     class:loading
     onclick={handleClick}
@@ -308,4 +311,8 @@ function handleClick(event: MouseEvent) {
       animation: none;
     }
   }
+
+  .button[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .button[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+  .button { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
 </style>

package/dist/components/ui/Button.svelte.d.ts

@@ -9,6 +9,8 @@ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements
 import type { ButtonSize, ButtonVariant } from '../../types-generic';
 /** Props for Button component */
 export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
+    /** Target density; omit to inherit the ThemeProvider setting. */
+    density?: 'comfortable' | 'touch';
     /** Visual variant */
     variant?: ButtonVariant;
     /** Size variant */

package/dist/components/ui/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Button.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGrE,iCAAiC;AACjC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC;IACzE,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,6EAA6E;IAC7E,GAAG,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;CAC7C;AAmGD,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Button.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGrE,iCAAiC;AACjC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC;IACzE,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,6EAA6E;IAC7E,GAAG,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;CAC7C;AAoGD,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/i18n/strings.ui.d.ts

@@ -73,6 +73,30 @@ export declare const M: {
     readonly 'ui.pagination.last_page': "ui.pagination.last_page";
     readonly 'ui.reaction_picker.label': "ui.reaction_picker.label";
     readonly 'ui.reaction_picker.react_with': "ui.reaction_picker.react_with";
+    readonly 'ui.camera_capture.region': "ui.camera_capture.region";
+    readonly 'ui.camera_capture.preview': "ui.camera_capture.preview";
+    readonly 'ui.camera_capture.starting': "ui.camera_capture.starting";
+    readonly 'ui.camera_capture.off': "ui.camera_capture.off";
+    readonly 'ui.camera_capture.unsupported': "ui.camera_capture.unsupported";
+    readonly 'ui.camera_capture.permission_denied': "ui.camera_capture.permission_denied";
+    readonly 'ui.camera_capture.no_camera': "ui.camera_capture.no_camera";
+    readonly 'ui.camera_capture.error': "ui.camera_capture.error";
+    readonly 'ui.camera_capture.retry': "ui.camera_capture.retry";
+    readonly 'ui.camera_capture.capture': "ui.camera_capture.capture";
+    readonly 'ui.camera_capture.retake': "ui.camera_capture.retake";
+    readonly 'ui.camera_capture.use_photo': "ui.camera_capture.use_photo";
+    readonly 'ui.camera_capture.review_alt': "ui.camera_capture.review_alt";
+    readonly 'ui.camera_capture.committed_alt': "ui.camera_capture.committed_alt";
+    readonly 'ui.camera_capture.committed': "ui.camera_capture.committed";
+    readonly 'ui.camera_capture.choose_photo': "ui.camera_capture.choose_photo";
+    readonly 'ui.signature_pad.region': "ui.signature_pad.region";
+    readonly 'ui.signature_pad.canvas_empty': "ui.signature_pad.canvas_empty";
+    readonly 'ui.signature_pad.canvas_signed': "ui.signature_pad.canvas_signed";
+    readonly 'ui.signature_pad.hint_any': "ui.signature_pad.hint_any";
+    readonly 'ui.signature_pad.hint_stylus': "ui.signature_pad.hint_stylus";
+    readonly 'ui.signature_pad.clear': "ui.signature_pad.clear";
+    readonly 'ui.signature_pad.use_signature': "ui.signature_pad.use_signature";
+    readonly 'ui.signature_pad.committed': "ui.signature_pad.committed";
     readonly 'ui.staged_control_review.region': "ui.staged_control_review.region";
     readonly 'ui.staged_control_review.heading': "ui.staged_control_review.heading";
     readonly 'ui.staged_control_review.description': "ui.staged_control_review.description";

package/dist/i18n/strings.ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strings.ui.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ui.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIZ,CAAC"}
+{"version":3,"file":"strings.ui.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ui.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKZ,CAAC"}

package/dist/i18n/strings.ui.js

@@ -90,6 +90,32 @@ export const M = defineMessages({
     // chat/ReactionPicker.svelte
     'ui.reaction_picker.label': 'Add reaction',
     'ui.reaction_picker.react_with': 'React with {emoji}',
+    // forms/CameraCapture.svelte
+    'ui.camera_capture.region': 'Camera',
+    'ui.camera_capture.preview': 'Live camera preview',
+    'ui.camera_capture.starting': 'Starting camera…',
+    'ui.camera_capture.off': 'The camera is off.',
+    'ui.camera_capture.unsupported': 'This browser cannot use the camera. Open this page over HTTPS in a current browser.',
+    'ui.camera_capture.permission_denied': 'Camera access was denied. Allow camera access for this site, then try again.',
+    'ui.camera_capture.no_camera': 'No camera was found on this device.',
+    'ui.camera_capture.error': 'Could not access the camera.',
+    'ui.camera_capture.retry': 'Try again',
+    'ui.camera_capture.capture': 'Take photo',
+    'ui.camera_capture.retake': 'Retake',
+    'ui.camera_capture.use_photo': 'Use photo',
+    'ui.camera_capture.review_alt': 'Captured photo, not yet used',
+    'ui.camera_capture.committed_alt': 'Attached photo',
+    'ui.camera_capture.committed': 'Photo attached.',
+    'ui.camera_capture.choose_photo': 'Take or choose a photo',
+    // forms/SignaturePad.svelte
+    'ui.signature_pad.region': 'Signature',
+    'ui.signature_pad.canvas_empty': 'Signature area, not yet signed',
+    'ui.signature_pad.canvas_signed': 'Signature area, signed',
+    'ui.signature_pad.hint_any': 'Sign with a stylus, your finger, or the mouse.',
+    'ui.signature_pad.hint_stylus': 'Sign with the stylus.',
+    'ui.signature_pad.clear': 'Clear',
+    'ui.signature_pad.use_signature': 'Use signature',
+    'ui.signature_pad.committed': 'Signature attached.',
     // forms/StagedControlReview.svelte
     'ui.staged_control_review.region': 'Review proposed changes',
     'ui.staged_control_review.heading': 'Proposed changes',

package/dist/styles/tokens.css

@@ -4,6 +4,8 @@
  */
 
 :root {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   /* Colors - Primary */
   --color-primary-main: #1976d2;
   --color-primary-light: #e3f2fd;

package/dist/svelte/__tests__/playground.test.js

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import playground from '../playground.js';
 describe('smrt-ui playground', () => {
-    it('publishes themed base-control and data-table previews', () => {
+    it('publishes themed base-control, data-table, and capture previews', () => {
         expect(playground.packageName).toBe('@happyvertical/smrt-ui');
         expect(playground.entries.map((entry) => entry.id)).toEqual([
             'base-controls',
@@ -10,6 +10,7 @@ describe('smrt-ui playground', () => {
             'collections',
             'data-table',
             'calendar',
+            'capture',
         ]);
         for (const entry of playground.entries) {
             expect(entry.loadComponent).toEqual(expect.any(Function));