@superblocksteam/library 2.0.76 → 2.0.77-next.1

package/dist/lib/index.js

@@ -1,5 +1,5 @@
 import { n as consoleLogAttributes, t as early_console_buffer_default } from "../early-console-buffer-D4wVuyBf.js";
-import { A as useSuperblocksProfiles, B as PropsCategory, C as addNewPromise, D as getAppMode, E as SuperblocksContextProvider, F as iframeMessageHandler, H as createPropertiesPanelDefinition, I as isEmbeddedBySuperblocksFirstParty, L as isEditMode, M as sendNotification, N as colors$1, O as useSuperblocksContext, P as editorBridge, R as createManagedPropsList, S as api_hmr_tracker_default, T as resolveById, U as getEditStore, V as Section, _ as root_store_default, a as FixWithClarkButton, b as createIframeSpan, c as ErrorContent, d as ErrorMessage, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, j as useSuperblocksUser, k as useSuperblocksGroups, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer, v as startEditorSync, w as rejectById, x as getContextFromTraceHeaders, y as generateId, z as Prop } from "../jsx-wrapper-DpoYDtf8.js";
+import { A as useSuperblocksProfiles, B as PropsCategory, C as addNewPromise, D as getAppMode, E as SuperblocksContextProvider, F as iframeMessageHandler, H as createPropertiesPanelDefinition, I as isEmbeddedBySuperblocksFirstParty, L as isEditMode, M as sendNotification, N as colors$1, O as useSuperblocksContext, P as editorBridge, R as createManagedPropsList, S as api_hmr_tracker_default, T as resolveById, U as getEditStore, V as Section, _ as root_store_default, a as FixWithClarkButton, b as createIframeSpan, c as ErrorContent, d as ErrorMessage, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, j as useSuperblocksUser, k as useSuperblocksGroups, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer, v as startEditorSync, w as rejectById, x as getContextFromTraceHeaders, y as generateId, z as Prop } from "../jsx-wrapper-B2IuiyUY.js";
 import { n as initTracerProviderWithOrigin } from "../utils-Clb3lSiX.js";
 import { action, autorun, computed, makeAutoObservable, makeObservable, observable, reaction, when } from "mobx";
 import { Dim, NATIVE_COMPONENT_TYPES, NO_SELECT_ATTRIBUTE, Property, Property as Property$1, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, generateSourceId, getBindingIdentifier } from "@superblocksteam/library-shared";
@@ -862,11 +862,13 @@ function useApiStateful(name) {
 		run: useCallback(async (inputs) => {
 			const apiPath = getApiPath(name);
 			const editMode = isEditMode();
-			return (await root_store_default.apis.runApiByPath({
+			const result = await root_store_default.apis.runApiByPath({
 				path: apiPath,
 				inputs: inputs ?? {},
 				...editMode ? { injectedCallerId: sourceId } : {}
-			})).data;
+			});
+			if (result?.error != null) console.error(`[useApi] [${name}]`, result.error);
+			return result.data;
 		}, [name, sourceId]),
 		cancel: useCallback(async () => {
 			await root_store_default.apis.cancelApi(name);
@@ -874,6 +876,130 @@ function useApiStateful(name) {
 	};
 }
 
+//#endregion
+//#region src/lib/internal-details/embed-store.ts
+/**
+* Store for managing embed properties and events.
+* Used when the library is embedded in an external application (third-party embedding).
+*
+* Properties can be set by the parent window via postMessage, and events can be
+* emitted back to the parent window.
+*/
+var EmbedStore = class {
+	properties = {};
+	constructor() {
+		makeAutoObservable(this);
+	}
+	/**
+	* Update the embed properties. Called when the parent window sends updated properties.
+	*/
+	setProperties(properties) {
+		this.properties = properties;
+	}
+	/**
+	* Emit an event to the parent window.
+	* The parent can listen for these events using window.addEventListener("message", ...).
+	*/
+	emitEvent(eventName, payload = {}) {
+		if (typeof window === "undefined" || window.parent === window) return;
+		window.parent.postMessage({
+			type: "embed-emit-event",
+			payload: {
+				eventName,
+				payload
+			}
+		}, "*");
+	}
+};
+const embedStore = new EmbedStore();
+
+//#endregion
+//#region src/lib/internal-details/use-embed-message-listeners.ts
+/**
+* Hook that sets up common message listeners for embedded apps.
+* Used by both edit-mode and deployed-mode EmbedWrapper components.
+*/
+function useEmbedMessageListeners(navigate, superblocksContext) {
+	useEffect(() => {
+		const globalSyncListener = (event) => {
+			const { global } = event.data.payload;
+			superblocksContext.updateContext(global);
+		};
+		iframeMessageHandler.addEventListener("sb-global-sync", globalSyncListener);
+		const navigateToListener = async (event) => {
+			const { route, routeParams, queryParams } = event.data.payload;
+			const eventSearch = new URLSearchParams(queryParams);
+			const nextSearch = new URLSearchParams(window.location.search);
+			for (const [key, value] of eventSearch.entries()) nextSearch.set(key, value);
+			await navigate({
+				pathname: generatePath(route, routeParams),
+				search: nextSearch.toString()
+			});
+		};
+		iframeMessageHandler.addEventListener("route-change", navigateToListener);
+		const embedPropertyChangeListener = (event) => {
+			const { properties } = event.data.payload;
+			embedStore.setProperties(properties);
+		};
+		iframeMessageHandler.addEventListener("embed-property-change", embedPropertyChangeListener);
+		const embedTriggerEventListener = (event) => {
+			const { eventName, payload } = event.data.payload;
+			window.dispatchEvent(new CustomEvent(`superblocks:${eventName}`, { detail: payload }));
+		};
+		iframeMessageHandler.addEventListener("embed-trigger-event", embedTriggerEventListener);
+		return () => {
+			iframeMessageHandler.removeEventListener("sb-global-sync", globalSyncListener);
+			iframeMessageHandler.removeEventListener("route-change", navigateToListener);
+			iframeMessageHandler.removeEventListener("embed-property-change", embedPropertyChangeListener);
+			iframeMessageHandler.removeEventListener("embed-trigger-event", embedTriggerEventListener);
+		};
+	}, [navigate, superblocksContext]);
+}
+
+//#endregion
+//#region src/lib/internal-details/utils/link-modifiers-interceptor.ts
+/**
+* Intercepts cmd/ctrl/shift+click and middle-click on local links inside an iframe
+* to open them in a new tab using the parent URL.
+*
+* When `isEmbedMode` is true, modified clicks are converted into normal in-iframe
+* navigation (no new tab).
+*/
+function linkModifierInterceptor({ isEmbedMode = false, isEditMode: isEditMode$1 = false } = {}) {
+	if (typeof window === "undefined") return () => {};
+	if (window === window.parent) return () => {};
+	const handleClick = (ev) => {
+		const isMiddleClick = ev.button === 1;
+		const isModifierClick = ev.button === 0 && (ev.metaKey || ev.ctrlKey || ev.shiftKey);
+		if (isEditMode$1) {
+			if (!(ev.button === 0 && ev.shiftKey)) return;
+		} else if (!isMiddleClick && !isModifierClick) return;
+		if (ev.defaultPrevented) return;
+		const target = ev.target;
+		if (!(target instanceof Element)) return;
+		const anchor = target.closest?.("a[href]");
+		if (!(anchor instanceof HTMLAnchorElement)) return;
+		const href = anchor.getAttribute("href");
+		if (!href) return;
+		if (href.startsWith("#")) return;
+		if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//")) return;
+		const appId = root_store_default.applicationId;
+		if (!appId) return;
+		ev.preventDefault();
+		ev.stopPropagation();
+		const resolvedUrl = new URL(href, window.location.href);
+		const targetPath = resolvedUrl.pathname + resolvedUrl.search + resolvedUrl.hash;
+		if (isEmbedMode) {
+			anchor.click();
+			return;
+		}
+		const parentUrl = `/code-mode/applications/${isEditMode$1 ? "edit/" : ""}${appId}${targetPath}`;
+		editorBridge.navigateTo(parentUrl, true);
+	};
+	window.addEventListener("click", handleClick, true);
+	return () => window.removeEventListener("click", handleClick, true);
+}
+
 //#endregion
 //#region src/edit-mode/build-error-notification.tsx
 const ModalOverlay = styled(Dialog.Overlay)`
@@ -2690,6 +2816,24 @@ const useObserverMemo = (fn, deps) => {
 		return computed(fn);
 	}, deps).get();
 };
+/**
+* Like useObserverMemo, but does not require the component to be wrapped in an observer.
+* It is recommended to use useObserverMemo instead.
+* @see useObserverMemo
+*
+* Note: This implementation uses MobX reactions to track both observable changes and
+* dependency changes.
+*/
+const useStandaloneObserverMemo = (fn, deps) => {
+	const fnRef = useRef(fn);
+	fnRef.current = fn;
+	const [result, setResult] = useState(fnRef.current);
+	useEffect(() => reaction(() => fnRef.current(), setResult, {
+		fireImmediately: true,
+		name: "useStandaloneObserverMemo"
+	}), deps);
+	return result;
+};
 
 //#endregion
 //#region src/lib/user-facing/layers.ts
@@ -3157,6 +3301,42 @@ function EditorHotkeys({ children }) {
 		],
 		enableOnContentEditable: true
 	});
+	useEditorHotkeys("command+1, command+2, command+3, command+4, command+5, command+6, command+7, command+8, command+9", (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		editorBridge.forwardKeypress(`command+${e.key}`, {
+			code: e.code,
+			key: e.key,
+			altKey: e.altKey,
+			ctrlKey: e.ctrlKey,
+			shiftKey: e.shiftKey
+		});
+	}, {
+		enableOnTags: [
+			"TEXTAREA",
+			"INPUT",
+			"SELECT"
+		],
+		enableOnContentEditable: true
+	});
+	useEditorHotkeys("command+enter, ctrl+enter", (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		editorBridge.forwardKeypress("command+enter", {
+			code: e.code,
+			key: e.key,
+			altKey: e.altKey,
+			ctrlKey: e.ctrlKey,
+			shiftKey: e.shiftKey
+		});
+	}, {
+		enableOnTags: [
+			"TEXTAREA",
+			"INPUT",
+			"SELECT"
+		],
+		enableOnContentEditable: true
+	});
 	return /* @__PURE__ */ jsx(Fragment, { children });
 }
 
@@ -3285,6 +3465,9 @@ const IframeConnected = observer(function IframeConnected$1(props) {
 		console.debug("[internal] [iframe-wrappers] sending ready");
 		editorBridge.sendReady();
 	}, []);
+	useEffect(() => {
+		return linkModifierInterceptor({ isEditMode: true });
+	}, []);
 	useEffect(() => {
 		const handleDragStart = () => {};
 		iframeMessageHandler.addEventListener("dragstart", handleDragStart);
@@ -3598,28 +3781,7 @@ const EmbedWrapper = (props) => {
 			} catch {}
 		};
 	}, []);
-	useEffect(() => {
-		const globalSyncListener = (event) => {
-			const { global } = event.data.payload;
-			superblocksContext.updateContext(global);
-		};
-		iframeMessageHandler.addEventListener("sb-global-sync", globalSyncListener);
-		const navigateToListener = async (event) => {
-			const { route, routeParams, queryParams } = event.data.payload;
-			const eventSearch = new URLSearchParams(queryParams);
-			const nextSearch = new URLSearchParams(window.location.search);
-			for (const [key, value] of eventSearch.entries()) nextSearch.set(key, value);
-			await navigate({
-				pathname: generatePath(route, routeParams),
-				search: nextSearch.toString()
-			});
-		};
-		iframeMessageHandler.addEventListener("route-change", navigateToListener);
-		return () => {
-			iframeMessageHandler.removeEventListener("sb-global-sync", globalSyncListener);
-			iframeMessageHandler.removeEventListener("route-change", navigateToListener);
-		};
-	}, [navigate, superblocksContext]);
+	useEmbedMessageListeners(navigate, superblocksContext);
 	useEffect(() => {
 		const messageListener = (event) => {
 			if (event.data?.type === "parent-action-batch" && event.data.payload) event.data.payload.forEach((action$1) => {
@@ -4228,28 +4390,11 @@ const EmbedWrapper$1 = (props) => {
 			}
 		};
 		iframeMessageHandler.addEventListener("sb-bootstrap-response", bootstrapResponseListener);
-		const globalSyncListener = (event) => {
-			const { global } = event.data.payload;
-			superblocksContext.updateContext(global);
-		};
-		iframeMessageHandler.addEventListener("sb-global-sync", globalSyncListener);
-		const navigateToListener = async (event) => {
-			const { route, routeParams, queryParams } = event.data.payload;
-			const eventSearch = new URLSearchParams(queryParams);
-			const nextSearch = new URLSearchParams(window.location.search);
-			for (const [key, value] of eventSearch.entries()) nextSearch.set(key, value);
-			await navigate({
-				pathname: generatePath(route, routeParams),
-				search: nextSearch.toString()
-			});
-		};
-		iframeMessageHandler.addEventListener("route-change", navigateToListener);
 		return () => {
 			iframeMessageHandler.removeEventListener("sb-bootstrap-response", bootstrapResponseListener);
-			iframeMessageHandler.removeEventListener("sb-global-sync", globalSyncListener);
-			iframeMessageHandler.removeEventListener("route-change", navigateToListener);
 		};
-	}, [navigate, superblocksContext]);
+	}, []);
+	useEmbedMessageListeners(navigate, superblocksContext);
 	useEffect(() => {
 		const messageListener = (event) => {
 			if (event.data?.type === "parent-action-batch" && event.data.payload) event.data.payload.forEach((action$1) => {
@@ -4263,6 +4408,9 @@ const EmbedWrapper$1 = (props) => {
 		window.addEventListener("message", messageListener);
 		return () => window.removeEventListener("message", messageListener);
 	}, []);
+	useEffect(() => {
+		return linkModifierInterceptor({ isEmbedMode: new URLSearchParams(window.location.search).get("embed_mode") === "true" });
+	}, []);
 	if (!isLoaded && error) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: "There was an error logging in to Superblocks." }), /* @__PURE__ */ jsx("p", { children: error })] });
 	if (!root_store_default.apis.isInitialized() && !isLoaded) {
 		if (!isRetrievingToken.current && window.parent !== window.self) {
@@ -4355,36 +4503,65 @@ function useTrackRouteChange() {
 
 //#endregion
 //#region src/lib/user-facing/sb-provider-tracker.ts
-let sbProviderRendered = false;
+const hasSbProviderRenderedEditMode = () => globalThis.__SB_PROVIDER_RENDERED_EDIT_MODE__ === true;
 const reportSbProviderRenderedEditMode = () => {
-	sbProviderRendered = true;
+	globalThis.__SB_PROVIDER_RENDERED_EDIT_MODE__ = true;
 };
 const ERROR_ID = "base-app-not-rendered";
-if (isEditMode()) setTimeout(() => {
-	if (!root_store_default.editStore) console.error("Edit store not initialized.");
-	if (sbProviderRendered) {
-		editorBridge.sendClearRuntimeError(ERROR_ID, true);
-		return;
-	}
-	const errorMessage = `AppProvider not rendered in time.
+if (isEditMode()) {
+	const hasSbProviderRootInDom = () => typeof document !== "undefined" && !!document.getElementById("sb-provider-root");
+	const hasRendered = () => hasSbProviderRenderedEditMode() || hasSbProviderRootInDom();
+	const startTracking = () => {
+		setTimeout(() => {
+			if (!root_store_default.editStore) console.error("Edit store not initialized.");
+			if (hasRendered()) {
+				editorBridge.sendClearRuntimeError(ERROR_ID, true);
+				return;
+			}
+			const errorMessage = `AppProvider not rendered in time.
 Please ensure that 'App' from @superblocksteam/library is always rendered.
 API executions and editor features will be unavailable.
 `;
-	console.error(errorMessage);
-	editorBridge.sendRuntimeError({
-		id: ERROR_ID,
-		error: errorMessage,
-		errorInfo: {}
-	}, true);
-	editorBridge.sendLoadError(errorMessage);
-	const intervalId = setInterval(() => {
-		if (sbProviderRendered) {
-			clearInterval(intervalId);
-			editorBridge.sendClearRuntimeError(ERROR_ID, true);
-			return;
+			console.error(errorMessage);
+			editorBridge.sendRuntimeError({
+				id: ERROR_ID,
+				error: errorMessage,
+				errorInfo: {}
+			}, true);
+			editorBridge.sendLoadError(errorMessage);
+			const intervalId = setInterval(() => {
+				if (hasRendered()) {
+					clearInterval(intervalId);
+					editorBridge.sendClearRuntimeError(ERROR_ID, true);
+					return;
+				}
+			}, 500);
+		}, 2e4);
+	};
+	if (hasRendered()) editorBridge.sendClearRuntimeError(ERROR_ID, true);
+	else {
+		let started = false;
+		let observer$1 = null;
+		const startOnce = () => {
+			if (started) return;
+			started = true;
+			observer$1?.disconnect();
+			observer$1 = null;
+			startTracking();
+		};
+		const rootEl = typeof document !== "undefined" ? document.getElementById("root") : null;
+		if (rootEl) if (rootEl.childNodes.length > 0) startOnce();
+		else {
+			observer$1 = new MutationObserver(() => {
+				if (hasRendered() || rootEl.childNodes.length > 0) startOnce();
+			});
+			observer$1.observe(rootEl, {
+				childList: true,
+				subtree: true
+			});
 		}
-	}, 1e3);
-}, 1e4);
+	}
+}
 
 //#endregion
 //#region src/lib/user-facing/styling/styles.ts
@@ -5521,11 +5698,171 @@ async function logoutIntegrations() {
 	if (logoutResult?.errors && logoutResult.errors.length > 0) console.error("Logout returned with errors", logoutResult.errors);
 }
 
+//#endregion
+//#region src/lib/user-facing/embed.ts
+/**
+* Emit a custom event to the external embedder.
+* This is used when the library is embedded in an iframe
+* to communicate events back to the parent application.
+*
+* @param eventName - The name of the event to emit
+* @param payload - Optional payload data to send with the event
+*
+* @example
+* ```ts
+* import { Superblocks } from "@superblocksteam/library";
+*
+* // Emit a simple event
+* Superblocks.emitEvent("formSubmitted");
+*
+* // Emit an event with payload
+* Superblocks.emitEvent("userSelected", { userId: "123", name: "John" });
+* ```
+*/
+function emitEvent(eventName, payload = {}) {
+	embedStore.emitEvent(eventName, payload);
+}
+/**
+* Get the current embed properties passed from the external embedder.
+*
+* @returns The current embed properties object
+*
+* @example
+* ```ts
+* import { Superblocks } from "@superblocksteam/library";
+*
+* const props = Superblocks.getEmbedProperties();
+* console.log(props.userId);
+* ```
+*/
+function getEmbedProperties() {
+	return embedStore.properties;
+}
+/**
+* The Superblocks object provides utilities for interacting with
+* the embedding context when the library is embedded in an iframe.
+*/
+const Superblocks = {
+	emitEvent,
+	getEmbedProperties
+};
+
+//#endregion
+//#region src/lib/hooks/use-embed-properties.ts
+/**
+* React hook for accessing embed properties passed from the external embedder.
+* Automatically re-renders when properties change.
+*
+* @returns The current embed properties object (reactive)
+*
+* @example
+* ```tsx
+* import { useEmbedProperties } from "@superblocksteam/library";
+*
+* function MyComponent() {
+*   const properties = useEmbedProperties();
+*
+*   // Access properties passed from the embedder
+*   const userId = properties.userId as string;
+*   const theme = properties.theme as "light" | "dark";
+*
+*   return <div>User: {userId}, Theme: {theme}</div>;
+* }
+* ```
+*/
+function useEmbedProperties() {
+	return useStandaloneObserverMemo(() => embedStore.properties, []);
+}
+
+//#endregion
+//#region src/lib/hooks/use-embed-event.ts
+/**
+* React hook for listening to events triggered by the external embedder.
+* The handler will be called whenever the embedder triggers the specified event.
+*
+* @param eventName - The name of the event to listen for
+* @param handler - Callback function invoked when the event is triggered
+*
+* @example
+* ```tsx
+* import { useEmbedEvent } from "@superblocksteam/library";
+*
+* function MyComponent() {
+*   useEmbedEvent("refreshData", (payload) => {
+*     console.log("Embedder requested refresh:", payload);
+*     // Refetch data, reset state, etc.
+*   });
+*
+*   useEmbedEvent("themeChange", (payload) => {
+*     const { theme } = payload as { theme: "light" | "dark" };
+*     setTheme(theme);
+*   });
+*
+*   return <div>Listening for events...</div>;
+* }
+* ```
+*/
+function useEmbedEvent(eventName, handler) {
+	const handlerRef = useRef(handler);
+	handlerRef.current = handler;
+	useEffect(() => {
+		const listener = (event) => {
+			const customEvent = event;
+			handlerRef.current(customEvent.detail ?? {});
+		};
+		window.addEventListener(`superblocks:${eventName}`, listener);
+		return () => {
+			window.removeEventListener(`superblocks:${eventName}`, listener);
+		};
+	}, [eventName]);
+}
+
+//#endregion
+//#region src/lib/hooks/use-emit-embed-event.ts
+/**
+* React hook that returns a function to emit events to the external embedder.
+* Use this to communicate actions or state changes back to the parent application.
+*
+* @returns A function to emit events to the embedder
+*
+* @example
+* ```tsx
+* import { useEmitEmbedEvent } from "@superblocksteam/library";
+*
+* function MyComponent() {
+*   const emitEvent = useEmitEmbedEvent();
+*
+*   const handleFormSubmit = (data: FormData) => {
+*     emitEvent("formSubmitted", {
+*       formId: "contact-form",
+*       timestamp: Date.now(),
+*       data,
+*     });
+*   };
+*
+*   const handleRowClick = (row: { id: string; name: string }) => {
+*     emitEvent("rowSelected", { rowId: row.id, rowName: row.name });
+*   };
+*
+*   return (
+*     <button onClick={() => emitEvent("buttonClicked", { action: "save" })}>
+*       Save
+*     </button>
+*   );
+* }
+* ```
+*/
+function useEmitEmbedEvent() {
+	return useCallback((eventName, payload = {}) => {
+		embedStore.emitEvent(eventName, payload);
+	}, []);
+}
+
 //#endregion
 //#region src/lib/index.ts
 early_console_buffer_default.getInstance().patchEarly();
 registerHtmlElements();
 
 //#endregion
-export { App, PageNotFound, Prop, Property, PropsCategory, RouteLoadError, Section, sb_provider_default as SuperblocksProvider, getAppMode, logoutIntegrations, registerComponent, tailwindStylesCategory, useApiStateful as useApi, useSuperblocksGroups, useSuperblocksProfiles, useSuperblocksUser };
+export { App, PageNotFound, Prop, Property, PropsCategory, RouteLoadError, Section, Superblocks, sb_provider_default as SuperblocksProvider, embedStore, getAppMode, logoutIntegrations, registerComponent, tailwindStylesCategory, useApiStateful as useApi, useEmbedEvent, useEmbedProperties, useEmitEmbedEvent, useSuperblocksGroups, useSuperblocksProfiles, useSuperblocksUser };
 //# sourceMappingURL=index.js.map