hightjs 0.1.1

package/dist/client/ErrorBoundary.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+class ErrorBoundary extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        // Atualiza o state para que a próxima renderização mostre a UI de erro
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('ErrorBoundary capturou um erro:', error, errorInfo);
+        this.setState({
+            error,
+            errorInfo
+        });
+    }
+    render() {
+        if (this.state.hasError) {
+            return (0, jsx_runtime_1.jsx)(ErrorDisplay, { error: this.state.error, errorInfo: this.state.errorInfo });
+        }
+        return this.props.children;
+    }
+}
+exports.ErrorBoundary = ErrorBoundary;
+function ErrorDisplay({ error, errorInfo }) {
+    const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            fontFamily: 'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            height: '100vh',
+            padding: '20px',
+            backgroundColor: isDark ? '#0a0a0a' : '#ffffff',
+            color: isDark ? '#fafafa' : '#171717',
+            overflow: 'auto'
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                maxWidth: '800px',
+                margin: '0 auto',
+                paddingTop: '40px'
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        borderBottom: `1px solid ${isDark ? '#262626' : '#e5e5e5'}`,
+                        paddingBottom: '20px',
+                        marginBottom: '30px'
+                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                                fontSize: '24px',
+                                fontWeight: '600',
+                                margin: '0 0 10px 0',
+                                color: '#dc2626'
+                            }, children: "\u274C Erro na Aplica\u00E7\u00E3o" }), (0, jsx_runtime_1.jsx)("p", { style: {
+                                fontSize: '16px',
+                                margin: '0',
+                                color: isDark ? '#a3a3a3' : '#737373'
+                            }, children: "Ocorreu um erro inesperado na aplica\u00E7\u00E3o. Veja os detalhes abaixo:" })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        backgroundColor: isDark ? '#1c1917' : '#fef2f2',
+                        border: `1px solid ${isDark ? '#451a03' : '#fecaca'}`,
+                        borderRadius: '8px',
+                        padding: '20px',
+                        marginBottom: '20px'
+                    }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                fontSize: '18px',
+                                fontWeight: '600',
+                                margin: '0 0 10px 0',
+                                color: '#dc2626'
+                            }, children: "Mensagem do Erro:" }), (0, jsx_runtime_1.jsx)("p", { style: {
+                                fontSize: '14px',
+                                fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+                                backgroundColor: isDark ? '#0c0a09' : '#ffffff',
+                                padding: '15px',
+                                borderRadius: '6px',
+                                border: `1px solid ${isDark ? '#292524' : '#e5e5e5'}`,
+                                margin: '0',
+                                whiteSpace: 'pre-wrap',
+                                overflow: 'auto'
+                            }, children: error?.message || 'Erro desconhecido' })] }), error?.stack && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        backgroundColor: isDark ? '#0c0a09' : '#fafafa',
+                        border: `1px solid ${isDark ? '#292524' : '#e5e5e5'}`,
+                        borderRadius: '8px',
+                        padding: '20px',
+                        marginBottom: '20px'
+                    }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                fontSize: '18px',
+                                fontWeight: '600',
+                                margin: '0 0 10px 0',
+                                color: isDark ? '#fafafa' : '#171717'
+                            }, children: "Stack Trace:" }), (0, jsx_runtime_1.jsx)("pre", { style: {
+                                fontSize: '12px',
+                                fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+                                backgroundColor: isDark ? '#1c1917' : '#ffffff',
+                                padding: '15px',
+                                borderRadius: '6px',
+                                border: `1px solid ${isDark ? '#44403c' : '#d4d4d4'}`,
+                                margin: '0',
+                                overflow: 'auto',
+                                whiteSpace: 'pre-wrap',
+                                color: isDark ? '#e5e5e5' : '#525252'
+                            }, children: error.stack })] })), errorInfo?.componentStack && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        backgroundColor: isDark ? '#0c0a09' : '#fafafa',
+                        border: `1px solid ${isDark ? '#292524' : '#e5e5e5'}`,
+                        borderRadius: '8px',
+                        padding: '20px',
+                        marginBottom: '20px'
+                    }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                fontSize: '18px',
+                                fontWeight: '600',
+                                margin: '0 0 10px 0',
+                                color: isDark ? '#fafafa' : '#171717'
+                            }, children: "Component Stack:" }), (0, jsx_runtime_1.jsx)("pre", { style: {
+                                fontSize: '12px',
+                                fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+                                backgroundColor: isDark ? '#1c1917' : '#ffffff',
+                                padding: '15px',
+                                borderRadius: '6px',
+                                border: `1px solid ${isDark ? '#44403c' : '#d4d4d4'}`,
+                                margin: '0',
+                                overflow: 'auto',
+                                whiteSpace: 'pre-wrap',
+                                color: isDark ? '#e5e5e5' : '#525252'
+                            }, children: errorInfo.componentStack })] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        gap: '10px',
+                        marginTop: '30px'
+                    }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => window.location.reload(), style: {
+                                backgroundColor: '#2563eb',
+                                color: '#ffffff',
+                                border: 'none',
+                                padding: '12px 20px',
+                                borderRadius: '6px',
+                                fontSize: '14px',
+                                fontWeight: '500',
+                                cursor: 'pointer',
+                                transition: 'background-color 0.2s'
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.backgroundColor = '#1d4ed8';
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.backgroundColor = '#2563eb';
+                            }, children: "\uD83D\uDD04 Recarregar P\u00E1gina" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                navigator.clipboard?.writeText(`
+Erro: ${error?.message || 'Erro desconhecido'}
+
+Stack Trace:
+${error?.stack || 'N/A'}
+
+Component Stack:
+${errorInfo?.componentStack || 'N/A'}
+                            `.trim());
+                                alert('Detalhes do erro copiados para a área de transferência!');
+                            }, style: {
+                                backgroundColor: isDark ? '#374151' : '#f3f4f6',
+                                color: isDark ? '#fafafa' : '#171717',
+                                border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+                                padding: '12px 20px',
+                                borderRadius: '6px',
+                                fontSize: '14px',
+                                fontWeight: '500',
+                                cursor: 'pointer',
+                                transition: 'background-color 0.2s'
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.backgroundColor = isDark ? '#4b5563' : '#e5e7eb';
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.backgroundColor = isDark ? '#374151' : '#f3f4f6';
+                            }, children: "\uD83D\uDCCB Copiar Detalhes" })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        marginTop: '40px',
+                        padding: '20px',
+                        backgroundColor: isDark ? '#1e1b1a' : '#f8fafc',
+                        border: `1px solid ${isDark ? '#3c2e2a' : '#e2e8f0'}`,
+                        borderRadius: '8px'
+                    }, children: [(0, jsx_runtime_1.jsx)("h3", { style: {
+                                fontSize: '16px',
+                                fontWeight: '600',
+                                margin: '0 0 10px 0',
+                                color: isDark ? '#fbbf24' : '#d97706'
+                            }, children: "\uD83D\uDCA1 Para Desenvolvedores:" }), (0, jsx_runtime_1.jsxs)("ul", { style: {
+                                fontSize: '14px',
+                                margin: '0',
+                                paddingLeft: '20px',
+                                color: isDark ? '#d1d5db' : '#4b5563'
+                            }, children: [(0, jsx_runtime_1.jsx)("li", { children: "Verifique o console do navegador para mais detalhes" }), (0, jsx_runtime_1.jsx)("li", { children: "Verifique se todos os arquivos foram buildados corretamente" }), (0, jsx_runtime_1.jsx)("li", { children: "Se for erro 404 em main.js, verifique se o servidor est\u00E1 rodando" }), (0, jsx_runtime_1.jsx)("li", { children: "Use as ferramentas de desenvolvimento do navegador para debugar" })] })] })] }) }));
+}

package/dist/client/clientRouter.d.ts

@@ -0,0 +1,58 @@
+export interface RouterEvents {
+    beforeNavigate?: (url: string) => boolean | Promise<boolean>;
+    afterNavigate?: (url: string) => void;
+}
+declare class Router {
+    private events;
+    private listeners;
+    /**
+     * Navega para uma nova rota
+     */
+    push(url: string): Promise<void>;
+    /**
+     * Substitui a entrada atual do histórico
+     */
+    replace(url: string): Promise<void>;
+    /**
+     * Volta uma página no histórico
+     */
+    back(): void;
+    /**
+     * Avança uma página no histórico
+     */
+    forward(): void;
+    /**
+     * Recarrega a página atual (re-renderiza o componente)
+     */
+    refresh(): void;
+    /**
+     * Obtém a URL atual
+     */
+    get pathname(): string;
+    /**
+     * Obtém os query parameters atuais
+     */
+    get query(): URLSearchParams;
+    /**
+     * Obtém a URL completa atual
+     */
+    get url(): string;
+    /**
+     * Adiciona event listeners para eventos de roteamento
+     */
+    on(events: RouterEvents): void;
+    /**
+     * Remove event listeners
+     */
+    off(): void;
+    /**
+     * Adiciona um listener para mudanças de rota
+     */
+    subscribe(listener: () => void): () => void;
+    /**
+     * Dispara evento de navegação para todos os listeners
+     */
+    private triggerNavigation;
+}
+export declare const router: Router;
+export default router;

package/dist/client/clientRouter.js

@@ -0,0 +1,116 @@
+"use strict";
+// Sistema de roteamento do lado do cliente para hweb-sdk
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.router = void 0;
+class Router {
+    constructor() {
+        this.events = {};
+        this.listeners = new Set();
+    }
+    /**
+     * Navega para uma nova rota
+     */
+    async push(url) {
+        // Callback antes de navegar
+        if (this.events.beforeNavigate) {
+            const shouldProceed = await this.events.beforeNavigate(url);
+            if (shouldProceed === false)
+                return;
+        }
+        // Atualiza a URL na barra de endereço
+        window.history.pushState({ path: url }, '', url);
+        // Dispara evento para o roteador capturar de forma assíncrona
+        setTimeout(() => this.triggerNavigation(), 0);
+        // Callback após navegar
+        if (this.events.afterNavigate) {
+            this.events.afterNavigate(url);
+        }
+    }
+    /**
+     * Substitui a entrada atual do histórico
+     */
+    async replace(url) {
+        // Callback antes de navegar
+        if (this.events.beforeNavigate) {
+            const shouldProceed = await this.events.beforeNavigate(url);
+            if (shouldProceed === false)
+                return;
+        }
+        // Substitui a URL atual no histórico
+        window.history.replaceState({ path: url }, '', url);
+        // Dispara evento para o roteador capturar de forma assíncrona
+        setTimeout(() => this.triggerNavigation(), 0);
+        // Callback após navegar
+        if (this.events.afterNavigate) {
+            this.events.afterNavigate(url);
+        }
+    }
+    /**
+     * Volta uma página no histórico
+     */
+    back() {
+        window.history.back();
+    }
+    /**
+     * Avança uma página no histórico
+     */
+    forward() {
+        window.history.forward();
+    }
+    /**
+     * Recarrega a página atual (re-renderiza o componente)
+     */
+    refresh() {
+        setTimeout(() => this.triggerNavigation(), 0);
+    }
+    /**
+     * Obtém a URL atual
+     */
+    get pathname() {
+        return window.location.pathname;
+    }
+    /**
+     * Obtém os query parameters atuais
+     */
+    get query() {
+        return new URLSearchParams(window.location.search);
+    }
+    /**
+     * Obtém a URL completa atual
+     */
+    get url() {
+        return window.location.href;
+    }
+    /**
+     * Adiciona event listeners para eventos de roteamento
+     */
+    on(events) {
+        this.events = { ...this.events, ...events };
+    }
+    /**
+     * Remove event listeners
+     */
+    off() {
+        this.events = {};
+    }
+    /**
+     * Adiciona um listener para mudanças de rota
+     */
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    /**
+     * Dispara evento de navegação para todos os listeners
+     */
+    triggerNavigation() {
+        // Dispara o evento nativo para o roteador do hweb capturar
+        window.dispatchEvent(new PopStateEvent('popstate'));
+        // Notifica todos os listeners customizados
+        this.listeners.forEach(listener => listener());
+    }
+}
+// Instância singleton do router
+exports.router = new Router();
+// Para compatibilidade, também exporta como default
+exports.default = exports.router;

package/dist/client/entry.client.d.ts

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

package/dist/client/entry.client.js

@@ -0,0 +1,271 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const client_1 = require("react-dom/client");
+const clientRouter_1 = require("./clientRouter");
+function App({ componentMap, routes, initialComponentPath, initialParams, layoutComponent }) {
+    // Estado que guarda o componente a ser renderizado atualmente
+    const [CurrentPageComponent, setCurrentPageComponent] = (0, react_1.useState)(() => {
+        // Se for a rota especial __404__, não busca no componentMap
+        if (initialComponentPath === '__404__') {
+            return null;
+        }
+        return componentMap[initialComponentPath];
+    });
+    const [params, setParams] = (0, react_1.useState)(initialParams);
+    const findRouteForPath = (0, react_1.useCallback)((path) => {
+        for (const route of routes) {
+            const regexPattern = route.pattern.replace(/\[(\w+)\]/g, '(?<$1>[^/]+)');
+            const regex = new RegExp(`^${regexPattern}/?$`);
+            const match = path.match(regex);
+            if (match) {
+                return {
+                    componentPath: route.componentPath,
+                    params: match.groups || {}
+                };
+            }
+        }
+        return null;
+    }, [routes]);
+    const updateRoute = (0, react_1.useCallback)(() => {
+        const currentPath = clientRouter_1.router.pathname;
+        const match = findRouteForPath(currentPath);
+        if (match) {
+            setCurrentPageComponent(() => componentMap[match.componentPath]);
+            setParams(match.params);
+        }
+        else {
+            // Se não encontrou rota, define como null para mostrar 404
+            setCurrentPageComponent(null);
+            setParams({});
+        }
+    }, [clientRouter_1.router.pathname, findRouteForPath, componentMap]);
+    // Ouve os eventos de "voltar" e "avançar" do navegador
+    (0, react_1.useEffect)(() => {
+        const handlePopState = () => {
+            updateRoute();
+        };
+        window.addEventListener('popstate', handlePopState);
+        // Também se inscreve no router para mudanças de rota
+        const unsubscribe = clientRouter_1.router.subscribe(updateRoute);
+        return () => {
+            window.removeEventListener('popstate', handlePopState);
+            unsubscribe();
+        };
+    }, [updateRoute]);
+    // Se não há componente ou é a rota __404__, mostra página 404
+    if (!CurrentPageComponent || initialComponentPath === '__404__') {
+        // Usa o componente 404 personalizado se existir, senão usa o padrão do hweb
+        const NotFoundComponent = window.__HWEB_NOT_FOUND__;
+        if (NotFoundComponent) {
+            // Usa o notFound.tsx personalizado do usuário
+            const NotFoundContent = (0, jsx_runtime_1.jsx)(NotFoundComponent, {});
+            // Aplica o layout se existir
+            if (layoutComponent) {
+                return react_1.default.createElement(layoutComponent, { children: NotFoundContent });
+            }
+            return NotFoundContent;
+        }
+        else {
+            // Usa o 404 padrão do hweb que foi incluído no build
+            const DefaultNotFound = window.__HWEB_DEFAULT_NOT_FOUND__;
+            const NotFoundContent = (0, jsx_runtime_1.jsx)(DefaultNotFound, {});
+            // Aplica o layout se existir
+            if (layoutComponent) {
+                return react_1.default.createElement(layoutComponent, { children: NotFoundContent });
+            }
+            return NotFoundContent;
+        }
+    }
+    // Renderiza o componente atual (sem Context, usa o router diretamente)
+    const PageContent = (0, jsx_runtime_1.jsx)(CurrentPageComponent, { params: params });
+    // SEMPRE usa o layout - se não existir, cria um wrapper padrão
+    const content = layoutComponent
+        ? react_1.default.createElement(layoutComponent, { children: PageContent })
+        : (0, jsx_runtime_1.jsx)("div", { children: PageContent });
+    // Adiciona o indicador de dev se não for produção
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, process.env.NODE_ENV !== 'production' && (0, jsx_runtime_1.jsx)(DevIndicator, {})] }));
+}
+// --- Constantes de Configuração ---
+const DEV_INDICATOR_SIZE = 48;
+const DEV_INDICATOR_CORNERS = [
+    { top: 16, left: 16 }, // 0: topo-esquerda
+    { top: 16, right: 16 }, // 1: topo-direita
+    { bottom: 16, left: 16 }, // 2: baixo-esquerda
+    { bottom: 16, right: 16 }, // 3: baixo-direita
+];
+function DevIndicator() {
+    const [corner, setCorner] = (0, react_1.useState)(3); // Canto atual (0-3)
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false); // Estado de arrastar
+    // Posição visual do indicador durante o arraste
+    const [position, setPosition] = (0, react_1.useState)({ top: 0, left: 0 });
+    const indicatorRef = (0, react_1.useRef)(null);
+    const dragStartRef = (0, react_1.useRef)(null);
+    // --- Estilos Dinâmicos ---
+    const getIndicatorStyle = () => {
+        const baseStyle = {
+            position: 'fixed',
+            zIndex: 9999,
+            width: DEV_INDICATOR_SIZE,
+            height: DEV_INDICATOR_SIZE,
+            borderRadius: '50%',
+            background: 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo
+            color: 'white',
+            fontWeight: 'bold',
+            fontSize: 28,
+            boxShadow: '0 4px 15px rgba(0,0,0,0.2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: isDragging ? 'grabbing' : 'grab',
+            userSelect: 'none',
+            transition: isDragging ? 'none' : 'all 0.3s ease-out', // Animação suave ao soltar
+        };
+        if (isDragging) {
+            return {
+                ...baseStyle,
+                top: position.top,
+                left: position.left,
+            };
+        }
+        return { ...baseStyle, ...DEV_INDICATOR_CORNERS[corner] };
+    };
+    const getMenuPositionStyle = () => {
+        // Posiciona o menu dependendo do canto
+        switch (corner) {
+            case 0: return { top: '110%', left: '0' }; // Top-Left
+            case 1: return { top: '110%', right: '0' }; // Top-Right
+            case 2: return { bottom: '110%', left: '0' }; // Bottom-Left
+            case 3: return { bottom: '110%', right: '0' }; // Bottom-Right
+            default: return {};
+        }
+    };
+    // --- Lógica de Eventos ---
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        dragStartRef.current = { x: e.clientX, y: e.clientY, moved: false };
+        if (indicatorRef.current) {
+            const rect = indicatorRef.current.getBoundingClientRect();
+            setPosition({ top: rect.top, left: rect.left });
+        }
+        setIsDragging(true);
+    };
+    const handleMouseMove = (0, react_1.useCallback)((e) => {
+        if (!isDragging || !dragStartRef.current)
+            return;
+        const deltaX = e.clientX - dragStartRef.current.x;
+        const deltaY = e.clientY - dragStartRef.current.y;
+        // Diferencia clique de arrastar (threshold de 5px)
+        if (!dragStartRef.current.moved && Math.hypot(deltaX, deltaY) > 5) {
+            dragStartRef.current.moved = true;
+        }
+        if (dragStartRef.current.moved) {
+            setPosition(prevPos => ({
+                top: prevPos.top + deltaY,
+                left: prevPos.left + deltaX,
+            }));
+            // Atualiza a referência para o próximo movimento
+            dragStartRef.current.x = e.clientX;
+            dragStartRef.current.y = e.clientY;
+        }
+    }, [isDragging]);
+    const handleMouseUp = (0, react_1.useCallback)((e) => {
+        if (!isDragging)
+            return;
+        setIsDragging(false);
+        // Se moveu, calcula o canto mais próximo
+        if (dragStartRef.current?.moved) {
+            const { clientX, clientY } = e;
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            const dists = [
+                Math.hypot(clientX, clientY), // TL
+                Math.hypot(w - clientX, clientY), // TR
+                Math.hypot(clientX, h - clientY), // BL
+                Math.hypot(w - clientX, h - clientY), // BR
+            ];
+            setCorner(dists.indexOf(Math.min(...dists)));
+        }
+        dragStartRef.current = null;
+    }, [isDragging]);
+    // Adiciona e remove listeners globais
+    (0, react_1.useEffect)(() => {
+        if (isDragging) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: indicatorRef, style: getIndicatorStyle(), onMouseDown: handleMouseDown, title: "Modo Dev HightJS", children: "H" }));
+}
+// --- Inicialização do Cliente (CSR - Client-Side Rendering) ---
+function initializeClient() {
+    const initialData = window.__HWEB_INITIAL_DATA__;
+    if (!initialData) {
+        console.error('[hweb] Dados iniciais não encontrados na página.');
+        return;
+    }
+    // Cria o mapa de componentes dinamicamente a partir dos módulos carregados
+    const componentMap = {};
+    // Registra todos os componentes que foram importados
+    if (window.__HWEB_COMPONENTS__) {
+        Object.assign(componentMap, window.__HWEB_COMPONENTS__);
+    }
+    const container = document.getElementById('root');
+    if (!container) {
+        console.error('[hweb] Container #root não encontrado.');
+        return;
+    }
+    try {
+        // Usar createRoot para render inicial (CSR)
+        const root = (0, client_1.createRoot)(container);
+        root.render((0, jsx_runtime_1.jsx)(App, { componentMap: componentMap, routes: initialData.routes, initialComponentPath: initialData.initialComponentPath, initialParams: initialData.initialParams, layoutComponent: window.__HWEB_LAYOUT__ }));
+    }
+    catch (error) {
+        console.error('[hweb] Erro ao renderizar aplicação:', error);
+    }
+}
+// Executa quando o DOM estiver pronto
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeClient);
+}
+else {
+    initializeClient();
+}

package/dist/client/routerContext.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+interface RouterContextType {
+    pathname: string;
+    query: URLSearchParams;
+    push: (url: string) => Promise<void>;
+    replace: (url: string) => Promise<void>;
+    back: () => void;
+    forward: () => void;
+    refresh: () => void;
+}
+export declare function RouterProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook para acessar o router dentro de componentes React
+ */
+export declare function useRouter(): RouterContextType;
+/**
+ * Hook para acessar apenas o pathname atual
+ */
+export declare function usePathname(): string;
+/**
+ * Hook para acessar apenas os query parameters
+ */
+export declare function useSearchParams(): URLSearchParams;
+export {};