@aduptive/strapi-blockscene 1.0.0-alpha.3 → 1.0.0-alpha.4

package/dist/admin.mjs

@@ -1,39 +1,93 @@
 // admin/strapi4.tsx
-import * as React4 from "react";
-import { ModalLayout, ModalHeader, ModalBody, Typography as Typography3, Switch, Flex as Flex3, SingleSelect as SingleSelect2, SingleSelectOption as SingleSelectOption2 } from "@strapi/design-system";
-import { useCMEditViewDataManager, useFetchClient, useLibrary, useRBAC, auth } from "@strapi/helper-plugin";
+import * as React5 from "react";
+import {
+  ModalLayout,
+  ModalHeader,
+  ModalBody,
+  Typography as Typography3,
+  Switch,
+  Flex as Flex3,
+  SingleSelect as SingleSelect2,
+  SingleSelectOption as SingleSelectOption2
+} from "@strapi/design-system";
+import {
+  useCMEditViewDataManager,
+  useFetchClient,
+  useLibrary,
+  useRBAC,
+  auth
+} from "@strapi/helper-plugin";
 
 // admin/Gallery.tsx
-import * as React from "react";
+import * as React2 from "react";
 import { unstable_batchedUpdates } from "react-dom";
-import { Box, Button, Flex, Searchbar, SingleSelect, SingleSelectOption, Typography } from "@strapi/design-system";
+import {
+  Box,
+  Button,
+  Flex,
+  Searchbar,
+  SingleSelect,
+  SingleSelectOption,
+  Typography
+} from "@strapi/design-system";
 import styled from "styled-components";
 
 // admin/model.mjs
 import { generateNKeysBetween } from "fractional-indexing";
 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] || {};
@@ -48,11 +102,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] || {});
@@ -62,8 +118,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;
@@ -79,7 +139,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 {
   }
 }
@@ -165,6 +226,10 @@ function Wireframe({ template, palette, className, noPreview }) {
   );
 }
 
+// admin/RowPreviews.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+
 // admin/messages.ts
 import { useIntl } from "react-intl";
 
@@ -279,7 +344,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
@@ -393,7 +459,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
@@ -507,7 +574,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
@@ -621,7 +689,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
@@ -735,7 +804,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
@@ -849,7 +919,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
@@ -963,7 +1034,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
@@ -1077,7 +1149,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
@@ -1097,26 +1170,224 @@ function useMessages() {
   return out;
 }
 
+// admin/RowPreviews.tsx
+import { Fragment, jsx as jsx2, jsxs } from "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: Modal2 }) {
+  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__ */ jsxs(Fragment, { children: [
+    anchors.map(
+      (a) => createPortal(
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            style: {
+              display: "block",
+              width: "6.4rem",
+              marginRight: "8px",
+              flex: "0 0 auto"
+            },
+            children: /* @__PURE__ */ jsx2(
+              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__ */ jsx2(
+      Modal2,
+      {
+        open: true,
+        onOpenChange: (value) => {
+          if (!value) setOpen(null);
+        },
+        trigger: null,
+        title: label(open),
+        children: /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src: srcOf(open),
+            alt: "",
+            style: {
+              display: "block",
+              margin: "0 auto",
+              maxWidth: "100%",
+              maxHeight: "75vh",
+              objectFit: "contain"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // admin/Gallery.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Columns = styled.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 = styled.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 = styled(Typography)`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 `;
-var Clamp = styled(Typography)` display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; `;
 var Slider = styled.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";
@@ -1142,16 +1413,31 @@ var remember = (key, value) => {
   }
 };
 var Frame = styled.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) {
@@ -1159,11 +1445,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__ */ jsx2(Frame, { $fixed: true, "data-thumb": "wireframe", children: /* @__PURE__ */ jsx2(Wireframe, { template, palette, noPreview }) });
-  return /* @__PURE__ */ jsx2(Frame, { "data-thumb": String(index), children: /* @__PURE__ */ jsx2(
+  if (index >= candidates.length)
+    return blank ? null : /* @__PURE__ */ jsx3(Frame, { $fixed: true, "data-thumb": "wireframe", children: /* @__PURE__ */ jsx3(
+      Wireframe,
+      {
+        template,
+        palette,
+        noPreview
+      }
+    ) });
+  return /* @__PURE__ */ jsx3(Frame, { "data-thumb": String(index), children: /* @__PURE__ */ jsx3(
     "img",
     {
       src: candidates[index],
@@ -1177,25 +1471,68 @@ function Thumb({ candidates, template, palette, onResolved, noPreview, eager })
 }
 function Card({ entry, palette, showFields, onSelect }) {
   const t = useMessages();
-  return /* @__PURE__ */ jsxs(Tile, { type: "button", onClick: onSelect, title: entry.uid, "data-testid": `blockscene-${entry.uid}`, children: [
-    /* @__PURE__ */ jsx2(Thumb, { candidates: entry.candidates, template: entry.template, palette, noPreview: t.noPreview }),
-    /* @__PURE__ */ jsx2(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", ellipsis: true, children: entry.label }),
-    entry.description && /* @__PURE__ */ jsx2(Clamp, { variant: "pi", textColor: "neutral600", children: entry.description }),
-    showFields && entry.fields.length > 0 && /* @__PURE__ */ jsx2(Typography, { variant: "pi", textColor: "neutral500", style: { fontStyle: "italic" }, "data-testid": "block-fields", children: entry.fields.map((f) => `${f.name} (${f.type})`).join(", ") })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    Tile,
+    {
+      type: "button",
+      onClick: onSelect,
+      title: entry.uid,
+      "data-testid": `blockscene-${entry.uid}`,
+      children: [
+        /* @__PURE__ */ jsx3(
+          Thumb,
+          {
+            candidates: entry.candidates,
+            template: entry.template,
+            palette,
+            noPreview: t.noPreview
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Typography,
+          {
+            variant: "pi",
+            fontWeight: "bold",
+            textColor: "neutral800",
+            ellipsis: true,
+            children: entry.label
+          }
+        ),
+        entry.description && /* @__PURE__ */ jsx3(Clamp, { variant: "pi", textColor: "neutral600", children: entry.description }),
+        showFields && entry.fields.length > 0 && /* @__PURE__ */ jsx3(
+          Typography,
+          {
+            variant: "pi",
+            textColor: "neutral500",
+            style: { fontStyle: "italic" },
+            "data-testid": "block-fields",
+            children: entry.fields.map((f) => `${f.name} (${f.type})`).join(", ")
+          }
+        )
+      ]
+    }
+  );
 }
-function ZoneGallery({ zone, components, add, Modal: Modal2, Toggle, get, controlled }) {
+function ZoneGallery({
+  zone,
+  components,
+  add,
+  Modal: Modal2,
+  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");
@@ -1207,7 +1544,7 @@ function ZoneGallery({ zone, components, add, Modal: Modal2, 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("");
@@ -1223,7 +1560,10 @@ function ZoneGallery({ zone, components, add, Modal: Modal2, 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("");
@@ -1247,21 +1587,41 @@ function ZoneGallery({ zone, components, add, Modal: Modal2, Toggle, get, contro
     setShowFields(value);
     remember(SHOW_FIELDS_KEY, String(value));
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     Modal2,
     {
       open,
       onOpenChange: setOpen,
       title: t.gallery,
-      trigger: controlled ? null : /* @__PURE__ */ jsxs(Button, { variant: "secondary", fullWidth: true, onClick: () => setOpen(true), "data-testid": `open-gallery-${zone.name}`, children: [
-        t.add,
-        ": ",
-        zone.name
-      ] }),
-      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
-        /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
-          /* @__PURE__ */ jsx2(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__ */ jsx2(Box, { style: { flex: 1, minWidth: "12rem" }, children: /* @__PURE__ */ jsx2(
+      trigger: controlled ? null : /* @__PURE__ */ jsxs2(
+        Button,
+        {
+          variant: "secondary",
+          fullWidth: true,
+          onClick: () => setOpen(true),
+          "data-testid": `open-gallery-${zone.name}`,
+          children: [
+            t.add,
+            ": ",
+            zone.name
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxs2(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+        /* @__PURE__ */ jsxs2(Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
+          /* @__PURE__ */ jsx3(
+            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__ */ jsx3(Box, { style: { flex: 1, minWidth: "12rem" }, children: /* @__PURE__ */ jsx3(
             Searchbar,
             {
               name: `block-search-${zone.name}`,
@@ -1273,14 +1633,54 @@ function ZoneGallery({ zone, components, add, Modal: Modal2, Toggle, get, contro
               children: t.search
             }
           ) }),
-          categories.length > 1 && /* @__PURE__ */ jsx2(Box, { style: { width: "14rem" }, "data-testid": `block-category-${zone.name}`, children: /* @__PURE__ */ jsxs(SingleSelect, { "aria-label": t.filterCategory, size: "S", value: category, onChange: (value) => setCategory(String(value)), children: [
-            /* @__PURE__ */ jsx2(SingleSelectOption, { value: "all", children: t.allCategories }),
-            categories.map(([name, count]) => /* @__PURE__ */ jsx2(SingleSelectOption, { value: name, children: `${name} (${count})` }, name))
-          ] }) }),
-          Toggle && /* @__PURE__ */ jsx2(Toggle, { name: `block-fields-${zone.name}`, label: t.showFields, hint: t.showFieldsHint, value: showFields, onChange: changeShowFields }),
-          /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx2(Typography, { variant: "pi", textColor: "neutral600", id: `block-columns-${zone.name}`, children: t.columns }),
-            /* @__PURE__ */ jsx2(
+          categories.length > 1 && /* @__PURE__ */ jsx3(
+            Box,
+            {
+              style: { width: "14rem" },
+              "data-testid": `block-category-${zone.name}`,
+              children: /* @__PURE__ */ jsxs2(
+                SingleSelect,
+                {
+                  "aria-label": t.filterCategory,
+                  size: "S",
+                  value: category,
+                  onChange: (value) => setCategory(String(value)),
+                  children: [
+                    /* @__PURE__ */ jsx3(SingleSelectOption, { value: "all", children: t.allCategories }),
+                    categories.map(([name, count]) => /* @__PURE__ */ jsx3(
+                      SingleSelectOption,
+                      {
+                        value: name,
+                        children: `${name} (${count})`
+                      },
+                      name
+                    ))
+                  ]
+                }
+              )
+            }
+          ),
+          Toggle && /* @__PURE__ */ jsx3(
+            Toggle,
+            {
+              name: `block-fields-${zone.name}`,
+              label: t.showFields,
+              hint: t.showFieldsHint,
+              value: showFields,
+              onChange: changeShowFields
+            }
+          ),
+          /* @__PURE__ */ jsxs2(Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx3(
+              Typography,
+              {
+                variant: "pi",
+                textColor: "neutral600",
+                id: `block-columns-${zone.name}`,
+                children: t.columns
+              }
+            ),
+            /* @__PURE__ */ jsx3(
               Slider,
               {
                 type: "range",
@@ -1293,16 +1693,52 @@ function ZoneGallery({ zone, components, add, Modal: Modal2, Toggle, get, contro
                 onChange: (e) => changeColumns(Number(e.target.value))
               }
             ),
-            /* @__PURE__ */ jsx2(Typography, { variant: "pi", fontWeight: "bold", children: columns })
+            /* @__PURE__ */ jsx3(Typography, { variant: "pi", fontWeight: "bold", children: columns })
           ] })
         ] }),
-        /* @__PURE__ */ jsx2(Typography, { variant: "pi", textColor: "neutral600", children: t.example }),
-        error ? /* @__PURE__ */ jsx2(Typography, { role: "alert", textColor: "danger600", children: error }) : !config ? /* @__PURE__ */ jsx2(Typography, { children: t.loading }) : entries.length ? /* @__PURE__ */ jsx2(Flex, { direction: "column", alignItems: "stretch", gap: 4, style: { overflowY: "auto", maxHeight: "60vh", padding: "4px" }, children: groupEntries(entries).map(({ category: name, entries: items }) => /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-          /* @__PURE__ */ jsx2(Typography, { variant: "sigma", textColor: "neutral600", "data-testid": `block-group-${name}`, children: `${name} (${items.length})` }),
-          /* @__PURE__ */ jsx2(Columns, { $columns: columns, children: items.map((entry) => /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(Card, { entry, palette: config.palette, showFields, onSelect: () => select(entry.uid) }) }, entry.uid)) })
-        ] }, name)) }) : /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
-          /* @__PURE__ */ jsx2(Typography, { children: t.empty }),
-          filtering && /* @__PURE__ */ jsx2(Button, { variant: "tertiary", size: "S", onClick: reset, children: t.clear })
+        /* @__PURE__ */ jsx3(Typography, { variant: "pi", textColor: "neutral600", children: t.example }),
+        error ? /* @__PURE__ */ jsx3(Typography, { role: "alert", textColor: "danger600", children: error }) : !config ? /* @__PURE__ */ jsx3(Typography, { children: t.loading }) : entries.length ? /* @__PURE__ */ jsx3(
+          Flex,
+          {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 4,
+            style: { overflowY: "auto", maxHeight: "60vh", padding: "4px" },
+            children: groupEntries(entries).map(
+              ({ category: name, entries: items }) => /* @__PURE__ */ jsxs2(
+                Flex,
+                {
+                  direction: "column",
+                  alignItems: "stretch",
+                  gap: 2,
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      Typography,
+                      {
+                        variant: "sigma",
+                        textColor: "neutral600",
+                        "data-testid": `block-group-${name}`,
+                        children: `${name} (${items.length})`
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(Columns, { $columns: columns, children: items.map((entry) => /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
+                      Card,
+                      {
+                        entry,
+                        palette: config.palette,
+                        showFields,
+                        onSelect: () => select(entry.uid)
+                      }
+                    ) }, entry.uid)) })
+                  ]
+                },
+                name
+              )
+            )
+          }
+        ) : /* @__PURE__ */ jsxs2(Flex, { gap: 3, alignItems: "center", children: [
+          /* @__PURE__ */ jsx3(Typography, { children: t.empty }),
+          filtering && /* @__PURE__ */ jsx3(Button, { variant: "tertiary", size: "S", onClick: reset, children: t.clear })
         ] })
       ] })
     }
@@ -1316,13 +1752,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;
@@ -1331,7 +1773,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);
@@ -1349,8 +1794,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", unstable_batchedUpdates);
+        const key = memoryKey({
+          base: memoryBase(),
+          userId: user.current,
+          contentType,
+          zone: zone.name
+        });
+        setAll(
+          list,
+          initialState(editor, readMemory(storage(), key)) === "open",
+          unstable_batchedUpdates
+        );
       }
     }, 200);
     return stop;
@@ -1362,26 +1816,83 @@ function ZoneControls({ zone, editor, contentType, userId }) {
   const apply = (open) => {
     const list = findZoneList(zone.label);
     if (list) setAll(list, open, unstable_batchedUpdates);
-    writeMemory(storage(), memoryKey({ base: memoryBase(), userId, contentType, zone: zone.name }), open ? "open" : "closed");
+    writeMemory(
+      storage(),
+      memoryKey({ base: memoryBase(), userId, contentType, zone: zone.name }),
+      open ? "open" : "closed"
+    );
   };
-  return /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", "data-testid": `block-accordion-controls-${zone.name}`, children: [
-    editor.showOpenAll && /* @__PURE__ */ jsx2(Button, { type: "button", variant: "tertiary", size: "S", onClick: () => apply(true), children: t.openAll }),
-    editor.showCloseAll && /* @__PURE__ */ jsx2(Button, { type: "button", variant: "tertiary", size: "S", onClick: () => apply(false), children: t.closeAll })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    Flex,
+    {
+      gap: 2,
+      wrap: "wrap",
+      "data-testid": `block-accordion-controls-${zone.name}`,
+      children: [
+        editor.showOpenAll && /* @__PURE__ */ jsx3(
+          Button,
+          {
+            type: "button",
+            variant: "tertiary",
+            size: "S",
+            onClick: () => apply(true),
+            children: t.openAll
+          }
+        ),
+        editor.showCloseAll && /* @__PURE__ */ jsx3(
+          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__ */ jsx2(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: zones.map((zone) => /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-    !zone.full && /* @__PURE__ */ jsx2(ZoneGallery, { zone, ...props }),
-    /* @__PURE__ */ jsx2(ZoneControls, { zone, editor, contentType, userId })
-  ] }, zone.name)) });
+  return /* @__PURE__ */ jsxs2(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+    /* @__PURE__ */ jsx3(
+      RowPreviews,
+      {
+        zones,
+        components: props.components,
+        catalog,
+        Modal: props.Modal
+      }
+    ),
+    zones.map((zone) => /* @__PURE__ */ jsxs2(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      !zone.full && /* @__PURE__ */ jsx3(ZoneGallery, { zone, ...props }),
+      /* @__PURE__ */ jsx3(
+        ZoneControls,
+        {
+          zone,
+          editor,
+          contentType,
+          userId
+        }
+      )
+    ] }, zone.name))
+  ] });
 }
 
 // admin/Settings.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { Box as Box2, Button as Button2, Flex as Flex2, Searchbar as Searchbar2, Typography as Typography2 } from "@strapi/design-system";
 import styled2 from "styled-components";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var COLOR2 = /^#[0-9A-Fa-f]{6}$/;
 var Grid = styled2.div` display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; `;
 var Card2 = styled2.div`
@@ -1394,8 +1905,8 @@ var Bar = styled2.div`
   box-shadow: 0 1px 4px rgba(33, 33, 52, 0.1);
 `;
 function useMainRect(anchor) {
-  const [rect, setRect] = React2.useState({ left: 0, width: 0 });
-  React2.useEffect(() => {
+  const [rect, setRect] = React3.useState({ left: 0, width: 0 });
+  React3.useEffect(() => {
     const read = () => {
       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;
@@ -1412,11 +1923,11 @@ var Swatches = styled2.div` display: grid; grid-template-columns: repeat(auto-fi
 var Label = styled2.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__ */ jsxs2(Label, { children: [
-    /* @__PURE__ */ jsx3(Typography2, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: label }),
-    /* @__PURE__ */ jsxs2(Flex2, { gap: 2, children: [
-      /* @__PURE__ */ jsx3("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__ */ jsx3(
+  return /* @__PURE__ */ jsxs3(Label, { children: [
+    /* @__PURE__ */ jsx4(Typography2, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: label }),
+    /* @__PURE__ */ jsxs3(Flex2, { gap: 2, children: [
+      /* @__PURE__ */ jsx4("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__ */ jsx4(
         "input",
         {
           name,
@@ -1436,18 +1947,18 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
   const t = useMessages();
   const { get, put } = useClient();
   const { canRead, canUpdate, isLoading } = usePermissions2();
-  const [data, setData] = React2.useState(null);
-  const [catalog, setCatalog] = React2.useState(null);
-  const [settings, setSettings] = React2.useState(null);
-  const [media, setMedia] = React2.useState({});
-  const [sources, setSources] = React2.useState({});
-  const [dirty, setDirty] = React2.useState(false);
-  const [saving, setSaving] = React2.useState(false);
-  const [status, setStatus] = React2.useState("");
-  const [failed, setFailed] = React2.useState(false);
-  const [filter, setFilter] = React2.useState("");
-  const [picking, setPicking] = React2.useState(null);
-  React2.useEffect(() => {
+  const [data, setData] = React3.useState(null);
+  const [catalog, setCatalog] = React3.useState(null);
+  const [settings, setSettings] = React3.useState(null);
+  const [media, setMedia] = React3.useState({});
+  const [sources, setSources] = React3.useState({});
+  const [dirty, setDirty] = React3.useState(false);
+  const [saving, setSaving] = React3.useState(false);
+  const [status, setStatus] = React3.useState("");
+  const [failed, setFailed] = React3.useState(false);
+  const [filter, setFilter] = React3.useState("");
+  const [picking, setPicking] = React3.useState(null);
+  React3.useEffect(() => {
     if (!canRead || isLoading) return;
     let active = true;
     Promise.all([get("/blockscene/settings"), get("/blockscene/catalog")]).then(([s, c]) => {
@@ -1495,35 +2006,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 = React2.useRef(null);
-  const [floating, setFloating] = React2.useState(false);
+  const header = React3.useRef(null);
+  const [floating, setFloating] = React3.useState(false);
   const main = useMainRect(header);
-  React2.useEffect(() => {
+  React3.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__ */ jsxs2(Flex2, { gap: 3, alignItems: "center", wrap: "wrap", children: [
-    /* @__PURE__ */ jsx3(Typography2, { 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__ */ jsx3(Button2, { onClick: save, disabled: !canUpdate || invalid || !dirty, loading: saving, "data-testid": `save-blockscene-settings${suffix}`, children: t.save })
+  const controls = (suffix) => ready && /* @__PURE__ */ jsxs3(Flex2, { gap: 3, alignItems: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ jsx4(Typography2, { 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__ */ jsx4(Button2, { onClick: save, disabled: !canUpdate || invalid || !dirty, loading: saving, "data-testid": `save-blockscene-settings${suffix}`, children: t.save })
   ] });
-  return /* @__PURE__ */ jsx3(Box2, { padding: 8, background: "neutral100", children: /* @__PURE__ */ jsxs2(Flex2, { direction: "column", alignItems: "stretch", gap: 5, children: [
-    /* @__PURE__ */ jsx3("div", { ref: header, children: /* @__PURE__ */ jsxs2(Flex2, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
-      /* @__PURE__ */ jsx3(Typography2, { variant: "alpha", tag: "h1", children: t.settingsTitle }),
+  return /* @__PURE__ */ jsx4(Box2, { padding: 8, background: "neutral100", children: /* @__PURE__ */ jsxs3(Flex2, { direction: "column", alignItems: "stretch", gap: 5, children: [
+    /* @__PURE__ */ jsx4("div", { ref: header, children: /* @__PURE__ */ jsxs3(Flex2, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx4(Typography2, { variant: "alpha", tag: "h1", children: t.settingsTitle }),
       controls("")
     ] }) }),
-    floating && main.width > 0 && /* @__PURE__ */ jsx3(Bar, { style: { left: main.left, width: main.width }, "data-testid": "settings-floating-bar", children: /* @__PURE__ */ jsxs2(Flex2, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
-      /* @__PURE__ */ jsx3(Typography2, { variant: "beta", tag: "p", children: t.settingsTitle }),
+    floating && main.width > 0 && /* @__PURE__ */ jsx4(Bar, { style: { left: main.left, width: main.width }, "data-testid": "settings-floating-bar", children: /* @__PURE__ */ jsxs3(Flex2, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx4(Typography2, { variant: "beta", tag: "p", children: t.settingsTitle }),
       controls("-floating")
     ] }) }),
-    /* @__PURE__ */ jsx3(Typography2, { textColor: "neutral600", children: t.settingsIntro }),
-    isLoading ? /* @__PURE__ */ jsx3(Typography2, { children: "\u2026" }) : !canRead ? /* @__PURE__ */ jsx3(Typography2, { role: "alert", children: t.denied }) : failed ? /* @__PURE__ */ jsx3(Typography2, { role: "alert", children: t.loadFailed }) : !settings || !catalog ? /* @__PURE__ */ jsx3(Typography2, { children: t.loading }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-      data.disabled && /* @__PURE__ */ jsx3(Box2, { padding: 4, background: "warning100", hasRadius: true, children: /* @__PURE__ */ jsx3(Typography2, { role: "alert", textColor: "warning700", children: t.disabledByServer }) }),
-      /* @__PURE__ */ jsx3(Box2, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs2(Flex2, { direction: "column", alignItems: "stretch", gap: 4, children: [
-        /* @__PURE__ */ jsx3(Typography2, { variant: "beta", tag: "h2", children: t.palette }),
-        /* @__PURE__ */ jsx3(Swatches, { children: Object.keys(DEFAULT_PALETTE).map((key) => /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(Typography2, { textColor: "neutral600", children: t.settingsIntro }),
+    isLoading ? /* @__PURE__ */ jsx4(Typography2, { children: "\u2026" }) : !canRead ? /* @__PURE__ */ jsx4(Typography2, { role: "alert", children: t.denied }) : failed ? /* @__PURE__ */ jsx4(Typography2, { role: "alert", children: t.loadFailed }) : !settings || !catalog ? /* @__PURE__ */ jsx4(Typography2, { children: t.loading }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      data.disabled && /* @__PURE__ */ jsx4(Box2, { padding: 4, background: "warning100", hasRadius: true, children: /* @__PURE__ */ jsx4(Typography2, { role: "alert", textColor: "warning700", children: t.disabledByServer }) }),
+      /* @__PURE__ */ jsx4(Box2, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs3(Flex2, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ jsx4(Typography2, { variant: "beta", tag: "h2", children: t.palette }),
+        /* @__PURE__ */ jsx4(Swatches, { children: Object.keys(DEFAULT_PALETTE).map((key) => /* @__PURE__ */ jsx4(
           ColorField,
           {
             name: `palette-${key}`,
@@ -1537,33 +2048,33 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
           },
           key
         )) }),
-        invalid && /* @__PURE__ */ jsx3(Typography2, { role: "alert", textColor: "danger600", children: t.invalidColor }),
-        /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewLabel }),
-        /* @__PURE__ */ jsx3(Swatches, { "data-testid": "palette-preview", children: TEMPLATES.map((template) => /* @__PURE__ */ jsxs2(Flex2, { direction: "column", gap: 1, children: [
-          /* @__PURE__ */ jsx3(Box2, { style: { aspectRatio: "16 / 9", overflow: "hidden" }, hasRadius: true, children: /* @__PURE__ */ jsx3(Wireframe, { template, palette: settings.palette }) }),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.templates[template] })
+        invalid && /* @__PURE__ */ jsx4(Typography2, { role: "alert", textColor: "danger600", children: t.invalidColor }),
+        /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewLabel }),
+        /* @__PURE__ */ jsx4(Swatches, { "data-testid": "palette-preview", children: TEMPLATES.map((template) => /* @__PURE__ */ jsxs3(Flex2, { direction: "column", gap: 1, children: [
+          /* @__PURE__ */ jsx4(Box2, { style: { aspectRatio: "16 / 9", overflow: "hidden" }, hasRadius: true, children: /* @__PURE__ */ jsx4(Wireframe, { template, palette: settings.palette }) }),
+          /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", children: t.templates[template] })
         ] }, template)) }),
-        /* @__PURE__ */ jsx3(Flex2, { children: /* @__PURE__ */ jsx3(Button2, { variant: "tertiary", size: "S", disabled: !canUpdate, onClick: () => update((s) => {
+        /* @__PURE__ */ jsx4(Flex2, { children: /* @__PURE__ */ jsx4(Button2, { variant: "tertiary", size: "S", disabled: !canUpdate, onClick: () => update((s) => {
           s.palette = { ...DEFAULT_PALETTE };
           return s;
         }), children: t.resetPalette }) })
       ] }) }),
-      /* @__PURE__ */ jsx3(Box2, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs2(Flex2, { direction: "column", alignItems: "stretch", gap: 4, children: [
-        /* @__PURE__ */ jsx3(Typography2, { variant: "beta", tag: "h2", children: t.editor }),
-        /* @__PURE__ */ jsx3(ToggleField2, { name: "editor-enabled", label: t.enabled, value: editor.enabled, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
+      /* @__PURE__ */ jsx4(Box2, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs3(Flex2, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ jsx4(Typography2, { variant: "beta", tag: "h2", children: t.editor }),
+        /* @__PURE__ */ jsx4(ToggleField2, { name: "editor-enabled", label: t.enabled, value: editor.enabled, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
           s.editor.enabled = v;
           return s;
         }) }),
-        /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.enabledHelp }),
-        /* @__PURE__ */ jsx3(ToggleField2, { name: "editor-showOpenAll", label: t.showOpenAll, value: editor.showOpenAll, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
+        /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", children: t.enabledHelp }),
+        /* @__PURE__ */ jsx4(ToggleField2, { name: "editor-showOpenAll", label: t.showOpenAll, value: editor.showOpenAll, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
           s.editor.showOpenAll = v;
           return s;
         }) }),
-        /* @__PURE__ */ jsx3(ToggleField2, { name: "editor-showCloseAll", label: t.showCloseAll, value: editor.showCloseAll, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
+        /* @__PURE__ */ jsx4(ToggleField2, { name: "editor-showCloseAll", label: t.showCloseAll, value: editor.showCloseAll, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
           s.editor.showCloseAll = v;
           return s;
         }) }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           SelectField2,
           {
             name: "editor-initialState",
@@ -1577,9 +2088,9 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
             })
           }
         ),
-        /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.rememberHelp }),
-        previewSupported ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", children: t.rememberHelp }),
+        previewSupported ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx4(
             TextField,
             {
               name: "editor-previewUrl",
@@ -1593,8 +2104,8 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
               })
             }
           ),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewUrlHelp }),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewUrlHelp }),
+          /* @__PURE__ */ jsx4(
             SelectField2,
             {
               name: "editor-previewMode",
@@ -1608,26 +2119,26 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
               })
             }
           ),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewModeHelp }),
-          data.blockPreviewAvailable && /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx3(ToggleField2, { name: "editor-blockPreviewInForm", label: t.blockPreviewInForm, value: editor.blockPreviewInForm, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
+          /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewModeHelp }),
+          data.blockPreviewAvailable && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsx4(ToggleField2, { name: "editor-blockPreviewInForm", label: t.blockPreviewInForm, value: editor.blockPreviewInForm, disabled: !canUpdate || saving, onChange: (v) => update((s) => {
               s.editor.blockPreviewInForm = v;
               return s;
             }) }),
-            /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.blockPreviewInFormHelp })
+            /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", children: t.blockPreviewInFormHelp })
           ] })
-        ] }) : /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewV4 })
+        ] }) : /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewV4 })
       ] }) }),
-      /* @__PURE__ */ jsx3(Box2, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs2(Flex2, { direction: "column", alignItems: "stretch", gap: 4, children: [
-        /* @__PURE__ */ jsx3(Typography2, { variant: "beta", tag: "h2", children: t.components }),
-        /* @__PURE__ */ jsx3(Searchbar2, { name: "component-filter", value: filter, placeholder: t.filter, clearLabel: t.clear, onClear: () => setFilter(""), onChange: (e) => setFilter(e.target.value), children: t.filter }),
-        /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", "data-testid": "components-count", children: t.f("countAll", { count: components.length }) }),
-        /* @__PURE__ */ jsx3(Grid, { "data-testid": "components-grid", children: components.map((component) => {
+      /* @__PURE__ */ jsx4(Box2, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs3(Flex2, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ jsx4(Typography2, { variant: "beta", tag: "h2", children: t.components }),
+        /* @__PURE__ */ jsx4(Searchbar2, { name: "component-filter", value: filter, placeholder: t.filter, clearLabel: t.clear, onClear: () => setFilter(""), onChange: (e) => setFilter(e.target.value), children: t.filter }),
+        /* @__PURE__ */ jsx4(Typography2, { variant: "pi", textColor: "neutral600", "data-testid": "components-count", children: t.f("countAll", { count: components.length }) }),
+        /* @__PURE__ */ jsx4(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__ */ jsxs2(Card2, { "data-testid": `settings-${component.uid}`, children: [
-            /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsxs3(Card2, { "data-testid": `settings-${component.uid}`, children: [
+            /* @__PURE__ */ jsx4(
               Thumb,
               {
                 candidates,
@@ -1638,23 +2149,23 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
                 onResolved: (index) => setSources((current) => current[component.uid] === index ? current : { ...current, [component.uid]: index })
               }
             ),
-            /* @__PURE__ */ jsxs2(Flex2, { direction: "column", alignItems: "flex-start", gap: 2, children: [
-              /* @__PURE__ */ jsx3(Typography2, { fontWeight: "bold", textColor: "neutral800", children: component.displayName }),
-              /* @__PURE__ */ jsxs2(Typography2, { variant: "pi", textColor: "neutral600", children: [
+            /* @__PURE__ */ jsxs3(Flex2, { direction: "column", alignItems: "flex-start", gap: 2, children: [
+              /* @__PURE__ */ jsx4(Typography2, { fontWeight: "bold", textColor: "neutral800", children: component.displayName }),
+              /* @__PURE__ */ jsxs3(Typography2, { variant: "pi", textColor: "neutral600", children: [
                 component.uid,
                 " \xB7 ",
                 component.category
               ] }),
-              /* @__PURE__ */ jsxs2(Typography2, { variant: "pi", "data-testid": `source-${component.uid}`, children: [
+              /* @__PURE__ */ jsxs3(Typography2, { variant: "pi", "data-testid": `source-${component.uid}`, children: [
                 t.source,
                 ": ",
                 sourceOf(component.uid, Boolean(meta.manualImage)),
                 meta.manualName ? ` (${meta.manualName})` : ""
               ] }),
-              meta.manualMissing && /* @__PURE__ */ jsx3(Typography2, { variant: "pi", role: "alert", textColor: "danger600", children: t.brokenMedia }),
-              /* @__PURE__ */ jsxs2(Flex2, { gap: 2, wrap: "wrap", children: [
-                /* @__PURE__ */ jsx3(Button2, { variant: "secondary", size: "S", disabled: !canUpdate || saving, onClick: () => setPicking(component.uid), children: entry.mediaId ? t.replace : t.choose }),
-                entry.mediaId && /* @__PURE__ */ jsx3(Button2, { variant: "tertiary", size: "S", disabled: !canUpdate || saving, onClick: () => {
+              meta.manualMissing && /* @__PURE__ */ jsx4(Typography2, { variant: "pi", role: "alert", textColor: "danger600", children: t.brokenMedia }),
+              /* @__PURE__ */ jsxs3(Flex2, { gap: 2, wrap: "wrap", children: [
+                /* @__PURE__ */ jsx4(Button2, { variant: "secondary", size: "S", disabled: !canUpdate || saving, onClick: () => setPicking(component.uid), children: entry.mediaId ? t.replace : t.choose }),
+                entry.mediaId && /* @__PURE__ */ jsx4(Button2, { 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];
@@ -1667,7 +2178,7 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
                   });
                 }, children: t.useAutomatic })
               ] }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 SelectField2,
                 {
                   name: `template-${component.uid}`,
@@ -1685,7 +2196,7 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
           ] }, component.uid);
         }) })
       ] }) }),
-      picking && /* @__PURE__ */ jsx3(MediaPicker2, { onClose: () => setPicking(null), onSelect: (asset) => {
+      picking && /* @__PURE__ */ jsx4(MediaPicker2, { onClose: () => setPicking(null), onSelect: (asset) => {
         const uid = picking;
         setPicking(null);
         if (!asset?.id) return;
@@ -1714,10 +2225,10 @@ function register(app, Component, to) {
 }
 
 // admin/catalog.ts
-import * as React3 from "react";
+import * as React4 from "react";
 function useCatalog(get) {
-  const [catalog, setCatalog] = React3.useState(null);
-  React3.useEffect(() => {
+  const [catalog, setCatalog] = React4.useState(null);
+  React4.useEffect(() => {
     let active = true;
     get("/blockscene/catalog").then(({ data }) => {
       if (active) setCatalog(data);
@@ -1732,14 +2243,14 @@ function useCatalog(get) {
 }
 
 // admin/strapi4.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Modal({ open, onOpenChange, trigger, title, children }) {
-  const id = React4.useId();
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  const id = React5.useId();
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     trigger,
-    open && /* @__PURE__ */ jsxs3(ModalLayout, { onClose: () => onOpenChange(false), labelledBy: id, children: [
-      /* @__PURE__ */ jsx4(ModalHeader, { children: /* @__PURE__ */ jsx4(Typography3, { id, variant: "beta", children: title }) }),
-      /* @__PURE__ */ jsx4(ModalBody, { children })
+    open && /* @__PURE__ */ jsxs4(ModalLayout, { onClose: () => onOpenChange(false), labelledBy: id, children: [
+      /* @__PURE__ */ jsx5(ModalHeader, { children: /* @__PURE__ */ jsx5(Typography3, { id, variant: "beta", children: title }) }),
+      /* @__PURE__ */ jsx5(ModalBody, { children })
     ] })
   ] });
 }
@@ -1750,17 +2261,37 @@ function Picker() {
   const components = c.allLayoutData?.components || {};
   const schema = c.layout || c.allLayoutData?.contentType;
   const allowed = (c.isCreatingEntry ? c.createActionAllowedFields : c.updateActionAllowedFields) || [];
-  const zones = editableZones(schema, c.modifiedData, (name) => allowed.includes(name) && schema?.metadatas?.[name]?.edit?.editable !== false, !c.addComponentToDynamicZone).map((zone) => ({ ...zone, label: schema?.metadatas?.[zone.name]?.edit?.label || zone.name }));
+  const zones = editableZones(
+    schema,
+    c.modifiedData,
+    (name) => allowed.includes(name) && schema?.metadatas?.[name]?.edit?.editable !== false,
+    !c.addComponentToDynamicZone
+  ).map((zone) => ({
+    ...zone,
+    label: schema?.metadatas?.[zone.name]?.edit?.label || zone.name
+  }));
   const add = (zone, uid) => {
     const close = catalog?.groups?.[uid];
-    if (!canInsert(zone, uid, c.modifiedData, components, close ? 2 : 1) || close && !zone.components.includes(close)) return false;
-    c.addComponentToDynamicZone(zone.name, components[uid], components, Boolean(c.formErrors?.[zone.name]));
-    if (close) c.addComponentToDynamicZone(zone.name, components[close], components, Boolean(c.formErrors?.[zone.name]));
+    if (!canInsert(zone, uid, c.modifiedData, components, close ? 2 : 1) || close && !zone.components.includes(close))
+      return false;
+    c.addComponentToDynamicZone(
+      zone.name,
+      components[uid],
+      components,
+      Boolean(c.formErrors?.[zone.name])
+    );
+    if (close)
+      c.addComponentToDynamicZone(
+        zone.name,
+        components[close],
+        components,
+        Boolean(c.formErrors?.[zone.name])
+      );
     return true;
   };
   if (!catalog?.editor?.enabled) return null;
   const docKey = `${c.slug}:${c.isCreatingEntry ? "new" : c.initialData?.id}:${c.initialData?.locale || ""}`;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     Gallery,
     {
       zones,
@@ -1770,17 +2301,44 @@ function Picker() {
       Toggle: ToggleField,
       get,
       editor: catalog.editor,
+      catalog,
       docKey,
       contentType: c.slug,
       userId: auth.getUserInfo?.()?.id
     }
   );
 }
-var ToggleField = ({ name, label, value, onChange, disabled }) => /* @__PURE__ */ jsxs3(Flex3, { gap: 3, children: [
-  /* @__PURE__ */ jsx4(Switch, { name, "aria-label": label, selected: Boolean(value), disabled, onChange: () => onChange(!value) }),
-  /* @__PURE__ */ jsx4(Typography3, { children: label })
+var ToggleField = ({ name, label, value, onChange, disabled }) => /* @__PURE__ */ jsxs4(Flex3, { gap: 3, children: [
+  /* @__PURE__ */ jsx5(
+    Switch,
+    {
+      name,
+      "aria-label": label,
+      selected: Boolean(value),
+      disabled,
+      onChange: () => onChange(!value)
+    }
+  ),
+  /* @__PURE__ */ jsx5(Typography3, { children: label })
 ] });
-var SelectField = ({ name, label, value, onChange, disabled, options }) => /* @__PURE__ */ jsx4(SingleSelect2, { name, label, value, disabled, onChange: (v) => onChange(String(v)), children: options.map((o) => /* @__PURE__ */ jsx4(SingleSelectOption2, { value: o.value, children: o.label }, o.value)) });
+var SelectField = ({
+  name,
+  label,
+  value,
+  onChange,
+  disabled,
+  options
+}) => /* @__PURE__ */ jsx5(
+  SingleSelect2,
+  {
+    name,
+    label,
+    value,
+    disabled,
+    onChange: (v) => onChange(String(v)),
+    children: options.map((o) => /* @__PURE__ */ jsx5(SingleSelectOption2, { value: o.value, children: o.label }, o.value))
+  }
+);
 function MediaPicker({ onClose, onSelect }) {
   const { components } = useLibrary();
   const Dialog = components?.["media-library"];
@@ -1788,13 +2346,34 @@ function MediaPicker({ onClose, onSelect }) {
     onClose();
     return null;
   }
-  return /* @__PURE__ */ jsx4(Dialog, { onClose, allowedTypes: ["images"], onSelectAssets: (assets) => onSelect(assets?.[0]) });
+  return /* @__PURE__ */ jsx5(
+    Dialog,
+    {
+      onClose,
+      allowedTypes: ["images"],
+      onSelectAssets: (assets) => onSelect(assets?.[0])
+    }
+  );
 }
 function usePermissions() {
   const { allowedActions, isLoading } = useRBAC(permissions);
-  return { canRead: allowedActions.canRead, canUpdate: allowedActions.canUpdate, isLoading };
+  return {
+    canRead: allowedActions.canRead,
+    canUpdate: allowedActions.canUpdate,
+    isLoading
+  };
 }
-var SettingsPage = () => /* @__PURE__ */ jsx4(Settings, { useClient: useFetchClient, usePermissions, MediaPicker, ToggleField, SelectField, previewSupported: false });
+var SettingsPage = () => /* @__PURE__ */ jsx5(
+  Settings,
+  {
+    useClient: useFetchClient,
+    usePermissions,
+    MediaPicker,
+    ToggleField,
+    SelectField,
+    previewSupported: false
+  }
+);
 var strapi4_default = {
   register(app) {
     register(app, SettingsPage, "/settings/blockscene");
@@ -1802,7 +2381,10 @@ var strapi4_default = {
   },
   registerTrads,
   bootstrap(app) {
-    app.injectContentManagerComponent("editView", "right-links", { name: "blockscene", Component: Picker });
+    app.injectContentManagerComponent("editView", "right-links", {
+      name: "blockscene",
+      Component: Picker
+    });
   }
 };
 export {