vista-core-js 0.0.2

package/dist/ErrorOverlay.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ErrorOverlayProps {
+    error: any;
+    onClose?: () => void;
+}
+export declare const ErrorOverlay: React.FC<ErrorOverlayProps>;
+export {};

package/dist/ErrorOverlay.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VSCodeColors = {
+    bg: '#1e1e1e',
+    sidebar: '#252526',
+    activityBar: '#333333',
+    statusBar: '#007acc',
+    titleBar: '#3c3c3c',
+    text: '#d4d4d4',
+    red: '#f14c4c',
+    yellow: '#cca700',
+    green: '#238636',
+    terminalBg: '#1e1e1e',
+    editorBg: '#1e1e1e',
+    lineNo: '#858585',
+};
+export const ErrorOverlay = ({ error, onClose }) => {
+    if (!error)
+        return null;
+    const isBuildError = error.type === 'error' || error.plugin; // Vite error shape
+    const message = error.message || 'Unknown Error';
+    const file = error.id || error.file || error.filename || 'Unknown File';
+    const frame = error.frame || '';
+    const stack = error.stack || '';
+    // Parse location if available
+    const loc = error.loc ? `${error.loc.line}:${error.loc.column}` : '';
+    return (_jsxs("div", { style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            zIndex: 99999,
+            backgroundColor: 'rgba(0, 0, 0, 0.6)',
+            backdropFilter: 'blur(8px)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+        }, children: [_jsxs("div", { style: {
+                    width: '85vw',
+                    maxWidth: '1000px',
+                    height: '80vh',
+                    backgroundColor: VSCodeColors.bg,
+                    borderRadius: '10px',
+                    boxShadow: '0 20px 50px rgba(0,0,0,0.5)',
+                    overflow: 'hidden',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    border: '1px solid #454545',
+                    animation: 'vista-slide-up 0.3s ease-out',
+                }, children: [_jsxs("div", { style: {
+                            height: '35px',
+                            backgroundColor: VSCodeColors.titleBar,
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: '0 15px',
+                            borderBottom: '1px solid #333',
+                        }, children: [_jsxs("div", { style: { display: 'flex', gap: '8px', marginRight: '20px' }, children: [_jsx("div", { onClick: onClose, style: { width: '12px', height: '12px', borderRadius: '50%', backgroundColor: '#ff5f56', cursor: 'pointer' } }), _jsx("div", { style: { width: '12px', height: '12px', borderRadius: '50%', backgroundColor: '#ffbd2e' } }), _jsx("div", { style: { width: '12px', height: '12px', borderRadius: '50%', backgroundColor: '#27c93f' } })] }), _jsxs("div", { style: { color: '#ccc', fontSize: '13px', flex: 1, textAlign: 'center', opacity: 0.8 }, children: [file.split('/').pop(), " ", loc ? `— ${loc}` : ''] })] }), _jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [_jsxs("div", { style: { width: '50px', backgroundColor: VSCodeColors.activityBar, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '15px' }, children: [_jsx("div", { style: { marginBottom: '20px', opacity: 0.6, cursor: 'pointer' }, title: "Explorer", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#d4d4d4", strokeWidth: "1.5", children: [_jsx("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }), _jsx("polyline", { points: "13 2 13 9 20 9" })] }) }), _jsx("div", { style: { marginBottom: '20px', opacity: 0.6, cursor: 'pointer' }, title: "Search", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#d4d4d4", strokeWidth: "1.5", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }) }), _jsx("div", { style: { marginBottom: '20px', opacity: 1, borderLeft: '2px solid white', paddingLeft: '11px', cursor: 'pointer' }, title: "Run and Debug", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#d4d4d4", strokeWidth: "1.5", children: [_jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), _jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })] }) })] }), _jsxs("div", { className: "vista-sidebar", style: { width: '200px', backgroundColor: VSCodeColors.sidebar, fontSize: '13px', color: VSCodeColors.text, padding: '10px', borderRight: '1px solid #333' }, children: [_jsx("div", { style: { fontSize: '11px', fontWeight: 'bold', marginBottom: '10px', opacity: 0.7, textTransform: 'uppercase' }, children: "Open Editors" }), _jsxs("div", { style: { padding: '5px 10px', backgroundColor: '#37373d', borderRadius: '3px', cursor: 'pointer', display: 'flex', alignItems: 'center' }, children: [_jsx("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#61dafb", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }) }), file.split('/').pop()] })] }), _jsxs("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', backgroundColor: VSCodeColors.editorBg }, children: [_jsx("div", { style: { height: '35px', backgroundColor: VSCodeColors.bg, display: 'flex', alignItems: 'center', borderBottom: '1px solid #333' }, children: _jsxs("div", { style: { padding: '0 15px', height: '100%', backgroundColor: '#1e1e1e', borderTop: '2px solid #e11c1c', color: '#fff', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#61dafb", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }), file.split('/').pop(), _jsx("span", { style: { marginLeft: '10px', cursor: 'pointer', opacity: 0.7 }, children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }) }), _jsxs("div", { style: { flex: 2, padding: '20px', overflow: 'auto', fontFamily: "'Fira Code', 'Consolas', monospace", fontSize: '14px', lineHeight: '1.5', color: '#d4d4d4' }, children: [isBuildError && (_jsx("div", { style: { color: '#f14c4c', marginBottom: '15px', fontWeight: 'bold' }, children: message })), frame ? (_jsx("pre", { style: { margin: 0, whiteSpace: 'pre-wrap', fontFamily: 'inherit' }, children: frame })) : (_jsxs("div", { style: { color: '#d4d4d4' }, children: [_jsx("div", { style: { color: '#666', marginBottom: '20px' }, children: "// Source code not available for runtime execution error." }), _jsx("pre", { style: { margin: 0, color: '#9cdcfe', whiteSpace: 'pre-wrap' }, children: stack })] }))] }), _jsxs("div", { style: { flex: 1, backgroundColor: '#1e1e1e', borderTop: '1px solid #444', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: { display: 'flex', padding: '5px 15px', borderBottom: '1px solid #333', fontSize: '11px', color: '#ccc', gap: '15px' }, children: [_jsx("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, children: "PROBLEMS" }), _jsx("span", { style: { opacity: 0.5, cursor: 'pointer' }, children: "OUTPUT" }), _jsx("span", { style: { opacity: 0.5, cursor: 'pointer' }, children: "DEBUG CONSOLE" }), _jsx("span", { style: { opacity: 0.5, cursor: 'pointer' }, children: "TERMINAL" })] }), _jsxs("div", { style: { padding: '15px', overflow: 'auto', fontFamily: 'monospace', fontSize: '13px', color: '#f14c4c' }, children: [_jsx("div", { style: { color: '#d4d4d4', marginBottom: '5px' }, children: "$ npm run dev" }), _jsxs("div", { children: ["> Error: ", message] })] })] })] })] }), _jsxs("div", { style: { height: '22px', backgroundColor: '#e11c1c', display: 'flex', alignItems: 'center', padding: '0 10px', fontSize: '12px', color: 'white', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', gap: '15px', alignItems: 'center' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] }), "1 Error"] }), _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }), "0 Warnings"] })] }), _jsxs("div", { children: ["Ln ", error.loc?.line || 0, ", Col ", error.loc?.column || 0] })] })] }), _jsx("style", { children: `
+        .vista-sidebar { display: none; }
+        @media (min-width: 768px) {
+          .vista-sidebar { display: block; }
+        }
+        @keyframes vista-slide-up {
+          from { opacity: 0; transform: translateY(20px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+      ` })] }));
+};

package/dist/app.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare function loadRoute(path: string): Promise<React.ComponentType<any> | null>;
+export declare function loadRootLayout(): Promise<{
+    Component: React.ComponentType<any>;
+    metadata: any;
+} | {
+    Component: null;
+    metadata: {};
+}>;
+export type VistaAsset = {
+    type: 'style' | 'script' | 'preamble';
+    src?: string;
+    content?: string;
+    key?: string;
+};
+export default function App({ initialComponent, initialRootLayout, metadata, assets }: {
+    initialComponent?: React.ComponentType<any>;
+    initialRootLayout?: React.ComponentType<any>;
+    metadata?: any;
+    assets?: VistaAsset[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/app.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense } from 'react';
+import { useRouter } from './router.js';
+// Lazy load all pages and layouts at module level so they can be accessed by loadRoute
+// Note: Vite treats absolute paths in glob as relative to the project root
+// Lazy load all pages and layouts at module level so they can be accessed by loadRoute
+// Note: Vite treats absolute paths in glob as relative to the project root
+// FIX: Use eager: true to solve HMR instability with lazy boundaries
+// FIX: Use eager: true to solve HMR instability with lazy boundaries
+const pages = import.meta.glob('/app/**/index.tsx', { eager: true });
+const layouts = import.meta.glob('/app/**/layout.tsx', { eager: true });
+const rootLayout = import.meta.glob('/app/layout.tsx', { eager: true });
+// Helper to resolve route path to file key
+function getPageKey(path) {
+    const cleanPath = path === '/' ? '/' : path.replace(/\/$/, '');
+    return `/app${cleanPath === '/' ? '' : cleanPath}/index.tsx`;
+}
+// Exported loader for entry-client to preload the initial route
+export async function loadRoute(path) {
+    const pageKey = getPageKey(path);
+    if (pages[pageKey]) {
+        try {
+            // Eager: pages[pageKey] is the module itself
+            const mod = pages[pageKey];
+            return mod.default;
+        }
+        catch (e) {
+            console.error(`Failed to load route: ${path}`, e);
+        }
+    }
+    return null;
+}
+// Exported loader for entry-client/server to preload the root layout and metadata
+export async function loadRootLayout() {
+    const rootLayoutKey = '/app/layout.tsx';
+    if (rootLayout[rootLayoutKey]) {
+        try {
+            // Eager: rootLayout[rootLayoutKey] is the module itself
+            const mod = rootLayout[rootLayoutKey];
+            return {
+                Component: mod.default,
+                metadata: mod.metadata || {}
+            };
+        }
+        catch (e) {
+            console.error('Failed to load root layout', e);
+        }
+    }
+    return { Component: null, metadata: {} };
+}
+function VistaHead({ assets, metadata }) {
+    // Serialize assets for client hydration
+    const serializedAssets = JSON.stringify(assets || []);
+    // With hydrateRoot(document) and React 19, we can just render the tags.
+    // React handles the hoisting for stylesheets if we hint them, or just standard placement.
+    // Since we are hydrating the full document, and RootLayout contains <head>, 
+    // these tags will be rendered where they are (in body/root children).
+    // React 19 "Hoistable" Resources: <title>, <meta>, <link rel=stylesheet>.
+    // They will be hoisted to <head> automatically.
+    return (_jsxs(_Fragment, { children: [metadata?.title && _jsx("title", { children: metadata.title }), metadata?.description && _jsx("meta", { name: "description", content: metadata.description }), assets?.map((asset, index) => {
+                if (asset.type === 'style' && asset.src) {
+                    // Precedence="default" opts into React 19 Resource Loading/Hoisting
+                    /* @ts-ignore: React 19 prop */
+                    return _jsx("link", { rel: "stylesheet", href: asset.src, precedence: "default" }, asset.key || asset.src);
+                }
+                if (asset.type === 'script' && asset.src) {
+                    return _jsx("script", { type: "module", src: asset.src }, asset.key || asset.src);
+                }
+                if (asset.type === 'preamble' && asset.content) {
+                    return (_jsx("script", { type: "module", dangerouslySetInnerHTML: { __html: asset.content } }, "preamble"));
+                }
+                return null;
+            }), _jsx("script", { id: "vista-assets", dangerouslySetInnerHTML: {
+                    __html: `window.__VISTA_ASSETS__ = ${serializedAssets};`
+                } })] }));
+}
+export default function App({ initialComponent, initialRootLayout, metadata, assets }) {
+    const { path } = useRouter();
+    const pageKey = getPageKey(path);
+    if (!pages[pageKey]) {
+        return _jsxs("div", { children: ["404 Not Found: ", pageKey] });
+    }
+    // --- Page Logic ---
+    // --- Page Logic ---
+    const isInitialRender = React.useRef(!!initialComponent);
+    const [useInitial, setUseInitial] = React.useState(!!initialComponent);
+    const [initialPath] = React.useState(path); // FIX: Hook must be at top level
+    React.useEffect(() => {
+        // Switch to dynamic component (HMR-capable) after hydration
+        if (useInitial) {
+            setUseInitial(false);
+            isInitialRender.current = false;
+        }
+    }, []);
+    let PageComponent;
+    // Use initial component only if we are on the same path and fresh from hydration
+    if (useInitial && initialComponent && path === initialPath) {
+        PageComponent = initialComponent;
+    }
+    else {
+        // Eager: Direct access
+        PageComponent = pages[pageKey].default;
+    }
+    // --- Layout Logic ---
+    let RootLayoutComponent = initialRootLayout;
+    if (!RootLayoutComponent) {
+        const rootLayoutKey = '/app/layout.tsx';
+        if (rootLayout[rootLayoutKey]) {
+            // Eager
+            RootLayoutComponent = rootLayout[rootLayoutKey].default;
+        }
+        else {
+            RootLayoutComponent = React.Fragment;
+        }
+    }
+    return (
+    /* @ts-ignore */
+    _jsxs(RootLayoutComponent, { children: [_jsx(VistaHead, { metadata: metadata, assets: assets }), _jsx(Suspense, { fallback: null, children: _jsx(PageComponent, {}, path) })] }));
+}

package/dist/client/link.d.ts

@@ -0,0 +1,23 @@
+import React, { AnchorHTMLAttributes } from 'react';
+type Url = string | {
+    href: string;
+    query?: any;
+    hash?: string;
+};
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    href: Url;
+    as?: Url;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean | 'auto' | null;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onNavigate?: () => void;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const useLinkStatus: () => {
+    pending: boolean;
+};
+export default Link;

package/dist/client/link.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useRouter } from '../router';
+// Simple normalization for href (string or object)
+const formatUrl = (url) => {
+    if (typeof url === 'string')
+        return url;
+    if (typeof url === 'object' && url !== null) {
+        // Very basic support just for demo
+        return (url.href || '') + (url.hash || '');
+    }
+    return '';
+};
+export const Link = React.forwardRef(({ href, as, replace, scroll, shallow, passHref, prefetch, legacyBehavior, children, onClick, ...props }, ref) => {
+    const { push, replace: replaceRoute } = useRouter();
+    const targetPath = formatUrl(as || href);
+    const handleClick = (e) => {
+        if (onClick)
+            onClick(e);
+        // Standard link behavior checks
+        if (e.defaultPrevented)
+            return;
+        if (e.button !== 0)
+            return; // ignore right clicks
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+            return; // ignore open in new tab
+        if (!href)
+            return;
+        e.preventDefault();
+        if (replace) {
+            replaceRoute(targetPath);
+        }
+        else {
+            push(targetPath);
+        }
+    };
+    return (_jsx("a", { href: targetPath, onClick: handleClick, ref: ref, ...props, children: children }));
+});
+export const useLinkStatus = () => {
+    return { pending: false }; // Mock implementation
+};
+export default Link;

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+export declare function mount(modules: Record<string, any>): void;
+export declare function mountError(error: any): void;

package/dist/client.js

@@ -0,0 +1,290 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, useRouter } from './router.js';
+import { ErrorOverlay } from './ErrorOverlay';
+// --- Error Management ---
+function VistaErrorManager({ children, initialError }) {
+    const [error, setError] = useState(initialError || null);
+    useEffect(() => {
+        // 1. Listen for Vite HMR/Build Errors
+        if (import.meta.hot) {
+            import.meta.hot.on('vite:error', (payloade) => {
+                // Vite sends an object like { err: { message, stack, plugin, id, frame, loc } }
+                // OR sometimes just the error object directly depending on version/context.
+                console.log('[Vista] Received vite:error payload:', payloade);
+                const err = payloade.err || payloade;
+                setError({
+                    message: err.message,
+                    stack: err.stack,
+                    id: err.id, // Vite uses 'id' for filename often
+                    frame: err.frame,
+                    plugin: err.plugin,
+                    loc: err.loc,
+                    type: 'build',
+                    // Fallbacks for Overlay keys
+                    filename: err.id || err.file || 'Build Error',
+                });
+            });
+            import.meta.hot.on('vite:beforeUpdate', () => {
+                setError(null); // Clear error on new update
+            });
+        }
+        // 2. Listen for Unhandled Promise Rejections
+        const handleRejection = (event) => {
+            // Ignore dynamic import errors if we likely have a build error
+            if (event.reason?.message?.includes('Failed to fetch dynamically imported module')) {
+                console.log('[Vista] Ignoring dynamic import error (likely causing a build error)');
+                return;
+            }
+            setError((prev) => {
+                // specific check: don't overwrite build errors with runtime noise
+                if (prev && prev.type === 'build')
+                    return prev;
+                return {
+                    message: event.reason?.message || 'Unhandled Promise Rejection',
+                    stack: event.reason?.stack || '',
+                    filename: 'Runtime Error',
+                    loc: { line: 0, column: 0 },
+                    type: 'runtime'
+                };
+            });
+        };
+        // 3. Listen for Global Errors
+        const handleError = (event) => {
+            setError((prev) => {
+                if (prev && prev.type === 'build')
+                    return prev;
+                return {
+                    message: event.error?.message || event.message || 'Unknown Error',
+                    stack: event.error?.stack || '',
+                    filename: 'Runtime Error',
+                    loc: { line: event.lineno || 0, column: event.colno || 0 },
+                    type: 'runtime'
+                };
+            });
+        };
+        window.addEventListener('unhandledrejection', handleRejection);
+        window.addEventListener('error', handleError);
+        return () => {
+            window.removeEventListener('unhandledrejection', handleRejection);
+            window.removeEventListener('error', handleError);
+        };
+    }, []);
+    const handleBoundaryError = (err) => {
+        // Logic to ignore cascade errors
+        if (error && error.type === 'build')
+            return;
+        if (err.message && err.message.includes('Failed to fetch dynamically imported module'))
+            return;
+        setError({
+            message: err.message,
+            stack: err.stack,
+            loc: { line: 0, column: 0 },
+            filename: 'Runtime Error',
+            type: 'runtime'
+        });
+    };
+    if (error) {
+        return _jsx(ErrorOverlay, { error: error, onClose: () => setError(null) });
+    }
+    return (_jsx(ErrorBoundary, { onError: handleBoundaryError, children: children }));
+}
+// ... existing ErrorBoundary ...
+// ... existing AppContent ...
+// ... existing App ...
+// Export a mount function that accepts the glob results
+export function mount(modules) {
+    console.log('[Vista] Mount called with modules:', Object.keys(modules));
+    const root = document.getElementById('root');
+    if (root) {
+        console.log('[Vista] Root element found, rendering...');
+        ReactDOM.createRoot(root).render(_jsx(VistaErrorManager, { children: _jsx(App, { modules: modules }) }));
+    }
+    else {
+        console.error('[Vista] FATAL: Root element #root not found in DOM');
+    }
+}
+// Export a mountError function for when module loading fails
+export function mountError(error) {
+    const root = document.getElementById('root');
+    if (root) {
+        // Mount just the ErrorManager to catch and display the Vite error
+        ReactDOM.createRoot(root).render(_jsx(VistaErrorManager, { initialError: error, children: _jsx("div", { style: { padding: '20px', fontFamily: 'sans-serif', color: '#666' }, children: "Initializing error overlay..." }) }));
+    }
+}
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError({
+            message: error.message,
+            stack: error.stack,
+            loc: { line: 0, column: 0 },
+            filename: 'Runtime Error'
+        });
+    }
+    render() {
+        if (this.state.hasError) {
+            return null;
+        }
+        return this.props.children;
+    }
+}
+// --- App Logic ---
+function AppContent({ modules }) {
+    const { path: currentPath } = useRouter();
+    // 1. Find the matching page component
+    let PageComponent = () => _jsx("div", { className: "p-10 text-xl", children: "404 Not Found" });
+    // 2. Build the Layout Tree
+    // ... (Logic to build layoutPaths is same) ...
+    // Refactored Async Logic
+    const [componentTree, setComponentTree] = React.useState(null);
+    const [pageError, setPageError] = React.useState(null);
+    React.useEffect(() => {
+        let isMounted = true;
+        setPageError(null);
+        const loadRoute = async () => {
+            try {
+                // --- 1. Route Matching Engine ---
+                let pageLoader = null;
+                let matchedRoutePath = '';
+                let routeParams = {};
+                // Normalize current path: remove trailing slash (unless root)
+                let normalizedPath = currentPath;
+                if (normalizedPath.length > 1 && normalizedPath.endsWith('/')) {
+                    normalizedPath = normalizedPath.slice(0, -1);
+                }
+                // Helper: Convert file path to route regex
+                // e.g. "/app/users/[id]/index.tsx" -> "^/users/([^/]+)$"
+                // e.g. "/app/index.tsx" -> "^/$"
+                const createRouteMatcher = (filePath) => {
+                    // Remove prefix: handle "/", "./", or no slash before "app"
+                    let cleanPath = filePath
+                        .replace(/^(\.?\/)?app\//, '') // Remove app/ prefix (robust)
+                        .replace(/\/index\.tsx$/, '') // Remove /index.tsx (nested)
+                        .replace(/^index\.tsx$/, '') // Remove index.tsx (root)
+                        .replace(/\.tsx$/, ''); // Remove .tsx (if any)
+                    if (cleanPath === '')
+                        cleanPath = '/';
+                    // Split into segments
+                    const segments = cleanPath.split('/').filter(Boolean);
+                    const paramNames = [];
+                    // Console log for debug
+                    // console.log(`[Router Debug] File: ${filePath} -> Clean: ${cleanPath}`);
+                    const pathPattern = segments.map(seg => {
+                        if (seg.startsWith('[') && seg.endsWith(']')) {
+                            const paramName = seg.slice(1, -1);
+                            paramNames.push(paramName);
+                            return '([^/]+)'; // Match any non-slash char
+                        }
+                        return seg; // Static segment
+                    }).join('/');
+                    // Generate Regex: Ensure it starts with ^/ and ends with $
+                    // cleanPath modules like 'about' become '^/about$'
+                    // root '' becomes '^/$'
+                    const regexString = pathPattern ? `^/${pathPattern}$` : '^/$';
+                    return {
+                        regex: new RegExp(regexString),
+                        paramNames,
+                        originalPath: cleanPath
+                    };
+                };
+                // Iterate all modules to find a match
+                // Note: In a real framework, you'd cache the route table.
+                // console.log('[Vista Router] Current Path (Normalized):', normalizedPath);
+                // console.log('[Vista Router] Modules Found:', Object.keys(modules));
+                for (const path in modules) {
+                    // Only care about pages (index.tsx)
+                    if (!path.endsWith('/index.tsx'))
+                        continue;
+                    const { regex, paramNames } = createRouteMatcher(path);
+                    const match = normalizedPath.match(regex);
+                    // console.log(`[Vista Router] Checking ${path} -> Regex: ${regex} -> Match: ${match ? 'YES' : 'NO'}`);
+                    if (match) {
+                        pageLoader = modules[path];
+                        matchedRoutePath = path;
+                        // Extract params
+                        match.slice(1).forEach((val, index) => {
+                            routeParams[paramNames[index]] = decodeURIComponent(val);
+                        });
+                        break; // Found first match (TODO: strict sorting Order)
+                    }
+                }
+                if (!pageLoader) {
+                    if (isMounted)
+                        setComponentTree(_jsx("div", { className: "p-10 text-xl", children: "404 Not Found" }));
+                    return;
+                }
+                // --- 2. Load Page & Layouts ---
+                const pageModule = await pageLoader();
+                let PageComponent = pageModule.default;
+                // Load Layouts: Climb up the directory tree from the page path
+                // e.g. /app/users/[id]/index.tsx
+                // Check: /app/users/[id]/layout.tsx
+                // Check: /app/users/layout.tsx
+                // Check: /app/layout.tsx
+                const layoutLoaders = [];
+                const dirSegments = matchedRoutePath.split('/').slice(0, -1); // remove index.tsx
+                // Construct potential layout paths from root down to leaf
+                // But we want to load them all.
+                // Actually, let's just create the list of all parent directories and check for layout.tsx
+                let currentDir = ''; // starts empty
+                const possibleLayouts = [];
+                // We know everything starts with /app
+                // dirSegments looks like ['', 'app', 'users', '[id]']
+                for (const segment of dirSegments) {
+                    if (!segment)
+                        continue;
+                    currentDir += `/${segment}`;
+                    const layoutPath = `${currentDir}/layout.tsx`;
+                    if (modules[layoutPath]) {
+                        possibleLayouts.push(layoutPath);
+                    }
+                }
+                // Execute layout loaders
+                const layoutModules = await Promise.all(possibleLayouts.map(path => modules[path]()));
+                if (!isMounted)
+                    return;
+                // Handle Metadata
+                let meta = pageModule.metadata || {};
+                layoutModules.forEach(mod => {
+                    if (mod.metadata)
+                        meta = { ...meta, ...mod.metadata };
+                });
+                if (meta.title)
+                    document.title = meta.title;
+                // Build Tree: Wrap Page with Layouts (Inner -> Outer? NO. Outer wraps Inner.)
+                // layoutModules is [AppLayout, UsersLayout, UserIdLayout]
+                // We want <AppLayout><UsersLayout><UserIdLayout><Page /></...></...></...>
+                let Content = _jsx(PageComponent, { params: routeParams }); // Pass params to page!
+                // Reverse iterate to wrap from inside out
+                for (let i = layoutModules.length - 1; i >= 0; i--) {
+                    const LayoutComponent = layoutModules[i].default;
+                    Content = _jsx(LayoutComponent, { params: routeParams, children: Content });
+                }
+                setComponentTree(Content);
+            }
+            catch (err) {
+                console.error('[Vista] Failed to load route:', err);
+                if (isMounted)
+                    setPageError(err);
+            }
+        };
+        loadRoute();
+        return () => { isMounted = false; };
+    }, [currentPath, modules]);
+    if (pageError) {
+        // Propagate to ErrorManager
+        throw pageError;
+    }
+    return componentTree;
+}
+function App({ modules }) {
+    return (_jsx(React.StrictMode, { children: _jsx(RouterProvider, { children: _jsx(AppContent, { modules: modules }) }) }));
+}

package/dist/components/PixelBlast.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+type PixelBlastVariant = 'square' | 'circle' | 'triangle' | 'diamond';
+export type PixelBlastProps = {
+    variant?: PixelBlastVariant;
+    pixelSize?: number;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    antialias?: boolean;
+    patternScale?: number;
+    patternDensity?: number;
+    liquid?: boolean;
+    liquidStrength?: number;
+    liquidRadius?: number;
+    pixelSizeJitter?: number;
+    enableRipples?: boolean;
+    rippleIntensityScale?: number;
+    rippleThickness?: number;
+    rippleSpeed?: number;
+    liquidWobbleSpeed?: number;
+    autoPauseOffscreen?: boolean;
+    speed?: number;
+    transparent?: boolean;
+    edgeFade?: number;
+    noiseAmount?: number;
+};
+declare const PixelBlast: React.FC<PixelBlastProps>;
+export default PixelBlast;