@superblocksteam/library 2.0.162-next.2 → 2.0.163-next.0

package/dist/lib/index.js

@@ -1,22 +1,19 @@
-import { n as consoleLogAttributes, t as LibraryEarlyConsoleBuffer } from "../early-console-buffer-BJWsc4E3.js";
-import { A as Section, C as iframeMessageHandler, D as createManagedPropsList, E as isEditMode, M as getEditStore, O as Prop, S as getParentOrigin, T as sendMessageImmediately, _ as embedStore, a as getContextFromTraceHeaders, b as colors$1, c as rejectById, d as getAppMode, f as useSuperblocksContext, g as useSuperblocksUser, h as useSuperblocksProfiles, i as createIframeSpan, j as createPropertiesPanelDefinition, k as PropsCategory, l as resolveById, m as useSuperblocksGroups, n as root_store_default, o as tracker, p as useSuperblocksDataTags, r as startEditorSync, s as addNewPromise, t as ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG, u as SuperblocksContextProvider, v as generateId, w as isEmbeddedBySuperblocksFirstParty, x as editorBridge, y as sendNotification } from "../root-store-DFc-KUI6.js";
-import { n as initTracerProviderWithOrigin } from "../utils-Blrvh8kW.js";
-import { r as updateSdkApiSourceCode, t as discoverAndRegisterSdkApis } from "../sdk-api-discovery-ChkM2xTd.js";
-import { a as FixWithClarkButton, c as ErrorContent, d as ErrorMessage$1, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer } from "../jsx-wrapper-CAKd0FsI.js";
-import { action, autorun, computed, makeAutoObservable, makeObservable, observable, reaction, when } from "mobx";
+import { n as consoleLogAttributes, t as LibraryEarlyConsoleBuffer } from "../early-console-buffer-DMR1SCsN.js";
+import { A as Section, C as iframeMessageHandler, D as createManagedPropsList, E as isEditMode, O as Prop, S as getParentOrigin, T as sendMessageImmediately, _ as generateId, a as tracker, b as editorBridge, c as resolveById, d as useSuperblocksContext, f as useSuperblocksDataTags, g as embedStore, h as useSuperblocksUser, i as getContextFromTraceHeaders, k as PropsCategory, l as SuperblocksContextProvider, m as useSuperblocksProfiles, n as root_store_default, o as addNewPromise, p as useSuperblocksGroups, r as createIframeSpan, s as rejectById, t as ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG, u as getAppMode, v as sendNotification, w as isEmbeddedBySuperblocksFirstParty, x as getEditStore, y as colors } from "../root-store-CtsStoaR.js";
+import { n as initTracerProviderWithOrigin } from "../utils-DXaAwgS_.js";
+import { r as updateSdkApiSourceCode, t as discoverAndRegisterSdkApis } from "../sdk-api-discovery-DdbqEI70.js";
+import { a as FixWithClarkButton, c as ErrorContent, d as ErrorMessage$1, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer } from "../jsx-wrapper-BGGZod5X.js";
+import { action, computed, makeAutoObservable, makeObservable, observable, reaction, when } from "mobx";
 import { UNSAFE_DataRouterContext, generatePath, useLocation, useNavigate, useParams, useRouteError } from "react-router";
-import { Dim, NATIVE_COMPONENT_TYPES, NO_SELECT_ATTRIBUTE, Property, Property as Property$1, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, URL_PARAMS, generateSourceId, getBindingIdentifier, getDevServerAuthorizationRejectionReason, hasCompactJwtShape } from "@superblocksteam/library-shared";
+import { NATIVE_COMPONENT_TYPES, NO_SELECT_ATTRIBUTE, Property, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, URL_PARAMS, generateSourceId, getBindingIdentifier, getDevServerAuthorizationRejectionReason, hasCompactJwtShape } from "@superblocksteam/library-shared";
 import * as React$1 from "react";
 import React, { Suspense, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { isEqual } from "lodash";
 import { ISocketWithClientAuth, OBS_TAG_APPLICATION_ID, connectWebSocket, createISocketClient } from "@superblocksteam/shared";
 import styled from "styled-components";
-import { AiContextMode, AiGenerationState, ViteMessageKind } from "@superblocksteam/library-shared/types";
+import { AiContextMode, AiGenerationState, ViteMessageKind, normalizeInteractionMode } from "@superblocksteam/library-shared/types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { metrics, trace } from "@opentelemetry/api";
-import defaultTheme from "tailwindcss/defaultTheme";
-import postcss from "postcss";
-import colors from "tailwindcss/colors";
 import { Observer, observer } from "mobx-react-lite";
 import useSWR, { mutate } from "swr";
 import * as Dialog from "@radix-ui/react-dialog";
@@ -247,7 +244,7 @@ function installDynamicImportErrorReporter(options = {}) {
 * Register a component to be used with the framework.
 *
 * @param Component - The React component or HTML element name (e.g., "div") to register. Can be a React functional component, class component, or intrinsic element string.
-* @param propertiesDefinition - The definition of the component's properties, used for property panel generation and validation.
+* @param propertiesDefinition - The runtime schema for the component's managed properties.
 *
 * @returns A chainable object that provides methods for editor integration (addEditorTemplate and editorConfig).
 */
@@ -256,9 +253,6 @@ const registerComponentInternal = (Component, propertiesDefinition) => {
 	if (!type) throw new Error(`Component must have a name or displayName property, or be a string. Received: ${Component}`);
 	const managedProps = createManagedPropsList(propertiesDefinition);
 	const isDroppable = !!managedProps.find((p) => p.path === "children" && p.dataType === "jsx");
-	root_store_default.onEditorRegistered(() => {
-		getEditStore().propertiesPanelManager.setPropertiesDefinition(type, propertiesDefinition);
-	});
 	root_store_default.componentRegistry.addComponent(type, Component, propertiesDefinition);
 	root_store_default.componentRegistry.addManagedProps(type, managedProps ?? []);
 	const defaultEditorConfig = {};
@@ -289,492 +283,7 @@ const registerComponentInternal = (Component, propertiesDefinition) => {
 	return chainableComponent;
 };
 //#endregion
-//#region src/lib/user-facing/properties-panel/mixins/inline-styles-category.ts
-/**
-* Creates a standardized inline styles section for use in properties panels.
-* This provides a consistent interface for applying inline CSS styles across components.
-*
-* @param options - Configuration options to override defaults
-* @returns A Section with PropsCategory.Styles containing a style prop
-*/
-const inlineStylesCategory = (options = {}) => {
-	const styleProp = Prop.any().propertiesPanel({
-		label: "Inline Styles",
-		controlType: "INLINE_STYLE_BUILDER",
-		description: "Custom inline CSS styles",
-		isRemovable: true,
-		defaultOnAdd: {},
-		collapsibleHeader: true,
-		...options
-	});
-	const originalToDefinition = styleProp.toDefinition.bind(styleProp);
-	styleProp.toDefinition = function(props) {
-		const styleValue = props?.style;
-		if (!styleValue || typeof styleValue === "string" && styleValue.trim() === "" || typeof styleValue === "object" && !Array.isArray(styleValue) && Object.keys(styleValue).length === 0) return;
-		return originalToDefinition(props);
-	};
-	return Section.category(PropsCategory.Styles).children({ style: styleProp }).propertiesPanel({ showHeader: false });
-};
-//#endregion
-//#region src/lib/user-facing/properties-panel/mixins/convert-rem-to-pixels.ts
-let cachedRootFontSize = void 0;
-const getRootFontSize = () => {
-	if (cachedRootFontSize !== void 0) return cachedRootFontSize;
-	if (typeof window !== "undefined" && typeof document !== "undefined") try {
-		const rootFontSize = window.getComputedStyle(document.documentElement).fontSize;
-		const parsed = parseFloat(rootFontSize);
-		if (!isNaN(parsed) && parsed > 0) {
-			cachedRootFontSize = parsed;
-			return cachedRootFontSize;
-		}
-	} catch {
-		console.error("Error getting root font size, using fallback of 16px");
-	}
-	return 16;
-};
-/**
-* Converts CSS values with rem units to pixel values.
-* Uses the actual computed root font size from the browser.
-*
-* @param value - CSS value (e.g., "1rem", "16px", "0.25rem")
-* @returns Converted value in pixels if input was in rem, otherwise returns original value
-*
-* @example
-* convertRemToPixels("1rem") // "16px" (assuming default root font size)
-* convertRemToPixels("0.5rem") // "8px"
-* convertRemToPixels("16px") // "16px" (unchanged)
-* convertRemToPixels("100%") // "100%" (unchanged)
-*/
-function convertRemToPixels(value) {
-	const remMatch = value.match(/^([\d.]+)rem$/);
-	if (!remMatch) return value;
-	const pixelValue = parseFloat(remMatch[1]) * getRootFontSize();
-	return `${Math.abs(pixelValue - Math.round(pixelValue)) < 1e-4 ? Math.round(pixelValue) : pixelValue}px`;
-}
-//#endregion
-//#region src/lib/user-facing/properties-panel/mixins/extract-variables.ts
-async function extractCSSVariablesFromContent(cssContent) {
-	const variables = {
-		root: {},
-		dark: {},
-		theme: {}
-	};
-	try {
-		const extractVariablesPlugin = () => {
-			return {
-				postcssPlugin: "extract-variables",
-				Once(root) {
-					root.walkRules((rule) => {
-						if (rule.selector === ":root") rule.walkDecls((decl) => {
-							if (decl.prop.startsWith("--")) variables.root[decl.prop] = decl.value;
-						});
-						else if (rule.selector === ".dark") rule.walkDecls((decl) => {
-							if (decl.prop.startsWith("--")) variables.dark[decl.prop] = decl.value;
-						});
-					});
-					root.walkAtRules("theme", (atRule) => {
-						if (atRule.params === "inline") atRule.walkDecls((decl) => {
-							if (decl.prop.startsWith("--")) variables.theme[decl.prop] = decl.value;
-						});
-					});
-				}
-			};
-		};
-		extractVariablesPlugin.postcssPlugin = "extract-variables";
-		await postcss([extractVariablesPlugin()]).process(cssContent, { from: void 0 });
-		return variables;
-	} catch (error) {
-		throw new Error(`Failed to extract CSS variables: ${error instanceof Error ? error.message : String(error)}`);
-	}
-}
-async function extractCSSVariables() {
-	const styleSheets = Array.from(document.styleSheets);
-	let cssContent = "";
-	for (const sheet of styleSheets) try {
-		const text = Array.from(sheet.cssRules || []).map((rule) => rule.cssText).join("\n");
-		cssContent += text;
-	} catch (e) {
-		console.warn("Cannot access stylesheet:", sheet.href, e);
-	}
-	return extractCSSVariablesFromContent(cssContent);
-}
-function getCachedCSSVariables() {
-	return globalThis.__CSS_VARIABLES_CACHE__ || null;
-}
-async function initializeCSSVariables() {
-	if (globalThis.__CSS_VARIABLES_CACHE__) return globalThis.__CSS_VARIABLES_CACHE__;
-	if (globalThis.__CSS_VARIABLES_LOADING__ && globalThis.__CSS_VARIABLES_PROMISE__) return globalThis.__CSS_VARIABLES_PROMISE__;
-	globalThis.__CSS_VARIABLES_LOADING__ = true;
-	globalThis.__CSS_VARIABLES_PROMISE__ = extractCSSVariables().then((variables) => {
-		globalThis.__CSS_VARIABLES_CACHE__ = variables;
-		globalThis.__CSS_VARIABLES_LOADING__ = false;
-		return variables;
-	}).catch((error) => {
-		console.error("Failed to extract CSS variables:", error);
-		const fallback = {
-			root: {},
-			dark: {},
-			theme: {}
-		};
-		globalThis.__CSS_VARIABLES_CACHE__ = fallback;
-		globalThis.__CSS_VARIABLES_LOADING__ = false;
-		return fallback;
-	});
-	return globalThis.__CSS_VARIABLES_PROMISE__;
-}
-//#endregion
-//#region src/lib/user-facing/properties-panel/mixins/style-tokens-size.ts
-let cachedSizePresets = null;
-const height = defaultTheme.height({
-	theme: () => "",
-	colors
-});
-const width = defaultTheme.width({
-	theme: () => "",
-	colors
-});
-const minWidth = defaultTheme.minWidth({
-	theme: () => "",
-	colors
-});
-const maxWidth = defaultTheme.maxWidth({
-	theme: () => "",
-	colors
-});
-const minHeight = defaultTheme.minHeight({
-	theme: () => "",
-	colors
-});
-const maxHeight = defaultTheme.maxHeight({
-	theme: () => "",
-	colors
-});
-const spacing = defaultTheme.spacing;
-function isSizeValue(value) {
-	const trimmedValue = value.trim().toLowerCase();
-	return /^\d+px$/.test(trimmedValue) || /^\d+(\.\d+)?rem$/.test(trimmedValue) || /^\d+(\.\d+)?em$/.test(trimmedValue) || /^\d+(\.\d+)?%$/.test(trimmedValue) || /^\d+(\.\d+)?(vw|vh|vmin|vmax|dvw|dvh|lvw|lvh|svw|svh)$/.test(trimmedValue) || /^\d+(\.\d+)?(fr|ch|ex|ic|cap|lh|rlh)$/.test(trimmedValue) || [
-		"auto",
-		"inherit",
-		"initial",
-		"unset",
-		"revert",
-		"revert-layer",
-		"max-content",
-		"min-content",
-		"fit-content",
-		"stretch",
-		"none",
-		"0",
-		"1",
-		"2",
-		"3",
-		"4",
-		"5",
-		"6",
-		"7",
-		"8",
-		"9",
-		"10",
-		"11",
-		"12",
-		"14",
-		"16",
-		"20",
-		"24",
-		"28",
-		"32",
-		"36",
-		"40",
-		"44",
-		"48",
-		"52",
-		"56",
-		"60",
-		"64",
-		"72",
-		"80",
-		"96"
-	].includes(trimmedValue);
-}
-function getSizePresets() {
-	if (cachedSizePresets) return cachedSizePresets;
-	const cssVariables = getCachedCSSVariables();
-	if (!cssVariables) return [];
-	const sizePresets = [];
-	const addCssSize = (prop, value) => {
-		if (isSizeValue(value)) {
-			const label = prop.replace("--", "").replace(/-/g, " ");
-			sizePresets.push({
-				label,
-				value: `(${prop})`,
-				rawValue: convertRemToPixels(value),
-				type: "system"
-			});
-		}
-	};
-	for (const [prop, value] of Object.entries(cssVariables.root)) addCssSize(prop, value);
-	for (const [prop, value] of Object.entries(cssVariables.theme)) addCssSize(prop, value);
-	for (const [prop, value] of Object.entries(cssVariables.dark)) addCssSize(prop, value);
-	for (const [key, value] of Object.entries(spacing)) sizePresets.push({
-		label: key,
-		value: key,
-		rawValue: convertRemToPixels(value),
-		type: "tailwind"
-	});
-	const allWidth = {
-		...width,
-		...minWidth,
-		...maxWidth
-	};
-	const allHeight = {
-		...height,
-		...minHeight,
-		...maxHeight
-	};
-	const heightPresets = [...sizePresets];
-	const widthPresets = [...sizePresets];
-	for (const [key, value] of Object.entries(allWidth)) if (typeof value === "string") widthPresets.push({
-		label: key,
-		value: key,
-		rawValue: convertRemToPixels(value),
-		type: "tailwind"
-	});
-	for (const [key, value] of Object.entries(allHeight)) if (typeof value === "string") heightPresets.push({
-		label: key,
-		value: key,
-		rawValue: convertRemToPixels(value),
-		type: "tailwind"
-	});
-	const seen = /* @__PURE__ */ new Set();
-	const uniqueHeightPresets = heightPresets.filter((preset) => {
-		if (seen.has(preset.value)) return false;
-		seen.add(preset.value);
-		return true;
-	});
-	seen.clear();
-	const uniqueWidthPresets = widthPresets.filter((preset) => {
-		if (seen.has(preset.value)) return false;
-		seen.add(preset.value);
-		return true;
-	});
-	seen.clear();
-	cachedSizePresets = {
-		height: uniqueHeightPresets,
-		width: uniqueWidthPresets,
-		spacing: sizePresets.filter((preset) => {
-			if (seen.has(preset.value)) return false;
-			seen.add(preset.value);
-			return true;
-		})
-	};
-	return cachedSizePresets;
-}
-//#endregion
-//#region src/lib/user-facing/properties-panel/mixins/style-tokens-border.ts
-let cachedBorderPresets = null;
-const borderWidth = defaultTheme.borderWidth;
-const borderRadius = defaultTheme.borderRadius;
-const boxShadow = defaultTheme.boxShadow;
-const DEFAULT_KEY = "DEFAULT";
-function isBoxShadowValue(value) {
-	const trimmedValue = value.trim().toLowerCase();
-	const isBoxShadow = /^(0|none|inset|outset|shadow-sm|shadow|shadow-md|shadow-lg|shadow-xl|shadow-2xl|shadow-inner|shadow-none)$/.test(trimmedValue);
-	if (isBoxShadow) return true;
-	return isBoxShadow || /^(inset\s+)?(-?\d+(\.\d+)?(px|rem|em|%)?(\s+|$)){2,4}([a-z]+\(.*?\)|#[0-9a-f]{3,8}|[a-z]+)?(\s*,\s*(inset\s+)?(-?\d+(\.\d+)?(px|rem|em|%)?(\s+|$)){2,4}([a-z]+\(.*?\)|#[0-9a-f]{3,8}|[a-z]+)?)*$/i.test(trimmedValue);
-}
-function formatLabel(key) {
-	return key.toLowerCase();
-}
-function getBorderPresets() {
-	if (cachedBorderPresets) return cachedBorderPresets;
-	const cssVariables = getCachedCSSVariables();
-	if (!cssVariables) return [];
-	const sizePresets = [];
-	const boxShadowPresets = [];
-	const addCssSize = (prop, value) => {
-		if (isSizeValue(value)) {
-			const label = formatLabel(prop.replace("--", "").replace(/-/g, " "));
-			sizePresets.push({
-				label,
-				value: `(${prop})`,
-				rawValue: convertRemToPixels(value),
-				type: "system"
-			});
-		} else if (isBoxShadowValue(value)) {
-			const label = formatLabel(prop.replace("--", "").replace(/-/g, " "));
-			boxShadowPresets.push({
-				label,
-				value: `(${prop})`,
-				rawValue: value,
-				type: "system"
-			});
-		}
-	};
-	for (const [prop, value] of Object.entries(cssVariables.root)) addCssSize(prop, value);
-	for (const [prop, value] of Object.entries(cssVariables.theme)) addCssSize(prop, value);
-	for (const [prop, value] of Object.entries(cssVariables.dark)) addCssSize(prop, value);
-	const borderWidthPresets = [...sizePresets];
-	const borderRadiusPresets = [...sizePresets];
-	function addTailwindProperty(presets, key, value, valueConverter) {
-		if (key === DEFAULT_KEY && typeof value === "string") presets.push({
-			label: "default",
-			value: "",
-			rawValue: valueConverter ? valueConverter(value) : convertRemToPixels(value),
-			type: "tailwind"
-		});
-		else if (typeof value === "string") presets.push({
-			label: formatLabel(key),
-			value: key,
-			rawValue: valueConverter ? valueConverter(value) : convertRemToPixels(value),
-			type: "tailwind"
-		});
-	}
-	for (const [key, value] of Object.entries(borderWidth)) addTailwindProperty(borderWidthPresets, key, value, convertRemToPixels);
-	for (const [key, value] of Object.entries(borderRadius)) addTailwindProperty(borderRadiusPresets, key, value, convertRemToPixels);
-	for (const [key, value] of Object.entries(boxShadow)) addTailwindProperty(boxShadowPresets, key, value);
-	const seen = /* @__PURE__ */ new Set();
-	const uniqueBorderWidthPresets = borderWidthPresets.filter((preset) => {
-		if (seen.has(preset.value)) return false;
-		seen.add(preset.value);
-		return true;
-	});
-	seen.clear();
-	const uniqueBorderRadiusPresets = borderRadiusPresets.filter((preset) => {
-		if (seen.has(preset.value)) return false;
-		seen.add(preset.value);
-		return true;
-	});
-	seen.clear();
-	cachedBorderPresets = {
-		borderWidth: uniqueBorderWidthPresets,
-		borderRadius: uniqueBorderRadiusPresets,
-		boxShadow: boxShadowPresets.filter((preset) => {
-			if (seen.has(preset.value)) return false;
-			seen.add(preset.value);
-			return true;
-		})
-	};
-	return cachedBorderPresets;
-}
-//#endregion
-//#region src/lib/user-facing/properties-panel/mixins/style-tokens-color.ts
-let cachedColorPresets = null;
-function isColorValue(value) {
-	const trimmedValue = value.trim().toLowerCase();
-	return trimmedValue.startsWith("#") || trimmedValue.startsWith("rgb(") || trimmedValue.startsWith("rgba(") || trimmedValue.startsWith("hsl(") || trimmedValue.startsWith("hsla(") || trimmedValue.startsWith("oklch(") || trimmedValue.startsWith("oklab(") || trimmedValue.startsWith("lch(") || trimmedValue.startsWith("lab(") || trimmedValue.startsWith("color(") || trimmedValue.startsWith("hwb(") || [
-		"transparent",
-		"currentcolor",
-		"inherit",
-		"initial",
-		"unset",
-		"red",
-		"blue",
-		"green",
-		"black",
-		"white",
-		"gray",
-		"yellow",
-		"orange",
-		"purple",
-		"pink",
-		"brown"
-	].includes(trimmedValue);
-}
-function getColorPresets() {
-	if (cachedColorPresets) return cachedColorPresets;
-	const cssVariables = getCachedCSSVariables();
-	if (!cssVariables) return [];
-	const colorPresets = [];
-	const addCssColor = (prop, value) => {
-		if (isColorValue(value)) {
-			const label = prop.replace("--", "").replace(/-/g, " ");
-			colorPresets.push({
-				label,
-				value: prop.replace("--", ""),
-				rawValue: value,
-				type: "system"
-			});
-		}
-	};
-	for (const [prop, value] of Object.entries(cssVariables.root)) addCssColor(prop, value);
-	for (const [prop, value] of Object.entries(cssVariables.theme)) addCssColor(prop, value);
-	for (const [prop, value] of Object.entries(cssVariables.dark)) addCssColor(prop, value);
-	for (const [colorName, colorShades] of Object.entries(colors)) if (typeof colorShades === "object" && colorShades !== null) {
-		for (const [shade, colorValue] of Object.entries(colorShades)) if (typeof colorValue === "string") colorPresets.push({
-			label: `${colorName} ${shade}`,
-			value: `${colorName}-${shade}`,
-			rawValue: colorValue,
-			type: "tailwind"
-		});
-	} else if (typeof colorShades === "string") colorPresets.push({
-		label: colorName,
-		value: colorName,
-		rawValue: colorShades,
-		type: "tailwind"
-	});
-	const seen = /* @__PURE__ */ new Set();
-	const uniquePresets = colorPresets.filter((preset) => {
-		if (seen.has(preset.value)) return false;
-		seen.add(preset.value);
-		return true;
-	});
-	cachedColorPresets = uniquePresets;
-	return uniquePresets;
-}
-//#endregion
-//#region src/lib/user-facing/properties-panel/mixins/styles-category.ts
-/**
-* Creates a standardized styles section for use in properties panels.
-* This provides a consistent interface for applying Tailwind CSS classes across components.
-*
-* @example
-* // Basic usage with defaults
-* styles: tailwindStylesCategory()
-*
-* // Override with prioritizedTailwindProperties. These properties will always be shown in the properties panel, event when not set.
-* styles: tailwindStylesCategory({prioritizedTailwindProperties: ["rounded", "text-color"]})
-*
-* @param options - Configuration options to override defaults
-* @returns A Section with PropsCategory.Styles containing a className prop
-*/
-const tailwindStylesCategory = (props) => {
-	const { prioritizedTailwindProperties } = props ?? {};
-	return Section.category(PropsCategory.Appearance).children({ className: Prop.string().propertiesPanel({
-		controlType: "TAILWIND_CLASS_BUILDER",
-		themePresets: function() {
-			return {
-				...getSizePresets(),
-				...getBorderPresets(),
-				colors: getColorPresets()
-			};
-		},
-		prioritizedTailwindProperties
-	}) });
-};
-//#endregion
 //#region src/lib/user-facing/components/custom/register-custom-component.tsx
-const defaultSectionsTemplate = () => ({
-	appearance: tailwindStylesCategory(),
-	styles: inlineStylesCategory()
-});
-function convertToSections(propertiesDefinition) {
-	return {
-		content: Section.category(PropsCategory.Content).children(Object.fromEntries(Object.entries(propertiesDefinition).filter(([, prop]) => prop.type !== "eventHandler"))),
-		events: Section.category(PropsCategory.EventHandlers).children(Object.fromEntries(Object.entries(propertiesDefinition).filter(([, prop]) => prop.type === "eventHandler")))
-	};
-}
-function mergeSections(sections, defaultSections) {
-	const allCurrentProps = Object.values(sections).flatMap((section) => Object.keys(section.props));
-	Object.entries(defaultSections).forEach(([sectionName, section]) => {
-		Object.entries(section.props).forEach(([propName, prop]) => {
-			if (!allCurrentProps.includes(propName)) {
-				if (!sections[sectionName]) sections[sectionName] = defaultSections[sectionName];
-				sections[sectionName].add({ [propName]: prop });
-			}
-		});
-	});
-	return sections;
-}
 /**
 * Registers a custom React component or HTML element with Superblocks.
 *
@@ -811,56 +320,31 @@ function mergeSections(sections, defaultSections) {
 * ```
 */
 function registerComponent(component, propertiesDefinition) {
-	const defaultSections = defaultSectionsTemplate();
-	if (!propertiesDefinition) return registerComponentInternal(component, defaultSections);
-	return registerComponentInternal(component, Object.values(propertiesDefinition).every((prop) => prop instanceof Section) ? mergeSections(propertiesDefinition, defaultSections) : mergeSections(convertToSections(propertiesDefinition), defaultSections));
+	const sections = {};
+	for (const [name, definition] of Object.entries(propertiesDefinition ?? {})) if (definition instanceof Section) sections[name] = Section.category(definition.category).children({
+		...sections[name]?.props,
+		...definition.props
+	});
+	else if (definition instanceof Prop) {
+		const isEvent = definition.type === "eventHandler";
+		const key = isEvent ? "events" : "content";
+		sections[key] ??= Section.category(isEvent ? PropsCategory.EventHandlers : PropsCategory.Content);
+		sections[key].add({ [name]: definition });
+	}
+	return registerComponentInternal(component, sections);
 }
 //#endregion
 //#region src/lib/user-facing/components/html/html-property-panels.ts
-const TYPOGRAPHY_PRIORITIZED_PROPERTIES = [
-	"font-family",
-	"font-size",
-	"font-weight",
-	"font-style",
-	"line-height",
-	"letter-spacing",
-	"text-align",
-	"text-color",
-	"text-decoration",
-	"text-transform"
-];
-const CONTAINER_PRIORITIZED_PROPERTIES = [
-	"display",
-	"p",
-	"m",
-	"width",
-	"height",
-	"background-color",
-	"rounded",
-	"border-width",
-	"border-style",
-	"overflow"
-];
 const htmlTagSectionsTemplate = (params) => {
 	const sections = {};
-	if (params.hasChildren) sections.contentSection = Section.category(PropsCategory.Content).children({ children: Prop.jsx().propertiesPanel({
-		label: "Children",
-		description: "The content of the element"
-	}) });
-	sections.appearance = tailwindStylesCategory({ prioritizedTailwindProperties: params.prioritizedTailwindProperties });
+	if (params.hasChildren) sections.contentSection = Section.category(PropsCategory.Content).children({ children: Prop.jsx() });
 	return sections;
 };
 const htmlTagSectionsTemplateForTypography = () => {
-	return htmlTagSectionsTemplate({
-		hasChildren: true,
-		prioritizedTailwindProperties: TYPOGRAPHY_PRIORITIZED_PROPERTIES
-	});
+	return htmlTagSectionsTemplate({ hasChildren: true });
 };
 const htmlTagSectionsTemplateForContainers = () => {
-	return htmlTagSectionsTemplate({
-		hasChildren: true,
-		prioritizedTailwindProperties: CONTAINER_PRIORITIZED_PROPERTIES
-	});
+	return htmlTagSectionsTemplate({ hasChildren: true });
 };
 //#endregion
 //#region src/lib/user-facing/components/html/register-html-elements.ts
@@ -1103,14 +587,10 @@ const handleBootstrapResponse = (event) => {
 	if (event.data.payload.branchName) root_store_default.setBranchName(event.data.payload.branchName);
 	if (event.data.payload.commitId) root_store_default.setCommitId(event.data.payload.commitId);
 	root_store_default.apis.notifyBootstrapComplete();
-	const featureFlags = event.data.payload.featureFlags;
-	if (featureFlags && root_store_default.editStore) {
-		if (featureFlags["ui.disable-design-mode"]) root_store_default.editStore.setDesignModeDisabled(true);
-	}
 	root_store_default.windowOriginUrl = event.data.payload.logContext?.superblocks_window_origin_url;
-	if (root_store_default.windowOriginUrl) import("../utils-Blrvh8kW.js").then((n) => n.r).then(({ initTracerProviderWithOrigin }) => {
+	if (root_store_default.windowOriginUrl) import("../utils-DXaAwgS_.js").then((n) => n.r).then(({ initTracerProviderWithOrigin }) => {
 		initTracerProviderWithOrigin(root_store_default.windowOriginUrl);
-		import("../logs-DwKJqoRc.js").then(({ initLibraryLoggerProvider }) => {
+		import("../logs-CUUgkcJf.js").then(({ initLibraryLoggerProvider }) => {
 			initLibraryLoggerProvider({
 				windowOriginUrl: root_store_default.windowOriginUrl,
 				appId: event.data.payload.appId,
@@ -2299,96 +1779,6 @@ function BuildErrorModal({ isOpen, error, onClose }) {
 	});
 }
 //#endregion
-//#region src/edit-mode/create-component.ts
-function getParentInfo(parent) {
-	const selectorIds = Array.from(getEditStore().runtimeTrackingStore.getSelectorIdsForSourceId(parent.id));
-	return { type: (selectorIds.length > 0 ? getEditStore().runtimeTrackingStore.getComponent(selectorIds[0]) : void 0)?.type };
-}
-function getComponentBaseProperties(componentType, _parentInfo, editorTemplateCreateRequest) {
-	let properties = {};
-	const editorTemplates = root_store_default.componentRegistry.getEditorTemplates(componentType);
-	if (editorTemplates && editorTemplates.length > 1) throw new Error(`Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`);
-	if (editorTemplateCreateRequest?.properties) properties = {
-		...properties,
-		...editorTemplateCreateRequest.properties
-	};
-	return {
-		properties: { ...properties },
-		children: editorTemplateCreateRequest?.children ?? []
-	};
-}
-function getCreateAtParentElement(relativeParent, createAt) {
-	if (createAt === "root") {
-		const currentSelectors = Array.from(getEditStore().runtimeTrackingStore.getSelectorIdsForSourceId(relativeParent.id));
-		if (currentSelectors.length === 0) throw new Error(`No selector found for parent: ${relativeParent.id}`);
-		const appSelectorId = getEditStore().runtimeTrackingStore.getClosestAncestorByType(currentSelectors[0], "App");
-		if (!appSelectorId) throw new Error(`App component not found for parent: ${relativeParent.id}`);
-		const appComponent = getEditStore().runtimeTrackingStore.getComponent(appSelectorId);
-		if (!appComponent) throw new Error(`App component not found for selector: ${appSelectorId}`);
-		return { source: { id: appComponent.sourceId } };
-	} else return { source: relativeParent };
-}
-async function createComponent({ componentType, parent, scopeName, baseProperties = {}, skipSecondaryComponentsCreation, otherComponentsUpdates }) {
-	const parentInfo = getParentInfo(parent);
-	const editorTemplates = root_store_default.componentRegistry.getEditorTemplates(componentType);
-	if (editorTemplates && editorTemplates.length > 1) throw new Error(`Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`);
-	const context = {
-		parentInfo,
-		defaultTagNames: root_store_default.componentRegistry.defaultTagNames,
-		selfTagName: componentType,
-		generateUniqueName: (prefix) => `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-	};
-	const editorTemplateCreateRequest = editorTemplates?.[0]?.create?.(context);
-	const primaryEditorTemplateCreateRequest = Array.isArray(editorTemplateCreateRequest) ? editorTemplateCreateRequest[0] : editorTemplateCreateRequest;
-	if (editorTemplateCreateRequest && primaryEditorTemplateCreateRequest?.type !== componentType) throw new Error(`When defining a ${Array.isArray(editorTemplateCreateRequest) ? "multiple" : "single"} component to be created on an EditorTemplate, the type must match with the component being created. got: ${primaryEditorTemplateCreateRequest?.type} when it should have been ${componentType}`);
-	const editorTemplateCreateRequests = Array.isArray(editorTemplateCreateRequest) ? editorTemplateCreateRequest : [editorTemplateCreateRequest];
-	const editStore = getEditStore();
-	function editorTemplateCreateRequestToInternalCreateRequest({ editorTemplateCreateRequest, baseProperties }) {
-		const type = editorTemplateCreateRequest?.type ?? componentType;
-		const { properties: propertiesFromType, children } = getComponentBaseProperties(type, parentInfo, editorTemplateCreateRequest);
-		const properties = {
-			...propertiesFromType,
-			...baseProperties
-		};
-		return {
-			parentElement: getCreateAtParentElement(parent, editorTemplateCreateRequest?.createAt),
-			tagName: type,
-			properties,
-			children,
-			scopeName,
-			id: editStore.operationManager.generateSourceId()
-		};
-	}
-	const createRequests = editorTemplateCreateRequests.map((editorTemplateCreateRequest, index) => editorTemplateCreateRequestToInternalCreateRequest({
-		editorTemplateCreateRequest,
-		baseProperties: index === 0 ? baseProperties : {}
-	}));
-	const hasOtherComponentsUpdates = otherComponentsUpdates && Object.keys(otherComponentsUpdates).length > 0;
-	const hasMultipleCreateComponents = editorTemplateCreateRequests.length > 1 && !skipSecondaryComponentsCreation;
-	if (hasOtherComponentsUpdates || hasMultipleCreateComponents) {
-		const performOtherComponentsUpdates = (otherComponentsUpdates) => {
-			Object.entries(otherComponentsUpdates).forEach(([sourceId, updates]) => {
-				editStore.operationManager.setWidgetProperties({
-					sourceId,
-					properties: updates
-				});
-			});
-		};
-		editStore.operationManager.batchUpdate(() => {
-			if (skipSecondaryComponentsCreation) editStore.operationManager.createComponent(createRequests[0]);
-			else createRequests.forEach((createRequest) => {
-				editStore.operationManager.createComponent(createRequest);
-			});
-			if (hasOtherComponentsUpdates) performOtherComponentsUpdates(otherComponentsUpdates);
-		});
-	} else editStore.operationManager.createComponent(createRequests[0]);
-	/**
-	* Returns the single id, or the the last component if there are multiple.
-	* See EditorTemplate's definition to understand why.
-	*/
-	return createRequests.at(-1).id;
-}
-//#endregion
 //#region src/edit-mode/features/ai-store.ts
 var AiManager = class {
 	_isTaggingEnabled = true;
@@ -3077,9 +2467,6 @@ var OperationManager = class {
 	get pendingDeleteOperations() {
 		return this.pendingTransactions.filter((t) => t.type === "editor:deleteComponents");
 	}
-	get pendingSetPropertiesOperations() {
-		return this.pendingTransactions.filter((t) => t.type === "editor:setProperties");
-	}
 	get hasPendingOperations() {
 		return this.pendingTransactions.length > 0;
 	}
@@ -3104,7 +2491,6 @@ var OperationManager = class {
 		if (this.waitingForBatch) this.batchOperations.push(opWithId);
 		else switch (operation.type) {
 			case "editor:moveComponent": return editorBridge.editOpRequest("editor:moveComponent", payload);
-			case "editor:setProperties": return editorBridge.editOpRequest("editor:setProperties", payload);
 			case "editor:createComponent": return editorBridge.editOpRequest("editor:createComponent", payload);
 			case "editor:deleteComponents": return editorBridge.editOpRequest("editor:deleteComponents", payload);
 		}
@@ -3204,32 +2590,6 @@ var OperationManager = class {
 					});
 					break;
 				}
-				case "editor:setProperties": {
-					const { type, payload } = operation;
-					this.addPendingTransaction({
-						type,
-						id: payload.transaction.id,
-						payload
-					});
-					break;
-				}
-				case "editor:deleteProperties": {
-					const { payload } = operation;
-					const asSetProperties = {
-						element: { source: { id: payload.element.source.id } },
-						properties: Object.fromEntries(payload.properties.map((p) => [p, {
-							type: "STATIC",
-							value: void 0,
-							__info: true
-						}]))
-					};
-					this.addPendingTransaction({
-						type: "editor:setProperties",
-						id: batchTransactionId ?? payload.transaction.id,
-						payload: asSetProperties
-					});
-					break;
-				}
 				default: console.error("Unknown edit operation", operation);
 			}
 		};
@@ -3242,34 +2602,6 @@ var OperationManager = class {
 			for (const update of payload.updates) addOperation(update, payload.transaction.id);
 		} else addOperation(operation);
 	}
-	@action writeRuntimeProperties(sourceId, transactionId, updates) {
-		this.addPendingTransaction({
-			type: "editor:setProperties",
-			id: transactionId,
-			payload: {
-				element: { source: { id: sourceId } },
-				properties: updates
-			}
-		});
-	}
-	@action setWidgetProperties({ sourceId, properties, callback }) {
-		const payload = {
-			element: { source: { id: sourceId } },
-			properties
-		};
-		this.executeOrAddToBatch({
-			type: "editor:setProperties",
-			payload,
-			callback
-		});
-	}
-	@action setWidgetProperty({ sourceId, property, value, callback }) {
-		this.setWidgetProperties({
-			sourceId,
-			properties: { [property]: value },
-			callback
-		});
-	}
 	async ensureFilesSynced() {
 		await source_update_api_default.ensureFilesSynced();
 	}
@@ -3278,68 +2610,6 @@ var OperationManager = class {
 	}
 };
 //#endregion
-//#region src/edit-mode/features/properties-panel-manager.ts
-var PropertiesPanelManager = class {
-	propertiesDefinitions = /* @__PURE__ */ new Map();
-	propertiesPanelTrackerDisposer = null;
-	_propertyLookupCache = /* @__PURE__ */ new Map();
-	removeHotReloadListener = null;
-	constructor(editStore, componentsManager) {
-		this.editStore = editStore;
-		this.componentsManager = componentsManager;
-		makeAutoObservable(this, { _propertyLookupCache: false });
-		this.attachHotReloadListener();
-	}
-	getPropertiesPanel(selectorId) {
-		const component = this.editStore.runtimeTrackingStore.getComponent(selectorId);
-		const props = component?.props;
-		if (!component?.type) return { sections: [] };
-		const componentType = component.displayName || component.type;
-		if (!componentType) return { sections: [] };
-		const propertiesDefinition = this.propertiesDefinitions.get(componentType);
-		if (!propertiesDefinition) return { sections: [] };
-		return createPropertiesPanelDefinition(propertiesDefinition, props ?? {});
-	}
-	trackPropertiesPanel(selectorId) {
-		if (this.propertiesPanelTrackerDisposer) this.propertiesPanelTrackerDisposer();
-		const sourceId = this.editStore.runtimeTrackingStore.getSourceId(selectorId);
-		if (!sourceId) return;
-		this.propertiesPanelTrackerDisposer = autorun(() => {
-			const propertiesPanel = this.getPropertiesPanel(selectorId);
-			editorBridge.addPropertiesPanel(sourceId, propertiesPanel);
-		}, { name: `trackPropertiesPanel[${selectorId}]` });
-	}
-	untrackPropertiesPanel() {
-		this.propertiesPanelTrackerDisposer?.();
-		this.propertiesPanelTrackerDisposer = null;
-	}
-	getPropertiesDefinition(type) {
-		return this.propertiesDefinitions.get(type);
-	}
-	setPropertiesDefinition(widgetType, propertiesDefinition) {
-		this.propertiesDefinitions.set(widgetType, propertiesDefinition);
-	}
-	updatePropertiesDefinitionForType(type) {
-		console.log("[internal] [NOOP] updatePropertiesDefinitionForType: ", type);
-	}
-	computeAndApplySideEffectsForPropertyUpdate(payload) {
-		console.log("[internal] [NOOP] computeAndApplySideEffectsForPropertyUpdate");
-		return { [payload.sourceId]: payload.updates };
-	}
-	/**
-	* When a custom component's source code is updated, we want to update the properties definition for that component.
-	* In order to do that, we need to listen to vite's hot reload events. We can't put import.meta.hot calls in the library
-	* because Vite just compiled all of those out in library builds, so we inject a listener from the plugin instead.
-	* https://github.com/vitejs/vite/blob/v6.2/packages/vite/src/node/plugins/define.ts#L37
-	*/
-	attachHotReloadListener() {
-		this.removeHotReloadListener?.();
-		this.removeHotReloadListener = this.editStore.onViteMessage(ViteMessageKind.UPDATE_CUSTOM_COMPONENT, (message) => {
-			this.updatePropertiesDefinitionForType(message.component);
-		});
-	}
-};
-//#endregion
 //#region src/edit-mode/runtime-graph/observable-graph.ts
 var ObservableGraph = class extends Graph {
 	constructor(args) {
@@ -3556,143 +2826,9 @@ var RuntimeTrackingStore = class {
 	}
 };
 //#endregion
-//#region src/edit-mode/features/resizing-store.ts
-var ResizingManager = class {
-	_activeResizes = /* @__PURE__ */ new Map();
-	constructor(root) {
-		this.root = root;
-		makeAutoObservable(this);
-		startEditorSync({
-			store: this,
-			storeId: "resizing",
-			projection(store) {
-				const resize = store.activeResize;
-				return {
-					isResizing: resize != null,
-					activeResize: resize ? {
-						width: resize.widthToUpdate,
-						height: resize.heightToUpdate
-					} : null
-				};
-			}
-		});
-	}
-	get activeResize() {
-		const selectedSourceId = this.root.editStore?.ui.getSelectedSourceIds()[0];
-		if (!selectedSourceId) return null;
-		return this._activeResizes.get(selectedSourceId);
-	}
-	isLockedAspectRatio(selectorId) {
-		const component = this.root.editStore?.runtimeTrackingStore.getComponent(selectorId);
-		return (component?.type ? this.root.componentRegistry.getEditorConfig(component?.type) : null)?.isFixedAspectRatio === true;
-	}
-	startResizing(dragStartX, dragStartY, selectorId, position) {
-		const component = this.root.editStore?.runtimeTrackingStore.getComponent(selectorId);
-		if (!component) {
-			console.error(`Could not find component ${selectorId}`);
-			return;
-		}
-		this._activeResizes.set(component.sourceId, {
-			selectorId,
-			sourceId: component.sourceId,
-			dragStartX,
-			dragStartY,
-			start: {
-				width: (component?.props?.width)?.value ?? (component?.props?.size)?.value ?? 0,
-				height: (component?.props?.height)?.value ?? 0
-			},
-			resizedPosition: position,
-			widthToUpdate: null,
-			heightToUpdate: null,
-			isApplyingResize: false
-		});
-	}
-	calculateDimension(baseValue, delta) {
-		return Math.floor(Math.max(baseValue + delta, 0));
-	}
-	handleResizeDimension(params) {
-		const { resizeState, dimension, delta, canResize, position } = params;
-		if (!canResize) return;
-		const isHorizontal = dimension === "width";
-		const startValue = resizeState.start[dimension];
-		let newValue = null;
-		if (position.includes(isHorizontal ? "left" : "top")) newValue = this.calculateDimension(startValue, -delta);
-		else if (position.includes(isHorizontal ? "right" : "bottom")) newValue = this.calculateDimension(startValue, delta);
-		return () => {
-			if (newValue) resizeState[`${dimension}ToUpdate`] = Dim.px(newValue);
-		};
-	}
-	resizeWidget(currentX, currentY, selectorId, canResizeWidth, canResizeHeight) {
-		const sourceId = this.root.editStore?.runtimeTrackingStore.getSourceId(selectorId);
-		const component = this.root.editStore?.runtimeTrackingStore.getComponent(selectorId);
-		if (!component?.type) return;
-		const resizeState = sourceId && this._activeResizes.get(sourceId);
-		if (!resizeState) return;
-		const widthMode = (component?.props?.width)?.mode;
-		const heightMode = (component?.props?.height)?.mode;
-		const lockedAspectRatio = this.isLockedAspectRatio(selectorId);
-		const deltaX = currentX - resizeState.dragStartX;
-		const deltaY = lockedAspectRatio ? deltaX : currentY - resizeState.dragStartY;
-		const updateWidth = this.handleResizeDimension({
-			resizeState,
-			dimension: "width",
-			delta: deltaX,
-			canResize: canResizeWidth,
-			mode: widthMode,
-			position: resizeState.resizedPosition
-		});
-		const updateHeight = this.handleResizeDimension({
-			resizeState,
-			dimension: "height",
-			delta: deltaY,
-			canResize: canResizeHeight,
-			mode: heightMode,
-			position: resizeState.resizedPosition
-		});
-		if (updateWidth) updateWidth();
-		if (updateHeight) updateHeight();
-		this._activeResizes.set(sourceId, resizeState);
-	}
-	pendingResize(sourceId) {
-		const resizeState = this._activeResizes.get(sourceId);
-		if (!resizeState) return null;
-		return {
-			width: resizeState.widthToUpdate,
-			height: resizeState.heightToUpdate
-		};
-	}
-	get hasAnyPendingResize() {
-		return Array.from(this._activeResizes.values()).some((state) => state.widthToUpdate || state.heightToUpdate);
-	}
-	get pendingResizes() {
-		return Array.from(this._activeResizes.values()).filter((state) => !state.isApplyingResize);
-	}
-	applyResize(selectorId) {
-		const sourceId = this.root.editStore?.runtimeTrackingStore.getSourceId(selectorId);
-		const type = (this.root.editStore?.runtimeTrackingStore.getComponent(selectorId))?.type;
-		if (!type) return;
-		const resizeState = sourceId && this._activeResizes.get(sourceId);
-		if (!resizeState) return;
-		resizeState.isApplyingResize = true;
-		const properties = {
-			...resizeState.heightToUpdate && type !== "Icon" && { height: Property$1.Dimension(resizeState.heightToUpdate) },
-			...resizeState.widthToUpdate && type !== "Icon" && { width: Property$1.Dimension(resizeState.widthToUpdate) },
-			...resizeState.widthToUpdate && type === "Icon" && { size: Property$1.Dimension(resizeState.widthToUpdate) }
-		};
-		if (Object.keys(properties).length > 0) this.root.editStore?.operationManager.setWidgetProperties({
-			sourceId: resizeState.sourceId,
-			properties,
-			callback: () => {
-				this._activeResizes.delete(sourceId);
-			}
-		});
-	}
-};
-//#endregion
 //#region src/edit-mode/features/ui-store.ts
 const MULTI_SELECT_ENABLED = false;
 var UIStore = class {
-	resizing;
 	_selectedSourceIds = [];
 	_selectedSelectorIds = [];
 	_focusedSelectorId = null;
@@ -3701,7 +2837,6 @@ var UIStore = class {
 	constructor(root, editStore) {
 		this.root = root;
 		this.editStore = editStore;
-		this.resizing = new ResizingManager(root);
 		makeObservable(this, {
 			_selectedSourceIds: observable,
 			_selectedSelectorIds: observable,
@@ -3709,6 +2844,7 @@ var UIStore = class {
 			setSelectedSourceIds: action,
 			setSelectedSelectorIds: action,
 			setFocusedIds: action,
+			selectSource: action,
 			selectWidget: action
 		});
 	}
@@ -3758,19 +2894,8 @@ var UIStore = class {
 	}
 	setSelectedSourceIds(sourceIds) {
 		this.newComponentSelectPromise?.cancel();
-		this.subscribeNewSourceIdsToRuntimeSync(sourceIds);
 		this._selectedSourceIds = sourceIds;
 	}
-	subscribeNewSourceIdsToRuntimeSync(sourceIds) {
-		const previousSourceIds = new Set(this._selectedSourceIds);
-		const newSourceIds = new Set(sourceIds);
-		previousSourceIds.forEach((sourceId) => {
-			if (!newSourceIds.has(sourceId)) this.editStore.runtimeSubscriptionsStore.unsubscribe(sourceId);
-		});
-		newSourceIds.forEach((sourceId) => {
-			if (!previousSourceIds.has(sourceId)) this.editStore.runtimeSubscriptionsStore.subscribe(sourceId);
-		});
-	}
 	setSelectedSelectorIds(selectorIds) {
 		this.newComponentSelectPromise?.cancel();
 		this._selectedSelectorIds = selectorIds;
@@ -3778,6 +2903,20 @@ var UIStore = class {
 	setFocusedIds(selectorId) {
 		this._focusedSelectorId = selectorId;
 	}
+	selectSource(sourceId) {
+		const selectorIds = this.getMostRelevantSelectorIdsForSourceId(sourceId);
+		if (!sourceId || selectorIds.length === 0) {
+			this.setSelectedSourceIds([]);
+			this.setSelectedSelectorIds([]);
+			this.setFocusedIds(null);
+			return;
+		}
+		if (!this.isSourceSelected(sourceId)) {
+			this.setSelectedSourceIds([sourceId]);
+			this.setSelectedSelectorIds(selectorIds);
+			this.setFocusedIds(selectorIds[0]);
+		}
+	}
 	selectWidget(selectorId, _addToSelection = false) {
 		this.newComponentSelectPromise?.cancel();
 		const addToSelection = _addToSelection && MULTI_SELECT_ENABLED;
@@ -3787,17 +2926,13 @@ var UIStore = class {
 			editorBridge.selectWidgets([]);
 			this.setSelectedSourceIds([]);
 			this.setSelectedSelectorIds([]);
-			this.editStore.propertiesPanelManager.untrackPropertiesPanel();
-			if (this.editStore.interactionMode === "design") this.editStore.setDesignModeLocked(false);
 			return;
 		}
 		const sourceIds = addToSelection ? [...this._selectedSourceIds, sourceId] : [sourceId];
 		const selectorIds = addToSelection ? [...this._selectedSelectorIds, selectorId] : [selectorId];
 		this.setSelectedSourceIds(sourceIds);
 		this.setSelectedSelectorIds(selectorIds);
-		this.editStore.propertiesPanelManager.trackPropertiesPanel(selectorId);
 		editorBridge.selectWidgets(sourceIds, selectorId);
-		if (this.editStore.interactionMode === "design") this.editStore.setDesignModeLocked(true);
 	}
 	/**
 	* This is cursed because component selection actually needs to be done by instance ids, but
@@ -3815,129 +2950,6 @@ var UIStore = class {
 	}
 };
 //#endregion
-//#region src/edit-mode/runtime-sync/builders.ts
-const MAX_SUBTREE_DEPTH = 30;
-function buildComposite(editStore, params) {
-	const { sourceId } = params;
-	const runtimeStore = editStore.runtimeTrackingStore;
-	const selectorIds = editStore.ui.getMostRelevantSelectorIdsForSourceId(sourceId);
-	if (selectorIds.length === 0) return null;
-	const selectorId = selectorIds[0];
-	const componentNode = runtimeStore.getComponent(selectorId);
-	if (!componentNode) return null;
-	const component = {
-		selectorId: componentNode.selectorId,
-		sourceId: componentNode.sourceId,
-		type: getComponentType(componentNode),
-		displayName: runtimeStore.getDisplayName(selectorId),
-		isSbComponent: componentNode.isSbComponent,
-		isHtmlElement: componentNode.isHtmlElement,
-		props: componentNode.props
-	};
-	const parentSelectorId = runtimeStore.getComponentParent(selectorId);
-	return {
-		component,
-		parent: parentSelectorId ? buildComponentData(runtimeStore, parentSelectorId) : null,
-		children: buildChildren(runtimeStore, selectorId),
-		path: buildPathToRoot(runtimeStore, selectorId),
-		subtree: buildSubtreeNode(runtimeStore, selectorId, MAX_SUBTREE_DEPTH) ?? void 0
-	};
-}
-function buildComponentData(store, selectorId) {
-	const componentNode = store.getComponent(selectorId);
-	if (!componentNode) return null;
-	return {
-		selectorId: componentNode.selectorId,
-		sourceId: componentNode.sourceId,
-		type: getComponentType(componentNode),
-		displayName: store.getDisplayName(selectorId),
-		isSbComponent: componentNode.isSbComponent,
-		isHtmlElement: componentNode.isHtmlElement,
-		props: componentNode.props
-	};
-}
-function buildChildren(store, selectorId) {
-	return store.getComponentChildren(selectorId).map((childId) => buildComponentData(store, childId)).filter(Boolean);
-}
-function buildPathToRoot(store, selectorId) {
-	const path = [];
-	let current = selectorId;
-	const visited = /* @__PURE__ */ new Set();
-	while (current && !visited.has(current)) {
-		visited.add(current);
-		const component = store.getComponent(current);
-		if (component && !component.noSelect) path.unshift({
-			selectorId: component.selectorId,
-			sourceId: component.sourceId,
-			displayName: store.getDisplayName(current),
-			type: getComponentType(component)
-		});
-		current = store.getComponentParent(current);
-	}
-	if (current && visited.has(current)) console.warn(`[RuntimeSync] Cycle detected in component graph at ${current}`);
-	return path;
-}
-function buildSubtreeNode(store, selectorId, remainingDepth) {
-	const component = store.getComponent(selectorId);
-	if (!component) return null;
-	const children = [];
-	if (remainingDepth > 0) {
-		const childSelectorIds = store.getComponentChildren(selectorId);
-		for (const childId of childSelectorIds) {
-			const childNode = buildSubtreeNode(store, childId, remainingDepth - 1);
-			if (childNode) children.push(childNode);
-		}
-	}
-	return {
-		selectorId,
-		sourceId: component.sourceId,
-		displayName: store.getDisplayName(selectorId),
-		type: getComponentType(component),
-		children
-	};
-}
-function getComponentType(component) {
-	if (typeof component.type === "function") return component.type.name;
-	if (typeof component.type === "string") return component.type;
-	return "Component";
-}
-//#endregion
-//#region src/edit-mode/runtime-sync/runtime-subscriptions-store.ts
-/**
-* MobX store that manages runtime component subscriptions.
-* Tracks which components are subscribed and builds fresh composites on-demand.
-* The subscriptions getter allows startEditorSync reactions to track deep observables
-* from buildComposite, eliminating the need for manual reaction management.
-*/
-var RuntimeSubscriptionsStore = class {
-	subscribedSourceIds = observable.set();
-	constructor(editStore) {
-		this.editStore = editStore;
-		makeAutoObservable(this, {
-			subscribe: action,
-			unsubscribe: action,
-			clearAll: action,
-			subscriptions: computed
-		});
-	}
-	subscribe(sourceId) {
-		this.subscribedSourceIds.add(sourceId);
-	}
-	unsubscribe(sourceId) {
-		this.subscribedSourceIds.delete(sourceId);
-	}
-	clearAll() {
-		this.subscribedSourceIds.clear();
-	}
-	get subscriptions() {
-		const out = {};
-		this.subscribedSourceIds.forEach((sourceId) => {
-			out[sourceId] = buildComposite(this.editStore, { sourceId });
-		});
-		return out;
-	}
-};
-//#endregion
 //#region src/edit-mode/edit-store.ts
 const isSessionRecordingEnabled = () => {
 	return window._SB_ENABLE_SESSION_RECORDING ?? false;
@@ -3945,62 +2957,37 @@ const isSessionRecordingEnabled = () => {
 var EditStore = class {
 	ui;
 	operationManager;
-	propertiesPanelManager;
 	runtimeTrackingStore;
 	connectionManager;
 	ai;
-	runtimeSubscriptionsStore;
 	isInitialized = false;
 	recordingInitialized = false;
 	interactionMode = "interactive";
 	lastInteractionMode = "interactive";
-	isDesignModeLocked = false;
-	designModeDisabled = false;
 	viteMessageListeners = /* @__PURE__ */ new Map();
 	constructor(rootStore) {
 		this.ui = new UIStore(rootStore, this);
 		this.operationManager = new OperationManager();
-		this.propertiesPanelManager = new PropertiesPanelManager(this, rootStore.componentRegistry);
 		this.runtimeTrackingStore = new RuntimeTrackingStore(this);
-		this.runtimeSubscriptionsStore = new RuntimeSubscriptionsStore(this);
 		this.connectionManager = new ConnectionManager();
 		this.ai = new AiManager(this.runtimeTrackingStore);
 		makeObservable(this, {
 			isInitialized: observable,
 			interactionMode: observable,
-			isDesignModeLocked: observable,
-			designModeDisabled: observable,
 			setIsInitialized: action,
-			setInteractionMode: action,
-			setDesignModeLocked: action,
-			setDesignModeDisabled: action
+			setInteractionMode: action
 		});
 	}
 	setIsInitialized(isInitialized) {
 		if (this.isInitialized) return;
 		this.isInitialized = isInitialized;
-		if (isInitialized) startEditorSync({
-			store: this.runtimeSubscriptionsStore,
-			storeId: "runtimeSync",
-			projection: (store) => store.subscriptions
-		});
-	}
-	setDesignModeDisabled(disabled) {
-		this.designModeDisabled = disabled;
-		if (disabled && this.lastInteractionMode === "design") this.lastInteractionMode = "interactive";
 	}
 	setInteractionMode(mode, notifyEditor = false) {
-		if (this.designModeDisabled && mode === "design") mode = "interactive";
 		if (this.interactionMode === mode) return;
 		this.lastInteractionMode = this.interactionMode;
 		this.interactionMode = mode;
-		if (mode === "design") this.isDesignModeLocked = false;
-		else if (this.lastInteractionMode === "design") this.isDesignModeLocked = false;
 		if (notifyEditor) editorBridge.setInteractionMode(mode);
 	}
-	setDesignModeLocked(locked) {
-		this.isDesignModeLocked = locked;
-	}
 	onViteMessage(kind, callback) {
 		this.viteMessageListeners.set(kind, [...this.viteMessageListeners.get(kind) || [], callback]);
 		return () => {
@@ -4355,7 +3342,7 @@ function convertPercentageInTransform(transformValue, width, height) {
 //#endregion
 //#region src/edit-mode/interaction-layer/interaction-rect.tsx
 const useSelectionElements = (params) => {
-	const { focusedSelectorId, selectedSourceIds, selectedSelectorIds, targetedSourceIds, aiContextMode, interactionMode } = params;
+	const { focusedSelectorId, selectedSourceIds, selectedSelectorIds, targetedSourceIds, aiContextMode } = params;
 	const visibleTargetedComponents = useMemo(() => {
 		const components = [];
 		targetedSourceIds.forEach((sourceId) => {
@@ -4380,7 +3367,7 @@ const useSelectionElements = (params) => {
 			});
 		});
 		selectedSourceIds.forEach((sourceId) => {
-			(interactionMode === "design" ? getEditStore().runtimeTrackingStore.getSelectorIdsForSourceId(sourceId) : selectedSelectorIds).forEach((selectorId) => {
+			selectedSelectorIds.forEach((selectorId) => {
 				const component = getEditStore().runtimeTrackingStore.getComponent(selectorId);
 				if (component && !targetedSourceIds.includes(component.sourceId)) {
 					const displayName = getEditStore().runtimeTrackingStore.getDisplayName(selectorId);
@@ -4394,11 +3381,11 @@ const useSelectionElements = (params) => {
 				}
 			});
 		});
-		if (focusedSelectorId && (aiContextMode === AiContextMode.AUTO_SELECT || !selectedSelectorIds.includes(focusedSelectorId) && interactionMode === "design")) {
+		if (focusedSelectorId && aiContextMode === AiContextMode.AUTO_SELECT) {
 			const { type, displayName, sourceId } = selectDisplayNameAndVisibility(focusedSelectorId);
 			if (sourceId) selectedRects.push({
 				selectorId: focusedSelectorId,
-				sourceId: sourceId ?? focusedSelectorId,
+				sourceId,
 				displayName,
 				selectionType: "FOCUSED",
 				type
@@ -4411,8 +3398,7 @@ const useSelectionElements = (params) => {
 		selectedSelectorIds,
 		focusedSelectorId,
 		aiContextMode,
-		targetedSourceIds,
-		interactionMode
+		targetedSourceIds
 	]);
 };
 const InteractionRectTargetBorder = ({ selectorId }) => {
@@ -4541,16 +3527,6 @@ function EditorHotkeys({ children }) {
 		enableOnTags: ["TEXTAREA", "INPUT"],
 		enableOnContentEditable: true
 	});
-	useEditorHotkeys("command+d, ctrl+d", (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		const editStore = getEditStore();
-		editorBridge.setAiContextMode(AiContextMode.SILENT);
-		editStore.setInteractionMode("design", true);
-	}, {
-		enableOnTags: ["TEXTAREA", "INPUT"],
-		enableOnContentEditable: true
-	});
 	useEditorHotkeys("esc", (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -4569,7 +3545,7 @@ function EditorHotkeys({ children }) {
 		editStore.ui.selectWidget(null);
 		editorBridge.setAiContextMode(AiContextMode.SILENT);
 		const lastInteractionMode = editStore.lastInteractionMode;
-		if (editStore.interactionMode === "interactive" || editStore.interactionMode === "design") editStore.setInteractionMode("full-preview", true);
+		if (editStore.interactionMode === "interactive") editStore.setInteractionMode("full-preview", true);
 		else editStore.setInteractionMode(lastInteractionMode, true);
 	}, {
 		enableOnTags: [
@@ -4812,7 +3788,7 @@ function installEditModeErrorCapture(deps = {}) {
 //#endregion
 //#region src/edit-mode/screenshot-handler.ts
 let cleanupCallback$1 = void 0;
-const MAX_SCREENSHOT_DIMENSION = 2e3 * .98;
+const MAX_SCREENSHOT_DIMENSION = 1568;
 const SCREENSHOT_WEBP_QUALITY = .8;
 const MAX_SCREENSHOT_BYTES = 256 * 1024;
 /** Decreasing webp qualities tried, in order, to fit {@link MAX_SCREENSHOT_BYTES}. */
@@ -5174,25 +4150,17 @@ function initializeTaggedElementMetadataHandler() {
 let _setReloadKey;
 let latestConnectionStartTime;
 if (import.meta.hot) {
-	console.debug("[internal] [iframe-wrappers] registering reload listeners");
 	import.meta.hot.on("sb:force-remount-after-reload", () => {
 		tracker.dontSkipUntilNextReload();
 		_setReloadKey?.((currentKey) => currentKey + 1);
 	});
 	import.meta.hot.on("vite:beforeFullReload", () => {
 		if (!isEmbeddedBySuperblocksFirstParty()) return;
-		console.debug("[internal] [iframe-wrappers] vite:beforeFullReload");
 		editorBridge.sendAppFrameWillReload();
 	});
 	import.meta.hot.on("vite:beforeUpdate", (args) => {
 		try {
-			const paths = (args?.updates ?? []).map((update) => update.path);
-			const pathStr = paths.join(", ");
-			console.debug("[internal] [iframe-wrappers] vite:beforeUpdate", pathStr);
-			if (paths.some((path) => path.includes("server/apis/index.ts")) && isEditMode() && root_store_default.sdkApiEnabled) {
-				console.debug("[internal] [iframe-wrappers] API registry updated, re-discovering APIs");
-				discoverAndRegisterSdkApis();
-			}
+			if ((args?.updates ?? []).map((update) => update.path).some((path) => path.includes("server/apis/index.ts")) && isEditMode() && root_store_default.sdkApiEnabled) discoverAndRegisterSdkApis();
 		} catch (error) {
 			console.warn("[internal] [iframe-wrappers] vite:beforeUpdate error:", error);
 		}
@@ -5203,7 +4171,6 @@ if (isEditMode()) {
 	const setupInitializer = () => {
 		if (!isEmbeddedBySuperblocksFirstParty()) return;
 		const handleInit = async ({ data }) => {
-			console.debug("[internal] [iframe-wrappers] handling sb-init");
 			latestConnectionStartTime = data.payload.connectionStartTime;
 			if (data.payload.windowOriginUrl) initTracerProviderWithOrigin(data.payload.windowOriginUrl);
 			initializeEditStore();
@@ -5218,7 +4185,7 @@ if (isEditMode()) {
 				editStore.ai.startEditing();
 				if (aiState.editingComponents) editStore.ai.setEditingComponents(aiState.editingComponents);
 			}
-			if (interactionMode) editStore.setInteractionMode(interactionMode);
+			if (interactionMode) editStore.setInteractionMode(normalizeInteractionMode(interactionMode));
 			if (data.payload.sessionRecordingKey && data.payload.userId && data.payload.appId) editStore.startRecording({
 				userId: data.payload.userId,
 				appId: data.payload.appId,
@@ -5293,7 +4260,6 @@ const IframeConnected = observer(function IframeConnected(props) {
 	const [reloadKey, setReloadKey] = useState(0);
 	_setReloadKey = setReloadKey;
 	useEffect(() => {
-		console.debug("[internal] [iframe-wrappers] sending ready");
 		editorBridge.sendReady(latestConnectionStartTime);
 	}, []);
 	useEffect(() => {
@@ -5315,10 +4281,7 @@ const IframeConnected = observer(function IframeConnected(props) {
 	const connectionStatus = root_store_default.editStore?.connectionManager.connectionStatus;
 	if (connectionStatus === "pre-init" || connectionStatus === "connecting") return /* @__PURE__ */ jsx(FullPageSpinner, {});
 	if (isPossiblyEditor && root_store_default.editStore?.isInitialized && typeof window !== "undefined") return /* @__PURE__ */ jsx(React.Fragment, { children: props.children }, reloadKey);
-	if (isEditMode()) {
-		console.log("In edit mode, but editor has not initialized yet");
-		return null;
-	}
+	if (isEditMode()) return null;
 	return /* @__PURE__ */ jsx(React.Fragment, { children: props.children }, reloadKey);
 });
 const WithUserWrapper$1 = (props) => {
@@ -5368,60 +4331,18 @@ const EmbedWrapper$2 = (props) => {
 			if (event.data.payload.dpRoutingConfig) root_store_default.apis.dpRoutingConfig = event.data.payload.dpRoutingConfig;
 		};
 		iframeMessageHandler.addEventListener("sb-update-active-agents", updateActiveAgentsListener);
-		const retrievePropertyPanelPropsListener = (event) => {
+		const selectSourceListener = (event) => {
 			const sourceId = event.data.payload.sourceId;
-			const selectorIds = getEditStore().ui.getMostRelevantSelectorIdsForSourceId(sourceId);
-			if (!sourceId || selectorIds.length === 0) {
-				getEditStore().ui.setSelectedSourceIds([]);
-				getEditStore().ui.setSelectedSelectorIds([]);
-				getEditStore().ui.setFocusedIds(null);
-				return;
-			}
-			if (!getEditStore().ui.isSourceSelected(sourceId)) {
-				getEditStore().ui.setSelectedSourceIds([sourceId]);
-				getEditStore().ui.setSelectedSelectorIds(Array.from(selectorIds));
-				getEditStore().ui.setFocusedIds(Array.from(selectorIds)[0]);
-			}
-			getEditStore().propertiesPanelManager.trackPropertiesPanel(selectorIds[0]);
+			getEditStore().ui.selectSource(sourceId);
 		};
-		iframeMessageHandler.addEventListener("sb-retrieve-property-panel-props", retrievePropertyPanelPropsListener);
+		iframeMessageHandler.addEventListener("sb-select-source", selectSourceListener);
 		const editOperationAcknowledgeListener = (event) => {
 			getEditStore().operationManager.acknowledgeEditOperation(event.data.payload);
 		};
 		iframeMessageHandler.addEventListener("sb-edit-operation-acknowledge", editOperationAcknowledgeListener);
-		const updatePropertyWithEffectsListener = (event) => {
-			const payload = {
-				sourceId: event.data.payload.sourceId,
-				updates: event.data.payload.updates
-			};
-			const propUpdates = getEditStore().propertiesPanelManager.computeAndApplySideEffectsForPropertyUpdate(payload);
-			editorBridge.resolvePromise(event.data.payload.callbackId, propUpdates);
-			editorBridge.resolvePromise(event.data.payload.callbackId, payload.updates);
-			Object.keys(propUpdates).forEach((sourceId) => {
-				getEditStore().operationManager.writeRuntimeProperties(sourceId, event.data.payload.transaction.id, propUpdates[sourceId]);
-			});
-			getEditStore().operationManager.writeRuntimeProperties(payload.sourceId, event.data.payload.transaction.id, payload.updates);
-		};
-		iframeMessageHandler.addEventListener("sb-update-property-with-effects", updatePropertyWithEffectsListener);
-		const createComponentListener = async (event) => {
-			const { componentType, parent, scopeName, baseProperties, skipSecondaryComponentsCreation, otherComponentsUpdates } = event.data.payload;
-			try {
-				await createComponent({
-					componentType,
-					parent,
-					scopeName,
-					baseProperties,
-					skipSecondaryComponentsCreation,
-					otherComponentsUpdates
-				});
-			} catch (error) {
-				console.error("Failed to create component:", error);
-			}
-		};
-		iframeMessageHandler.addEventListener("sb-create-component", createComponentListener);
 		const setInteractionModeListener = async (event) => {
 			const { interactionMode } = event.data.payload;
-			root_store_default.editStore?.setInteractionMode(interactionMode);
+			root_store_default.editStore?.setInteractionMode(normalizeInteractionMode(interactionMode));
 		};
 		iframeMessageHandler.addEventListener("set-interaction-mode", setInteractionModeListener);
 		const aiUpdatesListener = (event) => {
@@ -5454,13 +4375,8 @@ const EmbedWrapper$2 = (props) => {
 			iframeMessageHandler.removeEventListener("sb-bootstrap-response", bootstrapResponseListener);
 			iframeMessageHandler.removeEventListener("sb-update-active-agents", updateActiveAgentsListener);
 			iframeMessageHandler.removeEventListener("sb-edit-operation-acknowledge", editOperationAcknowledgeListener);
-			iframeMessageHandler.removeEventListener("sb-update-property-with-effects", updatePropertyWithEffectsListener);
-			iframeMessageHandler.removeEventListener("sb-retrieve-property-panel-props", retrievePropertyPanelPropsListener);
-			iframeMessageHandler.removeEventListener("sb-create-component", createComponentListener);
+			iframeMessageHandler.removeEventListener("sb-select-source", selectSourceListener);
 			iframeMessageHandler.removeEventListener("ai-updates", aiUpdatesListener);
-			try {
-				getEditStore().runtimeSubscriptionsStore.clearAll();
-			} catch {}
 		};
 	}, []);
 	useEmbedMessageListeners(navigate, superblocksContext);
@@ -5488,18 +4404,6 @@ const EmbedWrapper$2 = (props) => {
 					}
 					case "RUN_API": {
 						const { apiName, traceHeaders, callId, isTestRun, inputs } = action.payload;
-						console.debug("[internal] [iframe-wrappers] Received RUN_API:", {
-							apiName,
-							callId
-						});
-						console.log("[iframe-wrappers] Received RUN_API:", {
-							apiName,
-							callId,
-							isTestRun,
-							hasInputs: !!inputs,
-							inputs,
-							traceHeaders
-						});
 						if (root_store_default.sdkApiEnabled) {
 							const executionId = generateId();
 							const inputRecord = inputs ?? {};
@@ -5557,37 +4461,30 @@ const EmbedWrapper$2 = (props) => {
 									}
 								});
 							});
-						} else if (isTestRun) {
-							console.log("[iframe-wrappers] Running as test run");
-							root_store_default.apis.runApiByPath({
-								path: getApiPath(apiName),
-								inputs: {
-									...traceHeaders,
-									...inputs
-								},
-								isTestRun: true
-							}).catch((error) => {
-								console.error(`Failed to test API ${apiName}:`, error);
-							});
-						} else if (callId) {
-							console.log("[iframe-wrappers] Re-running with callId:", callId);
-							root_store_default.apis.rerunApiByCallId(callId).catch((error) => {
-								console.error(`Failed to re-run API with callId ${callId}:`, error);
-							});
-						} else {
-							console.log("[iframe-wrappers] This might be a Clark request - executing API normally");
-							root_store_default.apis.runApiByPath({
-								path: getApiPath(apiName),
-								inputs: {
-									...traceHeaders,
-									...inputs
-								},
-								callId,
-								isTestRun: false
-							}).catch((error) => {
-								console.error(`Failed to run API ${apiName}:`, error);
-							});
-						}
+						} else if (isTestRun) root_store_default.apis.runApiByPath({
+							path: getApiPath(apiName),
+							inputs: {
+								...traceHeaders,
+								...inputs
+							},
+							isTestRun: true
+						}).catch((error) => {
+							console.error(`Failed to test API ${apiName}:`, error);
+						});
+						else if (callId) root_store_default.apis.rerunApiByCallId(callId).catch((error) => {
+							console.error(`Failed to re-run API with callId ${callId}:`, error);
+						});
+						else root_store_default.apis.runApiByPath({
+							path: getApiPath(apiName),
+							inputs: {
+								...traceHeaders,
+								...inputs
+							},
+							callId,
+							isTestRun: false
+						}).catch((error) => {
+							console.error(`Failed to run API ${apiName}:`, error);
+						});
 						break;
 					}
 				}
@@ -5848,12 +4745,9 @@ function getElementsInScope(containerElement, allElements, editStore) {
 }
 function useWidgetHover() {
 	const editStore = getEditStore();
-	const interactionMode = editStore.interactionMode;
 	const aiContextMode = editStore.ai.getAiContextMode();
 	useEffect(() => {
-		const isDesignMode = interactionMode === "design";
-		const isTargetMode = aiContextMode === AiContextMode.AUTO_SELECT;
-		if (!isDesignMode && !isTargetMode) return;
+		if (aiContextMode !== AiContextMode.AUTO_SELECT) return;
 		const rootElement = document.body;
 		const handleMouseMove = (event) => {
 			const selectorId = getMostRelevantWidgetAtPoint({
@@ -5874,11 +4768,7 @@ function useWidgetHover() {
 			rootElement?.removeEventListener("mousemove", throttledHandleMouseMove);
 			rootElement?.removeEventListener("mouseleave", handleMouseLeave);
 		};
-	}, [
-		interactionMode,
-		aiContextMode,
-		editStore.ui
-	]);
+	}, [aiContextMode, editStore.ui]);
 }
 function useWidgetClick() {
 	useEffect(() => {
@@ -5899,27 +4789,19 @@ function useWidgetClick() {
 			});
 			if (!selectorId) return;
 			const component = editStore.runtimeTrackingStore.getComponent(selectorId);
-			if (!component) {
-				console.log("[internal] [useWidgetClick] No component found for selectorId");
-				return;
-			}
+			if (!component) return;
 			const sourceId = component.sourceId;
 			const { displayName } = selectDisplayNameAndVisibility(selectorId);
-			const isTargettingComponent = editStore.ai.shouldToggleComponentInAiContext() || event.altKey;
-			if (editStore.interactionMode === "design" || isTargettingComponent) {
+			if (editStore.ai.shouldToggleComponentInAiContext() || event.altKey) {
 				event.preventDefault();
 				event.stopPropagation();
-			}
-			if (isTargettingComponent) {
-				console.log("[internal] [useWidgetClick] Toggling component in AI context");
 				editorBridge.toggleComponentInAiContext(sourceId, selectorId, displayName);
 				return;
 			}
 			editStore.ui.selectWidget(selectorId, event.shiftKey === true);
 		};
 		const handlePointerDown = (event) => {
-			const isTargetMode = editStore.ai.shouldToggleComponentInAiContext();
-			if ((editStore.interactionMode === "design" || isTargetMode) && !isInsideInteractionLayer(event.target)) {
+			if (editStore.ai.shouldToggleComponentInAiContext() && !isInsideInteractionLayer(event.target)) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
@@ -5934,15 +4816,13 @@ function useWidgetClick() {
 }
 const InteractionLayer = observer(({ containerElement, layerId }) => {
 	const editStore = getEditStore();
-	const interactionMode = editStore.interactionMode;
 	const allSelectedElements = useSelectionElements({
 		focusedSourceId: editStore.ui.getFocusedSourceId(),
 		focusedSelectorId: editStore.ui.getFocusedSelectorId(),
 		selectedSelectorIds: editStore.ui.getSelectedSelectorIds(),
 		selectedSourceIds: editStore.ui.getSelectedSourceIds(),
 		targetedSourceIds: editStore.ai.getTargetedComponents(),
-		aiContextMode: editStore.ai.getAiContextMode(),
-		interactionMode
+		aiContextMode: editStore.ai.getAiContextMode()
 	});
 	const selectedElementsInScope = React.useMemo(() => getElementsInScope(containerElement, allSelectedElements, editStore), [
 		containerElement,
@@ -5967,14 +4847,10 @@ const InteractionLayer = observer(({ containerElement, layerId }) => {
 			container.remove();
 			setPortalContainer(null);
 		};
-	}, [
-		containerElement,
-		layerId,
-		editStore.interactionMode
-	]);
+	}, [containerElement, layerId]);
 	if (!portalContainer) return null;
 	return ReactDOM.createPortal(/* @__PURE__ */ jsx("div", {
-		style: interactionMode === "design" ? { "--primary-rect-color": "#0BAD5C" } : { "--primary-rect-color": "#0087E0" },
+		style: { "--primary-rect-color": "#0087E0" },
 		children: interactionRectsForSelectedElements
 	}), portalContainer);
 });
@@ -6024,49 +4900,16 @@ const InteractionLayerManager = observer(() => {
 		}, layerId);
 	}) });
 });
-function useGlobalContextMenu() {
-	useEffect(() => {
-		const rootElement = document.body;
-		const handleContextMenu = (event) => {
-			if (event.defaultPrevented) return;
-			if (!rootElement) return;
-			const editStore = getEditStore();
-			const isDesignMode = editStore.interactionMode === "design";
-			const isTargetMode = editStore.ai.shouldToggleComponentInAiContext();
-			if (!isDesignMode || isTargetMode) return;
-			const selectorId = getMostRelevantWidgetAtPoint({
-				x: event.clientX,
-				y: event.clientY,
-				rootElement
-			});
-			if (!selectorId) return;
-			const component = editStore.runtimeTrackingStore.getComponent(selectorId);
-			if (!component) return;
-			const sourceId = component.sourceId;
-			event.preventDefault();
-			event.stopPropagation();
-			editorBridge.registerContextMenuClick(sourceId, selectorId, event.clientX, event.clientY);
-		};
-		rootElement?.addEventListener("contextmenu", handleContextMenu, { capture: true });
-		return () => {
-			rootElement?.removeEventListener("contextmenu", handleContextMenu, { capture: true });
-		};
-	}, []);
-}
 const ExternalInteractionLayer = observer(() => {
 	const isEditStoreInitialized = Boolean(root_store_default.editStore?.isInitialized);
-	useGlobalContextMenu();
-	const isDesignMode = root_store_default.editStore?.interactionMode === "design";
 	const isTargetMode = root_store_default.editStore?.ai.shouldToggleComponentInAiContext();
 	const isHighlightMode = root_store_default.editStore?.ai.getAiContextMode() === AiContextMode.HIGHLIGHT;
 	const hasSelectedWidget = (root_store_default.editStore?.ui.getSelectedSourceIds().length ?? 0) > 0;
-	if (!(isEditStoreInitialized && (isDesignMode || isTargetMode || isHighlightMode || hasSelectedWidget))) return null;
-	const pencilCursor = `url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.12" d="M11.8703 5.81338C10.8293 5.47941 10.0738 4.50819 10.0626 3.35904L10.7109 2.71072C11.4229 1.99876 12.5772 1.99877 13.2892 2.71075C14.0011 3.42272 14.0011 4.57702 13.2892 5.28897L13.2083 5.36988C12.8412 5.73698 12.3436 5.9652 11.8703 5.81338Z" fill="black" stroke="black" stroke-width="0.125"/><path d="M10.0001 3.33308L4.18981 9.14329C3.6314 9.7017 3.25077 10.4129 3.0959 11.1873L2.66675 13.333L4.8125 12.9039C5.58686 12.749 6.29806 12.3684 6.85646 11.81L12.6667 5.99967M10.0001 3.33308L10.6668 2.66633C11.4032 1.92996 12.5971 1.92997 13.3335 2.66636V2.66636C14.0698 3.40273 14.0698 4.59661 13.3335 5.33297L12.6667 5.99967M10.0001 3.33308C10.0001 4.8058 11.194 5.99967 12.6667 5.99967" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.0001 3.33308L4.18981 9.14329C3.6314 9.7017 3.25077 10.4129 3.0959 11.1873L2.66675 13.333L4.8125 12.9039C5.58686 12.749 6.29806 12.3684 6.85646 11.81L12.6667 5.99967M10.0001 3.33308L10.6668 2.66633C11.4032 1.92996 12.5971 1.92997 13.3335 2.66636V2.66636C14.0698 3.40273 14.0698 4.59661 13.3335 5.33297L12.6667 5.99967M10.0001 3.33308C10.0001 4.8058 11.194 5.99967 12.6667 5.99967" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>') 0 16, auto`;
+	if (!(isEditStoreInitialized && (isTargetMode || isHighlightMode || hasSelectedWidget))) return null;
 	const targetCursor = `url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 9.26316C8.69762 9.26316 9.26316 8.69762 9.26316 8C9.26316 7.30238 8.69762 6.73684 8 6.73684C7.30238 6.73684 6.73684 7.30238 6.73684 8C6.73684 8.69762 7.30238 9.26316 8 9.26316Z" fill="black"/><path d="M14 8C14 11.3137 11.3137 14 8 14M14 8C14 4.68629 11.3137 2 8 2M14 8H12M8 14C4.68629 14 2 11.3137 2 8M8 14V12M2 8C2 4.68629 4.68629 2 8 2M2 8H4M8 2V4M9.26316 8C9.26316 8.69762 8.69762 9.26316 8 9.26316C7.30238 9.26316 6.73684 8.69762 6.73684 8C6.73684 7.30238 7.30238 6.73684 8 6.73684C8.69762 6.73684 9.26316 7.30238 9.26316 8Z" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 8C14 11.3137 11.3137 14 8 14M14 8C14 4.68629 11.3137 2 8 2M14 8H12M8 14C4.68629 14 2 11.3137 2 8M8 14V12M2 8C2 4.68629 4.68629 2 8 2M2 8H4M8 2V4M9.26316 8C9.26316 8.69762 8.69762 9.26316 8 9.26316C7.30238 9.26316 6.73684 8.69762 6.73684 8C6.73684 7.30238 7.30238 6.73684 8 6.73684C8.69762 6.73684 9.26316 7.30238 9.26316 8Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>') 8 8, auto`;
 	let cursorStyle = "";
 	if (isTargetMode) cursorStyle = `* { cursor: ${targetCursor} !important; }`;
-	else if (isDesignMode) cursorStyle = `* { cursor: ${pencilCursor} !important; }`;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InteractionLayerManager, {}), cursorStyle && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: cursorStyle } })] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InteractionLayerManager, {}), cursorStyle && /* @__PURE__ */ jsx("style", { children: cursorStyle })] });
 });
 //#endregion
 //#region src/lib/internal-details/request-bootstrap.ts
@@ -6454,10 +5297,7 @@ const SbProvider = function SbProvider({ name = "codemode", children, className,
 		initializeStyles(name);
 	}, [name]);
 	useEffect(() => {
-		if (isEditMode()) {
-			initializeCSSVariables();
-			reportSbProviderRenderedEditMode();
-		}
+		if (isEditMode()) reportSbProviderRenderedEditMode();
 	}, []);
 	if (!isApisInitialized) return /* @__PURE__ */ jsx(FullPageSpinner, {});
 	return /* @__PURE__ */ jsxs("div", {
@@ -6479,6 +5319,12 @@ const editorConfig = {
 	isDraggable: false
 };
 //#endregion
+//#region src/lib/user-facing/properties-panel/mixins/styles-category.ts
+/** @deprecated Accepted for source compatibility. Returns an empty section. */
+const tailwindStylesCategory = (_props) => {
+	return Section.category(PropsCategory.Appearance);
+};
+//#endregion
 //#region src/lib/user-facing/components/app/props.ts
 const propertiesDefinition = {
 	contents: Section.category(PropsCategory.Content).children({ children: Prop.jsx() }),
@@ -7343,11 +6189,11 @@ const Title = styled.h3`
   margin-bottom: 0.5rem;
 `;
 const ErrorMessage = styled.p`
-  color: ${colors$1.GREY_500};
+  color: ${colors.GREY_500};
 `;
 const Button = styled.button`
-  border: 1px solid ${colors$1.GREY_100};
-  color: ${colors$1.GREY_600};
+  border: 1px solid ${colors.GREY_100};
+  color: ${colors.GREY_600};
   border-radius: 6px;
   padding: 2px 6px;
   font-size: 1rem;
@@ -7355,7 +6201,7 @@ const Button = styled.button`
   cursor: pointer;
 
   &:hover {
-    background-color: ${colors$1.GREY_100};
+    background-color: ${colors.GREY_100};
   }
 `;
 const ErrorComponent = ({ title, errorMessage, buttonText, handleButtonClick, errorCode, buttonPath, image: overrideImage, secondaryButtonAction, secondaryButtonText, hideActions }) => {