anentrypoint-design 0.0.413 → 0.0.415

package/dist/src/kits/os/wm.css

@@ -8,28 +8,40 @@
     position: fixed;
     inset: 0;
     pointer-events: none;
-    z-index: 9000;
+    z-index: var(--z-window);
 }
 
 .wm-win {
     position: absolute;
     min-width: 200px;
     min-height: 120px;
+    /* Never exceed the .wm-root desktop area — a window sized on a large
+       monitor must stay recoverable when the viewport shrinks. */
+    max-width: 100%;
+    max-height: 100%;
     background: var(--os-bg-1);
     color: var(--os-fg);
     border: none;
-    border-radius: var(--r-3, 18px);
+    border-radius: var(--os-radius, var(--r-2, 10px));
     display: flex;
     flex-direction: column;
     pointer-events: auto;
     overflow: hidden;
 }
 .wm-win.wm-focused { box-shadow: inset 4px 0 0 var(--os-accent); }
+/* Promote to a compositor layer only for the duration of a drag/resize so the
+   per-frame left/top/width/height writes don't force a main-thread layout each
+   pointermove. Released on pointerup (class removed) to avoid the permanent
+   will-change memory/perf anti-pattern. */
+.wm-win.wm-dragging { will-change: left, top; }
+.wm-win.wm-resizing { will-change: width, height; }
 
 .wm-bar {
     display: flex;
     align-items: center;
-    padding: 6px 10px;
+    min-height: 36px;
+    box-sizing: border-box;
+    padding: 8px 12px;
     background: var(--os-bg-2);
     cursor: move;
     user-select: none;
@@ -39,14 +51,16 @@
 }
 .wm-title {
     flex: 1;
+    min-width: 0;
     font: 12px var(--os-font);
+    color: var(--os-fg-2);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     text-transform: lowercase;
 }
 
-.wm-btns { display: flex; gap: 4px; }
+.wm-btns { display: flex; gap: 6px; }
 .wm-btn {
     width: 22px;
     height: 22px;
@@ -60,10 +74,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--r-1, 6px);
+    border-radius: var(--os-radius-sm, var(--r-1, 6px));
     transition: background 100ms ease, color 100ms ease;
+    touch-action: manipulation;
 }
-.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
+.wm-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
 
 .wm-body {
     flex: 1;
@@ -76,20 +91,45 @@
     position: absolute;
     right: 0;
     bottom: 0;
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
+    padding: 2px;
+    box-sizing: border-box;
     cursor: nwse-resize;
     background: transparent;
     color: var(--os-fg-3);
     opacity: 0.4;
-    font: 10px var(--os-mono);
-    line-height: 1;
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
     touch-action: none;
 }
-.wm-resize::after { content: '\25E2'; }
+.wm-resize:hover { opacity: 0.7; }
+/* Resize grip drawn with CSS (two diagonal hairlines) instead of a decorative
+ * unicode content glyph; keeps the affordance, drops the glyph tell. */
+.wm-resize::after {
+    content: '';
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 9px;
+    height: 9px;
+    background:
+        linear-gradient(135deg, transparent 0 45%, currentColor 45% 55%, transparent 55% 100%),
+        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: var(--z-raised); }
+.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; }
@@ -102,7 +142,19 @@
     border-radius: 0;
 }
 
-@media (max-width: 767px) {
+/* Touch: lift resize hit-zones and window buttons toward the 44px floor
+   (wm.css must be self-sufficient; theme.css only covers .ds-247420). */
+@media (pointer: coarse) {
+    .wm-edge[data-dir='n'], .wm-edge[data-dir='s'] { height: 20px; }
+    .wm-edge[data-dir='e'], .wm-edge[data-dir='w'] { width: 20px; }
+    .wm-edge[data-dir='ne'], .wm-edge[data-dir='nw'], .wm-edge[data-dir='sw'] { width: 32px; height: 32px; }
+    .wm-resize { width: 32px; height: 32px; }
+    .wm-btn { min-width: 44px; min-height: 44px; }
+}
+
+/* Full-screen windows on phones AND short landscape phones — a width-only
+   query misses 812x375 landscape, which cannot host floating chrome. */
+@media (max-width: 767px), ((max-height: 500px) and (orientation: landscape) and (pointer: coarse)) {
     .wm-win {
         left: 0 !important;
         top: 0 !important;
@@ -112,4 +164,5 @@
         border: none;
     }
     .wm-resize { display: none; }
+    .wm-edge { display: none; }
 }

package/dist/src/kits/os/wm.js

@@ -20,14 +20,40 @@ export function renderWindow(opts = {}) {
         callbacks = {},
     } = opts;
 
+    // Keep at least MIN px of the window horizontally inside the container and
+    // the titlebar (BAR px) vertically reachable, so a window can always be
+    // grabbed by pointer (persisted bounds from a larger viewport included).
+    const MIN_VISIBLE = 60;
+    const BAR_H = 36;
+    function clampBounds(b, p) {
+        const pw = p ? p.clientWidth : window.innerWidth;
+        const ph = p ? p.clientHeight : window.innerHeight;
+        const out = { ...b };
+        if (typeof out.w === 'number') out.w = Math.min(out.w, pw);
+        if (typeof out.h === 'number') out.h = Math.min(out.h, ph);
+        if (typeof out.x === 'number') {
+            const w = typeof out.w === 'number' ? out.w : MIN_VISIBLE;
+            out.x = Math.max(MIN_VISIBLE - w, Math.min(out.x, pw - MIN_VISIBLE));
+        }
+        if (typeof out.y === 'number') out.y = Math.max(0, Math.min(out.y, ph - BAR_H));
+        return out;
+    }
+
     const el = document.createElement('div');
     el.className = 'wm-win';
     el.dataset.kind = kind;
     if (instanceId) el.dataset.instanceId = instanceId;
-    el.style.left = bounds.x + 'px';
-    el.style.top = bounds.y + 'px';
-    el.style.width = bounds.w + 'px';
-    el.style.height = bounds.h + 'px';
+    // Floating window chrome is a dialog surface: role="dialog" (not
+    // aria-modal, since sibling windows stay operable — this is a
+    // non-modal multi-window desktop, not a blocking modal) + aria-label
+    // from the titlebar text so AT announces which window has focus.
+    el.setAttribute('role', 'dialog');
+    el.setAttribute('aria-label', title);
+    const b0 = clampBounds(bounds, null);
+    el.style.left = b0.x + 'px';
+    el.style.top = b0.y + 'px';
+    el.style.width = b0.w + 'px';
+    el.style.height = b0.h + 'px';
 
     const bar = document.createElement('div');
     bar.className = 'wm-bar';
@@ -46,27 +72,72 @@ 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.
+    // NOT KEYBOARD ACCESSIBLE: these grips only wire pointerdown (see below);
+    // resize math is owned entirely by the consumer's pointermove handler
+    // (module comment at top of file), so there is no keydown-driven delta to
+    // wire without reaching into consumer-owned drag state. role="separator"
+    // + aria-orientation give a screen reader a name for the affordance even
+    // though it cannot be operated without a pointer -- an honest partial
+    // label, not a claim of full keyboard support.
+    const ORIENT = { n: 'horizontal', s: 'horizontal', ne: 'horizontal', nw: 'horizontal', se: 'horizontal', sw: 'horizontal', e: 'vertical', w: 'vertical' };
+    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;
+        g.setAttribute('role', 'separator');
+        g.setAttribute('aria-orientation', ORIENT[dir] || 'horizontal');
+        g.setAttribute('aria-label', 'resize ' + dir + ' (pointer only)');
+        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(); });
     closeBtn.addEventListener('click', e => { e.stopPropagation(); callbacks.onClose && callbacks.onClose(); });
 
-    el.addEventListener('pointerdown', () => callbacks.onFocus && callbacks.onFocus());
+    const focus = () => callbacks.onFocus && callbacks.onFocus();
+
+    el.addEventListener('pointerdown', () => focus());
+
+    // Basic focus trap: while this window carries .wm-focused, Tab/Shift+Tab
+    // cycles only within its own focusable set instead of escaping to a
+    // sibling window or the page behind it. Scoped to keydown on `el` itself
+    // (additive listener, no DOM structure change) and gated on the class the
+    // consumer already toggles via setFocused/applyFocused below, so an
+    // unfocused window is completely untouched by this handler.
+    el.addEventListener('keydown', e => {
+        if (e.key !== 'Tab' || !el.classList.contains('wm-focused')) return;
+        const focusable = el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (!focusable.length) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    });
 
     bar.addEventListener('pointerdown', e => {
         if (e.target.closest('.wm-btn')) return;
-        callbacks.onFocus && callbacks.onFocus();
+        e.stopPropagation();
+        focus();
         if (callbacks.onDragStart) callbacks.onDragStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight });
     });
 
-    resize.addEventListener('pointerdown', e => {
-        callbacks.onFocus && callbacks.onFocus();
-        if (callbacks.onResizeStart) callbacks.onResizeStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight });
-    });
+    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, dir: g.dataset.dir });
+    }));
 
     applyFocused(el, focused);
     applyMaximized(el, maximized);
@@ -77,10 +148,14 @@ export function renderWindow(opts = {}) {
         setTitle(t) { titleEl.textContent = t; },
         setBody(b) { setBodyContent(bodyEl, b); },
         setBounds(b) {
-            if (typeof b.x === 'number') el.style.left = b.x + 'px';
-            if (typeof b.y === 'number') el.style.top = b.y + 'px';
-            if (typeof b.w === 'number') el.style.width = b.w + 'px';
-            if (typeof b.h === 'number') el.style.height = b.h + 'px';
+            const c = clampBounds({
+                ...b,
+                w: typeof b.w === 'number' ? b.w : el.offsetWidth,
+            }, el.offsetParent);
+            if (typeof c.x === 'number') el.style.left = c.x + 'px';
+            if (typeof c.y === 'number') el.style.top = c.y + 'px';
+            if (typeof b.w === 'number') el.style.width = c.w + 'px';
+            if (typeof b.h === 'number') el.style.height = c.h + 'px';
         },
         setFocused(v) { applyFocused(el, v); },
         setMaximized(v) { applyMaximized(el, v); },
@@ -97,6 +172,7 @@ function mkBtn(label, ttl) {
     b.className = 'wm-btn';
     b.textContent = label;
     b.title = ttl;
+    b.setAttribute('aria-label', ttl);
     return b;
 }
 

package/dist/src/markdown.js

@@ -1,39 +1,148 @@
 // Markdown — lazy-loads marked + DOMPurify on first call. Stub-safe:
 // if loading fails, we fall back to a simple escape-and-linebreak pass so
-// the chat doesn't go blank.
+// the chat doesn't go blank. FAIL-CLOSED: on any doubt about whether the
+// sanitizer is actually active (load failure, parse/sanitize throw, or a
+// purifier that doesn't look like a real DOMPurify instance), the render
+// path returns escaped plaintext rather than ever risking raw HTML reaching
+// innerHTML.
+
+import { escapeHtml } from './html-escape.js';
 
 let _ready = null;
 let _marked = null;
 let _purify = null;
+// A failed load is NOT cached forever: we drop _ready so a later render retries,
+// guarded by a small backoff so an offline session doesn't hammer the CDN.
+let _failedAt = 0;
+const RETRY_BACKOFF_MS = 30000;
+
+// Pin to exact semver so the CDN cannot silently swap code under us.
+// SRI cannot be applied to dynamic ESM imports in browsers (no importmap
+// integrity support at design time); pinning the version is the best available
+// mitigation for CDN-supply-chain risk on these two dependencies. Both are
+// overridable (see configureMarkdownCdn below) for a consumer that wants to
+// self-host, mirror-pin, or route through a CSP-allowlisted proxy; the
+// defaults below are byte-for-byte unchanged from before, so a zero-config
+// consumer's behavior is untouched.
+const DEFAULT_MARKED_URL = 'https://cdn.jsdelivr.net/npm/marked@15.0.12/+esm';
+const DEFAULT_PURIFY_URL = 'https://cdn.jsdelivr.net/npm/dompurify@3.2.6/+esm';
+
+let _markedUrl = DEFAULT_MARKED_URL;
+let _purifyUrl = DEFAULT_PURIFY_URL;
+
+// Optional override for where marked/DOMPurify are fetched from. Additive:
+// call before the first render() to take effect (ensureReady() reads these
+// module-level vars lazily on first invocation only, same as before). Every
+// existing consumer that never calls this keeps hitting the pinned jsDelivr
+// URLs above, byte-for-byte. Passing null/undefined for a key resets that
+// one URL back to its default without touching the other.
+export function configureMarkdownCdn({ markedUrl, purifyUrl } = {}) {
+    if (markedUrl !== undefined) _markedUrl = markedUrl || DEFAULT_MARKED_URL;
+    if (purifyUrl !== undefined) _purifyUrl = purifyUrl || DEFAULT_PURIFY_URL;
+    // Force a fresh load on the next render so a runtime override (e.g. a
+    // consumer switching to a self-hosted mirror after boot) actually takes.
+    _ready = null;
+    _failedAt = 0;
+}
+
+// Read-only introspection of the URLs actually in effect (defaults or
+// override) — useful for a consumer's own SRI/CSP audit tooling.
+export function getMarkdownCdnConfig() {
+    return { markedUrl: _markedUrl, purifyUrl: _purifyUrl };
+}
 
-const MARKED_URL = 'https://cdn.jsdelivr.net/npm/marked@15/+esm';
-const PURIFY_URL = 'https://cdn.jsdelivr.net/npm/dompurify@3/+esm';
+// True while the markdown stack is unavailable (escaped-fallback rendering).
+// Consumers (markdown-cache) use this to avoid caching degraded output.
+export function isDegraded() {
+    return !_marked || !_purify || typeof _purify.sanitize !== 'function';
+}
 
 export async function ensureReady() {
     if (_ready) return _ready;
+    if (_failedAt && Date.now() - _failedAt < RETRY_BACKOFF_MS) return false;
     _ready = (async () => {
         try {
-            const [{ marked }, DOMPurifyMod] = await Promise.all([import(MARKED_URL), import(PURIFY_URL)]);
+            const [{ marked }, DOMPurifyMod] = await Promise.all([import(_markedUrl), import(_purifyUrl)]);
+            const purify = DOMPurifyMod.default || DOMPurifyMod;
+            // Fail closed if either module didn't resolve to something usable —
+            // a CDN that 200s with an empty/HTML error-page body can satisfy the
+            // dynamic import yet hand back a shape with no .parse/.sanitize.
+            if (!marked || typeof marked.parse !== 'function') throw new Error('marked module missing parse()');
+            if (!purify || typeof purify.sanitize !== 'function') throw new Error('DOMPurify module missing sanitize()');
             _marked = marked;
-            _purify = DOMPurifyMod.default || DOMPurifyMod;
+            _purify = purify;
+            _failedAt = 0;
             return true;
         } catch (err) {
             console.warn('[247420] markdown loader failed:', err);
+            // Reset the cached promise so a later render retries (after backoff).
+            // Also drop any partial module refs so isDegraded()/renderMarkdown
+            // never treat a half-initialized state as ready.
+            _marked = null;
+            _purify = null;
+            _ready = null;
+            _failedAt = Date.now();
             return false;
         }
     })();
     return _ready;
 }
 
-function escapeHtml(s) {
-    return String(s).replace(/[&<>"']/g, (c) => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
-    })[c]);
+// Fail-closed plaintext fallback, always wrapped in the same safe container
+// shape the real sanitized output would use (a plain block the caller can
+// innerHTML directly) — never bare unwrapped text relying on caller discipline.
+function escapedFallback(src) {
+    return escapeHtml(src).replace(/\n/g, '<br>');
 }
 
+// The single HTML-entity escape for the whole SDK now lives in html-escape.js
+// (full set incl. quotes, so it is safe in attribute contexts too).
+// Re-exported here for backward compatibility with existing importers of
+// escapeHtml from this module. page-html.js re-exports this as `escape`.
+export { escapeHtml };
+
 export async function renderMarkdown(src) {
     const ok = await ensureReady();
-    if (!ok) return escapeHtml(src).replace(/\n/g, '<br>');
-    const raw = _marked.parse(String(src));
-    return _purify.sanitize(raw);
+    if (!ok) return escapedFallback(src);
+    // Fail-closed around the parse+sanitize call itself too, not just the
+    // loader: a CDN module that resolved but throws mid-parse (a malformed
+    // remote payload, a marked/DOMPurify version mismatch) must never let a
+    // partially-produced `raw` string reach the caller unsanitized, and must
+    // never propagate an unhandled rejection that a caller might swallow into
+    // a raw-HTML fallback of their own.
+    try {
+        const raw = _marked.parse(String(src));
+        if (typeof _purify.sanitize !== 'function') throw new Error('purifier unavailable mid-render');
+        return _purify.sanitize(raw, { FORCE_BODY: true });
+    } catch (err) {
+        console.warn('[247420] markdown render failed, falling back to escaped text:', err);
+        // Treat this exactly like a load failure: drop refs and start the
+        // backoff so the next call retries a fresh load rather than re-hitting
+        // whatever made this one throw.
+        _marked = null;
+        _purify = null;
+        _ready = null;
+        _failedAt = Date.now();
+        return escapedFallback(src);
+    }
+}
+
+// Sanitize already-rendered HTML before it touches innerHTML. For any surface
+// that injects host/user-authored HTML (e.g. a wiki page body), this is the
+// single XSS gate — DOMPurify strips scripts/handlers. If the purifier hasn't
+// loaded, we safe-fail by escaping (raw tags show as text, never execute).
+export async function sanitizeHtml(html) {
+    const ok = await ensureReady();
+    if (!ok) return escapeHtml(html);
+    try {
+        if (typeof _purify.sanitize !== 'function') throw new Error('purifier unavailable mid-sanitize');
+        return _purify.sanitize(String(html), { FORCE_BODY: true });
+    } catch (err) {
+        console.warn('[247420] sanitizeHtml failed, falling back to escaped text:', err);
+        _marked = null;
+        _purify = null;
+        _ready = null;
+        _failedAt = Date.now();
+        return escapeHtml(html);
+    }
 }

package/dist/src/motion.js

@@ -11,12 +11,28 @@ export function installMotion() {
     style.textContent = `
 @media (prefers-reduced-motion: no-preference) {
   .ds-247420 [data-anim="in"] {
-    opacity: 0; transform: translateY(8px);
-    transition: opacity 320ms cubic-bezier(.2,0,0,1), transform 320ms cubic-bezier(.2,0,0,1);
+    opacity: 0; transform: translateY(14px);
+    /* Physical signature reveal — a slight spring landing, not a flat fade. */
+    transition: opacity var(--dur-reveal, 560ms) var(--ease, cubic-bezier(.2,0,0,1)),
+                transform var(--dur-reveal, 560ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
   }
   .ds-247420 [data-anim="ready"] {
     opacity: 1; transform: translateY(0);
   }
+}
+/* [data-motion="reduced"] is the in-app user override (motion-toggle.js) —
+   applies the exact same reduced-motion treatment as the OS-level
+   prefers-reduced-motion media query above, independent of the OS setting.
+   Selector applies regardless of the media query's own match state, so it
+   correctly overrides the animated block above on any OS. */
+:root[data-motion="reduced"] .ds-247420 [data-anim="in"],
+.ds-247420[data-motion="reduced"] [data-anim="in"] {
+  opacity: 1 !important; transform: translateY(0) !important;
+  transition: none !important;
+}
+:root[data-motion="reduced"] .ds-247420 [data-anim="ready"],
+.ds-247420[data-motion="reduced"] [data-anim="ready"] {
+  transition: none !important;
 }`.trim();
     document.head.appendChild(style);
 }