@adaas/are-html 0.0.22 → 0.0.24

package/examples/os-desktop/src/os/Dock.component.ts

@@ -0,0 +1,174 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_SignalBus } from "@adaas/a-utils/a-signal";
+import { Are, AreEvent, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { AppRegistry } from "../runtime/AppRegistry.fragment";
+import { OSRoute } from "../signals/OSRoute.signal";
+
+
+/**
+ * Dock — the bottom app launcher.
+ *
+ * Shows the currently installed apps plus a Launchpad (＋) button. Clicking an
+ * app dispatches an {@link OSRoute} to focus it; the Dock itself also listens
+ * for OSRoute so a freshly installed app reveals its icon and the running app's
+ * running-dot lights up.
+ *
+ * Every available app gets a (hidden) button wired up front, so the engine
+ * binds its `@click` handler once at mount. Reacting to a route signal is then
+ * a cheap imperative DOM toggle — no subtree teardown, no re-binding.
+ */
+export class OsDock extends Are {
+
+    protected _route: string = document.location.pathname || '/';
+
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AppRegistry) registry: AppRegistry,
+    ) {
+        node.setContent(this.build(registry));
+    }
+
+    @Are.Signal(OSRoute)
+    onRoute(
+        @A_Inject(OSRoute) signal: OSRoute,
+        @A_Inject(AppRegistry) registry: AppRegistry,
+    ) {
+        this._route = signal.path;
+        const activeId = this._route.match(/^\/app\/([^/]+)/)?.[1];
+
+        let anyVisible = false;
+        for (const app of registry.available()) {
+            const btn = document.getElementById(`dock-app-${app.id}`);
+            if (!btn) continue;
+            if (registry.isInstalled(app.id)) {
+                btn.hidden = false;
+                anyVisible = true;
+            }
+            btn.classList.toggle('running', app.id === activeId);
+        }
+
+        const sep = document.getElementById('dock-sep');
+        if (sep) sep.hidden = !anyVisible;
+
+        const lp = document.getElementById('dock-launchpad');
+        if (lp) lp.classList.toggle('running', this._route === '/launchpad');
+    }
+
+    @Are.EventHandler
+    open(
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(A_SignalBus) bus: A_SignalBus,
+    ) {
+        (event.get('native') as MouseEvent)?.preventDefault();
+        const id = event.get('args')?.[0] as string;
+        if (!id) return;
+        const path = `/app/${id}`;
+        history.pushState({}, '', path);
+        bus.next(new OSRoute(path));
+    }
+
+    @Are.EventHandler
+    launchpad(
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(A_SignalBus) bus: A_SignalBus,
+    ) {
+        (event.get('native') as MouseEvent)?.preventDefault();
+        history.pushState({}, '', '/launchpad');
+        bus.next(new OSRoute('/launchpad'));
+    }
+
+    protected build(registry: AppRegistry): string {
+        const activeId = this._route.match(/^\/app\/([^/]+)/)?.[1];
+
+        const apps = registry.available().map(app => {
+            const installed = registry.isInstalled(app.id);
+            const running = app.id === activeId ? 'running' : '';
+            return `
+                <button id="dock-app-${app.id}" class="dock-item ${running}" @click="$open('${app.id}')" title="${app.name}"${installed ? '' : ' hidden'}>
+                    <span class="dock-glyph" style="--accent:${app.accent}">${app.icon}</span>
+                    <span class="dock-dot"></span>
+                </button>
+            `;
+        }).join('');
+
+        const anyInstalled = registry.installed().length > 0;
+        const launchpadActive = this._route === '/launchpad' ? 'running' : '';
+
+        return `
+            <div class="dock">
+                ${apps}
+                <span class="dock-sep" id="dock-sep"${anyInstalled ? '' : ' hidden'}></span>
+                <button id="dock-launchpad" class="dock-item ${launchpadActive}" @click="$launchpad()" title="Launchpad — install apps">
+                    <span class="dock-glyph dock-plus">＋</span>
+                    <span class="dock-dot"></span>
+                </button>
+            </div>
+        `;
+    }
+
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .dock {
+                position: absolute;
+                left: 50%;
+                bottom: 14px;
+                transform: translateX(-50%);
+                display: flex;
+                align-items: flex-end;
+                gap: 10px;
+                padding: 8px 12px;
+                border-radius: 22px;
+                background: rgba(30, 24, 48, 0.45);
+                backdrop-filter: blur(24px) saturate(180%);
+                -webkit-backdrop-filter: blur(24px) saturate(180%);
+                border: 1px solid rgba(255,255,255,0.12);
+                box-shadow: 0 18px 50px rgba(0,0,0,0.45);
+                z-index: 95;
+            }
+            .dock-item {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                border: none;
+                background: none;
+                cursor: pointer;
+                padding: 0;
+            }
+            /* The HTML 'hidden' attribute must win over 'display: flex' so an
+               uninstalled app icon (and the separator) stays out of the dock. */
+            .dock-item[hidden], #dock-sep[hidden] { display: none !important; }
+            .dock-glyph {
+                width: 52px; height: 52px;
+                display: flex; align-items: center; justify-content: center;
+                font-size: 28px;
+                border-radius: 14px;
+                background: linear-gradient(160deg, color-mix(in srgb, var(--accent, #7c6fd6) 85%, white 0%), color-mix(in srgb, var(--accent, #7c6fd6) 70%, black 18%));
+                box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px rgba(0,0,0,0.35);
+                transition: transform 0.18s ease;
+            }
+            .dock-plus {
+                background: rgba(255,255,255,0.12);
+                color: #f5f5f7;
+                font-size: 26px;
+                font-weight: 300;
+            }
+            .dock-item:hover .dock-glyph { transform: translateY(-10px) scale(1.12); }
+            .dock-dot {
+                width: 4px; height: 4px; border-radius: 50%;
+                background: transparent;
+            }
+            .dock-item.running .dock-dot { background: rgba(245,245,247,0.85); }
+            .dock-sep {
+                width: 1px;
+                align-self: stretch;
+                margin: 6px 2px;
+                background: rgba(255,255,255,0.16);
+            }
+        `);
+    }
+}

package/examples/os-desktop/src/os/Hud.component.ts

@@ -0,0 +1,83 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { MouseState } from "../signals/MouseState.signal";
+import { SelectionState } from "../signals/SelectionState.signal";
+
+
+/**
+ * Hud — a small translucent read-out pinned to the bottom-left corner.
+ *
+ * It exists purely to visualise that the bus carries more than route signals:
+ *   - {@link MouseState}     → live X / Y coordinates (high-frequency, throttled).
+ *   - {@link SelectionState} → the number of characters currently selected.
+ *
+ * Because this is the only component that re-renders on every (throttled) mouse
+ * move, the cost of the high-frequency signal is isolated to a tiny subtree.
+ */
+export class OsHud extends Are {
+
+    protected _x: number = 0;
+    protected _y: number = 0;
+    protected _selection: number = 0;
+
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(this.build());
+    }
+
+    @Are.Signal(MouseState)
+    onMouse(@A_Inject(MouseState) signal: MouseState) {
+        this._x = signal.x;
+        this._y = signal.y;
+        const x = document.getElementById('hud-x');
+        const y = document.getElementById('hud-y');
+        if (x) x.textContent = String(this._x);
+        if (y) y.textContent = String(this._y);
+    }
+
+    @Are.Signal(SelectionState)
+    onSelection(@A_Inject(SelectionState) signal: SelectionState) {
+        this._selection = signal.length;
+        const sel = document.getElementById('hud-sel');
+        if (sel) sel.textContent = String(this._selection);
+    }
+
+    protected build(): string {
+        return `
+            <div class="hud">
+                <span class="hud-row"><b>signals</b></span>
+                <span class="hud-row">MouseState&nbsp;<i>x</i> <span id="hud-x">${this._x}</span>&nbsp;<i>y</i> <span id="hud-y">${this._y}</span></span>
+                <span class="hud-row">SelectionState&nbsp;<i>len</i> <span id="hud-sel">${this._selection}</span></span>
+            </div>
+        `;
+    }
+
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .hud {
+                position: absolute;
+                left: 16px;
+                bottom: 104px;
+                display: flex;
+                flex-direction: column;
+                gap: 2px;
+                padding: 10px 14px;
+                border-radius: 12px;
+                background: rgba(12, 10, 24, 0.5);
+                backdrop-filter: blur(14px);
+                -webkit-backdrop-filter: blur(14px);
+                border: 1px solid rgba(255,255,255,0.08);
+                font-size: 11px;
+                font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+                color: rgba(245,245,247,0.85);
+                z-index: 90;
+                pointer-events: none;
+            }
+            .hud b { color: #c9b8ff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
+            .hud i { color: #8b7fb0; font-style: normal; }
+            .hud-row { white-space: nowrap; }
+        `);
+    }
+}

package/examples/os-desktop/src/os/Launchpad.component.ts

@@ -0,0 +1,191 @@
+import { A_Inject } from "@adaas/a-concept";
+import { A_SignalBus } from "@adaas/a-utils/a-signal";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreEvent, AreNode } from "@adaas/are";
+import { A_Caller } from "@adaas/a-concept";
+import { AreHTMLNode } from "src";
+import { AppRegistry } from "../runtime/AppRegistry.fragment";
+import { AppComponentResolver } from "../runtime/AppComponentResolver.fragment";
+import { OSRoute } from "../signals/OSRoute.signal";
+
+
+/**
+ * Launchpad — the OS "App Store" overlay.
+ *
+ * Lists every app the backend offers. For an app the user has not installed it
+ * shows **Install**; installing it:
+ *   1. records the app in the {@link AppRegistry} (it now shows up in the dock),
+ *   2. warms its bundle via {@link AppComponentResolver.preload} — i.e. "adding
+ *      the app loads all its components" (one network fetch for the whole app),
+ *   3. routes to `/app/<id>`, opening the freshly installed app.
+ *
+ * Already-installed apps show **Open** and simply route to them. The engine
+ * registers each component lazily on first render (instant, since preload
+ * already fetched the bundle).
+ */
+export class OsLaunchpad extends Are {
+
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AppRegistry) registry: AppRegistry,
+    ) {
+        node.setContent(this.build(registry));
+    }
+
+    @Are.EventHandler
+    async install(
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(A_SignalBus) bus: A_SignalBus,
+        @A_Inject(AppRegistry) registry: AppRegistry,
+        @A_Inject(AppComponentResolver) resolver: AppComponentResolver,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        (event.get('native') as MouseEvent)?.preventDefault();
+        const id = event.get('args')?.[0] as string;
+        const app = id ? registry.get(id) : undefined;
+        if (!app) return;
+
+        registry.install(app.id);
+
+        // Fetch the app's entire bundle now — "installing loads all its
+        // components". The window will then mount instantly from memory.
+        try {
+            await resolver.preload(app);
+            logger.log('green', `Installed "${app.name}" (${app.components.length} components loaded).`);
+        } catch (error) {
+            logger.error(error);
+        }
+
+        const path = `/app/${app.id}`;
+        history.pushState({}, '', path);
+        bus.next(new OSRoute(path));
+    }
+
+    @Are.EventHandler
+    open(
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(A_SignalBus) bus: A_SignalBus,
+    ) {
+        (event.get('native') as MouseEvent)?.preventDefault();
+        const id = event.get('args')?.[0] as string;
+        if (!id) return;
+        const path = `/app/${id}`;
+        history.pushState({}, '', path);
+        bus.next(new OSRoute(path));
+    }
+
+    @Are.EventHandler
+    close(
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(A_SignalBus) bus: A_SignalBus,
+    ) {
+        (event.get('native') as MouseEvent)?.preventDefault();
+        history.pushState({}, '', '/desktop');
+        bus.next(new OSRoute('/desktop'));
+    }
+
+    protected build(registry: AppRegistry): string {
+        const tiles = registry.available().map(app => {
+            const installed = registry.isInstalled(app.id);
+            const action = installed
+                ? `<button class="lp-btn lp-open" @click="$open('${app.id}')">Open</button>`
+                : `<button class="lp-btn lp-install" @click="$install('${app.id}')">Install</button>`;
+
+            const chips = app.components
+                .map(c => `<code>&lt;${c.tag}&gt;</code>`)
+                .join('');
+
+            return `
+                <article class="lp-tile" style="--accent:${app.accent}">
+                    <div class="lp-icon">${app.icon}</div>
+                    <h3 class="lp-name">${app.name}</h3>
+                    <p class="lp-tagline">${app.tagline}</p>
+                    <div class="lp-meta">
+                        <span class="lp-bundle">${app.bundle}</span>
+                        <div class="lp-components">${chips}</div>
+                    </div>
+                    ${action}
+                </article>
+            `;
+        }).join('');
+
+        return `
+            <div class="lp-backdrop" @click.self="$close()">
+                <div class="lp">
+                    <header class="lp-head">
+                        <h1>Launchpad</h1>
+                        <p>Each app is an independent bundle with its own backend and its own set of components. Install one to add it to your dock and load its code.</p>
+                    </header>
+                    <div class="lp-grid">${tiles}</div>
+                </div>
+            </div>
+        `;
+    }
+
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .lp-backdrop {
+                position: absolute;
+                inset: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: rgba(8, 6, 18, 0.55);
+                backdrop-filter: blur(26px) saturate(160%);
+                -webkit-backdrop-filter: blur(26px) saturate(160%);
+                animation: lp-fade 0.2s ease;
+            }
+            @keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
+            .lp { width: min(900px, 88vw); max-height: 80vh; overflow: auto; }
+            .lp-head { text-align: center; margin-bottom: 30px; }
+            .lp-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
+            .lp-head p { margin-top: 10px; color: rgba(245,245,247,0.7); font-size: 14px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.6; }
+            .lp-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+                gap: 18px;
+            }
+            .lp-tile {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+                padding: 22px;
+                border-radius: 18px;
+                background: rgba(30, 24, 48, 0.5);
+                border: 1px solid rgba(255,255,255,0.1);
+            }
+            .lp-icon {
+                width: 56px; height: 56px;
+                display: flex; align-items: center; justify-content: center;
+                font-size: 30px;
+                border-radius: 15px;
+                background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, white 0%), color-mix(in srgb, var(--accent) 65%, black 20%));
+                box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
+                margin-bottom: 4px;
+            }
+            .lp-name { font-size: 17px; font-weight: 700; }
+            .lp-tagline { font-size: 13px; color: rgba(245,245,247,0.7); line-height: 1.5; }
+            .lp-meta { width: 100%; margin: 8px 0 6px; }
+            .lp-bundle { font-size: 11px; font-family: ui-monospace, monospace; color: #8b7fb0; }
+            .lp-components { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
+            .lp-components code { font-size: 10px; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,0.08); color: #c9b8ff; }
+            .lp-btn {
+                margin-top: auto;
+                align-self: stretch;
+                padding: 9px 14px;
+                border: none;
+                border-radius: 10px;
+                font-size: 13px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: filter 0.15s;
+            }
+            .lp-btn:hover { filter: brightness(1.12); }
+            .lp-install { background: var(--accent); color: white; }
+            .lp-open { background: rgba(255,255,255,0.14); color: #f5f5f7; }
+        `);
+    }
+}

package/examples/os-desktop/src/os/MenuBar.component.ts

@@ -0,0 +1,156 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { AppRegistry } from "../runtime/AppRegistry.fragment";
+import { OSRoute } from "../signals/OSRoute.signal";
+import { SelectionState } from "../signals/SelectionState.signal";
+
+
+/**
+ * MenuBar — the translucent top bar.
+ *
+ * Demonstrates a component that reacts to TWO independent signal types via
+ * typed `@Are.Signal(...)` handlers:
+ *   - {@link OSRoute}        → the active application's name (left side).
+ *   - {@link SelectionState} → a "N selected" chip (right side).
+ *
+ * Each handler patches the rendered DOM imperatively, so reacting to a
+ * high-frequency selection or route change never tears down and rebuilds the
+ * bar's subtree.
+ */
+export class MenuBar extends Are {
+
+    protected _route: string = document.location.pathname || '/';
+    protected _selectionLength: number = 0;
+    protected _clockTimer?: ReturnType<typeof setInterval>;
+
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AppRegistry) registry: AppRegistry,
+    ) {
+        node.setContent(this.build(registry));
+    }
+
+    @Are.onAfterMount
+    onMount() {
+        this._clockTimer = setInterval(() => {
+            const clock = document.getElementById('mb-clock');
+            if (clock) clock.textContent = this.now();
+        }, 15000);
+    }
+
+    @Are.onBeforeUnmount
+    onUnmount() {
+        if (this._clockTimer) clearInterval(this._clockTimer);
+        this._clockTimer = undefined;
+    }
+
+    @Are.Signal(OSRoute)
+    onRoute(
+        @A_Inject(OSRoute) signal: OSRoute,
+        @A_Inject(AppRegistry) registry: AppRegistry,
+    ) {
+        this._route = signal.path;
+        const el = document.getElementById('mb-active');
+        if (el) {
+            const { icon, name } = this.activeTitle(registry);
+            el.textContent = `${icon ? icon + ' ' : ''}${name}`;
+        }
+    }
+
+    @Are.Signal(SelectionState)
+    onSelection(@A_Inject(SelectionState) signal: SelectionState) {
+        this._selectionLength = signal.length;
+        const chip = document.getElementById('mb-chip');
+        if (!chip) return;
+        if (this._selectionLength > 0) {
+            chip.hidden = false;
+            chip.textContent = `\u2702 ${this._selectionLength} selected`;
+        } else {
+            chip.hidden = true;
+        }
+    }
+
+    protected now(): string {
+        return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+
+    protected activeTitle(registry: AppRegistry): { icon: string; name: string } {
+        const match = this._route.match(/^\/app\/([^/]+)/);
+        if (match) {
+            const app = registry.get(match[1]);
+            if (app) return { icon: app.icon, name: app.name };
+        }
+        if (this._route === '/launchpad') {
+            return { icon: '🚀', name: 'Launchpad' };
+        }
+        return { icon: '', name: 'Finder' };
+    }
+
+    protected build(registry: AppRegistry): string {
+        const { icon, name } = this.activeTitle(registry);
+        const hasSel = this._selectionLength > 0;
+
+        return `
+            <div class="menubar">
+                <div class="mb-left">
+                    <span class="mb-logo"></span>
+                    <span class="mb-active" id="mb-active">${icon ? icon + ' ' : ''}${name}</span>
+                    <span class="mb-menu">File</span>
+                    <span class="mb-menu">Edit</span>
+                    <span class="mb-menu">View</span>
+                    <span class="mb-menu">Window</span>
+                </div>
+                <div class="mb-right">
+                    <span class="mb-chip" id="mb-chip"${hasSel ? '' : ' hidden'}>✂ ${this._selectionLength} selected</span>
+                    <span class="mb-icon">􀙇</span>
+                    <span class="mb-clock" id="mb-clock">${this.now()}</span>
+                </div>
+            </div>
+        `;
+    }
+
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .menubar {
+                position: absolute;
+                top: 0; left: 0; right: 0;
+                height: 28px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 14px;
+                background: rgba(20, 16, 32, 0.55);
+                backdrop-filter: blur(18px) saturate(160%);
+                -webkit-backdrop-filter: blur(18px) saturate(160%);
+                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+                font-size: 13px;
+                z-index: 100;
+            }
+            .mb-left, .mb-right { display: flex; align-items: center; gap: 16px; }
+            .mb-logo {
+                width: 14px; height: 14px;
+                background: #f5f5f7;
+                -webkit-mask: radial-gradient(circle at 70% 22%, transparent 22%, #000 23%) 0 0/100% 100%;
+                mask: radial-gradient(circle at 70% 22%, transparent 22%, #000 23%) 0 0/100% 100%;
+                clip-path: path('M7 0C3 0 0 3.4 0 7.6c0 3.4 2.2 6.4 5.2 6.4 1 0 1.8-.6 2.8-.6s1.6.6 2.6.6c3 0 5.4-3 5.4-6.4C16 3.4 12.8 0 9 0 8 0 7.6.4 7 .4 6.6.4 8 0 7 0z');
+                opacity: 0.9;
+            }
+            .mb-active { font-weight: 700; }
+            .mb-menu { color: rgba(245,245,247,0.82); font-weight: 500; }
+            .mb-menu:first-of-type { margin-left: 2px; }
+            .mb-icon { opacity: 0.85; }
+            .mb-clock { font-variant-numeric: tabular-nums; font-weight: 500; }
+            .mb-chip {
+                font-size: 11px;
+                font-weight: 600;
+                padding: 2px 9px;
+                border-radius: 999px;
+                color: #ffe5a3;
+                background: rgba(255, 196, 84, 0.18);
+            }
+        `);
+    }
+}