anentrypoint-design 0.0.202 → 0.0.204

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.202",
+  "version": "0.0.204",
   "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/content.js

@@ -107,8 +107,8 @@ export function RowLink({ code, title, sub, meta, href = '#', key, target }) {
     return Row({ code, title, sub, meta, href, kind: 'link', key, target });
 }
 
-export function Section({ title, eyebrow, children }) {
-    return h('section', { class: 'ds-section' },
+export function Section({ title, eyebrow, children, id }) {
+    return h('section', { class: 'ds-section', id: id || null },
         eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
         title ? h('h3', {}, title) : null,
         ...(Array.isArray(children) ? children : [children])

package/src/components/shell.js

@@ -240,14 +240,18 @@ export function Status({ left = [], right = [] } = {}) {
     );
 }
 
-// Toggle the mobile sidebar drawer. Pure-DOM because AppShell is stateless
-// chrome; the class lives on .app-body and is read by the <=900px media query.
-function toggleSide(open) {
-    const body = document.querySelector('.app-body');
+// Toggle the sidebar drawer. Pure-DOM because AppShell is stateless chrome; the
+// class lives on .app-body and is read by the @container(max-width:900px) query.
+// `fromEl` scopes the toggle to the shell that owns the clicked control — without
+// it, document.querySelector grabs the FIRST .app-body on the page, so a second
+// dashboard instance (multiple thebird WM windows) would toggle the wrong drawer.
+function toggleSide(open, fromEl) {
+    const shell = (fromEl && fromEl.closest && fromEl.closest('.app')) || document;
+    const body = shell.querySelector('.app-body');
     if (!body) return;
     const next = open != null ? open : !body.classList.contains('side-open');
     body.classList.toggle('side-open', next);
-    const btn = document.querySelector('.app-side-toggle');
+    const btn = shell.querySelector('.app-side-toggle');
     if (btn) btn.setAttribute('aria-expanded', next ? 'true' : 'false');
 }
 
@@ -267,12 +271,12 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
         hasSide ? h('button', {
             class: 'app-side-toggle', type: 'button',
             'aria-label': 'toggle navigation', 'aria-expanded': 'false', 'aria-controls': 'app-main',
-            onclick: () => toggleSide(),
+            onclick: (e) => toggleSide(null, e.currentTarget),
         }, Icon('menu')) : null,
         chrome,
         h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
-            h('div', { class: 'app-side-scrim', 'aria-hidden': 'true', onclick: () => toggleSide(false) }),
-            h('div', { class: 'app-side-shell', onclick: (e) => { if (e.target.closest('a')) toggleSide(false); } }, sideNode),
+            h('div', { class: 'app-side-scrim', 'aria-hidden': 'true', onclick: (e) => toggleSide(false, e.currentTarget) }),
+            h('div', { class: 'app-side-shell', onclick: (e) => { if (e.target.closest('a')) toggleSide(false, e.currentTarget); } }, sideNode),
             // tabindex=-1 so the skip-link (href="#app-main") actually moves
             // keyboard focus into the main region, not just scroll to it.
             h('main', { class: 'app-main' + (narrow ? ' narrow' : ''), id: 'app-main', tabindex: '-1' }, ...(Array.isArray(main) ? main : [main]))

package/src/kits/os/theme.css

@@ -453,7 +453,7 @@ html, body {
     .wm-bar .wm-btns { pointer-events: auto; }
     .wm-btns .wm-btn:nth-child(1), .wm-btns .wm-btn:nth-child(2) { display: none !important; }
     .wm-btns .wm-btn:nth-child(3) { width: 44px !important; height: 44px !important; border-radius: var(--r-1, 6px) !important; background: var(--os-bg-3) !important; color: var(--os-fg) !important; }
-    .wm-resize { display: none !important; }
+    .wm-resize, .wm-edge { display: none !important; }
 }
 
 /* ---- data-attr theme/accent: deferred to the canonical theme ----
@@ -1405,7 +1405,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
     border-radius: var(--r-1, 6px) !important;
     background: var(--os-bg-3) !important; color: var(--os-fg) !important;
   }
-  .ds-247420 .wm-resize { display: none !important; }
+  .ds-247420 .wm-resize, .ds-247420 .wm-edge { display: none !important; }
   /* collapse the menubar workspace cluster on mobile (the unconditional
    * .ds-247420 .os-instances{display:flex} otherwise leaves it visible) */
   .ds-247420 .os-menubar .os-instances,

package/src/kits/os/wm.css

@@ -109,6 +109,21 @@
         linear-gradient(135deg, transparent 0 70%, currentColor 70% 80%, transparent 80% 100%);
 }
 
+/* Edge + corner resize hit-zones. Invisible (no glyph) — they only widen the
+ * grab area beyond the SE .wm-resize grip. `width`/`height` are the grab
+ * thickness; corners overlap edges and win via later source order + size. */
+.wm-edge { position: absolute; touch-action: none; z-index: 1; }
+.wm-edge[data-dir='n'] { top: -3px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
+.wm-edge[data-dir='s'] { bottom: -3px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
+.wm-edge[data-dir='e'] { right: -3px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
+.wm-edge[data-dir='w'] { left: -3px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
+.wm-edge[data-dir='ne'] { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
+.wm-edge[data-dir='nw'] { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
+.wm-edge[data-dir='sw'] { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
+
+.wm-win.wm-min .wm-edge,
+.wm-win.wm-max .wm-edge { display: none; }
+
 .wm-win.wm-min .wm-body,
 .wm-win.wm-min .wm-resize { display: none; }
 

package/src/kits/os/wm.js

@@ -46,10 +46,19 @@ export function renderWindow(opts = {}) {
     bodyEl.className = 'wm-body';
     setBodyContent(bodyEl, body);
 
-    const resize = document.createElement('div');
-    resize.className = 'wm-resize';
+    // Resize affordances: one grip per edge + corner. `data-dir` carries the
+    // direction (n/s/e/w/ne/nw/se/sw) to the consumer's resize math. The SE
+    // corner keeps the visible diagonal grip glyph (.wm-resize); the other
+    // seven are invisible hit-zones (.wm-edge) styled in wm.css.
+    const DIRS = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
+    const grips = DIRS.map(dir => {
+        const g = document.createElement('div');
+        g.className = dir === 'se' ? 'wm-resize' : 'wm-edge';
+        g.dataset.dir = dir;
+        return g;
+    });
 
-    el.append(bar, bodyEl, resize);
+    el.append(bar, bodyEl, ...grips);
 
     minBtn.addEventListener('click', e => { e.stopPropagation(); callbacks.onMinimize && callbacks.onMinimize(); });
     maxBtn.addEventListener('click', e => { e.stopPropagation(); callbacks.onMaximize && callbacks.onMaximize(); });
@@ -66,11 +75,11 @@ export function renderWindow(opts = {}) {
         if (callbacks.onDragStart) callbacks.onDragStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight });
     });
 
-    resize.addEventListener('pointerdown', e => {
+    grips.forEach(g => g.addEventListener('pointerdown', e => {
         e.stopPropagation();
         focus();
-        if (callbacks.onResizeStart) callbacks.onResizeStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight });
-    });
+        if (callbacks.onResizeStart) callbacks.onResizeStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight, dir: g.dataset.dir });
+    }));
 
     applyFocused(el, focused);
     applyMaximized(el, maximized);