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

package/dist/lib/selectors/domains/block-editor.selectors.d.ts

@@ -1,35 +1,43 @@
 /**
- * Block Editor Selectors - 7 First-Level Components
+ * Block Editor Selectors - 7 First-Level Components (v2.0 - UX Redesign)
  *
  * Architecture:
- * ┌─────────────────────────────────────────────────────────────────────────────────┐
- * │  HEADER: [←] Title  /slug [↗]    [Editor|Preview]  ●STATUS  [Save] [Publish]    │
- * ├──────────────────────┬───────────────────────────────────┬──────────────────────┤
- * │  [Bloques|Config]    │                                   │  Block Properties    │
- * │  ─────────────────   │         CANVAS                    │  ──────────────────  │
- * │                      │                                   │                      │
- * │  Tab "Bloques":      │   LAYOUT MODE:                    │  [Block Name]        │
- * │   blockPicker        │    layoutCanvas                   │  [Content|Design|Adv]│
- * │   - Search           │    └── sortableBlock (cards)      │                      │7
- * │   - Categories       │                                   │  form                │
- * │   - Block cards      │   PREVIEW MODE:                   │   ├── field          │
- * │                      │    previewCanvas                  │   ├── fieldGroup     │
- * │  Tab "Config":       │    └── floatingToolbar            │   └── arrayField     │
- * │   entityFieldsPanel  │                                   │                      │
- * │   - Entity fields    │   ─────────────────────────────   │                      │
- * │   - Categories       │   entityMetaPanel (en layout)     │                      │
- * │                      │   - SEO settings                  │                      │
- * │                      │   - Custom fields                 │                      │
- * └──────────────────────┴───────────────────────────────────┴──────────────────────┘
+ * ┌─────────────────────────────────────────────────────────────────────────────────────────┐
+ * │  HEADER: [←] [Title...............] [/slug.........] [Preview|Settings] [📱|🖥️]* ●STATUS│
+ * │          ←────────── dynamic width ─────────────────→                    *only Preview  │
+ * ├───────────────────────┬─────────────────────────────────────────┬───────────────────────┤
+ * │  LEFT COLUMN          │            CENTER COLUMN                │    RIGHT COLUMN       │
+ * │  [Blocks|Patterns|    │                                         │    Block Properties   │
+ * │   Layout]             │   IF TAB = "Preview":                   │    ─────────────────  │
+ * │  ───────────────────  │    previewCanvas                        │                       │
+ * │                       │    ├── viewport: 375px (mobile)         │    [Block Name]       │
+ * │  Tab "Blocks":        │    │              100% (desktop)        │    [Content|Design|   │
+ * │   blockPicker         │    └── floatingToolbar                  │     Advanced]         │
+ * │   - Search            │                                         │                       │
+ * │   - Categories        │   IF TAB = "Settings":                  │    form               │
+ * │   - Block cards       │    configPanel (single scroll)          │     ├── field         │
+ * │                       │    ├── entityFieldsSection (collapsible)│     ├── fieldGroup    │
+ * │  Tab "Patterns":      │    └── seoMetaSection (collapsible)     │     └── arrayField    │
+ * │   (patterns list)     │                                         │                       │
+ * │                       │                                         │                       │
+ * │  Tab "Layout": ←NEW   │                                         │                       │
+ * │   treeView            │                                         │                       │
+ * │   ├── treeNode        │                                         │                       │
+ * │   └── (drag & drop)   │                                         │                       │
+ * └───────────────────────┴─────────────────────────────────────────┴───────────────────────┘
  *
  * Components:
- * 1. header              - Top bar (title, slug, toggles, actions, status, locale)
- * 2. blockPicker         - Left col - "Bloques" tab (block selector)
- * 3. entityFieldsPanel   - Left col - "Configuración" tab (entity fields)
- * 4. layoutCanvas        - Center col - Layout mode (draggable cards)
- * 5. previewCanvas       - Center col - Preview mode (real blocks)
- * 6. entityMetaPanel     - Center col - SEO and custom fields (below canvas)
- * 7. blockPropertiesPanel - Right col - Selected block properties
+ * 1. header              - Top bar (title, slug, view tabs, viewport toggle, status, actions)
+ * 2. blockPicker         - Left col - "Blocks" tab (block selector)
+ * 3. treeView            - Left col - "Layout" tab (block tree structure) [NEW]
+ * 4. previewCanvas       - Center col - Preview mode (real blocks with responsive viewport)
+ * 5. configPanel         - Center col - Settings mode (entity fields + SEO/meta) [NEW]
+ * 6. blockPropertiesPanel - Right col - Selected block properties
+ *
+ * DEPRECATED (kept for backward compatibility):
+ * - layoutCanvas         - Replaced by treeView in left column
+ * - entityFieldsPanel    - Moved into configPanel
+ * - entityMetaPanel      - Moved into configPanel
  */
 export declare const BLOCK_EDITOR_SELECTORS: {
     readonly container: "builder-editor";
@@ -43,8 +51,13 @@ export declare const BLOCK_EDITOR_SELECTORS: {
         readonly slugInput: "builder-slug-input";
         readonly externalLink: "builder-external-link";
         readonly viewToggle: "builder-view-toggle";
-        readonly viewEditor: "builder-view-editor";
         readonly viewPreview: "builder-view-preview";
+        readonly viewSettings: "builder-view-settings";
+        readonly viewportToggle: {
+            readonly container: "builder-viewport-toggle";
+            readonly mobileBtn: "builder-viewport-mobile";
+            readonly desktopBtn: "builder-viewport-desktop";
+        };
         readonly statusSelector: "builder-status-selector";
         readonly statusOption: "builder-status-option-{value}";
         readonly statusDot: "builder-status-dot";
@@ -59,7 +72,7 @@ export declare const BLOCK_EDITOR_SELECTORS: {
         readonly container: "block-picker";
         readonly tabBlocks: "block-picker-tab-blocks";
         readonly tabPatterns: "block-picker-tab-patterns";
-        readonly tabConfig: "block-picker-tab-config";
+        readonly tabLayout: "block-picker-tab-layout";
         readonly tabIndicator: "block-picker-tab-indicator";
         readonly searchWrapper: "block-picker-search-wrapper";
         readonly searchIcon: "block-picker-search-icon";
@@ -88,39 +101,36 @@ export declare const BLOCK_EDITOR_SELECTORS: {
         readonly patternCardBlockCount: "block-picker-pattern-blocks-{id}";
         readonly patternCardInsertButton: "block-picker-pattern-insert-{id}";
     };
-    readonly entityFieldsPanel: {
-        readonly container: "entity-fields-panel";
-        readonly field: "entity-field-{name}";
-        readonly categoryList: "entity-field-categories";
-        readonly categoryItem: "entity-field-category-{slug}";
-        readonly categoryCheckbox: "entity-field-category-checkbox-{slug}";
-        readonly categoryBadge: "entity-field-category-badge-{slug}";
-    };
-    readonly layoutCanvas: {
-        readonly container: "layout-canvas";
-        readonly empty: "layout-canvas-empty";
-        readonly dropZone: "layout-canvas-dropzone";
-        readonly sortableBlock: {
-            readonly container: "sortable-block-{id}";
-            readonly card: "sortable-block-card-{id}";
-            readonly dragHandle: "sortable-block-drag-{id}";
-            readonly name: "sortable-block-name-{id}";
-            readonly category: "sortable-block-category-{id}";
-            readonly propsPreview: "sortable-block-props-{id}";
-            readonly duplicateBtn: "sortable-block-duplicate-{id}";
-            readonly removeBtn: "sortable-block-remove-{id}";
-            readonly error: "sortable-block-error-{id}";
-        };
+    readonly treeView: {
+        readonly container: "builder-tree-view";
+        readonly empty: "builder-tree-empty";
+        readonly node: "builder-tree-node-{id}";
+        readonly nodeIcon: "builder-tree-node-icon-{id}";
+        readonly nodeName: "builder-tree-node-name-{id}";
+        readonly nodeDragHandle: "builder-tree-node-drag-{id}";
+        readonly nodeSelected: "builder-tree-node-selected";
+        readonly patternGroup: "builder-tree-pattern-{ref}";
+        readonly patternGroupHeader: "builder-tree-pattern-header-{ref}";
+        readonly patternGroupBlocks: "builder-tree-pattern-blocks-{ref}";
     };
     readonly previewCanvas: {
         readonly container: "preview-canvas";
         readonly wrapper: "preview-canvas-wrapper";
         readonly content: "preview-canvas-content";
         readonly empty: "preview-canvas-empty";
+        readonly viewport: "preview-canvas-viewport-{mode}";
+        readonly viewportMobile: "preview-canvas-mobile";
+        readonly viewportDesktop: "preview-canvas-desktop";
+        readonly iframePreview: {
+            readonly container: "preview-iframe-container";
+            readonly loading: "preview-iframe-loading";
+            readonly frame: "preview-iframe-frame";
+        };
         readonly block: "preview-block-{id}";
         readonly blockWrapper: "preview-block-wrapper-{id}";
         readonly blockSelected: "preview-block-selected-{id}";
         readonly editingBadge: "preview-block-editing-{id}";
+        readonly blockGeneric: "preview-block-";
         readonly floatingToolbar: {
             readonly container: "floating-toolbar-{id}";
             readonly dragHandle: "floating-toolbar-drag-{id}";
@@ -132,6 +142,32 @@ export declare const BLOCK_EDITOR_SELECTORS: {
         readonly moveUp: "preview-block-move-up-{id}";
         readonly moveDown: "preview-block-move-down-{id}";
     };
+    readonly configPanel: {
+        readonly container: "builder-config-panel";
+        readonly scroll: "builder-config-scroll";
+        readonly entityFieldsSection: {
+            readonly container: "builder-config-entity-section";
+            readonly trigger: "builder-config-entity-trigger";
+            readonly content: "builder-config-entity-content";
+            readonly field: "builder-config-entity-field-{name}";
+        };
+        readonly seoMetaSection: {
+            readonly container: "builder-config-seo-section";
+            readonly trigger: "builder-config-seo-trigger";
+            readonly content: "builder-config-seo-content";
+            readonly metaTitle: "builder-config-seo-title";
+            readonly metaDescription: "builder-config-seo-description";
+            readonly metaKeywords: "builder-config-seo-keywords";
+            readonly ogImage: "builder-config-seo-og-image";
+            readonly customFields: {
+                readonly container: "builder-config-custom-fields";
+                readonly fieldKey: "builder-config-custom-key-{index}";
+                readonly fieldValue: "builder-config-custom-value-{index}";
+                readonly fieldRemove: "builder-config-custom-remove-{index}";
+                readonly addButton: "builder-config-custom-add";
+            };
+        };
+    };
     readonly patternReference: {
         readonly container: "pattern-reference-{ref}";
         readonly badge: "pattern-reference-badge-{ref}";
@@ -139,25 +175,6 @@ export declare const BLOCK_EDITOR_SELECTORS: {
         readonly locked: "pattern-reference-locked-{ref}";
         readonly editLink: "pattern-reference-edit-link-{ref}";
     };
-    readonly entityMetaPanel: {
-        readonly container: "entity-meta-panel";
-        readonly seoSection: {
-            readonly trigger: "entity-meta-seo-trigger";
-            readonly content: "entity-meta-seo-content";
-            readonly metaTitle: "entity-meta-seo-title";
-            readonly metaDescription: "entity-meta-seo-description";
-            readonly metaKeywords: "entity-meta-seo-keywords";
-            readonly ogImage: "entity-meta-seo-og-image";
-        };
-        readonly customFields: {
-            readonly trigger: "entity-meta-custom-trigger";
-            readonly content: "entity-meta-custom-content";
-            readonly fieldKey: "entity-meta-custom-key-{index}";
-            readonly fieldValue: "entity-meta-custom-value-{index}";
-            readonly fieldRemove: "entity-meta-custom-remove-{index}";
-            readonly addButton: "entity-meta-custom-add";
-        };
-    };
     readonly blockPropertiesPanel: {
         readonly container: "block-properties-panel";
         readonly header: "block-properties-header";
@@ -170,6 +187,7 @@ export declare const BLOCK_EDITOR_SELECTORS: {
         readonly tabAdvanced: "block-properties-tab-advanced";
         readonly empty: "block-properties-empty";
         readonly error: "block-properties-error";
+        readonly resetPropsBtn: "block-properties-reset-btn";
         readonly patternLocked: "block-properties-pattern-locked";
         readonly patternTitle: "block-properties-pattern-title";
         readonly patternEditLink: "block-properties-pattern-edit";
@@ -198,6 +216,53 @@ export declare const BLOCK_EDITOR_SELECTORS: {
         readonly categoryBadge: "entity-field-category-badge-{id}";
         readonly categoryRemove: "entity-field-category-remove-{id}";
     };
+    /** @deprecated Use treeView instead - layoutCanvas functionality moved to left column */
+    readonly layoutCanvas: {
+        readonly container: "layout-canvas";
+        readonly empty: "layout-canvas-empty";
+        readonly dropZone: "layout-canvas-dropzone";
+        readonly sortableBlock: {
+            readonly container: "sortable-block-{id}";
+            readonly card: "sortable-block-card-{id}";
+            readonly dragHandle: "sortable-block-drag-{id}";
+            readonly name: "sortable-block-name-{id}";
+            readonly category: "sortable-block-category-{id}";
+            readonly propsPreview: "sortable-block-props-{id}";
+            readonly duplicateBtn: "sortable-block-duplicate-{id}";
+            readonly removeBtn: "sortable-block-remove-{id}";
+            readonly error: "sortable-block-error-{id}";
+            readonly generic: "sortable-block-";
+        };
+    };
+    /** @deprecated Use configPanel.entityFieldsSection instead */
+    readonly entityFieldsPanel: {
+        readonly container: "entity-fields-panel";
+        readonly field: "entity-field-{name}";
+        readonly categoryList: "entity-field-categories";
+        readonly categoryItem: "entity-field-category-{slug}";
+        readonly categoryCheckbox: "entity-field-category-checkbox-{slug}";
+        readonly categoryBadge: "entity-field-category-badge-{slug}";
+    };
+    /** @deprecated Use configPanel.seoMetaSection instead */
+    readonly entityMetaPanel: {
+        readonly container: "entity-meta-panel";
+        readonly seoSection: {
+            readonly trigger: "entity-meta-seo-trigger";
+            readonly content: "entity-meta-seo-content";
+            readonly metaTitle: "entity-meta-seo-title";
+            readonly metaDescription: "entity-meta-seo-description";
+            readonly metaKeywords: "entity-meta-seo-keywords";
+            readonly ogImage: "entity-meta-seo-og-image";
+        };
+        readonly customFields: {
+            readonly trigger: "entity-meta-custom-trigger";
+            readonly content: "entity-meta-custom-content";
+            readonly fieldKey: "entity-meta-custom-key-{index}";
+            readonly fieldValue: "entity-meta-custom-value-{index}";
+            readonly fieldRemove: "entity-meta-custom-remove-{index}";
+            readonly addButton: "entity-meta-custom-add";
+        };
+    };
 };
 export type BlockEditorSelectorsType = typeof BLOCK_EDITOR_SELECTORS;
 //# sourceMappingURL=block-editor.selectors.d.ts.map

package/dist/lib/selectors/domains/block-editor.selectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-editor.selectors.d.ts","sourceRoot":"","sources":["../../../../src/lib/selectors/domains/block-editor.selectors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NzB,CAAA;AAEV,MAAM,MAAM,wBAAwB,GAAG,OAAO,sBAAsB,CAAA"}
+{"version":3,"file":"block-editor.selectors.d.ts","sourceRoot":"","sources":["../../../../src/lib/selectors/domains/block-editor.selectors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkPjC,yFAAyF;;;;;;;;;;;;;;;;;;IAoBzF,8DAA8D;;;;;;;;;IAU9D,yDAAyD;;;;;;;;;;;;;;;;;;;;CAoBjD,CAAA;AAEV,MAAM,MAAM,wBAAwB,GAAG,OAAO,sBAAsB,CAAA"}

package/dist/lib/selectors/domains/block-editor.selectors.js

@@ -2,20 +2,29 @@ const BLOCK_EDITOR_SELECTORS = {
   // Main editor container (wraps everything)
   container: "builder-editor",
   // =========================================================================
-  // 1. HEADER - Top bar with title, slug, toggles, and actions
+  // 1. HEADER - Top bar with title, slug, view tabs, viewport toggle, actions
   // =========================================================================
   header: {
     container: "builder-header",
     backButton: "builder-back-btn",
+    // Title input (dynamic width)
     titleWrapper: "builder-title-wrapper",
     titleInput: "builder-title-input",
+    // Slug input (dynamic width)
     slugWrapper: "builder-slug-wrapper",
     slugPrefix: "builder-slug-prefix",
     slugInput: "builder-slug-input",
     externalLink: "builder-external-link",
+    // View mode tabs (Preview | Settings)
     viewToggle: "builder-view-toggle",
-    viewEditor: "builder-view-editor",
     viewPreview: "builder-view-preview",
+    viewSettings: "builder-view-settings",
+    // Viewport toggle (mobile/desktop) - only visible in Preview mode
+    viewportToggle: {
+      container: "builder-viewport-toggle",
+      mobileBtn: "builder-viewport-mobile",
+      desktopBtn: "builder-viewport-desktop"
+    },
     // Status selector (integrated in header)
     statusSelector: "builder-status-selector",
     statusOption: "builder-status-option-{value}",
@@ -30,14 +39,14 @@ const BLOCK_EDITOR_SELECTORS = {
     settingsButton: "builder-settings-btn"
   },
   // =========================================================================
-  // 2. BLOCK PICKER - Left column "Bloques" tab
+  // 2. BLOCK PICKER - Left column "Blocks" tab
   // =========================================================================
   blockPicker: {
     container: "block-picker",
-    // Tabs
+    // Tabs (Blocks | Patterns | Layout)
     tabBlocks: "block-picker-tab-blocks",
     tabPatterns: "block-picker-tab-patterns",
-    tabConfig: "block-picker-tab-config",
+    tabLayout: "block-picker-tab-layout",
     tabIndicator: "block-picker-tab-indicator",
     // Search
     searchWrapper: "block-picker-search-wrapper",
@@ -71,48 +80,48 @@ const BLOCK_EDITOR_SELECTORS = {
     patternCardInsertButton: "block-picker-pattern-insert-{id}"
   },
   // =========================================================================
-  // 3. ENTITY FIELDS PANEL - Left column "Configuración" tab
+  // 3. TREE VIEW - Left column "Layout" tab (NEW)
   // =========================================================================
-  entityFieldsPanel: {
-    container: "entity-fields-panel",
-    field: "entity-field-{name}",
-    categoryList: "entity-field-categories",
-    categoryItem: "entity-field-category-{slug}",
-    categoryCheckbox: "entity-field-category-checkbox-{slug}",
-    categoryBadge: "entity-field-category-badge-{slug}"
-  },
-  // =========================================================================
-  // 4. LAYOUT CANVAS - Center column - Layout mode (draggable cards)
-  // =========================================================================
-  layoutCanvas: {
-    container: "layout-canvas",
-    empty: "layout-canvas-empty",
-    dropZone: "layout-canvas-dropzone",
-    // Sortable block cards (children)
-    sortableBlock: {
-      container: "sortable-block-{id}",
-      card: "sortable-block-card-{id}",
-      dragHandle: "sortable-block-drag-{id}",
-      name: "sortable-block-name-{id}",
-      category: "sortable-block-category-{id}",
-      propsPreview: "sortable-block-props-{id}",
-      duplicateBtn: "sortable-block-duplicate-{id}",
-      removeBtn: "sortable-block-remove-{id}",
-      error: "sortable-block-error-{id}"
-    }
+  treeView: {
+    container: "builder-tree-view",
+    empty: "builder-tree-empty",
+    // Tree nodes
+    node: "builder-tree-node-{id}",
+    nodeIcon: "builder-tree-node-icon-{id}",
+    nodeName: "builder-tree-node-name-{id}",
+    nodeDragHandle: "builder-tree-node-drag-{id}",
+    nodeSelected: "builder-tree-node-selected",
+    // Pattern groups (blocks from same pattern shown grouped)
+    patternGroup: "builder-tree-pattern-{ref}",
+    patternGroupHeader: "builder-tree-pattern-header-{ref}",
+    patternGroupBlocks: "builder-tree-pattern-blocks-{ref}"
   },
   // =========================================================================
-  // 5. PREVIEW CANVAS - Center column - Preview mode (real blocks)
+  // 4. PREVIEW CANVAS - Center column - Preview mode (responsive viewport)
   // =========================================================================
   previewCanvas: {
     container: "preview-canvas",
     wrapper: "preview-canvas-wrapper",
     content: "preview-canvas-content",
     empty: "preview-canvas-empty",
+    // Viewport wrapper (for container queries responsive preview)
+    viewport: "preview-canvas-viewport-{mode}",
+    // Viewport modes
+    viewportMobile: "preview-canvas-mobile",
+    viewportDesktop: "preview-canvas-desktop",
+    // Iframe preview (for mobile - real viewport simulation)
+    iframePreview: {
+      container: "preview-iframe-container",
+      loading: "preview-iframe-loading",
+      frame: "preview-iframe-frame"
+    },
+    // Blocks
     block: "preview-block-{id}",
     blockWrapper: "preview-block-wrapper-{id}",
     blockSelected: "preview-block-selected-{id}",
     editingBadge: "preview-block-editing-{id}",
+    // Generic selector prefix for counting blocks
+    blockGeneric: "preview-block-",
     // Floating toolbar (child)
     floatingToolbar: {
       container: "floating-toolbar-{id}",
@@ -127,6 +136,38 @@ const BLOCK_EDITOR_SELECTORS = {
     moveDown: "preview-block-move-down-{id}"
   },
   // =========================================================================
+  // 5. CONFIG PANEL - Center column - Settings mode (NEW)
+  // =========================================================================
+  configPanel: {
+    container: "builder-config-panel",
+    scroll: "builder-config-scroll",
+    // Entity Fields section (collapsible)
+    entityFieldsSection: {
+      container: "builder-config-entity-section",
+      trigger: "builder-config-entity-trigger",
+      content: "builder-config-entity-content",
+      field: "builder-config-entity-field-{name}"
+    },
+    // SEO & Meta section (collapsible)
+    seoMetaSection: {
+      container: "builder-config-seo-section",
+      trigger: "builder-config-seo-trigger",
+      content: "builder-config-seo-content",
+      metaTitle: "builder-config-seo-title",
+      metaDescription: "builder-config-seo-description",
+      metaKeywords: "builder-config-seo-keywords",
+      ogImage: "builder-config-seo-og-image",
+      // Custom fields
+      customFields: {
+        container: "builder-config-custom-fields",
+        fieldKey: "builder-config-custom-key-{index}",
+        fieldValue: "builder-config-custom-value-{index}",
+        fieldRemove: "builder-config-custom-remove-{index}",
+        addButton: "builder-config-custom-add"
+      }
+    }
+  },
+  // =========================================================================
   // PATTERN REFERENCE - Pattern reference rendering in canvas
   // =========================================================================
   patternReference: {
@@ -137,31 +178,7 @@ const BLOCK_EDITOR_SELECTORS = {
     editLink: "pattern-reference-edit-link-{ref}"
   },
   // =========================================================================
-  // 6. ENTITY META PANEL - Center column (below canvas in layout mode)
-  // =========================================================================
-  entityMetaPanel: {
-    container: "entity-meta-panel",
-    // SEO section
-    seoSection: {
-      trigger: "entity-meta-seo-trigger",
-      content: "entity-meta-seo-content",
-      metaTitle: "entity-meta-seo-title",
-      metaDescription: "entity-meta-seo-description",
-      metaKeywords: "entity-meta-seo-keywords",
-      ogImage: "entity-meta-seo-og-image"
-    },
-    // Custom fields section
-    customFields: {
-      trigger: "entity-meta-custom-trigger",
-      content: "entity-meta-custom-content",
-      fieldKey: "entity-meta-custom-key-{index}",
-      fieldValue: "entity-meta-custom-value-{index}",
-      fieldRemove: "entity-meta-custom-remove-{index}",
-      addButton: "entity-meta-custom-add"
-    }
-  },
-  // =========================================================================
-  // 7. BLOCK PROPERTIES PANEL - Right column
+  // 6. BLOCK PROPERTIES PANEL - Right column
   // =========================================================================
   blockPropertiesPanel: {
     container: "block-properties-panel",
@@ -175,6 +192,8 @@ const BLOCK_EDITOR_SELECTORS = {
     tabAdvanced: "block-properties-tab-advanced",
     empty: "block-properties-empty",
     error: "block-properties-error",
+    // Reset props button
+    resetPropsBtn: "block-properties-reset-btn",
     // Pattern reference (when a pattern is selected)
     patternLocked: "block-properties-pattern-locked",
     patternTitle: "block-properties-pattern-title",
@@ -198,7 +217,7 @@ const BLOCK_EDITOR_SELECTORS = {
     }
   },
   // =========================================================================
-  // POST-SPECIFIC FIELDS (used in entityFieldsPanel for posts)
+  // POST-SPECIFIC FIELDS (used in configPanel.entityFieldsSection for posts)
   // =========================================================================
   postFields: {
     excerpt: "entity-field-excerpt",
@@ -208,6 +227,57 @@ const BLOCK_EDITOR_SELECTORS = {
     categoryOption: "entity-field-category-option-{id}",
     categoryBadge: "entity-field-category-badge-{id}",
     categoryRemove: "entity-field-category-remove-{id}"
+  },
+  // =========================================================================
+  // DEPRECATED - Kept for backward compatibility
+  // =========================================================================
+  /** @deprecated Use treeView instead - layoutCanvas functionality moved to left column */
+  layoutCanvas: {
+    container: "layout-canvas",
+    empty: "layout-canvas-empty",
+    dropZone: "layout-canvas-dropzone",
+    sortableBlock: {
+      container: "sortable-block-{id}",
+      card: "sortable-block-card-{id}",
+      dragHandle: "sortable-block-drag-{id}",
+      name: "sortable-block-name-{id}",
+      category: "sortable-block-category-{id}",
+      propsPreview: "sortable-block-props-{id}",
+      duplicateBtn: "sortable-block-duplicate-{id}",
+      removeBtn: "sortable-block-remove-{id}",
+      error: "sortable-block-error-{id}",
+      // Generic selector prefix for counting blocks
+      generic: "sortable-block-"
+    }
+  },
+  /** @deprecated Use configPanel.entityFieldsSection instead */
+  entityFieldsPanel: {
+    container: "entity-fields-panel",
+    field: "entity-field-{name}",
+    categoryList: "entity-field-categories",
+    categoryItem: "entity-field-category-{slug}",
+    categoryCheckbox: "entity-field-category-checkbox-{slug}",
+    categoryBadge: "entity-field-category-badge-{slug}"
+  },
+  /** @deprecated Use configPanel.seoMetaSection instead */
+  entityMetaPanel: {
+    container: "entity-meta-panel",
+    seoSection: {
+      trigger: "entity-meta-seo-trigger",
+      content: "entity-meta-seo-content",
+      metaTitle: "entity-meta-seo-title",
+      metaDescription: "entity-meta-seo-description",
+      metaKeywords: "entity-meta-seo-keywords",
+      ogImage: "entity-meta-seo-og-image"
+    },
+    customFields: {
+      trigger: "entity-meta-custom-trigger",
+      content: "entity-meta-custom-content",
+      fieldKey: "entity-meta-custom-key-{index}",
+      fieldValue: "entity-meta-custom-value-{index}",
+      fieldRemove: "entity-meta-custom-remove-{index}",
+      addButton: "entity-meta-custom-add"
+    }
   }
 };
 export {