@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/dist/shell/DevToolsPanel.js

@@ -0,0 +1,256 @@
+"use client";
+import { inProcessClient } from "../data/createInProcessClient.js";
+import { useDevToolsClient } from "../data/useDevToolsClient.js";
+import { CenteredMessage } from "../views/ui/CenteredMessage.js";
+import { builtinPlugins } from "./registry.js";
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { useEffect, useState } from "@assistant-ui/tap/react-shim";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/shell/DevToolsPanel.tsx
+const DevToolsPanel = (t0) => {
+	const $ = c(54);
+	const { plugins, theme: t1, onClose, client } = t0;
+	const theme = t1 === void 0 ? "light" : t1;
+	const resolvedClient = client ?? inProcessClient;
+	const [selectedApiId, setSelectedApiId] = useState(null);
+	const [activeTabId, setActiveTabId] = useState("thread");
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {};
+		$[0] = t2;
+	} else t2 = $[0];
+	const [selectionByApi, setSelectionByApi] = useState(t2);
+	const { apiIds, selected, clearEvents, switchToThread } = useDevToolsClient(selectedApiId, resolvedClient);
+	let t3;
+	let t4;
+	if ($[1] !== apiIds || $[2] !== selectedApiId) {
+		t3 = () => {
+			if (selectedApiId !== null && apiIds.includes(selectedApiId)) return;
+			setSelectedApiId(apiIds[0] ?? null);
+		};
+		t4 = [apiIds, selectedApiId];
+		$[1] = apiIds;
+		$[2] = selectedApiId;
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t3 = $[3];
+		t4 = $[4];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[5] !== plugins) {
+		t5 = [...builtinPlugins, ...plugins ?? []].sort(_temp);
+		$[5] = plugins;
+		$[6] = t5;
+	} else t5 = $[6];
+	const allPlugins = t5;
+	let t6;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (apiId, tabId, nodeId) => {
+			setSelectionByApi((prev) => ({
+				...prev,
+				[apiId]: {
+					...prev[apiId],
+					[tabId]: nodeId
+				}
+			}));
+		};
+		$[7] = t6;
+	} else t6 = $[7];
+	const setSelectionFor = t6;
+	let t7;
+	if ($[8] !== allPlugins || $[9] !== clearEvents || $[10] !== selected || $[11] !== selectedApiId || $[12] !== theme) {
+		t7 = selected && selectedApiId !== null ? allPlugins.filter((plugin) => plugin.isAvailable ? plugin.isAvailable({
+			apiId: selectedApiId,
+			data: selected,
+			clearEvents,
+			theme,
+			selection: null,
+			setSelection: _temp2
+		}) : true) : allPlugins;
+		$[8] = allPlugins;
+		$[9] = clearEvents;
+		$[10] = selected;
+		$[11] = selectedApiId;
+		$[12] = theme;
+		$[13] = t7;
+	} else t7 = $[13];
+	const visiblePlugins = t7;
+	let t8;
+	if ($[14] !== activeTabId || $[15] !== visiblePlugins) {
+		t8 = visiblePlugins.find((plugin_0) => plugin_0.id === activeTabId) ?? visiblePlugins[0];
+		$[14] = activeTabId;
+		$[15] = visiblePlugins;
+		$[16] = t8;
+	} else t8 = $[16];
+	const activePlugin = t8;
+	let t9;
+	if ($[17] !== activePlugin || $[18] !== clearEvents || $[19] !== resolvedClient || $[20] !== selected || $[21] !== selectedApiId || $[22] !== selectionByApi || $[23] !== switchToThread || $[24] !== theme) {
+		t9 = selected && selectedApiId !== null && activePlugin ? {
+			apiId: selectedApiId,
+			data: selected,
+			clearEvents,
+			theme,
+			selection: selectionByApi[selectedApiId]?.[activePlugin.id] ?? null,
+			setSelection: (nodeId_0) => setSelectionFor(selectedApiId, activePlugin.id, nodeId_0),
+			switchToThread: resolvedClient.switchToThread ? (threadId) => switchToThread(selectedApiId, threadId) : void 0
+		} : null;
+		$[17] = activePlugin;
+		$[18] = clearEvents;
+		$[19] = resolvedClient;
+		$[20] = selected;
+		$[21] = selectedApiId;
+		$[22] = selectionByApi;
+		$[23] = switchToThread;
+		$[24] = theme;
+		$[25] = t9;
+	} else t9 = $[25];
+	const ctx = t9;
+	let t10;
+	if ($[26] !== activePlugin?.id || $[27] !== visiblePlugins) {
+		let t11;
+		if ($[29] !== activePlugin?.id) {
+			t11 = (plugin_1) => {
+				const active = activePlugin?.id === plugin_1.id;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setActiveTabId(plugin_1.id),
+					className: clsx("relative flex h-full items-center px-3 font-medium transition-colors", active ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+					children: [plugin_1.label, active ? /* @__PURE__ */ jsx("span", { className: "bg-foreground absolute inset-x-2 -bottom-px h-0.5 rounded-full" }) : null]
+				}, plugin_1.id);
+			};
+			$[29] = activePlugin?.id;
+			$[30] = t11;
+		} else t11 = $[30];
+		t10 = visiblePlugins.map(t11);
+		$[26] = activePlugin?.id;
+		$[27] = visiblePlugins;
+		$[28] = t10;
+	} else t10 = $[28];
+	let t11;
+	if ($[31] !== t10) {
+		t11 = /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center",
+			children: t10
+		});
+		$[31] = t10;
+		$[32] = t11;
+	} else t11 = $[32];
+	let t12;
+	if ($[33] !== apiIds || $[34] !== selectedApiId) {
+		t12 = apiIds.length > 1 ? /* @__PURE__ */ jsx("select", {
+			value: selectedApiId ?? "",
+			onChange: (event) => {
+				const value = Number(event.target.value);
+				setSelectedApiId(Number.isNaN(value) ? null : value);
+			},
+			className: "border-border text-muted-foreground hover:text-foreground h-7 rounded-md border bg-transparent px-2 text-[12px] transition-colors",
+			children: apiIds.map(_temp3)
+		}) : null;
+		$[33] = apiIds;
+		$[34] = selectedApiId;
+		$[35] = t12;
+	} else t12 = $[35];
+	let t13;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-emerald-500" });
+		$[36] = t13;
+	} else t13 = $[36];
+	const t14 = apiIds.length > 0 ? `${apiIds.length} instance${apiIds.length > 1 ? "s" : ""}` : "Waiting";
+	let t15;
+	if ($[37] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground flex items-center gap-1.5 text-[11px]",
+			children: [t13, t14]
+		});
+		$[37] = t14;
+		$[38] = t15;
+	} else t15 = $[38];
+	let t16;
+	if ($[39] !== onClose) {
+		t16 = onClose ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onClose,
+			"aria-label": "Close DevTools",
+			className: "text-muted-foreground hover:bg-accent hover:text-foreground flex size-7 items-center justify-center rounded-md transition-colors",
+			children: /* @__PURE__ */ jsx("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M18 6 6 18M6 6l12 12",
+					stroke: "currentColor",
+					strokeWidth: "1.75",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		}) : null;
+		$[39] = onClose;
+		$[40] = t16;
+	} else t16 = $[40];
+	let t17;
+	if ($[41] !== t12 || $[42] !== t15 || $[43] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 pe-1",
+			children: [
+				t12,
+				t15,
+				t16
+			]
+		});
+		$[41] = t12;
+		$[42] = t15;
+		$[43] = t16;
+		$[44] = t17;
+	} else t17 = $[44];
+	let t18;
+	if ($[45] !== t11 || $[46] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("nav", {
+			className: "border-border flex h-10 shrink-0 items-center justify-between gap-2 border-b px-2 select-none",
+			children: [t11, t17]
+		});
+		$[45] = t11;
+		$[46] = t17;
+		$[47] = t18;
+	} else t18 = $[47];
+	let t19;
+	if ($[48] !== activePlugin || $[49] !== ctx) {
+		t19 = /* @__PURE__ */ jsx("section", {
+			className: "bg-background min-h-0 flex-1 overflow-hidden",
+			children: ctx && activePlugin ? /* @__PURE__ */ jsx(activePlugin.Component, { ...ctx }) : /* @__PURE__ */ jsx(CenteredMessage, { children: "Waiting for assistant-ui instance..." })
+		});
+		$[48] = activePlugin;
+		$[49] = ctx;
+		$[50] = t19;
+	} else t19 = $[50];
+	let t20;
+	if ($[51] !== t18 || $[52] !== t19) {
+		t20 = /* @__PURE__ */ jsxs("div", {
+			className: "text-foreground flex h-full flex-col text-[13px]",
+			children: [t18, t19]
+		});
+		$[51] = t18;
+		$[52] = t19;
+		$[53] = t20;
+	} else t20 = $[53];
+	return t20;
+};
+function _temp(a, b) {
+	return (a.order ?? 0) - (b.order ?? 0);
+}
+function _temp2() {}
+function _temp3(id) {
+	return /* @__PURE__ */ jsxs("option", {
+		value: id,
+		children: ["API #", id]
+	}, id);
+}
+//#endregion
+export { DevToolsPanel };
+
+//# sourceMappingURL=DevToolsPanel.js.map

package/dist/shell/DevToolsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevToolsPanel.js","names":["c","_c","useCallback","useEffect","useMemo","useState","clsx","useDevToolsClient","inProcessClient","DevToolsClient","CenteredMessage","builtinPlugins","DevToolsPanelPlugin","DevToolsTabContext","DevToolsPanelProps","plugins","theme","onClose","client","DevToolsPanel","t0","$","t1","undefined","resolvedClient","selectedApiId","setSelectedApiId","activeTabId","setActiveTabId","t2","Symbol","for","selectionByApi","setSelectionByApi","apiIds","selected","clearEvents","switchToThread","t3","t4","includes","t5","sort","_temp","allPlugins","t6","apiId","tabId","nodeId","prev","setSelectionFor","t7","filter","plugin","isAvailable","data","selection","setSelection","_temp2","visiblePlugins","t8","find","plugin_0","id","activePlugin","t9","nodeId_0","threadId","ctx","t10","t11","plugin_1","active","label","map","t12","length","event","value","Number","target","isNaN","_temp3","t13","t14","t15","t16","t17","t18","t19","t20","a","b","order"],"sources":["../../src/shell/DevToolsPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { useDevToolsClient } from \"../data/useDevToolsClient\";\nimport { inProcessClient } from \"../data/createInProcessClient\";\nimport type { DevToolsClient } from \"../data/types\";\nimport { CenteredMessage } from \"../views/ui\";\nimport {\n  builtinPlugins,\n  type DevToolsPanelPlugin,\n  type DevToolsTabContext,\n} from \"./registry\";\n\nexport interface DevToolsPanelProps {\n  /** Additional inspector tabs appended after the builtins. */\n  plugins?: DevToolsPanelPlugin[] | undefined;\n  /** Resolved theme, used to style plugin content and the dark variant. */\n  theme?: \"light\" | \"dark\";\n  /** When provided, a close control is rendered at the end of the tab bar. */\n  onClose?: (() => void) | undefined;\n  /** Data source. Defaults to the in-process DevToolsHooks client. */\n  client?: DevToolsClient | undefined;\n}\n\nexport const DevToolsPanel = ({\n  plugins,\n  theme = \"light\",\n  onClose,\n  client,\n}: DevToolsPanelProps) => {\n  const resolvedClient = client ?? inProcessClient;\n  const [selectedApiId, setSelectedApiId] = useState<number | null>(null);\n  const [activeTabId, setActiveTabId] = useState<string>(\"thread\");\n  const [selectionByApi, setSelectionByApi] = useState<\n    Record<number, Record<string, string | null>>\n  >({});\n  const { apiIds, selected, clearEvents, switchToThread } = useDevToolsClient(\n    selectedApiId,\n    resolvedClient,\n  );\n\n  useEffect(() => {\n    if (selectedApiId !== null && apiIds.includes(selectedApiId)) return;\n    setSelectedApiId(apiIds[0] ?? null);\n  }, [apiIds, selectedApiId]);\n\n  const allPlugins = useMemo(\n    () =>\n      [...builtinPlugins, ...(plugins ?? [])].sort(\n        (a, b) => (a.order ?? 0) - (b.order ?? 0),\n      ),\n    [plugins],\n  );\n\n  const setSelectionFor = useCallback(\n    (apiId: number, tabId: string, nodeId: string | null) => {\n      setSelectionByApi((prev) => ({\n        ...prev,\n        [apiId]: { ...prev[apiId], [tabId]: nodeId },\n      }));\n    },\n    [],\n  );\n\n  const visiblePlugins =\n    selected && selectedApiId !== null\n      ? allPlugins.filter((plugin) =>\n          plugin.isAvailable\n            ? plugin.isAvailable({\n                apiId: selectedApiId,\n                data: selected,\n                clearEvents,\n                theme,\n                selection: null,\n                setSelection: () => {},\n              })\n            : true,\n        )\n      : allPlugins;\n\n  const activePlugin =\n    visiblePlugins.find((plugin) => plugin.id === activeTabId) ??\n    visiblePlugins[0];\n\n  const ctx: DevToolsTabContext | null =\n    selected && selectedApiId !== null && activePlugin\n      ? {\n          apiId: selectedApiId,\n          data: selected,\n          clearEvents,\n          theme,\n          selection: selectionByApi[selectedApiId]?.[activePlugin.id] ?? null,\n          setSelection: (nodeId) =>\n            setSelectionFor(selectedApiId, activePlugin.id, nodeId),\n          switchToThread: resolvedClient.switchToThread\n            ? (threadId) => switchToThread(selectedApiId, threadId)\n            : undefined,\n        }\n      : null;\n\n  return (\n    <div className=\"text-foreground flex h-full flex-col text-[13px]\">\n      <nav className=\"border-border flex h-10 shrink-0 items-center justify-between gap-2 border-b px-2 select-none\">\n        <div className=\"flex h-full items-center\">\n          {visiblePlugins.map((plugin) => {\n            const active = activePlugin?.id === plugin.id;\n            return (\n              <button\n                type=\"button\"\n                key={plugin.id}\n                onClick={() => setActiveTabId(plugin.id)}\n                className={clsx(\n                  \"relative flex h-full items-center px-3 font-medium transition-colors\",\n                  active\n                    ? \"text-foreground\"\n                    : \"text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {plugin.label}\n                {active ? (\n                  <span className=\"bg-foreground absolute inset-x-2 -bottom-px h-0.5 rounded-full\" />\n                ) : null}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className=\"flex items-center gap-2 pe-1\">\n          {apiIds.length > 1 ? (\n            <select\n              value={selectedApiId ?? \"\"}\n              onChange={(event) => {\n                const value = Number(event.target.value);\n                setSelectedApiId(Number.isNaN(value) ? null : value);\n              }}\n              className=\"border-border text-muted-foreground hover:text-foreground h-7 rounded-md border bg-transparent px-2 text-[12px] transition-colors\"\n            >\n              {apiIds.map((id) => (\n                <option key={id} value={id}>\n                  API #{id}\n                </option>\n              ))}\n            </select>\n          ) : null}\n\n          <span className=\"text-muted-foreground flex items-center gap-1.5 text-[11px]\">\n            <span className=\"size-1.5 rounded-full bg-emerald-500\" />\n            {apiIds.length > 0\n              ? `${apiIds.length} instance${apiIds.length > 1 ? \"s\" : \"\"}`\n              : \"Waiting\"}\n          </span>\n\n          {onClose ? (\n            <button\n              type=\"button\"\n              onClick={onClose}\n              aria-label=\"Close DevTools\"\n              className=\"text-muted-foreground hover:bg-accent hover:text-foreground flex size-7 items-center justify-center rounded-md transition-colors\"\n            >\n              <svg\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M18 6 6 18M6 6l12 12\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.75\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </button>\n          ) : null}\n        </div>\n      </nav>\n\n      <section className=\"bg-background min-h-0 flex-1 overflow-hidden\">\n        {ctx && activePlugin ? (\n          <activePlugin.Component {...ctx} />\n        ) : (\n          <CenteredMessage>\n            Waiting for assistant-ui instance...\n          </CenteredMessage>\n        )}\n      </section>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/shell/ShadowRoot.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/shell/ShadowRoot.d.ts
+interface ShadowRootProps {
+  theme: "light" | "dark";
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+/**
+ * Renders its children into an isolated shadow root with the compiled panel
+ * stylesheet. A dedicated React root is mounted inside the shadow root so
+ * React's event delegation works (a portal from the outer root would leave the
+ * listeners in the light DOM, where shadow retargeting breaks them).
+ */
+declare const ShadowRoot: ({
+  theme,
+  className,
+  style,
+  children
+}: ShadowRootProps) => import("react").JSX.Element;
+//#endregion
+export { ShadowRoot, ShadowRootProps };
+//# sourceMappingURL=ShadowRoot.d.ts.map

package/dist/shell/ShadowRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowRoot.d.ts","names":[],"sources":["../../src/shell/ShadowRoot.tsx"],"mappings":";;;UAwBiB,eAAA;EACf,KAAA;EACA,SAAA;EACA,KAAA,GAAQ,aAAA;EACR,QAAA,EAAU,SAAS;AAAA;;;;;;;cASR,UAAA;EAAc,KAAA;EAAA,SAAA;EAAA,KAAA;EAAA;AAAA,GAKxB,eAAA,qBAAe,GAAA,CAAA,OAAA"}

package/dist/shell/ShadowRoot.js

@@ -0,0 +1,107 @@
+"use client";
+import { panelCss } from "../styles/panel.generated.js";
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { useEffect, useRef } from "@assistant-ui/tap/react-shim";
+import { jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+//#region src/shell/ShadowRoot.tsx
+const PROPERTY_STYLE_ID = "assistant-ui-devtools-properties";
+/**
+* Tailwind registers typed `@property --tw-*` custom properties. These register
+* globally and are unreliable when declared only inside a shadow root, so a copy
+* is hoisted to the document head once. The rest of the sheet stays scoped to
+* the shadow root.
+*/
+const hoistAtProperties = () => {
+	if (document.getElementById(PROPERTY_STYLE_ID)) return;
+	const rules = panelCss.match(/@property\s+--[^{]+\{[^}]*\}/g);
+	if (!rules?.length) return;
+	const style = document.createElement("style");
+	style.id = PROPERTY_STYLE_ID;
+	style.textContent = rules.join("");
+	document.head.appendChild(style);
+};
+/**
+* Renders its children into an isolated shadow root with the compiled panel
+* stylesheet. A dedicated React root is mounted inside the shadow root so
+* React's event delegation works (a portal from the outer root would leave the
+* listeners in the light DOM, where shadow retargeting breaks them).
+*/
+const ShadowRoot = (t0) => {
+	const $ = c(9);
+	const { theme, className, style, children } = t0;
+	const hostRef = useRef(null);
+	const rootRef = useRef(null);
+	const mountRef = useRef(null);
+	let t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			const host = hostRef.current;
+			if (!host) return;
+			const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+			if (!shadow.querySelector("style[data-aui-devtools]")) {
+				const styleEl = document.createElement("style");
+				styleEl.setAttribute("data-aui-devtools", "");
+				styleEl.textContent = panelCss;
+				shadow.appendChild(styleEl);
+			}
+			hoistAtProperties();
+			const mount = document.createElement("div");
+			mount.style.display = "contents";
+			shadow.appendChild(mount);
+			mountRef.current = mount;
+			rootRef.current = createRoot(mount);
+			return () => {
+				const root = rootRef.current;
+				rootRef.current = null;
+				mountRef.current = null;
+				queueMicrotask(() => {
+					root?.unmount();
+					mount.remove();
+				});
+			};
+		};
+		t2 = [];
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+	}
+	useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[2] !== children || $[3] !== theme) {
+		t3 = () => {
+			const mount_0 = mountRef.current;
+			if (mount_0) mount_0.className = theme === "dark" ? "dark" : "";
+			rootRef.current?.render(children);
+		};
+		t4 = [children, theme];
+		$[2] = children;
+		$[3] = theme;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t3 = $[4];
+		t4 = $[5];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[6] !== className || $[7] !== style) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			ref: hostRef,
+			className,
+			style
+		});
+		$[6] = className;
+		$[7] = style;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+};
+//#endregion
+export { ShadowRoot };
+
+//# sourceMappingURL=ShadowRoot.js.map

package/dist/shell/ShadowRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowRoot.js","names":["c","_c","useEffect","useRef","CSSProperties","ReactNode","createRoot","Root","panelCss","PROPERTY_STYLE_ID","hoistAtProperties","document","getElementById","rules","match","length","style","createElement","id","textContent","join","head","appendChild","ShadowRootProps","theme","className","children","ShadowRoot","t0","$","hostRef","rootRef","mountRef","t1","t2","Symbol","for","host","current","shadow","shadowRoot","attachShadow","mode","querySelector","styleEl","setAttribute","mount","display","root","queueMicrotask","unmount","remove","t3","t4","mount_0","render","t5"],"sources":["../../src/shell/ShadowRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type CSSProperties, type ReactNode } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { panelCss } from \"../styles/panel.generated\";\n\nconst PROPERTY_STYLE_ID = \"assistant-ui-devtools-properties\";\n\n/**\n * Tailwind registers typed `@property --tw-*` custom properties. These register\n * globally and are unreliable when declared only inside a shadow root, so a copy\n * is hoisted to the document head once. The rest of the sheet stays scoped to\n * the shadow root.\n */\nconst hoistAtProperties = () => {\n  if (document.getElementById(PROPERTY_STYLE_ID)) return;\n  const rules = panelCss.match(/@property\\s+--[^{]+\\{[^}]*\\}/g);\n  if (!rules?.length) return;\n  const style = document.createElement(\"style\");\n  style.id = PROPERTY_STYLE_ID;\n  style.textContent = rules.join(\"\");\n  document.head.appendChild(style);\n};\n\nexport interface ShadowRootProps {\n  theme: \"light\" | \"dark\";\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\n/**\n * Renders its children into an isolated shadow root with the compiled panel\n * stylesheet. A dedicated React root is mounted inside the shadow root so\n * React's event delegation works (a portal from the outer root would leave the\n * listeners in the light DOM, where shadow retargeting breaks them).\n */\nexport const ShadowRoot = ({\n  theme,\n  className,\n  style,\n  children,\n}: ShadowRootProps) => {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const rootRef = useRef<Root | null>(null);\n  const mountRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n\n    const shadow = host.shadowRoot ?? host.attachShadow({ mode: \"open\" });\n    if (!shadow.querySelector(\"style[data-aui-devtools]\")) {\n      const styleEl = document.createElement(\"style\");\n      styleEl.setAttribute(\"data-aui-devtools\", \"\");\n      styleEl.textContent = panelCss;\n      shadow.appendChild(styleEl);\n    }\n    hoistAtProperties();\n\n    const mount = document.createElement(\"div\");\n    mount.style.display = \"contents\";\n    shadow.appendChild(mount);\n    mountRef.current = mount;\n    rootRef.current = createRoot(mount);\n\n    return () => {\n      const root = rootRef.current;\n      rootRef.current = null;\n      mountRef.current = null;\n      queueMicrotask(() => {\n        root?.unmount();\n        mount.remove();\n      });\n    };\n  }, []);\n\n  useEffect(() => {\n    const mount = mountRef.current;\n    if (mount) mount.className = theme === \"dark\" ? \"dark\" : \"\";\n    rootRef.current?.render(children);\n  }, [children, theme]);\n\n  return <div ref={hostRef} className={className} style={style} />;\n};\n"],"mappings":";;;;;;;AAMA,MAAMS,oBAAoB;;;;;;;AAQ1B,MAAMC,0BAA0B;CAC9B,IAAIC,SAASC,eAAeH,iBAAiB,GAAG;CAChD,MAAMI,QAAQL,SAASM,MAAM,+BAA+B;CAC5D,IAAI,CAACD,OAAOE,QAAQ;CACpB,MAAMC,QAAQL,SAASM,cAAc,OAAO;CAC5CD,MAAME,KAAKT;CACXO,MAAMG,cAAcN,MAAMO,KAAK,EAAE;CACjCT,SAASU,KAAKC,YAAYN,KAAK;AACjC;;;;;;;AAeA,MAAaW,cAAaC,OAAA;CAAA,MAAAC,IAAA5B,EAAA,CAAA;CAAC,MAAA,EAAAuB,OAAAC,WAAAT,OAAAU,aAAAE;CAMzB,MAAAE,UAAgB3B,OAA8B,IAAI;CAClD,MAAA4B,UAAgB5B,OAAoB,IAAI;CACxC,MAAA6B,WAAiB7B,OAA8B,IAAI;CAAE,IAAA8B;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EAE3CH,WAAA;GACR,MAAAI,OAAaP,QAAOQ;GACpB,IAAI,CAACD,MAAI;GAET,MAAAE,SAAeF,KAAIG,cAAeH,KAAII,aAAc,EAAAC,MAAQ,OAAO,CAAC;GACpE,IAAI,CAACH,OAAMI,cAAe,0BAA0B,GAAC;IACnD,MAAAC,UAAgBjC,SAAQM,cAAe,OAAO;IAC9C2B,QAAOC,aAAc,qBAAqB,EAAE;IAC5CD,QAAOzB,cAAeX;IACtB+B,OAAMjB,YAAasB,OAAO;GAAC;GAE7BlC,kBAAkB;GAElB,MAAAoC,QAAcnC,SAAQM,cAAe,KAAK;GAC1C6B,MAAK9B,MAAM+B,UAAW;GACtBR,OAAMjB,YAAawB,KAAK;GACxBd,SAAQM,UAAWQ;GACnBf,QAAOO,UAAWhC,WAAWwC,KAAK;GAAnB,aAER;IACL,MAAAE,OAAajB,QAAOO;IACpBP,QAAOO,UAAW;IAClBN,SAAQM,UAAW;IACnBW,qBAAe;KACbD,MAAIE,QAAU;KACdJ,MAAKK,OAAQ;IAAC,CACf;GAAC;EACH;EACAjB,KAAA,CAAA;EAAEL,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CA5BL3B,UAAU+B,IA4BPC,EAAE;CAAC,IAAAkB;CAAA,IAAAC;CAAA,IAAAxB,EAAA,OAAAH,YAAAG,EAAA,OAAAL,OAAA;EAEI4B,WAAA;GACR,MAAAE,UAActB,SAAQM;GACtB,IAAIQ,SAAOA,QAAKrB,YAAaD,UAAU,SAAV,SAAA;GAC7BO,QAAOO,SAAgBiB,OAAC7B,QAAQ;EAAC;EAChC2B,KAAA,CAAC3B,UAAUF,KAAK;EAACK,EAAA,KAAAH;EAAAG,EAAA,KAAAL;EAAAK,EAAA,KAAAuB;EAAAvB,EAAA,KAAAwB;CAAA,OAAA;EAAAD,KAAAvB,EAAA;EAAAwB,KAAAxB,EAAA;CAAA;CAJpB3B,UAAUkD,IAIPC,EAAiB;CAAC,IAAAG;CAAA,IAAA3B,EAAA,OAAAJ,aAAAI,EAAA,OAAAb,OAAA;EAEdwC,KAAA,oBAAA,OAAA;GAAU1B,KAAAA;GAAoBL;GAAkBT;EAAK,CAAA;EAAIa,EAAA,KAAAJ;EAAAI,EAAA,KAAAb;EAAAa,EAAA,KAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OAAzD2B;AAAyD"}

package/dist/shell/SplitLayout.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+
+//#region src/shell/SplitLayout.d.ts
+/** Shared nav rail + detail track sizing for the master/detail tabs. */
+declare const NAV_COL = "clamp(14rem,28%,18rem)_minmax(0,1fr)";
+interface SplitColumn {
+  key: string;
+  /** Fixed rail header; stays aligned across columns. */
+  header?: ReactNode | undefined;
+  /** Scrollable pane body. */
+  children: ReactNode;
+}
+/**
+ * Multi-column split surface. Each column keeps its header fixed and only the
+ * body scrolls, so rail titles and divider lines stay aligned across columns.
+ */
+declare const SplitLayout: ({
+  sizes,
+  columns,
+  className
+}: {
+  /** Underscore-separated CSS grid track list, e.g. `12rem_minmax(0,1fr)`. */sizes: string;
+  columns: SplitColumn[];
+  className?: string | undefined;
+}) => import("react").JSX.Element;
+//#endregion
+export { NAV_COL, SplitColumn, SplitLayout };
+//# sourceMappingURL=SplitLayout.d.ts.map

package/dist/shell/SplitLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.d.ts","names":[],"sources":["../../src/shell/SplitLayout.tsx"],"mappings":";;;;cAIa,OAAA;AAAA,UAEI,WAAA;EACf,GAAA;;EAEA,MAAA,GAAS,SAAA;EALS;EAOlB,QAAA,EAAU,SAAS;AAAA;;;;;cAOR,WAAA;EAAe,KAAA;EAAA,OAAA;EAAA;AAAA;EAP1B,4EAaA,KAAA;EACA,OAAA,EAAS,WAAA;EACT,SAAA;AAAA,sBACD,GAAA,CAAA,OAAA"}

package/dist/shell/SplitLayout.js

@@ -0,0 +1,67 @@
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/shell/SplitLayout.tsx
+/** Shared nav rail + detail track sizing for the master/detail tabs. */
+const NAV_COL = "clamp(14rem,28%,18rem)_minmax(0,1fr)";
+/**
+* Multi-column split surface. Each column keeps its header fixed and only the
+* body scrolls, so rail titles and divider lines stay aligned across columns.
+*/
+const SplitLayout = (t0) => {
+	const $ = c(14);
+	const { sizes, columns, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx("grid h-full min-h-0", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== sizes) {
+		t2 = sizes.split("_").join(" ");
+		$[2] = sizes;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = { gridTemplateColumns: t2 };
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== columns) {
+		let t5;
+		if ($[8] !== columns.length) {
+			t5 = (column, index) => /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex min-h-0 flex-col overflow-hidden", index < columns.length - 1 && "border-border border-e"),
+				children: [column.header, /* @__PURE__ */ jsx("div", {
+					className: "min-h-0 flex-1 overflow-y-auto",
+					children: column.children
+				})]
+			}, column.key);
+			$[8] = columns.length;
+			$[9] = t5;
+		} else t5 = $[9];
+		t4 = columns.map(t5);
+		$[6] = columns;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[10] !== t1 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			style: t3,
+			children: t4
+		});
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+};
+//#endregion
+export { NAV_COL, SplitLayout };
+
+//# sourceMappingURL=SplitLayout.js.map

package/dist/shell/SplitLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.js","names":["clsx","ReactNode","NAV_COL","SplitColumn","key","header","children","SplitLayout","t0","$","_c","sizes","columns","className","t1","t2","split","join","t3","gridTemplateColumns","t4","t5","length","column","index","map"],"sources":["../../src/shell/SplitLayout.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\n\n/** Shared nav rail + detail track sizing for the master/detail tabs. */\nexport const NAV_COL = \"clamp(14rem,28%,18rem)_minmax(0,1fr)\";\n\nexport interface SplitColumn {\n  key: string;\n  /** Fixed rail header; stays aligned across columns. */\n  header?: ReactNode | undefined;\n  /** Scrollable pane body. */\n  children: ReactNode;\n}\n\n/**\n * Multi-column split surface. Each column keeps its header fixed and only the\n * body scrolls, so rail titles and divider lines stay aligned across columns.\n */\nexport const SplitLayout = ({\n  sizes,\n  columns,\n  className,\n}: {\n  /** Underscore-separated CSS grid track list, e.g. `12rem_minmax(0,1fr)`. */\n  sizes: string;\n  columns: SplitColumn[];\n  className?: string | undefined;\n}) => (\n  <div\n    className={clsx(\"grid h-full min-h-0\", className)}\n    style={{ gridTemplateColumns: sizes.split(\"_\").join(\" \") }}\n  >\n    {columns.map((column, index) => (\n      <div\n        key={column.key}\n        className={clsx(\n          \"flex min-h-0 flex-col overflow-hidden\",\n          index < columns.length - 1 && \"border-border border-e\",\n        )}\n      >\n        {column.header}\n        <div className=\"min-h-0 flex-1 overflow-y-auto\">{column.children}</div>\n      </div>\n    ))}\n  </div>\n);\n"],"mappings":";;;;;AAIA,MAAaE,UAAU;;;;;AAcvB,MAAaK,eAAcC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAC,OAAAC,SAAAC,cAAAL;CAS3B,IAAAM;CAAA,IAAAL,EAAA,OAAAI,WAAA;EAEcC,KAAAd,KAAK,uBAAuBa,SAAS;EAACJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,OAAA;EACnBI,KAAAJ,MAAKK,MAAO,GAAG,CAAC,CAAAC,KAAM,GAAG;EAACR,EAAA,KAAAE;EAAAF,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAM,IAAA;EAAjDG,KAAA,EAAAC,qBAAuBJ,GAA2B;EAACN,EAAA,KAAAM;EAAAN,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAG,SAAA;EAAA,IAAAS;EAAA,IAAAZ,EAAA,OAAAG,QAAAU,QAAA;GAE7CD,MAAAE,QAAAC,UACX,qBAAA,OAAA;IAEa,WAAAxB,KACT,yCACAwB,QAAQZ,QAAOU,SAAU,KAAzB,wBACF;cALF,CAOGC,OAAMlB,QACP,oBAAA,OAAA;KAAe,WAAA;eAAkCkB,OAAMjB;IAAgB,CAAA,CACnE;MARCiB,OAAMnB,GAQP;GACPK,EAAA,KAAAG,QAAAU;GAAAb,EAAA,KAAAY;EAAA,OAAAA,KAAAZ,EAAA;EAXAW,KAAAR,QAAOa,IAAKJ,EAWZ;EAACZ,EAAA,KAAAG;EAAAH,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAK,MAAAL,EAAA,QAAAS,MAAAT,EAAA,QAAAW,IAAA;EAfJC,KAAA,oBAAA,OAAA;GACa,WAAAP;GACJ,OAAAI;aAENE;EAYG,CAAA;EAAAX,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAhBNY;AAgBM"}

package/dist/shell/registry.d.ts

@@ -0,0 +1,41 @@
+import { ApiInfo } from "../data/types.js";
+import { ComponentType } from "react";
+
+//#region src/shell/registry.d.ts
+interface DevToolsTabContext {
+  /** The id of the assistant instance the panel is currently inspecting. */
+  apiId: number;
+  /** Projected, render-ready data for the inspected instance. */
+  data: ApiInfo;
+  /** Clears the buffered event log for an instance. */
+  clearEvents: (apiId: number) => void;
+  /** The resolved theme of the panel. */
+  theme: "light" | "dark";
+  /**
+   * The selected node id for this tab and instance, or null. Always a stable id
+   * (message id, run id, slice key, …), never an array index, so the detail
+   * pane does not jump as data streams in.
+   */
+  selection: string | null;
+  /** Selects a node in this tab. Pass null to clear. Persisted per instance. */
+  setSelection: (nodeId: string | null) => void;
+  /** Switches the live app to a thread, when the runtime supports thread lists. */
+  switchToThread?: ((threadId: string) => void | Promise<void>) | undefined;
+}
+interface DevToolsPanelPlugin {
+  /** Stable identifier used as the tab key. */
+  id: string;
+  /** Tab label shown in the navigation bar. */
+  label: string;
+  /** Lower numbers sort earlier; builtins occupy 10, 20, 30, 40. */
+  order?: number;
+  /** When provided and it returns false, the tab is hidden for the current instance. */
+  isAvailable?: (ctx: DevToolsTabContext) => boolean;
+  /** The tab body. Receives the tab context as props. */
+  Component: ComponentType<DevToolsTabContext>;
+}
+declare const createDevToolsPlugin: (plugin: DevToolsPanelPlugin) => DevToolsPanelPlugin;
+declare const builtinPlugins: DevToolsPanelPlugin[];
+//#endregion
+export { DevToolsPanelPlugin, DevToolsTabContext, builtinPlugins, createDevToolsPlugin };
+//# sourceMappingURL=registry.d.ts.map

package/dist/shell/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","names":[],"sources":["../../src/shell/registry.ts"],"mappings":";;;;UAOiB,kBAAA;;EAEf,KAAA;EAFiC;EAIjC,IAAA,EAAM,OAAA;EAcgD;EAZtD,WAAA,GAAc,KAAA;EAFd;EAIA,KAAA;EAFA;;;;;EAQA,SAAA;EAIA;EAFA,YAAA,GAAe,MAAA;EAEgC;EAA/C,cAAA,KAAmB,QAAA,oBAA4B,OAAO;AAAA;AAAA,UAGvC,mBAAA;EAAmB;EAElC,EAAA;EAMoB;EAJpB,KAAA;EAMW;EAJX,KAAA;EAIwB;EAFxB,WAAA,IAAe,GAAA,EAAK,kBAAA;EAJpB;EAMA,SAAA,EAAW,aAAA,CAAc,kBAAA;AAAA;AAAA,cAGd,oBAAA,GACX,MAAA,EAAQ,mBAAA,KACP,mBAA6B;AAAA,cAEnB,cAAA,EAAgB,mBAAmB"}

package/dist/shell/registry.js

@@ -0,0 +1,36 @@
+import { ActivityTab } from "./tabs/ActivityTab.js";
+import { ContextTab } from "./tabs/ContextTab.js";
+import { RawTab } from "./tabs/RawTab.js";
+import { ThreadTab } from "./tabs/ThreadTab.js";
+//#region src/shell/registry.ts
+const createDevToolsPlugin = (plugin) => plugin;
+const builtinPlugins = [
+	{
+		id: "thread",
+		label: "Thread",
+		order: 10,
+		Component: ThreadTab
+	},
+	{
+		id: "context",
+		label: "Context",
+		order: 20,
+		Component: ContextTab
+	},
+	{
+		id: "activity",
+		label: "Activity",
+		order: 30,
+		Component: ActivityTab
+	},
+	{
+		id: "raw",
+		label: "Raw",
+		order: 40,
+		Component: RawTab
+	}
+];
+//#endregion
+export { builtinPlugins, createDevToolsPlugin };
+
+//# sourceMappingURL=registry.js.map

package/dist/shell/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","names":["ComponentType","ApiInfo","ActivityTab","ContextTab","RawTab","ThreadTab","DevToolsTabContext","apiId","data","clearEvents","theme","selection","setSelection","nodeId","switchToThread","threadId","Promise","DevToolsPanelPlugin","id","label","order","isAvailable","ctx","Component","createDevToolsPlugin","plugin","builtinPlugins"],"sources":["../../src/shell/registry.ts"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport type { ApiInfo } from \"../data/types\";\nimport { ActivityTab } from \"./tabs/ActivityTab\";\nimport { ContextTab } from \"./tabs/ContextTab\";\nimport { RawTab } from \"./tabs/RawTab\";\nimport { ThreadTab } from \"./tabs/ThreadTab\";\n\nexport interface DevToolsTabContext {\n  /** The id of the assistant instance the panel is currently inspecting. */\n  apiId: number;\n  /** Projected, render-ready data for the inspected instance. */\n  data: ApiInfo;\n  /** Clears the buffered event log for an instance. */\n  clearEvents: (apiId: number) => void;\n  /** The resolved theme of the panel. */\n  theme: \"light\" | \"dark\";\n  /**\n   * The selected node id for this tab and instance, or null. Always a stable id\n   * (message id, run id, slice key, …), never an array index, so the detail\n   * pane does not jump as data streams in.\n   */\n  selection: string | null;\n  /** Selects a node in this tab. Pass null to clear. Persisted per instance. */\n  setSelection: (nodeId: string | null) => void;\n  /** Switches the live app to a thread, when the runtime supports thread lists. */\n  switchToThread?: ((threadId: string) => void | Promise<void>) | undefined;\n}\n\nexport interface DevToolsPanelPlugin {\n  /** Stable identifier used as the tab key. */\n  id: string;\n  /** Tab label shown in the navigation bar. */\n  label: string;\n  /** Lower numbers sort earlier; builtins occupy 10, 20, 30, 40. */\n  order?: number;\n  /** When provided and it returns false, the tab is hidden for the current instance. */\n  isAvailable?: (ctx: DevToolsTabContext) => boolean;\n  /** The tab body. Receives the tab context as props. */\n  Component: ComponentType<DevToolsTabContext>;\n}\n\nexport const createDevToolsPlugin = (\n  plugin: DevToolsPanelPlugin,\n): DevToolsPanelPlugin => plugin;\n\nexport const builtinPlugins: DevToolsPanelPlugin[] = [\n  { id: \"thread\", label: \"Thread\", order: 10, Component: ThreadTab },\n  { id: \"context\", label: \"Context\", order: 20, Component: ContextTab },\n  { id: \"activity\", label: \"Activity\", order: 30, Component: ActivityTab },\n  { id: \"raw\", label: \"Raw\", order: 40, Component: RawTab },\n];\n"],"mappings":";;;;;AAyCA,MAAawB,wBACXC,WACwBA;AAE1B,MAAaC,iBAAwC;CACnD;EAAER,IAAI;EAAUC,OAAO;EAAUC,OAAO;EAAIG,WAAWlB;CAAU;CACjE;EAAEa,IAAI;EAAWC,OAAO;EAAWC,OAAO;EAAIG,WAAWpB;CAAW;CACpE;EAAEe,IAAI;EAAYC,OAAO;EAAYC,OAAO;EAAIG,WAAWrB;CAAY;CACvE;EAAEgB,IAAI;EAAOC,OAAO;EAAOC,OAAO;EAAIG,WAAWnB;CAAO;AAAC"}

package/dist/shell/tabs/ActivityTab.d.ts

@@ -0,0 +1,13 @@
+import { DevToolsTabContext } from "../registry.js";
+
+//#region src/shell/tabs/ActivityTab.d.ts
+declare const ActivityTab: ({
+  apiId,
+  data,
+  clearEvents,
+  selection,
+  setSelection
+}: DevToolsTabContext) => import("react").JSX.Element;
+//#endregion
+export { ActivityTab };
+//# sourceMappingURL=ActivityTab.d.ts.map

package/dist/shell/tabs/ActivityTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityTab.d.ts","names":[],"sources":["../../../src/shell/tabs/ActivityTab.tsx"],"mappings":";;;cA6Ba,WAAA;EAAe,KAAA;EAAA,IAAA;EAAA,WAAA;EAAA,SAAA;EAAA;AAAA,GAMzB,kBAAA,qBAAkB,GAAA,CAAA,OAAA"}