@nuraly/lumenjs 0.1.0

package/dist/editor/hover-detect.js

@@ -0,0 +1,36 @@
+import { findAnnotatedElement } from './element-annotator.js';
+import { sendToHost, serializeRect, isPreviewMode } from './editor-bridge.js';
+export function setupHoverDetection() {
+    let lastHovered = null;
+    document.addEventListener('mouseover', (event) => {
+        if (isPreviewMode())
+            return;
+        const result = findAnnotatedElement(event);
+        if (!result)
+            return;
+        const nkId = result.element.getAttribute('data-nk-id');
+        if (nkId === lastHovered)
+            return;
+        lastHovered = nkId;
+        sendToHost({
+            type: 'NK_ELEMENT_HOVERED',
+            payload: {
+                tag: result.source.tag,
+                nkId,
+                rect: serializeRect(result.element.getBoundingClientRect()),
+            }
+        });
+    }, true);
+    document.addEventListener('mouseout', (event) => {
+        if (isPreviewMode())
+            return;
+        const related = event.relatedTarget;
+        if (related) {
+            const result = findAnnotatedElement(event);
+            if (result)
+                return; // Still hovering over an annotated element
+        }
+        lastHovered = null;
+        sendToHost({ type: 'NK_ELEMENT_HOVERED', payload: null });
+    }, true);
+}

package/dist/editor/inline-text-edit.d.ts

@@ -0,0 +1 @@
+export declare function setupInlineTextEdit(): void;

package/dist/editor/inline-text-edit.js

@@ -0,0 +1,114 @@
+import { sendToHost, isPreviewMode } from './editor-bridge.js';
+export function setupInlineTextEdit() {
+    let editingEl = null;
+    document.addEventListener('dblclick', (event) => {
+        if (isPreviewMode())
+            return;
+        // Walk the composed path to find a text-bearing element
+        const editableTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'SPAN', 'A', 'LABEL', 'LI'];
+        const composedPath = event.composedPath();
+        let textEl = null;
+        let annotatedParent = null;
+        for (const node of composedPath) {
+            if (!(node instanceof HTMLElement))
+                continue;
+            if (!textEl && editableTags.includes(node.tagName)) {
+                textEl = node;
+            }
+            if (!annotatedParent && node.getAttribute('data-nk-source')) {
+                annotatedParent = node;
+            }
+            if (textEl && annotatedParent)
+                break;
+        }
+        // If no direct text element, check if target itself has only text content
+        if (!textEl) {
+            const target = event.target;
+            if (target && target.childNodes.length > 0) {
+                const hasOnlyText = Array.from(target.childNodes).every(n => n.nodeType === Node.TEXT_NODE);
+                if (hasOnlyText && target.textContent?.trim()) {
+                    textEl = target;
+                }
+            }
+        }
+        if (!textEl || !annotatedParent || editingEl)
+            return;
+        // Block inline editing for elements bound to dynamic expressions
+        if (textEl.hasAttribute('data-nk-dynamic') || textEl.closest('[data-nk-dynamic]')) {
+            event.preventDefault();
+            event.stopPropagation();
+            textEl.style.outline = '2px dashed #f59e0b';
+            textEl.style.outlineOffset = '2px';
+            const indicator = document.createElement('div');
+            Object.assign(indicator.style, {
+                position: 'fixed',
+                background: '#f59e0b',
+                color: '#000',
+                padding: '4px 8px',
+                borderRadius: '4px',
+                fontSize: '11px',
+                fontFamily: 'system-ui',
+                zIndex: '10000',
+                pointerEvents: 'none',
+            });
+            indicator.textContent = '\u26A1 Bound to variable \u2014 edit in code';
+            const rect = textEl.getBoundingClientRect();
+            indicator.style.left = `${rect.left}px`;
+            indicator.style.top = `${rect.top - 28}px`;
+            document.body.appendChild(indicator);
+            setTimeout(() => {
+                textEl.style.outline = '';
+                textEl.style.outlineOffset = '';
+                indicator.remove();
+            }, 2000);
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        editingEl = textEl;
+        const originalText = textEl.textContent || '';
+        textEl.setAttribute('contenteditable', 'true');
+        textEl.focus();
+        textEl.style.outline = '2px solid #3b82f6';
+        textEl.style.outlineOffset = '2px';
+        textEl.style.borderRadius = '2px';
+        textEl.style.minWidth = '20px';
+        const range = document.createRange();
+        range.selectNodeContents(textEl);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+        const sourceAttr = annotatedParent.getAttribute('data-nk-source');
+        const lastColon = sourceAttr.lastIndexOf(':');
+        const sourceFile = sourceAttr.substring(0, lastColon);
+        const line = parseInt(sourceAttr.substring(lastColon + 1), 10);
+        const commitEdit = () => {
+            if (!editingEl)
+                return;
+            const newText = editingEl.textContent || '';
+            editingEl.removeAttribute('contenteditable');
+            editingEl.style.outline = '';
+            editingEl.style.outlineOffset = '';
+            editingEl.style.borderRadius = '';
+            editingEl.style.minWidth = '';
+            editingEl = null;
+            if (newText !== originalText) {
+                sendToHost({
+                    type: 'NK_TEXT_CHANGED',
+                    payload: { sourceFile, line, originalText, newText }
+                });
+            }
+        };
+        textEl.addEventListener('blur', commitEdit, { once: true });
+        textEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                textEl.blur();
+            }
+            if (e.key === 'Escape') {
+                textEl.textContent = originalText;
+                textEl.blur();
+            }
+        });
+    });
+}

package/dist/integrations/add.d.ts

@@ -0,0 +1 @@
+export declare function addIntegration(projectDir: string, integration: string): Promise<void>;

package/dist/integrations/add.js

@@ -0,0 +1,89 @@
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+const INTEGRATIONS = {
+    tailwind: {
+        packages: ['tailwindcss', '@tailwindcss/vite'],
+        setup(projectDir) {
+            const stylesDir = path.join(projectDir, 'styles');
+            const cssPath = path.join(stylesDir, 'tailwind.css');
+            if (!fs.existsSync(stylesDir)) {
+                fs.mkdirSync(stylesDir, { recursive: true });
+            }
+            if (!fs.existsSync(cssPath)) {
+                fs.writeFileSync(cssPath, '@import "tailwindcss";\n');
+                console.log('  \u2713 Created styles/tailwind.css');
+            }
+            else {
+                console.log('  \u2713 styles/tailwind.css already exists');
+            }
+        },
+        message: `Tailwind CSS is ready. Use utility classes in light-DOM pages:
+    createRenderRoot() { return this; }`,
+    },
+};
+export async function addIntegration(projectDir, integration) {
+    if (!integration) {
+        console.error('Usage: lumenjs add <integration>');
+        console.error(`Available integrations: ${Object.keys(INTEGRATIONS).join(', ')}`);
+        process.exit(1);
+    }
+    const config = INTEGRATIONS[integration];
+    if (!config) {
+        console.error(`Unknown integration: ${integration}`);
+        console.error(`Available integrations: ${Object.keys(INTEGRATIONS).join(', ')}`);
+        process.exit(1);
+    }
+    console.log(`[LumenJS] Adding ${integration} integration...`);
+    // Install packages into the project
+    const pkgs = config.packages.join(' ');
+    console.log(`  Installing ${pkgs}...`);
+    try {
+        execSync(`npm install ${pkgs}`, { cwd: projectDir, stdio: 'inherit' });
+        console.log(`  \u2713 Installed ${config.packages.join(', ')}`);
+    }
+    catch {
+        console.error(`  \u2717 Failed to install packages. Make sure npm is available.`);
+        process.exit(1);
+    }
+    // Run integration-specific setup
+    config.setup(projectDir);
+    // Update lumenjs.config.ts
+    updateConfig(projectDir, integration);
+    console.log('');
+    console.log(`  ${config.message}`);
+}
+function updateConfig(projectDir, integration) {
+    const configPath = path.join(projectDir, 'lumenjs.config.ts');
+    if (!fs.existsSync(configPath)) {
+        // Create config file with the integration
+        fs.writeFileSync(configPath, `export default {
+  integrations: ['${integration}'],
+};
+`);
+        console.log('  \u2713 Created lumenjs.config.ts');
+        return;
+    }
+    let content = fs.readFileSync(configPath, 'utf-8');
+    // Check if integrations array already exists
+    const integrationsMatch = content.match(/integrations\s*:\s*\[([^\]]*)\]/);
+    if (integrationsMatch) {
+        const existing = integrationsMatch[1];
+        // Check if already included
+        if (existing.includes(`'${integration}'`) || existing.includes(`"${integration}"`)) {
+            console.log(`  \u2713 lumenjs.config.ts already includes '${integration}'`);
+            return;
+        }
+        // Append to existing array
+        const newList = existing.trim()
+            ? `${existing.trim()}, '${integration}'`
+            : `'${integration}'`;
+        content = content.replace(/integrations\s*:\s*\[[^\]]*\]/, `integrations: [${newList}]`);
+    }
+    else {
+        // Add integrations field before the closing of the default export
+        content = content.replace(/};\s*$/, `  integrations: ['${integration}'],\n};\n`);
+    }
+    fs.writeFileSync(configPath, content);
+    console.log('  \u2713 Updated lumenjs.config.ts');
+}

package/dist/runtime/app-shell.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/app-shell.js

@@ -0,0 +1,22 @@
+import { routes } from 'virtual:lumenjs-routes';
+import { NkRouter } from './router.js';
+/**
+ * <nk-app> — The application shell. Sets up the router and renders pages.
+ */
+class NkApp extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.router = null;
+    }
+    connectedCallback() {
+        const isSSR = this.hasAttribute('data-nk-ssr');
+        if (!isSSR) {
+            this.innerHTML = '<div id="nk-router-outlet"></div>';
+        }
+        const outlet = this.querySelector('#nk-router-outlet');
+        this.router = new NkRouter(routes, outlet, isSSR);
+    }
+}
+if (!customElements.get('nk-app')) {
+    customElements.define('nk-app', NkApp);
+}

package/dist/runtime/response.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Redirect from a loader function.
+ *
+ * Usage:
+ *   export async function loader({ headers }) {
+ *     const user = headers['x-user'];
+ *     if (!user) return redirect('/login');
+ *     return { user: JSON.parse(user) };
+ *   }
+ */
+export declare function redirect(location: string, status?: number): {
+    __nk_redirect: true;
+    location: string;
+    status: number;
+};

package/dist/runtime/response.js

@@ -0,0 +1,13 @@
+/**
+ * Redirect from a loader function.
+ *
+ * Usage:
+ *   export async function loader({ headers }) {
+ *     const user = headers['x-user'];
+ *     if (!user) return redirect('/login');
+ *     return { user: JSON.parse(user) };
+ *   }
+ */
+export function redirect(location, status = 302) {
+    return { __nk_redirect: true, location, status };
+}

package/dist/runtime/router-data.d.ts

@@ -0,0 +1,3 @@
+export declare function fetchLoaderData(pathname: string, params: Record<string, string>): Promise<any>;
+export declare function fetchLayoutLoaderData(dir: string): Promise<any>;
+export declare function render404(pathname: string): string;

package/dist/runtime/router-data.js

@@ -0,0 +1,40 @@
+export async function fetchLoaderData(pathname, params) {
+    const url = new URL(`/__nk_loader${pathname}`, location.origin);
+    if (Object.keys(params).length > 0) {
+        url.searchParams.set('__params', JSON.stringify(params));
+    }
+    const res = await fetch(url.toString());
+    if (!res.ok) {
+        throw new Error(`Loader returned ${res.status}`);
+    }
+    const data = await res.json();
+    if (data?.__nk_no_loader)
+        return undefined;
+    return data;
+}
+export async function fetchLayoutLoaderData(dir) {
+    const url = new URL(`/__nk_loader/__layout/`, location.origin);
+    url.searchParams.set('__dir', dir);
+    const res = await fetch(url.toString());
+    if (!res.ok) {
+        throw new Error(`Layout loader returned ${res.status}`);
+    }
+    const data = await res.json();
+    if (data?.__nk_no_loader)
+        return undefined;
+    return data;
+}
+export function render404(pathname) {
+    return `<div style="display:flex;align-items:center;justify-content:center;min-height:80vh;font-family:system-ui,-apple-system,sans-serif;padding:2rem">
+  <div style="text-align:center;max-width:400px">
+    <div style="font-size:5rem;font-weight:200;letter-spacing:-2px;color:#cbd5e1;line-height:1">404</div>
+    <div style="width:32px;height:2px;background:#e2e8f0;border-radius:1px;margin:1.25rem auto"></div>
+    <h1 style="font-size:1rem;font-weight:500;color:#334155;margin:1.25rem 0 .5rem">Page not found</h1>
+    <p style="color:#94a3b8;font-size:.8125rem;line-height:1.5;margin:0 0 2rem"><code style="background:#f8fafc;padding:.125rem .375rem;border-radius:3px;font-size:.75rem;color:#64748b;border:1px solid #f1f5f9">${pathname}</code> doesn't exist</p>
+    <a href="/" style="display:inline-flex;align-items:center;gap:.375rem;padding:.4375rem 1rem;background:#f8fafc;color:#475569;border:1px solid #e2e8f0;border-radius:6px;font-size:.8125rem;font-weight:400;text-decoration:none;transition:all .15s">
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+      Back to home
+    </a>
+  </div>
+</div>`;
+}

package/dist/runtime/router-hydration.d.ts

@@ -0,0 +1,10 @@
+import type { Route } from './router.js';
+/**
+ * Hydrate the initial SSR-rendered route.
+ * Sets loaderData on existing DOM elements BEFORE loading modules to avoid
+ * hydration mismatches with Lit's microtask-based hydration.
+ */
+export declare function hydrateInitialRoute(routes: Route[], outlet: HTMLElement | null, matchRoute: (pathname: string) => {
+    route: Route;
+    params: Record<string, string>;
+} | null, onHydrated: (tag: string, layoutTags: string[], params: Record<string, string>) => void): Promise<void>;

package/dist/runtime/router-hydration.js

@@ -0,0 +1,68 @@
+/**
+ * Hydrate the initial SSR-rendered route.
+ * Sets loaderData on existing DOM elements BEFORE loading modules to avoid
+ * hydration mismatches with Lit's microtask-based hydration.
+ */
+export async function hydrateInitialRoute(routes, outlet, matchRoute, onHydrated) {
+    const match = matchRoute(location.pathname);
+    if (!match)
+        return;
+    const layouts = match.route.layouts || [];
+    const params = match.params;
+    // Read SSR data FIRST — we need it before loading modules, because
+    // loading a module registers the custom element which triggers Lit
+    // hydration as a microtask. If loaderData isn't set before the next
+    // await, the element hydrates with default values → mismatch.
+    let ssrData = null;
+    const dataScript = document.getElementById('__nk_ssr_data__');
+    if (dataScript) {
+        try {
+            ssrData = JSON.parse(dataScript.textContent || '');
+        }
+        catch { /* ignore parse errors */ }
+        dataScript.remove();
+    }
+    // Build a map of loaderPath → data for quick lookup
+    const layoutDataMap = new Map();
+    if (ssrData?.layouts && Array.isArray(ssrData.layouts)) {
+        for (const entry of ssrData.layouts) {
+            if (entry.data !== undefined) {
+                layoutDataMap.set(entry.loaderPath, entry.data);
+            }
+        }
+    }
+    // Load each layout module and immediately set loaderData on the
+    // existing DOM element BEFORE the next await yields to microtasks.
+    for (const layout of layouts) {
+        const existingLayout = outlet?.querySelector(layout.tagName);
+        if (existingLayout) {
+            const data = layoutDataMap.get(layout.loaderPath ?? '');
+            if (data !== undefined) {
+                existingLayout.loaderData = data;
+            }
+        }
+        if (layout.load && !customElements.get(layout.tagName)) {
+            await layout.load();
+        }
+    }
+    // Set page loaderData BEFORE loading the page module
+    const pageData = ssrData?.page !== undefined ? ssrData.page
+        : (ssrData && !ssrData.layouts) ? ssrData
+            : undefined;
+    const existingPage = outlet?.querySelector(match.route.tagName);
+    if (existingPage && pageData !== undefined) {
+        existingPage.loaderData = pageData;
+    }
+    // Load the page module (registers element, triggers hydration microtask)
+    if (match.route.load && !customElements.get(match.route.tagName)) {
+        await match.route.load();
+    }
+    // Set route params as attributes on the page element
+    const pageEl = outlet?.querySelector(match.route.tagName);
+    if (pageEl) {
+        for (const [key, value] of Object.entries(params)) {
+            pageEl.setAttribute(key, value);
+        }
+    }
+    onHydrated(match.route.tagName, layouts.map(l => l.tagName), params);
+}

package/dist/runtime/router.d.ts

@@ -0,0 +1,35 @@
+export interface LayoutInfo {
+    tagName: string;
+    hasLoader?: boolean;
+    load?: () => Promise<any>;
+    loaderPath?: string;
+}
+export interface Route {
+    path: string;
+    tagName: string;
+    hasLoader?: boolean;
+    load?: () => Promise<any>;
+    layouts?: LayoutInfo[];
+    pattern?: RegExp;
+    paramNames?: string[];
+}
+/**
+ * Simple client-side router for LumenJS pages.
+ * Handles popstate and link clicks for SPA navigation.
+ * Supports server loaders and nested layouts with persistence.
+ */
+export declare class NkRouter {
+    private routes;
+    private outlet;
+    private currentTag;
+    private currentLayoutTags;
+    params: Record<string, string>;
+    constructor(routes: Route[], outlet: HTMLElement, hydrate?: boolean);
+    private compilePattern;
+    navigate(pathname: string, pushState?: boolean): Promise<void>;
+    private matchRoute;
+    private renderRoute;
+    private buildLayoutTree;
+    private createPageElement;
+    private handleLinkClick;
+}

package/dist/runtime/router.js

@@ -0,0 +1,202 @@
+import { fetchLoaderData, fetchLayoutLoaderData, render404 } from './router-data.js';
+import { hydrateInitialRoute } from './router-hydration.js';
+/**
+ * Simple client-side router for LumenJS pages.
+ * Handles popstate and link clicks for SPA navigation.
+ * Supports server loaders and nested layouts with persistence.
+ */
+export class NkRouter {
+    constructor(routes, outlet, hydrate = false) {
+        this.routes = [];
+        this.outlet = null;
+        this.currentTag = null;
+        this.currentLayoutTags = [];
+        this.params = {};
+        this.outlet = outlet;
+        this.routes = routes.map(r => ({
+            ...r,
+            ...this.compilePattern(r.path),
+        }));
+        window.addEventListener('popstate', () => this.navigate(location.pathname, false));
+        document.addEventListener('click', (e) => this.handleLinkClick(e));
+        if (hydrate) {
+            hydrateInitialRoute(this.routes, this.outlet, (p) => this.matchRoute(p), (tag, layoutTags, params) => {
+                this.currentTag = tag;
+                this.currentLayoutTags = layoutTags;
+                this.params = params;
+            });
+        }
+        else {
+            this.navigate(location.pathname, false);
+        }
+    }
+    compilePattern(path) {
+        const paramNames = [];
+        const pattern = path.replace(/:(?:\.\.\.)?([^/]+)/g, (match, name) => {
+            paramNames.push(name);
+            return match.startsWith(':...') ? '(.+)' : '([^/]+)';
+        });
+        return { pattern: new RegExp(`^${pattern}$`), paramNames };
+    }
+    async navigate(pathname, pushState = true) {
+        const match = this.matchRoute(pathname);
+        if (!match) {
+            if (this.outlet)
+                this.outlet.innerHTML = render404(pathname);
+            this.currentLayoutTags = [];
+            this.currentTag = null;
+            return;
+        }
+        if (pushState) {
+            history.pushState(null, '', pathname);
+        }
+        this.params = match.params;
+        // Lazy-load the page component if not yet registered
+        if (match.route.load && !customElements.get(match.route.tagName)) {
+            await match.route.load();
+        }
+        // Load layout components
+        const layouts = match.route.layouts || [];
+        for (const layout of layouts) {
+            if (layout.load && !customElements.get(layout.tagName)) {
+                await layout.load();
+            }
+        }
+        // Fetch loader data for page
+        let loaderData = undefined;
+        if (match.route.hasLoader) {
+            try {
+                loaderData = await fetchLoaderData(pathname, match.params);
+            }
+            catch (err) {
+                console.error('[NkRouter] Loader fetch failed:', err);
+            }
+        }
+        // Fetch loader data for layouts
+        const layoutDataList = [];
+        for (const layout of layouts) {
+            if (layout.hasLoader) {
+                try {
+                    const data = await fetchLayoutLoaderData(layout.loaderPath || '');
+                    layoutDataList.push(data);
+                }
+                catch (err) {
+                    console.error('[NkRouter] Layout loader fetch failed:', err);
+                    layoutDataList.push(undefined);
+                }
+            }
+            else {
+                layoutDataList.push(undefined);
+            }
+        }
+        this.renderRoute(match.route, loaderData, layouts, layoutDataList);
+    }
+    matchRoute(pathname) {
+        for (const route of this.routes) {
+            if (!route.pattern)
+                continue;
+            const match = pathname.match(route.pattern);
+            if (match) {
+                const params = {};
+                route.paramNames?.forEach((name, i) => {
+                    params[name] = match[i + 1];
+                });
+                return { route, params };
+            }
+        }
+        return null;
+    }
+    renderRoute(route, loaderData, layouts, layoutDataList) {
+        if (!this.outlet)
+            return;
+        const newLayoutTags = (layouts || []).map(l => l.tagName);
+        // Find the first layout that differs from the current chain
+        let divergeIndex = 0;
+        while (divergeIndex < this.currentLayoutTags.length &&
+            divergeIndex < newLayoutTags.length &&
+            this.currentLayoutTags[divergeIndex] === newLayoutTags[divergeIndex]) {
+            divergeIndex++;
+        }
+        const canReuse = this.currentLayoutTags.length > 0 && divergeIndex > 0;
+        if (!canReuse || divergeIndex === 0) {
+            // Full re-render: no layouts to reuse
+            this.outlet.innerHTML = '';
+            if (newLayoutTags.length === 0) {
+                const pageEl = this.createPageElement(route, loaderData);
+                this.outlet.appendChild(pageEl);
+            }
+            else {
+                const tree = this.buildLayoutTree(layouts, layoutDataList || [], route, loaderData);
+                this.outlet.appendChild(tree);
+            }
+        }
+        else {
+            // Reuse layouts up to divergeIndex, rebuild from there
+            let parentEl = this.outlet;
+            for (let i = 0; i < divergeIndex; i++) {
+                const layoutEl = parentEl?.querySelector(`:scope > ${this.currentLayoutTags[i]}`) ?? null;
+                if (!layoutEl) {
+                    return this.renderRoute(route, loaderData, [], []);
+                }
+                if (layoutDataList && layoutDataList[i] !== undefined) {
+                    layoutEl.loaderData = layoutDataList[i];
+                }
+                parentEl = layoutEl;
+            }
+            if (!parentEl)
+                return;
+            parentEl.innerHTML = '';
+            if (divergeIndex >= newLayoutTags.length) {
+                const pageEl = this.createPageElement(route, loaderData);
+                parentEl.appendChild(pageEl);
+            }
+            else {
+                const remainingLayouts = layouts.slice(divergeIndex);
+                const remainingData = (layoutDataList || []).slice(divergeIndex);
+                const tree = this.buildLayoutTree(remainingLayouts, remainingData, route, loaderData);
+                parentEl.appendChild(tree);
+            }
+        }
+        this.currentTag = route.tagName;
+        this.currentLayoutTags = newLayoutTags;
+    }
+    buildLayoutTree(layouts, layoutDataList, route, loaderData) {
+        const outerLayout = document.createElement(layouts[0].tagName);
+        if (layoutDataList[0] !== undefined) {
+            outerLayout.loaderData = layoutDataList[0];
+        }
+        let current = outerLayout;
+        for (let i = 1; i < layouts.length; i++) {
+            const inner = document.createElement(layouts[i].tagName);
+            if (layoutDataList[i] !== undefined) {
+                inner.loaderData = layoutDataList[i];
+            }
+            current.appendChild(inner);
+            current = inner;
+        }
+        const pageEl = this.createPageElement(route, loaderData);
+        current.appendChild(pageEl);
+        return outerLayout;
+    }
+    createPageElement(route, loaderData) {
+        const el = document.createElement(route.tagName);
+        for (const [key, value] of Object.entries(this.params)) {
+            el.setAttribute(key, value);
+        }
+        if (loaderData !== undefined) {
+            el.loaderData = loaderData;
+        }
+        return el;
+    }
+    handleLinkClick(event) {
+        const path = event.composedPath();
+        const anchor = path.find((el) => el instanceof HTMLElement && el.tagName === 'A');
+        if (!anchor)
+            return;
+        const href = anchor.getAttribute('href');
+        if (!href || href.startsWith('http') || href.startsWith('#') || anchor.hasAttribute('target'))
+            return;
+        event.preventDefault();
+        this.navigate(href);
+    }
+}

package/dist/shared/dom-shims.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Install DOM shims needed for SSR rendering of Lit/NuralyUI components.
+ * Consolidates the various partial shim implementations across the codebase.
+ */
+export declare function installDomShims(): void;