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

package/dist/admin.cjs

@@ -141,30 +141,35 @@ __export(strapi5_exports, {
   default: () => strapi5_default
 });
 module.exports = __toCommonJS(strapi5_exports);
-var React6 = __toESM(require("react"));
-var import_design_system6 = require("@strapi/design-system");
+var React7 = __toESM(require("react"));
+var import_design_system5 = require("@strapi/design-system");
 var import_admin3 = require("@strapi/strapi/admin");
 var import_strapi_admin2 = require("@strapi/content-manager/strapi-admin");
 
 // admin/Gallery.tsx
-var React = __toESM(require("react"));
-var import_react_dom = require("react-dom");
+var React2 = __toESM(require("react"));
+var import_react_dom2 = require("react-dom");
 var import_design_system = require("@strapi/design-system");
 var import_styled_components = __toESM(require("styled-components"));
 
 // admin/model.mjs
 var import_fractional_indexing = require("fractional-indexing");
 function componentDefaults(schema, components, stack = []) {
-  if (!schema || stack.includes(schema)) throw new Error("Invalid recursive component defaults");
+  if (!schema || stack.includes(schema))
+    throw new Error("Invalid recursive component defaults");
   const row = {};
   for (const [name, attr] of Object.entries(schema.attributes || {})) {
     if (Object.hasOwn(attr, "default")) {
       const value = structuredClone(attr.default);
       if (attr.type === "password") row[name] = "";
-      else if (attr.type === "relation") row[name] = { connect: [], disconnect: [] };
+      else if (attr.type === "relation")
+        row[name] = { connect: [], disconnect: [] };
       else if (value !== null || attr.type === "boolean") row[name] = value;
     } else if (attr.type === "component" && attr.required) {
-      const create = () => componentDefaults(components[attr.component], components, [...stack, schema]);
+      const create = () => componentDefaults(components[attr.component], components, [
+        ...stack,
+        schema
+      ]);
       if (attr.repeatable) {
         const keys = (0, import_fractional_indexing.generateNKeysBetween)(null, null, attr.min || 0);
         row[name] = keys.map((key) => ({ ...create(), __temp_key__: key }));
@@ -175,27 +180,58 @@ function componentDefaults(schema, components, stack = []) {
 }
 function editableZones(schema, values, canEdit, disabled = false) {
   if (disabled) return [];
-  return Object.entries(schema?.attributes || {}).filter(([name, attr]) => attr.type === "dynamiczone" && !attr.conditions && canEdit(name)).map(([name, attr]) => {
-    const count = Array.isArray(values?.[name]) ? values[name].length : 0;
-    return { name, components: attr.components || [], max: attr.max, count, full: count >= (attr.max ?? Infinity) };
+  return Object.entries(schema?.attributes || {}).filter(
+    ([name, attr]) => attr.type === "dynamiczone" && !attr.conditions && canEdit(name)
+  ).map(([name, attr]) => {
+    const rows = Array.isArray(values?.[name]) ? values[name] : [];
+    return {
+      name,
+      components: attr.components || [],
+      max: attr.max,
+      count: rows.length,
+      uids: rows.map(
+        (row) => row && typeof row.__component === "string" ? row.__component : ""
+      ),
+      full: rows.length >= (attr.max ?? Infinity)
+    };
   });
 }
 function canInsert(zone, uid, values, components, count = 1) {
-  return Boolean(zone?.components.includes(uid) && components[uid] && (Array.isArray(values?.[zone.name]) ? values[zone.name].length : 0) + count <= (zone.max ?? Infinity));
+  return Boolean(
+    zone?.components.includes(uid) && components[uid] && (Array.isArray(values?.[zone.name]) ? values[zone.name].length : 0) + count <= (zone.max ?? Infinity)
+  );
 }
 function candidatesFor(uid, meta = {}, config = {}) {
   const version = config.previewVersion ? `?v=${encodeURIComponent(config.previewVersion)}` : "";
   const base = (config.previewBaseUrl || "/block-previews").replace(/\/$/, "");
-  return [meta.manualImage, meta.image, `${base}/${encodeURIComponent(uid)}.webp${version}`].filter(Boolean);
+  return [
+    meta.manualImage,
+    meta.image,
+    `${base}/${encodeURIComponent(uid)}.webp${version}`
+  ].filter(Boolean);
 }
-var SYSTEM_FIELDS = ["id", "documentId", "createdAt", "updatedAt", "publishedAt", "createdBy", "updatedBy", "locale", "localizations"];
+var SYSTEM_FIELDS = [
+  "id",
+  "documentId",
+  "createdAt",
+  "updatedAt",
+  "publishedAt",
+  "createdBy",
+  "updatedBy",
+  "locale",
+  "localizations"
+];
 var fieldType = (attr) => attr?.type === "customField" ? String(attr.customField || "").includes("CKEditor") ? "richtext" : "customField" : attr?.type || "unknown";
 var fieldsOf = (schema) => Object.entries(schema?.attributes || {}).filter(([name]) => !SYSTEM_FIELDS.includes(name)).map(([name, attr]) => ({ name, type: fieldType(attr) }));
 var categoryOf = (uid, schema, meta = {}) => meta.category || schema?.category || uid.split(".")[0];
 var byCategory = (a, b) => (a === "admin" ? 1 : 0) - (b === "admin" ? 1 : 0) || a.localeCompare(b);
+var pickable = (zone, config) => {
+  const closers = Object.values(config.groups || {});
+  return zone.components.filter((uid) => !closers.includes(uid));
+};
 function entriesFor(zone, components, config, query, category = "all") {
   const needle = query.trim().toLocaleLowerCase();
-  return zone.components.flatMap((uid) => {
+  return pickable(zone, config).flatMap((uid) => {
     const schema = components[uid];
     if (!schema) return [];
     const meta = config.components?.[uid] || {};
@@ -210,11 +246,13 @@ function entriesFor(zone, components, config, query, category = "all") {
     };
     if (category !== "all" && entry.category !== category) return [];
     return `${entry.label} ${entry.description} ${entry.category} ${uid} ${meta.keywords || ""}`.toLocaleLowerCase().includes(needle) ? [entry] : [];
-  }).sort((a, b) => byCategory(a.category, b.category) || a.label.localeCompare(b.label));
+  }).sort(
+    (a, b) => byCategory(a.category, b.category) || a.label.localeCompare(b.label)
+  );
 }
 function categoriesFor(zone, components, config) {
   const counts = /* @__PURE__ */ new Map();
-  for (const uid of zone.components) {
+  for (const uid of pickable(zone, config)) {
     const schema = components[uid];
     if (!schema) continue;
     const c = categoryOf(uid, schema, config.components?.[uid] || {});
@@ -224,8 +262,12 @@ function categoriesFor(zone, components, config) {
 }
 function groupEntries(entries) {
   const map = /* @__PURE__ */ new Map();
-  for (const entry of entries) map.set(entry.category, [...map.get(entry.category) || [], entry]);
-  return [...map.entries()].map(([category, items]) => ({ category, entries: items }));
+  for (const entry of entries)
+    map.set(entry.category, [...map.get(entry.category) || [], entry]);
+  return [...map.entries()].map(([category, items]) => ({
+    category,
+    entries: items
+  }));
 }
 function memoryKey({ base = "", userId, contentType, zone }) {
   if (!userId || !contentType || !zone) return null;
@@ -241,7 +283,8 @@ function readMemory(storage2, key) {
 }
 function writeMemory(storage2, key, value) {
   try {
-    if (key && (value === "open" || value === "closed")) storage2?.setItem(key, value);
+    if (key && (value === "open" || value === "closed"))
+      storage2?.setItem(key, value);
   } catch {
   }
 }
@@ -327,6 +370,10 @@ function Wireframe({ template, palette, className, noPreview }) {
   );
 }
 
+// admin/RowPreviews.tsx
+var React = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+
 // admin/messages.ts
 var import_react_intl = require("react-intl");
 
@@ -441,7 +488,8 @@ var en_default = {
   columns: "Columns",
   noPreview: "no preview",
   "templates.none": "No preview",
-  noChanges: "No unsaved changes"
+  noChanges: "No unsaved changes",
+  rowPreview: "Open the {label} preview"
 };
 
 // admin/translations/pt-BR.json
@@ -555,7 +603,8 @@ var pt_BR_default = {
   columns: "Colunas",
   noPreview: "sem preview",
   "templates.none": "Sem preview",
-  noChanges: "Sem altera\xE7\xF5es pendentes"
+  noChanges: "Sem altera\xE7\xF5es pendentes",
+  rowPreview: "Abrir a pr\xE9via de {label}"
 };
 
 // admin/translations/pt.json
@@ -669,7 +718,8 @@ var pt_default = {
   columns: "Colunas",
   noPreview: "sem pr\xE9-visualiza\xE7\xE3o",
   "templates.none": "Sem pr\xE9-visualiza\xE7\xE3o",
-  noChanges: "Sem altera\xE7\xF5es pendentes"
+  noChanges: "Sem altera\xE7\xF5es pendentes",
+  rowPreview: "Abrir a pr\xE9-visualiza\xE7\xE3o de {label}"
 };
 
 // admin/translations/fr.json
@@ -783,7 +833,8 @@ var fr_default = {
   columns: "Colonnes",
   noPreview: "pas d\u2019aper\xE7u",
   "templates.none": "Pas d\u2019aper\xE7u",
-  noChanges: "Aucune modification en attente"
+  noChanges: "Aucune modification en attente",
+  rowPreview: "Ouvrir l\u2019aper\xE7u de {label}"
 };
 
 // admin/translations/es.json
@@ -897,7 +948,8 @@ var es_default = {
   columns: "Columnas",
   noPreview: "sin vista previa",
   "templates.none": "Sin vista previa",
-  noChanges: "Sin cambios pendientes"
+  noChanges: "Sin cambios pendientes",
+  rowPreview: "Abrir la vista previa de {label}"
 };
 
 // admin/translations/de.json
@@ -1011,7 +1063,8 @@ var de_default = {
   columns: "Spalten",
   noPreview: "keine Vorschau",
   "templates.none": "Keine Vorschau",
-  noChanges: "Keine ungespeicherten \xC4nderungen"
+  noChanges: "Keine ungespeicherten \xC4nderungen",
+  rowPreview: "Vorschau von {label} \xF6ffnen"
 };
 
 // admin/translations/it.json
@@ -1125,7 +1178,8 @@ var it_default = {
   columns: "Colonne",
   noPreview: "nessuna anteprima",
   "templates.none": "Nessuna anteprima",
-  noChanges: "Nessuna modifica in sospeso"
+  noChanges: "Nessuna modifica in sospeso",
+  rowPreview: "Apri l\u2019anteprima di {label}"
 };
 
 // admin/translations/nl.json
@@ -1239,7 +1293,8 @@ var nl_default = {
   columns: "Kolommen",
   noPreview: "geen voorbeeld",
   "templates.none": "Geen voorbeeld",
-  noChanges: "Geen niet-opgeslagen wijzigingen"
+  noChanges: "Geen niet-opgeslagen wijzigingen",
+  rowPreview: "Voorbeeld van {label} openen"
 };
 
 // admin/messages.ts
@@ -1259,26 +1314,224 @@ function useMessages() {
   return out;
 }
 
-// admin/Gallery.tsx
+// admin/RowPreviews.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var ATTR = "data-blockscene-row-thumb";
+function useAnchors(zones, onOpen) {
+  const [anchors, setAnchors] = React.useState([]);
+  const open = React.useRef(onOpen);
+  open.current = onOpen;
+  const latest = React.useRef(zones);
+  latest.current = zones;
+  const sync = React.useRef(() => {
+  });
+  sync.current = () => {
+    const next = [];
+    for (const zone of latest.current) {
+      const list = zone.uids?.length ? findZoneList(zone.label) : null;
+      if (!list) continue;
+      toggles(list).forEach((button, index) => {
+        const uid = zone.uids[index];
+        if (!uid) return;
+        let el = button.querySelector(
+          `:scope > [${ATTR}]`
+        );
+        if (!el) {
+          el = document.createElement("span");
+          el.setAttribute(ATTR, "");
+          el.style.cssText = "display:inline-flex;align-items:center";
+          const activate = (event) => {
+            if (!event.currentTarget.getAttribute("role"))
+              return;
+            event.preventDefault();
+            event.stopPropagation();
+            open.current(
+              String(event.currentTarget.dataset.uid || "")
+            );
+          };
+          el.addEventListener("click", activate, true);
+          el.addEventListener(
+            "keydown",
+            (event) => {
+              if (event.key === "Enter" || event.key === " ") activate(event);
+            },
+            true
+          );
+          button.insertBefore(el, button.firstChild);
+        }
+        el.dataset.uid = uid;
+        next.push({ el, uid, zone: zone.name, index });
+      });
+    }
+    for (const el of document.querySelectorAll(`[${ATTR}]`))
+      if (!next.some((a) => a.el === el)) el.remove();
+    setAnchors(
+      (prev) => prev.length === next.length && prev.every((a, i) => a.el === next[i].el && a.uid === next[i].uid) ? prev : next
+    );
+  };
+  React.useEffect(() => {
+    sync.current();
+  });
+  React.useEffect(() => {
+    let frame = 0;
+    const observer = new MutationObserver(() => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        sync.current();
+      });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      for (const el of document.querySelectorAll(`[${ATTR}]`)) el.remove();
+    };
+  }, []);
+  return anchors;
+}
+function RowPreviews({ zones, components, catalog, Modal: Modal3 }) {
+  const t = useMessages();
+  const [resolved, setResolved] = React.useState({});
+  const [open, setOpen] = React.useState(null);
+  const anchors = useAnchors(zones, (uid) => setOpen(uid));
+  const candidates = (uid) => candidatesFor(uid, catalog?.components?.[uid] || {}, catalog || {});
+  const label = (uid) => catalog?.components?.[uid]?.label || components?.[uid]?.info?.displayName || uid;
+  const srcOf = (uid) => candidates(uid)[resolved[uid] ?? -1] || "";
+  React.useEffect(() => {
+    for (const { el, uid } of anchors) {
+      if (srcOf(uid)) {
+        el.setAttribute("role", "button");
+        el.setAttribute("tabindex", "0");
+        el.setAttribute("aria-label", t.f("rowPreview", { label: label(uid) }));
+        el.style.cursor = "zoom-in";
+      } else
+        for (const name of ["role", "tabindex", "aria-label"])
+          el.removeAttribute(name);
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    anchors.map(
+      (a) => (0, import_react_dom.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            style: {
+              display: "block",
+              width: "6.4rem",
+              marginRight: "8px",
+              flex: "0 0 auto"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              Thumb,
+              {
+                candidates: candidates(a.uid),
+                blank: true,
+                onResolved: (index) => setResolved(
+                  (prev) => prev[a.uid] === index ? prev : { ...prev, [a.uid]: index }
+                )
+              }
+            )
+          }
+        ),
+        a.el,
+        `${a.zone}:${a.index}`
+      )
+    ),
+    open && srcOf(open) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Modal3,
+      {
+        open: true,
+        onOpenChange: (value) => {
+          if (!value) setOpen(null);
+        },
+        trigger: null,
+        title: label(open),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "img",
+          {
+            src: srcOf(open),
+            alt: "",
+            style: {
+              display: "block",
+              margin: "0 auto",
+              maxWidth: "100%",
+              maxHeight: "75vh",
+              objectFit: "contain"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// admin/Gallery.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Columns = import_styled_components.default.div`
-  column-count: ${({ $columns }) => $columns}; column-gap: 12px;
-  > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 12px; }
+  column-count: ${({ $columns }) => $columns};
+  column-gap: 12px;
+  > * {
+    break-inside: avoid;
+    -webkit-column-break-inside: avoid;
+    margin-bottom: 12px;
+  }
 `;
 var Tile = import_styled_components.default.button`
-  display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%;
-  padding: 8px; border: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 4px; background: ${({ theme }) => theme.colors.neutral0}; cursor: pointer;
-  &:hover { border-color: ${({ theme }) => theme.colors.primary600}; }
-  &:focus-visible { outline: 2px solid ${({ theme }) => theme.colors.primary600}; outline-offset: 2px; }
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: 4px;
+  background: ${({ theme }) => theme.colors.neutral0};
+  cursor: pointer;
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary600};
+  }
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.primary600};
+    outline-offset: 2px;
+  }
+`;
+var Clamp = (0, import_styled_components.default)(import_design_system.Typography)`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 `;
-var Clamp = (0, import_styled_components.default)(import_design_system.Typography)` display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; `;
 var Slider = import_styled_components.default.input`
-  appearance: none; -webkit-appearance: none; width: 8rem; height: 0.4rem; border-radius: 0.4rem; cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 8rem;
+  height: 0.4rem;
+  border-radius: 0.4rem;
+  cursor: pointer;
   background: ${({ theme, $percent }) => `linear-gradient(to right, ${theme.colors.primary600} ${$percent}%, ${theme.colors.neutral200} ${$percent}%)`};
-  &::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: ${({ theme }) => theme.colors.neutral0}; border: 0.2rem solid ${({ theme }) => theme.colors.primary600}; cursor: pointer; }
-  &::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: ${({ theme }) => theme.colors.neutral0}; border: 0.2rem solid ${({ theme }) => theme.colors.primary600}; cursor: pointer; }
-  &:focus-visible { outline: 0.2rem solid ${({ theme }) => theme.colors.primary600}; outline-offset: 0.2rem; }
+  &::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 50%;
+    background: ${({ theme }) => theme.colors.neutral0};
+    border: 0.2rem solid ${({ theme }) => theme.colors.primary600};
+    cursor: pointer;
+  }
+  &::-moz-range-thumb {
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 50%;
+    background: ${({ theme }) => theme.colors.neutral0};
+    border: 0.2rem solid ${({ theme }) => theme.colors.primary600};
+    cursor: pointer;
+  }
+  &:focus-visible {
+    outline: 0.2rem solid ${({ theme }) => theme.colors.primary600};
+    outline-offset: 0.2rem;
+  }
 `;
 var COLUMNS = { key: "blockscene:columns", min: 1, max: 5, initial: 3 };
 var SHOW_FIELDS_KEY = "blockscene:show-fields";
@@ -1304,16 +1557,31 @@ var remember = (key, value) => {
   }
 };
 var Frame = import_styled_components.default.div`
-  width: 100%; overflow: hidden; border-radius: 4px; line-height: 0;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+  line-height: 0;
   aspect-ratio: ${({ $fixed }) => $fixed ? "16 / 9" : "auto"};
   background: ${({ theme }) => theme.colors.neutral100};
-  img { width: 100%; height: auto; display: block; }
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
 `;
-function Thumb({ candidates, template, palette, onResolved, noPreview, eager }) {
+function Thumb({
+  candidates,
+  template,
+  palette,
+  onResolved,
+  noPreview,
+  eager,
+  blank
+}) {
   const key = candidates.join("|");
-  const [state, setState] = React.useState({ key, index: 0 });
+  const [state, setState] = React2.useState({ key, index: 0 });
   const index = state.key === key ? state.index : 0;
-  const resolved = React.useRef("");
+  const resolved = React2.useRef("");
   const report = (value) => {
     const tag = `${key}:${value}`;
     if (resolved.current !== tag) {
@@ -1321,11 +1589,19 @@ function Thumb({ candidates, template, palette, onResolved, noPreview, eager })
       onResolved?.(value);
     }
   };
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (index >= candidates.length) report(-1);
   });
-  if (index >= candidates.length) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Frame, { $fixed: true, "data-thumb": "wireframe", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wireframe, { template, palette, noPreview }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Frame, { "data-thumb": String(index), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  if (index >= candidates.length)
+    return blank ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Frame, { $fixed: true, "data-thumb": "wireframe", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Wireframe,
+      {
+        template,
+        palette,
+        noPreview
+      }
+    ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Frame, { "data-thumb": String(index), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "img",
     {
       src: candidates[index],
@@ -1339,28 +1615,90 @@ function Thumb({ candidates, template, palette, onResolved, noPreview, eager })
 }
 function Card({ entry, palette, showFields, onSelect }) {
   const t = useMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Tile, { type: "button", onClick: onSelect, title: entry.uid, "data-testid": `blockscene-${entry.uid}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Thumb, { candidates: entry.candidates, template: entry.template, palette, noPreview: t.noPreview }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", ellipsis: true, children: entry.label }),
-    entry.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Clamp, { variant: "pi", textColor: "neutral600", children: entry.description }),
-    showFields && entry.fields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { variant: "pi", textColor: "neutral500", style: { fontStyle: "italic" }, "data-testid": "block-fields", children: entry.fields.map((f) => `${f.name} (${f.type})`).join(", ") })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Tile,
+    {
+      type: "button",
+      onClick: onSelect,
+      title: entry.uid,
+      "data-testid": `blockscene-${entry.uid}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Thumb,
+          {
+            candidates: entry.candidates,
+            template: entry.template,
+            palette,
+            noPreview: t.noPreview
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_design_system.Typography,
+          {
+            variant: "pi",
+            fontWeight: "bold",
+            textColor: "neutral800",
+            ellipsis: true,
+            children: entry.label
+          }
+        ),
+        entry.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Clamp, { variant: "pi", textColor: "neutral600", children: entry.description }),
+        showFields && entry.fields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_design_system.Typography,
+          {
+            variant: "pi",
+            textColor: "neutral500",
+            style: { fontStyle: "italic" },
+            "data-testid": "block-fields",
+            children: entry.fields.map((f) => `${f.name} (${f.type})`).join(", ")
+          }
+        )
+      ]
+    }
+  );
 }
-function PickerModal({ zone, components, open, onOpenChange, onSelect, Modal: Modal3, Toggle, get }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZoneGallery, { zone, components, Modal: Modal3, Toggle, get, controlled: { open, onOpenChange, onSelect } });
+function PickerModal({
+  zone,
+  components,
+  open,
+  onOpenChange,
+  onSelect,
+  Modal: Modal3,
+  Toggle,
+  get
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    ZoneGallery,
+    {
+      zone,
+      components,
+      Modal: Modal3,
+      Toggle,
+      get,
+      controlled: { open, onOpenChange, onSelect }
+    }
+  );
 }
-function ZoneGallery({ zone, components, add, Modal: Modal3, Toggle, get, controlled }) {
+function ZoneGallery({
+  zone,
+  components,
+  add,
+  Modal: Modal3,
+  Toggle,
+  get,
+  controlled
+}) {
   const t = useMessages();
-  const [ownOpen, setOwnOpen] = React.useState(false);
+  const [ownOpen, setOwnOpen] = React2.useState(false);
   const open = controlled ? controlled.open : ownOpen;
   const setOpen = controlled ? controlled.onOpenChange : setOwnOpen;
-  const [query, setQuery] = React.useState("");
-  const [category, setCategory] = React.useState("all");
-  const [showFields, setShowFields] = React.useState(readShowFields);
-  const [columns, setColumns] = React.useState(readColumns);
-  const [config, setConfig] = React.useState(null);
-  const [error, setError] = React.useState("");
-  React.useEffect(() => {
+  const [query, setQuery] = React2.useState("");
+  const [category, setCategory] = React2.useState("all");
+  const [showFields, setShowFields] = React2.useState(readShowFields);
+  const [columns, setColumns] = React2.useState(readColumns);
+  const [config, setConfig] = React2.useState(null);
+  const [error, setError] = React2.useState("");
+  React2.useEffect(() => {
     if (controlled) return;
     const onClick = (event) => {
       const button = event.target?.closest?.("button");
@@ -1372,7 +1710,7 @@ function ZoneGallery({ zone, components, add, Modal: Modal3, Toggle, get, contro
     document.addEventListener("click", onClick, true);
     return () => document.removeEventListener("click", onClick, true);
   }, [controlled, zone.name, zone.label]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) return;
     let active = true;
     setError("");
@@ -1388,7 +1726,10 @@ function ZoneGallery({ zone, components, add, Modal: Modal3, Toggle, get, contro
   }, [open, get, t.failed]);
   const entries = config ? entriesFor(zone, components, config, query, category) : [];
   const categories = config ? categoriesFor(zone, components, config) : [];
-  const total = categories.reduce((sum, [, count]) => sum + count, 0);
+  const total = categories.reduce(
+    (sum, [, count]) => sum + count,
+    0
+  );
   const filtering = query.trim() !== "" || category !== "all";
   const reset = () => {
     setQuery("");
@@ -1412,21 +1753,41 @@ function ZoneGallery({ zone, components, add, Modal: Modal3, Toggle, get, contro
     setShowFields(value);
     remember(SHOW_FIELDS_KEY, String(value));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Modal3,
     {
       open,
       onOpenChange: setOpen,
       title: t.gallery,
-      trigger: controlled ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Button, { variant: "secondary", fullWidth: true, onClick: () => setOpen(true), "data-testid": `open-gallery-${zone.name}`, children: [
-        t.add,
-        ": ",
-        zone.name
-      ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", style: { whiteSpace: "nowrap" }, "data-testid": `block-count-${zone.name}`, "aria-live": "polite", children: filtering ? t.f("countFiltered", { shown: entries.length, total }) : t.f("countAll", { count: total }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Box, { style: { flex: 1, minWidth: "12rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      trigger: controlled ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_design_system.Button,
+        {
+          variant: "secondary",
+          fullWidth: true,
+          onClick: () => setOpen(true),
+          "data-testid": `open-gallery-${zone.name}`,
+          children: [
+            t.add,
+            ": ",
+            zone.name
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system.Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_design_system.Typography,
+            {
+              variant: "omega",
+              fontWeight: "bold",
+              textColor: "neutral800",
+              style: { whiteSpace: "nowrap" },
+              "data-testid": `block-count-${zone.name}`,
+              "aria-live": "polite",
+              children: filtering ? t.f("countFiltered", { shown: entries.length, total }) : t.f("countAll", { count: total })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Box, { style: { flex: 1, minWidth: "12rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_design_system.Searchbar,
             {
               name: `block-search-${zone.name}`,
@@ -1438,14 +1799,54 @@ function ZoneGallery({ zone, components, add, Modal: Modal3, Toggle, get, contro
               children: t.search
             }
           ) }),
-          categories.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Box, { style: { width: "14rem" }, "data-testid": `block-category-${zone.name}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.SingleSelect, { "aria-label": t.filterCategory, size: "S", value: category, onChange: (value) => setCategory(String(value)), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.SingleSelectOption, { value: "all", children: t.allCategories }),
-            categories.map(([name, count]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.SingleSelectOption, { value: name, children: `${name} (${count})` }, name))
-          ] }) }),
-          Toggle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Toggle, { name: `block-fields-${zone.name}`, label: t.showFields, hint: t.showFieldsHint, value: showFields, onChange: changeShowFields }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { variant: "pi", textColor: "neutral600", id: `block-columns-${zone.name}`, children: t.columns }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          categories.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_design_system.Box,
+            {
+              style: { width: "14rem" },
+              "data-testid": `block-category-${zone.name}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                import_design_system.SingleSelect,
+                {
+                  "aria-label": t.filterCategory,
+                  size: "S",
+                  value: category,
+                  onChange: (value) => setCategory(String(value)),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.SingleSelectOption, { value: "all", children: t.allCategories }),
+                    categories.map(([name, count]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_design_system.SingleSelectOption,
+                      {
+                        value: name,
+                        children: `${name} (${count})`
+                      },
+                      name
+                    ))
+                  ]
+                }
+              )
+            }
+          ),
+          Toggle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Toggle,
+            {
+              name: `block-fields-${zone.name}`,
+              label: t.showFields,
+              hint: t.showFieldsHint,
+              value: showFields,
+              onChange: changeShowFields
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system.Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_design_system.Typography,
+              {
+                variant: "pi",
+                textColor: "neutral600",
+                id: `block-columns-${zone.name}`,
+                children: t.columns
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               Slider,
               {
                 type: "range",
@@ -1458,16 +1859,52 @@ function ZoneGallery({ zone, components, add, Modal: Modal3, Toggle, get, contro
                 onChange: (e) => changeColumns(Number(e.target.value))
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { variant: "pi", fontWeight: "bold", children: columns })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Typography, { variant: "pi", fontWeight: "bold", children: columns })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { variant: "pi", textColor: "neutral600", children: t.example }),
-        error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { role: "alert", textColor: "danger600", children: error }) : !config ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { children: t.loading }) : entries.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Flex, { direction: "column", alignItems: "stretch", gap: 4, style: { overflowY: "auto", maxHeight: "60vh", padding: "4px" }, children: groupEntries(entries).map(({ category: name, entries: items }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { variant: "sigma", textColor: "neutral600", "data-testid": `block-group-${name}`, children: `${name} (${items.length})` }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Columns, { $columns: columns, children: items.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { entry, palette: config.palette, showFields, onSelect: () => select(entry.uid) }) }, entry.uid)) })
-        ] }, name)) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Flex, { gap: 3, alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Typography, { children: t.empty }),
-          filtering && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Button, { variant: "tertiary", size: "S", onClick: reset, children: t.clear })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Typography, { variant: "pi", textColor: "neutral600", children: t.example }),
+        error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Typography, { role: "alert", textColor: "danger600", children: error }) : !config ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Typography, { children: t.loading }) : entries.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_design_system.Flex,
+          {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 4,
+            style: { overflowY: "auto", maxHeight: "60vh", padding: "4px" },
+            children: groupEntries(entries).map(
+              ({ category: name, entries: items }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                import_design_system.Flex,
+                {
+                  direction: "column",
+                  alignItems: "stretch",
+                  gap: 2,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_design_system.Typography,
+                      {
+                        variant: "sigma",
+                        textColor: "neutral600",
+                        "data-testid": `block-group-${name}`,
+                        children: `${name} (${items.length})`
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Columns, { $columns: columns, children: items.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      Card,
+                      {
+                        entry,
+                        palette: config.palette,
+                        showFields,
+                        onSelect: () => select(entry.uid)
+                      }
+                    ) }, entry.uid)) })
+                  ]
+                },
+                name
+              )
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system.Flex, { gap: 3, alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Typography, { children: t.empty }),
+          filtering && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Button, { variant: "tertiary", size: "S", onClick: reset, children: t.clear })
         ] })
       ] })
     }
@@ -1481,13 +1918,19 @@ var storage = () => {
   }
 };
 var memoryBase = () => `${window.location.origin}${window.location.pathname.split("/content-manager")[0]}`;
-function useInitialAccordions({ zones, editor, docKey, contentType, userId }) {
-  const applied = React.useRef("");
-  const user = React.useRef(userId);
+function useInitialAccordions({
+  zones,
+  editor,
+  docKey,
+  contentType,
+  userId
+}) {
+  const applied = React2.useRef("");
+  const user = React2.useRef(userId);
   user.current = userId;
-  const latest = React.useRef(zones);
+  const latest = React2.useRef(zones);
   latest.current = zones;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!editor?.enabled || !docKey || applied.current === docKey) return;
     if (applied.current.startsWith(`${contentType}:new`) && docKey.startsWith(`${contentType}:`)) {
       applied.current = docKey;
@@ -1496,7 +1939,10 @@ function useInitialAccordions({ zones, editor, docKey, contentType, userId }) {
     applied.current = docKey;
     let tries = 0;
     const cancel = (event) => {
-      if (event.target?.closest?.('button[aria-expanded], [data-testid^="block-accordion-controls-"]')) stop();
+      if (event.target?.closest?.(
+        'button[aria-expanded], [data-testid^="block-accordion-controls-"]'
+      ))
+        stop();
     };
     const stop = () => {
       clearInterval(timer);
@@ -1514,8 +1960,17 @@ function useInitialAccordions({ zones, editor, docKey, contentType, userId }) {
       for (const zone of pending) {
         const list = findZoneList(zone.label);
         if (!list) continue;
-        const key = memoryKey({ base: memoryBase(), userId: user.current, contentType, zone: zone.name });
-        setAll(list, initialState(editor, readMemory(storage(), key)) === "open", import_react_dom.unstable_batchedUpdates);
+        const key = memoryKey({
+          base: memoryBase(),
+          userId: user.current,
+          contentType,
+          zone: zone.name
+        });
+        setAll(
+          list,
+          initialState(editor, readMemory(storage(), key)) === "open",
+          import_react_dom2.unstable_batchedUpdates
+        );
       }
     }, 200);
     return stop;
@@ -1526,51 +1981,107 @@ function ZoneControls({ zone, editor, contentType, userId }) {
   if (!zone.count || !(editor.showOpenAll || editor.showCloseAll)) return null;
   const apply = (open) => {
     const list = findZoneList(zone.label);
-    if (list) setAll(list, open, import_react_dom.unstable_batchedUpdates);
-    writeMemory(storage(), memoryKey({ base: memoryBase(), userId, contentType, zone: zone.name }), open ? "open" : "closed");
+    if (list) setAll(list, open, import_react_dom2.unstable_batchedUpdates);
+    writeMemory(
+      storage(),
+      memoryKey({ base: memoryBase(), userId, contentType, zone: zone.name }),
+      open ? "open" : "closed"
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Flex, { gap: 2, wrap: "wrap", "data-testid": `block-accordion-controls-${zone.name}`, children: [
-    editor.showOpenAll && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Button, { type: "button", variant: "tertiary", size: "S", onClick: () => apply(true), children: t.openAll }),
-    editor.showCloseAll && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Button, { type: "button", variant: "tertiary", size: "S", onClick: () => apply(false), children: t.closeAll })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_design_system.Flex,
+    {
+      gap: 2,
+      wrap: "wrap",
+      "data-testid": `block-accordion-controls-${zone.name}`,
+      children: [
+        editor.showOpenAll && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_design_system.Button,
+          {
+            type: "button",
+            variant: "tertiary",
+            size: "S",
+            onClick: () => apply(true),
+            children: t.openAll
+          }
+        ),
+        editor.showCloseAll && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_design_system.Button,
+          {
+            type: "button",
+            variant: "tertiary",
+            size: "S",
+            onClick: () => apply(false),
+            children: t.closeAll
+          }
+        )
+      ]
+    }
+  );
 }
-function Gallery({ zones, editor, docKey, contentType, userId, ...props }) {
+function Gallery({
+  zones,
+  editor,
+  docKey,
+  contentType,
+  userId,
+  catalog,
+  ...props
+}) {
   useInitialAccordions({ zones, editor, docKey, contentType, userId });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: zones.map((zone) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-    !zone.full && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZoneGallery, { zone, ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZoneControls, { zone, editor, contentType, userId })
-  ] }, zone.name)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RowPreviews,
+      {
+        zones,
+        components: props.components,
+        catalog,
+        Modal: props.Modal
+      }
+    ),
+    zones.map((zone) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      !zone.full && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ZoneGallery, { zone, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ZoneControls,
+        {
+          zone,
+          editor,
+          contentType,
+          userId
+        }
+      )
+    ] }, zone.name))
+  ] });
 }
 
 // admin/PagePreview.tsx
-var React3 = __toESM(require("react"));
-var import_react_dom2 = require("react-dom");
+var React4 = __toESM(require("react"));
+var import_react_dom3 = require("react-dom");
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_design_system3 = require("@strapi/design-system");
 var import_admin2 = require("@strapi/strapi/admin");
-var import_design_system4 = require("@strapi/design-system");
 var import_strapi_admin = require("@strapi/content-manager/strapi-admin");
 
 // admin/FieldEditorModal.tsx
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_admin = require("@strapi/strapi/admin");
 var import_design_system2 = require("@strapi/design-system");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Actions = ({ onApply, onCancel }) => {
   const t = useMessages();
   const value = (0, import_admin.useForm)("BlocksceneFieldEditor", (state) => state.values.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.Flex, { gap: 2, justifyContent: "flex-end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Button, { variant: "tertiary", onClick: onCancel, children: t.cancel }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Button, { onClick: () => onApply(value ?? null), "data-testid": "field-editor-apply", children: t.apply })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system2.Flex, { gap: 2, justifyContent: "flex-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Button, { variant: "tertiary", onClick: onCancel, children: t.cancel }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Button, { onClick: () => onApply(value ?? null), "data-testid": "field-editor-apply", children: t.apply })
   ] });
 };
 function FieldEditorModal({ label, attribute, value, onApply, onCancel }) {
   const t = useMessages();
   const customFields = (0, import_admin.useStrapiApp)("BlocksceneFieldEditor", (state) => state.customFields);
-  const [Input, setInput] = React2.useState(void 0);
+  const [Input, setInput] = React3.useState(void 0);
   const isCustom = Boolean(attribute?.customField);
   const isText = attribute?.type === "string" || attribute?.type === "text";
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     let active = true;
     if (!isCustom) {
       setInput(null);
@@ -1591,24 +2102,24 @@ function FieldEditorModal({ label, attribute, value, onApply, onCancel }) {
     };
   }, [attribute, customFields, isCustom]);
   const supported = isText || isCustom && Input;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Modal.Root, { open: true, onOpenChange: (open) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Modal.Root, { open: true, onOpenChange: (open) => {
     if (!open) onCancel();
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.Modal.Content, { "aria-label": `${t.editText} ${label}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Modal.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.Modal.Title, { children: [
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system2.Modal.Content, { "aria-label": `${t.editText} ${label}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Modal.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system2.Modal.Title, { children: [
       t.editText,
       " \xB7 ",
       label
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_admin.Form, { initialValues: { value: value ?? (isText ? "" : null) }, method: "PUT", onSubmit: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_admin.Form, { initialValues: { value: value ?? (isText ? "" : null) }, method: "PUT", onSubmit: () => {
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Modal.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.Flex, { direction: "column", alignItems: "stretch", gap: 4, "data-testid": "field-editor-modal", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Typography, { variant: "pi", textColor: "neutral600", children: t.editHelp }),
-        isCustom && Input === void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Typography, { children: t.loading }),
-        isCustom && Input && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, { name: "value", attribute, label, type: attribute.type }),
-        isText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_admin.InputRenderer, { type: attribute.type === "text" ? "text" : "string", name: "value", label }),
-        (isCustom && Input === null || !isCustom && !isText) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Typography, { role: "alert", textColor: "danger600", children: t.editUnsupported })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Modal.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system2.Flex, { direction: "column", alignItems: "stretch", gap: 4, "data-testid": "field-editor-modal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Typography, { variant: "pi", textColor: "neutral600", children: t.editHelp }),
+        isCustom && Input === void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Typography, { children: t.loading }),
+        isCustom && Input && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input, { name: "value", attribute, label, type: attribute.type }),
+        isText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_admin.InputRenderer, { type: attribute.type === "text" ? "text" : "string", name: "value", label }),
+        (isCustom && Input === null || !isCustom && !isText) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Typography, { role: "alert", textColor: "danger600", children: t.editUnsupported })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Modal.Footer, { children: supported ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Actions, { onApply, onCancel }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Button, { variant: "tertiary", onClick: onCancel, children: t.close }) })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Modal.Footer, { children: supported ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Actions, { onApply, onCancel }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system2.Button, { variant: "tertiary", onClick: onCancel, children: t.close }) })
     ] })
   ] }) });
 }
@@ -1719,6 +2230,7 @@ var mediaAttribute = (uid, field, components) => {
   const attr = resolveField(uid, field, components);
   return attr?.type === "media" ? attr : null;
 };
+var getIn = (row, path) => String(path).split(".").reduce((value, key) => value == null ? void 0 : value[key], row);
 function isPreviewMessage(event, origin, source, channel, type) {
   return event.origin === origin && event.source === source && event.data?.protocol === PROTOCOL && event.data?.channel === channel && event.data?.type === type;
 }
@@ -1729,7 +2241,7 @@ function insertIndex(rows, after) {
 }
 
 // admin/PagePreview.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var MODE_KEY = "blockscene:page-mode";
 var RATIO_KEY = "blockscene:page-split-ratio";
 var MIN_PANE = 360;
@@ -1750,20 +2262,32 @@ var write = (key, value) => {
   } catch {
   }
 };
-var clampWidth = (width, vw) => Math.round(Math.min(Math.max(width, MIN_PANE), Math.max(MIN_PANE, vw - MIN_FORM)));
-var getIn = (object, path) => path.split(".").reduce((acc, part) => acc == null ? acc : acc[part], object);
+var clampWidth = (width, vw) => Math.round(
+  Math.min(Math.max(width, MIN_PANE), Math.max(MIN_PANE, vw - MIN_FORM))
+);
 var Pane = import_styled_components2.default.aside`
-  position: fixed; top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column;
-  background: ${({ theme }) => theme.colors.neutral0}; border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  background: ${({ theme }) => theme.colors.neutral0};
+  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
   box-shadow: ${({ theme }) => theme.shadows.popupShadow};
 `;
 function useMainRect() {
-  const [rect, setRect] = React3.useState(() => ({ left: 0, width: window.innerWidth }));
-  React3.useEffect(() => {
+  const [rect, setRect] = React4.useState(() => ({
+    left: 0,
+    width: window.innerWidth
+  }));
+  React4.useEffect(() => {
     const main = document.getElementById("main-content");
     const measure = () => {
       const r = main?.getBoundingClientRect();
-      setRect(r && r.width > 0 ? { left: Math.round(r.left), width: Math.round(r.width) } : { left: 0, width: window.innerWidth });
+      setRect(
+        r && r.width > 0 ? { left: Math.round(r.left), width: Math.round(r.width) } : { left: 0, width: window.innerWidth }
+      );
     };
     measure();
     const observer = main && "ResizeObserver" in window ? new ResizeObserver(measure) : null;
@@ -1777,12 +2301,37 @@ function useMainRect() {
   return rect;
 }
 var Handle = import_styled_components2.default.div`
-  position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; z-index: 3; touch-action: none;
-  &::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; }
-  &:hover::after, &[data-dragging='true']::after, &:focus-visible::after { background: ${({ theme }) => theme.colors.primary600}; }
-  &:focus-visible { outline: none; }
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  width: 10px;
+  cursor: col-resize;
+  z-index: 3;
+  touch-action: none;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 4px;
+    width: 2px;
+  }
+  &:hover::after,
+  &[data-dragging="true"]::after,
+  &:focus-visible::after {
+    background: ${({ theme }) => theme.colors.primary600};
+  }
+  &:focus-visible {
+    outline: none;
+  }
+`;
+var Frame2 = import_styled_components2.default.iframe`
+  flex: 1;
+  width: 100%;
+  border: 0;
+  background: white;
 `;
-var Frame2 = import_styled_components2.default.iframe` flex: 1; width: 100%; border: 0; background: white; `;
 var SPLIT_STYLE = `
 body.bp-split #main-content { padding-right: calc(var(--bp-pane, 50vw) + 1.6rem) !important; }
 body.bp-split [data-bp-grid] { display: flex !important; flex-direction: column-reverse; gap: 1.6rem; }
@@ -1791,20 +2340,26 @@ body.bp-split [data-bp-panels] > div { flex-direction: row; flex-wrap: wrap; ali
 body.bp-split [data-bp-panels] > div > * { flex: 1 1 24rem; }`;
 var markLayout = (anchor) => {
   let item = anchor;
-  while (item?.parentElement && getComputedStyle(item.parentElement).display !== "grid") item = item.parentElement;
+  while (item?.parentElement && getComputedStyle(item.parentElement).display !== "grid")
+    item = item.parentElement;
   if (!item?.parentElement) return;
   item.dataset.bpPanels = "";
   item.parentElement.dataset.bpGrid = "";
 };
 function usePreviewBase(override, model, documentId, locale) {
   const { get } = (0, import_admin2.useFetchClient)();
-  const [native, setNative] = React3.useState(null);
-  React3.useEffect(() => {
+  const [native, setNative] = React4.useState(null);
+  React4.useEffect(() => {
     if (override || !model) return;
     let active = true;
-    const query = new URLSearchParams({ status: "draft", ...documentId ? { documentId } : {}, ...locale ? { locale } : {} });
+    const query = new URLSearchParams({
+      status: "draft",
+      ...documentId ? { documentId } : {},
+      ...locale ? { locale } : {}
+    });
     get(`/content-manager/preview/url/${model}?${query}`).then(({ data }) => {
-      if (active && typeof data?.data?.url === "string") setNative(`${new URL(data.data.url).origin}/block-preview/page`);
+      if (active && typeof data?.data?.url === "string")
+        setNative(`${new URL(data.data.url).origin}/block-preview/page`);
     }).catch(() => {
       if (active) setNative(null);
     });
@@ -1814,55 +2369,109 @@ function usePreviewBase(override, model, documentId, locale) {
   }, [get, model, documentId, locale, override]);
   return override ? { base: override, source: "custom" } : native ? { base: native, source: "native" } : { base: null, source: "none" };
 }
-function PickerDialog({ open, onOpenChange, trigger, title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system4.Modal.Root, { open, onOpenChange, children: [
-    trigger && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Modal.Trigger, { children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system4.Modal.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Modal.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Modal.Title, { children: title }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Modal.Body, { children })
-    ] })
-  ] });
-}
 var ACTION_TYPES = ["update", "publish"];
-var nativeButtons = () => document.querySelectorAll('#main-content button:not([data-testid="page-preview-pane"] button)');
+var nativeButtons = () => document.querySelectorAll(
+  '#main-content button:not([data-testid="page-preview-pane"] button)'
+);
 function ToolbarActions({ model, collectionType, documentId, locale }) {
-  const plugins = (0, import_admin2.useStrapiApp)("BlocksceneToolbar", (state) => state.plugins);
+  const plugins = (0, import_admin2.useStrapiApp)(
+    "BlocksceneToolbar",
+    (state) => state.plugins
+  );
   const [{ query }] = (0, import_admin2.useQueryParams)();
-  const { document: doc, meta } = (0, import_strapi_admin.unstable_useDocument)({ model, collectionType, documentId, params: { locale } }, { skip: !documentId });
+  const { document: doc, meta } = (0, import_strapi_admin.unstable_useDocument)(
+    { model, collectionType, documentId, params: { locale } },
+    { skip: !documentId }
+  );
   const { toggleNotification } = (0, import_admin2.useNotification)();
   const t = useMessages();
   const descriptions = (plugins["content-manager"]?.apis?.getDocumentActions?.("panel") || []).filter((d) => ACTION_TYPES.includes(d.type));
-  const props = { activeTab: query.status || "draft", model, documentId, document: doc, meta, collectionType };
+  const props = {
+    activeTab: query.status || "draft",
+    model,
+    documentId,
+    document: doc,
+    meta,
+    collectionType
+  };
   const run = async (action, event) => {
-    const native = [...nativeButtons()].find((b) => b.textContent?.trim() === action.label);
+    const native = [...nativeButtons()].find(
+      (b) => b.textContent?.trim() === action.label
+    );
     if (native) {
       native.click();
       return;
     }
     const mute = await action.onClick?.(event);
-    if (action.dialog && !mute && action.dialog.type === "notification") toggleNotification({ title: action.dialog.title, message: action.dialog.content, type: action.dialog.status });
+    if (action.dialog && !mute && action.dialog.type === "notification")
+      toggleNotification({
+        title: action.dialog.title,
+        message: action.dialog.content,
+        type: action.dialog.status
+      });
   };
-  const typeOf = (action) => action.type || descriptions.find((d) => typeof action.id === "string" && action.id.startsWith(`${d.name || d.displayName}-`))?.type;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_admin2.DescriptionComponentRenderer, { props, descriptions, children: (actions) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Flex, { gap: 1, "data-testid": "page-preview-actions", children: [...actions].sort((a, b) => ACTION_TYPES.indexOf(typeOf(a)) - ACTION_TYPES.indexOf(typeOf(b))).map((action) => {
+  const typeOf = (action) => action.type || descriptions.find(
+    (d) => typeof action.id === "string" && action.id.startsWith(`${d.name || d.displayName}-`)
+  )?.type;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_admin2.DescriptionComponentRenderer, { props, descriptions, children: (actions) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Flex, { gap: 1, "data-testid": "page-preview-actions", children: [...actions].sort(
+    (a, b) => ACTION_TYPES.indexOf(typeOf(a)) - ACTION_TYPES.indexOf(typeOf(b))
+  ).map((action) => {
     const reason = action.disabled ? typeOf(action) === "publish" ? t.publishDisabledHint : t.saveDisabledHint : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { title: reason, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Button, { size: "S", variant: action.variant || "default", disabled: action.disabled, loading: action.loading, "aria-description": reason, onClick: (e) => run(action, e), children: action.label }) }, action.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { title: reason, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_design_system3.Button,
+      {
+        size: "S",
+        variant: action.variant || "default",
+        disabled: action.disabled,
+        loading: action.loading,
+        "aria-description": reason,
+        onClick: (e) => run(action, e),
+        children: action.label
+      }
+    ) }, action.id);
   }) }) });
 }
-function PagePreview({ editor, groups = null, Toggle }) {
+function PagePreview({
+  editor,
+  groups = null,
+  Modal: Modal3,
+  Toggle
+}) {
   const t = useMessages();
   const c = (0, import_strapi_admin.unstable_useContentManagerContext)();
-  const rbac = (0, import_strapi_admin.useDocumentRBAC)("BlockscenePagePreview", (state) => state);
+  const rbac = (0, import_strapi_admin.useDocumentRBAC)(
+    "BlockscenePagePreview",
+    (state) => state
+  );
   const values = (0, import_admin2.useForm)("BlockscenePagePreview", (state) => state.values);
-  const onChange = (0, import_admin2.useForm)("BlockscenePagePreview", (state) => state.onChange);
-  const components = (0, import_admin2.useStrapiApp)("BlockscenePagePreview", (state) => state.components);
+  const onChange = (0, import_admin2.useForm)(
+    "BlockscenePagePreview",
+    (state) => state.onChange
+  );
+  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 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]);
+  const zone = React4.useMemo(
+    () => editableZones(c.contentType, values, readable, c.isLoading)[0]?.name,
+    [c.contentType, values, c.isLoading, rbac.canReadFields, c.isCreatingEntry]
+  );
   const zoneLabel = fields.find((field) => field.name === zone)?.label || zone || "";
-  const canEdit = Boolean(zone && ((c.isCreatingEntry ? rbac.canCreateFields : rbac.canUpdateFields) || []).includes(zone) && fields.find((field) => field.name === zone)?.disabled !== true && !c.form?.disabled && typeof addFieldRow === "function");
-  const [mode, setModeState] = React3.useState(() => {
+  const canEdit = Boolean(
+    zone && ((c.isCreatingEntry ? rbac.canCreateFields : rbac.canUpdateFields) || []).includes(zone) && fields.find((field) => field.name === zone)?.disabled !== true && !c.form?.disabled && typeof addFieldRow === "function"
+  );
+  const [mode, setModeState] = React4.useState(() => {
     const v = read(MODE_KEY);
     return v === "split" || v === "preview" ? v : editor?.previewMode || "form";
   });
@@ -1870,32 +2479,37 @@ function PagePreview({ editor, groups = null, Toggle }) {
     setModeState(next);
     write(MODE_KEY, next);
   };
-  const [ratio, setRatio] = React3.useState(() => {
+  const [ratio, setRatio] = React4.useState(() => {
     const v = Number(read(RATIO_KEY));
     return v > 0 && v < 1 ? v : 0.5;
   });
   const main = useMainRect();
   const vw = main.width;
-  const [dragging, setDragging] = React3.useState(false);
-  const [ready, setReady] = React3.useState(false);
-  const [failed, setFailed] = React3.useState(false);
-  const [attempt, retry] = React3.useReducer((n) => n + 1, 0);
-  const [picking, setPicking] = React3.useState(null);
-  React3.useEffect(() => {
+  const [dragging, setDragging] = React4.useState(false);
+  const [ready, setReady] = React4.useState(false);
+  const [failed, setFailed] = React4.useState(false);
+  const [attempt, retry] = React4.useReducer((n) => n + 1, 0);
+  const [picking, setPicking] = React4.useState(null);
+  React4.useEffect(() => {
     setEditing(null);
     setPicking(null);
     setInserting(null);
   }, [c.id, c.form?.initialValues?.locale]);
-  const [editing, setEditing] = React3.useState(null);
-  const [inserting, setInserting] = React3.useState(null);
+  const [editing, setEditing] = React4.useState(null);
+  const [inserting, setInserting] = React4.useState(null);
   const { get } = (0, import_admin2.useFetchClient)();
   const { toggleNotification } = (0, import_admin2.useNotification)();
   const zoneAttr = zone ? c.contentType?.attributes?.[zone] : null;
-  const iframe = React3.useRef(null);
-  const loaded = React3.useRef(false);
-  const anchor = React3.useRef(null);
-  const channel = React3.useMemo(() => crypto.randomUUID(), []);
-  const { base, source } = usePreviewBase(editor?.previewUrl || "", c.model, c.isCreatingEntry ? void 0 : c.id, c.form?.initialValues?.locale);
+  const iframe = React4.useRef(null);
+  const loaded = React4.useRef(false);
+  const anchor = React4.useRef(null);
+  const channel = React4.useMemo(() => crypto.randomUUID(), []);
+  const { base, source } = usePreviewBase(
+    editor?.previewUrl || "",
+    c.model,
+    c.isCreatingEntry ? void 0 : c.id,
+    c.form?.initialValues?.locale
+  );
   const url = base ? new URL(base) : null;
   url?.searchParams.set("channel", channel);
   const origin = url?.origin || "";
@@ -1904,16 +2518,50 @@ function PagePreview({ editor, groups = null, Toggle }) {
   const resizable = mode === "split" && !narrow;
   const active = mode !== "form" && Boolean(url) && Boolean(zone);
   const rows = zone && Array.isArray(values?.[zone]) ? values[zone] : [];
-  const latest = React3.useRef(rows);
+  const latest = React4.useRef(rows);
   latest.current = rows;
-  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(() => {
-    iframe.current?.contentWindow?.postMessage({ protocol: PROTOCOL, channel, type: "update-page", blocks: projectPage(latest.current, live.current.components, window.location.origin), groups, locale: t.locale, mode: live.current.mode }, origin);
+  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 = React4.useRef({
+    mode,
+    canEdit,
+    zoneLabel,
+    components: c.components,
+    setMode,
+    onChange
+  });
+  live.current = {
+    mode,
+    canEdit,
+    zoneLabel,
+    components: c.components,
+    setMode,
+    onChange
+  };
+  const send = React4.useCallback(() => {
+    iframe.current?.contentWindow?.postMessage(
+      {
+        protocol: PROTOCOL,
+        channel,
+        type: "update-page",
+        blocks: projectPage(
+          latest.current,
+          live.current.components,
+          window.location.origin
+        ),
+        groups,
+        locale: t.locale,
+        mode: live.current.mode
+      },
+      origin
+    );
   }, [channel, origin]);
   const indexOf = (key) => latest.current.findIndex((row) => blockKey(row) === key);
   const path = (key, field) => `${zone}.${indexOf(key)}.${field}`;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (resizable) markLayout(anchor.current);
     document.body.classList.toggle("bp-split", resizable);
     document.documentElement.style.setProperty("--bp-pane", `${paneWidth}px`);
@@ -1925,7 +2573,9 @@ function PagePreview({ editor, groups = null, Toggle }) {
     if (persist) write(RATIO_KEY, String(next));
   };
   const focusField = (index, field) => {
-    const item = findZoneList(live.current.zoneLabel)?.querySelectorAll(":scope > li")[index];
+    const item = findZoneList(live.current.zoneLabel)?.querySelectorAll(
+      ":scope > li"
+    )[index];
     if (!item) return;
     const header = toggles(item.parentElement)[index];
     if (header?.getAttribute("aria-expanded") === "false") header.click();
@@ -1936,33 +2586,47 @@ function PagePreview({ editor, groups = null, Toggle }) {
       if (++tries > 40) return clearInterval(timer);
       let scope = item;
       for (let i = 0; i + 1 < parts.length; i += 2) {
-        const nested = [...scope.querySelectorAll("button[aria-expanded][data-radix-collection-item]")].filter((b) => b !== header);
+        const nested = [
+          ...scope.querySelectorAll(
+            "button[aria-expanded][data-radix-collection-item]"
+          )
+        ].filter((b) => b !== header);
         const row = nested[Number(parts[i + 1])];
         if (!row) return;
         if (row.getAttribute("aria-expanded") === "false") row.click();
         scope = row.closest("li, div") || scope;
       }
-      const target = document.querySelector(`[name="${escaped}"], label[for="${escaped}"]`);
+      const target = document.querySelector(
+        `[name="${escaped}"], label[for="${escaped}"]`
+      );
       if (!target) return;
       const INPUT = '.ck-editor__editable, textarea, input:not([type="hidden"]), select';
       let container = target.matches(INPUT) ? target : target.parentElement;
-      for (let depth = 0; container && depth < 4 && !container.matches(INPUT) && !container.querySelector(INPUT); depth++) container = container.parentElement;
+      for (let depth = 0; container && depth < 4 && !container.matches(INPUT) && !container.querySelector(INPUT); depth++)
+        container = container.parentElement;
       const editable = container?.matches(INPUT) ? container : container?.querySelector(INPUT);
       if (!editable) return;
-      if (editable.classList.contains("ck-editor__editable") && !editable.isContentEditable) return;
+      if (editable.classList.contains("ck-editor__editable") && !editable.isContentEditable)
+        return;
       editable.focus();
       if (document.activeElement !== editable) return;
       clearInterval(timer);
       editable.scrollIntoView({ block: "center", behavior: "smooth" });
     }, 150);
   };
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!active) return;
     setReady(false);
     setFailed(false);
     const timeout = setTimeout(() => setFailed(true), 15e3);
     const receive = (event) => {
-      const is = (type) => isPreviewMessage(event, origin, iframe.current?.contentWindow, channel, type);
+      const is = (type) => isPreviewMessage(
+        event,
+        origin,
+        iframe.current?.contentWindow,
+        channel,
+        type
+      );
       const { mode: mode2, canEdit: canEdit2, zoneLabel: zoneLabel2, components: components2, setMode: setMode2, onChange: onChange2 } = live.current;
       if (is("ready")) {
         clearTimeout(timeout);
@@ -1982,12 +2646,21 @@ function PagePreview({ editor, groups = null, Toggle }) {
         return;
       }
       if (is("move-group") && canEdit2 && groups) {
-        const next = (0, import_groups.moveGroup)(latest.current, String(event.data.key), event.data.direction === "up" ? "up" : "down", groups);
+        const next = (0, import_groups.moveGroup)(
+          latest.current,
+          String(event.data.key),
+          event.data.direction === "up" ? "up" : "down",
+          groups
+        );
         if (next) onChange2(zone, next);
         return;
       }
       if (is("delete-group") && canEdit2 && groups) {
-        const next = (0, import_groups.removeGroup)(latest.current, String(event.data.key), groups);
+        const next = (0, import_groups.removeGroup)(
+          latest.current,
+          String(event.data.key),
+          groups
+        );
         if (next) onChange2(zone, next);
         return;
       }
@@ -1997,13 +2670,20 @@ function PagePreview({ editor, groups = null, Toggle }) {
         const uid2 = String(event.data.uid || "");
         const close = groups[uid2];
         const allowed = zoneAttr?.components || [];
-        if (index2 < 0 || !close || !allowed.includes(uid2) || !allowed.includes(close)) return;
+        if (index2 < 0 || !close || !allowed.includes(uid2) || !allowed.includes(close))
+          return;
         if (latest.current.length + 2 > (zoneAttr?.max ?? Infinity)) {
           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 : "";
@@ -2023,11 +2703,21 @@ function PagePreview({ editor, groups = null, Toggle }) {
           }, 1500);
         }
         if (mode2 === "preview") setMode2("split");
-        iframe.current?.contentWindow?.postMessage({ protocol: PROTOCOL, channel, type: "highlight", key }, origin);
+        iframe.current?.contentWindow?.postMessage(
+          { protocol: PROTOCOL, channel, type: "highlight", key },
+          origin
+        );
       } else if (is("focus")) {
         const attr = validateFocus(uid, event.data.field, components2);
         if (!attr) return;
-        if (mode2 === "preview" && canEdit2 && (attr.customField || MODAL_TYPES.includes(attr.type))) setEditing({ key, field: event.data.field, attr, label: `${components2[uid]?.info?.displayName || uid} \xB7 ${event.data.field}`, value: getIn(latest.current[index], event.data.field) });
+        if (mode2 === "preview" && canEdit2 && (attr.customField || MODAL_TYPES.includes(attr.type)))
+          setEditing({
+            key,
+            field: event.data.field,
+            attr,
+            label: `${components2[uid]?.info?.displayName || uid} \xB7 ${event.data.field}`,
+            value: getIn(latest.current[index], event.data.field)
+          });
         else focusField(index, event.data.field);
       } else if (is("media") && canEdit2) {
         const attr = mediaAttribute(uid, event.data.field, components2);
@@ -2036,27 +2726,67 @@ function PagePreview({ editor, groups = null, Toggle }) {
         const attr = mediaAttribute(uid, event.data.field, components2);
         if (attr && !attr.required) onChange2(path(key, event.data.field), null);
       } else if (is("edit") && canEdit2) {
-        const value = validateEdit(uid, event.data.field, event.data.value, components2);
+        const value = validateEdit(
+          uid,
+          event.data.field,
+          event.data.value,
+          components2
+        );
         if (value !== null) onChange2(path(key, event.data.field), value);
       }
     };
     window.addEventListener("message", receive);
-    if (loaded.current) iframe.current?.contentWindow?.postMessage({ protocol: PROTOCOL, channel, type: "ping" }, origin);
+    if (loaded.current)
+      iframe.current?.contentWindow?.postMessage(
+        { protocol: PROTOCOL, channel, type: "ping" },
+        origin
+      );
     return () => {
       clearTimeout(timeout);
       window.removeEventListener("message", receive);
     };
   }, [active, attempt, channel, origin, groups]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!ready || !active) return;
     const timer = setTimeout(send, 120);
     return () => clearTimeout(timer);
   }, [values, c.components, ready, active, send, mode]);
   if (!zone) return null;
-  const modes = [["form", t.modeForm], ["split", t.modeSplit], ["preview", t.modePreview]];
-  const switcher = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Flex, { gap: 1, wrap: "wrap", "data-testid": "page-preview-modes", role: "group", "aria-label": t.modeGroup, children: modes.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Button, { type: "button", size: "S", variant: mode === value ? "default" : "tertiary", "aria-pressed": mode === value, onClick: () => setMode(value), disabled: !url && value !== "form", children: label }, value)) });
+  const modes = [
+    ["form", t.modeForm],
+    ["split", t.modeSplit],
+    ["preview", t.modePreview]
+  ];
+  const switcher = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_design_system3.Flex,
+    {
+      gap: 1,
+      wrap: "wrap",
+      "data-testid": "page-preview-modes",
+      role: "group",
+      "aria-label": t.modeGroup,
+      children: modes.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_design_system3.Button,
+        {
+          type: "button",
+          size: "S",
+          variant: mode === value ? "default" : "tertiary",
+          "aria-pressed": mode === value,
+          onClick: () => setMode(value),
+          disabled: !url && value !== "form",
+          children: label
+        },
+        value
+      ))
+    }
+  );
   const onKey = (event) => {
-    const map = { ArrowLeft: paneWidth + KEY_STEP, ArrowRight: paneWidth - KEY_STEP, Home: MIN_PANE, End: vw - MIN_FORM };
+    const map = {
+      ArrowLeft: paneWidth + KEY_STEP,
+      ArrowRight: paneWidth - KEY_STEP,
+      Home: MIN_PANE,
+      End: vw - MIN_FORM
+    };
     if (event.key in map) {
       event.preventDefault();
       applyWidth(map[event.key], true);
@@ -2065,30 +2795,71 @@ 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 }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { style: { margin: "6px 0 0 16px", padding: 0 }, children: problems.map((error) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { style: { marginBottom: 6 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Typography, { variant: "pi", textColor: "danger700", children: t.f(error.code === "closeBeforeOpen" ? "diagCloseBeforeOpen" : error.code === "mismatch" ? "diagMismatch" : "diagUnclosed", { n: error.index + 1, uid: error.uid, open: error.open || "", expected: error.expected || "" }) }),
-      error.code === "unclosed" && canEdit && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Box, { paddingTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Button, { size: "S", variant: "danger-light", "data-testid": `diag-insert-close-${error.index}`, onClick: () => insertClose(error), children: t.f("diagInsertClose", { n: error.index + 1, expected: error.expected }) }) }),
-      error.code === "closeBeforeOpen" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Typography, { variant: "pi", textColor: "neutral600", children: t.diagStrayHint })
-    ] }, `${error.code}-${error.index}`)) })
-  ] }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Flex, { direction: "column", alignItems: "stretch", gap: 2, ref: anchor, children: [
+  const diagnostics = problems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_design_system3.Box,
+    {
+      role: "alert",
+      "data-testid": "page-preview-diagnostics",
+      padding: 2,
+      background: "danger100",
+      hasRadius: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("details", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("summary", { style: { cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Typography, { variant: "pi", fontWeight: "bold", textColor: "danger700", children: t.f("diagSummary", { count: problems.length }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { style: { margin: "6px 0 0 16px", padding: 0 }, children: problems.map((error) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "li",
+          {
+            style: { marginBottom: 6 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Typography, { variant: "pi", textColor: "danger700", children: t.f(
+                error.code === "closeBeforeOpen" ? "diagCloseBeforeOpen" : error.code === "mismatch" ? "diagMismatch" : "diagUnclosed",
+                {
+                  n: error.index + 1,
+                  uid: error.uid,
+                  open: error.open || "",
+                  expected: error.expected || ""
+                }
+              ) }),
+              error.code === "unclosed" && canEdit && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Box, { paddingTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_design_system3.Button,
+                {
+                  size: "S",
+                  variant: "danger-light",
+                  "data-testid": `diag-insert-close-${error.index}`,
+                  onClick: () => insertClose(error),
+                  children: t.f("diagInsertClose", {
+                    n: error.index + 1,
+                    expected: error.expected
+                  })
+                }
+              ) }),
+              error.code === "closeBeforeOpen" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Typography, { variant: "pi", textColor: "neutral600", children: t.diagStrayHint })
+            ]
+          },
+          `${error.code}-${error.index}`
+        )) })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system3.Flex, { direction: "column", alignItems: "stretch", gap: 2, ref: anchor, children: [
     switcher,
     diagnostics,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Typography, { variant: "pi", textColor: "neutral600", children: url ? t.previewHelp : t.previewNoUrl }),
-    active && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Typography, { variant: "pi", textColor: "neutral600", children: url ? t.previewHelp : t.previewNoUrl }),
+    active && (0, import_react_dom3.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         Pane,
         {
           "data-testid": "page-preview-pane",
           "aria-label": t.previewPane,
-          style: { left: mode === "preview" || narrow ? main.left : main.left + main.width - paneWidth, width: mode === "preview" || narrow ? main.width : paneWidth, userSelect: dragging ? "none" : void 0 },
+          style: {
+            left: mode === "preview" || narrow ? main.left : main.left + main.width - paneWidth,
+            width: mode === "preview" || narrow ? main.width : paneWidth,
+            userSelect: dragging ? "none" : void 0
+          },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: SPLIT_STYLE }),
-            resizable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: SPLIT_STYLE }),
+            resizable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Handle,
               {
                 role: "separator",
@@ -2106,7 +2877,8 @@ function PagePreview({ editor, groups = null, Toggle }) {
                   setDragging(true);
                 },
                 onPointerMove: (e) => {
-                  if (dragging) applyWidth(main.left + main.width - e.clientX, false);
+                  if (dragging)
+                    applyWidth(main.left + main.width - e.clientX, false);
                 },
                 onPointerUp: (e) => {
                   if (!dragging) return;
@@ -2118,15 +2890,44 @@ function PagePreview({ editor, groups = null, Toggle }) {
                 onKeyDown: onKey
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Flex, { padding: 2, gap: 2, justifyContent: "space-between", alignItems: "center", background: "neutral100", wrap: "wrap", style: { position: "sticky", top: 0, zIndex: 2 }, children: [
-              switcher,
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Flex, { gap: 2, alignItems: "center", wrap: "wrap", style: { marginLeft: "auto" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Typography, { variant: "pi", role: "status", textColor: "neutral600", children: failed ? t.previewFailed : ready ? t.previewReady : t.previewLoading }),
-                failed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Button, { size: "S", variant: "secondary", onClick: retry, children: t.retry }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToolbarActions, { model: c.model, collectionType: c.collectionType, documentId: c.isCreatingEntry ? void 0 : c.id, locale: c.form?.initialValues?.locale })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              import_design_system3.Flex,
+              {
+                padding: 2,
+                gap: 2,
+                justifyContent: "space-between",
+                alignItems: "center",
+                background: "neutral100",
+                wrap: "wrap",
+                style: { position: "sticky", top: 0, zIndex: 2 },
+                children: [
+                  switcher,
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    import_design_system3.Flex,
+                    {
+                      gap: 2,
+                      alignItems: "center",
+                      wrap: "wrap",
+                      style: { marginLeft: "auto" },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Typography, { variant: "pi", role: "status", textColor: "neutral600", children: failed ? t.previewFailed : ready ? t.previewReady : t.previewLoading }),
+                        failed && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Button, { size: "S", variant: "secondary", onClick: retry, children: t.retry }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          ToolbarActions,
+                          {
+                            model: c.model,
+                            collectionType: c.collectionType,
+                            documentId: c.isCreatingEntry ? void 0 : c.id,
+                            locale: c.form?.initialValues?.locale
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Frame2,
               {
                 ref: iframe,
@@ -2146,12 +2947,16 @@ function PagePreview({ editor, groups = null, Toggle }) {
       ),
       document.body
     ),
-    inserting && zoneAttr && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    inserting && zoneAttr && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       PickerModal,
       {
-        zone: { name: zone, components: zoneAttr.components || [], max: zoneAttr.max },
+        zone: {
+          name: zone,
+          components: zoneAttr.components || [],
+          max: zoneAttr.max
+        },
         components: c.components,
-        Modal: PickerDialog,
+        Modal: Modal3,
         Toggle,
         get,
         open: true,
@@ -2163,15 +2968,24 @@ function PagePreview({ editor, groups = null, Toggle }) {
           setInserting(null);
           const close = groups?.[uid];
           if (index < 0 || !(zoneAttr.components || []).includes(uid) || close && !(zoneAttr.components || []).includes(close) || latest.current.length + (close ? 2 : 1) > (zoneAttr.max ?? Infinity)) {
-            toggleNotification({ type: "warning", message: close ? t.zoneFull : t.insertMoved });
+            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 }] : []
+          );
         }
       }
     ),
-    editing && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    editing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       FieldEditorModal,
       {
         label: editing.label,
@@ -2181,11 +2995,12 @@ function PagePreview({ editor, groups = null, Toggle }) {
         onApply: (value) => {
           const index = indexOf(editing.key);
           setEditing(null);
-          if (index >= 0) onChange(`${zone}.${index}.${editing.field}`, value);
+          if (index >= 0)
+            onChange(`${zone}.${index}.${editing.field}`, value);
         }
       }
     ),
-    picking && MediaLibraryDialog && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    picking && MediaLibraryDialog && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       MediaLibraryDialog,
       {
         allowedTypes: picking.attr.allowedTypes || ["images"],
@@ -2196,19 +3011,32 @@ function PagePreview({ editor, groups = null, Toggle }) {
           setPicking(null);
           if (index < 0 || !assets?.length) return;
           const current = getIn(latest.current[index], picking.field);
-          onChange(`${zone}.${index}.${picking.field}`, picking.attr.multiple ? [...Array.isArray(current) ? current : [], ...assets] : assets[0]);
+          onChange(
+            `${zone}.${index}.${picking.field}`,
+            picking.attr.multiple ? [...Array.isArray(current) ? current : [], ...assets] : assets[0]
+          );
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Box, { hidden: true, "data-testid": "page-preview-state", "data-mode": mode, "data-ready": ready, "data-failed": failed, "data-pane-width": paneWidth, "data-narrow": narrow, "data-preview-source": source, "data-editing": editing ? editing.field : "" })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_design_system3.Box,
+      {
+        hidden: true,
+        "data-testid": "page-preview-state",
+        "data-mode": mode,
+        "data-ready": ready,
+        "data-failed": failed,
+        "data-preview-source": source
+      }
+    )
   ] });
 }
 
 // admin/Settings.tsx
-var React4 = __toESM(require("react"));
-var import_design_system5 = require("@strapi/design-system");
+var React5 = __toESM(require("react"));
+var import_design_system4 = require("@strapi/design-system");
 var import_styled_components3 = __toESM(require("styled-components"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var COLOR2 = /^#[0-9A-Fa-f]{6}$/;
 var Grid = import_styled_components3.default.div` display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; `;
 var Card2 = import_styled_components3.default.div`
@@ -2221,8 +3049,8 @@ var Bar = import_styled_components3.default.div`
   box-shadow: 0 1px 4px rgba(33, 33, 52, 0.1);
 `;
 function useMainRect2(anchor) {
-  const [rect, setRect] = React4.useState({ left: 0, width: 0 });
-  React4.useEffect(() => {
+  const [rect, setRect] = React5.useState({ left: 0, width: 0 });
+  React5.useEffect(() => {
     const read2 = () => {
       let host = document.getElementById("main-content");
       for (let el = anchor.current?.parentElement; !host && el; el = el.parentElement) if (["auto", "scroll"].includes(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) host = el;
@@ -2239,11 +3067,11 @@ var Swatches = import_styled_components3.default.div` display: grid; grid-templa
 var Label = import_styled_components3.default.label` display: flex; flex-direction: column; gap: 4px; font-size: 12px; `;
 function ColorField({ name, label, value, onChange, disabled }) {
   const valid = COLOR2.test(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Label, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { gap: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "color", "aria-label": label, value: valid ? value : "#000000", disabled, onChange: (e) => onChange(e.target.value.toUpperCase()), style: { width: 40, height: 32, padding: 0, border: 0, background: "none" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Label, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "color", "aria-label": label, value: valid ? value : "#000000", disabled, onChange: (e) => onChange(e.target.value.toUpperCase()), style: { width: 40, height: 32, padding: 0, border: 0, background: "none" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "input",
         {
           name,
@@ -2263,18 +3091,18 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
   const t = useMessages();
   const { get, put } = useClient();
   const { canRead, canUpdate, isLoading } = usePermissions2();
-  const [data, setData] = React4.useState(null);
-  const [catalog, setCatalog] = React4.useState(null);
-  const [settings, setSettings] = React4.useState(null);
-  const [media, setMedia] = React4.useState({});
-  const [sources, setSources] = React4.useState({});
-  const [dirty, setDirty] = React4.useState(false);
-  const [saving, setSaving] = React4.useState(false);
-  const [status, setStatus] = React4.useState("");
-  const [failed, setFailed] = React4.useState(false);
-  const [filter, setFilter] = React4.useState("");
-  const [picking, setPicking] = React4.useState(null);
-  React4.useEffect(() => {
+  const [data, setData] = React5.useState(null);
+  const [catalog, setCatalog] = React5.useState(null);
+  const [settings, setSettings] = React5.useState(null);
+  const [media, setMedia] = React5.useState({});
+  const [sources, setSources] = React5.useState({});
+  const [dirty, setDirty] = React5.useState(false);
+  const [saving, setSaving] = React5.useState(false);
+  const [status, setStatus] = React5.useState("");
+  const [failed, setFailed] = React5.useState(false);
+  const [filter, setFilter] = React5.useState("");
+  const [picking, setPicking] = React5.useState(null);
+  React5.useEffect(() => {
     if (!canRead || isLoading) return;
     let active = true;
     Promise.all([get("/blockscene/settings"), get("/blockscene/catalog")]).then(([s, c]) => {
@@ -2322,35 +3150,35 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
     return index === 0 && manual ? t.manual : t.automatic;
   };
   const ready = !isLoading && canRead && !failed && settings && catalog;
-  const header = React4.useRef(null);
-  const [floating, setFloating] = React4.useState(false);
+  const header = React5.useRef(null);
+  const [floating, setFloating] = React5.useState(false);
   const main = useMainRect2(header);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     const el = header.current;
     if (!el || typeof IntersectionObserver === "undefined") return;
     const observer = new IntersectionObserver(([entry]) => setFloating(!entry.isIntersecting && entry.boundingClientRect.top < 0));
     observer.observe(el);
     return () => observer.disconnect();
   }, [ready]);
-  const controls = (suffix) => ready && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { role: "status", "aria-live": "polite", textColor: dirty ? "warning700" : "neutral600", "data-testid": `${dirty ? "unsaved-indicator" : "save-status"}${suffix}`, children: dirty ? t.unsaved : status || t.noChanges }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Button, { onClick: save, disabled: !canUpdate || invalid || !dirty, loading: saving, "data-testid": `save-blockscene-settings${suffix}`, children: t.save })
+  const controls = (suffix) => ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { role: "status", "aria-live": "polite", textColor: dirty ? "warning700" : "neutral600", "data-testid": `${dirty ? "unsaved-indicator" : "save-status"}${suffix}`, children: dirty ? t.unsaved : status || t.noChanges }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Button, { onClick: save, disabled: !canUpdate || invalid || !dirty, loading: saving, "data-testid": `save-blockscene-settings${suffix}`, children: t.save })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { padding: 8, background: "neutral100", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: header, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "alpha", tag: "h1", children: t.settingsTitle }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Box, { padding: 8, background: "neutral100", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: header, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "alpha", tag: "h1", children: t.settingsTitle }),
       controls("")
     ] }) }),
-    floating && main.width > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Bar, { style: { left: main.left, width: main.width }, "data-testid": "settings-floating-bar", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "beta", tag: "p", children: t.settingsTitle }),
+    floating && main.width > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Bar, { style: { left: main.left, width: main.width }, "data-testid": "settings-floating-bar", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "beta", tag: "p", children: t.settingsTitle }),
       controls("-floating")
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { textColor: "neutral600", children: t.settingsIntro }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { children: "\u2026" }) : !canRead ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { role: "alert", children: t.denied }) : failed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { role: "alert", children: t.loadFailed }) : !settings || !catalog ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { children: t.loading }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      data.disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { padding: 4, background: "warning100", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { role: "alert", textColor: "warning700", children: t.disabledByServer }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "beta", tag: "h2", children: t.palette }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Swatches, { children: Object.keys(DEFAULT_PALETTE).map((key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { textColor: "neutral600", children: t.settingsIntro }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { children: "\u2026" }) : !canRead ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { role: "alert", children: t.denied }) : failed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { role: "alert", children: t.loadFailed }) : !settings || !catalog ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { children: t.loading }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      data.disabled && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Box, { padding: 4, background: "warning100", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { role: "alert", textColor: "warning700", children: t.disabledByServer }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Box, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "beta", tag: "h2", children: t.palette }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Swatches, { children: Object.keys(DEFAULT_PALETTE).map((key) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           ColorField,
           {
             name: `palette-${key}`,
@@ -2364,33 +3192,33 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
           },
           key
         )) }),
-        invalid && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { role: "alert", textColor: "danger600", children: t.invalidColor }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: t.previewLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Swatches, { "data-testid": "palette-preview", children: TEMPLATES.map((template) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { direction: "column", gap: 1, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { style: { aspectRatio: "16 / 9", overflow: "hidden" }, hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Wireframe, { template, palette: settings.palette }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: t.templates[template] })
+        invalid && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { role: "alert", textColor: "danger600", children: t.invalidColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: t.previewLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Swatches, { "data-testid": "palette-preview", children: TEMPLATES.map((template) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { direction: "column", gap: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Box, { style: { aspectRatio: "16 / 9", overflow: "hidden" }, hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Wireframe, { template, palette: settings.palette }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: t.templates[template] })
         ] }, template)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Button, { variant: "tertiary", size: "S", disabled: !canUpdate, onClick: () => update((s) => {
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Button, { variant: "tertiary", size: "S", disabled: !canUpdate, onClick: () => update((s) => {
           s.palette = { ...DEFAULT_PALETTE };
           return s;
         }), children: t.resetPalette }) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "beta", tag: "h2", children: t.editor }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToggleField2, { name: "editor-enabled", label: t.enabled, value: editor.enabled, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Box, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "beta", tag: "h2", children: t.editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleField2, { name: "editor-enabled", label: t.enabled, value: editor.enabled, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
           s.editor.enabled = v;
           return s;
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: t.enabledHelp }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToggleField2, { name: "editor-showOpenAll", label: t.showOpenAll, value: editor.showOpenAll, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: t.enabledHelp }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleField2, { name: "editor-showOpenAll", label: t.showOpenAll, value: editor.showOpenAll, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
           s.editor.showOpenAll = v;
           return s;
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToggleField2, { name: "editor-showCloseAll", label: t.showCloseAll, value: editor.showCloseAll, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleField2, { name: "editor-showCloseAll", label: t.showCloseAll, value: editor.showCloseAll, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
           s.editor.showCloseAll = v;
           return s;
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           SelectField2,
           {
             name: "editor-initialState",
@@ -2404,9 +3232,9 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: t.rememberHelp }),
-        previewSupported ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: t.rememberHelp }),
+        previewSupported ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             TextField2,
             {
               name: "editor-previewUrl",
@@ -2420,8 +3248,8 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: t.previewUrlHelp }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: t.previewUrlHelp }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             SelectField2,
             {
               name: "editor-previewMode",
@@ -2435,26 +3263,26 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: t.previewModeHelp }),
-          data.blockPreviewAvailable && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToggleField2, { name: "editor-blockPreviewInForm", label: t.blockPreviewInForm, value: editor.blockPreviewInForm, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: t.previewModeHelp }),
+          data.blockPreviewAvailable && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleField2, { name: "editor-blockPreviewInForm", label: t.blockPreviewInForm, value: editor.blockPreviewInForm, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
               s.editor.blockPreviewInForm = v;
               return s;
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: t.blockPreviewInFormHelp })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: t.blockPreviewInFormHelp })
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: t.previewV4 })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: t.previewV4 })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "beta", tag: "h2", children: t.components }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Searchbar, { name: "component-filter", value: filter, placeholder: t.filter, clearLabel: t.clear, onClear: () => setFilter(""), onChange: (e) => setFilter(e.target.value), children: t.filter }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", "data-testid": "components-count", children: t.f("countAll", { count: components.length }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Grid, { "data-testid": "components-grid", children: components.map((component) => {
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Box, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "beta", tag: "h2", children: t.components }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Searchbar, { name: "component-filter", value: filter, placeholder: t.filter, clearLabel: t.clear, onClear: () => setFilter(""), onChange: (e) => setFilter(e.target.value), children: t.filter }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", "data-testid": "components-count", children: t.f("countAll", { count: components.length }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Grid, { "data-testid": "components-grid", children: components.map((component) => {
           const entry = settings.components[component.uid] || {};
           const meta = { ...catalog.components?.[component.uid] || {}, ...media[component.uid] || {} };
           const candidates = candidatesFor(component.uid, meta, catalog);
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Card2, { "data-testid": `settings-${component.uid}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card2, { "data-testid": `settings-${component.uid}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Thumb,
               {
                 candidates,
@@ -2465,23 +3293,23 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
                 onResolved: (index) => setSources((current) => current[component.uid] === index ? current : { ...current, [component.uid]: index })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { fontWeight: "bold", textColor: "neutral800", children: component.displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Typography, { variant: "pi", textColor: "neutral600", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { fontWeight: "bold", textColor: "neutral800", children: component.displayName }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Typography, { variant: "pi", textColor: "neutral600", children: [
                 component.uid,
                 " \xB7 ",
                 component.category
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Typography, { variant: "pi", "data-testid": `source-${component.uid}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Typography, { variant: "pi", "data-testid": `source-${component.uid}`, children: [
                 t.source,
                 ": ",
                 sourceOf(component.uid, Boolean(meta.manualImage)),
                 meta.manualName ? ` (${meta.manualName})` : ""
               ] }),
-              meta.manualMissing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Typography, { variant: "pi", role: "alert", textColor: "danger600", children: t.brokenMedia }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Flex, { gap: 2, wrap: "wrap", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Button, { variant: "secondary", size: "S", disabled: !canUpdate || saving, onClick: () => setPicking(component.uid), children: entry.mediaId ? t.replace : t.choose }),
-                entry.mediaId && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Button, { variant: "tertiary", size: "S", disabled: !canUpdate || saving, onClick: () => {
+              meta.manualMissing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Typography, { variant: "pi", role: "alert", textColor: "danger600", children: t.brokenMedia }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system4.Flex, { gap: 2, wrap: "wrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Button, { variant: "secondary", size: "S", disabled: !canUpdate || saving, onClick: () => setPicking(component.uid), children: entry.mediaId ? t.replace : t.choose }),
+                entry.mediaId && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system4.Button, { variant: "tertiary", size: "S", disabled: !canUpdate || saving, onClick: () => {
                   update((s) => {
                     delete s.components[component.uid]?.mediaId;
                     if (!Object.keys(s.components[component.uid] || {}).length) delete s.components[component.uid];
@@ -2494,7 +3322,7 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
                   });
                 }, children: t.useAutomatic })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 SelectField2,
                 {
                   name: `template-${component.uid}`,
@@ -2512,7 +3340,7 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
           ] }, component.uid);
         }) })
       ] }) }),
-      picking && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MediaPicker2, { onClose: () => setPicking(null), onSelect: (asset) => {
+      picking && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MediaPicker2, { onClose: () => setPicking(null), onSelect: (asset) => {
         const uid = picking;
         setPicking(null);
         if (!asset?.id) return;
@@ -2525,24 +3353,26 @@ 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
     }]
   );
 }
 
 // admin/catalog.ts
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 function useCatalog(get) {
-  const [catalog, setCatalog] = React5.useState(null);
-  React5.useEffect(() => {
+  const [catalog, setCatalog] = React6.useState(null);
+  React6.useEffect(() => {
     let active = true;
     get("/blockscene/catalog").then(({ data }) => {
       if (active) setCatalog(data);
@@ -2557,13 +3387,13 @@ function useCatalog(get) {
 }
 
 // admin/strapi5.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Modal2({ open, onOpenChange, trigger, title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system6.Modal.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Modal.Trigger, { children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system6.Modal.Content, { style: { width: "80vw", maxWidth: "80vw" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Modal.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Modal.Title, { children: title }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Modal.Body, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system5.Modal.Root, { open, onOpenChange, children: [
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system5.Modal.Trigger, { children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system5.Modal.Content, { style: { width: "80vw", maxWidth: "80vw" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system5.Modal.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system5.Modal.Title, { children: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system5.Modal.Body, { children })
     ] })
   ] });
 }
@@ -2583,52 +3413,157 @@ function Panel() {
     formValues ?? c.form?.values,
     (name) => allowed.includes(name) && (creating || (rbac.canReadFields || []).includes(name)) && fields.find((field) => field.name === name)?.disabled !== true,
     c.isLoading || c.form?.disabled || !c.form?.addFieldRow
-  ).map((zone) => ({ ...zone, label: fields.find((field) => field.name === zone.name)?.label || zone.name }));
+  ).map((zone) => ({
+    ...zone,
+    label: fields.find((field) => field.name === zone.name)?.label || zone.name
+  }));
   const add = (zone, uid) => {
     const values = formValues ?? c.form.values;
     const close = catalog?.groups?.[uid];
-    if (c.form.disabled || !canInsert(zone, uid, values, c.components, close ? 2 : 1) || close && !zone.components.includes(close)) return false;
+    if (c.form.disabled || !canInsert(zone, uid, values, c.components, close ? 2 : 1) || close && !zone.components.includes(close))
+      return false;
     const at = Array.isArray(values?.[zone.name]) ? values[zone.name].length : 0;
-    c.form.addFieldRow(zone.name, { ...componentDefaults(c.components[uid], c.components), __component: uid }, at);
+    c.form.addFieldRow(
+      zone.name,
+      {
+        ...componentDefaults(c.components[uid], c.components),
+        __component: uid
+      },
+      at
+    );
     if (close) c.form.addFieldRow(zone.name, { __component: close }, at + 1);
     return true;
   };
   if (!zones.length || !catalog?.editor?.enabled) return null;
   const docKey = `${c.model}:${creating ? "new" : c.id}:${c.form?.initialValues?.locale || ""}`;
-  return { title: t.gallery, content: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system6.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Gallery, { zones, components: c.components, add, Modal: Modal2, Toggle: ToggleField, get, editor: catalog.editor, docKey, contentType: c.model, userId: user?.id }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PagePreview, { editor: catalog.editor, groups: catalog.groups || null, Toggle: ToggleField })
-  ] }) };
+  return {
+    title: t.gallery,
+    content: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system5.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Gallery,
+        {
+          zones,
+          components: c.components,
+          add,
+          Modal: Modal2,
+          Toggle: ToggleField,
+          get,
+          editor: catalog.editor,
+          catalog,
+          docKey,
+          contentType: c.model,
+          userId: user?.id
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        PagePreview,
+        {
+          editor: catalog.editor,
+          groups: catalog.groups || null,
+          Modal: Modal2,
+          Toggle: ToggleField
+        }
+      )
+    ] })
+  };
 }
-var ToggleField = ({ name, label, value, onChange, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system6.Flex, { gap: 3, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Switch, { name, "aria-label": label, checked: Boolean(value), disabled, onCheckedChange: onChange }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Typography, { children: label })
+var ToggleField = ({ name, label, value, onChange, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system5.Flex, { gap: 3, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_design_system5.Switch,
+    {
+      name,
+      "aria-label": label,
+      checked: Boolean(value),
+      disabled,
+      onCheckedChange: onChange
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system5.Typography, { children: label })
 ] });
-var TextField = ({ name, label, value, onChange, disabled, placeholder }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system6.Field.Root, { name, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Field.Label, { children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.TextInput, { name, value, disabled, placeholder, onChange: (e) => onChange(e.target.value) })
+var TextField = ({
+  name,
+  label,
+  value,
+  onChange,
+  disabled,
+  placeholder
+}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system5.Field.Root, { name, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system5.Field.Label, { children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_design_system5.TextInput,
+    {
+      name,
+      value,
+      disabled,
+      placeholder,
+      onChange: (e) => onChange(e.target.value)
+    }
+  )
 ] });
-var SelectField = ({ name, label, value, onChange, disabled, options }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system6.Field.Root, { name, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Field.Label, { children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.SingleSelect, { value, disabled, onChange: (v) => onChange(String(v)), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.SingleSelectOption, { value: o.value, children: o.label }, o.value)) })
+var SelectField = ({
+  name,
+  label,
+  value,
+  onChange,
+  disabled,
+  options
+}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system5.Field.Root, { name, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system5.Field.Label, { children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_design_system5.SingleSelect,
+    {
+      value,
+      disabled,
+      onChange: (v) => onChange(String(v)),
+      children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system5.SingleSelectOption, { value: o.value, children: o.label }, o.value))
+    }
+  )
 ] });
 function MediaPicker({ onClose, onSelect }) {
-  const components = (0, import_admin3.useStrapiApp)("Blockscene", (state) => state.components);
-  const Dialog3 = components?.["media-library"];
-  React6.useEffect(() => {
-    if (!Dialog3) onClose();
-  }, [Dialog3, onClose]);
-  if (!Dialog3) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog3, { onClose, allowedTypes: ["images"], multiple: false, onSelectAssets: (assets) => onSelect(assets?.[0]) });
+  const components = (0, import_admin3.useStrapiApp)(
+    "Blockscene",
+    (state) => state.components
+  );
+  const Dialog2 = components?.["media-library"];
+  React7.useEffect(() => {
+    if (!Dialog2) onClose();
+  }, [Dialog2, onClose]);
+  if (!Dialog2) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Dialog2,
+    {
+      onClose,
+      allowedTypes: ["images"],
+      multiple: false,
+      onSelectAssets: (assets) => onSelect(assets?.[0])
+    }
+  );
 }
 function usePermissions() {
-  const { allowedActions, isLoading } = (0, import_admin3.useRBAC)(permissions);
-  return { canRead: allowedActions.canRead, canUpdate: allowedActions.canUpdate, isLoading };
+  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 SettingsPage = () => /* @__PURE__ */ (0, import_jsx_runtime7.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,