@powerhousedao/connect 6.1.0-staging.0 → 6.1.0

package/dist/{sidebar-BLHOoVIg.js → sidebar-CO3JjI3G.js}

@@ -1,18 +1,19 @@
 
-!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="ebf04d37-dff0-53fa-872d-097855e3824e")}catch(e){}}();
-import { n as defaultPHAppConfig, r as defaultPHDocumentEditorConfig, t as connectConfig } from "./connect.config-Cuh0hj_Q.js";
+!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="239c52db-b664-5e9c-ac37-c27d54ef59b8")}catch(e){}}();
+import { n as defaultPHAppConfig, r as defaultPHDocumentEditorConfig, t as connectConfig } from "./connect.config-B2xP5Iez.js";
 import { n as toast, t as ToastContainer } from "./toast-DnODOv28.js";
-import { t as i18n } from "./i18n-4rfcgnb9.js";
+import { t as i18n } from "./i18n-BuVT7wFQ.js";
 import { c as subscribeReactorPgMajor, d as createFileDataStore, f as idbError, l as IDB_STORE_NAME, m as readPgVersionFile, p as openIdb, r as getCachedReactorPgMajor, u as PRIMARY_IDB_NAMES } from "./pglite-runtime-Btp8ZXVH.js";
-import { t as serviceWorkerManager } from "./registerServiceWorker-CMRF2LWE.js";
-import { driveCollectionId, getRevisionFromDate, logout, openRenown, setPHAppConfig, setPHDocumentEditorConfig, setRevisionHistoryVisible, setSelectedDrive, setSelectedNode, showPHModal, useAppModuleById, useDefaultAppModule, useDocumentById, useDocumentModelModuleById, useDocumentOperations, useDrives, useEditorModuleById, useFallbackEditorModule, useNodeParentFolderById, usePHModal, usePackageDiscoveryService, useRevisionHistoryVisible, useSelectedDocument, useSelectedDocumentId, useSelectedDrive, useSelectedDriveSafe, useSelectedFolder, useSelectedTimelineItem, useSyncList, useUser, useVetraPackageManager, useVetraPackages } from "@powerhousedao/reactor-browser";
+import { t as serviceWorkerManager } from "./registerServiceWorker-BkUnxLqB.js";
+import { driveCollectionId, getRevisionFromDate, initTheme, logout, openRenown, setPHAppConfig, setPHDocumentEditorConfig, setRevisionHistoryVisible, setSelectedDrive, setSelectedNode, showPHModal, useAppModuleById, useDefaultAppModule, useDocumentById, useDocumentModelModuleById, useDocumentOperations, useDrives, useEditorModuleById, useFallbackEditorModule, useNodeParentFolderById, usePHModal, usePackageDiscoveryService, useReactorClientModule, useRevisionHistoryVisible, useSelectedDocument, useSelectedDocumentId, useSelectedDriveSafe, useSelectedFolder, useSelectedTimelineItem, useSyncList, useTheme, useUser, useVetraPackageManager, useVetraPackages } from "@powerhousedao/reactor-browser";
 import { childLogger } from "document-model";
 import React, { StrictMode, Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { z } from "zod";
 import { Trans, useTranslation } from "react-i18next";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Outlet, RouterProvider, createBrowserRouter, createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from "react-router-dom";
 import { useHotkeys } from "react-hotkeys-hook";
-import { AnimatedLoader, ConnectSidebar, ConnectTooltipProvider, CookieBanner, DefaultEditorLoader, DropZoneWrapper, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, PackageInstallModal, RevisionHistory, SidebarAddDriveItem, SidebarItem, useEns } from "@powerhousedao/design-system/connect";
+import { ConnectSidebar, ConnectTooltipProvider, CookieBanner, DefaultEditorLoader, DropZoneWrapper, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, LogoAnimation, PackageInstallModal, RevisionHistory, SidebarAddDriveItem, SidebarItem, useEns } from "@powerhousedao/design-system/connect";
 import { GenericDriveExplorer } from "@powerhousedao/powerhouse-vetra-packages/editors";
 import { Icon, Modal, PowerhouseButton } from "@powerhousedao/design-system";
 import { ErrorBoundary } from "react-error-boundary";
@@ -54,10 +55,250 @@ function subscribe$1(fn) {
 const useAcceptedCookies = () => {
 	return [useSyncExternalStore(subscribe$1, getCookies, getCookies), setCookies];
 };
+//#endregion
+//#region src/services/openpanel/buffer.ts
+const buffer = [];
+let errorHandler;
+function defaultOnError(err) {
+	console.warn("[useOpenPanel] track failed:", err);
+}
+/**
+* Forward a single event to the active client, swallowing any throw.
+*
+* The outer try/catch handles synchronous throws from `client.track`; the
+* inner `.catch()` handles rejected promises. Both are needed because
+* `Promise.resolve(x).catch()` cannot catch a throw from evaluating `x`.
+*/
+function forward(client, name, props) {
+	try {
+		Promise.resolve(client.track(name, props)).catch((err) => (errorHandler ?? defaultOnError)(err));
+	} catch (err) {
+		(errorHandler ?? defaultOnError)(err);
+	}
+}
+/**
+* Drain the pre-init buffer in FIFO order through `client.track`, then forward
+* subsequent events directly. Called once from `getOpenPanelClient()`.
+*/
+function drainOpenPanelBuffer(client, onError) {
+	errorHandler = onError;
+	const pending = buffer.splice(0, buffer.length);
+	for (const [name, props] of pending) forward(client, name, props);
+}
+/**
+* Clear the buffer and reset the active client. Buffered pre-consent events
+* are discarded so they are not replayed if the user later re-accepts.
+*/
+function clearOpenPanelBuffer() {
+	buffer.length = 0;
+	errorHandler = void 0;
+}
+//#endregion
+//#region src/services/openpanel/client.ts
+let client;
+/**
+* Returns the cached `OpenPanel` singleton, building it on first call.
+*
+* When `config.clientId` is empty it returns `undefined` without importing
+* `@openpanel/web`, so the bundler can tree-shake the SDK out of production.
+*/
+async function getOpenPanelClient(config) {
+	if (!config.clientId) return;
+	if (client) return client;
+	const { OpenPanel: OpenPanelClass } = await import("@openpanel/web");
+	client = new OpenPanelClass({
+		clientId: config.clientId,
+		...config.apiUrl ? { apiUrl: config.apiUrl } : {}
+	});
+	drainOpenPanelBuffer(client);
+	return client;
+}
+/**
+* Clears the cached singleton and the pre-init buffer. Call on consent
+* revocation or during tests; buffered events are discarded, not replayed.
+*/
+function resetOpenPanelClient() {
+	client = void 0;
+	clearOpenPanelBuffer();
+}
+//#endregion
+//#region src/services/openpanel/events.json
+var events_default = [
+	{
+		"documentType": "powerhouse/document-drive",
+		"actionTypes": [
+			"ADD_FOLDER",
+			"DELETE_NODE",
+			"ADD_FILE",
+			"UPDATE_FILE",
+			"COPY_NODE",
+			"MOVE_NODE",
+			"SET_DRIVE_NAME",
+			"SET_DRIVE_ICON"
+		]
+	},
+	{
+		"documentType": "powerhouse/document-model",
+		"actionTypes": [
+			"SET_MODEL_NAME",
+			"SET_MODEL_ID",
+			"ADD_MODULE",
+			"DELETE_MODULE",
+			"ADD_OPERATION",
+			"DELETE_OPERATION"
+		]
+	},
+	{
+		"documentType": "powerhouse/reactor-drive",
+		"actionTypes": [
+			"ADD_FOLDER",
+			"REMOVE_FOLDER",
+			"UPDATE_FOLDER"
+		]
+	}
+];
+//#endregion
+//#region src/services/openpanel/events.ts
+const EventMappingSchema = z.object({
+	documentType: z.string().min(1),
+	actionTypes: z.array(z.string().min(1)).min(1),
+	alias: z.string().optional()
+}).strict();
+const EventMappingsSchema = z.array(EventMappingSchema).readonly();
+/**
+* Parses and validates the event mapping table, returning the validated array
+* and an O(1) lookup map. Accepts a `raw` override for tests. Throws on zod
+* failures and on duplicate `(documentType, actionType)` pairs.
+*/
+function loadEvents(raw = events_default) {
+	const result = EventMappingsSchema.safeParse(raw);
+	if (!result.success) throw new Error(`Invalid OpenPanel events.json: ${result.error.message}`);
+	const mappings = result.data;
+	const lookupMap = /* @__PURE__ */ new Map();
+	for (const mapping of mappings) {
+		let inner = lookupMap.get(mapping.documentType);
+		if (!inner) {
+			inner = /* @__PURE__ */ new Map();
+			lookupMap.set(mapping.documentType, inner);
+		}
+		for (const actionType of mapping.actionTypes) {
+			if (inner.has(actionType)) throw new Error(`Duplicate OpenPanel event mapping for ${mapping.documentType}/${actionType}`);
+			inner.set(actionType, mapping);
+		}
+	}
+	return {
+		mappings,
+		lookupMap
+	};
+}
+const { mappings: defaultMappings, lookupMap: defaultLookupMap } = loadEvents();
+/** Validated mapping array from the bundled events.json. */
+const eventMappings = defaultMappings;
+/** O(1) lookup map: documentType → actionType → mapping. */
+const eventLookupMap = defaultLookupMap;
+/**
+* Normalizes a document type into a safe event-name segment: lowercased, `/`
+* replaced with `.`, and any character outside `[a-z0-9._-]` stripped.
+* e.g. `powerhouse/document-drive` → `powerhouse.document-drive`.
+*/
+function normalize(documentType) {
+	return documentType.toLowerCase().replace(/\//g, ".").replace(/[^a-z0-9._-]/g, "");
+}
+/**
+* Derives the OpenPanel event name: `mapping.alias` when present, otherwise
+* `${normalize(documentType)}.${actionType.toLowerCase()}`.
+*/
+function deriveEventName(mapping, op) {
+	if (mapping.alias) return mapping.alias;
+	return `${normalize(op.context.documentType)}.${op.operation.action.type.toLowerCase()}`;
+}
+/** Builds the default properties attached to every OpenPanel event. */
+function buildDefaultProperties(op) {
+	return {
+		documentType: op.context.documentType,
+		actionType: op.operation.action.type,
+		documentId: op.context.documentId,
+		scope: op.context.scope,
+		branch: op.context.branch,
+		app: "connect"
+	};
+}
+//#endregion
+//#region src/services/openpanel/processor.ts
+/**
+* Read-only reactor `IProcessor` that translates matching document operations
+* into OpenPanel analytics events. Operations whose `(documentType, actionType)`
+* pair is absent from the lookup map are skipped; per-operation errors are
+* routed to `onError` and never thrown back to the manager.
+*/
+var OpenPanelProcessor = class {
+	constructor(client, lookupMap, onError = (err) => console.warn("[OpenPanelProcessor] Error tracking event:", err)) {
+		this.client = client;
+		this.lookupMap = lookupMap;
+		this.onError = onError;
+	}
+	async onOperations(operations) {
+		for (const op of operations) {
+			const inner = this.lookupMap.get(op.context.documentType);
+			if (!inner) continue;
+			const mapping = inner.get(op.operation.action.type);
+			if (!mapping) continue;
+			const name = deriveEventName(mapping, op);
+			const payload = buildDefaultProperties(op);
+			try {
+				await this.client.track(name, payload);
+			} catch (err) {
+				this.onError(err, op);
+			}
+		}
+	}
+	onDisconnect() {
+		this.client.flush?.();
+		return Promise.resolve();
+	}
+};
+//#endregion
+//#region src/services/openpanel/factory.ts
+/**
+* Returns a `ProcessorFactory` that, for each drive, creates a single
+* `OpenPanelProcessor` record whose `filter.documentType` is the union of all
+* document types present in the event mapping table.
+*/
+function createOpenPanelProcessorFactory(config) {
+	return function openPanelProcessorFactory(_driveHeader) {
+		const documentType = Array.from(config.events.lookupMap.keys());
+		return [{
+			processor: new OpenPanelProcessor(config.client, config.events.lookupMap, config.onError),
+			filter: { documentType },
+			startFrom: config.startFrom ?? "current"
+		}];
+	};
+}
+//#endregion
+//#region src/hooks/useIsEmbedded.ts
+/**
+* Detects whether Connect is being rendered inside another app (e.g. inside
+* an iframe in the vetra-cli drive editor). When `?embed=1` is present in the
+* URL, chrome that doesn't make sense in the embedded context — the cookie
+* banner, the outer sidebar — is suppressed.
+*/
+function getIsEmbedded() {
+	if (typeof window === "undefined") return false;
+	try {
+		const value = new URLSearchParams(window.location.search).get("embed");
+		return value !== null && value !== "0" && value !== "false";
+	} catch {
+		return false;
+	}
+}
+function useIsEmbedded() {
+	return getIsEmbedded();
+}
 const COOKIE_BANNER_KEY_STORAGE = `${connectConfig.routerBasename}:display-cookie-banner`;
 const listeners$2 = /* @__PURE__ */ new Set();
 let bannerShown = getInitial();
 function getInitial() {
+	if (getIsEmbedded()) return false;
 	try {
 		return localStorage.getItem(COOKIE_BANNER_KEY_STORAGE) !== "false";
 	} catch (error) {
@@ -208,6 +449,144 @@ const Analytics = () => {
 	return null;
 };
 //#endregion
+//#region src/components/openpanel-traits.ts
+/**
+* Builds the OpenPanel identity traits from a renown User.
+*
+* Rules:
+* - `credential` (contains a JWT) is **never** forwarded.
+* - `did` / `profileId` is sent as the top-level `profileId` key in the
+*   `client.identify()` call — it is **not** duplicated inside traits.
+* - Optional fields (`ens`, `profile`) are only included when their value is
+*   non-nullish (guards against `null` from `RenownProfile` fields as well
+*   as plain `undefined`).
+*
+* Mirror the Sentry pattern in `store/user.ts`: destructure off `credential`
+* first, then assemble the trait payload from the remainder.
+*/
+function buildTraits(user) {
+	const { credential: _credential, ...rest } = user;
+	const traits = {
+		address: rest.address,
+		networkId: rest.networkId,
+		chainId: rest.chainId
+	};
+	if (rest.ens?.name != null) traits.ensName = rest.ens.name;
+	if (rest.ens?.avatarUrl != null) traits.ensAvatar = rest.ens.avatarUrl;
+	if (rest.profile?.username != null) traits.username = rest.profile.username;
+	if (rest.profile?.userImage != null) traits.userImage = rest.profile.userImage;
+	if (rest.profile?.documentId != null) traits.profileDocumentId = rest.profile.documentId;
+	if (rest.profile?.createdAt != null) traits.profileCreatedAt = rest.profile.createdAt;
+	return traits;
+}
+//#endregion
+//#region src/components/openpanel.tsx
+/**
+* `OpenPanel` is a `null`-rendering component that manages the full lifecycle
+* of the OpenPanel analytics subsystem.
+*
+* Gates:
+* - `useAcceptedCookies().analytics === true` — the existing analytics cookie.
+* - `connectConfig.openPanel.clientId` non-empty — no client ID → no-op.
+*
+* Behaviour when both gates pass:
+* 1. Lazy-imports `@openpanel/web` and builds the singleton via
+*    `getOpenPanelClient(connectConfig.openPanel)`.
+* 2. Exposes the client on `window.openPanel` for the card-6 `useOpenPanel()`
+*    hook to consume.
+* 3. If `connectConfig.openPanel.trackOperations`, registers the processor
+*    factory against `processorManager` so document operations are forwarded.
+* 4. Calls `client.identify()` when the renown user transitions from
+*    `undefined` → defined (login).
+* 5. Calls `client.clear()` when the user transitions from defined →
+*    `undefined` (logout).
+*
+* Teardown (unmount **or** consent revocation):
+* - `unregisterFactory("openpanel")` to remove the processor.
+* - `resetOpenPanelClient()` to clear the singleton.
+* - `window.openPanel` is cleared.
+*
+* Mirrors the Sentry pattern in `store/user.ts` for login/logout detection.
+* Analytics failures are caught and forwarded to `console.warn` — they must
+* never throw into the application.
+*
+* Mounted next to `<Analytics />` in `app.tsx`.
+*/
+function OpenPanel() {
+	const [{ analytics }] = useAcceptedCookies();
+	const user = useUser();
+	const reactorClientModule = useReactorClientModule();
+	const [client, setClient] = useState();
+	/**
+	* Tracks the previous `user` value so we can detect the two transitions:
+	*   undefined → defined  (login)
+	*   defined   → undefined (logout)
+	*/
+	const prevUserRef = useRef(void 0);
+	const enabled = analytics && !!connectConfig.openPanel.clientId;
+	const processorManager = reactorClientModule?.reactorModule?.processorManager;
+	useEffect(() => {
+		if (!enabled) return;
+		let cancelled = false;
+		(async () => {
+			let builtClient;
+			try {
+				builtClient = await getOpenPanelClient(connectConfig.openPanel);
+			} catch (err) {
+				console.warn("[OpenPanel] Failed to build client:", err);
+				return;
+			}
+			if (cancelled || !builtClient) return;
+			setClient(builtClient);
+			window.openPanel = builtClient;
+			if (connectConfig.openPanel.trackOperations && processorManager) try {
+				await processorManager.registerFactory("openpanel", createOpenPanelProcessorFactory({
+					client: builtClient,
+					events: {
+						mappings: eventMappings,
+						lookupMap: eventLookupMap
+					},
+					startFrom: "current"
+				}));
+				if (cancelled) await processorManager.unregisterFactory("openpanel").catch((err) => console.warn("[OpenPanel] Failed to unregister factory after cancellation:", err));
+			} catch (err) {
+				console.warn("[OpenPanel] Failed to register processor factory:", err);
+			}
+		})();
+		return () => {
+			cancelled = true;
+			prevUserRef.current = void 0;
+			if (connectConfig.openPanel.trackOperations && processorManager) processorManager.unregisterFactory("openpanel").catch((err) => console.warn("[OpenPanel] Failed to unregister processor factory:", err));
+			resetOpenPanelClient();
+			window.openPanel = void 0;
+			setClient(void 0);
+		};
+	}, [enabled, processorManager]);
+	useEffect(() => {
+		if (!enabled || !client) return;
+		const prev = prevUserRef.current;
+		prevUserRef.current = user;
+		if (!prev && user) try {
+			client.identify({
+				profileId: user.did,
+				properties: buildTraits(user)
+			});
+		} catch (err) {
+			console.warn("[OpenPanel] Failed to identify user:", err);
+		}
+		else if (prev && !user) try {
+			client.clear();
+		} catch (err) {
+			console.warn("[OpenPanel] Failed to clear user:", err);
+		}
+	}, [
+		client,
+		user,
+		enabled
+	]);
+	return null;
+}
+//#endregion
 //#region src/components/document-editor-container.tsx
 function DocumentEditorContainer() {
 	const [selectedDocument] = useSelectedDocument();
@@ -217,7 +596,7 @@ function DocumentEditorContainer() {
 	}, []);
 	useCallback(() => {
 		setSelectedNode(parentFolder);
-	}, [parentFolder, setSelectedNode]);
+	}, [parentFolder]);
 	return /* @__PURE__ */ jsx("div", {
 		id: "document-editor-container",
 		className: "flex-1",
@@ -269,7 +648,7 @@ function DetailedFallback({ error, resetErrorBoundary }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "z-10 mx-auto flex max-w-[80%] flex-1 items-center justify-center p-6",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full max-w-lg rounded-lg border border-gray-500 bg-white p-6 shadow-sm",
+			className: "w-full max-w-lg rounded-lg border border-gray-500 bg-gray-50 p-6 shadow-sm dark:border-slate-400 dark:bg-slate-800",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "mb-3 flex items-center gap-2",
@@ -282,16 +661,16 @@ function DetailedFallback({ error, resetErrorBoundary }) {
 					})]
 				}),
 				/* @__PURE__ */ jsx("p", {
-					className: "mb-4 text-sm text-gray-700",
+					className: "mb-4 text-sm text-gray-700 dark:text-slate-200",
 					children: errorMessage
 				}),
 				errorDetails !== "{}" && /* @__PURE__ */ jsxs("details", {
 					className: "group",
 					children: [/* @__PURE__ */ jsx("summary", {
-						className: "cursor-pointer text-sm font-medium text-gray-700 underline select-none hover:text-gray-700",
+						className: "cursor-pointer text-sm font-medium text-gray-700 underline select-none hover:text-gray-700 dark:text-slate-200 dark:hover:text-slate-200",
 						children: "Show details"
 					}), /* @__PURE__ */ jsx("pre", {
-						className: "mt-2 max-h-48 overflow-auto rounded-sm bg-gray-100 p-3 text-xs",
+						className: "mt-2 max-h-48 overflow-auto rounded-sm bg-gray-100 p-3 text-xs dark:bg-slate-700",
 						children: errorDetails
 					})]
 				}),
@@ -385,10 +764,11 @@ function ErrorBoundary$1(props) {
 //#endregion
 //#region src/components/app-container.tsx
 function AppContainer() {
-	const [selectedDrive] = useSelectedDrive();
+	const [selectedDrive] = useSelectedDriveSafe();
 	const selectedDocumentId = useSelectedDocumentId();
-	const app = useAppModuleById(selectedDrive.header.meta?.preferredEditor);
+	const app = useAppModuleById(selectedDrive?.header.meta?.preferredEditor);
 	const defaultApp = useDefaultAppModule();
+	if (!selectedDrive) return /* @__PURE__ */ jsx(EditorLoader, {});
 	const AppComponent = app?.Component ?? defaultApp?.Component ?? GenericDriveExplorer.Component;
 	if (!AppComponent) throw new Error("No app component found");
 	return /* @__PURE__ */ jsx(ErrorBoundary$1, {
@@ -719,12 +1099,12 @@ const MigrationOverlay = () => {
 	return /* @__PURE__ */ jsx("div", {
 		className: "absolute inset-0 z-20 flex items-center justify-center",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "rounded-lg bg-white/90 px-6 py-4 text-sm text-gray-900 shadow-lg",
+			className: "rounded-lg bg-white/90 px-6 py-4 text-sm text-gray-900 shadow-lg dark:bg-slate-900/90 dark:text-slate-50",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "font-medium",
 				children: "Upgrading local database…"
 			}), /* @__PURE__ */ jsx("div", {
-				className: "text-gray-600",
+				className: "text-gray-700 dark:text-slate-200",
 				children: PHASE_LABEL[status.phase]
 			})]
 		})
@@ -733,6 +1113,7 @@ const MigrationOverlay = () => {
 const Loader = ({ delay = LOADER_DELAY }) => {
 	const isSSR = typeof window === "undefined";
 	const showInitialLoader = typeof document !== "undefined" && document.body.getAttribute("data-show-loader") === "true";
+	if (!isSSR) initTheme();
 	const [showLoading, setShowLoading] = useState(!delay || showInitialLoader);
 	useEffect(() => {
 		const id = setTimeout(() => {
@@ -744,7 +1125,7 @@ const Loader = ({ delay = LOADER_DELAY }) => {
 		className: `skeleton-loader absolute inset-0 z-10 flex items-center justify-center ${showLoading ? "" : "hidden"}`,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "animate-pulse overflow-hidden rounded-full shadow-lg",
-			children: /* @__PURE__ */ jsx(AnimatedLoader, {})
+			children: /* @__PURE__ */ jsx(LogoAnimation, {})
 		}), isSSR ? /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `setTimeout(() => {
                         document.querySelector('.skeleton-loader')?.classList.remove('hidden');
                         document.body.setAttribute('data-show-loader', 'true');
@@ -755,9 +1136,9 @@ const AppSkeleton = (props) => {
 	const isSSR = typeof window === "undefined";
 	const isHomeScreen = !isSSR && window.location.pathname === getBasePath();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-screen overflow-hidden",
+		className: "flex h-screen overflow-hidden bg-gray-50 dark:bg-slate-700",
 		children: [
-			/* @__PURE__ */ jsx(ConnectSidebar, {
+			!(!isSSR && getIsEmbedded()) && /* @__PURE__ */ jsx(ConnectSidebar, {
 				className: "animate-pulse",
 				onLogin: void 0,
 				onDisconnect: void 0,
@@ -820,7 +1201,7 @@ const MigrationBanner = () => {
 	return /* @__PURE__ */ jsx("div", {
 		className: "absolute inset-x-0 top-0 z-30 flex justify-center p-3",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex max-w-3xl items-center gap-3 rounded-lg border border-yellow-500 bg-yellow-400 px-4 py-3 text-sm text-gray-900 shadow-lg",
+			className: "flex max-w-3xl items-center gap-3 rounded-lg border border-yellow-500 bg-yellow-400 px-4 py-3 text-sm text-gray-900 shadow-lg dark:border-yellow-400 dark:bg-yellow-500 dark:text-slate-50",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex-1",
@@ -834,7 +1215,7 @@ const MigrationBanner = () => {
 							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
-							className: "text-gray-800",
+							className: "text-gray-900 dark:text-slate-100",
 							children: [
 								"Migrate to Postgres ",
 								17,
@@ -842,7 +1223,7 @@ const MigrationBanner = () => {
 							]
 						}),
 						error && /* @__PURE__ */ jsxs("div", {
-							className: "mt-2 font-medium text-red-900",
+							className: "mt-2 font-medium text-red-900 dark:text-red-400",
 							children: ["Migration failed: ", error]
 						})
 					]
@@ -851,14 +1232,14 @@ const MigrationBanner = () => {
 					type: "button",
 					disabled: migrating,
 					onClick: handleMigrate,
-					className: "rounded-sm bg-gray-900 px-3 py-1 text-sm font-medium text-white hover:bg-gray-800 disabled:opacity-50",
+					className: "rounded-sm bg-gray-900 px-3 py-1 text-sm font-medium text-white hover:bg-gray-800 disabled:opacity-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100",
 					children: migrating ? "Migrating…" : "Migrate now"
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					disabled: migrating,
 					onClick: dismiss,
-					className: "rounded-sm border border-gray-900 bg-transparent px-3 py-1 text-sm font-medium text-gray-900 hover:bg-gray-900/10 disabled:opacity-50",
+					className: "rounded-sm border border-gray-900 bg-transparent px-3 py-1 text-sm font-medium text-gray-900 hover:bg-gray-900/10 disabled:opacity-50 dark:border-slate-50 dark:text-slate-50",
 					children: "Dismiss"
 				})
 			]
@@ -867,17 +1248,17 @@ const MigrationBanner = () => {
 };
 //#endregion
 //#region src/components/modal/modals-container.tsx
-const AddDriveModal$1 = lazy(() => import("./AddDriveModal-ZK9-BWMB.js").then((m) => ({ default: m.AddDriveModal })));
-const ClearStorageModal = lazy(() => import("./ClearStorageModal-BLr3sRfl.js").then((m) => ({ default: m.ClearStorageModal })));
-const CookiesPolicyModal = lazy(() => import("./CookiesPolicyModal-DiXQV82b.js").then((m) => ({ default: m.CookiesPolicyModal })));
-const CreateDocumentModal$1 = lazy(() => import("./CreateDocumentModal-BhJh4nWt.js").then((m) => ({ default: m.CreateDocumentModal })));
-const DebugSettingsModal = lazy(() => import("./DebugSettingsModal-DHORxOiI.js").then((m) => ({ default: m.DebugSettingsModal })));
-const DeleteDriveModal = lazy(() => import("./DeleteDriveModal-CbuIdjKY.js").then((m) => ({ default: m.DeleteDriveModal })));
-const DeleteItemModal = lazy(() => import("./DeleteItemModal-9ErYlauT.js").then((m) => ({ default: m.DeleteItemModal })));
+const AddDriveModal$1 = lazy(() => import("./AddDriveModal-Cg2qcYp6.js").then((m) => ({ default: m.AddDriveModal })));
+const ClearStorageModal = lazy(() => import("./ClearStorageModal-D2K3LkHV.js").then((m) => ({ default: m.ClearStorageModal })));
+const CookiesPolicyModal = lazy(() => import("./CookiesPolicyModal-4QzcllDR.js").then((m) => ({ default: m.CookiesPolicyModal })));
+const CreateDocumentModal$1 = lazy(() => import("./CreateDocumentModal-7vgZ8nbM.js").then((m) => ({ default: m.CreateDocumentModal })));
+const DebugSettingsModal = lazy(() => import("./DebugSettingsModal-B1FRL4rp.js").then((m) => ({ default: m.DebugSettingsModal })));
+const DeleteDriveModal = lazy(() => import("./DeleteDriveModal-ABue_rOY.js").then((m) => ({ default: m.DeleteDriveModal })));
+const DeleteItemModal = lazy(() => import("./DeleteItemModal-B6aHnYPD.js").then((m) => ({ default: m.DeleteItemModal })));
 const DisclaimerModal = lazy(() => import("./DisclaimerModal-CfDeiBz8.js").then((m) => ({ default: m.DisclaimerModal })));
-const DriveSettingsModal$1 = lazy(() => import("./DriveSettingsModal-DEk05PS7.js").then((m) => ({ default: m.DriveSettingsModal })));
-const DownloadDocumentWithErrorsModal = lazy(() => import("./DownloadDocumentWithErrorsModal-KZGWQ4J7.js").then((m) => ({ default: m.DownloadDocumentWithErrorsModal })));
-const SettingsModal$1 = lazy(() => import("./SettingsModal-CwIcZXAy.js").then((m) => ({ default: m.SettingsModal })));
+const DriveSettingsModal$1 = lazy(() => import("./DriveSettingsModal-CNtCO4-y.js").then((m) => ({ default: m.DriveSettingsModal })));
+const DownloadDocumentWithErrorsModal = lazy(() => import("./DownloadDocumentWithErrorsModal-CaAPGg04.js").then((m) => ({ default: m.DownloadDocumentWithErrorsModal })));
+const SettingsModal$1 = lazy(() => import("./SettingsModal-5dMD1lq9.js").then((m) => ({ default: m.SettingsModal })));
 const UpgradeDriveModal = lazy(() => import("./UpgradeDriveModal-BwI5E5k3.js").then((m) => ({ default: m.UpgradeDriveModal })));
 const modalComponents = {
 	addDrive: AddDriveModal$1,
@@ -890,13 +1271,13 @@ const modalComponents = {
 	disclaimer: DisclaimerModal,
 	driveSettings: DriveSettingsModal$1,
 	downloadDocumentWithErrors: DownloadDocumentWithErrorsModal,
-	inspector: lazy(() => import("./InspectorModal-DrBnrYZl.js").then((m) => ({ default: m.InspectorModal }))),
+	inspector: lazy(() => import("./InspectorModal-ywEL5GKA.js").then((m) => ({ default: m.InspectorModal }))),
 	settings: SettingsModal$1,
 	upgradeDrive: UpgradeDriveModal,
 	missingPackage: lazy(() => import("./MissingPackageModal-CUdcDjSO.js").then((m) => ({ default: m.ConnectMissingPackageModal })))
 };
-const ModalsContainer = lazy(async () => {
-	return { default: () => {
+const ModalsContainer = lazy(() => {
+	return Promise.resolve({ default: () => {
 		const phModal = usePHModal();
 		if (!phModal?.type) return null;
 		const ModalComponent = modalComponents[phModal.type];
@@ -908,12 +1289,12 @@ const ModalsContainer = lazy(async () => {
 				children: /* @__PURE__ */ jsx(ModalComponent, {})
 			})
 		}) : null;
-	} };
+	} });
 });
 //#endregion
 //#region src/components/app-loader.tsx
 const AppLoader = (props) => {
-	const Load = lazy(() => import("./load-DOIDDXvY.js").then((m) => m.loadComponent(props.localPackage)));
+	const Load = lazy(() => import("./load-D-7n7rPU.js").then((m) => m.loadComponent(props.localPackage)));
 	return /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsxs(ErrorBoundary$1, {
 		fallbackRender: (props) => /* @__PURE__ */ jsx(AppSkeleton, { children: /* @__PURE__ */ jsx(DetailedFallback, { ...props }) }),
 		resetKeys: [props.localPackage],
@@ -962,11 +1343,11 @@ function MissingModelBanner() {
 	const [open, setOpen] = useState(false);
 	if (failed.length === 0) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between gap-3 bg-amber-100 px-4 py-2 text-sm text-amber-900",
+		className: "flex items-center justify-between gap-3 bg-amber-100 px-4 py-2 text-sm text-amber-900 dark:bg-amber-800 dark:text-amber-100",
 		children: [/* @__PURE__ */ jsx("span", { children: failed.length === 1 ? "1 document type couldn't load (missing model)." : `${failed.length} document types couldn't load (missing models).` }), /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setOpen(true),
-			className: "rounded-md border border-amber-300 bg-white px-3 py-1 text-amber-900 hover:bg-amber-50",
+			className: "rounded-md border border-amber-300 bg-gray-50 px-3 py-1 text-amber-900 hover:bg-amber-50 dark:border-amber-600 dark:bg-slate-800 dark:text-amber-100 dark:hover:bg-amber-900",
 			children: "View"
 		})]
 	}), /* @__PURE__ */ jsx(MissingModelDetailsModal, {
@@ -999,18 +1380,18 @@ function MissingModelDetailsModal(props) {
 		},
 		contentProps: { className: "rounded-3xl" },
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-[520px] max-w-[90vw] bg-white p-6",
+			className: "w-[520px] max-w-[90vw] bg-gray-50 p-6 dark:bg-slate-800",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "border-b border-slate-100 pb-2 text-2xl font-bold text-gray-800",
+					className: "border-b border-gray-100 pb-2 text-2xl font-bold text-gray-900 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
 					children: "Missing document models"
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "my-4 text-sm text-gray-600",
+					className: "my-4 text-sm text-gray-700 dark:text-slate-200",
 					children: "The following document types couldn't be loaded. Documents using them won't display until the underlying package is installed."
 				}),
 				failed.length === 0 ? /* @__PURE__ */ jsx("div", {
-					className: "rounded-xl bg-slate-50 p-4 text-sm text-gray-600",
+					className: "rounded-xl bg-gray-50 p-4 text-sm text-gray-700 dark:bg-slate-800 dark:text-slate-200",
 					children: "No outstanding failures."
 				}) : /* @__PURE__ */ jsx("div", {
 					className: "flex max-h-[60vh] flex-col gap-3 overflow-y-auto",
@@ -1018,18 +1399,18 @@ function MissingModelDetailsModal(props) {
 						const isRetrying = retrying.has(entry.documentType);
 						const retryDisabled = !canRetry(entry.reason) || isRetrying;
 						return /* @__PURE__ */ jsxs("div", {
-							className: "rounded-xl bg-slate-50 p-4",
+							className: "rounded-xl bg-gray-50 p-4 dark:bg-slate-800",
 							children: [
 								/* @__PURE__ */ jsx("div", {
-									className: "mb-1 font-mono text-sm font-semibold text-gray-800",
+									className: "mb-1 font-mono text-sm font-semibold text-gray-900 dark:text-slate-100",
 									children: entry.documentType
 								}),
 								/* @__PURE__ */ jsx("div", {
-									className: "mb-2 text-xs text-gray-600",
+									className: "mb-2 text-xs text-gray-700 dark:text-slate-200",
 									children: reasonLabels[entry.reason]
 								}),
 								entry.packageNames.length > 0 ? /* @__PURE__ */ jsxs("div", {
-									className: "mb-2 text-xs text-gray-500",
+									className: "mb-2 text-xs text-gray-500 dark:text-slate-400",
 									children: [
 										"Package",
 										entry.packageNames.length > 1 ? "s" : "",
@@ -1039,7 +1420,7 @@ function MissingModelDetailsModal(props) {
 									]
 								}) : null,
 								entry.error ? /* @__PURE__ */ jsx("div", {
-									className: "mb-2 font-mono text-xs wrap-break-word text-red-700",
+									className: "mb-2 font-mono text-xs wrap-break-word text-red-700 dark:text-red-100",
 									children: entry.error.message
 								}) : null,
 								/* @__PURE__ */ jsx("div", {
@@ -1049,7 +1430,7 @@ function MissingModelDetailsModal(props) {
 										onClick: () => void handleRetry(entry.documentType),
 										disabled: retryDisabled,
 										title: canRetry(entry.reason) ? void 0 : "No registry is configured; nothing to retry against.",
-										className: twMerge("min-h-[32px] rounded-xl px-3 py-1 text-sm font-semibold text-white transition-all hover:scale-105", retryDisabled ? "cursor-not-allowed bg-gray-300 hover:scale-100" : "bg-gray-800 active:opacity-75"),
+										className: twMerge("min-h-[32px] rounded-xl px-3 py-1 text-sm font-semibold text-white transition-all hover:scale-105 dark:text-slate-900", retryDisabled ? "cursor-not-allowed bg-gray-300 hover:scale-100 dark:bg-slate-600 dark:text-slate-100" : "bg-gray-800 active:opacity-75 dark:bg-slate-100"),
 										children: isRetrying ? "Retrying..." : "Try install again"
 									})
 								})
@@ -1062,7 +1443,7 @@ function MissingModelDetailsModal(props) {
 					children: /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: onClose,
-						className: "min-h-[36px] rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-50",
+						className: "min-h-[36px] rounded-xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-800",
 						children: "Close"
 					})
 				})
@@ -1088,10 +1469,11 @@ function PackageInstallPrompt() {
 //#endregion
 //#region src/components/app.tsx
 const App = () => {
+	useTheme();
 	useEffect(() => {
 		const handlePreloadError = (event) => {
 			const payload = event.payload;
-			const failedUrl = (payload instanceof Error ? payload.message : String(payload ?? "")).match(/https?:\/\/[^\s"']+/)?.[0];
+			const failedUrl = (payload instanceof Error ? payload.message : typeof payload === "string" ? payload : "").match(/https?:\/\/[^\s"']+/)?.[0];
 			if (failedUrl && !failedUrl.startsWith(window.location.origin)) {
 				console.debug(`[Connect] Skipping reload — vite:preloadError for off-origin URL: ${failedUrl}`);
 				return;
@@ -1113,7 +1495,8 @@ const App = () => {
 		/* @__PURE__ */ jsx(MissingModelBanner, {}),
 		/* @__PURE__ */ jsx(Router, {}),
 		/* @__PURE__ */ jsx(PackageInstallPrompt, {}),
-		/* @__PURE__ */ jsx(Analytics, {})
+		/* @__PURE__ */ jsx(Analytics, {}),
+		/* @__PURE__ */ jsx(OpenPanel, {})
 	] });
 };
 //#endregion
@@ -1151,8 +1534,8 @@ const CookieBanner$1 = () => {
 	if (!showBanner) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "absolute inset-0 z-10000 backdrop-blur-sm",
-		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black opacity-15" }), /* @__PURE__ */ jsx("div", {
-			className: "absolute inset-x-0 bottom-0 flex justify-center bg-white px-10 pt-10 pb-16 shadow-lg",
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gray-900 opacity-15 dark:bg-slate-50" }), /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-x-0 bottom-0 flex justify-center bg-gray-50 px-10 pt-10 pb-16 shadow-lg dark:bg-slate-800",
 			children: /* @__PURE__ */ jsx(CookieBanner, {
 				className: "max-w-[1024px]",
 				cookies: cookiesInput,
@@ -1161,12 +1544,12 @@ const CookieBanner$1 = () => {
 				submitLabel: t("cookieBanner.accept"),
 				rejectLabel: t("cookieBanner.reject"),
 				children: /* @__PURE__ */ jsx("p", {
-					className: "font-semibold text-gray-500",
+					className: "font-semibold text-gray-500 dark:text-slate-400",
 					children: /* @__PURE__ */ jsx(Trans, {
 						i18nKey: "cookieBanner.message",
 						components: { a: /* @__PURE__ */ jsx("a", {
 							onClick: () => showPHModal({ type: "cookiesPolicy" }),
-							className: "cursor-pointer text-gray-900 hover:underline"
+							className: "cursor-pointer text-gray-900 hover:underline dark:text-slate-50"
 						}, "cookieBanner.message-link") }
 					}, "cookieBanner.message")
 				})
@@ -1345,14 +1728,14 @@ const DocumentEditor = (props) => {
 //#region src/components/root.tsx
 function Root() {
 	return /* @__PURE__ */ jsx("div", {
-		className: "h-screen",
+		className: "h-screen bg-gray-50 dark:bg-slate-800",
 		children: /* @__PURE__ */ jsx("div", {
 			className: `flex h-screen items-stretch overflow-auto`,
 			role: "presentation",
 			tabIndex: 0,
 			children: /* @__PURE__ */ jsxs(Suspense, {
 				name: "Root",
-				children: [/* @__PURE__ */ jsx(Sidebar, {}), /* @__PURE__ */ jsx("div", {
+				children: [!useIsEmbedded() && /* @__PURE__ */ jsx(Sidebar, {}), /* @__PURE__ */ jsx("div", {
 					className: "relative flex-1 overflow-auto",
 					children: /* @__PURE__ */ jsx(Outlet, {})
 				})]
@@ -1452,7 +1835,9 @@ function Sidebar() {
 		onClickSettings,
 		address: user?.address,
 		onLogin: openRenown,
-		onDisconnect: logout,
+		onDisconnect: () => {
+			logout();
+		},
 		ensName: ensName || ensInfo.data?.ens,
 		avatarUrl: avatarUrl || ensInfo.data?.avatar_small || ensInfo.data?.avatar_url || void 0,
 		etherscanUrl,
@@ -1474,5 +1859,5 @@ function Sidebar() {
 //#endregion
 export { AppLoader as t };
 
-//# sourceMappingURL=sidebar-BLHOoVIg.js.map
-//# debugId=ebf04d37-dff0-53fa-872d-097855e3824e
+//# sourceMappingURL=sidebar-CO3JjI3G.js.map
+//# debugId=239c52db-b664-5e9c-ac37-c27d54ef59b8