@superblocksteam/library 2.0.149 → 2.0.150-next.0

package/dist/jsx-wrapper-c5W52jgK.js

@@ -0,0 +1,638 @@
+import { E as isEditMode, b as colors, n as root_store_default, v as generateId, x as editorBridge } from "./root-store-CkTnQd84.js";
+import { reaction } from "mobx";
+import { NO_SELECT_ATTRIBUTE, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE } from "@superblocksteam/library-shared";
+import * as React$1 from "react";
+import React, { Component, useEffect, useMemo, useRef } from "react";
+import styled, { keyframes } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Observer } from "mobx-react-lite";
+import polyfill from "@oddbird/css-anchor-positioning/fn";
+//#region src/lib/user-facing/assets/images/clark.svg
+var _path$1, _path2, _path3, _path4, _path5, _path6, _path7, _defs;
+function _extends$1() {
+	return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends$1.apply(null, arguments);
+}
+var SvgClark = function SvgClark(props) {
+	return /* @__PURE__ */ React$1.createElement("svg", _extends$1({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 28,
+		height: 20,
+		fill: "none"
+	}, props), _path$1 || (_path$1 = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "url(#clark_svg__a)",
+		d: "M20.41 1.239a5.16 5.16 0 0 0-4.703 5.413l2.648-.232a2.227 2.227 0 1 1 2.886 2.49l.18 2.062.035.02c.575-.05 1.213-.454 1.57-.748 1.617-1.337 1.71-3.2 1.705-3.672 0-.063.047-.117.11-.123l.27-.024a.18.18 0 0 0 .167-.206c-.068-.444-.304-1.577-1.018-2.419-.064-.074-.019-.194.079-.203l.402-.035c.142-.012.218-.166.13-.28-.492-.64-1.994-2.26-4.46-2.043"
+	})), _path2 || (_path2 = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "#2A333D",
+		d: "M18.333 6.987a2.226 2.226 0 0 0 2.411 2.024l.555-.048c-.612-2.74-1.987-3.551-1.987-3.551.153-.386 1.044-.836 1.044-.836a2.226 2.226 0 0 0-2.023 2.411",
+		opacity: .12
+	})), _path3 || (_path3 = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "url(#clark_svg__b)",
+		d: "m6.65 12.564.045.492-.228-2.607A2.338 2.338 0 1 1 8.58 6.587l2.588-.226a5.16 5.16 0 0 0-5.371-3.584c-2.467.216-3.665 2.072-4.039 2.787-.066.127.035.266.177.253l.403-.035c.097-.008.162.102.113.186-.558.953-.593 2.11-.583 2.56a.18.18 0 0 0 .2.173l.27-.023a.12.12 0 0 1 .13.101c.078.467.492 2.285 2.317 3.32.402.228 1.291.515 1.866.465"
+	})), _path4 || (_path4 = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "#2A333D",
+		d: "M9.161 7.938a2.337 2.337 0 0 1-2.124 2.53l-.582.052c.133-2.944 1.406-4.032 1.406-4.032-.227-.371-1.231-.675-1.231-.675A2.337 2.337 0 0 1 9.16 7.938",
+		opacity: .12
+	})), _path5 || (_path5 = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M21.72 10.543c-.461-3.366-2.697-6.01-6.685-6.252-.109-.006-.163-.01-.202-.031a.2.2 0 0 1-.078-.084c-.02-.04-.02-.092-.02-.197v-.572a.192.192 0 0 0-.308-.153l-.938.708a.192.192 0 0 1-.309-.154v-.361a.192.192 0 0 0-.318-.145l-.807.717a9 9 0 0 1-.5.431 2 2 0 0 1-.305.2c-.119.069-.414.205-1.004.477-2.794 1.29-4.104 3.885-3.852 6.757.43 4.911 3.404 6.652 8.266 6.226 4.215-.368 7.758-2.469 7.06-7.567M11.64 10.2c.142.62-.16 1.221-.678 1.34-.518.12-1.053-.286-1.197-.907a1.3 1.3 0 0 1-.018-.521.384.384 0 1 0 .376-.667.8.8 0 0 1 .32-.153c.517-.12 1.053.287 1.196.908m7.042-.148c.51-.146.782-.761.606-1.374-.176-.612-.732-.99-1.242-.844a.83.83 0 0 0-.375.23.384.384 0 1 1-.284.713q-.01.211.052.431c.176.613.732.99 1.243.844m-5.448 3.596-.253-2.896a2.08 2.08 0 0 1 4.092-.685l.704 2.82a2.31 2.31 0 1 1-4.543.761",
+		clipRule: "evenodd"
+	})), _path6 || (_path6 = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "url(#clark_svg__c)",
+		d: "M13.88 14.096a2.3 2.3 0 0 0 1.847.492 2.3 2.3 0 0 0 1.585-1.066 1.79 1.79 0 0 1-3.431.574",
+		opacity: .5
+	})), _path7 || (_path7 = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "url(#clark_svg__d)",
+		d: "M13.191 13.144a2.312 2.312 0 0 0 4.465-.748l.123.491a2.31 2.31 0 1 1-4.544.761z",
+		opacity: .5
+	})), _defs || (_defs = /* @__PURE__ */ React$1.createElement("defs", null, /* @__PURE__ */ React$1.createElement("linearGradient", {
+		id: "clark_svg__a",
+		x1: 21.636,
+		x2: 17.027,
+		y1: 4.149,
+		y2: 8.785,
+		gradientUnits: "userSpaceOnUse"
+	}, /* @__PURE__ */ React$1.createElement("stop", { stopColor: "currentColor" }), /* @__PURE__ */ React$1.createElement("stop", {
+		offset: 1,
+		stopColor: "currentColor",
+		stopOpacity: .84
+	})), /* @__PURE__ */ React$1.createElement("linearGradient", {
+		id: "clark_svg__b",
+		x1: 4.534,
+		x2: 10.643,
+		y1: 6.603,
+		y2: 9.712,
+		gradientUnits: "userSpaceOnUse"
+	}, /* @__PURE__ */ React$1.createElement("stop", { stopColor: "currentColor" }), /* @__PURE__ */ React$1.createElement("stop", {
+		offset: 1,
+		stopColor: "currentColor",
+		stopOpacity: .84
+	})), /* @__PURE__ */ React$1.createElement("linearGradient", {
+		id: "clark_svg__c",
+		x1: 15.788,
+		x2: 16.004,
+		y1: 13.866,
+		y2: 15.093,
+		gradientUnits: "userSpaceOnUse"
+	}, /* @__PURE__ */ React$1.createElement("stop", {
+		stopColor: "currentColor",
+		stopOpacity: .6
+	}), /* @__PURE__ */ React$1.createElement("stop", {
+		offset: 1,
+		stopColor: "currentColor"
+	})), /* @__PURE__ */ React$1.createElement("linearGradient", {
+		id: "clark_svg__d",
+		x1: 15.704,
+		x2: 16.07,
+		y1: 13.597,
+		y2: 15.67,
+		gradientUnits: "userSpaceOnUse"
+	}, /* @__PURE__ */ React$1.createElement("stop", {
+		stopColor: "currentColor",
+		stopOpacity: .6
+	}), /* @__PURE__ */ React$1.createElement("stop", {
+		offset: 1,
+		stopColor: "currentColor"
+	})))));
+};
+//#endregion
+//#region src/lib/internal-details/internal-components/common.ts
+const ErrorIconContainer = styled.div`
+  width: 60px;
+  height: 60px;
+  min-width: 60px;
+  min-height: 60px;
+  background: linear-gradient(135deg, #aab 0%, #000033 50%, #000066 100%);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  flex-shrink: 0;
+  animation: scaleIn 0.3s ease-out forwards;
+  opacity: 0;
+  box-shadow:
+    0 0 1px black,
+    0 4px 12px rgba(0, 85, 187, 0.15),
+    0 2px 4px rgba(0, 85, 187, 0.05);
+
+  @keyframes scaleIn {
+    from {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+`;
+const StyledClarkIcon = styled(SvgClark)`
+  width: 54px;
+  height: 54px;
+  color: white;
+  margin-top: 3px;
+  margin-left: 1px;
+  animation: scaleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  opacity: 0;
+
+  @keyframes scaleIn {
+    0% {
+      transform: scale(0.6);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+`;
+const ErrorTitle = styled.h2`
+  font-family: Inter;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 1.35;
+  text-align: center;
+  margin-bottom: 6px;
+  flex-shrink: 0;
+`;
+const ErrorMessage = styled.p`
+  font-family: Inter;
+  font-size: 14px;
+  color: #6c7689;
+  line-height: 1.5715;
+  text-align: center;
+  flex-shrink: 0;
+  margin-top: 0;
+  margin-bottom: 16px;
+`;
+const ErrorDetails = styled.details`
+  margin-top: 24px;
+  text-align: left;
+  background-color: #f9fafb;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow:
+    0px 0px 1px 0px #22272f52,
+    0px 1px 3px 0px #22272f1f;
+  flex-shrink: 0;
+  font-family: Inter;
+
+  &[open] summary {
+    margin-bottom: 12px;
+  }
+`;
+const ErrorSummary = styled.summary`
+  cursor: pointer;
+  font-weight: 500;
+  color: #374151;
+  font-size: 14px;
+  user-select: none;
+`;
+const ErrorStack = styled.pre`
+  font-size: 12px;
+  color: #dc2626;
+  overflow: auto;
+  white-space: pre-wrap;
+  margin: 16px;
+  font-family: monospace;
+`;
+const ErrorContainer = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.5);
+  pointer-events: auto;
+`;
+const ErrorContent = styled.div`
+  max-width: 700px;
+  padding: 40px;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  opacity: 0;
+  animation: fadeIn 0.3s ease-out forwards;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const SecondaryButton = styled.button`
+  color: ${colors.GREY_700};
+  border: 1px solid ${colors.GREY_100};
+  width: fit-content;
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  height: fit-content;
+  font-size: 12px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+`;
+const ActionsContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+`;
+//#endregion
+//#region src/edit-mode/assets/ai-stars.svg
+var _path;
+function _extends() {
+	return _extends = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends.apply(null, arguments);
+}
+var SvgAiStars = function SvgAiStars(props) {
+	return /* @__PURE__ */ React$1.createElement("svg", _extends({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 13,
+		height: 14,
+		fill: "none"
+	}, props), _path || (_path = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M10.5.9a.6.6 0 0 1 .586.472l.133.605a.4.4 0 0 0 .305.305l.605.132a.6.6 0 0 1 0 1.172l-.605.133a.4.4 0 0 0-.305.305l-.133.605a.6.6 0 0 1-1.172 0l-.132-.605a.4.4 0 0 0-.305-.305l-.605-.133a.6.6 0 0 1 0-1.172l.605-.132a.4.4 0 0 0 .305-.305l.132-.605A.6.6 0 0 1 10.5.9M5.077 3.833a.6.6 0 0 0-1.153 0l-.215.74A2.4 2.4 0 0 1 2.074 6.21l-.741.215a.6.6 0 0 0 0 1.153l.74.215A2.4 2.4 0 0 1 3.71 9.427l.215.74a.6.6 0 0 0 1.153 0l.215-.74a2.4 2.4 0 0 1 1.635-1.635l.74-.215a.6.6 0 0 0 0-1.153l-.74-.215a2.4 2.4 0 0 1-1.635-1.635zm6.01 5.539a.6.6 0 0 0-1.173 0l-.132.605a.4.4 0 0 1-.305.305l-.605.133a.6.6 0 0 0 0 1.172l.605.132a.4.4 0 0 1 .305.305l.132.605a.6.6 0 0 0 1.172 0l.133-.605a.4.4 0 0 1 .305-.305l.605-.132a.6.6 0 0 0 0-1.172l-.605-.133a.4.4 0 0 1-.305-.305z",
+		clipRule: "evenodd"
+	})));
+};
+//#endregion
+//#region src/lib/internal-details/internal-components/fix-with-clark-button.tsx
+const MAX_STACK_FRAMES = 10;
+const MAX_PROMPT_LENGTH = 8e3;
+function buildRuntimeErrorPrompt(error) {
+	const defaultPrompt = "Fix this error: Unknown error";
+	if (!error) return defaultPrompt;
+	const [messageLine, ...rawFrames] = error.stack?.split("\n") ?? [];
+	const message = (messageLine || error.message || error.toString()).trim();
+	const filteredFrames = rawFrames.filter((line) => line && !line.includes("node_modules"));
+	const selectedFrames = filteredFrames.slice(0, MAX_STACK_FRAMES);
+	const omittedCount = filteredFrames.length - selectedFrames.length;
+	const frameSection = [...selectedFrames, ...omittedCount > 0 ? [`... (${omittedCount} additional frame${omittedCount > 1 ? "s" : ""} omitted)`] : []].map((line) => line.trimEnd()).join("\n");
+	const prompt = `Fix this error: ${frameSection ? `${message}\n${frameSection}` : message}`;
+	if (prompt.length <= MAX_PROMPT_LENGTH) return prompt;
+	const suffix = "... (truncated)";
+	const availableChars = Math.max(MAX_PROMPT_LENGTH - 15, 0);
+	return `${prompt.slice(0, availableChars)}${suffix}`;
+}
+const FixWithClarkButtonContainer = styled.button`
+  padding: 6px 12px;
+  background-color: ${colors.ACCENT_BLUE_500};
+  border-radius: 4px;
+  border: none;
+  color: white;
+  height: fit-content;
+  display: flex;
+  gap: 4px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  font-size: 12px;
+  align-items: center;
+
+  &:hover:not(:disabled) {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+function FixWithClarkButton({ identifier, error, onClick }) {
+	const isAiEditing = root_store_default.editStore?.ai.getIsEditing() ?? false;
+	const handleFixWithAi = () => {
+		onClick?.();
+		if (identifier) editorBridge.addComponentToAiContext(identifier.sourceId, identifier.selectorId);
+		const prompt = buildRuntimeErrorPrompt(error);
+		editorBridge.aiGenerate(prompt, true);
+	};
+	return /* @__PURE__ */ jsxs(FixWithClarkButtonContainer, {
+		onClick: handleFixWithAi,
+		disabled: isAiEditing,
+		children: [/* @__PURE__ */ jsx(SvgAiStars, {}), " Fix with Clark"]
+	});
+}
+//#endregion
+//#region src/lib/internal-details/css-constants.ts
+const CSS_CLASSES = {
+	SUSPENSE_FALLBACK: "sb-suspense-fallback",
+	ANCHOR_NAME: "sb-anchor-name"
+};
+//#endregion
+//#region src/lib/internal-details/lib/suspense/suspense-fallback.tsx
+const shimmerAnimation = keyframes`
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+`;
+const ShimmerDiv = styled.div`
+  min-height: 12px;
+  min-width: 12px;
+  background-color: ${(props) => props.$backgroundColor};
+  border-radius: ${(props) => props.$borderRadius};
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    ${(props) => props.$backgroundColor} 25%,
+    ${(props) => props.$shimmerHighlight} 50%,
+    ${(props) => props.$backgroundColor} 75%
+  );
+  background-size: max(100%, 200px) 100%;
+  animation: ${shimmerAnimation} 5s infinite linear;
+`;
+/**
+* Default fallback component displayed while components are suspended.
+*/
+function SuspenseFallback({ style, className, noBorderRadius }) {
+	const backgroundColor = "#f8f9fa";
+	const shimmerHighlight = "#ffffff";
+	const borderRadius = noBorderRadius ? "0px" : "4px";
+	const classes = useMemo(() => [CSS_CLASSES.ANCHOR_NAME, className].filter(Boolean).join(" "), [className]);
+	return /* @__PURE__ */ jsx(ShimmerDiv, {
+		$backgroundColor: backgroundColor,
+		$shimmerHighlight: shimmerHighlight,
+		$borderRadius: borderRadius,
+		style: style?.(),
+		className: classes,
+		"data-test": "suspense-fallback"
+	});
+}
+//#endregion
+//#region src/lib/user-facing/component-base/error-boundary.tsx
+const ErrorBoundaryContainer = styled.div`
+  background: white;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid ${colors.GREY_100};
+  border-left: 3px solid ${colors.RED_500};
+  border-radius: 4px;
+  width: 100%;
+  color: ${colors.GREY_700};
+`;
+const ErrorDetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const ErrorActionsContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;
+var ErrorBoundary = class extends Component {
+	state = {
+		id: generateId(),
+		hasError: false
+	};
+	disposeAutoReset;
+	static getDerivedStateFromError(e) {
+		const error = e instanceof Error ? e : new Error(typeof e === "object" && e !== null ? JSON.stringify(e) : String(e));
+		return {
+			id: generateId(),
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		if (isEditMode()) root_store_default.editStore?.ai.handleRuntimeError({
+			id: this.state.id,
+			error: String(error),
+			errorInfo,
+			identifier: this.props.identifier
+		});
+	}
+	reset = () => {
+		if (isEditMode()) root_store_default.editStore?.ai.clearRuntimeError(this.state.id);
+		this.setState({
+			hasError: false,
+			error: void 0
+		});
+	};
+	componentWillUnmount() {
+		if (this.state.hasError && isEditMode()) root_store_default.editStore?.ai.clearRuntimeError(this.state.id);
+		this.disposeAutoReset?.();
+	}
+	handleFixWithClarkInitiated = () => {
+		const ai = root_store_default.editStore?.ai;
+		if (!ai) return;
+		this.disposeAutoReset?.();
+		this.disposeAutoReset = void 0;
+		let sawStart = ai.getIsEditing();
+		this.disposeAutoReset = reaction(() => ai.getIsEditing(), (isEditing) => {
+			if (!sawStart && isEditing) sawStart = true;
+			if (sawStart && !isEditing) {
+				this.reset();
+				this.disposeAutoReset?.();
+				this.disposeAutoReset = void 0;
+			}
+		}, {
+			fireImmediately: true,
+			name: "error-boundary-ai-auto-reset"
+		});
+	};
+	handleFixWithAi() {
+		const { identifier } = this.props;
+		if (identifier) editorBridge.addComponentToAiContext(identifier.sourceId, identifier.selectorId);
+		let prompt = `Fix this error: `;
+		if (this.state.error?.stack) {
+			const lines = this.state.error.stack.split("\n");
+			const nodeModulesIndex = lines.findIndex((line) => line.includes("node_modules"));
+			const relevantLines = nodeModulesIndex > -1 ? lines.slice(0, nodeModulesIndex) : lines;
+			prompt += relevantLines.slice(0, 5).join("\n");
+		} else prompt += this.state.error?.toString();
+		editorBridge.aiGenerate(prompt);
+	}
+	render() {
+		if (this.state.hasError) return /* @__PURE__ */ jsx(Observer, { children: () => {
+			if (root_store_default.editStore?.ai.getIsEditing() ?? false) return /* @__PURE__ */ jsx(SuspenseFallback, {});
+			return /* @__PURE__ */ jsxs(ErrorBoundaryContainer, { children: [/* @__PURE__ */ jsxs(ErrorDetailsContainer, {
+				"data-testid": "runtime-error-details",
+				children: [/* @__PURE__ */ jsx("h3", { children: this.props.header || "Something went wrong." }), /* @__PURE__ */ jsxs("details", {
+					style: { fontSize: "0.8em" },
+					children: [/* @__PURE__ */ jsx("summary", {
+						style: { paddingLeft: "0.25rem" },
+						children: "Error details"
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							marginTop: "0.5rem",
+							maxWidth: "100%",
+							overflowX: "auto",
+							scrollbarWidth: "thin"
+						},
+						children: /* @__PURE__ */ jsx("pre", {
+							style: { color: "gray" },
+							children: /* @__PURE__ */ jsx("code", { children: this.state.error?.stack ? this.state.error.stack : this.state.error?.toString() })
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ jsxs(ErrorActionsContainer, { children: [isEditMode() && /* @__PURE__ */ jsx(FixWithClarkButton, {
+				onClick: this.handleFixWithClarkInitiated,
+				error: this.state.error,
+				identifier: this.props.identifier
+			}), /* @__PURE__ */ jsx(SecondaryButton, {
+				onClick: this.reset,
+				children: "Try again"
+			})] })] });
+		} });
+		return this.props.children;
+	}
+};
+//#endregion
+//#region src/lib/utils/widget-wrapper-naming.ts
+const getWidgetAnchorName = (selectorId) => {
+	return `--widget-${selectorId}`;
+};
+const getWidgetRectAnchorName = (selectorId) => {
+	return `--widget-rect-${selectorId}`;
+};
+//#endregion
+//#region src/edit-mode/edit-wrapper.tsx
+if (typeof window !== "undefined" && typeof document.documentElement !== "undefined" && !("anchorName" in document.documentElement.style)) polyfill();
+const createAnchorNameStyle = (props) => {
+	return { "--anchor-name": getWidgetAnchorName(props.selectorId) };
+};
+//#endregion
+//#region src/edit-mode/instance-tracker.ts
+/**
+* Tracks and recycles instance numbers for each sourceId to generate stable, unique selector IDs.
+* When components unmount, their instance numbers are released and can be reused.
+*/
+var InstanceTracker = class {
+	sourceIdToUsedInstances = /* @__PURE__ */ new Map();
+	getNextAvailableInstance(sourceId) {
+		const usedInstances = this.sourceIdToUsedInstances.get(sourceId) ?? /* @__PURE__ */ new Set();
+		let instance = 0;
+		while (usedInstances.has(instance)) instance++;
+		usedInstances.add(instance);
+		this.sourceIdToUsedInstances.set(sourceId, usedInstances);
+		return instance;
+	}
+	releaseInstance(sourceId, instance) {
+		const usedInstances = this.sourceIdToUsedInstances.get(sourceId);
+		if (usedInstances) {
+			usedInstances.delete(instance);
+			if (usedInstances.size === 0) this.sourceIdToUsedInstances.delete(sourceId);
+		}
+	}
+};
+const instanceTracker = new InstanceTracker();
+//#endregion
+//#region src/edit-mode/jsx-wrapper.tsx
+const JSXContext = React.createContext({
+	selectorId: "S-<unknown>",
+	sourceId: "SB-<unknown>"
+});
+const makeWrappedComponent = (type) => {
+	const isTag = typeof type === "string";
+	const isRegisteredSbComponent = root_store_default.componentRegistry.hasComponent(type);
+	const Component = React.forwardRef((props, ref) => {
+		const { selectorId: parentSelectorId } = useJSXContext();
+		const sourceId = props[SOURCE_ID_ATTRIBUTE];
+		const noSelect = props[NO_SELECT_ATTRIBUTE];
+		const instanceNumberRef = useRef();
+		const selectorId = useRef("S-<unknown>");
+		if (selectorId.current === "S-<unknown>") {
+			instanceNumberRef.current = instanceTracker.getNextAvailableInstance(sourceId);
+			selectorId.current = `S-x-${sourceId}-${instanceNumberRef.current}`;
+		}
+		useEffect(() => {
+			root_store_default.editStore?.runtimeTrackingStore.registerComponent(selectorId.current, {
+				sourceId,
+				type,
+				parentSelectorId,
+				isSbComponent: isRegisteredSbComponent,
+				isHtmlElement: isTag,
+				noSelect
+			});
+			return () => {
+				root_store_default.editStore?.runtimeTrackingStore.unregisterComponent(selectorId.current);
+				if (instanceNumberRef.current !== void 0) instanceTracker.releaseInstance(sourceId, instanceNumberRef.current);
+			};
+		}, []);
+		useEffect(() => {
+			root_store_default.editStore?.runtimeTrackingStore.updatePropsForComponent(selectorId.current, props);
+		}, [props]);
+		const jsxContext = useMemo(() => ({
+			selectorId: selectorId.current,
+			sourceId
+		}), [sourceId]);
+		const selectorProps = { [SELECTOR_ID_ATTRIBUTE]: selectorId.current };
+		if (parentSelectorId) selectorProps["data-sb-parent-selector-id"] = parentSelectorId;
+		const { style: propsStyle, className: propsClassName } = props;
+		const style = useMemo(() => {
+			return {
+				...propsStyle,
+				...createAnchorNameStyle({ selectorId: selectorId.current })
+			};
+		}, [propsStyle]);
+		const className = useMemo(() => {
+			return typeof propsClassName === "function" ? (...args) => ["sb-anchor-name", propsClassName(...args)].filter(Boolean).join(" ") : ["sb-anchor-name", propsClassName].filter(Boolean).join(" ");
+		}, [propsClassName]);
+		const element = React.createElement(type, {
+			ref,
+			...props,
+			...selectorProps,
+			className,
+			style
+		});
+		if (!root_store_default.editStore?.isInitialized) return /* @__PURE__ */ jsx(JSXContext.Provider, {
+			value: jsxContext,
+			children: element
+		});
+		return /* @__PURE__ */ jsx(JSXContext.Provider, {
+			value: jsxContext,
+			children: /* @__PURE__ */ jsx(ErrorBoundary, { children: element })
+		});
+	});
+	try {
+		Component.displayName = typeof type === "string" ? type : type.displayName || type.name || "Component";
+	} catch (e) {
+		console.error("Error setting displayName", e);
+	}
+	return Component;
+};
+const useJSXContext = () => {
+	return React.useContext(JSXContext);
+};
+//#endregion
+export { FixWithClarkButton as a, ErrorContent as c, ErrorMessage as d, ErrorStack as f, StyledClarkIcon as g, SecondaryButton as h, getWidgetRectAnchorName as i, ErrorDetails as l, ErrorTitle as m, useJSXContext as n, ActionsContainer as o, ErrorSummary as p, getWidgetAnchorName as r, ErrorContainer as s, makeWrappedComponent as t, ErrorIconContainer as u };
+
+//# sourceMappingURL=jsx-wrapper-c5W52jgK.js.map