@nextsparkjs/core 0.1.0-beta.7 → 0.1.0-beta.71

package/dist/components/dashboard/block-editor/dynamic-form.js

@@ -2,27 +2,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState, useMemo, useRef } from "react";
 import { useTranslations } from "next-intl";
-import { Input } from "../../ui/input";
-import { Textarea } from "../../ui/textarea";
-import { Label } from "../../ui/label";
+import { Input } from "../../ui/input.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Label } from "../../ui/label.js";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "../../ui/select";
-import { ImageUpload } from "../../ui/image-upload";
-import { RichTextEditor } from "../../ui/rich-text-editor";
+} from "../../ui/select.js";
+import { ImageUpload } from "../../ui/image-upload.js";
+import { RichTextEditor } from "../../ui/rich-text-editor.js";
 import { ChevronDown, ChevronRight, CalendarIcon } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import { Switch } from "../../ui/switch";
-import { RadioGroup, RadioGroupItem } from "../../ui/radio-group";
-import { Calendar } from "../../ui/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
-import { Button } from "../../ui/button";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+import { Switch } from "../../ui/switch.js";
+import { RadioGroup, RadioGroupItem } from "../../ui/radio-group.js";
+import { Calendar } from "../../ui/calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { Button } from "../../ui/button.js";
 import { format } from "date-fns";
-import { ArrayField } from "./array-field";
+import { ArrayField } from "./array-field.js";
 function organizeFields(fields) {
   const ungrouped = [];
   const groupMap = /* @__PURE__ */ new Map();
@@ -109,7 +110,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             onChange: (e) => handleFieldChange(field.name, e.target.value),
             placeholder: field.placeholder,
             required: field.required,
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
       case "textarea":
@@ -121,7 +122,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             placeholder: field.placeholder,
             required: field.required,
             rows: field.rows || 4,
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
       case "rich-text":
@@ -131,7 +132,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             value: String(value),
             onChange: (newValue) => handleFieldChange(field.name, newValue),
             placeholder: field.placeholder,
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
       case "url":
@@ -143,7 +144,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             onChange: (e) => handleFieldChange(field.name, e.target.value),
             placeholder: field.placeholder || "https://example.com",
             required: field.required,
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
       case "number":
@@ -158,7 +159,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             min: field.min,
             max: field.max,
             step: field.step,
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
       case "select":
@@ -168,7 +169,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             value: String(value),
             onValueChange: (newValue) => handleFieldChange(field.name, newValue),
             children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { "data-cy": `field-${field.name}`, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: field.placeholder || t("selectPlaceholder") }) }),
+              /* @__PURE__ */ jsx(SelectTrigger, { "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name }), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: field.placeholder || t("selectPlaceholder") }) }),
               /* @__PURE__ */ jsx(SelectContent, { children: (_a = field.options) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option.value), children: option.label }, String(option.value))) })
             ]
           }
@@ -180,7 +181,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             value: Array.isArray(value) ? value : [],
             onChange: (newValue) => handleFieldChange(field.name, newValue),
             maxImages: 1,
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
       case "array":
@@ -200,7 +201,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
               id: field.name,
               checked: Boolean(value),
               onCheckedChange: (checked) => handleFieldChange(field.name, checked),
-              "data-cy": `field-${field.name}`
+              "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
             }
           ),
           /* @__PURE__ */ jsx(Label, { htmlFor: field.name, className: "text-sm font-normal cursor-pointer", children: field.checkboxLabel || field.label })
@@ -211,7 +212,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
           {
             value: String(value || ""),
             onValueChange: (newValue) => handleFieldChange(field.name, newValue),
-            "data-cy": `field-${field.name}`,
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name }),
             children: (_b = field.options) == null ? void 0 : _b.map((option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
               /* @__PURE__ */ jsx(
                 RadioGroupItem,
@@ -245,7 +246,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
                   value: String(value || "#000000"),
                   onChange: (e) => handleFieldChange(field.name, e.target.value),
                   className: "opacity-0 w-full h-full cursor-pointer absolute inset-0",
-                  "data-cy": `field-${field.name}`
+                  "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
                 }
               )
             }
@@ -271,7 +272,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
                 "w-full justify-start text-left font-normal",
                 !value && "text-muted-foreground"
               ),
-              "data-cy": `field-${field.name}`,
+              "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name }),
               children: [
                 /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
                 value ? format(new Date(String(value)), "PPP") : "Pick a date"
@@ -295,7 +296,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             type: "time",
             value: String(value || ""),
             onChange: (e) => handleFieldChange(field.name, e.target.value),
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
       case "datetime":
@@ -308,7 +309,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
               const dateValue = e.target.value ? new Date(e.target.value).toISOString() : "";
               handleFieldChange(field.name, dateValue);
             },
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
       default:
@@ -319,7 +320,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
             value: String(value),
             onChange: (e) => handleFieldChange(field.name, e.target.value),
             placeholder: field.placeholder,
-            "data-cy": `field-${field.name}`
+            "data-cy": sel("blockEditor.blockPropertiesPanel.form.field", { name: field.name })
           }
         );
     }
@@ -341,7 +342,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
       "div",
       {
         className: "border rounded-lg overflow-hidden",
-        "data-cy": `array-group-${field.name}`,
+        "data-cy": sel("blockEditor.blockPropertiesPanel.form.arrayField.container", { name: field.name }),
         children: [
           /* @__PURE__ */ jsxs(
             "button",
@@ -386,7 +387,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
       "div",
       {
         className: "border rounded-lg overflow-hidden",
-        "data-cy": `field-group-${group.id}`,
+        "data-cy": sel("blockEditor.blockPropertiesPanel.form.fieldGroup", { id: group.id }),
         children: [
           /* @__PURE__ */ jsxs(
             "button",
@@ -413,7 +414,7 @@ function DynamicForm({ fieldDefinitions, values, onChange }) {
       group.id
     );
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", "data-cy": "dynamic-form", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", "data-cy": sel("blockEditor.blockPropertiesPanel.form.container"), children: [
     ungrouped.map(
       (field) => field.type === "array" ? renderArrayFieldAsGroup(field) : renderFieldWithLabel(field)
     ),

package/dist/components/dashboard/block-editor/entity-fields-sidebar.js

@@ -2,12 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { useQuery } from "@tanstack/react-query";
-import { Input } from "../../ui/input";
-import { Textarea } from "../../ui/textarea";
-import { Label } from "../../ui/label";
-import { Badge } from "../../ui/badge";
-import { ScrollArea } from "../../ui/scroll-area";
-import { Checkbox } from "../../ui/checkbox";
+import { sel } from "../../../lib/test/index.js";
+import { Input } from "../../ui/input.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Label } from "../../ui/label.js";
+import { Badge } from "../../ui/badge.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { Checkbox } from "../../ui/checkbox.js";
 import { FileText, Image, Tag, Loader2 } from "lucide-react";
 function EntityFieldsSidebar({
   entityConfig,
@@ -53,7 +54,7 @@ function EntityFieldsSidebar({
             placeholder: t("placeholders.excerpt"),
             rows: 4,
             className: "resize-none",
-            "data-cy": `field-${fieldName}`
+            "data-cy": sel("blockEditor.entityFieldsPanel.field", { name: fieldName })
           }
         )
       ] }, fieldName);
@@ -72,7 +73,7 @@ function EntityFieldsSidebar({
             value: value || "",
             onChange: (e) => onChange(fieldName, e.target.value),
             placeholder: t("placeholders.imageUrl"),
-            "data-cy": `field-${fieldName}`
+            "data-cy": sel("blockEditor.entityFieldsPanel.field", { name: fieldName })
           }
         ),
         value && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-md border overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -96,7 +97,7 @@ function EntityFieldsSidebar({
           id: fieldName,
           value: value || "",
           onChange: (e) => onChange(fieldName, e.target.value),
-          "data-cy": `field-${fieldName}`
+          "data-cy": sel("blockEditor.entityFieldsPanel.field", { name: fieldName })
         }
       )
     ] }, fieldName);
@@ -106,7 +107,7 @@ function EntityFieldsSidebar({
     const newCategories = currentCategories.includes(categoryId) ? currentCategories.filter((id) => id !== categoryId) : [...currentCategories, categoryId];
     onChange("categories", newCategories);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col bg-card", "data-cy": "entity-fields-sidebar", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col bg-card", "data-cy": sel("blockEditor.entityFieldsPanel.container"), children: [
     /* @__PURE__ */ jsxs("div", { className: "border-b p-4", children: [
       /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: t("sidebar.fieldsTitle") }),
       /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("sidebar.fieldsDescription") })
@@ -118,18 +119,19 @@ function EntityFieldsSidebar({
           /* @__PURE__ */ jsx(Tag, { className: "h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsx(Label, { children: firstTaxonomy.label || "Categories" })
         ] }),
-        taxonomyLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : taxonomyItems.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("sidebar.noCategories") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: taxonomyItems.map((item) => /* @__PURE__ */ jsxs(
+        taxonomyLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : taxonomyItems.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("sidebar.noCategories") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", "data-cy": sel("blockEditor.entityFieldsPanel.categoryList"), children: taxonomyItems.map((item) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: "flex items-center gap-2 rounded-md border p-2 hover:bg-accent transition-colors cursor-pointer",
             onClick: () => handleCategoryClick(item.id),
-            "data-cy": `category-${item.slug}`,
+            "data-cy": sel("blockEditor.entityFieldsPanel.categoryItem", { slug: item.slug }),
             children: [
               /* @__PURE__ */ jsx(
                 Checkbox,
                 {
                   checked: currentCategories.includes(item.id),
-                  onCheckedChange: () => handleCategoryClick(item.id)
+                  onCheckedChange: () => handleCategoryClick(item.id),
+                  "data-cy": sel("blockEditor.entityFieldsPanel.categoryCheckbox", { slug: item.slug })
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "text-sm flex-1", children: item.name }),
@@ -153,6 +155,7 @@ function EntityFieldsSidebar({
               className: "cursor-pointer",
               onClick: () => handleCategoryClick(cat.id),
               style: cat.color ? { backgroundColor: cat.color, color: "#fff" } : void 0,
+              "data-cy": sel("blockEditor.entityFieldsPanel.categoryBadge", { slug: cat.slug }),
               children: [
                 cat.name,
                 " \xD7"

package/dist/components/dashboard/block-editor/floating-block-toolbar.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Copy, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+import { BLOCK_REGISTRY } from "@nextsparkjs/registries/block-registry";
+function FloatingBlockToolbar({
+  blockId,
+  blockSlug,
+  isVisible,
+  onDuplicate,
+  onRemove
+}) {
+  const t = useTranslations("admin.builder.floatingToolbar");
+  const blockConfig = BLOCK_REGISTRY[blockSlug];
+  const blockName = (blockConfig == null ? void 0 : blockConfig.name) || blockSlug;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute -top-3 left-1/2 -translate-x-1/2 z-10",
+        "bg-primary text-primary-foreground rounded-full",
+        "px-3 py-1 text-xs font-medium shadow-lg",
+        "flex items-center gap-3",
+        "transition-[opacity,transform] duration-200",
+        isVisible ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-2 pointer-events-none"
+      ),
+      "data-cy": sel("blockEditor.previewCanvas.floatingToolbar.container", { id: blockId }),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "uppercase tracking-wider text-[10px]",
+            "data-cy": sel("blockEditor.previewCanvas.floatingToolbar.blockName", { id: blockId }),
+            children: blockName
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-3 w-px bg-primary-foreground/30",
+            "data-cy": sel("blockEditor.previewCanvas.floatingToolbar.divider", { id: blockId })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-5 w-5 hover:bg-primary-foreground/20 text-primary-foreground",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDuplicate();
+            },
+            "data-cy": sel("blockEditor.previewCanvas.floatingToolbar.duplicateBtn", { id: blockId }),
+            title: t("duplicate"),
+            children: /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-5 w-5 hover:bg-destructive/20 text-primary-foreground",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            "data-cy": sel("blockEditor.previewCanvas.floatingToolbar.deleteBtn", { id: blockId }),
+            title: t("delete"),
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  FloatingBlockToolbar
+};

package/dist/components/dashboard/block-editor/page-settings-panel.js

@@ -2,18 +2,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
 import { useTranslations } from "next-intl";
-import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
-import { Input } from "../../ui/input";
-import { Label } from "../../ui/label";
-import { Textarea } from "../../ui/textarea";
-import { Button } from "../../ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Button } from "../../ui/button.js";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger
-} from "../../ui/accordion";
+} from "../../ui/accordion.js";
 import { Search, Settings2, Plus, Trash2 } from "lucide-react";
+import { sel } from "../../../lib/test/index.js";
 function PageSettingsPanel({ settings, onChange }) {
   var _a;
   const t = useTranslations("admin.pages.settings");
@@ -47,7 +48,7 @@ function PageSettingsPanel({ settings, onChange }) {
     setCustomFields(newFields);
     onChange({ seo, customFields: newFields });
   }, [seo, customFields, onChange]);
-  return /* @__PURE__ */ jsxs("div", { className: "mt-16", "data-cy": "page-settings-panel", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mt-16", "data-cy": sel("blockEditor.entityMetaPanel.container"), children: [
     /* @__PURE__ */ jsx("hr", { className: "border-border/50 mb-6" }),
     /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-base font-medium flex items-center gap-2", children: [
@@ -56,7 +57,7 @@ function PageSettingsPanel({ settings, onChange }) {
       ] }) }),
       /* @__PURE__ */ jsx(CardContent, { className: "pt-0", children: /* @__PURE__ */ jsxs(Accordion, { type: "multiple", defaultValue: ["seo"], className: "w-full", children: [
         /* @__PURE__ */ jsxs(AccordionItem, { value: "seo", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { className: "py-3", "data-cy": "seo-settings-trigger", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { className: "py-3", "data-cy": sel("blockEditor.entityMetaPanel.seoSection.trigger"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-muted-foreground" }),
             /* @__PURE__ */ jsx("span", { children: t("seo.title") })
           ] }) }),
@@ -70,7 +71,7 @@ function PageSettingsPanel({ settings, onChange }) {
                   value: seo.metaTitle || "",
                   onChange: (e) => handleSeoChange("metaTitle", e.target.value),
                   placeholder: t("seo.metaTitlePlaceholder"),
-                  "data-cy": "seo-meta-title"
+                  "data-cy": sel("blockEditor.entityMetaPanel.seoSection.metaTitle")
                 }
               ),
               /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("seo.metaTitleHint") })
@@ -85,7 +86,7 @@ function PageSettingsPanel({ settings, onChange }) {
                   onChange: (e) => handleSeoChange("metaDescription", e.target.value),
                   placeholder: t("seo.metaDescriptionPlaceholder"),
                   rows: 3,
-                  "data-cy": "seo-meta-description"
+                  "data-cy": sel("blockEditor.entityMetaPanel.seoSection.metaDescription")
                 }
               ),
               /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
@@ -103,7 +104,7 @@ function PageSettingsPanel({ settings, onChange }) {
                   value: seo.metaKeywords || "",
                   onChange: (e) => handleSeoChange("metaKeywords", e.target.value),
                   placeholder: t("seo.metaKeywordsPlaceholder"),
-                  "data-cy": "seo-meta-keywords"
+                  "data-cy": sel("blockEditor.entityMetaPanel.seoSection.metaKeywords")
                 }
               ),
               /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("seo.metaKeywordsHint") })
@@ -117,7 +118,7 @@ function PageSettingsPanel({ settings, onChange }) {
                   value: seo.ogImage || "",
                   onChange: (e) => handleSeoChange("ogImage", e.target.value),
                   placeholder: t("seo.ogImagePlaceholder"),
-                  "data-cy": "seo-og-image"
+                  "data-cy": sel("blockEditor.entityMetaPanel.seoSection.ogImage")
                 }
               ),
               /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("seo.ogImageHint") })
@@ -125,7 +126,7 @@ function PageSettingsPanel({ settings, onChange }) {
           ] }) })
         ] }),
         /* @__PURE__ */ jsxs(AccordionItem, { value: "custom-fields", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { className: "py-3", "data-cy": "custom-fields-trigger", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { className: "py-3", "data-cy": sel("blockEditor.entityMetaPanel.customFields.trigger"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4 text-muted-foreground" }),
             /* @__PURE__ */ jsx("span", { children: t("customFields.title") })
           ] }) }),
@@ -138,7 +139,7 @@ function PageSettingsPanel({ settings, onChange }) {
                   onChange: (e) => handleUpdateCustomField(index, "key", e.target.value),
                   placeholder: t("customFields.keyPlaceholder"),
                   className: "font-mono text-sm",
-                  "data-cy": `custom-field-key-${index}`
+                  "data-cy": sel("blockEditor.entityMetaPanel.customFields.fieldKey", { index })
                 }
               ) }),
               /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
@@ -147,7 +148,7 @@ function PageSettingsPanel({ settings, onChange }) {
                   value: field.value,
                   onChange: (e) => handleUpdateCustomField(index, "value", e.target.value),
                   placeholder: t("customFields.valuePlaceholder"),
-                  "data-cy": `custom-field-value-${index}`
+                  "data-cy": sel("blockEditor.entityMetaPanel.customFields.fieldValue", { index })
                 }
               ) }),
               /* @__PURE__ */ jsx(
@@ -157,7 +158,7 @@ function PageSettingsPanel({ settings, onChange }) {
                   size: "icon",
                   className: "shrink-0 text-muted-foreground hover:text-destructive",
                   onClick: () => handleRemoveCustomField(index),
-                  "data-cy": `custom-field-remove-${index}`,
+                  "data-cy": sel("blockEditor.entityMetaPanel.customFields.fieldRemove", { index }),
                   children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
                 }
               )
@@ -169,7 +170,7 @@ function PageSettingsPanel({ settings, onChange }) {
                 size: "sm",
                 onClick: handleAddCustomField,
                 className: "w-full",
-                "data-cy": "add-custom-field",
+                "data-cy": sel("blockEditor.entityMetaPanel.customFields.addButton"),
                 children: [
                   /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
                   t("customFields.add")

package/dist/components/dashboard/block-editor/pattern-card.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { Layers, Plus } from "lucide-react";
+import { sel } from "../../../lib/test/index.js";
+function PatternCard({ pattern, onSelect }) {
+  const t = useTranslations("patterns");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "group relative bg-background border border-border rounded-lg p-3 hover:border-primary hover:shadow-md transition-[border-color,box-shadow] cursor-pointer",
+      onClick: () => onSelect(pattern.id),
+      "data-cy": sel("blockEditor.blockPicker.patternCard", { id: pattern.id }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "w-6 h-6 rounded bg-primary/10 text-primary flex items-center justify-center",
+                "data-cy": sel("blockEditor.blockPicker.patternCardIcon", { id: pattern.id }),
+                children: /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "font-medium text-sm text-foreground",
+                "data-cy": sel("blockEditor.blockPicker.patternCardTitle", { id: pattern.id }),
+                children: pattern.title
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "text-[10px] uppercase font-bold text-muted-foreground bg-muted px-1.5 py-0.5 rounded",
+              "data-cy": sel("blockEditor.blockPicker.patternCardBlockCount", { id: pattern.id }),
+              children: [
+                pattern.blocks.length,
+                " ",
+                pattern.blocks.length === 1 ? "block" : "blocks"
+              ]
+            }
+          )
+        ] }),
+        pattern.description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-xs text-muted-foreground line-clamp-2",
+            "data-cy": sel("blockEditor.blockPicker.patternCardDescription", { id: pattern.id }),
+            children: pattern.description
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "w-6 h-6 bg-foreground text-background rounded flex items-center justify-center text-xs shadow-md hover:scale-110 transition-transform cursor-pointer",
+            onClick: (e) => {
+              e.stopPropagation();
+              onSelect(pattern.id);
+            },
+            "data-cy": sel("blockEditor.blockPicker.patternCardInsertButton", { id: pattern.id }),
+            title: t("picker.selectPattern"),
+            children: /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  PatternCard
+};