@plitzi/sdk-dev-tools 0.30.19

package/dist/DevToolsContainer.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type Orientation = 'horizontal' | 'vertical';
+export type DevToolsContainerProps = {
+    children?: ReactNode;
+    className?: string;
+    innerClassName?: string;
+    enabled?: boolean;
+    devToolsStyle?: string;
+    devToolsStyleLink?: string;
+    renderMode?: 'default' | 'shadow';
+};
+declare const DevToolsContainer: ({ children, className, innerClassName, enabled, renderMode, devToolsStyle, devToolsStyleLink }: DevToolsContainerProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export default DevToolsContainer;

package/dist/DevToolsContainer.mjs

@@ -0,0 +1,34 @@
+import e from "./components/DevToolsPanel/index.mjs";
+import t from "./DevToolsContextProvider.mjs";
+import n from "clsx";
+import { use as r, useCallback as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { ThemeContext as c } from "@plitzi/sdk-shared";
+import l from "@plitzi/plitzi-ui/ContainerShadow";
+//#region src/DevToolsContainer.tsx
+var u = ({ children: u, className: d, innerClassName: f, enabled: p = !1, renderMode: m = "default", devToolsStyle: h = "", devToolsStyleLink: g = "" }) => {
+	let { theme: _ } = r(c), [v, y] = a("horizontal"), b = i((e) => y(e), []);
+	return p ? /* @__PURE__ */ o(t, { children: /* @__PURE__ */ s("div", {
+		className: n("flex grow overflow-auto", {
+			"flex-col": v === "horizontal",
+			"h-screen": v === "vertical"
+		}, d),
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: n("grow basis-0 flex-col overflow-auto", f),
+				children: u
+			}),
+			m === "default" && /* @__PURE__ */ o(e, {
+				orientation: v,
+				onChangeOrientation: b
+			}),
+			m === "shadow" && /* @__PURE__ */ s(l, { children: [g && /* @__PURE__ */ o(l.Link, { href: g }), /* @__PURE__ */ s(l.Content, { children: [/* @__PURE__ */ o("style", { dangerouslySetInnerHTML: { __html: h } }), /* @__PURE__ */ o(e, {
+				className: n({ dark: _ === "dark" }),
+				orientation: v,
+				onChangeOrientation: b
+			})] })] })
+		]
+	}) }) : u;
+};
+//#endregion
+export { u as default };

package/dist/DevToolsContextProvider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type DevToolsContextProviderProps = {
+    children?: ReactNode;
+};
+declare const DevToolsContextProvider: ({ children }: DevToolsContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default DevToolsContextProvider;

package/dist/DevToolsContextProvider.mjs

@@ -0,0 +1,46 @@
+import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import a from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as o } from "react/jsx-runtime";
+import { omit as s } from "@plitzi/plitzi-ui/helpers";
+import { pConsole as c } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
+//#region src/DevToolsContextProvider.tsx
+var l = ({ children: l }) => {
+	let [u, d] = i([]), [f, p] = i({}), m = r(!1), h = e((e, t, n, r, i) => {
+		d((a) => [...a, {
+			logType: e,
+			category: t,
+			message: n,
+			time: i,
+			params: r
+		}]);
+	}, [d]), g = e((e, t) => p((n) => ({
+		...n,
+		[e]: t
+	})), []), _ = e((e) => p((t) => s(t, [e])), []), v = e((e, ...t) => {
+		if (!(!e || typeof f[e] != "function")) return f[e](...t);
+	}, [f]), y = e(() => d([]), []);
+	return m.current ||= (c.setCallback(h), c.setCallbackAddProvider(g), c.setCallbackRemoveProvider(_), !0), t(() => (c.setCallback(h), c.setCallbackAddProvider(g), c.setCallbackRemoveProvider(_), c.processPendingLogs(), () => {
+		c.setCallback(void 0), c.setCallbackAddProvider(void 0), c.setCallbackRemoveProvider(void 0), c.flush();
+	}), [
+		h,
+		g,
+		_
+	]), /* @__PURE__ */ o(a, {
+		value: n(() => ({
+			providers: f,
+			logs: u,
+			setLogs: d,
+			clearLogs: y,
+			getData: v
+		}), [
+			f,
+			u,
+			d,
+			y,
+			v
+		]),
+		children: l
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/DevToolsPanel/DevToolsBody.d.ts

@@ -0,0 +1,9 @@
+export type DevToolsBodyProps = {
+    className?: string;
+    tabSelected?: string;
+    orientation: 'horizontal' | 'vertical';
+    elementSelected?: string;
+    onSelectElement: (id?: string) => void;
+};
+declare const DevToolsBody: ({ className, tabSelected, orientation, elementSelected, onSelectElement }: DevToolsBodyProps) => import("react/jsx-runtime").JSX.Element;
+export default DevToolsBody;

package/dist/components/DevToolsPanel/DevToolsBody.mjs

@@ -0,0 +1,35 @@
+import e from "./tabs/DataSourceViewer/index.mjs";
+import t from "./tabs/ElementsViewer/index.mjs";
+import n from "./tabs/Logs/index.mjs";
+import r from "./tabs/PluginsViewer/PluginsViewer.mjs";
+import i from "./tabs/VariablesViewer/index.mjs";
+import a from "clsx";
+import { use as o } from "react";
+import s from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/DevToolsBody.tsx
+var u = ({ className: u, tabSelected: d, orientation: f, elementSelected: p, onSelectElement: m }) => {
+	let { logs: h, clearLogs: g } = o(s);
+	return /* @__PURE__ */ c("div", {
+		className: a("flex h-full w-full grow overflow-auto bg-white dark:bg-zinc-900", u),
+		children: /* @__PURE__ */ l("div", {
+			className: "flex w-full flex-col",
+			children: [
+				d === "logs" && /* @__PURE__ */ c(n, {
+					items: h,
+					orientation: f,
+					onClear: g
+				}),
+				d === "dataSources" && /* @__PURE__ */ c(e, { elementSelected: p }),
+				d === "variables" && /* @__PURE__ */ c(i, {}),
+				d === "elements" && /* @__PURE__ */ c(t, {
+					elementSelected: p,
+					onSelectElement: m
+				}),
+				d === "plugins" && /* @__PURE__ */ c(r, {})
+			]
+		})
+	});
+};
+//#endregion
+export { u as default };

package/dist/components/DevToolsPanel/DevToolsButton.d.ts

@@ -0,0 +1,10 @@
+import { MouseEvent } from 'react';
+export type DevToolsButtonProps = {
+    className?: string;
+    isSelected?: boolean;
+    iconClassName?: string;
+    title?: string;
+    onClick?: (e: MouseEvent) => void;
+};
+declare const DevToolsButton: ({ className, iconClassName, title, isSelected, onClick }: DevToolsButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DevToolsButton;

package/dist/components/DevToolsPanel/DevToolsButton.mjs

@@ -0,0 +1,14 @@
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/DevToolsButton.tsx
+var n = ({ className: n, iconClassName: r, title: i, isSelected: a = !1, onClick: o }) => /* @__PURE__ */ t("button", {
+	className: e("flex h-6 w-6 cursor-pointer items-center justify-center rounded transition-colors", {
+		"bg-violet-500/10 text-violet-600 dark:bg-violet-500/20 dark:text-violet-400": a,
+		"text-zinc-500 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100": !a
+	}, n),
+	title: i,
+	onClick: o,
+	children: /* @__PURE__ */ t("i", { className: e("text-xs", r) })
+});
+//#endregion
+export { n as default };

package/dist/components/DevToolsPanel/DevToolsHeader.d.ts

@@ -0,0 +1,10 @@
+import { Orientation } from '../../DevToolsContainer';
+export type DevToolsHeaderProps = {
+    className?: string;
+    tabSelected?: string;
+    orientation: Orientation;
+    onChangeOrientation?: (orientation: Orientation) => void;
+    onTabSelect?: (tabIndex: string) => void;
+};
+declare const DevToolsHeader: ({ tabSelected, orientation, onChangeOrientation, onTabSelect }: DevToolsHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default DevToolsHeader;

package/dist/components/DevToolsPanel/DevToolsHeader.mjs

@@ -0,0 +1,62 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/DevToolsHeader.tsx
+var i = [
+	{
+		id: "logs",
+		label: "Logs",
+		icon: "fa-solid fa-terminal"
+	},
+	{
+		id: "dataSources",
+		label: "Sources",
+		icon: "fa-solid fa-database"
+	},
+	{
+		id: "elements",
+		label: "Elements",
+		icon: "fa-solid fa-layer-group"
+	},
+	{
+		id: "variables",
+		label: "Variables",
+		icon: "fa-solid fa-code"
+	},
+	{
+		id: "plugins",
+		label: "Plugins",
+		icon: "fa-solid fa-puzzle-piece"
+	}
+], a = ({ tabSelected: a, orientation: o = "vertical", onChangeOrientation: s, onTabSelect: c }) => {
+	let l = t(() => {
+		s?.(o === "horizontal" ? "vertical" : "horizontal");
+	}, [o, s]), u = t((e) => () => c?.(e), [c]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex shrink-0 items-stretch justify-between border-b border-zinc-200 bg-zinc-100 select-none dark:border-zinc-700 dark:bg-zinc-800",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex items-stretch overflow-x-auto",
+			children: i.map((t) => {
+				let i = a === t.id;
+				return /* @__PURE__ */ r("button", {
+					onClick: u(t.id),
+					className: e("flex cursor-pointer items-center gap-1.5 border-b-2 px-3 py-2 font-medium transition-colors", {
+						"border-violet-500 text-violet-600 dark:text-violet-400": i,
+						"border-transparent text-zinc-500 hover:bg-zinc-200/70 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-100": !i
+					}),
+					children: [/* @__PURE__ */ n("i", { className: e(t.icon, "text-[10px]") }), t.label]
+				}, t.id);
+			})
+		}), /* @__PURE__ */ n("div", {
+			className: "flex shrink-0 items-center gap-1 border-l border-zinc-200 px-2 dark:border-zinc-700",
+			children: /* @__PURE__ */ n("button", {
+				className: "flex h-6 w-6 items-center justify-center rounded text-zinc-500 transition-colors hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100",
+				title: o === "horizontal" ? "Switch to side panel" : "Switch to bottom panel",
+				onClick: l,
+				children: /* @__PURE__ */ n("i", { className: e("fa-solid fa-table-columns text-xs", { "rotate-90": o === "vertical" }) })
+			})
+		})]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/DevToolsPanel.d.ts

@@ -0,0 +1,10 @@
+import { Orientation } from '../../DevToolsContainer';
+export declare const ORIENTATION_VERTICAL = "vertical";
+export declare const ORIENTATION_HORIZONTAL = "horizontal";
+export type DevToolsPanelProps = {
+    className?: string;
+    orientation?: Orientation;
+    onChangeOrientation?: (orientation: Orientation) => void;
+};
+declare const DevToolsPanel: ({ className, orientation, onChangeOrientation }: DevToolsPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default DevToolsPanel;

package/dist/components/DevToolsPanel/DevToolsPanel.mjs

@@ -0,0 +1,48 @@
+import e from "./DevToolsBody.mjs";
+import t from "./DevToolsHeader.mjs";
+import n from "./DevToolsSubHeader.mjs";
+import r from "@plitzi/plitzi-ui/ContainerResizable";
+import i from "clsx";
+import { use as a, useCallback as o, useMemo as s, useRef as c, useState as l } from "react";
+import u from "@plitzi/sdk-navigation/NavigationContext";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/DevToolsPanel.tsx
+var p = "vertical", m = "horizontal", h = ({ className: p, orientation: m = "vertical", onChangeOrientation: h }) => {
+	let [g, _] = l("logs"), { currentPageId: v } = a(u), [y, b] = l(), x = s(() => m === "vertical" ? ["w"] : ["n"], [m]), S = c(typeof document < "u" ? document.querySelector(".plitzi-sdk") : null), C = o((e) => _(e), []), w = o((e) => b(e), [b]);
+	return /* @__PURE__ */ d(r, {
+		className: i("component__container-resizable-sidebar text-xs", p, { "h-full": m === "vertical" }),
+		minConstraintsX: m === "vertical" ? 500 : Infinity,
+		maxConstraintsX: m === "vertical" ? 1e3 : Infinity,
+		minConstraintsY: m === "vertical" ? Infinity : 34,
+		maxConstraintsY: m === "vertical" ? Infinity : 600,
+		width: m === "vertical" ? 500 : Infinity,
+		height: m === "vertical" ? Infinity : 200,
+		resizeHandles: x,
+		parentRef: S,
+		autoGrow: !1,
+		children: /* @__PURE__ */ f("div", {
+			className: "flex h-full w-full flex-col bg-white text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200",
+			children: [
+				/* @__PURE__ */ d(t, {
+					orientation: m,
+					onChangeOrientation: h,
+					onTabSelect: C,
+					tabSelected: g
+				}),
+				["dataSources", "elements"].includes(g) && /* @__PURE__ */ d(n, {
+					elementSelected: y,
+					onSelectElement: w,
+					currentPageId: v
+				}),
+				/* @__PURE__ */ d(e, {
+					orientation: m,
+					tabSelected: g,
+					elementSelected: y,
+					onSelectElement: w
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { m as ORIENTATION_HORIZONTAL, p as ORIENTATION_VERTICAL, h as default };

package/dist/components/DevToolsPanel/DevToolsSubHeader.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type DevToolsSubHeaderProps = {
+    className?: string;
+    currentPageId?: string;
+    children?: ReactNode;
+    elementSelected?: string;
+    onSelectElement: (id?: string) => void;
+};
+declare const DevToolsSubHeader: ({ className, elementSelected, currentPageId, onSelectElement }: DevToolsSubHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default DevToolsSubHeader;

package/dist/components/DevToolsPanel/DevToolsSubHeader.mjs

@@ -0,0 +1,62 @@
+import e from "./DevToolsButton.mjs";
+import t from "clsx";
+import { useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { throttle as c } from "@plitzi/plitzi-ui/helpers";
+//#region src/components/DevToolsPanel/DevToolsSubHeader.tsx
+var l = ({ className: l, elementSelected: u, currentPageId: d, onSelectElement: f }) => {
+	let [p, m] = a(!1), h = n((e) => {
+		let { id: t } = e?.dataset ?? {};
+		f(t);
+	}, [f]), g = i(() => c(h, 100), [h]), _ = n((e) => {
+		e.target.closest(".plitzi-sdk") && g(e.target.closest("[data-id]"));
+	}, [g]), v = n((e) => {
+		e.target.closest(".plitzi-sdk") && (e.stopPropagation(), e.preventDefault(), m(!1));
+	}, []), y = n((e) => {
+		e.stopPropagation(), e.preventDefault(), m(!0);
+	}, [m]), b = n(() => {
+		m(!1), f(d);
+	}, [d, f]), x = n(() => {
+		m(!1), f("");
+	}, [f]);
+	return r(() => {
+		if (typeof document > "u") return;
+		let e = document.querySelectorAll(`[data-id="${u}"]`);
+		return e.forEach((e) => e.classList.add("devtools-element-hovered")), () => {
+			e.forEach((e) => e.classList.remove("devtools-element-hovered"));
+		};
+	}, [u]), r(() => {
+		if (!p || typeof document > "u") return;
+		let e = document.getElementsByClassName("plitzi-sdk")[0];
+		if (e) return e.addEventListener("click", v), e.addEventListener("mousemove", _), () => {
+			e.removeEventListener("click", v), e.removeEventListener("mousemove", _);
+		};
+	}, [
+		v,
+		_,
+		p
+	]), /* @__PURE__ */ s("div", {
+		className: t("flex shrink-0 items-center justify-between gap-2 border-b border-zinc-200 bg-zinc-50 px-2 py-1 dark:border-zinc-700 dark:bg-zinc-800", l),
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex gap-1",
+			children: [/* @__PURE__ */ o(e, {
+				iconClassName: "fa-regular fa-hand-pointer",
+				title: "Select an element in the page to inspect it",
+				onClick: y,
+				isSelected: p
+			}), /* @__PURE__ */ o(e, {
+				iconClassName: "fa-regular fa-file",
+				title: "Current Page",
+				onClick: b,
+				isSelected: u === d
+			})]
+		}), /* @__PURE__ */ o(e, {
+			iconClassName: "fa-solid fa-ban",
+			onClick: x,
+			title: "Clear",
+			isSelected: !!u
+		})]
+	});
+};
+//#endregion
+export { l as default };

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

@@ -0,0 +1,3 @@
+import { default as DevToolsPanel, ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL } from './DevToolsPanel';
+export { ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL };
+export default DevToolsPanel;

package/dist/components/DevToolsPanel/index.mjs

@@ -0,0 +1,5 @@
+import e, { ORIENTATION_HORIZONTAL as t, ORIENTATION_VERTICAL as n } from "./DevToolsPanel.mjs";
+//#region src/components/DevToolsPanel/index.ts
+var r = e;
+//#endregion
+export { t as ORIENTATION_HORIZONTAL, n as ORIENTATION_VERTICAL, r as default };

package/dist/components/DevToolsPanel/tabs/DataSourceViewer/DataSourceViewer.d.ts

@@ -0,0 +1,5 @@
+export type DataSourceViewerProps = {
+    elementSelected?: string;
+};
+declare const DataSourceViewer: ({ elementSelected }: DataSourceViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default DataSourceViewer;

package/dist/components/DevToolsPanel/tabs/DataSourceViewer/DataSourceViewer.mjs

@@ -0,0 +1,30 @@
+import { use as e } from "react";
+import t from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import n from "@uiw/react-json-view";
+import * as r from "@uiw/react-json-view/vscode";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/DataSourceViewer/DataSourceViewer.tsx
+var a = {
+	...r.vscodeTheme,
+	width: "100%",
+	height: "100%",
+	overflow: "auto",
+	padding: "8px",
+	fontSize: "14px"
+}, o = ({ elementSelected: r }) => {
+	let { getData: o } = e(t);
+	return /* @__PURE__ */ i("div", {
+		className: "flex h-full w-full flex-col",
+		children: /* @__PURE__ */ i(n, {
+			value: r ? o?.(`getElementDataSource-${r}`) : {},
+			style: a,
+			enableClipboard: !1,
+			indentWidth: 15,
+			collapsed: 2,
+			displayObjectSize: !1,
+			displayDataTypes: !1
+		})
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/DevToolsPanel/tabs/DataSourceViewer/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DataSourceViewer } from './DataSourceViewer';
+export * from './DataSourceViewer';
+export default DataSourceViewer;

package/dist/components/DevToolsPanel/tabs/DataSourceViewer/index.mjs

@@ -0,0 +1,5 @@
+import e from "./DataSourceViewer.mjs";
+//#region src/components/DevToolsPanel/tabs/DataSourceViewer/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/DetailsAttributes.d.ts

@@ -0,0 +1,6 @@
+import { Element } from '@plitzi/sdk-shared';
+export type DetailsAttributesProps = {
+    attributes?: Element['attributes'];
+};
+declare const DetailsAttributes: ({ attributes }: DetailsAttributesProps) => import("react/jsx-runtime").JSX.Element;
+export default DetailsAttributes;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/DetailsAttributes.mjs

@@ -0,0 +1,19 @@
+import e from "./DetailsValue.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/DetailsAttributes.tsx
+var r = ({ attributes: r }) => /* @__PURE__ */ t("div", {
+	className: "w-full text-sm",
+	children: r && Object.entries(r).map(([r, i], a) => /* @__PURE__ */ n("div", {
+		className: "flex gap-4 border-gray-300 [&:not(:first-child)]:border-t",
+		children: [/* @__PURE__ */ t("div", {
+			className: "grow basis-0",
+			children: r
+		}), /* @__PURE__ */ t(e, {
+			isAttribute: !0,
+			attribute: r,
+			value: i
+		})]
+	}, a))
+});
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/DetailsDefinition.d.ts

@@ -0,0 +1,7 @@
+import { Element } from '@plitzi/sdk-shared';
+export type DetailsDefinitionProps = {
+    definition?: Element['definition'];
+    onSelectElement: (id: string) => void;
+};
+declare const DetailsDefinition: ({ definition, onSelectElement }: DetailsDefinitionProps) => import("react/jsx-runtime").JSX.Element;
+export default DetailsDefinition;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/DetailsDefinition.mjs

@@ -0,0 +1,20 @@
+import e from "./DetailsValue.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/DetailsDefinition.tsx
+var r = ({ definition: r, onSelectElement: i }) => /* @__PURE__ */ t("div", {
+	className: "w-full text-sm",
+	children: r && Object.entries(r).map(([r, a], o) => /* @__PURE__ */ n("div", {
+		className: "flex gap-4 border-gray-300 [&:not(:first-child)]:border-t",
+		children: [/* @__PURE__ */ t("div", {
+			className: "grow basis-0",
+			children: r
+		}), /* @__PURE__ */ t(e, {
+			isDefinition: !0,
+			attribute: r,
+			value: a,
+			onSelectElement: i
+		})]
+	}, o))
+});
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/DetailsValue.d.ts

@@ -0,0 +1,10 @@
+export type DetailsValue = {
+    attribute?: string;
+    value?: unknown;
+    isDefinition?: boolean;
+    isAttribute?: boolean;
+    isStyle?: boolean;
+    onSelectElement?: (id: string) => void;
+};
+declare const DetailsValue: ({ attribute, value, isDefinition, onSelectElement }: DetailsValue) => import("react/jsx-runtime").JSX.Element;
+export default DetailsValue;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/DetailsValue.mjs

@@ -0,0 +1,31 @@
+import { useCallback as e, useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { createStoreHook as r } from "@plitzi/sdk-store/createStore";
+import { get as i } from "@plitzi/plitzi-ui/helpers";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/DetailsValue.tsx
+var a = ({ attribute: a, value: o, isDefinition: s = !1, onSelectElement: c }) => {
+	let { useStore: l } = r(), [u] = l("schema.flat"), d = e((e) => () => c?.(e), [c]);
+	return /* @__PURE__ */ n("div", {
+		className: "grow basis-0 truncate",
+		children: t(() => a === "items" && s && Array.isArray(o) ? /* @__PURE__ */ n("div", {
+			className: "flex flex-col",
+			children: o.map((e, t) => /* @__PURE__ */ n("div", {
+				className: "cursor-pointer text-purple-400",
+				onClick: d(e),
+				children: i(u, `${e}.definition.label`, e)
+			}, t))
+		}) : a && ["rootId", "parentId"].includes(a) && s ? /* @__PURE__ */ n("div", {
+			className: "cursor-pointer text-purple-400",
+			onClick: d(o),
+			children: i(u, `${o}.definition.label`, o)
+		}) : a === "styleSelectors" && s && o && typeof o == "object" ? Object.values(o).join(", ") : typeof o == "object" && o ? JSON.stringify(o) : typeof o == "boolean" ? o ? "True" : "False" : o, [
+			a,
+			s,
+			o,
+			d,
+			u
+		])
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/ElementDetails.d.ts

@@ -0,0 +1,8 @@
+import { Element } from '@plitzi/sdk-shared';
+export type ElementDetailsProps = {
+    definition?: Element['definition'];
+    attributes?: Element['attributes'];
+    onSelectElement: (id: string) => void;
+};
+declare const ElementDetails: ({ definition, attributes, onSelectElement }: ElementDetailsProps) => import("react/jsx-runtime").JSX.Element;
+export default ElementDetails;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/ElementDetails.mjs

@@ -0,0 +1,21 @@
+import e from "./DetailsAttributes.mjs";
+import t from "./DetailsDefinition.mjs";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/ContainerTabs";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementDetails.tsx
+var a = [{ label: "Definition" }, { label: "Attributes" }], o = ({ definition: o, attributes: s, onSelectElement: c }) => /* @__PURE__ */ r(i, {
+	className: "w-full grow gap-4 overflow-hidden p-4",
+	children: [
+		/* @__PURE__ */ n(i.Tabs, { items: a }),
+		/* @__PURE__ */ n(i.TabContent, {
+			className: "flex-col",
+			children: /* @__PURE__ */ n(t, {
+				definition: o,
+				onSelectElement: c
+			})
+		}),
+		/* @__PURE__ */ n(i.TabContent, { children: /* @__PURE__ */ n(e, { attributes: s }) })
+	]
+});
+//#endregion
+export { o as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/ElementsList.d.ts

@@ -0,0 +1,8 @@
+import { Element } from '@plitzi/sdk-shared';
+export type ElementsListProps = {
+    elements?: Element[];
+    elementSelected?: string;
+    onSelect?: (id?: string) => void;
+};
+declare const ElementsList: ({ elements, elementSelected, onSelect }: ElementsListProps) => import("react/jsx-runtime").JSX.Element;
+export default ElementsList;

package/dist/components/DevToolsPanel/tabs/ElementsViewer/ElementsList.mjs

@@ -0,0 +1,35 @@
+import e from "./ElementsListItem.mjs";
+import { useCallback as t, useMemo as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { get as o } from "@plitzi/plitzi-ui/helpers";
+import s from "@plitzi/plitzi-ui/Input";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/ElementsList.tsx
+var c = ({ elements: c, elementSelected: l, onSelect: u }) => {
+	let [d, f] = r(""), p = n(() => (c ?? []).filter((e) => e.definition.label.toLowerCase().includes(d.toLowerCase())), [c, d]);
+	return /* @__PURE__ */ a("div", {
+		className: "flex h-full w-[280px] shrink-0 flex-col gap-2 border-r border-zinc-200 dark:border-zinc-700",
+		children: [/* @__PURE__ */ i("div", {
+			className: "px-2 pt-2",
+			children: /* @__PURE__ */ i(s, {
+				value: d,
+				onChange: t((e) => f(e), []),
+				placeholder: "Search elements...",
+				size: "sm"
+			})
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col overflow-y-auto text-xs text-zinc-700 dark:text-zinc-300",
+			children: p.length === 0 ? /* @__PURE__ */ i("div", {
+				className: "p-4 text-center text-zinc-400 dark:text-zinc-600",
+				children: "No elements"
+			}) : p.map((t, n) => /* @__PURE__ */ i(e, {
+				name: t.definition.label,
+				isSelected: l === t.id,
+				isVisible: o(t, "definition.initialState.visibility", !0),
+				id: t.id,
+				onSelect: u
+			}, n))
+		})]
+	});
+};
+//#endregion
+export { c as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/ElementsListItem.d.ts

@@ -0,0 +1,9 @@
+export type ElementsListItemProps = {
+    id?: string;
+    name?: string;
+    isSelected?: boolean;
+    isVisible?: boolean;
+    onSelect?: (id?: string) => void;
+};
+declare const ElementsListItem: ({ name, id, isSelected, isVisible, onSelect }: ElementsListItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ElementsListItem;