@nextsparkjs/core 0.1.0-beta.67 → 0.1.0-beta.68

package/dist/components/dashboard/block-editor/builder-editor-view.js

@@ -8,16 +8,16 @@ import { v4 as uuidv4 } from "uuid";
 import { Button } from "../../ui/button.js";
 import { Input } from "../../ui/input.js";
 import { Separator } from "../../ui/separator.js";
-import { ArrowLeft, Save, ExternalLink, Eye, PenTool, Settings } from "lucide-react";
+import { ArrowLeft, Save, ExternalLink, Eye, Settings } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
 import { sel } from "../../../lib/test/index.js";
 import { BlockPicker } from "./block-picker.js";
-import { BlockCanvas } from "./block-canvas.js";
 import { BlockPreviewCanvas } from "./block-preview-canvas.js";
 import { BlockSettingsPanel } from "./block-settings-panel.js";
-import { PageSettingsPanel } from "./page-settings-panel.js";
 import { BlockService } from "../../../lib/services/block.service.js";
+import { ViewportToggle } from "./viewport-toggle.js";
+import { ConfigPanel } from "./config-panel.js";
 import { useSidebar } from "../../../contexts/sidebar-context.js";
 import { cn } from "../../../lib/utils.js";
 function getTeamId() {
@@ -42,7 +42,7 @@ function slugify(text) {
   return text.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9\s-]/g, "").trim().replace(/\s+/g, "-").replace(/-+/g, "-");
 }
 function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
-  var _a, _b;
+  var _a;
   const router = useRouter();
   const t = useTranslations("admin.builder");
   const queryClient = useQueryClient();
@@ -55,6 +55,7 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
   const [status, setStatus] = useState("draft");
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [viewMode, setViewMode] = useState("preview");
+  const [viewportMode, setViewportMode] = useState("desktop");
   const [leftSidebarMode, setLeftSidebarMode] = useState("blocks");
   const [pageSettings, setPageSettings] = useState({
     seo: {},
@@ -64,8 +65,8 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
   const [validationErrors, setValidationErrors] = useState({});
   const titleInputRef = useRef(null);
   const showFieldsOption = useMemo(() => {
-    var _a2, _b2, _c;
-    return (((_b2 = (_a2 = entityConfig.builder) == null ? void 0 : _a2.sidebarFields) == null ? void 0 : _b2.length) ?? 0) > 0 || ((_c = entityConfig.taxonomies) == null ? void 0 : _c.enabled);
+    var _a2, _b, _c;
+    return (((_b = (_a2 = entityConfig.builder) == null ? void 0 : _a2.sidebarFields) == null ? void 0 : _b.length) ?? 0) > 0 || ((_c = entityConfig.taxonomies) == null ? void 0 : _c.enabled);
   }, [entityConfig]);
   const showPatternsTab = useMemo(() => {
     return entitySlug !== "patterns";
@@ -94,7 +95,7 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
     enabled: mode === "edit" && !!id
   });
   useEffect(() => {
-    var _a2, _b2;
+    var _a2, _b;
     if (mode === "edit" && (entityData == null ? void 0 : entityData.data)) {
       const entity = entityData.data;
       setTitle(entity.title ?? "");
@@ -104,7 +105,7 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
       setBlocks(entity.blocks || []);
       setPageSettings(entity.settings || { seo: {}, customFields: [] });
       const fields = {};
-      (_b2 = (_a2 = entityConfig.builder) == null ? void 0 : _a2.sidebarFields) == null ? void 0 : _b2.forEach((field) => {
+      (_b = (_a2 = entityConfig.builder) == null ? void 0 : _a2.sidebarFields) == null ? void 0 : _b.forEach((field) => {
         if (entity[field] !== void 0) {
           fields[field] = entity[field];
         }
@@ -113,7 +114,7 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
     }
   }, [entityData, entityConfig, mode]);
   useEffect(() => {
-    var _a2, _b2;
+    var _a2, _b;
     if (mode === "create") {
       setHasUnsavedChanges(title.length > 0 || blocks.length > 0 || status !== "draft");
       return;
@@ -121,7 +122,7 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
     if (!(entityData == null ? void 0 : entityData.data)) return;
     const entity = entityData.data;
     const hasChanges = title !== entity.title || slug !== entity.slug || status !== (entity.status || "draft") || JSON.stringify(blocks) !== JSON.stringify(entity.blocks || []) || JSON.stringify(pageSettings) !== JSON.stringify(entity.settings || { seo: {}, customFields: [] }) || JSON.stringify(entityFields) !== JSON.stringify(
-      ((_b2 = (_a2 = entityConfig.builder) == null ? void 0 : _a2.sidebarFields) == null ? void 0 : _b2.reduce((acc, field) => {
+      ((_b = (_a2 = entityConfig.builder) == null ? void 0 : _a2.sidebarFields) == null ? void 0 : _b.reduce((acc, field) => {
         if (entity[field] !== void 0) acc[field] = entity[field];
         return acc;
       }, {})) || {}
@@ -238,9 +239,19 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
       blockSlug,
       props: {}
     };
+    if (selectedBlockId) {
+      const index = blocks.findIndex((b) => b.id === selectedBlockId);
+      if (index !== -1) {
+        const newBlocks = [...blocks];
+        newBlocks.splice(index + 1, 0, newBlock);
+        setBlocks(newBlocks);
+        setSelectedBlockId(newBlock.id);
+        return;
+      }
+    }
     setBlocks((prev) => [...prev, newBlock]);
     setSelectedBlockId(newBlock.id);
-  }, []);
+  }, [blocks, selectedBlockId]);
   const handleAddPattern = useCallback((patternId) => {
     const patternRef = {
       type: "pattern",
@@ -278,7 +289,7 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
     ));
   }, []);
   const handleReorderBlocks = useCallback((newBlocks) => {
-    setBlocks(newBlocks);
+    setBlocks(newBlocks.filter((b) => !("ref" in b)));
   }, []);
   const handleMoveBlockUp = useCallback((blockId) => {
     setBlocks((prev) => {
@@ -308,11 +319,17 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
       setLeftSidebarMode(value);
     }
   }, [leftSidebarMode]);
+  const handleViewModeChange = useCallback((mode2) => {
+    setViewMode(mode2);
+    if (mode2 === "settings") {
+      setSelectedBlockId(null);
+    }
+  }, []);
   const selectedBlock = selectedBlockId ? blocks.find((b) => b.id === selectedBlockId) : void 0;
   const publicUrl = useMemo(() => {
-    var _a2, _b2, _c;
+    var _a2, _b, _c;
     if (status !== "published" || !slug) return null;
-    const basePath = ((_a2 = entityConfig.access) == null ? void 0 : _a2.basePath) ?? ((_c = (_b2 = entityConfig.builder) == null ? void 0 : _b2.public) == null ? void 0 : _c.basePath) ?? "";
+    const basePath = ((_a2 = entityConfig.access) == null ? void 0 : _a2.basePath) ?? ((_c = (_b = entityConfig.builder) == null ? void 0 : _b.public) == null ? void 0 : _c.basePath) ?? "";
     return basePath === "/" ? `/${slug}` : `${basePath}/${slug}`;
   }, [status, slug, entityConfig]);
   const leftSidebarOptions = useMemo(() => {
@@ -344,7 +361,7 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("loading") }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: cn(
-    "fixed inset-0 pt-14 pb-20 lg:top-16 lg:pt-0 lg:pb-0 flex flex-col bg-background z-20 transition-all duration-300",
+    "fixed inset-0 pt-14 pb-20 lg:top-16 lg:pt-0 lg:pb-0 flex flex-col bg-background z-20 transition-[width,padding] duration-300",
     isCollapsed ? "lg:left-16" : "lg:left-64"
   ), "data-cy": sel("blockEditor.container"), children: [
     /* @__PURE__ */ jsx(
@@ -438,45 +455,54 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "bg-muted p-1 rounded-lg flex items-center text-sm font-medium",
-              "data-cy": sel("blockEditor.header.viewToggle"),
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: cn(
-                      "px-3 py-1.5 rounded-md transition-all flex items-center gap-2",
-                      viewMode === "layout" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
-                    ),
-                    onClick: () => setViewMode("layout"),
-                    "data-cy": sel("blockEditor.header.viewEditor"),
-                    children: [
-                      /* @__PURE__ */ jsx(PenTool, { className: "h-3.5 w-3.5" }),
-                      /* @__PURE__ */ jsx("span", { children: t("viewMode.layout") })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: cn(
-                      "px-3 py-1.5 rounded-md transition-all flex items-center gap-2",
-                      viewMode === "preview" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
-                    ),
-                    onClick: () => setViewMode("preview"),
-                    "data-cy": sel("blockEditor.header.viewPreview"),
-                    children: [
-                      /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
-                      /* @__PURE__ */ jsx("span", { children: t("viewMode.preview") })
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "bg-muted p-1 rounded-lg flex items-center text-sm font-medium",
+                "data-cy": sel("blockEditor.header.viewToggle"),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      className: cn(
+                        "px-3 py-1.5 rounded-md transition-colors flex items-center gap-2",
+                        viewMode === "preview" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
+                      ),
+                      onClick: () => handleViewModeChange("preview"),
+                      "data-cy": sel("blockEditor.header.viewPreview"),
+                      children: [
+                        /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
+                        /* @__PURE__ */ jsx("span", { children: t("viewMode.preview") })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      className: cn(
+                        "px-3 py-1.5 rounded-md transition-colors flex items-center gap-2",
+                        viewMode === "settings" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
+                      ),
+                      onClick: () => handleViewModeChange("settings"),
+                      "data-cy": sel("blockEditor.header.viewSettings"),
+                      children: [
+                        /* @__PURE__ */ jsx(Settings, { className: "h-3.5 w-3.5" }),
+                        /* @__PURE__ */ jsx("span", { children: t("viewMode.settings") })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            viewMode === "preview" && /* @__PURE__ */ jsx(
+              ViewportToggle,
+              {
+                value: viewportMode,
+                onChange: setViewportMode
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 justify-end", children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -557,42 +583,58 @@ function BuilderEditorView({ entitySlug, entityConfig, id, mode }) {
           entityFields,
           onEntityFieldChange: handleEntityFieldChange,
           showFieldsTab: !!showFieldsOption,
-          showPatternsTab
+          showPatternsTab,
+          pageBlocks: blocks,
+          selectedBlockId,
+          onSelectBlock: setSelectedBlockId,
+          onReorderBlocks: handleReorderBlocks
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto bg-gray-100", children: viewMode === "layout" ? /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden", children: [
         /* @__PURE__ */ jsx(
-          BlockCanvas,
+          "div",
           {
-            blocks,
-            selectedBlockId,
-            onSelectBlock: setSelectedBlockId,
-            onRemoveBlock: handleRemoveBlock,
-            onDuplicateBlock: handleDuplicateBlock,
-            onReorder: handleReorderBlocks,
-            onUpdateProps: handleUpdateBlockProps,
-            onAddBlock: handleAddBlock
+            className: cn(
+              "h-full overflow-y-auto bg-muted/30",
+              viewMode !== "preview" && "hidden"
+            ),
+            "data-cy": sel("blockEditor.previewCanvas.container"),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "mx-auto transition-[width] duration-200 min-h-full",
+                style: {
+                  width: viewportMode === "mobile" ? "375px" : "100%",
+                  maxWidth: "100%"
+                },
+                "data-cy": sel("blockEditor.previewCanvas.viewport", { mode: viewportMode }),
+                children: /* @__PURE__ */ jsx("div", { className: "min-h-full bg-background", children: /* @__PURE__ */ jsx(
+                  BlockPreviewCanvas,
+                  {
+                    blocks,
+                    selectedBlockId,
+                    onSelectBlock: setSelectedBlockId,
+                    onMoveUp: handleMoveBlockUp,
+                    onMoveDown: handleMoveBlockDown,
+                    onDuplicate: handleDuplicateBlock,
+                    onRemove: handleRemoveBlock
+                  }
+                ) })
+              }
+            )
           }
         ),
-        ((_b = entityConfig.builder) == null ? void 0 : _b.seo) && /* @__PURE__ */ jsx(
-          PageSettingsPanel,
+        /* @__PURE__ */ jsx("div", { className: cn(viewMode !== "settings" && "hidden"), children: /* @__PURE__ */ jsx(
+          ConfigPanel,
           {
-            settings: pageSettings,
-            onChange: setPageSettings
+            entityConfig,
+            entityFields,
+            onEntityFieldChange: handleEntityFieldChange,
+            pageSettings,
+            onPageSettingsChange: setPageSettings
           }
-        )
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "bg-background", children: /* @__PURE__ */ jsx(
-        BlockPreviewCanvas,
-        {
-          blocks,
-          selectedBlockId,
-          onSelectBlock: setSelectedBlockId,
-          onMoveUp: handleMoveBlockUp,
-          onMoveDown: handleMoveBlockDown,
-          onDuplicate: handleDuplicateBlock,
-          onRemove: handleRemoveBlock
-        }
-      ) }) }),
+        ) })
+      ] }),
       /* @__PURE__ */ jsx("div", { className: "w-96 border-l overflow-hidden shadow-sm", children: /* @__PURE__ */ jsx(
         BlockSettingsPanel,
         {

package/dist/components/dashboard/block-editor/config-panel.d.ts

@@ -0,0 +1,18 @@
+import type { ClientEntityConfig } from '@nextsparkjs/registries/entity-registry.client';
+import type { PageSettings } from './page-settings-panel';
+interface ConfigPanelProps {
+    entityConfig: ClientEntityConfig;
+    entityFields: Record<string, unknown>;
+    onEntityFieldChange: (field: string, value: unknown) => void;
+    pageSettings: PageSettings;
+    onPageSettingsChange: (settings: PageSettings) => void;
+}
+/**
+ * ConfigPanel - Settings view for the center column
+ *
+ * Combines entity fields and SEO/meta settings in a single scrollable panel
+ * with two collapsible sections.
+ */
+export declare function ConfigPanel({ entityConfig, entityFields, onEntityFieldChange, pageSettings, onPageSettingsChange }: ConfigPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=config-panel.d.ts.map

package/dist/components/dashboard/block-editor/config-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/config-panel.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAA;AACxF,OAAO,KAAK,EAAE,YAAY,EAAoC,MAAM,uBAAuB,CAAA;AAS3F,UAAU,gBAAgB;IACxB,YAAY,EAAE,kBAAkB,CAAA;IAChC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5D,YAAY,EAAE,YAAY,CAAA;IAC1B,oBAAoB,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;CACvD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACrB,EAAE,gBAAgB,2CAyZlB"}