@plitzi/sdk-dev-tools 0.37.9 → 0.37.10

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

@@ -0,0 +1,12 @@
+import { TreeSection as Section } from '../../helpers/renderTree';
+export type ElementsTreeProps = {
+    sections: Section[];
+    filter: string;
+    selected?: string;
+    onFilter: (filter: string) => void;
+    onSelect: (id: string) => void;
+    onHover: (id?: string) => void;
+};
+/** Every tree on screen, searched together: a match is kept with what holds it. */
+declare const ElementsTree: ({ sections, filter, selected, onFilter, onSelect, onHover }: ElementsTreeProps) => import('react').JSX.Element;
+export default ElementsTree;

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

@@ -0,0 +1,39 @@
+import { filterRows as e } from "../../helpers/renderTree.mjs";
+import t from "../TreeSection/index.mjs";
+import { useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@plitzi/plitzi-ui/Input";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/ElementsTree/ElementsTree.tsx
+var o = 200, s = ({ sections: s, filter: c, selected: l, onFilter: u, onSelect: d, onHover: f }) => {
+	let p = n(() => s.map((t) => ({
+		section: t,
+		rows: e(t.rows, c)
+	})).filter(({ rows: e }) => e.length > 0), [s, c]);
+	return /* @__PURE__ */ i("div", {
+		className: "flex h-full w-[320px] shrink-0 flex-col gap-2 border-r border-zinc-200 dark:border-zinc-700",
+		children: [/* @__PURE__ */ r("div", {
+			className: "px-2 pt-2",
+			children: /* @__PURE__ */ r(a, {
+				value: c,
+				onChange: u,
+				placeholder: "Search by name, id or type...",
+				size: "sm"
+			})
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col overflow-y-auto text-xs",
+			children: [p.length === 0 && /* @__PURE__ */ r("div", {
+				className: "p-4 text-center text-zinc-400 dark:text-zinc-600",
+				children: "No elements"
+			}), p.map(({ section: e, rows: n }) => /* @__PURE__ */ r(t, {
+				section: e,
+				rows: n.slice(0, o),
+				more: Math.max(n.length - o, 0),
+				selected: l,
+				onSelect: d,
+				onHover: f
+			}, `${e.kind}-${e.id}`))]
+		})]
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementsTree/index.d.ts

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

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementsTree/index.mjs

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

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

@@ -0,0 +1,10 @@
+import { TreeRow as Row } from '../../helpers/renderTree';
+export type TreeRowProps = {
+    row: Row;
+    isSelected: boolean;
+    onSelect: (id: string) => void;
+    onHover: (id?: string) => void;
+};
+/** One element of a tree, at its depth: its label, its type, the component it places, and whether it starts hidden. */
+declare const TreeRow: ({ row, isSelected, onSelect, onHover }: TreeRowProps) => import('react').JSX.Element;
+export default TreeRow;

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

@@ -0,0 +1,36 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/TreeRow/TreeRow.tsx
+var i = ({ row: i, isSelected: a, onSelect: o, onHover: s }) => {
+	let c = t(() => o(i.id), [o, i.id]), l = t(() => s(i.id), [s, i.id]), u = t(() => s(void 0), [s]);
+	return /* @__PURE__ */ r("div", {
+		className: e("flex w-full cursor-pointer items-center gap-2 border-l-2 py-1 pr-2 transition-colors", a ? "border-l-violet-500 bg-violet-50 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300" : "border-l-transparent text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"),
+		style: { paddingLeft: 8 + i.depth * 12 },
+		onClick: c,
+		onMouseEnter: l,
+		onMouseLeave: u,
+		children: [
+			/* @__PURE__ */ n("span", {
+				className: "truncate",
+				title: i.id,
+				children: i.label
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "shrink-0 font-mono text-[10px] text-zinc-400 dark:text-zinc-500",
+				children: i.type
+			}),
+			i.instanceOf && /* @__PURE__ */ r("span", {
+				className: "shrink-0 rounded bg-violet-100 px-1 text-[10px] text-violet-700 dark:bg-violet-500/20 dark:text-violet-300",
+				children: ["◇ ", i.instanceOf]
+			}),
+			/* @__PURE__ */ n("span", { className: "grow" }),
+			i.hidden && /* @__PURE__ */ n("i", {
+				className: "fa-solid fa-eye-slash shrink-0 text-[10px] text-zinc-300 dark:text-zinc-600",
+				title: "Starts hidden"
+			})
+		]
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/TreeRow/index.d.ts

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

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/TreeRow/index.mjs

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

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

@@ -0,0 +1,13 @@
+import { TreeRow as Row, TreeSection as Section } from '../../helpers/renderTree';
+export type TreeSectionProps = {
+    section: Section;
+    rows: Row[];
+    /** Rows the section holds beyond those shown. */
+    more: number;
+    selected?: string;
+    onSelect: (id: string) => void;
+    onHover: (id?: string) => void;
+};
+/** One tree of what is on screen — a layout, the page, a component — headed by what it is. */
+declare const TreeSection: ({ section, rows, more, selected, onSelect, onHover }: TreeSectionProps) => import('react').JSX.Element;
+export default TreeSection;

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

@@ -0,0 +1,39 @@
+import e from "../TreeRow/index.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/components/TreeSection/TreeSection.tsx
+var r = {
+	layout: "fa-solid fa-table-columns",
+	page: "fa-regular fa-file",
+	component: "fa-solid fa-cube"
+}, i = {
+	layout: "Layout",
+	page: "Page",
+	component: "Component"
+}, a = ({ section: a, rows: o, more: s, selected: c, onSelect: l, onHover: u }) => /* @__PURE__ */ n("div", {
+	className: "flex flex-col",
+	children: [
+		/* @__PURE__ */ n("div", {
+			className: "sticky top-0 flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-2 py-1 text-[10px] font-semibold tracking-wider text-zinc-500 uppercase dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400",
+			children: [
+				/* @__PURE__ */ t("i", { className: r[a.kind] }),
+				/* @__PURE__ */ t("span", { children: i[a.kind] }),
+				/* @__PURE__ */ t("span", {
+					className: "truncate font-normal tracking-normal normal-case",
+					children: a.title
+				})
+			]
+		}),
+		o.map((n) => /* @__PURE__ */ t(e, {
+			row: n,
+			isSelected: c === n.id,
+			onSelect: l,
+			onHover: u
+		}, n.id)),
+		s > 0 && /* @__PURE__ */ n("div", {
+			className: "p-2 text-center text-[11px] text-zinc-400 dark:text-zinc-600",
+			children: [s, " more — narrow the search to reach them"]
+		})
+	]
+});
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/TreeSection/index.d.ts

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

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/TreeSection/index.mjs

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

package/dist/components/DevToolsPanel/tabs/ElementsViewer/helpers/renderTree.d.ts

@@ -0,0 +1,31 @@
+import { Schema } from '@plitzi/sdk-shared';
+export type TreeRow = {
+    id: string;
+    label: string;
+    type: string;
+    depth: number;
+    /** Starts hidden: its initial visibility is off. */
+    hidden: boolean;
+    /** The component it places, when it is an instance. */
+    instanceOf?: string;
+};
+export type TreeSection = {
+    kind: 'layout' | 'page' | 'component';
+    /** The root's id: the layout, the page, the component. */
+    id: string;
+    title: string;
+    rows: TreeRow[];
+};
+type Document = Pick<Schema, 'flat' | 'components'>;
+/**
+ * What renders on a page, as the trees it comes from: the layouts around it, outermost first, the page, and each
+ * component an instance places — the components an instance inside one of those places too. A layout's and a
+ * component's elements are not in the page's tree, and the page is not all that is on screen.
+ */
+export declare const renderTree: (document: Document, pageId: string) => TreeSection[];
+/**
+ * The rows a search keeps: each one it matches — by label, id or type — and the rows above it in its tree, so a match
+ * is read where it sits. Everything, for an empty search.
+ */
+export declare const filterRows: (rows: readonly TreeRow[], query: string) => TreeRow[];
+export {};

package/dist/components/DevToolsPanel/tabs/ElementsViewer/helpers/renderTree.mjs

@@ -0,0 +1,61 @@
+import { componentNamed as e, isInstance as t } from "@plitzi/sdk-schema/helpers/components";
+import { resolveLayoutChain as n } from "@plitzi/sdk-shared/schema/layoutChain";
+//#region src/components/DevToolsPanel/tabs/ElementsViewer/helpers/renderTree.ts
+var r = (e) => typeof e == "string" ? e : "", i = (e, n) => {
+	let i = [], a = /* @__PURE__ */ new Set(), o = (n, s) => {
+		let c = Object.hasOwn(e, n) ? e[n] : void 0;
+		if (!c || a.has(n)) return;
+		a.add(n);
+		let l = t(c) ? r(c.attributes.referenceId) : "";
+		i.push({
+			id: n,
+			label: c.definition.label || n,
+			type: c.definition.type,
+			depth: s,
+			hidden: c.definition.initialState?.visibility === !1,
+			...l ? { instanceOf: l } : {}
+		});
+		for (let e of c.definition.items ?? []) o(e, s + 1);
+	};
+	return o(n, 0), i;
+}, a = (t, a) => {
+	let o = Object.hasOwn(t.flat, a) ? t.flat[a] : void 0;
+	if (!o) return [];
+	let s = [...n((e) => Object.hasOwn(t.flat, e) ? t.flat[e] : void 0, r(o.attributes.layout), r(o.attributes.layoutContainer)).toReversed().map(({ layout: e }) => ({
+		kind: "layout",
+		id: e,
+		title: t.flat[e].definition.label || e,
+		rows: i(t.flat, e)
+	})), {
+		kind: "page",
+		id: a,
+		title: r(o.attributes.name) || o.definition.label || a,
+		rows: i(t.flat, a)
+	}], c = /* @__PURE__ */ new Set();
+	for (let n = 0; n < s.length; n++) for (let r of s[n].rows) {
+		let n = r.instanceOf ? e(t, r.instanceOf) : void 0;
+		n && !c.has(n.id) && (c.add(n.id), s.push({
+			kind: "component",
+			id: n.id,
+			title: n.label ?? n.id,
+			rows: i(n.flat, n.rootId)
+		}));
+	}
+	return s;
+}, o = (e, t) => {
+	let n = t.trim().toLowerCase();
+	if (!n) return [...e];
+	let r = /* @__PURE__ */ new Set();
+	return e.forEach((t, i) => {
+		if (![
+			t.label,
+			t.id,
+			t.type
+		].some((e) => e.toLowerCase().includes(n))) return;
+		r.add(i);
+		let a = t.depth;
+		for (let t = i - 1; t >= 0 && a > 0; t--) e[t].depth < a && (r.add(t), a = e[t].depth);
+	}), e.filter((e, t) => r.has(t));
+};
+//#endregion
+export { o as filterRows, a as renderTree };

package/dist/components/DevToolsPanel/tabs/FlagsViewer/FlagSource.d.ts

@@ -0,0 +1,7 @@
+import { FlagResolution } from '@plitzi/sdk-shared';
+export type FlagSourceProps = {
+    resolution?: FlagResolution;
+};
+/** Which layer decided the flag — and, when the space did with a rule, which rule. */
+declare const FlagSource: ({ resolution }: FlagSourceProps) => import('react').JSX.Element | null;
+export default FlagSource;

package/dist/components/DevToolsPanel/tabs/FlagsViewer/FlagSource.mjs

@@ -0,0 +1,23 @@
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/FlagsViewer/FlagSource.tsx
+var n = {
+	space: "default",
+	server: "server",
+	sdk: "sdk",
+	qa: "forced"
+}, r = ({ resolution: r }) => {
+	if (!r) return null;
+	let { layer: i, rule: a } = r, o = i === "space" && a !== void 0 ? `rule ${a + 1}` : n[i];
+	return /* @__PURE__ */ t("span", {
+		className: e("rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase", {
+			"bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400": i === "space",
+			"bg-sky-100 text-sky-700 dark:bg-sky-950 dark:text-sky-300": i === "server" || i === "sdk",
+			"bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300": i === "qa"
+		}),
+		title: "Which layer decided this flag",
+		children: o
+	});
+};
+//#endregion
+export { r as default };

package/dist/components/DevToolsPanel/tabs/FlagsViewer/FlagsListItem.d.ts

@@ -0,0 +1,11 @@
+import { FlagResolution, SchemaFlag } from '@plitzi/sdk-shared';
+export type FlagsListItemProps = {
+    name: string;
+    flag: SchemaFlag;
+    resolution?: FlagResolution;
+    /** What a tester forced this flag to, if anything. */
+    forced?: boolean;
+    onForce: (name: string, value: boolean | undefined) => void;
+};
+declare const FlagsListItem: ({ name, flag, resolution, forced, onForce }: FlagsListItemProps) => import('react').JSX.Element;
+export default FlagsListItem;

package/dist/components/DevToolsPanel/tabs/FlagsViewer/FlagsListItem.mjs

@@ -0,0 +1,66 @@
+import e from "./FlagSource.mjs";
+import t from "clsx";
+import { useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/FlagsViewer/FlagsListItem.tsx
+var a = ({ name: a, flag: o, resolution: s, forced: c, onForce: l }) => {
+	let u = s?.value ?? !1, d = n(() => l(a, !0), [a, l]), f = n(() => l(a, !1), [a, l]), p = n(() => l(a, void 0), [a, l]);
+	return /* @__PURE__ */ i("div", {
+		className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 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__ */ i("div", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [/* @__PURE__ */ i("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [
+					/* @__PURE__ */ r("span", { className: t("h-2 w-2 shrink-0 rounded-full", {
+						"bg-emerald-500": u,
+						"bg-zinc-300 dark:bg-zinc-600": !u
+					}) }),
+					/* @__PURE__ */ r("span", {
+						className: "truncate font-mono font-medium text-zinc-800 dark:text-zinc-200",
+						title: a,
+						children: a
+					}),
+					/* @__PURE__ */ r(e, { resolution: s })
+				]
+			}), o.description && /* @__PURE__ */ r("span", {
+				className: "truncate text-[11px] text-zinc-400 dark:text-zinc-500",
+				title: o.description,
+				children: o.description
+			})]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ r("button", {
+					type: "button",
+					className: t("rounded px-1.5 py-0.5 text-[10px] font-medium", {
+						"bg-emerald-600 text-white": c === !0,
+						"text-zinc-500 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800": c !== !0
+					}),
+					title: "Force this flag on for this browser",
+					onClick: d,
+					children: "On"
+				}),
+				/* @__PURE__ */ r("button", {
+					type: "button",
+					className: t("rounded px-1.5 py-0.5 text-[10px] font-medium", {
+						"bg-zinc-700 text-white dark:bg-zinc-300 dark:text-zinc-900": c === !1,
+						"text-zinc-500 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800": c !== !1
+					}),
+					title: "Force this flag off for this browser",
+					onClick: f,
+					children: "Off"
+				}),
+				c !== void 0 && /* @__PURE__ */ r("button", {
+					type: "button",
+					className: "rounded px-1.5 py-0.5 text-[10px] text-zinc-400 hover:bg-zinc-100 dark:text-zinc-500 dark:hover:bg-zinc-800",
+					title: "Stop forcing it: the space and its embedding decide again",
+					onClick: p,
+					children: /* @__PURE__ */ r("i", { className: "fa-solid fa-rotate-left" })
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,10 @@
+/**
+ * The space's feature flags as this page resolved them — which layer decided each, and which rule matched — with a
+ * way to force any of them for this browser.
+ *
+ * Forcing is the `qa` layer: the strongest there is, written to the page that is open and to a cookie, so the next
+ * page this browser asks for is drawn with it on the server too. It is only ever offered here, and the dev tools are
+ * only ever shown where debugging is authorized — the same rule the server applies before honouring the cookie.
+ */
+declare const FlagsViewer: () => import('react').JSX.Element;
+export default FlagsViewer;

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

@@ -0,0 +1,43 @@
+import e from "./FlagsListItem.mjs";
+import { useCallback as t } from "react";
+import { useCommonStore as n } from "@plitzi/sdk-shared/store";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { withForcedFlag as a, writeForcedFlags as o } from "@plitzi/sdk-shared/flags";
+//#region src/components/DevToolsPanel/tabs/FlagsViewer/FlagsViewer.tsx
+var s = {}, c = () => {
+	let [[c, l]] = n(["schema.flags", "flags.resolved"]), [u = s, d] = n("flags.overrides.qa"), f = Object.keys(c ?? {}), p = t((e, t) => {
+		let n = a(u, e, t);
+		d(n), o(window.location.host, n);
+	}, [u, d]), m = t(() => {
+		d({}), o(window.location.host, {});
+	}, [d]);
+	return !c || f.length === 0 ? /* @__PURE__ */ r("div", {
+		className: "py-4 text-center text-xs text-zinc-400 italic dark:text-zinc-600",
+		children: "This space declares no feature flags"
+	}) : /* @__PURE__ */ i("div", {
+		className: "flex w-full flex-col gap-1.5 overflow-y-auto p-3",
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex items-center justify-between gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+			children: [/* @__PURE__ */ i("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-flag" }), "Feature Flags"]
+			}), Object.keys(u).length > 0 && /* @__PURE__ */ r("button", {
+				type: "button",
+				className: "rounded px-1.5 py-0.5 font-medium normal-case hover:bg-zinc-100 dark:hover:bg-zinc-800",
+				onClick: m,
+				children: "Stop forcing all"
+			})]
+		}), /* @__PURE__ */ r("div", {
+			className: "w-full overflow-hidden rounded border border-zinc-200 dark:border-zinc-700",
+			children: f.map((t) => /* @__PURE__ */ r(e, {
+				name: t,
+				flag: c[t],
+				resolution: l?.[t],
+				forced: u[t],
+				onForce: p
+			}, t))
+		})]
+	});
+};
+//#endregion
+export { c as default };

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

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

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

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

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

@@ -1,11 +1,6 @@
-import { LogParams } from '@plitzi/sdk-shared';
-import { ReactNode } from 'react';
+import { Log as TLog } from '@plitzi/sdk-shared';
 export type LogProps = {
-    className?: string;
-    category: string;
-    time?: string;
-    message?: ReactNode;
-    params: LogParams;
+    log: TLog;
 };
-declare const _default: import('react').MemoExoticComponent<({ category, message, time, params }: LogProps) => import('react').JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ log }: LogProps) => import('react').JSX.Element | null>;
 export default _default;

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

@@ -2,35 +2,46 @@ import e from "./categories/LogAction/index.mjs";
 import t from "./categories/LogInteraction/index.mjs";
 import n from "./categories/LogNavigation/index.mjs";
 import r from "./categories/LogNetwork/index.mjs";
-import i from "./categories/LogStore/LogStore.mjs";
-import { memo as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-var l = a(({ category: a, message: l, time: u, params: d }) => /* @__PURE__ */ c(o, { children: [
-	a === "interactions" && /* @__PURE__ */ s(t, {
-		message: l,
-		params: d,
-		time: u
-	}),
-	a === "navigation" && /* @__PURE__ */ s(n, {
-		message: l,
-		params: d,
-		time: u
-	}),
-	a === "store" && /* @__PURE__ */ s(i, {
-		message: l,
-		params: d,
-		time: u
-	}),
-	a === "network" && /* @__PURE__ */ s(r, {
-		message: l,
-		params: d,
-		time: u
-	}),
-	a === "actions" && /* @__PURE__ */ s(e, {
-		message: l,
-		params: d,
-		time: u
-	})
-] }));
+import i from "./categories/LogRealtime/index.mjs";
+import a from "./categories/LogStore/LogStore.mjs";
+import { memo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var c = o(({ log: o }) => {
+	let { message: c, time: l } = o;
+	switch (o.category) {
+		case "interactions": return /* @__PURE__ */ s(t, {
+			message: c,
+			params: o.params,
+			time: l
+		});
+		case "navigation": return /* @__PURE__ */ s(n, {
+			message: c,
+			params: o.params,
+			time: l
+		});
+		case "store": return /* @__PURE__ */ s(a, {
+			message: c,
+			params: o.params,
+			time: l
+		});
+		case "network": return /* @__PURE__ */ s(r, {
+			message: c,
+			params: o.params,
+			time: l
+		});
+		case "actions": return /* @__PURE__ */ s(e, {
+			message: c,
+			params: o.params,
+			time: l
+		});
+		case "realtime": return /* @__PURE__ */ s(i, {
+			logType: o.logType,
+			message: c,
+			params: o.params,
+			time: l
+		});
+		case "eventBridge": return null;
+	}
+});
 //#endregion
-export { l as default };
+export { c as default };

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

@@ -50,12 +50,7 @@ var l = ({ items: l = [], autoScrollOffset: u = 40, orientation: d = "horizontal
 				}) : l.map((e, t) => ({
 					item: e,
 					key: t
-				})).filter(({ item: e }) => !m || e.logType === m).reverse().map(({ item: t, key: n }) => /* @__PURE__ */ s(e, {
-					category: t.category,
-					time: t.time,
-					params: t.params,
-					message: t.message
-				}, n))
+				})).filter(({ item: e }) => !m || e.logType === m).reverse().map(({ item: t, key: n }) => /* @__PURE__ */ s(e, { log: t }, n))
 			})]
 		})]
 	});