@plitzi/sdk-dev-tools 0.37.9 → 0.37.10

package/dist/DevToolsContainer.mjs

@@ -1,69 +1,75 @@
-import e from "./DevToolsContextProvider.mjs";
-import t from "./DevToolsRoot.mjs";
-import { useIsSelectedInstance as n } from "./instanceRegistry.mjs";
-import r from "./useHydrated.mjs";
-import i from "./useRegisterQueriesStore.mjs";
-import a from "./useRegisterRootStore.mjs";
-import o from "@plitzi/plitzi-ui/ContainerShadow";
-import s from "@plitzi/plitzi-ui/hooks/useStorage";
-import c from "clsx";
-import { Suspense as l, lazy as u, useCallback as d, useRef as f, useState as p } from "react";
-import { DevStoreScopeContext as m } from "@plitzi/nexus/react";
-import h from "@plitzi/sdk-shared/theme/useTheme";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import e from "./agentInspector/useAgentInspector.mjs";
+import t from "./DevToolsContextProvider.mjs";
+import n from "./DevToolsRoot.mjs";
+import { useIsSelectedInstance as r } from "./instanceRegistry.mjs";
+import i from "./useHydrated.mjs";
+import a from "./useRegisterQueriesStore.mjs";
+import o from "./useRegisterRootStore.mjs";
+import s from "@plitzi/plitzi-ui/ContainerShadow";
+import c from "@plitzi/plitzi-ui/hooks/useStorage";
+import l from "clsx";
+import { Suspense as u, lazy as d, useCallback as f, useRef as p, useState as m } from "react";
+import { DevStoreScopeContext as h } from "@plitzi/nexus/react";
+import g from "@plitzi/sdk-shared/theme/useTheme";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/DevToolsContainer.tsx
-var v = u(() => import("./components/DevToolsOverlay/index.mjs")), y = "horizontal", b = 0, x = ({ children: u, className: x, innerClassName: S, enabled: C = !1, instanceId: w, renderMode: T = "default", scroll: E = "container", devToolsStyle: D = "", devToolsStyleLink: O = "" }) => {
-	let { resolvedTheme: k } = h(), [A, j] = s("plitzi-sdk.dev-tools.orientation", y), [M, N] = s("plitzi-sdk.dev-tools.collapsed", !0), [P, F] = s("plitzi-sdk.dev-tools.tab", "logs"), [I, L] = p(), R = f(void 0);
-	R.current ||= `sdk-instance-${++b}`;
-	let z = w || R.current, B = r(), V = B ? A : y, H = n(z, C);
-	a(C), i(H, z);
-	let U = d((e) => j(e), [j]), W = d((e) => {
-		e && F("logs"), L(e), N(!1);
-	}, [N, F]), G = d(() => N(!0), [N]), K = d((e) => {
-		L(void 0), F(e);
-	}, [F]);
-	if (!C) return u;
-	let q = E === "document" && (!B || M), J = H && B && /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { children: /* @__PURE__ */ _(l, {
+var y = d(() => import("./components/DevToolsOverlay/index.mjs")), b = "horizontal", x = 0, S = ({ children: d, className: S, innerClassName: C, enabled: w = !1, instanceId: T, renderMode: E = "default", scroll: D = "container", qa: O = !1, devToolsStyle: k = "", devToolsStyleLink: A = "" }) => {
+	let { resolvedTheme: j } = g(), [M, N] = c("plitzi-sdk.dev-tools.orientation", b), [P, F] = c("plitzi-sdk.dev-tools.collapsed", !0), [I, L] = c("plitzi-sdk.dev-tools.tab", "logs"), [R, z] = m(), B = p(void 0), V = p(null);
+	B.current ||= `sdk-instance-${++x}`;
+	let H = T || B.current, U = i(), W = U ? M : b, G = r(H, w);
+	o(w), a(G, H), e(G);
+	let K = f((e) => N(e), [N]), q = f((e) => {
+		e && L("logs"), z(e), F(!1);
+	}, [F, L]), J = f(() => F(!0), [F]), Y = f((e) => {
+		z(void 0), L(e);
+	}, [L]);
+	if (!w) return d;
+	let X = D === "document" && (!U || P), Z = G && U && /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { children: /* @__PURE__ */ v(u, {
 		fallback: null,
-		children: [T === "default" && /* @__PURE__ */ g(v, {
-			className: c({ dark: k === "dark" }),
-			collapsed: M,
-			orientation: V,
-			tabSelected: P,
-			logTypeFilter: I,
-			onOpen: W,
-			onCollapse: G,
-			onTabSelect: K,
-			onChangeOrientation: U
-		}), T === "shadow" && /* @__PURE__ */ _(o, { children: [O && /* @__PURE__ */ g(o.Link, { href: O }), /* @__PURE__ */ _(o.Content, { children: [/* @__PURE__ */ g("style", { dangerouslySetInnerHTML: { __html: D } }), /* @__PURE__ */ g(v, {
-			className: c({ dark: k === "dark" }),
-			collapsed: M,
-			orientation: V,
-			tabSelected: P,
-			logTypeFilter: I,
-			onOpen: W,
-			onCollapse: G,
-			onTabSelect: K,
-			onChangeOrientation: U
+		children: [E === "default" && /* @__PURE__ */ _(y, {
+			className: l({ dark: j === "dark" }),
+			collapsed: P,
+			orientation: W,
+			tabSelected: I,
+			logTypeFilter: R,
+			onOpen: q,
+			onCollapse: J,
+			onTabSelect: Y,
+			onChangeOrientation: K,
+			pageRef: V,
+			qa: O
+		}), E === "shadow" && /* @__PURE__ */ v(s, { children: [A && /* @__PURE__ */ _(s.Link, { href: A }), /* @__PURE__ */ v(s.Content, { children: [/* @__PURE__ */ _("style", { dangerouslySetInnerHTML: { __html: k } }), /* @__PURE__ */ _(y, {
+			className: l({ dark: j === "dark" }),
+			collapsed: P,
+			orientation: W,
+			tabSelected: I,
+			logTypeFilter: R,
+			onOpen: q,
+			onCollapse: J,
+			onTabSelect: Y,
+			onChangeOrientation: K,
+			pageRef: V,
+			qa: O
 		})] })] })]
 	}) }) });
-	return /* @__PURE__ */ _("div", {
-		className: c("relative flex min-w-0 grow", {
-			"overflow-auto": !q,
-			"flex-col": q || V === "horizontal",
-			"h-screen": !q && V === "vertical"
-		}, x),
-		children: [/* @__PURE__ */ g(m, {
-			value: z,
-			children: /* @__PURE__ */ g("div", {
-				className: c("grow", { "basis-0 flex-col overflow-auto": !q }, S),
-				children: u
+	return /* @__PURE__ */ v("div", {
+		className: l("relative flex min-w-0 grow", {
+			"overflow-auto": !X,
+			"flex-col": X || W === "horizontal",
+			"h-screen": !X && W === "vertical"
+		}, S),
+		children: [/* @__PURE__ */ _(h, {
+			value: H,
+			children: /* @__PURE__ */ _("div", {
+				ref: V,
+				className: l("grow", { "basis-0 flex-col overflow-auto": !X }, C),
+				children: d
 			})
-		}), q ? /* @__PURE__ */ g("div", {
+		}), X ? /* @__PURE__ */ _("div", {
 			className: "sticky bottom-0 h-0",
-			children: J
-		}) : J]
+			children: Z
+		}) : Z]
 	});
 };
 //#endregion
-export { x as default };
+export { S as default };

package/dist/agentInspector/flowRuns.d.ts

@@ -0,0 +1,22 @@
+import { Log } from '@plitzi/sdk-shared';
+/** One step of a flow that ran, in words. */
+export type FlowStep = {
+    title: string;
+    action: string;
+    status: string;
+    ms: number;
+    error?: string;
+};
+/** A flow that ran: what fired it, on what, how it ended, and every step it took. */
+export type FlowRun = {
+    at: string;
+    trigger: string;
+    on?: string;
+    status: string;
+    ms: number;
+    steps: FlowStep[];
+};
+/** A finished flow, from the log the interactions write; anything else (a note about one step) is not one. */
+export declare const flowRunOf: (log: Log) => FlowRun | undefined;
+/** One line for the console: what fired, where, and how it ended. */
+export declare const flowRunLine: (run: FlowRun) => string;

package/dist/agentInspector/flowRuns.mjs

@@ -0,0 +1,26 @@
+//#region src/agentInspector/flowRuns.ts
+var e = (e) => typeof e == "object" && "nodes" in e && "startTime" in e && "node" in e, t = (e) => {
+	if (e.status === "failed") return e.result instanceof Error ? e.result.message : typeof e.result == "string" ? e.result : void 0;
+}, n = (n) => {
+	if (n.category !== "interactions" || !e(n.params)) return;
+	let { node: r, hostElementId: i, status: a, startTime: o, endTime: s, nodes: c } = n.params, l = Object.values(c).filter((e) => e.node.id !== r.id).toSorted((e, t) => e.startTime - t.startTime).map((e) => {
+		let n = t(e);
+		return {
+			title: e.node.title,
+			action: e.node.action,
+			status: e.status,
+			ms: Math.round(e.endTime - e.startTime),
+			...n === void 0 ? {} : { error: n }
+		};
+	});
+	return {
+		at: n.time ?? "",
+		trigger: `${r.title} [${r.action}]`,
+		...i === void 0 ? {} : { on: i },
+		status: a,
+		ms: Math.round(s - o),
+		steps: l
+	};
+}, r = (e) => `[flow] ${e.trigger}${e.on ? ` on ${e.on}` : ""} → ${e.status} (${String(e.steps.length)} steps, ${String(e.ms)}ms)` + e.steps.filter((e) => e.error !== void 0).map((e) => `\n  ✗ ${e.title} [${e.action}]: ${e.error ?? ""}`).join("");
+//#endregion
+export { r as flowRunLine, n as flowRunOf };

package/dist/agentInspector/inspector.d.ts

@@ -0,0 +1,27 @@
+import { FlowRun } from './flowRuns';
+import { ElementReport } from './report';
+import { DevStore } from '@plitzi/nexus';
+/** `window.__plitzi`: the page's state, data, elements and flows, in text, for whoever cannot read the panel. */
+export type AgentInspector = {
+    help: () => string;
+    state: (key?: string) => unknown;
+    setState: (key: string, value: unknown) => void;
+    sources: (name?: string) => unknown;
+    element: (id: string) => ElementReport | undefined;
+    flows: (limit?: number) => FlowRun[];
+    watch: (on?: boolean) => string;
+};
+export type AgentInspectorOptions = {
+    /** The root store: the schema, `runtime.state`, every element's UI state. */
+    root: DevStore;
+    /** Writes one key of `runtime.state`, as a `setState` step does. */
+    writeState: (key: string, value: unknown) => void;
+    /** Every store the dev tools know — a provider's data lives in its own. */
+    stores: () => readonly DevStore[];
+    /** The flows that ran, newest last. */
+    runs: () => readonly FlowRun[];
+    /** Whether each flow is said in the console as it ends. */
+    setWatching: (on: boolean) => void;
+    document: Document;
+};
+export declare const createAgentInspector: ({ root, writeState, stores, runs, setWatching, document }: AgentInspectorOptions) => AgentInspector;

package/dist/agentInspector/inspector.mjs

@@ -0,0 +1,20 @@
+import { elementReport as e, plain as t, recordAt as n } from "./report.mjs";
+//#region src/agentInspector/inspector.ts
+var r = "window.__plitzi — this page, in text (debug mode only):\n  state(key?)          runtime.state, or one key of it\n  setState(key, value) writes runtime.state.<key>, as a setState step would\n  sources(name?)       every source's current value by name (apiContainer_site, list_products…), or one\n  element(id)          an element by its id, in a page or a component: type, attributes, what it reads, its own state,\n                       the component it places, copies, on screen, box\n  flows(limit = 20)    the last flows that ran: trigger, element, status, every step with its time and error\n  watch(on = true)     one console line per flow as it ends", i = ({ root: i, writeState: a, stores: o, runs: s, setWatching: c, document: l }) => ({
+	help: () => r,
+	state: (e) => {
+		let r = n(i.getState(), "runtime", "state");
+		return t(e === void 0 ? r : r[e]);
+	},
+	setState: a,
+	sources: (e) => {
+		let r = {};
+		for (let e of [i, ...o()]) Object.assign(r, n(e.getOwnState(), "runtime", "sources"));
+		return t(e === void 0 ? r : r[e]);
+	},
+	element: (t) => e(i.getState(), t, l),
+	flows: (e = 20) => s().slice(-e),
+	watch: (e = !0) => (c(e), e ? "Each flow is said in the console as it ends." : "Flows are no longer said in the console.")
+});
+//#endregion
+export { i as createAgentInspector };

package/dist/agentInspector/report.d.ts

@@ -0,0 +1,36 @@
+/** An element as it is asked about — by the panel, by `window.__plitzi.element()` and through it `plitzi check`. */
+export type ElementReport = {
+    id: string;
+    type?: string;
+    /** The component whose tree holds it, when it is inside one rather than on a page or a layout. */
+    inComponent?: string;
+    /** The component it places, when it is an instance — and what it hands in is among its attributes. */
+    instanceOf?: string;
+    attributes?: Record<string, unknown>;
+    /** What it reads: each binding's target, its source and, when it has one, its template. */
+    bindings?: {
+        category: string;
+        to: string;
+        source: string;
+        template?: string;
+    }[];
+    /** The element's own UI state — an open dropdown, a tab — as the runtime keeps it. */
+    state?: unknown;
+    /** How many copies are on the page: a list row's elements are one per row, a component's one per instance. */
+    copies: number;
+    visible: boolean;
+    box?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+/** A value as JSON can carry it: functions left out, a cycle cut, depth bounded. */
+export declare const plain: (value: unknown, depth?: number, seen?: WeakSet<object>) => unknown;
+export declare const recordAt: (value: unknown, ...path: string[]) => Record<string, unknown>;
+/**
+ * What an element is and how it is doing, read from the root store's state and the page: its type and attributes, what
+ * it binds to, its own state, and where it is on screen. Undefined for an id neither the document nor the page knows.
+ */
+export declare const elementReport: (state: unknown, id: string, document: Document) => ElementReport | undefined;

package/dist/agentInspector/report.mjs

@@ -0,0 +1,53 @@
+import { isRecord as e } from "@plitzi/sdk-shared/helpers/isRecord";
+//#region src/agentInspector/report.ts
+var t = (e, n = 0, r = /* @__PURE__ */ new WeakSet()) => {
+	if (typeof e != "function") return typeof e != "object" || !e ? e : r.has(e) || n > 12 ? "[…]" : (r.add(e), Array.isArray(e) ? e.map((e) => t(e, n + 1, r)) : Object.fromEntries(Object.entries(e).map(([e, i]) => [e, t(i, n + 1, r)]).filter(([, e]) => e !== void 0)));
+}, n = (t, ...n) => {
+	let r = t;
+	for (let t of n) r = e(r) ? r[t] : void 0;
+	return e(r) ? r : {};
+}, r = (e) => Array.isArray(e) ? e : [], i = (e) => Object.entries(n(e, "definition", "bindings")).flatMap(([e, t]) => r(t).flatMap((t) => {
+	let { to: i, source: a, transformers: o } = n(t), s = r(o).map((e) => n(e, "params").template).find((e) => typeof e == "string");
+	return typeof i == "string" && typeof a == "string" ? [{
+		category: e,
+		to: i,
+		source: a,
+		...typeof s == "string" ? { template: s } : {}
+	}] : [];
+})), a = (e, t) => {
+	let r = n(e, "flat");
+	if (Object.hasOwn(r, t)) return { element: r[t] };
+	for (let [r, i] of Object.entries(n(e, "components"))) {
+		let e = n(i, "flat");
+		if (Object.hasOwn(e, t)) return {
+			element: e[t],
+			inComponent: r
+		};
+	}
+	return {};
+}, o = (r, o, s) => {
+	let { element: c, inComponent: l } = a(n(r, "schema"), o), u = Array.from(s.querySelectorAll(`[data-id="${o}"]`));
+	if (!e(c) && u.length === 0) return;
+	let d = u.at(0), f = d?.getBoundingClientRect(), p = d ? getComputedStyle(d) : void 0, m = f !== void 0 && f.width > 0 && f.height > 0 && p?.display !== "none" && p?.visibility !== "hidden", h = n(c, "definition").type, g = n(c, "attributes"), _ = h === "reference" && g.referenceType === "component" && typeof g.referenceId == "string" ? g.referenceId : void 0, v = n(r, "runtime", "elements")[o];
+	return {
+		id: o,
+		...typeof h == "string" ? { type: h } : {},
+		...l === void 0 ? {} : { inComponent: l },
+		..._ === void 0 ? {} : { instanceOf: _ },
+		...e(c) ? {
+			attributes: n(t(c), "attributes"),
+			bindings: i(c)
+		} : {},
+		...v === void 0 ? {} : { state: t(v) },
+		copies: u.length,
+		visible: m,
+		...f ? { box: {
+			x: Math.round(f.x),
+			y: Math.round(f.y),
+			width: Math.round(f.width),
+			height: Math.round(f.height)
+		} } : {}
+	};
+};
+//#endregion
+export { o as elementReport, t as plain, n as recordAt };

package/dist/agentInspector/useAgentInspector.d.ts

@@ -0,0 +1,15 @@
+import { AgentInspector } from './inspector';
+declare global {
+    interface Window {
+        /** This page, in text, for an agent — see `window.__plitzi.help()`. Present in debug mode only. */
+        __plitzi?: AgentInspector;
+    }
+}
+/**
+ * Puts the selected instance's state, sources, elements and flows on `window.__plitzi`, while the dev tools are on.
+ *
+ * The panel shows all of it to a person; an agent driving the page through a browser reads text, and was left inferring
+ * state from classes in the DOM. Every flow that ends is kept from the moment the dev tools mount.
+ */
+declare const useAgentInspector: (enabled: boolean) => void;
+export default useAgentInspector;

package/dist/agentInspector/useAgentInspector.mjs

@@ -0,0 +1,36 @@
+import { flowRunLine as e, flowRunOf as t } from "./flowRuns.mjs";
+import { createAgentInspector as n } from "./inspector.mjs";
+import { useContext as r, useEffect as i } from "react";
+import { StoreContext as a } from "@plitzi/nexus/react";
+import { getDevStoresSnapshot as o } from "@plitzi/nexus";
+import { pConsole as s } from "@plitzi/sdk-shared/devTools";
+import { useCommonStoreSetter as c } from "@plitzi/sdk-shared/store";
+//#region src/agentInspector/useAgentInspector.ts
+var l = 100, u = (u) => {
+	let d = r(a), f = c();
+	i(() => {
+		if (!u || !d) return;
+		let r = [], i = !1, a = s.addListener((n) => {
+			let a = t(n);
+			a && (r.push(a), r.length > l && r.shift(), i && console.info(e(a)));
+		}, { replay: !0 }), c = n({
+			root: d,
+			writeState: (e, t) => f(`runtime.state.${e}`, t),
+			stores: () => o().map((e) => e.store),
+			runs: () => r,
+			setWatching: (e) => {
+				i = e;
+			},
+			document
+		});
+		return window.__plitzi = c, () => {
+			a(), window.__plitzi === c && delete window.__plitzi;
+		};
+	}, [
+		u,
+		d,
+		f
+	]);
+};
+//#endregion
+export { u as default };

package/dist/components/DevToolsOverlay/DevToolsOverlay.d.ts

@@ -1,5 +1,6 @@
 import { Orientation } from '../../DevToolsContainer';
 import { LogType } from '@plitzi/sdk-shared';
+import { RefObject } from 'react';
 export type DevToolsOverlayProps = {
     className?: string;
     collapsed: boolean;
@@ -10,6 +11,10 @@ export type DevToolsOverlayProps = {
     onCollapse: () => void;
     onTabSelect: (tabSelected: string) => void;
     onChangeOrientation: (orientation: Orientation) => void;
+    /** The page's own box, which the QA tools draw over and look in. */
+    pageRef: RefObject<HTMLElement | null>;
+    /** Whether the QA tab and its layer are offered: only over a page — see `DevToolsContainer`. */
+    qa: boolean;
 };
-declare const DevToolsOverlay: ({ className, collapsed, orientation, tabSelected, logTypeFilter, onOpen, onCollapse, onTabSelect, onChangeOrientation }: DevToolsOverlayProps) => import('react').JSX.Element;
+declare const DevToolsOverlay: ({ className, collapsed, orientation, tabSelected, logTypeFilter, onOpen, onCollapse, onTabSelect, onChangeOrientation, pageRef, qa }: DevToolsOverlayProps) => import('react').JSX.Element;
 export default DevToolsOverlay;

package/dist/components/DevToolsOverlay/DevToolsOverlay.mjs

@@ -1,18 +1,28 @@
 import e from "../DevToolsIndicator/index.mjs";
-import t from "../DevToolsPanel/index.mjs";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { QaProvider as t } from "../../qa/QaContext.mjs";
+import n from "../../qa/QaLayer.mjs";
+import r from "../DevToolsPanel/index.mjs";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/DevToolsOverlay/DevToolsOverlay.tsx
-var a = ({ className: a, collapsed: o, orientation: s, tabSelected: c, logTypeFilter: l, onOpen: u, onCollapse: d, onTabSelect: f, onChangeOrientation: p }) => /* @__PURE__ */ i(n, { children: [o && /* @__PURE__ */ r(e, {
-	className: a,
-	onOpen: u
-}), !o && /* @__PURE__ */ r(t, {
-	className: a,
-	orientation: s,
-	tabSelected: c,
-	logTypeFilter: l,
-	onCollapse: d,
-	onTabSelect: f,
-	onChangeOrientation: p
-})] });
+var s = ({ className: s, collapsed: c, orientation: l, tabSelected: u, logTypeFilter: d, onOpen: f, onCollapse: p, onTabSelect: m, onChangeOrientation: h, pageRef: g, qa: _ }) => {
+	let v = /* @__PURE__ */ o(i, { children: [c && /* @__PURE__ */ a(e, {
+		className: s,
+		onOpen: f
+	}), !c && /* @__PURE__ */ a(r, {
+		className: s,
+		orientation: l,
+		tabSelected: u,
+		logTypeFilter: d,
+		qa: _,
+		onCollapse: p,
+		onTabSelect: m,
+		onChangeOrientation: h
+	})] });
+	return _ ? /* @__PURE__ */ o(t, {
+		pageRef: g,
+		collapsed: c,
+		children: [/* @__PURE__ */ a(n, {}), v]
+	}) : v;
+};
 //#endregion
-export { a as default };
+export { s as default };

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

@@ -6,6 +6,8 @@ export type DevToolsBodyProps = {
     logTypeFilter?: LogType;
     elementSelected?: string;
     onSelectElement: (id?: string) => void;
+    /** Whether the QA tab is offered. */
+    qa?: boolean;
 };
-declare const DevToolsBody: ({ className, tabSelected, orientation, logTypeFilter, elementSelected, onSelectElement }: DevToolsBodyProps) => import('react').JSX.Element;
+declare const DevToolsBody: ({ className, tabSelected, orientation, logTypeFilter, elementSelected, onSelectElement, qa }: DevToolsBodyProps) => import('react').JSX.Element;
 export default DevToolsBody;

package/dist/components/DevToolsPanel/DevToolsBody.mjs

@@ -1,44 +1,48 @@
 import e from "./tabs/ActionsViewer/index.mjs";
 import t from "./tabs/CacheViewer/index.mjs";
 import n from "./tabs/ElementsViewer/index.mjs";
-import r from "./tabs/HistoryViewer/index.mjs";
-import i from "./tabs/Logs/index.mjs";
-import a from "./tabs/PluginsViewer/PluginsViewer.mjs";
-import o from "./tabs/StoreViewer/index.mjs";
-import s from "./tabs/TracingViewer/TracingViewer.mjs";
-import c from "./tabs/VariablesViewer/index.mjs";
-import l from "clsx";
-import { use as u } from "react";
-import d from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import r from "./tabs/FlagsViewer/index.mjs";
+import i from "./tabs/HistoryViewer/index.mjs";
+import a from "./tabs/Logs/index.mjs";
+import o from "./tabs/PluginsViewer/PluginsViewer.mjs";
+import s from "./tabs/QaViewer/index.mjs";
+import c from "./tabs/StoreViewer/index.mjs";
+import l from "./tabs/TracingViewer/TracingViewer.mjs";
+import u from "./tabs/VariablesViewer/index.mjs";
+import d from "clsx";
+import { use as f } from "react";
+import p from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsBody.tsx
-var m = ({ className: m, tabSelected: h, orientation: g, logTypeFilter: _, elementSelected: v, onSelectElement: y }) => {
-	let { logs: b, clearLogs: x } = u(d);
-	return /* @__PURE__ */ f("div", {
-		className: l("flex h-full w-full grow overflow-auto bg-white dark:bg-zinc-900", m),
-		children: /* @__PURE__ */ p("div", {
+var g = ({ className: g, tabSelected: _, orientation: v, logTypeFilter: y, elementSelected: b, onSelectElement: x, qa: S = !1 }) => {
+	let { logs: C, clearLogs: w } = f(p);
+	return /* @__PURE__ */ m("div", {
+		className: d("flex h-full w-full grow overflow-auto bg-white dark:bg-zinc-900", g),
+		children: /* @__PURE__ */ h("div", {
 			className: "flex w-full flex-col",
 			children: [
-				h === "logs" && /* @__PURE__ */ f(i, {
-					items: b,
-					orientation: g,
-					logTypeFilter: _,
-					onClear: x
+				_ === "logs" && /* @__PURE__ */ m(a, {
+					items: C,
+					orientation: v,
+					logTypeFilter: y,
+					onClear: w
 				}),
-				h === "store" && /* @__PURE__ */ f(o, { elementSelected: v }),
-				h === "cache" && /* @__PURE__ */ f(t, {}),
-				h === "history" && /* @__PURE__ */ f(r, {}),
-				h === "variables" && /* @__PURE__ */ f(c, {}),
-				h === "elements" && /* @__PURE__ */ f(n, {
-					elementSelected: v,
-					onSelectElement: y
+				_ === "store" && /* @__PURE__ */ m(c, { elementSelected: b }),
+				_ === "cache" && /* @__PURE__ */ m(t, {}),
+				_ === "history" && /* @__PURE__ */ m(i, {}),
+				_ === "variables" && /* @__PURE__ */ m(u, {}),
+				_ === "flags" && /* @__PURE__ */ m(r, {}),
+				_ === "elements" && /* @__PURE__ */ m(n, {
+					elementSelected: b,
+					onSelectElement: x
 				}),
-				h === "plugins" && /* @__PURE__ */ f(a, {}),
-				h === "tracing" && /* @__PURE__ */ f(s, {}),
-				h === "actions" && /* @__PURE__ */ f(e, {})
+				_ === "plugins" && /* @__PURE__ */ m(o, {}),
+				_ === "tracing" && /* @__PURE__ */ m(l, {}),
+				_ === "actions" && /* @__PURE__ */ m(e, {}),
+				S && _ === "qa" && /* @__PURE__ */ m(s, {})
 			]
 		})
 	});
 };
 //#endregion
-export { m as default };
+export { g as default };

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

@@ -6,6 +6,8 @@ export type DevToolsHeaderProps = {
     onChangeOrientation?: (orientation: Orientation) => void;
     onCollapse?: () => void;
     onTabSelect?: (tabIndex: string) => void;
+    /** Whether the QA tab is offered. */
+    qa?: boolean;
 };
-declare const DevToolsHeader: ({ tabSelected, orientation, onChangeOrientation, onCollapse, onTabSelect }: DevToolsHeaderProps) => import('react').JSX.Element;
+declare const DevToolsHeader: ({ tabSelected, orientation, onChangeOrientation, onCollapse, onTabSelect, qa }: DevToolsHeaderProps) => import('react').JSX.Element;
 export default DevToolsHeader;

package/dist/components/DevToolsPanel/DevToolsHeader.mjs

@@ -36,6 +36,11 @@ var s = [
 		label: "Variables",
 		icon: "fa-solid fa-code"
 	},
+	{
+		id: "flags",
+		label: "Flags",
+		icon: "fa-solid fa-flag"
+	},
 	{
 		id: "plugins",
 		label: "Plugins",
@@ -50,19 +55,24 @@ var s = [
 		id: "actions",
 		label: "Actions",
 		icon: "fa-solid fa-bolt"
+	},
+	{
+		id: "qa",
+		label: "QA",
+		icon: "fa-solid fa-ruler-combined"
 	}
-], c = ({ tabSelected: c, orientation: l = "vertical", onChangeOrientation: u, onCollapse: d, onTabSelect: f }) => {
-	let { options: p, value: m, onSelect: h } = e(), g = i(() => {
+], c = ({ tabSelected: c, orientation: l = "vertical", onChangeOrientation: u, onCollapse: d, onTabSelect: f, qa: p = !1 }) => {
+	let m = p ? s : s.filter((e) => e.id !== "qa"), { options: h, value: g, onSelect: _ } = e(), v = i(() => {
 		u?.(l === "horizontal" ? "vertical" : "horizontal");
-	}, [l, u]), _ = i((e) => () => f?.(e), [f]), v = i((e) => h(e.target.value), [h]);
+	}, [l, u]), y = i((e) => () => f?.(e), [f]), b = i((e) => _(e.target.value), [_]);
 	return /* @__PURE__ */ o("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__ */ a("div", {
 			className: "flex items-stretch overflow-x-auto",
-			children: s.map((e) => {
+			children: m.map((e) => {
 				let t = c === e.id;
 				return /* @__PURE__ */ o("button", {
-					onClick: _(e.id),
+					onClick: y(e.id),
 					className: r("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": t,
 						"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": !t
@@ -73,12 +83,12 @@ var s = [
 		}), /* @__PURE__ */ o("div", {
 			className: "flex shrink-0 items-center gap-1 border-l border-zinc-200 px-2 dark:border-zinc-700",
 			children: [
-				p.length > 0 && /* @__PURE__ */ a("select", {
-					value: m ?? "",
-					onChange: v,
+				h.length > 0 && /* @__PURE__ */ a("select", {
+					value: g ?? "",
+					onChange: b,
 					title: "Instance / StoreProvider driving the panel",
 					className: "max-w-52 rounded border border-zinc-300 bg-white px-1 py-0.5 text-[11px] text-zinc-700 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-200",
-					children: p.map((e) => /* @__PURE__ */ a("optgroup", {
+					children: h.map((e) => /* @__PURE__ */ a("optgroup", {
 						label: e.label,
 						children: e.options.map((e) => /* @__PURE__ */ a("option", {
 							value: e.value,
@@ -90,7 +100,7 @@ var s = [
 				/* @__PURE__ */ a(t, {
 					iconClassName: r("fa-solid fa-table-columns", { "rotate-90": l === "vertical" }),
 					title: l === "horizontal" ? "Switch to side panel" : "Switch to bottom panel",
-					onClick: g
+					onClick: v
 				}),
 				/* @__PURE__ */ a(t, {
 					iconClassName: "fa-solid fa-xmark",

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

@@ -11,6 +11,8 @@ export type DevToolsPanelProps = {
     onCollapse?: () => void;
     onTabSelect: (tabSelected: string) => void;
     onChangeOrientation?: (orientation: Orientation) => void;
+    /** Whether the QA tab is offered. */
+    qa?: boolean;
 };
-declare const DevToolsPanel: ({ className, orientation, tabSelected, logTypeFilter, onCollapse, onTabSelect, onChangeOrientation }: DevToolsPanelProps) => import('react').JSX.Element;
+declare const DevToolsPanel: ({ className, orientation, tabSelected, logTypeFilter, onCollapse, onTabSelect, onChangeOrientation, qa }: DevToolsPanelProps) => import('react').JSX.Element;
 export default DevToolsPanel;