@berenjena/react-dev-panel 1.0.1 → 1.0.3

package/dist/components/ControlRenderer/controls/DateControl/DateControl.js

@@ -0,0 +1,31 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as o, useEffect as r } from "react";
+import { Input as f } from "../../../Input/Input.js";
+function h({ control: e }) {
+  const n = e.event || "onBlur", [l, t] = o(e.value);
+  r(() => {
+    t(e.value);
+  }, [e.value]);
+  const s = (u) => {
+    const a = u.target.value;
+    t(a), n === "onChange" && e.onChange(a);
+  }, i = (u) => {
+    const a = u.target.value;
+    n === "onBlur" && e.onChange(a);
+  };
+  return /* @__PURE__ */ m(
+    f,
+    {
+      type: "date",
+      value: l,
+      min: e.min,
+      max: e.max,
+      disabled: e.disabled,
+      onChange: s,
+      ...n === "onBlur" && { onBlur: i }
+    }
+  );
+}
+export {
+  h as DateControl
+};

package/dist/components/ControlRenderer/controls/DateControl/index.d.ts

@@ -0,0 +1 @@
+export * from './DateControl';

package/dist/components/ControlRenderer/controls/DateControl/index.js

@@ -0,0 +1,4 @@
+import { DateControl as t } from "./DateControl.js";
+export {
+  t as DateControl
+};

package/dist/components/ControlRenderer/controls/DateControl/types.d.ts

@@ -0,0 +1,12 @@
+import { BaseInputControl } from '../types';
+export interface DateControl extends BaseInputControl {
+	type: "date";
+	value: string; // ISO date string (YYYY-MM-DD)
+	min?: string; // ISO date string
+	max?: string; // ISO date string
+	onChange: (value: string) => void;
+}
+
+export interface DateControlProps {
+	control: DateControl;
+}

package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.d.ts

@@ -0,0 +1,30 @@
+import { RangeControlProps } from './types';
+/**
+ * Component that renders a range/slider control with configurable event handling
+ * @param control - The control to render
+ * @param control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
+ * @returns The range control component
+ *
+ * @example
+ * ```typescript
+ * // Real-time updates (default)
+ * <RangeControl control={{
+ *   type: 'range',
+ *   value: 50,
+ *   min: 0,
+ *   max: 100,
+ *   step: 1,
+ *   event: 'onChange',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ *
+ * // Updates only when losing focus
+ * <RangeControl control={{
+ *   type: 'range',
+ *   value: 50,
+ *   event: 'onBlur',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ * ```
+ */
+export declare function RangeControl({ control }: RangeControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.js

@@ -0,0 +1,40 @@
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import { useState as o, useEffect as m } from "react";
+import '../../../../assets/RangeControl.css';const v = "_container_1ewrb_1", h = "_range_1ewrb_9", d = "_value_1ewrb_116", t = {
+  container: v,
+  range: h,
+  value: d
+};
+function b({ control: e }) {
+  const n = e.event || "onChange", [u, l] = o(e.value);
+  m(() => {
+    l(e.value);
+  }, [e.value]);
+  const i = (s) => {
+    const a = Number(s.target.value);
+    l(a), n === "onChange" && e.onChange(a);
+  }, c = (s) => {
+    const a = Number(s.target.value);
+    n === "onBlur" && e.onChange(a);
+  };
+  return /* @__PURE__ */ g("div", { className: t.container, children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        type: "range",
+        value: u,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        disabled: e.disabled,
+        onChange: i,
+        ...n === "onBlur" && { onBlur: c },
+        className: t.range
+      }
+    ),
+    /* @__PURE__ */ r("span", { className: t.value, children: u })
+  ] });
+}
+export {
+  b as RangeControl
+};

package/dist/components/ControlRenderer/controls/RangeControl/index.d.ts

@@ -0,0 +1 @@
+export * from './RangeControl';

package/dist/components/ControlRenderer/controls/RangeControl/index.js

@@ -0,0 +1,4 @@
+import { RangeControl as e } from "./RangeControl.js";
+export {
+  e as RangeControl
+};

package/dist/components/ControlRenderer/controls/RangeControl/types.d.ts

@@ -0,0 +1,13 @@
+import { BaseInputControl } from '../types';
+export interface RangeControl extends BaseInputControl {
+	type: "range";
+	value: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	onChange: (value: number) => void;
+}
+
+export interface RangeControlProps {
+	control: RangeControl;
+}

package/dist/components/ControlRenderer/controls/SelectControl/SelectControl.js

@@ -1,14 +1,11 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { Select as n } from "../../../Select/Select.js";
-import '../../../../assets/SelectControl.css';const r = "_select_1w3k9_1", c = {
-  select: r
-};
-function o({ control: t }) {
-  return /* @__PURE__ */ s(n, { value: t.value, disabled: t.disabled, onChange: (e) => t.onChange(e.target.value), className: c.select, children: t.options.map((e) => {
-    const l = typeof e == "string" ? e : e.value, a = typeof e == "string" ? e : e.label;
-    return /* @__PURE__ */ s("option", { value: l, children: a }, l);
+function s({ control: a }) {
+  return /* @__PURE__ */ t(n, { value: a.value, disabled: a.disabled, onChange: (e) => a.onChange(e.target.value), children: a.options.map((e) => {
+    const l = typeof e == "string" ? e : e.value, r = typeof e == "string" ? e : e.label;
+    return /* @__PURE__ */ t("option", { value: l, children: r }, l);
   }) });
 }
 export {
-  o as SelectControl
+  s as SelectControl
 };

package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.d.ts

@@ -0,0 +1,30 @@
+import { SeparatorControlProps } from './types';
+/**
+ * Component that renders a visual separator to organize control groups
+ * @param control - The control to render
+ * @param control.style - The style of separator: "line" (default), "space", or "label"
+ * @param control.label - Optional label text (only shown when style is "label")
+ * @returns The separator control component
+ *
+ * @example
+ * ```typescript
+ * // Simple line separator
+ * <SeparatorControl control={{
+ *   type: 'separator'
+ * }} />
+ *
+ * // Separator with label
+ * <SeparatorControl control={{
+ *   type: 'separator',
+ *   style: 'label',
+ *   label: 'Advanced Settings'
+ * }} />
+ *
+ * // Space separator
+ * <SeparatorControl control={{
+ *   type: 'separator',
+ *   style: 'space'
+ * }} />
+ * ```
+ */
+export declare function SeparatorControl({ control }: SeparatorControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../../../assets/SeparatorControl.css';const s = "_line_12cvo_1", c = "_space_12cvo_9", t = "_labelContainer_12cvo_14", i = "_label_12cvo_14", l = {
+  line: s,
+  space: c,
+  labelContainer: t,
+  label: i
+};
+function r({ control: a }) {
+  const n = a.style || "line";
+  return n === "space" ? /* @__PURE__ */ e("div", { className: l.space }) : n === "label" && a.label ? /* @__PURE__ */ e("div", { className: l.labelContainer, children: /* @__PURE__ */ e("span", { className: l.label, children: a.label }) }) : /* @__PURE__ */ e("div", { className: l.line });
+}
+export {
+  r as SeparatorControl
+};

package/dist/components/ControlRenderer/controls/SeparatorControl/index.d.ts

@@ -0,0 +1 @@
+export * from './SeparatorControl';

package/dist/components/ControlRenderer/controls/SeparatorControl/index.js

@@ -0,0 +1,4 @@
+import { SeparatorControl as t } from "./SeparatorControl.js";
+export {
+  t as SeparatorControl
+};

package/dist/components/ControlRenderer/controls/SeparatorControl/types.d.ts

@@ -0,0 +1,10 @@
+import { BaseControl } from '../types';
+export interface SeparatorControl extends BaseControl {
+	type: "separator";
+	style?: "line" | "space" | "label";
+	// Note: SeparatorControl doesn't need onChange or value as it's purely visual
+}
+
+export interface SeparatorControlProps {
+	control: SeparatorControl;
+}

package/dist/components/ControlRenderer/controls/index.d.ts

@@ -6,9 +6,11 @@ export declare const controls: Readonly<{
     boolean: import('react').LazyExoticComponent<typeof import('./BooleanControl').BooleanControl>;
     button: import('react').LazyExoticComponent<typeof import('./ButtonControl').ButtonControl>;
     color: import('react').LazyExoticComponent<typeof import('./ColorControl').ColorControl>;
+    date: import('react').LazyExoticComponent<typeof import('./DateControl').DateControl>;
     number: import('react').LazyExoticComponent<typeof import('./NumberControl').NumberControl>;
+    range: import('react').LazyExoticComponent<typeof import('./RangeControl').RangeControl>;
     select: import('react').LazyExoticComponent<typeof import('./SelectControl').SelectControl>;
+    separator: import('react').LazyExoticComponent<typeof import('./SeparatorControl').SeparatorControl>;
     text: import('react').LazyExoticComponent<typeof import('./TextControl').TextControl>;
     buttonGroup: import('react').LazyExoticComponent<typeof import('./ButtonGroupControl').ButtonGroupControl>;
 }>;
-export { ControlRenderer } from '..';

package/dist/components/ControlRenderer/controls/index.js

@@ -1,42 +1,16 @@
-import { Suspense as d, lazy as r } from "react";
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { className as s } from "../../../utils/className/className.js";
-import "../../../utils/store/store.js";
-import '../../../assets/index.css';const p = "_controlRendererContainer_eix3y_1", u = "_controlContainer_eix3y_5", m = "_fullWidth_eix3y_13", C = "_controlWrapper_eix3y_16", f = "_label_eix3y_20", _ = "_description_eix3y_28", h = "_loading_eix3y_29", t = {
-  controlRendererContainer: p,
-  controlContainer: u,
-  fullWidth: m,
-  controlWrapper: C,
-  label: f,
-  description: _,
-  loading: h
-}, b = ["button", "buttonGroup"];
-function g({ name: e, control: n }) {
-  const a = n?.label || e;
-  function c() {
-    if (!n || !n.type)
-      return /* @__PURE__ */ o("div", { className: t.error, children: "Control type is not defined" });
-    const l = y[n.type];
-    return l ? /* @__PURE__ */ o(d, { fallback: /* @__PURE__ */ o("div", { className: t.loading, children: "Loading control..." }), children: /* @__PURE__ */ o(l, { control: n }) }) : /* @__PURE__ */ o("div", { children: "Unknown control type" });
-  }
-  return /* @__PURE__ */ i("div", { className: t.controlRendererContainer, children: [
-    /* @__PURE__ */ i("div", { ...s(t.controlContainer, { [t.fullWidth]: b.includes(n.type) }), children: [
-      n?.type !== "button" && /* @__PURE__ */ o("label", { className: t.label, children: a }),
-      /* @__PURE__ */ o("div", { className: t.controlWrapper, children: c() })
-    ] }),
-    n?.description && /* @__PURE__ */ o("span", { className: t.description, children: n.description })
-  ] });
-}
-const y = Object.freeze({
-  boolean: r(() => import("./BooleanControl/index.js").then((e) => ({ default: e.BooleanControl }))),
-  button: r(() => import("./ButtonControl/index.js").then((e) => ({ default: e.ButtonControl }))),
-  color: r(() => import("./ColorControl/index.js").then((e) => ({ default: e.ColorControl }))),
-  number: r(() => import("./NumberControl/index.js").then((e) => ({ default: e.NumberControl }))),
-  select: r(() => import("./SelectControl/index.js").then((e) => ({ default: e.SelectControl }))),
-  text: r(() => import("./TextControl/index.js").then((e) => ({ default: e.TextControl }))),
-  buttonGroup: r(() => import("./ButtonGroupControl/index.js").then((e) => ({ default: e.ButtonGroupControl })))
+import { lazy as o } from "react";
+const r = Object.freeze({
+  boolean: o(() => import("./BooleanControl/index.js").then((t) => ({ default: t.BooleanControl }))),
+  button: o(() => import("./ButtonControl/index.js").then((t) => ({ default: t.ButtonControl }))),
+  color: o(() => import("./ColorControl/index.js").then((t) => ({ default: t.ColorControl }))),
+  date: o(() => import("./DateControl/index.js").then((t) => ({ default: t.DateControl }))),
+  number: o(() => import("./NumberControl/index.js").then((t) => ({ default: t.NumberControl }))),
+  range: o(() => import("./RangeControl/index.js").then((t) => ({ default: t.RangeControl }))),
+  select: o(() => import("./SelectControl/index.js").then((t) => ({ default: t.SelectControl }))),
+  separator: o(() => import("./SeparatorControl/index.js").then((t) => ({ default: t.SeparatorControl }))),
+  text: o(() => import("./TextControl/index.js").then((t) => ({ default: t.TextControl }))),
+  buttonGroup: o(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl })))
 });
 export {
-  g as ControlRenderer,
-  y as controls
+  r as controls
 };

package/dist/components/ControlRenderer/controls/types.d.ts

@@ -2,8 +2,11 @@ import { BooleanControl } from './BooleanControl/types';
 import { ButtonControl } from './ButtonControl/types';
 import { ButtonGroupControl } from './ButtonGroupControl/types';
 import { ColorControl } from './ColorControl/types';
+import { DateControl } from './DateControl/types';
 import { NumberControl } from './NumberControl/types';
+import { RangeControl } from './RangeControl/types';
 import { SelectControl } from './SelectControl/types';
+import { SeparatorControl } from './SeparatorControl/types';
 import { TextControl } from './TextControl/types';
 export interface BaseControl {
 	label?: string;
@@ -23,6 +26,9 @@ export type Controls = {
 	text: TextControl;
 	button: ButtonControl;
 	number: NumberControl;
+	range: RangeControl;
+	date: DateControl;
+	separator: SeparatorControl;
 	buttonGroup: ButtonGroupControl;
 };
 

package/dist/components/ControlRenderer/index.js

@@ -1,4 +1,4 @@
-import { ControlRenderer as o } from "./controls/index.js";
+import { ControlRenderer as o } from "./ControlRenderer.js";
 export {
   o as ControlRenderer
 };

package/dist/components/DevPanel/DevPanel.js

@@ -1,66 +1,67 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useCallback as C } from "react";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useCallback as g } from "react";
 import { useDragAndDrop as _ } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
-import { useHotkey as D } from "../../hooks/useHotkeys/useHotkey.js";
-import { className as P } from "../../utils/className/className.js";
-import { useDevPanelVisible as g, useDevPanelCollapsed as b, useDevPanelPosition as y, useDevPanelSections as N, useDevPanelActions as K } from "../../utils/store/store.js";
-import { EmptyContent as k } from "../EmptyContent/EmptyContent.js";
-import { Section as w } from "../Section/Section.js";
-import '../../assets/DevPanel.css';const x = "_devPanelContainer_1rv6u_30", E = "_header_1rv6u_41", V = "_title_1rv6u_50", j = "_button_1rv6u_60", S = "_content_1rv6u_78", e = {
-  devPanelContainer: x,
-  header: E,
-  title: V,
-  button: j,
-  content: S
-}, A = {
+import { useHotkey as C } from "../../hooks/useHotkeys/useHotkey.js";
+import { useDevPanelStore as w } from "../../store/store.js";
+import { className as b } from "../../utils/className/className.js";
+import { EmptyContent as y } from "../EmptyContent/EmptyContent.js";
+import { Section as D } from "../Section/Section.js";
+import '../../assets/DevPanel.css';const P = "_devPanelContainer_1vath_1", x = "_header_1vath_12", K = "_title_1vath_21", N = "_button_1vath_31", k = "_collapsed_1vath_53", A = "_content_1vath_60", t = {
+  devPanelContainer: P,
+  header: x,
+  title: K,
+  button: N,
+  collapsed: k,
+  content: A
+}, j = {
   ctrlKey: !0,
   shiftKey: !0,
   key: "a",
   altKey: !1,
   metaKey: !1
 };
-function F({ panelTitle: c = "Dev panel", ...u }) {
-  const i = g(), n = b(), l = y(), d = N(), o = K(), m = C(
+function O({ panelTitle: c = "Dev panel", ...d }) {
+  const { isVisible: l, isCollapsed: o, position: a, sections: h, ...n } = w(), m = g(
     (s) => {
-      o.setPosition(s);
+      n.setPosition(s);
     },
-    [o]
-  ), { isDragging: v, elementRef: p, handleMouseDown: f } = _({
+    [n]
+  ), { isDragging: p, elementRef: v, handleMouseDown: u } = _({
     onPositionChange: m
   });
-  if (D({
+  if (C({
     description: "Show Dev Panel",
     preventDefault: !0,
-    action: () => o.setVisible(!i),
-    ...A,
-    ...u.hotKeyConfig,
+    action: () => n.setVisible(!l),
+    ...j,
+    ...d.hotKeyConfig,
     target: window
-  }), process.env.NODE_ENV !== "development" || !i)
+  }), !l)
     return null;
-  const a = Object.entries(d);
+  const i = Object.entries(h);
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: p,
-      ...P(e.devPanelContainer, {
-        [e.dragging]: v
+      ref: v,
+      ...b(t.devPanelContainer, {
+        [t.dragging]: p
       }),
       style: {
-        left: l.x,
-        top: l.y,
-        height: n ? "auto" : void 0
+        left: a.x,
+        top: a.y,
+        height: o ? "auto" : void 0
       },
       children: [
-        /* @__PURE__ */ r("div", { className: e.header, onMouseDown: f, children: [
-          /* @__PURE__ */ t("button", { className: e.button, onClick: () => o.setCollapsed(!n), title: n ? "Expand" : "Collapse", children: n ? "▼" : "▲" }),
-          /* @__PURE__ */ t("div", { className: e.title, children: c }),
-          /* @__PURE__ */ t("button", { className: e.button, onClick: () => o.setVisible(!1), title: "Close", children: "✕" })
+        /* @__PURE__ */ r("div", { className: t.header, onMouseDown: u, children: [
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => n.setCollapsed(!o), title: o ? "Expand" : "Collapse", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: o ? t.collapsed : void 0, children: /* @__PURE__ */ e("path", { d: "M16.843 10.211A.75.75 0 0 0 16.251 9H7.75a.75.75 0 0 0-.591 1.212l4.258 5.498a.746.746 0 0 0 1.183-.001l4.243-5.498z" }) }) }),
+          /* @__PURE__ */ e("div", { className: t.title, children: c }),
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => n.setVisible(!1), title: "Close", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "m12 10.93 5.719-5.72a.749.749 0 1 1 1.062 1.062l-5.72 5.719 5.719 5.719a.75.75 0 1 1-1.061 1.062L12 13.053l-5.719 5.719A.75.75 0 0 1 5.22 17.71l5.719-5.719-5.72-5.719A.752.752 0 0 1 6.281 5.21z" }) }) })
         ] }),
-        !n && /* @__PURE__ */ t("div", { className: e.content, children: a.length ? a.map(([s, h]) => /* @__PURE__ */ t(w, { sectionName: s, section: h }, `section-${s}`)) : /* @__PURE__ */ t(k, {}) })
+        !o && /* @__PURE__ */ e("div", { className: t.content, children: i.length ? i.map(([s, f]) => /* @__PURE__ */ e(D, { sectionName: s, section: f }, `section-${s}`)) : /* @__PURE__ */ e(y, {}) })
       ]
     }
   );
 }
 export {
-  F as DevPanel
+  O as DevPanel
 };

package/dist/components/DevPanel/types.d.ts

@@ -1,9 +1,7 @@
 import { ControlsGroup } from '../ControlRenderer/controls/types';
-import { HotkeyConfig, Position } from '../../types';
-export type DevPanelHoyKeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
+export type DevPanelHotkeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
 
 export interface DevPanelProps {
-	theme?: "light" | "dark";
 	panelTitle?: string;
 	/**
 	 * Hotkey configuration for toggling the DevPanel visibility.
@@ -18,7 +16,7 @@ export interface DevPanelProps {
 	 * }
 	 * ```
 	 */
-	hotKeyConfig?: DevPanelHoyKeyConfig;
+	hotKeyConfig?: DevPanelHotkeyConfig;
 }
 
 export interface DevPanelSection {
@@ -45,3 +43,8 @@ export interface DevPanelActions {
 }
 
 export type DevPanelStore = DevPanelState & DevPanelActions;
+
+export interface Position {
+	x: number;
+	y: number;
+}

package/dist/components/EmptyContent/EmptyContent.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import '../../assets/EmptyContent.css';const o = "_empty_1re8c_1", r = {
+import '../../assets/EmptyContent.css';const o = "_empty_1xo8g_1", s = {
   empty: o
 };
 function n() {
-  return /* @__PURE__ */ t("div", { className: r.empty, children: [
+  return /* @__PURE__ */ t("div", { className: s.empty, children: [
     "No controls registered yet.",
     /* @__PURE__ */ e("br", {}),
     " ",

package/dist/components/Input/Input.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../assets/Input.css';const i = "_input_w2bi0_1", p = {
-  input: i
+import '../../assets/Input.css';const p = "_input_161wd_1", u = {
+  input: p
 };
 function s(t) {
-  return /* @__PURE__ */ n("input", { ...t, className: p.input });
+  return /* @__PURE__ */ n("input", { ...t, className: u.input });
 }
 export {
   s as Input

package/dist/components/Logger/index.d.ts

@@ -0,0 +1,20 @@
+type LoggerProps = {
+    /** The data object to display in JSON format */
+    items: object;
+    /** Optional title for the logger panel */
+    title?: string;
+    /** Theme preference - 'auto' detects system preference */
+    theme?: "light" | "dark" | "auto";
+    /** Whether the logger should start collapsed */
+    defaultCollapsed?: boolean;
+    /** Whether the logger should be visible by default */
+    defaultVisible?: boolean;
+    /** Callback function called when the logger is closed */
+    onClose?: () => void;
+};
+/**
+ * A floating, collapsible logger component that displays object data in JSON format.
+ * @returns JSX element or null if not visible
+ */
+export declare function Logger({ items, title, theme, defaultCollapsed, defaultVisible, onClose }: LoggerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Logger/index.js

@@ -0,0 +1,85 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as l, useRef as D, useEffect as h } from "react";
+import { className as I } from "../../utils/className/className.js";
+import '../../assets/index2.css';const O = "_logger_t8a3p_1", L = "_dark_t8a3p_17", S = "_collapsed_t8a3p_22", J = "_header_t8a3p_27", $ = "_title_t8a3p_49", A = "_controls_t8a3p_62", z = "_toggleButton_t8a3p_68", H = "_closeButton_t8a3p_104", M = "_content_t8a3p_129", R = "_jsonDisplay_t8a3p_139", T = "_empty_t8a3p_152", U = "_badge_t8a3p_162", V = "_updated_t8a3p_175", t = {
+  logger: O,
+  dark: L,
+  collapsed: S,
+  header: J,
+  title: $,
+  controls: A,
+  toggleButton: z,
+  closeButton: H,
+  content: M,
+  jsonDisplay: R,
+  empty: T,
+  badge: U,
+  updated: V
+};
+function F({ items: s, title: m = "Logger", theme: c = "auto", defaultCollapsed: f = !0, defaultVisible: y = !0, onClose: p }) {
+  const [a, v] = l(f), [N, b] = l(y), [C, d] = l(!1), [k, g] = l(!1), [u, w] = l(0), i = D("");
+  function _() {
+    v(!a);
+  }
+  function B() {
+    b(!1), p?.();
+  }
+  function x(o) {
+    try {
+      return JSON.stringify(o, null, 2);
+    } catch (n) {
+      return `Error formatting JSON: ${n}`;
+    }
+  }
+  if (h(() => {
+    if (c === "auto") {
+      const o = window.matchMedia("(prefers-color-scheme: dark)");
+      d(o.matches);
+      const n = (E) => d(E.matches);
+      return o.addEventListener("change", n), () => o.removeEventListener("change", n);
+    } else
+      d(c === "dark");
+  }, [c]), h(() => {
+    const o = JSON.stringify(s), n = Object.keys(s).length;
+    i.current && i.current !== o && (g(!0), setTimeout(() => g(!1), 600)), w(n), i.current = o;
+  }, [s]), !N) return null;
+  const j = !s || Object.keys(s).length === 0;
+  return /* @__PURE__ */ r("div", { className: `${t.logger} ${C ? t.dark : ""} ${a ? t.collapsed : ""}`, children: [
+    /* @__PURE__ */ r("div", { className: t.header, onClick: _, children: [
+      /* @__PURE__ */ r("h3", { className: t.title, children: [
+        m,
+        u > 0 && /* @__PURE__ */ e("span", { ...I(t.badge, { [t.updated]: k }), children: u })
+      ] }),
+      /* @__PURE__ */ r("div", { className: t.controls, children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: t.toggleButton,
+            onClick: _,
+            type: "button",
+            "aria-label": a ? "Expand logger" : "Collapse logger",
+            title: a ? "Expand" : "Collapse",
+            children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: a ? t.collapsed : void 0, children: /* @__PURE__ */ e("path", { d: "M16.843 10.211A.75.75 0 0 0 16.251 9H7.75a.75.75 0 0 0-.591 1.212l4.258 5.498a.746.746 0 0 0 1.183-.001l4.243-5.498z" }) })
+          }
+        ),
+        p && /* @__PURE__ */ e(
+          "button",
+          {
+            className: t.closeButton,
+            type: "button",
+            "aria-label": "Close logger",
+            title: "Close",
+            onClick: (o) => {
+              o.stopPropagation(), B();
+            },
+            children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "m12 10.93 5.719-5.72a.749.749 0 1 1 1.062 1.062l-5.72 5.719 5.719 5.719a.75.75 0 1 1-1.061 1.062L12 13.053l-5.719 5.719A.75.75 0 0 1 5.22 17.71l5.719-5.719-5.72-5.719A.752.752 0 0 1 6.281 5.21z" }) })
+          }
+        )
+      ] })
+    ] }),
+    !a && /* @__PURE__ */ e("div", { className: t.content, children: j ? /* @__PURE__ */ e("div", { className: t.empty, children: "No data to display" }) : /* @__PURE__ */ e("pre", { className: t.jsonDisplay, children: /* @__PURE__ */ e("code", { children: x(s) }) }) })
+  ] });
+}
+export {
+  F as Logger
+};