@versini/ui-debug-overlay 2.0.1 → 2.1.0

package/dist/index.d.ts

@@ -1,133 +1,133 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type DebugOverlayProps = {
-	/**
-	 * Optional application state to display. If omitted, only manual snapshots
-	 * appear.
-	 */
-	appState?: unknown;
-	/**
-	 * Short label shown in the header.
-	 * @default "AppState"
-	 */
-	title?: string;
-	/**
-	 * Start collapsed (header only).
-	 * @default false
-	 */
-	initialCollapsed?: boolean;
-	/**
-	 * Identifier for manual snapshot targeting..
-	 * @default "default"
-	 */
-	overlayId?: string;
-	/**
-	 * Panel positioning.
-	 *
-	 * You can either provide a partial style object with any of the four edges
-	 * (top/right/bottom/left) OR use a shorthand keyword. Shorthand avoids having
-	 * to pass an object and also prevents the default (top/right) edges from being
-	 * applied when the intent is a left anchor.
-	 *
-	 * Supported shorthands:
-	 *  - "left" (alias of "top-left")
-	 *  - "right" (alias of "top-right")
-	 *  - "top", "bottom"
-	 *  - "top-left", "top-right", "bottom-left", "bottom-right"
-	 *
-	 */
-	position?:
-		| Partial<Pick<CSSStyleDeclaration, "top" | "right" | "bottom" | "left">>
-		| "left"
-		| "right"
-		| "top"
-		| "bottom"
-		| "top-left"
-		| "top-right"
-		| "bottom-left"
-		| "bottom-right";
-	/**
-	 * Maximum body height before scrolling (px number or CSS length e.g. "100vh").
-	 * @default "50svh"
-	 */
-	maxBodyHeight?: number | string;
-	/**
-	 * Pretty print spacing for JSON output.
-	 * @default 2
-	 */
-	indent?: number;
-	/**
-	 * Maximum snapshots retained in memory (FIFO)..
-	 * @default 50
-	 */
-	maxSnapshots?: number;
-	/**
-	 * Maximum snapshots shown without scrolling.
-	 * @default 10
-	 */
-	maxVisibleSnapshots?: number;
-	/**
-	 * Visual ordering of snapshots in the panel.
-	 *  - "desc": newest snapshot at the top.
-	 *  - "asc": oldest snapshot at the top.
-	 * Numbering ALWAYS reflects chronological order with #1 being the oldest
-	 * snapshot regardless of display order.
-	 * @default "desc"
-	 */
-	snapshotOrder?: "asc" | "desc";
-	/**
-	 * When true, appends the current snapshot count to the title (e.g. "AppState
-	 * (5)").
-	 * @default false
-	 */
-	appendSnapshotCountInTitle?: boolean;
-};
-
-/**
- * Manual snapshot input now requires an explicit label for clarity; we remove
- * the previous flexible single-argument signature to keep debug calls
- * unambiguous (always: label, data).
- */
-declare const LOG_YELLOW: "LOG_YELLOW";
-declare const LOG_GREEN: "LOG_GREEN";
-declare const LOG_BLUE: "LOG_BLUE";
-declare const LOG_MAGENTA: "LOG_MAGENTA";
-declare const LOG_RED: "LOG_RED";
-type LogColor = typeof LOG_YELLOW | typeof LOG_GREEN | typeof LOG_BLUE | typeof LOG_MAGENTA | typeof LOG_RED;
-/**
- * Test-only helper (not part of public API). Enables isolation across tests.
- * Exported unconditionally; consumer code should not rely on it.
- */
-declare function __resetDebugOverlayTestState(): void;
-interface DebugFnOptions {
-    color?: LogColor;
-    targetOverlays?: string[];
-}
-/**
- * React hook returning a function to push a manual snapshot into all (or
- * targeted) mounted `DebugOverlay` instances.
- *
- * Usage:
- * ```js
- * const debug = useDebugOverlay();
- * debug("loaded", { user, meta }, LOG_GREEN);
- * debug("error", errorObj, { color: LOG_RED, targetOverlays: ["errors"] });
- * ```
- *
- * Parameters when invoking the returned function:
- *  - label: short string identifying the snapshot category.
- *  - data: any serializable (or even cyclic) value; cyclic structures are
- *          replaced with "[Circular]" markers.
- *  - options: either a LogColor constant OR an object with `color` and
- *             optional `targetOverlays` (array of overlayId strings). When
- *             `targetOverlays` is omitted or empty, the snapshot broadcasts to
- *             every mounted overlay.
- *
- * The hook itself has no dependencies and returns a stable callback identity
- * for the component lifetime, keeping re-renders minimal.
- *
- */
-declare function useDebugOverlay(): (label: string, data: unknown, options?: LogColor | DebugFnOptions) => void;
-declare const DebugOverlay: ({ appState, title, initialCollapsed, overlayId, position, maxBodyHeight, indent, maxSnapshots, maxVisibleSnapshots, snapshotOrder, appendSnapshotCountInTitle, }: DebugOverlayProps) => react_jsx_runtime.JSX.Element;
-
-export { type DebugFnOptions, DebugOverlay, type DebugOverlayProps, LOG_BLUE, LOG_GREEN, LOG_MAGENTA, LOG_RED, LOG_YELLOW, type LogColor, __resetDebugOverlayTestState, useDebugOverlay };
+import { JSX } from 'react/jsx-runtime';
+
+/**
+ * Test-only helper (not part of public API). Enables isolation across tests.
+ * Exported unconditionally; consumer code should not rely on it.
+ */
+export declare function __resetDebugOverlayTestState(): void;
+
+export declare interface DebugFnOptions {
+    color?: LogColor;
+    targetOverlays?: string[];
+}
+
+export declare const DebugOverlay: ({ appState, title, initialCollapsed, overlayId, position, maxBodyHeight, indent, maxSnapshots, maxVisibleSnapshots, snapshotOrder, appendSnapshotCountInTitle, }: DebugOverlayProps) => JSX.Element;
+
+export declare type DebugOverlayProps = {
+    /**
+     * Optional application state to display. If omitted, only manual snapshots
+     * appear.
+     */
+    appState?: unknown;
+    /**
+     * Short label shown in the header.
+     * @default "AppState"
+     */
+    title?: string;
+    /**
+     * Start collapsed (header only).
+     * @default false
+     */
+    initialCollapsed?: boolean;
+    /**
+     * Identifier for manual snapshot targeting..
+     * @default "default"
+     */
+    overlayId?: string;
+    /**
+     * Panel positioning.
+     *
+     * You can either provide a partial style object with any of the four edges
+     * (top/right/bottom/left) OR use a shorthand keyword. Shorthand avoids having
+     * to pass an object and also prevents the default (top/right) edges from being
+     * applied when the intent is a left anchor.
+     *
+     * Supported shorthands:
+     *  - "left" (alias of "top-left")
+     *  - "right" (alias of "top-right")
+     *  - "top", "bottom"
+     *  - "top-left", "top-right", "bottom-left", "bottom-right"
+     *
+     */
+    position?: Partial<Pick<CSSStyleDeclaration, "top" | "right" | "bottom" | "left">> | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Maximum body height before scrolling (px number or CSS length e.g. "100vh").
+     * @default "50svh"
+     */
+    maxBodyHeight?: number | string;
+    /**
+     * Pretty print spacing for JSON output.
+     * @default 2
+     */
+    indent?: number;
+    /**
+     * Maximum snapshots retained in memory (FIFO)..
+     * @default 50
+     */
+    maxSnapshots?: number;
+    /**
+     * Maximum snapshots shown without scrolling.
+     * @default 10
+     */
+    maxVisibleSnapshots?: number;
+    /**
+     * Visual ordering of snapshots in the panel.
+     *  - "desc": newest snapshot at the top.
+     *  - "asc": oldest snapshot at the top.
+     * Numbering ALWAYS reflects chronological order with #1 being the oldest
+     * snapshot regardless of display order.
+     * @default "desc"
+     */
+    snapshotOrder?: "asc" | "desc";
+    /**
+     * When true, appends the current snapshot count to the title (e.g. "AppState
+     * (5)").
+     * @default false
+     */
+    appendSnapshotCountInTitle?: boolean;
+};
+
+export declare const LOG_BLUE: "LOG_BLUE";
+
+export declare const LOG_GREEN: "LOG_GREEN";
+
+export declare const LOG_MAGENTA: "LOG_MAGENTA";
+
+export declare const LOG_RED: "LOG_RED";
+
+/**
+ * Manual snapshot input now requires an explicit label for clarity; we remove
+ * the previous flexible single-argument signature to keep debug calls
+ * unambiguous (always: label, data).
+ */
+export declare const LOG_YELLOW: "LOG_YELLOW";
+
+export declare type LogColor = typeof LOG_YELLOW | typeof LOG_GREEN | typeof LOG_BLUE | typeof LOG_MAGENTA | typeof LOG_RED;
+
+/**
+ * React hook returning a function to push a manual snapshot into all (or
+ * targeted) mounted `DebugOverlay` instances.
+ *
+ * Usage:
+ * ```js
+ * const debug = useDebugOverlay();
+ * debug("loaded", { user, meta }, LOG_GREEN);
+ * debug("error", errorObj, { color: LOG_RED, targetOverlays: ["errors"] });
+ * ```
+ *
+ * Parameters when invoking the returned function:
+ *  - label: short string identifying the snapshot category.
+ *  - data: any serializable (or even cyclic) value; cyclic structures are
+ *          replaced with "[Circular]" markers.
+ *  - options: either a LogColor constant OR an object with `color` and
+ *             optional `targetOverlays` (array of overlayId strings). When
+ *             `targetOverlays` is omitted or empty, the snapshot broadcasts to
+ *             every mounted overlay.
+ *
+ * The hook itself has no dependencies and returns a stable callback identity
+ * for the component lifetime, keeping re-renders minimal.
+ *
+ */
+export declare function useDebugOverlay(): (label: string, data: unknown, options?: LogColor | DebugFnOptions) => void;
+
+export { }

package/dist/index.js

@@ -1,24 +1,550 @@
-import { DebugOverlay as r, LOG_BLUE as i, LOG_GREEN as t, LOG_MAGENTA as O, LOG_RED as o, LOG_YELLOW as L, __resetDebugOverlayTestState as G, useDebugOverlay as s } from "./components/DebugOverlay/DebugOverlay.js";
 /*!
-  @versini/ui-debug-overlay v2.0.1
+  @versini/ui-debug-overlay v2.1.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_DEBUG_OVERLAY__ || (window.__VERSINI_UI_DEBUG_OVERLAY__ = {
-    version: "2.0.1",
-    buildTime: "10/17/2025 12:55 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_DEBUG_OVERLAY__) {
+    window.__VERSINI_UI_DEBUG_OVERLAY__ = {
+      version: "2.1.0",
+      buildTime: "11/04/2025 03:45 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-export {
-  r as DebugOverlay,
-  i as LOG_BLUE,
-  t as LOG_GREEN,
-  O as LOG_MAGENTA,
-  o as LOG_RED,
-  L as LOG_YELLOW,
-  G as __resetDebugOverlayTestState,
-  s as useDebugOverlay
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/components/DebugOverlay/DebugOverlay.tsx
+
+
+/**
+ * Manual snapshot input now requires an explicit label for clarity; we remove
+ * the previous flexible single-argument signature to keep debug calls
+ * unambiguous (always: label, data).
+ */ const LOG_YELLOW = "LOG_YELLOW";
+const LOG_GREEN = "LOG_GREEN";
+const LOG_BLUE = "LOG_BLUE";
+const LOG_MAGENTA = "LOG_MAGENTA";
+const LOG_RED = "LOG_RED";
+const MANUAL_BUFFER_LIMIT = 200;
+let manualSeqCounter = 0; // shared seq for manual + state via helper
+const manualBuffer = [];
+const manualSubscribers = new Set();
+/**
+ * Test-only helper (not part of public API). Enables isolation across tests.
+ * Exported unconditionally; consumer code should not rely on it.
+ */ function __resetDebugOverlayTestState() {
+    manualBuffer.length = 0;
+    manualSeqCounter = 0;
+}
+function nextSeq() {
+    return manualSeqCounter++;
+}
+function pushDebugSnapshot(input) {
+    const snap = {
+        kind: "manual",
+        ts: Date.now(),
+        seq: nextSeq(),
+        label: input.label,
+        data: input.data,
+        color: input.color,
+        targetOverlays: input.targetOverlays && input.targetOverlays.length ? [
+            ...input.targetOverlays
+        ] : undefined
+    };
+    manualBuffer.push(snap);
+    if (manualBuffer.length > MANUAL_BUFFER_LIMIT) {
+        manualBuffer.shift();
+    }
+    manualSubscribers.forEach((cb)=>cb(snap));
+}
+/**
+ * React hook returning a function to push a manual snapshot into all (or
+ * targeted) mounted `DebugOverlay` instances.
+ *
+ * Usage:
+ * ```js
+ * const debug = useDebugOverlay();
+ * debug("loaded", { user, meta }, LOG_GREEN);
+ * debug("error", errorObj, { color: LOG_RED, targetOverlays: ["errors"] });
+ * ```
+ *
+ * Parameters when invoking the returned function:
+ *  - label: short string identifying the snapshot category.
+ *  - data: any serializable (or even cyclic) value; cyclic structures are
+ *          replaced with "[Circular]" markers.
+ *  - options: either a LogColor constant OR an object with `color` and
+ *             optional `targetOverlays` (array of overlayId strings). When
+ *             `targetOverlays` is omitted or empty, the snapshot broadcasts to
+ *             every mounted overlay.
+ *
+ * The hook itself has no dependencies and returns a stable callback identity
+ * for the component lifetime, keeping re-renders minimal.
+ *
+ */ function useDebugOverlay() {
+    return useCallback((label, data, options)=>{
+        if (typeof options === "string") {
+            pushDebugSnapshot({
+                label,
+                data,
+                color: options
+            });
+        } else {
+            pushDebugSnapshot({
+                label,
+                data,
+                color: options?.color,
+                targetOverlays: options?.targetOverlays
+            });
+        }
+    }, []);
+}
+/**
+ * Cycle‑safe, deterministic JSON stringify (orders object keys).
+ */ function safeStringify(value, space = 2) {
+    const seen = new WeakSet();
+    const sortKeys = (val)=>{
+        if (!val || typeof val !== "object" || val instanceof Date || val instanceof RegExp) {
+            return val;
+        }
+        if (seen.has(val)) {
+            return "[Circular]";
+        }
+        seen.add(val);
+        if (Array.isArray(val)) {
+            return val.map(sortKeys);
+        }
+        const out = {};
+        for (const k of Object.keys(val).sort()){
+            out[k] = sortKeys(val[k]);
+        }
+        return out;
+    };
+    try {
+        return JSON.stringify(sortKeys(value), null, space);
+    } catch (err) {
+        return `<<unserializable: ${err.message}>>`;
+    }
+}
+const DebugOverlay = ({ appState, title = "AppState", initialCollapsed = false, overlayId = "default", position, maxBodyHeight = "50svh", indent = 2, maxSnapshots = 50, maxVisibleSnapshots = 10, snapshotOrder = "desc", appendSnapshotCountInTitle = false })=>{
+    const [collapsed, setCollapsed] = useState(initialCollapsed);
+    const [copied, setCopied] = useState(false);
+    const containerRef = useRef(null);
+    const [snapshots, setSnapshots] = useState([]);
+    const [manualSnaps, setManualSnaps] = useState(()=>// Apply same targeting filter to initial buffered snapshots as we do for
+        // live subscription events so targeted snapshots don't leak to unrelated
+        // overlays.
+        manualBuffer.filter((m)=>!m.targetOverlays || m.targetOverlays.length === 0 || m.targetOverlays.includes(overlayId)));
+    // Serialize state only if provided; overlay can operate in manual-only mode.
+    const json = useMemo(()=>appState !== undefined ? safeStringify(appState, indent) : null, [
+        appState,
+        indent
+    ]);
+    // Capture snapshot when appState changes (referential).
+    useEffect(()=>{
+        if (json == null) {
+            return; // no appState provided: skip automatic state snapshotting
+        }
+        setSnapshots((prev)=>[
+                {
+                    ts: Date.now(),
+                    json
+                },
+                ...prev
+            ].slice(0, maxSnapshots));
+    }, [
+        json,
+        maxSnapshots
+    ]);
+    // Subscribe to manual snapshots (external pushes).
+    useEffect(()=>{
+        const handler = (s)=>{
+            /**
+			 * Filter by overlay target: include if broadcast (no targetOverlays) or if
+			 * overlayId present in targetOverlays.
+			 */ if (!s.targetOverlays || s.targetOverlays.length === 0 || s.targetOverlays.includes(overlayId)) {
+                setManualSnaps((prev)=>[
+                        ...prev,
+                        s
+                    ]);
+            }
+        };
+        manualSubscribers.add(handler);
+        return ()=>{
+            manualSubscribers.delete(handler);
+        };
+    }, [
+        overlayId
+    ]);
+    // Build unified snapshot list.
+    const unifiedAsc = useMemo(()=>{
+        /**
+		 * State snapshots: `snapshots` is newest-first; convert to ascending & add
+		 * seq.
+		 */ const stateAsc = [
+            ...snapshots
+        ].reverse().map((s)=>({
+                kind: "state",
+                ts: s.ts,
+                json: s.json,
+                seq: nextSeq()
+            }));
+        /**
+		 * Manual snapshots already oldest-first in manualBuffer/ manualSnaps; but we
+		 * rely on local state manualSnaps (which reflects buffer at mount + pushes).
+		 */ const manualAsc = manualSnaps.map((m)=>({
+                kind: "manual",
+                ts: m.ts,
+                seq: m.seq,
+                label: m.label,
+                color: m.color,
+                json: safeStringify(m.data, indent)
+            }));
+        /**
+		 * Merge two ascending arrays by time then seq. Since sizes are small, a
+		 * simple concat + sort is fine (keeps code simpler than manual merge);
+		 * optimize if needed.
+		 */ const merged = [
+            ...stateAsc,
+            ...manualAsc
+        ];
+        merged.sort((a, b)=>a.ts === b.ts ? a.seq - b.seq : a.ts - b.ts);
+        return merged;
+    }, [
+        snapshots,
+        manualSnaps,
+        indent
+    ]);
+    const displayList = useMemo(()=>snapshotOrder === "asc" ? unifiedAsc : [
+            ...unifiedAsc
+        ].reverse(), [
+        snapshotOrder,
+        unifiedAsc
+    ]);
+    const copy = useCallback(()=>{
+        const lines = [];
+        lines.push(`${title} (total snapshots: ${unifiedAsc.length})`);
+        unifiedAsc.forEach((s, idx)=>{
+            const d = new Date(s.ts);
+            const ts = d.toLocaleTimeString(undefined, {
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: false
+            });
+            const labelPart = s.kind === "manual" && s.label ? ` [${s.label}]` : "";
+            lines.push(`--- ${ts} (#${idx + 1})${labelPart} ---`);
+            lines.push(s.json);
+        });
+        const text = lines.join("\n");
+        if (navigator?.clipboard?.writeText) {
+            navigator.clipboard.writeText(text).then(()=>{
+                setCopied(true);
+                setTimeout(()=>setCopied(false), 1300);
+            });
+        }
+    }, [
+        title,
+        unifiedAsc
+    ]);
+    const clear = useCallback(()=>{
+        // Clear all snapshots (state + manual) and purge global manual buffer.
+        setSnapshots([]);
+        setManualSnaps([]);
+        manualBuffer.length = 0;
+    }, []);
+    // Normalize position (object or shorthand) into edge declarations.
+    const normalizedEdges = useMemo(()=>{
+        if (!position) {
+            return {};
+        }
+        if (typeof position === "string") {
+            switch(position){
+                case "left":
+                case "top-left":
+                    return {
+                        top: "0",
+                        left: "0"
+                    };
+                case "right":
+                case "top-right":
+                    return {
+                        top: "0",
+                        right: "0"
+                    };
+                case "bottom-left":
+                    return {
+                        bottom: "0",
+                        left: "0"
+                    };
+                case "bottom-right":
+                    return {
+                        bottom: "0",
+                        right: "0"
+                    };
+                case "bottom":
+                    return {
+                        bottom: "0",
+                        right: "0"
+                    };
+                case "top":
+                default:
+                    return {
+                        top: "0",
+                        right: "0"
+                    };
+            }
+        }
+        // Shallow copy to avoid mutating caller object.
+        const obj = {};
+        for (const k of [
+            "top",
+            "right",
+            "bottom",
+            "left"
+        ]){
+            const v = position[k];
+            if (v !== undefined) {
+                obj[k] = String(v);
+            }
+        }
+        return obj;
+    }, [
+        position
+    ]);
+    /**
+	 * Final edges: if neither vertical edge provided, default to top:0. If neither
+	 * horizontal edge provided, default to right:0. This preserves previous
+	 * behavior while respecting left-anchored shorthands (they supply left so we
+	 * don't inject right).
+	 */ const finalEdges = useMemo(()=>{
+        const out = {
+            ...normalizedEdges
+        };
+        if (!("top" in out) && !("bottom" in out)) {
+            out.top = "0";
+        }
+        if (!("left" in out) && !("right" in out)) {
+            out.right = "0";
+        }
+        return out;
+    }, [
+        normalizedEdges
+    ]);
+    // Keep overlay inside visual viewport when software keyboard shifts layout.
+    useEffect(()=>{
+        const vv = typeof window !== "undefined" ? window.visualViewport : null;
+        if (!vv) {
+            return;
+        }
+        const update = ()=>{
+            if (!containerRef.current) {
+                return;
+            }
+            // Adjust dynamic top only if caller didn't set top/bottom explicitly.
+            if (!("top" in finalEdges) && !("bottom" in finalEdges)) {
+                containerRef.current.style.top = `${vv.offsetTop}px`;
+            }
+            // Adjust dynamic right only if neither left nor right explicitly set.
+            if (!("right" in finalEdges) && !("left" in finalEdges)) {
+                const rightGap = Math.max(0, Math.round(window.innerWidth - (vv.offsetLeft + vv.width)));
+                containerRef.current.style.right = `${rightGap}px`;
+            }
+        };
+        vv.addEventListener("resize", update);
+        vv.addEventListener("scroll", update);
+        update();
+        return ()=>{
+            vv.removeEventListener("resize", update);
+            vv.removeEventListener("scroll", update);
+        };
+    }, [
+        finalEdges
+    ]);
+    const snapshotCount = unifiedAsc.length;
+    const headerTitle = appendSnapshotCountInTitle ? `${title} (${snapshotCount})` : title;
+    // Base style for all snapshots; manual ones get color variants.
+    const statePreStyle = {
+        margin: 0,
+        padding: 0
+    };
+    const manualBase = {
+        margin: 0,
+        padding: 0,
+        paddingLeft: 4
+    };
+    const manualColorStyles = {
+        LOG_YELLOW: {
+            color: "#ffcf7f",
+            background: "rgba(255,200,0,0.08)",
+            border: "2px solid #cc9a00"
+        },
+        LOG_GREEN: {
+            color: "#b6ffb6",
+            background: "rgba(0,255,0,0.08)",
+            border: "2px solid #00aa00"
+        },
+        LOG_BLUE: {
+            color: "#b6d9ff",
+            background: "rgba(0,136,255,0.08)",
+            border: "2px solid #0066cc"
+        },
+        LOG_MAGENTA: {
+            color: "#ffb6ef",
+            background: "rgba(255,0,200,0.08)",
+            border: "2px solid #cc0088"
+        },
+        LOG_RED: {
+            color: "#ffb6b6",
+            background: "rgba(255,0,0,0.08)",
+            border: "2px solid #cc0000"
+        }
+    };
+    function styleForManual(color) {
+        const variant = color && manualColorStyles[color] ? manualColorStyles[color] : manualColorStyles.LOG_YELLOW;
+        return {
+            ...manualBase,
+            color: variant.color,
+            background: variant.background,
+            borderLeft: variant.border
+        };
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        "aria-label": "Debug overlay",
+        style: {
+            position: "fixed",
+            fontFamily: "monospace",
+            zIndex: 9999,
+            fontSize: 12,
+            color: "#d1faff",
+            background: "rgba(0,0,0,0.78)",
+            border: "1px solid #055",
+            borderTop: "none",
+            borderRight: "none",
+            borderBottomLeftRadius: 6,
+            maxWidth: 360,
+            boxShadow: "0 2px 6px rgba(0,0,0,0.4)",
+            ...finalEdges
+        },
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    padding: "4px 6px 4px 8px",
+                    borderBottom: collapsed ? "none" : "1px solid #044",
+                    background: "#022",
+                    borderBottomLeftRadius: collapsed ? 6 : 0,
+                    userSelect: "none"
+                },
+                children: [
+                    /*#__PURE__*/ jsx("strong", {
+                        style: {
+                            fontWeight: 600,
+                            fontSize: 11
+                        },
+                        children: headerTitle
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            marginLeft: "auto",
+                            display: "flex",
+                            gap: 4
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: ()=>setCollapsed((c)=>!c),
+                                "aria-label": collapsed ? "Expand debug overlay" : "Collapse debug overlay",
+                                style: buttonStyle,
+                                children: collapsed ? "+" : "−"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: copy,
+                                "aria-label": "Copy debug JSON",
+                                style: {
+                                    ...buttonStyle,
+                                    color: copied ? "#0f0" : buttonStyle.color
+                                },
+                                children: copied ? "Copied" : "Copy"
+                            }),
+                            unifiedAsc.length > 1 && /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: clear,
+                                "aria-label": "Clear stored snapshots",
+                                style: buttonStyle,
+                                children: "Clear"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            !collapsed && /*#__PURE__*/ jsxs("div", {
+                style: {
+                    margin: 0,
+                    padding: "6px 8px 8px 8px",
+                    maxHeight: maxBodyHeight,
+                    overflow: "auto",
+                    lineHeight: 1.25,
+                    fontSize: 11,
+                    fontFamily: "monospace",
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word"
+                },
+                children: [
+                    displayList.slice(0, maxVisibleSnapshots).map((s)=>{
+                        /**
+						 * Need global chronological index irrespective of current order. Find in
+						 * unifiedAsc (ascending) by seq (unique) for numbering.
+						 */ const ascIndex = unifiedAsc.findIndex((u)=>u.seq === s.seq);
+                        const d = new Date(s.ts);
+                        const ts = d.toLocaleTimeString(undefined, {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            second: "2-digit",
+                            hour12: false
+                        });
+                        const labelPart = s.kind === "manual" && s.label ? ` [${s.label}]` : "";
+                        return /*#__PURE__*/ jsx("pre", {
+                            style: s.kind === "manual" ? styleForManual(s.color) : statePreStyle,
+                            children: `--- ${ts} (#${ascIndex + 1})${labelPart} ---\n${s.json}`
+                        }, `${s.kind}-${s.seq}`);
+                    }),
+                    displayList.length > maxVisibleSnapshots && /*#__PURE__*/ jsx("div", {
+                        style: {
+                            opacity: 0.7,
+                            marginTop: 4
+                        },
+                        children: `(+${displayList.length - maxVisibleSnapshots} snapshots not shown)`
+                    })
+                ]
+            })
+        ]
+    });
+};
+const buttonStyle = {
+    background: "#033",
+    color: "#0ff",
+    border: "1px solid #055",
+    borderRadius: 4,
+    fontSize: 10,
+    padding: "2px 6px",
+    cursor: "pointer",
+    fontFamily: "inherit"
 };
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+export { DebugOverlay, LOG_BLUE, LOG_GREEN, LOG_MAGENTA, LOG_RED, LOG_YELLOW, __resetDebugOverlayTestState, useDebugOverlay };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-debug-overlay",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,13 +20,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -39,5 +39,5 @@
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1"
 	},
-	"gitHead": "67e049c9b2e46e8f52509bf6198ca0cdaf5d970a"
+	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
 }

package/dist/components/DebugOverlay/DebugOverlay.js

@@ -1,350 +0,0 @@
-import { jsxs as L, jsx as g } from "react/jsx-runtime";
-import { useCallback as _, useState as x, useRef as V, useMemo as h, useEffect as S } from "react";
-const re = "LOG_YELLOW", ne = "LOG_GREEN", se = "LOG_BLUE", ae = "LOG_MAGENTA", le = "LOG_RED", ee = 200;
-let W = 0;
-const p = [], $ = /* @__PURE__ */ new Set();
-function ie() {
-  p.length = 0, W = 0;
-}
-function F() {
-  return W++;
-}
-function z(s) {
-  const a = {
-    kind: "manual",
-    ts: Date.now(),
-    seq: F(),
-    label: s.label,
-    data: s.data,
-    color: s.color,
-    targetOverlays: s.targetOverlays && s.targetOverlays.length ? [...s.targetOverlays] : void 0
-  };
-  p.push(a), p.length > ee && p.shift(), $.forEach((l) => l(a));
-}
-function ce() {
-  return _(
-    (s, a, l) => {
-      z(typeof l == "string" ? { label: s, data: a, color: l } : {
-        label: s,
-        data: a,
-        color: l?.color,
-        targetOverlays: l?.targetOverlays
-      });
-    },
-    []
-  );
-}
-function N(s, a = 2) {
-  const l = /* @__PURE__ */ new WeakSet(), c = (o) => {
-    if (!o || typeof o != "object" || o instanceof Date || o instanceof RegExp)
-      return o;
-    if (l.has(o))
-      return "[Circular]";
-    if (l.add(o), Array.isArray(o))
-      return o.map(c);
-    const y = {};
-    for (const d of Object.keys(o).sort())
-      y[d] = c(o[d]);
-    return y;
-  };
-  try {
-    return JSON.stringify(c(s), null, a);
-  } catch (o) {
-    return `<<unserializable: ${o.message}>>`;
-  }
-}
-const de = ({
-  appState: s,
-  title: a = "AppState",
-  initialCollapsed: l = !1,
-  overlayId: c = "default",
-  position: o,
-  maxBodyHeight: y = "50svh",
-  indent: d = 2,
-  maxSnapshots: C = 50,
-  maxVisibleSnapshots: v = 10,
-  snapshotOrder: A = "desc",
-  appendSnapshotCountInTitle: U = !1
-}) => {
-  const [b, I] = x(l), [R, T] = x(!1), m = V(null), [D, j] = x([]), [q, B] = x(
-    () => (
-      // Apply same targeting filter to initial buffered snapshots as we do for
-      // live subscription events so targeted snapshots don't leak to unrelated
-      // overlays.
-      p.filter(
-        (e) => !e.targetOverlays || e.targetOverlays.length === 0 || e.targetOverlays.includes(c)
-      )
-    )
-  ), E = h(
-    () => s !== void 0 ? N(s, d) : null,
-    [s, d]
-  );
-  S(() => {
-    E != null && j(
-      (e) => [{ ts: Date.now(), json: E }, ...e].slice(0, C)
-    );
-  }, [E, C]), S(() => {
-    const e = (t) => {
-      (!t.targetOverlays || t.targetOverlays.length === 0 || t.targetOverlays.includes(c)) && B((r) => [...r, t]);
-    };
-    return $.add(e), () => {
-      $.delete(e);
-    };
-  }, [c]);
-  const i = h(() => {
-    const e = [...D].reverse().map((n) => ({
-      kind: "state",
-      ts: n.ts,
-      json: n.json,
-      seq: F()
-    })), t = q.map((n) => ({
-      kind: "manual",
-      ts: n.ts,
-      seq: n.seq,
-      label: n.label,
-      color: n.color,
-      json: N(n.data, d)
-    })), r = [...e, ...t];
-    return r.sort((n, f) => n.ts === f.ts ? n.seq - f.seq : n.ts - f.ts), r;
-  }, [D, q, d]), k = h(
-    () => A === "asc" ? i : [...i].reverse(),
-    [A, i]
-  ), Y = _(() => {
-    const e = [];
-    e.push(`${a} (total snapshots: ${i.length})`), i.forEach((r, n) => {
-      const G = new Date(r.ts).toLocaleTimeString(void 0, {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: !1
-      }), Z = r.kind === "manual" && r.label ? ` [${r.label}]` : "";
-      e.push(`--- ${G} (#${n + 1})${Z} ---`), e.push(r.json);
-    });
-    const t = e.join(`
-`);
-    navigator?.clipboard?.writeText && navigator.clipboard.writeText(t).then(() => {
-      T(!0), setTimeout(() => T(!1), 1300);
-    });
-  }, [a, i]), P = _(() => {
-    j([]), B([]), p.length = 0;
-  }, []), M = h(() => {
-    if (!o)
-      return {};
-    if (typeof o == "string")
-      switch (o) {
-        case "left":
-        case "top-left":
-          return { top: "0", left: "0" };
-        case "right":
-        case "top-right":
-          return { top: "0", right: "0" };
-        case "bottom-left":
-          return { bottom: "0", left: "0" };
-        case "bottom-right":
-          return { bottom: "0", right: "0" };
-        case "bottom":
-          return { bottom: "0", right: "0" };
-        case "top":
-        default:
-          return { top: "0", right: "0" };
-      }
-    const e = {};
-    for (const t of ["top", "right", "bottom", "left"]) {
-      const r = o[t];
-      r !== void 0 && (e[t] = String(r));
-    }
-    return e;
-  }, [o]), u = h(() => {
-    const e = { ...M };
-    return !("top" in e) && !("bottom" in e) && (e.top = "0"), !("left" in e) && !("right" in e) && (e.right = "0"), e;
-  }, [M]);
-  S(() => {
-    const e = typeof window < "u" ? window.visualViewport : null;
-    if (!e)
-      return;
-    const t = () => {
-      if (m.current && (!("top" in u) && !("bottom" in u) && (m.current.style.top = `${e.offsetTop}px`), !("right" in u) && !("left" in u))) {
-        const r = Math.max(
-          0,
-          Math.round(window.innerWidth - (e.offsetLeft + e.width))
-        );
-        m.current.style.right = `${r}px`;
-      }
-    };
-    return e.addEventListener("resize", t), e.addEventListener("scroll", t), t(), () => {
-      e.removeEventListener("resize", t), e.removeEventListener("scroll", t);
-    };
-  }, [u]);
-  const H = i.length, J = U ? `${a} (${H})` : a, K = { margin: 0, padding: 0 }, Q = {
-    margin: 0,
-    padding: 0,
-    paddingLeft: 4
-  }, w = {
-    LOG_YELLOW: {
-      color: "#ffcf7f",
-      background: "rgba(255,200,0,0.08)",
-      border: "2px solid #cc9a00"
-    },
-    LOG_GREEN: {
-      color: "#b6ffb6",
-      background: "rgba(0,255,0,0.08)",
-      border: "2px solid #00aa00"
-    },
-    LOG_BLUE: {
-      color: "#b6d9ff",
-      background: "rgba(0,136,255,0.08)",
-      border: "2px solid #0066cc"
-    },
-    LOG_MAGENTA: {
-      color: "#ffb6ef",
-      background: "rgba(255,0,200,0.08)",
-      border: "2px solid #cc0088"
-    },
-    LOG_RED: {
-      color: "#ffb6b6",
-      background: "rgba(255,0,0,0.08)",
-      border: "2px solid #cc0000"
-    }
-  };
-  function X(e) {
-    const t = e && w[e] ? w[e] : w.LOG_YELLOW;
-    return {
-      ...Q,
-      color: t.color,
-      background: t.background,
-      borderLeft: t.border
-    };
-  }
-  return /* @__PURE__ */ L(
-    "div",
-    {
-      ref: m,
-      "aria-label": "Debug overlay",
-      style: {
-        position: "fixed",
-        fontFamily: "monospace",
-        zIndex: 9999,
-        fontSize: 12,
-        color: "#d1faff",
-        background: "rgba(0,0,0,0.78)",
-        border: "1px solid #055",
-        borderTop: "none",
-        borderRight: "none",
-        borderBottomLeftRadius: 6,
-        maxWidth: 360,
-        boxShadow: "0 2px 6px rgba(0,0,0,0.4)",
-        ...u
-      },
-      children: [
-        /* @__PURE__ */ L(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 6,
-              padding: "4px 6px 4px 8px",
-              borderBottom: b ? "none" : "1px solid #044",
-              background: "#022",
-              borderBottomLeftRadius: b ? 6 : 0,
-              userSelect: "none"
-            },
-            children: [
-              /* @__PURE__ */ g("strong", { style: { fontWeight: 600, fontSize: 11 }, children: J }),
-              /* @__PURE__ */ L("div", { style: { marginLeft: "auto", display: "flex", gap: 4 }, children: [
-                /* @__PURE__ */ g(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => I((e) => !e),
-                    "aria-label": b ? "Expand debug overlay" : "Collapse debug overlay",
-                    style: O,
-                    children: b ? "+" : "−"
-                  }
-                ),
-                /* @__PURE__ */ g(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: Y,
-                    "aria-label": "Copy debug JSON",
-                    style: {
-                      ...O,
-                      color: R ? "#0f0" : O.color
-                    },
-                    children: R ? "Copied" : "Copy"
-                  }
-                ),
-                i.length > 1 && /* @__PURE__ */ g(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: P,
-                    "aria-label": "Clear stored snapshots",
-                    style: O,
-                    children: "Clear"
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        !b && /* @__PURE__ */ L(
-          "div",
-          {
-            style: {
-              margin: 0,
-              padding: "6px 8px 8px 8px",
-              maxHeight: y,
-              overflow: "auto",
-              lineHeight: 1.25,
-              fontSize: 11,
-              fontFamily: "monospace",
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-word"
-            },
-            children: [
-              k.slice(0, v).map((e) => {
-                const t = i.findIndex((G) => G.seq === e.seq), n = new Date(e.ts).toLocaleTimeString(void 0, {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  second: "2-digit",
-                  hour12: !1
-                }), f = e.kind === "manual" && e.label ? ` [${e.label}]` : "";
-                return /* @__PURE__ */ g(
-                  "pre",
-                  {
-                    style: e.kind === "manual" ? X(e.color) : K,
-                    children: `--- ${n} (#${t + 1})${f} ---
-${e.json}`
-                  },
-                  `${e.kind}-${e.seq}`
-                );
-              }),
-              k.length > v && /* @__PURE__ */ g("div", { style: { opacity: 0.7, marginTop: 4 }, children: `(+${k.length - v} snapshots not shown)` })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}, O = {
-  background: "#033",
-  color: "#0ff",
-  border: "1px solid #055",
-  borderRadius: 4,
-  fontSize: 10,
-  padding: "2px 6px",
-  cursor: "pointer",
-  fontFamily: "inherit"
-};
-export {
-  de as DebugOverlay,
-  se as LOG_BLUE,
-  ne as LOG_GREEN,
-  ae as LOG_MAGENTA,
-  le as LOG_RED,
-  re as LOG_YELLOW,
-  ie as __resetDebugOverlayTestState,
-  ce as useDebugOverlay
-};