@measured/puck 0.12.0-canary.68cdc49 → 0.12.0-canary.889b4c7

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.
Files changed (4) hide show
  1. package/README.md +3 -3
  2. package/dist/index.css +252 -124
  3. package/dist/index.js +246 -365
  4. package/package.json +22 -1
package/dist/index.js CHANGED
@@ -327,7 +327,7 @@ var require_react_is_development = __commonJS({
327
327
  var ContextProvider = REACT_PROVIDER_TYPE;
328
328
  var Element = REACT_ELEMENT_TYPE;
329
329
  var ForwardRef = REACT_FORWARD_REF_TYPE;
330
- var Fragment12 = REACT_FRAGMENT_TYPE;
330
+ var Fragment13 = REACT_FRAGMENT_TYPE;
331
331
  var Lazy = REACT_LAZY_TYPE;
332
332
  var Memo = REACT_MEMO_TYPE;
333
333
  var Portal = REACT_PORTAL_TYPE;
@@ -386,7 +386,7 @@ var require_react_is_development = __commonJS({
386
386
  exports.ContextProvider = ContextProvider;
387
387
  exports.Element = Element;
388
388
  exports.ForwardRef = ForwardRef;
389
- exports.Fragment = Fragment12;
389
+ exports.Fragment = Fragment13;
390
390
  exports.Lazy = Lazy;
391
391
  exports.Memo = Memo;
392
392
  exports.Portal = Portal;
@@ -760,7 +760,7 @@ var require_factoryWithTypeCheckers = __commonJS({
760
760
  function validate(props, propName, componentName, location, propFullName) {
761
761
  if (!(props[propName] instanceof expectedClass)) {
762
762
  var expectedClassName = expectedClass.name || ANONYMOUS;
763
- var actualClassName = getClassName18(props[propName]);
763
+ var actualClassName = getClassName19(props[propName]);
764
764
  return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + actualClassName + "` supplied to `" + componentName + "`, expected ") + ("instance of `" + expectedClassName + "`."));
765
765
  }
766
766
  return null;
@@ -1012,7 +1012,7 @@ var require_factoryWithTypeCheckers = __commonJS({
1012
1012
  return type;
1013
1013
  }
1014
1014
  }
1015
- function getClassName18(propValue) {
1015
+ function getClassName19(propValue) {
1016
1016
  if (!propValue.constructor || !propValue.constructor.name) {
1017
1017
  return ANONYMOUS;
1018
1018
  }
@@ -9040,7 +9040,7 @@ var require_react_dom_development = __commonJS({
9040
9040
  var HostPortal = 4;
9041
9041
  var HostComponent = 5;
9042
9042
  var HostText = 6;
9043
- var Fragment12 = 7;
9043
+ var Fragment13 = 7;
9044
9044
  var Mode = 8;
9045
9045
  var ContextConsumer = 9;
9046
9046
  var ContextProvider = 10;
@@ -10196,7 +10196,7 @@ var require_react_dom_development = __commonJS({
10196
10196
  return "DehydratedFragment";
10197
10197
  case ForwardRef:
10198
10198
  return getWrappedName$1(type, type.render, "ForwardRef");
10199
- case Fragment12:
10199
+ case Fragment13:
10200
10200
  return "Fragment";
10201
10201
  case HostComponent:
10202
10202
  return type;
@@ -19867,7 +19867,7 @@ var require_react_dom_development = __commonJS({
19867
19867
  }
19868
19868
  }
19869
19869
  function updateFragment2(returnFiber, current2, fragment, lanes, key) {
19870
- if (current2 === null || current2.tag !== Fragment12) {
19870
+ if (current2 === null || current2.tag !== Fragment13) {
19871
19871
  var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
19872
19872
  created.return = returnFiber;
19873
19873
  return created;
@@ -20270,7 +20270,7 @@ var require_react_dom_development = __commonJS({
20270
20270
  if (child.key === key) {
20271
20271
  var elementType = element.type;
20272
20272
  if (elementType === REACT_FRAGMENT_TYPE) {
20273
- if (child.tag === Fragment12) {
20273
+ if (child.tag === Fragment13) {
20274
20274
  deleteRemainingChildren(returnFiber, child.sibling);
20275
20275
  var existing = useFiber(child, element.props.children);
20276
20276
  existing.return = returnFiber;
@@ -24445,7 +24445,7 @@ var require_react_dom_development = __commonJS({
24445
24445
  var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
24446
24446
  return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
24447
24447
  }
24448
- case Fragment12:
24448
+ case Fragment13:
24449
24449
  return updateFragment(current2, workInProgress2, renderLanes2);
24450
24450
  case Mode:
24451
24451
  return updateMode(current2, workInProgress2, renderLanes2);
@@ -24718,7 +24718,7 @@ var require_react_dom_development = __commonJS({
24718
24718
  case SimpleMemoComponent:
24719
24719
  case FunctionComponent:
24720
24720
  case ForwardRef:
24721
- case Fragment12:
24721
+ case Fragment13:
24722
24722
  case Mode:
24723
24723
  case Profiler:
24724
24724
  case ContextConsumer:
@@ -28977,7 +28977,7 @@ var require_react_dom_development = __commonJS({
28977
28977
  return fiber;
28978
28978
  }
28979
28979
  function createFiberFromFragment(elements, mode, lanes, key) {
28980
- var fiber = createFiber(Fragment12, elements, key, mode);
28980
+ var fiber = createFiber(Fragment13, elements, key, mode);
28981
28981
  fiber.lanes = lanes;
28982
28982
  return fiber;
28983
28983
  }
@@ -30125,7 +30125,7 @@ var import_react2 = require("react");
30125
30125
 
30126
30126
  // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
30127
30127
  init_react_import();
30128
- var Button_module_default = { "Button": "_Button_1muck_1", "Button--medium": "_Button--medium_1muck_20", "Button--large": "_Button--large_1muck_27", "Button-icon": "_Button-icon_1muck_34", "Button--primary": "_Button--primary_1muck_42", "Button--secondary": "_Button--secondary_1muck_51", "Button--flush": "_Button--flush_1muck_62", "Button--disabled": "_Button--disabled_1muck_66", "Button--fullWidth": "_Button--fullWidth_1muck_76" };
30128
+ var Button_module_default = { "Button": "_Button_zx1c8_1", "Button--medium": "_Button--medium_zx1c8_21", "Button--large": "_Button--large_zx1c8_28", "Button-icon": "_Button-icon_zx1c8_35", "Button--primary": "_Button--primary_zx1c8_43", "Button--secondary": "_Button--secondary_zx1c8_52", "Button--flush": "_Button--flush_zx1c8_63", "Button--disabled": "_Button--disabled_zx1c8_67", "Button--fullWidth": "_Button--fullWidth_zx1c8_77" };
30129
30129
 
30130
30130
  // lib/get-class-name-factory.ts
30131
30131
  init_react_import();
@@ -32367,7 +32367,7 @@ init_react_import();
32367
32367
 
32368
32368
  // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
32369
32369
  init_react_import();
32370
- var styles_module_default3 = { "Input": "_Input_1kw16_1", "Input-label": "_Input-label_1kw16_27", "Input-labelIcon": "_Input-labelIcon_1kw16_34", "Input-disabledIcon": "_Input-disabledIcon_1kw16_40", "Input-input": "_Input-input_1kw16_45", "Input--readOnly": "_Input--readOnly_1kw16_66", "Input-radioGroupItems": "_Input-radioGroupItems_1kw16_78", "Input-radio": "_Input-radio_1kw16_78", "Input-radioInner": "_Input-radioInner_1kw16_95", "Input-radioInput": "_Input-radioInput_1kw16_117" };
32370
+ var styles_module_default3 = { "Input": "_Input_sx9jb_1", "Input-label": "_Input-label_sx9jb_27", "Input-labelIcon": "_Input-labelIcon_sx9jb_34", "Input-disabledIcon": "_Input-disabledIcon_sx9jb_40", "Input-input": "_Input-input_sx9jb_45", "Input--readOnly": "_Input--readOnly_sx9jb_66", "Input-radioGroupItems": "_Input-radioGroupItems_sx9jb_78", "Input-radio": "_Input-radio_sx9jb_78", "Input-radioInner": "_Input-radioInner_sx9jb_95", "Input-radioInput": "_Input-radioInput_sx9jb_117" };
32371
32371
 
32372
32372
  // components/InputOrGroup/index.tsx
32373
32373
  var import_react30 = require("react");
@@ -32380,7 +32380,7 @@ init_react_import();
32380
32380
 
32381
32381
  // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css#css-module
32382
32382
  init_react_import();
32383
- var styles_module_default4 = { "ArrayField": "_ArrayField_13rp0_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_13rp0_13", "ArrayField-addButton": "_ArrayField-addButton_13rp0_17", "ArrayField--hasItems": "_ArrayField--hasItems_13rp0_31", "ArrayFieldItem": "_ArrayFieldItem_13rp0_45", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_13rp0_53", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_13rp0_58", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_13rp0_72", "ArrayFieldItem--readOnly": "_ArrayFieldItem--readOnly_13rp0_84", "ArrayFieldItem-body": "_ArrayFieldItem-body_13rp0_105", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_13rp0_113", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_13rp0_120", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_13rp0_126", "ArrayFieldItem-action": "_ArrayFieldItem-action_13rp0_126" };
32383
+ var styles_module_default4 = { "ArrayField": "_ArrayField_19z2v_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_19z2v_13", "ArrayField-addButton": "_ArrayField-addButton_19z2v_17", "ArrayField--hasItems": "_ArrayField--hasItems_19z2v_31", "ArrayFieldItem": "_ArrayFieldItem_19z2v_45", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_19z2v_53", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_19z2v_58", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_19z2v_72", "ArrayFieldItem--readOnly": "_ArrayFieldItem--readOnly_19z2v_85", "ArrayFieldItem-body": "_ArrayFieldItem-body_19z2v_106", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_19z2v_114", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_19z2v_121", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_19z2v_127", "ArrayFieldItem-action": "_ArrayFieldItem-action_19z2v_127" };
32384
32384
 
32385
32385
  // components/InputOrGroup/fields/ArrayField/index.tsx
32386
32386
  var import_dnd4 = require("@hello-pangea/dnd");
@@ -33154,7 +33154,7 @@ var import_dnd6 = require("@hello-pangea/dnd");
33154
33154
 
33155
33155
  // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
33156
33156
  init_react_import();
33157
- var styles_module_default9 = { "ComponentList": "_ComponentList_3rdy2_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_3rdy2_6", "ComponentList-content": "_ComponentList-content_3rdy2_10", "ComponentList-title": "_ComponentList-title_3rdy2_18", "ComponentList-titleIcon": "_ComponentList-titleIcon_3rdy2_39", "ComponentListItem": "_ComponentListItem_3rdy2_43", "ComponentListItem-draggable": "_ComponentListItem-draggable_3rdy2_43", "ComponentListItemIcon": "_ComponentListItemIcon_3rdy2_61", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_3rdy2_65" };
33157
+ var styles_module_default9 = { "ComponentList": "_ComponentList_1m8r5_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1m8r5_6", "ComponentList-content": "_ComponentList-content_1m8r5_10", "ComponentList-title": "_ComponentList-title_1m8r5_18", "ComponentList-titleIcon": "_ComponentList-titleIcon_1m8r5_39", "ComponentListItem": "_ComponentListItem_1m8r5_43", "ComponentListItem-draggable": "_ComponentListItem-draggable_1m8r5_43", "ComponentListItem-name": "_ComponentListItem-name_1m8r5_60", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_1m8r5_66" };
33158
33158
 
33159
33159
  // components/ComponentList/index.tsx
33160
33160
  var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -33174,7 +33174,7 @@ var ComponentListItem = ({
33174
33174
  disableAnimations: true,
33175
33175
  className: () => getClassNameItem2("draggable"),
33176
33176
  children: () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
33177
- component,
33177
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassNameItem2("name"), children: component }),
33178
33178
  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DragIcon, {}) })
33179
33179
  ] })
33180
33180
  },
@@ -33294,7 +33294,7 @@ init_react_import();
33294
33294
 
33295
33295
  // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
33296
33296
  init_react_import();
33297
- var styles_module_default10 = { "SidebarSection": "_SidebarSection_r7dv3_1", "SidebarSection-title": "_SidebarSection-title_r7dv3_12", "SidebarSection-content": "_SidebarSection-content_r7dv3_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_r7dv3_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_r7dv3_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_r7dv3_44", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_r7dv3_33", "SidebarSection-heading": "_SidebarSection-heading_r7dv3_56", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_r7dv3_60" };
33297
+ var styles_module_default10 = { "SidebarSection": "_SidebarSection_1uyg2_1", "SidebarSection-title": "_SidebarSection-title_1uyg2_12", "SidebarSection-content": "_SidebarSection-content_1uyg2_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_1uyg2_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1uyg2_37", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1uyg2_48", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1uyg2_37", "SidebarSection-heading": "_SidebarSection-heading_1uyg2_60", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1uyg2_64" };
33298
33298
 
33299
33299
  // lib/use-breadcrumbs.ts
33300
33300
  init_react_import();
@@ -33830,7 +33830,7 @@ init_react_import();
33830
33830
 
33831
33831
  // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
33832
33832
  init_react_import();
33833
- var styles_module_default11 = { "LayerTree": "_LayerTree_1dcmd_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1dcmd_11", "LayerTree-helper": "_LayerTree-helper_1dcmd_17", "Layer": "_Layer_1dcmd_1", "Layer-inner": "_Layer-inner_1dcmd_29", "Layer--containsZone": "_Layer--containsZone_1dcmd_35", "Layer-clickable": "_Layer-clickable_1dcmd_39", "Layer--isSelected": "_Layer--isSelected_1dcmd_48", "Layer--isHovering": "_Layer--isHovering_1dcmd_49", "Layer-chevron": "_Layer-chevron_1dcmd_65", "Layer--childIsSelected": "_Layer--childIsSelected_1dcmd_66", "Layer-zones": "_Layer-zones_1dcmd_70", "Layer-title": "_Layer-title_1dcmd_84", "Layer-icon": "_Layer-icon_1dcmd_92", "Layer-zoneIcon": "_Layer-zoneIcon_1dcmd_97" };
33833
+ var styles_module_default11 = { "LayerTree": "_LayerTree_o89yt_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_o89yt_11", "LayerTree-helper": "_LayerTree-helper_o89yt_17", "Layer": "_Layer_o89yt_1", "Layer-inner": "_Layer-inner_o89yt_29", "Layer--containsZone": "_Layer--containsZone_o89yt_35", "Layer-clickable": "_Layer-clickable_o89yt_39", "Layer--isSelected": "_Layer--isSelected_o89yt_48", "Layer--isHovering": "_Layer--isHovering_o89yt_49", "Layer-chevron": "_Layer-chevron_o89yt_65", "Layer--childIsSelected": "_Layer--childIsSelected_o89yt_66", "Layer-zones": "_Layer-zones_o89yt_70", "Layer-title": "_Layer-title_o89yt_84", "Layer-name": "_Layer-name_o89yt_93", "Layer-icon": "_Layer-icon_o89yt_99", "Layer-zoneIcon": "_Layer-zoneIcon_o89yt_104" };
33834
33834
 
33835
33835
  // lib/scroll-into-view.ts
33836
33836
  init_react_import();
@@ -33956,7 +33956,7 @@ var LayerTree = ({
33956
33956
  ),
33957
33957
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassNameLayer("title"), children: [
33958
33958
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(type_default, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(grid_default, { size: "16" }) }),
33959
- item.type
33959
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("name"), children: item.type })
33960
33960
  ] })
33961
33961
  ]
33962
33962
  }
@@ -34271,8 +34271,13 @@ var useResolvedData = (data, config, dispatch) => {
34271
34271
  };
34272
34272
  };
34273
34273
 
34274
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
34275
+ init_react_import();
34276
+ var styles_module_default12 = { "Puck": "_Puck_vj9gy_19", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_vj9gy_36", "Puck-header": "_Puck-header_vj9gy_72", "Puck-headerInner": "_Puck-headerInner_vj9gy_79", "Puck-headerToggle": "_Puck-headerToggle_vj9gy_89", "Puck-headerTitle": "_Puck-headerTitle_vj9gy_93", "Puck-headerPath": "_Puck-headerPath_vj9gy_97", "Puck-headerTools": "_Puck-headerTools_vj9gy_104", "Puck-leftSideBar": "_Puck-leftSideBar_vj9gy_110", "Puck-frame": "_Puck-frame_vj9gy_119", "Puck-root": "_Puck-root_vj9gy_127", "Puck-page": "_Puck-page_vj9gy_139", "Puck-rightSideBar": "_Puck-rightSideBar_vj9gy_143" };
34277
+
34274
34278
  // components/Puck/index.tsx
34275
34279
  var import_jsx_runtime22 = require("react/jsx-runtime");
34280
+ var getClassName18 = get_class_name_factory_default("Puck", styles_module_default12);
34276
34281
  var defaultPageFields = {
34277
34282
  title: { type: "text" }
34278
34283
  };
@@ -34302,7 +34307,7 @@ function Puck({
34302
34307
  }) {
34303
34308
  var _a, _b;
34304
34309
  const [reducer] = (0, import_react38.useState)(() => createReducer({ config }));
34305
- const initialAppState = __spreadProps(__spreadValues({}, defaultAppState), {
34310
+ const [initialAppState] = (0, import_react38.useState)(__spreadProps(__spreadValues({}, defaultAppState), {
34306
34311
  data: initialData,
34307
34312
  ui: __spreadProps(__spreadValues({}, defaultAppState.ui), {
34308
34313
  // Store categories under componentList on state to allow render functions and plugins to modify
@@ -34320,7 +34325,7 @@ function Puck({
34320
34325
  {}
34321
34326
  ) : {}
34322
34327
  })
34323
- });
34328
+ }));
34324
34329
  const [appState, dispatch] = (0, import_react38.useReducer)(
34325
34330
  reducer,
34326
34331
  flushZones(initialAppState)
@@ -34423,7 +34428,7 @@ function Puck({
34423
34428
  );
34424
34429
  }
34425
34430
  }, []);
34426
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "puck", children: [
34431
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
34427
34432
  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34428
34433
  AppProvider,
34429
34434
  {
@@ -34497,361 +34502,237 @@ function Puck({
34497
34502
  },
34498
34503
  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
34499
34504
  var _a2, _b2;
34500
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
34501
- "div",
34502
- {
34503
- style: {
34504
- display: "grid",
34505
- gridTemplateAreas: '"header header header" "left editor right"',
34506
- gridTemplateColumns: `${leftSideBarVisible ? "288px" : "0px"} auto 288px`,
34507
- gridTemplateRows: "min-content auto",
34508
- height: "100vh",
34509
- position: "fixed",
34510
- top: 0,
34511
- bottom: 0,
34512
- left: 0,
34513
- right: 0
34514
- },
34515
- children: [
34516
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34517
- "header",
34518
- {
34519
- style: {
34520
- gridArea: "header",
34521
- color: "var(--puck-color-black)",
34522
- background: "var(--puck-color-white)",
34523
- borderBottom: "1px solid var(--puck-color-grey-8)"
34524
- },
34525
- children: renderHeader ? renderHeader({
34505
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: getClassName18({ leftSideBarVisible }), children: [
34506
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("header", { className: getClassName18("header"), children: renderHeader ? renderHeader({
34507
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34508
+ Button,
34509
+ {
34510
+ onClick: () => {
34511
+ onPublish(data);
34512
+ },
34513
+ icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(globe_default, { size: "14px" }),
34514
+ children: "Publish"
34515
+ }
34516
+ ),
34517
+ dispatch,
34518
+ state: appState
34519
+ }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: getClassName18("headerInner"), children: [
34520
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName18("headerToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34521
+ IconButton,
34522
+ {
34523
+ onClick: () => dispatch({
34524
+ type: "setUi",
34525
+ ui: {
34526
+ leftSideBarVisible: !leftSideBarVisible
34527
+ }
34528
+ }),
34529
+ title: "Toggle left sidebar",
34530
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(sidebar_default, {})
34531
+ }
34532
+ ) }),
34533
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName18("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Heading, { rank: 2, size: "xs", children: [
34534
+ headerTitle || rootProps.title || "Page",
34535
+ headerPath && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
34536
+ " ",
34537
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("code", { className: getClassName18("headerPath"), children: headerPath })
34538
+ ] })
34539
+ ] }) }),
34540
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: getClassName18("headerTools"), children: [
34541
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex" }, children: [
34542
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34543
+ IconButton,
34544
+ {
34545
+ title: "undo",
34546
+ disabled: !canRewind,
34547
+ onClick: rewind,
34526
34548
  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34527
- Button,
34549
+ chevron_left_default,
34528
34550
  {
34529
- onClick: () => {
34530
- onPublish(data);
34531
- },
34532
- icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(globe_default, { size: "14px" }),
34533
- children: "Publish"
34551
+ size: 21,
34552
+ stroke: canRewind ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
34534
34553
  }
34535
- ),
34536
- dispatch,
34537
- state: appState
34538
- }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
34539
- "div",
34540
- {
34541
- style: {
34542
- display: "grid",
34543
- padding: 16,
34544
- gridTemplateAreas: '"left middle right"',
34545
- gridTemplateColumns: "344px auto 344px",
34546
- gridTemplateRows: "auto"
34547
- },
34548
- children: [
34549
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34550
- "div",
34551
- {
34552
- style: {
34553
- display: "flex",
34554
- gap: 16
34555
- },
34556
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34557
- IconButton,
34558
- {
34559
- onClick: () => dispatch({
34560
- type: "setUi",
34561
- ui: {
34562
- leftSideBarVisible: !leftSideBarVisible
34563
- }
34564
- }),
34565
- title: "Toggle left sidebar",
34566
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(sidebar_default, {})
34567
- }
34568
- )
34569
- }
34570
- ),
34571
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34572
- "div",
34573
- {
34574
- style: {
34575
- display: "flex",
34576
- justifyContent: "center",
34577
- alignItems: "center"
34578
- },
34579
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Heading, { rank: 2, size: "xs", children: [
34580
- headerTitle || rootProps.title || "Page",
34581
- headerPath && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34582
- "small",
34583
- {
34584
- style: { fontWeight: 400, marginLeft: 4 },
34585
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("code", { children: headerPath })
34586
- }
34587
- )
34588
- ] })
34589
- }
34590
- ),
34591
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
34592
- "div",
34593
- {
34594
- style: {
34595
- display: "flex",
34596
- gap: 16,
34597
- justifyContent: "flex-end"
34598
- },
34599
- children: [
34600
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex" }, children: [
34601
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34602
- IconButton,
34603
- {
34604
- title: "undo",
34605
- disabled: !canRewind,
34606
- onClick: rewind,
34607
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34608
- chevron_left_default,
34609
- {
34610
- size: 21,
34611
- stroke: canRewind ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
34612
- }
34613
- )
34614
- }
34615
- ),
34616
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34617
- IconButton,
34618
- {
34619
- title: "redo",
34620
- disabled: !canForward,
34621
- onClick: forward,
34622
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34623
- chevron_right_default,
34624
- {
34625
- size: 21,
34626
- stroke: canForward ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
34627
- }
34628
- )
34629
- }
34630
- )
34631
- ] }),
34632
- renderHeaderActions && renderHeaderActions({
34633
- state: appState,
34634
- dispatch
34635
- }),
34636
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34637
- Button,
34638
- {
34639
- onClick: () => {
34640
- onPublish(data);
34641
- },
34642
- icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(globe_default, { size: "14px" }),
34643
- children: "Publish"
34644
- }
34645
- )
34646
- ]
34647
- }
34648
- )
34649
- ]
34650
- }
34651
- )
34652
- }
34653
- ),
34654
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
34655
- "div",
34554
+ )
34555
+ }
34556
+ ),
34557
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34558
+ IconButton,
34559
+ {
34560
+ title: "redo",
34561
+ disabled: !canForward,
34562
+ onClick: forward,
34563
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34564
+ chevron_right_default,
34565
+ {
34566
+ size: 21,
34567
+ stroke: canForward ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
34568
+ }
34569
+ )
34570
+ }
34571
+ )
34572
+ ] }),
34573
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: renderHeaderActions && renderHeaderActions({
34574
+ state: appState,
34575
+ dispatch
34576
+ }) }),
34577
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34578
+ Button,
34656
34579
  {
34657
- style: {
34658
- gridArea: "left",
34659
- background: "var(--puck-color-grey-11)",
34660
- borderRight: "1px solid var(--puck-color-grey-8)",
34661
- overflowY: "auto",
34662
- display: "flex",
34663
- flexDirection: "column"
34580
+ onClick: () => {
34581
+ onPublish(data);
34664
34582
  },
34665
- children: [
34666
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentListWrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentList, { id: "all" }) }) }),
34667
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarSection, { title: "Outline", children: [
34668
- (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34669
- LayerTree,
34670
- {
34671
- data,
34672
- label: areaContainsZones(data, "root") ? rootDroppableId : "",
34673
- zoneContent: data.content,
34674
- setItemSelector,
34675
- itemSelector
34676
- }
34677
- ),
34678
- Object.entries(findZonesForArea(data, "root")).map(
34679
- ([zoneKey, zone]) => {
34680
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34681
- LayerTree,
34682
- {
34683
- data,
34684
- label: zoneKey,
34685
- zone: zoneKey,
34686
- zoneContent: zone,
34687
- setItemSelector,
34688
- itemSelector
34689
- },
34690
- zoneKey
34691
- );
34692
- }
34693
- )
34694
- ] })
34695
- ]
34583
+ icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(globe_default, { size: "14px" }),
34584
+ children: "Publish"
34696
34585
  }
34697
- ),
34698
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
34699
- "div",
34586
+ ) })
34587
+ ] })
34588
+ ] }) }),
34589
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: getClassName18("leftSideBar"), children: [
34590
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentListWrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentList, { id: "all" }) }) }),
34591
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarSection, { title: "Outline", children: [
34592
+ (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34593
+ LayerTree,
34700
34594
  {
34701
- style: {
34702
- overflowY: "auto",
34703
- gridArea: "editor",
34704
- position: "relative",
34705
- display: "flex",
34706
- flexDirection: "column"
34707
- },
34708
- onClick: () => setItemSelector(null),
34709
- id: "puck-frame",
34710
- children: [
34711
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34712
- "div",
34713
- {
34714
- className: "puck-root",
34715
- style: {
34716
- boxShadow: "0px 0px 0px 32px var(--puck-color-grey-10)",
34717
- margin: 32,
34718
- zoom: 0.75
34719
- },
34720
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34721
- "div",
34722
- {
34723
- style: {
34724
- border: "1px solid var(--puck-color-grey-8)"
34725
- },
34726
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34727
- Page,
34728
- __spreadProps(__spreadValues({
34729
- dispatch,
34730
- state: appState
34731
- }, data.root), {
34732
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId })
34733
- })
34734
- )
34735
- }
34736
- )
34737
- }
34738
- ),
34739
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34740
- "div",
34741
- {
34742
- style: {
34743
- background: "var(--puck-color-grey-10)",
34744
- height: "100%",
34745
- flexGrow: 1
34746
- }
34747
- }
34748
- )
34749
- ]
34595
+ data,
34596
+ label: areaContainsZones(data, "root") ? rootDroppableId : "",
34597
+ zoneContent: data.content,
34598
+ setItemSelector,
34599
+ itemSelector
34750
34600
  }
34751
34601
  ),
34752
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34753
- "div",
34754
- {
34755
- style: {
34756
- borderLeft: "1px solid var(--puck-color-grey-8)",
34757
- overflowY: "auto",
34758
- gridArea: "right",
34759
- fontFamily: "var(--puck-font-stack)",
34760
- display: "flex",
34761
- flexDirection: "column",
34762
- background: "var(--puck-color-white)"
34763
- },
34764
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34765
- SidebarSection,
34602
+ Object.entries(findZonesForArea(data, "root")).map(
34603
+ ([zoneKey, zone]) => {
34604
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34605
+ LayerTree,
34766
34606
  {
34767
- noPadding: true,
34768
- showBreadcrumbs: true,
34769
- title: selectedItem ? selectedItem.type : "Page",
34770
- isLoading: selectedItem ? (_a2 = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a2.loading : (_b2 = componentState["puck-root"]) == null ? void 0 : _b2.loading,
34771
- children: Object.keys(fields).map((fieldName) => {
34772
- const field = fields[fieldName];
34773
- const onChange2 = (value) => {
34774
- var _a3, _b3;
34775
- let currentProps;
34776
- if (selectedItem) {
34777
- currentProps = selectedItem.props;
34778
- } else {
34779
- currentProps = data.root;
34780
- }
34781
- const newProps = __spreadProps(__spreadValues({}, currentProps), {
34782
- [fieldName]: value
34783
- });
34784
- if (itemSelector) {
34785
- const action = {
34786
- type: "replace",
34787
- destinationIndex: itemSelector.index,
34788
- destinationZone: itemSelector.zone || rootDroppableId,
34789
- data: __spreadProps(__spreadValues({}, selectedItem), { props: newProps })
34790
- };
34791
- if ((_a3 = config.components[selectedItem.type]) == null ? void 0 : _a3.resolveData) {
34792
- resolveData(replaceAction(data, action));
34793
- } else {
34794
- dispatch(action);
34795
- }
34796
- } else {
34797
- if (data.root.props) {
34798
- if ((_b3 = config.root) == null ? void 0 : _b3.resolveData) {
34799
- resolveData(__spreadProps(__spreadValues({}, data), {
34800
- root: { props: { newProps } }
34801
- }));
34802
- } else {
34803
- dispatch({
34804
- type: "setData",
34805
- data: { root: { props: { newProps } } }
34806
- });
34807
- }
34808
- } else {
34809
- dispatch({
34810
- type: "setData",
34811
- data: { root: newProps }
34812
- });
34813
- }
34814
- }
34815
- };
34816
- if (selectedItem && itemSelector) {
34817
- const { readOnly = {} } = selectedItem;
34818
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34819
- InputOrGroup,
34820
- {
34821
- field,
34822
- name: fieldName,
34823
- label: field.label,
34824
- readOnly: readOnly[fieldName],
34825
- readOnlyFields: readOnly,
34826
- value: selectedItem.props[fieldName],
34827
- onChange: onChange2
34828
- },
34829
- `${selectedItem.props.id}_${fieldName}`
34830
- );
34831
- } else {
34832
- const { readOnly = {} } = data.root;
34833
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34834
- InputOrGroup,
34835
- {
34836
- field,
34837
- name: fieldName,
34838
- label: field.label,
34839
- readOnly: readOnly[fieldName],
34840
- readOnlyFields: readOnly,
34841
- value: rootProps[fieldName],
34842
- onChange: onChange2
34843
- },
34844
- `page_${fieldName}`
34845
- );
34846
- }
34847
- })
34848
- }
34849
- ) })
34607
+ data,
34608
+ label: zoneKey,
34609
+ zone: zoneKey,
34610
+ zoneContent: zone,
34611
+ setItemSelector,
34612
+ itemSelector
34613
+ },
34614
+ zoneKey
34615
+ );
34850
34616
  }
34851
34617
  )
34852
- ]
34853
- }
34854
- );
34618
+ ] })
34619
+ ] }),
34620
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
34621
+ "div",
34622
+ {
34623
+ className: getClassName18("frame"),
34624
+ onClick: () => setItemSelector(null),
34625
+ id: "puck-frame",
34626
+ children: [
34627
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName18("root"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName18("page"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34628
+ Page,
34629
+ __spreadProps(__spreadValues({
34630
+ dispatch,
34631
+ state: appState
34632
+ }, data.root), {
34633
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId })
34634
+ })
34635
+ ) }) }),
34636
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34637
+ "div",
34638
+ {
34639
+ style: {
34640
+ background: "var(--puck-color-grey-10)",
34641
+ height: "100%",
34642
+ flexGrow: 1
34643
+ }
34644
+ }
34645
+ )
34646
+ ]
34647
+ }
34648
+ ),
34649
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName18("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34650
+ SidebarSection,
34651
+ {
34652
+ noPadding: true,
34653
+ showBreadcrumbs: true,
34654
+ title: selectedItem ? selectedItem.type : "Page",
34655
+ isLoading: selectedItem ? (_a2 = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a2.loading : (_b2 = componentState["puck-root"]) == null ? void 0 : _b2.loading,
34656
+ children: Object.keys(fields).map((fieldName) => {
34657
+ const field = fields[fieldName];
34658
+ const onChange2 = (value) => {
34659
+ var _a3, _b3;
34660
+ let currentProps;
34661
+ if (selectedItem) {
34662
+ currentProps = selectedItem.props;
34663
+ } else {
34664
+ currentProps = data.root;
34665
+ }
34666
+ const newProps = __spreadProps(__spreadValues({}, currentProps), {
34667
+ [fieldName]: value
34668
+ });
34669
+ if (itemSelector) {
34670
+ const action = {
34671
+ type: "replace",
34672
+ destinationIndex: itemSelector.index,
34673
+ destinationZone: itemSelector.zone || rootDroppableId,
34674
+ data: __spreadProps(__spreadValues({}, selectedItem), { props: newProps })
34675
+ };
34676
+ if ((_a3 = config.components[selectedItem.type]) == null ? void 0 : _a3.resolveData) {
34677
+ resolveData(replaceAction(data, action));
34678
+ } else {
34679
+ dispatch(action);
34680
+ }
34681
+ } else {
34682
+ if (data.root.props) {
34683
+ if ((_b3 = config.root) == null ? void 0 : _b3.resolveData) {
34684
+ resolveData(__spreadProps(__spreadValues({}, data), {
34685
+ root: { props: { newProps } }
34686
+ }));
34687
+ } else {
34688
+ dispatch({
34689
+ type: "setData",
34690
+ data: { root: { props: { newProps } } }
34691
+ });
34692
+ }
34693
+ } else {
34694
+ dispatch({
34695
+ type: "setData",
34696
+ data: { root: newProps }
34697
+ });
34698
+ }
34699
+ }
34700
+ };
34701
+ if (selectedItem && itemSelector) {
34702
+ const { readOnly = {} } = selectedItem;
34703
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34704
+ InputOrGroup,
34705
+ {
34706
+ field,
34707
+ name: fieldName,
34708
+ label: field.label,
34709
+ readOnly: readOnly[fieldName],
34710
+ readOnlyFields: readOnly,
34711
+ value: selectedItem.props[fieldName],
34712
+ onChange: onChange2
34713
+ },
34714
+ `${selectedItem.props.id}_${fieldName}`
34715
+ );
34716
+ } else {
34717
+ const { readOnly = {} } = data.root;
34718
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
34719
+ InputOrGroup,
34720
+ {
34721
+ field,
34722
+ name: fieldName,
34723
+ label: field.label,
34724
+ readOnly: readOnly[fieldName],
34725
+ readOnlyFields: readOnly,
34726
+ value: rootProps[fieldName],
34727
+ onChange: onChange2
34728
+ },
34729
+ `page_${fieldName}`
34730
+ );
34731
+ }
34732
+ })
34733
+ }
34734
+ ) }) })
34735
+ ] });
34855
34736
  } })
34856
34737
  }
34857
34738
  )