@measured/puck 0.15.0 → 0.15.1-canary.0daf478

package/dist/index.css

@@ -137,44 +137,45 @@
 /* styles.css */
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
-._Input_1qi5b_1 {
+._Input_3pq3z_1 {
   color: var(--puck-color-grey-04);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
 }
-._Input_1qi5b_1 ._Input_1qi5b_1 {
+._Input_3pq3z_1 ._Input_3pq3z_1 {
   padding: 0px;
 }
-._Input_1qi5b_1 * {
+._Input_3pq3z_1 * {
   box-sizing: border-box;
 }
-._Input_1qi5b_1 + ._Input_1qi5b_1 {
+._Input_3pq3z_1 + ._Input_3pq3z_1 {
   border-top: 1px solid var(--puck-color-grey-09);
   margin-top: 8px;
 }
-._Input_1qi5b_1 ._Input_1qi5b_1 + ._Input_1qi5b_1 {
+._Input_3pq3z_1 ._Input_3pq3z_1 + ._Input_3pq3z_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_1qi5b_26 {
+._Input-label_3pq3z_26 {
   align-items: center;
+  color: var(--puck-color-grey-04);
   display: flex;
   padding-bottom: 12px;
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_1qi5b_34 {
+._Input-labelIcon_3pq3z_35 {
   color: var(--puck-color-grey-07);
   display: flex;
   margin-right: 4px;
   padding-left: 4px;
 }
-._Input-disabledIcon_1qi5b_41 {
+._Input-disabledIcon_3pq3z_42 {
   color: var(--puck-color-grey-05);
   margin-left: auto;
 }
-._Input-input_1qi5b_46 {
+._Input-input_3pq3z_47 {
   background: var(--puck-color-white);
   border-width: 1px;
   border-style: solid;
@@ -186,7 +187,7 @@
   transition: border-color 50ms ease-in;
   width: 100%;
 }
-select._Input-input_1qi5b_46 {
+select._Input-input_3pq3z_47 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 12px;
@@ -196,25 +197,25 @@ select._Input-input_1qi5b_46 {
   cursor: pointer;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input_1qi5b_1:has(> input):hover ._Input-input_1qi5b_46:not([readonly]),
-  ._Input_1qi5b_1:has(> textarea):hover ._Input-input_1qi5b_46:not([readonly]) {
+  ._Input_3pq3z_1:has(> input):hover ._Input-input_3pq3z_47:not([readonly]),
+  ._Input_3pq3z_1:has(> textarea):hover ._Input-input_3pq3z_47:not([readonly]) {
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
-  ._Input_1qi5b_1:has(> select):hover ._Input-input_1qi5b_46:not([disabled]) {
+  ._Input_3pq3z_1:has(> select):hover ._Input-input_3pq3z_47:not([disabled]) {
     background-color: var(--puck-color-azure-12);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
 }
-._Input-input_1qi5b_46:focus {
+._Input-input_3pq3z_47:focus {
   border-color: var(--puck-color-grey-05);
   outline: 2px solid var(--puck-color-azure-05);
   transition: none;
 }
-._Input--readOnly_1qi5b_90 > ._Input-input_1qi5b_46,
-._Input--readOnly_1qi5b_90 > select._Input-input_1qi5b_46 {
+._Input--readOnly_3pq3z_91 > ._Input-input_3pq3z_47,
+._Input--readOnly_3pq3z_91 > select._Input-input_3pq3z_47 {
   background-color: var(--puck-color-grey-11);
   border-color: var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
@@ -223,34 +224,34 @@ select._Input-input_1qi5b_46 {
   outline: 0;
   transition: none;
 }
-._Input-radioGroupItems_1qi5b_101 {
+._Input-radioGroupItems_3pq3z_102 {
   display: flex;
   border: 1px solid var(--puck-color-grey-09);
   border-radius: 4px;
   flex-wrap: wrap;
 }
-._Input-radio_1qi5b_101 {
+._Input-radio_3pq3z_102 {
   border-right: 1px solid var(--puck-color-grey-09);
   flex-grow: 1;
 }
-._Input-radio_1qi5b_101:first-of-type {
+._Input-radio_3pq3z_102:first-of-type {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
-._Input-radio_1qi5b_101:first-of-type ._Input-radioInner_1qi5b_118 {
+._Input-radio_3pq3z_102:first-of-type ._Input-radioInner_3pq3z_119 {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
-._Input-radio_1qi5b_101:last-of-type {
+._Input-radio_3pq3z_102:last-of-type {
   border-bottom-right-radius: 4px;
   border-right: 0;
   border-top-right-radius: 4px;
 }
-._Input-radio_1qi5b_101:last-of-type ._Input-radioInner_1qi5b_118 {
+._Input-radio_3pq3z_102:last-of-type ._Input-radioInner_3pq3z_119 {
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
-._Input-radioInner_1qi5b_118 {
+._Input-radioInner_3pq3z_119 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: pointer;
@@ -259,32 +260,32 @@ select._Input-input_1qi5b_46 {
   text-align: center;
   transition: background-color 50ms ease-in;
 }
-._Input-radio_1qi5b_101:has(:focus-visible) {
+._Input-radio_3pq3z_102:has(:focus-visible) {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
   position: relative;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input-radioInner_1qi5b_118:hover {
+  ._Input-radioInner_3pq3z_119:hover {
     background-color: var(--puck-color-azure-12);
     transition: none;
   }
 }
-._Input--readOnly_1qi5b_90 ._Input-radioInner_1qi5b_118 {
+._Input--readOnly_3pq3z_91 ._Input-radioInner_3pq3z_119 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: default;
 }
-._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
+._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
   background-color: var(--puck-color-azure-11);
   color: var(--puck-color-azure-04);
   font-weight: 500;
 }
-._Input--readOnly_1qi5b_90 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
+._Input--readOnly_3pq3z_91 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-04);
 }
-._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163 {
+._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -293,7 +294,7 @@ select._Input-input_1qi5b_46 {
   white-space: nowrap;
   width: 1px;
 }
-textarea._Input-input_1qi5b_46 {
+textarea._Input-input_3pq3z_47 {
   margin-bottom: -4px;
 }
 
@@ -1680,7 +1681,7 @@ textarea._Input-input_1qi5b_46 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
-._ViewportControls_3zdvn_1 {
+._ViewportControls_g1wgg_1 {
   display: flex;
   background: var(--puck-color-grey-11);
   box-sizing: border-box;
@@ -1693,12 +1694,12 @@ textarea._Input-input_1qi5b_46 {
   padding-right: var(--puck-space-px);
   z-index: 1;
 }
-._ViewportControls-divider_3zdvn_15 {
+._ViewportControls-divider_g1wgg_15 {
   border-right: 1px solid var(--puck-color-grey-09);
   margin-left: 8px;
   margin-right: 8px;
 }
-._ViewportControls-zoomSelect_3zdvn_21 {
+._ViewportControls-zoomSelect_g1wgg_21 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 10px;
@@ -1706,9 +1707,10 @@ textarea._Input-input_1qi5b_46 {
   background-repeat: no-repeat;
   border: 0;
   font-size: var(--puck-font-size-xxxs);
+  padding: 0;
   width: 96px;
 }
-._ViewportButton--isActive_3zdvn_33 ._ViewportButton-inner_3zdvn_33 {
+._ViewportButton--isActive_g1wgg_34 ._ViewportButton-inner_g1wgg_34 {
   color: var(--puck-color-azure-04);
 }
 

package/dist/index.js

@@ -29207,7 +29207,7 @@ var get_class_name_factory_default = getClassNameFactory;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "Input": "_Input_1qi5b_1", "Input-label": "_Input-label_1qi5b_26", "Input-labelIcon": "_Input-labelIcon_1qi5b_34", "Input-disabledIcon": "_Input-disabledIcon_1qi5b_41", "Input-input": "_Input-input_1qi5b_46", "Input--readOnly": "_Input--readOnly_1qi5b_90", "Input-radioGroupItems": "_Input-radioGroupItems_1qi5b_101", "Input-radio": "_Input-radio_1qi5b_101", "Input-radioInner": "_Input-radioInner_1qi5b_118", "Input-radioInput": "_Input-radioInput_1qi5b_163" };
+var styles_module_default = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
 
 // components/AutoField/index.tsx
 var import_react11 = require("react");
@@ -31408,6 +31408,8 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                       "No configuration for ",
                       item.type
                     ] });
+                    const componentConfig = config.components[item.type];
+                    const label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
                     return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                       "div",
                       {
@@ -31423,7 +31425,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                               children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                                 DraggableComponent,
                                 {
-                                  label: (_b = config.components[item.type]["label"]) != null ? _b : item.type.toString(),
+                                  label,
                                   id: `draggable-${componentId}`,
                                   index: i,
                                   isSelected,
@@ -33080,6 +33082,8 @@ var LayerTree = ({
         const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
         const isHovering = hoveringComponent === item.props.id;
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
+        const componentConfig = config.components[item.type];
+        const label2 = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : item.type.toString();
         return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "li",
           {
@@ -33132,7 +33136,7 @@ var LayerTree = ({
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: getClassNameLayer("title"), children: [
                       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassNameLayer("name"), children: (_a = config.components[item.type]["label"]) != null ? _a : item.type })
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
@@ -33447,7 +33451,7 @@ var import_react28 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
-var styles_module_default19 = { "ViewportControls": "_ViewportControls_3zdvn_1", "ViewportControls-divider": "_ViewportControls-divider_3zdvn_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_3zdvn_21", "ViewportButton--isActive": "_ViewportButton--isActive_3zdvn_33", "ViewportButton-inner": "_ViewportButton-inner_3zdvn_33" };
+var styles_module_default19 = { "ViewportControls": "_ViewportControls_g1wgg_1", "ViewportControls-divider": "_ViewportControls-divider_g1wgg_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_g1wgg_21", "ViewportButton--isActive": "_ViewportButton--isActive_g1wgg_34", "ViewportButton-inner": "_ViewportButton-inner_g1wgg_34" };
 
 // components/ViewportControls/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -33941,6 +33945,8 @@ function Puck({
   (0, import_react30.useEffect)(() => {
     setMounted(true);
   }, []);
+  const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
+  const selectedComponentLabel = selectedItem ? (_a = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _a : selectedItem.type.toString() : "";
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `Puck ${getClassName26()}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       AppProvider,
@@ -34149,7 +34155,7 @@ function Puck({
                           noPadding: true,
                           noBorderTop: true,
                           showBreadcrumbs: true,
-                          title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
+                          title: selectedItem ? selectedComponentLabel : "Page",
                           children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Fields, {})
                         }
                       ) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.15.0",
+  "version": "0.15.1-canary.0daf478",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",