@versini/ui-debug-overlay 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arno Versini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,183 @@
+# @versini/ui-debug-overlay
+
+[![npm version](https://img.shields.io/npm/v/@versini/ui-debug-overlay?style=flat-square)](https://www.npmjs.com/package/@versini/ui-debug-overlay)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40versini%2Fui-debug-overlay?style=flat-square&label=size%20(gzip)>)
+
+> Lightweight always‑on React debug overlay for inspecting live state and manual snapshots (great on mobile / PWA / hybrid shells where devtools are awkward).
+
+`@versini/ui-debug-overlay` lets you:
+
+- Automatically snapshot an `appState` object on referential changes
+- Push manual, labeled, color‑coded snapshots from anywhere (via a hook)
+- Target snapshots to specific overlay instances
+- Copy a merged chronological timeline (optionally excluding manual snapshots)
+- Clear everything in a click
+- Position the panel with shorthands or explicit edges
+- Keep bundle weight minimal (inline styles only, no CSS frameworks)
+
+## Features
+
+- **⚡ Zero Config** – Drop in and pass `appState`
+- **🔄 Auto State Capture** – Retains a rolling window (FIFO) of snapshots
+- **📝 Manual Snapshots** – Arbitrary data logging with labels & colors
+- **🎯 Targetable** – Route manual events to named overlays
+- **🪄 Cycle‑Safe JSON** – Deterministic, circular reference tolerant stringify
+- **📋 One‑Click Copy** – Chronological timeline, numbering stable regardless of UI order
+- **🧹 Clear Control** – Reset buffer instantly
+- **📐 Flexible Position** – Shorthands or `{ top/right/bottom/left }`
+- **🔍 Order Toggle** – Show newest first while numbering still reflects true time
+- **🪶 Lightweight** – Pure inline styling, TypeScript types
+
+## Installation
+
+```bash
+npm install @versini/ui-debug-overlay
+```
+
+Peer deps: `react`, `react-dom`.
+
+## Quick Start
+
+```tsx
+import { DebugOverlay } from "@versini/ui-debug-overlay";
+
+export function App() {
+  const appState = { user: { id: 1, name: "Ada" }, online: true };
+  return (
+    <>
+      <YourRealApp />
+      <DebugOverlay appState={appState} />
+    </>
+  );
+}
+```
+
+## Manual Snapshots
+
+Use the hook to push ad‑hoc snapshots (successful responses, errors, timings, etc.).
+
+```tsx
+import {
+  useDebugSnapshot,
+  LOG_GREEN,
+  LOG_RED
+} from "@versini/ui-debug-overlay";
+
+function SomeLogic() {
+  const debug = useDebugSnapshot();
+
+  async function run() {
+    debug("start", { ts: Date.now() });
+    try {
+      const data = await fetch("/api/data").then((r) => r.json());
+      debug("success", data, LOG_GREEN);
+    } catch (e) {
+      debug("error", { message: (e as Error).message }, LOG_RED);
+    }
+  }
+
+  return <button onClick={run}>Run</button>;
+}
+```
+
+## Multiple / Targeted Overlays
+
+```tsx
+const debug = useDebugSnapshot();
+
+debug("metrics", { fps: 60 }, { targetOverlays: ["perf"] });
+
+debug("state-change", someStateSlice); // broadcast to all overlays
+
+return (
+  <>
+    <DebugOverlay overlayId="perf" position="left" title="Performance" />
+    <DebugOverlay
+      overlayId="main"
+      position="right"
+      title="Main State"
+      appState={rootState}
+    />
+  </>
+);
+```
+
+Rules:
+
+- Omit `targetOverlays` (or empty array) ⇒ broadcast
+- Non‑empty array ⇒ deliver only to overlays whose `overlayId` matches
+- Buffered (pre‑mount) manual snapshots still respect targeting when overlays mount
+
+## Positioning
+
+```tsx
+<DebugOverlay position="bottom-right" />
+<DebugOverlay position="left" />                {/* alias of top-left */}
+<DebugOverlay position={{ bottom: "8px", left: "8px" }} />
+```
+
+Supported shorthands: `left`, `right`, `top`, `bottom`, `top-left`, `top-right`, `bottom-left`, `bottom-right`.
+
+## Copy Behavior
+
+Pressing "Copy" produces a plain text timeline. Chronological numbering always starts at `#1` (oldest), even if UI order shows newest first. To exclude manual snapshots:
+
+```tsx
+<DebugOverlay appState={state} includeManualInCopy={false} />
+```
+
+## Collapsing
+
+```tsx
+<DebugOverlay initialCollapsed />
+```
+
+## Props
+
+| Prop                         | Type                       | Default      | Description                                                          |
+| ---------------------------- | -------------------------- | ------------ | -------------------------------------------------------------------- | ---------------------------------------------------- |
+| `appState`                   | `unknown`                  | –            | Value to snapshot on reference change. Omit for manual‑only overlay. |
+| `title`                      | `string`                   | `"AppState"` | Panel header.                                                        |
+| `initialCollapsed`           | `boolean`                  | `false`      | Start minimized.                                                     |
+| `overlayId`                  | `string`                   | `"default"`  | Name used for targeted manual snapshots.                             |
+| `position`                   | shorthand \| partial edges | –            | Placement via shorthand or `{ top/right/bottom/left }`.              |
+| `maxBodyHeight`              | `number                    | string`      | `320`                                                                | Scroll region max height.                            |
+| `indent`                     | `number`                   | `2`          | JSON indent spaces.                                                  |
+| `maxSnapshots`               | `number`                   | `50`         | Retained automatic state snapshot cap (FIFO).                        |
+| `maxVisibleSnapshots`        | `number`                   | `2`          | Visible snapshot limit; remainder summarized.                        |
+| `snapshotOrder`              | `"asc"                     | "desc"`      | `"desc"`                                                             | Visual ordering only. Numbering stays chronological. |
+| `appendSnapshotCountInTitle` | `boolean`                  | `false`      | Append live count to title.                                          |
+| `includeManualInCopy`        | `boolean`                  | `true`       | Include manual snapshots in copy output.                             |
+
+## Hook: `useDebugSnapshot()`
+
+```ts
+const debug = useDebugSnapshot();
+
+debug(
+  label: string,
+  data: unknown,
+  options?: LogColor | { color?: LogColor; targetOverlays?: string[] }
+);
+```
+
+Color constants: `LOG_YELLOW`, `LOG_GREEN`, `LOG_BLUE`, `LOG_MAGENTA`, `LOG_RED` (yellow is default fallback).
+
+## Tips
+
+- Keep `maxVisibleSnapshots` small (1–3) on narrow/mobile viewports
+- Derive / shape very large objects before passing to reduce noise & stringify cost
+- Multiple overlays can focus on separate domains (state vs. performance vs. network)
+- Use colors to visually cluster snapshot categories (success, error, timing)
+
+## Accessibility
+
+Buttons include accessible labels; simple semantic markup keeps the overlay screen‑reader friendly while remaining visually unobtrusive. Inline styles avoid CSS collisions.
+
+## License
+
+MIT © Arno Versini
+
+---
+
+Open an issue for enhancements (redaction hooks, diff mode, retention strategies, pause/resume, etc.).

package/dist/components/DebugOverlay/DebugOverlay.js

@@ -0,0 +1,352 @@
+import { jsxs as L, jsx as g } from "react/jsx-runtime";
+import { useCallback as _, useState as x, useRef as tt, useMemo as h, useEffect as G } from "react";
+const nt = "LOG_YELLOW", st = "LOG_GREEN", at = "LOG_BLUE", lt = "LOG_MAGENTA", it = "LOG_RED", et = 200;
+let F = 0;
+const p = [], $ = /* @__PURE__ */ new Set();
+function ct() {
+  p.length = 0, F = 0;
+}
+function U() {
+  return F++;
+}
+function N(s) {
+  const a = {
+    kind: "manual",
+    ts: Date.now(),
+    seq: U(),
+    label: s.label,
+    data: s.data,
+    color: s.color,
+    targetOverlays: s.targetOverlays && s.targetOverlays.length ? [...s.targetOverlays] : void 0
+  };
+  p.push(a), p.length > et && p.shift(), $.forEach((l) => l(a));
+}
+function dt() {
+  return _(
+    (s, a, l) => {
+      N(typeof l == "string" ? { label: s, data: a, color: l } : {
+        label: s,
+        data: a,
+        color: l?.color,
+        targetOverlays: l?.targetOverlays
+      });
+    },
+    []
+  );
+}
+function W(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 ut = ({
+  appState: s,
+  title: a = "AppState",
+  initialCollapsed: l = !1,
+  overlayId: c = "default",
+  position: o,
+  maxBodyHeight: y = 320,
+  indent: d = 2,
+  maxSnapshots: C = 50,
+  maxVisibleSnapshots: v = 2,
+  snapshotOrder: A = "desc",
+  appendSnapshotCountInTitle: Y = !1,
+  includeManualInCopy: R = !0
+}) => {
+  const [b, I] = x(l), [T, D] = x(!1), m = tt(null), [j, q] = x([]), [B, z] = 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(
+        (t) => !t.targetOverlays || t.targetOverlays.length === 0 || t.targetOverlays.includes(c)
+      )
+    )
+  ), E = h(
+    () => s !== void 0 ? W(s, d) : null,
+    [s, d]
+  );
+  G(() => {
+    E != null && q(
+      (t) => [{ ts: Date.now(), json: E }, ...t].slice(0, C)
+    );
+  }, [E, C]), G(() => {
+    const t = (e) => {
+      (!e.targetOverlays || e.targetOverlays.length === 0 || e.targetOverlays.includes(c)) && z((r) => [...r, e]);
+    };
+    return $.add(t), () => {
+      $.delete(t);
+    };
+  }, [c]);
+  const i = h(() => {
+    const t = [...j].reverse().map((n) => ({
+      kind: "state",
+      ts: n.ts,
+      json: n.json,
+      seq: U()
+    })), e = B.map((n) => ({
+      kind: "manual",
+      ts: n.ts,
+      seq: n.seq,
+      label: n.label,
+      color: n.color,
+      json: W(n.data, d)
+    })), r = [...t, ...e];
+    return r.sort((n, f) => n.ts === f.ts ? n.seq - f.seq : n.ts - f.ts), r;
+  }, [j, B, d]), k = h(
+    () => A === "asc" ? i : [...i].reverse(),
+    [A, i]
+  ), P = _(() => {
+    const t = [];
+    t.push(`${a} (total snapshots: ${i.length})`), i.forEach((r, n) => {
+      if (r.kind === "manual" && !R)
+        return;
+      const S = new Date(r.ts).toLocaleTimeString(void 0, {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: !1
+      }), V = r.kind === "manual" && r.label ? ` [${r.label}]` : "";
+      t.push(`--- ${S} (#${n + 1})${V} ---`), t.push(r.json);
+    });
+    const e = t.join(`
+`);
+    navigator?.clipboard?.writeText && navigator.clipboard.writeText(e).then(() => {
+      D(!0), setTimeout(() => D(!1), 1300);
+    });
+  }, [a, i, R]), H = _(() => {
+    q([]), z([]), 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 t = {};
+    for (const e of ["top", "right", "bottom", "left"]) {
+      const r = o[e];
+      r !== void 0 && (t[e] = String(r));
+    }
+    return t;
+  }, [o]), u = h(() => {
+    const t = { ...M };
+    return !("top" in t) && !("bottom" in t) && (t.top = "0"), !("left" in t) && !("right" in t) && (t.right = "0"), t;
+  }, [M]);
+  G(() => {
+    const t = typeof window < "u" ? window.visualViewport : null;
+    if (!t)
+      return;
+    const e = () => {
+      if (m.current && (!("top" in u) && !("bottom" in u) && (m.current.style.top = `${t.offsetTop}px`), !("right" in u) && !("left" in u))) {
+        const r = Math.max(
+          0,
+          Math.round(window.innerWidth - (t.offsetLeft + t.width))
+        );
+        m.current.style.right = `${r}px`;
+      }
+    };
+    return t.addEventListener("resize", e), t.addEventListener("scroll", e), e(), () => {
+      t.removeEventListener("resize", e), t.removeEventListener("scroll", e);
+    };
+  }, [u]);
+  const J = i.length, K = Y ? `${a} (${J})` : a, Q = { margin: 0, padding: 0 }, X = {
+    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 Z(t) {
+    const e = t && w[t] ? w[t] : w.LOG_YELLOW;
+    return {
+      ...X,
+      color: e.color,
+      background: e.background,
+      borderLeft: e.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: K }),
+              /* @__PURE__ */ L("div", { style: { marginLeft: "auto", display: "flex", gap: 4 }, children: [
+                /* @__PURE__ */ g(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => I((t) => !t),
+                    "aria-label": b ? "Expand debug overlay" : "Collapse debug overlay",
+                    style: O,
+                    children: b ? "+" : "−"
+                  }
+                ),
+                /* @__PURE__ */ g(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: P,
+                    "aria-label": "Copy debug JSON",
+                    style: {
+                      ...O,
+                      color: T ? "#0f0" : O.color
+                    },
+                    children: T ? "Copied" : "Copy"
+                  }
+                ),
+                i.length > 1 && /* @__PURE__ */ g(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: H,
+                    "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((t) => {
+                const e = i.findIndex((S) => S.seq === t.seq), n = new Date(t.ts).toLocaleTimeString(void 0, {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                  hour12: !1
+                }), f = t.kind === "manual" && t.label ? ` [${t.label}]` : "";
+                return /* @__PURE__ */ g(
+                  "pre",
+                  {
+                    style: t.kind === "manual" ? Z(t.color) : Q,
+                    children: `--- ${n} (#${e + 1})${f} ---
+${t.json}`
+                  },
+                  `${t.kind}-${t.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 {
+  ut as DebugOverlay,
+  at as LOG_BLUE,
+  st as LOG_GREEN,
+  lt as LOG_MAGENTA,
+  it as LOG_RED,
+  nt as LOG_YELLOW,
+  ct as __resetDebugOverlayTestState,
+  dt as useDebugSnapshot
+};

package/dist/index.d.ts

@@ -0,0 +1,100 @@
+import React from 'react';
+
+type DebugOverlayProps = {
+	/**
+	 * Optional application state to display. If omitted, only manual snapshots
+	 * appear.
+	 */
+	appState?: unknown;
+	/**
+	 * Short label shown in the header. Defaults to "AppState".
+	 */
+	title?: string;
+	/**
+	 * Start collapsed (header only).
+	 */
+	initialCollapsed?: boolean;
+	/**
+	 * Identifier for manual snapshot targeting. Defaults to "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. "50svh").
+	 */
+	maxBodyHeight?: number | string;
+	/**
+	 * Pretty print spacing for JSON output (default 2).
+	 */
+	indent?: number;
+	/**
+	 * Maximum snapshots retained in memory when persist=true (FIFO). Default 50.
+	 */
+	maxSnapshots?: number;
+	/**
+	 * Maximum snapshots shown without expanding. Default 2.
+	 */
+	maxVisibleSnapshots?: number;
+	/**
+	 * Visual ordering of snapshots in the panel.
+	 *  - "desc" (default): 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.
+	 */
+	snapshotOrder?: "asc" | "desc";
+	/**
+	 * When true, appends the current snapshot count to the title (e.g. "AppState
+	 * (5)").
+	 */
+	appendSnapshotCountInTitle?: boolean;
+	/**
+	 * Include manual snapshots when copying all snapshots.
+	 */
+	includeManualInCopy?: 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;
+declare function __resetDebugOverlayTestState(): void;
+interface DebugFnOptions {
+    color?: LogColor;
+    targetOverlays?: string[];
+}
+declare function useDebugSnapshot(): (label: string, data: unknown, options?: LogColor | DebugFnOptions) => void;
+declare const DebugOverlay: React.FC<DebugOverlayProps>;
+
+export { type DebugFnOptions, DebugOverlay, type DebugOverlayProps, LOG_BLUE, LOG_GREEN, LOG_MAGENTA, LOG_RED, LOG_YELLOW, type LogColor, __resetDebugOverlayTestState, useDebugSnapshot };

package/dist/index.js

@@ -0,0 +1,24 @@
+import { DebugOverlay as t, LOG_BLUE as i, LOG_GREEN as o, LOG_MAGENTA as r, LOG_RED as L, LOG_YELLOW as O, __resetDebugOverlayTestState as s, useDebugSnapshot as G } from "./components/DebugOverlay/DebugOverlay.js";
+/*!
+  @versini/ui-debug-overlay v1.1.0
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_DEBUG_OVERLAY__ || (window.__VERSINI_UI_DEBUG_OVERLAY__ = {
+    version: "1.1.0",
+    buildTime: "09/13/2025 11:11 PM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+export {
+  t as DebugOverlay,
+  i as LOG_BLUE,
+  o as LOG_GREEN,
+  r as LOG_MAGENTA,
+  L as LOG_RED,
+  O as LOG_YELLOW,
+  s as __resetDebugOverlayTestState,
+  G as useDebugSnapshot
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+	"name": "@versini/ui-debug-overlay",
+	"version": "1.1.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://github.com/aversini/ui-components",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:aversini/ui-components.git"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"scripts": {
+		"build:check": "tsc",
+		"build:js": "vite build",
+		"build:types": "tsup",
+		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"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",
+		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
+		"prettier": "biome check --write --no-errors-on-unmatched",
+		"start": "static-server dist --port 5173",
+		"test:coverage:ui": "vitest --coverage --ui",
+		"test:coverage": "vitest run --coverage",
+		"test:watch": "vitest",
+		"test": "vitest run"
+	},
+	"peerDependencies": {
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0"
+	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "6.8.0"
+	},
+	"gitHead": "6fef25217acc22bda8276b58e40d776a68af5ed9"
+}