anentrypoint-design 0.0.78 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.78",
+  "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); },
+    };
+}