anentrypoint-design 0.0.177 → 0.0.179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.177",
+  "version": "0.0.179",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/files-modals.js

@@ -5,7 +5,10 @@ import { Btn, Icon } from './shell.js';
 import { fileGlyph, fmtFileSize } from './files.js';
 const h = webjsx.createElement;
 
-function Backdrop({ onClose, children, kind = '' } = {}) {
+// Monotonic id source for aria-labelledby wiring between a modal and its head.
+let _modalSeq = 0;
+
+function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
     // webjsx invokes a ref callback with the element on mount and with null on
     // unmount. We stash the per-element keydown teardown on the node itself so
     // the null branch can run it — otherwise the document/element listener leaks
@@ -66,7 +69,11 @@ function Backdrop({ onClose, children, kind = '' } = {}) {
         },
         onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); }
     },
-        h('div', { class: 'ds-modal' + (kind ? ' ds-modal-' + kind : '') }, ...(Array.isArray(children) ? children : [children]))
+        h('div', {
+            class: 'ds-modal' + (kind ? ' ds-modal-' + kind : ''),
+            role: 'dialog', 'aria-modal': 'true',
+            ...(labelledBy ? { 'aria-labelledby': labelledBy } : {})
+        }, ...(Array.isArray(children) ? children : [children]))
     );
 }
 
@@ -75,11 +82,15 @@ function Backdrop({ onClose, children, kind = '' } = {}) {
 // `actions` is an array of vnodes (already using the Btn primitive). Any of the
 // slots may be omitted.
 function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body, bodyClass = 'ds-modal-body', bodyAttrs = {}, actions } = {}) {
+    // Give the head a stable id so the dialog can point aria-labelledby at it,
+    // exposing the title as the dialog's accessible name to screen readers.
+    const headId = head != null ? ('ds-modal-head-' + (++_modalSeq)) : null;
     return Backdrop({
         onClose,
         kind,
+        labelledBy: headId,
         children: [
-            head != null ? h('div', { class: ('ds-modal-head' + (headClass ? ' ' + headClass : '')), ...headAttrs }, ...(Array.isArray(head) ? head : [head])) : null,
+            head != null ? h('div', { id: headId, class: ('ds-modal-head' + (headClass ? ' ' + headClass : '')), ...headAttrs }, ...(Array.isArray(head) ? head : [head])) : null,
             body != null ? h('div', { class: bodyClass, ...bodyAttrs }, ...(Array.isArray(body) ? body : [body])) : null,
             actions != null ? h('div', { class: 'ds-modal-actions' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
         ].filter(Boolean)

package/src/components/interaction-primitives.js

@@ -139,6 +139,54 @@ export function useNumberScrub(el, { getValue, onChange, step = 0.01, threshold
     }};
 }
 
+// usePointerDrag — free 2D pointer drag with caller-supplied onMove, for surfaces
+// that need raw pointer coordinates each frame (a 3D viewport gizmo, a canvas
+// handle) rather than the data-transfer DnD model of useDraggable. Pointer Events
+// only, so mouse+touch+pen+XR-controller all drive it. The primary pointer is
+// captured on the element (drag keeps tracking when it leaves the element or
+// crosses a panel) and released on pointerup/pointercancel; a non-primary pointer
+// (second finger) is ignored mid-drag so multi-touch never makes the drag jump.
+// onStart returns false to decline the drag (e.g. a miss in the gizmo raycast),
+// leaving the pointerdown to propagate to other handlers.
+export function usePointerDrag(el, { onStart, onMove, onEnd, button = 0 } = {}) {
+    if (!el) return { destroy() {} };
+    let pid = null;
+    const onMoveEv = (e) => {
+        if (pid == null || e.pointerId !== pid) return;
+        if (onMove) onMove(e);
+    };
+    const finish = (e, cancelled) => {
+        if (pid == null) return;
+        try { el.releasePointerCapture(pid); } catch {}
+        pid = null;
+        el.removeAttribute('data-pointer-dragging');
+        window.removeEventListener('pointermove', onMoveEv);
+        window.removeEventListener('pointerup', onUpEv);
+        window.removeEventListener('pointercancel', onCancelEv);
+        if (onEnd) onEnd(e, cancelled);
+    };
+    const onUpEv = (e) => { if (e.pointerId === pid) finish(e, false); };
+    const onCancelEv = (e) => { if (e.pointerId === pid) finish(e, true); };
+    const onDown = (e) => {
+        if (button != null && e.button != null && e.button !== button) return;
+        if (pid != null) return; // already dragging with the primary pointer
+        if (onStart && onStart(e) === false) return; // caller declined (e.g. raycast miss)
+        pid = e.pointerId;
+        el.setAttribute('data-pointer-dragging', 'true');
+        try { el.setPointerCapture(pid); } catch {}
+        window.addEventListener('pointermove', onMoveEv);
+        window.addEventListener('pointerup', onUpEv);
+        window.addEventListener('pointercancel', onCancelEv);
+    };
+    el.addEventListener('pointerdown', onDown);
+    return { destroy() {
+        el.removeEventListener('pointerdown', onDown);
+        window.removeEventListener('pointermove', onMoveEv);
+        window.removeEventListener('pointerup', onUpEv);
+        window.removeEventListener('pointercancel', onCancelEv);
+    }, get dragging() { return pid != null; } };
+}
+
 export function useDropTarget(el, { accepts = [], onDrop, onDragOver } = {}) {
     if (!el) return { destroy() {} };
     el.setAttribute('data-drop-target', '');

package/src/components.js

@@ -58,7 +58,7 @@ export {
 } from './components/form-primitives.js';
 
 export {
-    useDraggable, useDropTarget, useNumberScrub, Reorderable,
+    useDraggable, useDropTarget, useNumberScrub, usePointerDrag, Reorderable,
     useKeyboardShortcut, formatShortcut, ShortcutHint,
     useKeyboardShortcutHelp, ShortcutHelpDialog
 } from './components/interaction-primitives.js';