@aduptive/strapi-blockscene 2.0.0-alpha.1 → 2.0.0-alpha.3

package/README.md

@@ -292,10 +292,11 @@ the configured static base.
 
 ## Guarantees and limits
 
-Tested versions: Strapi 4.26.1 (Node 20) and 5.52.1 (Node 22) in the local
-labs of this repository, and 5.23.5 and 5.31.0 in two real site projects. The
-peer ranges (`>=5.23.0 <6`, `>=4.20.0 <5`) express what installs without
-overrides, not a promise for every minor in between.
+Tested versions: Strapi 4.11.0 and 4.26.1 (Node 20), 5.0.0 and 5.52.1
+(Node 22) in the local labs of this repository, and 5.23.5 and 5.31.0 in two
+real site projects. The peer ranges (`>=5.0.0 <6`, `>=4.11.0 <5`) express what
+installs without overrides, not a promise for every minor in between. Strapi
+4.0–4.10 is out of reach: those admins run React 17 and lack `useFetchClient`.
 
 
 - Native component payloads and ordinary Strapi save/publish flow.

package/dist/admin.cjs

@@ -1857,6 +1857,7 @@ function PagePreview({ editor, groups = null, Toggle }) {
   const components = (0, import_admin2.useStrapiApp)("BlockscenePagePreview", (state) => state.components);
   const MediaLibraryDialog = components?.["media-library"];
   const addFieldRow = (0, import_admin2.useForm)("BlockscenePagePreview", (state) => state.addFieldRow);
+  const moveFieldRow = (0, import_admin2.useForm)("BlockscenePagePreview", (state) => state.moveFieldRow);
   const fields = c.layout?.edit?.layout?.flat(3) || [];
   const readable = (name) => c.isCreatingEntry || (rbac.canReadFields || []).includes(name);
   const zone = React3.useMemo(() => editableZones(c.contentType, values, readable, c.isLoading)[0]?.name, [c.contentType, values, c.isLoading, rbac.canReadFields, c.isCreatingEntry]);
@@ -1906,6 +1907,11 @@ function PagePreview({ editor, groups = null, Toggle }) {
   const rows = zone && Array.isArray(values?.[zone]) ? values[zone] : [];
   const latest = React3.useRef(rows);
   latest.current = rows;
+  const insertRows = (at, ...items) => items.forEach((item, i) => {
+    const from = latest.current.length + i;
+    addFieldRow(zone, item);
+    if (at + i < from) moveFieldRow(zone, from, at + i);
+  });
   const live = React3.useRef({ mode, canEdit, zoneLabel, components: c.components, setMode, onChange });
   live.current = { mode, canEdit, zoneLabel, components: c.components, setMode, onChange };
   const send = React3.useCallback(() => {
@@ -2002,8 +2008,7 @@ function PagePreview({ editor, groups = null, Toggle }) {
           toggleNotification({ type: "info", message: t.zoneFull });
           return;
         }
-        addFieldRow(zone, { ...componentDefaults(components2[uid2], components2), __component: uid2 }, index2);
-        addFieldRow(zone, { __component: close }, index2 + 1);
+        insertRows(index2, { ...componentDefaults(components2[uid2], components2), __component: uid2 }, { __component: close });
         return;
       }
       const key = typeof event.data?.key === "string" ? event.data.key : "";
@@ -2065,7 +2070,7 @@ function PagePreview({ editor, groups = null, Toggle }) {
   const problems = groups ? (0, import_groups.validateGroups)(rows, groups) : [];
   const insertClose = (error) => {
     const end = (0, import_groups.groupRange)(latest.current, error.index, groups)[1];
-    addFieldRow(zone, { __component: error.expected }, end + 1);
+    insertRows(end + 1, { __component: error.expected });
   };
   const diagnostics = problems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Box, { role: "alert", "data-testid": "page-preview-diagnostics", padding: 2, background: "danger100", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("details", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("summary", { style: { cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Typography, { variant: "pi", fontWeight: "bold", textColor: "danger700", children: t.f("diagSummary", { count: problems.length }) }) }),
@@ -2166,8 +2171,7 @@ function PagePreview({ editor, groups = null, Toggle }) {
             toggleNotification({ type: "warning", message: close ? t.zoneFull : t.insertMoved });
             return;
           }
-          addFieldRow(zone, { ...componentDefaults(c.components[uid], c.components), __component: uid }, index);
-          if (close) addFieldRow(zone, { __component: close }, index + 1);
+          insertRows(index, { ...componentDefaults(c.components[uid], c.components), __component: uid }, ...close ? [{ __component: close }] : []);
         }
       }
     ),
@@ -2525,14 +2529,16 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
     ] })
   ] }) });
 }
-function register(app, Component) {
+function register(app, Component, to) {
   app.createSettingSection(
     { id: "blockscene", intlLabel: { id: "blockscene.title", defaultMessage: "Blockscene" } },
     [{
       id: "blockscene-settings",
-      to: "/settings/blockscene",
+      to,
       intlLabel: { id: "blockscene.settings", defaultMessage: "Gallery" },
-      Component: async () => Component,
+      // Module shape: older Strapi 4 (e.g. 4.11) only reads `.default` from the loader result.
+      // Not an `async` function: Strapi 5 warns on AsyncFunction loaders.
+      Component: () => Promise.resolve({ default: Component }),
       permissions: permissions.read
     }]
   );
@@ -2622,13 +2628,13 @@ function MediaPicker({ onClose, onSelect }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog3, { onClose, allowedTypes: ["images"], multiple: false, onSelectAssets: (assets) => onSelect(assets?.[0]) });
 }
 function usePermissions() {
-  const { allowedActions, isLoading } = (0, import_admin3.useRBAC)(permissions);
+  const { allowedActions, isLoading } = (0, import_admin3.useRBAC)(Object.values(permissions).flat());
   return { canRead: allowedActions.canRead, canUpdate: allowedActions.canUpdate, isLoading };
 }
 var SettingsPage = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Settings, { useClient: import_admin3.useFetchClient, usePermissions, MediaPicker, ToggleField, SelectField, TextField, previewSupported: true });
 var strapi5_default = {
   register(app) {
-    register(app, SettingsPage);
+    register(app, SettingsPage, "blockscene");
     app.registerPlugin({ id: "blockscene", name: "Blockscene" });
   },
   registerTrads,

package/dist/admin.mjs

@@ -1847,6 +1847,7 @@ function PagePreview({ editor, groups = null, Toggle }) {
   const components = useStrapiApp2("BlockscenePagePreview", (state) => state.components);
   const MediaLibraryDialog = components?.["media-library"];
   const addFieldRow = useForm2("BlockscenePagePreview", (state) => state.addFieldRow);
+  const moveFieldRow = useForm2("BlockscenePagePreview", (state) => state.moveFieldRow);
   const fields = c.layout?.edit?.layout?.flat(3) || [];
   const readable = (name) => c.isCreatingEntry || (rbac.canReadFields || []).includes(name);
   const zone = React3.useMemo(() => editableZones(c.contentType, values, readable, c.isLoading)[0]?.name, [c.contentType, values, c.isLoading, rbac.canReadFields, c.isCreatingEntry]);
@@ -1896,6 +1897,11 @@ function PagePreview({ editor, groups = null, Toggle }) {
   const rows = zone && Array.isArray(values?.[zone]) ? values[zone] : [];
   const latest = React3.useRef(rows);
   latest.current = rows;
+  const insertRows = (at, ...items) => items.forEach((item, i) => {
+    const from = latest.current.length + i;
+    addFieldRow(zone, item);
+    if (at + i < from) moveFieldRow(zone, from, at + i);
+  });
   const live = React3.useRef({ mode, canEdit, zoneLabel, components: c.components, setMode, onChange });
   live.current = { mode, canEdit, zoneLabel, components: c.components, setMode, onChange };
   const send = React3.useCallback(() => {
@@ -1992,8 +1998,7 @@ function PagePreview({ editor, groups = null, Toggle }) {
           toggleNotification({ type: "info", message: t.zoneFull });
           return;
         }
-        addFieldRow(zone, { ...componentDefaults(components2[uid2], components2), __component: uid2 }, index2);
-        addFieldRow(zone, { __component: close }, index2 + 1);
+        insertRows(index2, { ...componentDefaults(components2[uid2], components2), __component: uid2 }, { __component: close });
         return;
       }
       const key = typeof event.data?.key === "string" ? event.data.key : "";
@@ -2055,7 +2060,7 @@ function PagePreview({ editor, groups = null, Toggle }) {
   const problems = groups ? (0, import_groups.validateGroups)(rows, groups) : [];
   const insertClose = (error) => {
     const end = (0, import_groups.groupRange)(latest.current, error.index, groups)[1];
-    addFieldRow(zone, { __component: error.expected }, end + 1);
+    insertRows(end + 1, { __component: error.expected });
   };
   const diagnostics = problems.length > 0 && /* @__PURE__ */ jsx4(Box2, { role: "alert", "data-testid": "page-preview-diagnostics", padding: 2, background: "danger100", hasRadius: true, children: /* @__PURE__ */ jsxs3("details", { children: [
     /* @__PURE__ */ jsx4("summary", { style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx4(Typography3, { variant: "pi", fontWeight: "bold", textColor: "danger700", children: t.f("diagSummary", { count: problems.length }) }) }),
@@ -2156,8 +2161,7 @@ function PagePreview({ editor, groups = null, Toggle }) {
             toggleNotification({ type: "warning", message: close ? t.zoneFull : t.insertMoved });
             return;
           }
-          addFieldRow(zone, { ...componentDefaults(c.components[uid], c.components), __component: uid }, index);
-          if (close) addFieldRow(zone, { __component: close }, index + 1);
+          insertRows(index, { ...componentDefaults(c.components[uid], c.components), __component: uid }, ...close ? [{ __component: close }] : []);
         }
       }
     ),
@@ -2515,14 +2519,16 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
     ] })
   ] }) });
 }
-function register(app, Component) {
+function register(app, Component, to) {
   app.createSettingSection(
     { id: "blockscene", intlLabel: { id: "blockscene.title", defaultMessage: "Blockscene" } },
     [{
       id: "blockscene-settings",
-      to: "/settings/blockscene",
+      to,
       intlLabel: { id: "blockscene.settings", defaultMessage: "Gallery" },
-      Component: async () => Component,
+      // Module shape: older Strapi 4 (e.g. 4.11) only reads `.default` from the loader result.
+      // Not an `async` function: Strapi 5 warns on AsyncFunction loaders.
+      Component: () => Promise.resolve({ default: Component }),
       permissions: permissions.read
     }]
   );
@@ -2612,13 +2618,13 @@ function MediaPicker({ onClose, onSelect }) {
   return /* @__PURE__ */ jsx6(Dialog3, { onClose, allowedTypes: ["images"], multiple: false, onSelectAssets: (assets) => onSelect(assets?.[0]) });
 }
 function usePermissions() {
-  const { allowedActions, isLoading } = useRBAC(permissions);
+  const { allowedActions, isLoading } = useRBAC(Object.values(permissions).flat());
   return { canRead: allowedActions.canRead, canUpdate: allowedActions.canUpdate, isLoading };
 }
 var SettingsPage = () => /* @__PURE__ */ jsx6(Settings, { useClient: useFetchClient2, usePermissions, MediaPicker, ToggleField, SelectField, TextField, previewSupported: true });
 var strapi5_default = {
   register(app) {
-    register(app, SettingsPage);
+    register(app, SettingsPage, "blockscene");
     app.registerPlugin({ id: "blockscene", name: "Blockscene" });
   },
   registerTrads,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aduptive/strapi-blockscene",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "description": "Visual component gallery for native Strapi dynamic zones.",
   "license": "MIT",
   "author": "Andrea Scarpello <aduptive@gmail.com>",
@@ -39,14 +39,12 @@
     "node": ">=20 <27"
   },
   "peerDependencies": {
-    "@strapi/strapi": ">=5.23.0 <6",
+    "@strapi/strapi": ">=5.0.0 <6",
     "@strapi/design-system": "^2.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "styled-components": "^6.0.0",
-    "react-intl": "^6.0.0",
-    "@strapi/content-manager": ">=5.23.0 <6",
-    "@strapi/admin": ">=5.23.0 <6"
+    "react-intl": "^6.0.0"
   },
   "dependencies": {
     "fractional-indexing": "3.2.0"