anentrypoint-design 0.0.121 → 0.0.124

package/src/kits/os/validate.css

@@ -1,19 +1,19 @@
-body { margin: 0; padding: 24px; font-family: var(--os-font); background: var(--os-bg-0); color: var(--os-fg); }
-h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
-h3 { margin: 18px 0 6px 0; color: var(--os-fg-2); font-size: 13px; font-weight: 600; }
-.sub { color: var(--os-fg-2); margin-bottom: 20px; }
-table { border-collapse: collapse; width: 100%; max-width: 760px; }
-td { padding: 6px 12px; border-bottom: 1px solid var(--os-bg-3); }
-td.k { width: 280px; color: var(--os-fg-2); }
-td.v { font-weight: 600; }
-td.v.pass { color: var(--os-accent); }
-td.v.fail { color: var(--os-red); }
-td.v.pending { color: var(--os-amber); }
-.all { margin-top: 16px; padding: 12px; background: var(--os-bg-1); max-width: 760px; border-radius: var(--os-radius-sm); }
-.all.green { color: var(--os-accent); }
-.all.red { color: var(--os-red); }
-.err { color: var(--os-red); white-space: pre-wrap; margin-top: 12px; }
-a { color: var(--os-accent); text-decoration: none; }
-a:hover { color: var(--os-accent-2); }
-iframe.osframe { position: absolute; left: -9999px; top: 0; width: 1280px; height: 900px; border: 0; }
-iframe.osframe-phone { position: absolute; left: -9999px; top: 0; width: 414px; height: 720px; border: 0; }
+body { margin: 0; padding: 24px; font-family: var(--os-font); background: var(--os-bg-0); color: var(--os-fg); }
+h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
+h3 { margin: 18px 0 6px 0; color: var(--os-fg-2); font-size: 13px; font-weight: 600; }
+.sub { color: var(--os-fg-2); margin-bottom: 20px; }
+table { border-collapse: collapse; width: 100%; max-width: 760px; }
+td { padding: 6px 12px; border-bottom: 1px solid var(--os-bg-3); }
+td.k { width: 280px; color: var(--os-fg-2); }
+td.v { font-weight: 600; }
+td.v.pass { color: var(--os-accent); }
+td.v.fail { color: var(--os-red); }
+td.v.pending { color: var(--os-amber); }
+.all { margin-top: 16px; padding: 12px; background: var(--os-bg-1); max-width: 760px; border-radius: var(--os-radius-sm); }
+.all.green { color: var(--os-accent); }
+.all.red { color: var(--os-red); }
+.err { color: var(--os-red); white-space: pre-wrap; margin-top: 12px; }
+a { color: var(--os-accent); text-decoration: none; }
+a:hover { color: var(--os-accent-2); }
+iframe.osframe { position: absolute; left: -9999px; top: 0; width: 1280px; height: 900px; border: 0; }
+iframe.osframe-phone { position: absolute; left: -9999px; top: 0; width: 414px; height: 720px; border: 0; }

package/src/kits/os/validator-app.js

@@ -1,55 +1,55 @@
-// Validator-app paint surface — status banner + counts + iframe slot. Consumer mounts iframe.
-// renderValidator({src, results, callbacks: {onRerun}}) -> {node, slot, setResults, dispose}.
-// results shape: {allGreen, passed, total, ms} — banner updates colors + counts.
-
-export function renderValidator(opts = {}) {
-    const { src = '', results = null, callbacks = {} } = opts;
-    const node = document.createElement('div');
-    node.className = 'app-pane validator-app';
-    node.dataset.component = 'validator-app';
-
-    const head = document.createElement('div');
-    head.className = 'validator-app-head';
-    const banner = document.createElement('span');
-    banner.className = 'validator-app-banner';
-    banner.dataset.state = 'pending';
-    banner.textContent = 'pending';
-    const counts = document.createElement('span');
-    counts.className = 'validator-app-counts';
-    counts.textContent = '0 / 0';
-    const rerun = document.createElement('button');
-    rerun.type = 'button';
-    rerun.className = 'validator-app-rerun';
-    rerun.textContent = 'rerun';
-    rerun.addEventListener('click', () => callbacks.onRerun && callbacks.onRerun());
-    head.append(banner, counts, rerun);
-
-    const slot = document.createElement('div');
-    slot.className = 'validator-app-slot';
-    slot.dataset.role = 'validator-mount';
-
-    if (src) {
-        const f = document.createElement('iframe');
-        f.className = 'validator-app-frame';
-        f.src = src;
-        slot.appendChild(f);
-    }
-
-    node.append(head, slot);
-
-    function setResults(r) {
-        if (!r) { banner.dataset.state = 'pending'; banner.textContent = 'pending'; counts.textContent = '0 / 0'; return; }
-        const state = r.allGreen ? 'pass' : 'fail';
-        banner.dataset.state = state;
-        banner.textContent = state;
-        counts.textContent = (r.passed ?? 0) + ' / ' + (r.total ?? 0) + (r.ms != null ? ' · ' + r.ms + 'ms' : '');
-    }
-    if (results) setResults(results);
-
-    return {
-        node,
-        get slot() { return slot; },
-        setResults,
-        dispose() {},
-    };
-}
+// Validator-app paint surface — status banner + counts + iframe slot. Consumer mounts iframe.
+// renderValidator({src, results, callbacks: {onRerun}}) -> {node, slot, setResults, dispose}.
+// results shape: {allGreen, passed, total, ms} — banner updates colors + counts.
+
+export function renderValidator(opts = {}) {
+    const { src = '', results = null, callbacks = {} } = opts;
+    const node = document.createElement('div');
+    node.className = 'app-pane validator-app';
+    node.dataset.component = 'validator-app';
+
+    const head = document.createElement('div');
+    head.className = 'validator-app-head';
+    const banner = document.createElement('span');
+    banner.className = 'validator-app-banner';
+    banner.dataset.state = 'pending';
+    banner.textContent = 'pending';
+    const counts = document.createElement('span');
+    counts.className = 'validator-app-counts';
+    counts.textContent = '0 / 0';
+    const rerun = document.createElement('button');
+    rerun.type = 'button';
+    rerun.className = 'validator-app-rerun';
+    rerun.textContent = 'rerun';
+    rerun.addEventListener('click', () => callbacks.onRerun && callbacks.onRerun());
+    head.append(banner, counts, rerun);
+
+    const slot = document.createElement('div');
+    slot.className = 'validator-app-slot';
+    slot.dataset.role = 'validator-mount';
+
+    if (src) {
+        const f = document.createElement('iframe');
+        f.className = 'validator-app-frame';
+        f.src = src;
+        slot.appendChild(f);
+    }
+
+    node.append(head, slot);
+
+    function setResults(r) {
+        if (!r) { banner.dataset.state = 'pending'; banner.textContent = 'pending'; counts.textContent = '0 / 0'; return; }
+        const state = r.allGreen ? 'pass' : 'fail';
+        banner.dataset.state = state;
+        banner.textContent = state;
+        counts.textContent = (r.passed ?? 0) + ' / ' + (r.total ?? 0) + (r.ms != null ? ' · ' + r.ms + 'ms' : '');
+    }
+    if (results) setResults(results);
+
+    return {
+        node,
+        get slot() { return slot; },
+        setResults,
+        dispose() {},
+    };
+}

package/src/kits/os/wm.css

@@ -1,115 +1,115 @@
-/* ============================================================
-   Window Manager visuals — paired with createWM() behavior
-   Tokens: --os-* (defined by desktop/theme.css)
-   Bible: tonal surfaces, no borders for chrome, inset rail for focus.
-   ============================================================ */
-
-.wm-root {
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: 9000;
-}
-
-.wm-win {
-    position: absolute;
-    min-width: 200px;
-    min-height: 120px;
-    background: var(--os-bg-1);
-    color: var(--os-fg);
-    border: none;
-    border-radius: var(--r-3, 18px);
-    display: flex;
-    flex-direction: column;
-    pointer-events: auto;
-    overflow: hidden;
-}
-.wm-win.wm-focused { box-shadow: inset 4px 0 0 var(--os-accent); }
-
-.wm-bar {
-    display: flex;
-    align-items: center;
-    padding: 6px 10px;
-    background: var(--os-bg-2);
-    cursor: move;
-    user-select: none;
-    gap: 8px;
-    touch-action: none;
-    border: none;
-}
-.wm-title {
-    flex: 1;
-    font: 12px var(--os-font);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-transform: lowercase;
-}
-
-.wm-btns { display: flex; gap: 4px; }
-.wm-btn {
-    width: 22px;
-    height: 22px;
-    border: none;
-    background: var(--os-bg-3);
-    color: var(--os-fg-2);
-    cursor: pointer;
-    padding: 0;
-    font: 600 12px var(--os-mono);
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--r-1, 6px);
-    transition: background 100ms ease, color 100ms ease;
-}
-.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
-
-.wm-body {
-    flex: 1;
-    overflow: auto;
-    position: relative;
-    background: var(--os-bg-1);
-}
-
-.wm-resize {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    width: 14px;
-    height: 14px;
-    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-win.wm-min .wm-body,
-.wm-win.wm-min .wm-resize { display: none; }
-
-.wm-win.wm-max {
-    left: 0 !important;
-    top: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    border-radius: 0;
-}
-
-@media (max-width: 767px) {
-    .wm-win {
-        left: 0 !important;
-        top: 0 !important;
-        width: 100% !important;
-        height: 100% !important;
-        border-radius: 0;
-        border: none;
-    }
-    .wm-resize { display: none; }
-}
+/* ============================================================
+   Window Manager visuals — paired with createWM() behavior
+   Tokens: --os-* (defined by desktop/theme.css)
+   Bible: tonal surfaces, no borders for chrome, inset rail for focus.
+   ============================================================ */
+
+.wm-root {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9000;
+}
+
+.wm-win {
+    position: absolute;
+    min-width: 200px;
+    min-height: 120px;
+    background: var(--os-bg-1);
+    color: var(--os-fg);
+    border: none;
+    border-radius: var(--r-3, 18px);
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    overflow: hidden;
+}
+.wm-win.wm-focused { box-shadow: inset 4px 0 0 var(--os-accent); }
+
+.wm-bar {
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    background: var(--os-bg-2);
+    cursor: move;
+    user-select: none;
+    gap: 8px;
+    touch-action: none;
+    border: none;
+}
+.wm-title {
+    flex: 1;
+    font: 12px var(--os-font);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: lowercase;
+}
+
+.wm-btns { display: flex; gap: 4px; }
+.wm-btn {
+    width: 22px;
+    height: 22px;
+    border: none;
+    background: var(--os-bg-3);
+    color: var(--os-fg-2);
+    cursor: pointer;
+    padding: 0;
+    font: 600 12px var(--os-mono);
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--r-1, 6px);
+    transition: background 100ms ease, color 100ms ease;
+}
+.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
+
+.wm-body {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+    background: var(--os-bg-1);
+}
+
+.wm-resize {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 14px;
+    height: 14px;
+    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-win.wm-min .wm-body,
+.wm-win.wm-min .wm-resize { display: none; }
+
+.wm-win.wm-max {
+    left: 0 !important;
+    top: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 0;
+}
+
+@media (max-width: 767px) {
+    .wm-win {
+        left: 0 !important;
+        top: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        border-radius: 0;
+        border: none;
+    }
+    .wm-resize { display: none; }
+}

package/src/kits/os/wm.js

@@ -1,111 +1,111 @@
-// Window manager paint surface — pure DOM rendering, no state machine.
-// Consumer (thebird) owns z-order, focus stack, alt-tab, drag/resize math.
-// renderWindow returns a handle whose setBounds is called from pointermove.
-//
-// Visuals are bible-aligned: mac-less chip buttons (-+x in mono),
-// inset 4px rail for focus, low-opacity \25E2 glyph for resize affordance,
-// pointer-events:none on .wm-bar with auto on title+close so phone @media
-// auto-maximize can suppress drag without a JS branch.
-
-export function renderWindow(opts = {}) {
-    const {
-        title = 'window',
-        body = null,
-        bounds = { x: 60, y: 60, w: 480, h: 320 },
-        focused = false,
-        maximized = false,
-        minimized = false,
-        instanceId = '',
-        kind = 'div',
-        callbacks = {},
-    } = opts;
-
-    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';
-
-    const bar = document.createElement('div');
-    bar.className = 'wm-bar';
-    const titleEl = document.createElement('span');
-    titleEl.className = 'wm-title';
-    titleEl.textContent = title;
-    const btns = document.createElement('div');
-    btns.className = 'wm-btns';
-    const minBtn = mkBtn('-', 'minimize');
-    const maxBtn = mkBtn('+', 'maximize');
-    const closeBtn = mkBtn('x', 'close');
-    btns.append(minBtn, maxBtn, closeBtn);
-    bar.append(titleEl, btns);
-
-    const bodyEl = document.createElement('div');
-    bodyEl.className = 'wm-body';
-    setBodyContent(bodyEl, body);
-
-    const resize = document.createElement('div');
-    resize.className = 'wm-resize';
-
-    el.append(bar, bodyEl, resize);
-
-    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());
-
-    bar.addEventListener('pointerdown', e => {
-        if (e.target.closest('.wm-btn')) return;
-        callbacks.onFocus && callbacks.onFocus();
-        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 });
-    });
-
-    applyFocused(el, focused);
-    applyMaximized(el, maximized);
-    applyMinimized(el, minimized);
-
-    return {
-        el,
-        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';
-        },
-        setFocused(v) { applyFocused(el, v); },
-        setMaximized(v) { applyMaximized(el, v); },
-        setMinimized(v) { applyMinimized(el, v); },
-        setInstanceId(id) { if (id) el.dataset.instanceId = id; else delete el.dataset.instanceId; },
-        setZIndex(z) { el.style.zIndex = String(z); },
-        getBounds() { return { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight }; },
-        dispose() { el.remove(); },
-    };
-}
-
-function mkBtn(label, ttl) {
-    const b = document.createElement('button');
-    b.className = 'wm-btn';
-    b.textContent = label;
-    b.title = ttl;
-    return b;
-}
-
-function setBodyContent(host, body) {
-    while (host.firstChild) host.removeChild(host.firstChild);
-    if (body instanceof Node) host.appendChild(body);
-    else if (typeof body === 'string') host.innerHTML = body;
-}
-
-function applyFocused(el, v) { el.classList.toggle('wm-focused', !!v); }
-function applyMaximized(el, v) { el.classList.toggle('wm-max', !!v); }
-function applyMinimized(el, v) { el.classList.toggle('wm-min', !!v); }
+// Window manager paint surface — pure DOM rendering, no state machine.
+// Consumer (thebird) owns z-order, focus stack, alt-tab, drag/resize math.
+// renderWindow returns a handle whose setBounds is called from pointermove.
+//
+// Visuals are bible-aligned: mac-less chip buttons (-+x in mono),
+// inset 4px rail for focus, low-opacity \25E2 glyph for resize affordance,
+// pointer-events:none on .wm-bar with auto on title+close so phone @media
+// auto-maximize can suppress drag without a JS branch.
+
+export function renderWindow(opts = {}) {
+    const {
+        title = 'window',
+        body = null,
+        bounds = { x: 60, y: 60, w: 480, h: 320 },
+        focused = false,
+        maximized = false,
+        minimized = false,
+        instanceId = '',
+        kind = 'div',
+        callbacks = {},
+    } = opts;
+
+    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';
+
+    const bar = document.createElement('div');
+    bar.className = 'wm-bar';
+    const titleEl = document.createElement('span');
+    titleEl.className = 'wm-title';
+    titleEl.textContent = title;
+    const btns = document.createElement('div');
+    btns.className = 'wm-btns';
+    const minBtn = mkBtn('-', 'minimize');
+    const maxBtn = mkBtn('+', 'maximize');
+    const closeBtn = mkBtn('x', 'close');
+    btns.append(minBtn, maxBtn, closeBtn);
+    bar.append(titleEl, btns);
+
+    const bodyEl = document.createElement('div');
+    bodyEl.className = 'wm-body';
+    setBodyContent(bodyEl, body);
+
+    const resize = document.createElement('div');
+    resize.className = 'wm-resize';
+
+    el.append(bar, bodyEl, resize);
+
+    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());
+
+    bar.addEventListener('pointerdown', e => {
+        if (e.target.closest('.wm-btn')) return;
+        callbacks.onFocus && callbacks.onFocus();
+        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 });
+    });
+
+    applyFocused(el, focused);
+    applyMaximized(el, maximized);
+    applyMinimized(el, minimized);
+
+    return {
+        el,
+        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';
+        },
+        setFocused(v) { applyFocused(el, v); },
+        setMaximized(v) { applyMaximized(el, v); },
+        setMinimized(v) { applyMinimized(el, v); },
+        setInstanceId(id) { if (id) el.dataset.instanceId = id; else delete el.dataset.instanceId; },
+        setZIndex(z) { el.style.zIndex = String(z); },
+        getBounds() { return { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight }; },
+        dispose() { el.remove(); },
+    };
+}
+
+function mkBtn(label, ttl) {
+    const b = document.createElement('button');
+    b.className = 'wm-btn';
+    b.textContent = label;
+    b.title = ttl;
+    return b;
+}
+
+function setBodyContent(host, body) {
+    while (host.firstChild) host.removeChild(host.firstChild);
+    if (body instanceof Node) host.appendChild(body);
+    else if (typeof body === 'string') host.innerHTML = body;
+}
+
+function applyFocused(el, v) { el.classList.toggle('wm-focused', !!v); }
+function applyMaximized(el, v) { el.classList.toggle('wm-max', !!v); }
+function applyMinimized(el, v) { el.classList.toggle('wm-min', !!v); }