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

package/dist/admin.mjs

@@ -1,7 +1,140 @@
-// 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";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// server/groups.js
+var require_groups = __commonJS({
+  "server/groups.js"(exports, module) {
+    "use strict";
+    var UID = /^[a-z0-9-]+\.[a-z0-9-]+$/;
+    function safeGroups2(value, knownUids) {
+      if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+      const out = {};
+      for (const [open, close] of Object.entries(value)) {
+        if (!UID.test(open) || typeof close !== "string" || !UID.test(close) || open === close) continue;
+        if (knownUids && (!knownUids.includes(open) || !knownUids.includes(close))) continue;
+        out[open] = close;
+      }
+      for (const close of Object.values(out)) if (out[close]) return null;
+      return Object.keys(out).length ? out : null;
+    }
+    var uidOf = (row) => typeof row?.__component === "string" ? row.__component : "";
+    var isOpener = (row, g) => Boolean(g) && Object.prototype.hasOwnProperty.call(g, uidOf(row));
+    var isClose = (row, g) => Boolean(g) && Object.values(g).includes(uidOf(row));
+    var blockKey2 = (row) => row && row.id != null ? `${row.__component}#${row.id}` : row && row.__temp_key__ != null ? String(row.__temp_key__) : null;
+    function validateGroups2(rows, g) {
+      const errors = [];
+      if (!g || !Array.isArray(rows)) return errors;
+      const stack = [];
+      rows.forEach((row, index) => {
+        const uid = uidOf(row);
+        if (isOpener(row, g)) {
+          stack.push({ index, uid, close: g[uid] });
+          return;
+        }
+        if (!isClose(row, g)) return;
+        const top = stack[stack.length - 1];
+        if (!top) errors.push({ code: "closeBeforeOpen", index, uid });
+        else if (top.close !== uid) errors.push({ code: "mismatch", index, uid, expected: top.close, open: top.uid, openIndex: top.index });
+        else stack.pop();
+      });
+      for (const open of stack) errors.push({ code: "unclosed", index: open.index, uid: open.uid, expected: open.close });
+      return errors;
+    }
+    function groupRange2(rows, start, g) {
+      const stack = [g[uidOf(rows[start])]];
+      for (let i = start + 1; i < rows.length; i++) {
+        const row = rows[i];
+        if (isOpener(row, g)) stack.push(g[uidOf(row)]);
+        else if (isClose(row, g) && uidOf(row) === stack[stack.length - 1]) {
+          stack.pop();
+          if (!stack.length) return [start, i];
+        }
+      }
+      return [start, rows.length - 1];
+    }
+    function groupRows2(rows, g, depth = 0, offset = 0) {
+      const out = [];
+      let i = 0;
+      while (i < rows.length) {
+        const row = rows[i];
+        if (isOpener(row, g)) {
+          const [, end] = groupRange2(rows, i, g);
+          const closed = uidOf(rows[end]) === g[uidOf(row)] && end > i;
+          out.push({
+            type: "group",
+            key: blockKey2(row),
+            closeKey: closed ? blockKey2(rows[end]) : null,
+            row,
+            index: offset + i,
+            depth,
+            children: groupRows2(rows.slice(i + 1, closed ? end : end + 1), g, depth + 1, offset + i + 1)
+          });
+          i = end + 1;
+          continue;
+        }
+        out.push({ type: "block", key: blockKey2(row), row, index: offset + i, depth, stray: isClose(row, g) });
+        i++;
+      }
+      return out;
+    }
+    function topLevelRanges2(rows, g) {
+      const ranges = [];
+      let i = 0;
+      while (i < rows.length) {
+        const end = isOpener(rows[i], g) ? groupRange2(rows, i, g)[1] : i;
+        ranges.push([i, end]);
+        i = end + 1;
+      }
+      return ranges;
+    }
+    function moveGroup2(rows, key, direction, g) {
+      if (!g) return null;
+      const ranges = topLevelRanges2(rows, g);
+      const at = ranges.findIndex(([s]) => blockKey2(rows[s]) === String(key));
+      const to = at + (direction === "up" ? -1 : 1);
+      if (at < 0 || to < 0 || to >= ranges.length) return null;
+      const [a, b] = direction === "up" ? [ranges[to], ranges[at]] : [ranges[at], ranges[to]];
+      return [...rows.slice(0, a[0]), ...rows.slice(b[0], b[1] + 1), ...rows.slice(a[0], a[1] + 1), ...rows.slice(b[1] + 1)];
+    }
+    function removeGroup2(rows, key, g) {
+      if (!g) return null;
+      const start = rows.findIndex((row) => blockKey2(row) === String(key));
+      if (start < 0 || !isOpener(rows[start], g)) return null;
+      const [, end] = groupRange2(rows, start, g);
+      return [...rows.slice(0, start), ...rows.slice(end + 1)];
+    }
+    module.exports = { safeGroups: safeGroups2, validateGroups: validateGroups2, groupRange: groupRange2, groupRows: groupRows2, topLevelRanges: topLevelRanges2, moveGroup: moveGroup2, removeGroup: removeGroup2, blockKey: blockKey2, isOpener, isClose };
+  }
+});
+
+// admin/strapi5.tsx
+import * as React6 from "react";
+import { Modal as Dialog2, Switch, Flex as Flex5, Typography as Typography5, Field, SingleSelect as SingleSelect2, SingleSelectOption as SingleSelectOption2, TextInput } from "@strapi/design-system";
+import { useFetchClient as useFetchClient2, useRBAC, useStrapiApp as useStrapiApp3, useAuth, useForm as useForm3 } from "@strapi/strapi/admin";
+import { unstable_useContentManagerContext as useContext2, useDocumentRBAC as useDocumentRBAC2 } from "@strapi/content-manager/strapi-admin";
 
 // admin/Gallery.tsx
 import * as React from "react";
@@ -11,6 +144,25 @@ import styled from "styled-components";
 
 // admin/model.mjs
 import { generateNKeysBetween } from "fractional-indexing";
+function componentDefaults(schema, components, stack = []) {
+  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 (value !== null || attr.type === "boolean") row[name] = value;
+    } else if (attr.type === "component" && attr.required) {
+      const create = () => componentDefaults(components[attr.component], components, [...stack, schema]);
+      if (attr.repeatable) {
+        const keys = generateNKeysBetween(null, null, attr.min || 0);
+        row[name] = keys.map((key) => ({ ...create(), __temp_key__: key }));
+      } else row[name] = create();
+    } else if (attr.type === "dynamiczone" && attr.required) row[name] = [];
+  }
+  return row;
+}
 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]) => {
@@ -1184,7 +1336,10 @@ function Card({ entry, palette, showFields, onSelect }) {
     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(", ") })
   ] });
 }
-function ZoneGallery({ zone, components, add, Modal: Modal2, Toggle, get, controlled }) {
+function PickerModal({ zone, components, open, onOpenChange, onSelect, Modal: Modal3, Toggle, get }) {
+  return /* @__PURE__ */ jsx2(ZoneGallery, { zone, components, Modal: Modal3, Toggle, get, controlled: { open, onOpenChange, onSelect } });
+}
+function ZoneGallery({ zone, components, add, Modal: Modal3, Toggle, get, controlled }) {
   const t = useMessages();
   const [ownOpen, setOwnOpen] = React.useState(false);
   const open = controlled ? controlled.open : ownOpen;
@@ -1248,7 +1403,7 @@ function ZoneGallery({ zone, components, add, Modal: Modal2, Toggle, get, contro
     remember(SHOW_FIELDS_KEY, String(value));
   };
   return /* @__PURE__ */ jsx2(
-    Modal2,
+    Modal3,
     {
       open,
       onOpenChange: setOpen,
@@ -1377,46 +1532,708 @@ function Gallery({ zones, editor, docKey, contentType, userId, ...props }) {
   ] }, zone.name)) });
 }
 
-// admin/Settings.tsx
-import * as React2 from "react";
-import { Box as Box2, Button as Button2, Flex as Flex2, Searchbar as Searchbar2, Typography as Typography2 } from "@strapi/design-system";
+// admin/PagePreview.tsx
+import * as React3 from "react";
+import { createPortal } from "react-dom";
 import styled2 from "styled-components";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Box as Box2, Button as Button3, Flex as Flex3, Typography as Typography3 } from "@strapi/design-system";
+import { DescriptionComponentRenderer, useFetchClient, useForm as useForm2, useNotification, useQueryParams, useStrapiApp as useStrapiApp2 } from "@strapi/strapi/admin";
+import { Modal as Dialog } from "@strapi/design-system";
+import { unstable_useContentManagerContext as useContext, unstable_useDocument as useDocument, useDocumentRBAC } from "@strapi/content-manager/strapi-admin";
+
+// admin/FieldEditorModal.tsx
+import * as React2 from "react";
+import { Form, InputRenderer, useForm, useStrapiApp } from "@strapi/strapi/admin";
+import { Button as Button2, Flex as Flex2, Modal, Typography as Typography2 } from "@strapi/design-system";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Actions = ({ onApply, onCancel }) => {
+  const t = useMessages();
+  const value = useForm("BlocksceneFieldEditor", (state) => state.values.value);
+  return /* @__PURE__ */ jsxs2(Flex2, { gap: 2, justifyContent: "flex-end", children: [
+    /* @__PURE__ */ jsx3(Button2, { variant: "tertiary", onClick: onCancel, children: t.cancel }),
+    /* @__PURE__ */ jsx3(Button2, { onClick: () => onApply(value ?? null), "data-testid": "field-editor-apply", children: t.apply })
+  ] });
+};
+function FieldEditorModal({ label, attribute, value, onApply, onCancel }) {
+  const t = useMessages();
+  const customFields = useStrapiApp("BlocksceneFieldEditor", (state) => state.customFields);
+  const [Input, setInput] = React2.useState(void 0);
+  const isCustom = Boolean(attribute?.customField);
+  const isText = attribute?.type === "string" || attribute?.type === "text";
+  React2.useEffect(() => {
+    let active = true;
+    if (!isCustom) {
+      setInput(null);
+      return;
+    }
+    const field = customFields?.get?.(attribute.customField);
+    if (!field?.components?.Input) {
+      setInput(null);
+      return;
+    }
+    Promise.resolve(field.components.Input()).then((mod) => {
+      if (active) setInput(() => mod.default || mod);
+    }).catch(() => {
+      if (active) setInput(null);
+    });
+    return () => {
+      active = false;
+    };
+  }, [attribute, customFields, isCustom]);
+  const supported = isText || isCustom && Input;
+  return /* @__PURE__ */ jsx3(Modal.Root, { open: true, onOpenChange: (open) => {
+    if (!open) onCancel();
+  }, children: /* @__PURE__ */ jsxs2(Modal.Content, { "aria-label": `${t.editText} ${label}`, children: [
+    /* @__PURE__ */ jsx3(Modal.Header, { children: /* @__PURE__ */ jsxs2(Modal.Title, { children: [
+      t.editText,
+      " \xB7 ",
+      label
+    ] }) }),
+    /* @__PURE__ */ jsxs2(Form, { initialValues: { value: value ?? (isText ? "" : null) }, method: "PUT", onSubmit: () => {
+    }, children: [
+      /* @__PURE__ */ jsx3(Modal.Body, { children: /* @__PURE__ */ jsxs2(Flex2, { direction: "column", alignItems: "stretch", gap: 4, "data-testid": "field-editor-modal", children: [
+        /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.editHelp }),
+        isCustom && Input === void 0 && /* @__PURE__ */ jsx3(Typography2, { children: t.loading }),
+        isCustom && Input && /* @__PURE__ */ jsx3(Input, { name: "value", attribute, label, type: attribute.type }),
+        isText && /* @__PURE__ */ jsx3(InputRenderer, { type: attribute.type === "text" ? "text" : "string", name: "value", label }),
+        (isCustom && Input === null || !isCustom && !isText) && /* @__PURE__ */ jsx3(Typography2, { role: "alert", textColor: "danger600", children: t.editUnsupported })
+      ] }) }),
+      /* @__PURE__ */ jsx3(Modal.Footer, { children: supported ? /* @__PURE__ */ jsx3(Actions, { onApply, onCancel }) : /* @__PURE__ */ jsx3(Button2, { variant: "tertiary", onClick: onCancel, children: t.close }) })
+    ] })
+  ] }) });
+}
+
+// admin/preview.mjs
+var import_groups = __toESM(require_groups(), 1);
+var PROTOCOL = "blockscene:page-preview:v1";
+var TEXT_TYPES = ["string", "text"];
+var RICH_TYPES = ["richtext", "blocks", "customField"];
+var EDITABLE_TYPES = [...TEXT_TYPES, ...RICH_TYPES];
+var SCALAR = ["string", "text", "richtext", "email", "enumeration", "integer", "biginteger", "float", "decimal", "boolean", "date", "datetime", "time", "json", "blocks", "uid", "customField"];
+var blockKey = (row) => row && row.id != null ? `${row.__component}#${row.id}` : row && row.__temp_key__ != null ? String(row.__temp_key__) : null;
+function projectRow(row, schema, components, cmsOrigin, depth = 0) {
+  if (!row || !schema || depth > 3) return null;
+  const out = {};
+  for (const [name, attr] of Object.entries(schema.attributes || {})) {
+    const value = row[name];
+    if (attr.type === "password" || attr.type === "relation" || attr.private) continue;
+    if (SCALAR.includes(attr.type)) {
+      if (value !== void 0) out[name] = typeof value === "string" ? value.slice(0, 2e5) : value;
+    } else if (attr.type === "media") {
+      const files = (attr.multiple ? Array.isArray(value) ? value : [] : value ? [value] : []).map((file) => projectMedia(file, cmsOrigin)).filter(Boolean);
+      out[name] = attr.multiple ? files : files[0] || null;
+    } else if (attr.type === "component") {
+      const child = components?.[attr.component];
+      out[name] = attr.repeatable ? (Array.isArray(value) ? value : []).slice(0, 100).map((item, i) => ({ ...projectRow(item, child, components, cmsOrigin, depth + 1), __key: blockKey(item) ?? String(i) })) : projectRow(value, child, components, cmsOrigin, depth + 1);
+    }
+  }
+  return out;
+}
+function projectMedia(file, cmsOrigin) {
+  if (!file || typeof file.url !== "string") return null;
+  try {
+    const url = new URL(file.url, cmsOrigin);
+    if (!["http:", "https:"].includes(url.protocol)) return null;
+    return { url: url.href, alternativeText: String(file.alternativeText || ""), caption: String(file.caption || ""), width: Number(file.width) || 0, height: Number(file.height) || 0, mime: String(file.mime || "") };
+  } catch {
+    return null;
+  }
+}
+function resolveField(uid, field, components) {
+  if (typeof field !== "string" || field.length > 200) return null;
+  let schema = components?.[uid];
+  const parts = field.split(".");
+  for (let i = 0; i < parts.length; i++) {
+    const attr = schema?.attributes?.[parts[i]];
+    if (!attr || attr.private === true) return null;
+    if (i === parts.length - 1) return attr;
+    if (attr.type !== "component") return null;
+    if (attr.repeatable) {
+      if (!/^\d{1,3}$/.test(parts[i + 1] || "")) return null;
+      i++;
+    }
+    schema = components?.[attr.component];
+  }
+  return null;
+}
+function editableFields(uid, row, components) {
+  const schema = components?.[uid];
+  const out = [];
+  const SYSTEM = ["id", "documentId", "locale", "createdAt", "updatedAt", "publishedAt", "createdBy", "updatedBy", "localizations", "__component", "__temp_key__"];
+  const push = (name, attr, label) => {
+    if (!SYSTEM.includes(name.split(".").pop()) && attr?.private !== true && EDITABLE_TYPES.includes(attr?.type)) out.push({ name, type: attr.type, label });
+  };
+  for (const [name, attr] of Object.entries(schema?.attributes || {})) {
+    if (attr.type === "component" && attr.repeatable) {
+      (Array.isArray(row?.[name]) ? row[name] : []).slice(0, 50).forEach((_, i) => {
+        for (const [child, childAttr] of Object.entries(components?.[attr.component]?.attributes || {})) push(`${name}.${i}.${child}`, childAttr, `${name} ${i + 1} \xB7 ${child}`);
+      });
+    } else push(name, attr, name);
+  }
+  return out;
+}
+function mediaFields(uid, row, components) {
+  const media = {};
+  for (const [name, attr] of Object.entries(components?.[uid]?.attributes || {})) {
+    if (attr.type === "media" && attr.private !== true) media[name] = { required: attr.required === true, multiple: attr.multiple === true, present: attr.multiple ? Array.isArray(row?.[name]) && row[name].length > 0 : Boolean(row?.[name]) };
+  }
+  return media;
+}
+function projectPage(rows, components, cmsOrigin) {
+  return (Array.isArray(rows) ? rows : []).slice(0, 200).flatMap((row, index) => {
+    const uid = row?.__component;
+    const key = blockKey(row);
+    const schema = components?.[uid];
+    if (!uid || key == null || !schema) return [];
+    return [{
+      key,
+      index,
+      uid,
+      label: schema.info?.displayName || uid,
+      data: projectRow(row, schema, components, cmsOrigin),
+      fields: editableFields(uid, row, components),
+      media: mediaFields(uid, row, components)
+    }];
+  });
+}
+var validateFocus = (uid, field, components) => {
+  const attr = resolveField(uid, field, components);
+  return attr && EDITABLE_TYPES.includes(attr.type) ? attr : null;
+};
+function validateEdit(uid, field, value, components) {
+  if (typeof value !== "string" || value.length > 5e3) return null;
+  const attr = resolveField(uid, field, components);
+  return attr && TEXT_TYPES.includes(attr.type) ? value.replace(/[\r\n]+/g, " ") : null;
+}
+var mediaAttribute = (uid, field, components) => {
+  const attr = resolveField(uid, field, components);
+  return attr?.type === "media" ? attr : null;
+};
+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;
+}
+function insertIndex(rows, after) {
+  if (after === null || after === void 0) return 0;
+  const index = (Array.isArray(rows) ? rows : []).findIndex((row) => blockKey(row) === String(after));
+  return index < 0 ? -1 : index + 1;
+}
+
+// admin/PagePreview.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var MODE_KEY = "blockscene:page-mode";
+var RATIO_KEY = "blockscene:page-split-ratio";
+var MIN_PANE = 360;
+var MIN_FORM = 520;
+var NARROW = 960;
+var KEY_STEP = 32;
+var MODAL_TYPES = ["customField", "string", "text"];
+var read = (key) => {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+var write = (key, value) => {
+  try {
+    localStorage.setItem(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 Pane = styled2.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};
+  box-shadow: ${({ theme }) => theme.shadows.popupShadow};
+`;
+function useMainRect() {
+  const [rect, setRect] = React3.useState(() => ({ left: 0, width: window.innerWidth }));
+  React3.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 });
+    };
+    measure();
+    const observer = main && "ResizeObserver" in window ? new ResizeObserver(measure) : null;
+    if (main) observer?.observe(main);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, []);
+  return rect;
+}
+var Handle = styled2.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; }
+`;
+var Frame2 = styled2.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; }
+body.bp-split [data-bp-panels] { width: 100%; }
+body.bp-split [data-bp-panels] > div { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 1.2rem; }
+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;
+  if (!item?.parentElement) return;
+  item.dataset.bpPanels = "";
+  item.parentElement.dataset.bpGrid = "";
+};
+function usePreviewBase(override, model, documentId, locale) {
+  const { get } = useFetchClient();
+  const [native, setNative] = React3.useState(null);
+  React3.useEffect(() => {
+    if (override || !model) return;
+    let active = true;
+    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`);
+    }).catch(() => {
+      if (active) setNative(null);
+    });
+    return () => {
+      active = false;
+    };
+  }, [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__ */ jsxs3(Dialog.Root, { open, onOpenChange, children: [
+    trigger && /* @__PURE__ */ jsx4(Dialog.Trigger, { children: trigger }),
+    /* @__PURE__ */ jsxs3(Dialog.Content, { children: [
+      /* @__PURE__ */ jsx4(Dialog.Header, { children: /* @__PURE__ */ jsx4(Dialog.Title, { children: title }) }),
+      /* @__PURE__ */ jsx4(Dialog.Body, { children })
+    ] })
+  ] });
+}
+var ACTION_TYPES = ["update", "publish"];
+var nativeButtons = () => document.querySelectorAll('#main-content button:not([data-testid="page-preview-pane"] button)');
+function ToolbarActions({ model, collectionType, documentId, locale }) {
+  const plugins = useStrapiApp2("BlocksceneToolbar", (state) => state.plugins);
+  const [{ query }] = useQueryParams();
+  const { document: doc, meta } = useDocument({ model, collectionType, documentId, params: { locale } }, { skip: !documentId });
+  const { toggleNotification } = 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 run = async (action, event) => {
+    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 });
+  };
+  const typeOf = (action) => action.type || descriptions.find((d) => typeof action.id === "string" && action.id.startsWith(`${d.name || d.displayName}-`))?.type;
+  return /* @__PURE__ */ jsx4(DescriptionComponentRenderer, { props, descriptions, children: (actions) => /* @__PURE__ */ jsx4(Flex3, { 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__ */ jsx4("span", { title: reason, children: /* @__PURE__ */ jsx4(Button3, { 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 }) {
+  const t = useMessages();
+  const c = useContext();
+  const rbac = useDocumentRBAC("BlockscenePagePreview", (state) => state);
+  const values = useForm2("BlockscenePagePreview", (state) => state.values);
+  const onChange = useForm2("BlockscenePagePreview", (state) => state.onChange);
+  const components = useStrapiApp2("BlockscenePagePreview", (state) => state.components);
+  const MediaLibraryDialog = components?.["media-library"];
+  const addFieldRow = useForm2("BlockscenePagePreview", (state) => state.addFieldRow);
+  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 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 v = read(MODE_KEY);
+    return v === "split" || v === "preview" ? v : editor?.previewMode || "form";
+  });
+  const setMode = (next) => {
+    setModeState(next);
+    write(MODE_KEY, next);
+  };
+  const [ratio, setRatio] = React3.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(() => {
+    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 { get } = useFetchClient();
+  const { toggleNotification } = 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 url = base ? new URL(base) : null;
+  url?.searchParams.set("channel", channel);
+  const origin = url?.origin || "";
+  const narrow = vw < NARROW;
+  const paneWidth = clampWidth(ratio * vw, vw);
+  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);
+  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);
+  }, [channel, origin]);
+  const indexOf = (key) => latest.current.findIndex((row) => blockKey(row) === key);
+  const path = (key, field) => `${zone}.${indexOf(key)}.${field}`;
+  React3.useEffect(() => {
+    if (resizable) markLayout(anchor.current);
+    document.body.classList.toggle("bp-split", resizable);
+    document.documentElement.style.setProperty("--bp-pane", `${paneWidth}px`);
+    return () => document.body.classList.remove("bp-split");
+  }, [resizable, paneWidth]);
+  const applyWidth = (width, persist) => {
+    const next = clampWidth(width, vw) / vw;
+    setRatio(next);
+    if (persist) write(RATIO_KEY, String(next));
+  };
+  const focusField = (index, field) => {
+    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();
+    const parts = field.split(".");
+    const escaped = CSS.escape(`${zone}.${index}.${field}`);
+    let tries = 0;
+    const timer = setInterval(() => {
+      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 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}"]`);
+      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;
+      const editable = container?.matches(INPUT) ? container : container?.querySelector(INPUT);
+      if (!editable) 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(() => {
+    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 { mode: mode2, canEdit: canEdit2, zoneLabel: zoneLabel2, components: components2, setMode: setMode2, onChange: onChange2 } = live.current;
+      if (is("ready")) {
+        clearTimeout(timeout);
+        setReady(true);
+        setFailed(false);
+        send();
+        return;
+      }
+      if (is("insert") && canEdit2) {
+        const after = event.data.after === null || event.data.after === void 0 ? null : String(event.data.after);
+        if (after !== null && insertIndex(latest.current, after) < 0) return;
+        if (latest.current.length >= (zoneAttr?.max ?? Infinity)) {
+          toggleNotification({ type: "info", message: t.zoneFull });
+          return;
+        }
+        setInserting({ after });
+        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);
+        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);
+        if (next) onChange2(zone, next);
+        return;
+      }
+      if (is("insert-group") && canEdit2 && groups) {
+        const after = event.data.after === null || event.data.after === void 0 ? null : String(event.data.after);
+        const index2 = insertIndex(latest.current, after);
+        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 (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);
+        return;
+      }
+      const key = typeof event.data?.key === "string" ? event.data.key : "";
+      const index = key ? indexOf(key) : -1;
+      const uid = index >= 0 ? latest.current[index]?.__component : "";
+      if (index < 0) return;
+      if (is("select")) {
+        const list = findZoneList(zoneLabel2);
+        const item = list?.querySelectorAll(":scope > li")[index];
+        const header = list ? toggles(list)[index] : null;
+        if (header?.getAttribute("aria-expanded") === "false") header.click();
+        item?.scrollIntoView({ block: "center", behavior: "smooth" });
+        if (item) {
+          item.style.outline = "2px solid #4945ff";
+          setTimeout(() => {
+            item.style.outline = "";
+          }, 1500);
+        }
+        if (mode2 === "preview") setMode2("split");
+        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) });
+        else focusField(index, event.data.field);
+      } else if (is("media") && canEdit2) {
+        const attr = mediaAttribute(uid, event.data.field, components2);
+        if (attr) setPicking({ key, field: event.data.field, attr });
+      } else if (is("media-remove") && canEdit2) {
+        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);
+        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);
+    return () => {
+      clearTimeout(timeout);
+      window.removeEventListener("message", receive);
+    };
+  }, [active, attempt, channel, origin, groups]);
+  React3.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__ */ jsx4(Flex3, { gap: 1, wrap: "wrap", "data-testid": "page-preview-modes", role: "group", "aria-label": t.modeGroup, children: modes.map(([value, label]) => /* @__PURE__ */ jsx4(Button3, { 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 };
+    if (event.key in map) {
+      event.preventDefault();
+      applyWidth(map[event.key], true);
+    }
+  };
+  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);
+  };
+  const diagnostics = problems.length > 0 && /* @__PURE__ */ jsx4(Box2, { role: "alert", "data-testid": "page-preview-diagnostics", padding: 2, background: "danger100", hasRadius: true, children: /* @__PURE__ */ jsxs3("details", { children: [
+    /* @__PURE__ */ jsx4("summary", { style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx4(Typography3, { variant: "pi", fontWeight: "bold", textColor: "danger700", children: t.f("diagSummary", { count: problems.length }) }) }),
+    /* @__PURE__ */ jsx4("ul", { style: { margin: "6px 0 0 16px", padding: 0 }, children: problems.map((error) => /* @__PURE__ */ jsxs3("li", { style: { marginBottom: 6 }, children: [
+      /* @__PURE__ */ jsx4(Typography3, { 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__ */ jsx4(Box2, { paddingTop: 1, children: /* @__PURE__ */ jsx4(Button3, { 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__ */ jsx4(Typography3, { variant: "pi", textColor: "neutral600", children: t.diagStrayHint })
+    ] }, `${error.code}-${error.index}`)) })
+  ] }) });
+  return /* @__PURE__ */ jsxs3(Flex3, { direction: "column", alignItems: "stretch", gap: 2, ref: anchor, children: [
+    switcher,
+    diagnostics,
+    /* @__PURE__ */ jsx4(Typography3, { variant: "pi", textColor: "neutral600", children: url ? t.previewHelp : t.previewNoUrl }),
+    active && createPortal(
+      /* @__PURE__ */ jsxs3(
+        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 },
+          children: [
+            /* @__PURE__ */ jsx4("style", { children: SPLIT_STYLE }),
+            resizable && /* @__PURE__ */ jsx4(
+              Handle,
+              {
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": t.resize,
+                tabIndex: 0,
+                "aria-valuemin": MIN_PANE,
+                "aria-valuemax": Math.max(MIN_PANE, vw - MIN_FORM),
+                "aria-valuenow": paneWidth,
+                "data-testid": "page-preview-resizer",
+                "data-dragging": dragging,
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  e.currentTarget.setPointerCapture(e.pointerId);
+                  setDragging(true);
+                },
+                onPointerMove: (e) => {
+                  if (dragging) applyWidth(main.left + main.width - e.clientX, false);
+                },
+                onPointerUp: (e) => {
+                  if (!dragging) return;
+                  setDragging(false);
+                  e.currentTarget.releasePointerCapture(e.pointerId);
+                  applyWidth(main.left + main.width - e.clientX, true);
+                },
+                onPointerCancel: () => setDragging(false),
+                onKeyDown: onKey
+              }
+            ),
+            /* @__PURE__ */ jsxs3(Flex3, { padding: 2, gap: 2, justifyContent: "space-between", alignItems: "center", background: "neutral100", wrap: "wrap", style: { position: "sticky", top: 0, zIndex: 2 }, children: [
+              switcher,
+              /* @__PURE__ */ jsxs3(Flex3, { gap: 2, alignItems: "center", wrap: "wrap", style: { marginLeft: "auto" }, children: [
+                /* @__PURE__ */ jsx4(Typography3, { variant: "pi", role: "status", textColor: "neutral600", children: failed ? t.previewFailed : ready ? t.previewReady : t.previewLoading }),
+                failed && /* @__PURE__ */ jsx4(Button3, { size: "S", variant: "secondary", onClick: retry, children: t.retry }),
+                /* @__PURE__ */ jsx4(ToolbarActions, { model: c.model, collectionType: c.collectionType, documentId: c.isCreatingEntry ? void 0 : c.id, locale: c.form?.initialValues?.locale })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx4(
+              Frame2,
+              {
+                ref: iframe,
+                title: t.previewPane,
+                src: url.href,
+                sandbox: "allow-scripts allow-same-origin",
+                referrerPolicy: "no-referrer",
+                onLoad: () => {
+                  loaded.current = true;
+                },
+                style: dragging ? { pointerEvents: "none" } : void 0
+              },
+              attempt
+            )
+          ]
+        }
+      ),
+      document.body
+    ),
+    inserting && zoneAttr && /* @__PURE__ */ jsx4(
+      PickerModal,
+      {
+        zone: { name: zone, components: zoneAttr.components || [], max: zoneAttr.max },
+        components: c.components,
+        Modal: PickerDialog,
+        Toggle,
+        get,
+        open: true,
+        onOpenChange: (open) => {
+          if (!open) setInserting(null);
+        },
+        onSelect: (uid) => {
+          const index = insertIndex(latest.current, inserting.after);
+          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 });
+            return;
+          }
+          addFieldRow(zone, { ...componentDefaults(c.components[uid], c.components), __component: uid }, index);
+          if (close) addFieldRow(zone, { __component: close }, index + 1);
+        }
+      }
+    ),
+    editing && /* @__PURE__ */ jsx4(
+      FieldEditorModal,
+      {
+        label: editing.label,
+        attribute: editing.attr,
+        value: editing.value,
+        onCancel: () => setEditing(null),
+        onApply: (value) => {
+          const index = indexOf(editing.key);
+          setEditing(null);
+          if (index >= 0) onChange(`${zone}.${index}.${editing.field}`, value);
+        }
+      }
+    ),
+    picking && MediaLibraryDialog && /* @__PURE__ */ jsx4(
+      MediaLibraryDialog,
+      {
+        allowedTypes: picking.attr.allowedTypes || ["images"],
+        multiple: picking.attr.multiple === true,
+        onClose: () => setPicking(null),
+        onSelectAssets: (assets) => {
+          const index = indexOf(picking.key);
+          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]);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx4(Box2, { 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 : "" })
+  ] });
+}
+
+// admin/Settings.tsx
+import * as React4 from "react";
+import { Box as Box3, Button as Button4, Flex as Flex4, Searchbar as Searchbar2, Typography as Typography4 } from "@strapi/design-system";
+import styled3 from "styled-components";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } 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`
+var Grid = styled3.div` display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; `;
+var Card2 = styled3.div`
   display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 4px;
   border: 1px solid ${({ theme }) => theme.colors.neutral200}; background: ${({ theme }) => theme.colors.neutral0};
 `;
-var Bar = styled2.div`
+var Bar = styled3.div`
   position: fixed; top: 0; z-index: 4; padding: 12px 32px;
   background: ${({ theme }) => theme.colors.neutral100}; border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
   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 read = () => {
+function useMainRect2(anchor) {
+  const [rect, setRect] = React4.useState({ left: 0, width: 0 });
+  React4.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;
       const r = (host || document.querySelector("main"))?.getBoundingClientRect();
       if (r) setRect({ left: Math.round(r.left), width: Math.round(r.width) });
     };
-    read();
-    window.addEventListener("resize", read);
-    return () => window.removeEventListener("resize", read);
+    read2();
+    window.addEventListener("resize", read2);
+    return () => window.removeEventListener("resize", read2);
   });
   return rect;
 }
-var Swatches = styled2.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; `;
-var Label = styled2.label` display: flex; flex-direction: column; gap: 4px; font-size: 12px; `;
+var Swatches = styled3.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; `;
+var Label = styled3.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__ */ jsxs4(Label, { children: [
+    /* @__PURE__ */ jsx5(Typography4, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: label }),
+    /* @__PURE__ */ jsxs4(Flex4, { gap: 2, children: [
+      /* @__PURE__ */ jsx5("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__ */ jsx5(
         "input",
         {
           name,
@@ -1432,22 +2249,22 @@ function ColorField({ name, label, value, onChange, disabled }) {
   ] });
 }
 var permissions = { read: [{ action: "plugin::blockscene.settings.read", subject: null }], update: [{ action: "plugin::blockscene.settings.update", subject: null }] };
-function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: MediaPicker2, ToggleField: ToggleField2, SelectField: SelectField2, TextField, previewSupported = false }) {
+function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: MediaPicker2, ToggleField: ToggleField2, SelectField: SelectField2, TextField: TextField2, previewSupported = false }) {
   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] = 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(() => {
     if (!canRead || isLoading) return;
     let active = true;
     Promise.all([get("/blockscene/settings"), get("/blockscene/catalog")]).then(([s, c]) => {
@@ -1495,35 +2312,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 main = useMainRect(header);
-  React2.useEffect(() => {
+  const header = React4.useRef(null);
+  const [floating, setFloating] = React4.useState(false);
+  const main = useMainRect2(header);
+  React4.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__ */ jsxs4(Flex4, { gap: 3, alignItems: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ jsx5(Typography4, { 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__ */ jsx5(Button4, { 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__ */ jsx5(Box3, { padding: 8, background: "neutral100", children: /* @__PURE__ */ jsxs4(Flex4, { direction: "column", alignItems: "stretch", gap: 5, children: [
+    /* @__PURE__ */ jsx5("div", { ref: header, children: /* @__PURE__ */ jsxs4(Flex4, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx5(Typography4, { 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__ */ jsx5(Bar, { style: { left: main.left, width: main.width }, "data-testid": "settings-floating-bar", children: /* @__PURE__ */ jsxs4(Flex4, { gap: 4, alignItems: "center", justifyContent: "space-between", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx5(Typography4, { 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__ */ jsx5(Typography4, { textColor: "neutral600", children: t.settingsIntro }),
+    isLoading ? /* @__PURE__ */ jsx5(Typography4, { children: "\u2026" }) : !canRead ? /* @__PURE__ */ jsx5(Typography4, { role: "alert", children: t.denied }) : failed ? /* @__PURE__ */ jsx5(Typography4, { role: "alert", children: t.loadFailed }) : !settings || !catalog ? /* @__PURE__ */ jsx5(Typography4, { children: t.loading }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+      data.disabled && /* @__PURE__ */ jsx5(Box3, { padding: 4, background: "warning100", hasRadius: true, children: /* @__PURE__ */ jsx5(Typography4, { role: "alert", textColor: "warning700", children: t.disabledByServer }) }),
+      /* @__PURE__ */ jsx5(Box3, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs4(Flex4, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ jsx5(Typography4, { variant: "beta", tag: "h2", children: t.palette }),
+        /* @__PURE__ */ jsx5(Swatches, { children: Object.keys(DEFAULT_PALETTE).map((key) => /* @__PURE__ */ jsx5(
           ColorField,
           {
             name: `palette-${key}`,
@@ -1537,33 +2354,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__ */ jsx5(Typography4, { role: "alert", textColor: "danger600", children: t.invalidColor }),
+        /* @__PURE__ */ jsx5(Typography4, { variant: "pi", textColor: "neutral600", children: t.previewLabel }),
+        /* @__PURE__ */ jsx5(Swatches, { "data-testid": "palette-preview", children: TEMPLATES.map((template) => /* @__PURE__ */ jsxs4(Flex4, { direction: "column", gap: 1, children: [
+          /* @__PURE__ */ jsx5(Box3, { style: { aspectRatio: "16 / 9", overflow: "hidden" }, hasRadius: true, children: /* @__PURE__ */ jsx5(Wireframe, { template, palette: settings.palette }) }),
+          /* @__PURE__ */ jsx5(Typography4, { 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__ */ jsx5(Flex4, { children: /* @__PURE__ */ jsx5(Button4, { 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__ */ jsx5(Box3, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs4(Flex4, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ jsx5(Typography4, { variant: "beta", tag: "h2", children: t.editor }),
+        /* @__PURE__ */ jsx5(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__ */ jsx5(Typography4, { variant: "pi", textColor: "neutral600", children: t.enabledHelp }),
+        /* @__PURE__ */ jsx5(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__ */ jsx5(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__ */ jsx5(
           SelectField2,
           {
             name: "editor-initialState",
@@ -1577,10 +2394,10 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
             })
           }
         ),
-        /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.rememberHelp }),
-        previewSupported ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(
-            TextField,
+        /* @__PURE__ */ jsx5(Typography4, { variant: "pi", textColor: "neutral600", children: t.rememberHelp }),
+        previewSupported ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx5(
+            TextField2,
             {
               name: "editor-previewUrl",
               label: t.previewUrl,
@@ -1593,8 +2410,8 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
               })
             }
           ),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewUrlHelp }),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx5(Typography4, { variant: "pi", textColor: "neutral600", children: t.previewUrlHelp }),
+          /* @__PURE__ */ jsx5(
             SelectField2,
             {
               name: "editor-previewMode",
@@ -1608,26 +2425,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__ */ jsx5(Typography4, { variant: "pi", textColor: "neutral600", children: t.previewModeHelp }),
+          data.blockPreviewAvailable && /* @__PURE__ */ jsxs4(Fragment, { children: [
+            /* @__PURE__ */ jsx5(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__ */ jsx5(Typography4, { variant: "pi", textColor: "neutral600", children: t.blockPreviewInFormHelp })
           ] })
-        ] }) : /* @__PURE__ */ jsx3(Typography2, { variant: "pi", textColor: "neutral600", children: t.previewV4 })
+        ] }) : /* @__PURE__ */ jsx5(Typography4, { 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__ */ jsx5(Box3, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxs4(Flex4, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ jsx5(Typography4, { variant: "beta", tag: "h2", children: t.components }),
+        /* @__PURE__ */ jsx5(Searchbar2, { name: "component-filter", value: filter, placeholder: t.filter, clearLabel: t.clear, onClear: () => setFilter(""), onChange: (e) => setFilter(e.target.value), children: t.filter }),
+        /* @__PURE__ */ jsx5(Typography4, { variant: "pi", textColor: "neutral600", "data-testid": "components-count", children: t.f("countAll", { count: components.length }) }),
+        /* @__PURE__ */ jsx5(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__ */ jsxs4(Card2, { "data-testid": `settings-${component.uid}`, children: [
+            /* @__PURE__ */ jsx5(
               Thumb,
               {
                 candidates,
@@ -1638,23 +2455,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__ */ jsxs4(Flex4, { direction: "column", alignItems: "flex-start", gap: 2, children: [
+              /* @__PURE__ */ jsx5(Typography4, { fontWeight: "bold", textColor: "neutral800", children: component.displayName }),
+              /* @__PURE__ */ jsxs4(Typography4, { variant: "pi", textColor: "neutral600", children: [
                 component.uid,
                 " \xB7 ",
                 component.category
               ] }),
-              /* @__PURE__ */ jsxs2(Typography2, { variant: "pi", "data-testid": `source-${component.uid}`, children: [
+              /* @__PURE__ */ jsxs4(Typography4, { 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__ */ jsx5(Typography4, { variant: "pi", role: "alert", textColor: "danger600", children: t.brokenMedia }),
+              /* @__PURE__ */ jsxs4(Flex4, { gap: 2, wrap: "wrap", children: [
+                /* @__PURE__ */ jsx5(Button4, { variant: "secondary", size: "S", disabled: !canUpdate || saving, onClick: () => setPicking(component.uid), children: entry.mediaId ? t.replace : t.choose }),
+                entry.mediaId && /* @__PURE__ */ jsx5(Button4, { 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 +2484,7 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
                   });
                 }, children: t.useAutomatic })
               ] }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx5(
                 SelectField2,
                 {
                   name: `template-${component.uid}`,
@@ -1685,7 +2502,7 @@ function Settings({ useClient, usePermissions: usePermissions2, MediaPicker: Med
           ] }, component.uid);
         }) })
       ] }) }),
-      picking && /* @__PURE__ */ jsx3(MediaPicker2, { onClose: () => setPicking(null), onSelect: (asset) => {
+      picking && /* @__PURE__ */ jsx5(MediaPicker2, { onClose: () => setPicking(null), onSelect: (asset) => {
         const uid = picking;
         setPicking(null);
         if (!asset?.id) return;
@@ -1712,10 +2529,10 @@ function register(app, Component) {
 }
 
 // admin/catalog.ts
-import * as React3 from "react";
+import * as React5 from "react";
 function useCatalog(get) {
-  const [catalog, setCatalog] = React3.useState(null);
-  React3.useEffect(() => {
+  const [catalog, setCatalog] = React5.useState(null);
+  React5.useEffect(() => {
     let active = true;
     get("/blockscene/catalog").then(({ data }) => {
       if (active) setCatalog(data);
@@ -1729,80 +2546,86 @@ function useCatalog(get) {
   return catalog;
 }
 
-// admin/strapi4.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function Modal({ open, onOpenChange, trigger, title, children }) {
-  const id = React4.useId();
-  return /* @__PURE__ */ jsxs3(Fragment2, { 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 })
+// admin/strapi5.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Modal2({ open, onOpenChange, trigger, title, children }) {
+  return /* @__PURE__ */ jsxs5(Dialog2.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx6(Dialog2.Trigger, { children: trigger }),
+    /* @__PURE__ */ jsxs5(Dialog2.Content, { style: { width: "80vw", maxWidth: "80vw" }, children: [
+      /* @__PURE__ */ jsx6(Dialog2.Header, { children: /* @__PURE__ */ jsx6(Dialog2.Title, { children: title }) }),
+      /* @__PURE__ */ jsx6(Dialog2.Body, { children })
     ] })
   ] });
 }
-function Picker() {
-  const c = useCMEditViewDataManager();
-  const { get } = useFetchClient();
+function Panel() {
+  const c = useContext2();
+  const rbac = useDocumentRBAC2("Blockscene", (state) => state);
+  const { get } = useFetchClient2();
+  const t = useMessages();
+  const user = useAuth("Blockscene", (state) => state.user);
+  const formValues = useForm3("Blockscene", (state) => state.values);
   const catalog = useCatalog(get);
-  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 creating = !c.id && !c.form?.initialValues?.id && !c.form?.initialValues?.documentId;
+  const allowed = (creating ? rbac.canCreateFields : rbac.canUpdateFields) || [];
+  const fields = c.layout?.edit?.layout?.flat(3) || [];
+  const zones = editableZones(
+    c.contentType,
+    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 }));
   const add = (zone, uid) => {
+    const values = formValues ?? c.form.values;
     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 (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);
+    if (close) c.form.addFieldRow(zone.name, { __component: close }, at + 1);
     return true;
   };
-  if (!catalog?.editor?.enabled) return null;
-  const docKey = `${c.slug}:${c.isCreatingEntry ? "new" : c.initialData?.id}:${c.initialData?.locale || ""}`;
-  return /* @__PURE__ */ jsx4(
-    Gallery,
-    {
-      zones,
-      components,
-      add,
-      Modal,
-      Toggle: ToggleField,
-      get,
-      editor: catalog.editor,
-      docKey,
-      contentType: c.slug,
-      userId: auth.getUserInfo?.()?.id
-    }
-  );
+  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__ */ jsxs5(Flex5, { direction: "column", alignItems: "stretch", gap: 4, children: [
+    /* @__PURE__ */ jsx6(Gallery, { zones, components: c.components, add, Modal: Modal2, Toggle: ToggleField, get, editor: catalog.editor, docKey, contentType: c.model, userId: user?.id }),
+    /* @__PURE__ */ jsx6(PagePreview, { editor: catalog.editor, groups: catalog.groups || null, Toggle: ToggleField })
+  ] }) };
 }
-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__ */ jsxs5(Flex5, { gap: 3, children: [
+  /* @__PURE__ */ jsx6(Switch, { name, "aria-label": label, checked: Boolean(value), disabled, onCheckedChange: onChange }),
+  /* @__PURE__ */ jsx6(Typography5, { children: label })
+] });
+var TextField = ({ name, label, value, onChange, disabled, placeholder }) => /* @__PURE__ */ jsxs5(Field.Root, { name, children: [
+  /* @__PURE__ */ jsx6(Field.Label, { children: label }),
+  /* @__PURE__ */ jsx6(TextInput, { name, value, disabled, placeholder, onChange: (e) => onChange(e.target.value) })
+] });
+var SelectField = ({ name, label, value, onChange, disabled, options }) => /* @__PURE__ */ jsxs5(Field.Root, { name, children: [
+  /* @__PURE__ */ jsx6(Field.Label, { children: label }),
+  /* @__PURE__ */ jsx6(SingleSelect2, { value, disabled, onChange: (v) => onChange(String(v)), children: options.map((o) => /* @__PURE__ */ jsx6(SingleSelectOption2, { value: o.value, children: o.label }, o.value)) })
 ] });
-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)) });
 function MediaPicker({ onClose, onSelect }) {
-  const { components } = useLibrary();
-  const Dialog = components?.["media-library"];
-  if (!Dialog) {
-    onClose();
-    return null;
-  }
-  return /* @__PURE__ */ jsx4(Dialog, { onClose, allowedTypes: ["images"], onSelectAssets: (assets) => onSelect(assets?.[0]) });
+  const components = useStrapiApp3("Blockscene", (state) => state.components);
+  const Dialog3 = components?.["media-library"];
+  React6.useEffect(() => {
+    if (!Dialog3) onClose();
+  }, [Dialog3, onClose]);
+  if (!Dialog3) return null;
+  return /* @__PURE__ */ jsx6(Dialog3, { onClose, allowedTypes: ["images"], multiple: false, onSelectAssets: (assets) => onSelect(assets?.[0]) });
 }
 function usePermissions() {
   const { allowedActions, isLoading } = useRBAC(permissions);
   return { canRead: allowedActions.canRead, canUpdate: allowedActions.canUpdate, isLoading };
 }
-var SettingsPage = () => /* @__PURE__ */ jsx4(Settings, { useClient: useFetchClient, usePermissions, MediaPicker, ToggleField, SelectField, previewSupported: false });
-var strapi4_default = {
+var SettingsPage = () => /* @__PURE__ */ jsx6(Settings, { useClient: useFetchClient2, usePermissions, MediaPicker, ToggleField, SelectField, TextField, previewSupported: true });
+var strapi5_default = {
   register(app) {
     register(app, SettingsPage);
     app.registerPlugin({ id: "blockscene", name: "Blockscene" });
   },
   registerTrads,
   bootstrap(app) {
-    app.injectContentManagerComponent("editView", "right-links", { name: "blockscene", Component: Picker });
+    app.getPlugin("content-manager").apis.addEditViewSidePanel([Panel]);
   }
 };
 export {
-  strapi4_default as default
+  strapi5_default as default
 };