@happyvertical/smrt-ui 0.52.0 → 0.53.1

package/dist/svelte/playground/CapturePreview.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+import CameraCapture from '../../components/forms/CameraCapture.svelte';
+import SignaturePad from '../../components/forms/SignaturePad.svelte';
+import Switch from '../../components/forms/Switch.svelte';
+import Button from '../../components/ui/Button.svelte';
+
+let cameraOn = $state(false);
+let stylusOnly = $state(false);
+let posted = $state(
+  'Submit the form to list what a native multipart post would send.',
+);
+
+function describeSubmission(
+  event: SubmitEvent & { currentTarget: HTMLFormElement },
+) {
+  // The preview stays on the page; a real form would post natively.
+  event.preventDefault();
+  const entries = [...new FormData(event.currentTarget).entries()].map(
+    ([key, value]) =>
+      value instanceof File
+        ? `${key}: ${value.name || '(empty file)'} ${value.size} B`
+        : `${key}: ${value}`,
+  );
+  posted = entries.join(' · ');
+}
+</script>
+
+<div class="workbench">
+  <header>
+    <p class="eyebrow">Native form capture</p>
+    <h4>Camera and signature</h4>
+    <p>Both controls post their file through a plain multipart form; no hidden input is wired by the page.</p>
+  </header>
+  <form method="POST" enctype="multipart/form-data" onsubmit={describeSubmission}>
+    <section>
+      <Switch name="camera-on" label="Camera on" bind:checked={cameraOn} interaction={false} />
+      <CameraCapture name="photo" disabled={!cameraOn} />
+    </section>
+    <section>
+      <Switch name="stylus-only" label="Stylus only" bind:checked={stylusOnly} interaction={false} />
+      <SignaturePad name="signature" {stylusOnly} />
+    </section>
+    <Button type="submit">Submit</Button>
+    <p class="posted" role="status">{posted}</p>
+  </form>
+</div>
+
+<style>
+  .workbench { display: grid; gap: var(--smrt-spacing-5); color: var(--smrt-color-on-surface); }
+  header { display: grid; gap: var(--smrt-spacing-2); }
+  h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); }
+  header p:not(.eyebrow), .posted { color: var(--smrt-color-on-surface-variant); }
+  .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
+  form { display: grid; gap: var(--smrt-spacing-6); }
+  section { display: grid; gap: var(--smrt-spacing-3); min-width: 0; }
+</style>

package/dist/svelte/playground/CapturePreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const CapturePreview: import("svelte").Component<Record<string, never>, {}, "">;
+type CapturePreview = ReturnType<typeof CapturePreview>;
+export default CapturePreview;
+//# sourceMappingURL=CapturePreview.svelte.d.ts.map

package/dist/svelte/playground/CapturePreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapturePreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/CapturePreview.svelte.ts"],"names":[],"mappings":"AA2DA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/playground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AASA,wBA2EE"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAUA,wBAqFE"}

package/dist/svelte/playground.js

@@ -4,6 +4,7 @@ const loadInteractiveControls = () => import('./playground/InteractiveControlsPr
 const loadFeedback = () => import('./playground/FeedbackPreview.svelte');
 const loadCollections = () => import('./playground/CollectionsPreview.svelte');
 const loadCalendar = () => import('./playground/CalendarPreview.svelte');
+const loadCapture = () => import('./playground/CapturePreview.svelte');
 export default {
     packageName: '@happyvertical/smrt-ui',
     displayName: 'UI Foundation',
@@ -71,5 +72,14 @@ export default {
             tags: ['calendar', 'events', 'agenda', 'mobile'],
             modes: { mock: { label: 'Interactive' } },
         },
+        {
+            id: 'capture',
+            title: 'Camera & Signature Capture',
+            description: 'Live camera capture with review and retake, and a stylus-aware signature pad, both posting files through a native multipart form.',
+            loadComponent: loadCapture,
+            order: 7,
+            tags: ['forms', 'camera', 'signature', 'files'],
+            modes: { mock: { label: 'Interactive' } },
+        },
     ],
 };

package/dist/themes/ThemeProvider.svelte

@@ -14,6 +14,8 @@ import type {
 import { defaultThemeConfig } from './types.js';
 
 interface Props {
+  /** Default control target density for descendants; individual controls may override. */
+  density?: 'comfortable' | 'touch';
   /** Theme preset to use */
   preset?: ThemePreset;
   /** Color scheme preference */
@@ -59,6 +61,7 @@ let {
   storageKey = defaultThemeConfig.storageKey,
   inlineVariables,
   children,
+  density,
 }: Props = $props();
 
 // Internal state — seed from the props (which already default to
@@ -125,6 +128,12 @@ const styleString = $derived.by(() => {
     // Recalculate dependent colors would go here in a full implementation
   }
 
+  if (density !== undefined) {
+    declarations.push(
+      `--smrt-control-target-min: ${density === 'touch' ? 'var(--smrt-touch-target-min, 48px)' : '0px'}`,
+    );
+  }
+
   // Apply custom overrides
   for (const [key, value] of Object.entries(config.overrides ?? {})) {
     declarations.push(`${key}: ${value}`);

package/dist/themes/ThemeProvider.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { ColorScheme, ThemeConfig, ThemePreset } from './types.js';
 interface Props {
+    /** Default control target density for descendants; individual controls may override. */
+    density?: 'comfortable' | 'touch';
     /** Theme preset to use */
     preset?: ThemePreset;
     /** Color scheme preference */

package/dist/themes/ThemeProvider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AA+SD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAsTD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/themes/css-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAwMD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA0CxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAwMD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA6CxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}

package/dist/themes/css-generator.js

@@ -173,6 +173,9 @@ export function generateThemeVariables(theme, isDark, options = {}) {
     // so the JS generator and the static dark CSS stay in lockstep (#1586).
     const elevation = isDark && theme.darkElevation ? theme.darkElevation : theme.elevation;
     return {
+        // Shared target sizes: density is opt-in, preserving existing defaults.
+        [`${prefix}-touch-target-min`]: '48px',
+        [`${prefix}-control-target-min`]: '0px',
         // Theme identification
         [`${prefix}-theme-id`]: theme.id,
         [`${prefix}-theme-name`]: theme.name,

package/dist/themes/styles/glass.css

@@ -8,6 +8,8 @@
  */
 
 [data-theme="glass"][data-color-scheme="light"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: glass;
   --smrt-theme-name: Glass;
   --smrt-color-scheme: light;
@@ -239,6 +241,8 @@
 }
 
 [data-theme="glass"][data-color-scheme="dark"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: glass;
   --smrt-theme-name: Glass;
   --smrt-color-scheme: dark;

package/dist/themes/styles/happyvertical.css

@@ -21,6 +21,8 @@
  */
 
 [data-theme="happyvertical"][data-color-scheme="light"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: happyvertical;
   --smrt-theme-name: Day Shift;
   --smrt-color-scheme: light;
@@ -246,6 +248,8 @@
 }
 
 [data-theme="happyvertical"][data-color-scheme="dark"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: happyvertical;
   --smrt-theme-name: Day Shift;
   --smrt-color-scheme: dark;

package/dist/themes/styles/material.css

@@ -67,6 +67,8 @@
 }
 
 [data-theme="material"][data-color-scheme="light"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: material;
   --smrt-theme-name: Material;
   --smrt-color-scheme: light;
@@ -292,6 +294,8 @@
 }
 
 [data-theme="material"][data-color-scheme="dark"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: material;
   --smrt-theme-name: Material;
   --smrt-color-scheme: dark;

package/dist/themes/styles/smrt.css

@@ -17,6 +17,8 @@
  */
 
 [data-theme="smrt"][data-color-scheme="light"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: smrt;
   --smrt-theme-name: s-m-r-t;
   --smrt-color-scheme: light;
@@ -242,6 +244,8 @@
 }
 
 [data-theme="smrt"][data-color-scheme="dark"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: smrt;
   --smrt-theme-name: s-m-r-t;
   --smrt-color-scheme: dark;

package/dist/themes/styles/studio.css

@@ -8,6 +8,8 @@
  */
 
 [data-theme="studio"][data-color-scheme="light"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: studio;
   --smrt-theme-name: Studio;
   --smrt-color-scheme: light;
@@ -233,6 +235,8 @@
 }
 
 [data-theme="studio"][data-color-scheme="dark"] {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   --smrt-theme-id: studio;
   --smrt-theme-name: Studio;
   --smrt-color-scheme: dark;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.52.0",
+  "version": "0.53.1",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -65,6 +65,11 @@
       "import": "./dist/components/forms/index.js",
       "default": "./dist/components/forms/index.js"
     },
+    "./form-retry": {
+      "types": "./dist/components/forms/form-retry/index.d.ts",
+      "import": "./dist/components/forms/form-retry/index.js",
+      "default": "./dist/components/forms/form-retry/index.js"
+    },
     "./i18n": {
       "types": "./dist/i18n/index.d.ts",
       "svelte": "./dist/i18n/index.js",
@@ -129,7 +134,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.52.0",
+    "@happyvertical/smrt-types": "0.53.1",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {
@@ -161,6 +166,7 @@
     "bench:data-table": "vitest bench src/components/data/__benchmarks__/DataTable.bench.ts",
     "generate:themes": "tsx scripts/generate-theme-styles.ts",
     "test": "vitest run",
+    "test:e2e": "playwright test",
     "typecheck": "tsc --noEmit && node ../../scripts/svelte-check-a11y.mjs --tsconfig ./tsconfig.svelte.json",
     "verify:pack": "node ../../scripts/verify-package-types-exports.js ."
   }