anentrypoint-design 0.0.42 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "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",
@@ -12,6 +12,18 @@
     },
     "./app": "./dist/247420.app.js",
     "./css": "./dist/247420.css",
+    "./desktop": {
+      "import": "./src/desktop/index.js",
+      "default": "./src/desktop/index.js"
+    },
+    "./desktop/theme.css": "./src/desktop/theme.css",
+    "./desktop/icons.js": "./src/desktop/icons.js",
+    "./desktop/shell.js": "./src/desktop/shell.js",
+    "./page-html": {
+      "import": "./src/page-html.js",
+      "default": "./src/page-html.js"
+    },
+    "./src/page-html.js": "./src/page-html.js",
     "./package.json": "./package.json"
   },
   "files": [

package/src/desktop/icons.js

@@ -0,0 +1,11 @@
+export const icons = {
+    terminal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg>',
+    browser: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>',
+    canvas: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M3 17l6-5 4 3 5-4 3 2"/></svg>',
+    files: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>',
+    monitor: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-8 4 14 4-10 4 8 2-3"/></svg>',
+    validator: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4L19 6"/></svg>',
+    about: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v5h1"/></svg>',
+    apps: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>',
+    plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>',
+};

package/src/desktop/index.js

@@ -0,0 +1,3 @@
+export { icons } from './icons.js';
+export { createDesktopShell } from './shell.js';
+export const themeUrl = new URL('./theme.css', import.meta.url).href;

package/src/desktop/shell.js

@@ -0,0 +1,180 @@
+import { icons } from './icons.js';
+
+const THEME_CSS_URL = new URL('./theme.css', import.meta.url).href;
+
+function ensureCss() {
+    if (document.querySelector('link[data-os-theme]')) return;
+    const l = document.createElement('link');
+    l.rel = 'stylesheet';
+    l.href = THEME_CSS_URL;
+    l.dataset.osTheme = '1';
+    document.head.appendChild(l);
+}
+
+function ic(svg) {
+    const s = document.createElement('span');
+    s.className = 'ic';
+    s.innerHTML = svg;
+    return s;
+}
+
+function makeBtn(svg, label, role) {
+    const b = document.createElement('button');
+    b.className = 'os-btn';
+    if (role) b.dataset.role = role;
+    if (svg) b.append(ic(svg));
+    if (label) b.append(Object.assign(document.createElement('span'), { textContent: label }));
+    return b;
+}
+
+export function createDesktopShell({ root = document.body, wm, registry, brand = 'desktop', themeUrl, onNewInstance, autoBoot = false } = {}) {
+    if (!wm) throw new Error('createDesktopShell: wm is required');
+    if (!registry) throw new Error('createDesktopShell: registry is required');
+    if (themeUrl) {
+        if (!document.querySelector('link[data-os-theme]')) {
+            const l = document.createElement('link');
+            l.rel = 'stylesheet';
+            l.href = themeUrl;
+            l.dataset.osTheme = '1';
+            document.head.appendChild(l);
+        }
+    } else {
+        ensureCss();
+    }
+
+    const osRoot = document.createElement('div');
+    osRoot.className = 'os-root';
+    osRoot.style.cssText = 'position:fixed;inset:0;display:flex;flex-direction:column;pointer-events:none;z-index:8000';
+    root.appendChild(osRoot);
+
+    const menubar = document.createElement('div');
+    menubar.className = 'os-menubar';
+
+    const brandEl = document.createElement('span');
+    brandEl.className = 'os-brand';
+    brandEl.textContent = brand;
+
+    const appsBtn = makeBtn(icons.apps, 'apps', 'apps');
+    const newInstBtn = onNewInstance ? makeBtn(icons.plus, 'instance', 'add') : null;
+
+    const instSwitch = document.createElement('div');
+    instSwitch.className = 'os-instances';
+    instSwitch.style.cssText = 'display:flex;gap:6px;margin-left:8px';
+
+    const spacer = document.createElement('div');
+    spacer.style.cssText = 'flex:1';
+
+    const tray = document.createElement('div');
+    tray.style.cssText = 'display:flex;align-items:center;gap:6px';
+    const clock = document.createElement('span');
+    clock.className = 'os-clock';
+    tray.appendChild(clock);
+
+    menubar.append(brandEl, appsBtn);
+    if (newInstBtn) menubar.append(newInstBtn);
+    menubar.append(instSwitch, spacer, tray);
+
+    const appsMenu = document.createElement('div');
+    appsMenu.className = 'os-menu';
+    appsMenu.style.cssText = 'position:absolute;display:none;flex-direction:column;pointer-events:auto';
+
+    const sideRail = document.createElement('div');
+    sideRail.className = 'os-side-rail';
+
+    const sheet = document.createElement('div');
+    sheet.className = 'os-mobile-sheet';
+    const sheetHandle = document.createElement('div');
+    sheetHandle.className = 'os-mobile-handle';
+    const sheetGrid = document.createElement('div');
+    sheetGrid.className = 'os-mobile-grid';
+    sheet.append(sheetHandle, sheetGrid);
+    sheet.addEventListener('click', e => {
+        if (e.target === sheet || e.target === sheetHandle) sheet.classList.toggle('open');
+    });
+
+    const apps = typeof registry.list === 'function' ? registry.list() : [...registry.values()];
+
+    for (const app of apps) {
+        const iconSvg = app.icon || icons[app.id] || '';
+        const menuBtn = makeBtn(iconSvg, app.name);
+        menuBtn.addEventListener('click', () => { appsMenu.style.display = 'none'; openApp(app.id); });
+        appsMenu.appendChild(menuBtn);
+
+        const railBtn = document.createElement('button');
+        railBtn.className = 'os-rail-btn';
+        railBtn.title = app.name;
+        railBtn.append(ic(iconSvg));
+        railBtn.addEventListener('click', () => openApp(app.id));
+        sideRail.appendChild(railBtn);
+
+        const tile = document.createElement('button');
+        tile.className = 'os-mobile-tile';
+        tile.append(ic(iconSvg), Object.assign(document.createElement('span'), { className: 'lbl', textContent: app.name }));
+        tile.addEventListener('click', () => { sheet.classList.remove('open'); openApp(app.id); });
+        sheetGrid.appendChild(tile);
+    }
+
+    const taskbar = document.createElement('div');
+    taskbar.className = 'os-taskbar';
+    taskbar.style.cssText = 'margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap';
+
+    osRoot.append(menubar, appsMenu, taskbar);
+    document.body.appendChild(sideRail);
+    document.body.appendChild(sheet);
+
+    appsBtn.addEventListener('click', e => {
+        e.stopPropagation();
+        appsMenu.style.display = appsMenu.style.display === 'flex' ? 'none' : 'flex';
+    });
+    document.addEventListener('click', e => {
+        if (!appsMenu.contains(e.target) && !appsBtn.contains(e.target)) appsMenu.style.display = 'none';
+    });
+
+    function tickClock() { clock.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }
+    tickClock();
+    const clockTimer = setInterval(tickClock, 30000);
+
+    let activeContext = null;
+    function setContext(ctx) { activeContext = ctx; }
+
+    function refreshTaskbar() {
+        taskbar.innerHTML = '';
+        for (const w of wm.list()) {
+            const t = document.createElement('button');
+            t.className = 'os-task' + (w.focused ? ' focused' : '');
+            t.textContent = w.title;
+            t.addEventListener('click', () => wm.focus(w.id));
+            taskbar.appendChild(t);
+        }
+    }
+
+    function openApp(appId) {
+        const app = (typeof registry.get === 'function') ? registry.get(appId) : registry[appId];
+        if (!app) throw new Error('unknown app: ' + appId);
+        const ctx = { ...(activeContext || {}), registry, openApp, wm };
+        const result = app.factory(ctx);
+        const finish = (r) => {
+            const sz = app.defaultSize || { w: 520, h: 360 };
+            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 };
+            refreshTaskbar();
+            return win;
+        };
+        return (result && typeof result.then === 'function') ? result.then(finish) : finish(result);
+    }
+
+    if (newInstBtn) newInstBtn.addEventListener('click', () => onNewInstance && onNewInstance({ instSwitch, setContext, openApp }));
+
+    const taskTimer = setInterval(refreshTaskbar, 500);
+
+    const api = {
+        wm, registry, openApp, setContext, refreshTaskbar,
+        toggleSheet() { sheet.classList.toggle('open'); },
+        elements: { osRoot, menubar, taskbar, appsMenu, sideRail, sheet, instSwitch },
+        dispose() { clearInterval(clockTimer); clearInterval(taskTimer); osRoot.remove(); sideRail.remove(); sheet.remove(); },
+    };
+
+    if (autoBoot && typeof autoBoot === 'string') openApp(autoBoot);
+    return api;
+}

package/src/desktop/theme.css

@@ -0,0 +1,297 @@
+:root {
+    --os-accent: #3FA93A;
+    --os-accent-2: #79e872;
+    --os-accent-soft: rgba(63, 169, 58, 0.16);
+    --os-bg-0: #0b0d10;
+    --os-bg-1: #14181d;
+    --os-bg-2: #1a1f26;
+    --os-bg-3: #222831;
+    --os-fg: #e7ecf2;
+    --os-fg-2: #93a0ad;
+    --os-fg-3: #5a6571;
+    --os-red: #d04444;
+    --os-amber: #c0a02f;
+    --os-green: #3FA93A;
+    --os-radius: 6px;
+    --os-radius-sm: 4px;
+    --os-bar-h: 40px;
+    --os-bar-h-mobile: 48px;
+    --os-rail-w: 64px;
+    --os-tap: 44px;
+    --os-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+    --os-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+}
+
+html, body {
+    background: var(--os-bg-0);
+    color: var(--os-fg);
+    font-family: var(--os-font);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+.os-menubar, .os-taskbar {
+    background: var(--os-bg-1);
+    border: none;
+    color: var(--os-fg);
+    font: 13px var(--os-font);
+    height: var(--os-bar-h);
+    padding: 0 12px;
+    gap: 6px;
+    box-shadow: none;
+}
+.os-menubar { border-bottom: 1px solid var(--os-bg-3); }
+.os-taskbar { border-top: 1px solid var(--os-bg-3); }
+
+.os-brand {
+    color: var(--os-fg);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    margin-right: 14px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+.os-brand::before {
+    content: '';
+    display: inline-block;
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: var(--os-accent);
+}
+
+.os-btn {
+    background: transparent;
+    color: var(--os-fg);
+    border: none;
+    padding: 6px 12px;
+    cursor: pointer;
+    font: inherit;
+    border-radius: var(--os-radius-sm);
+    transition: background 100ms ease, color 100ms ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    outline: none;
+}
+.os-btn:hover { background: var(--os-bg-2); color: var(--os-accent-2); }
+.os-btn.active, .os-btn[aria-pressed="true"] { background: var(--os-accent-soft); color: var(--os-accent-2); }
+.os-btn:focus-visible { background: var(--os-bg-2); }
+.os-btn .ic { color: var(--os-accent); display: inline-flex; width: 16px; height: 16px; }
+.os-btn .ic svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; }
+
+.os-menu {
+    background: var(--os-bg-1);
+    border: 1px solid var(--os-bg-3);
+    border-radius: var(--os-radius);
+    box-shadow: none;
+    padding: 6px;
+    min-width: 220px;
+    top: calc(var(--os-bar-h) + 4px);
+    left: 8px;
+    z-index: 9500;
+}
+.os-menu .os-btn {
+    width: 100%;
+    text-align: left;
+    border-radius: var(--os-radius-sm);
+    padding: 8px 10px;
+    color: var(--os-fg);
+    justify-content: flex-start;
+}
+.os-menu .os-btn:hover { background: var(--os-bg-2); color: var(--os-accent-2); }
+
+.os-clock {
+    color: var(--os-fg-2);
+    font-variant-numeric: tabular-nums;
+    padding: 0 10px;
+    font-size: 12px;
+}
+
+.os-task {
+    border: none;
+    background: var(--os-bg-2);
+    color: var(--os-fg);
+    border-radius: var(--os-radius-sm);
+    padding: 6px 10px;
+    font-size: 12px;
+    transition: background 100ms ease, color 100ms ease;
+    max-width: 200px;
+    cursor: pointer;
+    outline: none;
+}
+.os-task:hover { background: var(--os-bg-3); }
+.os-task.focused {
+    background: var(--os-accent-soft);
+    color: var(--os-accent-2);
+}
+
+.wm-win {
+    background: var(--os-bg-1) !important;
+    border: 1px solid var(--os-bg-3) !important;
+    border-radius: var(--os-radius) !important;
+    box-shadow: none !important;
+    overflow: hidden;
+}
+.wm-win.wm-focused {
+    border-color: var(--os-accent) !important;
+    box-shadow: none !important;
+}
+
+.wm-bar {
+    background: var(--os-bg-2) !important;
+    border-bottom: 1px solid var(--os-bg-3) !important;
+    padding: 8px 12px !important;
+    gap: 10px !important;
+}
+.wm-title {
+    font: 12px var(--os-font) !important;
+    color: var(--os-fg-2) !important;
+    letter-spacing: 0.02em;
+    text-align: center;
+}
+.wm-btns { gap: 6px !important; order: -1; }
+.wm-btn {
+    width: 12px !important;
+    height: 12px !important;
+    border-radius: 50% !important;
+    border: none !important;
+    padding: 0 !important;
+    cursor: pointer;
+    font-size: 0 !important;
+    transition: opacity 100ms ease;
+}
+.wm-btn:hover { opacity: 0.75; }
+.wm-btns .wm-btn:nth-child(1) { background: var(--os-amber) !important; }
+.wm-btns .wm-btn:nth-child(2) { background: var(--os-green) !important; }
+.wm-btns .wm-btn:nth-child(3) { background: var(--os-red) !important; }
+
+.wm-resize {
+    background: var(--os-bg-3) !important;
+    width: 14px !important;
+    height: 14px !important;
+    clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+.wm-body { background: var(--os-bg-1) !important; }
+
+.os-side-rail {
+    position: fixed;
+    left: 0; top: 0; bottom: 0;
+    width: var(--os-rail-w);
+    background: var(--os-bg-1);
+    border-right: 1px solid var(--os-bg-3);
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0;
+    gap: 6px;
+    z-index: 9100;
+    pointer-events: auto;
+}
+.os-rail-btn {
+    width: 48px; height: 48px;
+    border-radius: var(--os-radius-sm);
+    background: transparent;
+    border: none;
+    color: var(--os-fg);
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    transition: background 100ms ease;
+    padding: 0;
+    outline: none;
+}
+.os-rail-btn:hover { background: var(--os-bg-2); }
+.os-rail-btn:active { background: var(--os-bg-3); }
+.os-rail-btn .ic { color: var(--os-accent); display: inline-flex; }
+.os-rail-btn .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
+
+.os-mobile-sheet {
+    position: fixed;
+    left: 0; right: 0; bottom: 0;
+    background: var(--os-bg-1);
+    border-top: 1px solid var(--os-bg-3);
+    border-radius: 14px 14px 0 0;
+    padding: 8px 12px env(safe-area-inset-bottom, 12px);
+    transform: translateY(calc(100% - 56px));
+    transition: transform 220ms cubic-bezier(0.22, 0.8, 0.34, 1.0);
+    z-index: 9700;
+    pointer-events: auto;
+    display: none;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 70vh;
+    box-shadow: none;
+}
+.os-mobile-sheet.open { transform: translateY(0); }
+.os-mobile-handle {
+    width: 44px; height: 4px;
+    border-radius: 999px;
+    background: var(--os-bg-3);
+    margin: 6px auto 4px;
+}
+.os-mobile-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+    overflow-y: auto;
+    padding: 6px 4px 12px;
+}
+.os-mobile-tile {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    padding: 12px 6px;
+    border-radius: var(--os-radius);
+    background: var(--os-bg-2);
+    border: none;
+    color: var(--os-fg);
+    font: 11px var(--os-font);
+    min-height: var(--os-tap);
+    cursor: pointer;
+    transition: background 100ms ease;
+    outline: none;
+}
+.os-mobile-tile:active { background: var(--os-accent-soft); }
+.os-mobile-tile .ic { color: var(--os-accent); display: inline-flex; width: 28px; height: 28px; }
+.os-mobile-tile .ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; }
+.os-mobile-tile .lbl { color: var(--os-fg-2); }
+
+.app-pane { padding: 14px; font: 13px var(--os-font); color: var(--os-fg); line-height: 1.55; overflow: auto; height: 100%; box-sizing: border-box; }
+.app-pane h2 { margin: 0 0 10px 0; color: var(--os-fg); font-size: 16px; font-weight: 600; }
+.app-pane p { margin: 0 0 10px 0; color: var(--os-fg-2); }
+.app-pane ul { padding-left: 18px; margin: 6px 0 12px; color: var(--os-fg-2); }
+.app-pane li { padding: 2px 0; }
+.app-pane code { font: 12px var(--os-mono); background: var(--os-bg-2); padding: 1px 5px; border-radius: 3px; color: var(--os-fg); }
+.app-pane a { color: var(--os-accent); text-decoration: none; }
+.app-pane a:hover { color: var(--os-accent-2); }
+.app-pane .meta { color: var(--os-fg-3); font-size: 12px; }
+.app-pane.mono { font: 12px var(--os-mono); padding: 10px; }
+.app-pane.mono .row { padding: 4px 6px; cursor: pointer; border-radius: 3px; }
+.app-pane.mono .row:hover { background: var(--os-bg-2); }
+.app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--os-bg-3); font-weight: 600; }
+.app-pane.mono pre { background: var(--os-bg-2); padding: 8px; margin: 8px 0 0 0; max-height: 200px; overflow: auto; white-space: pre-wrap; font: 11px var(--os-mono); border-radius: 3px; color: var(--os-fg); border: none; }
+.app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); }
+.app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
+@media (max-width: 1023px) and (min-width: 768px) {
+    .os-side-rail { display: flex; }
+    .wm-root { left: var(--os-rail-w) !important; }
+    .os-menubar { padding-left: calc(var(--os-rail-w) + 8px); }
+    .os-taskbar { padding-left: calc(var(--os-rail-w) + 8px); }
+    .os-menubar .os-instances { display: flex; }
+    .os-menu { left: calc(var(--os-rail-w) + 8px); }
+}
+
+@media (max-width: 767px) {
+    :root { --os-bar-h: var(--os-bar-h-mobile); }
+    .os-mobile-sheet { display: flex; }
+    .os-menubar { font-size: 14px; padding: 0 8px; }
+    .os-menubar .os-btn { min-height: var(--os-tap); padding: 8px 10px; }
+    .os-menubar [data-role="apps"] { display: none; }
+    .os-menubar [data-role="add"] { min-width: var(--os-tap); }
+    .os-menubar .os-instances { gap: 4px; }
+    .os-clock { display: none; }
+    .os-taskbar { padding: 4px 8px 64px; gap: 4px; overflow-x: auto; flex-wrap: nowrap; }
+    .os-task { flex: 0 0 auto; min-height: 36px; max-width: 140px; padding: 8px 10px; }
+    .wm-win { border-radius: 0 !important; }
+    .wm-bar { padding: 10px 12px !important; }
+    .wm-btn { width: 16px !important; height: 16px !important; }
+    .os-menu { left: 8px; right: 8px; min-width: 0; }
+}