anentrypoint-design 0.0.89 → 0.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.89",
+  "version": "0.0.91",
   "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",
@@ -29,6 +29,10 @@
     "./desktop/files-app.js": "./src/desktop/files-app.js",
     "./desktop/monitor-app.js": "./src/desktop/monitor-app.js",
     "./desktop/about-app.js": "./src/desktop/about-app.js",
+    "./desktop/terminal-app.js": "./src/desktop/terminal-app.js",
+    "./desktop/browser-app.js": "./src/desktop/browser-app.js",
+    "./desktop/validator-app.js": "./src/desktop/validator-app.js",
+    "./desktop/app-panes.css": "./src/desktop/app-panes.css",
     "./colors_and_type.css": "./colors_and_type.css",
     "./app-shell.css": "./app-shell.css",
     "./page-html": {

package/src/desktop/app-panes.css

@@ -0,0 +1,152 @@
+/* App-pane chrome for kit components rendered inside .wm-win bodies.
+   Bible tokens only — no hardcoded color, font, or radius. Focus = inset rail; no shadows, no gradients. */
+
+/* ── terminal-app ───────────────────────────────────────────────────── */
+.terminal-app {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--os-bg-1);
+    color: var(--os-fg);
+    font-family: var(--os-mono);
+}
+.terminal-app-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 10px;
+    background: var(--os-bg-2);
+    font-family: var(--os-mono);
+    font-size: 11px;
+    color: var(--os-fg-2);
+    text-transform: lowercase;
+    flex: 0 0 auto;
+}
+.terminal-app-title { font-family: var(--os-mono); }
+.terminal-app-status { font-family: var(--os-mono); color: var(--os-fg-3); }
+.terminal-app-slot {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--os-bg-0);
+}
+
+/* ── browser-app ────────────────────────────────────────────────────── */
+.browser-app {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--os-bg-1);
+    color: var(--os-fg);
+    font-family: var(--os-font);
+}
+.browser-app-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    background: var(--os-bg-2);
+    flex: 0 0 auto;
+}
+.browser-app-btn {
+    height: 28px;
+    min-width: 28px;
+    padding: 0 8px;
+    background: var(--os-bg-3);
+    color: var(--os-fg);
+    border: none;
+    border-radius: var(--os-radius-sm);
+    font: 12px var(--os-mono);
+    cursor: pointer;
+    outline: none;
+}
+.browser-app-btn:hover { background: var(--os-accent-soft); }
+.browser-app-url {
+    flex: 1 1 auto;
+    height: 28px;
+    padding: 0 10px;
+    background: var(--os-bg-0);
+    color: var(--os-fg);
+    border: none;
+    border-radius: var(--os-radius-sm);
+    font: 12px var(--os-mono);
+    outline: none;
+}
+.browser-app-url:focus { box-shadow: inset 4px 0 0 var(--os-accent); }
+.browser-app-slot {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--os-bg-0);
+    display: flex;
+}
+.browser-app-slot > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
+.browser-app-status {
+    flex: 0 0 auto;
+    padding: 2px 10px;
+    background: var(--os-bg-2);
+    font: 11px var(--os-mono);
+    color: var(--os-fg-3);
+    text-transform: lowercase;
+    min-height: 18px;
+}
+
+/* ── validator-app ──────────────────────────────────────────────────── */
+.validator-app {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--os-bg-1);
+    color: var(--os-fg);
+    font-family: var(--os-font);
+}
+.validator-app-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 10px;
+    background: var(--os-bg-2);
+    flex: 0 0 auto;
+}
+.validator-app-banner {
+    padding: 2px 10px;
+    border-radius: 999px;
+    font: 11px var(--os-mono);
+    text-transform: lowercase;
+    background: var(--os-bg-3);
+    color: var(--os-fg-2);
+}
+.validator-app-banner[data-state="pass"] { background: var(--os-accent-soft); color: var(--os-fg); }
+.validator-app-banner[data-state="fail"] { background: var(--os-red); color: var(--os-bg-0); }
+.validator-app-counts {
+    font: 11px var(--os-mono);
+    color: var(--os-fg-2);
+}
+.validator-app-rerun {
+    margin-left: auto;
+    height: 24px;
+    padding: 0 10px;
+    background: var(--os-bg-3);
+    color: var(--os-fg);
+    border: none;
+    border-radius: var(--os-radius-sm);
+    font: 11px var(--os-mono);
+    text-transform: lowercase;
+    cursor: pointer;
+    outline: none;
+}
+.validator-app-rerun:hover { background: var(--os-accent-soft); }
+.validator-app-slot {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    background: var(--os-bg-0);
+}
+.validator-app-slot > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
+.validator-app-frame {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: var(--os-bg-0);
+}

package/src/desktop/browser-app.js

@@ -0,0 +1,58 @@
+// Browser-pane paint surface — URL bar + iframe slot + status row. Consumer owns iframe.
+// renderBrowserPane({initialUrl, callbacks: {onNavigate, onReload, onBack, onForward}})
+//   -> {node, slot, setUrl, setStatus, dispose}.
+// slot is the container the consumer should append its iframe to.
+
+export function renderBrowserPane(opts = {}) {
+    const { initialUrl = 'about:blank', callbacks = {} } = opts;
+    const node = document.createElement('div');
+    node.className = 'app-pane browser-app';
+    node.dataset.component = 'browser-app';
+
+    const bar = document.createElement('div');
+    bar.className = 'browser-app-bar';
+
+    const mkBtn = (label, role) => {
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.className = 'browser-app-btn';
+        b.dataset.role = role;
+        b.textContent = label;
+        return b;
+    };
+    const backBtn = mkBtn('<', 'back');
+    const fwdBtn = mkBtn('>', 'forward');
+    const reloadBtn = mkBtn('reload', 'reload');
+
+    const urlInput = document.createElement('input');
+    urlInput.type = 'text';
+    urlInput.className = 'browser-app-url';
+    urlInput.value = initialUrl;
+    urlInput.spellcheck = false;
+    urlInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && callbacks.onNavigate) callbacks.onNavigate(urlInput.value);
+    });
+    backBtn.addEventListener('click', () => callbacks.onBack && callbacks.onBack());
+    fwdBtn.addEventListener('click', () => callbacks.onForward && callbacks.onForward());
+    reloadBtn.addEventListener('click', () => callbacks.onReload && callbacks.onReload());
+
+    bar.append(backBtn, fwdBtn, reloadBtn, urlInput);
+
+    const slot = document.createElement('div');
+    slot.className = 'browser-app-slot';
+    slot.dataset.role = 'iframe-mount';
+
+    const status = document.createElement('div');
+    status.className = 'browser-app-status';
+    status.textContent = '';
+
+    node.append(bar, slot, status);
+
+    return {
+        node,
+        get slot() { return slot; },
+        setUrl(u) { urlInput.value = u; },
+        setStatus(s) { status.textContent = s; },
+        dispose() {},
+    };
+}

package/src/desktop/terminal-app.js

@@ -0,0 +1,45 @@
+// Terminal-app paint surface — bible classes, pure DOM. Consumer attaches xterm to mount slot.
+// renderTerminal({title, statusText, theme}) -> {node, mount, setTitle, setStatus, dispose}.
+// mount(termInstance) calls termInstance.open(slot) and fit when available; consumer owns xterm lifecycle.
+
+export function renderTerminal(opts = {}) {
+    const { title = 'terminal', statusText = '', theme = 'dark' } = opts;
+    const node = document.createElement('div');
+    node.className = 'app-pane terminal-app';
+    node.dataset.component = 'terminal-app';
+    node.dataset.theme = theme;
+
+    const head = document.createElement('div');
+    head.className = 'terminal-app-head';
+    const titleEl = document.createElement('span');
+    titleEl.className = 'terminal-app-title';
+    titleEl.textContent = title;
+    const statusEl = document.createElement('span');
+    statusEl.className = 'terminal-app-status';
+    statusEl.textContent = statusText;
+    head.append(titleEl, statusEl);
+
+    const slot = document.createElement('div');
+    slot.className = 'terminal-app-slot';
+    slot.dataset.role = 'xterm-mount';
+
+    node.append(head, slot);
+
+    function mount(term) {
+        if (!term || typeof term.open !== 'function') return;
+        term.open(slot);
+        if (term._addonManager) {
+            const addons = term._addonManager._addons || [];
+            for (const a of addons) { try { a.instance && a.instance.fit && a.instance.fit(); } catch (_) {} }
+        }
+    }
+
+    return {
+        node,
+        mount,
+        setTitle(t) { titleEl.textContent = t; },
+        setStatus(s) { statusEl.textContent = s; },
+        get slot() { return slot; },
+        dispose() {},
+    };
+}

package/src/desktop/validator-app.js

@@ -0,0 +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() {},
+    };
+}