@plitzi/sdk-dev-tools 0.38.5 → 0.38.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @plitzi/sdk-dev-tools
 
+## 0.38.6
+
+### Patch Changes
+
+- 3bce653: ## Fixes
+
+  - **The dev tools draw their icons again.** The panel lives in a shadow root of its own, which the page's stylesheets
+    never reach, and Font Awesome moved to a sheet of its own in 0.38.5 (`plitzi-sdk-icons.css`): the badge and every tab
+    lost their icons. The panel now links that sheet inside its root, beside its own. Where it is served is the SDK's
+    new `sdkIconsStylePath` — the page server sends `/sdk-assets/plitzi-sdk-icons.css`, the same sheet the document
+    links — which the `iframe` and `shadow` render modes read too: they had `/plitzi-sdk-icons.css` hard-coded, a path a
+    page server does not serve.
+
+- Updated dependencies [3bce653]
+  - @plitzi/sdk-plugins@0.38.6
+  - @plitzi/sdk-schema@0.38.6
+  - @plitzi/sdk-shared@0.38.6
+
 ## 0.38.5
 
 ### Patch Changes

package/dist/DevToolsContainer.d.ts

@@ -8,6 +8,11 @@ export type DevToolsContainerProps = {
     instanceId?: string;
     devToolsStyle?: string;
     devToolsStyleLink?: string;
+    /**
+     * Font Awesome's sheet, linked inside the panel's shadow root beside its own: a page's stylesheets stop at the root,
+     * and the panel's icons are classes of that sheet (its fonts are the page's, declared by the same sheet there).
+     */
+    devToolsIconsLink?: string;
     renderMode?: 'default' | 'shadow';
     /**
      * What scrolls while the panel is folded away.
@@ -26,5 +31,5 @@ export type DevToolsContainerProps = {
      */
     qa?: boolean;
 };
-declare const DevToolsContainer: ({ children, className, innerClassName, enabled, instanceId, renderMode, scroll, qa, devToolsStyle, devToolsStyleLink }: DevToolsContainerProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import('react').JSX.Element | null | undefined;
+declare const DevToolsContainer: ({ children, className, innerClassName, enabled, instanceId, renderMode, scroll, qa, devToolsStyle, devToolsStyleLink, devToolsIconsLink }: DevToolsContainerProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import('react').JSX.Element | null | undefined;
 export default DevToolsContainer;

package/dist/DevToolsContainer.mjs

@@ -13,62 +13,66 @@ 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 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]);
+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 = "", devToolsIconsLink: j = "" }) => {
+	let { resolvedTheme: M } = g(), [N, P] = c("plitzi-sdk.dev-tools.orientation", b), [F, I] = c("plitzi-sdk.dev-tools.collapsed", !0), [L, R] = c("plitzi-sdk.dev-tools.tab", "logs"), [z, B] = m(), V = p(void 0), H = p(null);
+	V.current ||= `sdk-instance-${++x}`;
+	let U = T || V.current, W = i(), G = W ? N : b, K = r(U, w);
+	o(w), a(K, U), e(K);
+	let q = f((e) => P(e), [P]), J = f((e) => {
+		e && R("logs"), B(e), I(!1);
+	}, [I, R]), Y = f(() => I(!0), [I]), X = f((e) => {
+		B(void 0), R(e);
+	}, [R]);
 	if (!w) return d;
-	let X = D === "document" && (!U || P), Z = G && U && /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { children: /* @__PURE__ */ v(u, {
+	let Z = D === "document" && (!W || F), Q = K && W && /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { children: /* @__PURE__ */ v(u, {
 		fallback: null,
 		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,
+			className: l({ dark: M === "dark" }),
+			collapsed: F,
+			orientation: G,
+			tabSelected: L,
+			logTypeFilter: z,
+			onOpen: J,
+			onCollapse: Y,
+			onTabSelect: X,
+			onChangeOrientation: q,
+			pageRef: H,
 			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
-		})] })] })]
+		}), E === "shadow" && /* @__PURE__ */ v(s, { children: [
+			j && /* @__PURE__ */ _(s.Link, { href: j }),
+			A && /* @__PURE__ */ _(s.Link, { href: A }),
+			/* @__PURE__ */ v(s.Content, { children: [/* @__PURE__ */ _("style", { dangerouslySetInnerHTML: { __html: k } }), /* @__PURE__ */ _(y, {
+				className: l({ dark: M === "dark" }),
+				collapsed: F,
+				orientation: G,
+				tabSelected: L,
+				logTypeFilter: z,
+				onOpen: J,
+				onCollapse: Y,
+				onTabSelect: X,
+				onChangeOrientation: q,
+				pageRef: H,
+				qa: O
+			})] })
+		] })]
 	}) }) });
 	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"
+			"overflow-auto": !Z,
+			"flex-col": Z || G === "horizontal",
+			"h-screen": !Z && G === "vertical"
 		}, S),
 		children: [/* @__PURE__ */ _(h, {
-			value: H,
+			value: U,
 			children: /* @__PURE__ */ _("div", {
-				ref: V,
-				className: l("grow", { "basis-0 flex-col overflow-auto": !X }, C),
+				ref: H,
+				className: l("grow", { "basis-0 flex-col overflow-auto": !Z }, C),
 				children: d
 			})
-		}), X ? /* @__PURE__ */ _("div", {
+		}), Z ? /* @__PURE__ */ _("div", {
 			className: "sticky bottom-0 h-0",
-			children: Z
-		}) : Z]
+			children: Q
+		}) : Q]
 	});
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-dev-tools",
-  "version": "0.38.5",
+  "version": "0.38.6",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -1211,9 +1211,9 @@
   "dependencies": {
     "@plitzi/nexus": "^1.4.0",
     "@plitzi/plitzi-ui": "^1.6.31",
-    "@plitzi/sdk-plugins": "0.38.5",
-    "@plitzi/sdk-schema": "0.38.5",
-    "@plitzi/sdk-shared": "0.38.5",
+    "@plitzi/sdk-plugins": "0.38.6",
+    "@plitzi/sdk-schema": "0.38.6",
+    "@plitzi/sdk-shared": "0.38.6",
     "@uiw/react-json-view": "^2.0.0-alpha.43",
     "clsx": "^2.1.1"
   }