@plitzi/sdk-dev-tools 0.30.19

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/LogStoreBody.d.ts

@@ -0,0 +1,26 @@
+export type DiffLine = {
+    type: 'same' | 'added' | 'removed';
+    text: string;
+};
+export type Hunk = {
+    start: number;
+    end: number;
+};
+export type Section = {
+    kind: 'line';
+    line: DiffLine;
+    diffIndex: number;
+    hunkIndex: number | null;
+} | {
+    kind: 'separator';
+    hunkIndex: number;
+    total: number;
+};
+export type LogStoreBodyProps = {
+    path?: string;
+    prev?: unknown;
+    next?: unknown;
+    contextLines?: number;
+};
+declare const LogStoreBody: ({ path, prev, next, contextLines }: LogStoreBodyProps) => import("react/jsx-runtime").JSX.Element;
+export default LogStoreBody;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/LogStoreBody.mjs

@@ -0,0 +1,113 @@
+import e from "./helpers/buildDiff.mjs";
+import t from "./helpers/buildHunks.mjs";
+import n from "./helpers/buildSections.mjs";
+import r from "clsx";
+import { useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogStore/LogStoreBody.tsx
+var d = ({ path: d, prev: f, next: p, contextLines: m = 10 }) => {
+	let h = s(null), [g, _] = c(0), v = o(() => e(f, p), [f, p]), y = o(() => t(v), [v]), b = o(() => n(v, y, m), [
+		v,
+		y,
+		m
+	]), x = y.length > 0, S = g === 0, C = g === y.length - 1, w = i((e) => {
+		(h.current?.querySelector(`[data-hunk="${e}"]`))?.scrollIntoView({ block: "center" });
+	}, []), T = i((e) => {
+		let t = g + e;
+		t < 0 || t >= y.length || (_(t), w(t));
+	}, [
+		g,
+		y.length,
+		w
+	]);
+	a(() => {
+		x && (_(0), w(0));
+	}, [v]);
+	let E = i(() => T(-1), [T]), D = i(() => T(1), [T]);
+	return /* @__PURE__ */ u("div", {
+		className: "mx-2 my-1.5 flex flex-col gap-2 rounded border border-zinc-200 bg-zinc-50 font-mono dark:border-zinc-700 dark:bg-zinc-800/50",
+		children: [/* @__PURE__ */ u("div", {
+			className: "flex items-center justify-between border-b border-zinc-200 px-2 py-1 dark:border-zinc-700",
+			children: [/* @__PURE__ */ u("div", {
+				className: "flex min-w-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ l("span", {
+					className: "shrink-0 text-zinc-500 dark:text-zinc-400",
+					children: "path"
+				}), /* @__PURE__ */ l("span", {
+					className: "truncate text-zinc-400 dark:text-zinc-500",
+					children: d ?? "(full state)"
+				})]
+			}), /* @__PURE__ */ u("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: [
+					x && /* @__PURE__ */ u("span", {
+						className: "text-zinc-400 tabular-nums dark:text-zinc-600",
+						children: [
+							g + 1,
+							"/",
+							y.length
+						]
+					}),
+					/* @__PURE__ */ l("button", {
+						className: r("rounded bg-zinc-200 px-2 py-0.5 text-xs text-zinc-600 transition-colors hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600", { "cursor-not-allowed opacity-30 dark:cursor-not-allowed dark:opacity-30": !x || S }),
+						disabled: !x || S,
+						onClick: E,
+						children: "↑ Prev"
+					}),
+					/* @__PURE__ */ l("button", {
+						className: r("rounded bg-zinc-200 px-2 py-0.5 text-xs text-zinc-600 transition-colors hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600", { "cursor-not-allowed opacity-30 dark:cursor-not-allowed dark:opacity-30": !x || C }),
+						disabled: !x || C,
+						onClick: D,
+						children: "↓ Next"
+					})
+				]
+			})]
+		}), /* @__PURE__ */ u("pre", {
+			ref: h,
+			className: "max-h-64 overflow-auto bg-zinc-50 text-xs leading-5 dark:bg-zinc-800",
+			children: [!x && /* @__PURE__ */ l("div", {
+				className: "px-3 py-2 text-zinc-400 italic dark:text-zinc-600",
+				children: "No changes"
+			}), b.map((e, t) => {
+				if (e.kind === "separator") {
+					let n = e.hunkIndex === g;
+					return /* @__PURE__ */ u("div", {
+						"data-hunk": e.hunkIndex,
+						className: r("px-3", {
+							"bg-violet-50 text-violet-600 dark:bg-violet-900/40 dark:text-violet-400": n,
+							"text-zinc-400 dark:text-zinc-700": !n
+						}),
+						children: [
+							"@@ hunk ",
+							e.hunkIndex + 1,
+							"/",
+							e.total,
+							" @@"
+						]
+					}, `sep-${t}`);
+				}
+				let { line: n, diffIndex: i, hunkIndex: a } = e, o = a === g;
+				return n.type === "removed" ? /* @__PURE__ */ u("div", {
+					"data-hunk": a ?? void 0,
+					className: r("px-3", {
+						"bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300": o,
+						"bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400": !o
+					}),
+					children: ["- ", n.text]
+				}, i) : n.type === "added" ? /* @__PURE__ */ u("div", {
+					"data-hunk": a ?? void 0,
+					className: r("px-3", {
+						"bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300": o,
+						"bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400": !o
+					}),
+					children: ["+ ", n.text]
+				}, i) : /* @__PURE__ */ u("div", {
+					className: "px-3 text-zinc-400 dark:text-zinc-600",
+					children: ["  ", n.text]
+				}, i);
+			})]
+		})]
+	});
+};
+//#endregion
+export { d as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/LogStoreHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type LogStoreHeaderProps = {
+    storeName?: string;
+    path?: string;
+    message?: ReactNode;
+    time?: string | Date;
+};
+declare const LogStoreHeader: ({ storeName, path, message, time }: LogStoreHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default LogStoreHeader;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/LogStoreHeader.mjs

@@ -0,0 +1,27 @@
+import e from "../../LogStatus.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { formatDate as r } from "@plitzi/sdk-shared";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogStore/LogStoreHeader.tsx
+var i = ({ storeName: i, path: a, message: o, time: s }) => /* @__PURE__ */ n("div", {
+	className: "flex w-full items-center gap-2 overflow-hidden",
+	children: [
+		/* @__PURE__ */ t("span", {
+			className: "shrink-0 font-mono text-zinc-400 tabular-nums dark:text-zinc-500",
+			children: typeof s == "string" ? s : r(s)
+		}),
+		/* @__PURE__ */ t(e, {
+			logType: "info",
+			children: "Store"
+		}),
+		i && /* @__PURE__ */ t("span", {
+			className: "shrink-0 font-semibold text-zinc-700 dark:text-zinc-200",
+			children: i
+		}),
+		/* @__PURE__ */ t("span", {
+			className: "truncate font-mono text-zinc-400 dark:text-zinc-500",
+			children: a ?? o ?? "(full state)"
+		})
+	]
+});
+//#endregion
+export { i as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildDiff.d.ts

@@ -0,0 +1,3 @@
+import { DiffLine } from '../LogStoreBody';
+declare const buildDiff: (prev: unknown, next: unknown) => DiffLine[];
+export default buildDiff;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildDiff.mjs

@@ -0,0 +1,20 @@
+import e from "./serialize.mjs";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildDiff.ts
+var t = (t, n) => {
+	let r = e(t).split("\n"), i = e(n).split("\n"), a = r.length, o = i.length, s = Array.from({ length: a + 1 }, () => Array(o + 1).fill(0));
+	for (let e = 1; e <= a; e++) for (let t = 1; t <= o; t++) s[e][t] = r[e - 1] === i[t - 1] ? s[e - 1][t - 1] + 1 : Math.max(s[e - 1][t], s[e][t - 1]);
+	let c = [], l = a, u = o;
+	for (; l > 0 || u > 0;) l > 0 && u > 0 && r[l - 1] === i[u - 1] ? (c.unshift({
+		type: "same",
+		text: r[l - 1]
+	}), l--, u--) : u > 0 && (l === 0 || s[l][u - 1] >= s[l - 1][u]) ? (c.unshift({
+		type: "added",
+		text: i[u - 1]
+	}), u--) : (c.unshift({
+		type: "removed",
+		text: r[l - 1]
+	}), l--);
+	return c;
+};
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildHunks.d.ts

@@ -0,0 +1,3 @@
+import { DiffLine, Hunk } from '../LogStoreBody';
+declare const buildHunks: (diff: DiffLine[]) => Hunk[];
+export default buildHunks;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildHunks.mjs

@@ -0,0 +1,14 @@
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildHunks.ts
+var e = (e) => {
+	let t = [], n = -1;
+	for (let r = 0; r < e.length; r++) e[r].type === "same" ? n !== -1 && (t.push({
+		start: n,
+		end: r - 1
+	}), n = -1) : n === -1 && (n = r);
+	return n !== -1 && t.push({
+		start: n,
+		end: e.length - 1
+	}), t;
+};
+//#endregion
+export { e as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildSections.d.ts

@@ -0,0 +1,3 @@
+import { DiffLine, Hunk, Section } from '../LogStoreBody';
+declare const buildSections: (diff: DiffLine[], hunks: Hunk[], contextLines: number) => Section[];
+export default buildSections;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildSections.mjs

@@ -0,0 +1,30 @@
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/buildSections.ts
+var e = (e, t, n) => {
+	if (t.length === 0) return e.map((e, t) => ({
+		kind: "line",
+		line: e,
+		diffIndex: t,
+		hunkIndex: null
+	}));
+	let r = [], i = -1;
+	return t.forEach((a, o) => {
+		let s = Math.max(0, a.start - n), c = Math.min(e.length - 1, a.end + n);
+		s > i + 1 && r.push({
+			kind: "separator",
+			hunkIndex: o,
+			total: t.length
+		});
+		for (let t = Math.max(s, i + 1); t <= c; t++) {
+			let n = t >= a.start && t <= a.end;
+			r.push({
+				kind: "line",
+				line: e[t],
+				diffIndex: t,
+				hunkIndex: n ? o : null
+			});
+		}
+		i = c;
+	}), r;
+};
+//#endregion
+export { e as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/serialize.d.ts

@@ -0,0 +1,2 @@
+declare const serialize: (value: unknown) => string;
+export default serialize;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/serialize.mjs

@@ -0,0 +1,12 @@
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogStore/helpers/serialize.ts
+var e = (e) => {
+	if (e == null) return "";
+	if (typeof e == "function") return "Function";
+	try {
+		return JSON.stringify(e, null, 2);
+	} catch {
+		return String(e);
+	}
+};
+//#endregion
+export { e as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/index.d.ts

@@ -0,0 +1 @@
+export { default } from './LogStore';

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/index.mjs

@@ -0,0 +1,2 @@
+import e from "./LogStore.mjs";
+export { e as default };

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

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

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

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

package/dist/components/DevToolsPanel/tabs/PluginsViewer/PluginDetails.d.ts

@@ -0,0 +1,8 @@
+export type PluginDetailsProps = {
+    label?: string;
+    version?: string;
+    author?: string;
+    settings?: Record<string, unknown>;
+};
+declare const PluginDetails: ({ author, settings, label, version }: PluginDetailsProps) => import("react/jsx-runtime").JSX.Element;
+export default PluginDetails;

package/dist/components/DevToolsPanel/tabs/PluginsViewer/PluginDetails.mjs

@@ -0,0 +1,59 @@
+import { useMemo as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/sdk-shared/helpers/syntaxHighlight";
+//#region src/components/DevToolsPanel/tabs/PluginsViewer/PluginDetails.tsx
+var i = ({ author: i, settings: a, label: o, version: s }) => {
+	let c = e(() => !a || Object.keys(a).length === 0 ? null : r(JSON.stringify(a, null, 2)), [a]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex h-full grow basis-0 flex-col overflow-y-auto p-4",
+		children: [/* @__PURE__ */ n("div", {
+			className: "mb-4 border-b border-zinc-200 pb-3 dark:border-zinc-700",
+			children: [/* @__PURE__ */ t("div", {
+				className: "text-base font-semibold text-zinc-800 dark:text-zinc-200",
+				children: o
+			}), /* @__PURE__ */ t("div", {
+				className: "text-xs text-zinc-400 dark:text-zinc-500",
+				children: "Plugin"
+			})]
+		}), /* @__PURE__ */ n("div", {
+			className: "flex flex-col gap-3",
+			children: [
+				/* @__PURE__ */ n("div", {
+					className: "flex flex-col gap-0.5",
+					children: [/* @__PURE__ */ t("span", {
+						className: "text-xs font-medium tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+						children: "Version"
+					}), /* @__PURE__ */ t("span", {
+						className: "font-mono text-xs text-zinc-800 dark:text-zinc-200",
+						children: s ?? "—"
+					})]
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "flex flex-col gap-0.5",
+					children: [/* @__PURE__ */ t("span", {
+						className: "text-xs font-medium tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+						children: "Author"
+					}), /* @__PURE__ */ t("span", {
+						className: "text-xs text-zinc-800 dark:text-zinc-200",
+						children: i ?? "—"
+					})]
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ t("span", {
+						className: "text-xs font-medium tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+						children: "Settings"
+					}), c ? /* @__PURE__ */ t("pre", {
+						className: "overflow-auto rounded bg-zinc-50 p-2 font-mono text-xs leading-5 dark:bg-zinc-800",
+						dangerouslySetInnerHTML: { __html: c }
+					}) : /* @__PURE__ */ t("span", {
+						className: "text-xs text-zinc-400 italic dark:text-zinc-500",
+						children: "No settings"
+					})]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { i as default };

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

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

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

@@ -0,0 +1,46 @@
+import e from "./PluginDetails.mjs";
+import t from "../../../List/index.mjs";
+import n from "clsx";
+import { use as r, useCallback as i, useMemo as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@plitzi/sdk-plugins/PluginsContext";
+//#region src/components/DevToolsPanel/tabs/PluginsViewer/PluginsViewer.tsx
+var u = ({ className: u }) => {
+	let { plugins: d } = r(l), f = a(() => Object.keys(d).map((e) => {
+		let t = d[e];
+		return {
+			...t,
+			id: e,
+			name: e,
+			label: /* @__PURE__ */ c("div", {
+				className: "flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ s("span", {
+					className: "capitalize",
+					children: e
+				}), /* @__PURE__ */ s("span", {
+					className: "text-[10px] text-zinc-400 dark:text-zinc-500",
+					children: t.manifest.version
+				})]
+			})
+		};
+	}), [d]), [p, m] = o(), h = i((e) => m(e), []);
+	return /* @__PURE__ */ c("div", {
+		className: n("flex h-full w-full", u),
+		children: [/* @__PURE__ */ s(t, {
+			className: "w-[240px]",
+			items: f,
+			value: p,
+			onSelect: h
+		}), p ? /* @__PURE__ */ s(e, {
+			label: p.name,
+			version: p.manifest.version,
+			author: p.manifest.author,
+			settings: p.settings
+		}) : /* @__PURE__ */ c("div", {
+			className: "flex grow flex-col items-center justify-center gap-2 text-zinc-400 dark:text-zinc-600",
+			children: [/* @__PURE__ */ s("i", { className: "fa-solid fa-puzzle-piece text-2xl opacity-30" }), /* @__PURE__ */ s("span", { children: "Select a plugin" })]
+		})]
+	});
+};
+//#endregion
+export { u as default };

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

@@ -0,0 +1,6 @@
+import { default as PluginDetails } from './PluginDetails';
+import { default as PluginsViewer } from './PluginsViewer';
+export * from './PluginDetails';
+export * from './PluginsViewer';
+export { PluginDetails };
+export default PluginsViewer;

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

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

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariableValue.d.ts

@@ -0,0 +1,8 @@
+export type VariableValueProps = {
+    className?: string;
+    type?: string;
+    preffix?: string;
+    value?: string;
+};
+declare const VariableValue: ({ className, type, preffix, value }: VariableValueProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableValue;

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariableValue.mjs

@@ -0,0 +1,27 @@
+import e from "clsx";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/VariablesViewer/VariableValue.tsx
+var r = ({ className: r, type: i, preffix: a, value: o }) => /* @__PURE__ */ n("div", {
+	className: e("flex items-center gap-1.5", r),
+	children: [
+		a && /* @__PURE__ */ t("span", {
+			className: "shrink-0 text-[10px] font-medium tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+			children: a
+		}),
+		i === "color" && /* @__PURE__ */ t("div", {
+			className: "h-3.5 w-3.5 shrink-0 rounded-sm border border-zinc-300 dark:border-zinc-600",
+			title: o,
+			style: { backgroundColor: o }
+		}),
+		/* @__PURE__ */ t("span", {
+			className: e("truncate font-mono", {
+				"text-zinc-700 dark:text-zinc-300": i === "color",
+				"text-violet-700 dark:text-violet-300": i !== "color"
+			}),
+			title: o,
+			children: o ?? "—"
+		})
+	]
+});
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesList.d.ts

@@ -0,0 +1,7 @@
+import { SchemaVariable } from '@plitzi/sdk-shared';
+export type VariablesListProps = {
+    variables?: SchemaVariable[];
+    variablesParsed?: Record<string, string>;
+};
+declare const VariablesList: ({ variables, variablesParsed }: VariablesListProps) => import("react/jsx-runtime").JSX.Element;
+export default VariablesList;

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesList.mjs

@@ -0,0 +1,25 @@
+import e from "./VariablesListItem.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/VariablesViewer/VariablesList.tsx
+var r = ({ variables: r, variablesParsed: i }) => !r || r.length === 0 ? /* @__PURE__ */ t("div", {
+	className: "py-4 text-center text-xs text-zinc-400 italic dark:text-zinc-600",
+	children: "No variables defined"
+}) : /* @__PURE__ */ n("div", {
+	className: "w-full overflow-hidden rounded border border-zinc-200 dark:border-zinc-700",
+	children: [/* @__PURE__ */ n("div", {
+		className: "grid grid-cols-[1fr_1.5fr] border-b border-zinc-200 bg-zinc-50 px-3 py-1 text-zinc-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-500",
+		children: [/* @__PURE__ */ t("span", {
+			className: "text-[10px] font-semibold tracking-wider uppercase",
+			children: "Name"
+		}), /* @__PURE__ */ t("span", {
+			className: "text-[10px] font-semibold tracking-wider uppercase",
+			children: "Value"
+		})]
+	}), r.map((n, r) => /* @__PURE__ */ t(e, {
+		name: n.name,
+		type: n.type,
+		value: i?.[n.name]
+	}, r))]
+});
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesListItem.d.ts

@@ -0,0 +1,8 @@
+import { StyleVariableValue } from '@plitzi/sdk-shared';
+export type VariablesListItemProps = {
+    name?: string;
+    type?: string;
+    value?: StyleVariableValue;
+};
+declare const VariablesListItem: ({ name, type, value }: VariablesListItemProps) => import("react/jsx-runtime").JSX.Element;
+export default VariablesListItem;

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesListItem.mjs

@@ -0,0 +1,29 @@
+import e from "./VariableValue.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/VariablesViewer/VariablesListItem.tsx
+var r = ({ name: r, type: i, value: a = "" }) => /* @__PURE__ */ n("div", {
+	className: "grid grid-cols-[1fr_1.5fr] items-center border-b border-zinc-100 px-3 py-1.5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/60",
+	children: [/* @__PURE__ */ n("div", {
+		className: "flex min-w-0 flex-col gap-0.5 pr-2",
+		children: [/* @__PURE__ */ t("span", {
+			className: "truncate font-medium text-zinc-800 dark:text-zinc-200",
+			title: r,
+			children: r
+		}), /* @__PURE__ */ t("span", {
+			className: "text-[10px] tracking-wider text-zinc-400 uppercase dark:text-zinc-600",
+			children: i
+		})]
+	}), /* @__PURE__ */ n("div", {
+		className: "flex min-w-0 flex-col gap-0.5",
+		children: [(typeof a == "string" || typeof a == "number") && /* @__PURE__ */ t(e, {
+			type: i,
+			value: a
+		}), typeof a == "object" && Object.keys(a).map((n, r) => /* @__PURE__ */ t(e, {
+			type: i,
+			preffix: `${n}:`,
+			value: a[n]
+		}, r))]
+	})]
+});
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesStyleList.d.ts

@@ -0,0 +1,6 @@
+import { StyleVariables } from '@plitzi/sdk-shared';
+export type VariablesListProps = {
+    variables?: Partial<StyleVariables>;
+};
+declare const VariablesStyleList: ({ variables }: VariablesListProps) => import("react/jsx-runtime").JSX.Element;
+export default VariablesStyleList;

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesStyleList.mjs

@@ -0,0 +1,38 @@
+import e from "./VariablesListItem.mjs";
+import { useMemo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/VariablesViewer/VariablesStyleList.tsx
+var i = ({ variables: i }) => {
+	let a = t(() => Object.keys(i ?? {}).reduce((e, t) => {
+		let n = i?.[t];
+		return n && Object.keys(n).forEach((r) => {
+			e.push({
+				name: r,
+				type: t === "color" ? "color" : "text",
+				value: n[r]
+			});
+		}), e;
+	}, []), [i]);
+	return a.length === 0 ? /* @__PURE__ */ n("div", {
+		className: "py-4 text-center text-xs text-zinc-400 italic dark:text-zinc-600",
+		children: "No style variables defined"
+	}) : /* @__PURE__ */ r("div", {
+		className: "w-full overflow-hidden rounded border border-zinc-200 dark:border-zinc-700",
+		children: [/* @__PURE__ */ r("div", {
+			className: "grid grid-cols-[1fr_1.5fr] border-b border-zinc-200 bg-zinc-50 px-3 py-1 text-zinc-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-500",
+			children: [/* @__PURE__ */ n("span", {
+				className: "text-[10px] font-semibold tracking-wider uppercase",
+				children: "Name"
+			}), /* @__PURE__ */ n("span", {
+				className: "text-[10px] font-semibold tracking-wider uppercase",
+				children: "Value"
+			})]
+		}), a.map((t, r) => /* @__PURE__ */ n(e, {
+			name: t.name,
+			type: t.type,
+			value: t.value
+		}, r))]
+	});
+};
+//#endregion
+export { i as default };

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

@@ -0,0 +1,2 @@
+declare const VariablesViewer: () => import("react/jsx-runtime").JSX.Element;
+export default VariablesViewer;

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

@@ -0,0 +1,33 @@
+import e from "./VariablesList.mjs";
+import t from "./VariablesStyleList.mjs";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createStoreHook as i } from "@plitzi/sdk-store/createStore";
+import a from "@plitzi/sdk-shared/dataSource/hooks/useDataSource";
+//#region src/components/DevToolsPanel/tabs/VariablesViewer/VariablesViewer.tsx
+var o = () => {
+	let { useStore: o } = i(), [[s, c]] = o(["schema.variables", "style.variables"]), { variables: l } = a({
+		id: "",
+		mode: "read"
+	});
+	return /* @__PURE__ */ r("div", {
+		className: "flex w-full flex-col gap-4 overflow-y-auto p-3",
+		children: [/* @__PURE__ */ r("section", {
+			className: "flex flex-col gap-1.5",
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-code" }), "Schema Variables"]
+			}), /* @__PURE__ */ n(e, {
+				variables: s,
+				variablesParsed: l
+			})]
+		}), /* @__PURE__ */ r("section", {
+			className: "flex flex-col gap-1.5",
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-palette" }), "Style Variables"]
+			}), /* @__PURE__ */ n(t, { variables: c })]
+		})]
+	});
+};
+//#endregion
+export { o as default };

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

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

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

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