sql-dev-inspector 0.0.0-stage → 1.0.1

package/dist/client/widget.js

@@ -0,0 +1,485 @@
+/**
+ * Floating launcher for the SQL Inspector page, mounted in the host application during dev.
+ *
+ * It lives inside a shadow root and resets everything it uses, so it neither looks like nor
+ * is affected by the host's CSS (no inherited fonts, no styled `button` / `select` / `a`
+ * leaking in or out). No framework and no Nuxt imports: it must work in any frontend.
+ */
+import { LOCALES, pickLocale, translate } from "../i18n/index.js";
+export const STORAGE_KEY = "sqlDevInspector.widget";
+export const HOTKEYS = { togglePanel: "Alt+Shift+S", toggleButton: "Alt+Shift+D" };
+const DEFAULTS = {
+    enabled: true,
+    buttonVisible: true,
+    open: false,
+    dock: "bottom",
+    size: 420,
+    autoOpen: false,
+    offset: { right: 20, bottom: 20 },
+    lang: "auto"
+};
+const TRAILING_SLASHES = /\/+$/;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function loadSettings(win) {
+    try {
+        const raw = JSON.parse(win.localStorage.getItem(STORAGE_KEY) ?? "{}");
+        return {
+            enabled: raw.enabled !== false,
+            buttonVisible: raw.buttonVisible !== false,
+            open: raw.open === true,
+            dock: raw.dock === "right" ? "right" : "bottom",
+            size: Number.isFinite(raw.size) ? clamp(raw.size, 160, 4000) : DEFAULTS.size,
+            autoOpen: raw.autoOpen === true,
+            offset: {
+                right: Number.isFinite(raw.offset?.right) ? raw.offset.right : DEFAULTS.offset.right,
+                bottom: Number.isFinite(raw.offset?.bottom) ? raw.offset.bottom : DEFAULTS.offset.bottom
+            },
+            lang: LOCALES.some(locale => locale.code === raw.lang) ? raw.lang : "auto"
+        };
+    }
+    catch {
+        return { ...DEFAULTS, offset: { ...DEFAULTS.offset } };
+    }
+}
+const TOKENS_LIGHT = `--surface:#fff;--surface-2:#f1f4f8;--border:#dfe5ec;--text:#121821;--text-2:#4a5666;--text-3:#6e7a8a;--accent:#1f6feb;--err:#cf222e;--bar:#101820;--bar-text:#e9eef4;--shadow:0 10px 30px rgba(15,23,42,.28);`;
+const TOKENS_DARK = `--surface:#151b23;--surface-2:#1d2631;--border:#2b3544;--text:#e6edf3;--text-2:#aab5c3;--text-3:#7d8896;--accent:#5aa2ff;--err:#ff6b6b;--bar:#0b1016;--bar-text:#e6edf3;--shadow:0 10px 30px rgba(0,0,0,.6);`;
+const STYLE = `
+:host { all: initial; position: fixed; top: 0; left: 0; width: 0; height: 0; display: block; z-index: 2147483000; }
+.root { all: initial; display: block; ${TOKENS_LIGHT} font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Hiragino Sans", "Yu Gothic UI", sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; pointer-events: none; }
+@media (prefers-color-scheme: dark) { .root { ${TOKENS_DARK} } }
+:where(.root) *, :where(.root) *::before, :where(.root) *::after { box-sizing: border-box; margin: 0; letter-spacing: normal; text-transform: none; }
+/* :where() keeps the reset at zero specificity, so the component rules below can restyle these controls. */
+:where(.root) :where(button, select) { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; color: inherit; }
+.root button:focus-visible, .root select:focus-visible, .root [role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.root svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.root [hidden] { display: none !important; }
+
+.fab { position: fixed; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--bar); color: var(--bar-text); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); font-weight: 650; font-size: 12.5px; user-select: none; touch-action: none; pointer-events: auto; transition: transform .12s ease, box-shadow .12s ease; }
+.fab:hover { transform: translateY(-1px); }
+.fab:active { transform: translateY(0); }
+.fab svg { color: #7fb3ff; }
+.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(255,255,255,.16); font-size: 11px; font-weight: 700; text-align: center; line-height: 20px; font-variant-numeric: tabular-nums; }
+.badge:empty { display: none; }
+.badge.warn { background: #d99a06; color: #fff; } .badge.err { background: #e5484d; color: #fff; }
+
+.panel { position: fixed; display: none; flex-direction: column; background: var(--surface); box-shadow: var(--shadow); pointer-events: auto; overflow: hidden; }
+.panel.open { display: flex; }
+.panel.bottom { left: 0; right: 0; bottom: 0; border-top: 1px solid var(--border); border-radius: 12px 12px 0 0; }
+.panel.right { top: 0; bottom: 0; right: 0; border-left: 1px solid var(--border); border-radius: 12px 0 0 12px; }
+.grip { position: absolute; z-index: 2; }
+.bottom .grip { left: 0; right: 0; top: 0; height: 8px; cursor: ns-resize; }
+.right .grip { top: 0; bottom: 0; left: 0; width: 8px; cursor: ew-resize; }
+.grip:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }
+.bar { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px 0 12px; background: var(--bar); color: var(--bar-text); flex: none; }
+.bar .title { font-weight: 650; font-size: 13px; margin-left: 2px; }
+.bar .logo { color: #7fb3ff; display: inline-flex; }
+.bar .spacer { flex: 1; }
+.tool { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: #b9c4d0; }
+.tool:hover { background: rgba(255,255,255,.12); color: #fff; }
+.tool[aria-pressed="true"] { background: rgba(255,255,255,.18); color: #fff; }
+.divider { width: 1px; height: 18px; margin: 0 4px; background: rgba(255,255,255,.18); }
+iframe { flex: 1; width: 100%; border: 0; background: var(--surface); color-scheme: normal; }
+.resizing iframe { pointer-events: none; }
+
+.menu { position: absolute; z-index: 3; top: 46px; right: 8px; width: 320px; max-width: calc(100% - 16px); max-height: calc(100% - 56px); overflow: auto; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
+.menu .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 4px 8px; border-radius: 6px; color: var(--text); }
+.menu .row.clickable { cursor: pointer; }
+.menu .row.clickable:hover { background: var(--surface-2); }
+.menu .label { font-size: 12.5px; }
+.menu .section { padding: 8px 8px 4px; color: var(--text-3); font-size: 11px; font-weight: 650; text-transform: uppercase !important; letter-spacing: .06em !important; }
+.switch { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--border); flex: none; transition: background .15s; }
+.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .15s; }
+.row[aria-checked="true"] .switch { background: var(--accent); }
+.row[aria-checked="true"] .switch::after { transform: translateX(12px); }
+.value { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
+.value svg { width: 12px; height: 12px; color: var(--text-3); transition: transform .15s; }
+.row[aria-expanded="true"] .value svg { transform: rotate(180deg); }
+.options { padding: 2px 0 4px; }
+.opt { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0 4px; padding: 0 8px 0 10px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
+.opt:hover, .opt:focus-visible { background: var(--surface-2); outline: none; }
+.opt .check { width: 14px; height: 14px; color: var(--accent); visibility: hidden; }
+.opt[aria-selected="true"] { font-weight: 650; }
+.opt[aria-selected="true"] .check { visibility: visible; }
+.opt .code { margin-left: auto; color: var(--text-3); font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase !important; }
+.keys { display: flex; align-items: center; gap: 3px; }
+kbd { font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 3px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); }
+.menu .sep { height: 1px; margin: 6px 0; background: var(--border); }
+.menu .action { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px; border-radius: 6px; font-size: 12.5px; }
+.menu .action:hover { background: var(--surface-2); }
+.menu .action.danger { color: var(--err); }
+.menu .hint { padding: 0 8px 6px; color: var(--text-3); font-size: 11.5px; }
+@media (prefers-reduced-motion: reduce) { .root * { transition: none !important; } }
+`;
+const ICON = (paths) => `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
+const ICONS = {
+    db: ICON(`<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>`),
+    gear: ICON(`<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/>`),
+    external: ICON(`<path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/>`),
+    close: ICON(`<path d="m6 6 12 12M18 6 6 18"/>`),
+    dockBottom: ICON(`<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 14h18"/>`),
+    dockRight: ICON(`<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M14 4v16"/>`),
+    trash: ICON(`<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>`),
+    power: ICON(`<path d="M12 3v9M6.3 6.8a8 8 0 1 0 11.4 0"/>`),
+    down: ICON(`<path d="m6 9 6 6 6-6"/>`),
+    check: ICON(`<path d="m5 12.5 4.5 4.5L19 7.5"/>`)
+};
+const keyChips = (combo) => combo.split("+").map(key => `<kbd>${key}</kbd>`).join("");
+export function mountSqlInspectorWidget(options) {
+    const win = options.win ?? globalThis;
+    const doc = win.document;
+    const inspectorUrl = `${options.baseURL.replace(TRAILING_SLASHES, "")}/__sql-inspector/`;
+    const settings = loadSettings(win);
+    const save = () => {
+        try {
+            win.localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+        }
+        catch {
+            // storage can be blocked; settings then last for this page only
+        }
+    };
+    const locale = () => settings.lang === "auto"
+        ? pickLocale(win.navigator?.languages?.length ? win.navigator.languages : [win.navigator?.language])
+        : settings.lang;
+    const t = (key, params) => translate(locale(), key, params);
+    // A custom-element name, not a <div>: host stylesheets that style `div` / `body > *` cannot match it by tag.
+    const host = doc.createElement("sql-dev-inspector");
+    host.setAttribute("data-sql-inspector", "");
+    const root = host.attachShadow({ mode: "open" });
+    root.innerHTML = `
+    <style>${STYLE}</style>
+    <div class="root">
+      <button class="fab" type="button" data-act="toggle">${ICONS.db}<span>SQL</span><span class="badge"></span></button>
+      <section class="panel" role="dialog">
+        <div class="grip" role="separator"></div>
+        <header class="bar">
+          <span class="logo">${ICONS.db}</span><b class="title"></b><span class="spacer"></span>
+          <button class="tool" type="button" data-act="dock-bottom">${ICONS.dockBottom}</button>
+          <button class="tool" type="button" data-act="dock-right">${ICONS.dockRight}</button>
+          <span class="divider"></span>
+          <button class="tool" type="button" data-act="menu" aria-haspopup="true" aria-expanded="false">${ICONS.gear}</button>
+          <button class="tool" type="button" data-act="tab">${ICONS.external}</button>
+          <button class="tool" type="button" data-act="close">${ICONS.close}</button>
+        </header>
+        <div class="menu" hidden>
+          <div class="row clickable" role="switch" tabindex="0" data-opt="autoOpen"><span class="label" data-t="widget.autoOpen"></span><span class="switch"></span></div>
+          <div class="row clickable" role="switch" tabindex="0" data-opt="buttonVisible"><span class="label" data-t="widget.showButton"></span><span class="switch"></span></div>
+          <div class="row clickable" role="button" tabindex="0" aria-haspopup="listbox" aria-expanded="false" data-lang-toggle><span class="label" data-t="widget.language"></span><span class="value"><span data-lang-current></span>${ICONS.down}</span></div>
+          <div class="options" role="listbox" data-lang-options hidden></div>
+          <div class="sep"></div>
+          <div class="section" data-t="widget.shortcuts"></div>
+          <div class="row"><span class="label" data-t="widget.shortcut.toggle"></span><span class="keys">${keyChips(HOTKEYS.togglePanel)}</span></div>
+          <div class="row"><span class="label" data-t="widget.shortcut.button"></span><span class="keys">${keyChips(HOTKEYS.toggleButton)}</span></div>
+          <div class="row"><span class="label" data-t="widget.shortcut.close"></span><span class="keys"><kbd>Esc</kbd></span></div>
+          <div class="sep"></div>
+          <button class="action" type="button" data-act="clear">${ICONS.trash}<span data-t="widget.clear"></span></button>
+          <button class="action danger" type="button" data-act="disable">${ICONS.power}<span data-t="widget.disable"></span></button>
+          <div class="hint" data-disable-hint></div>
+        </div>
+        <iframe></iframe>
+      </section>
+    </div>`;
+    const $ = (selector) => root.querySelector(selector);
+    const button = $(".fab");
+    const badge = $(".badge");
+    const panel = $(".panel");
+    const menu = $(".menu");
+    const grip = $(".grip");
+    const frame = $("iframe");
+    const langToggle = $("[data-lang-toggle]");
+    const langOptions = $("[data-lang-options]");
+    // A custom listbox, not a <select>: the browser/OS draws a native select's popup, which no CSS can restyle.
+    const langChoices = [{ value: "auto", code: "" }, ...LOCALES.map(l => ({ value: l.code, code: l.code }))];
+    langOptions.innerHTML = langChoices.map(choice => `<div class="opt" role="option" tabindex="-1" data-lang-opt="${choice.value}">${ICONS.check}<span data-lang-name></span><span class="code">${choice.code}</span></div>`).join("");
+    const langName = (value) => value === "auto" ? t("widget.lang.auto") : LOCALES.find(l => l.code === value).name;
+    const query = () => settings.lang === "auto" ? "" : `?lang=${settings.lang}`;
+    const frameUrl = () => `${inspectorUrl}${query()}#latest`;
+    const applyTexts = () => {
+        for (const el of Array.from(root.querySelectorAll("[data-t]"))) {
+            el.textContent = t(el.dataset.t);
+        }
+        const openLabel = t("widget.open", { keys: HOTKEYS.togglePanel });
+        button.setAttribute("title", openLabel);
+        button.setAttribute("aria-label", openLabel);
+        $(".title").textContent = t("widget.title");
+        panel.setAttribute("aria-label", t("widget.title"));
+        const titles = {
+            "dock-bottom": t("widget.dock.bottom"),
+            "dock-right": t("widget.dock.right"),
+            "menu": t("widget.settings"),
+            "tab": t("widget.newTab"),
+            "close": t("widget.close", { key: "Esc" })
+        };
+        for (const [act, title] of Object.entries(titles)) {
+            const el = $(`[data-act="${act}"]`);
+            el.setAttribute("title", title);
+            el.setAttribute("aria-label", title);
+        }
+        grip.setAttribute("aria-label", t("widget.resize"));
+        $("[data-disable-hint]").textContent = t("widget.disable.hint", { keys: HOTKEYS.togglePanel });
+        for (const opt of Array.from(langOptions.querySelectorAll("[data-lang-opt]"))) {
+            const value = opt.dataset.langOpt;
+            opt.querySelector("[data-lang-name]").textContent = langName(value);
+            opt.setAttribute("aria-selected", String(value === settings.lang));
+            opt.querySelector("svg").setAttribute("class", "check");
+        }
+        $("[data-lang-current]").textContent = langName(settings.lang);
+    };
+    const setLangList = (open) => {
+        langOptions.hidden = !open;
+        langToggle.setAttribute("aria-expanded", String(open));
+    };
+    const chooseLang = (value) => {
+        settings.lang = value;
+        applyTexts();
+        setLangList(false);
+        if (frame.getAttribute("src")) {
+            frame.setAttribute("src", frameUrl());
+        }
+        render();
+        langToggle.focus();
+    };
+    let stream = null;
+    let lastAnnounced = "";
+    let timer = null;
+    const render = () => {
+        host.style.display = settings.enabled ? "" : "none";
+        button.style.display = settings.buttonVisible ? "" : "none";
+        button.style.right = `${settings.offset.right}px`;
+        button.style.bottom = `${settings.offset.bottom}px`;
+        panel.classList.toggle("open", settings.open);
+        panel.classList.toggle("bottom", settings.dock === "bottom");
+        panel.classList.toggle("right", settings.dock === "right");
+        $(`[data-act="dock-bottom"]`).setAttribute("aria-pressed", String(settings.dock === "bottom"));
+        $(`[data-act="dock-right"]`).setAttribute("aria-pressed", String(settings.dock === "right"));
+        const max = (settings.dock === "bottom" ? win.innerHeight : win.innerWidth) * 0.9;
+        const size = `${clamp(settings.size, 160, Math.max(160, max))}px`;
+        panel.style.height = settings.dock === "bottom" ? size : "";
+        panel.style.width = settings.dock === "right" ? size : "";
+        for (const row of Array.from(root.querySelectorAll("[data-opt]"))) {
+            row.setAttribute("aria-checked", String(Boolean(settings[row.dataset.opt])));
+        }
+        // Loaded on first open only: a closed panel costs the app nothing.
+        if (settings.open && !frame.getAttribute("src")) {
+            frame.setAttribute("src", frameUrl());
+            frame.addEventListener("load", () => frame.contentWindow?.addEventListener("keydown", onKeydown), { once: true });
+        }
+        save();
+        if (settings.enabled) {
+            ensureConnected();
+        }
+    };
+    const setMenu = (open) => {
+        menu.hidden = !open;
+        setLangList(false);
+        const gear = $(`[data-act="menu"]`);
+        gear.setAttribute("aria-expanded", String(open));
+        gear.setAttribute("aria-pressed", String(open));
+    };
+    const setOpen = (open) => {
+        settings.open = open;
+        if (open) {
+            settings.enabled = true;
+        }
+        else {
+            setMenu(false);
+        }
+        render();
+    };
+    function onKeydown(event) {
+        if (event.altKey && event.shiftKey && event.code === "KeyS") {
+            event.preventDefault();
+            setOpen(!settings.open || !settings.enabled);
+        }
+        else if (event.altKey && event.shiftKey && event.code === "KeyD") {
+            event.preventDefault();
+            settings.buttonVisible = !settings.buttonVisible;
+            render();
+        }
+        else if (event.key === "Escape" && settings.open && event.composedPath().some(node => node === host || node === frame.contentWindow)) {
+            if (menu.hidden) {
+                setOpen(false);
+            }
+            else {
+                setMenu(false);
+            }
+        }
+    }
+    win.addEventListener("keydown", onKeydown);
+    // Key events from inside the shadow root are composed, so the window listener already sees them.
+    // Drag the button; a move under 4px is a plain click. A real `click` event does the toggling (so
+    // keyboard activation, assistive tech and programmatic clicks all work); a drag swallows its own click.
+    let suppressClick = false;
+    button.addEventListener("pointerdown", (down) => {
+        const start = { x: down.clientX, y: down.clientY, ...settings.offset };
+        let moved = false;
+        const move = (event) => {
+            const dx = event.clientX - start.x;
+            const dy = event.clientY - start.y;
+            moved ||= Math.hypot(dx, dy) > 4;
+            if (moved) {
+                settings.offset = {
+                    right: clamp(start.right - dx, 4, win.innerWidth - 60),
+                    bottom: clamp(start.bottom - dy, 4, win.innerHeight - 40)
+                };
+                button.style.right = `${settings.offset.right}px`;
+                button.style.bottom = `${settings.offset.bottom}px`;
+            }
+        };
+        const up = () => {
+            win.removeEventListener("pointermove", move);
+            win.removeEventListener("pointerup", up);
+            if (moved) {
+                suppressClick = true;
+                setTimeout(() => {
+                    suppressClick = false;
+                }, 0);
+                save();
+            }
+        };
+        win.addEventListener("pointermove", move);
+        win.addEventListener("pointerup", up);
+    });
+    button.addEventListener("click", () => {
+        if (!suppressClick) {
+            setOpen(!settings.open);
+        }
+    });
+    grip.addEventListener("pointerdown", (down) => {
+        const start = { x: down.clientX, y: down.clientY, size: settings.size };
+        panel.classList.add("resizing");
+        const move = (event) => {
+            settings.size = settings.dock === "bottom" ? start.size + (start.y - event.clientY) : start.size + (start.x - event.clientX);
+            render();
+        };
+        const up = () => {
+            panel.classList.remove("resizing");
+            win.removeEventListener("pointermove", move);
+            win.removeEventListener("pointerup", up);
+        };
+        win.addEventListener("pointermove", move);
+        win.addEventListener("pointerup", up);
+    });
+    const toggleOption = (row) => {
+        const name = row.dataset.opt;
+        settings[name] = !settings[name];
+        render();
+    };
+    root.addEventListener("click", (event) => {
+        const target = event.target;
+        if (target.closest("[data-lang-toggle]")) {
+            setLangList(langOptions.hidden);
+            if (!langOptions.hidden) {
+                langOptions.querySelector(`[aria-selected="true"]`)?.focus();
+            }
+            return;
+        }
+        const row = target.closest("[data-opt]");
+        if (row) {
+            toggleOption(row);
+            return;
+        }
+        const action = target.closest("[data-act]")?.dataset.act;
+        if (action === "close") {
+            setOpen(false);
+        }
+        else if (action === "menu") {
+            setMenu(menu.hidden);
+        }
+        else if (action === "dock-bottom" || action === "dock-right") {
+            settings.dock = action === "dock-bottom" ? "bottom" : "right";
+            render();
+        }
+        else if (action === "tab") {
+            win.open(frameUrl(), "_blank", "noopener");
+        }
+        else if (action === "clear") {
+            void win.fetch(`${inspectorUrl}api/clear`, { method: "POST" });
+        }
+        else if (action === "disable") {
+            settings.enabled = false;
+            settings.open = false;
+            stream?.close();
+            stream = null;
+            render();
+        }
+    });
+    root.addEventListener("keydown", (event) => {
+        const e = event;
+        const row = e.target.closest("[data-opt]");
+        if (row && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            toggleOption(row);
+        }
+        else if (e.target.closest("[data-lang-toggle]") && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            e.target.click();
+        }
+    });
+    langOptions.addEventListener("click", (event) => {
+        const opt = event.target.closest("[data-lang-opt]");
+        if (opt) {
+            chooseLang(opt.dataset.langOpt);
+        }
+    });
+    langOptions.addEventListener("keydown", (event) => {
+        const options = Array.from(langOptions.querySelectorAll("[data-lang-opt]"));
+        const index = options.indexOf(event.target);
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            options[Math.min(options.length - 1, index + 1)]?.focus();
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            options[Math.max(0, index - 1)]?.focus();
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            chooseLang(event.target.dataset.langOpt);
+        }
+        else if (event.key === "Escape") {
+            event.stopPropagation();
+            setLangList(false);
+            langToggle.focus();
+        }
+    });
+    // Badge: query count of the newest request, amber / red when it has warnings / errors.
+    const refreshBadge = async () => {
+        try {
+            const list = await (await win.fetch(`${inspectorUrl}api/requests`)).json();
+            const latest = list[0];
+            badge.textContent = latest ? String(latest.queryCount) : "";
+            badge.className = `badge${latest?.errors ? " err" : latest?.warnings ? " warn" : ""}`;
+            if (latest && (latest.errors || latest.warnings) && latest.id !== lastAnnounced && settings.autoOpen && !settings.open) {
+                setOpen(true);
+            }
+            lastAnnounced = latest && (latest.errors || latest.warnings) ? latest.id : lastAnnounced;
+        }
+        catch {
+            // inspector not reachable (server restarting): keep the last badge
+        }
+    };
+    function ensureConnected() {
+        if (stream || !settings.enabled || !win.EventSource) {
+            return;
+        }
+        void refreshBadge();
+        stream = new win.EventSource(`${inspectorUrl}api/stream`);
+        stream.onmessage = () => {
+            timer ??= setTimeout(() => {
+                timer = null;
+                void refreshBadge();
+            }, 150);
+        };
+    }
+    doc.body.append(host);
+    applyTexts();
+    render();
+    return {
+        settings: () => ({ ...settings }),
+        destroy: () => {
+            win.removeEventListener("keydown", onKeydown);
+            stream?.close();
+            host.remove();
+        }
+    };
+}

package/dist/i18n/index.d.ts

@@ -0,0 +1,26 @@
+import { type Locale, type MessageKey, MESSAGES } from "./messages.js";
+export type { Locale, MessageKey };
+export { MESSAGES };
+export interface LocaleInfo {
+    code: Locale;
+    /** Name of the language in that language, for the language picker. */
+    name: string;
+}
+export declare const LOCALES: LocaleInfo[];
+export declare const DEFAULT_LOCALE: Locale;
+/**
+ * Maps a BCP 47 tag ("vi-VN"), a POSIX locale ("ja_JP.UTF-8") or a bare code to a supported
+ * locale, or null when it names none.
+ */
+export declare function matchLocale(input: string | null | undefined): Locale | null;
+/** First supported locale in a preference list (e.g. `navigator.languages`), else English. */
+export declare function pickLocale(preferences: readonly (string | null | undefined)[]): Locale;
+/** `{name}` placeholders are replaced; an unknown placeholder is left visible rather than dropped. */
+export declare function translate(locale: Locale, key: MessageKey, params?: Record<string, string | number>): string;
+export declare function isMessageKey(key: string): key is MessageKey;
+/**
+ * Locale for text printed by the server (terminal, API `message` fields). Only an explicit
+ * `SQL_INSPECTOR_LANG` counts: a machine's `LANG` says nothing about what the developer
+ * wants a dev tool to speak. Returns null when unset, so callers can tell "chosen" from "default".
+ */
+export declare function chosenLocale(env: Record<string, string | undefined>): Locale | null;

package/dist/i18n/index.js

@@ -0,0 +1,48 @@
+import { MESSAGES } from "./messages.js";
+export { MESSAGES };
+export const LOCALES = [
+    { code: "en", name: "English" },
+    { code: "vi", name: "Tiếng Việt" },
+    { code: "ja", name: "日本語" }
+];
+export const DEFAULT_LOCALE = "en";
+const LOCALE_TAG = /^([a-z]{2,3})(?:[_\-.]|$)/i;
+/**
+ * Maps a BCP 47 tag ("vi-VN"), a POSIX locale ("ja_JP.UTF-8") or a bare code to a supported
+ * locale, or null when it names none.
+ */
+export function matchLocale(input) {
+    const code = LOCALE_TAG.exec(input?.trim() ?? "")?.[1]?.toLowerCase();
+    return LOCALES.find(locale => locale.code === code)?.code ?? null;
+}
+/** First supported locale in a preference list (e.g. `navigator.languages`), else English. */
+export function pickLocale(preferences) {
+    for (const preference of preferences) {
+        const match = matchLocale(preference);
+        if (match) {
+            return match;
+        }
+    }
+    return DEFAULT_LOCALE;
+}
+const PLACEHOLDER = /\{(\w+)\}/g;
+/** `{name}` placeholders are replaced; an unknown placeholder is left visible rather than dropped. */
+export function translate(locale, key, params = {}) {
+    const messages = MESSAGES[locale];
+    const english = MESSAGES.en;
+    // A `<key>.one` variant, when it exists, is used for a count of exactly 1 ("1 query", not "1 queries").
+    const one = String(params.count) === "1" ? (messages[`${key}.one`] ?? english[`${key}.one`]) : undefined;
+    const template = one ?? messages[key] ?? english[key];
+    return template.replace(PLACEHOLDER, (whole, name) => name in params ? String(params[name]) : whole);
+}
+export function isMessageKey(key) {
+    return key in MESSAGES.en;
+}
+/**
+ * Locale for text printed by the server (terminal, API `message` fields). Only an explicit
+ * `SQL_INSPECTOR_LANG` counts: a machine's `LANG` says nothing about what the developer
+ * wants a dev tool to speak. Returns null when unset, so callers can tell "chosen" from "default".
+ */
+export function chosenLocale(env) {
+    return matchLocale(env.SQL_INSPECTOR_LANG);
+}