@measured/puck 0.14.0-canary.70cf177 → 0.14.0-canary.924c85a

package/dist/index.css

@@ -281,25 +281,25 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
-._DraggableComponent_175tf_1 {
+._DraggableComponent_17mte_1 {
   pointer-events: auto;
   --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
 }
-._DraggableComponent--isDragging_175tf_11 {
+._DraggableComponent--isDragging_17mte_11 {
   background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
   overflow: hidden;
 }
-._DraggableComponent-contents_175tf_16 {
+._DraggableComponent-contents_17mte_16 {
   position: relative;
   pointer-events: none;
   z-index: 0;
 }
-._DraggableComponent-contents_175tf_16::before,
-._DraggableComponent-contents_175tf_16::after {
+._DraggableComponent-contents_17mte_16::before,
+._DraggableComponent-contents_17mte_16::after {
   content: " ";
   display: table;
 }
-._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent-overlay_17mte_29 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -310,13 +310,13 @@
   box-sizing: border-box;
   z-index: 1;
 }
-._DraggableComponent_175tf_1:focus-visible ._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent_17mte_1:focus-visible ._DraggableComponent-overlay_17mte_29 {
   outline: 1px solid var(--puck-color-azure-05);
 }
-._DraggableComponent--isDragging_175tf_11 ._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent--isDragging_17mte_11 ._DraggableComponent-overlay_17mte_29 {
   outline: 1px var(--puck-color-azure-09) solid !important;
 }
-._DraggableComponent-loadingOverlay_175tf_49 {
+._DraggableComponent-loadingOverlay_17mte_49 {
   background: var(--puck-color-white);
   color: var(--puck-color-grey-03);
   border-radius: 4px;
@@ -331,32 +331,32 @@
   opacity: 0.8;
   z-index: 1;
 }
-._DraggableComponent_175tf_1:hover:not(._DraggableComponent--isLocked_175tf_65) > ._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent_17mte_1:hover:not(._DraggableComponent--isLocked_17mte_65) > ._DraggableComponent-overlay_17mte_29 {
   background: var(--overlay-background);
   pointer-events: none;
 }
-._DraggableComponent--forceHover_175tf_71 > ._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent--forceHover_17mte_71 > ._DraggableComponent-overlay_17mte_29 {
   background: var(--overlay-background);
   pointer-events: none;
 }
-._DraggableComponent_175tf_1:not(._DraggableComponent--isSelected_175tf_76):hover > ._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent_17mte_1:not(._DraggableComponent--isSelected_17mte_76):hover > ._DraggableComponent-overlay_17mte_29 {
   outline: 2px var(--puck-color-azure-09) solid !important;
 }
-._DraggableComponent--indicativeHover_175tf_81 > ._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent--indicativeHover_17mte_81 > ._DraggableComponent-overlay_17mte_29 {
   pointer-events: none;
 }
-._DraggableComponent_175tf_1:not(._DraggableComponent--isSelected_175tf_76):has(._DraggableComponent_175tf_1:hover > ._DraggableComponent-overlay_175tf_29) > ._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent_17mte_1:not(._DraggableComponent--isSelected_17mte_76):has(._DraggableComponent_17mte_1:hover > ._DraggableComponent-overlay_17mte_29) > ._DraggableComponent-overlay_17mte_29 {
   display: none;
 }
-._DraggableComponent--isSelected_175tf_76 ._DraggableComponent-overlay_175tf_29 {
+._DraggableComponent--isSelected_17mte_76 > ._DraggableComponent-overlay_17mte_29 {
   outline: 2px var(--puck-color-azure-07) solid !important;
 }
-._DraggableComponent--isSelected_175tf_76 > ._DraggableComponent-actionsOverlay_175tf_97 {
+._DraggableComponent--isSelected_17mte_76 > ._DraggableComponent-actionsOverlay_17mte_97 {
   display: block;
   position: sticky;
   z-index: 2;
 }
-._DraggableComponent-actions_175tf_97 {
+._DraggableComponent-actions_17mte_97 {
   position: absolute;
   width: auto;
   padding: 4px;
@@ -373,10 +373,10 @@
   box-sizing: border-box;
   transform-origin: right top;
 }
-._DraggableComponent--isSelected_175tf_76 > ._DraggableComponent-actionsOverlay_175tf_97 > ._DraggableComponent-actions_175tf_97 {
+._DraggableComponent--isSelected_17mte_76 > ._DraggableComponent-actionsOverlay_17mte_97 > ._DraggableComponent-actions_17mte_97 {
   display: flex;
 }
-._DraggableComponent-actionsLabel_175tf_127 {
+._DraggableComponent-actionsLabel_17mte_127 {
   color: var(--puck-color-grey-08);
   display: flex;
   font-size: var(--puck-font-size-xxxs);
@@ -390,7 +390,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._DraggableComponent-action_175tf_97 {
+._DraggableComponent-action_17mte_97 {
   background: transparent;
   border: none;
   color: var(--puck-color-grey-08);
@@ -403,17 +403,17 @@
   justify-content: center;
   transition: color 50ms ease-in;
 }
-._DraggableComponent-action_175tf_97:focus-visible {
+._DraggableComponent-action_17mte_97:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: -2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._DraggableComponent-action_175tf_97:hover {
+  ._DraggableComponent-action_17mte_97:hover {
     color: var(--puck-color-azure-06);
     transition: none;
   }
 }
-._DraggableComponent-action_175tf_97:active {
+._DraggableComponent-action_17mte_97:active {
   color: var(--puck-color-azure-07);
   transition: none;
 }
@@ -1549,14 +1549,23 @@ textarea._Input-input_1qi5b_46 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
-._PuckPreview_29rm6_1 {
+._PuckPreview_379hm_1 {
   height: 100%;
 }
-._PuckPreview-iframe_29rm6_5 {
+._PuckPreview-iframe_379hm_5 {
   border: none;
   height: 100%;
   width: 100%;
 }
+._PuckPreview-content_379hm_11 {
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+}
+._PuckPreview--stylesLoaded_379hm_18 ._PuckPreview-content_379hm_11 {
+  opacity: 1;
+}
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
 ._LayerTree_1pgw8_1 {

package/dist/index.js

@@ -8084,7 +8084,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment14 = 7;
+        var Fragment16 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -9240,7 +9240,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment14:
+            case Fragment16:
               return "Fragment";
             case HostComponent:
               return type;
@@ -18911,7 +18911,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment14) {
+            if (current2 === null || current2.tag !== Fragment16) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -19314,7 +19314,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment14) {
+                  if (child.tag === Fragment16) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -23489,7 +23489,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment14:
+            case Fragment16:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23762,7 +23762,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment14:
+            case Fragment16:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -28021,7 +28021,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment14, elements, key, mode);
+          var fiber = createFiber(Fragment16, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -29400,7 +29400,7 @@ var defaultSnapshot = {
   draggingFromThisWith: null,
   isUsingPlaceholder: false
 };
-var DefaultDroppable = ({ children }) => children(defaultProvided, defaultSnapshot);
+var DefaultDroppable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children(defaultProvided, defaultSnapshot) });
 var Droppable = (props) => {
   const { status } = useAppContext();
   const El = status === "READY" ? import_dnd.Droppable : DefaultDroppable;
@@ -29438,7 +29438,7 @@ var defaultRubric = {
   type: "",
   source: { droppableId: "", index: 0 }
 };
-var DefaultDraggable = ({ children }) => children(defaultProvided2, defaultSnapshot2, defaultRubric);
+var DefaultDraggable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: children(defaultProvided2, defaultSnapshot2, defaultRubric) });
 var Draggable = ({
   className,
   children,
@@ -29587,7 +29587,7 @@ var import_dnd3 = require("@measured/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_175tf_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_175tf_11", "DraggableComponent-contents": "_DraggableComponent-contents_175tf_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_175tf_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_175tf_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_175tf_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_175tf_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_175tf_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_175tf_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_175tf_97", "DraggableComponent-actions": "_DraggableComponent-actions_175tf_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_175tf_127", "DraggableComponent-action": "_DraggableComponent-action_175tf_97" };
+var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_17mte_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_17mte_11", "DraggableComponent-contents": "_DraggableComponent-contents_17mte_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_17mte_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_17mte_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_17mte_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_17mte_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_17mte_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_17mte_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_17mte_97", "DraggableComponent-actions": "_DraggableComponent-actions_17mte_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_17mte_127", "DraggableComponent-action": "_DraggableComponent-action_17mte_97" };
 
 // ../../node_modules/lucide-react/dist/esm/lucide-react.js
 init_react_import();
@@ -31333,7 +31333,7 @@ var import_react14 = require("react");
 init_react_import();
 var import_dnd4 = require("@measured/dnd");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var DefaultDragDropContext = ({ children }) => children;
+var DefaultDragDropContext = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
 var DragDropContext = (props) => {
   const { status } = useAppContext();
   const El = status === "READY" ? import_dnd4.DragDropContext : DefaultDragDropContext;
@@ -32552,7 +32552,7 @@ var import_auto_frame_component = __toESM(require("@measured/auto-frame-componen
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "PuckPreview": "_PuckPreview_29rm6_1", "PuckPreview-iframe": "_PuckPreview-iframe_29rm6_5" };
+var styles_module_default16 = { "PuckPreview": "_PuckPreview_379hm_1", "PuckPreview-iframe": "_PuckPreview-iframe_379hm_5", "PuckPreview-content": "_PuckPreview-content_379hm_11", "PuckPreview--stylesLoaded": "_PuckPreview--stylesLoaded_379hm_18" };
 
 // components/Puck/components/Preview/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -32568,24 +32568,30 @@ var Preview = ({ id = "puck-preview" }) => {
   );
   const rootProps = state.data.root.props || state.data.root;
   const ref = (0, import_react22.useRef)(null);
+  const [stylesLoaded, setStylesLoaded] = (0, import_react22.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
-      className: getClassName21(),
+      className: getClassName21({ stylesLoaded }),
       id,
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName21("content"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         import_auto_frame_component.default,
         {
           id: "preview-iframe",
           className: getClassName21("iframe"),
           "data-rfd-iframe": true,
           ref,
+          debug: true,
+          onStylesLoaded: () => {
+            console.log("callback");
+            setStylesLoaded(true);
+          },
           children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId }) }))
         }
-      )
+      ) })
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.14.0-canary.70cf177",
+  "version": "0.14.0-canary.924c85a",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
@@ -59,7 +59,7 @@
     "typescript": "^4.5.2"
   },
   "dependencies": {
-    "@measured/auto-frame-component": "0.1.0-canary.4686711",
+    "@measured/auto-frame-component": "0.1.0",
     "@measured/dnd": "16.6.0-canary.dcf051d",
     "deep-diff": "^1.0.2",
     "react-hotkeys-hook": "^4.4.1",