vista-core-js 0.0.2

package/dist/image/get-img-props.d.ts

@@ -0,0 +1,20 @@
+import { ImageConfigComplete } from './image-config';
+import { ImageLoader } from './image-loader';
+export type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    fill?: boolean;
+    loader?: ImageLoader;
+    quality?: number | string;
+    priority?: boolean;
+    unoptimized?: boolean;
+};
+type ImgProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    width?: number;
+    height?: number;
+    srcSet?: string;
+};
+export declare function getImgProps(props: ImageProps, config: ImageConfigComplete | undefined, defaultLoader: ImageLoader): ImgProps;
+export {};

package/dist/image/get-img-props.js

@@ -0,0 +1,46 @@
+import { imageConfigDefault } from './image-config';
+// Helper: Generate srcSet
+function generateSrcSet(src, width, loader, config, unoptimized) {
+    if (unoptimized)
+        return undefined;
+    const { deviceSizes, imageSizes } = config;
+    const sizes = [...deviceSizes, ...imageSizes].sort((a, b) => a - b);
+    // If width is known, only generate sizes up to that width (plus maybe 2x/3x for density)
+    // For simplicity MVP, we'll generate device sizes.
+    return sizes
+        .map((size) => {
+        const url = loader({ src, width: size });
+        return `${url} ${size}w`;
+    })
+        .join(', ');
+}
+export function getImgProps(props, config = imageConfigDefault, defaultLoader) {
+    const { src, alt, width, height, fill, loader = defaultLoader, quality, priority, unoptimized, style, sizes, className, loading, ...rest } = props;
+    const imgStyle = { ...style };
+    // Handle Fill Mode
+    if (fill) {
+        imgStyle.position = 'absolute';
+        imgStyle.height = '100%';
+        imgStyle.width = '100%';
+        imgStyle.inset = 0;
+        imgStyle.objectFit = 'cover'; // Default to cover for bg images
+    }
+    // Handle Dimensions
+    let widthInt = width ? Number(width) : undefined;
+    let heightInt = height ? Number(height) : undefined;
+    // Generate SrcSet
+    const srcSet = generateSrcSet(src, widthInt, loader, config, !!unoptimized);
+    return {
+        ...rest,
+        src,
+        alt,
+        width: widthInt,
+        height: heightInt,
+        loading: priority ? 'eager' : (loading || 'lazy'),
+        // fetchPriority: priority ? 'high' : undefined, // React types might strict on this
+        style: imgStyle,
+        sizes: sizes || (fill ? '100vw' : undefined),
+        srcSet,
+        className,
+    };
+}

package/dist/image/image-config.d.ts

@@ -0,0 +1,20 @@
+export declare const imageConfigDefault: {
+    deviceSizes: number[];
+    imageSizes: number[];
+    path: string;
+    loader: "default";
+    loaderFile: string;
+    domains: never[];
+    disableStaticImages: boolean;
+    minimumCacheTTL: number;
+    formats: readonly ["image/webp"];
+    dangerouslyAllowSVG: boolean;
+    contentSecurityPolicy: string;
+    contentDispositionType: "inline";
+    remotePatterns: never[];
+    unoptimized: boolean;
+};
+export type ImageConfigComplete = typeof imageConfigDefault;
+export type ImageConfig = Partial<ImageConfigComplete>;
+export declare const VALID_LOADERS: readonly ["default", "imgix", "cloudinary", "akamai", "custom"];
+export type LoaderValue = typeof VALID_LOADERS[number];

package/dist/image/image-config.js

@@ -0,0 +1,17 @@
+export const imageConfigDefault = {
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    path: '/_next/image',
+    loader: 'default',
+    loaderFile: '',
+    domains: [],
+    disableStaticImages: false,
+    minimumCacheTTL: 60,
+    formats: ['image/webp'],
+    dangerouslyAllowSVG: false,
+    contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;",
+    contentDispositionType: 'inline',
+    remotePatterns: [],
+    unoptimized: false,
+};
+export const VALID_LOADERS = ['default', 'imgix', 'cloudinary', 'akamai', 'custom'];

package/dist/image/image-loader.d.ts

@@ -0,0 +1,7 @@
+export type ImageLoaderProps = {
+    src: string;
+    width: number;
+    quality?: number;
+};
+export type ImageLoader = (p: ImageLoaderProps) => string;
+export declare const defaultLoader: ImageLoader;

package/dist/image/image-loader.js

@@ -0,0 +1,10 @@
+// Default loader: simple pass-through for now, 
+// envisioning a future where this hits an optimization endpoint.
+export const defaultLoader = ({ src, width, quality }) => {
+    // If user wants optimization, they would hook up a real loader here.
+    // For static dev, we just return the src.
+    // In a real Next.js app, this would be: `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`
+    // NOTE: Emulating optimizing behavior by appending query params for now (if backend supported it)
+    // return `${src}?w=${width}&q=${quality || 75}`;
+    return src;
+};

package/dist/image/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const Image: React.ForwardRefExoticComponent<React.ImgHTMLAttributes<HTMLImageElement> & {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    fill?: boolean;
+    loader?: import("./image-loader").ImageLoader;
+    quality?: number | string;
+    priority?: boolean;
+    unoptimized?: boolean;
+} & React.RefAttributes<HTMLImageElement>>;

package/dist/image/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { getImgProps } from './get-img-props';
+import { imageConfigDefault } from './image-config';
+import { defaultLoader } from './image-loader';
+export const Image = forwardRef((props, ref) => {
+    // In a real implementation, we might consume config from a Context Provider
+    // For now, we use the default config.
+    const imgProps = getImgProps(props, imageConfigDefault, defaultLoader);
+    return (_jsx("img", { ...imgProps, ref: ref }));
+});
+Image.displayName = 'Image';

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { useRouter, Link } from './router.js';
+import { mount, mountError } from './client.js';
+export { Image } from './image/index.js';
+export type { ImageProps } from './image/get-img-props.js';
+export type { ImageLoaderProps } from './image/image-loader.js';
+export { useRouter, mount, mountError, Link };

package/dist/index.js

@@ -0,0 +1,4 @@
+import { useRouter, Link } from './router.js';
+import { mount, mountError } from './client.js';
+export { Image } from './image/index.js';
+export { useRouter, mount, mountError, Link };

package/dist/plugin.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vite';
+export interface VistaPluginOptions {
+    logo?: string;
+}
+export declare function vistaPlugin(options?: VistaPluginOptions): Plugin;

package/dist/plugin.js

@@ -0,0 +1,88 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const clientPath = path.resolve(__dirname, './client.tsx'); // Resolves to src/client.tsx
+export function vistaPlugin(options = {}) {
+    const logoPath = options.logo || '/favicon.ico';
+    return {
+        name: 'vista-core',
+        enforce: 'pre',
+        configureServer(server) {
+            if (server.config.appType === 'custom') {
+                return; // Skip SPA middleware for SSR
+            }
+            // Disable default Vite overlay
+            server.config.server.hmr = {
+                ...(typeof server.config.server.hmr === 'object' ? server.config.server.hmr : {}),
+                overlay: false
+            };
+            server.middlewares.use(async (req, res, next) => {
+                const url = req.url || '/';
+                const pathname = url.split('?')[0];
+                // SPA Fallback logic:
+                // Serve index.html if request is:
+                // 1. Root (/)
+                // 2. Not an internal Vite request (starts with /@)
+                // 3. Not a file with an extension (check pathname, ignore query params)
+                const isFile = pathname.includes('.');
+                const isInternal = url.startsWith('/@');
+                if (url === '/' || (!isFile && !isInternal)) {
+                    const html = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vista App</title>
+    <link rel="icon" href="${logoPath}" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import { mount, mountError } from '@vista/core';
+      console.log('[Vista] Bootstrapping...');
+      try {
+        // use lazy loading (default) to allow catching syntax errors per module
+        // APP Folder scanning: Scan app/**/index.tsx (Pages) and app/**/layout.tsx (Layouts)
+        const modules = import.meta.glob(['/app/**/index.tsx', '/app/**/layout.tsx', '/app/layout.tsx', '/app/index.tsx']);        console.log('[Vista] Modules discovered:', Object.keys(modules));
+        mount(modules);
+      } catch (e) {
+        console.error('[Vista] Module load failed, calling mountError', e);
+        if (typeof mountError === 'function') {
+           mountError(e);
+        } else {
+           console.error('[Vista] mountError is NOT a function! Check exports.', mountError);
+           document.body.innerHTML = '<div style="color:red; padding:20px;">CRITICAL: mountError missing. Check console.</div>';
+        }
+      }
+    </script>
+  </body>
+</html>
+`;
+                    // Transform the HTML to handle imports/HMR
+                    const transformedHtml = await server.transformIndexHtml(url, html);
+                    res.statusCode = 200;
+                    res.setHeader('Content-Type', 'text/html');
+                    res.end(transformedHtml);
+                    return;
+                }
+                next();
+            });
+        },
+        resolveId(id) {
+            if (id === 'virtual:vista-routes') {
+                return '\0virtual:vista-routes';
+            }
+        },
+        load(id) {
+            if (id === '\0virtual:vista-routes') {
+                return `export const routes = []`;
+            }
+        },
+        transform(code, id) {
+            // REMOVED: <head> injection caused Hydration Mismatch because React 18 component tree didn't include it.
+            // We will enforce <head> being present in the User's Layout instead.
+            return null;
+        }
+    };
+}

package/dist/router.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type RouterContextType = {
+    push: (path: string) => void;
+    replace: (path: string) => void;
+    back: () => void;
+    path: string;
+};
+export declare function useRouter(): RouterContextType;
+export declare function RouterProvider({ children, url }: {
+    children: React.ReactNode;
+    url?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ href, children, className }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/router.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect, useState } from 'react';
+// Create Context
+const RouterContext = createContext(null);
+// Hook
+export function useRouter() {
+    const context = useContext(RouterContext);
+    if (!context) {
+        throw new Error('useRouter must be used within a RouterProvider. This is handled automatically by Vista.');
+    }
+    return context;
+}
+// Internal Provider
+export function RouterProvider({ children, url }) {
+    const [path, setPath] = useState(() => {
+        if (url)
+            return url;
+        if (typeof window !== 'undefined')
+            return window.location.pathname;
+        return '/';
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const onPopState = () => setPath(window.location.pathname);
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+    }, []);
+    // Import startTransition
+    const { startTransition } = React;
+    const push = (newPath) => {
+        window.history.pushState({}, '', newPath);
+        setPath(newPath);
+    };
+    const replace = (newPath) => {
+        window.history.replaceState({}, '', newPath);
+        setPath(newPath);
+    };
+    const back = () => {
+        window.history.back();
+    };
+    const value = { push, replace, back, path };
+    return (_jsx(RouterContext.Provider, { value: value, children: children }));
+}
+export function Link({ href, children, className }) {
+    const { push } = useRouter();
+    const handleClick = (e) => {
+        // Allow default behavior for modifier keys (new tab)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+            return;
+        e.preventDefault();
+        push(href);
+    };
+    return (_jsx("a", { href: href, onClick: handleClick, className: className, children: children }));
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "vista-core-js",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "vite": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./client": "./src/client.tsx",
+    "./entry-client": "./src/entry-client.tsx",
+    "./entry-server": "./src/entry-server.tsx",
+    "./client/link": "./src/client/link.tsx",
+    "./font/google": {
+      "types": "./src/font/google/index.d.ts",
+      "import": "./dist/font/google/index.js",
+      "default": "./dist/font/google/index.js"
+    },
+    "./plugin": "./dist/plugin.js"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  },
+  "dependencies": {
+    "@types/three": "^0.181.0",
+    "postprocessing": "^6.38.0",
+    "three": "^0.181.2"
+  }
+}

package/src/ErrorOverlay.tsx

@@ -0,0 +1,194 @@
+
+import React, { useState, useEffect } from 'react';
+
+interface ErrorOverlayProps {
+    error: any;
+    onClose?: () => void;
+}
+
+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: React.FC<ErrorOverlayProps> = ({ 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 (
+        <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",
+            }}
+        >
+            <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',
+                }}
+            >
+                {/* Title Bar */}
+                <div
+                    style={{
+                        height: '35px',
+                        backgroundColor: VSCodeColors.titleBar,
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: '0 15px',
+                        borderBottom: '1px solid #333',
+                    }}
+                >
+                    <div style={{ display: 'flex', gap: '8px', marginRight: '20px' }}>
+                        <div onClick={onClose} style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: '#ff5f56', cursor: 'pointer' }}></div>
+                        <div style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: '#ffbd2e' }}></div>
+                        <div style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: '#27c93f' }}></div>
+                    </div>
+                    <div style={{ color: '#ccc', fontSize: '13px', flex: 1, textAlign: 'center', opacity: 0.8 }}>
+                        {file.split('/').pop()} {loc ? `— ${loc}` : ''}
+                    </div>
+                </div>
+
+                <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+                    {/* Activity Bar (Left Strip) */}
+                    <div style={{ width: '50px', backgroundColor: VSCodeColors.activityBar, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '15px' }}>
+                        <div style={{ marginBottom: '20px', opacity: 0.6, cursor: 'pointer' }} title="Explorer">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" strokeWidth="1.5"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
+                        </div>
+                        <div style={{ marginBottom: '20px', opacity: 0.6, cursor: 'pointer' }} title="Search">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" strokeWidth="1.5"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                        </div>
+                        <div style={{ marginBottom: '20px', opacity: 1, borderLeft: '2px solid white', paddingLeft: '11px', cursor: 'pointer' }} title="Run and Debug">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" strokeWidth="1.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+                        </div>
+                    </div>
+
+                    {/* Sidebar (File Explorer Simulation) */}
+                    <div className="vista-sidebar" style={{ width: '200px', backgroundColor: VSCodeColors.sidebar, fontSize: '13px', color: VSCodeColors.text, padding: '10px', borderRight: '1px solid #333' }}>
+                        <div style={{ fontSize: '11px', fontWeight: 'bold', marginBottom: '10px', opacity: 0.7, textTransform: 'uppercase' }}>Open Editors</div>
+                        <div style={{ padding: '5px 10px', backgroundColor: '#37373d', borderRadius: '3px', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+                            <span style={{ marginRight: '8px', display: 'flex', alignItems: 'center' }}>
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#61dafb" strokeWidth="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+                            </span>
+                            {file.split('/').pop()}
+                        </div>
+                    </div>
+
+                    {/* Main Content Area */}
+                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', backgroundColor: VSCodeColors.editorBg }}>
+
+                        {/* Editor Tabs */}
+                        <div style={{ height: '35px', backgroundColor: VSCodeColors.bg, display: 'flex', alignItems: 'center', borderBottom: '1px solid #333' }}>
+                            <div style={{ padding: '0 15px', height: '100%', backgroundColor: '#1e1e1e', borderTop: '2px solid #e11c1c', color: '#fff', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#61dafb" strokeWidth="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+                                {file.split('/').pop()}
+                                <span style={{ marginLeft: '10px', cursor: 'pointer', opacity: 0.7 }}>
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                                </span>
+                            </div>
+                        </div>
+
+                        {/* Editor Pane (Code Frame or Stack Fallback) */}
+                        <div style={{ flex: 2, padding: '20px', overflow: 'auto', fontFamily: "'Fira Code', 'Consolas', monospace", fontSize: '14px', lineHeight: '1.5', color: '#d4d4d4' }}>
+                            {/* Explicitly show message if it's a build error to ensure context is seen */}
+                            {isBuildError && (
+                                <div style={{ color: '#f14c4c', marginBottom: '15px', fontWeight: 'bold' }}>
+                                    {message}
+                                </div>
+                            )}
+
+                            {frame ? (
+                                <pre style={{ margin: 0, whiteSpace: 'pre-wrap', fontFamily: 'inherit' }}>{frame}</pre>
+                            ) : (
+                                <div style={{ color: '#d4d4d4' }}>
+                                    <div style={{ color: '#666', marginBottom: '20px' }}>// Source code not available for runtime execution error.</div>
+                                    <pre style={{ margin: 0, color: '#9cdcfe', whiteSpace: 'pre-wrap' }}>{stack}</pre>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Terminal Pane */}
+                        <div style={{ flex: 1, backgroundColor: '#1e1e1e', borderTop: '1px solid #444', display: 'flex', flexDirection: 'column' }}>
+                            <div style={{ display: 'flex', padding: '5px 15px', borderBottom: '1px solid #333', fontSize: '11px', color: '#ccc', gap: '15px' }}>
+                                <span style={{ textDecoration: 'underline', cursor: 'pointer' }}>PROBLEMS</span>
+                                <span style={{ opacity: 0.5, cursor: 'pointer' }}>OUTPUT</span>
+                                <span style={{ opacity: 0.5, cursor: 'pointer' }}>DEBUG CONSOLE</span>
+                                <span style={{ opacity: 0.5, cursor: 'pointer' }}>TERMINAL</span>
+                            </div>
+                            <div style={{ padding: '15px', overflow: 'auto', fontFamily: 'monospace', fontSize: '13px', color: '#f14c4c' }}>
+                                <div style={{ color: '#d4d4d4', marginBottom: '5px' }}>$ npm run dev</div>
+                                <div>&gt; Error: {message}</div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                {/* Status Bar */}
+                <div style={{ height: '22px', backgroundColor: '#e11c1c', display: 'flex', alignItems: 'center', padding: '0 10px', fontSize: '12px', color: 'white', justifyContent: 'space-between' }}>
+                    <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
+                        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+                            1 Error
+                        </span>
+                        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                            0 Warnings
+                        </span>
+                    </div>
+                    <div>
+                        Ln {error.loc?.line || 0}, Col {error.loc?.column || 0}
+                    </div>
+                </div>
+
+            </div>
+            <style>{`
+        .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); }
+        }
+      `}</style>
+        </div>
+    );
+};