reactionview 0.3.0 → 0.4.0

data/app/assets/javascripts/reactionview-dev-tools.esm.js

@@ -1,3 +1,587 @@
+const DEFAULT_RECONNECT_INTERVAL = 1000;
+const DEFAULT_MAX_RECONNECT_ATTEMPTS = 10;
+class Connection {
+    constructor(options) {
+        this.socket = null;
+        this.reconnectAttempts = 0;
+        this.reconnectTimer = null;
+        this.givenUp = false;
+        this.options = {
+            reconnectInterval: DEFAULT_RECONNECT_INTERVAL,
+            maxReconnectAttempts: DEFAULT_MAX_RECONNECT_ATTEMPTS,
+            ...options,
+        };
+    }
+    get reconnectInterval() {
+        return this.options.reconnectInterval ?? DEFAULT_RECONNECT_INTERVAL;
+    }
+    get maxReconnectAttempts() {
+        return this.options.maxReconnectAttempts ?? DEFAULT_MAX_RECONNECT_ATTEMPTS;
+    }
+    connect() {
+        if (this.socket?.readyState === WebSocket.OPEN)
+            return;
+        this.givenUp = false;
+        this.reconnectAttempts = 0;
+        this.attemptConnect();
+    }
+    disconnect() {
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        this.givenUp = false;
+        this.reconnectAttempts = this.maxReconnectAttempts;
+        if (this.socket) {
+            this.socket.close();
+            this.socket = null;
+        }
+    }
+    retry() {
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        if (this.socket) {
+            this.socket.onclose = null;
+            this.socket.close();
+            this.socket = null;
+        }
+        this.givenUp = false;
+        this.reconnectAttempts = 0;
+        this.attemptConnect();
+    }
+    get hasGivenUp() {
+        return this.givenUp;
+    }
+    attemptConnect() {
+        try {
+            this.socket = new WebSocket(this.options.url);
+            this.socket.onopen = () => {
+                this.reconnectAttempts = 0;
+                this.options.onConnect?.();
+            };
+            this.socket.onmessage = (event) => {
+                try {
+                    const message = JSON.parse(event.data);
+                    this.options.onMessage?.(message);
+                }
+                catch (error) {
+                    console.warn("[herb-client] failed to parse message:", error);
+                }
+            };
+            this.socket.onclose = () => {
+                console.debug("[herb-client] disconnected from dev server");
+                this.options.onDisconnect?.();
+                this.scheduleReconnect();
+            };
+            this.socket.onerror = () => {
+                try {
+                    this.socket?.close();
+                }
+                catch {
+                    this.scheduleReconnect();
+                }
+            };
+        }
+        catch {
+            this.scheduleReconnect();
+        }
+    }
+    scheduleReconnect() {
+        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+            console.debug("[herb-client] gave up reconnecting after %d attempts", this.reconnectAttempts);
+            this.givenUp = true;
+            this.options.onGivenUp?.();
+            return;
+        }
+        this.reconnectAttempts++;
+        const delay = Math.min(this.reconnectInterval * Math.pow(1.5, this.reconnectAttempts - 1), 10000);
+        this.options.onReconnecting?.(this.reconnectAttempts, this.maxReconnectAttempts, delay);
+        this.reconnectTimer = setTimeout(() => {
+            this.attemptConnect();
+        }, delay);
+    }
+}
+
+const colors = {
+    green: "#22c55e",
+    greenDark: "#059669",
+    greenLight: "#ecfdf5",
+    greenBorder: "#10b981",
+    greenGlow: "0 0 4px rgba(34, 197, 94, 0.5)",
+    red: "#ef4444",
+    redDark: "#991b1b",
+    redLight: "#fef2f2",
+    amber: "#f59e0b",
+    amberDark: "#92400e",
+    amberDarker: "#d97706",
+    amberLight: "#fffbeb",
+    gray: "#6b7280",
+    grayLighter: "#a16207",
+};
+
+const TOAST_DURATION = 3000;
+const TOAST_FADE_DURATION = 300;
+const TOAST_ID = "herbDevServerToast";
+const TOAST_STYLES = {
+    connected: { background: colors.greenLight, border: colors.greenBorder, text: "#065f46", icon: "\u{1F7E2}" },
+    disconnected: { background: colors.redLight, border: colors.red, text: colors.redDark, icon: "\u{1F534}" },
+    warning: { background: colors.amberLight, border: colors.amber, text: colors.amberDark, icon: "\u{1F7E1}" },
+};
+class Toast {
+    static show(message, type) {
+        document.getElementById(TOAST_ID)?.remove();
+        const style = TOAST_STYLES[type];
+        const toast = document.createElement("div");
+        toast.id = TOAST_ID;
+        toast.style.cssText = `position:fixed;top:36px;right:10px;z-index:999997;background:${style.background};border:1px solid ${style.border};border-radius:8px;padding:8px 14px;font-family:system-ui,sans-serif;font-size:12px;color:${style.text};box-shadow:0 4px 12px rgba(0,0,0,0.1);display:flex;align-items:center;gap:8px;transition:opacity 0.3s ease;`;
+        const icon = document.createElement("span");
+        icon.textContent = style.icon;
+        const text = document.createElement("span");
+        text.textContent = message;
+        toast.appendChild(icon);
+        toast.appendChild(text);
+        document.body.appendChild(toast);
+        setTimeout(() => {
+            toast.style.opacity = "0";
+            setTimeout(() => toast.remove(), TOAST_FADE_DURATION);
+        }, TOAST_DURATION);
+    }
+}
+
+class ConnectionDot {
+    constructor(client) {
+        this.reconnectCountdown = null;
+        this.client = client;
+    }
+    apply() {
+        if (this.reconnectCountdown) {
+            clearInterval(this.reconnectCountdown);
+            this.reconnectCountdown = null;
+        }
+        const dot = document.getElementById("herbConnectionDot");
+        if (!dot)
+            return;
+        const panelDot = document.getElementById("herbDevServerDot");
+        const panelStatus = document.getElementById("herbDevServerStatus");
+        const panelRetry = document.getElementById("herbDevServerRetry");
+        const retryHandler = (e) => { e.stopPropagation(); this.client.retry(); };
+        const state = this.client.getState();
+        switch (state) {
+            case "connected":
+                this.setDotStyle(dot, colors.green, true, true);
+                dot.style.cursor = "default";
+                dot.title = "Connected to herb dev server";
+                dot.onclick = null;
+                this.updatePanel(panelDot, panelStatus, panelRetry, {
+                    dotColor: colors.green,
+                    statusText: `Dev Server connected (port ${this.client.getPort()})`,
+                    statusColor: colors.greenDark,
+                    retryVisible: false,
+                });
+                break;
+            case "disconnected":
+                this.setDotStyle(dot, colors.red, false, false);
+                dot.style.cursor = "default";
+                dot.title = "Disconnected from herb dev server";
+                dot.onclick = null;
+                this.updatePanel(panelDot, panelStatus, panelRetry, {
+                    dotColor: colors.red,
+                    statusText: "Dev Server disconnected",
+                    statusColor: colors.gray,
+                    retryVisible: true,
+                    retryHandler,
+                });
+                break;
+            case "given-up":
+                this.setDotStyle(dot, colors.amber, false, false);
+                dot.style.cursor = "pointer";
+                dot.title = "Connection to herb dev server failed — click to retry";
+                dot.onclick = retryHandler;
+                this.updatePanel(panelDot, panelStatus, panelRetry, {
+                    dotColor: colors.amber,
+                    statusText: "Dev Server not available",
+                    statusColor: colors.amberDarker,
+                    retryVisible: true,
+                    retryHandler,
+                });
+                break;
+        }
+    }
+    updateReconnectCountdown(attempt, maxAttempts, delay) {
+        const panelStatus = document.getElementById("herbDevServerStatus");
+        if (!panelStatus)
+            return;
+        if (this.reconnectCountdown) {
+            clearInterval(this.reconnectCountdown);
+            this.reconnectCountdown = null;
+        }
+        let remaining = Math.ceil(delay / 1000);
+        panelStatus.textContent = `Retry ${attempt}/${maxAttempts} in ${remaining}s`;
+        panelStatus.style.color = colors.gray;
+        this.reconnectCountdown = setInterval(() => {
+            remaining--;
+            if (remaining <= 0) {
+                if (this.reconnectCountdown) {
+                    clearInterval(this.reconnectCountdown);
+                    this.reconnectCountdown = null;
+                }
+                panelStatus.textContent = `Retry ${attempt}/${maxAttempts} connecting...`;
+                return;
+            }
+            panelStatus.textContent = `Retry ${attempt}/${maxAttempts} in ${remaining}s`;
+        }, 1000);
+    }
+    updatePanel(panelDot, panelStatus, panelRetry, options) {
+        if (panelDot)
+            this.setDotStyle(panelDot, options.dotColor, false, false);
+        if (panelStatus) {
+            panelStatus.textContent = options.statusText;
+            panelStatus.style.color = options.statusColor;
+        }
+        if (panelRetry) {
+            panelRetry.style.display = options.retryVisible ? "block" : "none";
+            if (options.retryHandler) {
+                panelRetry.onclick = options.retryHandler;
+            }
+        }
+    }
+    setDotStyle(element, background, glow, pulse) {
+        element.style.background = background;
+        element.style.boxShadow = glow ? colors.greenGlow : "none";
+        element.style.animation = pulse ? "herb-dot-pulse 2s ease-in-out infinite" : "none";
+    }
+}
+
+const ALERT_ID = "herbProjectMismatchAlert";
+class MismatchAlert {
+    static show(serverProject, clientProject) {
+        if (document.getElementById(ALERT_ID))
+            return;
+        const serverName = serverProject.split("/").pop() ?? serverProject;
+        const clientName = clientProject.split("/").pop() ?? clientProject;
+        const alert = document.createElement("div");
+        alert.id = ALERT_ID;
+        alert.style.cssText = `position:fixed;top:32px;right:10px;z-index:999998;background:${colors.amberLight};border:1px solid ${colors.amber};border-radius:8px;padding:12px 16px;max-width:320px;font-family:system-ui,sans-serif;font-size:13px;color:${colors.amberDark};box-shadow:0 4px 12px rgba(0,0,0,0.1);display:flex;gap:10px;align-items:flex-start;`;
+        const iconElement = document.createElement("span");
+        iconElement.style.cssText = "font-size:18px;line-height:1;";
+        iconElement.textContent = "\u26A0\uFE0F";
+        const content = document.createElement("div");
+        content.style.flex = "1";
+        const title = document.createElement("div");
+        title.style.cssText = "font-weight:600;margin-bottom:4px;";
+        title.textContent = "Herb Dev Server mismatch";
+        const description = document.createElement("div");
+        description.style.cssText = `font-size:12px;color:${colors.grayLighter};`;
+        description.textContent = `The dev server is watching ${serverName} but this page is from ${clientName}. Messages will be ignored.`;
+        content.appendChild(title);
+        content.appendChild(description);
+        const dismiss = document.createElement("button");
+        dismiss.style.cssText = `background:none;border:none;cursor:pointer;font-size:16px;color:${colors.amberDark};padding:0;line-height:1;`;
+        dismiss.textContent = "\u2715";
+        dismiss.addEventListener("click", () => alert.remove());
+        alert.appendChild(iconElement);
+        alert.appendChild(content);
+        alert.appendChild(dismiss);
+        document.body.appendChild(alert);
+        const panelStatus = document.getElementById("herbDevServerStatus");
+        const panelDot = document.getElementById("herbDevServerDot");
+        if (panelStatus) {
+            panelStatus.textContent = `Wrong project (${serverName})`;
+            panelStatus.style.color = colors.amberDarker;
+        }
+        if (panelDot) {
+            panelDot.style.background = colors.amber;
+        }
+    }
+}
+
+function applyPatch(message) {
+    const selector = `[data-herb-debug-file-relative-path="${message.file}"]`;
+    const roots = document.querySelectorAll(selector);
+    if (roots.length === 0) {
+        console.debug("[herb-client] no roots found for selector:", selector);
+        return false;
+    }
+    let applied = false;
+    for (const operation of message.operations) {
+        let operationApplied = false;
+        for (let i = 0; i < roots.length; i++) {
+            if (applyOperation(roots[i], operation)) {
+                operationApplied = true;
+            }
+            else {
+                console.debug(`[herb-client] operation not applied to root ${i}:`, roots[i]);
+            }
+        }
+        if (operationApplied) {
+            applied = true;
+        }
+        else {
+            console.debug("[herb-client] operation not applied:", operation);
+        }
+    }
+    return applied;
+}
+function applyOperation(root, operation) {
+    switch (operation.type) {
+        case "text_changed":
+            return applyTextChange(root, operation);
+        case "attribute_value_changed":
+            return applyAttributeChange(root, operation);
+        case "attribute_added":
+            return applyAttributeAdd(root, operation);
+        case "attribute_removed":
+            return applyAttributeRemove(root, operation);
+        default:
+            console.debug(`[herb-client] unhandled operation type: ${operation.type}`);
+            return false;
+    }
+}
+function parseAttribute(value) {
+    const match = value.match(/^([^=]+)="(.*)"$/);
+    if (!match)
+        return null;
+    return { name: match[1], value: match[2] };
+}
+function findTarget(root, operation) {
+    if (!operation.old_value)
+        return null;
+    const attribute = parseAttribute(operation.old_value);
+    if (!attribute)
+        return null;
+    if (root.getAttribute(attribute.name) === attribute.value)
+        return root;
+    const target = root.querySelector(`[${attribute.name}="${CSS.escape(attribute.value)}"]`);
+    return target;
+}
+function findTextTarget(root, operation) {
+    if (operation.old_value === null)
+        return null;
+    const trimmedOld = operation.old_value.trim();
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let node;
+    while ((node = walker.nextNode())) {
+        if (node.textContent?.trim() === trimmedOld) {
+            return node;
+        }
+    }
+    return null;
+}
+function applyTextChange(root, operation) {
+    if (operation.new_value === null)
+        return false;
+    const textNode = findTextTarget(root, operation);
+    if (textNode) {
+        textNode.textContent = operation.new_value;
+        return true;
+    }
+    return false;
+}
+function applyAttributeChange(root, operation) {
+    if (operation.old_value === null || operation.new_value === null)
+        return false;
+    const node = findTarget(root, operation);
+    if (!node)
+        return false;
+    const newAttr = parseAttribute(operation.new_value);
+    if (!newAttr)
+        return false;
+    node.setAttribute(newAttr.name, newAttr.value);
+    return true;
+}
+function applyAttributeAdd(root, operation) {
+    if (operation.new_value === null)
+        return false;
+    const attribute = parseAttribute(operation.new_value);
+    if (!attribute)
+        return false;
+    const node = findTarget(root, operation) ?? root;
+    node.setAttribute(attribute.name, attribute.value);
+    return true;
+}
+function applyAttributeRemove(root, operation) {
+    if (operation.old_value === null)
+        return false;
+    const node = findTarget(root, operation);
+    if (!node)
+        return false;
+    const match = operation.old_value.match(/^([^=]+)(?:=".*")?$/);
+    if (!match)
+        return false;
+    node.removeAttribute(match[1]);
+    return true;
+}
+
+const DEFAULT_PORT = 8592;
+class HerbClient {
+    constructor(options = {}) {
+        this.state = "disconnected";
+        this.hasConnectedBefore = false;
+        this.projectMatch = null;
+        this.options = options;
+        const port = options.port ?? this.detectPort() ?? DEFAULT_PORT;
+        const host = options.host ?? "localhost";
+        this.port = port;
+        this.connectionDot = new ConnectionDot(this);
+        this.connection = new Connection({
+            url: `ws://${host}:${port}`,
+            onMessage: (message) => this.handleMessage(message),
+            onConnect: () => this.onConnect(),
+            onDisconnect: () => this.onDisconnect(),
+            onReconnecting: (attempt, maxAttempts, delay) => this.onReconnecting(attempt, maxAttempts, delay),
+            onGivenUp: () => this.onGivenUp(),
+        });
+    }
+    connect() {
+        this.connection.connect();
+    }
+    disconnect() {
+        this.connection.disconnect();
+    }
+    retry() {
+        this.updateState("disconnected");
+        this.connection.retry();
+    }
+    getState() {
+        return this.state;
+    }
+    getPort() {
+        return this.port;
+    }
+    applyConnectionDot() {
+        this.connectionDot.apply();
+    }
+    onConnect() {
+        const wasDisconnected = this.state === "disconnected" || this.state === "given-up";
+        if (this.hasConnectedBefore && wasDisconnected) {
+            Toast.show("Herb Dev Server reconnected", "connected");
+        }
+        this.hasConnectedBefore = true;
+        this.updateState("connected");
+        this.options.onConnect?.();
+    }
+    onDisconnect() {
+        if (this.hasConnectedBefore && this.state === "connected") {
+            Toast.show("Herb Dev Server disconnected", "disconnected");
+        }
+        this.updateState("disconnected");
+        this.options.onDisconnect?.();
+    }
+    onReconnecting(attempt, maxAttempts, delay) {
+        console.debug(`[herb-client] reconnecting (attempt ${attempt}/${maxAttempts}, next try in ${(delay / 1000).toFixed(1)}s)...`);
+        this.connectionDot.updateReconnectCountdown(attempt, maxAttempts, delay);
+    }
+    onGivenUp() {
+        this.updateState("given-up");
+        Toast.show("Herb Dev Server not available — click the dot to retry", "warning");
+    }
+    handleMessage(message) {
+        if (message.type !== "welcome" && this.projectMatch === false)
+            return;
+        switch (message.type) {
+            case "welcome":
+                this.handleWelcome(message);
+                break;
+            case "patch":
+                this.handlePatch(message);
+                break;
+            case "reload":
+                this.handleReload(message);
+                break;
+            case "error":
+                this.handleError(message);
+                break;
+            case "fixed":
+                this.handleFixed(message);
+                break;
+        }
+    }
+    handleWelcome(message) {
+        const clientProject = document.querySelector('meta[name="herb-project-path"]')?.getAttribute("content");
+        if (clientProject && message.project && clientProject !== message.project) {
+            this.projectMatch = false;
+            console.warn(`[herb-client] project mismatch — server: ${message.project}, client: ${clientProject}. Ignoring messages.`);
+            this.updateState("disconnected");
+            MismatchAlert.show(message.project, clientProject);
+        }
+        else {
+            this.projectMatch = true;
+        }
+    }
+    handlePatch(message) {
+        this.options.onPatch?.(message);
+        const applied = applyPatch(message);
+        if (!applied) {
+            window.location.reload();
+        }
+    }
+    handleReload(message) {
+        this.options.onReload?.(message);
+        window.location.reload();
+    }
+    handleError(message) {
+        this.options.onError?.(message);
+        const overlay = this.getErrorOverlay();
+        if (overlay) {
+            const errors = message.errors.map((error) => ({
+                severity: "error",
+                message: error.message,
+                name: error.name,
+                location: { line: error.line, column: error.column },
+            }));
+            overlay.showErrors(errors, message.file);
+        }
+    }
+    handleFixed(message) {
+        this.options.onFixed?.(message);
+        this.getErrorOverlay()?.clearErrors();
+    }
+    updateState(state) {
+        this.state = state;
+        this.connectionDot.apply();
+    }
+    getErrorOverlay() {
+        const devTools = window.HerbDevTools;
+        return devTools?._errorOverlay ?? devTools?._overlay?.errorOverlay ?? null;
+    }
+    detectPort() {
+        const meta = document.querySelector('meta[name="herb-dev-server-port"]');
+        if (meta) {
+            const port = parseInt(meta.getAttribute("content") ?? "", 10);
+            if (!isNaN(port))
+                return port;
+        }
+        return null;
+    }
+}
+
+let instance = null;
+function initHerbClient(options = {}) {
+    if (instance) {
+        instance.disconnect();
+    }
+    instance = new HerbClient(options);
+    window.__herbClient = instance;
+    instance.connect();
+    return instance;
+}
+function autoInitialize() {
+    const debugMeta = document.querySelector('meta[name="herb-debug-mode"]');
+    if (!debugMeta || debugMeta.getAttribute("content") !== "true")
+        return;
+    initHerbClient();
+}
+if (typeof document !== "undefined") {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", autoInitialize);
+    }
+    else {
+        autoInitialize();
+    }
+}
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -25,9 +609,182 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".herb-overlay-label{background:rgba(0,0,0,.8);border-radius:3px;color:#fff;cursor:pointer;display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,monospace;font-size:11px;font-weight:500;left:4px;line-height:1.2;padding:2px 6px;position:absolute;top:-18px;transition:all .2s ease;white-space:nowrap;z-index:1000}.herb-overlay-label:hover{background:rgba(0,0,0,.9);color:#374151;transform:scale(1.02);z-index:1001}[data-herb-debug-outline-type*=view]>.herb-overlay-label{background:#dbeafe;border-color:#93c5fd;color:#1e40af}[data-herb-debug-outline-type*=partial]>.herb-overlay-label{background:#d1fae5;border-color:#6ee7b7;color:#065f46}[data-herb-debug-outline-type*=component]>.herb-overlay-label{background:#fef3c7;border-color:#fcd34d;color:#92400e}[data-herb-debug-outline-type*=erb-output]{transition:all .3s ease}.herb-tooltip{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08);display:flex;flex-direction:column;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:14px;gap:12px;max-width:calc(100vw - 16px);opacity:0;overflow:visible;padding:16px 20px;pointer-events:none;position:fixed;transition:opacity .2s ease,visibility .2s ease;visibility:hidden;white-space:nowrap;z-index:10001}.herb-tooltip.visible{opacity:1;pointer-events:auto;visibility:visible}.herb-tooltip .herb-location{align-items:center;background:#f8f9fa;border-radius:12px 12px 0 0;color:#6b7280;cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:12px;justify-content:space-between;margin:-16px -20px 0;padding:12px 20px;transition:all .2s ease}.herb-tooltip .herb-location:hover{background:#f1f3f4;color:#374151}.herb-copy-path-btn{background:transparent;border:none;border-radius:4px;color:#6b7280;cursor:pointer;flex-shrink:0;font-size:14px;padding:4px;position:relative;transition:all .2s ease}.herb-copy-path-btn:hover{background:hsla(220,9%,46%,.1);color:#374151}.herb-copy-path-btn:active{transform:scale(.95)}.herb-location:after{background:#1f2937;border-radius:6px;bottom:calc(100% + 8px);color:#fff;content:attr(data-tooltip);font-size:12px;padding:6px 10px;pointer-events:none;white-space:nowrap}.herb-location:after,.herb-location:before{left:50%;opacity:0;position:absolute;transform:translateX(-50%);transition:all .2s ease;visibility:hidden;z-index:10002}.herb-location:before{border:4px solid transparent;border-top-color:#1f2937;bottom:calc(100% + 2px);content:\"\"}.herb-location:hover:after,.herb-location:hover:before{opacity:1;visibility:visible}.herb-location:has(.herb-copy-path-btn:hover):after,.herb-location:has(.herb-copy-path-btn:hover):before{opacity:0!important;visibility:hidden!important}.herb-copy-path-btn:after{background:#1f2937;border-radius:6px;color:#fff;content:attr(data-tooltip);font-size:12px;padding:6px 10px;pointer-events:none;top:-36px;white-space:nowrap}.herb-copy-path-btn:after,.herb-copy-path-btn:before{left:50%;opacity:0;position:absolute;transform:translateX(-50%);transition:all .2s ease;visibility:hidden;z-index:10003}.herb-copy-path-btn:before{border:4px solid transparent;border-bottom-color:#1f2937;content:\"\";top:-6px}.herb-copy-path-btn:hover:after,.herb-copy-path-btn:hover:before{opacity:1;visibility:visible}.herb-tooltip .herb-erb-code{color:#111827;cursor:text;font-size:16px;font-weight:600;letter-spacing:-.025em;user-select:text}.herb-tooltip:before{bottom:-8px;content:\"\";height:8px;left:0;pointer-events:auto;position:absolute;right:0}.herb-tooltip:after{border:6px solid transparent;border-top-color:#e5e7eb;bottom:-6px;content:\"\";left:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:10000}.herb-floating-menu{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;position:fixed;right:0;top:0;z-index:2147483643}.herb-menu-trigger{align-items:center;background:#fff;border:1px solid silver;border-radius:0 0 0 10px;border-right:none;border-top:none;box-shadow:0 1px 3px rgba(0,0,0,.1);cursor:pointer;display:flex;font-size:12px;gap:4px;justify-content:center;padding:4px 7px;position:relative;transition:all .2s ease;z-index:2147483640}.herb-menu-trigger:hover{background:#f9fafb;border-color:#9ca3af;box-shadow:0 4px 12px rgba(0,0,0,.15)}.herb-menu-trigger:active{transform:scale(.98)}.herb-menu-trigger.has-active-options{background:#dbeafe;border-color:#3b82f6}.herb-menu-trigger.has-active-options:hover{background:#bfdbfe;border-color:#2563eb}.herb-menu-trigger.has-active-options .herb-text{color:#1d4ed8}.herb-icon{display:block;font-size:14px;line-height:1}.herb-text{color:#555;font-size:11px;font-weight:600;letter-spacing:.2px}.herb-menu-panel{background:#fff;border:1px solid silver;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);min-width:280px;opacity:0;padding:0;position:absolute;right:10px;top:28px;transform:translateY(-10px) scale(.95);transform-origin:top right;transition:all .3s cubic-bezier(.4,0,.2,1);visibility:hidden}.herb-menu-panel.open{opacity:1;transform:translateY(0) scale(1);visibility:visible}.herb-menu-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;color:#374151;font-size:14px;font-weight:600;padding:16px 20px}.herb-toggle-item{border-bottom:1px solid #f3f4f6;padding:12px 20px}.herb-toggle-item:last-child{border-bottom:none;border-radius:0 0 8px 8px}.herb-nested-toggle{border-left:2px solid #f3f4f6;margin-top:8px;padding-left:24px;transition:all .3s ease}.herb-nested-label{opacity:.8}.herb-nested-label .herb-toggle-text{color:#6b7280;font-size:13px}.herb-nested-switch{background:#e5e7eb;height:20px;width:36px}.herb-nested-switch:after{height:14px;left:3px;top:3px;width:14px}.herb-toggle-input:checked+.herb-nested-switch:after{transform:translateX(16px)}.herb-toggle-label{align-items:center;cursor:pointer;display:flex;gap:12px;user-select:none}.herb-toggle-input{display:none}.herb-toggle-switch{background:#cbd5e1;border-radius:12px;flex-shrink:0;height:24px;position:relative;transition:background .3s ease;width:44px}.herb-toggle-switch:after{background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);content:\"\";height:18px;left:3px;position:absolute;top:3px;transition:transform .3s ease;width:18px}.herb-toggle-input:checked+.herb-toggle-switch{background:#8b5cf6}.herb-toggle-input:checked+.herb-toggle-switch:after{transform:translateX(20px)}.herb-toggle-text{color:#374151;flex:1;font-size:14px}.herb-outline-preview{border:2px dotted transparent;border-radius:4px;padding:2px 8px}.herb-outline-view{background-color:#eff6ff;border-color:#3b82f6}.herb-outline-partial{background-color:#ecfdf5;border-color:#10b981}.herb-outline-component{background-color:#fffbeb;border-color:#f59e0b}.herb-outline-erb{background-color:#f5f3ff;border-color:#a78bfa}.herb-toggle-label:hover .herb-toggle-switch{background:#94a3b8}.herb-toggle-label:hover .herb-toggle-input:checked+.herb-toggle-switch{background:#7c3aed}.herb-editor-section{background:linear-gradient(135deg,#fafbfc,#f8f9fa);border-bottom:1px solid #f3f4f6;overflow:hidden;padding:16px 20px;position:relative}.herb-editor-section:before{background:linear-gradient(90deg,transparent,rgba(139,92,246,.2),transparent);content:\"\";height:2px;left:0;position:absolute;right:0;top:0}.herb-editor-label{cursor:default;display:flex;flex-direction:column;gap:10px}.herb-editor-text{align-items:center;color:#6b7280;display:flex;font-size:12px;font-weight:600;gap:6px;letter-spacing:.5px;text-transform:uppercase}.herb-editor-select{appearance:none;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.05);color:#1f2937;cursor:pointer;font-size:13.5px;font-weight:500;padding:10px 36px 10px 12px;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%}.herb-editor-select,.herb-editor-select option{font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.herb-editor-select option{font-size:14px;font-weight:400;padding:8px 12px}.herb-editor-select:hover{background-color:#fafafa;border-color:#8b5cf6;box-shadow:0 2px 4px rgba(0,0,0,.08),0 0 0 1px rgba(139,92,246,.1);transform:translateY(-1px)}.herb-editor-select:focus{background-color:#fff;border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.15),0 2px 8px rgba(139,92,246,.1);outline:none;transform:translateY(-1px)}.herb-editor-select:active{box-shadow:0 1px 2px rgba(0,0,0,.05);transform:translateY(0)}.herb-disable-all-section{background:#f9fafb;border-radius:0 0 8px 8px;border-top:1px solid #f3f4f6;padding:16px 20px}.herb-disable-all-btn{background:#ef4444;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;padding:8px 16px;transition:background .2s ease;width:100%}.herb-disable-all-btn:hover{background:#dc2626}.herb-disable-all-btn:active{background:#b91c1c}.herb-validation-overlay{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.8);bottom:0;color:#e5e5e5;display:flex;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;justify-content:center;left:0;line-height:1.6;overflow-y:auto;padding:20px;position:fixed;right:0;top:0;z-index:2147483640}.herb-validation-panel{background:#000;border:1px solid #374151;border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);display:flex;flex-direction:column;max-height:80vh;max-width:1200px;overflow:hidden;width:100%}.herb-validation-header{align-items:flex-start;background:linear-gradient(135deg,#dc2626,#b91c1c);border-bottom:1px solid #374151;border-radius:12px 12px 0 0;color:#fff;display:flex;flex-shrink:0;gap:16px;justify-content:space-between;padding:20px 24px}.herb-validation-title{font-size:18px;font-weight:600;margin:0}.herb-validation-close{align-items:center;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:6px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:16px;height:32px;justify-content:center;padding:0;transition:all .2s;width:32px}.herb-validation-close:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.3)}.herb-file-tabs{background:#262626;border-bottom:1px solid #374151;display:flex;flex-shrink:0;overflow-x:auto}.herb-file-tab{background:none;border:none;border-bottom:3px solid transparent;color:#9ca3af;cursor:pointer;font-size:14px;font-weight:500;padding:12px 16px;transition:all .2s ease;white-space:nowrap}.herb-file-tab:hover{background:#2d2d2d;color:#e5e5e5}.herb-file-tab.active{background:#374151;border-bottom-color:#3b82f6;color:#fff}.herb-validation-content{flex:1;overflow-y:auto;padding:24px}.herb-validator-section{margin-bottom:32px}.herb-validator-section:last-child{margin-bottom:0}.herb-validator-section.hidden{display:none}.herb-validator-header{align-items:center;background:#262626;border-bottom:1px solid #374151;border-radius:8px 8px 0 0;color:#e5e5e5;display:flex;font-size:16px;font-weight:600;justify-content:space-between;padding:12px 16px}.herb-validator-count{background:hsla(0,0%,100%,.2);border-radius:12px;font-size:14px;font-weight:500;padding:2px 8px}.herb-validator-items{background:#111;border:1px solid #374151;border-radius:0 0 8px 8px;border-top:none}.herb-validation-item{background:#111;border-bottom:1px solid #374151;padding:20px}.herb-validation-item:last-child{border-bottom:none;border-radius:0 0 8px 8px}.herb-validation-item.hidden{display:none}.herb-validation-item .herb-validation-header{align-items:center;background:#1a1a1a;border:none;border-bottom:1px solid #374151;color:#9ca3af;display:flex;font-size:13px;gap:12px;margin:-20px -20px 16px;padding:12px 16px}.herb-validation-badge{border-radius:4px;color:#fff;font-size:12px;font-weight:600;letter-spacing:.025em;padding:4px 8px;text-transform:uppercase}.herb-validation-location{color:#9ca3af;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:13px}.herb-validation-message{background:#1a1a1a;border-bottom:1px solid #374151;color:#fbbf24;font-size:13px;font-weight:500;line-height:1.4;margin:-16px -16px 16px;padding:12px 16px}.herb-code-snippet{background:#1f2937;border-radius:6px;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;margin-bottom:16px;overflow:hidden}.herb-code-line{align-items:stretch;display:flex}.herb-code-line.herb-error-line{background:rgba(239,68,68,.1)}.herb-validation-overlay .herb-line-number{background:#374151;border-right:1px solid #4b5563;color:#9ca3af;flex-shrink:0;font-size:13px;padding:8px 12px;text-align:right;user-select:none;width:40px}.herb-validation-overlay .herb-error-line .herb-line-number{background:#dc2626;color:#fff}.herb-validation-overlay .herb-line-content{color:#e5e7eb;flex:1;font-size:13px;padding:8px 16px;white-space:pre-wrap}.herb-validation-overlay .herb-error-pointer{background:#1f2937;color:#dc2626;font-size:13px;font-weight:700;padding:4px 16px 8px 57px}.herb-validation-suggestion{align-items:flex-start;background:#111;border:1px solid #374151;border-radius:6px;color:#d1d5db;display:flex;font-size:14px;gap:8px;margin-top:16px;padding:12px 16px}.herb-suggestion-icon{color:#10b981;flex-shrink:0;font-size:16px;margin-top:1px}.herb-erb{color:#fbbf24;font-weight:600}.herb-erb-content{color:#34d399}.herb-tag{color:#60a5fa;font-weight:500}.herb-attr{color:#f472b6}.herb-value{color:#a78bfa}.herb-comment{color:#6b7280;font-style:italic}";
+var css_248z = ".herb-overlay-label{background:rgba(0,0,0,.8);border-radius:3px;color:#fff;cursor:pointer;display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,monospace;font-size:11px;font-weight:500;left:4px;line-height:1.2;padding:2px 6px;position:absolute;top:-18px;transition:all .2s ease;white-space:nowrap;z-index:1000}.herb-overlay-label:hover{background:rgba(0,0,0,.9);color:#374151;transform:scale(1.02);z-index:1001}[data-herb-debug-outline-type*=view]>.herb-overlay-label{background:#dbeafe;border-color:#93c5fd;color:#1e40af}[data-herb-debug-outline-type*=partial]>.herb-overlay-label{background:#d1fae5;border-color:#6ee7b7;color:#065f46}[data-herb-debug-outline-type*=component]>.herb-overlay-label{background:#fef3c7;border-color:#fcd34d;color:#92400e}[data-herb-debug-outline-type*=erb-output]{transition:all .3s ease}.herb-tooltip{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08);display:flex;flex-direction:column;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:14px;gap:12px;max-width:calc(100vw - 16px);opacity:0;overflow:visible;padding:16px 20px;pointer-events:none;position:fixed;transition:opacity .2s ease,visibility .2s ease;visibility:hidden;white-space:nowrap;z-index:10001}.herb-tooltip.visible{opacity:1;pointer-events:auto;visibility:visible}.herb-tooltip .herb-location{align-items:center;background:#f8f9fa;border-radius:12px 12px 0 0;color:#6b7280;cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:12px;justify-content:space-between;margin:-16px -20px 0;padding:12px 20px;transition:all .2s ease}.herb-tooltip .herb-location:hover{background:#f1f3f4;color:#374151}.herb-copy-path-btn{background:transparent;border:none;border-radius:4px;color:#6b7280;cursor:pointer;flex-shrink:0;font-size:14px;padding:4px;position:relative;transition:all .2s ease}.herb-copy-path-btn:hover{background:hsla(220,9%,46%,.1);color:#374151}.herb-copy-path-btn:active{transform:scale(.95)}.herb-location:after{background:#1f2937;border-radius:6px;bottom:calc(100% + 8px);color:#fff;content:attr(data-tooltip);font-size:12px;padding:6px 10px;pointer-events:none;white-space:nowrap}.herb-location:after,.herb-location:before{left:50%;opacity:0;position:absolute;transform:translateX(-50%);transition:all .2s ease;visibility:hidden;z-index:10002}.herb-location:before{border:4px solid transparent;border-top-color:#1f2937;bottom:calc(100% + 2px);content:\"\"}.herb-location:hover:after,.herb-location:hover:before{opacity:1;visibility:visible}.herb-location:has(.herb-copy-path-btn:hover):after,.herb-location:has(.herb-copy-path-btn:hover):before{opacity:0!important;visibility:hidden!important}.herb-copy-path-btn:after{background:#1f2937;border-radius:6px;color:#fff;content:attr(data-tooltip);font-size:12px;padding:6px 10px;pointer-events:none;top:-36px;white-space:nowrap}.herb-copy-path-btn:after,.herb-copy-path-btn:before{left:50%;opacity:0;position:absolute;transform:translateX(-50%);transition:all .2s ease;visibility:hidden;z-index:10003}.herb-copy-path-btn:before{border:4px solid transparent;border-bottom-color:#1f2937;content:\"\";top:-6px}.herb-copy-path-btn:hover:after,.herb-copy-path-btn:hover:before{opacity:1;visibility:visible}.herb-tooltip .herb-erb-code{color:#111827;cursor:text;font-size:16px;font-weight:600;letter-spacing:-.025em;user-select:text}.herb-tooltip:before{bottom:-8px;content:\"\";height:8px;left:0;pointer-events:auto;position:absolute;right:0}.herb-tooltip:after{border:6px solid transparent;border-top-color:#e5e7eb;bottom:-6px;content:\"\";left:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:10000}.herb-floating-menu{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;position:fixed;right:0;top:0;z-index:2147483643}.herb-menu-trigger{align-items:center;background:#fff;border:1px solid silver;border-radius:0 0 0 10px;border-right:none;border-top:none;box-shadow:0 1px 3px rgba(0,0,0,.1);cursor:pointer;display:flex;font-size:12px;gap:4px;justify-content:center;padding:4px 7px;position:relative;transition:all .2s ease;z-index:2147483640}.herb-menu-trigger:hover{background:#f9fafb;border-color:#9ca3af;box-shadow:0 4px 12px rgba(0,0,0,.15)}.herb-menu-trigger:active{transform:scale(.98)}.herb-menu-trigger.has-active-options{background:#dbeafe;border-color:#3b82f6}.herb-menu-trigger.has-active-options:hover{background:#bfdbfe;border-color:#2563eb}.herb-menu-trigger.has-active-options .herb-text{color:#1d4ed8}.herb-icon{display:block;font-size:14px;line-height:1}.herb-text{color:#555;font-size:11px;font-weight:600;letter-spacing:.2px}.herb-connection-dot{background:#d1d5db;border-radius:50%;display:block;height:8px;transition:background .3s ease,box-shadow .3s ease;width:8px}@keyframes herb-dot-pulse{0%,to{opacity:1}50%{opacity:.5}}.herb-dev-server-section{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;font-size:11px;gap:8px;min-height:32px;padding:8px 20px}.herb-dev-server-dot{background:#d1d5db;border-radius:50%;flex-shrink:0;height:8px;transition:background .3s ease;width:8px}.herb-dev-server-status{color:#6b7280}.herb-dev-server-retry{background:#fff;border:1px solid #d1d5db;border-radius:4px;color:#374151;cursor:pointer;display:none;font-size:10px;margin-left:auto;padding:2px 8px;transition:background .15s ease,border-color .15s ease}.herb-dev-server-retry:hover{background:#f3f4f6;border-color:#9ca3af}.herb-menu-panel{background:#fff;border:1px solid silver;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);min-width:280px;opacity:0;padding:0;position:absolute;right:10px;top:28px;transform:translateY(-10px) scale(.95);transform-origin:top right;transition:all .3s cubic-bezier(.4,0,.2,1);visibility:hidden}.herb-menu-panel.open{opacity:1;transform:translateY(0) scale(1);visibility:visible}.herb-menu-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;color:#374151;font-size:14px;font-weight:600;padding:16px 20px}.herb-toggle-item{border-bottom:1px solid #f3f4f6;padding:12px 20px}.herb-toggle-item:last-child{border-bottom:none;border-radius:0 0 8px 8px}.herb-nested-toggle{border-left:2px solid #f3f4f6;margin-top:8px;padding-left:24px;transition:all .3s ease}.herb-nested-label{opacity:.8}.herb-nested-label .herb-toggle-text{color:#6b7280;font-size:13px}.herb-nested-switch{background:#e5e7eb;height:20px;width:36px}.herb-nested-switch:after{height:14px;left:3px;top:3px;width:14px}.herb-toggle-input:checked+.herb-nested-switch:after{transform:translateX(16px)}.herb-toggle-label{align-items:center;cursor:pointer;display:flex;gap:12px;user-select:none}.herb-toggle-input{display:none}.herb-toggle-switch{background:#cbd5e1;border-radius:12px;flex-shrink:0;height:24px;position:relative;transition:background .3s ease;width:44px}.herb-toggle-switch:after{background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);content:\"\";height:18px;left:3px;position:absolute;top:3px;transition:transform .3s ease;width:18px}.herb-toggle-input:checked+.herb-toggle-switch{background:#8b5cf6}.herb-toggle-input:checked+.herb-toggle-switch:after{transform:translateX(20px)}.herb-toggle-text{color:#374151;flex:1;font-size:14px}.herb-outline-preview{border:2px dotted transparent;border-radius:4px;padding:2px 8px}.herb-outline-view{background-color:#eff6ff;border-color:#3b82f6}.herb-outline-partial{background-color:#ecfdf5;border-color:#10b981}.herb-outline-component{background-color:#fffbeb;border-color:#f59e0b}.herb-outline-erb{background-color:#f5f3ff;border-color:#a78bfa}.herb-toggle-label:hover .herb-toggle-switch{background:#94a3b8}.herb-toggle-label:hover .herb-toggle-input:checked+.herb-toggle-switch{background:#7c3aed}.herb-editor-section{background:linear-gradient(135deg,#fafbfc,#f8f9fa);border-bottom:1px solid #f3f4f6;overflow:hidden;padding:16px 20px;position:relative}.herb-editor-section:before{background:linear-gradient(90deg,transparent,rgba(139,92,246,.2),transparent);content:\"\";height:2px;left:0;position:absolute;right:0;top:0}.herb-editor-label{cursor:default;display:flex;flex-direction:column;gap:10px}.herb-editor-text{align-items:center;color:#6b7280;display:flex;font-size:12px;font-weight:600;gap:6px;letter-spacing:.5px;text-transform:uppercase}.herb-editor-select{appearance:none;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.05);color:#1f2937;cursor:pointer;font-size:13.5px;font-weight:500;padding:10px 36px 10px 12px;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%}.herb-editor-select,.herb-editor-select option{font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.herb-editor-select option{font-size:14px;font-weight:400;padding:8px 12px}.herb-editor-select:hover{background-color:#fafafa;border-color:#8b5cf6;box-shadow:0 2px 4px rgba(0,0,0,.08),0 0 0 1px rgba(139,92,246,.1);transform:translateY(-1px)}.herb-editor-select:focus{background-color:#fff;border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.15),0 2px 8px rgba(139,92,246,.1);outline:none;transform:translateY(-1px)}.herb-editor-select:active{box-shadow:0 1px 2px rgba(0,0,0,.05);transform:translateY(0)}.herb-disable-all-section{background:#f9fafb;border-radius:0 0 8px 8px;border-top:1px solid #f3f4f6;padding:16px 20px}.herb-disable-all-btn{background:#ef4444;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;padding:8px 16px;transition:background .2s ease;width:100%}.herb-disable-all-btn:hover{background:#dc2626}.herb-disable-all-btn:active{background:#b91c1c}.herb-validation-overlay{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.8);bottom:0;color:#e5e5e5;display:flex;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;justify-content:center;left:0;line-height:1.6;overflow-y:auto;padding:20px;position:fixed;right:0;top:0;z-index:2147483640}.herb-validation-panel{background:#000;border:1px solid #374151;border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);display:flex;flex-direction:column;max-height:80vh;max-width:1200px;overflow:hidden;width:100%}.herb-validation-header{align-items:flex-start;background:linear-gradient(135deg,#dc2626,#b91c1c);border-bottom:1px solid #374151;border-radius:12px 12px 0 0;color:#fff;display:flex;flex-shrink:0;gap:16px;justify-content:space-between;padding:20px 24px}.herb-validation-title{font-size:18px;font-weight:600;margin:0}.herb-validation-close{align-items:center;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:6px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:16px;height:32px;justify-content:center;padding:0;transition:all .2s;width:32px}.herb-validation-close:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.3)}.herb-file-tabs{background:#262626;border-bottom:1px solid #374151;display:flex;flex-shrink:0;overflow-x:auto}.herb-file-tab{background:none;border:none;border-bottom:3px solid transparent;color:#9ca3af;cursor:pointer;font-size:14px;font-weight:500;padding:12px 16px;transition:all .2s ease;white-space:nowrap}.herb-file-tab:hover{background:#2d2d2d;color:#e5e5e5}.herb-file-tab.active{background:#374151;border-bottom-color:#3b82f6;color:#fff}.herb-validation-content{flex:1;overflow-y:auto;padding:24px}.herb-validator-section{margin-bottom:32px}.herb-validator-section:last-child{margin-bottom:0}.herb-validator-section.hidden{display:none}.herb-validator-header{align-items:center;background:#262626;border-bottom:1px solid #374151;border-radius:8px 8px 0 0;color:#e5e5e5;display:flex;font-size:16px;font-weight:600;justify-content:space-between;padding:12px 16px}.herb-validator-count{background:hsla(0,0%,100%,.2);border-radius:12px;font-size:14px;font-weight:500;padding:2px 8px}.herb-validator-items{background:#111;border:1px solid #374151;border-radius:0 0 8px 8px;border-top:none}.herb-validation-item{background:#111;border-bottom:1px solid #374151;padding:20px}.herb-validation-item:last-child{border-bottom:none;border-radius:0 0 8px 8px}.herb-validation-item.hidden{display:none}.herb-validation-item .herb-validation-header{align-items:center;background:#1a1a1a;border:none;border-bottom:1px solid #374151;color:#9ca3af;display:flex;font-size:13px;gap:12px;margin:-20px -20px 16px;padding:12px 16px}.herb-validation-badge{border-radius:4px;color:#fff;font-size:12px;font-weight:600;letter-spacing:.025em;padding:4px 8px;text-transform:uppercase}.herb-validation-location{color:#9ca3af;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:13px}.herb-validation-message{background:#1a1a1a;border-bottom:1px solid #374151;color:#fbbf24;font-size:13px;font-weight:500;line-height:1.4;margin:-16px -16px 16px;padding:12px 16px}.herb-code-snippet{background:#1f2937;border-radius:6px;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;margin-bottom:16px;overflow:hidden}.herb-code-line{align-items:stretch;display:flex}.herb-code-line.herb-error-line{background:rgba(239,68,68,.1)}.herb-validation-overlay .herb-line-number{background:#374151;border-right:1px solid #4b5563;color:#9ca3af;flex-shrink:0;font-size:13px;padding:8px 12px;text-align:right;user-select:none;width:40px}.herb-validation-overlay .herb-error-line .herb-line-number{background:#dc2626;color:#fff}.herb-validation-overlay .herb-line-content{color:#e5e7eb;flex:1;font-size:13px;padding:8px 16px;white-space:pre-wrap}.herb-validation-overlay .herb-error-pointer{background:#1f2937;color:#dc2626;font-size:13px;font-weight:700;padding:4px 16px 8px 57px}.herb-validation-suggestion{align-items:flex-start;background:#111;border:1px solid #374151;border-radius:6px;color:#d1d5db;display:flex;font-size:14px;gap:8px;margin-top:16px;padding:12px 16px}.herb-suggestion-icon{color:#10b981;flex-shrink:0;font-size:16px;margin-top:1px}.herb-erb{color:#fbbf24;font-weight:600}.herb-erb-content{color:#34d399}.herb-tag{color:#60a5fa;font-weight:500}.herb-attr{color:#f472b6}.herb-value{color:#a78bfa}.herb-comment{color:#6b7280;font-style:italic}";
 styleInject(css_248z);
 
+const optimizationMismatches = new Set();
+let optimizationBadgeInitialized = false;
+function scanForOptimizationMismatches() {
+    const templates = document.querySelectorAll('template[data-herb-optimization-mismatch]');
+    templates.forEach((template) => {
+        optimizationMismatches.add(template.getAttribute('data-filename') || '(unknown)');
+        template.remove();
+    });
+    if (optimizationMismatches.size > 0) {
+        renderOptimizationBadge();
+    }
+}
+function renderOptimizationBadge() {
+    document.querySelector('.herb-optimization-badge')?.remove();
+    document.querySelector('.herb-optimization-panel')?.remove();
+    const filenames = Array.from(optimizationMismatches);
+    const projectPath = document.querySelector('meta[name="herb-project-path"]')?.getAttribute('content') || '';
+    const displayNames = filenames.map(f => projectPath && f.startsWith(projectPath) ? f.slice(projectPath.length).replace(/^\//, '') : f);
+    const title = `\u26A0\uFE0F ${filenames.length} Compile-Time Optimization Mismatch${filenames.length === 1 ? '' : 'es'}`;
+    if (!optimizationBadgeInitialized) {
+        optimizationBadgeInitialized = true;
+        const style = document.createElement('style');
+        style.className = 'herb-optimization-badge-style';
+        style.textContent = `
+      .herb-floating-menu {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+      }
+
+      .herb-optimization-badge {
+        background: #fffbeb;
+        color: #92400e;
+        font-size: 11px;
+        font-weight: 600;
+        padding: 4px 7px;
+        border-radius: 0 0 0 10px;
+        border: 1px solid #f59e0b;
+        border-top: none;
+        border-right: none;
+        cursor: pointer;
+        text-align: center;
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+        z-index: 2147483640;
+        transition: all 0.2s ease;
+        order: -1;
+      }
+
+      .herb-optimization-badge:hover {
+        background: #fef3c7;
+        border-color: #d97706;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .herb-floating-menu .herb-optimization-badge + .herb-menu-trigger {
+        border-radius: 0 0 0 0;
+      }
+
+      .herb-optimization-panel {
+        position: fixed;
+        top: 30px;
+        right: 8px;
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        width: 420px;
+        max-height: 400px;
+        overflow-y: auto;
+        z-index: 2147483642;
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        font-size: 12px;
+        color: #374151;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        display: none;
+      }
+
+      .herb-optimization-panel.visible {
+        display: block;
+      }
+
+      .herb-optimization-panel-header {
+        background: #fffbeb;
+        padding: 10px 14px;
+        color: #92400e;
+        font-weight: 600;
+        font-size: 13px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #fde68a;
+        border-radius: 8px 8px 0 0;
+      }
+
+      .herb-optimization-panel-close {
+        background: none;
+        border: none;
+        color: #92400e;
+        cursor: pointer;
+        font-size: 16px;
+        padding: 0 4px;
+      }
+
+      .herb-optimization-panel-close:hover {
+        color: #78350f;
+      }
+
+      .herb-optimization-panel-list {
+        padding: 4px 0;
+      }
+
+      .herb-optimization-panel-item {
+        padding: 6px 14px;
+        color: #6b7280;
+        border-bottom: 1px solid #f3f4f6;
+        word-break: break-all;
+        font-family: 'SF Mono', Monaco, Consolas, monospace;
+        font-size: 11px;
+      }
+
+      .herb-optimization-panel-item:last-child {
+        border-bottom: none;
+      }
+
+      .herb-optimization-panel-hint {
+        padding: 8px 14px;
+        color: #9ca3af;
+        font-size: 11px;
+        border-top: 1px solid #e5e7eb;
+        background: #f9fafb;
+        border-radius: 0 0 8px 8px;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+    const panel = document.createElement('div');
+    panel.className = 'herb-optimization-panel';
+    panel.innerHTML = `
+    <div class="herb-optimization-panel-header">
+      <span>${title}</span>
+      <button class="herb-optimization-panel-close">&times;</button>
+    </div>
+
+    <div class="herb-optimization-panel-list">
+      ${displayNames.map(f => `<div class="herb-optimization-panel-item">${f.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>`).join('')}
+    </div>
+
+    <div class="herb-optimization-panel-hint">
+      Check Rails log for details. Disable with <code>config.verify_optimizations = false</code>.
+    </div>
+  `;
+    document.body.appendChild(panel);
+    panel.querySelector('.herb-optimization-panel-close')?.addEventListener('click', () => {
+        panel.classList.remove('visible');
+    });
+    const badge = document.createElement('div');
+    badge.className = 'herb-optimization-badge';
+    badge.textContent = `\u26A0\uFE0F ${filenames.length}`;
+    badge.title = title;
+    badge.addEventListener('click', () => {
+        panel.classList.toggle('visible');
+    });
+    const menu = document.querySelector('.herb-floating-menu');
+    if (menu) {
+        menu.prepend(badge);
+    }
+    else {
+        badge.style.position = 'fixed';
+        badge.style.top = '0';
+        badge.style.right = '0';
+        document.body.appendChild(badge);
+    }
+}
 class ErrorOverlay {
     constructor() {
         this.overlay = null;
@@ -37,6 +794,7 @@ class ErrorOverlay {
     }
     init() {
         this.detectValidationErrors();
+        scanForOptimizationMismatches();
         const hasParserErrors = document.querySelector('.herb-parser-error-overlay') !== null;
         if (this.getTotalErrorCount() > 0) {
             this.createOverlay();
@@ -372,6 +1130,28 @@ class ErrorOverlay {
     getErrorCount() {
         return this.getTotalErrorCount();
     }
+    showErrors(errors, filename) {
+        this.allValidationData = this.allValidationData.filter(data => data.filename !== filename);
+        this.allValidationData.push({
+            validationErrors: errors,
+            filename,
+            timestamp: new Date().toISOString(),
+        });
+        if (this.overlay) {
+            this.overlay.remove();
+            this.overlay = null;
+        }
+        this.createOverlay();
+        this.show();
+    }
+    clearErrors() {
+        this.allValidationData = [];
+        if (this.overlay) {
+            this.overlay.remove();
+            this.overlay = null;
+            this.isVisible = false;
+        }
+    }
     displayParserErrorOverlay(htmlContent) {
         const existingOverlay = document.querySelector('.herb-parser-error-overlay');
         if (existingOverlay) {
@@ -884,11 +1664,18 @@ class HerbOverlay {
             this.init();
         }
     }
+    syncConnectionDot() {
+        const herbClient = window.__herbClient;
+        if (herbClient) {
+            herbClient.applyConnectionDot();
+        }
+    }
     init() {
         this.loadProjectPath();
         this.loadDefaultEditor();
         this.loadSettings();
         this.injectMenu();
+        this.syncConnectionDot();
         this.setupMenuToggle();
         this.setupToggleSwitches();
         this.setupEditorDropdown();
@@ -975,11 +1762,18 @@ class HerbOverlay {
         <button class="herb-menu-trigger" id="herbMenuTrigger">
           <span class="herb-icon">🌿</span>
           <span class="herb-text">Herb</span>
+          <span id="herbConnectionDot" class="herb-connection-dot" data-herb-connection-dot></span>
         </button>
 
         <div class="herb-menu-panel" id="herbMenuPanel">
           <div class="herb-menu-header">Herb Debug Tools</div>
 
+          <div id="herbDevServerSection" class="herb-dev-server-section">
+            <span id="herbDevServerDot" class="herb-dev-server-dot"></span>
+            <span id="herbDevServerStatus" class="herb-dev-server-status">Dev Server</span>
+            <button id="herbDevServerRetry" class="herb-dev-server-retry">Retry</button>
+          </div>
+
           <div class="herb-toggle-item">
             <label class="herb-toggle-label">
               <input type="checkbox" id="herbToggleViewOutlines" class="herb-toggle-input">
@@ -1107,6 +1901,7 @@ class HerbOverlay {
     }
     reinitializeAfterNavigation() {
         this.injectMenu();
+        this.syncConnectionDot();
         this.setupMenuToggle();
         this.setupToggleSwitches();
         this.setupEditorDropdown();
@@ -1781,7 +2576,12 @@ HerbOverlay.EDITOR_OPTIONS = [
 ];
 
 function initHerbDevTools(options = {}) {
-    return new HerbOverlay(options);
+    const overlay = new HerbOverlay(options);
+    if (typeof window !== 'undefined') {
+        window.HerbDevTools._overlay = overlay;
+        window.HerbDevTools._errorOverlay = overlay.errorOverlay;
+    }
+    return overlay;
 }
 if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     const hasDebugMode = document.querySelector('meta[name="herb-debug-mode"]')?.getAttribute('content') === 'true';
@@ -1789,7 +2589,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     const hasValidationErrors = document.querySelector('template[data-herb-validation-errors]') !== null;
     const hasValidationError = document.querySelector('template[data-herb-validation-error]') !== null;
     const hasParserErrors = document.querySelector('template[data-herb-parser-error]') !== null;
-    const shouldAutoInit = hasDebugMode || hasDebugErb || hasValidationErrors || hasValidationError || hasParserErrors;
+    const hasOptimizationMismatches = document.querySelector('template[data-herb-optimization-mismatch]') !== null;
+    const shouldAutoInit = hasDebugMode || hasDebugErb || hasValidationErrors || hasValidationError || hasParserErrors || hasOptimizationMismatches;
     if (shouldAutoInit) {
         document.addEventListener('DOMContentLoaded', () => {
             initHerbDevTools();
@@ -1799,7 +2600,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 if (typeof window !== 'undefined') {
     window.HerbDevTools = {
         init: initHerbDevTools,
-        HerbOverlay
+        HerbOverlay,
+        ErrorOverlay
     };
 }
 
@@ -1853,7 +2655,7 @@ function initReActionViewDevTools(options = {}) {
 if (typeof window !== "undefined" && typeof document !== "undefined") {
     let isInitializing = false;
     const initializeDevTools = () => {
-        var _a, _b;
+        var _a, _b, _c;
         if (isInitializing) {
             console.log("ReActionView dev tools initialization already in progress, skipping...");
             return;
@@ -1865,11 +2667,7 @@ if (typeof window !== "undefined" && typeof document !== "undefined") {
         }
         isInitializing = true;
         try {
-            let projectPath;
-            const railsRoot = (_b = document.querySelector(`meta[name="herb-rails-root"]`)) === null || _b === void 0 ? void 0 : _b.getAttribute("content");
-            if (railsRoot) {
-                projectPath = railsRoot;
-            }
+            const projectPath = (_c = (_b = document.querySelector(`meta[name="herb-project-path"]`)) === null || _b === void 0 ? void 0 : _b.getAttribute("content")) !== null && _c !== void 0 ? _c : undefined;
             initReActionViewDevTools({
                 projectPath,
                 autoInit: true