@adia-ai/web-components 0.7.9 → 0.7.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.7.9",
+  "version": "0.7.11",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/components.css

@@ -47,6 +47,7 @@
 @import "../components/timeline/timeline.css";
 @import "../components/upload/upload.css";
 @import "../components/card/card.css";
+@import "../components/frame/frame.css";
 @import "../components/avatar/avatar.css";
 @import "../components/progress/progress.css";
 @import "../components/skeleton/skeleton.css";

package/styles/verse.css

@@ -50,7 +50,7 @@
     /* ── Radius — verse register: tighter bounds (max 16px). Re-declares the
        clamps so they resolve verse's min/max (base clamps compute at :root). ── */
     --a-radius-min: 0.25rem; /* 4px */
-    --a-radius-max: 1rem;    /* 16px */
+    --a-radius-max: 0.75rem;    /* 12px */
     --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
     --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
     --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
@@ -109,10 +109,10 @@
      roles → -sm, text/data roles → -md. The global [size] rules override these
      on [size]-bearing elements (resolving verse's sm/lg token values). */
   [verse]:not([size]) {
-    --a-display-size: var(--a-display-sm);
-    --a-title-size: var(--a-title-sm);
-    --a-heading-size: var(--a-heading-sm);
-    --a-section-size: var(--a-section-sm);
+    --a-display-size: var(--a-display-md);
+    --a-title-size: var(--a-title-md);
+    --a-heading-size: var(--a-heading-md);
+    --a-section-size: var(--a-section-md);
     --a-subsection-size: var(--a-subsection-md);
     --a-body-size: var(--a-body-md);
     --a-deck-size: var(--a-deck-md);

package/traits/resizable/resizable.js

@@ -1,7 +1,22 @@
 import { defineTrait } from '../define.js';
 
-const EDGE_SIZE = 8;
-const EDGES = ['top', 'right', 'bottom', 'left'];
+const EDGE = 8;    // edge hit-zone thickness
+const CORNER = 14; // corner hit-zone (square, sits on top of the edges it overlaps)
+
+// Edges resize one axis; corners resize both (x/y at once). `dw`/`dh` are the sign
+// applied to the pointer delta (dx/dy): +1 grows from this side, -1 grows from the
+// opposite (anchored) side, 0 leaves that axis untouched. Corners are listed LAST so
+// they're appended after the edges and win the hit-test where they overlap.
+const HANDLES = [
+  { name: 'top',          dw: 0,  dh: -1, cursor: 'ns-resize',   geo: { top: '0', left: '0', right: '0', height: `${EDGE}px` } },
+  { name: 'right',        dw: 1,  dh: 0,  cursor: 'ew-resize',   geo: { top: '0', right: '0', bottom: '0', width: `${EDGE}px` } },
+  { name: 'bottom',       dw: 0,  dh: 1,  cursor: 'ns-resize',   geo: { bottom: '0', left: '0', right: '0', height: `${EDGE}px` } },
+  { name: 'left',         dw: -1, dh: 0,  cursor: 'ew-resize',   geo: { top: '0', left: '0', bottom: '0', width: `${EDGE}px` } },
+  { name: 'top-left',     dw: -1, dh: -1, cursor: 'nwse-resize', geo: { top: '0', left: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'top-right',    dw: 1,  dh: -1, cursor: 'nesw-resize', geo: { top: '0', right: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'bottom-right', dw: 1,  dh: 1,  cursor: 'nwse-resize', geo: { bottom: '0', right: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'bottom-left',  dw: -1, dh: 1,  cursor: 'nesw-resize', geo: { bottom: '0', left: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+];
 
 export const resizable = defineTrait({
   name: 'resizable',
@@ -12,70 +27,68 @@ export const resizable = defineTrait({
   config: [],
   setup({ host }) {
     let resizing = false;
-    let activeEdge = null;
+    let active = null;
     let startX = 0;
     let startY = 0;
     let startWidth = 0;
     let startHeight = 0;
-    let startLeft = 0;
-    let startTop = 0;
+    let centerX = 0;
+    let centerY = 0;
+    let symmetric = false;
     const handles = [];
 
-    // Ensure host is positioned
-    const pos = getComputedStyle(host).position;
-    if (pos === 'static') {
+    // Ensure host is positioned so the absolute hit-zones anchor to it.
+    if (getComputedStyle(host).position === 'static') {
       host.style.position = 'relative';
     }
 
-    for (const edge of EDGES) {
+    for (const h of HANDLES) {
       const handle = document.createElement('div');
-      handle.dataset.resizableHandle = edge;
-      Object.assign(handle.style, {
-        position: 'absolute',
-        zIndex: '9999',
-        ...(edge === 'top' && { top: '0', left: '0', right: '0', height: `${EDGE_SIZE}px`, cursor: 'ns-resize' }),
-        ...(edge === 'bottom' && { bottom: '0', left: '0', right: '0', height: `${EDGE_SIZE}px`, cursor: 'ns-resize' }),
-        ...(edge === 'left' && { top: '0', bottom: '0', left: '0', width: `${EDGE_SIZE}px`, cursor: 'ew-resize' }),
-        ...(edge === 'right' && { top: '0', bottom: '0', right: '0', width: `${EDGE_SIZE}px`, cursor: 'ew-resize' }),
-      });
+      handle.dataset.resizableHandle = h.name;
+      Object.assign(handle.style, { position: 'absolute', zIndex: '9999', cursor: h.cursor, ...h.geo });
 
       handle.addEventListener('pointerdown', (e) => {
         e.stopPropagation();
         resizing = true;
-        activeEdge = edge;
+        active = h.name;
         startX = e.clientX;
         startY = e.clientY;
         const rect = host.getBoundingClientRect();
         startWidth = rect.width;
         startHeight = rect.height;
-        startLeft = rect.left;
-        startTop = rect.top;
+        centerX = rect.left + rect.width / 2;
+        centerY = rect.top + rect.height / 2;
+        // A transform-positioned host re-centers itself as it resizes (e.g.
+        // translate(-50%,-50%) centering), so resize SYMMETRICALLY from the center
+        // and the dragged edge/corner stays under the cursor. A static/anchored host
+        // instead grows from the opposite (fixed) edge.
+        symmetric = getComputedStyle(host).transform !== 'none';
 
         handle.setPointerCapture(e.pointerId);
         host.setAttribute('data-resizable-resizing', '');
-        host.setAttribute('data-resizable-edge', edge);
+        host.setAttribute('data-resizable-edge', h.name);
       });
 
       handle.addEventListener('pointermove', (e) => {
-        if (!resizing || activeEdge !== edge) return;
-        const dx = e.clientX - startX;
-        const dy = e.clientY - startY;
-
-        if (edge === 'right') {
-          host.style.width = `${Math.max(0, startWidth + dx)}px`;
-        } else if (edge === 'left') {
-          host.style.width = `${Math.max(0, startWidth - dx)}px`;
-        } else if (edge === 'bottom') {
-          host.style.height = `${Math.max(0, startHeight + dy)}px`;
-        } else if (edge === 'top') {
-          host.style.height = `${Math.max(0, startHeight - dy)}px`;
+        if (!resizing || active !== h.name) return;
+        if (symmetric) {
+          // Dragged edge/corner tracks the cursor; the host grows from its center
+          // (both sides) so the re-centering transform keeps it in place.
+          if (h.dw) host.style.width = `${Math.max(0, 2 * h.dw * (e.clientX - centerX))}px`;
+          if (h.dh) host.style.height = `${Math.max(0, 2 * h.dh * (e.clientY - centerY))}px`;
+        } else {
+          // Anchored: the opposite edge stays fixed; the dragged edge grows from it.
+          const dx = e.clientX - startX;
+          const dy = e.clientY - startY;
+          if (h.dw) host.style.width = `${Math.max(0, startWidth + h.dw * dx)}px`;
+          if (h.dh) host.style.height = `${Math.max(0, startHeight + h.dh * dy)}px`;
         }
       });
 
       handle.addEventListener('pointerup', () => {
-        if (!resizing || activeEdge !== edge) return;
+        if (!resizing || active !== h.name) return;
         resizing = false;
-        activeEdge = null;
+        active = null;
         host.removeAttribute('data-resizable-resizing');
         host.removeAttribute('data-resizable-edge');
 

package/traits/resizable/resizable.test.js

@@ -17,4 +17,23 @@ describe('resizable', () => {
     expect(host.hasAttribute('data-resizable-resizing')).toBe(false);
     expect(host.hasAttribute('data-resizable-edge')).toBe(false);
   });
+
+  it('creates 8 hit-zones — 4 edges + 4 corners (resize in x, y, and x/y)', () => {
+    const host = mountHost();
+    connectTrait(resizable, host);
+    const names = [...host.querySelectorAll('[data-resizable-handle]')]
+      .map((el) => el.dataset.resizableHandle);
+    expect(names).toHaveLength(8);
+    expect(names).toEqual(expect.arrayContaining([
+      'top', 'right', 'bottom', 'left',
+      'top-left', 'top-right', 'bottom-right', 'bottom-left',
+    ]));
+  });
+
+  it('disconnect removes all hit-zones', () => {
+    const host = mountHost();
+    const inst = connectTrait(resizable, host);
+    inst.disconnect(host);
+    expect(host.querySelectorAll('[data-resizable-handle]')).toHaveLength(0);
+  });
 });