anentrypoint-design 0.0.77 → 0.0.78

package/package.json

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

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; }