anentrypoint-design 0.0.242 → 0.0.244

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.242",
+  "version": "0.0.244",
   "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/index.js

@@ -5,6 +5,7 @@
 import * as webjsx from '../vendor/webjsx/index.js';
 import { loadCss, scope } from './styles.js';
 import { registerDeckStage, getDeckStage } from './deck-stage.js';
+import { Router, createRouter } from './router.js';
 import * as components from './components.js';
 import * as motion from './motion.js';
 import * as debug from './debug.js';
@@ -61,6 +62,7 @@ if (typeof window !== 'undefined' && typeof customElements !== 'undefined') {
 export {
     webjsx, loadCss, scope,
     registerDeckStage, getDeckStage,
+    Router, createRouter,
     components, motion, debug, mountKit,
     renderMarkdown, ensureMarkdownReady,
     ensurePrism, highlightAllUnder,
@@ -90,6 +92,7 @@ export {
 
 export default {
     webjsx, loadCss, scope, installStyles, mount, h, applyDiff,
-    registerDeckStage, getDeckStage, components, motion, debug, mountKit,
+    registerDeckStage, getDeckStage, Router, createRouter,
+    components, motion, debug, mountKit,
     renderMarkdown, ensurePrism, registerChatElement, renderPageHtml
 };

package/src/router.js

@@ -0,0 +1,89 @@
+// Hash-based SPA router over webjsx applyDiff. Registers named page
+// components, dispatches on '#/<name>/<params...>', re-renders on
+// popstate/hashchange. No framework-specific routing lib — direct
+// history/hash manipulation, matching how every ui_kit already drives
+// itself off window.ds.applyDiff.
+
+import * as webjsx from '../vendor/webjsx/index.js';
+import { register as registerDebug } from './debug.js';
+
+const MAX_SDK_WAIT_FRAMES = 120; // ~2s at 60fps before giving up
+
+export class Router {
+    constructor({ fallback } = {}) {
+        this.routes = new Map();
+        this.fallback = fallback || null;
+        this.currentRoute = null;
+        this.state = { page: null, params: [], sdkWaitFrames: 0, lastError: null };
+        registerDebug('router', () => ({
+            currentRoute: this.currentRoute,
+            registeredRoutes: [...this.routes.keys()],
+            params: this.state.params,
+            lastError: this.state.lastError,
+        }));
+    }
+
+    parseHash() {
+        const raw = (window.location.hash.slice(2) || '').split('?')[0];
+        const parts = raw.split('/').filter(Boolean);
+        return { name: parts[0] || '', params: parts.slice(1) };
+    }
+
+    register(name, component) {
+        this.routes.set(name, component);
+        return this;
+    }
+
+    async navigate(name, ...params) {
+        if (!this.routes.has(name) && !this.fallback) return;
+        this.currentRoute = this.routes.has(name) ? name : null;
+        this.state.page = name;
+        this.state.params = params;
+        window.history.pushState({ page: name }, '', '#/' + [name, ...params].filter(Boolean).join('/'));
+        this.render();
+    }
+
+    render() {
+        const root = document.getElementById('app');
+        if (!root) throw new Error('Router: #app root element not found');
+        const component = this.routes.get(this.currentRoute) || this.fallback;
+        if (!component) {
+            this.state.lastError = 'no route registered for "' + this.currentRoute + '" and no fallback set';
+            return;
+        }
+        if (window.ds && window.ds.applyDiff) {
+            this.state.sdkWaitFrames = 0;
+            this.state.lastError = null;
+            const tree = component(this.state);
+            window.ds.applyDiff(root, tree);
+        } else if (this.state.sdkWaitFrames < MAX_SDK_WAIT_FRAMES) {
+            this.state.sdkWaitFrames += 1;
+            requestAnimationFrame(() => this.render());
+        } else {
+            this.state.lastError = 'window.ds.applyDiff never became available after ' + MAX_SDK_WAIT_FRAMES + ' frames';
+        }
+    }
+
+    handlePopState() {
+        const { name, params } = this.parseHash();
+        this.currentRoute = this.routes.has(name) ? name : null;
+        this.state.page = name;
+        this.state.params = params;
+        this.render();
+    }
+
+    start() {
+        window.addEventListener('popstate', () => this.handlePopState());
+        window.addEventListener('hashchange', () => this.handlePopState());
+        const { name, params } = this.parseHash();
+        this.currentRoute = this.routes.has(name) ? name : null;
+        this.state.page = name;
+        this.state.params = params;
+        this.render();
+        return this;
+    }
+}
+
+export function createRouter(opts) {
+    return new Router(opts);
+}