@puckeditor/core 0.22.4 → 0.23.0-canary.026f0300

package/dist/{chunk-KJQTOPIV.mjs → chunk-DIYX54ZO.mjs}

@@ -3,13 +3,13 @@ import {
   generateId,
   getItem,
   makeStatePublic
-} from "./chunk-25QAPMLH.mjs";
+} from "./chunk-UAWUZ45G.mjs";
 import {
   defaultAppState,
   defaultViewports,
   getChanged,
   resolveComponentData
-} from "./chunk-WUO7D6OQ.mjs";
+} from "./chunk-NPAYGEG5.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -243,6 +243,13 @@ var ChevronRight = createLucideIcon("ChevronRight", [
 init_react_import();
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/chevrons-down-up.js
+init_react_import();
+var ChevronsDownUp = createLucideIcon("ChevronsDownUp", [
+  ["path", { d: "m7 20 5-5 5 5", key: "13a0gw" }],
+  ["path", { d: "m7 4 5 5 5-5", key: "1kwcof" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/circle-check-big.js
 init_react_import();
 var CircleCheckBig = createLucideIcon("CircleCheckBig", [
@@ -1134,7 +1141,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
       const componentData = node == null ? void 0 : node.data;
       const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node.parentId] : null;
       const parent = (parentNode == null ? void 0 : parentNode.data) || null;
-      const { getComponentConfig, state } = appStore.getState();
+      const { getComponentConfig, state, config } = appStore.getState();
       const componentConfig = getComponentConfig(componentData == null ? void 0 : componentData.type);
       if (!componentData || !componentConfig) return;
       const defaultFields = componentConfig.fields || {};
@@ -1167,6 +1174,9 @@ var useRegisterFieldsSlice = (appStore, id) => {
         if (((_b = appStore.getState().selectedItem) == null ? void 0 : _b.props.id) !== id) {
           return;
         }
+        if (appStore.getState().config !== config) {
+          return;
+        }
         appStore.setState({
           fields: {
             fields: newFields,
@@ -1185,10 +1195,18 @@ var useRegisterFieldsSlice = (appStore, id) => {
   );
   useEffect4(() => {
     resolveFields(true);
-    return appStore.subscribe(
+    const unsubscribeData = appStore.subscribe(
       (s) => s.state.indexes.nodes[id || "root"],
       () => resolveFields()
     );
+    const unsubscribeConfig = appStore.subscribe(
+      (s) => s.config,
+      () => resolveFields(true)
+    );
+    return () => {
+      unsubscribeData();
+      unsubscribeConfig();
+    };
   }, [id]);
 };
 
@@ -1234,6 +1252,8 @@ var createAppStore = (initialAppStore) => create2()(
       _experimentalFullScreenCanvas: false,
       _experimentalVirtualization: false,
       metadata: {},
+      dictionary: {},
+      dnd: {},
       fieldTransforms: {}
     }, initialAppStore), {
       fields: createFieldsSlice(set, get),
@@ -1417,7 +1437,7 @@ import { forwardRef as forwardRef4, useState } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
-var IconButton_module_default = { "IconButton": "_IconButton_yuha3_1", "IconButton--active": "_IconButton--active_yuha3_15", "IconButton--disabled": "_IconButton--disabled_yuha3_28" };
+var IconButton_module_default = { "IconButton": "_IconButton_1pxxt_1", "IconButton--active": "_IconButton--active_1pxxt_15", "IconButton--disabled": "_IconButton--disabled_1pxxt_28" };
 
 // components/Loader/index.tsx
 init_react_import();
@@ -1620,6 +1640,110 @@ var useResetAutoZoom = (frameRef) => {
 init_react_import();
 var styles_module_default2 = { "Loader": "_Loader_1w5zn_13", "loader-animation": "_loader-animation_1w5zn_1" };
 
+// lib/use-message.ts
+init_react_import();
+
+// lib/dictionary.ts
+init_react_import();
+var defaultDictionary = {
+  // Header
+  "header-publish": "Publish",
+  "header-undo": "undo",
+  "header-redo": "redo",
+  "header-toggle-leftsidebar": "Toggle left sidebar",
+  "header-toggle-rightsidebar": "Toggle right sidebar",
+  "header-toggle-menubar": "Toggle menu bar",
+  // Component action bar
+  "action-selectparent": "Select parent",
+  "action-duplicate": "Duplicate",
+  "action-delete": "Delete",
+  // Fallback labels — shared by the breadcrumbs, fields panel and header
+  "label-page": "Page",
+  "label-component": "Component",
+  // Outline
+  "outline-empty": "No items",
+  "outline-item-collapse": "Collapse",
+  "outline-item-expand": "Expand",
+  "outline-header-title": "Outline",
+  "outline-header-collapseall": "Collapse all",
+  "outline-item-duplicate": "Duplicate",
+  "outline-item-delete": "Delete",
+  // Drawer (component list)
+  "drawer-category-collapse": "Collapse {title}",
+  "drawer-category-expand": "Expand {title}",
+  "drawer-category-other": "Other",
+  // Canvas
+  "canvas-noconfig": "No configuration for {type}",
+  // Fields
+  "field-readonly": "Read-only",
+  "field-arrayitem-summary": "Item #{index}",
+  "field-arrayitem-duplicate": "Duplicate",
+  "field-arrayitem-delete": "Delete",
+  "field-external-selectdata": "Select data",
+  "field-external-search": "Search",
+  "field-external-togglefilters": "Toggle filters",
+  "field-external-item": "External item",
+  "field-external-result-singular": "{count} result",
+  "field-external-result-plural": "{count} results",
+  // Rich text field
+  "field-richtext-bold": "Bold",
+  "field-richtext-italic": "Italic",
+  "field-richtext-underline": "Underline",
+  "field-richtext-strikethrough": "Strikethrough",
+  "field-richtext-blockquote": "Blockquote",
+  "field-richtext-code-inline": "Inline code",
+  "field-richtext-code-block": "Code block",
+  "field-richtext-list-bullet": "Bullet list",
+  "field-richtext-list-ordered": "Ordered list",
+  "field-richtext-horizontalrule": "Horizontal rule",
+  "field-richtext-align-left": "Align left",
+  "field-richtext-align-center": "Align center",
+  "field-richtext-align-right": "Align right",
+  "field-richtext-align-justify": "Justify",
+  "field-richtext-select": "Select",
+  "field-richtext-headingselect-1": "Heading 1",
+  "field-richtext-headingselect-2": "Heading 2",
+  "field-richtext-headingselect-3": "Heading 3",
+  "field-richtext-headingselect-4": "Heading 4",
+  "field-richtext-headingselect-5": "Heading 5",
+  "field-richtext-headingselect-6": "Heading 6",
+  "field-richtext-alignselect-left": "Left",
+  "field-richtext-alignselect-center": "Center",
+  "field-richtext-alignselect-right": "Right",
+  "field-richtext-alignselect-justify": "Justify",
+  "field-richtext-listselect-bullet": "Bullet list",
+  "field-richtext-listselect-ordered": "Ordered list",
+  // Viewport controls
+  "viewport-zoom-in": "Zoom viewport in",
+  "viewport-zoom-out": "Zoom viewport out",
+  "viewport-zoom-auto": "{zoom}% (Auto)",
+  "viewport-toggle-menu": "Toggle viewport menu",
+  "viewport-switch": "Switch to {label} viewport",
+  "viewport-switch-default": "Switch viewport",
+  // Plugin bar
+  "plugin-blocks": "Blocks",
+  "plugin-outline": "Outline",
+  "plugin-fields": "Fields",
+  "plugin-components": "Components",
+  // Layout
+  "layout-maximize": "maximize",
+  "layout-minimize": "minimize",
+  // Loader
+  "loader-loading": "loading"
+};
+var interpolate = (template, params) => template.replace(
+  /\{(\w+)\}/g,
+  (match, key) => params[key] !== void 0 ? String(params[key]) : match
+);
+var getMessage = (dictionary, key, params) => {
+  var _a;
+  const message = (_a = dictionary[key]) != null ? _a : defaultDictionary[key];
+  return params ? interpolate(message, params) : message;
+};
+
+// lib/use-message.ts
+var useMessage = (key, params) => useAppStore((s) => getMessage(s.dictionary, key, params));
+
 // components/Loader/index.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var getClassName2 = get_class_name_factory_default("Loader", styles_module_default2);
@@ -1631,6 +1755,7 @@ var Loader = (_a) => {
     "color",
     "size"
   ]);
+  const loadingLabel = useMessage("loader-loading");
   return /* @__PURE__ */ jsx2(
     "span",
     __spreadValues({
@@ -1640,7 +1765,7 @@ var Loader = (_a) => {
         height: size,
         color
       },
-      "aria-label": "loading"
+      "aria-label": loadingLabel
     }, props)
   );
 };
@@ -1767,6 +1892,7 @@ var Select = ({
   disabled = false
 }) => {
   const [open, setOpen] = useState2(false);
+  const selectLabel = useMessage("field-richtext-select");
   const hasOptions = options.length > 0;
   const isDisabled = disabled || !hasOptions;
   const buttonInner = /* @__PURE__ */ jsxs3("div", { className: getClassName4("buttonInner"), children: [
@@ -1776,7 +1902,7 @@ var Select = ({
   const trigger = mode === "actionBar" ? /* @__PURE__ */ jsx4(Action, { active: value !== defaultValue, disabled: isDisabled, children: buttonInner }) : /* @__PURE__ */ jsx4(
     IconButton,
     {
-      title: "Select",
+      title: selectLabel,
       active: value !== defaultValue,
       disabled: isDisabled,
       children: buttonInner
@@ -1860,6 +1986,7 @@ export {
   ChevronDown,
   ChevronRight,
   ChevronUp,
+  ChevronsDownUp,
   CircleCheckBig,
   Code,
   Copy,
@@ -1922,6 +2049,7 @@ export {
   useAppStoreApi,
   getBox,
   useResetAutoZoom,
+  useMessage,
   Loader,
   IconButton,
   ControlContext,
@@ -1944,6 +2072,7 @@ lucide-react/dist/esm/icons/bold.js:
 lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/chevron-right.js:
 lucide-react/dist/esm/icons/chevron-up.js:
+lucide-react/dist/esm/icons/chevrons-down-up.js:
 lucide-react/dist/esm/icons/circle-check-big.js:
 lucide-react/dist/esm/icons/code.js:
 lucide-react/dist/esm/icons/copy.js:

package/dist/{chunk-4I2WN43X.mjs → chunk-L73ATZ55.mjs}

@@ -1,7 +1,8 @@
 import {
   List,
-  ListOrdered
-} from "./chunk-KJQTOPIV.mjs";
+  ListOrdered,
+  useMessage
+} from "./chunk-DIYX54ZO.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";
@@ -9,11 +10,17 @@ import {
 // components/RichTextMenu/controls/ListSelect/use-options.ts
 init_react_import();
 import { useMemo } from "react";
-var optionNodes = {
-  ul: { label: "Bullet list", icon: List },
-  ol: { label: "Numbered list", icon: ListOrdered }
+var optionIcons = {
+  ul: List,
+  ol: ListOrdered
 };
 var useListOptions = (fieldOptions) => {
+  const ulString = useMessage("field-richtext-listselect-bullet");
+  const olString = useMessage("field-richtext-listselect-ordered");
+  const optionLabels = {
+    ul: ulString,
+    ol: olString
+  };
   let blockOptions = [];
   if ((fieldOptions == null ? void 0 : fieldOptions.listItem) !== false) {
     blockOptions = ["ul", "ol"];
@@ -21,10 +28,10 @@ var useListOptions = (fieldOptions) => {
   return useMemo(
     () => blockOptions.map((item) => ({
       value: item,
-      label: optionNodes[item].label,
-      icon: optionNodes[item].icon
+      label: optionLabels[item],
+      icon: optionIcons[item]
     })),
-    [blockOptions]
+    [blockOptions, optionLabels]
   );
 };
 

package/dist/{chunk-WUO7D6OQ.mjs → chunk-NPAYGEG5.mjs}

@@ -124,6 +124,7 @@ var defaultAppState = {
     itemSelector: null,
     componentList: {},
     isDragging: false,
+    itemExpanded: {},
     previewMode: "edit",
     viewports: {
       current: {

package/dist/{chunk-C2H4WQP2.mjs → chunk-OCFR2FFG.mjs}

@@ -4,8 +4,9 @@ import {
   Heading3,
   Heading4,
   Heading5,
-  Heading6
-} from "./chunk-KJQTOPIV.mjs";
+  Heading6,
+  useMessage
+} from "./chunk-DIYX54ZO.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";
@@ -13,16 +14,30 @@ import {
 // components/RichTextMenu/controls/HeadingSelect/use-options.ts
 init_react_import();
 import { useMemo } from "react";
-var optionNodes = {
-  h1: { label: "Heading 1", icon: Heading1 },
-  h2: { label: "Heading 2", icon: Heading2 },
-  h3: { label: "Heading 3", icon: Heading3 },
-  h4: { label: "Heading 4", icon: Heading4 },
-  h5: { label: "Heading 5", icon: Heading5 },
-  h6: { label: "Heading 6", icon: Heading6 }
+var optionIcons = {
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  h4: Heading4,
+  h5: Heading5,
+  h6: Heading6
 };
 var useHeadingOptions = (fieldOptions) => {
   var _a;
+  const h1String = useMessage("field-richtext-headingselect-1");
+  const h2String = useMessage("field-richtext-headingselect-2");
+  const h3String = useMessage("field-richtext-headingselect-3");
+  const h4String = useMessage("field-richtext-headingselect-4");
+  const h5String = useMessage("field-richtext-headingselect-5");
+  const h6String = useMessage("field-richtext-headingselect-6");
+  const optionLabels = {
+    h1: h1String,
+    h2: h2String,
+    h3: h3String,
+    h4: h4String,
+    h5: h5String,
+    h6: h6String
+  };
   let blockOptions = [];
   if ((fieldOptions == null ? void 0 : fieldOptions.heading) !== false) {
     if (!((_a = fieldOptions == null ? void 0 : fieldOptions.heading) == null ? void 0 : _a.levels)) {
@@ -51,10 +66,10 @@ var useHeadingOptions = (fieldOptions) => {
   return useMemo(
     () => blockOptions.map((item) => ({
       value: item,
-      label: optionNodes[item].label,
-      icon: optionNodes[item].icon
+      label: optionLabels[item],
+      icon: optionIcons[item]
     })),
-    [blockOptions]
+    [blockOptions, optionLabels]
   );
 };
 

package/dist/{chunk-NKDMBWQC.mjs → chunk-OSPG5CWL.mjs}

@@ -2,8 +2,9 @@ import {
   AlignCenter,
   AlignJustify,
   AlignLeft,
-  AlignRight
-} from "./chunk-KJQTOPIV.mjs";
+  AlignRight,
+  useMessage
+} from "./chunk-DIYX54ZO.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";
@@ -11,14 +12,24 @@ import {
 // components/RichTextMenu/controls/AlignSelect/use-options.ts
 init_react_import();
 import { useMemo } from "react";
-var optionNodes = {
-  left: { label: "Left", icon: AlignLeft },
-  center: { label: "Center", icon: AlignCenter },
-  right: { label: "Right", icon: AlignRight },
-  justify: { label: "Justify", icon: AlignJustify }
+var optionIcons = {
+  left: AlignLeft,
+  center: AlignCenter,
+  right: AlignRight,
+  justify: AlignJustify
 };
 var useAlignOptions = (fieldOptions) => {
   var _a;
+  const leftString = useMessage("field-richtext-alignselect-left");
+  const centerString = useMessage("field-richtext-alignselect-center");
+  const rightString = useMessage("field-richtext-alignselect-right");
+  const justifyString = useMessage("field-richtext-alignselect-justify");
+  const optionLabels = {
+    left: leftString,
+    center: centerString,
+    right: rightString,
+    justify: justifyString
+  };
   let blockOptions = [];
   if ((fieldOptions == null ? void 0 : fieldOptions.textAlign) !== false) {
     if (!((_a = fieldOptions == null ? void 0 : fieldOptions.textAlign) == null ? void 0 : _a.alignments)) {
@@ -41,10 +52,10 @@ var useAlignOptions = (fieldOptions) => {
   return useMemo(
     () => blockOptions.map((item) => ({
       value: item,
-      label: optionNodes[item].label,
-      icon: optionNodes[item].icon
+      label: optionLabels[item],
+      icon: optionIcons[item]
     })),
-    [blockOptions]
+    [blockOptions, optionLabels]
   );
 };
 

package/dist/{chunk-PRZEIT36.mjs → chunk-PJYHZPJK.mjs}

@@ -3,11 +3,11 @@ import {
 } from "./chunk-H635BA2V.mjs";
 import {
   LoadedRichTextMenuInner
-} from "./chunk-25O24MZR.mjs";
+} from "./chunk-3OLRWMRO.mjs";
 import {
   useAppStore,
   useAppStoreApi
-} from "./chunk-KJQTOPIV.mjs";
+} from "./chunk-DIYX54ZO.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -100,7 +100,7 @@ init_react_import();
 import { lazy, Suspense } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LoadedRichTextMenuFull = lazy(
-  () => import("./full-YXSOFDYM.mjs").then((m) => ({
+  () => import("./full-67VCA5MX.mjs").then((m) => ({
     default: m.LoadedRichTextMenuFull
   }))
 );