dev-inspector 1.0.2 → 1.0.4

package/lib/ui/panel/dom/constants.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NETWORK_TAB_HTML = exports.CONSOLE_TAB_HTML = exports.TOGGLE_BUTTON_HTML = void 0;
+exports.TOGGLE_BUTTON_HTML = `<span class="di-toggleTitle">Dev Inspector</span>` +
+    `<span class="di-toggleMeta">` +
+    `<span class="di-toggleBadge" data-di-toggle-count="console">` +
+    `<svg class="di-toggleIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.5C4 4.67 4.67 4 5.5 4H18.5C19.33 4 20 4.67 20 5.5V15.5C20 16.33 19.33 17 18.5 17H13.5L12 18.5L10.5 17H5.5C4.67 17 4 16.33 4 15.5V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M7 11H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>` +
+    `<span data-di-toggle-count-value="console">0</span>` +
+    `<span class="di-toggleErr" data-di-toggle-error="console" aria-label="Console errors">` +
+    `<span class="di-toggleErrIcon">!</span>` +
+    `<span data-di-toggle-error-value="console">0</span>` +
+    `</span>` +
+    `</span>` +
+    `<span class="di-toggleBadge" data-di-toggle-count="network">` +
+    `<svg class="di-toggleIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M8.5 12C8.5 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 12L12 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="20" r="1.5" fill="currentColor"/></svg>` +
+    `<span data-di-toggle-count-value="network">0</span>` +
+    `<span class="di-toggleErr" data-di-toggle-error="network" aria-label="Network errors">` +
+    `<span class="di-toggleErrIcon">!</span>` +
+    `<span data-di-toggle-error-value="network">0</span>` +
+    `</span>` +
+    `</span>` +
+    `</span>`;
+exports.CONSOLE_TAB_HTML = `<svg class="di-tabIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.5C4 4.67 4.67 4 5.5 4H18.5C19.33 4 20 4.67 20 5.5V15.5C20 16.33 19.33 17 18.5 17H13.5L12 18.5L10.5 17H5.5C4.67 17 4 16.33 4 15.5V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M7 11H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>` +
+    `<span>Console</span>` +
+    `<span class="di-badge" data-di-count="console">0</span>`;
+exports.NETWORK_TAB_HTML = `<svg class="di-tabIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M8.5 12C8.5 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 12L12 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="20" r="1.5" fill="currentColor"/></svg>` +
+    `<span>Network</span>` +
+    `<span class="di-badge" data-di-count="network">0</span>`;

package/lib/ui/panel/dom/index.d.ts

@@ -0,0 +1,2 @@
+export { buildPanelDOM } from "./buildPanelDOM";
+export type { PanelCountersDOM, PanelDOM } from "./types";

package/lib/ui/panel/dom/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildPanelDOM = void 0;
+var buildPanelDOM_1 = require("./buildPanelDOM");
+Object.defineProperty(exports, "buildPanelDOM", { enumerable: true, get: function () { return buildPanelDOM_1.buildPanelDOM; } });

package/lib/ui/panel/dom/types.d.ts

@@ -0,0 +1,25 @@
+import type { createLogList } from "../../logList";
+export type PanelCountersDOM = {
+    headerConsoleCount: HTMLElement;
+    headerNetworkCount: HTMLElement;
+    toggleConsoleCount: HTMLElement;
+    toggleNetworkCount: HTMLElement;
+    toggleConsoleErrorCount: HTMLElement;
+    toggleNetworkErrorCount: HTMLElement;
+    toggleConsoleErrorWrap: HTMLElement;
+    toggleNetworkErrorWrap: HTMLElement;
+};
+export type PanelDOM = {
+    root: HTMLDivElement;
+    toggleBtn: HTMLButtonElement;
+    panel: HTMLDivElement;
+    header: HTMLDivElement;
+    body: HTMLDivElement;
+    closeBtn: HTMLButtonElement;
+    clearBtn: HTMLButtonElement;
+    consoleTab: HTMLButtonElement;
+    networkTab: HTMLButtonElement;
+    resizeHandle: HTMLDivElement;
+    list: ReturnType<typeof createLogList>;
+    counters: PanelCountersDOM;
+};

package/lib/ui/panel/dom/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/panel/index.d.ts

@@ -0,0 +1,15 @@
+import type { LogStorage } from "../../storage/logStorage";
+export type PanelOptions = {
+    storage: LogStorage;
+    title?: string;
+    initiallyOpen?: boolean;
+    mount?: HTMLElement;
+};
+export type PanelHandle = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    destroy: () => void;
+    isOpen: () => boolean;
+};
+export declare function createPanel(options: PanelOptions): PanelHandle;

package/lib/ui/panel/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPanel = createPanel;
+const ensureDocument_1 = require("./shared/ensureDocument");
+const ensureStyle_1 = require("./shared/ensureStyle");
+const dom_1 = require("./dom");
+const state_1 = require("./state");
+const behavior_1 = require("./behavior");
+function createPanel(options) {
+    var _a;
+    const doc = (0, ensureDocument_1.ensureDocument)();
+    (0, ensureStyle_1.ensureStyle)(doc);
+    const dom = (0, dom_1.buildPanelDOM)(doc, options);
+    const state = (0, state_1.createPanelState)((_a = options.initiallyOpen) !== null && _a !== void 0 ? _a : false);
+    return (0, behavior_1.setupPanelBehavior)(dom, state, options.storage);
+}

package/lib/ui/panel/resize/attachResizeHandling.d.ts

@@ -0,0 +1,2 @@
+import type { ResizeControls } from "./types";
+export declare function attachResizeHandling(panel: HTMLElement, resizeHandle: HTMLElement): ResizeControls;

package/lib/ui/panel/resize/attachResizeHandling.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.attachResizeHandling = attachResizeHandling;
+const shared_1 = require("../shared");
+function attachResizeHandling(panel, resizeHandle) {
+    var _a;
+    const MAX_WIDTH_CAP = 920;
+    const MAX_HEIGHT_CAP = 720;
+    const MARGIN_X = 24;
+    const MARGIN_Y = 68;
+    const minSize = (() => {
+        const r = panel.getBoundingClientRect();
+        return { w: Math.round(r.width), h: Math.round(r.height) };
+    })();
+    const getMaxSize = () => {
+        const win = (0, shared_1.getWindow)();
+        const vw = typeof win.innerWidth === "number" ? win.innerWidth : 0;
+        const vh = typeof win.innerHeight === "number" ? win.innerHeight : 0;
+        return {
+            w: Math.max(200, Math.min(MAX_WIDTH_CAP, vw - MARGIN_X)),
+            h: Math.max(180, Math.min(MAX_HEIGHT_CAP, vh - MARGIN_Y)),
+        };
+    };
+    const getCurrentSize = () => {
+        const r = panel.getBoundingClientRect();
+        return { w: Math.round(r.width), h: Math.round(r.height) };
+    };
+    const applySize = (next) => {
+        const max = getMaxSize();
+        const effMinW = Math.min(minSize.w, max.w);
+        const effMinH = Math.min(minSize.h, max.h);
+        const w = (0, shared_1.clamp)(next.w, effMinW, max.w);
+        const h = (0, shared_1.clamp)(next.h, effMinH, max.h);
+        panel.style.width = `${w}px`;
+        panel.style.height = `${h}px`;
+    };
+    const ensureWithinViewport = () => {
+        if (!panel.style.width && !panel.style.height)
+            return;
+        applySize(getCurrentSize());
+    };
+    let resizing = false;
+    let startX = 0;
+    let startY = 0;
+    let startW = 0;
+    let startH = 0;
+    const onResizeMove = (ev) => {
+        if (!resizing)
+            return;
+        const dx = startX - ev.clientX;
+        const dy = startY - ev.clientY;
+        applySize({ w: startW + dx, h: startH + dy });
+    };
+    const stopResize = () => {
+        var _a, _b, _c;
+        if (!resizing)
+            return;
+        resizing = false;
+        const win = (0, shared_1.getWindow)();
+        (_a = win.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "pointermove", onResizeMove);
+        (_b = win.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(win, "pointerup", stopResize);
+        (_c = win.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(win, "pointercancel", stopResize);
+    };
+    const onResizeStart = (ev) => {
+        var _a, _b, _c;
+        resizing = true;
+        startX = ev.clientX;
+        startY = ev.clientY;
+        const cur = getCurrentSize();
+        startW = cur.w;
+        startH = cur.h;
+        try {
+            resizeHandle.setPointerCapture(ev.pointerId);
+        }
+        catch (_d) {
+            void 0;
+        }
+        const win = (0, shared_1.getWindow)();
+        (_a = win.addEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "pointermove", onResizeMove);
+        (_b = win.addEventListener) === null || _b === void 0 ? void 0 : _b.call(win, "pointerup", stopResize);
+        (_c = win.addEventListener) === null || _c === void 0 ? void 0 : _c.call(win, "pointercancel", stopResize);
+    };
+    const onWindowResize = () => ensureWithinViewport();
+    const win = (0, shared_1.getWindow)();
+    (_a = win.addEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "resize", onWindowResize);
+    resizeHandle.addEventListener("pointerdown", onResizeStart);
+    const destroy = () => {
+        var _a;
+        resizeHandle.removeEventListener("pointerdown", onResizeStart);
+        stopResize();
+        (_a = win.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "resize", onWindowResize);
+    };
+    return { destroy };
+}

package/lib/ui/panel/resize/index.d.ts

@@ -0,0 +1,2 @@
+export { attachResizeHandling } from "./attachResizeHandling";
+export type { ResizeControls } from "./types";

package/lib/ui/panel/resize/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.attachResizeHandling = void 0;
+var attachResizeHandling_1 = require("./attachResizeHandling");
+Object.defineProperty(exports, "attachResizeHandling", { enumerable: true, get: function () { return attachResizeHandling_1.attachResizeHandling; } });

package/lib/ui/panel/resize/types.d.ts

@@ -0,0 +1,3 @@
+export type ResizeControls = {
+    destroy: () => void;
+};

package/lib/ui/panel/resize/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/panel/shared/dom.d.ts

@@ -0,0 +1 @@
+export declare function queryOrThrow<T extends Element>(root: ParentNode, selector: string): T;

package/lib/ui/panel/shared/dom.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.queryOrThrow = queryOrThrow;
+function queryOrThrow(root, selector) {
+    const el = root.querySelector(selector);
+    if (!el)
+        throw new Error(`Missing required element: ${selector}`);
+    return el;
+}

package/lib/ui/panel/shared/ensureDocument.d.ts

@@ -0,0 +1 @@
+export declare function ensureDocument(): Document;

package/lib/ui/panel/shared/ensureDocument.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureDocument = ensureDocument;
+function ensureDocument() {
+    if (typeof document === "undefined") {
+        throw new Error("Panel UI requires a browser-like environment with document.");
+    }
+    return document;
+}

package/lib/ui/panel/shared/ensureStyle.d.ts

@@ -0,0 +1 @@
+export declare function ensureStyle(doc: Document): void;

package/lib/ui/panel/shared/ensureStyle.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureStyle = ensureStyle;
+const panelStyles_1 = require("../../panelStyles");
+function ensureStyle(doc) {
+    const id = "dev-inspector-panel-style";
+    const existing = doc.getElementById(id);
+    if (existing)
+        return;
+    const style = doc.createElement("style");
+    style.id = id;
+    style.textContent = panelStyles_1.PANEL_CSS;
+    doc.head.append(style);
+}

package/lib/ui/panel/shared/index.d.ts

@@ -0,0 +1,6 @@
+export type { Size, TabKey, WindowLike } from "./types";
+export { clamp } from "./math";
+export { queryOrThrow } from "./dom";
+export { getWindow } from "./window";
+export { ensureDocument } from "./ensureDocument";
+export { ensureStyle } from "./ensureStyle";

package/lib/ui/panel/shared/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureStyle = exports.ensureDocument = exports.getWindow = exports.queryOrThrow = exports.clamp = void 0;
+var math_1 = require("./math");
+Object.defineProperty(exports, "clamp", { enumerable: true, get: function () { return math_1.clamp; } });
+var dom_1 = require("./dom");
+Object.defineProperty(exports, "queryOrThrow", { enumerable: true, get: function () { return dom_1.queryOrThrow; } });
+var window_1 = require("./window");
+Object.defineProperty(exports, "getWindow", { enumerable: true, get: function () { return window_1.getWindow; } });
+var ensureDocument_1 = require("./ensureDocument");
+Object.defineProperty(exports, "ensureDocument", { enumerable: true, get: function () { return ensureDocument_1.ensureDocument; } });
+var ensureStyle_1 = require("./ensureStyle");
+Object.defineProperty(exports, "ensureStyle", { enumerable: true, get: function () { return ensureStyle_1.ensureStyle; } });

package/lib/ui/panel/shared/math.d.ts

@@ -0,0 +1 @@
+export declare function clamp(n: number, min: number, max: number): number;

package/lib/ui/panel/shared/math.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clamp = clamp;
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}

package/lib/ui/panel/shared/types.d.ts

@@ -0,0 +1,11 @@
+export type TabKey = "console" | "network";
+export type Size = {
+    w: number;
+    h: number;
+};
+export type WindowLike = {
+    innerWidth?: number;
+    innerHeight?: number;
+    addEventListener?: (type: string, listener: EventListener, options?: unknown) => void;
+    removeEventListener?: (type: string, listener: EventListener, options?: unknown) => void;
+};

package/lib/ui/panel/shared/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/panel/shared/window.d.ts

@@ -0,0 +1,2 @@
+import type { WindowLike } from "./types";
+export declare function getWindow(): WindowLike;

package/lib/ui/panel/shared/window.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWindow = getWindow;
+function getWindow() {
+    return globalThis;
+}

package/lib/ui/panel/state/createPanelState.d.ts

@@ -0,0 +1,2 @@
+import type { PanelState } from "./types";
+export declare function createPanelState(initiallyOpen: boolean): PanelState;

package/lib/ui/panel/state/createPanelState.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPanelState = createPanelState;
+function createPanelState(initiallyOpen) {
+    return {
+        open: initiallyOpen,
+        tab: "console",
+        entries: { console: [], network: [] },
+        errorCounts: { console: 0, network: 0 },
+    };
+}

package/lib/ui/panel/state/index.d.ts

@@ -0,0 +1,2 @@
+export { createPanelState } from "./createPanelState";
+export type { PanelState } from "./types";

package/lib/ui/panel/state/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPanelState = void 0;
+var createPanelState_1 = require("./createPanelState");
+Object.defineProperty(exports, "createPanelState", { enumerable: true, get: function () { return createPanelState_1.createPanelState; } });

package/lib/ui/panel/state/types.d.ts

@@ -0,0 +1,8 @@
+import type { LogEntry } from "../../../utils/types";
+import type { TabKey } from "../shared/types";
+export type PanelState = {
+    open: boolean;
+    tab: TabKey;
+    entries: Record<TabKey, LogEntry[]>;
+    errorCounts: Record<TabKey, number>;
+};

package/lib/ui/panel/state/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });