@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.82

package/dist/components/dashboard/block-editor/pattern-reference-preview.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { Layers, X } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+import { getBlockComponent, normalizeBlockProps } from "../../../lib/blocks/loader.js";
+function PatternLoadingSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "w-full py-12 px-4 animate-pulse bg-muted/20 border-2 border-dashed border-muted-foreground/30 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-3/4 mb-4" }),
+    /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-full mb-2" }),
+    /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-5/6" })
+  ] }) });
+}
+function BlockSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "w-full py-12 px-4 animate-pulse", children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-3/4 mb-4" }),
+    /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-full mb-2" }),
+    /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-5/6" })
+  ] }) });
+}
+function getTeamId() {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem("activeTeamId");
+  }
+  return null;
+}
+function buildApiHeaders() {
+  const headers = {};
+  const teamId = getTeamId();
+  if (teamId) {
+    headers["x-team-id"] = teamId;
+  }
+  return headers;
+}
+function PatternReferencePreview({
+  patternRef,
+  isSelected,
+  onSelect,
+  onRemove
+}) {
+  var _a;
+  const t = useTranslations("patterns");
+  const { data: patternData, isLoading, isError } = useQuery({
+    queryKey: ["patterns", patternRef.ref],
+    queryFn: async () => {
+      const response = await fetch(`/api/v1/patterns/${patternRef.ref}`, {
+        headers: buildApiHeaders()
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch pattern: ${response.statusText}`);
+      }
+      return response.json();
+    },
+    staleTime: 1e3 * 60 * 5
+    // 5 minutes
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(PatternLoadingSkeleton, {});
+  }
+  if (isError || !(patternData == null ? void 0 : patternData.data)) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-full py-12 px-4 bg-destructive/10 border-2 border-dashed border-destructive/20 rounded-lg",
+        onClick: onSelect,
+        "data-cy": sel("blockEditor.patternReference.container", { ref: patternRef.ref }),
+        children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-destructive", children: t("messages.notFound") }),
+          onRemove && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "mt-4",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              "data-cy": sel("blockEditor.patternReference.remove", { ref: patternRef.ref }),
+              children: t("actions.removeReference")
+            }
+          )
+        ] })
+      }
+    );
+  }
+  const pattern = patternData.data;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative cursor-pointer transition-[border-color] duration-150",
+        "border-2 rounded-lg overflow-hidden",
+        isSelected ? "border-primary border-solid" : "border-dashed border-muted-foreground/30",
+        "hover:border-primary/50"
+      ),
+      onClick: onSelect,
+      "data-cy": sel("blockEditor.patternReference.container", { ref: patternRef.ref }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute bottom-2 left-2 z-20 bg-primary text-primary-foreground text-xs px-2 py-1 rounded shadow-md flex items-center gap-1",
+            "data-cy": sel("blockEditor.patternReference.badge", { ref: patternRef.ref }),
+            children: [
+              /* @__PURE__ */ jsx(Layers, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                t("labels.patternPrefix"),
+                ": ",
+                pattern.title
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute top-2 right-2 z-20 flex items-center gap-2 transition-opacity",
+              isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  className: "h-6 text-xs shadow-md",
+                  asChild: true,
+                  onClick: (e) => e.stopPropagation(),
+                  "data-cy": sel("blockEditor.patternReference.editLink", { ref: patternRef.ref }),
+                  children: /* @__PURE__ */ jsxs(Link, { href: `/dashboard/patterns/${patternRef.ref}/edit`, target: "_blank", rel: "noopener noreferrer", children: [
+                    t("actions.editPattern"),
+                    " \u2192"
+                  ] })
+                }
+              ),
+              onRemove && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "destructive",
+                  size: "icon",
+                  className: "h-6 w-6 shadow-md",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                  },
+                  "data-cy": sel("blockEditor.patternReference.remove", { ref: patternRef.ref }),
+                  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none", children: [
+          (_a = pattern.blocks) == null ? void 0 : _a.map((block) => {
+            const BlockComponent = getBlockComponent(block.blockSlug);
+            if (!BlockComponent) {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-full py-8 px-4 bg-destructive/10 border border-destructive/20",
+                  children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive text-sm", children: [
+                    "Block not found: ",
+                    /* @__PURE__ */ jsx("code", { className: "font-mono", children: block.blockSlug })
+                  ] }) })
+                },
+                block.id
+              );
+            }
+            const normalizedProps = normalizeBlockProps(block.props);
+            return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(BlockSkeleton, {}), children: /* @__PURE__ */ jsx(BlockComponent, { ...normalizedProps }) }, block.id);
+          }),
+          (!pattern.blocks || pattern.blocks.length === 0) && /* @__PURE__ */ jsx("div", { className: "w-full py-12 px-4 text-center text-muted-foreground text-sm", children: t("messages.emptyPattern") })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  PatternReferencePreview
+};

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

@@ -1 +1 @@
-{"version":3,"file":"sortable-block.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/sortable-block.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAI1D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,aAAa,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CA6HpB"}
+{"version":3,"file":"sortable-block.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/sortable-block.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAK1D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,aAAa,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CA6HpB"}

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

@@ -3,12 +3,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useTranslations } from "next-intl";
-import { Button } from "../../ui/button";
-import { Card, CardContent } from "../../ui/card";
-import { Badge } from "../../ui/badge";
+import { Button } from "../../ui/button.js";
+import { Card, CardContent } from "../../ui/card.js";
+import { Badge } from "../../ui/badge.js";
 import { GripVertical, Copy, Trash2 } from "lucide-react";
 import { BLOCK_REGISTRY } from "@nextsparkjs/registries/block-registry";
-import { cn } from "../../../lib/utils";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
 function SortableBlock({
   block,
   isSelected,
@@ -31,7 +32,7 @@ function SortableBlock({
   };
   const blockConfig = BLOCK_REGISTRY[block.blockSlug];
   if (!blockConfig) {
-    return /* @__PURE__ */ jsx(Card, { className: "border-destructive", "data-cy": `block-error-${block.id}`, children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: t("error.notFound", { slug: block.blockSlug }) }) }) });
+    return /* @__PURE__ */ jsx(Card, { className: "border-destructive", "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.error", { id: block.id }), children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: t("error.notFound", { slug: block.blockSlug }) }) }) });
   }
   return /* @__PURE__ */ jsx(
     "div",
@@ -42,12 +43,12 @@ function SortableBlock({
         "group relative",
         isDragging && "opacity-50"
       ),
-      "data-cy": `sortable-block-${block.id}`,
+      "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.container", { id: block.id }),
       children: /* @__PURE__ */ jsx(
         Card,
         {
           className: cn(
-            "cursor-pointer transition-all",
+            "cursor-pointer transition-shadow duration-150",
             isSelected && "ring-2 ring-primary ring-offset-2",
             "hover:shadow-md"
           ),
@@ -59,7 +60,7 @@ function SortableBlock({
                 ...attributes,
                 ...listeners,
                 className: "mt-1 cursor-grab active:cursor-grabbing focus:outline-none focus:ring-2 focus:ring-primary rounded p-1",
-                "data-cy": `drag-handle-${block.id}`,
+                "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.dragHandle", { id: block.id }),
                 children: /* @__PURE__ */ jsx(GripVertical, { className: "h-5 w-5 text-muted-foreground" })
               }
             ),
@@ -94,7 +95,7 @@ function SortableBlock({
                     e.stopPropagation();
                     onDuplicate();
                   },
-                  "data-cy": `duplicate-block-${block.id}`,
+                  "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.duplicateBtn", { id: block.id }),
                   children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
                 }
               ),
@@ -108,7 +109,7 @@ function SortableBlock({
                     onRemove();
                   },
                   className: "text-destructive hover:text-destructive",
-                  "data-cy": `remove-block-${block.id}`,
+                  "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.removeBtn", { id: block.id }),
                   children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
                 }
               )

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

@@ -1 +1 @@
-{"version":3,"file":"status-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/status-selector.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CAmBzF"}
+{"version":3,"file":"status-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/status-selector.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CAmBzF"}

package/dist/components/dashboard/block-editor/status-selector.js

@@ -6,15 +6,16 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "../../ui/select";
+} from "../../ui/select.js";
+import { sel } from "../../../lib/test/index.js";
 function StatusSelector({ value, onChange, disabled, options }) {
   return /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, disabled, children: [
-    /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[140px] h-8", "data-cy": "status-selector", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[140px] h-8", "data-cy": sel("blockEditor.header.statusSelector"), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
     /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(
       SelectItem,
       {
         value: option.value,
-        "data-cy": `status-option-${option.value}`,
+        "data-cy": sel("blockEditor.header.statusOption", { value: option.value }),
         children: option.label
       },
       option.value

package/dist/components/dashboard/block-editor/tree-view-node.d.ts

@@ -0,0 +1,11 @@
+import type { BlockInstance } from '../../../types/blocks';
+import { type PatternReference } from '../../../types/pattern-reference';
+interface TreeViewNodeProps {
+    block: BlockInstance | PatternReference;
+    isSelected: boolean;
+    onSelect: () => void;
+    isPartOfPattern?: boolean;
+}
+export declare function TreeViewNode({ block, isSelected, onSelect, isPartOfPattern }: TreeViewNodeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tree-view-node.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/tree-view-node.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAsB,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAE5F,UAAU,iBAAiB;IACzB,KAAK,EAAE,aAAa,GAAG,gBAAgB,CAAA;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,QAAQ,EACR,eAAuB,EACxB,EAAE,iBAAiB,2CA6EnB"}

package/dist/components/dashboard/block-editor/tree-view-node.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+import { BlockService } from "../../../lib/services/block.service.js";
+import { DynamicIcon } from "../../ui/dynamic-icon.js";
+import { isPatternReference } from "../../../types/pattern-reference.js";
+function TreeViewNode({
+  block,
+  isSelected,
+  onSelect,
+  isPartOfPattern = false
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: block.id,
+    disabled: isPartOfPattern
+    // Disable individual dragging for pattern blocks
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  const blockConfig = isPatternReference(block) ? null : BlockService.get(block.blockSlug);
+  const iconName = (blockConfig == null ? void 0 : blockConfig.icon) || "LayoutGrid";
+  const blockName = (blockConfig == null ? void 0 : blockConfig.name) || (isPatternReference(block) ? "Pattern" : "Unknown Block");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      "data-cy": sel("blockEditor.treeView.node", { id: block.id }),
+      className: cn(
+        "group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer transition-colors",
+        "hover:bg-muted/80",
+        isSelected && "bg-primary/10 ring-1 ring-primary",
+        isPartOfPattern && "ml-4 border-l-2 border-muted-foreground/20",
+        isDragging && "z-50"
+      ),
+      onClick: onSelect,
+      children: [
+        !isPartOfPattern && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-cy": sel("blockEditor.treeView.nodeDragHandle", { id: block.id }),
+            className: cn(
+              "cursor-grab active:cursor-grabbing text-muted-foreground/50",
+              "opacity-0 group-hover:opacity-100 transition-opacity",
+              isSelected && "opacity-100"
+            ),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-cy": sel("blockEditor.treeView.nodeIcon", { id: block.id }),
+            className: "text-muted-foreground shrink-0",
+            children: /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-cy": sel("blockEditor.treeView.nodeName", { id: block.id }),
+            className: cn(
+              "text-sm truncate flex-1",
+              isSelected && "font-medium"
+            ),
+            children: blockName
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TreeViewNode
+};

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

@@ -0,0 +1,17 @@
+import { type PatternReference } from '../../../types/pattern-reference';
+import type { BlockInstance } from '../../../types/blocks';
+interface TreeViewProps {
+    blocks: (BlockInstance | PatternReference)[];
+    selectedBlockId: string | null;
+    onSelectBlock: (id: string) => void;
+    onReorder: (blocks: (BlockInstance | PatternReference)[]) => void;
+    emptyMessage?: string;
+}
+/**
+ * TreeView component for the Layout tab in the left sidebar.
+ * Displays a tree structure of all blocks with drag & drop reordering.
+ * Clicking a block selects it and scrolls to it in the preview.
+ */
+export declare function TreeView({ blocks, selectedBlockId, onSelectBlock, onReorder, emptyMessage }: TreeViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tree-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/tree-view.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAsB,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,UAAU,aAAa;IACrB,MAAM,EAAE,CAAC,aAAa,GAAG,gBAAgB,CAAC,EAAE,CAAA;IAC5C,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,aAAa,GAAG,gBAAgB,CAAC,EAAE,KAAK,IAAI,CAAA;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,eAAe,EACf,aAAa,EACb,SAAS,EACT,YAAY,EACb,EAAE,aAAa,2CA+Gf"}

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

@@ -0,0 +1,125 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useEffect } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { useTranslations } from "next-intl";
+import { LayoutList } from "lucide-react";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { sel } from "../../../lib/test/index.js";
+import { TreeViewNode } from "./tree-view-node.js";
+import { isPatternReference } from "../../../types/pattern-reference.js";
+function TreeView({
+  blocks,
+  selectedBlockId,
+  onSelectBlock,
+  onReorder,
+  emptyMessage
+}) {
+  const t = useTranslations("admin.builder");
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const groupedItems = useMemo(() => {
+    const items = [];
+    blocks.forEach((block) => {
+      if (isPatternReference(block)) {
+        items.push({ id: block.id, block, patternRef: block.ref });
+      } else {
+        items.push({ id: block.id, block });
+      }
+    });
+    return items;
+  }, [blocks]);
+  const handleDragEnd = useCallback((event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = blocks.findIndex((b) => b.id === active.id);
+      const newIndex = blocks.findIndex((b) => b.id === over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newBlocks = arrayMove(blocks, oldIndex, newIndex);
+        onReorder(newBlocks);
+      }
+    }
+  }, [blocks, onReorder]);
+  useEffect(() => {
+    if (selectedBlockId) {
+      const previewBlock = document.querySelector(
+        `[data-cy="${sel("blockEditor.previewCanvas.block", { id: selectedBlockId })}"]`
+      );
+      if (previewBlock) {
+        previewBlock.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }
+  }, [selectedBlockId]);
+  const handleSelectBlock = useCallback((blockId) => {
+    onSelectBlock(blockId);
+  }, [onSelectBlock]);
+  if (blocks.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-cy": sel("blockEditor.treeView.empty"),
+        className: "flex flex-col items-center justify-center h-full p-6 text-center",
+        children: [
+          /* @__PURE__ */ jsx(LayoutList, { className: "h-12 w-12 text-muted-foreground/30 mb-4" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage || t("layout.empty") })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cy": sel("blockEditor.treeView.container"),
+      className: "p-3 space-y-1",
+      children: /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          sensors,
+          collisionDetection: closestCenter,
+          onDragEnd: handleDragEnd,
+          children: /* @__PURE__ */ jsx(
+            SortableContext,
+            {
+              items: groupedItems.map((item) => item.id),
+              strategy: verticalListSortingStrategy,
+              children: groupedItems.map((item) => /* @__PURE__ */ jsx(
+                TreeViewNode,
+                {
+                  block: item.block,
+                  isSelected: selectedBlockId === item.id,
+                  onSelect: () => handleSelectBlock(item.id),
+                  isPartOfPattern: false
+                },
+                item.id
+              ))
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+export {
+  TreeView
+};

package/dist/components/dashboard/block-editor/viewport-toggle.d.ts

@@ -0,0 +1,10 @@
+export type ViewportMode = 'desktop' | 'mobile';
+export declare const MOBILE_VIEWPORT_WIDTH = 375;
+interface ViewportToggleProps {
+    value: ViewportMode;
+    onChange: (value: ViewportMode) => void;
+    className?: string;
+}
+export declare function ViewportToggle({ value, onChange, className }: ViewportToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=viewport-toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/block-editor/viewport-toggle.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE/C,eAAO,MAAM,qBAAqB,MAAM,CAAA;AAExC,UAAU,mBAAmB;IAC3B,KAAK,EAAE,YAAY,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAqCjF"}

package/dist/components/dashboard/block-editor/viewport-toggle.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Monitor, Smartphone } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+const MOBILE_VIEWPORT_WIDTH = 375;
+function ViewportToggle({ value, onChange, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cy": sel("blockEditor.header.viewportToggle.container"),
+      className: cn(
+        "flex items-center bg-muted rounded-lg p-1",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: cn(
+              "h-7 w-7 p-0 rounded-md cursor-pointer",
+              value === "mobile" && "bg-background shadow-sm"
+            ),
+            onClick: () => onChange("mobile"),
+            "data-cy": sel("blockEditor.header.viewportToggle.mobileBtn"),
+            title: "Mobile view (375px)",
+            children: /* @__PURE__ */ jsx(Smartphone, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: cn(
+              "h-7 w-7 p-0 rounded-md cursor-pointer",
+              value === "desktop" && "bg-background shadow-sm"
+            ),
+            onClick: () => onChange("desktop"),
+            "data-cy": sel("blockEditor.header.viewportToggle.desktopBtn"),
+            title: "Desktop view (100%)",
+            children: /* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MOBILE_VIEWPORT_WIDTH,
+  ViewportToggle
+};

package/dist/components/dashboard/index.js

@@ -1,2 +1,2 @@
-export * from "./layouts";
-export * from "./mobile";
+export * from "./layouts/index.js";
+export * from "./mobile/index.js";

package/dist/components/dashboard/layouts/AuthGuard.js

@@ -1,11 +1,11 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
-import { useAuth } from "../../../hooks/useAuth";
+import { useAuth } from "../../../hooks/useAuth.js";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { Loader2 } from "lucide-react";
-import { useEnsureUserMetadata } from "../../../hooks/useEnsureUserMetadata";
-import { useAuthMethodDetector } from "../../../hooks/useAuthMethodDetector";
+import { useEnsureUserMetadata } from "../../../hooks/useEnsureUserMetadata.js";
+import { useAuthMethodDetector } from "../../../hooks/useAuthMethodDetector.js";
 function AuthGuard({ children }) {
   const { user, isLoading } = useAuth();
   const router = useRouter();

package/dist/components/dashboard/layouts/DashboardShell.d.ts

@@ -1,4 +1,4 @@
-import type { SerializableEntityConfig } from '../../../lib/entities/serialization';
+import { type SerializableEntityConfig } from '../../../lib/entities/serialization';
 interface DashboardShellProps {
     children: React.ReactNode;
     entities: SerializableEntityConfig[];

package/dist/components/dashboard/layouts/DashboardShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardShell.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/layouts/DashboardShell.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAA;AAEnF,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,wBAAwB,EAAE,CAAA;CACrC;AAsCD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAQzE"}
+{"version":3,"file":"DashboardShell.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/layouts/DashboardShell.tsx"],"names":[],"mappings":"AASA,OAAO,EAA2B,KAAK,wBAAwB,EAAE,MAAM,qCAAqC,CAAA;AAG5G,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,wBAAwB,EAAE,CAAA;CACrC;AAkDD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAQzE"}