anentrypoint-design 0.0.77 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "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",
@@ -26,6 +26,9 @@
     "./desktop/shell.js": "./src/desktop/shell.js",
     "./desktop/freddie-dashboard.js": "./src/desktop/freddie-dashboard.js",
     "./desktop/freddie-dashboard.css": "./src/desktop/freddie-dashboard.css",
+    "./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",
     "./colors_and_type.css": "./colors_and_type.css",
     "./app-shell.css": "./app-shell.css",
     "./page-html": {

package/src/desktop/about-app.js

@@ -0,0 +1,52 @@
+// About-app paint surface — static info card, bible classes.
+// renderAboutApp({brand, tagline, bullets, links}) -> {node, dispose}.
+// Consumer provides content; module owns layout + classes.
+
+export function renderAboutApp(opts = {}) {
+    const {
+        brand = 'thebird / web os',
+        tagline = 'browser-native web OS. multi-instance, per-instance fs / worker / shell / browser. no server.',
+        bullets = [
+            'POSIX terminal · IndexedDB filesystem',
+            'OffscreenCanvas worker per instance',
+            'CDP-shaped browser pane',
+            'libsql via sql.js · freddie host',
+            'responsive: phone / tablet / desktop',
+        ],
+        footer = 'open <code>validator</code> to run isolation harness · click apps menu for more.',
+        links = [
+            { href: 'https://github.com/AnEntrypoint/thebird', text: 'source' },
+            { href: './validate.html', text: 'validate' },
+        ],
+    } = opts;
+
+    const node = document.createElement('div');
+    node.className = 'app-pane';
+    node.dataset.component = 'about-app';
+
+    const h2 = document.createElement('h2');
+    h2.textContent = brand;
+    const p = document.createElement('p');
+    p.textContent = tagline;
+    const ul = document.createElement('ul');
+    for (const b of bullets) {
+        const li = document.createElement('li');
+        li.textContent = b;
+        ul.appendChild(li);
+    }
+    const foot = document.createElement('p');
+    foot.innerHTML = footer;
+    const meta = document.createElement('p');
+    meta.className = 'meta';
+    links.forEach((l, i) => {
+        const a = document.createElement('a');
+        a.href = l.href;
+        a.textContent = l.text;
+        meta.appendChild(a);
+        if (i < links.length - 1) meta.appendChild(document.createTextNode(' · '));
+    });
+
+    node.append(h2, p, ul, foot, meta);
+
+    return { node, dispose() {} };
+}

package/src/desktop/files-app.js

@@ -0,0 +1,44 @@
+// Files-app paint surface — bible classes, pure DOM. Consumer provides callbacks.
+// renderFilesApp({list, readFile}) -> {node, refresh, dispose}.
+// list() -> Promise<string[]>; readFile(path) -> Promise<string|Uint8Array>.
+// Header text comes from {label} (consumer assembles "<id> — N files").
+
+export function renderFilesApp(opts = {}) {
+    const { list, readFile, label = '', pollMs = 2000 } = opts;
+    const node = document.createElement('div');
+    node.className = 'app-pane mono';
+    node.dataset.component = 'files-app';
+
+    let preview = null;
+    async function refresh() {
+        const items = await list();
+        node.innerHTML = '';
+        const head = document.createElement('div');
+        head.className = 'head';
+        head.textContent = (label ? label + ' — ' : '') + items.length + ' files';
+        node.appendChild(head);
+        for (const p of items) {
+            const row = document.createElement('div');
+            row.className = 'row';
+            row.textContent = p;
+            row.addEventListener('click', async () => {
+                const body = await readFile(p);
+                if (preview) preview.remove();
+                preview = document.createElement('pre');
+                preview.textContent = String(body);
+                node.appendChild(preview);
+            });
+            node.appendChild(row);
+        }
+    }
+
+    let timer = null;
+    refresh().catch(() => {});
+    if (pollMs > 0) timer = setInterval(() => refresh().catch(() => {}), pollMs);
+
+    return {
+        node,
+        refresh,
+        dispose() { if (timer) clearInterval(timer); },
+    };
+}

package/src/desktop/monitor-app.js

@@ -0,0 +1,34 @@
+// Monitor-app paint surface — bible classes, pure DOM. Consumer supplies getStats().
+// getStats() -> Promise<{instanceId, frames, shells, windows, appsRegistered, jsHeapMb, jsHeapLimitMb, time}>.
+// Field names map directly to displayed lines so consumer controls labels by value, not template.
+
+export function renderMonitorApp(opts = {}) {
+    const { getStats, pollMs = 1000 } = opts;
+    const node = document.createElement('div');
+    node.className = 'app-pane mono';
+    node.dataset.component = 'monitor-app';
+
+    async function tick() {
+        const s = (await Promise.resolve(getStats())) || {};
+        const heap = (s.jsHeapMb != null && s.jsHeapLimitMb != null)
+            ? `js heap: ${Number(s.jsHeapMb).toFixed(1)} MB / ${Number(s.jsHeapLimitMb).toFixed(0)} MB`
+            : 'js heap: n/a';
+        node.textContent = [
+            `instance: ${s.instanceId ?? ''}`,
+            `worker frames: ${s.frames ?? 0}`,
+            `shells: ${s.shells ?? 0}`,
+            `windows: ${s.windows ?? 0}`,
+            `apps registered: ${s.appsRegistered ?? 0}`,
+            heap,
+            `now: ${s.time ?? new Date().toLocaleTimeString()}`,
+        ].join('\n');
+    }
+
+    tick().catch(() => {});
+    const timer = setInterval(() => tick().catch(() => {}), pollMs);
+    return {
+        node,
+        tick,
+        dispose() { clearInterval(timer); },
+    };
+}

package/src/desktop/shell.js

@@ -140,11 +140,23 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
     const clockTimer = setInterval(tickClock, 30000);
 
     let activeContext = null;
+    let activeInstanceId = null;
     function setContext(ctx) { activeContext = ctx; }
 
+    function applyInstanceFilter() {
+        if (!activeInstanceId) return;
+        for (const wEl of document.querySelectorAll('.wm-win[data-instance-id]')) {
+            const wInst = wEl.dataset.instanceId;
+            wEl.style.display = (wInst === activeInstanceId) ? '' : 'none';
+        }
+    }
+
     function refreshTaskbar() {
         taskbar.innerHTML = '';
         for (const w of wm.list()) {
+            const wEl = document.querySelector('.wm-win[data-id="' + w.id + '"]');
+            const wInst = wEl && wEl.dataset.instanceId;
+            if (activeInstanceId && wInst && wInst !== activeInstanceId) continue;
             const t = document.createElement('button');
             t.className = 'os-task' + (w.focused ? ' focused' : '');
             t.type = 'button';
@@ -155,6 +167,15 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
         }
     }
 
+    function setActiveInstance(id) {
+        activeInstanceId = id;
+        for (const btn of instSwitch.querySelectorAll('.os-btn')) {
+            btn.classList.toggle('active', btn.dataset.instanceId === id);
+        }
+        applyInstanceFilter();
+        refreshTaskbar();
+    }
+
     function openApp(appId) {
         const app = (typeof registry.get === 'function') ? registry.get(appId) : registry[appId];
         if (!app) throw new Error('unknown app: ' + appId);
@@ -165,6 +186,11 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
             const titlePrefix = (activeContext && activeContext.titlePrefix) ? activeContext.titlePrefix + ' · ' : '';
             const win = wm.open({ title: titlePrefix + app.name, body: r.node, kind: appId, width: sz.w, height: sz.h, x: 100 + (wm.count * 28) % 240, y: 80 + (wm.count * 22) % 180 });
             win._app = { id: appId, dispose: r.dispose };
+            if (activeInstanceId && win.el) {
+                win.el.dataset.instanceId = activeInstanceId;
+                win.instanceId = activeInstanceId;
+            }
+            win.appId = appId;
             refreshTaskbar();
             return win;
         };
@@ -176,8 +202,9 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
     const taskTimer = setInterval(refreshTaskbar, 500);
 
     const api = {
-        wm, registry, openApp, setContext, refreshTaskbar,
+        wm, registry, openApp, setContext, refreshTaskbar, setActiveInstance,
         openDrawer, closeDrawer, openMenu, closeMenu,
+        get activeInstanceId() { return activeInstanceId; },
         elements: { osRoot, menubar, taskbar, appsMenu, sideRail, drawer, instSwitch, homeBtn, appsBtn },
         dispose() { clearInterval(clockTimer); clearInterval(taskTimer); osRoot.remove(); sideRail.remove(); drawer.remove(); },
     };

package/src/desktop/theme.css

@@ -308,7 +308,10 @@ html, body {
 
 .os-spacer { flex: 1 1 auto; }
 .os-tray { display: flex; align-items: center; gap: 6px; }
-.os-instances { display: flex; gap: 6px; margin-left: 8px; }
+.os-instances { display: flex; gap: 4px; margin-left: 8px; max-width: 280px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 4px; }
+.os-instances::-webkit-scrollbar { height: 4px; }
+.os-instances .os-btn { flex: 0 0 auto; min-width: 36px; padding: 2px 8px; font-family: var(--os-mono); font-size: 11px; }
+.os-instances .os-btn.active { background: var(--panel-select, var(--os-accent-soft)); color: var(--os-fg); border-color: var(--panel-accent, var(--os-accent)); box-shadow: inset 0 0 0 1px var(--panel-accent, var(--os-accent)); }
 .os-menubar [data-role="home"] { display: none; }
 .os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 8000; }
 .os-menubar, .os-taskbar { pointer-events: auto; flex: 0 0 auto; }