@vistagenic/vista 0.1.0-alpha.1

package/dist/client/link.js

@@ -0,0 +1,188 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsActive = exports.useLinkStatus = exports.Link = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const router_1 = require("./router");
+// Normalize href (string or object) to string
+const formatUrl = (url) => {
+    if (typeof url === 'string')
+        return url;
+    if (typeof url === 'object' && url !== null) {
+        let result = url.href || '';
+        if (url.query) {
+            const params = new URLSearchParams(url.query).toString();
+            result += (result.includes('?') ? '&' : '?') + params;
+        }
+        if (url.hash) {
+            result += url.hash.startsWith('#') ? url.hash : `#${url.hash}`;
+        }
+        return result;
+    }
+    return '';
+};
+// Set of URLs that have been prefetched
+const prefetchedUrls = new Set();
+// Prefetch a URL by creating a hidden link element
+const prefetchUrl = (url) => {
+    if (prefetchedUrls.has(url))
+        return;
+    if (typeof window === 'undefined')
+        return;
+    // Don't prefetch external URLs
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+        if (!url.startsWith(window.location.origin))
+            return;
+    }
+    prefetchedUrls.add(url);
+    // Create prefetch link
+    const link = document.createElement('link');
+    link.rel = 'prefetch';
+    link.href = url;
+    link.as = 'document';
+    document.head.appendChild(link);
+};
+exports.Link = react_1.default.forwardRef(({ href, as, replace, scroll = true, shallow, passHref, prefetch = true, legacyBehavior, children, onClick, onMouseEnter, onNavigate, ...props }, ref) => {
+    const router = (0, router_1.useRouter)();
+    const pathname = (0, router_1.usePathname)();
+    const linkRef = (0, react_1.useRef)(null);
+    const targetPath = formatUrl(as || href);
+    const [isActive, setIsActive] = (0, react_1.useState)(false);
+    // Combine refs
+    const setRefs = (0, react_1.useCallback)((node) => {
+        linkRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // Check if link is active (current route)
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== 'undefined') {
+            setIsActive(pathname === targetPath);
+        }
+    }, [targetPath, pathname]);
+    // Prefetch on viewport intersection
+    (0, react_1.useEffect)(() => {
+        if (!prefetch || prefetch === null)
+            return;
+        if (typeof window === 'undefined')
+            return;
+        const element = linkRef.current;
+        if (!element)
+            return;
+        // Only prefetch visible links
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    prefetchUrl(targetPath);
+                    observer.disconnect();
+                }
+            });
+        }, {
+            rootMargin: '200px',
+            threshold: 0,
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [prefetch, targetPath]);
+    // Prefetch on hover
+    const handleMouseEnter = (0, react_1.useCallback)((e) => {
+        if (onMouseEnter)
+            onMouseEnter(e);
+        if (prefetch !== false && prefetch !== null) {
+            prefetchUrl(targetPath);
+        }
+    }, [onMouseEnter, prefetch, targetPath]);
+    // Handle navigation
+    const handleClick = (0, react_1.useCallback)((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;
+        // Check for external links
+        if (targetPath.startsWith('http://') || targetPath.startsWith('https://')) {
+            if (!targetPath.startsWith(window.location.origin)) {
+                return; // Let browser handle external links
+            }
+        }
+        e.preventDefault();
+        // Call onNavigate callback
+        if (onNavigate)
+            onNavigate();
+        // Navigate
+        if (replace) {
+            router.replace(targetPath, { scroll });
+        }
+        else {
+            router.push(targetPath, { scroll });
+        }
+    }, [onClick, href, targetPath, replace, scroll, router, onNavigate]);
+    // Data attributes for styling active links
+    const dataProps = {
+        'data-active': isActive ? 'true' : undefined,
+    };
+    return ((0, jsx_runtime_1.jsx)("a", { href: targetPath, onClick: handleClick, onMouseEnter: handleMouseEnter, ref: setRefs, ...dataProps, ...props, children: children }));
+});
+exports.Link.displayName = 'Link';
+/**
+ * Hook to check link navigation status
+ */
+const useLinkStatus = () => {
+    // In a real implementation, this would track navigation state
+    const [pending, setPending] = (0, react_1.useState)(false);
+    return { pending };
+};
+exports.useLinkStatus = useLinkStatus;
+/**
+ * Hook to check if a path is active
+ */
+const useIsActive = (path) => {
+    const pathname = (0, router_1.usePathname)();
+    return pathname === path;
+};
+exports.useIsActive = useIsActive;
+exports.default = exports.Link;

package/dist/client/navigation.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Vista Navigation Hooks
+ *
+ * Provides hooks for reading route information.
+ * Similar to Next.js navigation hooks.
+ */
+/**
+ * Returns the current pathname
+ */
+export declare function usePathname(): string;
+/**
+ * Returns the current search params
+ */
+export declare function useSearchParams(): URLSearchParams;
+/**
+ * Returns dynamic route parameters
+ * For route /users/[id]/posts/[postId], returns { id: '123', postId: '456' }
+ */
+export declare function useParams<T extends Record<string, string> = Record<string, string>>(): T;
+/**
+ * Returns the currently active segment of the layout
+ */
+export declare function useSelectedLayoutSegment(): string | null;
+/**
+ * Returns all active segments of the layout
+ */
+export declare function useSelectedLayoutSegments(): string[];
+export { useRouter } from './router';

package/dist/client/navigation.js

@@ -0,0 +1,116 @@
+/**
+ * Vista Navigation Hooks
+ *
+ * Provides hooks for reading route information.
+ * Similar to Next.js navigation hooks.
+ */
+'client load';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRouter = void 0;
+exports.usePathname = usePathname;
+exports.useSearchParams = useSearchParams;
+exports.useParams = useParams;
+exports.useSelectedLayoutSegment = useSelectedLayoutSegment;
+exports.useSelectedLayoutSegments = useSelectedLayoutSegments;
+const React = __importStar(require("react"));
+const context_1 = require("../router/context");
+/**
+ * Returns the current pathname
+ */
+function usePathname() {
+    const [pathname, setPathname] = React.useState(() => typeof window !== 'undefined' ? window.location.pathname : '/');
+    React.useEffect(() => {
+        const handlePopState = () => {
+            setPathname(window.location.pathname);
+        };
+        window.addEventListener('popstate', handlePopState);
+        return () => window.removeEventListener('popstate', handlePopState);
+    }, []);
+    return pathname;
+}
+/**
+ * Returns the current search params
+ */
+function useSearchParams() {
+    const [searchParams, setSearchParams] = React.useState(() => typeof window !== 'undefined'
+        ? new URLSearchParams(window.location.search)
+        : new URLSearchParams());
+    React.useEffect(() => {
+        const handlePopState = () => {
+            setSearchParams(new URLSearchParams(window.location.search));
+        };
+        window.addEventListener('popstate', handlePopState);
+        return () => window.removeEventListener('popstate', handlePopState);
+    }, []);
+    return searchParams;
+}
+/**
+ * Returns dynamic route parameters
+ * For route /users/[id]/posts/[postId], returns { id: '123', postId: '456' }
+ */
+function useParams() {
+    const context = (0, context_1.useRouterContext)();
+    const pathname = usePathname();
+    // Basic param extraction (simplified)
+    // In a full implementation, this would match against route patterns
+    const params = {};
+    // Extract dynamic segments from URL
+    const pathParts = pathname.split('/').filter(Boolean);
+    pathParts.forEach((part, index) => {
+        if (part.match(/^\d+$/)) {
+            params[`param${index}`] = part;
+        }
+    });
+    return params;
+}
+/**
+ * Returns the currently active segment of the layout
+ */
+function useSelectedLayoutSegment() {
+    const pathname = usePathname();
+    const segments = pathname.split('/').filter(Boolean);
+    return segments[segments.length - 1] || null;
+}
+/**
+ * Returns all active segments of the layout
+ */
+function useSelectedLayoutSegments() {
+    const pathname = usePathname();
+    return pathname.split('/').filter(Boolean);
+}
+var router_1 = require("./router");
+Object.defineProperty(exports, "useRouter", { enumerable: true, get: function () { return router_1.useRouter; } });

package/dist/client/router.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+export declare const RouterContext: React.Context<{
+    push: (url: string, options?: RouterOptions) => void;
+    replace: (url: string, options?: RouterOptions) => void;
+    back: () => void;
+    forward: () => void;
+    prefetch: (url: string) => void;
+    refresh: () => void;
+    params: Record<string, string>;
+    pathname: string;
+}>;
+export interface RouterOptions {
+    scroll?: boolean;
+}
+export interface AppRouterInstance {
+    push(url: string, options?: RouterOptions): void;
+    replace(url: string, options?: RouterOptions): void;
+    back(): void;
+    forward(): void;
+    prefetch(url: string): void;
+    refresh(): void;
+}
+interface RouteNode {
+    segment: string;
+    kind: 'static' | 'dynamic' | 'catch-all';
+    index?: React.ComponentType<any>;
+    layout?: React.ComponentType<any>;
+    loading?: React.ComponentType<any>;
+    error?: React.ComponentType<any>;
+    notFound?: React.ComponentType<any>;
+    children?: RouteNode[];
+}
+interface RouterProps {
+    routeTree: RouteNode;
+    initialPath?: string;
+}
+export declare function Router({ routeTree, initialPath }: RouterProps): import("react/jsx-runtime").JSX.Element;
+export declare function useRouter(): AppRouterInstance;
+export declare function useParams(): Record<string, string>;
+export declare function usePathname(): string;
+export {};

package/dist/client/router.js

@@ -0,0 +1,190 @@
+'client load';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouterContext = void 0;
+exports.Router = Router;
+exports.useRouter = useRouter;
+exports.useParams = useParams;
+exports.usePathname = usePathname;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+// --- Context ---
+exports.RouterContext = React.createContext(null);
+function Router({ routeTree, initialPath }) {
+    const [currentPath, setCurrentPath] = React.useState(initialPath || (typeof window !== 'undefined' ? window.location.pathname : '/'));
+    React.useEffect(() => {
+        const onPopState = () => setCurrentPath(window.location.pathname);
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+    }, []);
+    // Match Route
+    const match = React.useMemo(() => matchRoute(routeTree, currentPath), [routeTree, currentPath]);
+    const routerValue = React.useMemo(() => ({
+        push: (url, options) => {
+            window.history.pushState({}, '', url);
+            window.dispatchEvent(new PopStateEvent('popstate'));
+            if (options?.scroll !== false)
+                window.scrollTo(0, 0);
+        },
+        replace: (url, options) => {
+            window.history.replaceState({}, '', url);
+            window.dispatchEvent(new PopStateEvent('popstate'));
+            if (options?.scroll !== false)
+                window.scrollTo(0, 0);
+        },
+        back: () => window.history.back(),
+        forward: () => window.history.forward(),
+        prefetch: (url) => {
+            const link = document.createElement('link');
+            link.rel = 'prefetch';
+            link.href = url;
+            document.head.appendChild(link);
+        },
+        refresh: () => window.dispatchEvent(new PopStateEvent('popstate')),
+        params: match.params,
+        pathname: currentPath
+    }), [currentPath, match.params]);
+    // Render Component Tree
+    // Stack: [RootLayout, Layout2, Layout3, Page]
+    let content = match.PageComponent ? (0, jsx_runtime_1.jsx)(match.PageComponent, { ...match.params }) : null;
+    if (!content && match.NotFoundComponent) {
+        content = (0, jsx_runtime_1.jsx)(match.NotFoundComponent, {});
+    }
+    // Wrap in layouts (reverse order)
+    for (let i = match.layouts.length - 1; i >= 0; i--) {
+        const Layout = match.layouts[i];
+        if (Layout) {
+            content = (0, jsx_runtime_1.jsx)(Layout, { params: match.params, children: content });
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.RouterContext.Provider, { value: routerValue, children: content }));
+}
+function matchRoute(root, path) {
+    const segments = path.split('/').filter(Boolean);
+    const params = {};
+    const layouts = [];
+    // Nearest NotFound found during traversal (propagates down)
+    let nearestNotFound = root.notFound || null;
+    // Helper to traverse
+    function traverse(node, segmentIndex) {
+        // Collect Layout
+        if (node.layout)
+            layouts.push(node.layout);
+        if (node.notFound)
+            nearestNotFound = node.notFound;
+        // If we processed all segments, check for index page
+        if (segmentIndex === segments.length) {
+            if (node.index) {
+                return {
+                    PageComponent: node.index,
+                    NotFoundComponent: nearestNotFound,
+                    layouts,
+                    params
+                };
+            }
+            // No index page here -> 404
+            return null;
+        }
+        const currentSegment = segments[segmentIndex];
+        // Find matching child
+        if (node.children) {
+            for (const child of node.children) {
+                let isMatch = false;
+                if (child.kind === 'static' && child.segment === currentSegment) {
+                    isMatch = true;
+                }
+                else if (child.kind === 'dynamic') {
+                    isMatch = true;
+                    params[child.segment] = currentSegment;
+                }
+                else if (child.kind === 'catch-all') {
+                    isMatch = true;
+                    const catchAll = segments.slice(segmentIndex).join('/');
+                    params[child.segment] = catchAll;
+                    // Catch-all consumes 'rest'
+                    // Recursively match index of catch-all node?? 
+                    // Simplified: just match if it has a page
+                    if (child.index) {
+                        if (child.layout)
+                            layouts.push(child.layout);
+                        return {
+                            PageComponent: child.index,
+                            NotFoundComponent: nearestNotFound,
+                            layouts,
+                            params
+                        };
+                    }
+                }
+                if (isMatch) {
+                    const result = traverse(child, segmentIndex + 1);
+                    if (result)
+                        return result;
+                    // Backtrack params if needed (simple implementation ignores backtracking cleanup for now)
+                }
+            }
+        }
+        return null;
+    }
+    const result = traverse(root, 0);
+    if (result)
+        return result;
+    // 404
+    return {
+        PageComponent: null,
+        NotFoundComponent: nearestNotFound,
+        layouts,
+        params
+    };
+}
+// --- Hooks ---
+function useRouter() {
+    const context = React.useContext(exports.RouterContext);
+    if (!context)
+        throw new Error('useRouter must be used within a RouterProvider/Router');
+    return context;
+}
+function useParams() {
+    const context = React.useContext(exports.RouterContext);
+    if (!context)
+        return {};
+    return context.params;
+}
+function usePathname() {
+    const context = React.useContext(exports.RouterContext);
+    if (!context)
+        return '';
+    return context.pathname;
+}

package/dist/client/script.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Vista Script Component
+ *
+ * Optimized script loading with different strategies.
+ * Similar to Next.js Script component.
+ */
+export type ScriptStrategy = 'beforeInteractive' | 'afterInteractive' | 'lazyOnload' | 'worker';
+export interface ScriptProps {
+    /**
+     * URL of the script
+     */
+    src?: string;
+    /**
+     * Inline script content
+     */
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    /**
+     * Loading strategy
+     * - beforeInteractive: Load before page becomes interactive
+     * - afterInteractive: Load after hydration (default)
+     * - lazyOnload: Load during idle time
+     * - worker: Load in a web worker (experimental)
+     */
+    strategy?: ScriptStrategy;
+    /**
+     * Callback when script loads
+     */
+    onLoad?: () => void;
+    /**
+     * Callback when script errors
+     */
+    onError?: () => void;
+    /**
+     * Callback when script is ready (for inline scripts)
+     */
+    onReady?: () => void;
+    /**
+     * Script ID for deduplication
+     */
+    id?: string;
+    /**
+     * Additional script attributes
+     */
+    [key: string]: any;
+}
+/**
+ * Script component for optimized script loading
+ */
+export default function Script({ src, dangerouslySetInnerHTML, strategy, onLoad, onError, onReady, id, ...rest }: ScriptProps): import("react/jsx-runtime").JSX.Element;