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

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

@@ -0,0 +1,413 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { useTranslations } from "next-intl";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../../ui/collapsible.js";
+import { ScrollArea } from "../../ui/scroll-area.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 { Button } from "../../ui/button.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import {
+  ChevronDown,
+  FileText,
+  Image,
+  Tag,
+  Search,
+  Settings2,
+  Plus,
+  Trash2,
+  Loader2
+} from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { sel } from "../../../lib/test/index.js";
+function ConfigPanel({
+  entityConfig,
+  entityFields,
+  onEntityFieldChange,
+  pageSettings,
+  onPageSettingsChange
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const t = useTranslations("admin.builder");
+  const tSettings = useTranslations("admin.pages.settings");
+  const [entityFieldsOpen, setEntityFieldsOpen] = useState(true);
+  const [seoMetaOpen, setSeoMetaOpen] = useState(true);
+  const sidebarFields = ((_a = entityConfig.builder) == null ? void 0 : _a.sidebarFields) || [];
+  const taxonomyTypes = ((_b = entityConfig.taxonomies) == null ? void 0 : _b.types) || [];
+  const taxonomiesEnabled = ((_c = entityConfig.taxonomies) == null ? void 0 : _c.enabled) && taxonomyTypes.length > 0;
+  const firstTaxonomy = taxonomyTypes[0];
+  const taxonomyApiPath = ((_d = firstTaxonomy == null ? void 0 : firstTaxonomy.type) == null ? void 0 : _d.replace("_", "-")) + "s";
+  const { data: taxonomyData, isLoading: taxonomyLoading } = useQuery({
+    queryKey: ["taxonomies", taxonomyApiPath],
+    queryFn: async () => {
+      const response = await fetch(`/api/v1/${taxonomyApiPath}`);
+      if (!response.ok) return { data: [] };
+      return response.json();
+    },
+    enabled: taxonomiesEnabled && !!taxonomyApiPath
+  });
+  const taxonomyItems = (taxonomyData == null ? void 0 : taxonomyData.data) || [];
+  const currentCategories = entityFields.categories || [];
+  const showEntityFieldsSection = useMemo(() => {
+    return sidebarFields.length > 0 || taxonomiesEnabled;
+  }, [sidebarFields.length, taxonomiesEnabled]);
+  const showSeoSection = ((_e = entityConfig.builder) == null ? void 0 : _e.seo) !== false;
+  const renderField = (fieldName) => {
+    const value = entityFields[fieldName];
+    const isTextarea = fieldName.toLowerCase().includes("excerpt") || fieldName.toLowerCase().includes("description") || fieldName.toLowerCase().includes("summary");
+    const isImage = fieldName.toLowerCase().includes("image") || fieldName.toLowerCase().includes("thumbnail") || fieldName.toLowerCase().includes("photo");
+    const fieldLabel = fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/([A-Z])/g, " $1");
+    if (isTextarea) {
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }),
+          fieldLabel
+        ] }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: fieldName,
+            value: value || "",
+            onChange: (e) => onEntityFieldChange(fieldName, e.target.value),
+            placeholder: t("placeholders.excerpt"),
+            rows: 4,
+            className: "resize-none",
+            "data-cy": sel("blockEditor.configPanel.entityFieldsSection.field", { name: fieldName })
+          }
+        )
+      ] }, fieldName);
+    }
+    if (isImage) {
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Image, { className: "h-4 w-4 text-muted-foreground" }),
+          fieldLabel
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: fieldName,
+            type: "url",
+            value: value || "",
+            onChange: (e) => onEntityFieldChange(fieldName, e.target.value),
+            placeholder: t("placeholders.imageUrl"),
+            "data-cy": sel("blockEditor.configPanel.entityFieldsSection.field", { name: fieldName })
+          }
+        ),
+        value && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-md border overflow-hidden", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: value,
+            alt: fieldLabel,
+            className: "w-full h-32 object-cover",
+            onError: (e) => {
+              e.target.style.display = "none";
+            }
+          }
+        ) })
+      ] }, fieldName);
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: fieldName, children: fieldLabel }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: fieldName,
+          value: value || "",
+          onChange: (e) => onEntityFieldChange(fieldName, e.target.value),
+          "data-cy": sel("blockEditor.configPanel.entityFieldsSection.field", { name: fieldName })
+        }
+      )
+    ] }, fieldName);
+  };
+  const handleCategoryClick = useCallback((categoryId) => {
+    const newCategories = currentCategories.includes(categoryId) ? currentCategories.filter((id) => id !== categoryId) : [...currentCategories, categoryId];
+    onEntityFieldChange("categories", newCategories);
+  }, [currentCategories, onEntityFieldChange]);
+  const handleSeoChange = useCallback((field, value) => {
+    onPageSettingsChange({
+      seo: { ...pageSettings.seo || {}, [field]: value },
+      customFields: pageSettings.customFields || []
+    });
+  }, [pageSettings, onPageSettingsChange]);
+  const handleAddCustomField = useCallback(() => {
+    onPageSettingsChange({
+      seo: pageSettings.seo || {},
+      customFields: [...pageSettings.customFields || [], { key: "", value: "" }]
+    });
+  }, [pageSettings, onPageSettingsChange]);
+  const handleUpdateCustomField = useCallback((index, field, value) => {
+    const newFields = (pageSettings.customFields || []).map(
+      (f, i) => i === index ? { ...f, [field]: value } : f
+    );
+    onPageSettingsChange({
+      seo: pageSettings.seo || {},
+      customFields: newFields
+    });
+  }, [pageSettings, onPageSettingsChange]);
+  const handleRemoveCustomField = useCallback((index) => {
+    onPageSettingsChange({
+      seo: pageSettings.seo || {},
+      customFields: (pageSettings.customFields || []).filter((_, i) => i !== index)
+    });
+  }, [pageSettings, onPageSettingsChange]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cy": sel("blockEditor.configPanel.container"),
+      className: "h-full bg-background",
+      children: /* @__PURE__ */ jsx(
+        ScrollArea,
+        {
+          "data-cy": sel("blockEditor.configPanel.scroll"),
+          className: "h-full",
+          children: /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto p-6 space-y-6", children: [
+            showEntityFieldsSection && /* @__PURE__ */ jsxs(
+              Collapsible,
+              {
+                open: entityFieldsOpen,
+                onOpenChange: setEntityFieldsOpen,
+                "data-cy": sel("blockEditor.configPanel.entityFieldsSection.container"),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    CollapsibleTrigger,
+                    {
+                      "data-cy": sel("blockEditor.configPanel.entityFieldsSection.trigger"),
+                      className: "flex items-center justify-between w-full p-4 bg-card rounded-lg border hover:bg-accent/50 transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }),
+                          /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: t("config.entityFields") })
+                        ] }),
+                        /* @__PURE__ */ jsx(ChevronDown, { className: cn(
+                          "h-4 w-4 text-muted-foreground transition-transform",
+                          entityFieldsOpen && "rotate-180"
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CollapsibleContent,
+                    {
+                      "data-cy": sel("blockEditor.configPanel.entityFieldsSection.content"),
+                      className: "pt-4",
+                      children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 p-4 bg-card rounded-lg border", children: [
+                        sidebarFields.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: sidebarFields.map((fieldName) => renderField(fieldName)) }),
+                        taxonomiesEnabled && firstTaxonomy && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                            /* @__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(
+                            "div",
+                            {
+                              className: "flex items-center gap-2 rounded-md border p-2 hover:bg-accent transition-colors cursor-pointer",
+                              onClick: () => handleCategoryClick(item.id),
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  Checkbox,
+                                  {
+                                    checked: currentCategories.includes(item.id),
+                                    onCheckedChange: () => handleCategoryClick(item.id)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx("span", { className: "text-sm flex-1", children: item.name }),
+                                item.color && /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    className: "h-3 w-3 rounded-full",
+                                    style: { backgroundColor: item.color }
+                                  }
+                                )
+                              ]
+                            },
+                            item.id
+                          )) }),
+                          currentCategories.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 pt-2", children: currentCategories.map((catId) => {
+                            const cat = taxonomyItems.find((t2) => t2.id === catId);
+                            return cat ? /* @__PURE__ */ jsxs(
+                              Badge,
+                              {
+                                variant: "secondary",
+                                className: "cursor-pointer",
+                                onClick: () => handleCategoryClick(cat.id),
+                                style: cat.color ? { backgroundColor: cat.color, color: "#fff" } : void 0,
+                                children: [
+                                  cat.name,
+                                  " \xD7"
+                                ]
+                              },
+                              cat.id
+                            ) : null;
+                          }) })
+                        ] })
+                      ] })
+                    }
+                  )
+                ]
+              }
+            ),
+            showSeoSection && /* @__PURE__ */ jsxs(
+              Collapsible,
+              {
+                open: seoMetaOpen,
+                onOpenChange: setSeoMetaOpen,
+                "data-cy": sel("blockEditor.configPanel.seoMetaSection.container"),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    CollapsibleTrigger,
+                    {
+                      "data-cy": sel("blockEditor.configPanel.seoMetaSection.trigger"),
+                      className: "flex items-center justify-between w-full p-4 bg-card rounded-lg border hover:bg-accent/50 transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-muted-foreground" }),
+                          /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: t("config.seoMeta") })
+                        ] }),
+                        /* @__PURE__ */ jsx(ChevronDown, { className: cn(
+                          "h-4 w-4 text-muted-foreground transition-transform",
+                          seoMetaOpen && "rotate-180"
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CollapsibleContent,
+                    {
+                      "data-cy": sel("blockEditor.configPanel.seoMetaSection.content"),
+                      className: "pt-4",
+                      children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 p-4 bg-card rounded-lg border", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                          /* @__PURE__ */ jsx(Label, { htmlFor: "meta-title", children: tSettings("seo.metaTitle") }),
+                          /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              id: "meta-title",
+                              value: ((_f = pageSettings.seo) == null ? void 0 : _f.metaTitle) || "",
+                              onChange: (e) => handleSeoChange("metaTitle", e.target.value),
+                              placeholder: tSettings("seo.metaTitlePlaceholder"),
+                              "data-cy": sel("blockEditor.configPanel.seoMetaSection.metaTitle")
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: tSettings("seo.metaTitleHint") })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                          /* @__PURE__ */ jsx(Label, { htmlFor: "meta-description", children: tSettings("seo.metaDescription") }),
+                          /* @__PURE__ */ jsx(
+                            Textarea,
+                            {
+                              id: "meta-description",
+                              value: ((_g = pageSettings.seo) == null ? void 0 : _g.metaDescription) || "",
+                              onChange: (e) => handleSeoChange("metaDescription", e.target.value),
+                              placeholder: tSettings("seo.metaDescriptionPlaceholder"),
+                              rows: 3,
+                              "data-cy": sel("blockEditor.configPanel.seoMetaSection.metaDescription")
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                            ((_i = (_h = pageSettings.seo) == null ? void 0 : _h.metaDescription) == null ? void 0 : _i.length) || 0,
+                            "/160 ",
+                            tSettings("seo.characters")
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                          /* @__PURE__ */ jsx(Label, { htmlFor: "meta-keywords", children: tSettings("seo.metaKeywords") }),
+                          /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              id: "meta-keywords",
+                              value: ((_j = pageSettings.seo) == null ? void 0 : _j.metaKeywords) || "",
+                              onChange: (e) => handleSeoChange("metaKeywords", e.target.value),
+                              placeholder: tSettings("seo.metaKeywordsPlaceholder"),
+                              "data-cy": sel("blockEditor.configPanel.seoMetaSection.metaKeywords")
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                          /* @__PURE__ */ jsx(Label, { htmlFor: "og-image", children: tSettings("seo.ogImage") }),
+                          /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              id: "og-image",
+                              value: ((_k = pageSettings.seo) == null ? void 0 : _k.ogImage) || "",
+                              onChange: (e) => handleSeoChange("ogImage", e.target.value),
+                              placeholder: tSettings("seo.ogImagePlaceholder"),
+                              "data-cy": sel("blockEditor.configPanel.seoMetaSection.ogImage")
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-4 border-t", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4 text-muted-foreground" }),
+                            /* @__PURE__ */ jsx(Label, { children: tSettings("customFields.title") })
+                          ] }),
+                          (pageSettings.customFields || []).length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-4", children: tSettings("customFields.empty") }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: (pageSettings.customFields || []).map((field, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-start", children: [
+                            /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                              Input,
+                              {
+                                value: field.key,
+                                onChange: (e) => handleUpdateCustomField(index, "key", e.target.value),
+                                placeholder: tSettings("customFields.keyPlaceholder"),
+                                className: "font-mono text-sm",
+                                "data-cy": sel("blockEditor.configPanel.seoMetaSection.customFields.fieldKey", { index })
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                              Input,
+                              {
+                                value: field.value,
+                                onChange: (e) => handleUpdateCustomField(index, "value", e.target.value),
+                                placeholder: tSettings("customFields.valuePlaceholder"),
+                                "data-cy": sel("blockEditor.configPanel.seoMetaSection.customFields.fieldValue", { index })
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                variant: "ghost",
+                                size: "icon",
+                                className: "shrink-0 text-muted-foreground hover:text-destructive",
+                                onClick: () => handleRemoveCustomField(index),
+                                "data-cy": sel("blockEditor.configPanel.seoMetaSection.customFields.fieldRemove", { index }),
+                                children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+                              }
+                            )
+                          ] }, index)) }),
+                          /* @__PURE__ */ jsxs(
+                            Button,
+                            {
+                              variant: "outline",
+                              size: "sm",
+                              onClick: handleAddCustomField,
+                              className: "w-full",
+                              "data-cy": sel("blockEditor.configPanel.seoMetaSection.customFields.addButton"),
+                              children: [
+                                /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+                                tSettings("customFields.add")
+                              ]
+                            }
+                          )
+                        ] })
+                      ] })
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+export {
+  ConfigPanel
+};

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

@@ -24,7 +24,7 @@ function FloatingBlockToolbar({
         "bg-primary text-primary-foreground rounded-full",
         "px-3 py-1 text-xs font-medium shadow-lg",
         "flex items-center gap-3",
-        "transition-all duration-200",
+        "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 }),

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

@@ -8,7 +8,7 @@ function PatternCard({ pattern, onSelect }) {
   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-pointer",
+      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: [

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

@@ -94,7 +94,7 @@ function PatternReferencePreview({
     "div",
     {
       className: cn(
-        "group relative cursor-pointer transition-all",
+        "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"

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

@@ -48,7 +48,7 @@ function SortableBlock({
         Card,
         {
           className: cn(
-            "cursor-pointer transition-all",
+            "cursor-pointer transition-shadow duration-150",
             isSelected && "ring-2 ring-primary ring-offset-2",
             "hover:shadow-md"
           ),

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.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"}