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

package/dist/components/dashboard/block-editor/block-picker.d.ts

@@ -1,4 +1,5 @@
-import type { BlockConfig } from '../../../types/blocks';
+import type { BlockConfig, BlockInstance } from '../../../types/blocks';
+import type { PatternReference } from '../../../types/pattern-reference';
 import type { ClientEntityConfig } from '@nextsparkjs/registries/entity-registry.client';
 interface BlockPickerProps {
     blocks: BlockConfig[];
@@ -9,7 +10,11 @@ interface BlockPickerProps {
     onEntityFieldChange: (field: string, value: unknown) => void;
     showFieldsTab: boolean;
     showPatternsTab?: boolean;
+    pageBlocks: (BlockInstance | PatternReference)[];
+    selectedBlockId: string | null;
+    onSelectBlock: (id: string) => void;
+    onReorderBlocks: (blocks: (BlockInstance | PatternReference)[]) => void;
 }
-export declare function BlockPicker({ blocks, onAddBlock, onAddPattern, entityConfig, entityFields, onEntityFieldChange, showFieldsTab, showPatternsTab, }: BlockPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlockPicker({ blocks, onAddBlock, onAddPattern, entityConfig, entityFields, onEntityFieldChange, showFieldsTab, showPatternsTab, pageBlocks, selectedBlockId, onSelectBlock, onReorderBlocks, }: BlockPickerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=block-picker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"block-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/block-picker.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAA;AAuBxF,UAAU,gBAAgB;IACxB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,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,aAAa,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,eAAuB,GACxB,EAAE,gBAAgB,2CA+TlB"}
+{"version":3,"file":"block-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/block-picker.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAA;AAuBxF,UAAU,gBAAgB;IACxB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,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,aAAa,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,UAAU,EAAE,CAAC,aAAa,GAAG,gBAAgB,CAAC,EAAE,CAAA;IAChD,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,eAAe,EAAE,CAAC,MAAM,EAAE,CAAC,aAAa,GAAG,gBAAgB,CAAC,EAAE,KAAK,IAAI,CAAA;CACxE;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,eAAuB,EAEvB,UAAU,EACV,eAAe,EACf,aAAa,EACb,eAAe,GAChB,EAAE,gBAAgB,2CAgUlB"}

package/dist/components/dashboard/block-editor/block-picker.js

@@ -3,13 +3,13 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { useTranslations } from "next-intl";
 import { useQuery } from "@tanstack/react-query";
-import { Search, Plus, LayoutGrid, Settings2, Layers } from "lucide-react";
+import { Search, Plus, LayoutGrid, LayoutList, Layers } from "lucide-react";
 import { Input } from "../../ui/input.js";
 import { ScrollArea } from "../../ui/scroll-area.js";
 import { cn } from "../../../lib/utils.js";
 import { sel } from "../../../lib/test/index.js";
 import { getCategoryConfig } from "./category-helpers.js";
-import { EntityFieldsSidebar } from "./entity-fields-sidebar.js";
+import { TreeView } from "./tree-view.js";
 import { PatternCard } from "./pattern-card.js";
 function getTeamId() {
   if (typeof window !== "undefined") {
@@ -33,7 +33,12 @@ function BlockPicker({
   entityFields,
   onEntityFieldChange,
   showFieldsTab,
-  showPatternsTab = false
+  showPatternsTab = false,
+  // TreeView props
+  pageBlocks,
+  selectedBlockId,
+  onSelectBlock,
+  onReorderBlocks
 }) {
   const t = useTranslations("admin.builder");
   const tPatterns = useTranslations("patterns");
@@ -78,7 +83,7 @@ function BlockPicker({
         "button",
         {
           className: cn(
-            "flex-1 py-3 text-sm font-medium transition-all relative",
+            "flex-1 py-3 text-sm font-medium transition-colors relative",
             activeTab === "blocks" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
           ),
           onClick: () => setActiveTab("blocks"),
@@ -100,7 +105,7 @@ function BlockPicker({
         "button",
         {
           className: cn(
-            "flex-1 py-3 text-sm font-medium transition-all relative",
+            "flex-1 py-3 text-sm font-medium transition-colors relative",
             activeTab === "patterns" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
           ),
           onClick: () => setActiveTab("patterns"),
@@ -112,19 +117,19 @@ function BlockPicker({
           ]
         }
       ),
-      showFieldsTab && /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxs(
         "button",
         {
           className: cn(
-            "flex-1 py-3 text-sm font-medium transition-all relative",
-            activeTab === "config" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            "flex-1 py-3 text-sm font-medium transition-colors relative",
+            activeTab === "layout" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
           ),
-          onClick: () => setActiveTab("config"),
-          "data-cy": sel("blockEditor.blockPicker.tabConfig"),
+          onClick: () => setActiveTab("layout"),
+          "data-cy": sel("blockEditor.blockPicker.tabLayout"),
           children: [
-            /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4 inline mr-2" }),
-            t("sidebar.tabs.config"),
-            activeTab === "config" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary" })
+            /* @__PURE__ */ jsx(LayoutList, { className: "h-4 w-4 inline mr-2" }),
+            t("sidebar.tabs.layout"),
+            activeTab === "layout" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary" })
           ]
         }
       )
@@ -177,7 +182,7 @@ function BlockPicker({
                   "button",
                   {
                     className: cn(
-                      "px-2.5 py-1 text-xs font-medium rounded-md whitespace-nowrap transition-all capitalize flex items-center gap-1.5",
+                      "px-2.5 py-1 text-xs font-medium rounded-md whitespace-nowrap transition-colors capitalize flex items-center gap-1.5",
                       isActive ? `${config.bgColor} ${config.textColor} ${config.borderColor} border` : "bg-muted text-muted-foreground hover:bg-muted-foreground/20"
                     ),
                     onClick: () => setSelectedCategory(category),
@@ -200,7 +205,7 @@ function BlockPicker({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "group relative bg-background border border-border rounded-lg p-3 hover:border-primary hover:shadow-md transition-all cursor-grab active:cursor-grabbing",
+            className: "group relative bg-background border border-border rounded-lg p-3 hover:border-primary hover:shadow-md transition-[border-color,box-shadow] cursor-grab active:cursor-grabbing",
             draggable: true,
             onDragStart: (e) => {
               e.dataTransfer.setData("blockSlug", block.slug);
@@ -316,13 +321,15 @@ function BlockPicker({
         )) }) })
       ] })
     ) : (
-      // Config/Fields Tab
+      // Layout Tab - Tree View
       /* @__PURE__ */ jsx(
-        EntityFieldsSidebar,
+        TreeView,
         {
-          entityConfig,
-          fields: entityFields,
-          onChange: onEntityFieldChange
+          blocks: pageBlocks,
+          selectedBlockId,
+          onSelectBlock,
+          onReorder: onReorderBlocks,
+          emptyMessage: t("layout.empty")
         }
       )
     )

package/dist/components/dashboard/block-editor/block-preview-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-preview-canvas.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/block-preview-canvas.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAkB1D,UAAU,uBAAuB;IAC/B,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,eAAe,EACf,aAAa,EACb,QAAQ,EACR,UAAU,EACV,WAAW,EACX,QAAQ,GACT,EAAE,uBAAuB,2CAuCzB"}
+{"version":3,"file":"block-preview-canvas.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/block-preview-canvas.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAkB1D,UAAU,uBAAuB;IAC/B,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,eAAe,EACf,aAAa,EACb,QAAQ,EACR,UAAU,EACV,WAAW,EACX,QAAQ,GACT,EAAE,uBAAuB,2CA4CzB"}

package/dist/components/dashboard/block-editor/block-preview-canvas.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, useMemo, useState } from "react";
+import { Suspense, useMemo, useState, memo, useCallback } from "react";
 import { ChevronUp, ChevronDown } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Button } from "../../ui/button.js";
@@ -28,6 +28,8 @@ function BlockPreviewCanvas({
 }) {
   const t = useTranslations("admin.builder");
   const [hoveredBlockId, setHoveredBlockId] = useState(null);
+  const handleHover = useCallback((id) => setHoveredBlockId(id), []);
+  const handleLeave = useCallback(() => setHoveredBlockId(null), []);
   if (blocks.length === 0) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -47,21 +49,23 @@ function BlockPreviewCanvas({
       block,
       isSelected: selectedBlockId === block.id,
       isHovered: hoveredBlockId === block.id,
-      onSelect: () => onSelectBlock(block.id),
-      onHover: () => setHoveredBlockId(block.id),
-      onLeave: () => setHoveredBlockId(null),
+      onSelect: onSelectBlock,
+      blockId: block.id,
+      onHover: handleHover,
+      onLeave: handleLeave,
       isFirst: index === 0,
       isLast: index === blocks.length - 1,
-      onMoveUp: onMoveUp ? () => onMoveUp(block.id) : void 0,
-      onMoveDown: onMoveDown ? () => onMoveDown(block.id) : void 0,
-      onDuplicate: onDuplicate ? () => onDuplicate(block.id) : void 0,
-      onRemove: onRemove ? () => onRemove(block.id) : void 0
+      onMoveUp,
+      onMoveDown,
+      onDuplicate,
+      onRemove
     },
     block.id
   )) });
 }
-function SelectableBlockPreview({
+const SelectableBlockPreview = memo(function SelectableBlockPreview2({
   block,
+  blockId,
   isSelected,
   isHovered,
   onSelect,
@@ -75,20 +79,24 @@ function SelectableBlockPreview({
   onRemove
 }) {
   const t = useTranslations("admin.builder");
+  const handleSelect = useCallback(() => onSelect(blockId), [onSelect, blockId]);
+  const handleHover = useCallback(() => onHover(blockId), [onHover, blockId]);
+  const handleMoveUp = useCallback((e) => {
+    e.stopPropagation();
+    onMoveUp == null ? void 0 : onMoveUp(blockId);
+  }, [onMoveUp, blockId]);
+  const handleMoveDown = useCallback((e) => {
+    e.stopPropagation();
+    onMoveDown == null ? void 0 : onMoveDown(blockId);
+  }, [onMoveDown, blockId]);
+  const handleDuplicate = useCallback(() => onDuplicate == null ? void 0 : onDuplicate(blockId), [onDuplicate, blockId]);
+  const handleRemove = useCallback(() => onRemove == null ? void 0 : onRemove(blockId), [onRemove, blockId]);
   if (isPatternReference(block)) {
-    const handlePatternMoveUp = (e) => {
-      e.stopPropagation();
-      onMoveUp == null ? void 0 : onMoveUp();
-    };
-    const handlePatternMoveDown = (e) => {
-      e.stopPropagation();
-      onMoveDown == null ? void 0 : onMoveDown();
-    };
     return /* @__PURE__ */ jsxs(
       "div",
       {
         className: "relative group",
-        onMouseEnter: onHover,
+        onMouseEnter: handleHover,
         onMouseLeave: onLeave,
         children: [
           (onMoveUp || onMoveDown) && /* @__PURE__ */ jsxs("div", { className: cn(
@@ -102,7 +110,7 @@ function SelectableBlockPreview({
                 variant: "secondary",
                 size: "icon",
                 className: "h-7 w-7 shadow-md",
-                onClick: handlePatternMoveUp,
+                onClick: handleMoveUp,
                 disabled: isFirst,
                 "data-cy": sel("blockEditor.previewCanvas.moveUp", { id: block.id }),
                 children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
@@ -114,7 +122,7 @@ function SelectableBlockPreview({
                 variant: "secondary",
                 size: "icon",
                 className: "h-7 w-7 shadow-md",
-                onClick: handlePatternMoveDown,
+                onClick: handleMoveDown,
                 disabled: isLast,
                 "data-cy": sel("blockEditor.previewCanvas.moveDown", { id: block.id }),
                 children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
@@ -126,8 +134,8 @@ function SelectableBlockPreview({
             {
               patternRef: block,
               isSelected,
-              onSelect,
-              onRemove
+              onSelect: handleSelect,
+              onRemove: handleRemove
             }
           )
         ]
@@ -144,7 +152,7 @@ function SelectableBlockPreview({
       "div",
       {
         className: "w-full py-12 px-4 bg-destructive/10 border border-destructive/20",
-        onClick: onSelect,
+        onClick: handleSelect,
         children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
           t("canvas.error.blockNotFound"),
           ": ",
@@ -153,25 +161,17 @@ function SelectableBlockPreview({
       }
     );
   }
-  const handleMoveUp = (e) => {
-    e.stopPropagation();
-    onMoveUp == null ? void 0 : onMoveUp();
-  };
-  const handleMoveDown = (e) => {
-    e.stopPropagation();
-    onMoveDown == null ? void 0 : onMoveDown();
-  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "relative cursor-pointer transition-all group",
+        "relative cursor-pointer transition-[border-color] duration-150 group @container",
         "border-2 border-transparent",
         "hover:border-primary/50",
         isSelected && "border-primary"
       ),
-      onClick: onSelect,
-      onMouseEnter: onHover,
+      onClick: handleSelect,
+      onMouseEnter: handleHover,
       onMouseLeave: onLeave,
       "data-cy": sel("blockEditor.previewCanvas.block", { id: block.id }),
       children: [
@@ -181,8 +181,8 @@ function SelectableBlockPreview({
             blockId: block.id,
             blockSlug: block.blockSlug,
             isVisible: isHovered || isSelected,
-            onDuplicate,
-            onRemove
+            onDuplicate: handleDuplicate,
+            onRemove: handleRemove
           }
         ),
         isSelected && /* @__PURE__ */ jsx(
@@ -227,7 +227,7 @@ function SelectableBlockPreview({
       ]
     }
   );
-}
+});
 export {
   BlockPreviewCanvas
 };

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

@@ -158,7 +158,7 @@ function BlockSettingsPanel({
           "button",
           {
             className: cn(
-              "flex-1 py-3 text-sm font-medium transition-all relative flex items-center justify-center gap-1.5",
+              "flex-1 py-3 text-sm font-medium transition-colors relative flex items-center justify-center gap-1.5",
               activeTab === "content" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
               !hasContentFields && "opacity-50 cursor-not-allowed"
             ),
@@ -176,7 +176,7 @@ function BlockSettingsPanel({
           "button",
           {
             className: cn(
-              "flex-1 py-3 text-sm font-medium transition-all relative flex items-center justify-center gap-1.5",
+              "flex-1 py-3 text-sm font-medium transition-colors relative flex items-center justify-center gap-1.5",
               activeTab === "design" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
               !hasDesignFields && "opacity-50 cursor-not-allowed"
             ),
@@ -194,7 +194,7 @@ function BlockSettingsPanel({
           "button",
           {
             className: cn(
-              "flex-1 py-3 text-sm font-medium transition-all relative flex items-center justify-center gap-1.5",
+              "flex-1 py-3 text-sm font-medium transition-colors relative flex items-center justify-center gap-1.5",
               activeTab === "advanced" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
               !hasAdvancedFields && "opacity-50 cursor-not-allowed"
             ),

package/dist/components/dashboard/block-editor/builder-editor-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder-editor-view.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/builder-editor-view.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAA;AAwCxF,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,kBAAkB,CAAA;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,sBAAsB,2CA6oB/F"}
+{"version":3,"file":"builder-editor-view.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/builder-editor-view.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAA;AAwCxF,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,kBAAkB,CAAA;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,sBAAsB,2CA2rB/F"}