@aduptive/strapi-blockscene 2.0.0-alpha.10 → 2.0.0-alpha.11

package/README.md

@@ -96,8 +96,9 @@ The modal is a block browser (80vw wide):
   remembered per browser). Active values show as removable chips with "Clear
   all"; the empty state offers a reset.
 - **Cards**, grouped by typology: facet badges (IMAGE, VIDEO, GALLERY, RICH
-  TEXT, LIST, DYNAMIC, FORM), a star and a hover "+" that inserts at once.
-- A click **magnifies** the block: the card grows into a large panel over the
+  TEXT, LIST, DYNAMIC, FORM), a star and an always-visible magnifying glass.
+  Clicking the card inserts it immediately; the magnifying glass opens its preview.
+- The preview **magnifies** the block: the card grows into a large panel over the
   grid (sidebar and top bar stay usable, the grid dims underneath) and shrinks
   back into its card on close (close button, Esc or a click on the dimmed
   grid). The animation is transform/opacity only, about 250 ms, and is skipped
@@ -105,7 +106,7 @@ The modal is a block browser (80vw wide):
   with Fit / Mobile / Tablet / Desktop widths (scaled to fit, as in the page
   preview) and a compact strip: label, uid, description, badges, fields (on
   demand), the variant choice (see [Insert variants](#insert-variants)), star
-  and Insert. Double click, "+" or Enter on a focused card inserts without it
+  and Insert. Clicking or pressing Enter on a focused card inserts without it
   (the first variant, when the block has variants).
 
 The magnified preview shows the card's thumbnail at once and fades the live

package/dist/admin.cjs

@@ -48,6 +48,10 @@ var require_groups = __commonJS({
       return Object.keys(out).length ? out : null;
     }
     var uidOf = (row) => typeof row?.__component === "string" ? row.__component : "";
+    var invalidComponents = (rows, allowed) => {
+      const uids = new Set(Array.isArray(allowed) ? allowed : []);
+      return (Array.isArray(rows) ? rows : []).flatMap((row, index) => uidOf(row) && !uids.has(uidOf(row)) ? [{ index, uid: uidOf(row) }] : []);
+    };
     var isOpener2 = (row, g) => Boolean(g) && Object.prototype.hasOwnProperty.call(g, uidOf(row));
     var isClose2 = (row, g) => Boolean(g) && Object.values(g).includes(uidOf(row));
     var blockKey3 = (row) => row && row.id != null ? `${row.__component}#${row.id}` : row && row.__temp_key__ != null ? String(row.__temp_key__) : null;
@@ -154,6 +158,7 @@ var require_groups = __commonJS({
     module2.exports = {
       safeGroups: safeGroups2,
       validateGroups: validateGroups3,
+      invalidComponents,
       groupRange: groupRange3,
       groupRows: groupRows2,
       topLevelRanges: topLevelRanges2,
@@ -1044,7 +1049,7 @@ var en_default = {
   blockPreview: "Live block preview",
   livePreviewFailed: "Live preview unavailable, showing the image.",
   blockPreviewUrl: "Block preview URL",
-  blockPreviewUrlHelp: "Optional. A page of your frontend that renders one block on its own, shown large when a gallery card is clicked, e.g. http://localhost:3026/pt-BR/block-preview/'{name}'/'{variant}'. Placeholders: '{uid}', '{name}' (after the dot), '{category}' (before the dot), '{variant}' (default), '{locale}'. Empty uses the page preview route when there is one, else the image.",
+  blockPreviewUrlHelp: "Optional. A page of your frontend that renders one block on its own, shown large from a gallery card's magnifying glass, e.g. http://localhost:3026/pt-BR/block-preview/'{name}'/'{variant}'. Placeholders: '{uid}', '{name}' (after the dot), '{category}' (before the dot), '{variant}' (default), '{locale}'. Empty uses the page preview route when there is one, else the image.",
   rowActions: "Actions for {label}",
   selectBlock: "Select {label}",
   hiddenBadge: "Hidden",
@@ -1465,7 +1470,7 @@ var pt_BR_default = {
   blockPreview: "Preview ao vivo do bloco",
   livePreviewFailed: "Preview ao vivo indispon\xEDvel, mostrando a imagem.",
   blockPreviewUrl: "URL de preview do bloco",
-  blockPreviewUrlHelp: "Opcional. Uma p\xE1gina do seu frontend que renderiza um bloco sozinho, mostrada em tamanho grande ao clicar num card da galeria, por exemplo http://localhost:3026/pt-BR/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (depois do ponto), '{category}' (antes do ponto), '{variant}' (default), '{locale}'. Vazio usa a rota de preview de p\xE1gina quando existir, sen\xE3o a imagem.",
+  blockPreviewUrlHelp: "Opcional. Uma p\xE1gina do seu frontend que renderiza um bloco sozinho, mostrada em tamanho grande pela lupa do card da galeria, por exemplo http://localhost:3026/pt-BR/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (depois do ponto), '{category}' (antes do ponto), '{variant}' (default), '{locale}'. Vazio usa a rota de preview de p\xE1gina quando existir, sen\xE3o a imagem.",
   rowActions: "A\xE7\xF5es de {label}",
   selectBlock: "Selecionar {label}",
   hiddenBadge: "Oculto",
@@ -1886,7 +1891,7 @@ var pt_default = {
   blockPreview: "Pr\xE9-visualiza\xE7\xE3o ao vivo do bloco",
   livePreviewFailed: "Pr\xE9-visualiza\xE7\xE3o ao vivo indispon\xEDvel, a mostrar a imagem.",
   blockPreviewUrl: "URL de pr\xE9-visualiza\xE7\xE3o do bloco",
-  blockPreviewUrlHelp: "Opcional. Uma p\xE1gina do seu frontend que renderiza um bloco isolado, mostrada em grande ao clicar num cart\xE3o da galeria, por exemplo http://localhost:3026/pt-PT/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (depois do ponto), '{category}' (antes do ponto), '{variant}' (default), '{locale}'. Vazio usa a rota de pr\xE9-visualiza\xE7\xE3o de p\xE1gina quando existir, caso contr\xE1rio a imagem.",
+  blockPreviewUrlHelp: "Opcional. Uma p\xE1gina do seu frontend que renderiza um bloco isolado, mostrada em grande pela lupa do cart\xE3o da galeria, por exemplo http://localhost:3026/pt-PT/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (depois do ponto), '{category}' (antes do ponto), '{variant}' (default), '{locale}'. Vazio usa a rota de pr\xE9-visualiza\xE7\xE3o de p\xE1gina quando existir, caso contr\xE1rio a imagem.",
   rowActions: "A\xE7\xF5es de {label}",
   selectBlock: "Selecionar {label}",
   hiddenBadge: "Oculto",
@@ -2307,7 +2312,7 @@ var fr_default = {
   blockPreview: "Aper\xE7u en direct du bloc",
   livePreviewFailed: "Aper\xE7u en direct indisponible, l'image est affich\xE9e.",
   blockPreviewUrl: "URL d'aper\xE7u de bloc",
-  blockPreviewUrlHelp: "Facultatif. Une page de votre frontend qui affiche un seul bloc, montr\xE9e en grand quand on clique sur une carte de la galerie, par ex. http://localhost:3026/fr/block-preview/'{name}'/'{variant}'. Variables : '{uid}', '{name}' (apr\xE8s le point), '{category}' (avant le point), '{variant}' (default), '{locale}'. Vide : la route d'aper\xE7u de page si elle existe, sinon l'image.",
+  blockPreviewUrlHelp: "Facultatif. Une page de votre frontend qui affiche un seul bloc, montr\xE9e en grand depuis la loupe d'une carte de la galerie, par ex. http://localhost:3026/fr/block-preview/'{name}'/'{variant}'. Variables : '{uid}', '{name}' (apr\xE8s le point), '{category}' (avant le point), '{variant}' (default), '{locale}'. Vide : la route d'aper\xE7u de page si elle existe, sinon l'image.",
   rowActions: "Actions pour {label}",
   selectBlock: "S\xE9lectionner {label}",
   hiddenBadge: "Masqu\xE9",
@@ -2728,7 +2733,7 @@ var es_default = {
   blockPreview: "Vista previa en vivo del bloque",
   livePreviewFailed: "Vista previa en vivo no disponible, se muestra la imagen.",
   blockPreviewUrl: "URL de vista previa del bloque",
-  blockPreviewUrlHelp: "Opcional. Una p\xE1gina de su frontend que renderiza un solo bloque, mostrada en grande al hacer clic en una tarjeta de la galer\xEDa, p. ej. http://localhost:3026/es/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (tras el punto), '{category}' (antes del punto), '{variant}' (default), '{locale}'. Vac\xEDa usa la ruta de vista previa de p\xE1gina si existe; si no, la imagen.",
+  blockPreviewUrlHelp: "Opcional. Una p\xE1gina de su frontend que renderiza un solo bloque, mostrada en grande desde la lupa de una tarjeta de la galer\xEDa, p. ej. http://localhost:3026/es/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (tras el punto), '{category}' (antes del punto), '{variant}' (default), '{locale}'. Vac\xEDa usa la ruta de vista previa de p\xE1gina si existe; si no, la imagen.",
   rowActions: "Acciones de {label}",
   selectBlock: "Seleccionar {label}",
   hiddenBadge: "Oculto",
@@ -3149,7 +3154,7 @@ var de_default = {
   blockPreview: "Live-Vorschau des Blocks",
   livePreviewFailed: "Live-Vorschau nicht verf\xFCgbar, das Bild wird angezeigt.",
   blockPreviewUrl: "Block-Vorschau-URL",
-  blockPreviewUrlHelp: "Optional. Eine Seite Ihres Frontends, die einen einzelnen Block rendert und beim Klick auf eine Galeriekarte gro\xDF angezeigt wird, z. B. http://localhost:3026/de/block-preview/'{name}'/'{variant}'. Platzhalter: '{uid}', '{name}' (nach dem Punkt), '{category}' (vor dem Punkt), '{variant}' (default), '{locale}'. Leer verwendet die Seitenvorschau-Route, falls vorhanden, sonst das Bild.",
+  blockPreviewUrlHelp: "Optional. Eine Seite Ihres Frontends, die einen einzelnen Block rendert und \xFCber die Lupe einer Galeriekarte gro\xDF angezeigt wird, z. B. http://localhost:3026/de/block-preview/'{name}'/'{variant}'. Platzhalter: '{uid}', '{name}' (nach dem Punkt), '{category}' (vor dem Punkt), '{variant}' (default), '{locale}'. Leer verwendet die Seitenvorschau-Route, falls vorhanden, sonst das Bild.",
   rowActions: "Aktionen f\xFCr {label}",
   selectBlock: "{label} ausw\xE4hlen",
   hiddenBadge: "Ausgeblendet",
@@ -3570,7 +3575,7 @@ var it_default = {
   blockPreview: "Anteprima dal vivo del blocco",
   livePreviewFailed: "Anteprima dal vivo non disponibile, viene mostrata l'immagine.",
   blockPreviewUrl: "URL di anteprima del blocco",
-  blockPreviewUrlHelp: "Facoltativo. Una pagina del tuo frontend che renderizza un singolo blocco, mostrata in grande quando si clicca una scheda della galleria, ad es. http://localhost:3026/it/block-preview/'{name}'/'{variant}'. Segnaposto: '{uid}', '{name}' (dopo il punto), '{category}' (prima del punto), '{variant}' (default), '{locale}'. Vuoto usa la route di anteprima pagina se esiste, altrimenti l'immagine.",
+  blockPreviewUrlHelp: "Facoltativo. Una pagina del tuo frontend che renderizza un singolo blocco, mostrata in grande dalla lente di ingrandimento di una scheda della galleria, ad es. http://localhost:3026/it/block-preview/'{name}'/'{variant}'. Segnaposto: '{uid}', '{name}' (dopo il punto), '{category}' (prima del punto), '{variant}' (default), '{locale}'. Vuoto usa la route di anteprima pagina se esiste, altrimenti l'immagine.",
   rowActions: "Azioni per {label}",
   selectBlock: "Seleziona {label}",
   hiddenBadge: "Nascosto",
@@ -3991,7 +3996,7 @@ var nl_default = {
   blockPreview: "Livevoorbeeld van het blok",
   livePreviewFailed: "Livevoorbeeld niet beschikbaar, de afbeelding wordt getoond.",
   blockPreviewUrl: "URL van blokvoorbeeld",
-  blockPreviewUrlHelp: "Optioneel. Een pagina van uw frontend die \xE9\xE9n blok rendert, groot getoond wanneer op een galerijkaart wordt geklikt, bijv. http://localhost:3026/nl/block-preview/'{name}'/'{variant}'. Plaatshouders: '{uid}', '{name}' (na de punt), '{category}' (voor de punt), '{variant}' (default), '{locale}'. Leeg gebruikt de paginavoorbeeldroute als die er is, anders de afbeelding.",
+  blockPreviewUrlHelp: "Optioneel. Een pagina van uw frontend die \xE9\xE9n blok rendert, groot getoond via het vergrootglas van een galerijkaart, bijv. http://localhost:3026/nl/block-preview/'{name}'/'{variant}'. Plaatshouders: '{uid}', '{name}' (na de punt), '{category}' (voor de punt), '{variant}' (default), '{locale}'. Leeg gebruikt de paginavoorbeeldroute als die er is, anders de afbeelding.",
   rowActions: "Acties voor {label}",
   selectBlock: "{label} selecteren",
   hiddenBadge: "Verborgen",
@@ -5836,10 +5841,6 @@ var Badge = import_styled_components5.default.span`
 `;
 var CardBox = import_styled_components5.default.div`
   position: relative;
-  &:hover .bs-quick,
-  &:focus-within .bs-quick {
-    opacity: 1;
-  }
 `;
 var CardBadges = import_styled_components5.default.div`
   position: absolute;
@@ -5862,17 +5863,13 @@ var Round = import_styled_components5.default.button`
   padding: 0;
   border-radius: 50%;
   cursor: pointer;
-  border: 1px solid ${({ theme, $primary }) => $primary ? theme.colors.primary600 : theme.colors.neutral200};
-  color: ${({ theme, $on, $primary }) => $primary ? theme.colors.neutral0 : $on ? theme.colors.warning500 : theme.colors.neutral600};
-  background: ${({ theme, $primary }) => $primary ? theme.colors.primary600 : theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  color: ${({ theme, $on }) => $on ? theme.colors.warning500 : theme.colors.neutral600};
+  background: ${({ theme }) => theme.colors.neutral0};
   &:focus-visible {
     outline: 2px solid ${({ theme }) => theme.colors.primary600};
     outline-offset: 1px;
   }
-  &.bs-quick {
-    opacity: 0;
-    transition: opacity 120ms;
-  }
 `;
 var Mono = import_styled_components5.default.code`
   font-size: 12px;
@@ -5947,25 +5944,13 @@ function Badges({ entry, t, tags }) {
 }
 function Card({ entry, palette, showFields, starred, active, onOpen, onInsert, onStar }) {
   const t = useMessages();
-  const timer = React6.useRef(null);
-  React6.useEffect(() => () => clearTimeout(timer.current), []);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardBox, { title: entry.uid, "data-testid": `blockscene-${entry.uid}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       Tile,
       {
         type: "button",
         $active: active,
-        onClick: (event) => {
-          clearTimeout(timer.current);
-          if (event.detail === 2) onInsert();
-          else if (event.detail === 1) timer.current = setTimeout(onOpen, 220);
-          else onOpen();
-        },
-        onKeyDown: (event) => {
-          if (event.key !== "Enter") return;
-          event.preventDefault();
-          onInsert();
-        },
+        onClick: onInsert,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Thumb,
@@ -6010,14 +5995,12 @@ function Card({ entry, palette, showFields, starred, active, onOpen, onInsert, o
       Round,
       {
         type: "button",
-        className: "bs-quick",
         style: { top: 46 },
-        $primary: true,
-        "aria-label": t.f("quickInsert", { label: entry.label }),
-        title: t.f("quickInsert", { label: entry.label }),
-        onClick: onInsert,
-        "data-testid": `gallery-quick-${entry.uid}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "plus", size: 16 })
+        "aria-label": t.f("rowPreview", { label: entry.label }),
+        title: t.f("rowPreview", { label: entry.label }),
+        onClick: onOpen,
+        "data-testid": `gallery-preview-${entry.uid}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "seo", size: 16 })
       }
     )
   ] });

package/dist/admin.mjs

@@ -43,6 +43,10 @@ var require_groups = __commonJS({
       return Object.keys(out).length ? out : null;
     }
     var uidOf = (row) => typeof row?.__component === "string" ? row.__component : "";
+    var invalidComponents = (rows, allowed) => {
+      const uids = new Set(Array.isArray(allowed) ? allowed : []);
+      return (Array.isArray(rows) ? rows : []).flatMap((row, index) => uidOf(row) && !uids.has(uidOf(row)) ? [{ index, uid: uidOf(row) }] : []);
+    };
     var isOpener2 = (row, g) => Boolean(g) && Object.prototype.hasOwnProperty.call(g, uidOf(row));
     var isClose2 = (row, g) => Boolean(g) && Object.values(g).includes(uidOf(row));
     var blockKey3 = (row) => row && row.id != null ? `${row.__component}#${row.id}` : row && row.__temp_key__ != null ? String(row.__temp_key__) : null;
@@ -149,6 +153,7 @@ var require_groups = __commonJS({
     module.exports = {
       safeGroups: safeGroups2,
       validateGroups: validateGroups3,
+      invalidComponents,
       groupRange: groupRange3,
       groupRows: groupRows2,
       topLevelRanges: topLevelRanges2,
@@ -1063,7 +1068,7 @@ var en_default = {
   blockPreview: "Live block preview",
   livePreviewFailed: "Live preview unavailable, showing the image.",
   blockPreviewUrl: "Block preview URL",
-  blockPreviewUrlHelp: "Optional. A page of your frontend that renders one block on its own, shown large when a gallery card is clicked, e.g. http://localhost:3026/pt-BR/block-preview/'{name}'/'{variant}'. Placeholders: '{uid}', '{name}' (after the dot), '{category}' (before the dot), '{variant}' (default), '{locale}'. Empty uses the page preview route when there is one, else the image.",
+  blockPreviewUrlHelp: "Optional. A page of your frontend that renders one block on its own, shown large from a gallery card's magnifying glass, e.g. http://localhost:3026/pt-BR/block-preview/'{name}'/'{variant}'. Placeholders: '{uid}', '{name}' (after the dot), '{category}' (before the dot), '{variant}' (default), '{locale}'. Empty uses the page preview route when there is one, else the image.",
   rowActions: "Actions for {label}",
   selectBlock: "Select {label}",
   hiddenBadge: "Hidden",
@@ -1484,7 +1489,7 @@ var pt_BR_default = {
   blockPreview: "Preview ao vivo do bloco",
   livePreviewFailed: "Preview ao vivo indispon\xEDvel, mostrando a imagem.",
   blockPreviewUrl: "URL de preview do bloco",
-  blockPreviewUrlHelp: "Opcional. Uma p\xE1gina do seu frontend que renderiza um bloco sozinho, mostrada em tamanho grande ao clicar num card da galeria, por exemplo http://localhost:3026/pt-BR/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (depois do ponto), '{category}' (antes do ponto), '{variant}' (default), '{locale}'. Vazio usa a rota de preview de p\xE1gina quando existir, sen\xE3o a imagem.",
+  blockPreviewUrlHelp: "Opcional. Uma p\xE1gina do seu frontend que renderiza um bloco sozinho, mostrada em tamanho grande pela lupa do card da galeria, por exemplo http://localhost:3026/pt-BR/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (depois do ponto), '{category}' (antes do ponto), '{variant}' (default), '{locale}'. Vazio usa a rota de preview de p\xE1gina quando existir, sen\xE3o a imagem.",
   rowActions: "A\xE7\xF5es de {label}",
   selectBlock: "Selecionar {label}",
   hiddenBadge: "Oculto",
@@ -1905,7 +1910,7 @@ var pt_default = {
   blockPreview: "Pr\xE9-visualiza\xE7\xE3o ao vivo do bloco",
   livePreviewFailed: "Pr\xE9-visualiza\xE7\xE3o ao vivo indispon\xEDvel, a mostrar a imagem.",
   blockPreviewUrl: "URL de pr\xE9-visualiza\xE7\xE3o do bloco",
-  blockPreviewUrlHelp: "Opcional. Uma p\xE1gina do seu frontend que renderiza um bloco isolado, mostrada em grande ao clicar num cart\xE3o da galeria, por exemplo http://localhost:3026/pt-PT/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (depois do ponto), '{category}' (antes do ponto), '{variant}' (default), '{locale}'. Vazio usa a rota de pr\xE9-visualiza\xE7\xE3o de p\xE1gina quando existir, caso contr\xE1rio a imagem.",
+  blockPreviewUrlHelp: "Opcional. Uma p\xE1gina do seu frontend que renderiza um bloco isolado, mostrada em grande pela lupa do cart\xE3o da galeria, por exemplo http://localhost:3026/pt-PT/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (depois do ponto), '{category}' (antes do ponto), '{variant}' (default), '{locale}'. Vazio usa a rota de pr\xE9-visualiza\xE7\xE3o de p\xE1gina quando existir, caso contr\xE1rio a imagem.",
   rowActions: "A\xE7\xF5es de {label}",
   selectBlock: "Selecionar {label}",
   hiddenBadge: "Oculto",
@@ -2326,7 +2331,7 @@ var fr_default = {
   blockPreview: "Aper\xE7u en direct du bloc",
   livePreviewFailed: "Aper\xE7u en direct indisponible, l'image est affich\xE9e.",
   blockPreviewUrl: "URL d'aper\xE7u de bloc",
-  blockPreviewUrlHelp: "Facultatif. Une page de votre frontend qui affiche un seul bloc, montr\xE9e en grand quand on clique sur une carte de la galerie, par ex. http://localhost:3026/fr/block-preview/'{name}'/'{variant}'. Variables : '{uid}', '{name}' (apr\xE8s le point), '{category}' (avant le point), '{variant}' (default), '{locale}'. Vide : la route d'aper\xE7u de page si elle existe, sinon l'image.",
+  blockPreviewUrlHelp: "Facultatif. Une page de votre frontend qui affiche un seul bloc, montr\xE9e en grand depuis la loupe d'une carte de la galerie, par ex. http://localhost:3026/fr/block-preview/'{name}'/'{variant}'. Variables : '{uid}', '{name}' (apr\xE8s le point), '{category}' (avant le point), '{variant}' (default), '{locale}'. Vide : la route d'aper\xE7u de page si elle existe, sinon l'image.",
   rowActions: "Actions pour {label}",
   selectBlock: "S\xE9lectionner {label}",
   hiddenBadge: "Masqu\xE9",
@@ -2747,7 +2752,7 @@ var es_default = {
   blockPreview: "Vista previa en vivo del bloque",
   livePreviewFailed: "Vista previa en vivo no disponible, se muestra la imagen.",
   blockPreviewUrl: "URL de vista previa del bloque",
-  blockPreviewUrlHelp: "Opcional. Una p\xE1gina de su frontend que renderiza un solo bloque, mostrada en grande al hacer clic en una tarjeta de la galer\xEDa, p. ej. http://localhost:3026/es/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (tras el punto), '{category}' (antes del punto), '{variant}' (default), '{locale}'. Vac\xEDa usa la ruta de vista previa de p\xE1gina si existe; si no, la imagen.",
+  blockPreviewUrlHelp: "Opcional. Una p\xE1gina de su frontend que renderiza un solo bloque, mostrada en grande desde la lupa de una tarjeta de la galer\xEDa, p. ej. http://localhost:3026/es/block-preview/'{name}'/'{variant}'. Marcadores: '{uid}', '{name}' (tras el punto), '{category}' (antes del punto), '{variant}' (default), '{locale}'. Vac\xEDa usa la ruta de vista previa de p\xE1gina si existe; si no, la imagen.",
   rowActions: "Acciones de {label}",
   selectBlock: "Seleccionar {label}",
   hiddenBadge: "Oculto",
@@ -3168,7 +3173,7 @@ var de_default = {
   blockPreview: "Live-Vorschau des Blocks",
   livePreviewFailed: "Live-Vorschau nicht verf\xFCgbar, das Bild wird angezeigt.",
   blockPreviewUrl: "Block-Vorschau-URL",
-  blockPreviewUrlHelp: "Optional. Eine Seite Ihres Frontends, die einen einzelnen Block rendert und beim Klick auf eine Galeriekarte gro\xDF angezeigt wird, z. B. http://localhost:3026/de/block-preview/'{name}'/'{variant}'. Platzhalter: '{uid}', '{name}' (nach dem Punkt), '{category}' (vor dem Punkt), '{variant}' (default), '{locale}'. Leer verwendet die Seitenvorschau-Route, falls vorhanden, sonst das Bild.",
+  blockPreviewUrlHelp: "Optional. Eine Seite Ihres Frontends, die einen einzelnen Block rendert und \xFCber die Lupe einer Galeriekarte gro\xDF angezeigt wird, z. B. http://localhost:3026/de/block-preview/'{name}'/'{variant}'. Platzhalter: '{uid}', '{name}' (nach dem Punkt), '{category}' (vor dem Punkt), '{variant}' (default), '{locale}'. Leer verwendet die Seitenvorschau-Route, falls vorhanden, sonst das Bild.",
   rowActions: "Aktionen f\xFCr {label}",
   selectBlock: "{label} ausw\xE4hlen",
   hiddenBadge: "Ausgeblendet",
@@ -3589,7 +3594,7 @@ var it_default = {
   blockPreview: "Anteprima dal vivo del blocco",
   livePreviewFailed: "Anteprima dal vivo non disponibile, viene mostrata l'immagine.",
   blockPreviewUrl: "URL di anteprima del blocco",
-  blockPreviewUrlHelp: "Facoltativo. Una pagina del tuo frontend che renderizza un singolo blocco, mostrata in grande quando si clicca una scheda della galleria, ad es. http://localhost:3026/it/block-preview/'{name}'/'{variant}'. Segnaposto: '{uid}', '{name}' (dopo il punto), '{category}' (prima del punto), '{variant}' (default), '{locale}'. Vuoto usa la route di anteprima pagina se esiste, altrimenti l'immagine.",
+  blockPreviewUrlHelp: "Facoltativo. Una pagina del tuo frontend che renderizza un singolo blocco, mostrata in grande dalla lente di ingrandimento di una scheda della galleria, ad es. http://localhost:3026/it/block-preview/'{name}'/'{variant}'. Segnaposto: '{uid}', '{name}' (dopo il punto), '{category}' (prima del punto), '{variant}' (default), '{locale}'. Vuoto usa la route di anteprima pagina se esiste, altrimenti l'immagine.",
   rowActions: "Azioni per {label}",
   selectBlock: "Seleziona {label}",
   hiddenBadge: "Nascosto",
@@ -4010,7 +4015,7 @@ var nl_default = {
   blockPreview: "Livevoorbeeld van het blok",
   livePreviewFailed: "Livevoorbeeld niet beschikbaar, de afbeelding wordt getoond.",
   blockPreviewUrl: "URL van blokvoorbeeld",
-  blockPreviewUrlHelp: "Optioneel. Een pagina van uw frontend die \xE9\xE9n blok rendert, groot getoond wanneer op een galerijkaart wordt geklikt, bijv. http://localhost:3026/nl/block-preview/'{name}'/'{variant}'. Plaatshouders: '{uid}', '{name}' (na de punt), '{category}' (voor de punt), '{variant}' (default), '{locale}'. Leeg gebruikt de paginavoorbeeldroute als die er is, anders de afbeelding.",
+  blockPreviewUrlHelp: "Optioneel. Een pagina van uw frontend die \xE9\xE9n blok rendert, groot getoond via het vergrootglas van een galerijkaart, bijv. http://localhost:3026/nl/block-preview/'{name}'/'{variant}'. Plaatshouders: '{uid}', '{name}' (na de punt), '{category}' (voor de punt), '{variant}' (default), '{locale}'. Leeg gebruikt de paginavoorbeeldroute als die er is, anders de afbeelding.",
   rowActions: "Acties voor {label}",
   selectBlock: "{label} selecteren",
   hiddenBadge: "Verborgen",
@@ -5855,10 +5860,6 @@ var Badge = styled5.span`
 `;
 var CardBox = styled5.div`
   position: relative;
-  &:hover .bs-quick,
-  &:focus-within .bs-quick {
-    opacity: 1;
-  }
 `;
 var CardBadges = styled5.div`
   position: absolute;
@@ -5881,17 +5882,13 @@ var Round = styled5.button`
   padding: 0;
   border-radius: 50%;
   cursor: pointer;
-  border: 1px solid ${({ theme, $primary }) => $primary ? theme.colors.primary600 : theme.colors.neutral200};
-  color: ${({ theme, $on, $primary }) => $primary ? theme.colors.neutral0 : $on ? theme.colors.warning500 : theme.colors.neutral600};
-  background: ${({ theme, $primary }) => $primary ? theme.colors.primary600 : theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  color: ${({ theme, $on }) => $on ? theme.colors.warning500 : theme.colors.neutral600};
+  background: ${({ theme }) => theme.colors.neutral0};
   &:focus-visible {
     outline: 2px solid ${({ theme }) => theme.colors.primary600};
     outline-offset: 1px;
   }
-  &.bs-quick {
-    opacity: 0;
-    transition: opacity 120ms;
-  }
 `;
 var Mono = styled5.code`
   font-size: 12px;
@@ -5966,25 +5963,13 @@ function Badges({ entry, t, tags }) {
 }
 function Card({ entry, palette, showFields, starred, active, onOpen, onInsert, onStar }) {
   const t = useMessages();
-  const timer = React6.useRef(null);
-  React6.useEffect(() => () => clearTimeout(timer.current), []);
   return /* @__PURE__ */ jsxs5(CardBox, { title: entry.uid, "data-testid": `blockscene-${entry.uid}`, children: [
     /* @__PURE__ */ jsxs5(
       Tile,
       {
         type: "button",
         $active: active,
-        onClick: (event) => {
-          clearTimeout(timer.current);
-          if (event.detail === 2) onInsert();
-          else if (event.detail === 1) timer.current = setTimeout(onOpen, 220);
-          else onOpen();
-        },
-        onKeyDown: (event) => {
-          if (event.key !== "Enter") return;
-          event.preventDefault();
-          onInsert();
-        },
+        onClick: onInsert,
         children: [
           /* @__PURE__ */ jsx7(
             Thumb,
@@ -6029,14 +6014,12 @@ function Card({ entry, palette, showFields, starred, active, onOpen, onInsert, o
       Round,
       {
         type: "button",
-        className: "bs-quick",
         style: { top: 46 },
-        $primary: true,
-        "aria-label": t.f("quickInsert", { label: entry.label }),
-        title: t.f("quickInsert", { label: entry.label }),
-        onClick: onInsert,
-        "data-testid": `gallery-quick-${entry.uid}`,
-        children: /* @__PURE__ */ jsx7(Icon, { name: "plus", size: 16 })
+        "aria-label": t.f("rowPreview", { label: entry.label }),
+        title: t.f("rowPreview", { label: entry.label }),
+        onClick: onOpen,
+        "data-testid": `gallery-preview-${entry.uid}`,
+        children: /* @__PURE__ */ jsx7(Icon, { name: "seo", size: 16 })
       }
     )
   ] });

package/dist/server.cjs

@@ -21,6 +21,10 @@ var require_groups = __commonJS({
       return Object.keys(out).length ? out : null;
     }
     var uidOf = (row) => typeof row?.__component === "string" ? row.__component : "";
+    var invalidComponents2 = (rows, allowed) => {
+      const uids = new Set(Array.isArray(allowed) ? allowed : []);
+      return (Array.isArray(rows) ? rows : []).flatMap((row, index) => uidOf(row) && !uids.has(uidOf(row)) ? [{ index, uid: uidOf(row) }] : []);
+    };
     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 blockKey = (row) => row && row.id != null ? `${row.__component}#${row.id}` : row && row.__temp_key__ != null ? String(row.__temp_key__) : null;
@@ -127,6 +131,7 @@ var require_groups = __commonJS({
     module2.exports = {
       safeGroups: safeGroups2,
       validateGroups: validateGroups2,
+      invalidComponents: invalidComponents2,
       groupRange,
       groupRows,
       topLevelRanges,
@@ -1686,7 +1691,7 @@ var require_history = __commonJS({
 
 // server/index.js
 var { PLUGIN, TEMPLATES, TYPOLOGIES, DEFAULTS, catalog, validateSettings, validateFields, validateVariants, schemaMetadata, mergeSaved, layer, overrides, validatePrefs, mergePrefs, safeUrl, fail } = require_settings();
-var { safeGroups, validateGroups, layoutFields } = require_groups();
+var { safeGroups, validateGroups, invalidComponents, layoutFields } = require_groups();
 var { hiddenName, injectHidden, hideFromBuilder, registerHiddenStrip } = require_hidden();
 var { CRON, covers, eventContentType, historyService, historyController, registerHistory, registerPurge } = require_history();
 var { trashContentType, trashService, trashController } = require_trash();
@@ -1719,6 +1724,18 @@ var contentTypeUids = (strapi) => Object.fromEntries(Object.entries(strapi.conte
 var apiUids = (strapi) => Object.keys(strapi.contentTypes || {}).filter((uid) => uid.startsWith("api::"));
 var zonesOf = (schema) => Object.entries(schema?.attributes || {}).filter(([, attr]) => attr?.type === "dynamiczone").map(([name]) => name);
 var label = (error) => `row ${error.index + 1}: ${error.code === "closeBeforeOpen" ? `close marker ${error.uid} has no open marker before it` : error.code === "mismatch" ? `close marker ${error.uid} does not match the open group ${error.open} (expected ${error.expected})` : `group ${error.uid} is not closed (expected ${error.expected})`}`;
+var componentLabel = (error) => `row ${error.index + 1}: component "${error.uid}" is not allowed in this Dynamic Zone`;
+function checkComponents(strapi, uid, entry) {
+  const schema = strapi.getModel(uid);
+  for (const name of zonesOf(schema)) {
+    if (!Array.isArray(entry?.[name])) continue;
+    const errors = invalidComponents(entry[name], schema.attributes[name].components);
+    if (errors.length) fail(
+      `Block components in "${name}" are not allowed by its schema (${errors.map(componentLabel).join("; ")}).`,
+      { plugin: PLUGIN, field: name, errors: errors.map((error) => ({ path: [name, error.index], message: componentLabel(error), name: "ValidationError", code: "componentNotAllowed", uid: error.uid })) }
+    );
+  }
+}
 function checkZones(strapi, uid, entry, groups) {
   for (const name of zonesOf(strapi.getModel(uid))) {
     const errors = validateGroups(Array.isArray(entry?.[name]) ? entry[name] : [], groups);
@@ -1728,11 +1745,10 @@ function checkZones(strapi, uid, entry, groups) {
     );
   }
 }
-function registerPublishGuard(strapi) {
+function registerZoneGuards(strapi) {
   const plugin = strapi.plugin(PLUGIN);
   const groups = safeGroups(plugin.config("groups"), componentUids(strapi));
   if (plugin.config("groups") && !groups) strapi.log.warn(`[${PLUGIN}] "groups" config ignored: expected { "<open component uid>": "<close component uid>" } with existing components; every block is treated as ordinary.`);
-  if (!groups) return;
   const active = async (uid) => {
     if (plugin.config("disabled") === true) return false;
     const settings = await plugin.service("settings").get();
@@ -1749,12 +1765,14 @@ function registerPublishGuard(strapi) {
     strapi.documents.use(async (ctx, next) => {
       const { action, params = {} } = ctx;
       const publishing = action === "publish" || (action === "create" || action === "update") && params.status === "published";
-      if (!publishing || !ctx.uid) return next();
+      if (!ctx.uid || !["create", "update", "publish"].includes(action)) return next();
       const model = strapi.getModel(ctx.uid);
       const zones = zonesOf(model);
       if (!zones.length || !await active(ctx.uid)) return next();
+      if (action === "create" || action === "update") checkComponents(strapi, ctx.uid, params.data || {});
+      if (!publishing) return next();
       if (action === "create") {
-        checkZones(strapi, ctx.uid, params.data || {}, groups);
+        if (groups) checkZones(strapi, ctx.uid, params.data || {}, groups);
         return next();
       }
       const populate = Object.fromEntries(zones.map((name) => [name, true]));
@@ -1769,7 +1787,8 @@ function registerPublishGuard(strapi) {
       }
       for (const draft of drafts) {
         const entry = action === "update" ? { ...draft || {}, ...Object.fromEntries(zones.filter((name) => Array.isArray(params.data?.[name])).map((name) => [name, params.data[name]])) } : draft;
-        checkZones(strapi, ctx.uid, entry, groups);
+        checkComponents(strapi, ctx.uid, entry);
+        if (groups) checkZones(strapi, ctx.uid, entry, groups);
       }
       return next();
     });
@@ -1778,20 +1797,31 @@ function registerPublishGuard(strapi) {
   const published = (data) => Boolean(data && data.publishedAt);
   strapi.db.lifecycles.subscribe({
     async beforeCreate(event) {
-      if (published(event.params?.data) && await active(event.model.uid)) checkZones(strapi, event.model.uid, event.params.data, groups);
+      const data = event.params?.data, uid = event.model.uid;
+      if (!zonesOf(strapi.getModel(uid)).length || !await active(uid)) return;
+      checkComponents(strapi, uid, data || {});
+      if (groups && published(data)) checkZones(strapi, uid, data, groups);
     },
     async beforeUpdate(event) {
       const { data, where } = event.params || {};
       const zones = zonesOf(strapi.getModel(event.model.uid));
-      if (!published(data) || !zones.length || !await active(event.model.uid)) return;
+      if (!zones.length || !await active(event.model.uid)) return;
+      checkComponents(strapi, event.model.uid, data || {});
+      if (!published(data)) return;
       const entry = zones.every((name) => Array.isArray(data[name])) ? data : { ...await strapi.entityService.findOne(event.model.uid, where?.id, { populate: zones }), ...data };
-      checkZones(strapi, event.model.uid, entry, groups);
+      checkComponents(strapi, event.model.uid, entry);
+      if (groups) checkZones(strapi, event.model.uid, entry, groups);
     },
     async beforeUpdateMany(event) {
       const { data, where } = event.params || {};
       const zones = zonesOf(strapi.getModel(event.model.uid));
-      if (!published(data) || !zones.length || !await active(event.model.uid)) return;
-      for (const entry of await strapi.entityService.findMany(event.model.uid, { filters: where, populate: zones })) checkZones(strapi, event.model.uid, entry, groups);
+      if (!zones.length || !await active(event.model.uid)) return;
+      checkComponents(strapi, event.model.uid, data || {});
+      if (!published(data)) return;
+      for (const entry of await strapi.entityService.findMany(event.model.uid, { filters: where, populate: zones })) {
+        checkComponents(strapi, event.model.uid, entry);
+        if (groups) checkZones(strapi, event.model.uid, entry, groups);
+      }
     }
   });
 }
@@ -1846,7 +1876,7 @@ module.exports = {
     strapi.plugin(PLUGIN).service("settings").projectDefaults();
     strapi.plugin(PLUGIN).service("settings").fields();
     strapi.plugin(PLUGIN).service("settings").variants();
-    registerPublishGuard(strapi);
+    registerZoneGuards(strapi);
     registerHiddenStrip(strapi, hiddenName(strapi.plugin(PLUGIN).config("hiddenAttribute")), strapi.plugin(PLUGIN));
     if (withHidden.length) hideFromBuilder(typeof strapi.get === "function" ? strapi.get("services") : strapi.container.get("services"), withHidden, hiddenName(strapi.plugin(PLUGIN).config("hiddenAttribute")));
     if (STRAPI5) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aduptive/strapi-blockscene",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "description": "Visual component gallery for native Strapi dynamic zones.",
   "license": "MIT",
   "author": "Andrea Scarpello <aduptive@gmail.com>",