@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.d.ts +17 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +317 -307
- package/dist/index.js.map +1 -1
- package/dist/{logs-ivxzrJPP.js → logs-DDh7Anxs.js} +10 -11
- package/dist/{logs-ivxzrJPP.js.map → logs-DDh7Anxs.js.map} +1 -1
- package/dist/root-store-4FotQ8o2.js +4 -0
- package/dist/{root-store-mvrXQD3h.js → root-store-DSXdJ9lh.js} +193 -45
- package/dist/root-store-DSXdJ9lh.js.map +1 -0
- package/package.json +4 -4
- package/dist/root-store-DbFURfA3.js +0 -4
- package/dist/root-store-mvrXQD3h.js.map +0 -1
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-
|
|
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
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
3144
|
-
$shimmerHighlight:
|
|
3145
|
-
$borderRadius: borderRadius
|
|
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
|
-
|
|
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 ${
|
|
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
|
|
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
|
-
|
|
4425
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
7085
|
-
|
|
7086
|
-
|
|
7087
|
-
|
|
7088
|
-
|
|
7089
|
-
|
|
7090
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
-
|
|
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-
|
|
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:
|
|
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(
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|