@happyvertical/smrt-ui 0.57.18 → 0.57.19

package/dist/components/forms/control-spotlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-spotlight.d.ts","sourceRoot":"","sources":["../../../src/components/forms/control-spotlight.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,GACxD,MAAM,IAAI,CA+FZ"}
+{"version":3,"file":"control-spotlight.d.ts","sourceRoot":"","sources":["../../../src/components/forms/control-spotlight.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,GACxD,MAAM,IAAI,CAiJZ"}

package/dist/components/forms/control-spotlight.js

@@ -41,7 +41,26 @@ export function paintControlSpotlight(node, options) {
             '1px solid currentColor',
         font: 'inherit',
     });
-    root.append(veil, button);
+    // An arrow beside the cutout makes a small target easy to find. It sits on
+    // the roomier side and bobs gently, unless the visitor reduces motion.
+    const arrow = doc.createElement('div');
+    arrow.dataset.smrtSpotlightArrow = '';
+    arrow.setAttribute('aria-hidden', 'true');
+    const ARROW = 40;
+    Object.assign(arrow.style, {
+        position: 'absolute',
+        inlineSize: `${ARROW}px`,
+        blockSize: `${ARROW}px`,
+        pointerEvents: 'none',
+        color: tokens.getPropertyValue('--smrt-color-warning').trim() || '#fbbf24',
+        filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6))',
+    });
+    arrow.innerHTML =
+        '<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" stroke="rgba(3, 5, 9, 0.85)" stroke-width="1.5" stroke-linejoin="round"><path d="M12 2 21 12h-5v10H8V12H3z"/></svg>';
+    const reduce = view.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    let bob;
+    let direction = '';
+    root.append(veil, arrow, button);
     let disposed = false;
     let frame = 0;
     const cleanup = () => {
@@ -49,6 +68,7 @@ export function paintControlSpotlight(node, options) {
             return;
         disposed = true;
         view.cancelAnimationFrame(frame);
+        bob?.cancel();
         root.remove();
         button.removeEventListener('click', dismiss);
     };
@@ -84,6 +104,30 @@ export function paintControlSpotlight(node, options) {
         const x2 = Math.min(view.innerWidth, Math.round(r.right + 8));
         const y2 = Math.min(view.innerHeight, Math.round(r.bottom + 8));
         veil.style.clipPath = `polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${x1}px ${y1}px, ${x1}px ${y2}px, ${x2}px ${y2}px, ${x2}px ${y1}px, ${x1}px ${y1}px)`;
+        const next = (r.top + r.bottom) / 2 < view.innerHeight / 2 ? 'up' : 'down';
+        const left = Math.min(Math.max(0, Math.round((r.left + r.right) / 2 - ARROW / 2)), Math.max(0, view.innerWidth - ARROW));
+        arrow.style.left = `${left}px`;
+        arrow.style.top = `${next === 'up' ? y2 + 6 : Math.max(0, y1 - ARROW - 6)}px`;
+        if (next !== direction) {
+            direction = next;
+            arrow.dataset.direction = next;
+            arrow.style.transform = next === 'up' ? '' : 'rotate(180deg)';
+            bob?.cancel();
+            const lift = next === 'up' ? '6px' : '-6px';
+            const turn = next === 'up' ? '' : ' rotate(180deg)';
+            bob =
+                !reduce && typeof arrow.animate === 'function'
+                    ? arrow.animate([
+                        { transform: `translateY(0)${turn}` },
+                        { transform: `translateY(${lift})${turn}` },
+                    ], {
+                        duration: 600,
+                        iterations: Number.POSITIVE_INFINITY,
+                        direction: 'alternate',
+                        easing: 'ease-in-out',
+                    })
+                    : undefined;
+        }
         // Track movement caused by scrolling, resizing or surrounding layout. No
         // animation/interpolation is applied, including under reduced motion.
         frame = view.requestAnimationFrame(update);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.57.18",
+  "version": "0.57.19",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -164,7 +164,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.57.18",
+    "@happyvertical/smrt-types": "0.57.19",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {
@@ -180,7 +180,7 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/speech": "^0.105.5",
+    "@happyvertical/speech": "^0.106.0",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@testing-library/jest-dom": "^7.0.1",