@superblocksteam/library 2.0.42 → 2.0.43-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { early_console_buffer_default } from "./early-console-buffer-DWTLgla0.js";
2
- import { CLASS_NAMES, DEFAULT_ANONYMOUS_SOURCE_ID, DevTools, EventFlow, GLOBAL_SCOPE_ID, LazyFunction, NavigationEvent, Prop, PropsPanelCategory, RecordProp, Section, VALIDATORS, addNewPromise, colors, createInternalPropsList, createManagedPropsList, createPropertiesPanelDefinition, editorBridge, generateId, getEditStore, getName, iframeMessageHandler, isEditMode, isEmbeddedBySuperblocksFirstParty, isLocalLink, isName, isNameEqual, navigation, rejectById, resolveById, root_store_default, run_event_handlers_default, sendNotification, startEditorSync, system_error_default } from "./root-store-mvrXQD3h.js";
2
+ import { CLASS_NAMES, DEFAULT_ANONYMOUS_SOURCE_ID, DevTools, EventFlow, FileManager, GLOBAL_SCOPE_ID, LazyFunction, NavigationEvent, Prop, PropsPanelCategory, RecordProp, Section, VALIDATORS, addNewPromise, colors, createInternalPropsList, createManagedPropsList, createPropertiesPanelDefinition, editorBridge, generateId, getEditStore, getFileWithUploadId, getName, iframeMessageHandler, isEditMode, isEmbeddedBySuperblocksFirstParty, isLocalLink, isName, isNameEqual, navigation, rejectById, resolveById, root_store_default, run_event_handlers_default, sendNotification, startEditorSync, system_error_default } from "./root-store-DSXdJ9lh.js";
3
3
  import "./utils-CCBWAYIM.js";
4
4
  import { AiContextMode, AiGenerationState, BindingMetaSymbol, SbEntityType, StateVarPersistence, StateVarPersistence as StateVarPersistence$1, ThemeMode, TriggerStepType, ViteMessageKind, isValidStepDef, sbEntitySymbol } from "@superblocksteam/library-shared/types";
5
5
  import _, { get, isEmpty, isEqual, isNumber, isObject, merge, set, throttle } from "lodash";
@@ -21,9 +21,9 @@ import { snapCenterToCursor } from "@dnd-kit/modifiers";
21
21
  import { Root, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
22
22
  import tinycolor from "tinycolor2";
23
23
  import { APCAcontrast, sRGBtoY } from "apca-w3";
24
+ import * as Dialog from "@radix-ui/react-dialog";
24
25
  import posthog from "posthog-js";
25
26
  import { useHotkeys } from "react-hotkeys-hook";
26
- import * as Dialog from "@radix-ui/react-dialog";
27
27
  import equal from "@superblocksteam/fast-deep-equal/es6";
28
28
  import copy from "copy-to-clipboard";
29
29
  import downloadjs from "downloadjs";
@@ -1221,8 +1221,7 @@ const cyrb53 = (str, seed = 0) => {
1221
1221
  const styleWithPrefix = (prefix) => (strings, ...params) => {
1222
1222
  const style = String.raw(strings, ...params);
1223
1223
  const namespace = prefix + cyrb53(style).toString(36);
1224
- const parsed = serialize(compile(`.${namespace}{${style}}`), middleware([prefixer, stringify]));
1225
- insertStyleRule(parsed);
1224
+ insertStyleRule(serialize(compile(`.${namespace}{${style}}`), middleware([prefixer, stringify])));
1226
1225
  return namespace;
1227
1226
  };
1228
1227
  const styleAsClass = styleWithPrefix("s");
@@ -2056,14 +2055,13 @@ Section.category(PropsPanelCategory.Layout).add({
2056
2055
  });
2057
2056
  const InternalStack = observer(({ direction = "column", spacing: spacing$1, children, shouldScrollContents: shouldScrollContents$1, className,...props }) => {
2058
2057
  const { height, width,...rest } = props;
2059
- const combinedClassName = [...useStackClasses({
2060
- direction,
2061
- verticalAlign: props.verticalAlign,
2062
- horizontalAlign: props.horizontalAlign,
2063
- shouldScrollContents: shouldScrollContents$1
2064
- }), className].filter(Boolean).join(" ");
2065
2058
  return /* @__PURE__ */ jsx("div", {
2066
- className: combinedClassName,
2059
+ className: [...useStackClasses({
2060
+ direction,
2061
+ verticalAlign: props.verticalAlign,
2062
+ horizontalAlign: props.horizontalAlign,
2063
+ shouldScrollContents: shouldScrollContents$1
2064
+ }), className].filter(Boolean).join(" "),
2067
2065
  ...rest,
2068
2066
  ref: props.dropTargetRef,
2069
2067
  children
@@ -2175,9 +2173,8 @@ const InternalContainer = (props) => {
2175
2173
  style,
2176
2174
  shouldApplyEmptyContainerMinHeight
2177
2175
  ]);
2178
- const classes = useMemo(() => [...componentClasses, props.className].join(" "), [componentClasses, props.className]);
2179
2176
  return /* @__PURE__ */ jsx(StyledContainerWrapper, {
2180
- className: classes,
2177
+ className: useMemo(() => [...componentClasses, props.className].join(" "), [componentClasses, props.className]),
2181
2178
  style: containerStyle,
2182
2179
  ...passThroughProps,
2183
2180
  "data-container-layout": props.layout,
@@ -2672,6 +2669,8 @@ const ErrorMessage$1 = styled.p`
2672
2669
  line-height: 1.5715;
2673
2670
  text-align: center;
2674
2671
  flex-shrink: 0;
2672
+ margin-top: 0;
2673
+ margin-bottom: 16px;
2675
2674
  `;
2676
2675
  const ErrorDetails = styled.details`
2677
2676
  margin-top: 24px;
@@ -2683,6 +2682,7 @@ const ErrorDetails = styled.details`
2683
2682
  0px 0px 1px 0px #22272f52,
2684
2683
  0px 1px 3px 0px #22272f1f;
2685
2684
  flex-shrink: 0;
2685
+ font-family: Inter;
2686
2686
 
2687
2687
  &[open] summary {
2688
2688
  margin-bottom: 12px;
@@ -2828,9 +2828,10 @@ const FixWithClarkButtonContainer = styled.button`
2828
2828
  cursor: not-allowed;
2829
2829
  }
2830
2830
  `;
2831
- function FixWithClarkButton({ identifier, error }) {
2832
- const isAiEditing = root_store_default.editStore?.ai.getIsEditing();
2831
+ function FixWithClarkButton({ identifier, error, onClick }) {
2832
+ const isAiEditing = root_store_default.editStore?.ai.getIsEditing() ?? false;
2833
2833
  const handleFixWithAi = () => {
2834
+ onClick?.();
2834
2835
  if (identifier) editorBridge.addComponentToAiContext(identifier.sourceId, identifier.instanceId);
2835
2836
  const prompt = buildRuntimeErrorPrompt(error);
2836
2837
  editorBridge.aiGenerate(prompt, true);
@@ -3136,13 +3137,10 @@ const ShimmerDiv = styled.div`
3136
3137
  */
3137
3138
  function SuspenseFallback({ style, noBorderRadius }) {
3138
3139
  const { theme } = useTheme$1();
3139
- const backgroundColor = theme?.colors?.neutral50 || "#f8f9fa";
3140
- const shimmerHighlight = theme?.colors?.neutral100 || "#ffffff";
3141
- const borderRadius$1 = noBorderRadius ? "0px" : theme?.borderRadius.value + theme?.borderRadius.mode;
3142
3140
  return /* @__PURE__ */ jsx(ShimmerDiv, {
3143
- $backgroundColor: backgroundColor,
3144
- $shimmerHighlight: shimmerHighlight,
3145
- $borderRadius: borderRadius$1,
3141
+ $backgroundColor: theme?.colors?.neutral50 || "#f8f9fa",
3142
+ $shimmerHighlight: theme?.colors?.neutral100 || "#ffffff",
3143
+ $borderRadius: noBorderRadius ? "0px" : theme?.borderRadius.value + theme?.borderRadius.mode,
3146
3144
  style: style?.(),
3147
3145
  className: CSS_CLASSES.ANCHOR_NAME,
3148
3146
  "data-test": "suspense-fallback"
@@ -3416,6 +3414,10 @@ const doesInteractionLayerContainInstance = (possibleParent, possibleChild, hand
3416
3414
  if (editStore.interactionLayerManager.interactionLayerInstanceIds.has(possibleParent)) return possibleChild === possibleParent || childMeta?.interactionLayerInstanceId === possibleParent;
3417
3415
  return parentMeta?.interactionLayerInstanceId === childMeta?.interactionLayerInstanceId;
3418
3416
  };
3417
+ const isPage = (instanceId) => {
3418
+ if (!instanceId) return false;
3419
+ return getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(instanceId)?.type === NATIVE_COMPONENT_TYPES.Page;
3420
+ };
3419
3421
 
3420
3422
  //#endregion
3421
3423
  //#region src/edit-mode/dnd/hooks/use-widget-node-ref.ts
@@ -3675,8 +3677,7 @@ const DropLayer = observer((props) => {
3675
3677
  const isDropTargetStackLike = editStore.ui.dnd.isDropTargetStackLike;
3676
3678
  const dropTargetId = editStore.ui.dnd.dropTargetId;
3677
3679
  const isDropTargetInInteractionLayer = doesInteractionLayerContainInstance(props.rootInstanceId, dropTargetId);
3678
- const possibleStackDrop = editStore.ui.dnd.isDragging && isDropTargetInInteractionLayer && Boolean(draggedWidgetType && dropTargetWidgetType) && isDropTargetStackLike;
3679
- return /* @__PURE__ */ jsxs(Fragment, { children: [possibleStackDrop && /* @__PURE__ */ jsx(StackDropPreview, {}), /* @__PURE__ */ jsx(DragOverlay, {
3680
+ return /* @__PURE__ */ jsxs(Fragment, { children: [editStore.ui.dnd.isDragging && isDropTargetInInteractionLayer && Boolean(draggedWidgetType && dropTargetWidgetType) && isDropTargetStackLike && /* @__PURE__ */ jsx(StackDropPreview, {}), /* @__PURE__ */ jsx(DragOverlay, {
3680
3681
  modifiers: [snapCenterToCursor],
3681
3682
  dropAnimation: null
3682
3683
  })] });
@@ -3887,9 +3888,8 @@ function InteractionRectActions(props) {
3887
3888
  const isAiTaggingEnabled = getEditStore().ai.getIsTaggingEnabled();
3888
3889
  const shouldHideActions = !isPrimaryInstanceId;
3889
3890
  const shouldShowAddToChatButton = isAiTaggingEnabled && (aiContextMode === AiContextMode.SILENT || aiContextMode === AiContextMode.HIGHLIGHT && type !== "TARGETED");
3890
- const shouldShowAiPurplePill = isAiTaggingEnabled && (aiContextMode === AiContextMode.AUTO_SELECT || aiContextMode === AiContextMode.HIGHLIGHT && type === "TARGETED");
3891
3891
  return /* @__PURE__ */ jsxs("div", {
3892
- className: `sb-edit-interaction-rect-actions ${shouldShowAiPurplePill ? "sb-edit-actions-target-mode" : ""}`,
3892
+ className: `sb-edit-interaction-rect-actions ${isAiTaggingEnabled && (aiContextMode === AiContextMode.AUTO_SELECT || aiContextMode === AiContextMode.HIGHLIGHT && type === "TARGETED") ? "sb-edit-actions-target-mode" : ""}`,
3893
3893
  "data-sb-actions-id": instanceId,
3894
3894
  style: {
3895
3895
  ...shouldHideActions ? { display: "none !important" } : {},
@@ -4132,7 +4132,7 @@ const useWidgetErrors = (params) => {
4132
4132
  };
4133
4133
  const useSelectionElements = (params) => {
4134
4134
  const { focusedInstanceId, selectedInstanceIds, targetedSourceIds, aiContextMode, rootId } = params;
4135
- const allTargetedComponents = useMemo(() => {
4135
+ const visibleTargetedComponents = useViewportIntersection(useMemo(() => {
4136
4136
  const components = [];
4137
4137
  targetedSourceIds.forEach((sourceId) => {
4138
4138
  const sourceInstanceIds = getEditStore().runtimeEntitiesManager.widgets.getAllInstanceIdsForSourceId(sourceId);
@@ -4142,8 +4142,7 @@ const useSelectionElements = (params) => {
4142
4142
  })));
4143
4143
  });
4144
4144
  return components;
4145
- }, [targetedSourceIds, rootId]);
4146
- const visibleTargetedComponents = useViewportIntersection(allTargetedComponents);
4145
+ }, [targetedSourceIds, rootId]));
4147
4146
  return useObserverMemo(() => {
4148
4147
  const selectedRects = [];
4149
4148
  visibleTargetedComponents.forEach((component) => {
@@ -4401,28 +4400,26 @@ const InteractionLayer = observer((props) => {
4401
4400
  }, [handleCanvasClick]);
4402
4401
  const isAiEditing = editStore.ai.getIsEditing();
4403
4402
  if (!isActive || isAiEditing) return null;
4404
- const interactionRectsForSelectedElements = selectedElements.filter((info) => {
4405
- const id = getEditWrapperIdWithType(info.instanceId, info.type);
4406
- const element = document.querySelector(`[data-sb-selector="${id}"]`);
4407
- return !isComponentTypeDetached(info.type) && element != null;
4408
- }).map((info, index) => {
4409
- return /* @__PURE__ */ jsx(InteractionRect, {
4410
- isDragging: editStore.ui.dnd.isDragging,
4411
- ...info
4412
- }, info.instanceId + info.selectionType + index);
4413
- });
4414
- const interactionRectIfDetachedComponent = isComponentTypeDetached(props.rootType) ? /* @__PURE__ */ jsx(InteractionRect, {
4415
- isDragging: false,
4416
- selectionType: "FOCUSED",
4417
- instanceId: props.rootInstanceId,
4418
- displayName: props.rootName ?? "Unknown",
4419
- hideRectBorder: false
4420
- }, props.rootInstanceId) : null;
4421
4403
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
4422
4404
  className: "sb-interaction-layer-wrapper",
4423
4405
  children: [
4424
- interactionRectsForSelectedElements,
4425
- interactionRectIfDetachedComponent,
4406
+ selectedElements.filter((info) => {
4407
+ const id = getEditWrapperIdWithType(info.instanceId, info.type);
4408
+ const element = document.querySelector(`[data-sb-selector="${id}"]`);
4409
+ return !isComponentTypeDetached(info.type) && element != null;
4410
+ }).map((info, index) => {
4411
+ return /* @__PURE__ */ jsx(InteractionRect, {
4412
+ isDragging: editStore.ui.dnd.isDragging,
4413
+ ...info
4414
+ }, info.instanceId + info.selectionType + index);
4415
+ }),
4416
+ isComponentTypeDetached(props.rootType) ? /* @__PURE__ */ jsx(InteractionRect, {
4417
+ isDragging: false,
4418
+ selectionType: "FOCUSED",
4419
+ instanceId: props.rootInstanceId,
4420
+ displayName: props.rootName ?? "Unknown",
4421
+ hideRectBorder: false
4422
+ }, props.rootInstanceId) : null,
4426
4423
  Object.entries(widgetWithErrors).map(([id, { name }]) => /* @__PURE__ */ jsx(InteractionRect, {
4427
4424
  isDragging: false,
4428
4425
  selectionType: "ERROR",
@@ -4787,9 +4784,7 @@ function getRgbArrayFromHex(hex) {
4787
4784
  ];
4788
4785
  }
4789
4786
  function chooseContrastTextColor(primaryColor) {
4790
- const whiteContrast = checkContrast(LIGHT_MODE_NEUTRALS[0], primaryColor);
4791
- const darkContrast = checkContrast(DARK_MODE_NEUTRALS[0], primaryColor);
4792
- return whiteContrast >= darkContrast - CONTRAST_TEXT_THRESHOLD ? LIGHT_MODE_NEUTRALS[0] : DARK_MODE_NEUTRALS[0];
4787
+ return checkContrast(LIGHT_MODE_NEUTRALS[0], primaryColor) >= checkContrast(DARK_MODE_NEUTRALS[0], primaryColor) - CONTRAST_TEXT_THRESHOLD ? LIGHT_MODE_NEUTRALS[0] : DARK_MODE_NEUTRALS[0];
4793
4788
  }
4794
4789
  function checkContrast(foreground, background) {
4795
4790
  const textColor = getRgbArrayFromHex(foreground);
@@ -4812,11 +4807,10 @@ const getPrimaryVariants = (primaryColor, neutralColor) => {
4812
4807
  const shouldLighten = tinycolor(primaryColor).isDark();
4813
4808
  const primary500 = neutralColor ? adjustForReadability(primaryColor, neutralColor) : primaryColor;
4814
4809
  const primary600 = shouldLighten ? tinycolor(primary500).lighten(10).toHexString() : tinycolor(primary500).darken(10).toHexString();
4815
- const primary700 = shouldLighten ? tinycolor(primary600).lighten(5).toHexString() : tinycolor(primary600).darken(5).toHexString();
4816
4810
  return {
4817
4811
  primary500,
4818
4812
  primary600,
4819
- primary700
4813
+ primary700: shouldLighten ? tinycolor(primary600).lighten(5).toHexString() : tinycolor(primary600).darken(5).toHexString()
4820
4814
  };
4821
4815
  };
4822
4816
  function generateThemeColors({ themePrimaryColor, palette, isDarkMode }) {
@@ -4918,7 +4912,7 @@ function generateTheme(userDefinedTheme, overrides, overrideMode) {
4918
4912
  fontFamily: typeFace,
4919
4913
  textColor: { default: generatedColors.neutral700 }
4920
4914
  };
4921
- const theme = {
4915
+ return merge({
4922
4916
  version: 5,
4923
4917
  colors: generatedColors,
4924
4918
  fontFamily: typeFace,
@@ -5471,8 +5465,7 @@ function generateTheme(userDefinedTheme, overrides, overrideMode) {
5471
5465
  disabled: generatedColors.neutral300,
5472
5466
  error: generatedColors.danger
5473
5467
  } } }
5474
- };
5475
- return merge(theme, overrides);
5468
+ }, overrides);
5476
5469
  }
5477
5470
 
5478
5471
  //#endregion
@@ -5986,8 +5979,7 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, onClose
5986
5979
  root_store_default.editStore?.connectionManager.initializeSocket();
5987
5980
  try {
5988
5981
  let stopSocketHeartbeat;
5989
- const ws = await connectWebSocket(wsUrl.toString());
5990
- const isocket = new ISocketWithClientAuth(ws, void 0, {
5982
+ const socket = createISocketClient(new ISocketWithClientAuth(await connectWebSocket(wsUrl.toString()), void 0, {
5991
5983
  nonVisualEdit: [async () => {
5992
5984
  getEditStore().ui.selectWidget(null);
5993
5985
  }],
@@ -6076,8 +6068,7 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, onClose
6076
6068
  connectionTimeoutInSeconds: void 0,
6077
6069
  noResponseTimeoutInSeconds: 60
6078
6070
  }
6079
- });
6080
- const socket = createISocketClient(isocket);
6071
+ }));
6081
6072
  console.log("connected to socket");
6082
6073
  stopSocketHeartbeat = startSocketHeartbeat(socket);
6083
6074
  root_store_default.editStore?.connectionManager.connect();
@@ -6121,11 +6112,9 @@ function generateAndSendComponentDocs(options) {
6121
6112
  //#endregion
6122
6113
  //#region src/lib/internal-details/identifier-normalizer.ts
6123
6114
  const getNormalizedIdInfo = (params) => {
6124
- const name = params.bind?.entityName;
6125
- const scopeId = params.bind?.scopeId ?? params.fallbackScopeId;
6126
6115
  return {
6127
- name,
6128
- scopeId
6116
+ name: params.bind?.entityName,
6117
+ scopeId: params.bind?.scopeId ?? params.fallbackScopeId
6129
6118
  };
6130
6119
  };
6131
6120
 
@@ -6715,6 +6704,241 @@ function useGetCurrentUserQuery() {
6715
6704
  }, []);
6716
6705
  }
6717
6706
 
6707
+ //#endregion
6708
+ //#region src/edit-mode/build-error-notification.tsx
6709
+ const ModalOverlay = styled(Dialog.Overlay)`
6710
+ position: fixed;
6711
+ inset: 0;
6712
+ background: rgba(0, 0, 0, 0.5);
6713
+ z-index: 1000;
6714
+ animation: fadeIn 0.2s ease-out;
6715
+
6716
+ @keyframes fadeIn {
6717
+ from {
6718
+ opacity: 0;
6719
+ }
6720
+ to {
6721
+ opacity: 1;
6722
+ }
6723
+ }
6724
+ `;
6725
+ const ModalContent = styled(Dialog.Content)`
6726
+ position: fixed;
6727
+ top: 50%;
6728
+ left: 50%;
6729
+ transform: translate(-50%, -50%);
6730
+ background: white;
6731
+ border-radius: 8px;
6732
+ box-shadow:
6733
+ 0 0 1px rgba(0, 0, 0, 0.1),
6734
+ 0 20px 25px -5px rgba(0, 0, 0, 0.1),
6735
+ 0 10px 10px -5px rgba(0, 0, 0, 0.04);
6736
+ max-width: 650px;
6737
+ max-height: 80vh;
6738
+ width: 90vw;
6739
+ padding: 16px;
6740
+ overflow-y: auto;
6741
+ z-index: 1001;
6742
+ animation: slideIn 0.2s ease-out;
6743
+ scrollbar-width: thin;
6744
+
6745
+ @keyframes slideIn {
6746
+ from {
6747
+ opacity: 0;
6748
+ transform: translate(-50%, -50%) scale(0.95);
6749
+ }
6750
+ to {
6751
+ opacity: 1;
6752
+ transform: translate(-50%, -50%) scale(1);
6753
+ }
6754
+ }
6755
+
6756
+ &:focus {
6757
+ outline: none;
6758
+ }
6759
+ `;
6760
+ const InnerModalContent = styled.div`
6761
+ position: relative;
6762
+ padding: 2.5rem;
6763
+ `;
6764
+ const ModalCloseButtonContainer = styled.div`
6765
+ position: sticky;
6766
+ top: 0;
6767
+ width: 100%;
6768
+ display: flex;
6769
+ justify-content: flex-end;
6770
+ `;
6771
+ const ModalCloseButton = styled(Dialog.Close)`
6772
+ height: fit-content;
6773
+ background: none;
6774
+ border: none;
6775
+ color: #6c7689;
6776
+ cursor: pointer;
6777
+ padding: 4px;
6778
+ border-radius: 4px;
6779
+ transition: background-color 0.2s;
6780
+
6781
+ &:hover {
6782
+ background-color: #f3f4f6;
6783
+ }
6784
+
6785
+ &:focus {
6786
+ outline: 2px solid #08a4ff;
6787
+ outline-offset: 2px;
6788
+ }
6789
+ `;
6790
+ const ErrorNotificationButton = styled.button`
6791
+ position: fixed;
6792
+ right: 16px;
6793
+ bottom: 16px;
6794
+ z-index: 1000;
6795
+ background: none;
6796
+ border: none;
6797
+ padding: 0;
6798
+ cursor: pointer;
6799
+ outline: none;
6800
+ `;
6801
+ const ErrorNotificationContent = styled.div`
6802
+ background: #ef4444;
6803
+ color: white;
6804
+ padding: 12px 16px;
6805
+ border-radius: 6px;
6806
+ font-size: 14px;
6807
+ font-weight: 500;
6808
+ line-height: 1.4;
6809
+ max-width: 40rem;
6810
+ box-shadow:
6811
+ 0 10px 25px -5px rgba(0, 0, 0, 0.1),
6812
+ 0 8px 10px -6px rgba(0, 0, 0, 0.1);
6813
+ border: 1px solid rgba(255, 255, 255, 0.1);
6814
+ backdrop-filter: blur(10px);
6815
+ display: flex;
6816
+ align-items: center;
6817
+ gap: 8px;
6818
+ transition: all 0.2s ease;
6819
+
6820
+ &:hover {
6821
+ transform: translateY(-2px);
6822
+ box-shadow:
6823
+ 0 20px 25px -5px rgba(0, 0, 0, 0.15),
6824
+ 0 10px 10px -5px rgba(0, 0, 0, 0.1);
6825
+ }
6826
+ `;
6827
+ const ErrorText = styled.span`
6828
+ overflow: hidden;
6829
+ text-overflow: ellipsis;
6830
+ white-space: nowrap;
6831
+ `;
6832
+ const ErrorIcon = styled.svg`
6833
+ flex-shrink: 0;
6834
+ `;
6835
+ function BuildErrorNotification() {
6836
+ const [currentError, setCurrentError] = useState(null);
6837
+ const [isModalOpen, setIsModalOpen] = useState(false);
6838
+ const lastBuildError = useRef(null);
6839
+ useEffect(() => {
6840
+ if (typeof window !== "undefined" && window.__SB_MARK_APP_LOADED) window.__SB_MARK_APP_LOADED();
6841
+ if (import.meta.hot) {
6842
+ import.meta.hot.on("vite:error", (payload) => {
6843
+ const error = payload?.err || payload;
6844
+ const errorMessage = error?.message || String(error);
6845
+ let buildError;
6846
+ if (error?.name === "ImportError" || error?.importPath) buildError = {
6847
+ errorType: "import",
6848
+ error: errorMessage,
6849
+ stack: error?.stack || "",
6850
+ importPath: error?.importPath || "unknown"
6851
+ };
6852
+ else if (errorMessage.includes("Failed to resolve import")) {
6853
+ const importMatch = errorMessage.match(/Failed to resolve import ["'](.+?)["']/);
6854
+ buildError = {
6855
+ errorType: "import",
6856
+ error: errorMessage,
6857
+ stack: error?.stack || "",
6858
+ importPath: importMatch ? importMatch[1] : "unknown"
6859
+ };
6860
+ } else buildError = {
6861
+ errorType: "general",
6862
+ error: errorMessage,
6863
+ stack: error?.stack
6864
+ };
6865
+ setCurrentError(buildError);
6866
+ });
6867
+ import.meta.hot.on("vite:beforeUpdate", () => {
6868
+ setCurrentError(null);
6869
+ setIsModalOpen(false);
6870
+ });
6871
+ }
6872
+ }, []);
6873
+ useEffect(() => {
6874
+ if (currentError && !isEqual(lastBuildError.current, currentError)) {
6875
+ setIsModalOpen(true);
6876
+ lastBuildError.current = currentError;
6877
+ }
6878
+ }, [currentError]);
6879
+ if (!currentError) return null;
6880
+ const displayCornerError = !isModalOpen;
6881
+ const errorText = currentError.errorType === "import" ? "Import Error" : "Build Error";
6882
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BuildErrorModal, {
6883
+ isOpen: isModalOpen,
6884
+ error: currentError,
6885
+ onClose: () => setIsModalOpen(false)
6886
+ }), displayCornerError ? /* @__PURE__ */ jsx(ErrorNotificationButton, {
6887
+ onClick: () => setIsModalOpen(true),
6888
+ children: /* @__PURE__ */ jsxs(ErrorNotificationContent, { children: [/* @__PURE__ */ jsxs(ErrorIcon, {
6889
+ width: "16",
6890
+ height: "16",
6891
+ viewBox: "0 0 16 16",
6892
+ fill: "currentColor",
6893
+ children: [/* @__PURE__ */ jsx("path", { d: "M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z" }), /* @__PURE__ */ jsx("path", { d: "M7.002 11a1 1 0 112 0 1 1 0 01-2 0zM7.1 4.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 4.995z" })]
6894
+ }), /* @__PURE__ */ jsx(ErrorText, { children: errorText })] })
6895
+ }) : null] });
6896
+ }
6897
+ function BuildErrorModal({ isOpen, error, onClose }) {
6898
+ if (!error) return null;
6899
+ const title = error.errorType === "import" ? "Import error" : "Build error";
6900
+ const message = error.errorType === "import" ? /* @__PURE__ */ jsxs(Fragment, { children: ["Error importing ", /* @__PURE__ */ jsx("code", { children: error.importPath })] }) : "An error occurred during the build process";
6901
+ const details = error.stack && error.stack.trim() ? `${error.error}\n${error.stack}` : error.error;
6902
+ const errorObj = new Error(error.error);
6903
+ errorObj.stack = details || error.error;
6904
+ if (error.errorType === "import") errorObj.name = "ImportError";
6905
+ return /* @__PURE__ */ jsx(Dialog.Root, {
6906
+ open: isOpen,
6907
+ onOpenChange: onClose,
6908
+ children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
6909
+ "data-test": "build-error-modal",
6910
+ children: [/* @__PURE__ */ jsx(ModalCloseButtonContainer, { children: /* @__PURE__ */ jsx(ModalCloseButton, {
6911
+ "aria-label": "Close error dialog",
6912
+ children: /* @__PURE__ */ jsx("svg", {
6913
+ width: "16",
6914
+ height: "16",
6915
+ viewBox: "0 0 16 16",
6916
+ fill: "currentColor",
6917
+ children: /* @__PURE__ */ jsx("path", { d: "M12.8 4.4L11.6 3.2 8 6.8 4.4 3.2 3.2 4.4 6.8 8 3.2 11.6 4.4 12.8 8 9.2 11.6 12.8 12.8 11.6 9.2 8z" })
6918
+ })
6919
+ }) }), /* @__PURE__ */ jsxs(InnerModalContent, { children: [
6920
+ /* @__PURE__ */ jsx(ErrorIconContainer, { children: /* @__PURE__ */ jsx(StyledClarkIcon, {}) }),
6921
+ /* @__PURE__ */ jsx(Dialog.Title, {
6922
+ asChild: true,
6923
+ children: /* @__PURE__ */ jsx(ErrorTitle, { children: title })
6924
+ }),
6925
+ /* @__PURE__ */ jsx(ErrorMessage$1, {
6926
+ "data-test": "build-error-message",
6927
+ children: message
6928
+ }),
6929
+ /* @__PURE__ */ jsxs(ActionsContainer, { children: [/* @__PURE__ */ jsx(FixWithClarkButton, {
6930
+ error: errorObj,
6931
+ onClick: onClose
6932
+ }), /* @__PURE__ */ jsx(SecondaryButton, {
6933
+ onClick: () => window.location.reload(),
6934
+ children: "Refresh page"
6935
+ })] }),
6936
+ details ? /* @__PURE__ */ jsxs(ErrorDetails, { children: [/* @__PURE__ */ jsx(ErrorSummary, { children: "Full details" }), /* @__PURE__ */ jsx(ErrorStack, { children: details })] }) : error.errorType === "general" && error.error ? /* @__PURE__ */ jsxs(ErrorDetails, { children: [/* @__PURE__ */ jsx(ErrorSummary, { children: "Error details" }), /* @__PURE__ */ jsx(ErrorStack, { children: error.error })] }) : null
6937
+ ] })]
6938
+ })] })
6939
+ });
6940
+ }
6941
+
6718
6942
  //#endregion
6719
6943
  //#region src/edit-mode/dnd/is-nestable.ts
6720
6944
  function isNestable(componentType, _parentType) {
@@ -6878,11 +7102,10 @@ const fixCursorSnapOffset = (args) => {
6878
7102
  if (!a.pointerInside && b.pointerInside) return 1;
6879
7103
  return (bData?.depth ?? 0) - (aData?.depth ?? 0);
6880
7104
  });
6881
- const modifiedArgs = {
7105
+ const result = bubblingToParentIfFar({
6882
7106
  ...updated,
6883
7107
  collisions: sortedCollisions
6884
- };
6885
- const result = bubblingToParentIfFar(modifiedArgs);
7108
+ });
6886
7109
  if (result[0]) result[0].data = {
6887
7110
  ...result[0].data ?? {},
6888
7111
  injectedCollisionRect: updated.collisionRect
@@ -7080,16 +7303,14 @@ const useHandleDnDEvents = () => {
7080
7303
  const draggedId = event.active?.id ? String(event.active?.id) : null;
7081
7304
  if (dropTargetId !== editStore.ui.dnd.dropTargetId) throw new Error("Drop target id and drag over id do not match");
7082
7305
  if (!dropTargetId) throw new Error("No drop target id");
7083
- if (editStore.ui.dnd.isDropTargetStackLike) {
7084
- const dropInfo = editStore.ui.dnd.stack.refreshPositionsAndGetDropIndex();
7085
- possibleNewComponentId = await handleStackDrop({
7086
- dropInfo,
7087
- isDraggingNewComponent: editStore.ui.dnd.isDraggingNewComponent,
7088
- newComponentType: editStore.ui.dnd.dragToCanvasComponentType,
7089
- dropTargetId,
7090
- draggedId
7091
- });
7092
- } else throw new Error("Grid is no longer supported");
7306
+ if (editStore.ui.dnd.isDropTargetStackLike) possibleNewComponentId = await handleStackDrop({
7307
+ dropInfo: editStore.ui.dnd.stack.refreshPositionsAndGetDropIndex(),
7308
+ isDraggingNewComponent: editStore.ui.dnd.isDraggingNewComponent,
7309
+ newComponentType: editStore.ui.dnd.dragToCanvasComponentType,
7310
+ dropTargetId,
7311
+ draggedId
7312
+ });
7313
+ else throw new Error("Grid is no longer supported");
7093
7314
  } catch (e) {
7094
7315
  console.error("Error dropping item", e);
7095
7316
  } finally {
@@ -7122,11 +7343,8 @@ const DragHandlerComponent = () => {
7122
7343
  return null;
7123
7344
  };
7124
7345
  const DnDProvider = (props) => {
7125
- const pointerSensor = useSensor(PointerSensor, pointerConfig);
7126
- const customPointerSensor = useSensor(CustomPointerSensor);
7127
- const sensors = useSensors(pointerSensor, customPointerSensor);
7128
7346
  return /* @__PURE__ */ jsxs(DndContext, {
7129
- sensors,
7347
+ sensors: useSensors(useSensor(PointerSensor, pointerConfig), useSensor(CustomPointerSensor)),
7130
7348
  collisionDetection: collision_detection_default,
7131
7349
  children: [props.children, /* @__PURE__ */ jsx(DragHandlerComponent, {})]
7132
7350
  });
@@ -7577,8 +7795,7 @@ var PropertiesPanelManager = class {
7577
7795
  if (!props?.type) return { sections: [] };
7578
7796
  const propertiesDefinition$5 = this.propertiesDefinitions.get(props.type);
7579
7797
  if (!propertiesDefinition$5) return { sections: [] };
7580
- const state = this.entityManager.getState(scopeId);
7581
- return createPropertiesPanelDefinition(propertiesDefinition$5, props, state);
7798
+ return createPropertiesPanelDefinition(propertiesDefinition$5, props, this.entityManager.getState(scopeId));
7582
7799
  }
7583
7800
  trackPropertiesPanel(scopeId, instanceId, sourceId) {
7584
7801
  if (this.propertiesPanelTrackerDisposer) this.propertiesPanelTrackerDisposer();
@@ -8477,13 +8694,11 @@ const computeDragInfo = (params) => {
8477
8694
  gapSize /= 2;
8478
8695
  let offsetPx;
8479
8696
  if (potentialIdx === filteredChildIds.length) {
8480
- const lastInstanceId = filteredChildIds[filteredChildIds.length - 1];
8481
- const rect = childRects[lastInstanceId]?.[0];
8697
+ const rect = childRects[filteredChildIds[filteredChildIds.length - 1]]?.[0];
8482
8698
  if (!rect) return;
8483
8699
  offsetPx = major.end(rect) - DROP_LINE_THICKNESS / 2 + gapSize;
8484
8700
  } else {
8485
- const instanceId = filteredChildIds[potentialIdx];
8486
- const rect = childRects[instanceId]?.[0];
8701
+ const rect = childRects[filteredChildIds[potentialIdx]]?.[0];
8487
8702
  if (!rect) return;
8488
8703
  offsetPx = major.start(rect) - DROP_LINE_THICKNESS / 2 - gapSize;
8489
8704
  }
@@ -8521,8 +8736,7 @@ const computeDragInfo = (params) => {
8521
8736
  let insertionIndex = filteredInsertionIndex;
8522
8737
  if (insertionIndex === filteredChildIds.length) insertionIndex = childrenNodes.length;
8523
8738
  else {
8524
- const widgetAtInsertionIndex = filteredChildIds[filteredInsertionIndex];
8525
- const originalIndex = childRects[widgetAtInsertionIndex]?.[1];
8739
+ const originalIndex = childRects[filteredChildIds[filteredInsertionIndex]]?.[1];
8526
8740
  if (originalIndex != null) insertionIndex = originalIndex;
8527
8741
  }
8528
8742
  return {
@@ -8647,8 +8861,7 @@ var DragAndDropManager = class {
8647
8861
  }
8648
8862
  get isDropTargetStackLike() {
8649
8863
  const dropTargetId = this.dropTargetId;
8650
- const widgetMeta = dropTargetId ? getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(dropTargetId) : void 0;
8651
- return isComponentStacklike(widgetMeta);
8864
+ return isComponentStacklike(dropTargetId ? getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(dropTargetId) : void 0);
8652
8865
  }
8653
8866
  get draggedWidgetType() {
8654
8867
  if (this.isDraggingNewComponent) return this._dragToCanvasComponentType;
@@ -8678,12 +8891,11 @@ var DragAndDropManager = class {
8678
8891
  const draggedType = this.draggedWidgetType;
8679
8892
  const dropTargetType = this.dropTargetWidgetType;
8680
8893
  if (!draggedType || !dropTargetType) return false;
8681
- const dropTargetEmpty = (dropTargetInstanceId && getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(dropTargetInstanceId)?.children?.length === 0) ?? true;
8682
8894
  return isDragAndDropTypeValid({
8683
8895
  draggedType,
8684
8896
  dropTargetType,
8685
8897
  isDraggingNewComponent,
8686
- dropTargetEmpty
8898
+ dropTargetEmpty: (dropTargetInstanceId && getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(dropTargetInstanceId)?.children?.length === 0) ?? true
8687
8899
  });
8688
8900
  }
8689
8901
  canDragWidget(instanceId) {
@@ -9131,7 +9343,6 @@ var EditStore = class {
9131
9343
  isInitialized = false;
9132
9344
  recordingInitialized = false;
9133
9345
  isLivePreview = false;
9134
- currentImportError = null;
9135
9346
  viteMessageListeners = /* @__PURE__ */ new Map();
9136
9347
  constructor(rootStore) {
9137
9348
  this.ui = new ui_store_default(rootStore, this);
@@ -9144,8 +9355,7 @@ var EditStore = class {
9144
9355
  makeObservable(this, {
9145
9356
  isInitialized: observable,
9146
9357
  isLivePreview: observable,
9147
- setIsInitialized: action,
9148
- currentImportError: observable
9358
+ setIsInitialized: action
9149
9359
  });
9150
9360
  startEditorSync({
9151
9361
  storeId: "scope",
@@ -9167,19 +9377,10 @@ var EditStore = class {
9167
9377
  setIsInitialized(isInitialized) {
9168
9378
  if (this.isInitialized) return;
9169
9379
  this.isInitialized = isInitialized;
9170
- this.setupImportErrorListener();
9171
9380
  }
9172
9381
  setIsLivePreview(isLivePreview) {
9173
9382
  this.isLivePreview = isLivePreview;
9174
9383
  }
9175
- setupImportErrorListener() {
9176
- this.onViteMessage(ViteMessageKind.IMPORT_ERROR, (message) => {
9177
- this.currentImportError = message;
9178
- });
9179
- this.onViteMessage(ViteMessageKind.CLEAR_IMPORT_ERROR, () => {
9180
- this.currentImportError = null;
9181
- });
9182
- }
9183
9384
  onViteMessage(kind, callback) {
9184
9385
  this.viteMessageListeners.set(kind, [...this.viteMessageListeners.get(kind) || [], callback]);
9185
9386
  return () => {
@@ -9275,190 +9476,6 @@ function EditorHotkeys({ children }) {
9275
9476
  return /* @__PURE__ */ jsx(Fragment, { children });
9276
9477
  }
9277
9478
 
9278
- //#endregion
9279
- //#region src/edit-mode/import-error-notification.tsx
9280
- const ModalOverlay = styled(Dialog.Overlay)`
9281
- position: fixed;
9282
- inset: 0;
9283
- background: rgba(0, 0, 0, 0.5);
9284
- z-index: 1000;
9285
- animation: fadeIn 0.2s ease-out;
9286
-
9287
- @keyframes fadeIn {
9288
- from {
9289
- opacity: 0;
9290
- }
9291
- to {
9292
- opacity: 1;
9293
- }
9294
- }
9295
- `;
9296
- const ModalContent = styled(Dialog.Content)`
9297
- position: fixed;
9298
- top: 50%;
9299
- left: 50%;
9300
- transform: translate(-50%, -50%);
9301
- background: white;
9302
- border-radius: 8px;
9303
- box-shadow:
9304
- 0 0 1px rgba(0, 0, 0, 0.1),
9305
- 0 20px 25px -5px rgba(0, 0, 0, 0.1),
9306
- 0 10px 10px -5px rgba(0, 0, 0, 0.04);
9307
- max-width: 650px;
9308
- max-height: 80vh;
9309
- width: 90vw;
9310
- padding: 16px;
9311
- overflow-y: auto;
9312
- z-index: 1001;
9313
- animation: slideIn 0.2s ease-out;
9314
- scrollbar-width: thin;
9315
-
9316
- @keyframes slideIn {
9317
- from {
9318
- opacity: 0;
9319
- transform: translate(-50%, -50%) scale(0.95);
9320
- }
9321
- to {
9322
- opacity: 1;
9323
- transform: translate(-50%, -50%) scale(1);
9324
- }
9325
- }
9326
-
9327
- &:focus {
9328
- outline: none;
9329
- }
9330
- `;
9331
- const InnerModalContent = styled.div`
9332
- position: relative;
9333
- padding: 40px;
9334
- `;
9335
- const ModalCloseButtonContainer = styled.div`
9336
- position: sticky;
9337
- top: 0;
9338
- width: 100%;
9339
- display: flex;
9340
- justify-content: flex-end;
9341
- `;
9342
- const ModalCloseButton = styled(Dialog.Close)`
9343
- height: fit-content;
9344
- background: none;
9345
- border: none;
9346
- color: #6c7689;
9347
- cursor: pointer;
9348
- padding: 4px;
9349
- border-radius: 4px;
9350
- transition: background-color 0.2s;
9351
-
9352
- &:hover {
9353
- background-color: #f3f4f6;
9354
- }
9355
-
9356
- &:focus {
9357
- outline: 2px solid #08a4ff;
9358
- outline-offset: 2px;
9359
- }
9360
- `;
9361
- const ErrorNotificationButton = styled.button`
9362
- position: fixed;
9363
- right: 16px;
9364
- bottom: 16px;
9365
- z-index: 1000;
9366
- background: none;
9367
- border: none;
9368
- padding: 0;
9369
- cursor: pointer;
9370
- outline: none;
9371
- `;
9372
- const ErrorNotificationContent = styled.div`
9373
- background: #ef4444;
9374
- color: white;
9375
- padding: 12px 16px;
9376
- border-radius: 6px;
9377
- font-size: 14px;
9378
- font-weight: 500;
9379
- line-height: 1.4;
9380
- max-width: 320px;
9381
- box-shadow:
9382
- 0 10px 25px -5px rgba(0, 0, 0, 0.1),
9383
- 0 8px 10px -6px rgba(0, 0, 0, 0.1);
9384
- border: 1px solid rgba(255, 255, 255, 0.1);
9385
- backdrop-filter: blur(10px);
9386
- display: flex;
9387
- align-items: center;
9388
- gap: 8px;
9389
- transition: all 0.2s ease;
9390
-
9391
- &:hover {
9392
- transform: translateY(-2px);
9393
- box-shadow:
9394
- 0 20px 25px -5px rgba(0, 0, 0, 0.15),
9395
- 0 10px 10px -5px rgba(0, 0, 0, 0.1);
9396
- }
9397
- `;
9398
- const ErrorText = styled.span`
9399
- overflow: hidden;
9400
- text-overflow: ellipsis;
9401
- white-space: nowrap;
9402
- `;
9403
- const ErrorIcon = styled.svg`
9404
- flex-shrink: 0;
9405
- `;
9406
- const ImportErrorNotification = observer(function ImportErrorNotification$1() {
9407
- const editStore = root_store_default.editStore;
9408
- const [isModalOpen, setIsModalOpen] = useState(false);
9409
- const lastImportError = useRef(null);
9410
- if (!editStore || !editStore.isInitialized || !editStore.currentImportError) return null;
9411
- if (!isModalOpen && !isEqual(lastImportError.current, editStore.currentImportError)) {
9412
- setIsModalOpen(true);
9413
- lastImportError.current = editStore.currentImportError;
9414
- }
9415
- const displayCornerError = !isModalOpen && !!editStore.currentImportError;
9416
- return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ImportErrorModal, {
9417
- isOpen: isModalOpen,
9418
- error: editStore.currentImportError,
9419
- onClose: () => setIsModalOpen(false)
9420
- }), displayCornerError ? /* @__PURE__ */ jsx(ErrorNotificationButton, {
9421
- onClick: () => setIsModalOpen(true),
9422
- children: /* @__PURE__ */ jsxs(ErrorNotificationContent, { children: [/* @__PURE__ */ jsxs(ErrorIcon, {
9423
- width: "16",
9424
- height: "16",
9425
- viewBox: "0 0 16 16",
9426
- fill: "currentColor",
9427
- children: [/* @__PURE__ */ jsx("path", { d: "M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z" }), /* @__PURE__ */ jsx("path", { d: "M7.002 11a1 1 0 112 0 1 1 0 01-2 0zM7.1 4.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 4.995z" })]
9428
- }), /* @__PURE__ */ jsx(ErrorText, { children: "Import Error" })] })
9429
- }) : null] });
9430
- });
9431
- function ImportErrorModal({ isOpen, error, onClose }) {
9432
- return /* @__PURE__ */ jsx(Dialog.Root, {
9433
- open: isOpen,
9434
- onOpenChange: onClose,
9435
- children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
9436
- "data-test": "import-error-modal",
9437
- children: [/* @__PURE__ */ jsx(ModalCloseButtonContainer, { children: /* @__PURE__ */ jsx(ModalCloseButton, {
9438
- "aria-label": "Close error dialog",
9439
- children: /* @__PURE__ */ jsx("svg", {
9440
- width: "16",
9441
- height: "16",
9442
- viewBox: "0 0 16 16",
9443
- fill: "currentColor",
9444
- children: /* @__PURE__ */ jsx("path", { d: "M12.8 4.4L11.6 3.2 8 6.8 4.4 3.2 3.2 4.4 6.8 8 3.2 11.6 4.4 12.8 8 9.2 11.6 12.8 12.8 11.6 9.2 8z" })
9445
- })
9446
- }) }), /* @__PURE__ */ jsxs(InnerModalContent, { children: [
9447
- /* @__PURE__ */ jsx(ErrorIconContainer, { children: /* @__PURE__ */ jsx(StyledClarkIcon, {}) }),
9448
- /* @__PURE__ */ jsx(Dialog.Title, {
9449
- asChild: true,
9450
- children: /* @__PURE__ */ jsx(ErrorTitle, { children: "Import error" })
9451
- }),
9452
- /* @__PURE__ */ jsxs(ErrorMessage$1, {
9453
- "data-test": "import-error-message",
9454
- children: ["Error importing ", error?.importPath]
9455
- }),
9456
- error ? /* @__PURE__ */ jsxs(ErrorDetails, { children: [/* @__PURE__ */ jsx(ErrorSummary, { children: "Full details" }), /* @__PURE__ */ jsx(ErrorStack, { children: error.stack })] }) : null
9457
- ] })]
9458
- })] })
9459
- });
9460
- }
9461
-
9462
9479
  //#endregion
9463
9480
  //#region src/edit-mode/iframe-wrappers.tsx
9464
9481
  const IframeConnected = observer(function IframeConnected$1(props) {
@@ -9556,7 +9573,7 @@ const EmbedWrapper = (props) => {
9556
9573
  root_store_default.windowOriginUrl = event.data.payload.logContext.superblocks_window_origin_url;
9557
9574
  if (root_store_default.windowOriginUrl) import("./utils-BCrSLIhM.js").then(({ initTracerProviderWithOrigin }) => {
9558
9575
  initTracerProviderWithOrigin(root_store_default.windowOriginUrl);
9559
- import("./logs-ivxzrJPP.js").then(({ initLibraryLoggerProvider }) => {
9576
+ import("./logs-DDh7Anxs.js").then(({ initLibraryLoggerProvider }) => {
9560
9577
  initLibraryLoggerProvider({
9561
9578
  windowOriginUrl: root_store_default.windowOriginUrl,
9562
9579
  appId: event.data.payload.appId,
@@ -9736,9 +9753,8 @@ const EmbedWrapper = (props) => {
9736
9753
  return getEditStore().onViteMessage(ViteMessageKind.ROUTE_CHANGE, async (message) => {
9737
9754
  try {
9738
9755
  const { route, routeTestParams } = message;
9739
- const path = generatePath$1(route, routeTestParams);
9740
9756
  await navigate({
9741
- pathname: path,
9757
+ pathname: generatePath$1(route, routeTestParams),
9742
9758
  search: location.search
9743
9759
  });
9744
9760
  } catch (error$1) {
@@ -9761,7 +9777,7 @@ const EmbedWrapper = (props) => {
9761
9777
  }
9762
9778
  return /* @__PURE__ */ jsx(FullPageSpinner, {});
9763
9779
  }
9764
- return /* @__PURE__ */ jsx(WithUserWrapper$1, { children: /* @__PURE__ */ jsxs(IframeConnected, { children: [/* @__PURE__ */ jsx(ImportErrorNotification, {}), /* @__PURE__ */ jsx(EditorHotkeys, { children: props.children })] }) });
9780
+ return /* @__PURE__ */ jsx(WithUserWrapper$1, { children: /* @__PURE__ */ jsxs(IframeConnected, { children: [/* @__PURE__ */ jsx(BuildErrorNotification, {}), /* @__PURE__ */ jsx(EditorHotkeys, { children: props.children })] }) });
9765
9781
  };
9766
9782
 
9767
9783
  //#endregion
@@ -9804,7 +9820,7 @@ const EmbedWrapper$1 = (props) => {
9804
9820
  root_store_default.windowOriginUrl = event.data.payload.logContext.superblocks_window_origin_url;
9805
9821
  if (root_store_default.windowOriginUrl) import("./utils-BCrSLIhM.js").then(({ initTracerProviderWithOrigin }) => {
9806
9822
  initTracerProviderWithOrigin(root_store_default.windowOriginUrl);
9807
- import("./logs-ivxzrJPP.js").then(({ initLibraryLoggerProvider }) => {
9823
+ import("./logs-DDh7Anxs.js").then(({ initLibraryLoggerProvider }) => {
9808
9824
  initLibraryLoggerProvider({
9809
9825
  windowOriginUrl: root_store_default.windowOriginUrl,
9810
9826
  appId: event.data.payload.appId,
@@ -9987,8 +10003,7 @@ const initializeStyles = (appName) => {
9987
10003
  ...VARIABLE_VALUES,
9988
10004
  ...componentVariableValues
9989
10005
  };
9990
- const variableDefns = Object.keys(allVariables).map((variable) => `${allVariables[variable]}: ${allVariableValues[variable]};`).join("\n");
9991
- createStyleSheetFromString(appName, `:${appName} {${variableDefns}}\n${stylesheet}`);
10006
+ createStyleSheetFromString(appName, `:${appName} {${Object.keys(allVariables).map((variable) => `${allVariables[variable]}: ${allVariableValues[variable]};`).join("\n")}}\n${stylesheet}`);
9992
10007
  };
9993
10008
 
9994
10009
  //#endregion
@@ -9996,11 +10011,10 @@ const initializeStyles = (appName) => {
9996
10011
  const originalLog = console.log;
9997
10012
  console.log = (...args) => {
9998
10013
  try {
9999
- const processedArgs = args.map((arg) => {
10014
+ originalLog(...args.map((arg) => {
10000
10015
  if (arg && typeof arg === "object" && (getBindingIdentifier(arg) || getBindingIdentifier(arg.bind ?? {}))) return JSON.parse(JSON.stringify(arg));
10001
10016
  return arg;
10002
- });
10003
- originalLog(...processedArgs);
10017
+ }));
10004
10018
  } catch {}
10005
10019
  };
10006
10020
  const loadApisIntoLibrary = async function loadApisIntoLibrary$1() {
@@ -10027,9 +10041,7 @@ const SbProvider = function SbProvider$1({ name = "codemode", settings, children
10027
10041
  runApiInitialization();
10028
10042
  }, [runApiInitialization]);
10029
10043
  useEffect(() => {
10030
- const mergedTheme = merge(BASE_THEME_V5, settings?.theme);
10031
- const userAccessibleTheme$1 = generateTheme(mergedTheme, settings?.themeOverrides);
10032
- setUserAccessibleTheme(userAccessibleTheme$1);
10044
+ setUserAccessibleTheme(generateTheme(merge(BASE_THEME_V5, settings?.theme), settings?.themeOverrides));
10033
10045
  }, [settings?.theme, settings?.themeOverrides]);
10034
10046
  useEffect(() => {
10035
10047
  const resolvePromiseListener = (event) => {
@@ -10182,10 +10194,8 @@ function setQueryParams(queryParams = {}, preserveExistingQueryParams = true) {
10182
10194
  function download(data, fileName, fileType) {
10183
10195
  try {
10184
10196
  const dataType = getType(data);
10185
- if (dataType === Types.ARRAY || dataType === Types.OBJECT) {
10186
- const jsonString = JSON.stringify(data, null, 2);
10187
- downloadjs(jsonString, fileName, fileType);
10188
- } else downloadjs(data, fileName, fileType);
10197
+ if (dataType === Types.ARRAY || dataType === Types.OBJECT) downloadjs(JSON.stringify(data, null, 2), fileName, fileType);
10198
+ else downloadjs(data, fileName, fileType);
10189
10199
  } catch (err) {
10190
10200
  console.error("Failed to download:", err);
10191
10201
  }
@@ -10364,7 +10374,7 @@ function useDialogEditing(props) {
10364
10374
  if (isEditing && instanceId) {
10365
10375
  if (prevIsOpenRef.current !== isOpen && !(prevIsOpenRef.current === void 0 && isOpen === false)) return;
10366
10376
  if (isOpen) {
10367
- if (selectedInstanceId && selectedInstanceId !== instanceId && !doesInteractionLayerContainInstance(instanceId, selectedInstanceId, true)) update((entity) => {
10377
+ if (selectedInstanceId && selectedInstanceId !== instanceId && !doesInteractionLayerContainInstance(instanceId, selectedInstanceId, true) && !isPage(selectedInstanceId)) update((entity) => {
10368
10378
  set(entity, isOpenPropertyName, false);
10369
10379
  });
10370
10380
  } else if (selectedInstanceId === instanceId || selectedInstanceId && doesInteractionLayerContainInstance(instanceId, selectedInstanceId)) update((entity) => {
@@ -11407,5 +11417,5 @@ var droppable_container_default = DroppableContainer;
11407
11417
  early_console_buffer_default.getInstance().patchEarly();
11408
11418
 
11409
11419
  //#endregion
11410
- export { App, Dim, droppable_container_default as DroppableContainer, Embed, Env, EventFlow, Global, INSTANCE_ID_ATTRIBUTE, interaction_layer_default as InteractionLayer, InternalContainer, Link, sb_provider_default as MakeEditableWithSuperblocks, NO_CONTENT_ATTRIBUTE, Outlet, PORTAL_ROOT_ID, Page, page_not_found_default as PageNotFound, Prop, Property, Section as PropertyPanelSection, PropsPanelCategory, RouteLoadError, SB, SbApi, SbEvent, sb_provider_default as SbProvider, StateVar, StateVarPersistence, Theme, Timer, TriggerStepType, UnstyledInternalContainer, computed, containerLayout as containerLayoutProps, copyToClipboard, createRoot, createScope, download, generatePath, loading as loadingProp, logoutIntegrations, margin as marginProp, navigateTo, registerApp, registerComponent, registerPage, registerScope, setQueryParams, shouldScrollContents as shouldScrollContentsProps, size as sizeProp, useDialogEditing, use_editor_default as useEditor, usePopoverRootElement, useTheme, useUpdateProperties, visible as visibleProp, widthWithoutFit as widthWithoutFitProp };
11420
+ export { App, BuildErrorModal, Dim, droppable_container_default as DroppableContainer, Embed, Env, EventFlow, FileManager, Global, INSTANCE_ID_ATTRIBUTE, interaction_layer_default as InteractionLayer, InternalContainer, Link, sb_provider_default as MakeEditableWithSuperblocks, NO_CONTENT_ATTRIBUTE, Outlet, PORTAL_ROOT_ID, Page, page_not_found_default as PageNotFound, Prop, Property, Section as PropertyPanelSection, PropsPanelCategory, RouteLoadError, SB, SbApi, SbEvent, sb_provider_default as SbProvider, StateVar, StateVarPersistence, Theme, Timer, TriggerStepType, UnstyledInternalContainer, computed, containerLayout as containerLayoutProps, copyToClipboard, createRoot, createScope, download, editorBridge, generatePath, getFileWithUploadId, loading as loadingProp, logoutIntegrations, margin as marginProp, navigateTo, registerApp, registerComponent, registerPage, registerScope, setQueryParams, shouldScrollContents as shouldScrollContentsProps, size as sizeProp, useDialogEditing, use_editor_default as useEditor, usePopoverRootElement, useTheme, useUpdateProperties, visible as visibleProp, widthWithoutFit as widthWithoutFitProp };
11411
11421
  //# sourceMappingURL=index.js.map