From adff71c7e821c74ae43f6bcb4d3e1b774b9d0765 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 29 Oct 2025 11:11:03 -0500
Subject: [PATCH 01/49] Refactor image handling in content components to use
 ContentThumbnail

This commit replaces the usage of the Thumbnail component with the new ContentThumbnail component across multiple content-related components, including ContentDetailsModal, ContentCardMobile, ContentTableRow, and ImageCard. This change enhances consistency in image rendering and improves maintainability by centralizing image display logic.
---
 .../details/ContentDetailsModal.tsx           |   5 +-
 .../components/listing/ContentCardMobile.tsx  |   5 +-
 .../components/listing/ContentTableRow.tsx    |   6 +-
 .../components/media/ContentThumbnail.tsx     | 161 ++++++++++++++++++
 .../images-selector/components/ImageCard.tsx  |  15 +-
 5 files changed, 171 insertions(+), 21 deletions(-)
 create mode 100644 app/store/components/content/components/media/ContentThumbnail.tsx

diff --git a/app/store/components/content/components/details/ContentDetailsModal.tsx b/app/store/components/content/components/details/ContentDetailsModal.tsx
index 89db92b4..f6e0c3e6 100644
--- a/app/store/components/content/components/details/ContentDetailsModal.tsx
+++ b/app/store/components/content/components/details/ContentDetailsModal.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { Modal, Thumbnail, Text } from '@shopify/polaris';
+import { Modal, Text } from '@shopify/polaris';
 import type { S3Image } from '@/app/store/components/images-selector/types/s3-types';
 import { formatFileSize, formatDate, getFileName } from '@/app/store/components/content/utils/content-utils';
+import { ContentThumbnail } from '@/app/store/components/content/components/media/ContentThumbnail';
 
 interface ContentDetailsModalProps {
   image: S3Image | null;
@@ -40,7 +41,7 @@ export function ContentDetailsModal({ image, open, onClose, onDelete }: ContentD
       <Modal.Section>
         <div className="space-y-4">
           <div className="flex items-center gap-4">
-            <Thumbnail source={image.url} alt={image.filename} size="large" />
+            <ContentThumbnail src={image.url} alt={image.filename} size="large" />
             <div>
               <Text variant="headingMd" as="h2">
                 {getFileName(image.filename)}
diff --git a/app/store/components/content/components/listing/ContentCardMobile.tsx b/app/store/components/content/components/listing/ContentCardMobile.tsx
index b7a0ddec..a946cdad 100644
--- a/app/store/components/content/components/listing/ContentCardMobile.tsx
+++ b/app/store/components/content/components/listing/ContentCardMobile.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { Card, Thumbnail, Text, Button } from '@shopify/polaris';
+import { Card, Text, Button } from '@shopify/polaris';
 import { DeleteIcon, ViewIcon } from '@shopify/polaris-icons';
 import type { S3Image } from '@/app/store/components/images-selector/types/s3-types';
 import { formatFileSize, formatDate, getFileName } from '@/app/store/components/content/utils/content-utils';
 import type { VisibleColumns } from '@/app/store/components/content/types/content-types';
+import { ContentThumbnail } from '../media/ContentThumbnail';
 
 interface ContentCardMobileProps {
   images: S3Image[];
@@ -29,7 +30,7 @@ export function ContentCardMobile({
         {images.map((image) => (
           <Card key={image.id || image.key}>
             <div className="flex items-start gap-3">
-              <Thumbnail source={image.url} alt={image.filename} size="small" />
+              <ContentThumbnail src={image.url} alt={image.filename} size="small" />
 
               <div className="flex-1 min-w-0">
                 <Text variant="bodySm" fontWeight="semibold" as="p">
diff --git a/app/store/components/content/components/listing/ContentTableRow.tsx b/app/store/components/content/components/listing/ContentTableRow.tsx
index 86d4fd24..f4943daa 100644
--- a/app/store/components/content/components/listing/ContentTableRow.tsx
+++ b/app/store/components/content/components/listing/ContentTableRow.tsx
@@ -5,7 +5,7 @@ import { ViewIcon, LinkIcon } from '@shopify/polaris-icons';
 import type { S3Image } from '@/app/store/components/images-selector/types/s3-types';
 import { formatFileSize, formatDate } from '@/app/store/components/content/utils/content-utils';
 import type { VisibleColumns } from '@/app/store/components/content/types/content-types';
-import Image from 'next/image';
+import { ContentThumbnail } from '@/app/store/components/content/components/media/ContentThumbnail';
 
 interface ContentTableRowProps {
   image: S3Image;
@@ -31,9 +31,7 @@ export function ContentTableRow({
       position={index}>
       <IndexTable.Cell>
         <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <div style={{ width: 40, height: 40, borderRadius: 4, overflow: 'hidden', flexShrink: 0 }}>
-            <Image src={image.url} alt={image.filename} width={40} height={40} style={{ objectFit: 'cover' }} />
-          </div>
+          <ContentThumbnail src={image.url} alt={image.filename} size="small" />
           <div>
             <Text variant="bodySm" as="p">
               {image.filename.split('.')[0] || image.filename}
diff --git a/app/store/components/content/components/media/ContentThumbnail.tsx b/app/store/components/content/components/media/ContentThumbnail.tsx
new file mode 100644
index 00000000..b6bafbbf
--- /dev/null
+++ b/app/store/components/content/components/media/ContentThumbnail.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import { Thumbnail, Icon } from '@shopify/polaris';
+import { PlayCircleIcon } from '@shopify/polaris-icons';
+import { useMemo, useState, useEffect, useRef } from 'react';
+import { isVideoFile, isImageFile } from '@/lib/utils/file-utils';
+import Image from 'next/image';
+
+interface ContentThumbnailProps {
+  src: string;
+  alt: string;
+  size?: 'small' | 'medium' | 'large';
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function ContentThumbnail({ src, alt, size = 'small', className, style }: ContentThumbnailProps) {
+  const isVideo = useMemo(() => isVideoFile(src), [src]);
+  const isImage = useMemo(() => isImageFile(src), [src]);
+  const [videoThumbnail, setVideoThumbnail] = useState<string | null>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    if (!isVideo || !src) return;
+
+    const video = document.createElement('video');
+    video.crossOrigin = 'anonymous';
+    video.src = src;
+    video.muted = true;
+    videoRef.current = video;
+
+    const captureFrame = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) return;
+
+        canvas.width = video.videoWidth || 800;
+        canvas.height = video.videoHeight || 600;
+
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const thumbnail = canvas.toDataURL('image/jpeg', 0.8);
+        setVideoThumbnail(thumbnail);
+      } catch (error) {
+        console.error('Error getting video thumbnail:', error);
+      }
+    };
+
+    const handleLoadedMetadata = () => {
+      video.currentTime = Math.min(1, video.duration / 2);
+    };
+
+    video.addEventListener('loadedmetadata', handleLoadedMetadata);
+    video.addEventListener('seeked', captureFrame);
+
+    return () => {
+      video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+      video.removeEventListener('seeked', captureFrame);
+      video.remove();
+      videoRef.current = null;
+    };
+  }, [isVideo, src]);
+
+  if (isImage) {
+    const dimensionMap = {
+      small: 40,
+      medium: 80,
+      large: 120,
+    };
+
+    const dimensions = dimensionMap[size];
+
+    return (
+      <div
+        className={className}
+        style={{
+          width: dimensions,
+          height: dimensions,
+          borderRadius: 4,
+          overflow: 'hidden',
+          flexShrink: 0,
+          ...style,
+        }}>
+        <Image
+          src={src}
+          alt={alt}
+          width={dimensions}
+          height={dimensions}
+          style={{ objectFit: 'cover', width: '100%', height: '100%' }}
+        />
+      </div>
+    );
+  }
+
+  if (isVideo) {
+    const dimensionMap = {
+      small: 40,
+      medium: 80,
+      large: 120,
+    };
+
+    const dimensions = dimensionMap[size];
+
+    return (
+      <div
+        className={className}
+        style={{
+          width: dimensions,
+          height: dimensions,
+          borderRadius: 4,
+          overflow: 'hidden',
+          flexShrink: 0,
+          backgroundColor: '#e1e3e5',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          ...style,
+        }}>
+        {/* Thumbnail del video si está disponible */}
+        {videoThumbnail ? (
+          <Image
+            src={videoThumbnail}
+            alt={alt}
+            width={dimensions}
+            height={dimensions}
+            style={{
+              objectFit: 'cover',
+              width: '100%',
+              height: '100%',
+            }}
+          />
+        ) : (
+          /* Icono de video centrado mientras carga */
+          <div style={{ width: dimensions * 0.6, height: dimensions * 0.6 }}>
+            <Icon source={PlayCircleIcon} tone="subdued" />
+          </div>
+        )}
+
+        {/* Overlay de play centrado si hay thumbnail */}
+        {videoThumbnail && (
+          <div
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: dimensions * 0.4,
+              height: dimensions * 0.4,
+              pointerEvents: 'none',
+            }}>
+            <Icon source={PlayCircleIcon} tone="subdued" />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return <Thumbnail source={src} alt={alt} size={size} />;
+}
diff --git a/app/store/components/images-selector/components/ImageCard.tsx b/app/store/components/images-selector/components/ImageCard.tsx
index 83d47fa5..8ff3206c 100644
--- a/app/store/components/images-selector/components/ImageCard.tsx
+++ b/app/store/components/images-selector/components/ImageCard.tsx
@@ -2,7 +2,7 @@ import { useCallback, memo, useState } from 'react';
 import type { S3Image } from '@/app/store/hooks/storage/useS3Images';
 import { Checkbox } from '@shopify/polaris';
 import { DeleteIcon } from '@shopify/polaris-icons';
-import Image from 'next/image';
+import { ContentThumbnail } from '@/app/store/components/content/components/media/ContentThumbnail';
 
 const CARD_BG_COLOR = '#FFFFFF';
 const HOVER_OVERLAY_COLOR = 'rgba(0, 0, 0, 0.05)';
@@ -168,18 +168,7 @@ const ImageCard = memo(function ImageCard({
           </div>
         )}
 
-        <Image
-          src={image.url || ''}
-          alt={image.filename}
-          fill
-          sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 16vw"
-          style={{
-            objectFit: 'cover',
-          }}
-          priority={false}
-          quality={85}
-          loading="lazy"
-        />
+        <ContentThumbnail src={image.url || ''} alt={image.filename} size="large" />
       </div>
 
       {/* Información del archivo */}

From 2fc08a5a8ae73e7cd9ebb5c886d2ac3d02645880 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 29 Oct 2025 14:53:55 -0500
Subject: [PATCH 02/49] Update package.json and pnpm configuration to include
 theme-studio package and upgrade pnpm version

This commit adds the new theme-studio package to the workspace in package.json, pnpm-lock.yaml, and pnpm-workspace.yaml. It also updates the pnpm version from 10.18.0 to 10.20.0. Additionally, it modifies tsconfig.base.json to include path mappings for the theme-studio package and updates StoreLayoutClient.tsx to account for new routing requirements.
---
 app/store/[slug]/studio/page.tsx              |  12 ++
 app/store/[slug]/studio/studioClient.tsx      |  13 ++
 app/store/layout/StoreLayoutClient.tsx        |   5 +-
 package.json                                  |   6 +-
 packages/theme-studio/README.md               |  73 ++++++++++
 packages/theme-studio/package.json            |  37 +++++
 .../src/application/use-cases/index.ts        |  18 +++
 .../use-cases/load-template.use-case.ts       |  29 ++++
 .../use-cases/render-preview.use-case.ts      |  33 +++++
 .../theme-studio/src/domain/entities/index.ts |  24 ++++
 .../src/domain/entities/section.entity.ts     |  99 +++++++++++++
 .../src/domain/entities/template.entity.ts    |  53 +++++++
 .../src/domain/entities/theme.entity.ts       |  31 +++++
 .../theme-studio/src/domain/ports/index.ts    |  20 +++
 .../src/domain/ports/preview-renderer.port.ts |  40 ++++++
 .../domain/ports/section-repository.port.ts   |  32 +++++
 .../domain/ports/template-repository.port.ts  |  47 +++++++
 .../src/domain/ports/theme-repository.port.ts |  29 ++++
 packages/theme-studio/src/index.ts            |  10 ++
 .../adapters/preview-renderer.adapter.ts      |  54 ++++++++
 .../adapters/section-repository.adapter.ts    |  56 ++++++++
 .../adapters/template-repository.adapter.ts   |  82 +++++++++++
 .../src/infrastructure/services/.gitkeep      |   0
 .../presentation/components/ThemeStudio.tsx   |  51 +++++++
 .../components/header/EditorHeader.tsx        | 131 ++++++++++++++++++
 .../components/preview/PreviewPane.tsx        |  59 ++++++++
 .../components/settings/SettingsPane.tsx      |  35 +++++
 .../components/sidebar/Sidebar.tsx            |  36 +++++
 .../src/presentation/hooks/useThemeStudio.ts  |  13 ++
 .../src/presentation/stores/studioStore.ts    |  14 ++
 packages/theme-studio/tsconfig.json           |  17 +++
 pnpm-lock.yaml                                |  37 +++++
 pnpm-workspace.yaml                           |   1 +
 tsconfig.base.json                            |   2 +
 34 files changed, 1196 insertions(+), 3 deletions(-)
 create mode 100644 app/store/[slug]/studio/page.tsx
 create mode 100644 app/store/[slug]/studio/studioClient.tsx
 create mode 100644 packages/theme-studio/README.md
 create mode 100644 packages/theme-studio/package.json
 create mode 100644 packages/theme-studio/src/application/use-cases/index.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/load-template.use-case.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/render-preview.use-case.ts
 create mode 100644 packages/theme-studio/src/domain/entities/index.ts
 create mode 100644 packages/theme-studio/src/domain/entities/section.entity.ts
 create mode 100644 packages/theme-studio/src/domain/entities/template.entity.ts
 create mode 100644 packages/theme-studio/src/domain/entities/theme.entity.ts
 create mode 100644 packages/theme-studio/src/domain/ports/index.ts
 create mode 100644 packages/theme-studio/src/domain/ports/preview-renderer.port.ts
 create mode 100644 packages/theme-studio/src/domain/ports/section-repository.port.ts
 create mode 100644 packages/theme-studio/src/domain/ports/template-repository.port.ts
 create mode 100644 packages/theme-studio/src/domain/ports/theme-repository.port.ts
 create mode 100644 packages/theme-studio/src/index.ts
 create mode 100644 packages/theme-studio/src/infrastructure/adapters/preview-renderer.adapter.ts
 create mode 100644 packages/theme-studio/src/infrastructure/adapters/section-repository.adapter.ts
 create mode 100644 packages/theme-studio/src/infrastructure/adapters/template-repository.adapter.ts
 create mode 100644 packages/theme-studio/src/infrastructure/services/.gitkeep
 create mode 100644 packages/theme-studio/src/presentation/components/ThemeStudio.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
 create mode 100644 packages/theme-studio/src/presentation/hooks/useThemeStudio.ts
 create mode 100644 packages/theme-studio/src/presentation/stores/studioStore.ts
 create mode 100644 packages/theme-studio/tsconfig.json

diff --git a/app/store/[slug]/studio/page.tsx b/app/store/[slug]/studio/page.tsx
new file mode 100644
index 00000000..dc35801d
--- /dev/null
+++ b/app/store/[slug]/studio/page.tsx
@@ -0,0 +1,12 @@
+import StudioClient from './studioClient';
+
+export async function generateMetadata({ params: _params }: { params: Promise<{ slug: string }> }) {
+  return {
+    title: 'Theme Studio',
+    description: 'Editor visual de temas',
+  };
+}
+
+export default async function Page({ params: _params }: { params: Promise<{ slug: string }> }) {
+  return <StudioClient />;
+}
diff --git a/app/store/[slug]/studio/studioClient.tsx b/app/store/[slug]/studio/studioClient.tsx
new file mode 100644
index 00000000..82d55824
--- /dev/null
+++ b/app/store/[slug]/studio/studioClient.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { useParams, usePathname } from 'next/navigation';
+import { getStoreId } from '@/utils/client/store-utils';
+import { ThemeStudio } from '@fasttify/theme-studio';
+
+export default function StudioClient() {
+  const pathname = usePathname();
+  const params = useParams();
+  const storeId = getStoreId(params, pathname);
+
+  return <ThemeStudio storeId={storeId} apiBaseUrl="/api" />;
+}
diff --git a/app/store/layout/StoreLayoutClient.tsx b/app/store/layout/StoreLayoutClient.tsx
index 5e5e9d4c..c7f0a7a0 100644
--- a/app/store/layout/StoreLayoutClient.tsx
+++ b/app/store/layout/StoreLayoutClient.tsx
@@ -34,7 +34,10 @@ export const StoreLayoutClient = ({ children }: { children: React.ReactNode }) =
   useStore(storeId);
 
   const hideSidebar =
-    pathname.includes('/editor') || pathname.includes('/profile') || pathname.includes('/suscribe/select-plan');
+    pathname.includes('/editor') ||
+    pathname.includes('/profile') ||
+    pathname.includes('/suscribe/select-plan') ||
+    pathname.includes('/studio');
   const isCheckoutPage = pathname.includes('/access_account/checkout');
   const isSelectPlanPage = pathname.includes('/suscribe/select-plan');
 
diff --git a/package.json b/package.json
index cba8ffb6..167e9dff 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,10 @@
     "packages/liquid-forge",
     "packages/orders-app",
     "packages/theme-editor",
-    "packages/tenant-domains"
+    "packages/tenant-domains",
+    "packages/theme-studio"
   ],
-  "packageManager": "pnpm@10.18.0",
+  "packageManager": "pnpm@10.20.0",
   "engines": {
     "node": ">=20.18.3",
     "pnpm": ">=10.18.0"
@@ -73,6 +74,7 @@
     "@fasttify/orders-app": "workspace:*",
     "@fasttify/tenant-domains": "workspace:*",
     "@fasttify/theme-editor": "workspace:*",
+    "@fasttify/theme-studio": "workspace:*",
     "@hookform/resolvers": "3.3.4",
     "@next/bundle-analyzer": "16.0.0",
     "@polar-sh/nextjs": "^0.4.9",
diff --git a/packages/theme-studio/README.md b/packages/theme-studio/README.md
new file mode 100644
index 00000000..18580daa
--- /dev/null
+++ b/packages/theme-studio/README.md
@@ -0,0 +1,73 @@
+# Theme Studio
+
+Editor visual de temas para Fasttify siguiendo Clean Architecture.
+
+## Estructura
+
+Este paquete sigue los principios de Clean Architecture:
+
+```
+theme-studio/
+├── domain/                  # Capa de Dominio (más interna)
+│   ├── entities/           # Entidades de negocio puras
+│   └── ports/              # Interfaces (puertos) - contratos
+├── application/            # Capa de Aplicación
+│   └── use-cases/          # Casos de uso - lógica de negocio
+├── infrastructure/         # Capa de Infraestructura
+│   ├── adapters/          # Implementaciones concretas
+│   └── services/          # Servicios externos (API, storage)
+├── presentation/           # Capa de Presentación (más externa)
+│   ├── components/        # Componentes React
+│   ├── hooks/             # React hooks
+│   └── stores/            # Estado global (Zustand)
+└── shared/                 # Código compartido entre capas
+    └── types/             # Tipos TypeScript compartidos
+```
+
+## Flujo de Dependencias
+
+Las dependencias fluyen **hacia adentro**:
+
+- **presentation** → **application** → **domain**
+- **infrastructure** → **application** → **domain**
+
+**Regla de oro**: Ninguna capa interna conoce las capas externas.
+
+## Responsabilidades por Capa
+
+### Domain (Entidades y Puertos)
+
+- Define **qué** se necesita hacer
+- Interfaces y contratos (puertos)
+- Entidades de negocio puras (sin lógica de framework)
+- **Sin dependencias externas** (solo TypeScript puro)
+
+### Application (Casos de Uso)
+
+- Define **cómo** se hacen las cosas
+- Orquesta la lógica de negocio
+- Depende solo de **puertos** (interfaces) del dominio
+- Independiente de implementaciones concretas
+
+### Infrastructure (Adaptadores y Servicios)
+
+- **Implementa** las interfaces del dominio
+- Acceso a datos (API, S3, etc.)
+- Servicios externos
+- Depende de puertos, no de casos de uso directamente
+
+### Presentation (Componentes y UI)
+
+- Expone la funcionalidad al usuario
+- Componentes React con Polaris
+- Hooks personalizados
+- Estado global (Zustand)
+- Depende de casos de uso
+
+## Tecnologías
+
+- **UI**: Shopify Polaris
+- **Drag & Drop**: @shopify/draggable
+- **Estado**: Zustand
+- **Requests**: TanStack Query
+- **Framework**: React + Next.js
diff --git a/packages/theme-studio/package.json b/packages/theme-studio/package.json
new file mode 100644
index 00000000..05582db9
--- /dev/null
+++ b/packages/theme-studio/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@fasttify/theme-studio",
+  "version": "1.0.0",
+  "description": "Visual theme editor for Fasttify",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "private": true,
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@shopify/draggable": "^1.2.1",
+    "@shopify/polaris": "^13.9.5",
+    "@shopify/polaris-icons": "^9.3.1",
+    "@tanstack/react-query": "^5.82.0",
+    "zustand": "^5.0.6"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1 || ^19.2.2",
+    "@types/react-dom": "^18.3.1 || ^19.2.2",
+    "typescript": "^5.8.3"
+  },
+  "keywords": ["theme", "editor", "visual", "polaris", "fasttify"],
+  "author": "Fasttify Team",
+  "license": "Apache-2.0"
+}
+
+
diff --git a/packages/theme-studio/src/application/use-cases/index.ts b/packages/theme-studio/src/application/use-cases/index.ts
new file mode 100644
index 00000000..a0a166c0
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/index.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { LoadTemplateUseCase } from './load-template.use-case';
+export { RenderPreviewUseCase } from './render-preview.use-case';
diff --git a/packages/theme-studio/src/application/use-cases/load-template.use-case.ts b/packages/theme-studio/src/application/use-cases/load-template.use-case.ts
new file mode 100644
index 00000000..2f0d8823
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/load-template.use-case.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from '../../domain/entities/template.entity';
+import type { ITemplateRepository } from '../../domain/ports/template-repository.port';
+
+/**
+ * Caso de uso: Cargar Template por tipo
+ */
+export class LoadTemplateUseCase {
+  constructor(private readonly templateRepo: ITemplateRepository) {}
+
+  async execute(storeId: string, templateType: TemplateType): Promise<Template | null> {
+    return this.templateRepo.getTemplate(storeId, templateType);
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/render-preview.use-case.ts b/packages/theme-studio/src/application/use-cases/render-preview.use-case.ts
new file mode 100644
index 00000000..0e7b1a9f
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/render-preview.use-case.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template } from '../../domain/entities/template.entity';
+import type {
+  IPreviewRenderer,
+  RenderPreviewParams,
+  RenderPreviewResult,
+} from '../../domain/ports/preview-renderer.port';
+
+/**
+ * Caso de uso: Renderizar preview HTML a partir de un Template
+ */
+export class RenderPreviewUseCase {
+  constructor(private readonly previewRenderer: IPreviewRenderer) {}
+
+  async execute(params: RenderPreviewParams): Promise<RenderPreviewResult> {
+    return this.previewRenderer.renderPreview(params);
+  }
+}
diff --git a/packages/theme-studio/src/domain/entities/index.ts b/packages/theme-studio/src/domain/entities/index.ts
new file mode 100644
index 00000000..4adb743c
--- /dev/null
+++ b/packages/theme-studio/src/domain/entities/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Exportaciones de entidades del dominio
+ * Barrel export para facilitar las importaciones
+ */
+
+export type { Theme } from './theme.entity';
+export type { Template, TemplateType, TemplateSection, TemplateBlock } from './template.entity';
+export type { Section, SectionSchema, SettingDefinition, SettingType, BlockDefinition, Preset } from './section.entity';
diff --git a/packages/theme-studio/src/domain/entities/section.entity.ts b/packages/theme-studio/src/domain/entities/section.entity.ts
new file mode 100644
index 00000000..1d72330a
--- /dev/null
+++ b/packages/theme-studio/src/domain/entities/section.entity.ts
@@ -0,0 +1,99 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Entidad de dominio: Section
+ * Representa una sección de tema con su schema y configuración
+ * Entidad pura sin dependencias externas
+ */
+
+/**
+ * Tipos de settings disponibles en el schema de Shopify
+ */
+export type SettingType =
+  | 'text'
+  | 'textarea'
+  | 'richtext'
+  | 'html'
+  | 'color'
+  | 'number'
+  | 'range'
+  | 'checkbox'
+  | 'radio'
+  | 'select'
+  | 'image_picker'
+  | 'video'
+  | 'url'
+  | 'header'
+  | 'paragraph'
+  | 'inline_richtext';
+
+/**
+ * Definición de un setting individual
+ */
+export interface SettingDefinition {
+  type: SettingType;
+  id: string;
+  label: string;
+  default?: unknown;
+  info?: string;
+  options?: Array<{ label: string; value: string }>;
+  min?: number;
+  max?: number;
+  step?: number;
+  placeholder?: string;
+}
+
+/**
+ * Definición de un block dentro de una sección
+ */
+export interface BlockDefinition {
+  type: string;
+  name: string;
+  settings?: SettingDefinition[];
+}
+
+/**
+ * Preset de configuración predefinida
+ */
+export interface Preset {
+  name: string;
+  settings: Record<string, unknown>;
+}
+
+/**
+ * Schema completo de una sección
+ */
+export interface SectionSchema {
+  name: string;
+  settings?: SettingDefinition[];
+  blocks?: BlockDefinition[];
+  max_blocks?: number;
+  presets?: Preset[];
+  tag?: string;
+  class?: string;
+  limit?: number;
+}
+
+/**
+ * Entidad Section completa
+ */
+export interface Section {
+  name: string;
+  type: string;
+  schema: SectionSchema;
+  content?: string;
+}
diff --git a/packages/theme-studio/src/domain/entities/template.entity.ts b/packages/theme-studio/src/domain/entities/template.entity.ts
new file mode 100644
index 00000000..1ace7473
--- /dev/null
+++ b/packages/theme-studio/src/domain/entities/template.entity.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Entidad de dominio: Template
+ * Representa una plantilla de página (index.json, product.json, etc.)
+ * Entidad pura sin dependencias externas.
+ */
+export type TemplateType =
+  | 'index'
+  | 'product'
+  | 'collection'
+  | 'page'
+  | 'blog'
+  | 'article'
+  | 'search'
+  | 'cart'
+  | '404'
+  | 'policies'
+  | 'checkout_start'
+  | 'checkout'
+  | 'checkout_confirmation';
+
+export interface TemplateBlock {
+  id: string;
+  type: string;
+  settings: Record<string, unknown>;
+}
+
+export interface TemplateSection {
+  type: string;
+  settings: Record<string, unknown>;
+  blocks?: TemplateBlock[];
+}
+
+export interface Template {
+  type: TemplateType;
+  sections: Record<string, TemplateSection>;
+  order: string[];
+}
diff --git a/packages/theme-studio/src/domain/entities/theme.entity.ts b/packages/theme-studio/src/domain/entities/theme.entity.ts
new file mode 100644
index 00000000..74e74577
--- /dev/null
+++ b/packages/theme-studio/src/domain/entities/theme.entity.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Entidad de dominio: Theme
+ * Representa un tema completo con su estructura
+ *
+ * Esta es una entidad pura del dominio, sin dependencias externas
+ */
+export interface Theme {
+  id: string;
+  storeId: string;
+  name: string;
+  version: string;
+  status: 'active' | 'inactive' | 'draft';
+  createdAt: Date;
+  updatedAt: Date;
+}
diff --git a/packages/theme-studio/src/domain/ports/index.ts b/packages/theme-studio/src/domain/ports/index.ts
new file mode 100644
index 00000000..91730271
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export type { ITemplateRepository } from './template-repository.port';
+export type { ISectionRepository } from './section-repository.port';
+export type { IPreviewRenderer, RenderPreviewParams, RenderPreviewResult } from './preview-renderer.port';
+export type { IThemeRepository } from './theme-repository.port';
diff --git a/packages/theme-studio/src/domain/ports/preview-renderer.port.ts b/packages/theme-studio/src/domain/ports/preview-renderer.port.ts
new file mode 100644
index 00000000..7712f26d
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/preview-renderer.port.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from '../entities/template.entity';
+
+/**
+ * Puerto: Renderizador de Preview
+ * Contrato para renderizar HTML de vista previa a partir de un Template
+ */
+export interface IPreviewRenderer {
+  renderPreview(params: RenderPreviewParams): Promise<RenderPreviewResult>;
+}
+
+export interface RenderPreviewParams {
+  storeId: string;
+  templateType: TemplateType;
+  template: Template;
+  searchParams?: Record<string, string>;
+}
+
+export interface RenderPreviewResult {
+  html: string;
+  metadata?: {
+    title?: string;
+    description?: string;
+  };
+}
diff --git a/packages/theme-studio/src/domain/ports/section-repository.port.ts b/packages/theme-studio/src/domain/ports/section-repository.port.ts
new file mode 100644
index 00000000..6de6df47
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/section-repository.port.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Section } from '../entities/section.entity';
+
+/**
+ * Puerto: Repositorio de Secciones
+ * Contrato para obtener secciones y sus schemas
+ */
+export interface ISectionRepository {
+  /** Lista todas las secciones disponibles del tema */
+  getAllSections(storeId: string): Promise<Section[]>;
+
+  /** Obtiene una sección por nombre */
+  getSection(storeId: string, sectionName: string): Promise<Section | null>;
+
+  /** Lista solo los nombres de secciones disponibles */
+  listSectionNames(storeId: string): Promise<string[]>;
+}
diff --git a/packages/theme-studio/src/domain/ports/template-repository.port.ts b/packages/theme-studio/src/domain/ports/template-repository.port.ts
new file mode 100644
index 00000000..e6390212
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/template-repository.port.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from '../entities/template.entity';
+
+/**
+ * Puerto: Repositorio de Templates
+ * Define el contrato para obtener y guardar templates
+ *
+ * Esta interfaz será implementada en la capa de infraestructura
+ */
+export interface ITemplateRepository {
+  /**
+   * Obtiene un template por tipo desde el almacenamiento
+   * @param storeId - ID de la tienda
+   * @param templateType - Tipo de template a obtener
+   * @returns Template o null si no existe
+   */
+  getTemplate(storeId: string, templateType: TemplateType): Promise<Template | null>;
+
+  /**
+   * Guarda un template en el almacenamiento
+   * @param storeId - ID de la tienda
+   * @param template - Template a guardar
+   */
+  saveTemplate(storeId: string, template: Template): Promise<void>;
+
+  /**
+   * Lista todos los tipos de templates disponibles para un store
+   * @param storeId - ID de la tienda
+   * @returns Array de tipos de templates disponibles
+   */
+  listTemplates(storeId: string): Promise<TemplateType[]>;
+}
diff --git a/packages/theme-studio/src/domain/ports/theme-repository.port.ts b/packages/theme-studio/src/domain/ports/theme-repository.port.ts
new file mode 100644
index 00000000..fb72f05d
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/theme-repository.port.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Theme } from '../entities/theme.entity';
+
+/**
+ * Puerto: Repositorio de Temas
+ * Contrato para acceder a metadatos/estado de temas
+ */
+export interface IThemeRepository {
+  /** Obtiene el tema activo del store */
+  getActiveTheme(storeId: string): Promise<Theme | null>;
+
+  /** Obtiene un tema por ID */
+  getThemeById(storeId: string, themeId: string): Promise<Theme | null>;
+}
diff --git a/packages/theme-studio/src/index.ts b/packages/theme-studio/src/index.ts
new file mode 100644
index 00000000..abb10272
--- /dev/null
+++ b/packages/theme-studio/src/index.ts
@@ -0,0 +1,10 @@
+export { ThemeStudio } from './presentation/components/ThemeStudio';
+
+export type { Theme } from './domain/entities';
+export type { Template, TemplateType } from './domain/entities';
+
+export { TemplateRepositoryAdapter } from './infrastructure/adapters/template-repository.adapter';
+export { SectionRepositoryAdapter } from './infrastructure/adapters/section-repository.adapter';
+export { PreviewRendererAdapter } from './infrastructure/adapters/preview-renderer.adapter';
+
+export { LoadTemplateUseCase, RenderPreviewUseCase } from './application/use-cases';
diff --git a/packages/theme-studio/src/infrastructure/adapters/preview-renderer.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/preview-renderer.adapter.ts
new file mode 100644
index 00000000..4a6833b8
--- /dev/null
+++ b/packages/theme-studio/src/infrastructure/adapters/preview-renderer.adapter.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {
+  IPreviewRenderer,
+  RenderPreviewParams,
+  RenderPreviewResult,
+} from '../../domain/ports/preview-renderer.port';
+
+/**
+ * Adaptador: Implementación de IPreviewRenderer
+ * Envía la configuración al backend para renderizar el preview con el motor
+ */
+export class PreviewRendererAdapter implements IPreviewRenderer {
+  constructor(private readonly apiBaseUrl: string) {}
+
+  async renderPreview(params: RenderPreviewParams): Promise<RenderPreviewResult> {
+    const res = await fetch(`${this.apiBaseUrl}/stores/${params.storeId}/themes/preview`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        pageType: params.templateType,
+        templateConfig: {
+          sections: params.template.sections,
+          order: params.template.order,
+        },
+        searchParams: params.searchParams || {},
+      }),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to render preview: ${res.statusText}`);
+    }
+
+    const data = await res.json();
+    return {
+      html: data.html || data.Worker || '',
+      metadata: data.metadata,
+    };
+  }
+}
diff --git a/packages/theme-studio/src/infrastructure/adapters/section-repository.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/section-repository.adapter.ts
new file mode 100644
index 00000000..9ad6ec95
--- /dev/null
+++ b/packages/theme-studio/src/infrastructure/adapters/section-repository.adapter.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Section } from '../../domain/entities/section.entity';
+import type { ISectionRepository } from '../../domain/ports/section-repository.port';
+
+/**
+ * Adaptador: Implementación de ISectionRepository
+ * Acceso a catálogos de secciones (lista, detalle) vía API
+ */
+export class SectionRepositoryAdapter implements ISectionRepository {
+  constructor(private readonly apiBaseUrl: string) {}
+
+  async getAllSections(storeId: string): Promise<Section[]> {
+    const res = await fetch(`${this.apiBaseUrl}/stores/${storeId}/themes/sections`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!res.ok) throw new Error(`Failed to fetch sections: ${res.statusText}`);
+    const data = await res.json();
+    return (data.sections || []) as Section[];
+  }
+
+  async getSection(storeId: string, sectionName: string): Promise<Section | null> {
+    const res = await fetch(`${this.apiBaseUrl}/stores/${storeId}/themes/sections/${encodeURIComponent(sectionName)}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (res.status === 404) return null;
+    if (!res.ok) throw new Error(`Failed to fetch section: ${res.statusText}`);
+    return (await res.json()) as Section;
+  }
+
+  async listSectionNames(storeId: string): Promise<string[]> {
+    const res = await fetch(`${this.apiBaseUrl}/stores/${storeId}/themes/sections?fields=names`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!res.ok) throw new Error(`Failed to list section names: ${res.statusText}`);
+    const data = await res.json();
+    return (data.names || []) as string[];
+  }
+}
diff --git a/packages/theme-studio/src/infrastructure/adapters/template-repository.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/template-repository.adapter.ts
new file mode 100644
index 00000000..c020a647
--- /dev/null
+++ b/packages/theme-studio/src/infrastructure/adapters/template-repository.adapter.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from '../../domain/entities/template.entity';
+import type { ITemplateRepository } from '../../domain/ports/template-repository.port';
+
+/**
+ * Adaptador: Implementación de ITemplateRepository
+ * Accede a templates mediante API/S3/etc.
+ * Esta es la capa de infraestructura que implementa el puerto del dominio
+ */
+export class TemplateRepositoryAdapter implements ITemplateRepository {
+  constructor(private readonly apiBaseUrl: string) {}
+
+  async getTemplate(storeId: string, templateType: TemplateType): Promise<Template | null> {
+    const response = await fetch(`${this.apiBaseUrl}/stores/${storeId}/themes/templates/${templateType}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    if (!response.ok) {
+      if (response.status === 404) return null;
+      throw new Error(`Failed to fetch template: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return this.mapToTemplate(data, templateType);
+  }
+
+  async saveTemplate(storeId: string, template: Template): Promise<void> {
+    const response = await fetch(`${this.apiBaseUrl}/stores/${storeId}/themes/templates/${template.type}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sections: template.sections,
+        order: template.order,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to save template: ${response.statusText}`);
+    }
+  }
+
+  async listTemplates(storeId: string): Promise<TemplateType[]> {
+    const response = await fetch(`${this.apiBaseUrl}/stores/${storeId}/themes/templates`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to list templates: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data.templates || [];
+  }
+
+  /**
+   * Mapea datos de la API al formato de la entidad Template
+   */
+  private mapToTemplate(data: any, templateType: TemplateType): Template {
+    return {
+      type: templateType,
+      sections: data.sections || {},
+      order: data.order || [],
+    };
+  }
+}
diff --git a/packages/theme-studio/src/infrastructure/services/.gitkeep b/packages/theme-studio/src/infrastructure/services/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
new file mode 100644
index 00000000..5cc962a0
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -0,0 +1,51 @@
+/*
+ * Theme Studio - Presentación (sin Polaris Frame para evitar scroll)
+ */
+
+'use client';
+
+import { Sidebar } from './sidebar/Sidebar';
+import { PreviewPane } from './preview/PreviewPane';
+import { SettingsPane } from './settings/SettingsPane';
+import { EditorHeader } from './header/EditorHeader';
+import { useState } from 'react';
+
+export interface ThemeStudioProps {
+  storeId: string;
+  apiBaseUrl: string;
+}
+
+export function ThemeStudio({ storeId, apiBaseUrl }: ThemeStudioProps) {
+  const [device, setDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
+
+  return (
+    <div style={{ height: '100dvh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      <EditorHeader
+        pageTitle="Home page"
+        live
+        device={device}
+        onChangeDevice={setDevice}
+        onExit={() => history.back()}
+        onInspector={() => {}}
+        onUndo={() => {}}
+        onRedo={() => {}}
+        onSave={() => {}}
+        isSaving={false}
+      />
+
+      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr 360px', height: '100%', minHeight: 0 }}>
+          <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
+            <Sidebar storeId={storeId} apiBaseUrl={apiBaseUrl} />
+          </div>
+          <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
+            <PreviewPane storeId={storeId} device={device} />
+          </div>
+          <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
+            <SettingsPane storeId={storeId} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
new file mode 100644
index 00000000..dc92d596
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
@@ -0,0 +1,131 @@
+/*
+ * Theme Studio - Editor Header
+ */
+
+'use client';
+
+import { InlineStack, Button, ButtonGroup, Badge, Text, Box, Tooltip, Icon } from '@shopify/polaris';
+import {
+  DesktopIcon,
+  TabletIcon,
+  MobileIcon,
+  SearchIcon,
+  UndoIcon,
+  RedoIcon,
+  SaveIcon,
+  ExitIcon,
+} from '@shopify/polaris-icons';
+
+interface EditorHeaderProps {
+  pageTitle?: string;
+  live?: boolean;
+  device: 'desktop' | 'tablet' | 'mobile';
+  onChangeDevice: (d: 'desktop' | 'tablet' | 'mobile') => void;
+  onExit?: () => void;
+  onInspector?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  onSave?: () => void;
+  isSaving?: boolean;
+}
+
+export function EditorHeader({
+  pageTitle = 'Home page',
+  live = true,
+  device,
+  onChangeDevice,
+  onExit,
+  onInspector,
+  onUndo,
+  onRedo,
+  onSave,
+  isSaving,
+}: EditorHeaderProps) {
+  return (
+    <Box padding="300" borderColor="border" borderBlockEndWidth="025">
+      <InlineStack align="space-between" blockAlign="center">
+        <InlineStack gap="300" blockAlign="center">
+          <Tooltip content="Exit">
+            <Button variant="plain" onClick={onExit} accessibilityLabel="Exit" icon={<Icon source={ExitIcon} />} />
+          </Tooltip>
+          {live && <Badge tone="success">Live</Badge>}
+          <Text as="p" variant="bodyMd">
+            {pageTitle}
+          </Text>
+        </InlineStack>
+
+        <InlineStack gap="300" blockAlign="center">
+          <Box background="bg-fill-tertiary" borderColor="border" borderWidth="025" borderRadius="200">
+            <ButtonGroup>
+              <Tooltip content="Desktop">
+                <Box padding="100" borderRadius="200" background={device === 'desktop' ? 'bg-fill' : undefined}>
+                  <Button
+                    onClick={() => onChangeDevice('desktop')}
+                    accessibilityLabel="Desktop"
+                    icon={<Icon source={DesktopIcon} tone={device === 'desktop' ? 'base' : 'subdued'} />}
+                    variant="plain"
+                  />
+                </Box>
+              </Tooltip>
+              <Tooltip content="Tablet">
+                <Box padding="100" borderRadius="200" background={device === 'tablet' ? 'bg-fill' : undefined}>
+                  <Button
+                    onClick={() => onChangeDevice('tablet')}
+                    accessibilityLabel="Tablet"
+                    icon={<Icon source={TabletIcon} tone={device === 'tablet' ? 'base' : 'subdued'} />}
+                    variant="plain"
+                  />
+                </Box>
+              </Tooltip>
+              <Tooltip content="Mobile">
+                <Box padding="100" borderRadius="200" background={device === 'mobile' ? 'bg-fill' : undefined}>
+                  <Button
+                    onClick={() => onChangeDevice('mobile')}
+                    accessibilityLabel="Mobile"
+                    icon={<Icon source={MobileIcon} tone={device === 'mobile' ? 'base' : 'subdued'} />}
+                    variant="plain"
+                  />
+                </Box>
+              </Tooltip>
+            </ButtonGroup>
+          </Box>
+
+          <Tooltip content="Inspector">
+            <Button
+              onClick={onInspector}
+              accessibilityLabel="Inspector"
+              icon={<Icon source={SearchIcon} />}
+              variant="tertiary"
+            />
+          </Tooltip>
+          <Tooltip content="Deshacer (Ctrl+Z)">
+            <Button
+              onClick={onUndo}
+              accessibilityLabel="Deshacer"
+              icon={<Icon source={UndoIcon} />}
+              variant="tertiary"
+            />
+          </Tooltip>
+          <Tooltip content="Rehacer (Ctrl+Y)">
+            <Button
+              onClick={onRedo}
+              accessibilityLabel="Rehacer"
+              icon={<Icon source={RedoIcon} />}
+              variant="tertiary"
+            />
+          </Tooltip>
+
+          <Tooltip content="Guardar (Ctrl+S)">
+            <Button
+              variant="primary"
+              onClick={onSave}
+              loading={isSaving}
+              accessibilityLabel="Guardar"
+              icon={<Icon source={SaveIcon} />}
+            />
+          </Tooltip>
+        </InlineStack>
+      </InlineStack>
+    </Box>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
new file mode 100644
index 00000000..3937adc3
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -0,0 +1,59 @@
+/*
+ * Theme Studio - Presentación
+ */
+
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+interface PreviewPaneProps {
+  storeId: string;
+  device: 'desktop' | 'tablet' | 'mobile';
+}
+
+export function PreviewPane({ storeId, device }: PreviewPaneProps) {
+  const previewUrl = useMemo(() => `/${storeId}?path=/`, [storeId]);
+
+  const targetWidth = device === 'desktop' ? 1231 : device === 'tablet' ? 834 : 390;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [availableWidth, setAvailableWidth] = useState<number | null>(null);
+
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+
+    const update = () => setAvailableWidth(node.clientWidth);
+    update();
+
+    const ResizeObs = (window as any).ResizeObserver as typeof ResizeObserver | undefined;
+    if (ResizeObs) {
+      const ro = new ResizeObs(() => update());
+      ro.observe(node);
+      return () => ro.disconnect();
+    }
+
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  const width = availableWidth == null ? targetWidth : Math.min(targetWidth, availableWidth);
+
+  return (
+    <div ref={containerRef} style={{ height: '100%', padding: 'var(--p-space-200) 0' }}>
+      <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
+        <iframe
+          title="preview"
+          src={previewUrl}
+          style={{
+            width,
+            height: '100%',
+            border: '1px solid var(--p-color-border)',
+            borderRadius: 8,
+            transition: 'width 220ms ease-in-out',
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
new file mode 100644
index 00000000..48ce87f3
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
@@ -0,0 +1,35 @@
+/*
+ * Theme Studio - Presentación
+ */
+
+'use client';
+
+import { Card, BlockStack, Text, Button, Box, Scrollable } from '@shopify/polaris';
+
+interface SettingsPaneProps {
+  storeId: string;
+}
+
+export function SettingsPane({ storeId }: SettingsPaneProps) {
+  return (
+    <div>
+      <Box padding="200">
+        <Card padding="300">
+          <BlockStack gap="300">
+            <Text as="h2" variant="headingMd">
+              Ajustes
+            </Text>
+            <Scrollable style={{ height: 'calc(100vh - 160px)' }}>
+              <Box padding="200">
+                {/* Aquí irán los formularios generados desde el schema de la sección seleccionada */}
+                <BlockStack gap="200">
+                  <Button variant="primary">Guardar</Button>
+                </BlockStack>
+              </Box>
+            </Scrollable>
+          </BlockStack>
+        </Card>
+      </Box>
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
new file mode 100644
index 00000000..6bd98d33
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
@@ -0,0 +1,36 @@
+/*
+ * Theme Studio - Presentación
+ */
+
+'use client';
+
+import { Card, BlockStack, Button, Text, Scrollable, Box } from '@shopify/polaris';
+
+interface SidebarProps {
+  storeId: string;
+  apiBaseUrl: string;
+}
+
+export function Sidebar({ storeId }: SidebarProps) {
+  return (
+    <div>
+      <Box padding="200">
+        <Card padding="300">
+          <BlockStack gap="300">
+            <Text as="h2" variant="headingMd">
+              Secciones
+            </Text>
+            <Scrollable style={{ height: 'calc(100vh - 160px)' }}>
+              <Box padding="200">
+                <BlockStack gap="200">
+                  {/* Lista de secciones (placeholder) */}
+                  <Button fullWidth>Agregar sección</Button>
+                </BlockStack>
+              </Box>
+            </Scrollable>
+          </BlockStack>
+        </Card>
+      </Box>
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useThemeStudio.ts b/packages/theme-studio/src/presentation/hooks/useThemeStudio.ts
new file mode 100644
index 00000000..b55e4898
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useThemeStudio.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export function useThemeStudio() {
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  return {
+    selectedSectionId,
+    setSelectedSectionId,
+    isSaving,
+    setIsSaving,
+  };
+}
diff --git a/packages/theme-studio/src/presentation/stores/studioStore.ts b/packages/theme-studio/src/presentation/stores/studioStore.ts
new file mode 100644
index 00000000..21af8504
--- /dev/null
+++ b/packages/theme-studio/src/presentation/stores/studioStore.ts
@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+
+interface StudioState {
+  openSections: string[];
+  toggleSection: (id: string) => void;
+}
+
+export const useStudioStore = create<StudioState>((set, get) => ({
+  openSections: [],
+  toggleSection: (id) => {
+    const exists = get().openSections.includes(id);
+    set({ openSections: exists ? get().openSections.filter((s) => s !== id) : [...get().openSections, id] });
+  },
+}));
diff --git a/packages/theme-studio/tsconfig.json b/packages/theme-studio/tsconfig.json
new file mode 100644
index 00000000..4a8e3de9
--- /dev/null
+++ b/packages/theme-studio/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": ".",
+    "paths": {
+      "@domain/*": ["src/domain/*"],
+      "@application/*": ["src/application/*"],
+      "@infrastructure/*": ["src/infrastructure/*"],
+      "@presentation/*": ["src/presentation/*"],
+      "@shared/*": ["src/shared/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 469341ee..7a418d6c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,6 +69,9 @@ importers:
       '@fasttify/theme-editor':
         specifier: workspace:*
         version: link:packages/theme-editor
+      '@fasttify/theme-studio':
+        specifier: workspace:*
+        version: link:packages/theme-studio
       '@hookform/resolvers':
         specifier: 3.3.4
         version: 3.3.4(react-hook-form@7.64.0(react@19.2.0))
@@ -519,6 +522,40 @@ importers:
         specifier: ^5.8.3
         version: 5.9.3
 
+  packages/theme-studio:
+    dependencies:
+      '@shopify/draggable':
+        specifier: ^1.2.1
+        version: 1.2.1
+      '@shopify/polaris':
+        specifier: ^13.9.5
+        version: 13.9.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@shopify/polaris-icons':
+        specifier: ^9.3.1
+        version: 9.3.1(react@19.2.0)
+      '@tanstack/react-query':
+        specifier: ^5.82.0
+        version: 5.90.2(react@19.2.0)
+      react:
+        specifier: ^18.3.1 || ^19.0.0
+        version: 19.2.0
+      react-dom:
+        specifier: ^18.3.1 || ^19.0.0
+        version: 19.2.0(react@19.2.0)
+      zustand:
+        specifier: ^5.0.6
+        version: 5.0.8(@types/react@19.2.2)(immer@9.0.6)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+    devDependencies:
+      '@types/react':
+        specifier: 19.2.2
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: 19.2.2
+        version: 19.2.2(@types/react@19.2.2)
+      typescript:
+        specifier: ^5.8.3
+        version: 5.9.3
+
 packages:
 
   '@adobe/css-tools@4.4.4':
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index b3893874..af3ba86f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,3 +3,4 @@ packages:
   - 'packages/orders-app'
   - 'packages/theme-editor'
   - 'packages/tenant-domains'
+  - 'packages/theme-studio'
diff --git a/tsconfig.base.json b/tsconfig.base.json
index f93fd080..38aaefd4 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -27,6 +27,8 @@
       "@/data-schema": ["./amplify/data/resource"],
       "@/liquid-forge/*": ["./packages/liquid-forge/*"],
       "@/liquid-forge": ["./packages/liquid-forge"],
+      "@/theme-studio/*": ["./packages/theme-studio/src/*"],
+      "@/theme-studio": ["./packages/theme-studio/src"],
       "@/context/*": ["./context/*"],
       "@/hooks/*": ["./hooks/*"],
       "@/tenant-domains/*": ["./packages/tenant-domains/*"],

From 2864e5dd6973db3c69c623cb20d603a4a2dc21df Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 30 Oct 2025 13:08:02 -0500
Subject: [PATCH 03/49] Add preview functionality to StorePage and enhance
 domain resolution

This commit introduces a preview feature in the StorePage component, allowing for theme previews via the /preview route. It adds a new PreviewPageController to handle preview logic and updates the generateMetadata function to return default values for previews. Additionally, the DomainService is modified to decode store parameters, ensuring proper domain resolution. The ThemeStudio and PreviewPane components are updated to accept and utilize the domain prop, improving the overall preview experience.
---
 app/[store]/page.tsx                          | 42 ++++++++++++++-
 .../controllers/preview-page-controller.ts    | 38 ++++++++++++++
 .../src/_lib/services/domain.service.ts       |  8 ++-
 app/store/[slug]/studio/studioClient.tsx      | 16 +++++-
 next.config.ts                                |  1 +
 .../use-cases/render-preview.use-case.ts      |  1 -
 .../presentation/components/ThemeStudio.tsx   |  5 +-
 .../components/preview/PreviewPane.tsx        | 10 ++--
 .../src/presentation/hooks/usePreviewUrl.ts   | 51 +++++++++++++++++++
 9 files changed, 163 insertions(+), 9 deletions(-)
 create mode 100644 app/[store]/src/_lib/controllers/preview-page-controller.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/usePreviewUrl.ts

diff --git a/app/[store]/page.tsx b/app/[store]/page.tsx
index 15290f32..764a802e 100644
--- a/app/[store]/page.tsx
+++ b/app/[store]/page.tsx
@@ -1,6 +1,7 @@
 import DevAutoReloadScript from '@/app/[store]/src/components/DevAutoReloadScript';
 import { StorePageController } from '@/app/[store]/src/_lib/controllers/store-page-controller';
 import { StoreMetadataController } from '@/app/[store]/src/_lib/controllers/store-metadata-controller';
+import { PreviewPageController } from '@/app/[store]/src/_lib/controllers/preview-page-controller';
 import { isAssetPath } from '@/app/[store]/src/lib/store-page-utils';
 import { Metadata } from 'next';
 
@@ -11,6 +12,7 @@ interface StorePageProps {
     store: string;
   }>;
   searchParams: Promise<{
+    domain?: string;
     path?: string;
     [key: string]: string | string[] | undefined;
   }>;
@@ -19,12 +21,40 @@ interface StorePageProps {
 /**
  * Página principal de tienda con SSR
  * Maneja todas las rutas de tienda: /, /products/slug, /collections/slug, etc
+ * También maneja /preview?domain=... para previews del Theme Studio
  *
  * Esta página solo orquesta la llamada al controller, delegando toda la lógica
  */
 export default async function StorePage(props: StorePageProps) {
   const controller = new StorePageController();
+  const awaitedParams = await props.params;
+  const awaitedSearchParams = await props.searchParams;
 
+  // Si la ruta es /preview, usar el controlador de preview
+  if (awaitedParams.store === 'preview' && awaitedSearchParams.domain) {
+    const previewController = new PreviewPageController();
+    const domainParam = Array.isArray(awaitedSearchParams.domain)
+      ? awaitedSearchParams.domain[0]
+      : awaitedSearchParams.domain;
+    const path = Array.isArray(awaitedSearchParams.path)
+      ? awaitedSearchParams.path[0] || '/'
+      : awaitedSearchParams.path || '/';
+
+    const result = await previewController.handle({
+      domain: domainParam,
+      path,
+      searchParams: awaitedSearchParams,
+    });
+
+    return (
+      <>
+        {result.html && <div dangerouslySetInnerHTML={{ __html: result.html }} />}
+        {process.env.NODE_ENV === 'development' && <DevAutoReloadScript />}
+      </>
+    );
+  }
+
+  // Comportamiento normal para rutas de tienda
   let html: string | null = null;
   let errorHtml: string | null = null;
 
@@ -52,7 +82,17 @@ export default async function StorePage(props: StorePageProps) {
  * Genera metadata SEO para la página
  */
 export async function generateMetadata(props: StorePageProps): Promise<Metadata> {
-  const { path } = await props.searchParams;
+  const awaitedParams = await props.params;
+  const awaitedSearchParams = await props.searchParams;
+  const { path } = awaitedSearchParams;
+
+  // Si es preview, no generar metadata (devolver valores por defecto)
+  if (awaitedParams.store === 'preview') {
+    return {
+      title: 'Preview',
+      description: 'Theme Studio Preview',
+    };
+  }
 
   if (path && isAssetPath(path)) {
     return {
diff --git a/app/[store]/src/_lib/controllers/preview-page-controller.ts b/app/[store]/src/_lib/controllers/preview-page-controller.ts
new file mode 100644
index 00000000..7fe7c4d0
--- /dev/null
+++ b/app/[store]/src/_lib/controllers/preview-page-controller.ts
@@ -0,0 +1,38 @@
+import { getCachedRenderResult } from '@/app/[store]/src/lib/store-page-utils';
+
+interface PreviewPageProps {
+  domain: string;
+  path: string;
+  searchParams: Record<string, string | string[] | undefined>;
+}
+
+/**
+ * Controlador para manejar las páginas de preview del Theme Studio
+ * Renderiza directamente usando el dominio sin pasar por resolveDomainFromParam
+ */
+export class PreviewPageController {
+  async handle(props: PreviewPageProps) {
+    const { domain, path, searchParams } = props;
+
+    // Validar que el dominio no sea "preview"
+    if (!domain || domain === 'preview' || domain.startsWith('preview.')) {
+      throw new Error('Invalid domain for preview. Domain must be provided.');
+    }
+
+    // Decodificar el dominio si viene codificado
+    const decodedDomain = decodeURIComponent(domain);
+
+    // Validar que el dominio decodificado tenga el formato correcto
+    if (!decodedDomain.includes('.')) {
+      throw new Error(`Invalid domain format: ${decodedDomain}`);
+    }
+
+    // Renderizar directamente usando el dominio
+    const result = await getCachedRenderResult(decodedDomain, path, searchParams);
+
+    return {
+      html: result.html,
+      metadata: result.metadata,
+    };
+  }
+}
diff --git a/app/[store]/src/_lib/services/domain.service.ts b/app/[store]/src/_lib/services/domain.service.ts
index 72a3135e..4329e750 100644
--- a/app/[store]/src/_lib/services/domain.service.ts
+++ b/app/[store]/src/_lib/services/domain.service.ts
@@ -6,10 +6,16 @@ import { DOMAIN_CONFIG, COMMON_ASSETS } from '@/app/[store]/src/_lib/constants/s
 export class DomainService {
   /**
    * Resuelve el dominio de la tienda a partir del parámetro store
+   * Maneja tanto parámetros codificados como sin codificar
    */
   resolveDomainFromParam(store: string): string {
     const { BASE_DOMAIN } = DOMAIN_CONFIG;
-    return store.includes('.') ? store : `${store}.${BASE_DOMAIN}`;
+
+    // Decodificar el parámetro si viene codificado (ej: tienda-695a7d7%2Efasttify%2Ecom)
+    const decodedStore = decodeURIComponent(store);
+
+    // Si el store decodificado tiene puntos, ya es un dominio completo
+    return decodedStore.includes('.') ? decodedStore : `${decodedStore}.${BASE_DOMAIN}`;
   }
 
   /**
diff --git a/app/store/[slug]/studio/studioClient.tsx b/app/store/[slug]/studio/studioClient.tsx
index 82d55824..5009cbfe 100644
--- a/app/store/[slug]/studio/studioClient.tsx
+++ b/app/store/[slug]/studio/studioClient.tsx
@@ -3,11 +3,25 @@
 import { useParams, usePathname } from 'next/navigation';
 import { getStoreId } from '@/utils/client/store-utils';
 import { ThemeStudio } from '@fasttify/theme-studio';
+import { useMemo } from 'react';
+import { useStore } from '@/app/store/hooks/data/useStore/useStore';
+import { Loading } from '@shopify/polaris';
 
 export default function StudioClient() {
   const pathname = usePathname();
   const params = useParams();
   const storeId = getStoreId(params, pathname);
 
-  return <ThemeStudio storeId={storeId} apiBaseUrl="/api" />;
+  const { store: currentStore, loading } = useStore(storeId);
+
+  const domain = useMemo(() => {
+    if (!currentStore) return null;
+    return currentStore.defaultDomain || null;
+  }, [currentStore]);
+
+  if (loading || !domain) {
+    return <Loading />;
+  }
+
+  return <ThemeStudio storeId={storeId} apiBaseUrl="/api" domain={domain} />;
 }
diff --git a/next.config.ts b/next.config.ts
index 48553812..90ec17d3 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -88,6 +88,7 @@ const nextConfig: NextConfig = {
       },
     ],
   },
+  allowedDevOrigins: ['localhost:3000', '*.localhost:3000'],
   experimental: {
     turbopackFileSystemCacheForDev: true,
   },
diff --git a/packages/theme-studio/src/application/use-cases/render-preview.use-case.ts b/packages/theme-studio/src/application/use-cases/render-preview.use-case.ts
index 0e7b1a9f..0b59121e 100644
--- a/packages/theme-studio/src/application/use-cases/render-preview.use-case.ts
+++ b/packages/theme-studio/src/application/use-cases/render-preview.use-case.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import type { Template } from '../../domain/entities/template.entity';
 import type {
   IPreviewRenderer,
   RenderPreviewParams,
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index 5cc962a0..9be7d97b 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -13,9 +13,10 @@ import { useState } from 'react';
 export interface ThemeStudioProps {
   storeId: string;
   apiBaseUrl: string;
+  domain: string | null;
 }
 
-export function ThemeStudio({ storeId, apiBaseUrl }: ThemeStudioProps) {
+export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
   const [device, setDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
 
   return (
@@ -39,7 +40,7 @@ export function ThemeStudio({ storeId, apiBaseUrl }: ThemeStudioProps) {
             <Sidebar storeId={storeId} apiBaseUrl={apiBaseUrl} />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
-            <PreviewPane storeId={storeId} device={device} />
+            <PreviewPane storeId={storeId} domain={domain} device={device} />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
             <SettingsPane storeId={storeId} />
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index 3937adc3..03e318d0 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -4,15 +4,17 @@
 
 'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { usePreviewUrl } from '../../hooks/usePreviewUrl';
 
 interface PreviewPaneProps {
   storeId: string;
+  domain: string | null;
   device: 'desktop' | 'tablet' | 'mobile';
 }
 
-export function PreviewPane({ storeId, device }: PreviewPaneProps) {
-  const previewUrl = useMemo(() => `/${storeId}?path=/`, [storeId]);
+export function PreviewPane({ domain, device }: PreviewPaneProps) {
+  const { previewUrl } = usePreviewUrl({ domain });
 
   const targetWidth = device === 'desktop' ? 1231 : device === 'tablet' ? 834 : 390;
 
@@ -39,6 +41,8 @@ export function PreviewPane({ storeId, device }: PreviewPaneProps) {
 
   const width = availableWidth == null ? targetWidth : Math.min(targetWidth, availableWidth);
 
+  if (!previewUrl) return null;
+
   return (
     <div ref={containerRef} style={{ height: '100%', padding: 'var(--p-space-200) 0' }}>
       <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
diff --git a/packages/theme-studio/src/presentation/hooks/usePreviewUrl.ts b/packages/theme-studio/src/presentation/hooks/usePreviewUrl.ts
new file mode 100644
index 00000000..727dbed8
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/usePreviewUrl.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo } from 'react';
+
+interface UsePreviewUrlParams {
+  domain: string | null;
+}
+
+interface UsePreviewUrlResult {
+  previewUrl: string | null;
+}
+
+/**
+ * Hook para construir la URL del preview según el entorno
+ * En desarrollo usa /preview?domain=... para evitar cross-origin
+ * En producción usa el dominio completo como hostname
+ */
+export function usePreviewUrl({ domain }: UsePreviewUrlParams): UsePreviewUrlResult {
+  const previewUrl = useMemo(() => {
+    if (!domain) return null;
+
+    const isLocalhost = typeof window !== 'undefined' && window.location.hostname === 'localhost';
+    const currentOrigin = typeof window !== 'undefined' ? window.location.origin : '';
+    const protocol = typeof window !== 'undefined' ? window.location.protocol : 'http:';
+
+    if (isLocalhost) {
+      // Pasar el dominio como query parameter para evitar problemas con puntos en path
+      const encodedDomain = encodeURIComponent(domain);
+      return `${currentOrigin}/preview?domain=${encodedDomain}&path=/`;
+    }
+
+    // En producción, usar el dominio completo como hostname
+    return `${protocol}//${domain}?path=/`;
+  }, [domain]);
+
+  return { previewUrl };
+}

From 29f55507207582a8510ed365dc4836329d655df5 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 30 Oct 2025 13:46:24 -0500
Subject: [PATCH 04/49] Update LICENSE to include Shopify Polaris attribution
 and modify EditorHeader component for improved accessibility and localization

This commit adds attribution for Shopify Polaris to the LICENSE file, ensuring proper credit for the derived components. In the EditorHeader component, the tooltip content for the exit button is updated to Spanish ("Salir"), and the button's loading state is enhanced to display a message when saving. Unused imports for the SearchIcon and SaveIcon are removed to streamline the code.
---
 LICENSE                                       | 13 +++------
 .../components/header/EditorHeader.tsx        | 28 ++++---------------
 2 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/LICENSE b/LICENSE
index f565a68c..6f8cd542 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,3 +1,7 @@
+   Portions of this software are derived from Shopify Polaris (https://polaris.shopify.com)
+   Copyright (c) Shopify Inc.
+   Licensed under the MIT License.
+
                                  Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
@@ -177,15 +181,6 @@
 
    APPENDIX: How to apply the Apache License to your work.
 
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
    Copyright 2025 Fasttify LLC
 
    Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
index dc92d596..3f68475f 100644
--- a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
+++ b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
@@ -5,16 +5,7 @@
 'use client';
 
 import { InlineStack, Button, ButtonGroup, Badge, Text, Box, Tooltip, Icon } from '@shopify/polaris';
-import {
-  DesktopIcon,
-  TabletIcon,
-  MobileIcon,
-  SearchIcon,
-  UndoIcon,
-  RedoIcon,
-  SaveIcon,
-  ExitIcon,
-} from '@shopify/polaris-icons';
+import { DesktopIcon, TabletIcon, MobileIcon, UndoIcon, RedoIcon, ExitIcon } from '@shopify/polaris-icons';
 
 interface EditorHeaderProps {
   pageTitle?: string;
@@ -45,8 +36,8 @@ export function EditorHeader({
     <Box padding="300" borderColor="border" borderBlockEndWidth="025">
       <InlineStack align="space-between" blockAlign="center">
         <InlineStack gap="300" blockAlign="center">
-          <Tooltip content="Exit">
-            <Button variant="plain" onClick={onExit} accessibilityLabel="Exit" icon={<Icon source={ExitIcon} />} />
+          <Tooltip content="Salir">
+            <Button variant="plain" onClick={onExit} accessibilityLabel="Salir" icon={<Icon source={ExitIcon} />} />
           </Tooltip>
           {live && <Badge tone="success">Live</Badge>}
           <Text as="p" variant="bodyMd">
@@ -90,14 +81,6 @@ export function EditorHeader({
             </ButtonGroup>
           </Box>
 
-          <Tooltip content="Inspector">
-            <Button
-              onClick={onInspector}
-              accessibilityLabel="Inspector"
-              icon={<Icon source={SearchIcon} />}
-              variant="tertiary"
-            />
-          </Tooltip>
           <Tooltip content="Deshacer (Ctrl+Z)">
             <Button
               onClick={onUndo}
@@ -121,8 +104,9 @@ export function EditorHeader({
               onClick={onSave}
               loading={isSaving}
               accessibilityLabel="Guardar"
-              icon={<Icon source={SaveIcon} />}
-            />
+              disabled={isSaving}>
+              {isSaving ? 'Guardando...' : 'Guardar'}
+            </Button>
           </Tooltip>
         </InlineStack>
       </InlineStack>

From 0bf19151743628572956b8bb45909ae109e3be69 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 30 Oct 2025 13:50:07 -0500
Subject: [PATCH 05/49] Enhance EditorHeader component with improved tooltip
 accessibility and localization

This commit updates the tooltip content for the exit button in the EditorHeader component to Spanish ("Salir") and enhances the loading state to display a message during saving. Additionally, it removes unused imports for SearchIcon and SaveIcon, streamlining the code.
---
 NOTICE.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 NOTICE.md

diff --git a/NOTICE.md b/NOTICE.md
new file mode 100644
index 00000000..31fa1726
--- /dev/null
+++ b/NOTICE.md
@@ -0,0 +1,24 @@
+# Notice
+
+This project uses components and/or design resources from **Shopify Polaris**,
+an open-source design system licensed under the **MIT License**.
+
+---
+
+## Copyright and License
+
+**Shopify Polaris**
+Copyright (c) Shopify Inc.
+Released under the MIT License.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
+This project is **not affiliated with, endorsed by, or sponsored by Shopify Inc.**
+All trademarks and brand names are the property of their respective owners.

From 27c33520c52b10fb08d027f7f0099e38e2d7d4a4 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 30 Oct 2025 15:02:28 -0500
Subject: [PATCH 06/49] Enhance ThemeStudio and related components with
 improved page selection and preview functionality

This commit introduces several updates to the ThemeStudio component, including the integration of a page selector in the EditorHeader for better navigation between pages. It also updates the PreviewPane to accept a currentPath prop, allowing for dynamic iframe updates based on the selected page. Additionally, the usePreviewUrl hook is modified to handle path parameters, improving the overall preview experience. These changes enhance user interaction and streamline the theme editing process.
---
 .../[storeId]/themes/templates/route.ts       |  40 ++++++
 .../controllers/list-templates-controller.ts  | 101 ++++++++++++++++
 .../presentation/components/ThemeStudio.tsx   |  25 +++-
 .../components/header/EditorHeader.tsx        |  38 +++++-
 .../components/page-selector/PageSelector.tsx | 105 ++++++++++++++++
 .../components/preview/PreviewPane.tsx        |  13 +-
 .../src/presentation/hooks/usePreviewUrl.ts   |   9 +-
 .../presentation/hooks/useStoreTemplates.ts   | 114 ++++++++++++++++++
 8 files changed, 430 insertions(+), 15 deletions(-)
 create mode 100644 app/api/stores/[storeId]/themes/templates/route.ts
 create mode 100644 app/api/stores/_lib/themes/controllers/list-templates-controller.ts
 create mode 100644 packages/theme-studio/src/presentation/components/page-selector/PageSelector.tsx
 create mode 100644 packages/theme-studio/src/presentation/hooks/useStoreTemplates.ts

diff --git a/app/api/stores/[storeId]/themes/templates/route.ts b/app/api/stores/[storeId]/themes/templates/route.ts
new file mode 100644
index 00000000..62d1ba94
--- /dev/null
+++ b/app/api/stores/[storeId]/themes/templates/route.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { listTemplates } from '@/api/stores/_lib/themes/controllers/list-templates-controller';
+import { NextRequest } from 'next/server';
+
+/**
+ * GET /api/stores/[storeId]/themes/templates
+ * Lista todos los templates disponibles del tema desde S3
+ */
+export const GET = withAuthHandler(
+  async (request: NextRequest, { storeId }) => {
+    return listTemplates(request, storeId);
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);
+
+export async function OPTIONS(request: NextRequest) {
+  const corsHeaders = await getNextCorsHeaders(request);
+  return new Response(null, { status: 204, headers: corsHeaders });
+}
diff --git a/app/api/stores/_lib/themes/controllers/list-templates-controller.ts b/app/api/stores/_lib/themes/controllers/list-templates-controller.ts
new file mode 100644
index 00000000..5390fbd8
--- /dev/null
+++ b/app/api/stores/_lib/themes/controllers/list-templates-controller.ts
@@ -0,0 +1,101 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { logger } from '@/liquid-forge';
+import { ListObjectsV2Command, S3Client, ListObjectsV2CommandOutput } from '@aws-sdk/client-s3';
+import type { TemplateType } from '@fasttify/theme-studio';
+
+export async function listTemplates(request: NextRequest, storeId: string): Promise<NextResponse> {
+  const corsHeaders = await getNextCorsHeaders(request);
+
+  try {
+    const s3Client = new S3Client({
+      region: process.env.REGION_BUCKET,
+    });
+
+    const bucketName = process.env.BUCKET_NAME;
+    if (!bucketName) {
+      return NextResponse.json({ error: 'S3 bucket not configured' }, { status: 500, headers: corsHeaders });
+    }
+
+    // Buscar templates en: templates/${storeId}/templates/*.json
+    const prefix = `templates/${storeId}/templates/`;
+    const templates: TemplateType[] = [];
+
+    let continuationToken: string | undefined = undefined;
+
+    do {
+      const command: ListObjectsV2Command = new ListObjectsV2Command({
+        Bucket: bucketName,
+        Prefix: prefix,
+        ContinuationToken: continuationToken,
+      });
+
+      const response: ListObjectsV2CommandOutput = await s3Client.send(command);
+
+      if (response.Contents) {
+        for (const object of response.Contents) {
+          if (object.Key && object.Key.endsWith('.json')) {
+            // Extraer el nombre del template (ej: templates/storeId/templates/index.json -> index)
+            const filename = object.Key.replace(prefix, '').replace('.json', '');
+
+            // Validar que sea un tipo de template válido
+            const validTemplateTypes: TemplateType[] = [
+              'index',
+              'product',
+              'collection',
+              'page',
+              'blog',
+              'article',
+              'search',
+              'cart',
+              'checkout',
+              'checkout_start',
+              'checkout_confirmation',
+              'policies',
+              '404',
+            ];
+
+            if (validTemplateTypes.includes(filename as TemplateType)) {
+              templates.push(filename as TemplateType);
+            }
+          }
+        }
+      }
+
+      continuationToken = response.NextContinuationToken;
+    } while (continuationToken);
+
+    return NextResponse.json(
+      {
+        success: true,
+        templates,
+      },
+      { status: 200, headers: corsHeaders }
+    );
+  } catch (error) {
+    logger.error('Error listing templates', error, 'ListTemplatesAPI');
+    return NextResponse.json(
+      {
+        error: 'Failed to list templates',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500, headers: corsHeaders }
+    );
+  }
+}
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index 9be7d97b..0597a221 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -8,7 +8,9 @@ import { Sidebar } from './sidebar/Sidebar';
 import { PreviewPane } from './preview/PreviewPane';
 import { SettingsPane } from './settings/SettingsPane';
 import { EditorHeader } from './header/EditorHeader';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { useStoreTemplates } from '../hooks/useStoreTemplates';
 
 export interface ThemeStudioProps {
   storeId: string;
@@ -18,20 +20,35 @@ export interface ThemeStudioProps {
 
 export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
   const [device, setDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
+  const [currentPath, setCurrentPath] = useState('/');
+  const [currentPageId, setCurrentPageId] = useState('index');
+  const { pages } = useStoreTemplates({ storeId, apiBaseUrl });
+  const router = useRouter();
+
+  const currentPageTitle = useMemo(() => {
+    const page = pages.find((p) => p.id === currentPageId);
+    return page?.name;
+  }, [pages, currentPageId]);
 
   return (
     <div style={{ height: '100dvh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
       <EditorHeader
-        pageTitle="Home page"
+        storeId={storeId}
+        apiBaseUrl={apiBaseUrl}
+        pageTitle={currentPageTitle}
         live
         device={device}
         onChangeDevice={setDevice}
-        onExit={() => history.back()}
+        onExit={() => router.back()}
         onInspector={() => {}}
         onUndo={() => {}}
         onRedo={() => {}}
         onSave={() => {}}
         isSaving={false}
+        onPageSelect={(pageId, pageUrl) => {
+          setCurrentPath(pageUrl);
+          setCurrentPageId(pageId);
+        }}
       />
 
       <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
@@ -40,7 +57,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
             <Sidebar storeId={storeId} apiBaseUrl={apiBaseUrl} />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
-            <PreviewPane storeId={storeId} domain={domain} device={device} />
+            <PreviewPane storeId={storeId} domain={domain} device={device} currentPath={currentPath} />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
             <SettingsPane storeId={storeId} />
diff --git a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
index 3f68475f..1803309d 100644
--- a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
+++ b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
@@ -4,10 +4,14 @@
 
 'use client';
 
-import { InlineStack, Button, ButtonGroup, Badge, Text, Box, Tooltip, Icon } from '@shopify/polaris';
+import { InlineStack, Button, ButtonGroup, Badge, Text, Box, Tooltip, Icon, SkeletonBodyText } from '@shopify/polaris';
 import { DesktopIcon, TabletIcon, MobileIcon, UndoIcon, RedoIcon, ExitIcon } from '@shopify/polaris-icons';
+import { PageSelector } from '../page-selector/PageSelector';
+import { useStoreTemplates } from '../../hooks/useStoreTemplates';
 
 interface EditorHeaderProps {
+  storeId?: string;
+  apiBaseUrl?: string;
   pageTitle?: string;
   live?: boolean;
   device: 'desktop' | 'tablet' | 'mobile';
@@ -18,9 +22,12 @@ interface EditorHeaderProps {
   onRedo?: () => void;
   onSave?: () => void;
   isSaving?: boolean;
+  onPageSelect?: (pageId: string, pageUrl: string) => void;
 }
 
 export function EditorHeader({
+  storeId,
+  apiBaseUrl,
   pageTitle = 'Home page',
   live = true,
   device,
@@ -31,18 +38,39 @@ export function EditorHeader({
   onRedo,
   onSave,
   isSaving,
+  onPageSelect,
 }: EditorHeaderProps) {
+  const { isLoading: isLoadingTemplates } = useStoreTemplates({
+    storeId,
+    apiBaseUrl: apiBaseUrl || '',
+  });
+
   return (
     <Box padding="300" borderColor="border" borderBlockEndWidth="025">
       <InlineStack align="space-between" blockAlign="center">
-        <InlineStack gap="300" blockAlign="center">
+        <InlineStack gap="200" blockAlign="center">
           <Tooltip content="Salir">
             <Button variant="plain" onClick={onExit} accessibilityLabel="Salir" icon={<Icon source={ExitIcon} />} />
           </Tooltip>
           {live && <Badge tone="success">Live</Badge>}
-          <Text as="p" variant="bodyMd">
-            {pageTitle}
-          </Text>
+          {storeId && apiBaseUrl ? (
+            isLoadingTemplates ? (
+              <div style={{ minHeight: '36px', minWidth: '120px', display: 'flex', alignItems: 'center' }}>
+                <SkeletonBodyText lines={1} />
+              </div>
+            ) : (
+              <PageSelector
+                storeId={storeId}
+                apiBaseUrl={apiBaseUrl}
+                currentPage={pageTitle}
+                onPageSelect={onPageSelect}
+              />
+            )
+          ) : (
+            <Text as="p" variant="bodyMd">
+              {pageTitle}
+            </Text>
+          )}
         </InlineStack>
 
         <InlineStack gap="300" blockAlign="center">
diff --git a/packages/theme-studio/src/presentation/components/page-selector/PageSelector.tsx b/packages/theme-studio/src/presentation/components/page-selector/PageSelector.tsx
new file mode 100644
index 00000000..3eb05996
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/page-selector/PageSelector.tsx
@@ -0,0 +1,105 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Popover, ActionList, TextField, Box, Text, Icon, Button, IconSource, Spinner } from '@shopify/polaris';
+import { SearchIcon, HomeIcon } from '@shopify/polaris-icons';
+import { useStoreTemplates } from '../../hooks/useStoreTemplates';
+
+interface PageSelectorProps {
+  storeId: string | undefined;
+  apiBaseUrl: string;
+  currentPage?: string;
+  onPageSelect?: (pageId: string, pageUrl: string) => void;
+}
+
+/**
+ * Componente selector de páginas basado en los templates disponibles del tema
+ * Obtiene los templates desde S3 y los muestra en un dropdown
+ */
+export function PageSelector({ storeId, apiBaseUrl, currentPage = 'Home page', onPageSelect }: PageSelectorProps) {
+  const [popoverActive, setPopoverActive] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const { pages, isLoading } = useStoreTemplates({ storeId, apiBaseUrl });
+
+  const filteredPages = useMemo(() => {
+    if (!searchQuery.trim()) return pages;
+
+    const query = searchQuery.toLowerCase();
+    return pages.filter((page) => page.name.toLowerCase().includes(query));
+  }, [pages, searchQuery]);
+
+  const handlePageSelect = (page: (typeof pages)[0]) => {
+    onPageSelect?.(page.id, page.url);
+    setPopoverActive(false);
+    setSearchQuery('');
+  };
+
+  const currentPageIcon = useMemo(() => {
+    const page = pages.find((p) => p.name === currentPage);
+    return page?.icon || HomeIcon;
+  }, [pages, currentPage]);
+
+  const activator = (
+    <Button
+      onClick={() => setPopoverActive(!popoverActive)}
+      icon={currentPageIcon as unknown as IconSource}
+      variant="tertiary">
+      {currentPage}
+    </Button>
+  );
+
+  return (
+    <Popover active={popoverActive} activator={activator} onClose={() => setPopoverActive(false)}>
+      <Box padding="400" minWidth="320px">
+        <Box paddingBlockEnd="300">
+          <TextField
+            label="Buscar página"
+            labelHidden
+            value={searchQuery}
+            onChange={setSearchQuery}
+            prefix={<SearchIcon />}
+            placeholder="Buscar página"
+            autoComplete="off"
+          />
+        </Box>
+
+        {isLoading ? (
+          <Box padding="400">
+            <Spinner size="small" />
+          </Box>
+        ) : filteredPages.length === 0 ? (
+          <Box padding="400">
+            <Text as="p" tone="subdued">
+              {searchQuery ? 'No se encontraron páginas' : 'No hay templates disponibles'}
+            </Text>
+          </Box>
+        ) : (
+          <ActionList
+            items={filteredPages.map((page) => ({
+              content: page.name,
+              prefix: <Icon source={page.icon as unknown as IconSource} />,
+              active: currentPage === page.name,
+              onAction: () => handlePageSelect(page),
+            }))}
+          />
+        )}
+      </Box>
+    </Popover>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index 03e318d0..1c481fab 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -11,10 +11,19 @@ interface PreviewPaneProps {
   storeId: string;
   domain: string | null;
   device: 'desktop' | 'tablet' | 'mobile';
+  currentPath?: string;
 }
 
-export function PreviewPane({ domain, device }: PreviewPaneProps) {
-  const { previewUrl } = usePreviewUrl({ domain });
+export function PreviewPane({ domain, device, currentPath = '/' }: PreviewPaneProps) {
+  const { previewUrl } = usePreviewUrl({ domain, path: currentPath });
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  // Actualizar el iframe cuando cambie la URL
+  useEffect(() => {
+    if (iframeRef.current && previewUrl) {
+      iframeRef.current.src = previewUrl;
+    }
+  }, [previewUrl]);
 
   const targetWidth = device === 'desktop' ? 1231 : device === 'tablet' ? 834 : 390;
 
diff --git a/packages/theme-studio/src/presentation/hooks/usePreviewUrl.ts b/packages/theme-studio/src/presentation/hooks/usePreviewUrl.ts
index 727dbed8..18cbefe9 100644
--- a/packages/theme-studio/src/presentation/hooks/usePreviewUrl.ts
+++ b/packages/theme-studio/src/presentation/hooks/usePreviewUrl.ts
@@ -18,6 +18,7 @@ import { useMemo } from 'react';
 
 interface UsePreviewUrlParams {
   domain: string | null;
+  path?: string;
 }
 
 interface UsePreviewUrlResult {
@@ -29,7 +30,7 @@ interface UsePreviewUrlResult {
  * En desarrollo usa /preview?domain=... para evitar cross-origin
  * En producción usa el dominio completo como hostname
  */
-export function usePreviewUrl({ domain }: UsePreviewUrlParams): UsePreviewUrlResult {
+export function usePreviewUrl({ domain, path = '/' }: UsePreviewUrlParams): UsePreviewUrlResult {
   const previewUrl = useMemo(() => {
     if (!domain) return null;
 
@@ -40,12 +41,12 @@ export function usePreviewUrl({ domain }: UsePreviewUrlParams): UsePreviewUrlRes
     if (isLocalhost) {
       // Pasar el dominio como query parameter para evitar problemas con puntos en path
       const encodedDomain = encodeURIComponent(domain);
-      return `${currentOrigin}/preview?domain=${encodedDomain}&path=/`;
+      return `${currentOrigin}/preview?domain=${encodedDomain}&path=${encodeURIComponent(path)}`;
     }
 
     // En producción, usar el dominio completo como hostname
-    return `${protocol}//${domain}?path=/`;
-  }, [domain]);
+    return `${protocol}//${domain}${path}`;
+  }, [domain, path]);
 
   return { previewUrl };
 }
diff --git a/packages/theme-studio/src/presentation/hooks/useStoreTemplates.ts b/packages/theme-studio/src/presentation/hooks/useStoreTemplates.ts
new file mode 100644
index 00000000..b886664b
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useStoreTemplates.ts
@@ -0,0 +1,114 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import type { TemplateType } from '../../domain/entities/template.entity';
+import {
+  HomeIcon,
+  PackageIcon,
+  PageIcon,
+  SearchIcon,
+  CartIcon,
+  CreditCardIcon,
+  AlertCircleIcon,
+  BlogIcon,
+} from '@shopify/polaris-icons';
+import type { ComponentType } from 'react';
+
+export interface StorePage {
+  id: string;
+  name: string;
+  url: string;
+  type: TemplateType;
+  icon: ComponentType<any>;
+}
+
+interface UseStoreTemplatesParams {
+  storeId: string | undefined;
+  apiBaseUrl: string;
+}
+
+interface UseStoreTemplatesResult {
+  pages: StorePage[];
+  isLoading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Mapeo de tipos de templates a nombres amigables, rutas e iconos de Polaris
+ */
+const TEMPLATE_MAP: Record<TemplateType, { name: string; url: string; icon: ComponentType<any> }> = {
+  index: { name: 'Página principal', url: '/', icon: HomeIcon },
+  product: { name: 'Páginas de producto', url: '/products', icon: PackageIcon },
+  collection: { name: 'Páginas de colección', url: '/collections', icon: PackageIcon },
+  page: { name: 'Páginas', url: '/pages', icon: PageIcon },
+  blog: { name: 'Blogs', url: '/blogs', icon: BlogIcon },
+  article: { name: 'Artículos de blog', url: '/blogs', icon: BlogIcon },
+  search: { name: 'Buscador', url: '/search', icon: SearchIcon },
+  cart: { name: 'Carrito', url: '/cart', icon: CartIcon },
+  checkout: { name: 'Checkout', url: '/checkouts/start', icon: CreditCardIcon },
+  checkout_start: { name: 'Checkout', url: '/checkouts/start', icon: CreditCardIcon },
+  checkout_confirmation: { name: 'Confirmación de checkout', url: '/checkouts/confirmation', icon: CreditCardIcon },
+  policies: { name: 'Políticas', url: '/policies', icon: BlogIcon },
+  '404': { name: 'Página 404', url: '/404', icon: AlertCircleIcon },
+};
+
+/**
+ * Hook para obtener los templates disponibles del tema desde S3
+ */
+export function useStoreTemplates({ storeId, apiBaseUrl }: UseStoreTemplatesParams): UseStoreTemplatesResult {
+  const {
+    data: templates,
+    isLoading,
+    error,
+  } = useQuery<TemplateType[]>({
+    queryKey: ['store-templates', storeId],
+    queryFn: async () => {
+      if (!storeId) throw new Error('Store ID is required');
+
+      const response = await fetch(`${apiBaseUrl}/stores/${storeId}/themes/templates`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to list templates: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return data.templates || [];
+    },
+    enabled: !!storeId,
+    staleTime: 5 * 60 * 1000, // 5 minutos
+  });
+
+  const pages = (templates || []).map((templateType) => {
+    const templateInfo = TEMPLATE_MAP[templateType];
+    return {
+      id: templateType,
+      name: templateInfo?.name || templateType,
+      url: templateInfo?.url || `/${templateType}`,
+      type: templateType,
+      icon: templateInfo?.icon || PageIcon,
+    };
+  });
+
+  return {
+    pages,
+    isLoading,
+    error: error instanceof Error ? error : null,
+  };
+}

From bf1b0c01565bddccd4272ef985dac33e7b3ca0c0 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 30 Oct 2025 16:10:23 -0500
Subject: [PATCH 07/49] Update hero section and template configurations for
 improved localization and functionality

This commit modifies the hero section in the fasttify theme to use English collection handles and updates the alt text for images to enhance accessibility. Additionally, it refines the template configuration by consolidating settings for collections per page and ensuring proper localization for button texts. These changes improve the overall user experience and maintainability of the theme.
---
 .../fasttify/theme/sections/hero.liquid       |  18 +-
 .../fasttify/theme/templates/index.json       |   5 +-
 .../renderers/dynamic-page-renderer.ts        |  12 +-
 .../pagination/pagination-limit-extractor.ts  |   5 -
 .../services/rendering/render-page-content.ts |  14 +-
 .../services/rendering/section-renderer.ts    |  42 +++-
 .../presentation/components/ThemeStudio.tsx   |  14 +-
 .../components/preview/PreviewPane.tsx        |  16 +-
 .../presentation/hooks/useIframeNavigation.ts | 206 ++++++++++++++++++
 9 files changed, 296 insertions(+), 36 deletions(-)
 create mode 100644 packages/theme-studio/src/presentation/hooks/useIframeNavigation.ts

diff --git a/packages/example-themes/fasttify/theme/sections/hero.liquid b/packages/example-themes/fasttify/theme/sections/hero.liquid
index 18bd9516..23de0be8 100644
--- a/packages/example-themes/fasttify/theme/sections/hero.liquid
+++ b/packages/example-themes/fasttify/theme/sections/hero.liquid
@@ -3,7 +3,7 @@
 class="collection-hero-section">
   <!-- Header integrado solo para esta sección -->
   {% render 'header' %}
-  {% assign hero_collection = collections['nuevos-productos'] %}
+  {% assign hero_collection = collections['new-products'] %}
     <div class="hero-container">
     <!-- Background Image -->
     <div class="hero-background">
@@ -17,7 +17,7 @@ class="collection-hero-section">
         <img
           class="hero-image"
           src="{{ section.settings.fallback_image | img_url: '1920x1080' }}"
-          alt="{{ hero_collection.title | default: 'Hero' | escape }}"
+          alt="{{ hero_collection.title }}"
           loading="lazy">
       {% else %}
         <div class="hero-placeholder">
@@ -74,7 +74,7 @@ class="collection-hero-section">
         <div class="hero-actions">
           {% if hero_collection.url %}
             <a href="{{ hero_collection.url }}" class="hero-btn hero-btn-primary">
-              <span>{{ section.settings.primary_button_text | default: 'EXPLORAR COLECCIÓN' }}</span>
+              <span>{{ section.settings.primary_button_text }}</span>
             </a>
           {% elsif section.settings.primary_button_text != blank %}
             <a href="{{ section.settings.primary_button_url }}" class="hero-btn hero-btn-primary">
@@ -83,8 +83,8 @@ class="collection-hero-section">
           {% endif %}
 
           {% if section.settings.secondary_button_text != blank %}
-            <a href="{{ section.settings.secondary_button_url | default: '/collections' }}" class="hero-btn hero-btn-secondary">
-              <span>{{ section.settings.secondary_button_text | default: 'VER TODAS' }}</span>
+            <a href="{{ section.settings.secondary_button_url }}" class="hero-btn hero-btn-secondary">
+              <span>{{ section.settings.secondary_button_text }}</span>
             </a>
           {% endif %}
         </div>
@@ -106,7 +106,7 @@ class="collection-hero-section">
         "type": "text",
         "id": "collection_handle",
         "label": "Handle de la colección",
-        "default": "nuevos-productos",
+        "default": "new-products",
         "info": "El handle de la colección a mostrar (ej: nuevos-productos)"
       },
       {
@@ -127,7 +127,7 @@ class="collection-hero-section">
         "type": "text",
         "id": "hero_subtitle",
         "label": "Subtítulo personalizado",
-        "default": "LIMITED SALE",
+        "default": "VENTAS LIMITADAS",
         "info": "Opcional: Subtítulo que aparece sobre el título de la colección"
       },
       {
@@ -170,8 +170,8 @@ class="collection-hero-section">
       {
         "name": "Hero de Colección",
         "settings": {
-          "collection_handle": "nuevos-productos",
-          "hero_subtitle": "LIMITED SALE",
+          "collection_handle": "new-products",
+          "hero_subtitle": "VENTAS LIMITADAS",
           "primary_button_text": "EXPLORAR COLECCIÓN",
           "secondary_button_text": "VER TODAS",
           "secondary_button_url": "/collections"
diff --git a/packages/example-themes/fasttify/theme/templates/index.json b/packages/example-themes/fasttify/theme/templates/index.json
index 491bea56..e890f12a 100644
--- a/packages/example-themes/fasttify/theme/templates/index.json
+++ b/packages/example-themes/fasttify/theme/templates/index.json
@@ -11,10 +11,7 @@
     "home-collections": {
       "type": "sections/home-collections",
       "settings": {
-        "type": "number",
-        "id": "collections_per_page",
-        "label": "Collections per page",
-        "default": 2
+        "collections_per_page": 2
       }
     }
   },
diff --git a/packages/liquid-forge/renderers/dynamic-page-renderer.ts b/packages/liquid-forge/renderers/dynamic-page-renderer.ts
index e62e9d8f..c5e639bd 100644
--- a/packages/liquid-forge/renderers/dynamic-page-renderer.ts
+++ b/packages/liquid-forge/renderers/dynamic-page-renderer.ts
@@ -229,7 +229,8 @@ async function renderSectionsFromConfig(
   templateConfig: any,
   storeId: string,
   context: any,
-  storeTemplate: any
+  storeTemplate: any,
+  pageType?: string
 ): Promise<string> {
   const sectionPromises = templateConfig.order.map(async (sectionId: string) => {
     const sectionConfig = templateConfig.sections[sectionId];
@@ -237,7 +238,14 @@ async function renderSectionsFromConfig(
 
     try {
       const sectionContent = await templateLoader.loadTemplate(storeId, `${sectionConfig.type}.liquid`);
-      return await sectionRenderer.renderSectionWithSchema(sectionConfig.type, sectionContent, context, storeTemplate);
+      return await sectionRenderer.renderSectionWithSchema(
+        sectionConfig.type,
+        sectionContent,
+        context,
+        storeTemplate,
+        sectionId,
+        pageType
+      );
     } catch (error) {
       logger.warn(`Section ${sectionConfig.type} not found`, error, 'DynamicPageRenderer');
       return `<!-- Section '${sectionConfig.type}' not found -->`;
diff --git a/packages/liquid-forge/services/page/data-loader/pagination/pagination-limit-extractor.ts b/packages/liquid-forge/services/page/data-loader/pagination/pagination-limit-extractor.ts
index 959c972a..b6331ad7 100644
--- a/packages/liquid-forge/services/page/data-loader/pagination/pagination-limit-extractor.ts
+++ b/packages/liquid-forge/services/page/data-loader/pagination/pagination-limit-extractor.ts
@@ -54,11 +54,6 @@ export function extractPaginationLimitFromTemplate(
   options: PageRenderOptions,
   analysis: TemplateAnalysis
 ): void {
-  // No necesitamos un `hasPagination` general aquí, ya que los límites se aplicarán por tipo de dato.
-  // if (!analysis.hasPagination) {
-  //   return;
-  // }
-
   const templatePath = getTemplatePath(options.pageType);
   const pageTemplateContent = loadedTemplates[templatePath];
 
diff --git a/packages/liquid-forge/services/rendering/render-page-content.ts b/packages/liquid-forge/services/rendering/render-page-content.ts
index c72e3633..e5ae0bd1 100644
--- a/packages/liquid-forge/services/rendering/render-page-content.ts
+++ b/packages/liquid-forge/services/rendering/render-page-content.ts
@@ -35,7 +35,7 @@ export async function renderPageContent(
 ): Promise<string> {
   if (templatePath.endsWith('.json')) {
     const templateConfig = JSON.parse(pageTemplate.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '$1'));
-    return await renderSectionsFromConfig(templateConfig, storeId, context, storeTemplate);
+    return await renderSectionsFromConfig(templateConfig, storeId, context, storeTemplate, options.pageType);
   } else {
     if (!compiledPageTemplate) {
       throw new Error(`Compiled template for ${templatePath} not loaded`);
@@ -51,7 +51,8 @@ export async function renderSectionsFromConfig(
   templateConfig: any,
   storeId: string,
   context: any,
-  storeTemplate: any
+  storeTemplate: any,
+  pageType?: string
 ): Promise<string> {
   const sectionPromises = templateConfig.order.map(async (sectionId: string) => {
     const sectionConfig = templateConfig.sections[sectionId];
@@ -59,7 +60,14 @@ export async function renderSectionsFromConfig(
 
     try {
       const sectionContent = await templateLoader.loadTemplate(storeId, `${sectionConfig.type}.liquid`);
-      return await sectionRenderer.renderSectionWithSchema(sectionConfig.type, sectionContent, context, storeTemplate);
+      return await sectionRenderer.renderSectionWithSchema(
+        sectionConfig.type,
+        sectionContent,
+        context,
+        storeTemplate,
+        sectionId,
+        pageType
+      );
     } catch (error) {
       logger.warn(`Section ${sectionConfig.type} not found`, error, 'DynamicPageRenderer');
       return `<!-- Section '${sectionConfig.type}' not found -->`;
diff --git a/packages/liquid-forge/services/rendering/section-renderer.ts b/packages/liquid-forge/services/rendering/section-renderer.ts
index a2dbfd1d..964b7ecd 100644
--- a/packages/liquid-forge/services/rendering/section-renderer.ts
+++ b/packages/liquid-forge/services/rendering/section-renderer.ts
@@ -28,28 +28,53 @@ export class SectionRenderer {
     sectionName: string,
     templateContent: string,
     baseContext: RenderContext,
-    storeTemplate?: any
+    storeTemplate?: any,
+    sectionId?: string,
+    pageType?: string
   ): Promise<string> {
     const schemaSettings = schemaParser.extractSchemaSettings(templateContent);
 
-    // LIMPIAR EL CONTENIDO: Eliminar el bloque schema antes de renderizar
     const schemaRegex = /{%-?\s*schema\s*-?%}([\s\S]*?){%-?\s*endschema\s*-?%}/;
     const cleanedContent = templateContent.replace(schemaRegex, '').trim();
 
     try {
       // Obtener settings y blocks reales del storeTemplate si existe
-      const storeSection = storeTemplate?.sections?.[sectionName];
-      const actualSettings = storeSection?.settings || {};
-      const actualBlocks = storeSection?.blocks || [];
+      // Estructura: storeTemplate.templates[pageType].sections[sectionId]
+      let actualSettings: Record<string, any> = {};
+      let actualBlocks: any[] = [];
+
+      if (storeTemplate && sectionId && pageType) {
+        const templateConfig = storeTemplate.templates?.[pageType];
+        const storeSection = templateConfig?.sections?.[sectionId];
+        if (storeSection) {
+          // Validar que settings sea un objeto de valores, no definiciones
+          if (storeSection.settings && typeof storeSection.settings === 'object') {
+            // Si tiene propiedades 'type', 'id', 'label', 'default' es una definición incorrecta
+            if ('type' in storeSection.settings || 'id' in storeSection.settings) {
+              logger.warn(
+                `Template section ${sectionId} has incorrect settings format (should be values, not definitions)`,
+                undefined,
+                'SectionRenderer'
+              );
+              actualSettings = {};
+            } else {
+              actualSettings = storeSection.settings;
+            }
+          }
+          actualBlocks = storeSection.blocks || [];
+        }
+      }
 
-      // Combinar settings: schema defaults + store actual
+      // Combinar settings: schema defaults + store actual (valores del template sobrescriben defaults)
       const finalSettings = { ...schemaSettings, ...actualSettings };
 
       // Crear contexto específico para esta sección
+      // Usar sectionId si está disponible (ID en el template), si no usar sectionName (tipo de sección)
+      const sectionIdForContext = sectionId || sectionName;
       const sectionContext = {
         ...baseContext,
         section: {
-          id: sectionName,
+          id: sectionIdForContext,
           settings: finalSettings,
           blocks: actualBlocks,
         },
@@ -65,10 +90,11 @@ export class SectionRenderer {
         logger.warn(`Attempting simplified render for section ${sectionName}...`, undefined, 'SectionRenderer');
         try {
           // Contexto más básico sin blocks complejos
+          const sectionIdForContext = sectionId || sectionName;
           const simpleContext = {
             ...baseContext,
             section: {
-              id: sectionName,
+              id: sectionIdForContext,
               settings: schemaSettings, // Solo usar defaults del schema
             },
           };
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index 0597a221..f6cd2b83 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -57,7 +57,19 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
             <Sidebar storeId={storeId} apiBaseUrl={apiBaseUrl} />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
-            <PreviewPane storeId={storeId} domain={domain} device={device} currentPath={currentPath} />
+            <PreviewPane
+              storeId={storeId}
+              domain={domain}
+              device={device}
+              currentPath={currentPath}
+              onPathChange={(newPath) => {
+                setCurrentPath(newPath);
+                const page = pages.find((p) => p.url === newPath);
+                if (page) {
+                  setCurrentPageId(page.id);
+                }
+              }}
+            />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
             <SettingsPane storeId={storeId} />
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index 1c481fab..909522ac 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -6,24 +6,31 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { usePreviewUrl } from '../../hooks/usePreviewUrl';
+import { useIframeNavigation } from '../../hooks/useIframeNavigation';
 
 interface PreviewPaneProps {
   storeId: string;
   domain: string | null;
   device: 'desktop' | 'tablet' | 'mobile';
   currentPath?: string;
+  onPathChange?: (newPath: string) => void;
 }
 
-export function PreviewPane({ domain, device, currentPath = '/' }: PreviewPaneProps) {
+export function PreviewPane({ domain, device, currentPath = '/', onPathChange }: PreviewPaneProps) {
   const { previewUrl } = usePreviewUrl({ domain, path: currentPath });
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const { isNavigating } = useIframeNavigation({
+    iframeRef,
+    domain,
+    currentPath,
+    onPathChange,
+  });
 
-  // Actualizar el iframe cuando cambie la URL
   useEffect(() => {
-    if (iframeRef.current && previewUrl) {
+    if (iframeRef.current && previewUrl && !isNavigating) {
       iframeRef.current.src = previewUrl;
     }
-  }, [previewUrl]);
+  }, [previewUrl, isNavigating]);
 
   const targetWidth = device === 'desktop' ? 1231 : device === 'tablet' ? 834 : 390;
 
@@ -56,6 +63,7 @@ export function PreviewPane({ domain, device, currentPath = '/' }: PreviewPanePr
     <div ref={containerRef} style={{ height: '100%', padding: 'var(--p-space-200) 0' }}>
       <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
         <iframe
+          ref={iframeRef}
           title="preview"
           src={previewUrl}
           style={{
diff --git a/packages/theme-studio/src/presentation/hooks/useIframeNavigation.ts b/packages/theme-studio/src/presentation/hooks/useIframeNavigation.ts
new file mode 100644
index 00000000..b3a91736
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useIframeNavigation.ts
@@ -0,0 +1,206 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState, RefObject, useRef } from 'react';
+
+interface UseIframeNavigationParams {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  domain: string | null;
+  currentPath: string;
+  onPathChange?: (newPath: string) => void;
+}
+
+interface UseIframeNavigationResult {
+  isNavigating: boolean;
+}
+
+/**
+ * Hook para interceptar la navegación dentro del iframe y mantener la estructura de preview
+ * Solo funciona en desarrollo (localhost) donde el iframe está en el mismo origen
+ */
+export function useIframeNavigation({
+  iframeRef,
+  domain,
+  currentPath,
+  onPathChange,
+}: UseIframeNavigationParams): UseIframeNavigationResult {
+  const [isNavigating, setIsNavigating] = useState(false);
+  const isMountedRef = useRef(true);
+  const cleanupFunctionsRef = useRef<Array<() => void>>([]);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || !domain || !onPathChange) return;
+
+    const isLocalhost = typeof window !== 'undefined' && window.location.hostname === 'localhost';
+
+    // Solo interceptar en desarrollo (mismo origen)
+    if (!isLocalhost) return;
+
+    let originalPushState: typeof History.prototype.pushState | null = null;
+    let originalReplaceState: typeof History.prototype.replaceState | null = null;
+
+    const safeSetIsNavigating = (value: boolean) => {
+      if (isMountedRef.current) {
+        setIsNavigating(value);
+      }
+    };
+
+    const safeOnPathChange = (newPath: string) => {
+      if (isMountedRef.current && onPathChange) {
+        onPathChange(newPath);
+      }
+    };
+
+    const setupInterception = () => {
+      safeSetIsNavigating(false);
+
+      try {
+        const iframeWindow = iframe.contentWindow;
+        const iframeDocument = iframe.contentDocument || iframeWindow?.document;
+
+        if (!iframeWindow || !iframeDocument) return;
+
+        // Verificar que el documento esté activo antes de continuar
+        if (iframeDocument.readyState !== 'complete' && iframeDocument.readyState !== 'interactive') {
+          return;
+        }
+
+        // Interceptar clics en enlaces
+        const handleClick = (e: MouseEvent) => {
+          if (!isMountedRef.current) return;
+
+          const target = e.target as HTMLElement;
+          const link = target.closest('a');
+
+          if (!link) return;
+
+          const href = link.getAttribute('href');
+          if (!href || href.startsWith('http') || href.startsWith('//') || href.startsWith('#')) {
+            return; // Enlaces externos o anchors, dejar que funcionen normalmente
+          }
+
+          // Prevenir navegación directa
+          e.preventDefault();
+          e.stopPropagation();
+
+          // Extraer el path y actualizar el padre
+          const newPath = href.startsWith('/') ? href : `/${href}`;
+          if (newPath !== currentPath) {
+            safeSetIsNavigating(true);
+            safeOnPathChange(newPath);
+          }
+        };
+
+        try {
+          originalPushState = iframeWindow.history.pushState.bind(iframeWindow.history);
+          originalReplaceState = iframeWindow.history.replaceState.bind(iframeWindow.history);
+
+          iframeWindow.history.pushState = function (...args) {
+            try {
+              if (originalPushState && iframeDocument.readyState === 'complete') {
+                originalPushState(...args);
+              }
+              const newPath = args[2] as string;
+              if (newPath && newPath !== currentPath && isMountedRef.current) {
+                safeSetIsNavigating(true);
+                safeOnPathChange(newPath);
+              }
+            } catch (error) {
+              console.debug('Cannot use pushState (document not active):', error);
+            }
+          };
+
+          iframeWindow.history.replaceState = function (...args) {
+            try {
+              if (originalReplaceState && iframeDocument.readyState === 'complete') {
+                originalReplaceState(...args);
+              }
+              const newPath = args[2] as string;
+              if (newPath && newPath !== currentPath && isMountedRef.current) {
+                safeSetIsNavigating(true);
+                safeOnPathChange(newPath);
+              }
+            } catch (error) {
+              console.debug('Cannot use replaceState (document not active):', error);
+            }
+          };
+        } catch (error) {
+          // No se puede acceder a history APIs, ignorar
+          console.debug('Cannot intercept history APIs:', error);
+        }
+
+        iframeDocument.addEventListener('click', handleClick, true);
+
+        const cleanup = () => {
+          try {
+            iframeDocument.removeEventListener('click', handleClick, true);
+            if (originalPushState && iframeWindow && iframeDocument.readyState === 'complete') {
+              iframeWindow.history.pushState = originalPushState;
+            }
+            if (originalReplaceState && iframeWindow && iframeDocument.readyState === 'complete') {
+              iframeWindow.history.replaceState = originalReplaceState;
+            }
+          } catch (error) {
+            console.debug('Error during cleanup (document not active):', error);
+          }
+        };
+
+        cleanupFunctionsRef.current.push(cleanup);
+      } catch (error) {
+        console.debug('Cannot access iframe content (cross-origin):', error);
+      }
+    };
+
+    const handleLoad = () => {
+      cleanupFunctionsRef.current.forEach((cleanup) => {
+        try {
+          cleanup();
+        } catch (error) {}
+      });
+      cleanupFunctionsRef.current = [];
+
+      if (isMountedRef.current) {
+        setupInterception();
+      }
+    };
+
+    iframe.addEventListener('load', handleLoad);
+
+    if (iframe.contentDocument?.readyState === 'complete') {
+      handleLoad();
+    }
+
+    return () => {
+      iframe.removeEventListener('load', handleLoad);
+      cleanupFunctionsRef.current.forEach((cleanup) => {
+        try {
+          cleanup();
+        } catch (error) {}
+      });
+      cleanupFunctionsRef.current = [];
+    };
+  }, [iframeRef, domain, currentPath, onPathChange]);
+
+  return { isNavigating };
+}

From f7a6dca7cebcbfab6eb28f416ea6a37b821e9199 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 30 Oct 2025 16:26:16 -0500
Subject: [PATCH 08/49] Optimize iframe navigation and preview updates in
 ThemeStudio components

This commit enhances the PreviewPane and useIframeNavigation hook by implementing a mechanism to prevent unnecessary iframe reloads when the preview URL remains unchanged. Additionally, it introduces a helper function to extract the real path from the iframe's URL, ensuring that path changes are only processed when they differ from the current path and are not navigations to the /preview route. These improvements streamline the user experience and reduce redundant updates during navigation.
---
 .../components/preview/PreviewPane.tsx        |  7 +++-
 .../presentation/hooks/useIframeNavigation.ts | 33 ++++++++++++++++---
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index 909522ac..da7f55b3 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -25,10 +25,15 @@ export function PreviewPane({ domain, device, currentPath = '/', onPathChange }:
     currentPath,
     onPathChange,
   });
+  const lastUrlRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (iframeRef.current && previewUrl && !isNavigating) {
-      iframeRef.current.src = previewUrl;
+      // Solo actualizar si la URL es diferente a la última cargada
+      if (lastUrlRef.current !== previewUrl) {
+        lastUrlRef.current = previewUrl;
+        iframeRef.current.src = previewUrl;
+      }
     }
   }, [previewUrl, isNavigating]);
 
diff --git a/packages/theme-studio/src/presentation/hooks/useIframeNavigation.ts b/packages/theme-studio/src/presentation/hooks/useIframeNavigation.ts
index b3a91736..b20325be 100644
--- a/packages/theme-studio/src/presentation/hooks/useIframeNavigation.ts
+++ b/packages/theme-studio/src/presentation/hooks/useIframeNavigation.ts
@@ -116,13 +116,35 @@ export function useIframeNavigation({
           originalPushState = iframeWindow.history.pushState.bind(iframeWindow.history);
           originalReplaceState = iframeWindow.history.replaceState.bind(iframeWindow.history);
 
+          // Función helper para extraer el path real del iframe
+          const extractRealPath = (pathOrUrl: string): string | null => {
+            if (!pathOrUrl) return null;
+
+            // Si el path es /preview, extraer el path real del query parameter
+            if (pathOrUrl.startsWith('/preview')) {
+              try {
+                const url = new URL(pathOrUrl, window.location.origin);
+                const pathParam = url.searchParams.get('path');
+                return pathParam || '/';
+              } catch {
+                return null;
+              }
+            }
+
+            // Si no es /preview, usar el path directamente
+            return pathOrUrl.startsWith('/') ? pathOrUrl : `/${pathOrUrl}`;
+          };
+
           iframeWindow.history.pushState = function (...args) {
             try {
               if (originalPushState && iframeDocument.readyState === 'complete') {
                 originalPushState(...args);
               }
-              const newPath = args[2] as string;
-              if (newPath && newPath !== currentPath && isMountedRef.current) {
+              const rawPath = args[2] as string;
+              const newPath = extractRealPath(rawPath);
+
+              // Solo actualizar si el path es diferente y no es una navegación a /preview
+              if (newPath && newPath !== currentPath && newPath !== '/preview' && isMountedRef.current) {
                 safeSetIsNavigating(true);
                 safeOnPathChange(newPath);
               }
@@ -136,8 +158,11 @@ export function useIframeNavigation({
               if (originalReplaceState && iframeDocument.readyState === 'complete') {
                 originalReplaceState(...args);
               }
-              const newPath = args[2] as string;
-              if (newPath && newPath !== currentPath && isMountedRef.current) {
+              const rawPath = args[2] as string;
+              const newPath = extractRealPath(rawPath);
+
+              // Solo actualizar si el path es diferente y no es una navegación a /preview
+              if (newPath && newPath !== currentPath && newPath !== '/preview' && isMountedRef.current) {
                 safeSetIsNavigating(true);
                 safeOnPathChange(newPath);
               }

From 8829a6a025d227479286fc9ee12b428a5945b97e Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 30 Oct 2025 17:18:47 -0500
Subject: [PATCH 09/49] Enhance Sidebar component with dynamic page title and
 loading state management

This commit updates the Sidebar component to accept a currentPageId prop, allowing it to display the title of the current page dynamically. It also integrates loading state management for template and layout structures, improving user experience during data fetching. The Sidebar now shows a loading indicator while fetching necessary data, ensuring a smoother interaction within the ThemeStudio.
---
 .../themes/layout/structure/route.ts          |  40 ++++
 .../themes/sections/available/route.ts        |  40 ++++
 .../themes/structure/[pageType]/route.ts      |  48 ++++
 .../get-layout-structure-controller.ts        | 205 ++++++++++++++++++
 .../get-template-structure-controller.ts      | 148 +++++++++++++
 .../list-available-sections-controller.ts     | 124 +++++++++++
 .../presentation/components/ThemeStudio.tsx   |   2 +-
 .../components/sidebar/Sidebar.tsx            |  65 +++++-
 .../components/sidebar/SidebarLoading.tsx     |  30 +++
 .../hooks/useAvailableSections.ts             |  65 ++++++
 .../presentation/hooks/useLayoutStructure.ts  |  86 ++++++++
 .../hooks/useTemplateStructure.ts             |  87 ++++++++
 12 files changed, 933 insertions(+), 7 deletions(-)
 create mode 100644 app/api/stores/[storeId]/themes/layout/structure/route.ts
 create mode 100644 app/api/stores/[storeId]/themes/sections/available/route.ts
 create mode 100644 app/api/stores/[storeId]/themes/structure/[pageType]/route.ts
 create mode 100644 app/api/stores/_lib/themes/controllers/get-layout-structure-controller.ts
 create mode 100644 app/api/stores/_lib/themes/controllers/get-template-structure-controller.ts
 create mode 100644 app/api/stores/_lib/themes/controllers/list-available-sections-controller.ts
 create mode 100644 packages/theme-studio/src/presentation/components/sidebar/SidebarLoading.tsx
 create mode 100644 packages/theme-studio/src/presentation/hooks/useAvailableSections.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useLayoutStructure.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useTemplateStructure.ts

diff --git a/app/api/stores/[storeId]/themes/layout/structure/route.ts b/app/api/stores/[storeId]/themes/layout/structure/route.ts
new file mode 100644
index 00000000..2f5f261e
--- /dev/null
+++ b/app/api/stores/[storeId]/themes/layout/structure/route.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { getLayoutStructure } from '@/api/stores/_lib/themes/controllers/get-layout-structure-controller';
+import { NextRequest } from 'next/server';
+
+/**
+ * GET /api/stores/[storeId]/themes/layout/structure
+ * Obtiene la estructura completa del layout procesada (Header, Footer, Other)
+ */
+export const GET = withAuthHandler(
+  async (request: NextRequest, { storeId }) => {
+    return getLayoutStructure(request, storeId);
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);
+
+export async function OPTIONS(request: NextRequest) {
+  const corsHeaders = await getNextCorsHeaders(request);
+  return new Response(null, { status: 204, headers: corsHeaders });
+}
diff --git a/app/api/stores/[storeId]/themes/sections/available/route.ts b/app/api/stores/[storeId]/themes/sections/available/route.ts
new file mode 100644
index 00000000..53b3fd1f
--- /dev/null
+++ b/app/api/stores/[storeId]/themes/sections/available/route.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { listAvailableSections } from '@/api/stores/_lib/themes/controllers/list-available-sections-controller';
+import { NextRequest } from 'next/server';
+
+/**
+ * GET /api/stores/[storeId]/themes/sections/available
+ * Lista todas las secciones disponibles para agregar al template
+ */
+export const GET = withAuthHandler(
+  async (request: NextRequest, { storeId }) => {
+    return listAvailableSections(request, storeId);
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);
+
+export async function OPTIONS(request: NextRequest) {
+  const corsHeaders = await getNextCorsHeaders(request);
+  return new Response(null, { status: 204, headers: corsHeaders });
+}
diff --git a/app/api/stores/[storeId]/themes/structure/[pageType]/route.ts b/app/api/stores/[storeId]/themes/structure/[pageType]/route.ts
new file mode 100644
index 00000000..ac3ed170
--- /dev/null
+++ b/app/api/stores/[storeId]/themes/structure/[pageType]/route.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { getTemplateStructure } from '@/api/stores/_lib/themes/controllers/get-template-structure-controller';
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * GET /api/stores/[storeId]/themes/structure/[pageType]
+ * Obtiene la estructura completa del template procesada (con schemas parseados)
+ */
+export const GET = withAuthHandler(
+  async (request: NextRequest, { storeId }) => {
+    const params = (request as any).params || {};
+    const pageType = params.pageType;
+
+    if (!pageType || typeof pageType !== 'string') {
+      const corsHeaders = await getNextCorsHeaders(request);
+      return NextResponse.json({ error: 'Page type is required' }, { status: 400, headers: corsHeaders });
+    }
+
+    return getTemplateStructure(request, storeId, pageType);
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);
+
+export async function OPTIONS(request: NextRequest) {
+  const corsHeaders = await getNextCorsHeaders(request);
+  return new Response(null, { status: 204, headers: corsHeaders });
+}
diff --git a/app/api/stores/_lib/themes/controllers/get-layout-structure-controller.ts b/app/api/stores/_lib/themes/controllers/get-layout-structure-controller.ts
new file mode 100644
index 00000000..65881b78
--- /dev/null
+++ b/app/api/stores/_lib/themes/controllers/get-layout-structure-controller.ts
@@ -0,0 +1,205 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { logger } from '@/liquid-forge';
+import { templateLoader } from '@/liquid-forge/services/templates/template-loader';
+import { schemaParser } from '@/liquid-forge/services/templates/parsing/schema-parser';
+
+interface LayoutSection {
+  id: string;
+  type: string;
+  name: string;
+  isSnippet: boolean;
+  schema: {
+    name: string;
+    settings: any[];
+    blocks: any[];
+    presets: any[];
+  };
+}
+
+interface SectionReference {
+  name: string;
+  isRender: boolean;
+  position: number;
+}
+
+/**
+ * Extrae todas las referencias a secciones y snippets del layout
+ */
+function extractSectionReferences(layoutContent: string): SectionReference[] {
+  const references: SectionReference[] = [];
+  const regex = /{%\s*(section|render)\s+['"]([^'"]+)['"]\s*%}/g;
+  let match;
+
+  while ((match = regex.exec(layoutContent)) !== null) {
+    references.push({
+      name: match[2],
+      isRender: match[1] === 'render',
+      position: match.index,
+    });
+  }
+
+  return references.filter((ref) => !ref.name.endsWith('.json'));
+}
+
+/**
+ * Encuentra la posición donde comienza el contenido principal del layout
+ */
+function findMainContentStart(layoutContent: string): number {
+  const contentForLayoutIndex = layoutContent.indexOf('{{ content_for_layout }}');
+  const mainTagMatch = layoutContent.match(/<main[^>]*>/i);
+  const mainTagIndex = mainTagMatch ? layoutContent.indexOf(mainTagMatch[0]) : -1;
+
+  if (contentForLayoutIndex !== -1 && mainTagIndex !== -1) {
+    return Math.min(contentForLayoutIndex, mainTagIndex);
+  }
+  return contentForLayoutIndex !== -1
+    ? contentForLayoutIndex
+    : mainTagIndex !== -1
+      ? mainTagIndex
+      : layoutContent.length;
+}
+
+/**
+ * Categoriza las referencias de secciones según su posición en el layout
+ */
+function categorizeSections(
+  references: SectionReference[],
+  layoutContent: string,
+  mainContentStart: number
+): { header: SectionReference[]; footer: SectionReference[]; other: SectionReference[] } {
+  const bodyCloseIndex = layoutContent.indexOf('</body>');
+  const categories = {
+    header: [] as SectionReference[],
+    footer: [] as SectionReference[],
+    other: [] as SectionReference[],
+  };
+
+  for (const ref of references) {
+    if (ref.position < mainContentStart) {
+      categories.header.push(ref);
+    } else if (bodyCloseIndex === -1 || ref.position < bodyCloseIndex) {
+      categories.footer.push(ref);
+    } else {
+      categories.other.push(ref);
+    }
+  }
+
+  return categories;
+}
+
+/**
+ * Carga el contenido de una sección o snippet
+ */
+async function loadSectionContent(
+  storeId: string,
+  ref: SectionReference
+): Promise<{ content: string; type: string; isSnippet: boolean } | null> {
+  if (ref.isRender) {
+    // Intentar como snippet primero, luego como section
+    try {
+      const content = await templateLoader.loadTemplate(storeId, `snippets/${ref.name}.liquid`);
+      return { content, type: `snippets/${ref.name}`, isSnippet: true };
+    } catch {
+      try {
+        const content = await templateLoader.loadTemplate(storeId, `sections/${ref.name}.liquid`);
+        return { content, type: `sections/${ref.name}`, isSnippet: false };
+      } catch {
+        return null;
+      }
+    }
+  }
+
+  // Es {% section %}, buscar en sections
+  try {
+    const content = await templateLoader.loadTemplate(storeId, `sections/${ref.name}.liquid`);
+    return { content, type: `sections/${ref.name}`, isSnippet: false };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Procesa una referencia de sección y extrae su información completa
+ */
+async function processSection(storeId: string, ref: SectionReference): Promise<LayoutSection | null> {
+  const loaded = await loadSectionContent(storeId, ref);
+  if (!loaded) {
+    logger.warn(`Failed to load section ${ref.name}`, undefined, 'GetLayoutStructure');
+    return null;
+  }
+
+  const schema = schemaParser.extractFullSchema(loaded.content);
+
+  return {
+    id: ref.name,
+    type: loaded.type,
+    name: schema?.name || ref.name,
+    isSnippet: loaded.isSnippet,
+    schema: {
+      name: schema?.name || ref.name,
+      settings: schema?.settings || [],
+      blocks: schema?.blocks || [],
+      presets: schema?.presets || [],
+    },
+  };
+}
+
+/**
+ * Procesa múltiples referencias de secciones en paralelo
+ */
+async function processSections(storeId: string, references: SectionReference[]): Promise<LayoutSection[]> {
+  const results = await Promise.all(references.map((ref) => processSection(storeId, ref)));
+  return results.filter((section): section is LayoutSection => section !== null);
+}
+
+export async function getLayoutStructure(request: NextRequest, storeId: string): Promise<NextResponse> {
+  const corsHeaders = await getNextCorsHeaders(request);
+
+  try {
+    const layoutContent = await templateLoader.loadMainLayout(storeId);
+    const references = extractSectionReferences(layoutContent);
+    const mainContentStart = findMainContentStart(layoutContent);
+    const categories = categorizeSections(references, layoutContent, mainContentStart);
+
+    const [headerSections, footerSections, otherSections] = await Promise.all([
+      processSections(storeId, categories.header),
+      processSections(storeId, categories.footer),
+      processSections(storeId, categories.other),
+    ]);
+
+    return NextResponse.json(
+      {
+        header: { sections: headerSections },
+        footer: { sections: footerSections },
+        other: { sections: otherSections },
+      },
+      { status: 200, headers: corsHeaders }
+    );
+  } catch (error) {
+    logger.error('Error getting layout structure', error, 'GetLayoutStructure');
+    return NextResponse.json(
+      {
+        error: 'Failed to get layout structure',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500, headers: corsHeaders }
+    );
+  }
+}
diff --git a/app/api/stores/_lib/themes/controllers/get-template-structure-controller.ts b/app/api/stores/_lib/themes/controllers/get-template-structure-controller.ts
new file mode 100644
index 00000000..e649a6ff
--- /dev/null
+++ b/app/api/stores/_lib/themes/controllers/get-template-structure-controller.ts
@@ -0,0 +1,148 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { logger } from '@/liquid-forge';
+import { templateLoader } from '@/liquid-forge/services/templates/template-loader';
+import { schemaParser } from '@/liquid-forge/services/templates/parsing/schema-parser';
+
+const TEMPLATE_PATHS: Record<string, string> = {
+  index: 'templates/index.json',
+  product: 'templates/product.json',
+  collection: 'templates/collection.json',
+  cart: 'templates/cart.json',
+  page: 'templates/page.json',
+  policies: 'templates/policies.json',
+  search: 'templates/search.json',
+  '404': 'templates/404.json',
+  checkout: 'templates/checkout.json',
+  checkout_confirmation: 'templates/checkout_confirmation.json',
+};
+
+function getTemplatePath(pageType: string): string {
+  return TEMPLATE_PATHS[pageType] || `templates/${pageType}.json`;
+}
+
+interface TemplateSection {
+  id: string;
+  type: string;
+  name: string;
+  settings: Record<string, any>;
+  blocks?: any[];
+  schema: {
+    name: string;
+    settings: any[];
+    blocks: any[];
+    presets: any[];
+  };
+}
+
+export async function getTemplateStructure(
+  request: NextRequest,
+  storeId: string,
+  pageType: string
+): Promise<NextResponse> {
+  const corsHeaders = await getNextCorsHeaders(request);
+
+  try {
+    const templatePath = getTemplatePath(pageType);
+
+    // Cargar el template JSON
+    const templateContent = await templateLoader.loadTemplate(storeId, templatePath);
+    const templateConfig = JSON.parse(templateContent.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '$1'));
+
+    if (!templateConfig.sections || !templateConfig.order) {
+      return NextResponse.json(
+        {
+          error: 'Invalid template structure',
+          message: 'Template must have sections and order properties',
+        },
+        { status: 400, headers: corsHeaders }
+      );
+    }
+
+    // Procesar cada sección en paralelo
+    const sectionsPromises = templateConfig.order.map(async (sectionId: string) => {
+      const sectionConfig = templateConfig.sections[sectionId];
+      if (!sectionConfig) {
+        return null;
+      }
+
+      try {
+        // Cargar el contenido de la sección Liquid
+        const sectionContent = await templateLoader.loadTemplate(storeId, `${sectionConfig.type}.liquid`);
+
+        // Extraer el schema completo
+        const schema = schemaParser.extractFullSchema(sectionContent);
+
+        const section: TemplateSection = {
+          id: sectionId,
+          type: sectionConfig.type,
+          name: schema?.name || sectionId,
+          settings: sectionConfig.settings || {},
+          blocks: sectionConfig.blocks || [],
+          schema: {
+            name: schema?.name || sectionId,
+            settings: schema?.settings || [],
+            blocks: schema?.blocks || [],
+            presets: schema?.presets || [],
+          },
+        };
+
+        return section;
+      } catch (error) {
+        logger.warn(`Failed to load section ${sectionConfig.type}`, error, 'GetTemplateStructure');
+        // Retornar sección con información mínima si falla
+        return {
+          id: sectionId,
+          type: sectionConfig.type,
+          name: sectionId,
+          settings: sectionConfig.settings || {},
+          blocks: sectionConfig.blocks || [],
+          schema: {
+            name: sectionId,
+            settings: [],
+            blocks: [],
+            presets: [],
+          },
+        } as TemplateSection;
+      }
+    });
+
+    const sections = (await Promise.all(sectionsPromises)).filter(
+      (section): section is TemplateSection => section !== null
+    );
+
+    return NextResponse.json(
+      {
+        pageType,
+        sections,
+        order: templateConfig.order,
+      },
+      { status: 200, headers: corsHeaders }
+    );
+  } catch (error) {
+    logger.error('Error getting template structure', error, 'GetTemplateStructure');
+    return NextResponse.json(
+      {
+        error: 'Failed to get template structure',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500, headers: corsHeaders }
+    );
+  }
+}
diff --git a/app/api/stores/_lib/themes/controllers/list-available-sections-controller.ts b/app/api/stores/_lib/themes/controllers/list-available-sections-controller.ts
new file mode 100644
index 00000000..abf4d32b
--- /dev/null
+++ b/app/api/stores/_lib/themes/controllers/list-available-sections-controller.ts
@@ -0,0 +1,124 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { logger } from '@/liquid-forge';
+import { ListObjectsV2Command, S3Client, ListObjectsV2CommandOutput } from '@aws-sdk/client-s3';
+import { templateLoader } from '@/liquid-forge/services/templates/template-loader';
+import { schemaParser } from '@/liquid-forge/services/templates/parsing/schema-parser';
+
+interface AvailableSection {
+  type: string;
+  name: string;
+  category?: string;
+  icon?: string;
+  description?: string;
+}
+
+export async function listAvailableSections(request: NextRequest, storeId: string): Promise<NextResponse> {
+  const corsHeaders = await getNextCorsHeaders(request);
+
+  try {
+    const s3Client = new S3Client({
+      region: process.env.REGION_BUCKET,
+    });
+
+    const bucketName = process.env.BUCKET_NAME;
+    if (!bucketName) {
+      return NextResponse.json({ error: 'S3 bucket not configured' }, { status: 500, headers: corsHeaders });
+    }
+
+    // Buscar secciones en: templates/${storeId}/sections/*.liquid
+    const prefix = `templates/${storeId}/sections/`;
+    const sectionFiles: string[] = [];
+
+    let continuationToken: string | undefined = undefined;
+
+    do {
+      const command: ListObjectsV2Command = new ListObjectsV2Command({
+        Bucket: bucketName,
+        Prefix: prefix,
+        ContinuationToken: continuationToken,
+      });
+
+      const response: ListObjectsV2CommandOutput = await s3Client.send(command);
+
+      if (response.Contents) {
+        for (const object of response.Contents) {
+          if (object.Key && object.Key.endsWith('.liquid')) {
+            // Extraer el nombre de la sección (ej: templates/storeId/sections/hero.liquid -> sections/hero)
+            const relativePath = object.Key.replace(`templates/${storeId}/`, '');
+            const sectionType = relativePath.replace('.liquid', '');
+            sectionFiles.push(sectionType);
+          }
+        }
+      }
+
+      continuationToken = response.NextContinuationToken;
+    } while (continuationToken);
+
+    // Procesar cada sección para extraer información del schema
+    const sectionsPromises = sectionFiles.map(async (sectionType): Promise<AvailableSection | null> => {
+      try {
+        const sectionContent = await templateLoader.loadTemplate(storeId, `${sectionType}.liquid`);
+        const schema = schemaParser.extractFullSchema(sectionContent);
+
+        if (!schema) {
+          return null;
+        }
+
+        // Extraer categoría del primer preset si existe
+        const category = schema.presets?.[0]?.category || undefined;
+        const icon = schema.presets?.[0]?.icon || undefined;
+
+        return {
+          type: sectionType,
+          name: schema.name || sectionType,
+          category,
+          icon,
+          description: schema.description || undefined,
+        };
+      } catch (error) {
+        logger.warn(`Failed to process section ${sectionType}`, error, 'ListAvailableSections');
+        return null;
+      }
+    });
+
+    const sections = (await Promise.all(sectionsPromises)).filter(
+      (section): section is AvailableSection => section !== null
+    );
+
+    // Ordenar por nombre
+    sections.sort((a, b) => a.name.localeCompare(b.name));
+
+    return NextResponse.json(
+      {
+        sections,
+      },
+      { status: 200, headers: corsHeaders }
+    );
+  } catch (error) {
+    logger.error('Error listing available sections', error, 'ListAvailableSections');
+    return NextResponse.json(
+      {
+        error: 'Failed to list available sections',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500, headers: corsHeaders }
+    );
+  }
+}
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index f6cd2b83..bb17cfb4 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -54,7 +54,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
       <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
         <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr 360px', height: '100%', minHeight: 0 }}>
           <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
-            <Sidebar storeId={storeId} apiBaseUrl={apiBaseUrl} />
+            <Sidebar storeId={storeId} apiBaseUrl={apiBaseUrl} currentPageId={currentPageId} />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
             <PreviewPane
diff --git a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
index 6bd98d33..ab5d3111 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
@@ -4,27 +4,80 @@
 
 'use client';
 
-import { Card, BlockStack, Button, Text, Scrollable, Box } from '@shopify/polaris';
+import { Card, BlockStack, Text, Scrollable, Box } from '@shopify/polaris';
+import { useTemplateStructure } from '../../hooks/useTemplateStructure';
+import { useLayoutStructure } from '../../hooks/useLayoutStructure';
+import { useStoreTemplates } from '../../hooks/useStoreTemplates';
+import { SidebarLoading } from './SidebarLoading';
 
 interface SidebarProps {
   storeId: string;
   apiBaseUrl: string;
+  currentPageId: string;
 }
 
-export function Sidebar({ storeId }: SidebarProps) {
+export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
+  const { template, isLoading: isLoadingTemplate } = useTemplateStructure({
+    storeId,
+    apiBaseUrl,
+    pageType: currentPageId,
+  });
+
+  const { layout, isLoading: isLoadingLayout } = useLayoutStructure({
+    storeId,
+    apiBaseUrl,
+  });
+
+  const { pages, isLoading: isLoadingPages } = useStoreTemplates({ storeId, apiBaseUrl });
+
+  const currentPageTitle = pages.find((p) => p.id === currentPageId)?.name || 'Página';
+
+  const isLoading = isLoadingTemplate || isLoadingLayout || isLoadingPages;
+
+  if (isLoading) {
+    return <SidebarLoading />;
+  }
+
   return (
     <div>
       <Box padding="200">
         <Card padding="300">
           <BlockStack gap="300">
             <Text as="h2" variant="headingMd">
-              Secciones
+              {currentPageTitle}
             </Text>
             <Scrollable style={{ height: 'calc(100vh - 160px)' }}>
               <Box padding="200">
-                <BlockStack gap="200">
-                  {/* Lista de secciones (placeholder) */}
-                  <Button fullWidth>Agregar sección</Button>
+                <BlockStack gap="400">
+                  {/* TODO: Header section */}
+                  {(layout?.header?.sections?.length ?? 0) > 0 && (
+                    <div>
+                      <Text as="h3" variant="headingSm" fontWeight="semibold">
+                        Header
+                      </Text>
+                      {/* TODO: Render header sections */}
+                    </div>
+                  )}
+
+                  {/* Template sections */}
+                  {(template?.sections?.length ?? 0) > 0 && (
+                    <div>
+                      <Text as="h3" variant="headingSm" fontWeight="semibold">
+                        Template
+                      </Text>
+                      {/* TODO: Render template sections */}
+                    </div>
+                  )}
+
+                  {/* Footer section */}
+                  {(layout?.footer?.sections?.length ?? 0) > 0 && (
+                    <div>
+                      <Text as="h3" variant="headingSm" fontWeight="semibold">
+                        Footer
+                      </Text>
+                      {/* TODO: Render footer sections */}
+                    </div>
+                  )}
                 </BlockStack>
               </Box>
             </Scrollable>
diff --git a/packages/theme-studio/src/presentation/components/sidebar/SidebarLoading.tsx b/packages/theme-studio/src/presentation/components/sidebar/SidebarLoading.tsx
new file mode 100644
index 00000000..c678be3f
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/sidebar/SidebarLoading.tsx
@@ -0,0 +1,30 @@
+/*
+ * Theme Studio - Presentación
+ */
+
+'use client';
+
+import { Card, BlockStack, Scrollable, Box, SkeletonBodyText } from '@shopify/polaris';
+
+export function SidebarLoading() {
+  return (
+    <div>
+      <Box padding="200">
+        <Card padding="300">
+          <BlockStack gap="300">
+            <SkeletonBodyText lines={1} />
+            <Scrollable style={{ height: 'calc(100vh - 160px)' }}>
+              <Box padding="200">
+                <BlockStack gap="200">
+                  <SkeletonBodyText lines={3} />
+                  <SkeletonBodyText lines={3} />
+                  <SkeletonBodyText lines={3} />
+                </BlockStack>
+              </Box>
+            </Scrollable>
+          </BlockStack>
+        </Card>
+      </Box>
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useAvailableSections.ts b/packages/theme-studio/src/presentation/hooks/useAvailableSections.ts
new file mode 100644
index 00000000..f1de1385
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useAvailableSections.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+
+export interface AvailableSection {
+  type: string;
+  name: string;
+  category?: string;
+  icon?: string;
+  description?: string;
+}
+
+interface UseAvailableSectionsParams {
+  storeId: string | undefined;
+  apiBaseUrl: string;
+}
+
+interface UseAvailableSectionsResult {
+  sections: AvailableSection[];
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function useAvailableSections({ storeId, apiBaseUrl }: UseAvailableSectionsParams): UseAvailableSectionsResult {
+  const { data, isLoading, error } = useQuery<{ sections: AvailableSection[] }>({
+    queryKey: ['available-sections', storeId],
+    queryFn: async () => {
+      if (!storeId) throw new Error('Store ID is required');
+
+      const response = await fetch(`${apiBaseUrl}/stores/${storeId}/themes/sections/available`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to load available sections: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return data;
+    },
+    enabled: !!storeId,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  return {
+    sections: data?.sections || [],
+    isLoading,
+    error: error instanceof Error ? error : null,
+  };
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useLayoutStructure.ts b/packages/theme-studio/src/presentation/hooks/useLayoutStructure.ts
new file mode 100644
index 00000000..e4c5bec7
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useLayoutStructure.ts
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+
+export interface LayoutSection {
+  id: string;
+  type: string;
+  name: string;
+  isSnippet: boolean;
+  schema: {
+    name: string;
+    settings: any[];
+    blocks: any[];
+    presets: any[];
+  };
+}
+
+interface LayoutStructure {
+  header: {
+    sections: LayoutSection[];
+  };
+  footer: {
+    sections: LayoutSection[];
+  };
+  other: {
+    sections: LayoutSection[];
+  };
+}
+
+interface UseLayoutStructureParams {
+  storeId: string | undefined;
+  apiBaseUrl: string;
+}
+
+interface UseLayoutStructureResult {
+  layout: LayoutStructure | null;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function useLayoutStructure({ storeId, apiBaseUrl }: UseLayoutStructureParams): UseLayoutStructureResult {
+  const {
+    data: layout,
+    isLoading,
+    error,
+  } = useQuery<LayoutStructure>({
+    queryKey: ['layout-structure', storeId],
+    queryFn: async () => {
+      if (!storeId) throw new Error('Store ID is required');
+
+      const response = await fetch(`${apiBaseUrl}/stores/${storeId}/themes/layout/structure`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to load layout structure: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return data;
+    },
+    enabled: !!storeId,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  return {
+    layout: layout || null,
+    isLoading,
+    error: error instanceof Error ? error : null,
+  };
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useTemplateStructure.ts b/packages/theme-studio/src/presentation/hooks/useTemplateStructure.ts
new file mode 100644
index 00000000..dcc3aaae
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useTemplateStructure.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+
+export interface TemplateSection {
+  id: string;
+  type: string;
+  name: string;
+  settings: Record<string, any>;
+  blocks?: any[];
+  schema: {
+    name: string;
+    settings: any[];
+    blocks: any[];
+    presets: any[];
+  };
+}
+
+interface TemplateStructure {
+  pageType: string;
+  sections: TemplateSection[];
+  order: string[];
+}
+
+interface UseTemplateStructureParams {
+  storeId: string | undefined;
+  apiBaseUrl: string;
+  pageType: string;
+}
+
+interface UseTemplateStructureResult {
+  template: TemplateStructure | null;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function useTemplateStructure({
+  storeId,
+  apiBaseUrl,
+  pageType,
+}: UseTemplateStructureParams): UseTemplateStructureResult {
+  const {
+    data: template,
+    isLoading,
+    error,
+  } = useQuery<TemplateStructure>({
+    queryKey: ['template-structure', storeId, pageType],
+    queryFn: async () => {
+      if (!storeId) throw new Error('Store ID is required');
+      if (!pageType) throw new Error('Page type is required');
+
+      const response = await fetch(`${apiBaseUrl}/stores/${storeId}/themes/structure/${encodeURIComponent(pageType)}`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to load template structure: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return data;
+    },
+    enabled: !!storeId && !!pageType,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  return {
+    template: template || null,
+    isLoading,
+    error: error instanceof Error ? error : null,
+  };
+}

From 06f6f6c1548891151fc9b9db6e1f4312f1576e34 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Fri, 31 Oct 2025 13:27:00 -0500
Subject: [PATCH 10/49] Refactor Sidebar component to integrate SectionGroup
 for layout sections

This commit enhances the Sidebar component by introducing the SectionGroup component for rendering header, template, and footer sections. It incorporates state management for expanded sections and selected items, improving the organization and interactivity of the sidebar. Additionally, it refines the layout structure and ensures a more cohesive user experience during theme editing.
---
 .../components/sidebar/Sidebar.tsx            |  82 ++++++----
 .../sidebar/block-item/BlockItem.tsx          |  90 +++++++++++
 .../sidebar/section-group/SectionGroup.tsx    | 109 ++++++++++++++
 .../sidebar/section-item/SectionItem.tsx      | 141 ++++++++++++++++++
 .../src/presentation/hooks/useSidebarState.ts |  70 +++++++++
 5 files changed, 462 insertions(+), 30 deletions(-)
 create mode 100644 packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
 create mode 100644 packages/theme-studio/src/presentation/hooks/useSidebarState.ts

diff --git a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
index ab5d3111..416be669 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
@@ -8,7 +8,9 @@ import { Card, BlockStack, Text, Scrollable, Box } from '@shopify/polaris';
 import { useTemplateStructure } from '../../hooks/useTemplateStructure';
 import { useLayoutStructure } from '../../hooks/useLayoutStructure';
 import { useStoreTemplates } from '../../hooks/useStoreTemplates';
+import { useSidebarState } from '../../hooks/useSidebarState';
 import { SidebarLoading } from './SidebarLoading';
+import { SectionGroup } from './section-group/SectionGroup';
 
 interface SidebarProps {
   storeId: string;
@@ -30,6 +32,16 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
 
   const { pages, isLoading: isLoadingPages } = useStoreTemplates({ storeId, apiBaseUrl });
 
+  const {
+    expandedSections,
+    selectedSectionId,
+    selectedBlockId,
+    toggleSection,
+    selectSection,
+    selectBlock,
+    clearSelection,
+  } = useSidebarState();
+
   const currentPageTitle = pages.find((p) => p.id === currentPageId)?.name || 'Página';
 
   const isLoading = isLoadingTemplate || isLoadingLayout || isLoadingPages;
@@ -43,41 +55,51 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
       <Box padding="200">
         <Card padding="300">
           <BlockStack gap="300">
-            <Text as="h2" variant="headingMd">
-              {currentPageTitle}
-            </Text>
+            <Box paddingInlineStart="200">
+              <Text as="h2" variant="headingMd">
+                {currentPageTitle}
+              </Text>
+            </Box>
+            <Box borderColor="border" borderBlockEndWidth="025" />
             <Scrollable style={{ height: 'calc(100vh - 160px)' }}>
               <Box padding="200">
                 <BlockStack gap="400">
-                  {/* TODO: Header section */}
-                  {(layout?.header?.sections?.length ?? 0) > 0 && (
-                    <div>
-                      <Text as="h3" variant="headingSm" fontWeight="semibold">
-                        Header
-                      </Text>
-                      {/* TODO: Render header sections */}
-                    </div>
-                  )}
+                  <SectionGroup
+                    title="Header"
+                    sections={layout?.header?.sections ?? []}
+                    expandedSections={expandedSections}
+                    selectedSectionId={selectedSectionId}
+                    onToggleSection={toggleSection}
+                    onSelectSection={selectSection}
+                    onAddSection={() => {
+                      // TODO: Implementar modal de agregar sección
+                    }}
+                  />
 
-                  {/* Template sections */}
-                  {(template?.sections?.length ?? 0) > 0 && (
-                    <div>
-                      <Text as="h3" variant="headingSm" fontWeight="semibold">
-                        Template
-                      </Text>
-                      {/* TODO: Render template sections */}
-                    </div>
-                  )}
+                  <SectionGroup
+                    title="Template"
+                    sections={template?.sections ?? []}
+                    sectionOrder={template?.order}
+                    expandedSections={expandedSections}
+                    selectedSectionId={selectedSectionId}
+                    onToggleSection={toggleSection}
+                    onSelectSection={selectSection}
+                    onAddSection={() => {
+                      // TODO: Implementar modal de agregar sección
+                    }}
+                  />
 
-                  {/* Footer section */}
-                  {(layout?.footer?.sections?.length ?? 0) > 0 && (
-                    <div>
-                      <Text as="h3" variant="headingSm" fontWeight="semibold">
-                        Footer
-                      </Text>
-                      {/* TODO: Render footer sections */}
-                    </div>
-                  )}
+                  <SectionGroup
+                    title="Footer"
+                    sections={layout?.footer?.sections ?? []}
+                    expandedSections={expandedSections}
+                    selectedSectionId={selectedSectionId}
+                    onToggleSection={toggleSection}
+                    onSelectSection={selectSection}
+                    onAddSection={() => {
+                      // TODO: Implementar modal de agregar sección
+                    }}
+                  />
                 </BlockStack>
               </Box>
             </Scrollable>
diff --git a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
new file mode 100644
index 00000000..e06e226d
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { Box, Text, Icon, InlineStack, Button } from '@shopify/polaris';
+import { ChevronRightIcon, DragHandleIcon, DeleteIcon, ViewIcon } from '@shopify/polaris-icons';
+
+export interface BlockItemProps {
+  block: {
+    id: string;
+    type: string;
+    settings: Record<string, any>;
+  };
+  sectionId: string;
+  isSelected: boolean;
+  onSelect: () => void;
+  onDelete?: () => void;
+  onToggleVisibility?: () => void;
+}
+
+function getBlockDisplayName(block: BlockItemProps['block']): string {
+  return block.settings.name || block.settings.title || block.type;
+}
+
+export function BlockItem({ block, sectionId, isSelected, onSelect, onDelete, onToggleVisibility }: BlockItemProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const displayName = getBlockDisplayName(block);
+
+  return (
+    <div
+      onClick={onSelect}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        padding: 'var(--p-space-200)',
+        paddingLeft: 'var(--p-space-400)',
+        backgroundColor: isSelected ? 'var(--p-color-bg-surface-selected)' : undefined,
+        cursor: 'pointer',
+      }}>
+      <InlineStack gap="200" blockAlign="center" align="space-between">
+        <InlineStack gap="200" blockAlign="center">
+          {isHovered && <Icon source={DragHandleIcon} tone="subdued" />}
+          {!isHovered && <Box minWidth="20px" />}
+          <Icon source={ChevronRightIcon} tone="subdued" />
+          <Text as="span" variant="bodySm" tone={isSelected ? 'success' : 'subdued'}>
+            {displayName}
+          </Text>
+        </InlineStack>
+
+        {(isHovered || isSelected) && (
+          <InlineStack gap="050">
+            {onToggleVisibility && (
+              <div
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleVisibility();
+                }}>
+                <Button variant="plain" icon={<Icon source={ViewIcon} />} />
+              </div>
+            )}
+            {onDelete && (
+              <div
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                }}>
+                <Button variant="plain" icon={<Icon source={DeleteIcon} />} />
+              </div>
+            )}
+          </InlineStack>
+        )}
+      </InlineStack>
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
new file mode 100644
index 00000000..fbd473d2
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Box, Text, Button, BlockStack } from '@shopify/polaris';
+import { PlusCircleIcon } from '@shopify/polaris-icons';
+import { TemplateSection } from '../../../hooks/useTemplateStructure';
+import { LayoutSection } from '../../../hooks/useLayoutStructure';
+import { SectionItem } from '../section-item/SectionItem';
+
+export interface SectionGroupProps {
+  title: string;
+  sections: (TemplateSection | LayoutSection)[];
+  sectionOrder?: string[];
+  expandedSections: Set<string>;
+  selectedSectionId: string | null;
+  onToggleSection: (sectionId: string) => void;
+  onSelectSection: (sectionId: string) => void;
+  onAddSection?: () => void;
+}
+
+function sortSectionsByOrder(
+  sections: (TemplateSection | LayoutSection)[],
+  order?: string[]
+): (TemplateSection | LayoutSection)[] {
+  if (!order || order.length === 0) {
+    return sections;
+  }
+
+  const sectionMap = new Map(sections.map((s) => [s.id, s]));
+  const ordered: (TemplateSection | LayoutSection)[] = [];
+  const unordered: (TemplateSection | LayoutSection)[] = [];
+
+  order.forEach((id) => {
+    const section = sectionMap.get(id);
+    if (section) {
+      ordered.push(section);
+      sectionMap.delete(id);
+    }
+  });
+
+  sectionMap.forEach((section) => {
+    unordered.push(section);
+  });
+
+  return [...ordered, ...unordered];
+}
+
+export function SectionGroup({
+  title,
+  sections,
+  sectionOrder,
+  expandedSections,
+  selectedSectionId,
+  onToggleSection,
+  onSelectSection,
+  onAddSection,
+}: SectionGroupProps) {
+  const sortedSections = sortSectionsByOrder(sections, sectionOrder);
+
+  if (sections.length === 0 && !onAddSection) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <BlockStack gap="300">
+        <Text as="h3" variant="headingSm" fontWeight="semibold">
+          {title}
+        </Text>
+
+        {sortedSections.length > 0 && (
+          <BlockStack gap="050">
+            {sortedSections.map((section) => (
+              <SectionItem
+                key={section.id}
+                section={section}
+                isExpanded={expandedSections.has(section.id)}
+                isSelected={selectedSectionId === section.id}
+                onToggleExpand={() => onToggleSection(section.id)}
+                onSelect={() => onSelectSection(section.id)}
+              />
+            ))}
+          </BlockStack>
+        )}
+
+        {onAddSection && (
+          <Button variant="tertiary" icon={<PlusCircleIcon />} onClick={onAddSection}>
+            Agregar sección
+          </Button>
+        )}
+      </BlockStack>
+    </Box>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
new file mode 100644
index 00000000..ec788971
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
@@ -0,0 +1,141 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { useState } from 'react';
+import type { ReactNode, ComponentProps } from 'react';
+import { Box, Text, Icon, InlineStack, Button, Collapsible } from '@shopify/polaris';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  DeleteIcon,
+  ViewIcon,
+  DragHandleIcon,
+  LayoutSectionIcon,
+} from '@shopify/polaris-icons';
+import { TemplateSection } from '../../../hooks/useTemplateStructure';
+import { LayoutSection } from '../../../hooks/useLayoutStructure';
+import { BlockItem } from '../block-item/BlockItem';
+
+export interface SectionItemProps {
+  section: TemplateSection | LayoutSection;
+  isExpanded: boolean;
+  isSelected: boolean;
+  onToggleExpand: () => void;
+  onSelect: () => void;
+  onDelete?: () => void;
+  onToggleVisibility?: () => void;
+}
+
+function getSectionIcon(section: TemplateSection | LayoutSection) {
+  return LayoutSectionIcon;
+}
+
+export function SectionItem({
+  section,
+  isExpanded,
+  isSelected,
+  onToggleExpand,
+  onSelect,
+  onDelete,
+  onToggleVisibility,
+}: SectionItemProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const isTemplateSection = 'blocks' in section;
+  const hasBlocks =
+    isTemplateSection && ((section.blocks?.length ?? 0) > 0 || (section.schema?.blocks?.length ?? 0) > 0);
+  const canExpand = hasBlocks;
+
+  const handleClick = () => {
+    if (canExpand) {
+      onToggleExpand();
+    } else {
+      onSelect();
+    }
+  };
+
+  const ChevronIcon = isExpanded ? ChevronDownIcon : ChevronRightIcon;
+
+  return (
+    <Box>
+      <div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+        <Button
+          variant="tertiary"
+          fullWidth
+          textAlign="left"
+          onClick={handleClick}
+          {...({
+            children: (
+              <InlineStack gap="200" blockAlign="center" align="space-between">
+                <InlineStack gap="200" blockAlign="center">
+                  {isHovered && <Icon source={DragHandleIcon} tone="subdued" />}
+                  {!isHovered && <Box minWidth="20px" />}
+                  <Icon source={ChevronIcon} tone="subdued" />
+                  <Icon source={getSectionIcon(section)} tone="subdued" />
+                  <Text as="span" variant="bodyMd" fontWeight={isSelected ? 'semibold' : 'regular'}>
+                    {section.name}
+                  </Text>
+                </InlineStack>
+
+                {(isHovered || isSelected) && (
+                  <InlineStack gap="050">
+                    {onToggleVisibility && (
+                      <div
+                        onClick={(e: React.MouseEvent) => {
+                          e.stopPropagation();
+                          onToggleVisibility();
+                        }}>
+                        <Button variant="plain" icon={<Icon source={ViewIcon} />} />
+                      </div>
+                    )}
+                    {onDelete && (
+                      <div
+                        onClick={(e: React.MouseEvent) => {
+                          e.stopPropagation();
+                          onDelete();
+                        }}>
+                        <Button variant="plain" icon={<Icon source={DeleteIcon} />} />
+                      </div>
+                    )}
+                  </InlineStack>
+                )}
+              </InlineStack>
+            ),
+          } as ComponentProps<typeof Button> & { children: ReactNode })}
+        />
+      </div>
+
+      {isExpanded && hasBlocks && isTemplateSection && section.blocks && section.blocks.length > 0 && (
+        <Collapsible open={isExpanded} id={`section-${section.id}-blocks`}>
+          <Box>
+            {section.blocks.map((block: { id: string; type: string; settings: Record<string, any> }) => (
+              <BlockItem
+                key={block.id}
+                block={block}
+                sectionId={section.id}
+                isSelected={false}
+                onSelect={() => {
+                  onSelect();
+                }}
+              />
+            ))}
+          </Box>
+        </Collapsible>
+      )}
+    </Box>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useSidebarState.ts b/packages/theme-studio/src/presentation/hooks/useSidebarState.ts
new file mode 100644
index 00000000..de3adafc
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useSidebarState.ts
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useCallback } from 'react';
+
+interface UseSidebarStateResult {
+  expandedSections: Set<string>;
+  selectedSectionId: string | null;
+  selectedBlockId: string | null;
+  toggleSection: (sectionId: string) => void;
+  selectSection: (sectionId: string) => void;
+  selectBlock: (blockId: string, sectionId: string) => void;
+  clearSelection: () => void;
+}
+
+export function useSidebarState(): UseSidebarStateResult {
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null);
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+
+  const toggleSection = useCallback((sectionId: string) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(sectionId)) {
+        next.delete(sectionId);
+      } else {
+        next.add(sectionId);
+      }
+      return next;
+    });
+  }, []);
+
+  const selectSection = useCallback((sectionId: string) => {
+    setSelectedSectionId(sectionId);
+    setSelectedBlockId(null);
+  }, []);
+
+  const selectBlock = useCallback((blockId: string, sectionId: string) => {
+    setSelectedSectionId(sectionId);
+    setSelectedBlockId(blockId);
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedSectionId(null);
+    setSelectedBlockId(null);
+  }, []);
+
+  return {
+    expandedSections,
+    selectedSectionId,
+    selectedBlockId,
+    toggleSection,
+    selectSection,
+    selectBlock,
+    clearSelection,
+  };
+}

From 069194f331aa0cfd590ca05f04c7adaebe21d22d Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Fri, 31 Oct 2025 13:40:25 -0500
Subject: [PATCH 11/49] Refactor SectionGroup and SectionItem components for
 improved layout and interaction

This commit updates the SectionGroup component to enhance the layout by adjusting the gap between items and streamlining the rendering of sorted sections. It also modifies the SectionItem component to improve the hover effect, allowing for a smoother transition between icons. These changes enhance the user experience and maintainability of the sidebar components in the ThemeStudio.
---
 .../sidebar/section-group/SectionGroup.tsx    | 31 ++++++++---------
 .../sidebar/section-item/SectionItem.tsx      | 33 ++++++++++++++++---
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
index fbd473d2..73b40299 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
@@ -16,7 +16,7 @@
 
 'use client';
 
-import { Box, Text, Button, BlockStack } from '@shopify/polaris';
+import { Box, Text, Button, BlockStack, Icon } from '@shopify/polaris';
 import { PlusCircleIcon } from '@shopify/polaris-icons';
 import { TemplateSection } from '../../../hooks/useTemplateStructure';
 import { LayoutSection } from '../../../hooks/useLayoutStructure';
@@ -78,28 +78,25 @@ export function SectionGroup({
 
   return (
     <Box>
-      <BlockStack gap="300">
+      <BlockStack gap="200">
         <Text as="h3" variant="headingSm" fontWeight="semibold">
           {title}
         </Text>
 
-        {sortedSections.length > 0 && (
-          <BlockStack gap="050">
-            {sortedSections.map((section) => (
-              <SectionItem
-                key={section.id}
-                section={section}
-                isExpanded={expandedSections.has(section.id)}
-                isSelected={selectedSectionId === section.id}
-                onToggleExpand={() => onToggleSection(section.id)}
-                onSelect={() => onSelectSection(section.id)}
-              />
-            ))}
-          </BlockStack>
-        )}
+        {sortedSections.length > 0 &&
+          sortedSections.map((section) => (
+            <SectionItem
+              key={section.id}
+              section={section}
+              isExpanded={expandedSections.has(section.id)}
+              isSelected={selectedSectionId === section.id}
+              onToggleExpand={() => onToggleSection(section.id)}
+              onSelect={() => onSelectSection(section.id)}
+            />
+          ))}
 
         {onAddSection && (
-          <Button variant="tertiary" icon={<PlusCircleIcon />} onClick={onAddSection}>
+          <Button variant="tertiary" icon={<Icon source={PlusCircleIcon} />} onClick={onAddSection}>
             Agregar sección
           </Button>
         )}
diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
index ec788971..bd2b7bbf 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
@@ -82,10 +82,35 @@ export function SectionItem({
             children: (
               <InlineStack gap="200" blockAlign="center" align="space-between">
                 <InlineStack gap="200" blockAlign="center">
-                  {isHovered && <Icon source={DragHandleIcon} tone="subdued" />}
-                  {!isHovered && <Box minWidth="20px" />}
-                  <Icon source={ChevronIcon} tone="subdued" />
-                  <Icon source={getSectionIcon(section)} tone="subdued" />
+                  <InlineStack gap="050" blockAlign="center">
+                    <Icon source={ChevronIcon} tone="subdued" />
+                    <div
+                      style={{
+                        position: 'relative',
+                        width: '20px',
+                        height: '20px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}>
+                      <div
+                        style={{
+                          position: 'absolute',
+                          opacity: isHovered ? 0 : 1,
+                          transition: 'opacity 0.2s ease-in-out',
+                        }}>
+                        <Icon source={getSectionIcon(section)} tone="subdued" />
+                      </div>
+                      <div
+                        style={{
+                          position: 'absolute',
+                          opacity: isHovered ? 1 : 0,
+                          transition: 'opacity 0.2s ease-in-out',
+                        }}>
+                        <Icon source={DragHandleIcon} tone="subdued" />
+                      </div>
+                    </div>
+                  </InlineStack>
                   <Text as="span" variant="bodyMd" fontWeight={isSelected ? 'semibold' : 'regular'}>
                     {section.name}
                   </Text>

From 4a765cf02a6bcbb58e99fe6fd92458b4ce29156c Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Fri, 31 Oct 2025 13:55:12 -0500
Subject: [PATCH 12/49] Enhance Sidebar component with Divider elements for
 improved visual separation

This commit updates the Sidebar component by adding Divider elements to visually separate the sections within the sidebar. The changes include adjustments to the layout to ensure proper spacing and alignment, enhancing the overall user experience and organization of the sidebar content in the ThemeStudio.
---
 .../components/sidebar/Sidebar.tsx            | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
index 416be669..da97f070 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
@@ -4,7 +4,7 @@
 
 'use client';
 
-import { Card, BlockStack, Text, Scrollable, Box } from '@shopify/polaris';
+import { Card, BlockStack, Text, Scrollable, Box, Divider } from '@shopify/polaris';
 import { useTemplateStructure } from '../../hooks/useTemplateStructure';
 import { useLayoutStructure } from '../../hooks/useLayoutStructure';
 import { useStoreTemplates } from '../../hooks/useStoreTemplates';
@@ -60,10 +60,12 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
                 {currentPageTitle}
               </Text>
             </Box>
-            <Box borderColor="border" borderBlockEndWidth="025" />
+            <div style={{ marginLeft: 'calc(-1 * var(--p-space-300))', marginRight: 'calc(-1 * var(--p-space-300))' }}>
+              <Divider borderColor="border" />
+            </div>
             <Scrollable style={{ height: 'calc(100vh - 160px)' }}>
               <Box padding="200">
-                <BlockStack gap="400">
+                <BlockStack>
                   <SectionGroup
                     title="Header"
                     sections={layout?.header?.sections ?? []}
@@ -76,6 +78,14 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
                     }}
                   />
 
+                  <div
+                    style={{
+                      marginLeft: 'calc(-1 * var(--p-space-200))',
+                      marginRight: 'calc(-1 * var(--p-space-200))',
+                    }}>
+                    <Divider borderColor="border" />
+                  </div>
+
                   <SectionGroup
                     title="Template"
                     sections={template?.sections ?? []}
@@ -89,6 +99,14 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
                     }}
                   />
 
+                  <div
+                    style={{
+                      marginLeft: 'calc(-1 * var(--p-space-200))',
+                      marginRight: 'calc(-1 * var(--p-space-200))',
+                    }}>
+                    <Divider borderColor="border" />
+                  </div>
+
                   <SectionGroup
                     title="Footer"
                     sections={layout?.footer?.sections ?? []}

From 88ca994fb4aceb5d8c321167eeecca7b81604207 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Fri, 31 Oct 2025 15:48:02 -0500
Subject: [PATCH 13/49] Add block configurations to various theme sections for
 enhanced customization

This commit introduces new block configurations to the cart, featured products, footer, hero, home collections, and newsletter popup sections in the fasttify theme. Each section now includes customizable blocks with settings for labels and links, allowing for greater flexibility in theme design. Additionally, the header snippet is updated to include a schema for menu items, enhancing the overall structure and usability of the theme components.
---
 .../fasttify/theme/sections/cart.liquid       | 19 ++++++
 .../theme/sections/featured-products.liquid   | 19 ++++++
 .../fasttify/theme/sections/footer.liquid     | 19 ++++++
 .../fasttify/theme/sections/header.liquid     |  8 ---
 .../fasttify/theme/sections/hero.liquid       | 19 ++++++
 .../theme/sections/home-collections.liquid    | 19 ++++++
 .../theme/sections/newsletter-popup.liquid    | 24 ++++++++
 .../fasttify/theme/snippets/header.liquid     | 29 ++++++++-
 .../liquid/tags/core/render-tag.ts            | 60 ++++++++++++++++++-
 .../components/sidebar/Sidebar.tsx            |  6 ++
 .../sidebar/block-item/BlockItem.tsx          | 24 +++++++-
 .../sidebar/section-group/SectionGroup.tsx    |  6 ++
 .../sidebar/section-item/SectionItem.tsx      | 44 +++++++++-----
 13 files changed, 268 insertions(+), 28 deletions(-)

diff --git a/packages/example-themes/fasttify/theme/sections/cart.liquid b/packages/example-themes/fasttify/theme/sections/cart.liquid
index 2378e3ee..22a485c5 100644
--- a/packages/example-themes/fasttify/theme/sections/cart.liquid
+++ b/packages/example-themes/fasttify/theme/sections/cart.liquid
@@ -57,6 +57,25 @@
         "default": "#000000"
       }
     ],
+    "blocks": [
+      {
+        "type": "cart_item",
+        "name": "Cart Item",
+        "settings": [
+          {
+            "type": "text",
+            "id": "label",
+            "label": "Label",
+            "default": "Cart Item"
+          },
+          {
+            "type": "url",
+            "id": "link",
+            "label": "Link"
+          }
+        ]
+      }
+    ],
     "presets": [
       {
         "name": "cart"
diff --git a/packages/example-themes/fasttify/theme/sections/featured-products.liquid b/packages/example-themes/fasttify/theme/sections/featured-products.liquid
index 0404ba61..f7da0bed 100644
--- a/packages/example-themes/fasttify/theme/sections/featured-products.liquid
+++ b/packages/example-themes/fasttify/theme/sections/featured-products.liquid
@@ -242,6 +242,25 @@
         "default": "VER TODA LA COLECCIÓN"
       }
     ],
+    "blocks": [
+      {
+        "type": "featured_product",
+        "name": "Featured Product",
+        "settings": [
+          {
+            "type": "text",
+            "id": "label",
+            "label": "Label",
+            "default": "Featured Product"
+          },
+          {
+            "type": "url",
+            "id": "link",
+            "label": "Link"
+          }
+        ]
+      }
+    ],
     "presets": [
       {
         "name": "Productos Destacados",
diff --git a/packages/example-themes/fasttify/theme/sections/footer.liquid b/packages/example-themes/fasttify/theme/sections/footer.liquid
index af2364c5..39300e4f 100644
--- a/packages/example-themes/fasttify/theme/sections/footer.liquid
+++ b/packages/example-themes/fasttify/theme/sections/footer.liquid
@@ -209,6 +209,25 @@
         "content": "Los enlaces del footer se gestionan desde el menú 'footer-menu' en la configuración de navegación de la tienda."
       }
     ],
+    "blocks": [
+      {
+        "type": "link_column",
+        "name": "Link Column",
+        "settings": [
+          {
+            "type": "text",
+            "id": "column_title",
+            "label": "Column Title",
+            "default": "Column"
+          },
+          {
+            "type": "url",
+            "id": "column_link",
+            "label": "Link"
+          }
+        ]
+      }
+    ],
     "presets": [
       {
         "name": "footer"
diff --git a/packages/example-themes/fasttify/theme/sections/header.liquid b/packages/example-themes/fasttify/theme/sections/header.liquid
index 496f51c8..3efad11e 100644
--- a/packages/example-themes/fasttify/theme/sections/header.liquid
+++ b/packages/example-themes/fasttify/theme/sections/header.liquid
@@ -3,11 +3,3 @@
 </nav>
 
 
-{% schema %}
-  {
-    "name": "Navbar",
-    "settings": [],
-    "presets": []
-
-  }
-{% endschema %}
\ No newline at end of file
diff --git a/packages/example-themes/fasttify/theme/sections/hero.liquid b/packages/example-themes/fasttify/theme/sections/hero.liquid
index 23de0be8..e1fbd0a2 100644
--- a/packages/example-themes/fasttify/theme/sections/hero.liquid
+++ b/packages/example-themes/fasttify/theme/sections/hero.liquid
@@ -166,6 +166,25 @@ class="collection-hero-section">
         "default": "/collections"
       }
     ],
+    "blocks": [
+      {
+        "type": "hero_item",
+        "name": "Hero Item",
+        "settings": [
+          {
+            "type": "text",
+            "id": "label",
+            "label": "Label",
+            "default": "Hero Item"
+          },
+          {
+            "type": "url",
+            "id": "link",
+            "label": "Link"
+          }
+        ]
+      }
+    ],
     "presets": [
       {
         "name": "Hero de Colección",
diff --git a/packages/example-themes/fasttify/theme/sections/home-collections.liquid b/packages/example-themes/fasttify/theme/sections/home-collections.liquid
index bde5eec0..4a2e85cf 100644
--- a/packages/example-themes/fasttify/theme/sections/home-collections.liquid
+++ b/packages/example-themes/fasttify/theme/sections/home-collections.liquid
@@ -372,6 +372,25 @@
         "content": "Esta sección muestra las 2 primeras colecciones publicadas en un diseño elegante de pantalla completa."
       }
     ],
+    "blocks": [
+      {
+        "type": "home_collection",
+        "name": "Home Collection",
+        "settings": [
+          {
+            "type": "text",
+            "id": "label",
+            "label": "Label",
+            "default": "Home Collection"
+          },
+          {
+            "type": "url",
+            "id": "link",
+            "label": "Link"
+          }
+        ]
+      }
+    ],
     "presets": [
       {
         "name": "Colecciones Destacadas",
diff --git a/packages/example-themes/fasttify/theme/sections/newsletter-popup.liquid b/packages/example-themes/fasttify/theme/sections/newsletter-popup.liquid
index 7983853b..d3d70477 100644
--- a/packages/example-themes/fasttify/theme/sections/newsletter-popup.liquid
+++ b/packages/example-themes/fasttify/theme/sections/newsletter-popup.liquid
@@ -554,6 +554,30 @@
         "unit": "días",
         "info": "Tiempo que permanecerá bloqueado el popup después de cerrarlo demasiadas veces"
       }
+    ],
+    "blocks": [
+      {
+        "type": "newsletter_popup_item",
+        "name": "Newsletter Popup Item",
+        "settings": [
+          {
+            "type": "text",
+            "id": "label",
+            "label": "Label",
+            "default": "Newsletter Popup Item"
+          },
+          {
+            "type": "url",
+            "id": "link",
+            "label": "Link"
+          }
+        ]
+      }
+    ],
+    "presets": [
+      {
+        "name": "Newsletter Popup"
+      }
     ]
   }
 {% endschema %}
\ No newline at end of file
diff --git a/packages/example-themes/fasttify/theme/snippets/header.liquid b/packages/example-themes/fasttify/theme/snippets/header.liquid
index ff97eead..11e888b7 100644
--- a/packages/example-themes/fasttify/theme/snippets/header.liquid
+++ b/packages/example-themes/fasttify/theme/snippets/header.liquid
@@ -330,4 +330,31 @@
 </script>
 
 <!-- Cargar el archivo JavaScript -->
-{{ 'header.js' | asset_url | script_tag }}
\ No newline at end of file
+{{ 'header.js' | asset_url | script_tag }}
+
+{% schema %}
+  {
+    "name": "header",
+    "settings": [],
+    "blocks": [
+      {
+        "type": "menu_item",
+        "name": "Menu Item",
+        "settings": [
+          {
+            "type": "text",
+            "id": "label",
+            "label": "Label",
+            "default": "Menu Item"
+          },
+          {
+            "type": "url",
+            "id": "link",
+            "label": "Link"
+          }
+        ]
+      }
+    ],
+    "presets": []
+  }
+{% endschema %}
\ No newline at end of file
diff --git a/packages/liquid-forge/liquid/tags/core/render-tag.ts b/packages/liquid-forge/liquid/tags/core/render-tag.ts
index 49516b37..b94cba37 100644
--- a/packages/liquid-forge/liquid/tags/core/render-tag.ts
+++ b/packages/liquid-forge/liquid/tags/core/render-tag.ts
@@ -92,8 +92,66 @@ export class RenderTag extends Tag {
         }
       }
 
+      // Verificar si el snippet tiene schema con bloques y buscar bloques en storeTemplate
+      const contextData = ctx.getAll() as any;
+      const storeTemplate = contextData._store_template || contextData.storeTemplate;
+      let sectionContext: Record<string, unknown> | null = null;
+
+      if (storeTemplate?.layout && snippetContent.includes('{% schema %}')) {
+        // Extraer schema del snippet
+        const schemaRegex = /{%-?\s*schema\s*-?%}([\s\S]*?){%-?\s*endschema\s*-?%}/;
+        const schemaMatch = snippetContent.match(schemaRegex);
+
+        if (schemaMatch) {
+          try {
+            const schemaJson = JSON.parse(schemaMatch[1].trim());
+
+            // Buscar bloques en storeTemplate.layout de forma genérica
+            // Recorrer todas las propiedades del layout sin importar cómo se llamen
+            const allLayoutSections: any[] = [];
+
+            // Iterar sobre todas las propiedades de storeTemplate.layout
+            for (const categoryKey in storeTemplate.layout) {
+              const category = storeTemplate.layout[categoryKey];
+              // Si la categoría tiene un array 'sections', agregarlo
+              if (category && typeof category === 'object' && Array.isArray(category.sections)) {
+                allLayoutSections.push(...category.sections);
+              }
+            }
+
+            // Buscar la sección que coincida con el nombre del snippet
+            const layoutSection = allLayoutSections.find(
+              (s: any) =>
+                s.id === this.snippetName || s.type === `snippets/${this.snippetName}` || s.type === this.snippetName
+            );
+
+            if (layoutSection) {
+              sectionContext = {
+                id: layoutSection.id || this.snippetName,
+                settings: layoutSection.settings || {},
+                blocks: layoutSection.blocks || [],
+              };
+            } else if (schemaJson.blocks && schemaJson.blocks.length > 0) {
+              // Si tiene schema con bloques pero no hay datos en storeTemplate, crear contexto vacío
+              sectionContext = {
+                id: this.snippetName,
+                settings: {},
+                blocks: [],
+              };
+            }
+          } catch (error) {
+            logger.warn(`Error parsing schema for snippet '${this.snippetName}'`, error, 'RenderTag');
+          }
+        }
+      }
+
       // Crear contexto combinado
-      const combinedContext = { ...ctx.getAll(), ...evaluatedParams };
+      const combinedContext: Record<string, unknown> = { ...ctx.getAll(), ...evaluatedParams };
+
+      // Agregar section context si existe
+      if (sectionContext) {
+        combinedContext.section = sectionContext;
+      }
 
       // Parsear y renderizar el snippet
       const template = this.liquid.parse(snippetContent);
diff --git a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
index da97f070..bc7fee2f 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
@@ -71,8 +71,10 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
                     sections={layout?.header?.sections ?? []}
                     expandedSections={expandedSections}
                     selectedSectionId={selectedSectionId}
+                    selectedBlockId={selectedBlockId}
                     onToggleSection={toggleSection}
                     onSelectSection={selectSection}
+                    onSelectBlock={selectBlock}
                     onAddSection={() => {
                       // TODO: Implementar modal de agregar sección
                     }}
@@ -92,8 +94,10 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
                     sectionOrder={template?.order}
                     expandedSections={expandedSections}
                     selectedSectionId={selectedSectionId}
+                    selectedBlockId={selectedBlockId}
                     onToggleSection={toggleSection}
                     onSelectSection={selectSection}
+                    onSelectBlock={selectBlock}
                     onAddSection={() => {
                       // TODO: Implementar modal de agregar sección
                     }}
@@ -112,8 +116,10 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
                     sections={layout?.footer?.sections ?? []}
                     expandedSections={expandedSections}
                     selectedSectionId={selectedSectionId}
+                    selectedBlockId={selectedBlockId}
                     onToggleSection={toggleSection}
                     onSelectSection={selectSection}
+                    onSelectBlock={selectBlock}
                     onAddSection={() => {
                       // TODO: Implementar modal de agregar sección
                     }}
diff --git a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
index e06e226d..a5460cb3 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
@@ -54,9 +54,27 @@ export function BlockItem({ block, sectionId, isSelected, onSelect, onDelete, on
       }}>
       <InlineStack gap="200" blockAlign="center" align="space-between">
         <InlineStack gap="200" blockAlign="center">
-          {isHovered && <Icon source={DragHandleIcon} tone="subdued" />}
-          {!isHovered && <Box minWidth="20px" />}
-          <Icon source={ChevronRightIcon} tone="subdued" />
+          <InlineStack gap="050" blockAlign="center">
+            <Icon source={ChevronRightIcon} tone="subdued" />
+            <div
+              style={{
+                position: 'relative',
+                width: '20px',
+                height: '20px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <div
+                style={{
+                  position: 'absolute',
+                  opacity: isHovered ? 1 : 0,
+                  transition: 'opacity 0.2s ease-in-out',
+                }}>
+                <Icon source={DragHandleIcon} tone="subdued" />
+              </div>
+            </div>
+          </InlineStack>
           <Text as="span" variant="bodySm" tone={isSelected ? 'success' : 'subdued'}>
             {displayName}
           </Text>
diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
index 73b40299..d780bdea 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
@@ -28,8 +28,10 @@ export interface SectionGroupProps {
   sectionOrder?: string[];
   expandedSections: Set<string>;
   selectedSectionId: string | null;
+  selectedBlockId: string | null;
   onToggleSection: (sectionId: string) => void;
   onSelectSection: (sectionId: string) => void;
+  onSelectBlock: (blockId: string, sectionId: string) => void;
   onAddSection?: () => void;
 }
 
@@ -66,8 +68,10 @@ export function SectionGroup({
   sectionOrder,
   expandedSections,
   selectedSectionId,
+  selectedBlockId,
   onToggleSection,
   onSelectSection,
+  onSelectBlock,
   onAddSection,
 }: SectionGroupProps) {
   const sortedSections = sortSectionsByOrder(sections, sectionOrder);
@@ -90,8 +94,10 @@ export function SectionGroup({
               section={section}
               isExpanded={expandedSections.has(section.id)}
               isSelected={selectedSectionId === section.id}
+              selectedBlockId={selectedBlockId}
               onToggleExpand={() => onToggleSection(section.id)}
               onSelect={() => onSelectSection(section.id)}
+              onSelectBlock={(blockId) => onSelectBlock(blockId, section.id)}
             />
           ))}
 
diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
index bd2b7bbf..590bb70e 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
@@ -35,8 +35,10 @@ export interface SectionItemProps {
   section: TemplateSection | LayoutSection;
   isExpanded: boolean;
   isSelected: boolean;
+  selectedBlockId: string | null;
   onToggleExpand: () => void;
   onSelect: () => void;
+  onSelectBlock: (blockId: string) => void;
   onDelete?: () => void;
   onToggleVisibility?: () => void;
 }
@@ -49,16 +51,18 @@ export function SectionItem({
   section,
   isExpanded,
   isSelected,
+  selectedBlockId,
   onToggleExpand,
   onSelect,
+  onSelectBlock,
   onDelete,
   onToggleVisibility,
 }: SectionItemProps) {
   const [isHovered, setIsHovered] = useState(false);
   const isTemplateSection = 'blocks' in section;
-  const hasBlocks =
-    isTemplateSection && ((section.blocks?.length ?? 0) > 0 || (section.schema?.blocks?.length ?? 0) > 0);
-  const canExpand = hasBlocks;
+  const hasBlocksInSchema = (section.schema?.blocks?.length ?? 0) > 0;
+  const hasCurrentBlocks = isTemplateSection && (section.blocks?.length ?? 0) > 0;
+  const canExpand = hasBlocksInSchema;
 
   const handleClick = () => {
     if (canExpand) {
@@ -144,20 +148,30 @@ export function SectionItem({
         />
       </div>
 
-      {isExpanded && hasBlocks && isTemplateSection && section.blocks && section.blocks.length > 0 && (
+      {isExpanded && canExpand && (
         <Collapsible open={isExpanded} id={`section-${section.id}-blocks`}>
           <Box>
-            {section.blocks.map((block: { id: string; type: string; settings: Record<string, any> }) => (
-              <BlockItem
-                key={block.id}
-                block={block}
-                sectionId={section.id}
-                isSelected={false}
-                onSelect={() => {
-                  onSelect();
-                }}
-              />
-            ))}
+            {hasCurrentBlocks && section.blocks ? (
+              section.blocks.map((block: { id: string; type: string; settings: Record<string, any> }) => (
+                <BlockItem
+                  key={block.id}
+                  block={block}
+                  sectionId={section.id}
+                  isSelected={selectedBlockId === block.id}
+                  onSelect={() => {
+                    onSelectBlock(block.id);
+                  }}
+                  onDelete={onDelete}
+                  onToggleVisibility={onToggleVisibility}
+                />
+              ))
+            ) : (
+              <Box padding="200">
+                <Text as="p" variant="bodySm" tone="subdued">
+                  No hay bloques en esta sección
+                </Text>
+              </Box>
+            )}
           </Box>
         </Collapsible>
       )}

From cdb348465f8f46a7596abf5960ff826e673839c2 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Fri, 31 Oct 2025 16:02:37 -0500
Subject: [PATCH 14/49] Update hero section to support customizable action
 buttons and enhance button display logic

This commit modifies the hero section in the fasttify theme to allow for customizable action buttons through block configurations. It introduces logic to display buttons based on the presence of custom blocks, ensuring a more flexible and dynamic user experience. Additionally, the template configuration is updated to include predefined button blocks, improving the overall functionality and customization options for the hero section.
---
 .../fasttify/theme/sections/hero.liquid       |  40 ++++--
 .../fasttify/theme/templates/index.json       |  20 ++-
 .../sidebar/block-item/BlockItem.tsx          | 122 +++++++++---------
 3 files changed, 108 insertions(+), 74 deletions(-)

diff --git a/packages/example-themes/fasttify/theme/sections/hero.liquid b/packages/example-themes/fasttify/theme/sections/hero.liquid
index e1fbd0a2..da0e8ba7 100644
--- a/packages/example-themes/fasttify/theme/sections/hero.liquid
+++ b/packages/example-themes/fasttify/theme/sections/hero.liquid
@@ -72,20 +72,36 @@ class="collection-hero-section">
 
         <!-- Action Buttons -->
         <div class="hero-actions">
-          {% if hero_collection.url %}
-            <a href="{{ hero_collection.url }}" class="hero-btn hero-btn-primary">
-              <span>{{ section.settings.primary_button_text }}</span>
-            </a>
-          {% elsif section.settings.primary_button_text != blank %}
-            <a href="{{ section.settings.primary_button_url }}" class="hero-btn hero-btn-primary">
-              <span>{{ section.settings.primary_button_text }}</span>
-            </a>
+          <!-- Bloques personalizados desde el Theme Studio -->
+          {% if section.blocks.size > 0 %}
+            {% for block in section.blocks %}
+              {% if block.type == 'hero_item' %}
+                {% if block.settings.label != blank and block.settings.link != blank %}
+                  <a href="{{ block.settings.link }}" class="hero-btn hero-btn-primary">
+                    <span>{{ block.settings.label }}</span>
+                  </a>
+                {% endif %}
+              {% endif %}
+            {% endfor %}
           {% endif %}
 
-          {% if section.settings.secondary_button_text != blank %}
-            <a href="{{ section.settings.secondary_button_url }}" class="hero-btn hero-btn-secondary">
-              <span>{{ section.settings.secondary_button_text }}</span>
-            </a>
+          <!-- Botones del schema (se muestran si no hay bloques personalizados) -->
+          {% if section.blocks.size == 0 %}
+            {% if hero_collection.url %}
+              <a href="{{ hero_collection.url }}" class="hero-btn hero-btn-primary">
+                <span>{{ section.settings.primary_button_text }}</span>
+              </a>
+            {% elsif section.settings.primary_button_text != blank %}
+              <a href="{{ section.settings.primary_button_url }}" class="hero-btn hero-btn-primary">
+                <span>{{ section.settings.primary_button_text }}</span>
+              </a>
+            {% endif %}
+
+            {% if section.settings.secondary_button_text != blank %}
+              <a href="{{ section.settings.secondary_button_url }}" class="hero-btn hero-btn-secondary">
+                <span>{{ section.settings.secondary_button_text }}</span>
+              </a>
+            {% endif %}
           {% endif %}
         </div>
       </div>
diff --git a/packages/example-themes/fasttify/theme/templates/index.json b/packages/example-themes/fasttify/theme/templates/index.json
index e890f12a..eefce56d 100644
--- a/packages/example-themes/fasttify/theme/templates/index.json
+++ b/packages/example-themes/fasttify/theme/templates/index.json
@@ -2,7 +2,25 @@
   "sections": {
     "hero": {
       "type": "sections/hero",
-      "settings": {}
+      "settings": {},
+      "blocks": [
+        {
+          "id": "hero-button-1",
+          "type": "hero_item",
+          "settings": {
+            "label": "EXPLORAR COLECCIÓN",
+            "link": "/collections/new-products"
+          }
+        },
+        {
+          "id": "hero-button-2",
+          "type": "hero_item",
+          "settings": {
+            "label": "VER TODAS",
+            "link": "/collections"
+          }
+        }
+      ]
     },
     "featured-products": {
       "type": "sections/featured-products",
diff --git a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
index a5460cb3..7e1d6e7b 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
@@ -18,7 +18,9 @@
 
 import { useState } from 'react';
 import { Box, Text, Icon, InlineStack, Button } from '@shopify/polaris';
-import { ChevronRightIcon, DragHandleIcon, DeleteIcon, ViewIcon } from '@shopify/polaris-icons';
+import { DragHandleIcon, DeleteIcon, ViewIcon } from '@shopify/polaris-icons';
+import type { ComponentProps } from 'react';
+import type { ReactNode } from 'react';
 
 export interface BlockItemProps {
   block: {
@@ -42,67 +44,65 @@ export function BlockItem({ block, sectionId, isSelected, onSelect, onDelete, on
   const displayName = getBlockDisplayName(block);
 
   return (
-    <div
-      onClick={onSelect}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      style={{
-        padding: 'var(--p-space-200)',
-        paddingLeft: 'var(--p-space-400)',
-        backgroundColor: isSelected ? 'var(--p-color-bg-surface-selected)' : undefined,
-        cursor: 'pointer',
-      }}>
-      <InlineStack gap="200" blockAlign="center" align="space-between">
-        <InlineStack gap="200" blockAlign="center">
-          <InlineStack gap="050" blockAlign="center">
-            <Icon source={ChevronRightIcon} tone="subdued" />
-            <div
-              style={{
-                position: 'relative',
-                width: '20px',
-                height: '20px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}>
-              <div
-                style={{
-                  position: 'absolute',
-                  opacity: isHovered ? 1 : 0,
-                  transition: 'opacity 0.2s ease-in-out',
-                }}>
-                <Icon source={DragHandleIcon} tone="subdued" />
-              </div>
-            </div>
-          </InlineStack>
-          <Text as="span" variant="bodySm" tone={isSelected ? 'success' : 'subdued'}>
-            {displayName}
-          </Text>
-        </InlineStack>
+    <div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+      <Button
+        variant="tertiary"
+        fullWidth
+        textAlign="left"
+        onClick={onSelect}
+        {...({
+          children: (
+            <InlineStack gap="200" blockAlign="center" align="space-between">
+              <InlineStack gap="200" blockAlign="center">
+                <div
+                  style={{
+                    position: 'relative',
+                    width: '20px',
+                    height: '20px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                  <div
+                    style={{
+                      position: 'absolute',
+                      opacity: isHovered ? 1 : 0,
+                      transition: 'opacity 0.2s ease-in-out',
+                    }}>
+                    <Icon source={DragHandleIcon} tone="subdued" />
+                  </div>
+                </div>
+                <Text as="span" variant="bodySm">
+                  {displayName}
+                </Text>
+              </InlineStack>
 
-        {(isHovered || isSelected) && (
-          <InlineStack gap="050">
-            {onToggleVisibility && (
-              <div
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onToggleVisibility();
-                }}>
-                <Button variant="plain" icon={<Icon source={ViewIcon} />} />
-              </div>
-            )}
-            {onDelete && (
-              <div
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete();
-                }}>
-                <Button variant="plain" icon={<Icon source={DeleteIcon} />} />
-              </div>
-            )}
-          </InlineStack>
-        )}
-      </InlineStack>
+              {(isHovered || isSelected) && (
+                <InlineStack gap="050">
+                  {onToggleVisibility && (
+                    <div
+                      onClick={(e: React.MouseEvent) => {
+                        e.stopPropagation();
+                        onToggleVisibility();
+                      }}>
+                      <Button variant="plain" icon={<Icon source={ViewIcon} />} />
+                    </div>
+                  )}
+                  {onDelete && (
+                    <div
+                      onClick={(e: React.MouseEvent) => {
+                        e.stopPropagation();
+                        onDelete();
+                      }}>
+                      <Button variant="plain" icon={<Icon source={DeleteIcon} />} />
+                    </div>
+                  )}
+                </InlineStack>
+              )}
+            </InlineStack>
+          ),
+        } as ComponentProps<typeof Button> & { children: ReactNode })}
+      />
     </div>
   );
 }

From 1c679330c04b7b5827957223ad2d5c39e6b35868 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Sun, 2 Nov 2025 17:09:55 -0500
Subject: [PATCH 15/49] Implement structuredClone polyfill and refactor
 LiquidEngine to use compileTemplate

This commit adds a polyfill for structuredClone in jest.setup.ts to ensure compatibility with Node versions below 17. Additionally, it refactors the LiquidEngine class to utilize the compileTemplate function for parsing templates, enhancing the template compilation process. The TemplateLoader and LiquidSyntaxRules classes are also updated to reflect this change, improving overall code consistency and functionality.
---
 jest.setup.ts                                 |   7 +
 packages/liquid-forge/compiler/index.ts       |  34 ++++
 .../liquid-forge/compiler/liquid-compiler.ts  |  53 ++++++
 .../compiler/liquid-instance-factory.ts       | 110 +++++++++++
 .../liquid-forge/compiler/shared-instance.ts  |  49 +++++
 packages/liquid-forge/exports.ts              |   1 +
 packages/liquid-forge/liquid/engine.ts        |   3 +-
 .../services/templates/template-loader.ts     |   3 +-
 .../validation/rules/liquid-syntax-rules.ts   |   5 +-
 test/unit/compiler/compile-template.test.ts   | 162 ++++++++++++++++
 test/unit/compiler/liquid-compiler.test.ts    | 174 ++++++++++++++++++
 .../compiler/liquid-instance-factory.test.ts  | 150 +++++++++++++++
 test/unit/compiler/setup.ts                   |  50 +++++
 test/unit/compiler/shared-instance.test.ts    | 139 ++++++++++++++
 14 files changed, 935 insertions(+), 5 deletions(-)
 create mode 100644 packages/liquid-forge/compiler/index.ts
 create mode 100644 packages/liquid-forge/compiler/liquid-compiler.ts
 create mode 100644 packages/liquid-forge/compiler/liquid-instance-factory.ts
 create mode 100644 packages/liquid-forge/compiler/shared-instance.ts
 create mode 100644 test/unit/compiler/compile-template.test.ts
 create mode 100644 test/unit/compiler/liquid-compiler.test.ts
 create mode 100644 test/unit/compiler/liquid-instance-factory.test.ts
 create mode 100644 test/unit/compiler/setup.ts
 create mode 100644 test/unit/compiler/shared-instance.test.ts

diff --git a/jest.setup.ts b/jest.setup.ts
index c2f52b21..167b65bd 100644
--- a/jest.setup.ts
+++ b/jest.setup.ts
@@ -6,6 +6,13 @@ process.env.DEV_CACHE_ENABLED = 'true';
 
 global.console.warn = jest.fn();
 
+// Polyfill para structuredClone si no está disponible (Node < 17)
+if (typeof global.structuredClone === 'undefined') {
+  global.structuredClone = (obj: any) => {
+    return JSON.parse(JSON.stringify(obj));
+  };
+}
+
 // Polyfill para Request y Response (necesario para el SDK de Polar)
 global.Request =
   global.Request ||
diff --git a/packages/liquid-forge/compiler/index.ts b/packages/liquid-forge/compiler/index.ts
new file mode 100644
index 00000000..8d4002bb
--- /dev/null
+++ b/packages/liquid-forge/compiler/index.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template } from 'liquidjs';
+import type { AssetCollector } from '../services/rendering/asset-collector';
+import { LiquidCompiler } from './liquid-compiler';
+
+export { LiquidCompiler } from './liquid-compiler';
+export { LiquidInstanceFactory } from './liquid-instance-factory';
+export { SharedLiquidInstance } from './shared-instance';
+
+/**
+ * Función de conveniencia para compilar templates
+ *
+ * @param templateContent - El contenido del template como string.
+ * @param assetCollector - Opcional: AssetCollector para manejo de assets.
+ * @returns La plantilla compilada (un array de nodos AST).
+ */
+export function compileTemplate(templateContent: string, assetCollector?: AssetCollector): Template[] {
+  return LiquidCompiler.compile(templateContent, assetCollector);
+}
diff --git a/packages/liquid-forge/compiler/liquid-compiler.ts b/packages/liquid-forge/compiler/liquid-compiler.ts
new file mode 100644
index 00000000..09d13fc7
--- /dev/null
+++ b/packages/liquid-forge/compiler/liquid-compiler.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template } from 'liquidjs';
+import { Liquid } from 'liquidjs';
+import { AssetCollector } from '../services/rendering/asset-collector';
+import { LiquidInstanceFactory } from './liquid-instance-factory';
+import { SharedLiquidInstance } from './shared-instance';
+
+/**
+ * Compilador de templates Liquid
+ *
+ * Este módulo proporciona funcionalidad para compilar templates Liquid
+ * a estructuras compiladas (AST) que pueden ser renderizadas posteriormente.
+ */
+export class LiquidCompiler {
+  /**
+   * Compila un template string a una estructura compilada (AST).
+   *
+   * @param templateContent - El contenido del template como string.
+   * @param assetCollector - Opcional: AssetCollector para manejo de assets.
+   * @returns La plantilla compilada (un array de nodos AST).
+   */
+  public static compile(templateContent: string, assetCollector?: AssetCollector): Template[] {
+    const liquid = assetCollector ? LiquidInstanceFactory.create(assetCollector) : SharedLiquidInstance.getInstance();
+
+    return liquid.parse(templateContent);
+  }
+
+  /**
+   * Crea una instancia de compilador con una instancia específica de Liquid.
+   * Útil cuando necesitas usar una instancia personalizada de Liquid.
+   *
+   * @param liquidInstance - Instancia de Liquid configurada.
+   * @returns Función de compilación que usa la instancia proporcionada.
+   */
+  public static createCompiler(liquidInstance: Liquid): (templateContent: string) => Template[] {
+    return (templateContent: string) => liquidInstance.parse(templateContent);
+  }
+}
diff --git a/packages/liquid-forge/compiler/liquid-instance-factory.ts b/packages/liquid-forge/compiler/liquid-instance-factory.ts
new file mode 100644
index 00000000..21664894
--- /dev/null
+++ b/packages/liquid-forge/compiler/liquid-instance-factory.ts
@@ -0,0 +1,110 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Liquid } from 'liquidjs';
+import { allFilters } from '../liquid/filters';
+import {
+  FiltersTag,
+  FormTag,
+  IncludeTag,
+  JavaScriptTag,
+  PaginateTag,
+  RenderTag,
+  SchemaTag,
+  ScriptTag,
+  SectionTag,
+  SectionsTag,
+  StyleTag,
+  StylesheetTag,
+} from '../liquid/tags';
+import type { LiquidEngineConfig } from '../types';
+import { AssetCollector } from '../services/rendering/asset-collector';
+
+/**
+ * Factory para crear instancias de Liquid configuradas para compilación
+ */
+export class LiquidInstanceFactory {
+  /**
+   * Crea una instancia de Liquid configurada para compilación
+   *
+   * @param assetCollector - Opcional: AssetCollector para manejo de assets
+   * @returns Instancia de Liquid configurada
+   */
+  public static create(assetCollector?: AssetCollector): Liquid {
+    const config: LiquidEngineConfig = {
+      cache: true,
+      greedy: false,
+      trimTagLeft: false,
+      trimTagRight: false,
+      trimOutputLeft: false,
+      trimOutputRight: false,
+      strictFilters: false,
+      strictVariables: false,
+      ...(process.env.NODE_ENV === 'production' && {
+        trimTagLeft: true,
+        trimTagRight: false,
+        trimOutputLeft: true,
+        trimOutputRight: true,
+      }),
+      globals: {
+        settings: {
+          currency: 'COP',
+          currency_symbol: '$',
+          money_format: '${{amount}}',
+          timezone: 'America/Bogota',
+        },
+        _assetCollector: assetCollector,
+      },
+      context: {
+        _assetCollector: assetCollector,
+      },
+    };
+
+    const liquid = new Liquid(config);
+
+    this.registerFilters(liquid);
+    this.registerCustomTags(liquid);
+
+    return liquid;
+  }
+
+  /**
+   * Registra filtros personalizados en la instancia de Liquid
+   */
+  private static registerFilters(liquid: Liquid): void {
+    allFilters.forEach(({ name, filter }) => {
+      liquid.registerFilter(name, filter);
+    });
+  }
+
+  /**
+   * Registra tags personalizados para Shopify compatibility
+   */
+  private static registerCustomTags(liquid: Liquid): void {
+    liquid.registerTag('schema', SchemaTag);
+    liquid.registerTag('section', SectionTag);
+    liquid.registerTag('sections', SectionsTag);
+    liquid.registerTag('paginate', PaginateTag);
+    liquid.registerTag('render', RenderTag);
+    liquid.registerTag('include', IncludeTag);
+    liquid.registerTag('style', StyleTag);
+    liquid.registerTag('stylesheet', StylesheetTag);
+    liquid.registerTag('script', ScriptTag);
+    liquid.registerTag('javascript', JavaScriptTag);
+    liquid.registerTag('form', FormTag);
+    liquid.registerTag('filters', FiltersTag);
+  }
+}
diff --git a/packages/liquid-forge/compiler/shared-instance.ts b/packages/liquid-forge/compiler/shared-instance.ts
new file mode 100644
index 00000000..cf8ebc0d
--- /dev/null
+++ b/packages/liquid-forge/compiler/shared-instance.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Liquid } from 'liquidjs';
+import { LiquidInstanceFactory } from './liquid-instance-factory';
+
+/**
+ * Gestor de instancia compartida de Liquid para compilación
+ *
+ * Mantiene una instancia singleton de Liquid que se reutiliza
+ * cuando no se requiere un AssetCollector específico
+ */
+export class SharedLiquidInstance {
+  private static instance: Liquid | null = null;
+
+  /**
+   * Obtiene la instancia compartida de Liquid para compilación
+   * Solo se usa cuando no se requiere un assetCollector específico
+   *
+   * @returns Instancia compartida de Liquid
+   */
+  public static getInstance(): Liquid {
+    if (!SharedLiquidInstance.instance) {
+      SharedLiquidInstance.instance = LiquidInstanceFactory.create();
+    }
+    return SharedLiquidInstance.instance;
+  }
+
+  /**
+   * Resetea la instancia compartida
+   * Útil para testing o cuando se necesita forzar una nueva instancia
+   */
+  public static reset(): void {
+    SharedLiquidInstance.instance = null;
+  }
+}
diff --git a/packages/liquid-forge/exports.ts b/packages/liquid-forge/exports.ts
index b57a4d47..461246b2 100644
--- a/packages/liquid-forge/exports.ts
+++ b/packages/liquid-forge/exports.ts
@@ -20,6 +20,7 @@ export { logger } from './lib';
 export { DynamicPageRenderer } from './renderers/dynamic-page-renderer';
 
 export { liquidEngine } from './liquid/engine';
+export { LiquidCompiler, compileTemplate, LiquidInstanceFactory, SharedLiquidInstance } from './compiler';
 
 export { domainResolver } from './services/core/domain-resolver';
 export { linkListService } from './services/core/navigation-service';
diff --git a/packages/liquid-forge/liquid/engine.ts b/packages/liquid-forge/liquid/engine.ts
index b4a5b6dd..b8223cd4 100644
--- a/packages/liquid-forge/liquid/engine.ts
+++ b/packages/liquid-forge/liquid/engine.ts
@@ -32,6 +32,7 @@ import {
 import { AssetCollector } from '../services/rendering/asset-collector';
 import type { LiquidContext, LiquidEngineConfig, TemplateError } from '../types';
 import { Liquid, Template } from 'liquidjs';
+import { compileTemplate } from '../compiler';
 
 class LiquidEngine {
   private static instance: LiquidEngine;
@@ -96,7 +97,7 @@ class LiquidEngine {
    * @returns La plantilla compilada (un array de nodos AST).
    */
   public parse(templateContent: string): Template[] {
-    return this.liquid.parse(templateContent);
+    return compileTemplate(templateContent, this.assetCollector);
   }
 
   /**
diff --git a/packages/liquid-forge/services/templates/template-loader.ts b/packages/liquid-forge/services/templates/template-loader.ts
index 4b79727d..f940a304 100644
--- a/packages/liquid-forge/services/templates/template-loader.ts
+++ b/packages/liquid-forge/services/templates/template-loader.ts
@@ -15,6 +15,7 @@
  */
 
 import { liquidEngine } from '../../liquid/engine';
+import { compileTemplate } from '../../compiler';
 import {
   cacheManager,
   getAssetCacheKey,
@@ -209,7 +210,7 @@ class TemplateLoader {
     const cachedCompiled = cacheManager.getCached(compiledCacheKey) as Template[] | null;
     if (cachedCompiled) return cachedCompiled;
     const rawContent = await this.loadTemplate(storeId, templateName);
-    const compiledTemplate = liquidEngine.parse(rawContent);
+    const compiledTemplate = compileTemplate(rawContent, liquidEngine.assetCollector);
     cacheManager.setCached(compiledCacheKey, compiledTemplate, this.getTemplateCacheTTL());
     return compiledTemplate;
   }
diff --git a/packages/liquid-forge/services/themes/validation/rules/liquid-syntax-rules.ts b/packages/liquid-forge/services/themes/validation/rules/liquid-syntax-rules.ts
index d9aee66c..617b5339 100644
--- a/packages/liquid-forge/services/themes/validation/rules/liquid-syntax-rules.ts
+++ b/packages/liquid-forge/services/themes/validation/rules/liquid-syntax-rules.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { LiquidEngine } from '../../../../liquid/engine';
+import { compileTemplate } from '../../../../compiler';
 import type {
   ThemeFile,
   ThemeValidationConfig,
@@ -31,7 +31,6 @@ export class LiquidSyntaxRules {
   static async validateLiquidSyntax(files: ThemeFile[], config: ThemeValidationConfig): Promise<ValidationResult> {
     const errors: ValidationError[] = [];
     const warnings: ValidationWarning[] = [];
-    const engine = LiquidEngine.getInstance();
 
     // Filtrar solo archivos Liquid
     const liquidFiles = filterLiquidFiles(files);
@@ -39,7 +38,7 @@ export class LiquidSyntaxRules {
     for (const file of liquidFiles) {
       try {
         // Validar sintaxis básica
-        engine.parse(file.content as string);
+        compileTemplate(file.content as string);
 
         // Verificar tamaño del archivo
         if (file.size > 1024 * 1024) {
diff --git a/test/unit/compiler/compile-template.test.ts b/test/unit/compiler/compile-template.test.ts
new file mode 100644
index 00000000..66ebfb70
--- /dev/null
+++ b/test/unit/compiler/compile-template.test.ts
@@ -0,0 +1,162 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Mock de AmplifyServer antes de cualquier importación
+jest.mock('@/utils/server/AmplifyServer', () => ({
+  cookiesClient: {
+    models: {
+      UserStore: {
+        listUserStoreByUserId: jest.fn(),
+        update: jest.fn(),
+      },
+      Cart: {
+        get: jest.fn(),
+        create: jest.fn(),
+        update: jest.fn(),
+        delete: jest.fn(),
+      },
+    },
+  },
+  runWithAmplifyServerContext: jest.fn((callback) => callback()),
+}));
+
+jest.mock('next/headers', () => ({
+  cookies: jest.fn(() => ({
+    get: jest.fn(),
+    set: jest.fn(),
+    delete: jest.fn(),
+  })),
+}));
+
+import { compileTemplate } from '@fasttify/liquid-forge/compiler';
+import { AssetCollector } from '@fasttify/liquid-forge/services/rendering/asset-collector';
+import { beforeEach, describe, expect, it } from '@jest/globals';
+import { SharedLiquidInstance } from '@fasttify/liquid-forge/compiler/shared-instance';
+
+describe('compileTemplate', () => {
+  beforeEach(() => {
+    SharedLiquidInstance.reset();
+  });
+
+  it('debe compilar un template simple', () => {
+    const templateContent = 'Hello World';
+    const compiled = compileTemplate(templateContent);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+    expect(compiled.length).toBeGreaterThan(0);
+  });
+
+  it('debe compilar un template con variables', () => {
+    const templateContent = '{{ product.title }}';
+    const compiled = compileTemplate(templateContent);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+  });
+
+  it('debe compilar un template con filtros', () => {
+    const templateContent = '{{ product.price | money }}';
+    const compiled = compileTemplate(templateContent);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+  });
+
+  it('debe compilar un template con assetCollector', () => {
+    const assetCollector = new AssetCollector();
+    const templateContent = 'Hello World';
+    const compiled = compileTemplate(templateContent, assetCollector);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+  });
+
+  it('debe compilar templates complejos con múltiples elementos', () => {
+    const templateContent = `
+      <div>
+        <h1>{{ title }}</h1>
+        <p>{{ description }}</p>
+        {% if show_price %}
+          <span>{{ price | money }}</span>
+        {% endif %}
+      </div>
+    `;
+    const compiled = compileTemplate(templateContent);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+  });
+
+  it('debe manejar templates vacíos', () => {
+    const templateContent = '';
+    const compiled = compileTemplate(templateContent);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+  });
+
+  it('debe compilar templates con tags personalizados', () => {
+    const templateContent = '{% section "header" %}';
+    const compiled = compileTemplate(templateContent);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+  });
+
+  it('debe usar instancia compartida cuando no se proporciona assetCollector', () => {
+    const templateContent = 'Hello World';
+    const compiled1 = compileTemplate(templateContent);
+    const compiled2 = compileTemplate(templateContent);
+
+    expect(compiled1).toBeDefined();
+    expect(compiled2).toBeDefined();
+  });
+
+  it('debe lanzar error con sintaxis inválida', () => {
+    const templateContent = '{{ unclosed {{';
+
+    expect(() => {
+      compileTemplate(templateContent);
+    }).toThrow();
+  });
+
+  it('debe compilar templates con loops', () => {
+    const templateContent = `
+      {% for product in products %}
+        <div>{{ product.title }}</div>
+      {% endfor %}
+    `;
+    const compiled = compileTemplate(templateContent);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+  });
+
+  it('debe compilar templates con condiciones', () => {
+    const templateContent = `
+      {% if condition %}
+        <p>True</p>
+      {% else %}
+        <p>False</p>
+      {% endif %}
+    `;
+    const compiled = compileTemplate(templateContent);
+
+    expect(compiled).toBeDefined();
+    expect(Array.isArray(compiled)).toBe(true);
+  });
+});
diff --git a/test/unit/compiler/liquid-compiler.test.ts b/test/unit/compiler/liquid-compiler.test.ts
new file mode 100644
index 00000000..370265ca
--- /dev/null
+++ b/test/unit/compiler/liquid-compiler.test.ts
@@ -0,0 +1,174 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Mock de AmplifyServer antes de cualquier importación
+jest.mock('@/utils/server/AmplifyServer', () => ({
+  cookiesClient: {
+    models: {
+      UserStore: {
+        listUserStoreByUserId: jest.fn(),
+        update: jest.fn(),
+      },
+      Cart: {
+        get: jest.fn(),
+        create: jest.fn(),
+        update: jest.fn(),
+        delete: jest.fn(),
+      },
+    },
+  },
+  runWithAmplifyServerContext: jest.fn((callback) => callback()),
+}));
+
+jest.mock('next/headers', () => ({
+  cookies: jest.fn(() => ({
+    get: jest.fn(),
+    set: jest.fn(),
+    delete: jest.fn(),
+  })),
+}));
+
+import { LiquidCompiler } from '@fasttify/liquid-forge/compiler';
+import { AssetCollector } from '@fasttify/liquid-forge/services/rendering/asset-collector';
+import { beforeEach, describe, expect, it } from '@jest/globals';
+import { Liquid } from 'liquidjs';
+import { SharedLiquidInstance } from '@fasttify/liquid-forge/compiler/shared-instance';
+
+describe('LiquidCompiler', () => {
+  beforeEach(() => {
+    SharedLiquidInstance.reset();
+  });
+
+  describe('compile', () => {
+    it('debe compilar un template simple correctamente', () => {
+      const templateContent = 'Hello {{ name }}';
+      const compiled = LiquidCompiler.compile(templateContent);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+      expect(compiled.length).toBeGreaterThan(0);
+    });
+
+    it('debe compilar un template con variables', () => {
+      const templateContent = '{{ product.title }} - {{ product.price }}';
+      const compiled = LiquidCompiler.compile(templateContent);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe compilar un template con filtros', () => {
+      const templateContent = '{{ product.price | money }}';
+      const compiled = LiquidCompiler.compile(templateContent);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe compilar un template con tags personalizados', () => {
+      const templateContent = '{% section "header" %}';
+      const compiled = LiquidCompiler.compile(templateContent);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe compilar un template con assetCollector cuando se proporciona', () => {
+      const assetCollector = new AssetCollector();
+      const templateContent = 'Hello World';
+      const compiled = LiquidCompiler.compile(templateContent, assetCollector);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe usar instancia compartida cuando no se proporciona assetCollector', () => {
+      const templateContent = 'Hello World';
+      const compiled1 = LiquidCompiler.compile(templateContent);
+      const compiled2 = LiquidCompiler.compile(templateContent);
+
+      expect(compiled1).toBeDefined();
+      expect(compiled2).toBeDefined();
+    });
+
+    it('debe manejar templates vacíos', () => {
+      const templateContent = '';
+      const compiled = LiquidCompiler.compile(templateContent);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe manejar templates con múltiples líneas', () => {
+      const templateContent = `
+        <div>
+          <h1>{{ title }}</h1>
+          <p>{{ description }}</p>
+        </div>
+      `;
+      const compiled = LiquidCompiler.compile(templateContent);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe lanzar error con sintaxis inválida', () => {
+      const templateContent = '{{ unclosed {{';
+
+      expect(() => {
+        LiquidCompiler.compile(templateContent);
+      }).toThrow();
+    });
+  });
+
+  describe('createCompiler', () => {
+    it('debe crear una función de compilación con una instancia de Liquid personalizada', () => {
+      const customLiquid = new Liquid();
+      const compiler = LiquidCompiler.createCompiler(customLiquid);
+
+      expect(typeof compiler).toBe('function');
+
+      const templateContent = 'Hello World';
+      const compiled = compiler(templateContent);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe usar la instancia personalizada para compilar', () => {
+      const customLiquid = new Liquid();
+      const compiler = LiquidCompiler.createCompiler(customLiquid);
+
+      const templateContent = '{{ name }}';
+      const compiled = compiler(templateContent);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe mantener la funcionalidad de la instancia personalizada', () => {
+      const customLiquid = new Liquid({
+        strictFilters: true,
+      });
+      const compiler = LiquidCompiler.createCompiler(customLiquid);
+
+      const templateContent = 'Hello World';
+      const compiled = compiler(templateContent);
+
+      expect(compiled).toBeDefined();
+    });
+  });
+});
diff --git a/test/unit/compiler/liquid-instance-factory.test.ts b/test/unit/compiler/liquid-instance-factory.test.ts
new file mode 100644
index 00000000..f87cb717
--- /dev/null
+++ b/test/unit/compiler/liquid-instance-factory.test.ts
@@ -0,0 +1,150 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Mock de AmplifyServer antes de cualquier importación
+jest.mock('@/utils/server/AmplifyServer', () => ({
+  cookiesClient: {
+    models: {
+      UserStore: {
+        listUserStoreByUserId: jest.fn(),
+        update: jest.fn(),
+      },
+      Cart: {
+        get: jest.fn(),
+        create: jest.fn(),
+        update: jest.fn(),
+        delete: jest.fn(),
+      },
+    },
+  },
+  runWithAmplifyServerContext: jest.fn((callback) => callback()),
+}));
+
+jest.mock('next/headers', () => ({
+  cookies: jest.fn(() => ({
+    get: jest.fn(),
+    set: jest.fn(),
+    delete: jest.fn(),
+  })),
+}));
+
+import { LiquidInstanceFactory } from '@fasttify/liquid-forge/compiler';
+import { AssetCollector } from '@fasttify/liquid-forge/services/rendering/asset-collector';
+import { describe, expect, it } from '@jest/globals';
+import { Liquid } from 'liquidjs';
+
+describe('LiquidInstanceFactory', () => {
+  describe('create', () => {
+    it('debe crear una instancia de Liquid sin assetCollector', () => {
+      const liquid = LiquidInstanceFactory.create();
+
+      expect(liquid).toBeInstanceOf(Liquid);
+    });
+
+    it('debe crear una instancia de Liquid con assetCollector', () => {
+      const assetCollector = new AssetCollector();
+      const liquid = LiquidInstanceFactory.create(assetCollector);
+
+      expect(liquid).toBeInstanceOf(Liquid);
+    });
+
+    it('debe crear instancias diferentes cada vez', () => {
+      const liquid1 = LiquidInstanceFactory.create();
+      const liquid2 = LiquidInstanceFactory.create();
+
+      expect(liquid1).not.toBe(liquid2);
+    });
+
+    it('debe configurar correctamente los filtros personalizados', async () => {
+      const liquid = LiquidInstanceFactory.create();
+      const template = '{{ 1000 | money }}';
+
+      const result = await liquid.parseAndRender(template, {});
+
+      expect(result).toBeDefined();
+    });
+
+    it('debe registrar tags personalizados', async () => {
+      const liquid = LiquidInstanceFactory.create();
+      const template = '{% section "test" %}';
+
+      const compiled = liquid.parse(template);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe configurar globals correctamente', async () => {
+      const liquid = LiquidInstanceFactory.create();
+      const template = '{{ settings.currency }}';
+
+      const result = await liquid.parseAndRender(template, {});
+
+      expect(result).toBe('COP');
+    });
+
+    it('debe incluir assetCollector en el contexto cuando se proporciona', () => {
+      const assetCollector = new AssetCollector();
+      const liquid = LiquidInstanceFactory.create(assetCollector);
+
+      expect(liquid).toBeInstanceOf(Liquid);
+    });
+
+    it('debe manejar configuraciones de producción correctamente', () => {
+      const originalEnv = process.env.NODE_ENV;
+      Object.defineProperty(process, 'env', {
+        value: { ...process.env, NODE_ENV: 'production' },
+        writable: true,
+      });
+
+      const liquid = LiquidInstanceFactory.create();
+
+      expect(liquid).toBeInstanceOf(Liquid);
+
+      Object.defineProperty(process, 'env', {
+        value: { ...process.env, NODE_ENV: originalEnv },
+        writable: true,
+      });
+    });
+
+    it('debe manejar configuraciones de desarrollo correctamente', () => {
+      const originalEnv = process.env.NODE_ENV;
+      Object.defineProperty(process, 'env', {
+        value: { ...process.env, NODE_ENV: 'development' },
+        writable: true,
+      });
+
+      const liquid = LiquidInstanceFactory.create();
+
+      expect(liquid).toBeInstanceOf(Liquid);
+
+      Object.defineProperty(process, 'env', {
+        value: { ...process.env, NODE_ENV: originalEnv },
+        writable: true,
+      });
+    });
+
+    it('debe permitir compilar y renderizar templates', async () => {
+      const liquid = LiquidInstanceFactory.create();
+      const template = 'Hello {{ name }}';
+      const context = { name: 'World' };
+
+      const result = await liquid.parseAndRender(template, context);
+
+      expect(result).toBe('Hello World');
+    });
+  });
+});
diff --git a/test/unit/compiler/setup.ts b/test/unit/compiler/setup.ts
new file mode 100644
index 00000000..7ee44432
--- /dev/null
+++ b/test/unit/compiler/setup.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Mock structuredClone si no está disponible
+if (typeof global.structuredClone === 'undefined') {
+  global.structuredClone = (obj: any) => {
+    return JSON.parse(JSON.stringify(obj));
+  };
+}
+
+// Mock de AmplifyServer antes de que se importe cualquier dependencia
+jest.mock('@/utils/server/AmplifyServer', () => ({
+  cookiesClient: {
+    models: {
+      UserStore: {
+        listUserStoreByUserId: jest.fn(),
+        update: jest.fn(),
+      },
+      Cart: {
+        get: jest.fn(),
+        create: jest.fn(),
+        update: jest.fn(),
+        delete: jest.fn(),
+      },
+    },
+  },
+  runWithAmplifyServerContext: jest.fn((callback) => callback()),
+}));
+
+// Mock de next/headers
+jest.mock('next/headers', () => ({
+  cookies: jest.fn(() => ({
+    get: jest.fn(),
+    set: jest.fn(),
+    delete: jest.fn(),
+  })),
+}));
diff --git a/test/unit/compiler/shared-instance.test.ts b/test/unit/compiler/shared-instance.test.ts
new file mode 100644
index 00000000..b4f8012a
--- /dev/null
+++ b/test/unit/compiler/shared-instance.test.ts
@@ -0,0 +1,139 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Mock de AmplifyServer antes de cualquier importación
+jest.mock('@/utils/server/AmplifyServer', () => ({
+  cookiesClient: {
+    models: {
+      UserStore: {
+        listUserStoreByUserId: jest.fn(),
+        update: jest.fn(),
+      },
+      Cart: {
+        get: jest.fn(),
+        create: jest.fn(),
+        update: jest.fn(),
+        delete: jest.fn(),
+      },
+    },
+  },
+  runWithAmplifyServerContext: jest.fn((callback) => callback()),
+}));
+
+jest.mock('next/headers', () => ({
+  cookies: jest.fn(() => ({
+    get: jest.fn(),
+    set: jest.fn(),
+    delete: jest.fn(),
+  })),
+}));
+
+import { SharedLiquidInstance } from '@fasttify/liquid-forge/compiler';
+import { beforeEach, describe, expect, it } from '@jest/globals';
+import { Liquid } from 'liquidjs';
+
+describe('SharedLiquidInstance', () => {
+  beforeEach(() => {
+    SharedLiquidInstance.reset();
+  });
+
+  describe('getInstance', () => {
+    it('debe retornar una instancia de Liquid', () => {
+      const instance = SharedLiquidInstance.getInstance();
+
+      expect(instance).toBeInstanceOf(Liquid);
+    });
+
+    it('debe retornar la misma instancia en llamadas consecutivas', () => {
+      const instance1 = SharedLiquidInstance.getInstance();
+      const instance2 = SharedLiquidInstance.getInstance();
+
+      expect(instance1).toBe(instance2);
+    });
+
+    it('debe crear una nueva instancia después de reset', () => {
+      const instance1 = SharedLiquidInstance.getInstance();
+      SharedLiquidInstance.reset();
+      const instance2 = SharedLiquidInstance.getInstance();
+
+      expect(instance1).not.toBe(instance2);
+      expect(instance2).toBeInstanceOf(Liquid);
+    });
+
+    it('debe permitir compilar templates', () => {
+      const instance = SharedLiquidInstance.getInstance();
+      const template = 'Hello World';
+
+      const compiled = instance.parse(template);
+
+      expect(compiled).toBeDefined();
+      expect(Array.isArray(compiled)).toBe(true);
+    });
+
+    it('debe permitir renderizar templates', async () => {
+      const instance = SharedLiquidInstance.getInstance();
+      const template = 'Hello {{ name }}';
+      const context = { name: 'World' };
+
+      const result = await instance.parseAndRender(template, context);
+
+      expect(result).toBe('Hello World');
+    });
+
+    it('debe mantener la configuración entre llamadas', async () => {
+      const instance1 = SharedLiquidInstance.getInstance();
+      const instance2 = SharedLiquidInstance.getInstance();
+
+      const template = '{{ settings.currency }}';
+      const result1 = await instance1.parseAndRender(template, {});
+      const result2 = await instance2.parseAndRender(template, {});
+
+      expect(result1).toBe(result2);
+      expect(result1).toBe('COP');
+    });
+  });
+
+  describe('reset', () => {
+    it('debe resetear la instancia compartida', () => {
+      const instance1 = SharedLiquidInstance.getInstance();
+      SharedLiquidInstance.reset();
+      const instance2 = SharedLiquidInstance.getInstance();
+
+      expect(instance1).not.toBe(instance2);
+    });
+
+    it('debe permitir múltiples resets', () => {
+      SharedLiquidInstance.getInstance();
+      SharedLiquidInstance.reset();
+      SharedLiquidInstance.reset();
+      const instance = SharedLiquidInstance.getInstance();
+
+      expect(instance).toBeInstanceOf(Liquid);
+    });
+
+    it('debe crear una nueva instancia funcional después de reset', async () => {
+      const instance1 = SharedLiquidInstance.getInstance();
+      await instance1.parseAndRender('test', {});
+
+      SharedLiquidInstance.reset();
+
+      const instance2 = SharedLiquidInstance.getInstance();
+      const result = await instance2.parseAndRender('Hello {{ name }}', { name: 'World' });
+
+      expect(result).toBe('Hello World');
+    });
+  });
+});

From a3c948b5a46f9a171394839f42591b2c0269123d Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Sun, 2 Nov 2025 17:14:22 -0500
Subject: [PATCH 16/49] Remove unnecessary exports from LiquidEngine class

This commit cleans up the LiquidEngine class by removing the export of the singleton instance and the class itself for testing purposes. This change simplifies the module's interface and focuses on the core functionality of the LiquidEngine, improving code clarity and maintainability.
---
 packages/liquid-forge/liquid/engine.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/liquid-forge/liquid/engine.ts b/packages/liquid-forge/liquid/engine.ts
index b8223cd4..aa96c77e 100644
--- a/packages/liquid-forge/liquid/engine.ts
+++ b/packages/liquid-forge/liquid/engine.ts
@@ -191,8 +191,6 @@ class LiquidEngine {
   }
 }
 
-// Export singleton instance
 export const liquidEngine = LiquidEngine.getInstance();
 
-// Export class for testing
 export { LiquidEngine };

From e233c4b37b0bf778240c33199449a818ad40ae64 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Sun, 2 Nov 2025 17:22:20 -0500
Subject: [PATCH 17/49] Update pnpm version to 10.20.0 across workflows and
 amplify configuration

This commit updates the pnpm version from 10.18.0 to 10.20.0 in the amplify.yml and various GitHub workflow files (build.yml, prettier.yml, unit_test.yml). This change ensures consistency in package management and leverages improvements in the newer pnpm version.
---
 .github/workflows/build.yml     | 6 +++---
 .github/workflows/prettier.yml  | 2 +-
 .github/workflows/unit_test.yml | 2 +-
 amplify.yml                     | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index cde906f4..e61fa9d0 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -19,13 +19,13 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.18.0
+          version: 10.20.0
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'pnpm'
+          node-version: "20"
+          cache: "pnpm"
 
       - name: Set Node.js optimization environment variables
         run: |
diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
index b79f0f76..023e9bf6 100644
--- a/.github/workflows/prettier.yml
+++ b/.github/workflows/prettier.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.18.0
+          version: 10.20.0
 
       - name: Configure Node.js
         uses: actions/setup-node@v4
diff --git a/.github/workflows/unit_test.yml b/.github/workflows/unit_test.yml
index b42d4f07..0c2fd749 100644
--- a/.github/workflows/unit_test.yml
+++ b/.github/workflows/unit_test.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.18.0
+          version: 10.20.0
 
       - name: setup node
         uses: actions/setup-node@v4
diff --git a/amplify.yml b/amplify.yml
index 1d31aacf..bab6ed75 100644
--- a/amplify.yml
+++ b/amplify.yml
@@ -5,7 +5,7 @@ backend:
       commands:
         - export NODE_OPTIONS='--max-old-space-size=7000'
         - node -e "console.log('Total available heap size (MB):', v8.getHeapStatistics().heap_size_limit / 1024 / 1024)"
-        - npm install -g pnpm@10.18.0
+        - npm install -g pnpm@10.20.0
         - pnpm install --frozen-lockfile
         - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
 
@@ -15,7 +15,7 @@ frontend:
       commands:
         - export NODE_OPTIONS='--max-old-space-size=7000'
         - node -e "console.log('Total available heap size (MB):', v8.getHeapStatistics().heap_size_limit / 1024 / 1024)"
-        - npm install -g pnpm@10.18.0
+        - npm install -g pnpm@10.20.0
         - env | grep -e BUCKET_NAME >> .env.production
         - env | grep -e CLOUDFRONT_DOMAIN_NAME >> .env.production
         - env | grep -e APP_URL >> .env.production

From 034fdd1f6513483961629d3cb97833430f0ac6b5 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Sun, 2 Nov 2025 17:24:48 -0500
Subject: [PATCH 18/49] Update Node.js setup in build workflow to use single
 quotes for consistency

---
 .github/workflows/build.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index e61fa9d0..1ae58cf2 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -24,8 +24,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: "pnpm"
+          node-version: '20'
+          cache: 'pnpm'
 
       - name: Set Node.js optimization environment variables
         run: |

From 9eefe648aa081a55a16685b706b920e489037fd1 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Sun, 2 Nov 2025 18:13:29 -0500
Subject: [PATCH 19/49] Enhance CacheInvalidationService with detailed
 invalidation logic and statistics tracking

This commit introduces additional functionality to the CacheInvalidationService, including the tracking of invalidation counts and timestamps. It refines the cache invalidation process by adding specific handling for layout, section, and snippet template changes, ensuring that all relevant pages are invalidated appropriately. The TemplateDevSynchronizer is also updated to detect template types for more targeted cache invalidation, improving overall cache management and performance.
---
 .../core/cache/cache-invalidation-service.ts  | 125 ++++++++++++++++--
 .../sync/template-dev-synchronizer.ts         |  45 ++++++-
 2 files changed, 158 insertions(+), 12 deletions(-)

diff --git a/packages/liquid-forge/services/core/cache/cache-invalidation-service.ts b/packages/liquid-forge/services/core/cache/cache-invalidation-service.ts
index 7367fa2a..d1817c2d 100644
--- a/packages/liquid-forge/services/core/cache/cache-invalidation-service.ts
+++ b/packages/liquid-forge/services/core/cache/cache-invalidation-service.ts
@@ -65,6 +65,8 @@ interface InvalidationConfig {
  */
 export class CacheInvalidationService {
   private static instance: CacheInvalidationService;
+  private invalidationCount: number = 0;
+  private lastInvalidationTime?: Date;
 
   private readonly invalidationConfig: Record<ChangeType, InvalidationConfig> = {
     product_created: {
@@ -123,8 +125,8 @@ export class CacheInvalidationService {
 
     template_updated: {
       cacheKeys: [],
-      patterns: ['template_', 'compiled_template_'],
-      description: 'Template actualizado - invalidar templates',
+      patterns: ['template_', 'compiled_template_', 'page_'],
+      description: 'Template actualizado - invalidar templates y HTML renderizado',
     },
 
     store_settings_updated: {
@@ -140,8 +142,8 @@ export class CacheInvalidationService {
     },
     template_store_updated: {
       cacheKeys: [],
-      patterns: ['template_', 'compiled_template_'],
-      description: 'Plantilla de tienda actualizada - invalidar plantillas de tienda y compiladas',
+      patterns: ['template_', 'compiled_template_', 'page_'],
+      description: 'Plantilla de tienda actualizada - invalidar plantillas, compiladas y HTML renderizado',
     },
   };
 
@@ -164,17 +166,99 @@ export class CacheInvalidationService {
       return;
     }
 
-    this.invalidateByPatterns(config.patterns, storeId, entityId);
+    logger.info(
+      `Invalidating cache for ${changeType} - Store: ${storeId}, Entity: ${entityId || 'N/A'}, Path: ${path || 'N/A'}`,
+      undefined,
+      'CacheInvalidationService'
+    );
+
+    // Detectar si es cambio en layout o sección compartida para invalidación agresiva
+    const isLayoutOrSharedSection = path && (path.includes('layout/') || path.includes('sections/'));
+
+    if (isLayoutOrSharedSection) {
+      logger.info(
+        `Layout/shared section detected: ${path} - Invalidating all pages for store ${storeId}`,
+        undefined,
+        'CacheInvalidationService'
+      );
+      // Invalidar TODAS las páginas cuando cambia layout o sección compartida
+      cacheManager.deleteByPrefix(getPagesPrefix(storeId));
+    }
+
+    this.invalidateByPatterns(config.patterns, storeId, entityId, path);
 
     if (entityId) {
       this.invalidateSpecificKeys(changeType, storeId, entityId);
     }
+
+    // Invalidación adicional basada en path
+    if (path) {
+      this.invalidateByPath(changeType, storeId, path);
+    }
+
+    // Registrar invalidación para estadísticas
+    this.recordInvalidation();
+  }
+
+  /**
+   * Invalida caché basado en el path del template
+   */
+  private invalidateByPath(changeType: ChangeType, storeId: string, templatePath: string): void {
+    // Detectar tipo de template por path
+    if (templatePath.includes('layout/')) {
+      // Layout cambia → Invalidar TODAS las páginas (todas usan layout)
+      logger.info(
+        `Layout template changed: ${templatePath} - Invalidating all pages`,
+        undefined,
+        'CacheInvalidationService'
+      );
+      cacheManager.deleteByPrefix(getPagesPrefix(storeId));
+    } else if (templatePath.includes('sections/')) {
+      // Sección cambia → Invalidar todas las páginas (las secciones se usan en múltiples lugares)
+      logger.info(
+        `Section template changed: ${templatePath} - Invalidating all pages`,
+        undefined,
+        'CacheInvalidationService'
+      );
+      cacheManager.deleteByPrefix(getPagesPrefix(storeId));
+    } else if (templatePath.includes('snippets/')) {
+      // Snippet cambia → Invalidar páginas que lo usan (más complejo, por ahora invalidar todas)
+      logger.info(
+        `Snippet template changed: ${templatePath} - Invalidating all pages`,
+        undefined,
+        'CacheInvalidationService'
+      );
+      cacheManager.deleteByPrefix(getPagesPrefix(storeId));
+    } else if (templatePath.includes('templates/')) {
+      // Template específico cambia → Invalidar ese tipo de página
+      const pageType = this.extractPageTypeFromTemplatePath(templatePath);
+      if (pageType) {
+        logger.info(
+          `Page template changed: ${templatePath} - Invalidating ${pageType} pages`,
+          undefined,
+          'CacheInvalidationService'
+        );
+        // Invalidar páginas de ese tipo específico
+        cacheManager.deleteByPrefix(`page_${storeId}_${pageType}|`);
+      } else {
+        // Si no se puede determinar, invalidar todas
+        cacheManager.deleteByPrefix(getPagesPrefix(storeId));
+      }
+    }
+  }
+
+  /**
+   * Extrae el tipo de página desde el path del template
+   */
+  private extractPageTypeFromTemplatePath(templatePath: string): string | null {
+    const match = templatePath.match(/templates\/([^\/]+)\.(json|liquid)/);
+    return match ? match[1] : null;
   }
 
   /**
    * Invalida caché por patrones de claves
    */
-  private invalidateByPatterns(patterns: string[], storeId: string, entityId?: string): void {
+  private invalidateByPatterns(patterns: string[], storeId: string, entityId?: string, path?: string): void {
     for (const pattern of patterns) {
       // Mapear patrones a prefijos concretos usando helpers
       switch (pattern) {
@@ -215,12 +299,29 @@ export class CacheInvalidationService {
         case 'template_':
           cacheManager.deleteByPrefix(`template_${storeId}_`);
           // Templates actualizados impactan páginas renderizadas
+          // CRÍTICO: Invalidar HTML renderizado cuando cambian templates
           cacheManager.deleteByPrefix(getPagesPrefix(storeId));
+          logger.debug(
+            `Invalidated template_ prefix and all pages for store ${storeId}`,
+            undefined,
+            'CacheInvalidationService'
+          );
           break;
         case 'compiled_template_':
           cacheManager.deleteByPrefix(`compiled_template_${storeId}_`);
           // Templates compilados también deben invalidar HTML
+          // CRÍTICO: Invalidar HTML renderizado cuando cambian templates compilados
+          cacheManager.deleteByPrefix(getPagesPrefix(storeId));
+          logger.debug(
+            `Invalidated compiled_template_ prefix and all pages for store ${storeId}`,
+            undefined,
+            'CacheInvalidationService'
+          );
+          break;
+        case 'page_':
+          // Invalidar todas las páginas HTML renderizadas
           cacheManager.deleteByPrefix(getPagesPrefix(storeId));
+          logger.debug(`Invalidated all page HTML cache for store ${storeId}`, undefined, 'CacheInvalidationService');
           break;
         case 'search_products_':
           // Búsquedas por tienda con prefijo conocido
@@ -289,13 +390,21 @@ export class CacheInvalidationService {
     cacheManager.invalidateProductCache(storeId, productId);
   }
 
+  /**
+   * Registra una invalidación para estadísticas
+   */
+  private recordInvalidation(): void {
+    this.invalidationCount++;
+    this.lastInvalidationTime = new Date();
+  }
+
   /**
    * Obtiene estadísticas de invalidación
    */
   public getInvalidationStats(): { totalInvalidations: number; lastInvalidation?: Date } {
     return {
-      totalInvalidations: 0,
-      lastInvalidation: undefined,
+      totalInvalidations: this.invalidationCount,
+      lastInvalidation: this.lastInvalidationTime,
     };
   }
 }
diff --git a/packages/liquid-forge/services/templates/sync/template-dev-synchronizer.ts b/packages/liquid-forge/services/templates/sync/template-dev-synchronizer.ts
index 25769277..7137c023 100644
--- a/packages/liquid-forge/services/templates/sync/template-dev-synchronizer.ts
+++ b/packages/liquid-forge/services/templates/sync/template-dev-synchronizer.ts
@@ -15,7 +15,7 @@
  */
 
 import { logger } from '../../../lib/logger';
-import { cacheManager } from '../../core/cache';
+import { cacheManager, getPagesPrefix } from '../../core/cache';
 import { cacheInvalidationService } from '../../core/cache/cache-invalidation-service';
 import { PATH_PATTERNS } from '../../../lib/regex-patterns';
 import { templateLoader } from '../template-loader';
@@ -45,6 +45,19 @@ interface FileChange {
   timestamp: number;
 }
 
+/**
+ * Tipos de templates y sus rutas correspondientes
+ */
+const TEMPLATE_TYPES = {
+  layout: ['layout/'],
+  config: ['config/'],
+  section: ['sections/'],
+  snippet: ['snippets/'],
+  template: ['templates/'],
+} as const;
+
+type TemplateType = keyof typeof TEMPLATE_TYPES;
+
 /**
  * Sistema de desarrollo para sincronizar plantillas locales con S3 en tiempo real
  */
@@ -213,6 +226,20 @@ export class TemplateDevSynchronizer {
     }
   }
 
+  /**
+   * Detecta el tipo de template basado en su ruta
+   * @param templatePath - Ruta del template
+   * @returns Tipo de template o null si no coincide con ningún tipo conocido
+   */
+  private detectTemplateType(templatePath: string): TemplateType | null {
+    for (const [type, paths] of Object.entries(TEMPLATE_TYPES)) {
+      if (paths.some((path) => templatePath.includes(path))) {
+        return type as TemplateType;
+      }
+    }
+    return null;
+  }
+
   /**
    * Maneja los cambios en archivos
    * @param filePath - Ruta absoluta del archivo cambiado
@@ -238,12 +265,22 @@ export class TemplateDevSynchronizer {
 
       const templateName = relativePath.replace(PATH_PATTERNS.backslashes, '/');
 
+      // Invalidar template específico primero
       templateLoader.invalidateTemplateCache(this.storeId, templateName);
 
-      if (templateName.includes('layout/') || templateName.includes('config/')) {
-        cacheManager.invalidateStoreCache(this.storeId); // Invalidar toda la caché de la tienda
+      // Detectar tipo de template para invalidación apropiada
+      const templateType = this.detectTemplateType(templateName);
+
+      // Si es layout o config, invalidar TODA la caché de la tienda (impacto global)
+      if (templateType === 'layout' || templateType === 'config') {
+        logger.info(
+          `${templateType === 'layout' ? 'Layout' : 'Config'} change detected: ${templateName} - Invalidating entire store cache`,
+          undefined,
+          'TemplateDevSynchronizer'
+        );
+        cacheManager.invalidateStoreCache(this.storeId);
+        cacheManager.deleteByPrefix(getPagesPrefix(this.storeId));
       }
-
       cacheInvalidationService.invalidateCache('template_store_updated', this.storeId, undefined, templateName);
 
       this.recordRecentChange({ path: templateName, event, timestamp: Date.now() });

From 84ee76e9d84a16d6eb3f89a77ce5b4c64ad97596 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Mon, 3 Nov 2025 12:19:58 -0500
Subject: [PATCH 20/49] Enhance Theme Studio with fasttify_attributes filter
 and sidebar state management

This commit introduces the fasttify_attributes filter to generate data attributes for sections and blocks, improving integration with the Theme Studio. It also updates the Sidebar and PreviewPane components to utilize a centralized sidebar state, allowing for better selection management of sections and blocks. Additionally, the ThemeStudio component is enhanced to handle element clicks, improving user interaction and overall functionality.
---
 docs/engine/theme-studio-selection.mdx        | 225 ++++++++++++++++
 docs/index.mdx                                |   1 +
 .../fasttify/theme/sections/hero.liquid       |   5 +-
 .../liquid/filters/html-filters.ts            |  87 +++++++
 .../rendering/fasttify-attributes-builder.ts  |  84 ++++++
 .../services/rendering/section-renderer.ts    |  11 +-
 .../presentation/components/ThemeStudio.tsx   |  28 +-
 .../components/preview/PreviewPane.tsx        |  22 +-
 .../components/sidebar/Sidebar.tsx            |  16 +-
 .../presentation/hooks/useIframeSelection.ts  | 209 +++++++++++++++
 .../src/presentation/hooks/useSidebarState.ts |   2 +-
 .../utils/iframe-selection-script.js          | 168 ++++++++++++
 test/unit/liquid-filters/html-filters.test.ts | 246 ++++++++++++++++++
 .../fasttify-attributes-builder.test.ts       | 175 +++++++++++++
 14 files changed, 1256 insertions(+), 23 deletions(-)
 create mode 100644 docs/engine/theme-studio-selection.mdx
 create mode 100644 packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script.js
 create mode 100644 test/unit/liquid-filters/html-filters.test.ts
 create mode 100644 test/unit/services/fasttify-attributes-builder.test.ts

diff --git a/docs/engine/theme-studio-selection.mdx b/docs/engine/theme-studio-selection.mdx
new file mode 100644
index 00000000..d8b213ca
--- /dev/null
+++ b/docs/engine/theme-studio-selection.mdx
@@ -0,0 +1,225 @@
+# Selección Bidireccional en Theme Studio
+
+La selección bidireccional permite sincronizar la selección visual entre el preview del tema (iframe) y el sidebar del Theme Studio, similar a cómo funciona el editor de temas de Shopify.
+
+## ¿Qué es y para qué sirve?
+
+Este sistema permite:
+
+- **Selección visual en el preview**: Al hacer click en una sección o bloque en el preview del tema, se selecciona automáticamente en el sidebar
+- **Selección desde el sidebar**: Al seleccionar una sección o bloque en el sidebar, se resalta visualmente en el preview con un borde azul
+- **Navegación rápida**: Facilita la edición de secciones y bloques específicos identificándolos visualmente
+
+## Filtro `fasttify_attributes`
+
+El filtro `fasttify_attributes` genera atributos HTML `data-section-id` y `data-block-id` que permiten identificar elementos seleccionables en el Theme Studio.
+
+### Uso en Templates Liquid
+
+#### En Secciones
+
+Agrega el filtro al elemento contenedor principal de la sección:
+
+```liquid
+<section class="my-section" {{ section.fasttify_attributes }}>
+  <!-- Contenido de la sección -->
+</section>
+```
+
+#### En Bloques
+
+Agrega el filtro a cada elemento de bloque dentro de un loop:
+
+```liquid
+{% for block in section.blocks %}
+  {% if block.type == 'my_block_type' %}
+    <div class="my-block" {{ block.fasttify_attributes }}>
+      <!-- Contenido del bloque -->
+    </div>
+  {% endif %}
+{% endfor %}
+```
+
+### Ejemplo Completo
+
+```liquid
+<section class="hero-section" {{ section.fasttify_attributes }}>
+  <div class="hero-content">
+    <h1>{{ section.settings.title }}</h1>
+
+    {% if section.blocks.size > 0 %}
+      <div class="hero-actions">
+        {% for block in section.blocks %}
+          {% if block.type == 'button' %}
+            <a href="{{ block.settings.link }}" class="btn" {{ block.fasttify_attributes }}>
+              {{ block.settings.label }}
+            </a>
+          {% endif %}
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+</section>
+```
+
+### Atributos Generados
+
+El filtro genera automáticamente los siguientes atributos HTML:
+
+- `data-section-id`: ID de la sección (ej: `"hero"`)
+- `data-block-id`: ID del bloque (ej: `"hero-button-1"`)
+
+**Ejemplo de HTML generado:**
+
+```html
+<section class="hero-section" data-section-id="hero">
+  <a href="/collections" class="btn" data-section-id="hero" data-block-id="hero-button-1"> Ver Colección </a>
+</section>
+```
+
+## Cómo Funciona
+
+### 1. Generación de Atributos
+
+Cuando LiquidJS renderiza un template que usa `{{ section.fasttify_attributes }}` o `{{ block.fasttify_attributes }}`:
+
+1. El filtro detecta si el objeto es una `section` o un `block`
+2. Extrae el `id` del objeto (`section.id` o `block.id`)
+3. Para bloques, también obtiene el `section.id` del contexto
+4. Genera los atributos HTML correspondientes
+
+### 2. Script de Selección en el Iframe
+
+Un script JavaScript se inyecta automáticamente en el iframe del preview que:
+
+- **Detecta clicks**: Escucha clicks en elementos con `data-section-id` o `data-block-id`
+- **Envía mensajes**: Notifica al Theme Studio cuando se hace click en un elemento
+- **Aplica resaltado**: Resalta visualmente los elementos seleccionados desde el sidebar
+- **Maneja hover**: Muestra un preview visual al pasar el mouse sobre elementos seleccionables
+
+### 3. Comunicación Bidireccional
+
+La comunicación entre el iframe y el Theme Studio usa la API `postMessage`:
+
+**Del iframe al Theme Studio:**
+
+```javascript
+{
+  type: 'FASTTIFY_THEME_STUDIO_ELEMENT_CLICKED',
+  sectionId: 'hero',
+  blockId: 'hero-button-1'
+}
+```
+
+**Del Theme Studio al iframe:**
+
+```javascript
+{
+  type: 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT',
+  sectionId: 'hero',
+  blockId: 'hero-button-1'
+}
+```
+
+## Estilos Visuales
+
+El script aplica automáticamente los siguientes estilos CSS:
+
+### Elemento Seleccionado
+
+- **Borde sólido azul** (`#006fbb`) de 2px
+- **Offset** de 2px desde el borde del elemento
+- **Scroll automático** al elemento cuando se selecciona desde el sidebar
+
+### Elemento en Hover
+
+- **Borde punteado azul** (`#006fbb`) de 2px
+- Muestra un preview visual antes de seleccionar
+
+## Compatibilidad con Elementos Interactivos
+
+El sistema está diseñado para **no interferir** con elementos interactivos:
+
+- Los enlaces (`<a>`) funcionan normalmente
+- Los botones (`<button>`) funcionan normalmente
+- Los inputs y otros controles de formulario funcionan normalmente
+
+El script solo previene el comportamiento por defecto cuando se hace click directamente en el contenedor seleccionable (como el `<section>`), no en sus hijos interactivos.
+
+## Mejores Prácticas
+
+### 1. Agregar a Todas las Secciones
+
+Agrega `{{ section.fasttify_attributes }}` a todas tus secciones para que sean seleccionables:
+
+```liquid
+<section class="my-section" {{ section.fasttify_attributes }}>
+  <!-- Contenido -->
+</section>
+```
+
+### 2. Agregar a Bloques Importantes
+
+Agrega `{{ block.fasttify_attributes }}` a bloques que quieras que sean seleccionables individualmente:
+
+```liquid
+{% for block in section.blocks %}
+  <div class="block" {{ block.fasttify_attributes }}>
+    <!-- Contenido del bloque -->
+  </div>
+{% endfor %}
+```
+
+### 3. Mantener Compatibilidad
+
+El filtro es compatible con temas existentes. Si no se usa, simplemente no genera atributos y el sistema de selección no afecta el tema.
+
+## Implementación Técnica
+
+### Arquitectura
+
+```
+┌─────────────────┐         ┌──────────────────┐
+│  Theme Studio   │◄───────►│  Iframe Preview  │
+│   (Sidebar)     │         │   (Tema Render)   │
+└─────────────────┘         └──────────────────┘
+       │                              │
+       │                              │
+       ▼                              ▼
+┌─────────────────┐         ┌──────────────────┐
+│ useIframeSelection│        │ iframe-selection  │
+│      Hook        │         │     Script        │
+└─────────────────┘         └──────────────────┘
+```
+
+### Componentes Principales
+
+1. **Filtro Liquid**: `fasttify_attributes` en `packages/liquid-forge/liquid/filters/html-filters.ts`
+2. **Builder de Atributos**: `fasttify-attributes-builder.ts` que crea objetos con getters
+3. **Hook React**: `useIframeSelection.ts` que maneja la comunicación
+4. **Script del Iframe**: `iframe-selection-script.js` que se inyecta en el preview
+
+## Troubleshooting
+
+### Los elementos no se resaltan
+
+1. Verifica que el filtro esté agregado correctamente en el template
+2. Inspecciona el HTML generado y busca los atributos `data-section-id` y `data-block-id`
+3. Verifica en la consola del navegador si hay errores de JavaScript
+
+### Los clicks no funcionan en enlaces
+
+El sistema está diseñado para permitir clicks normales en elementos interactivos. Si tienes problemas, verifica que los enlaces estén dentro del elemento con `data-section-id` o `data-block-id`.
+
+### La selección no se sincroniza
+
+Asegúrate de que:
+
+- El script se está inyectando correctamente en el iframe
+- Los mensajes `postMessage` están llegando (revisa la consola del navegador)
+- El origen del iframe es el mismo o está en localhost
+
+## Referencias
+
+- [Theme Development Guide](./theme-development-guide.mdx) - Guía completa de desarrollo de temas
+- [Filters & Tags](./filters-tags.mdx) - Documentación de todos los filtros disponibles
diff --git a/docs/index.mdx b/docs/index.mdx
index 889a5a5e..b9c886a7 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -28,6 +28,7 @@ Esta documentación cubre desde la personalización de temas y plantillas, hasta
 - [Pages and Policies](./engine/pages-and-policies.md) - Sistema de páginas y políticas
 - [Render Engine](./engine/render-engine.md) - Arquitectura del motor de renderizado
 - [Theme Development Guide](./engine/theme-development-guide.md) - Guía de desarrollo de temas
+- [Theme Studio Selection](./engine/theme-studio-selection.mdx) - **Selección bidireccional** - Sistema de selección visual entre sidebar y preview
 - [Theme Visual Guide](./engine/theme-visual-guide.md) - Guía visual de temas
 - [Shopify URL Compatibility](./engine/shopify-url-compatibility.md) - Compatibilidad con URLs de Shopify
 
diff --git a/packages/example-themes/fasttify/theme/sections/hero.liquid b/packages/example-themes/fasttify/theme/sections/hero.liquid
index da0e8ba7..a31d8c15 100644
--- a/packages/example-themes/fasttify/theme/sections/hero.liquid
+++ b/packages/example-themes/fasttify/theme/sections/hero.liquid
@@ -1,6 +1,5 @@
 {{ 'hero.css' | asset_url | stylesheet_tag }}
-<section
-class="collection-hero-section">
+<section class="collection-hero-section" {{ section.fasttify_attributes }}>
   <!-- Header integrado solo para esta sección -->
   {% render 'header' %}
   {% assign hero_collection = collections['new-products'] %}
@@ -77,7 +76,7 @@ class="collection-hero-section">
             {% for block in section.blocks %}
               {% if block.type == 'hero_item' %}
                 {% if block.settings.label != blank and block.settings.link != blank %}
-                  <a href="{{ block.settings.link }}" class="hero-btn hero-btn-primary">
+                  <a href="{{ block.settings.link }}" class="hero-btn hero-btn-primary" {{ block.fasttify_attributes }}>
                     <span>{{ block.settings.label }}</span>
                   </a>
                 {% endif %}
diff --git a/packages/liquid-forge/liquid/filters/html-filters.ts b/packages/liquid-forge/liquid/filters/html-filters.ts
index c28df14d..dcc7b5c1 100644
--- a/packages/liquid-forge/liquid/filters/html-filters.ts
+++ b/packages/liquid-forge/liquid/filters/html-filters.ts
@@ -228,6 +228,92 @@ export const inlineAssetContentFilter: LiquidFilter = {
   },
 };
 
+/**
+ * Filtro fasttify_attributes - Genera atributos data-section-id y data-block-id para selección en Theme Studio
+ * Compatible con el formato de Shopify: {{ block.fasttify_attributes }} o {{ section.fasttify_attributes }}
+ *
+ * Uso:
+ * - En bloques: <div {{ block.fasttify_attributes }}>
+ * - En secciones: <section {{ section.fasttify_attributes }}>
+ *
+ * Genera: data-section-id="hero" data-block-id="hero-button-1"
+ */
+export const fasttifyAttributesFilter: LiquidFilter = {
+  name: 'fasttify_attributes',
+  filter: function (obj?: any): string {
+    try {
+      let sectionId: string | undefined;
+      let blockId: string | undefined;
+
+      // Cuando se llama {{ block.fasttify_attributes }}, obj es el objeto block
+      // Cuando se llama {{ section.fasttify_attributes }}, obj es el objeto section
+      if (obj && typeof obj === 'object') {
+        // Detectar si es un block o una section
+        // Los blocks típicamente tienen 'type' y están dentro de un contexto de section
+        // Las sections tienen 'blocks' array o están en el contexto global de section
+        const isBlock = 'type' in obj && typeof obj.type === 'string' && !('blocks' in obj);
+
+        if (isBlock) {
+          // Es un block, necesitamos block.id y section.id del contexto
+          blockId = obj.id;
+
+          // Intentar obtener section.id del contexto
+          try {
+            const section = this.context?.getSync(['section']);
+            if (section?.id) {
+              sectionId = section.id;
+            }
+          } catch (error) {
+            // Ignorar errores silenciosamente
+          }
+        } else {
+          // Es una section, solo necesitamos section.id
+          if (obj.id) {
+            sectionId = obj.id;
+          }
+        }
+      }
+
+      // Si aún no tenemos sectionId o blockId, intentar leer del contexto directamente
+      if (!sectionId || !blockId) {
+        try {
+          if (!sectionId) {
+            const section = this.context?.getSync(['section']);
+            if (section?.id) {
+              sectionId = section.id;
+            }
+          }
+
+          if (!blockId) {
+            const block = this.context?.getSync(['block']);
+            if (block?.id) {
+              blockId = block.id;
+            }
+          }
+        } catch (error) {
+          // Ignorar errores silenciosamente
+        }
+      }
+
+      // Construir los atributos
+      const attributes: string[] = [];
+
+      if (sectionId) {
+        attributes.push(`data-section-id="${sectionId}"`);
+      }
+
+      if (blockId) {
+        attributes.push(`data-block-id="${blockId}"`);
+      }
+
+      return attributes.length > 0 ? ` ${attributes.join(' ')}` : '';
+    } catch (error) {
+      logger.error('fasttify_attributes: Error generating fasttify attributes', error);
+      return '';
+    }
+  },
+};
+
 export const htmlFilters: LiquidFilter[] = [
   assetUrlFilter,
   linkToFilter,
@@ -236,4 +322,5 @@ export const htmlFilters: LiquidFilter[] = [
   defaultPaginationFilter,
   imgTagFilter,
   inlineAssetContentFilter,
+  fasttifyAttributesFilter,
 ];
diff --git a/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts b/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
new file mode 100644
index 00000000..cdb904a4
--- /dev/null
+++ b/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { fasttifyAttributesFilter } from '../../liquid/filters/html-filters';
+
+interface SectionWithAttributes {
+  id: string;
+  settings: Record<string, any>;
+  blocks: BlockWithAttributes[];
+  fasttify_attributes: string;
+}
+
+interface BlockWithAttributes {
+  id: string;
+  type: string;
+  settings: Record<string, any>;
+  fasttify_attributes: string;
+}
+
+/**
+ * Crea un objeto section con la propiedad fasttify_attributes como getter
+ * Cuando LiquidJS accede a section.fasttify_attributes, ejecuta el filtro directamente
+ */
+export function createSectionWithAttributes(
+  sectionId: string,
+  settings: Record<string, any>,
+  blocks: any[]
+): SectionWithAttributes {
+  // Crear primero el objeto section sin los bloques para evitar referencia circular
+  const sectionObject: SectionWithAttributes = {
+    id: sectionId,
+    settings,
+    blocks: [], // Se asignará después
+    get fasttify_attributes() {
+      const mockContext = {
+        getSync: (path: string[]) => {
+          if (path[0] === 'section') return sectionObject;
+          return undefined;
+        },
+      };
+      return fasttifyAttributesFilter.filter.call({ context: mockContext }, sectionObject);
+    },
+  };
+
+  // Ahora asignar los bloques después de que sectionObject esté inicializado
+  sectionObject.blocks = blocks.map((block: any) => createBlockWithAttributes(block, sectionObject));
+
+  return sectionObject;
+}
+
+/**
+ * Crea un objeto block con la propiedad fasttify_attributes como getter
+ * Cuando LiquidJS accede a block.fasttify_attributes, ejecuta el filtro directamente
+ */
+function createBlockWithAttributes(block: any, sectionObject: SectionWithAttributes): BlockWithAttributes {
+  const blockWithAttributes: BlockWithAttributes = {
+    ...block,
+    get fasttify_attributes() {
+      const mockContext = {
+        getSync: (path: string[]) => {
+          if (path[0] === 'section') return sectionObject;
+          if (path[0] === 'block') return blockWithAttributes;
+          return undefined;
+        },
+      };
+      return fasttifyAttributesFilter.filter.call({ context: mockContext }, blockWithAttributes);
+    },
+  };
+
+  return blockWithAttributes;
+}
diff --git a/packages/liquid-forge/services/rendering/section-renderer.ts b/packages/liquid-forge/services/rendering/section-renderer.ts
index 964b7ecd..213d2995 100644
--- a/packages/liquid-forge/services/rendering/section-renderer.ts
+++ b/packages/liquid-forge/services/rendering/section-renderer.ts
@@ -19,6 +19,7 @@ import { liquidEngine } from '../../liquid/engine';
 import { schemaParser } from '../templates/parsing/schema-parser';
 import { templateLoader } from '../templates/template-loader';
 import type { RenderContext } from '../../types';
+import { createSectionWithAttributes } from './fasttify-attributes-builder';
 
 export class SectionRenderer {
   /**
@@ -71,13 +72,13 @@ export class SectionRenderer {
       // Crear contexto específico para esta sección
       // Usar sectionId si está disponible (ID en el template), si no usar sectionName (tipo de sección)
       const sectionIdForContext = sectionId || sectionName;
+
+      // Crear objeto section con la propiedad fasttify_attributes
+      const sectionObject = createSectionWithAttributes(sectionIdForContext, finalSettings, actualBlocks);
+
       const sectionContext = {
         ...baseContext,
-        section: {
-          id: sectionIdForContext,
-          settings: finalSettings,
-          blocks: actualBlocks,
-        },
+        section: sectionObject,
       };
 
       // Renderizar la sección con el contexto enriquecido
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index bb17cfb4..c5f148dc 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -8,9 +8,10 @@ import { Sidebar } from './sidebar/Sidebar';
 import { PreviewPane } from './preview/PreviewPane';
 import { SettingsPane } from './settings/SettingsPane';
 import { EditorHeader } from './header/EditorHeader';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { useStoreTemplates } from '../hooks/useStoreTemplates';
+import { useSidebarState } from '../hooks/useSidebarState';
 
 export interface ThemeStudioProps {
   storeId: string;
@@ -25,6 +26,21 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
   const { pages } = useStoreTemplates({ storeId, apiBaseUrl });
   const router = useRouter();
 
+  const sidebarState = useSidebarState();
+
+  const handleElementClick = useCallback(
+    (sectionId: string | null, blockId: string | null) => {
+      if (blockId && sectionId) {
+        sidebarState.selectBlock(blockId, sectionId);
+      } else if (sectionId) {
+        sidebarState.selectSection(sectionId);
+      } else {
+        sidebarState.clearSelection();
+      }
+    },
+    [sidebarState]
+  );
+
   const currentPageTitle = useMemo(() => {
     const page = pages.find((p) => p.id === currentPageId);
     return page?.name;
@@ -54,7 +70,12 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
       <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
         <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr 360px', height: '100%', minHeight: 0 }}>
           <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
-            <Sidebar storeId={storeId} apiBaseUrl={apiBaseUrl} currentPageId={currentPageId} />
+            <Sidebar
+              storeId={storeId}
+              apiBaseUrl={apiBaseUrl}
+              currentPageId={currentPageId}
+              sidebarState={sidebarState}
+            />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
             <PreviewPane
@@ -62,6 +83,8 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
               domain={domain}
               device={device}
               currentPath={currentPath}
+              selectedSectionId={sidebarState.selectedSectionId}
+              selectedBlockId={sidebarState.selectedBlockId}
               onPathChange={(newPath) => {
                 setCurrentPath(newPath);
                 const page = pages.find((p) => p.url === newPath);
@@ -69,6 +92,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
                   setCurrentPageId(page.id);
                 }
               }}
+              onElementClick={handleElementClick}
             />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index da7f55b3..f9f9a1ff 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -7,16 +7,28 @@
 import { useEffect, useRef, useState } from 'react';
 import { usePreviewUrl } from '../../hooks/usePreviewUrl';
 import { useIframeNavigation } from '../../hooks/useIframeNavigation';
+import { useIframeSelection } from '../../hooks/useIframeSelection';
 
 interface PreviewPaneProps {
   storeId: string;
   domain: string | null;
   device: 'desktop' | 'tablet' | 'mobile';
   currentPath?: string;
+  selectedSectionId?: string | null;
+  selectedBlockId?: string | null;
   onPathChange?: (newPath: string) => void;
+  onElementClick?: (sectionId: string | null, blockId: string | null) => void;
 }
 
-export function PreviewPane({ domain, device, currentPath = '/', onPathChange }: PreviewPaneProps) {
+export function PreviewPane({
+  domain,
+  device,
+  currentPath = '/',
+  selectedSectionId,
+  selectedBlockId,
+  onPathChange,
+  onElementClick,
+}: PreviewPaneProps) {
   const { previewUrl } = usePreviewUrl({ domain, path: currentPath });
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const { isNavigating } = useIframeNavigation({
@@ -25,6 +37,14 @@ export function PreviewPane({ domain, device, currentPath = '/', onPathChange }:
     currentPath,
     onPathChange,
   });
+
+  useIframeSelection({
+    iframeRef,
+    selectedSectionId: selectedSectionId || null,
+    selectedBlockId: selectedBlockId || null,
+    onElementClick,
+  });
+
   const lastUrlRef = useRef<string | null>(null);
 
   useEffect(() => {
diff --git a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
index bc7fee2f..013f21a8 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
@@ -8,7 +8,7 @@ import { Card, BlockStack, Text, Scrollable, Box, Divider } from '@shopify/polar
 import { useTemplateStructure } from '../../hooks/useTemplateStructure';
 import { useLayoutStructure } from '../../hooks/useLayoutStructure';
 import { useStoreTemplates } from '../../hooks/useStoreTemplates';
-import { useSidebarState } from '../../hooks/useSidebarState';
+import type { UseSidebarStateResult } from '../../hooks/useSidebarState';
 import { SidebarLoading } from './SidebarLoading';
 import { SectionGroup } from './section-group/SectionGroup';
 
@@ -16,9 +16,10 @@ interface SidebarProps {
   storeId: string;
   apiBaseUrl: string;
   currentPageId: string;
+  sidebarState: UseSidebarStateResult;
 }
 
-export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
+export function Sidebar({ storeId, apiBaseUrl, currentPageId, sidebarState }: SidebarProps) {
   const { template, isLoading: isLoadingTemplate } = useTemplateStructure({
     storeId,
     apiBaseUrl,
@@ -32,15 +33,8 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId }: SidebarProps) {
 
   const { pages, isLoading: isLoadingPages } = useStoreTemplates({ storeId, apiBaseUrl });
 
-  const {
-    expandedSections,
-    selectedSectionId,
-    selectedBlockId,
-    toggleSection,
-    selectSection,
-    selectBlock,
-    clearSelection,
-  } = useSidebarState();
+  const { expandedSections, selectedSectionId, selectedBlockId, toggleSection, selectSection, selectBlock } =
+    sidebarState;
 
   const currentPageTitle = pages.find((p) => p.id === currentPageId)?.name || 'Página';
 
diff --git a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
new file mode 100644
index 00000000..6a288ba4
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
@@ -0,0 +1,209 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef, RefObject } from 'react';
+// @ts-ignore - Importing JS file directly
+import { iframeSelectionScript } from '../utils/iframe-selection-script.js';
+
+interface UseIframeSelectionParams {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  selectedSectionId: string | null;
+  selectedBlockId: string | null;
+  onElementClick?: (sectionId: string | null, blockId: string | null) => void;
+}
+
+/**
+ * Hook para manejar la selección bidireccional entre el sidebar y el iframe
+ *
+ * Este hook:
+ * 1. Inyecta el script de selección en el iframe cuando carga
+ * 2. Escucha mensajes del iframe cuando se hace click en un elemento
+ * 3. Envía mensajes al iframe cuando cambia la selección del sidebar
+ */
+export function useIframeSelection({
+  iframeRef,
+  selectedSectionId,
+  selectedBlockId,
+  onElementClick,
+}: UseIframeSelectionParams) {
+  const scriptInjectedRef = useRef(false);
+  const lastSelectedSectionIdRef = useRef<string | null>(null);
+  const lastSelectedBlockIdRef = useRef<string | null>(null);
+
+  // Inyectar script en el iframe cuando carga
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const injectScript = () => {
+      try {
+        const iframeWindow = iframe.contentWindow;
+        const iframeDocument = iframe.contentDocument || iframeWindow?.document;
+
+        if (!iframeWindow || !iframeDocument) {
+          return;
+        }
+
+        // Solo inyectar una vez
+        if (scriptInjectedRef.current) {
+          return;
+        }
+
+        // Verificar que el documento esté listo
+        if (iframeDocument.readyState === 'loading') {
+          iframeDocument.addEventListener('DOMContentLoaded', () => {
+            injectScript();
+          });
+          return;
+        }
+
+        // Verificar si el script ya está inyectado
+        if (iframeDocument.querySelector('script[data-fasttify-selection]')) {
+          scriptInjectedRef.current = true;
+          return;
+        }
+
+        // Crear y agregar el script
+        const script = iframeDocument.createElement('script');
+        script.setAttribute('data-fasttify-selection', 'true');
+        script.textContent = iframeSelectionScript;
+        iframeDocument.head.appendChild(script);
+
+        scriptInjectedRef.current = true;
+      } catch (error) {
+        // Puede fallar si el iframe está en otro origen (cross-origin)
+        // Ignorar errores silenciosamente
+      }
+    };
+
+    // Intentar inyectar cuando el iframe carga
+    const handleLoad = () => {
+      scriptInjectedRef.current = false; // Resetear para permitir re-inyección si el iframe se recarga
+      injectScript();
+    };
+
+    iframe.addEventListener('load', handleLoad);
+
+    // Si el iframe ya está cargado, intentar inyectar inmediatamente
+    if (iframe.contentDocument?.readyState === 'complete') {
+      injectScript();
+    }
+
+    return () => {
+      iframe.removeEventListener('load', handleLoad);
+    };
+  }, [iframeRef]);
+
+  // Escuchar mensajes del iframe
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      // Validar origen
+      const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+      const isSameOrigin = event.origin === window.location.origin;
+
+      if (!isSameOrigin && !isLocalhost) {
+        return;
+      }
+
+      if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_ELEMENT_CLICKED') {
+        const { sectionId, blockId } = event.data;
+
+        // Notificar al componente padre
+        if (onElementClick) {
+          onElementClick(sectionId || null, blockId || null);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [onElementClick]);
+
+  // Enviar mensaje al iframe cuando cambia la selección del sidebar
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    // Solo enviar si realmente cambió la selección
+    if (selectedSectionId === lastSelectedSectionIdRef.current && selectedBlockId === lastSelectedBlockIdRef.current) {
+      return;
+    }
+
+    lastSelectedSectionIdRef.current = selectedSectionId;
+    lastSelectedBlockIdRef.current = selectedBlockId;
+
+    try {
+      const iframeWindow = iframe.contentWindow;
+      if (!iframeWindow) return;
+
+      const message = {
+        type: 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT',
+        sectionId: selectedSectionId,
+        blockId: selectedBlockId,
+      };
+
+      try {
+        iframeWindow.postMessage(message, '*');
+      } catch (e) {
+        // Ignorar errores silenciosamente
+      }
+
+      // También intentar enviar directamente después de varios delays para asegurar que el script esté listo
+      setTimeout(function () {
+        try {
+          iframeWindow.postMessage(message, '*');
+        } catch (e) {
+          // Ignorar errores silenciosamente
+        }
+      }, 100);
+
+      setTimeout(function () {
+        try {
+          iframeWindow.postMessage(message, '*');
+        } catch (e) {
+          // Ignorar errores silenciosamente
+        }
+      }, 500);
+    } catch (error) {
+      console.debug('Cannot send message to iframe (cross-origin):', error);
+    }
+  }, [iframeRef, selectedSectionId, selectedBlockId]);
+
+  // Limpiar selección cuando se desmonta el componente
+  useEffect(() => {
+    return () => {
+      const iframe = iframeRef.current;
+      if (!iframe) return;
+
+      try {
+        const iframeWindow = iframe.contentWindow;
+        if (!iframeWindow) return;
+
+        iframeWindow.postMessage(
+          {
+            type: 'FASTTIFY_THEME_STUDIO_CLEAR_SELECTION',
+          },
+          '*'
+        );
+      } catch (error) {
+        // Ignorar errores en cleanup
+      }
+    };
+  }, [iframeRef]);
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useSidebarState.ts b/packages/theme-studio/src/presentation/hooks/useSidebarState.ts
index de3adafc..ce45285c 100644
--- a/packages/theme-studio/src/presentation/hooks/useSidebarState.ts
+++ b/packages/theme-studio/src/presentation/hooks/useSidebarState.ts
@@ -16,7 +16,7 @@
 
 import { useState, useCallback } from 'react';
 
-interface UseSidebarStateResult {
+export interface UseSidebarStateResult {
   expandedSections: Set<string>;
   selectedSectionId: string | null;
   selectedBlockId: string | null;
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script.js
new file mode 100644
index 00000000..0be1b855
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script.js
@@ -0,0 +1,168 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Script que se inyecta en el iframe para manejar la selección bidireccional
+ * entre el sidebar y el preview del tema.
+ *
+ * Este script:
+ * 1. Detecta clicks en elementos con data-section-id o data-block-id
+ * 2. Envía postMessage al padre con el ID encontrado
+ * 3. Escucha mensajes del padre para aplicar/quitar resaltado
+ * 4. Aplica estilos CSS para el outline azul
+ */
+
+export const iframeSelectionScript = `(function() {
+  'use strict';
+  if (window.self === window.top) return;
+  const SELECTED_CLASS = 'fasttify-theme-studio-selected';
+  const HOVER_CLASS = 'fasttify-theme-studio-hover';
+  const style = document.createElement('style');
+  style.textContent =
+    '[data-section-id].' + SELECTED_CLASS + ',' +
+    '[data-block-id].' + SELECTED_CLASS + ' {' +
+    '  outline: 2px solid #006fbb !important;' +
+    '  outline-offset: 2px !important;' +
+    '  position: relative !important;' +
+    '}' +
+    '[data-section-id].' + HOVER_CLASS + ',' +
+    '[data-block-id].' + HOVER_CLASS + ' {' +
+    '  outline: 2px dashed #006fbb !important;' +
+    '  outline-offset: 2px !important;' +
+    '  position: relative !important;' +
+    '}';
+  document.head.appendChild(style);
+  let currentSelectedElement = null;
+  let hoveredElement = null;
+  function findSelectableElement(element) {
+    if (!element) return null;
+    let current = element;
+    while (current && current.nodeType === 1) {
+      if (current.hasAttribute && (current.hasAttribute('data-section-id') || current.hasAttribute('data-block-id'))) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+  function getElementIds(element) {
+    return {
+      sectionId: element.getAttribute('data-section-id'),
+      blockId: element.getAttribute('data-block-id'),
+    };
+  }
+  function clearSelection() {
+    if (currentSelectedElement) {
+      currentSelectedElement.classList.remove(SELECTED_CLASS);
+      currentSelectedElement = null;
+    }
+  }
+  function selectElement(sectionId, blockId) {
+    clearSelection();
+    if (!sectionId && !blockId) return;
+    let selector = '';
+    if (blockId) {
+      selector = '[data-block-id="' + blockId + '"]';
+    } else if (sectionId) {
+      selector = '[data-section-id="' + sectionId + '"]';
+    }
+    if (selector) {
+      const element = document.querySelector(selector);
+      if (element) {
+        element.classList.add(SELECTED_CLASS);
+        currentSelectedElement = element;
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }
+  }
+  function handleClick(event) {
+    const target = event.target;
+    const selectableElement = findSelectableElement(target);
+    if (selectableElement) {
+      // Solo prevenir el comportamiento por defecto si el elemento clickeado es directamente el elemento seleccionable
+      // Esto permite que enlaces, botones y otros elementos interactivos funcionen normalmente
+      const isDirectSelectable = target === selectableElement;
+
+      // Si es un elemento interactivo (enlace, botón, input, etc.), no prevenir el comportamiento
+      const isInteractiveElement = target.tagName === 'A' ||
+                                    target.tagName === 'BUTTON' ||
+                                    target.tagName === 'INPUT' ||
+                                    target.tagName === 'SELECT' ||
+                                    target.tagName === 'TEXTAREA' ||
+                                    target.onclick ||
+                                    target.closest('a') ||
+                                    target.closest('button');
+
+      // Solo prevenir si es un click directo en el elemento seleccionable Y no es un elemento interactivo
+      if (isDirectSelectable && !isInteractiveElement) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      // Siempre enviar el mensaje de selección, pero no interferir con elementos interactivos
+      const { sectionId, blockId } = getElementIds(selectableElement);
+      if (window.parent) {
+        window.parent.postMessage({
+          type: 'FASTTIFY_THEME_STUDIO_ELEMENT_CLICKED',
+          sectionId,
+          blockId,
+        }, '*');
+      }
+    }
+  }
+  function handleMouseEnter(event) {
+    const target = event.target;
+    const selectableElement = findSelectableElement(target);
+    if (selectableElement && selectableElement !== currentSelectedElement) {
+      selectableElement.classList.add(HOVER_CLASS);
+      hoveredElement = selectableElement;
+    }
+  }
+  function handleMouseLeave(event) {
+    if (hoveredElement) {
+      hoveredElement.classList.remove(HOVER_CLASS);
+      hoveredElement = null;
+    }
+  }
+  function handleMessage(event) {
+    const isLocalhost = window.location.hostname === 'localhost' ||
+                       window.location.hostname === '127.0.0.1';
+    const isSameOrigin = event.origin === window.location.origin;
+    if (!isSameOrigin && !isLocalhost) return;
+    if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT') {
+      selectElement(event.data.sectionId, event.data.blockId);
+    } else if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_CLEAR_SELECTION') {
+      clearSelection();
+    }
+  }
+  function init() {
+    document.addEventListener('click', handleClick, true);
+    document.addEventListener('mouseenter', handleMouseEnter, true);
+    document.addEventListener('mouseleave', handleMouseLeave, true);
+    window.addEventListener('message', handleMessage);
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+  window.addEventListener('beforeunload', () => {
+    document.removeEventListener('click', handleClick, true);
+    document.removeEventListener('mouseenter', handleMouseEnter, true);
+    document.removeEventListener('mouseleave', handleMouseLeave, true);
+    window.removeEventListener('message', handleMessage);
+  });
+})();`;
diff --git a/test/unit/liquid-filters/html-filters.test.ts b/test/unit/liquid-filters/html-filters.test.ts
new file mode 100644
index 00000000..43d6a05c
--- /dev/null
+++ b/test/unit/liquid-filters/html-filters.test.ts
@@ -0,0 +1,246 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Liquid } from 'liquidjs';
+import { htmlFilters } from '@fasttify/liquid-forge/liquid/filters/html-filters';
+
+describe('HTML Filters - fasttify_attributes', () => {
+  let liquid: Liquid;
+
+  beforeEach(() => {
+    liquid = new Liquid();
+    htmlFilters.forEach((filter) => {
+      liquid.registerFilter(filter.name, filter.filter);
+    });
+  });
+
+  describe('fasttify_attributes filter', () => {
+    it('should generate section attributes when called with section object', () => {
+      const section = {
+        id: 'hero',
+        settings: {},
+        blocks: [],
+      };
+
+      const mockContext = {
+        getSync: (path: string[]) => {
+          if (path[0] === 'section') return section;
+          return undefined;
+        },
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const result = filter?.filter.call({ context: mockContext }, section);
+
+      expect(result).toBe(' data-section-id="hero"');
+    });
+
+    it('should generate block attributes when called with block object', () => {
+      const section = {
+        id: 'hero',
+        settings: {},
+        blocks: [],
+      };
+
+      const block = {
+        id: 'hero-button-1',
+        type: 'button',
+        settings: {},
+      };
+
+      const mockContext = {
+        getSync: (path: string[]) => {
+          if (path[0] === 'section') return section;
+          if (path[0] === 'block') return block;
+          return undefined;
+        },
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const result = filter?.filter.call({ context: mockContext }, block);
+
+      expect(result).toBe(' data-section-id="hero" data-block-id="hero-button-1"');
+    });
+
+    it('should generate both section and block attributes for blocks', () => {
+      const section = {
+        id: 'featured-products',
+        settings: {},
+        blocks: [],
+      };
+
+      const block = {
+        id: 'product-card-1',
+        type: 'product_card',
+        settings: { product_id: '123' },
+      };
+
+      const mockContext = {
+        getSync: (path: string[]) => {
+          if (path[0] === 'section') return section;
+          if (path[0] === 'block') return block;
+          return undefined;
+        },
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const result = filter?.filter.call({ context: mockContext }, block);
+
+      expect(result).toContain('data-section-id="featured-products"');
+      expect(result).toContain('data-block-id="product-card-1"');
+    });
+
+    it('should return empty string when object has no id', () => {
+      const section = {
+        settings: {},
+        blocks: [],
+      };
+
+      const mockContext = {
+        getSync: () => undefined,
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const result = filter?.filter.call({ context: mockContext }, section);
+
+      expect(result).toBe('');
+    });
+
+    it('should return empty string when object is null or undefined', () => {
+      const mockContext = {
+        getSync: () => undefined,
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const resultNull = filter?.filter.call({ context: mockContext }, null);
+      const resultUndefined = filter?.filter.call({ context: mockContext }, undefined);
+
+      expect(resultNull).toBe('');
+      expect(resultUndefined).toBe('');
+    });
+
+    it('should read section from context when block object is passed', () => {
+      const section = {
+        id: 'hero',
+        settings: {},
+        blocks: [],
+      };
+
+      const block = {
+        id: 'hero-button-1',
+        type: 'button',
+        settings: {},
+      };
+
+      const mockContext = {
+        getSync: (path: string[]) => {
+          if (path[0] === 'section') return section;
+          if (path[0] === 'block') return block;
+          return undefined;
+        },
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const result = filter?.filter.call({ context: mockContext }, block);
+
+      expect(result).toContain('data-section-id="hero"');
+      expect(result).toContain('data-block-id="hero-button-1"');
+    });
+
+    it('should detect block by type property', () => {
+      const section = {
+        id: 'hero',
+        settings: {},
+        blocks: [],
+      };
+
+      const block = {
+        id: 'block-1',
+        type: 'text',
+        settings: {},
+      };
+
+      const mockContext = {
+        getSync: (path: string[]) => {
+          if (path[0] === 'section') return section;
+          return undefined;
+        },
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const result = filter?.filter.call({ context: mockContext }, block);
+
+      expect(result).toContain('data-block-id="block-1"');
+    });
+
+    it('should detect section by absence of type and presence of blocks', () => {
+      const section = {
+        id: 'hero',
+        settings: {},
+        blocks: [{ id: 'block-1', type: 'button' }],
+      };
+
+      const mockContext = {
+        getSync: () => undefined,
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const result = filter?.filter.call({ context: mockContext }, section);
+
+      expect(result).toBe(' data-section-id="hero"');
+    });
+
+    it('should handle context errors gracefully', () => {
+      const block = {
+        id: 'block-1',
+        type: 'button',
+        settings: {},
+      };
+
+      const mockContext = {
+        getSync: () => {
+          throw new Error('Context error');
+        },
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+      const result = filter?.filter.call({ context: mockContext }, block);
+
+      // Debería devolver solo el blockId sin sectionId si hay error
+      expect(result).toContain('data-block-id="block-1"');
+    });
+
+    it('should return empty string when filter throws an error', () => {
+      const invalidObject = {
+        id: null,
+        toString: () => {
+          throw new Error('Cannot convert to string');
+        },
+      };
+
+      const mockContext = {
+        getSync: () => undefined,
+      };
+
+      const filter = htmlFilters.find((f) => f.name === 'fasttify_attributes');
+
+      // El filtro debería manejar errores y retornar string vacío
+      const result = filter?.filter.call({ context: mockContext }, invalidObject);
+
+      expect(typeof result).toBe('string');
+    });
+  });
+});
diff --git a/test/unit/services/fasttify-attributes-builder.test.ts b/test/unit/services/fasttify-attributes-builder.test.ts
new file mode 100644
index 00000000..a9c02fd7
--- /dev/null
+++ b/test/unit/services/fasttify-attributes-builder.test.ts
@@ -0,0 +1,175 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createSectionWithAttributes } from '@fasttify/liquid-forge/services/rendering/fasttify-attributes-builder';
+
+describe('Fasttify Attributes Builder', () => {
+  describe('createSectionWithAttributes', () => {
+    it('should create section object with fasttify_attributes getter', () => {
+      const sectionId = 'hero';
+      const settings = { title: 'Hero Section' };
+      const blocks: any[] = [];
+
+      const section = createSectionWithAttributes(sectionId, settings, blocks);
+
+      expect(section.id).toBe('hero');
+      expect(section.settings).toEqual(settings);
+      expect(section.blocks).toEqual([]);
+      expect(section.fasttify_attributes).toBe(' data-section-id="hero"');
+    });
+
+    it('should create section with blocks that have fasttify_attributes', () => {
+      const sectionId = 'hero';
+      const settings = {};
+      const blocks = [
+        { id: 'button-1', type: 'button', settings: { label: 'Click me' } },
+        { id: 'button-2', type: 'button', settings: { label: 'Learn more' } },
+      ];
+
+      const section = createSectionWithAttributes(sectionId, settings, blocks);
+
+      expect(section.blocks).toHaveLength(2);
+      expect(section.blocks[0].id).toBe('button-1');
+      expect(section.blocks[0].type).toBe('button');
+      expect(section.blocks[0].fasttify_attributes).toContain('data-section-id="hero"');
+      expect(section.blocks[0].fasttify_attributes).toContain('data-block-id="button-1"');
+    });
+
+    it('should not have circular reference errors', () => {
+      const sectionId = 'test-section';
+      const settings = {};
+      const blocks = [{ id: 'block-1', type: 'text', settings: {} }];
+
+      // Esto no debería lanzar un error de referencia circular
+      expect(() => {
+        const section = createSectionWithAttributes(sectionId, settings, blocks);
+        // Acceder a los atributos debería funcionar
+        const sectionAttrs = section.fasttify_attributes;
+        const blockAttrs = section.blocks[0].fasttify_attributes;
+
+        expect(sectionAttrs).toBeTruthy();
+        expect(blockAttrs).toBeTruthy();
+      }).not.toThrow();
+    });
+
+    it('should allow accessing fasttify_attributes multiple times', () => {
+      const sectionId = 'hero';
+      const settings = {};
+      const blocks: any[] = [];
+
+      const section = createSectionWithAttributes(sectionId, settings, blocks);
+
+      const attrs1 = section.fasttify_attributes;
+      const attrs2 = section.fasttify_attributes;
+
+      expect(attrs1).toBe(attrs2);
+      expect(attrs1).toBe(' data-section-id="hero"');
+    });
+
+    it('should create blocks with correct structure', () => {
+      const sectionId = 'products';
+      const settings = {};
+      const blocks = [
+        {
+          id: 'product-1',
+          type: 'product',
+          settings: { product_id: '123' },
+        },
+      ];
+
+      const section = createSectionWithAttributes(sectionId, settings, blocks);
+
+      expect(section.blocks[0]).toHaveProperty('id', 'product-1');
+      expect(section.blocks[0]).toHaveProperty('type', 'product');
+      expect(section.blocks[0]).toHaveProperty('settings');
+      expect(section.blocks[0]).toHaveProperty('fasttify_attributes');
+    });
+
+    it('should preserve all block properties when creating blocks', () => {
+      const sectionId = 'custom-section';
+      const settings = {};
+      const blocks = [
+        {
+          id: 'custom-block',
+          type: 'custom',
+          settings: { custom_field: 'custom_value' },
+          extraProperty: 'extra_value',
+        },
+      ];
+
+      const section = createSectionWithAttributes(sectionId, settings, blocks);
+
+      expect(section.blocks[0].settings.custom_field).toBe('custom_value');
+      expect((section.blocks[0] as any).extraProperty).toBe('extra_value');
+    });
+
+    it('should handle empty blocks array', () => {
+      const sectionId = 'empty-section';
+      const settings = {};
+      const blocks: any[] = [];
+
+      const section = createSectionWithAttributes(sectionId, settings, blocks);
+
+      expect(section.blocks).toEqual([]);
+      expect(section.fasttify_attributes).toBe(' data-section-id="empty-section"');
+    });
+
+    it('should handle multiple blocks correctly', () => {
+      const sectionId = 'multi-block';
+      const settings = {};
+      const blocks = [
+        { id: 'block-1', type: 'text', settings: {} },
+        { id: 'block-2', type: 'image', settings: {} },
+        { id: 'block-3', type: 'button', settings: {} },
+      ];
+
+      const section = createSectionWithAttributes(sectionId, settings, blocks);
+
+      expect(section.blocks).toHaveLength(3);
+      section.blocks.forEach((block, index) => {
+        expect(block.id).toBe(`block-${index + 1}`);
+        expect(block.fasttify_attributes).toContain(`data-block-id="block-${index + 1}"`);
+        expect(block.fasttify_attributes).toContain('data-section-id="multi-block"');
+      });
+    });
+
+    it('should work with complex nested structures', () => {
+      const sectionId = 'complex';
+      const settings = {
+        nested: {
+          property: 'value',
+        },
+      };
+      const blocks = [
+        {
+          id: 'nested-block',
+          type: 'complex',
+          settings: {
+            nested: {
+              array: [1, 2, 3],
+            },
+          },
+        },
+      ];
+
+      const section = createSectionWithAttributes(sectionId, settings, blocks);
+
+      expect(section.settings.nested.property).toBe('value');
+      expect(section.blocks[0].settings.nested.array).toEqual([1, 2, 3]);
+      expect(section.blocks[0].fasttify_attributes).toContain('data-section-id="complex"');
+    });
+  });
+});

From de1aa16577cc35b2e8c77bca328aef0af9f4cc1f Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Mon, 3 Nov 2025 13:11:10 -0500
Subject: [PATCH 21/49] Add domain parameter to PreviewPane and
 useIframeSelection for iframe script injection

---
 .../components/preview/PreviewPane.tsx        |   1 +
 .../presentation/hooks/useIframeSelection.ts  |  25 ++-
 .../utils/iframe-selection-script.js          | 188 +++++-------------
 .../iframe-selection-script/constants.js      |  75 +++++++
 .../iframe-selection-script/domain-links.js   |  96 +++++++++
 .../iframe-selection-script/event-handlers.js | 124 ++++++++++++
 .../extract-function-body.js                  |  31 +++
 .../utils/iframe-selection-script/init.js     |  58 ++++++
 .../iframe-selection-script/selection.js      |  97 +++++++++
 .../utils/iframe-selection-script/utils.js    |  66 ++++++
 10 files changed, 615 insertions(+), 146 deletions(-)
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script/domain-links.js
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script/extract-function-body.js
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script/init.js
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js

diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index f9f9a1ff..8cef525e 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -42,6 +42,7 @@ export function PreviewPane({
     iframeRef,
     selectedSectionId: selectedSectionId || null,
     selectedBlockId: selectedBlockId || null,
+    domain,
     onElementClick,
   });
 
diff --git a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
index 6a288ba4..cb0056c0 100644
--- a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
+++ b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
@@ -22,6 +22,7 @@ interface UseIframeSelectionParams {
   iframeRef: RefObject<HTMLIFrameElement | null>;
   selectedSectionId: string | null;
   selectedBlockId: string | null;
+  domain?: string | null;
   onElementClick?: (sectionId: string | null, blockId: string | null) => void;
 }
 
@@ -37,6 +38,7 @@ export function useIframeSelection({
   iframeRef,
   selectedSectionId,
   selectedBlockId,
+  domain,
   onElementClick,
 }: UseIframeSelectionParams) {
   const scriptInjectedRef = useRef(false);
@@ -79,7 +81,7 @@ export function useIframeSelection({
         // Crear y agregar el script
         const script = iframeDocument.createElement('script');
         script.setAttribute('data-fasttify-selection', 'true');
-        script.textContent = iframeSelectionScript;
+        script.textContent = iframeSelectionScript(domain || null);
         iframeDocument.head.appendChild(script);
 
         scriptInjectedRef.current = true;
@@ -105,7 +107,7 @@ export function useIframeSelection({
     return () => {
       iframe.removeEventListener('load', handleLoad);
     };
-  }, [iframeRef]);
+  }, [iframeRef, domain]);
 
   // Escuchar mensajes del iframe
   useEffect(() => {
@@ -152,34 +154,43 @@ export function useIframeSelection({
       const iframeWindow = iframe.contentWindow;
       if (!iframeWindow) return;
 
+      const timestamp = Date.now();
       const message = {
         type: 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT',
         sectionId: selectedSectionId,
         blockId: selectedBlockId,
+        timestamp,
       };
 
+      // Enviar inmediatamente
       try {
         iframeWindow.postMessage(message, '*');
       } catch (e) {
         // Ignorar errores silenciosamente
       }
 
-      // También intentar enviar directamente después de varios delays para asegurar que el script esté listo
-      setTimeout(function () {
+      // Guardar referencia a los timeouts para poder cancelarlos
+      const timeout1 = setTimeout(function () {
         try {
           iframeWindow.postMessage(message, '*');
         } catch (e) {
           // Ignorar errores silenciosamente
         }
-      }, 100);
+      }, 50);
 
-      setTimeout(function () {
+      const timeout2 = setTimeout(function () {
         try {
           iframeWindow.postMessage(message, '*');
         } catch (e) {
           // Ignorar errores silenciosamente
         }
-      }, 500);
+      }, 200);
+
+      // Cleanup: cancelar timeouts si el efecto se ejecuta de nuevo antes de que completen
+      return () => {
+        clearTimeout(timeout1);
+        clearTimeout(timeout2);
+      };
     } catch (error) {
       console.debug('Cannot send message to iframe (cross-origin):', error);
     }
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script.js
index 0be1b855..b1fcc98d 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script.js
@@ -15,154 +15,64 @@
  */
 
 /**
- * Script que se inyecta en el iframe para manejar la selección bidireccional
+ * @fileoverview Script que se inyecta en el iframe para manejar la selección bidireccional
  * entre el sidebar y el preview del tema.
  *
- * Este script:
+ * Este script está dividido en módulos:
+ * - constants: Constantes y estilos CSS
+ * - utils: Funciones de utilidad para encontrar elementos
+ * - selection: Funciones de selección y scroll
+ * - event-handlers: Handlers de eventos del usuario
+ * - domain-links: Configuración de enlaces con dominio
+ * - init: Inicialización y cleanup
+ *
+ * @module iframe-selection-script
+ */
+
+import { createConstantsCode } from './iframe-selection-script/constants.js';
+import { createUtilsCode } from './iframe-selection-script/utils.js';
+import { createSelectionCode } from './iframe-selection-script/selection.js';
+import { createEventHandlersCode } from './iframe-selection-script/event-handlers.js';
+import { createDomainLinksCode } from './iframe-selection-script/domain-links.js';
+import { createInitCode } from './iframe-selection-script/init.js';
+
+/**
+ * Genera el script completo de selección del iframe con el dominio de la tienda inyectado
+ *
+ * El script generado:
  * 1. Detecta clicks en elementos con data-section-id o data-block-id
  * 2. Envía postMessage al padre con el ID encontrado
  * 3. Escucha mensajes del padre para aplicar/quitar resaltado
  * 4. Aplica estilos CSS para el outline azul
+ * 5. Configura enlaces relativos con el dominio de la tienda
+ *
+ * @param {string|null} storeDomain - El dominio de la tienda a inyectar (ej: 'mystore.com')
+ * @returns {string} El script completo listo para inyectar en el iframe como string
+ *
+ * @example
+ * const script = iframeSelectionScript('mystore.com');
+ * scriptElement.textContent = script;
  */
+export function iframeSelectionScript(storeDomain) {
+  const constants = createConstantsCode(storeDomain);
+  const utils = createUtilsCode();
+  const selection = createSelectionCode();
+  const eventHandlers = createEventHandlersCode();
+  const domainLinks = createDomainLinksCode();
+  const init = createInitCode();
+
+  // Combinar todos los módulos en un IIFE
+  return `(function() {
+${constants}
+
+${utils}
 
-export const iframeSelectionScript = `(function() {
-  'use strict';
-  if (window.self === window.top) return;
-  const SELECTED_CLASS = 'fasttify-theme-studio-selected';
-  const HOVER_CLASS = 'fasttify-theme-studio-hover';
-  const style = document.createElement('style');
-  style.textContent =
-    '[data-section-id].' + SELECTED_CLASS + ',' +
-    '[data-block-id].' + SELECTED_CLASS + ' {' +
-    '  outline: 2px solid #006fbb !important;' +
-    '  outline-offset: 2px !important;' +
-    '  position: relative !important;' +
-    '}' +
-    '[data-section-id].' + HOVER_CLASS + ',' +
-    '[data-block-id].' + HOVER_CLASS + ' {' +
-    '  outline: 2px dashed #006fbb !important;' +
-    '  outline-offset: 2px !important;' +
-    '  position: relative !important;' +
-    '}';
-  document.head.appendChild(style);
-  let currentSelectedElement = null;
-  let hoveredElement = null;
-  function findSelectableElement(element) {
-    if (!element) return null;
-    let current = element;
-    while (current && current.nodeType === 1) {
-      if (current.hasAttribute && (current.hasAttribute('data-section-id') || current.hasAttribute('data-block-id'))) {
-        return current;
-      }
-      current = current.parentElement;
-    }
-    return null;
-  }
-  function getElementIds(element) {
-    return {
-      sectionId: element.getAttribute('data-section-id'),
-      blockId: element.getAttribute('data-block-id'),
-    };
-  }
-  function clearSelection() {
-    if (currentSelectedElement) {
-      currentSelectedElement.classList.remove(SELECTED_CLASS);
-      currentSelectedElement = null;
-    }
-  }
-  function selectElement(sectionId, blockId) {
-    clearSelection();
-    if (!sectionId && !blockId) return;
-    let selector = '';
-    if (blockId) {
-      selector = '[data-block-id="' + blockId + '"]';
-    } else if (sectionId) {
-      selector = '[data-section-id="' + sectionId + '"]';
-    }
-    if (selector) {
-      const element = document.querySelector(selector);
-      if (element) {
-        element.classList.add(SELECTED_CLASS);
-        currentSelectedElement = element;
-        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }
-    }
-  }
-  function handleClick(event) {
-    const target = event.target;
-    const selectableElement = findSelectableElement(target);
-    if (selectableElement) {
-      // Solo prevenir el comportamiento por defecto si el elemento clickeado es directamente el elemento seleccionable
-      // Esto permite que enlaces, botones y otros elementos interactivos funcionen normalmente
-      const isDirectSelectable = target === selectableElement;
+${selection}
 
-      // Si es un elemento interactivo (enlace, botón, input, etc.), no prevenir el comportamiento
-      const isInteractiveElement = target.tagName === 'A' ||
-                                    target.tagName === 'BUTTON' ||
-                                    target.tagName === 'INPUT' ||
-                                    target.tagName === 'SELECT' ||
-                                    target.tagName === 'TEXTAREA' ||
-                                    target.onclick ||
-                                    target.closest('a') ||
-                                    target.closest('button');
+${eventHandlers}
 
-      // Solo prevenir si es un click directo en el elemento seleccionable Y no es un elemento interactivo
-      if (isDirectSelectable && !isInteractiveElement) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
+${domainLinks}
 
-      // Siempre enviar el mensaje de selección, pero no interferir con elementos interactivos
-      const { sectionId, blockId } = getElementIds(selectableElement);
-      if (window.parent) {
-        window.parent.postMessage({
-          type: 'FASTTIFY_THEME_STUDIO_ELEMENT_CLICKED',
-          sectionId,
-          blockId,
-        }, '*');
-      }
-    }
-  }
-  function handleMouseEnter(event) {
-    const target = event.target;
-    const selectableElement = findSelectableElement(target);
-    if (selectableElement && selectableElement !== currentSelectedElement) {
-      selectableElement.classList.add(HOVER_CLASS);
-      hoveredElement = selectableElement;
-    }
-  }
-  function handleMouseLeave(event) {
-    if (hoveredElement) {
-      hoveredElement.classList.remove(HOVER_CLASS);
-      hoveredElement = null;
-    }
-  }
-  function handleMessage(event) {
-    const isLocalhost = window.location.hostname === 'localhost' ||
-                       window.location.hostname === '127.0.0.1';
-    const isSameOrigin = event.origin === window.location.origin;
-    if (!isSameOrigin && !isLocalhost) return;
-    if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT') {
-      selectElement(event.data.sectionId, event.data.blockId);
-    } else if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_CLEAR_SELECTION') {
-      clearSelection();
-    }
-  }
-  function init() {
-    document.addEventListener('click', handleClick, true);
-    document.addEventListener('mouseenter', handleMouseEnter, true);
-    document.addEventListener('mouseleave', handleMouseLeave, true);
-    window.addEventListener('message', handleMessage);
-  }
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-  window.addEventListener('beforeunload', () => {
-    document.removeEventListener('click', handleClick, true);
-    document.removeEventListener('mouseenter', handleMouseEnter, true);
-    document.removeEventListener('mouseleave', handleMouseLeave, true);
-    window.removeEventListener('message', handleMessage);
-  });
+${init}
 })();`;
+}
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
new file mode 100644
index 00000000..4c6b3a60
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { extractFunctionBody } from './extract-function-body.js';
+
+/**
+ * Constantes y configuración para el script de selección del iframe
+ * @module constants
+ */
+
+/**
+ * Función que contiene el código de inicialización de constantes y estilos CSS
+ * Esta función no se ejecuta directamente, se convierte a string para inyectar en el iframe
+ * @param {string|null} storeDomain - El dominio de la tienda
+ */
+function constantsModule(storeDomain) {
+  'use strict';
+  if (window.self === window.top) return;
+  const SELECTED_CLASS = 'fasttify-theme-studio-selected';
+  const HOVER_CLASS = 'fasttify-theme-studio-hover';
+  const STORE_DOMAIN = storeDomain;
+  const IS_LOCALHOST = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  const style = document.createElement('style');
+  style.textContent =
+    '[data-section-id].' +
+    SELECTED_CLASS +
+    ',' +
+    '[data-block-id].' +
+    SELECTED_CLASS +
+    ' {' +
+    '  outline: 2px solid #006fbb !important;' +
+    '  outline-offset: 2px !important;' +
+    '  position: relative !important;' +
+    '}' +
+    '[data-section-id].' +
+    HOVER_CLASS +
+    ',' +
+    '[data-block-id].' +
+    HOVER_CLASS +
+    ' {' +
+    '  outline: 2px dashed #006fbb !important;' +
+    '  outline-offset: 2px !important;' +
+    '  position: relative !important;' +
+    '}';
+  document.head.appendChild(style);
+  let currentSelectedElement = null;
+  let hoveredElement = null;
+  let lastSelectionTimestamp = 0;
+  let scrollAnimationFrame = null;
+}
+
+/**
+ * Extrae el código de inicialización de constantes y estilos CSS
+ * @param {string|null} storeDomain - El dominio de la tienda
+ * @returns {string} Código JavaScript que inicializa constantes y estilos
+ */
+export function createConstantsCode(storeDomain) {
+  let functionBody = extractFunctionBody(constantsModule, 'constants');
+  const domainValue = storeDomain ? JSON.stringify(storeDomain) : 'null';
+  functionBody = functionBody.replace(/const STORE_DOMAIN = storeDomain;/, `const STORE_DOMAIN = ${domainValue};`);
+  return functionBody;
+}
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/domain-links.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/domain-links.js
new file mode 100644
index 00000000..e3e35b65
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/domain-links.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { extractFunctionBody } from './extract-function-body.js';
+
+/**
+ * Funciones para modificar enlaces relativos con el dominio de la tienda
+ * @module domain-links
+ */
+
+/**
+ * Función que contiene la función setupDomainLinks
+ * Esta función no se ejecuta directamente, se convierte a string para inyectar en el iframe
+ */
+function domainLinksModule() {
+  /**
+   * Configura los enlaces relativos para mostrar el dominio completo de la tienda
+   * En localhost solo agrega tooltips, en producción modifica los hrefs
+   */
+  function setupDomainLinks() {
+    if (!STORE_DOMAIN) return;
+
+    // Modificar todos los enlaces para que muestren el dominio de la tienda en el tooltip
+    // En localhost, los enlaces relativos funcionan bien, solo agregamos el tooltip
+    // En producción, modificamos el href pero interceptamos los clicks
+    const updateLinks = function () {
+      const links = document.querySelectorAll('a[href]');
+      links.forEach(function (link) {
+        const href = link.getAttribute('href');
+        if (
+          href &&
+          !href.startsWith('http://') &&
+          !href.startsWith('https://') &&
+          !href.startsWith('mailto:') &&
+          !href.startsWith('tel:') &&
+          !href.startsWith('#')
+        ) {
+          // Guardar el href original en un data attribute si no existe
+          if (!link.hasAttribute('data-original-href')) {
+            link.setAttribute('data-original-href', href);
+          }
+
+          // Construir la URL completa con el dominio de la tienda para el tooltip
+          const fullUrl = 'https://' + STORE_DOMAIN + (href.startsWith('/') ? href : '/' + href);
+
+          // En localhost, solo agregar title para el tooltip sin modificar href
+          // En producción, modificar href para que el navegador muestre la URL completa
+          if (IS_LOCALHOST) {
+            // Solo agregar title si no tiene uno personalizado
+            if (!link.hasAttribute('title')) {
+              link.setAttribute('title', fullUrl);
+            }
+          } else {
+            // En producción, modificar el href para que el navegador muestre la URL completa
+            link.setAttribute('href', fullUrl);
+          }
+        }
+      });
+    };
+
+    // Ejecutar inmediatamente y cuando el DOM cambie
+    updateLinks();
+
+    // Observar cambios en el DOM para actualizar nuevos enlaces
+    if (typeof MutationObserver !== 'undefined') {
+      const observer = new MutationObserver(function (mutations) {
+        updateLinks();
+      });
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+/**
+ * Extrae el código de la función setupDomainLinks
+ * @returns {string} Código JavaScript con la función setupDomainLinks
+ */
+export function createDomainLinksCode() {
+  return extractFunctionBody(domainLinksModule, 'domain links');
+}
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
new file mode 100644
index 00000000..760a6d8e
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
@@ -0,0 +1,124 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { extractFunctionBody } from './extract-function-body.js';
+
+/**
+ * Handlers de eventos para interactividad del usuario y comunicación con el padre
+ * @module event-handlers
+ */
+
+/**
+ * Función que contiene los handlers de eventos
+ * Esta función no se ejecuta directamente, se convierte a string para inyectar en el iframe
+ */
+function eventHandlersModule() {
+  /**
+   * Maneja los clicks en elementos seleccionables
+   * Permite que elementos interactivos (enlaces, botones) funcionen normalmente
+   * mientras envía mensajes de selección al padre
+   * @param {MouseEvent} event - El evento de click
+   */
+  function handleClick(event) {
+    const target = event.target;
+    const selectableElement = findSelectableElement(target);
+
+    if (selectableElement) {
+      // Solo prevenir el comportamiento por defecto si el elemento clickeado es directamente el elemento seleccionable
+      // Esto permite que enlaces, botones y otros elementos interactivos funcionen normalmente
+      const isDirectSelectable = target === selectableElement;
+
+      // Si es un elemento interactivo (enlace, botón, input, etc.), no prevenir el comportamiento
+      const isInteractiveElement =
+        target.tagName === 'A' ||
+        target.tagName === 'BUTTON' ||
+        target.tagName === 'INPUT' ||
+        target.tagName === 'SELECT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.onclick ||
+        target.closest('a') ||
+        target.closest('button');
+
+      // Solo prevenir si es un click directo en el elemento seleccionable Y no es un elemento interactivo
+      if (isDirectSelectable && !isInteractiveElement) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      // Siempre enviar el mensaje de selección, pero no interferir con elementos interactivos
+      const { sectionId, blockId } = getElementIds(selectableElement);
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            type: 'FASTTIFY_THEME_STUDIO_ELEMENT_CLICKED',
+            sectionId,
+            blockId,
+          },
+          '*'
+        );
+      }
+    }
+  }
+
+  /**
+   * Maneja el evento mouseenter para mostrar el estado hover
+   * @param {MouseEvent} event - El evento mouseenter
+   */
+  function handleMouseEnter(event) {
+    const target = event.target;
+    const selectableElement = findSelectableElement(target);
+    if (selectableElement && selectableElement !== currentSelectedElement) {
+      selectableElement.classList.add(HOVER_CLASS);
+      hoveredElement = selectableElement;
+    }
+  }
+
+  /**
+   * Maneja el evento mouseleave para remover el estado hover
+   * @param {MouseEvent} event - El evento mouseleave
+   */
+  function handleMouseLeave(event) {
+    if (hoveredElement) {
+      hoveredElement.classList.remove(HOVER_CLASS);
+      hoveredElement = null;
+    }
+  }
+
+  /**
+   * Maneja los mensajes recibidos del window padre
+   * Escucha comandos de selección y limpieza de selección
+   * @param {MessageEvent} event - El evento de mensaje
+   */
+  function handleMessage(event) {
+    const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+    const isSameOrigin = event.origin === window.location.origin;
+    if (!isSameOrigin && !isLocalhost) return;
+    if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT') {
+      selectElement(event.data.sectionId, event.data.blockId, event.data.timestamp);
+    } else if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_CLEAR_SELECTION') {
+      clearSelection();
+      lastSelectionTimestamp = 0;
+    }
+  }
+}
+
+/**
+ * Extrae el código de los handlers de eventos
+ * @returns {string} Código JavaScript con los handlers de eventos
+ */
+export function createEventHandlersCode() {
+  return extractFunctionBody(eventHandlersModule, 'event handlers');
+}
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/extract-function-body.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/extract-function-body.js
new file mode 100644
index 00000000..a2e253b1
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/extract-function-body.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Extrae el cuerpo de una función como string, removiendo la declaración de función
+ * @param {Function} fn - La función de la cual extraer el cuerpo
+ * @param {string} moduleName - Nombre del módulo para mensajes de error descriptivos
+ * @returns {string} El cuerpo de la función como string
+ * @throws {Error} Si no se puede extraer el cuerpo de la función
+ */
+export function extractFunctionBody(fn, moduleName) {
+  const functionString = fn.toString();
+  const bodyMatch = functionString.match(/^function\s+\w+\s*\([^)]*\)\s*\{([\s\S]*)\}\s*$/);
+  if (!bodyMatch) {
+    throw new Error(`Cannot extract ${moduleName} module body`);
+  }
+  return bodyMatch[1];
+}
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/init.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/init.js
new file mode 100644
index 00000000..e3024e5c
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/init.js
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { extractFunctionBody } from './extract-function-body.js';
+
+/**
+ * Código de inicialización y cleanup del script
+ * @module init
+ */
+
+/**
+ * Función que contiene el código de inicialización
+ * Esta función no se ejecuta directamente, se convierte a string para inyectar en el iframe
+ */
+function initModule() {
+  /**
+   * Inicializa los event listeners y configura los enlaces de dominio
+   */
+  function init() {
+    document.addEventListener('click', handleClick, true);
+    document.addEventListener('mouseenter', handleMouseEnter, true);
+    document.addEventListener('mouseleave', handleMouseLeave, true);
+    window.addEventListener('message', handleMessage);
+    setupDomainLinks();
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+  window.addEventListener('beforeunload', () => {
+    document.removeEventListener('click', handleClick, true);
+    document.removeEventListener('mouseenter', handleMouseEnter, true);
+    document.removeEventListener('mouseleave', handleMouseLeave, true);
+    window.removeEventListener('message', handleMessage);
+  });
+}
+
+/**
+ * Extrae el código de inicialización y cleanup
+ * @returns {string} Código JavaScript con la función init y su ejecución
+ */
+export function createInitCode() {
+  return extractFunctionBody(initModule, 'init');
+}
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
new file mode 100644
index 00000000..35be6792
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
@@ -0,0 +1,97 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { extractFunctionBody } from './extract-function-body.js';
+
+/**
+ * Funciones para manejar la selección de elementos en el iframe
+ * @module selection
+ */
+
+/**
+ * Función que contiene las funciones de selección
+ * Esta función no se ejecuta directamente, se convierte a string para inyectar en el iframe
+ */
+function selectionModule() {
+  /**
+   * Limpia la selección actual removiendo la clase de selección del elemento
+   */
+  function clearSelection() {
+    if (currentSelectedElement) {
+      currentSelectedElement.classList.remove(SELECTED_CLASS);
+      currentSelectedElement = null;
+    }
+  }
+
+  /**
+   * Selecciona un elemento por su sectionId o blockId y hace scroll suave hacia él
+   * @param {string|null} sectionId - ID de la sección a seleccionar
+   * @param {string|null} blockId - ID del bloque a seleccionar
+   * @param {number} [timestamp] - Timestamp para ignorar mensajes obsoletos
+   */
+  function selectElement(sectionId, blockId, timestamp) {
+    // Ignorar mensajes obsoletos
+    if (timestamp && timestamp < lastSelectionTimestamp) {
+      return;
+    }
+
+    if (timestamp) {
+      lastSelectionTimestamp = timestamp;
+    } else {
+      lastSelectionTimestamp = Date.now();
+    }
+
+    clearSelection();
+    if (!sectionId && !blockId) return;
+    let selector = '';
+    if (blockId) {
+      selector = '[data-block-id="' + blockId + '"]';
+    } else if (sectionId) {
+      selector = '[data-section-id="' + sectionId + '"]';
+    }
+    if (selector) {
+      const element = document.querySelector(selector);
+      if (element) {
+        element.classList.add(SELECTED_CLASS);
+        currentSelectedElement = element;
+
+        // Cancelar scroll anterior si hay uno pendiente
+        if (scrollAnimationFrame !== null) {
+          cancelAnimationFrame(scrollAnimationFrame);
+          scrollAnimationFrame = null;
+        }
+
+        // Usar requestAnimationFrame para mejor sincronización con el navegador
+        // y asegurar scroll suave incluso con selecciones rápidas
+        scrollAnimationFrame = requestAnimationFrame(function () {
+          scrollAnimationFrame = null;
+          element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          });
+        });
+      }
+    }
+  }
+}
+
+/**
+ * Extrae el código de las funciones de selección
+ * @returns {string} Código JavaScript con las funciones de selección
+ */
+export function createSelectionCode() {
+  return extractFunctionBody(selectionModule, 'selection');
+}
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js
new file mode 100644
index 00000000..bea383c5
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { extractFunctionBody } from './extract-function-body.js';
+
+/**
+ * Funciones de utilidad para encontrar y obtener información de elementos seleccionables
+ * @module utils
+ */
+
+/**
+ * Función que contiene las funciones de utilidad
+ * Esta función no se ejecuta directamente, se convierte a string para inyectar en el iframe
+ */
+function utilsModule() {
+  /**
+   * Busca el elemento seleccionable más cercano (con data-section-id o data-block-id)
+   * subiendo en el árbol DOM desde el elemento dado
+   * @param {Element|null} element - El elemento desde donde comenzar la búsqueda
+   * @returns {Element|null} El elemento seleccionable encontrado o null
+   */
+  function findSelectableElement(element) {
+    if (!element) return null;
+    let current = element;
+    while (current && current.nodeType === 1) {
+      if (current.hasAttribute && (current.hasAttribute('data-section-id') || current.hasAttribute('data-block-id'))) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  /**
+   * Extrae los IDs de sección y bloque de un elemento
+   * @param {Element} element - El elemento del cual extraer los IDs
+   * @returns {{sectionId: string|null, blockId: string|null}} Objeto con sectionId y blockId
+   */
+  function getElementIds(element) {
+    return {
+      sectionId: element.getAttribute('data-section-id'),
+      blockId: element.getAttribute('data-block-id'),
+    };
+  }
+}
+
+/**
+ * Extrae el código de las funciones de utilidad
+ * @returns {string} Código JavaScript con las funciones de utilidad
+ */
+export function createUtilsCode() {
+  return extractFunctionBody(utilsModule, 'utils');
+}

From 3f072fc703b150c558fcce6b523943039f3f4bbf Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Mon, 3 Nov 2025 14:04:17 -0500
Subject: [PATCH 22/49] Enhance ThemeStudio and SettingsPane with image
 selector component integration

This commit introduces an image selector component to the ThemeStudio and SettingsPane, allowing users to select images more effectively. The ThemeStudio component now accepts an imageSelectorComponent prop, which is utilized in the SettingsPane for improved image management. Additionally, the SettingsPane has been refactored to handle grouped settings and local state synchronization, enhancing the overall user experience and functionality.
---
 app/store/[slug]/studio/studioClient.tsx      |  40 ++++-
 .../presentation/components/ThemeStudio.tsx   |  16 +-
 .../components/settings/SettingField.tsx      | 149 +++++++++++++++++
 .../components/settings/SettingsGroup.tsx     |  60 +++++++
 .../components/settings/SettingsPane.tsx      | 151 ++++++++++++++++--
 .../settings/form-fields/CheckboxSetting.tsx  |  39 +++++
 .../settings/form-fields/ColorSetting.tsx     |  65 ++++++++
 .../settings/form-fields/HeaderSetting.tsx    |  36 +++++
 .../form-fields/ImagePickerSetting.tsx        | 122 ++++++++++++++
 .../settings/form-fields/ParagraphSetting.tsx |  31 ++++
 .../settings/form-fields/RangeSetting.tsx     |  98 ++++++++++++
 .../settings/form-fields/SelectSetting.tsx    |  47 ++++++
 .../settings/form-fields/TextSetting.tsx      |  50 ++++++
 .../settings/form-fields/TextareaSetting.tsx  |  52 ++++++
 .../settings/form-fields/UrlSetting.tsx       |  51 ++++++
 .../components/settings/form-fields/index.ts  |  26 +++
 .../presentation/hooks/useSelectedSection.ts  | 143 +++++++++++++++++
 .../hooks/useUpdateSectionSettings.ts         | 112 +++++++++++++
 18 files changed, 1275 insertions(+), 13 deletions(-)
 create mode 100644 packages/theme-studio/src/presentation/components/settings/SettingField.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/SettingsGroup.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/CheckboxSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/ColorSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/HeaderSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/ImagePickerSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/ParagraphSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/RangeSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/SelectSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/TextSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/TextareaSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/UrlSetting.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/settings/form-fields/index.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useUpdateSectionSettings.ts

diff --git a/app/store/[slug]/studio/studioClient.tsx b/app/store/[slug]/studio/studioClient.tsx
index 5009cbfe..808b125e 100644
--- a/app/store/[slug]/studio/studioClient.tsx
+++ b/app/store/[slug]/studio/studioClient.tsx
@@ -3,9 +3,10 @@
 import { useParams, usePathname } from 'next/navigation';
 import { getStoreId } from '@/utils/client/store-utils';
 import { ThemeStudio } from '@fasttify/theme-studio';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useStore } from '@/app/store/hooks/data/useStore/useStore';
 import { Loading } from '@shopify/polaris';
+import { ImageSelectorModal, type S3Image } from '@/app/store/components/images-selector';
 
 export default function StudioClient() {
   const pathname = usePathname();
@@ -19,9 +20,44 @@ export default function StudioClient() {
     return currentStore.defaultDomain || null;
   }, [currentStore]);
 
+  const imageSelectorComponent = useCallback(
+    (props: {
+      open: boolean;
+      onOpenChange: (open: boolean) => void;
+      onSelect?: (image: { url: string } | null) => void;
+      initialSelectedImage?: string | null;
+    }) => {
+      const handleSelect = (images: S3Image | S3Image[] | null) => {
+        if (!props.onSelect) return;
+
+        if (images === null) {
+          props.onSelect(null);
+          return;
+        }
+
+        // Si es un array, tomar la primera imagen
+        const selectedImage = Array.isArray(images) ? images[0] : images;
+        props.onSelect({ url: selectedImage.url });
+      };
+
+      return (
+        <ImageSelectorModal
+          open={props.open}
+          onOpenChange={props.onOpenChange}
+          onSelect={handleSelect}
+          initialSelectedImage={props.initialSelectedImage || null}
+          allowMultipleSelection={false}
+        />
+      );
+    },
+    []
+  );
+
   if (loading || !domain) {
     return <Loading />;
   }
 
-  return <ThemeStudio storeId={storeId} apiBaseUrl="/api" domain={domain} />;
+  return (
+    <ThemeStudio storeId={storeId} apiBaseUrl="/api" domain={domain} imageSelectorComponent={imageSelectorComponent} />
+  );
 }
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index c5f148dc..4ebd9b7c 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -17,9 +17,15 @@ export interface ThemeStudioProps {
   storeId: string;
   apiBaseUrl: string;
   domain: string | null;
+  imageSelectorComponent?: (props: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSelect?: (image: { url: string } | null) => void;
+    initialSelectedImage?: string | null;
+  }) => React.ReactElement | null;
 }
 
-export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
+export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponent }: ThemeStudioProps) {
   const [device, setDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
   const [currentPath, setCurrentPath] = useState('/');
   const [currentPageId, setCurrentPageId] = useState('index');
@@ -96,7 +102,13 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain }: ThemeStudioProps) {
             />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'auto' }}>
-            <SettingsPane storeId={storeId} />
+            <SettingsPane
+              storeId={storeId}
+              apiBaseUrl={apiBaseUrl}
+              currentPageId={currentPageId}
+              sidebarState={sidebarState}
+              imageSelectorComponent={imageSelectorComponent}
+            />
           </div>
         </div>
       </div>
diff --git a/packages/theme-studio/src/presentation/components/settings/SettingField.tsx b/packages/theme-studio/src/presentation/components/settings/SettingField.tsx
new file mode 100644
index 00000000..d75e0034
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/SettingField.tsx
@@ -0,0 +1,149 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import {
+  TextSetting,
+  TextareaSetting,
+  ColorSetting,
+  RangeSetting,
+  CheckboxSetting,
+  SelectSetting,
+  UrlSetting,
+  ImagePickerSetting,
+  HeaderSetting,
+  ParagraphSetting,
+} from './form-fields';
+
+interface SettingFieldProps {
+  setting: any;
+  value: any;
+  onChange: (value: any) => void;
+  imageSelectorComponent?: (props: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSelect?: (image: { url: string } | null) => void;
+    initialSelectedImage?: string | null;
+  }) => React.ReactElement | null;
+}
+
+export function SettingField({ setting, value, onChange, imageSelectorComponent }: SettingFieldProps) {
+  const { type, id, label, default: defaultValue, info, options, min, max, step, unit, placeholder, content } = setting;
+
+  // Obtener el valor actual o usar el default
+  const currentValue = value !== undefined && value !== null ? value : defaultValue;
+
+  switch (type) {
+    case 'header':
+      return <HeaderSetting content={content || label} />;
+
+    case 'paragraph':
+      return <ParagraphSetting content={content || ''} />;
+
+    case 'text':
+      return (
+        <TextSetting
+          id={id}
+          label={label}
+          value={currentValue || ''}
+          onChange={onChange}
+          placeholder={placeholder}
+          info={info}
+        />
+      );
+
+    case 'textarea':
+      return (
+        <TextareaSetting
+          id={id}
+          label={label}
+          value={currentValue || ''}
+          onChange={onChange}
+          placeholder={placeholder}
+          info={info}
+        />
+      );
+
+    case 'color':
+      return <ColorSetting id={id} label={label} value={currentValue || '#000000'} onChange={onChange} info={info} />;
+
+    case 'range':
+      return (
+        <RangeSetting
+          id={id}
+          label={label}
+          value={currentValue ?? defaultValue ?? min ?? 0}
+          onChange={onChange}
+          min={min ?? 0}
+          max={max ?? 100}
+          step={step}
+          unit={unit}
+          info={info}
+        />
+      );
+
+    case 'checkbox':
+      return (
+        <CheckboxSetting
+          id={id}
+          label={label}
+          value={currentValue ?? defaultValue ?? false}
+          onChange={onChange}
+          info={info}
+        />
+      );
+
+    case 'select':
+      return (
+        <SelectSetting
+          id={id}
+          label={label}
+          value={currentValue || ''}
+          onChange={onChange}
+          options={options || []}
+          info={info}
+        />
+      );
+
+    case 'url':
+      return (
+        <UrlSetting
+          id={id}
+          label={label}
+          value={currentValue || ''}
+          onChange={onChange}
+          placeholder={placeholder}
+          info={info}
+        />
+      );
+
+    case 'image_picker':
+      return (
+        <ImagePickerSetting
+          id={id}
+          label={label}
+          value={currentValue}
+          onChange={onChange}
+          info={info}
+          imageSelectorComponent={imageSelectorComponent}
+        />
+      );
+
+    default:
+      return null;
+  }
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/SettingsGroup.tsx b/packages/theme-studio/src/presentation/components/settings/SettingsGroup.tsx
new file mode 100644
index 00000000..176483d3
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/SettingsGroup.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { BlockStack } from '@shopify/polaris';
+import { SettingField } from './SettingField';
+
+interface SettingsGroupProps {
+  settings: any[];
+  currentSettings: Record<string, any>;
+  onSettingChange: (settingId: string, value: any) => void;
+  imageSelectorComponent?: (props: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSelect?: (image: { url: string } | null) => void;
+    initialSelectedImage?: string | null;
+  }) => React.ReactElement | null;
+}
+
+export function SettingsGroup({
+  settings,
+  currentSettings,
+  onSettingChange,
+  imageSelectorComponent,
+}: SettingsGroupProps) {
+  return (
+    <BlockStack gap="400">
+      {settings.map((setting) => {
+        const value = currentSettings[setting.id];
+        return (
+          <SettingField
+            key={setting.id || `setting-${settings.indexOf(setting)}`}
+            setting={setting}
+            value={value}
+            onChange={(newValue) => {
+              if (setting.id) {
+                onSettingChange(setting.id, newValue);
+              }
+            }}
+            imageSelectorComponent={imageSelectorComponent}
+          />
+        );
+      })}
+    </BlockStack>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
index 48ce87f3..5b8a547e 100644
--- a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
+++ b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
@@ -1,29 +1,162 @@
 /*
- * Theme Studio - Presentación
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
 'use client';
 
-import { Card, BlockStack, Text, Button, Box, Scrollable } from '@shopify/polaris';
+import { Card, BlockStack, Text, Button, Box, Scrollable, InlineStack } from '@shopify/polaris';
+import { useSelectedSection } from '../../hooks/useSelectedSection';
+import type { UseSidebarStateResult } from '../../hooks/useSidebarState';
+import { SettingsGroup } from './SettingsGroup';
+import { useMemo, useState, useCallback, useEffect } from 'react';
 
 interface SettingsPaneProps {
   storeId: string;
+  apiBaseUrl: string;
+  currentPageId: string;
+  sidebarState: UseSidebarStateResult;
+  imageSelectorComponent?: (props: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSelect?: (image: { url: string } | null) => void;
+    initialSelectedImage?: string | null;
+  }) => React.ReactElement | null;
 }
 
-export function SettingsPane({ storeId }: SettingsPaneProps) {
+export function SettingsPane({
+  storeId,
+  apiBaseUrl,
+  currentPageId,
+  sidebarState,
+  imageSelectorComponent,
+}: SettingsPaneProps) {
+  const { section, block, schema, currentSettings } = useSelectedSection({
+    storeId,
+    apiBaseUrl,
+    currentPageId,
+    selectedSectionId: sidebarState.selectedSectionId,
+    selectedBlockId: sidebarState.selectedBlockId,
+  });
+
+  const [localSettings, setLocalSettings] = useState<Record<string, any>>(currentSettings);
+
+  // Agrupar settings por headers
+  const groupedSettings = useMemo(() => {
+    if (!schema?.settings) {
+      return [];
+    }
+
+    const groups: Array<{ header?: any; settings: any[] }> = [];
+    let currentGroup: { header?: any; settings: any[] } = { settings: [] };
+
+    for (const setting of schema.settings) {
+      if (setting.type === 'header') {
+        // Guardar grupo anterior si tiene settings
+        if (currentGroup.settings.length > 0) {
+          groups.push(currentGroup);
+        }
+        // Crear nuevo grupo con header
+        currentGroup = { header: setting, settings: [] };
+      } else {
+        // Agregar setting al grupo actual
+        currentGroup.settings.push(setting);
+      }
+    }
+
+    // Agregar el último grupo si tiene settings
+    if (currentGroup.settings.length > 0) {
+      groups.push(currentGroup);
+    }
+
+    return groups;
+  }, [schema]);
+
+  // Sincronizar localSettings con currentSettings cuando cambian
+  useEffect(() => {
+    setLocalSettings(currentSettings);
+  }, [currentSettings]);
+
+  const handleSettingChange = useCallback((settingId: string, value: any) => {
+    setLocalSettings((prev) => ({
+      ...prev,
+      [settingId]: value,
+    }));
+  }, []);
+
+  const handleRemoveBlock = useCallback(() => {
+    if (!section || !block) return;
+
+    // TODO: Implementar eliminación de bloque
+    console.log('Remove block:', block.id);
+  }, [section, block]);
+
+  if (!sidebarState.selectedSectionId) {
+    return (
+      <div>
+        <Box padding="200">
+          <Card padding="300">
+            <BlockStack gap="300">
+              <Text as="h2" variant="headingMd">
+                Ajustes
+              </Text>
+              <Box padding="200">
+                <Text as="p" variant="bodyMd" tone="subdued">
+                  Selecciona una sección o bloque para editar sus ajustes
+                </Text>
+              </Box>
+            </BlockStack>
+          </Card>
+        </Box>
+      </div>
+    );
+  }
+
+  const displayName = block ? block.type : section?.name || 'Sección';
+
   return (
     <div>
       <Box padding="200">
         <Card padding="300">
           <BlockStack gap="300">
-            <Text as="h2" variant="headingMd">
-              Ajustes
-            </Text>
+            <InlineStack align="space-between" blockAlign="center">
+              <Text as="h2" variant="headingMd">
+                {displayName}
+              </Text>
+              {block && (
+                <Button variant="plain" tone="critical" onClick={handleRemoveBlock}>
+                  Eliminar bloque
+                </Button>
+              )}
+            </InlineStack>
             <Scrollable style={{ height: 'calc(100vh - 160px)' }}>
               <Box padding="200">
-                {/* Aquí irán los formularios generados desde el schema de la sección seleccionada */}
-                <BlockStack gap="200">
-                  <Button variant="primary">Guardar</Button>
+                <BlockStack gap="400">
+                  {groupedSettings.map((group, index) => (
+                    <SettingsGroup
+                      key={index}
+                      settings={group.header ? [group.header, ...group.settings] : group.settings}
+                      currentSettings={localSettings}
+                      onSettingChange={handleSettingChange}
+                      imageSelectorComponent={imageSelectorComponent}
+                    />
+                  ))}
+                  {groupedSettings.length === 0 && (
+                    <Text as="p" variant="bodyMd" tone="subdued">
+                      No hay ajustes disponibles para esta sección
+                    </Text>
+                  )}
                 </BlockStack>
               </Box>
             </Scrollable>
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/CheckboxSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/CheckboxSetting.tsx
new file mode 100644
index 00000000..ca78c8d4
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/CheckboxSetting.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Checkbox } from '@shopify/polaris';
+import { useCallback } from 'react';
+
+interface CheckboxSettingProps {
+  id: string;
+  label: string;
+  value: boolean;
+  onChange: (value: boolean) => void;
+  info?: string;
+}
+
+export function CheckboxSetting({ id, label, value, onChange, info }: CheckboxSettingProps) {
+  const handleChange = useCallback(
+    (newValue: boolean) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  return <Checkbox id={id} label={label} checked={value} onChange={handleChange} helpText={info} />;
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/ColorSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/ColorSetting.tsx
new file mode 100644
index 00000000..32796b45
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/ColorSetting.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { TextField, BlockStack, Box } from '@shopify/polaris';
+import { useCallback } from 'react';
+
+interface ColorSettingProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  info?: string;
+}
+
+export function ColorSetting({ id, label, value, onChange, info }: ColorSettingProps) {
+  const handleChange = useCallback(
+    (newValue: string) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  return (
+    <BlockStack gap="200">
+      <TextField
+        id={id}
+        label={label}
+        value={value}
+        onChange={handleChange}
+        helpText={info}
+        autoComplete="off"
+        prefix={
+          <Box
+            style={{
+              width: '24px',
+              height: '24px',
+              borderRadius: '4px',
+              backgroundColor: value || '#000000',
+              border: '1px solid #e1e3e5',
+              cursor: 'pointer',
+            }}
+            onClick={() => {
+              // TODO: Abrir color picker
+            }}
+          />
+        }
+      />
+    </BlockStack>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/HeaderSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/HeaderSetting.tsx
new file mode 100644
index 00000000..3f517172
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/HeaderSetting.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Text, Divider } from '@shopify/polaris';
+
+interface HeaderSettingProps {
+  content: string;
+}
+
+export function HeaderSetting({ content }: HeaderSettingProps) {
+  return (
+    <div>
+      <Text as="h3" variant="headingSm" fontWeight="semibold">
+        {content}
+      </Text>
+      <div style={{ marginTop: '8px', marginBottom: '8px' }}>
+        <Divider borderColor="border" />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/ImagePickerSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/ImagePickerSetting.tsx
new file mode 100644
index 00000000..6753f600
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/ImagePickerSetting.tsx
@@ -0,0 +1,122 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { BlockStack, Button, Text } from '@shopify/polaris';
+import { useCallback, useState, type ReactElement } from 'react';
+
+interface ImageSelectorComponentProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect?: (image: { url: string } | null) => void;
+  initialSelectedImage?: string | null;
+}
+
+interface ImagePickerSettingProps {
+  id: string;
+  label: string;
+  value: string | null;
+  onChange: (value: string | null) => void;
+  info?: string;
+  imageSelectorComponent?: (props: ImageSelectorComponentProps) => ReactElement | null;
+}
+
+export function ImagePickerSetting({
+  id,
+  label,
+  value,
+  onChange,
+  info,
+  imageSelectorComponent,
+}: ImagePickerSettingProps) {
+  const [isSelectorOpen, setIsSelectorOpen] = useState(false);
+
+  const handleSelectImage = useCallback(() => {
+    if (imageSelectorComponent) {
+      setIsSelectorOpen(true);
+    } else {
+      // Fallback si no hay componente de selector
+      onChange('/images/placeholder.jpg');
+    }
+  }, [imageSelectorComponent, onChange]);
+
+  const handleImageSelect = useCallback(
+    (image: { url: string } | null) => {
+      onChange(image?.url || null);
+      setIsSelectorOpen(false);
+    },
+    [onChange]
+  );
+
+  const handleRemoveImage = useCallback(() => {
+    onChange(null);
+  }, [onChange]);
+
+  return (
+    <BlockStack gap="200">
+      <Text as="p" variant="bodyMd" fontWeight="medium">
+        {label}
+      </Text>
+      {info && (
+        <Text as="p" variant="bodySm" tone="subdued">
+          {info}
+        </Text>
+      )}
+      {value ? (
+        <BlockStack gap="200">
+          <div
+            style={{
+              width: '100%',
+              aspectRatio: '16/9',
+              backgroundColor: '#f6f6f7',
+              borderRadius: '8px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              overflow: 'hidden',
+            }}>
+            <img
+              src={value}
+              alt={label}
+              style={{
+                maxWidth: '100%',
+                maxHeight: '100%',
+                objectFit: 'contain',
+              }}
+            />
+          </div>
+          <Button onClick={handleRemoveImage} variant="secondary">
+            Eliminar imagen
+          </Button>
+        </BlockStack>
+      ) : (
+        <>
+          <Button onClick={handleSelectImage} variant="secondary">
+            Seleccionar imagen
+          </Button>
+          {imageSelectorComponent &&
+            imageSelectorComponent({
+              open: isSelectorOpen,
+              onOpenChange: setIsSelectorOpen,
+              onSelect: handleImageSelect,
+              initialSelectedImage: value,
+            })}
+        </>
+      )}
+    </BlockStack>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/ParagraphSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/ParagraphSetting.tsx
new file mode 100644
index 00000000..6baef043
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/ParagraphSetting.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Text } from '@shopify/polaris';
+
+interface ParagraphSettingProps {
+  content: string;
+}
+
+export function ParagraphSetting({ content }: ParagraphSettingProps) {
+  return (
+    <Text as="p" variant="bodySm" tone="subdued">
+      {content}
+    </Text>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/RangeSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/RangeSetting.tsx
new file mode 100644
index 00000000..bd3c2d5c
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/RangeSetting.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { TextField, BlockStack, Text, Box } from '@shopify/polaris';
+import { useCallback } from 'react';
+
+interface RangeSettingProps {
+  id: string;
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  info?: string;
+}
+
+export function RangeSetting({ id, label, value, onChange, min, max, step = 1, unit, info }: RangeSettingProps) {
+  const handleRangeChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = Number.parseFloat(e.target.value);
+      if (!Number.isNaN(newValue)) {
+        onChange(newValue);
+      }
+    },
+    [onChange]
+  );
+
+  const handleTextFieldChange = useCallback(
+    (newValue: string) => {
+      const numValue = Number.parseFloat(newValue);
+      if (!Number.isNaN(numValue) && numValue >= min && numValue <= max) {
+        onChange(numValue);
+      }
+    },
+    [onChange, min, max]
+  );
+
+  return (
+    <BlockStack gap="200">
+      <Text as="p" variant="bodyMd" fontWeight="medium">
+        {label}
+      </Text>
+      {info && (
+        <Text as="p" variant="bodySm" tone="subdued">
+          {info}
+        </Text>
+      )}
+      <Box>
+        <input
+          type="range"
+          id={id}
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={handleRangeChange}
+          style={{
+            width: '100%',
+            height: '8px',
+            borderRadius: '4px',
+            background: '#e1e3e5',
+            outline: 'none',
+            cursor: 'pointer',
+          }}
+        />
+      </Box>
+      <TextField
+        id={`${id}-input`}
+        label=""
+        type="number"
+        value={value.toString()}
+        onChange={handleTextFieldChange}
+        min={min}
+        max={max}
+        step={step}
+        suffix={unit}
+        autoComplete="off"
+      />
+    </BlockStack>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/SelectSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/SelectSetting.tsx
new file mode 100644
index 00000000..f0988fc3
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/SelectSetting.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Select } from '@shopify/polaris';
+import { useCallback, useMemo } from 'react';
+
+interface SelectSettingProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: Array<{ label: string; value: string }>;
+  info?: string;
+}
+
+export function SelectSetting({ id, label, value, onChange, options, info }: SelectSettingProps) {
+  const handleChange = useCallback(
+    (newValue: string) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  const selectOptions = useMemo(() => {
+    return options.map((opt) => ({
+      label: opt.label,
+      value: opt.value,
+    }));
+  }, [options]);
+
+  return <Select id={id} label={label} options={selectOptions} value={value} onChange={handleChange} helpText={info} />;
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/TextSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/TextSetting.tsx
new file mode 100644
index 00000000..b0bec915
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/TextSetting.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { TextField } from '@shopify/polaris';
+import { useCallback } from 'react';
+
+interface TextSettingProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  info?: string;
+}
+
+export function TextSetting({ id, label, value, onChange, placeholder, info }: TextSettingProps) {
+  const handleChange = useCallback(
+    (newValue: string) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  return (
+    <TextField
+      id={id}
+      label={label}
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder}
+      helpText={info}
+      autoComplete="off"
+    />
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/TextareaSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/TextareaSetting.tsx
new file mode 100644
index 00000000..51287eec
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/TextareaSetting.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { TextField } from '@shopify/polaris';
+import { useCallback } from 'react';
+
+interface TextareaSettingProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  info?: string;
+  rows?: number;
+}
+
+export function TextareaSetting({ id, label, value, onChange, placeholder, info, rows = 4 }: TextareaSettingProps) {
+  const handleChange = useCallback(
+    (newValue: string) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  return (
+    <TextField
+      id={id}
+      label={label}
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder}
+      helpText={info}
+      multiline={rows}
+      autoComplete="off"
+    />
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/UrlSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/UrlSetting.tsx
new file mode 100644
index 00000000..8062ce57
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/UrlSetting.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { TextField } from '@shopify/polaris';
+import { useCallback } from 'react';
+
+interface UrlSettingProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  info?: string;
+}
+
+export function UrlSetting({ id, label, value, onChange, placeholder, info }: UrlSettingProps) {
+  const handleChange = useCallback(
+    (newValue: string) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  return (
+    <TextField
+      id={id}
+      label={label}
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder || '/collections/...'}
+      helpText={info}
+      autoComplete="off"
+      type="url"
+    />
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/index.ts b/packages/theme-studio/src/presentation/components/settings/form-fields/index.ts
new file mode 100644
index 00000000..f4ab4a03
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/index.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { TextSetting } from './TextSetting';
+export { TextareaSetting } from './TextareaSetting';
+export { ColorSetting } from './ColorSetting';
+export { RangeSetting } from './RangeSetting';
+export { CheckboxSetting } from './CheckboxSetting';
+export { SelectSetting } from './SelectSetting';
+export { UrlSetting } from './UrlSetting';
+export { ImagePickerSetting } from './ImagePickerSetting';
+export { HeaderSetting } from './HeaderSetting';
+export { ParagraphSetting } from './ParagraphSetting';
diff --git a/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts b/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
new file mode 100644
index 00000000..19fed83c
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
@@ -0,0 +1,143 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo } from 'react';
+import { useTemplateStructure } from './useTemplateStructure';
+import { useLayoutStructure } from './useLayoutStructure';
+import type { TemplateSection } from './useTemplateStructure';
+
+export interface SelectedSectionData {
+  section: TemplateSection | null;
+  block: {
+    id: string;
+    type: string;
+    settings: Record<string, any>;
+  } | null;
+  schema: {
+    settings: any[];
+    blocks: any[];
+  } | null;
+  currentSettings: Record<string, any>;
+}
+
+interface UseSelectedSectionParams {
+  storeId: string | undefined;
+  apiBaseUrl: string;
+  currentPageId: string;
+  selectedSectionId: string | null;
+  selectedBlockId: string | null;
+}
+
+export function useSelectedSection({
+  storeId,
+  apiBaseUrl,
+  currentPageId,
+  selectedSectionId,
+  selectedBlockId,
+}: UseSelectedSectionParams): SelectedSectionData {
+  const { template } = useTemplateStructure({
+    storeId,
+    apiBaseUrl,
+    pageType: currentPageId,
+  });
+
+  const { layout } = useLayoutStructure({
+    storeId,
+    apiBaseUrl,
+  });
+
+  return useMemo(() => {
+    if (!selectedSectionId) {
+      return {
+        section: null,
+        block: null,
+        schema: null,
+        currentSettings: {},
+      };
+    }
+
+    // Buscar en template sections
+    let section = template?.sections.find((s) => s.id === selectedSectionId) || null;
+
+    // Si no está en template, buscar en layout (header/footer)
+    if (!section) {
+      const allLayoutSections = [...(layout?.header?.sections || []), ...(layout?.footer?.sections || [])];
+      const layoutSection = allLayoutSections.find((s) => s.id === selectedSectionId);
+      if (layoutSection) {
+        section = {
+          id: layoutSection.id,
+          type: layoutSection.type,
+          name: layoutSection.name,
+          settings: {},
+          blocks: [],
+          schema: layoutSection.schema,
+        } as TemplateSection;
+      }
+    }
+
+    if (!section) {
+      return {
+        section: null,
+        block: null,
+        schema: null,
+        currentSettings: {},
+      };
+    }
+
+    // Si hay un bloque seleccionado, obtener sus datos
+    let block = null;
+    if (selectedBlockId && section.blocks) {
+      const foundBlock = section.blocks.find((b: any) => b.id === selectedBlockId);
+      if (foundBlock) {
+        block = {
+          id: foundBlock.id,
+          type: foundBlock.type,
+          settings: foundBlock.settings || {},
+        };
+      }
+    }
+
+    // Determinar qué schema usar (bloque o sección)
+    let schema = null;
+    let currentSettings: Record<string, any> = {};
+
+    if (block) {
+      // Buscar el schema del bloque en schema.blocks
+      const blockSchema = section.schema.blocks?.find((b: any) => b.type === block.type);
+      if (blockSchema) {
+        schema = {
+          settings: blockSchema.settings || [],
+          blocks: [],
+        };
+        currentSettings = block.settings;
+      }
+    } else {
+      // Usar schema de la sección
+      schema = {
+        settings: section.schema.settings || [],
+        blocks: section.schema.blocks || [],
+      };
+      currentSettings = section.settings || {};
+    }
+
+    return {
+      section,
+      block,
+      schema,
+      currentSettings,
+    };
+  }, [template, layout, selectedSectionId, selectedBlockId]);
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useUpdateSectionSettings.ts b/packages/theme-studio/src/presentation/hooks/useUpdateSectionSettings.ts
new file mode 100644
index 00000000..6bdc60c0
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useUpdateSectionSettings.ts
@@ -0,0 +1,112 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+interface UpdateSectionSettingsParams {
+  storeId: string | undefined;
+  apiBaseUrl: string;
+  currentPageId: string;
+}
+
+interface UpdateSettingsPayload {
+  sectionId: string;
+  blockId: string | null;
+  settings: Record<string, any>;
+}
+
+export function useUpdateSectionSettings({ storeId, apiBaseUrl, currentPageId }: UpdateSectionSettingsParams) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ sectionId, blockId, settings }: UpdateSettingsPayload) => {
+      if (!storeId) throw new Error('Store ID is required');
+
+      // Obtener la estructura actual del template
+      const response = await fetch(
+        `${apiBaseUrl}/stores/${storeId}/themes/structure/${encodeURIComponent(currentPageId)}`,
+        {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`Failed to load template structure: ${response.statusText}`);
+      }
+
+      const templateData = await response.json();
+
+      // Actualizar settings en la estructura
+      const updatedSections = templateData.sections.map((section: any) => {
+        if (section.id === sectionId) {
+          if (blockId) {
+            // Actualizar settings de un bloque
+            const updatedBlocks = section.blocks.map((block: any) => {
+              if (block.id === blockId) {
+                return {
+                  ...block,
+                  settings: {
+                    ...block.settings,
+                    ...settings,
+                  },
+                };
+              }
+              return block;
+            });
+            return {
+              ...section,
+              blocks: updatedBlocks,
+            };
+          } else {
+            // Actualizar settings de la sección
+            return {
+              ...section,
+              settings: {
+                ...section.settings,
+                ...settings,
+              },
+            };
+          }
+        }
+        return section;
+      });
+
+      // Guardar la estructura actualizada
+      const saveResponse = await fetch(`${apiBaseUrl}/stores/${storeId}/themes/templates`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          pageType: currentPageId,
+          sections: updatedSections,
+          order: templateData.order,
+        }),
+      });
+
+      if (!saveResponse.ok) {
+        throw new Error(`Failed to save settings: ${saveResponse.statusText}`);
+      }
+
+      return saveResponse.json();
+    },
+    onSuccess: () => {
+      // Invalidar las queries relacionadas para refrescar los datos
+      queryClient.invalidateQueries({
+        queryKey: ['template-structure', storeId, currentPageId],
+      });
+    },
+  });
+}

From 63cb32a648a7ce9b541396487860a071ff13404b Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Mon, 3 Nov 2025 17:35:27 -0500
Subject: [PATCH 23/49] Refactor iframe selection styles in Theme Studio

This commit updates the CSS styles for selected and hovered elements in the iframe selection script. The previous outline styles have been replaced with box-shadow properties for improved visual clarity and consistency. This change enhances the user experience by providing a more modern and subtle indication of selection and hover states.
---
 .../presentation/utils/iframe-selection-script/constants.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
index 4c6b3a60..2a472fa3 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
@@ -41,9 +41,8 @@ function constantsModule(storeDomain) {
     '[data-block-id].' +
     SELECTED_CLASS +
     ' {' +
-    '  outline: 2px solid #006fbb !important;' +
-    '  outline-offset: 2px !important;' +
     '  position: relative !important;' +
+    '  box-shadow: inset 0 0 0 2px #006fbb !important;' +
     '}' +
     '[data-section-id].' +
     HOVER_CLASS +
@@ -51,9 +50,8 @@ function constantsModule(storeDomain) {
     '[data-block-id].' +
     HOVER_CLASS +
     ' {' +
-    '  outline: 2px dashed #006fbb !important;' +
-    '  outline-offset: 2px !important;' +
     '  position: relative !important;' +
+    '  box-shadow: inset 0 0 0 2px rgba(0, 111, 187, 0.6) !important;' +
     '}';
   document.head.appendChild(style);
   let currentSelectedElement = null;

From b1e1fba31a40187b28bf104305caee14051e8a9e Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 11:15:46 -0500
Subject: [PATCH 24/49] Enhance ThemeStudio with selectedElementName
 integration and improved hover label functionality

This commit introduces the selectedElementName prop to the ThemeStudio and PreviewPane components, allowing for better identification of selected elements. It also enhances the iframe selection script to manage hover labels more effectively, providing a clearer visual indication of element selection. Additionally, the ColorSetting component is simplified by removing unnecessary styling, improving code clarity and maintainability.
---
 .../presentation/components/ThemeStudio.tsx   | 23 +++++
 .../components/preview/PreviewPane.tsx        |  3 +
 .../settings/form-fields/ColorSetting.tsx     | 24 +----
 .../presentation/hooks/useIframeSelection.ts  |  5 +-
 .../iframe-selection-script/constants.js      | 18 +++-
 .../iframe-selection-script/event-handlers.js | 83 ++++++++++++++--
 .../iframe-selection-script/selection.js      | 96 ++++++++++++++++++-
 7 files changed, 220 insertions(+), 32 deletions(-)

diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index 4ebd9b7c..b73ca919 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -12,6 +12,7 @@ import { useState, useMemo, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { useStoreTemplates } from '../hooks/useStoreTemplates';
 import { useSidebarState } from '../hooks/useSidebarState';
+import { useSelectedSection } from '../hooks/useSelectedSection';
 
 export interface ThemeStudioProps {
   storeId: string;
@@ -34,6 +35,27 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
 
   const sidebarState = useSidebarState();
 
+  const selectedSectionData = useSelectedSection({
+    storeId,
+    apiBaseUrl,
+    currentPageId,
+    selectedSectionId: sidebarState.selectedSectionId,
+    selectedBlockId: sidebarState.selectedBlockId,
+  });
+
+  const selectedElementName = useMemo(() => {
+    if (selectedSectionData.block && selectedSectionData.schema) {
+      const blockSchema = selectedSectionData.section?.schema.blocks?.find(
+        (b: any) => b.type === selectedSectionData.block?.type
+      );
+      return blockSchema?.name || selectedSectionData.block.type;
+    }
+    if (selectedSectionData.section) {
+      return selectedSectionData.section.name || selectedSectionData.section.id;
+    }
+    return null;
+  }, [selectedSectionData]);
+
   const handleElementClick = useCallback(
     (sectionId: string | null, blockId: string | null) => {
       if (blockId && sectionId) {
@@ -91,6 +113,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
               currentPath={currentPath}
               selectedSectionId={sidebarState.selectedSectionId}
               selectedBlockId={sidebarState.selectedBlockId}
+              selectedElementName={selectedElementName}
               onPathChange={(newPath) => {
                 setCurrentPath(newPath);
                 const page = pages.find((p) => p.url === newPath);
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index 8cef525e..0697ab96 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -16,6 +16,7 @@ interface PreviewPaneProps {
   currentPath?: string;
   selectedSectionId?: string | null;
   selectedBlockId?: string | null;
+  selectedElementName?: string | null;
   onPathChange?: (newPath: string) => void;
   onElementClick?: (sectionId: string | null, blockId: string | null) => void;
 }
@@ -26,6 +27,7 @@ export function PreviewPane({
   currentPath = '/',
   selectedSectionId,
   selectedBlockId,
+  selectedElementName,
   onPathChange,
   onElementClick,
 }: PreviewPaneProps) {
@@ -42,6 +44,7 @@ export function PreviewPane({
     iframeRef,
     selectedSectionId: selectedSectionId || null,
     selectedBlockId: selectedBlockId || null,
+    selectedElementName: selectedElementName || null,
     domain,
     onElementClick,
   });
diff --git a/packages/theme-studio/src/presentation/components/settings/form-fields/ColorSetting.tsx b/packages/theme-studio/src/presentation/components/settings/form-fields/ColorSetting.tsx
index 32796b45..5a045874 100644
--- a/packages/theme-studio/src/presentation/components/settings/form-fields/ColorSetting.tsx
+++ b/packages/theme-studio/src/presentation/components/settings/form-fields/ColorSetting.tsx
@@ -37,29 +37,7 @@ export function ColorSetting({ id, label, value, onChange, info }: ColorSettingP
 
   return (
     <BlockStack gap="200">
-      <TextField
-        id={id}
-        label={label}
-        value={value}
-        onChange={handleChange}
-        helpText={info}
-        autoComplete="off"
-        prefix={
-          <Box
-            style={{
-              width: '24px',
-              height: '24px',
-              borderRadius: '4px',
-              backgroundColor: value || '#000000',
-              border: '1px solid #e1e3e5',
-              cursor: 'pointer',
-            }}
-            onClick={() => {
-              // TODO: Abrir color picker
-            }}
-          />
-        }
-      />
+      <TextField id={id} label={label} value={value} onChange={handleChange} helpText={info} autoComplete="off" />
     </BlockStack>
   );
 }
diff --git a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
index cb0056c0..3b7f956c 100644
--- a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
+++ b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
@@ -22,6 +22,7 @@ interface UseIframeSelectionParams {
   iframeRef: RefObject<HTMLIFrameElement | null>;
   selectedSectionId: string | null;
   selectedBlockId: string | null;
+  selectedElementName?: string | null;
   domain?: string | null;
   onElementClick?: (sectionId: string | null, blockId: string | null) => void;
 }
@@ -38,6 +39,7 @@ export function useIframeSelection({
   iframeRef,
   selectedSectionId,
   selectedBlockId,
+  selectedElementName,
   domain,
   onElementClick,
 }: UseIframeSelectionParams) {
@@ -159,6 +161,7 @@ export function useIframeSelection({
         type: 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT',
         sectionId: selectedSectionId,
         blockId: selectedBlockId,
+        elementName: selectedElementName || null,
         timestamp,
       };
 
@@ -194,7 +197,7 @@ export function useIframeSelection({
     } catch (error) {
       console.debug('Cannot send message to iframe (cross-origin):', error);
     }
-  }, [iframeRef, selectedSectionId, selectedBlockId]);
+  }, [iframeRef, selectedSectionId, selectedBlockId, selectedElementName]);
 
   // Limpiar selección cuando se desmonta el componente
   useEffect(() => {
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
index 2a472fa3..9bdc87de 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
@@ -52,10 +52,26 @@ function constantsModule(storeDomain) {
     ' {' +
     '  position: relative !important;' +
     '  box-shadow: inset 0 0 0 2px rgba(0, 111, 187, 0.6) !important;' +
-    '}';
+    '}' +
+    '.fasttify-selector-label {' +
+    '  position: absolute;' +
+    '  top: -2px;' +
+    '  left: -2px;' +
+    '  background-color: #006fbb;' +
+    '  color: white;' +
+    '  font-size: 11px;' +
+    '  font-weight: 600;' +
+    '  padding: 2px 6px;' +
+    '  line-height: 1.4;' +
+    '  white-space: nowrap;' +
+    '  z-index: 999999;' +
+    '  pointer-events: none;';
+  ('}');
   document.head.appendChild(style);
   let currentSelectedElement = null;
   let hoveredElement = null;
+  let currentLabelElement = null;
+  let hoverLabelElement = null;
   let lastSelectionTimestamp = 0;
   let scrollAnimationFrame = null;
 }
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
index 760a6d8e..a2ee9203 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
@@ -73,16 +73,60 @@ function eventHandlersModule() {
     }
   }
 
+  let hoverTimeout = null;
+  let leaveTimeout = null;
+
+  /**
+   * Verifica si un elemento o su elemento relacionado están dentro del elemento seleccionable
+   * @param {Element} element - El elemento a verificar
+   * @param {Element} selectableElement - El elemento seleccionable
+   * @returns {boolean} true si el elemento está dentro del seleccionable
+   */
+  function isWithinSelectable(element, selectableElement) {
+    if (!element || !selectableElement) return false;
+    return selectableElement.contains(element) || selectableElement === element;
+  }
+
   /**
    * Maneja el evento mouseenter para mostrar el estado hover
    * @param {MouseEvent} event - El evento mouseenter
    */
   function handleMouseEnter(event) {
+    // Cancelar cualquier timeout de leave pendiente
+    if (leaveTimeout) {
+      clearTimeout(leaveTimeout);
+      leaveTimeout = null;
+    }
+
     const target = event.target;
     const selectableElement = findSelectableElement(target);
+
+    // Si ya está en hover este elemento, no hacer nada
+    if (hoveredElement === selectableElement) {
+      return;
+    }
+
+    // Solo mostrar hover si no es el elemento seleccionado actualmente
     if (selectableElement && selectableElement !== currentSelectedElement) {
-      selectableElement.classList.add(HOVER_CLASS);
-      hoveredElement = selectableElement;
+      // Cancelar timeout anterior si existe
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+
+      // Pequeño delay para evitar parpadeos rápidos
+      hoverTimeout = setTimeout(function () {
+        // Verificar nuevamente que el elemento sigue siendo válido
+        if (selectableElement && selectableElement !== currentSelectedElement) {
+          selectableElement.classList.add(HOVER_CLASS);
+          hoveredElement = selectableElement;
+          const { sectionId, blockId } = getElementIds(selectableElement);
+          const labelText = blockId || sectionId || '';
+          if (labelText && typeof window.updateLabel === 'function') {
+            window.updateLabel(selectableElement, labelText, true);
+          }
+        }
+        hoverTimeout = null;
+      }, 50);
     }
   }
 
@@ -91,10 +135,37 @@ function eventHandlersModule() {
    * @param {MouseEvent} event - El evento mouseleave
    */
   function handleMouseLeave(event) {
-    if (hoveredElement) {
-      hoveredElement.classList.remove(HOVER_CLASS);
-      hoveredElement = null;
+    // Cancelar cualquier timeout de hover pendiente
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = null;
     }
+
+    if (!hoveredElement) return;
+
+    const relatedTarget = event.relatedTarget;
+
+    // Verificar si realmente estamos saliendo del elemento seleccionable
+    // Si el relatedTarget (elemento hacia donde va el mouse) está dentro del elemento seleccionable,
+    // entonces no removemos el hover (el mouse sigue dentro del elemento, solo pasó a un hijo)
+    if (relatedTarget && isWithinSelectable(relatedTarget, hoveredElement)) {
+      return;
+    }
+
+    // Pequeño delay para evitar parpadeos cuando el mouse pasa rápidamente entre elementos
+    // Esto da tiempo para que se dispare handleMouseEnter si el mouse entró a otro elemento
+    leaveTimeout = setTimeout(function () {
+      // Verificar nuevamente que realmente salimos del elemento
+      // Si durante el delay el mouse entró a otro elemento, hoveredElement podría haber cambiado
+      if (hoveredElement) {
+        hoveredElement.classList.remove(HOVER_CLASS);
+        if (typeof window.removeLabel === 'function') {
+          window.removeLabel(true);
+        }
+        hoveredElement = null;
+      }
+      leaveTimeout = null;
+    }, 150);
   }
 
   /**
@@ -107,7 +178,7 @@ function eventHandlersModule() {
     const isSameOrigin = event.origin === window.location.origin;
     if (!isSameOrigin && !isLocalhost) return;
     if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT') {
-      selectElement(event.data.sectionId, event.data.blockId, event.data.timestamp);
+      selectElement(event.data.sectionId, event.data.blockId, event.data.timestamp, event.data.elementName);
     } else if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_CLEAR_SELECTION') {
       clearSelection();
       lastSelectionTimestamp = 0;
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
index 35be6792..4452a8ae 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
@@ -26,12 +26,94 @@ import { extractFunctionBody } from './extract-function-body.js';
  * Esta función no se ejecuta directamente, se convierte a string para inyectar en el iframe
  */
 function selectionModule() {
+  /**
+   * Crea o actualiza la etiqueta visual del selector
+   * @param {Element} element - El elemento al que agregar la etiqueta
+   * @param {string} labelText - El texto a mostrar en la etiqueta
+   * @param {boolean} isHover - Si es true, usa la etiqueta de hover; si es false, usa la de selección
+   */
+  window.updateLabel = function (element, labelText, isHover) {
+    if (!element || !labelText) return;
+
+    // Remover etiqueta anterior si existe
+    const labelVar = isHover ? 'hoverLabelElement' : 'currentLabelElement';
+    const existingLabel = isHover ? hoverLabelElement : currentLabelElement;
+    if (existingLabel && existingLabel.parentNode) {
+      existingLabel.parentNode.removeChild(existingLabel);
+    }
+
+    // Crear nueva etiqueta
+    const label = document.createElement('div');
+    label.className = 'fasttify-selector-label';
+    label.textContent = labelText;
+
+    // Calcular posición relativa al viewport visible del elemento
+    const rect = element.getBoundingClientRect();
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+    // Posicionar la etiqueta en la esquina superior izquierda visible
+    label.style.position = 'fixed';
+    label.style.top = Math.max(0, rect.top + scrollTop - 2) + 'px';
+    label.style.left = Math.max(0, rect.left + scrollLeft - 2) + 'px';
+
+    document.body.appendChild(label);
+
+    // Guardar referencia
+    if (isHover) {
+      hoverLabelElement = label;
+    } else {
+      currentLabelElement = label;
+    }
+
+    // Actualizar posición en scroll y resize
+    const updatePosition = function () {
+      const newRect = element.getBoundingClientRect();
+      const newScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const newScrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+      label.style.top = Math.max(0, newRect.top + newScrollTop - 2) + 'px';
+      label.style.left = Math.max(0, newRect.left + newScrollLeft - 2) + 'px';
+    };
+
+    // Agregar listeners temporales para actualizar posición
+    window.addEventListener('scroll', updatePosition, { passive: true });
+    window.addEventListener('resize', updatePosition, { passive: true });
+
+    // Guardar función de cleanup en el elemento label
+    label._cleanup = function () {
+      window.removeEventListener('scroll', updatePosition);
+      window.removeEventListener('resize', updatePosition);
+    };
+  };
+
+  /**
+   * Remueve la etiqueta del selector
+   * @param {boolean} isHover - Si es true, remueve la etiqueta de hover; si es false, remueve la de selección
+   */
+  window.removeLabel = function (isHover) {
+    const label = isHover ? hoverLabelElement : currentLabelElement;
+    if (label && label.parentNode) {
+      if (label._cleanup) {
+        label._cleanup();
+      }
+      label.parentNode.removeChild(label);
+    }
+    if (isHover) {
+      hoverLabelElement = null;
+    } else {
+      currentLabelElement = null;
+    }
+  };
+
   /**
    * Limpia la selección actual removiendo la clase de selección del elemento
    */
   function clearSelection() {
     if (currentSelectedElement) {
       currentSelectedElement.classList.remove(SELECTED_CLASS);
+      if (typeof window.removeLabel === 'function') {
+        window.removeLabel(false);
+      }
       currentSelectedElement = null;
     }
   }
@@ -41,8 +123,9 @@ function selectionModule() {
    * @param {string|null} sectionId - ID de la sección a seleccionar
    * @param {string|null} blockId - ID del bloque a seleccionar
    * @param {number} [timestamp] - Timestamp para ignorar mensajes obsoletos
+   * @param {string} [elementName] - Nombre del elemento a mostrar en la etiqueta
    */
-  function selectElement(sectionId, blockId, timestamp) {
+  function selectElement(sectionId, blockId, timestamp, elementName) {
     // Ignorar mensajes obsoletos
     if (timestamp && timestamp < lastSelectionTimestamp) {
       return;
@@ -68,6 +151,11 @@ function selectionModule() {
         element.classList.add(SELECTED_CLASS);
         currentSelectedElement = element;
 
+        // Mostrar etiqueta con el nombre del elemento
+        if (elementName && typeof window.updateLabel === 'function') {
+          window.updateLabel(element, elementName, false);
+        }
+
         // Cancelar scroll anterior si hay uno pendiente
         if (scrollAnimationFrame !== null) {
           cancelAnimationFrame(scrollAnimationFrame);
@@ -82,6 +170,12 @@ function selectionModule() {
             behavior: 'smooth',
             block: 'center',
           });
+          // Actualizar posición de la etiqueta después del scroll
+          if (elementName && currentLabelElement && typeof window.updateLabel === 'function') {
+            setTimeout(function () {
+              window.updateLabel(element, elementName, false);
+            }, 100);
+          }
         });
       }
     }

From 845bd100df56f58afa84a3036ddfd476c2d11fa6 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 11:28:16 -0500
Subject: [PATCH 25/49] Refactor iframe selection styles and improve label
 positioning in Theme Studio

This commit updates the CSS styles for the hover label in the iframe selection script, changing its position to fixed and adjusting the background color and padding for better visibility. Additionally, it simplifies the label positioning logic by removing unnecessary scroll calculations, enhancing performance and clarity in the selection process.
---
 .../utils/iframe-selection-script/constants.js    | 15 +++++++--------
 .../utils/iframe-selection-script/selection.js    | 15 +++++++--------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
index 9bdc87de..5c80bd04 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
@@ -54,19 +54,18 @@ function constantsModule(storeDomain) {
     '  box-shadow: inset 0 0 0 2px rgba(0, 111, 187, 0.6) !important;' +
     '}' +
     '.fasttify-selector-label {' +
-    '  position: absolute;' +
-    '  top: -2px;' +
-    '  left: -2px;' +
-    '  background-color: #006fbb;' +
+    '  position: fixed;' +
+    '  background-color: #005cd4;' +
     '  color: white;' +
-    '  font-size: 11px;' +
+    '  font-size: 12px;' +
     '  font-weight: 600;' +
-    '  padding: 2px 6px;' +
+    '  padding: 4px 10px;' +
     '  line-height: 1.4;' +
     '  white-space: nowrap;' +
     '  z-index: 999999;' +
-    '  pointer-events: none;';
-  ('}');
+    '  pointer-events: none;' +
+    '  border-radius: 4px;' +
+    '}';
   document.head.appendChild(style);
   let currentSelectedElement = null;
   let hoveredElement = null;
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
index 4452a8ae..a026e395 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
@@ -48,14 +48,14 @@ function selectionModule() {
     label.textContent = labelText;
 
     // Calcular posición relativa al viewport visible del elemento
+    // getBoundingClientRect() ya devuelve coordenadas relativas al viewport
     const rect = element.getBoundingClientRect();
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
 
     // Posicionar la etiqueta en la esquina superior izquierda visible
+    // Como usamos position: fixed, solo necesitamos las coordenadas del viewport
     label.style.position = 'fixed';
-    label.style.top = Math.max(0, rect.top + scrollTop - 2) + 'px';
-    label.style.left = Math.max(0, rect.left + scrollLeft - 2) + 'px';
+    label.style.top = Math.max(0, rect.top - 2) + 'px';
+    label.style.left = Math.max(0, rect.left - 2) + 'px';
 
     document.body.appendChild(label);
 
@@ -67,12 +67,11 @@ function selectionModule() {
     }
 
     // Actualizar posición en scroll y resize
+    // getBoundingClientRect() ya devuelve coordenadas relativas al viewport
     const updatePosition = function () {
       const newRect = element.getBoundingClientRect();
-      const newScrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const newScrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-      label.style.top = Math.max(0, newRect.top + newScrollTop - 2) + 'px';
-      label.style.left = Math.max(0, newRect.left + newScrollLeft - 2) + 'px';
+      label.style.top = Math.max(0, newRect.top - 2) + 'px';
+      label.style.left = Math.max(0, newRect.left - 2) + 'px';
     };
 
     // Agregar listeners temporales para actualizar posición

From 8c899e23d13d6e81a1d9c0e5f02bc9008760d3db Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 12:12:29 -0500
Subject: [PATCH 26/49] Refactor hero section and enhance block schema
 integration in Theme Studio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit removes unused button settings from the hero section and updates the block name to "Botón de la colección". It also enhances the integration of block schemas within the Theme Studio, allowing for better identification of blocks through data attributes. The changes improve the overall clarity and maintainability of the code, ensuring a more streamlined user experience.
---
 .../fasttify/theme/sections/hero.liquid       | 27 ++---------------
 .../fasttify/theme/templates/index.json       |  2 +-
 .../liquid/filters/html-filters.ts            | 16 ++++++++++
 .../rendering/fasttify-attributes-builder.ts  | 19 +++++++++++-
 .../services/rendering/section-renderer.ts    | 10 ++++++-
 .../components/settings/SettingsPane.tsx      |  8 ++++-
 .../sidebar/block-item/BlockItem.tsx          | 24 ++++++++++++---
 .../sidebar/section-item/SectionItem.tsx      | 30 +++++++++++--------
 .../iframe-selection-script/event-handlers.js |  8 ++---
 .../utils/iframe-selection-script/utils.js    | 16 ++++++++++
 10 files changed, 109 insertions(+), 51 deletions(-)

diff --git a/packages/example-themes/fasttify/theme/sections/hero.liquid b/packages/example-themes/fasttify/theme/sections/hero.liquid
index a31d8c15..8a57c881 100644
--- a/packages/example-themes/fasttify/theme/sections/hero.liquid
+++ b/packages/example-themes/fasttify/theme/sections/hero.liquid
@@ -156,41 +156,18 @@
         "id": "hero_description",
         "label": "Descripción personalizada",
         "info": "Opcional: Si está vacío, usa la descripción de la colección"
-      },
-      {
-        "type": "header",
-        "content": "Botones de Acción"
-      },
-      {
-        "type": "text",
-        "id": "primary_button_text",
-        "label": "Texto botón principal",
-        "default": "EXPLORAR COLECCIÓN",
-        "info": "El botón principal siempre apunta a la colección"
-      },
-      {
-        "type": "text",
-        "id": "secondary_button_text",
-        "label": "Texto botón secundario",
-        "default": "VER TODAS"
-      },
-      {
-        "type": "url",
-        "id": "secondary_button_url",
-        "label": "URL botón secundario",
-        "default": "/collections"
       }
     ],
     "blocks": [
       {
         "type": "hero_item",
-        "name": "Hero Item",
+        "name": "Botón de la colección",
         "settings": [
           {
             "type": "text",
             "id": "label",
             "label": "Label",
-            "default": "Hero Item"
+            "default": "Botón de la colección"
           },
           {
             "type": "url",
diff --git a/packages/example-themes/fasttify/theme/templates/index.json b/packages/example-themes/fasttify/theme/templates/index.json
index eefce56d..aedffbbb 100644
--- a/packages/example-themes/fasttify/theme/templates/index.json
+++ b/packages/example-themes/fasttify/theme/templates/index.json
@@ -8,7 +8,7 @@
           "id": "hero-button-1",
           "type": "hero_item",
           "settings": {
-            "label": "EXPLORAR COLECCIÓN",
+            "label": "Hola mundo",
             "link": "/collections/new-products"
           }
         },
diff --git a/packages/liquid-forge/liquid/filters/html-filters.ts b/packages/liquid-forge/liquid/filters/html-filters.ts
index dcc7b5c1..4c4b21ed 100644
--- a/packages/liquid-forge/liquid/filters/html-filters.ts
+++ b/packages/liquid-forge/liquid/filters/html-filters.ts
@@ -304,6 +304,22 @@ export const fasttifyAttributesFilter: LiquidFilter = {
 
       if (blockId) {
         attributes.push(`data-block-id="${blockId}"`);
+        try {
+          const section = this.context?.getSync(['section']);
+          if (section?.schema?.blocks) {
+            const blockSchema = section.schema.blocks.find((b: any) => b.type === obj.type);
+            if (blockSchema?.name) {
+              attributes.push(`data-block-name="${blockSchema.name}"`);
+            }
+          }
+        } catch (error) {}
+      } else if (sectionId) {
+        try {
+          const section = this.context?.getSync(['section']);
+          if (section?.schema?.name) {
+            attributes.push(`data-section-name="${section.schema.name}"`);
+          }
+        } catch (error) {}
       }
 
       return attributes.length > 0 ? ` ${attributes.join(' ')}` : '';
diff --git a/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts b/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
index cdb904a4..c8b2f414 100644
--- a/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
+++ b/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
@@ -20,6 +20,14 @@ interface SectionWithAttributes {
   id: string;
   settings: Record<string, any>;
   blocks: BlockWithAttributes[];
+  schema?: {
+    name?: string;
+    blocks?: Array<{
+      type: string;
+      name?: string;
+      settings?: any[];
+    }>;
+  };
   fasttify_attributes: string;
 }
 
@@ -37,13 +45,22 @@ interface BlockWithAttributes {
 export function createSectionWithAttributes(
   sectionId: string,
   settings: Record<string, any>,
-  blocks: any[]
+  blocks: any[],
+  schema?: {
+    name?: string;
+    blocks?: Array<{
+      type: string;
+      name?: string;
+      settings?: any[];
+    }>;
+  }
 ): SectionWithAttributes {
   // Crear primero el objeto section sin los bloques para evitar referencia circular
   const sectionObject: SectionWithAttributes = {
     id: sectionId,
     settings,
     blocks: [], // Se asignará después
+    schema, // Incluir el schema para que el filtro pueda acceder a él
     get fasttify_attributes() {
       const mockContext = {
         getSync: (path: string[]) => {
diff --git a/packages/liquid-forge/services/rendering/section-renderer.ts b/packages/liquid-forge/services/rendering/section-renderer.ts
index 213d2995..4dfa68cf 100644
--- a/packages/liquid-forge/services/rendering/section-renderer.ts
+++ b/packages/liquid-forge/services/rendering/section-renderer.ts
@@ -69,12 +69,20 @@ export class SectionRenderer {
       // Combinar settings: schema defaults + store actual (valores del template sobrescriben defaults)
       const finalSettings = { ...schemaSettings, ...actualSettings };
 
+      // Extraer el schema completo para pasarlo al objeto section
+      const fullSchema = schemaParser.extractFullSchema(templateContent);
+
       // Crear contexto específico para esta sección
       // Usar sectionId si está disponible (ID en el template), si no usar sectionName (tipo de sección)
       const sectionIdForContext = sectionId || sectionName;
 
       // Crear objeto section con la propiedad fasttify_attributes
-      const sectionObject = createSectionWithAttributes(sectionIdForContext, finalSettings, actualBlocks);
+      const sectionObject = createSectionWithAttributes(
+        sectionIdForContext,
+        finalSettings,
+        actualBlocks,
+        fullSchema || undefined
+      );
 
       const sectionContext = {
         ...baseContext,
diff --git a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
index 5b8a547e..76550100 100644
--- a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
+++ b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
@@ -123,7 +123,13 @@ export function SettingsPane({
     );
   }
 
-  const displayName = block ? block.type : section?.name || 'Sección';
+  const displayName = useMemo(() => {
+    if (block) {
+      const blockSchema = section?.schema?.blocks?.find((b: any) => b.type === block.type);
+      return blockSchema?.name || block.type;
+    }
+    return section?.name || 'Sección';
+  }, [block, section]);
 
   return (
     <div>
diff --git a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
index 7e1d6e7b..c05137d6 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
@@ -17,7 +17,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Box, Text, Icon, InlineStack, Button } from '@shopify/polaris';
+import { Text, Icon, InlineStack, Button } from '@shopify/polaris';
 import { DragHandleIcon, DeleteIcon, ViewIcon } from '@shopify/polaris-icons';
 import type { ComponentProps } from 'react';
 import type { ReactNode } from 'react';
@@ -29,19 +29,35 @@ export interface BlockItemProps {
     settings: Record<string, any>;
   };
   sectionId: string;
+  blockSchema?: {
+    type: string;
+    name: string;
+    settings?: any[];
+  };
   isSelected: boolean;
   onSelect: () => void;
   onDelete?: () => void;
   onToggleVisibility?: () => void;
 }
 
-function getBlockDisplayName(block: BlockItemProps['block']): string {
+function getBlockDisplayName(block: BlockItemProps['block'], blockSchema?: BlockItemProps['blockSchema']): string {
+  if (blockSchema?.name) {
+    return blockSchema.name;
+  }
   return block.settings.name || block.settings.title || block.type;
 }
 
-export function BlockItem({ block, sectionId, isSelected, onSelect, onDelete, onToggleVisibility }: BlockItemProps) {
+export function BlockItem({
+  block,
+  sectionId,
+  blockSchema,
+  isSelected,
+  onSelect,
+  onDelete,
+  onToggleVisibility,
+}: BlockItemProps) {
   const [isHovered, setIsHovered] = useState(false);
-  const displayName = getBlockDisplayName(block);
+  const displayName = getBlockDisplayName(block, blockSchema);
 
   return (
     <div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
index 590bb70e..4bca83f5 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
@@ -152,19 +152,23 @@ export function SectionItem({
         <Collapsible open={isExpanded} id={`section-${section.id}-blocks`}>
           <Box>
             {hasCurrentBlocks && section.blocks ? (
-              section.blocks.map((block: { id: string; type: string; settings: Record<string, any> }) => (
-                <BlockItem
-                  key={block.id}
-                  block={block}
-                  sectionId={section.id}
-                  isSelected={selectedBlockId === block.id}
-                  onSelect={() => {
-                    onSelectBlock(block.id);
-                  }}
-                  onDelete={onDelete}
-                  onToggleVisibility={onToggleVisibility}
-                />
-              ))
+              section.blocks.map((block: { id: string; type: string; settings: Record<string, any> }) => {
+                const blockSchema = section.schema?.blocks?.find((b: any) => b.type === block.type);
+                return (
+                  <BlockItem
+                    key={block.id}
+                    block={block}
+                    sectionId={section.id}
+                    blockSchema={blockSchema}
+                    isSelected={selectedBlockId === block.id}
+                    onSelect={() => {
+                      onSelectBlock(block.id);
+                    }}
+                    onDelete={onDelete}
+                    onToggleVisibility={onToggleVisibility}
+                  />
+                );
+              })
             ) : (
               <Box padding="200">
                 <Text as="p" variant="bodySm" tone="subdued">
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
index a2ee9203..6cf8ecc6 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
@@ -115,14 +115,12 @@ function eventHandlersModule() {
 
       // Pequeño delay para evitar parpadeos rápidos
       hoverTimeout = setTimeout(function () {
-        // Verificar nuevamente que el elemento sigue siendo válido
         if (selectableElement && selectableElement !== currentSelectedElement) {
           selectableElement.classList.add(HOVER_CLASS);
           hoveredElement = selectableElement;
-          const { sectionId, blockId } = getElementIds(selectableElement);
-          const labelText = blockId || sectionId || '';
-          if (labelText && typeof window.updateLabel === 'function') {
-            window.updateLabel(selectableElement, labelText, true);
+          const elementName = getElementName(selectableElement);
+          if (elementName && typeof window.updateLabel === 'function') {
+            window.updateLabel(selectableElement, elementName, true);
           }
         }
         hoverTimeout = null;
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js
index bea383c5..b67d1acb 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js
@@ -55,6 +55,22 @@ function utilsModule() {
       blockId: element.getAttribute('data-block-id'),
     };
   }
+
+  /**
+   * Extrae el nombre del elemento desde los atributos data
+   * @param {Element} element - El elemento del cual extraer el nombre
+   * @returns {string|null} El nombre del elemento o null
+   */
+  function getElementName(element) {
+    if (!element) return null;
+    // Prioridad: data-block-name > data-section-name > blockId > sectionId
+    const blockName = element.getAttribute('data-block-name');
+    if (blockName) return blockName;
+    const sectionName = element.getAttribute('data-section-name');
+    if (sectionName) return sectionName;
+    const { blockId, sectionId } = getElementIds(element);
+    return blockId || sectionId || null;
+  }
 }
 
 /**

From 2ee2d316fe5c1a34758896b5c4b70ede53665502 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 12:33:07 -0500
Subject: [PATCH 27/49] Enhance block schema integration and add custom block
 names in Theme Studio

This commit introduces custom block names in the JSON configuration for hero items, improving clarity in the Theme Studio. It also refines the logic for displaying block names by prioritizing custom names over schema names, enhancing the overall user experience and maintainability of the code.
---
 .../fasttify/theme/templates/index.json       |  2 ++
 .../liquid/filters/html-filters.ts            | 19 +++++++++++++++----
 .../presentation/components/ThemeStudio.tsx   |  3 +++
 .../components/settings/SettingsPane.tsx      |  3 +++
 .../sidebar/block-item/BlockItem.tsx          |  4 ++++
 .../presentation/hooks/useSelectedSection.ts  |  2 ++
 6 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/example-themes/fasttify/theme/templates/index.json b/packages/example-themes/fasttify/theme/templates/index.json
index aedffbbb..1c0075e5 100644
--- a/packages/example-themes/fasttify/theme/templates/index.json
+++ b/packages/example-themes/fasttify/theme/templates/index.json
@@ -7,6 +7,7 @@
         {
           "id": "hero-button-1",
           "type": "hero_item",
+          "name": "Botón de la colección 1",
           "settings": {
             "label": "Hola mundo",
             "link": "/collections/new-products"
@@ -15,6 +16,7 @@
         {
           "id": "hero-button-2",
           "type": "hero_item",
+          "name": "Botón de la colección 2",
           "settings": {
             "label": "VER TODAS",
             "link": "/collections"
diff --git a/packages/liquid-forge/liquid/filters/html-filters.ts b/packages/liquid-forge/liquid/filters/html-filters.ts
index 4c4b21ed..a22bce80 100644
--- a/packages/liquid-forge/liquid/filters/html-filters.ts
+++ b/packages/liquid-forge/liquid/filters/html-filters.ts
@@ -306,11 +306,22 @@ export const fasttifyAttributesFilter: LiquidFilter = {
         attributes.push(`data-block-id="${blockId}"`);
         try {
           const section = this.context?.getSync(['section']);
-          if (section?.schema?.blocks) {
+          // Prioridad: nombre personalizado del bloque > nombre del schema
+          let blockName: string | undefined;
+
+          // 1. Intentar obtener el nombre personalizado del bloque (si existe en el JSON)
+          if (obj.name && typeof obj.name === 'string') {
+            blockName = obj.name;
+          }
+
+          // 2. Si no hay nombre personalizado, usar el nombre del schema
+          if (!blockName && section?.schema?.blocks) {
             const blockSchema = section.schema.blocks.find((b: any) => b.type === obj.type);
-            if (blockSchema?.name) {
-              attributes.push(`data-block-name="${blockSchema.name}"`);
-            }
+            blockName = blockSchema?.name;
+          }
+
+          if (blockName) {
+            attributes.push(`data-block-name="${blockName}"`);
           }
         } catch (error) {}
       } else if (sectionId) {
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index b73ca919..c11b422e 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -45,6 +45,9 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
 
   const selectedElementName = useMemo(() => {
     if (selectedSectionData.block && selectedSectionData.schema) {
+      if (selectedSectionData.block.name && typeof selectedSectionData.block.name === 'string') {
+        return selectedSectionData.block.name;
+      }
       const blockSchema = selectedSectionData.section?.schema.blocks?.find(
         (b: any) => b.type === selectedSectionData.block?.type
       );
diff --git a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
index 76550100..9a4a0b7e 100644
--- a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
+++ b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
@@ -125,6 +125,9 @@ export function SettingsPane({
 
   const displayName = useMemo(() => {
     if (block) {
+      if (block.name && typeof block.name === 'string') {
+        return block.name;
+      }
       const blockSchema = section?.schema?.blocks?.find((b: any) => b.type === block.type);
       return blockSchema?.name || block.type;
     }
diff --git a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
index c05137d6..329ce3ea 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
@@ -27,6 +27,7 @@ export interface BlockItemProps {
     id: string;
     type: string;
     settings: Record<string, any>;
+    name?: string;
   };
   sectionId: string;
   blockSchema?: {
@@ -41,6 +42,9 @@ export interface BlockItemProps {
 }
 
 function getBlockDisplayName(block: BlockItemProps['block'], blockSchema?: BlockItemProps['blockSchema']): string {
+  if (block.name && typeof block.name === 'string') {
+    return block.name;
+  }
   if (blockSchema?.name) {
     return blockSchema.name;
   }
diff --git a/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts b/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
index 19fed83c..f1253821 100644
--- a/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
+++ b/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
@@ -25,6 +25,7 @@ export interface SelectedSectionData {
     id: string;
     type: string;
     settings: Record<string, any>;
+    name?: string;
   } | null;
   schema: {
     settings: any[];
@@ -106,6 +107,7 @@ export function useSelectedSection({
           id: foundBlock.id,
           type: foundBlock.type,
           settings: foundBlock.settings || {},
+          name: foundBlock.name,
         };
       }
     }

From ded5589ae7ea36f549ec6fafe7e1c4f6c433e94f Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 12:44:29 -0500
Subject: [PATCH 28/49] Enhance hero section settings with additional headers
 and info fields

This commit adds new header settings for button text and navigation in the hero section, improving the clarity of the configuration. It also includes informational fields for the button label and link, providing users with better context for their settings. These changes enhance the overall usability and maintainability of the theme configuration.
---
 .../fasttify/theme/sections/hero.liquid            | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/example-themes/fasttify/theme/sections/hero.liquid b/packages/example-themes/fasttify/theme/sections/hero.liquid
index 8a57c881..5e4b61f3 100644
--- a/packages/example-themes/fasttify/theme/sections/hero.liquid
+++ b/packages/example-themes/fasttify/theme/sections/hero.liquid
@@ -163,16 +163,26 @@
         "type": "hero_item",
         "name": "Botón de la colección",
         "settings": [
+          {
+            "type": "header",
+            "content": "Texto del Botón"
+          },
           {
             "type": "text",
             "id": "label",
             "label": "Label",
-            "default": "Botón de la colección"
+            "default": "Botón de la colección",
+            "info": "Texto que aparece en el botón"
+          },
+          {
+            "type": "header",
+            "content": "Navegación"
           },
           {
             "type": "url",
             "id": "link",
-            "label": "Link"
+            "label": "Link",
+            "info": "URL a la que dirige el botón"
           }
         ]
       }

From e16951468d6a4a9d3c0dc845bd47241ef9ff971c Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 12:49:21 -0500
Subject: [PATCH 29/49] Refactor SectionItem component to improve click
 handling and expand functionality

This commit updates the SectionItem component by separating the click handling for the section and the chevron icon. The onClick event for the section now triggers the onSelect function, while the chevron click event is managed separately to allow for expansion. This change enhances user interaction and clarity in the component's behavior, improving the overall usability of the sidebar.
---
 .../sidebar/section-item/SectionItem.tsx      | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
index 4bca83f5..1a1c61a2 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
@@ -64,14 +64,17 @@ export function SectionItem({
   const hasCurrentBlocks = isTemplateSection && (section.blocks?.length ?? 0) > 0;
   const canExpand = hasBlocksInSchema;
 
-  const handleClick = () => {
+  const handleChevronClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
     if (canExpand) {
       onToggleExpand();
-    } else {
-      onSelect();
     }
   };
 
+  const handleSectionClick = () => {
+    onSelect();
+  };
+
   const ChevronIcon = isExpanded ? ChevronDownIcon : ChevronRightIcon;
 
   return (
@@ -81,13 +84,22 @@ export function SectionItem({
           variant="tertiary"
           fullWidth
           textAlign="left"
-          onClick={handleClick}
+          onClick={handleSectionClick}
           {...({
             children: (
               <InlineStack gap="200" blockAlign="center" align="space-between">
                 <InlineStack gap="200" blockAlign="center">
                   <InlineStack gap="050" blockAlign="center">
-                    <Icon source={ChevronIcon} tone="subdued" />
+                    <div
+                      onClick={handleChevronClick}
+                      style={{
+                        cursor: canExpand ? 'pointer' : 'default',
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: '2px',
+                      }}>
+                      <Icon source={ChevronIcon} tone="subdued" />
+                    </div>
                     <div
                       style={{
                         position: 'relative',

From 3f82e831665890cf5a1b41f0c393d609d8b5d206 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 13:01:21 -0500
Subject: [PATCH 30/49] Enhance sidebar functionality with sub-block selection
 and improved block structure

This commit introduces support for sub-blocks in the sidebar, allowing users to select and manage nested blocks within sections. The BlockItem and SectionGroup components have been updated to handle sub-blocks, enhancing the overall structure and usability of the sidebar. Additionally, the useSelectedSection and useSidebarState hooks have been modified to accommodate the new sub-block selection logic, improving state management and user interaction within the Theme Studio.
---
 .../src/domain/entities/section.entity.ts     |   3 +-
 .../presentation/components/ThemeStudio.tsx   |   1 +
 .../components/sidebar/Sidebar.tsx            |  18 +-
 .../sidebar/block-item/BlockItem.tsx          | 209 +++++++++++++-----
 .../sidebar/section-group/SectionGroup.tsx    |  12 +
 .../sidebar/section-item/SectionItem.tsx      |  46 ++--
 .../presentation/hooks/useSelectedSection.ts  |  40 +++-
 .../src/presentation/hooks/useSidebarState.ts |  14 ++
 8 files changed, 259 insertions(+), 84 deletions(-)

diff --git a/packages/theme-studio/src/domain/entities/section.entity.ts b/packages/theme-studio/src/domain/entities/section.entity.ts
index 1d72330a..de9f64ea 100644
--- a/packages/theme-studio/src/domain/entities/section.entity.ts
+++ b/packages/theme-studio/src/domain/entities/section.entity.ts
@@ -58,12 +58,13 @@ export interface SettingDefinition {
 }
 
 /**
- * Definición de un block dentro de una sección
+ * Definición de un block dentro de una sección o dentro de otro bloque
  */
 export interface BlockDefinition {
   type: string;
   name: string;
   settings?: SettingDefinition[];
+  blocks?: BlockDefinition[];
 }
 
 /**
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index c11b422e..c39ac72c 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -41,6 +41,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
     currentPageId,
     selectedSectionId: sidebarState.selectedSectionId,
     selectedBlockId: sidebarState.selectedBlockId,
+    selectedSubBlockId: sidebarState.selectedSubBlockId,
   });
 
   const selectedElementName = useMemo(() => {
diff --git a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
index 013f21a8..3d7fab6e 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/Sidebar.tsx
@@ -33,8 +33,16 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId, sidebarState }: Si
 
   const { pages, isLoading: isLoadingPages } = useStoreTemplates({ storeId, apiBaseUrl });
 
-  const { expandedSections, selectedSectionId, selectedBlockId, toggleSection, selectSection, selectBlock } =
-    sidebarState;
+  const {
+    expandedSections,
+    selectedSectionId,
+    selectedBlockId,
+    selectedSubBlockId,
+    toggleSection,
+    selectSection,
+    selectBlock,
+    selectSubBlock,
+  } = sidebarState;
 
   const currentPageTitle = pages.find((p) => p.id === currentPageId)?.name || 'Página';
 
@@ -66,9 +74,11 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId, sidebarState }: Si
                     expandedSections={expandedSections}
                     selectedSectionId={selectedSectionId}
                     selectedBlockId={selectedBlockId}
+                    selectedSubBlockId={selectedSubBlockId}
                     onToggleSection={toggleSection}
                     onSelectSection={selectSection}
                     onSelectBlock={selectBlock}
+                    onSelectSubBlock={selectSubBlock}
                     onAddSection={() => {
                       // TODO: Implementar modal de agregar sección
                     }}
@@ -89,9 +99,11 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId, sidebarState }: Si
                     expandedSections={expandedSections}
                     selectedSectionId={selectedSectionId}
                     selectedBlockId={selectedBlockId}
+                    selectedSubBlockId={selectedSubBlockId}
                     onToggleSection={toggleSection}
                     onSelectSection={selectSection}
                     onSelectBlock={selectBlock}
+                    onSelectSubBlock={selectSubBlock}
                     onAddSection={() => {
                       // TODO: Implementar modal de agregar sección
                     }}
@@ -111,9 +123,11 @@ export function Sidebar({ storeId, apiBaseUrl, currentPageId, sidebarState }: Si
                     expandedSections={expandedSections}
                     selectedSectionId={selectedSectionId}
                     selectedBlockId={selectedBlockId}
+                    selectedSubBlockId={selectedSubBlockId}
                     onToggleSection={toggleSection}
                     onSelectSection={selectSection}
                     onSelectBlock={selectBlock}
+                    onSelectSubBlock={selectSubBlock}
                     onAddSection={() => {
                       // TODO: Implementar modal de agregar sección
                     }}
diff --git a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
index 329ce3ea..94b05e32 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/block-item/BlockItem.tsx
@@ -17,8 +17,8 @@
 'use client';
 
 import { useState } from 'react';
-import { Text, Icon, InlineStack, Button } from '@shopify/polaris';
-import { DragHandleIcon, DeleteIcon, ViewIcon } from '@shopify/polaris-icons';
+import { Text, Icon, InlineStack, Button, Box, Collapsible } from '@shopify/polaris';
+import { DragHandleIcon, DeleteIcon, ViewIcon, ChevronDownIcon, ChevronRightIcon } from '@shopify/polaris-icons';
 import type { ComponentProps } from 'react';
 import type { ReactNode } from 'react';
 
@@ -28,15 +28,29 @@ export interface BlockItemProps {
     type: string;
     settings: Record<string, any>;
     name?: string;
+    blocks?: Array<{
+      id: string;
+      type: string;
+      settings: Record<string, any>;
+      name?: string;
+    }>;
   };
   sectionId: string;
   blockSchema?: {
     type: string;
     name: string;
     settings?: any[];
+    blocks?: Array<{
+      type: string;
+      name: string;
+      settings?: any[];
+    }>;
   };
   isSelected: boolean;
+  selectedSubBlockId?: string | null;
+  parentBlockId?: string;
   onSelect: () => void;
+  onSelectSubBlock?: (subBlockId: string, parentBlockId: string, sectionId: string) => void;
   onDelete?: () => void;
   onToggleVisibility?: () => void;
 }
@@ -56,73 +70,152 @@ export function BlockItem({
   sectionId,
   blockSchema,
   isSelected,
+  selectedSubBlockId,
+  parentBlockId,
   onSelect,
+  onSelectSubBlock,
   onDelete,
   onToggleVisibility,
 }: BlockItemProps) {
   const [isHovered, setIsHovered] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const displayName = getBlockDisplayName(block, blockSchema);
 
-  return (
-    <div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <Button
-        variant="tertiary"
-        fullWidth
-        textAlign="left"
-        onClick={onSelect}
-        {...({
-          children: (
-            <InlineStack gap="200" blockAlign="center" align="space-between">
-              <InlineStack gap="200" blockAlign="center">
-                <div
-                  style={{
-                    position: 'relative',
-                    width: '20px',
-                    height: '20px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}>
-                  <div
-                    style={{
-                      position: 'absolute',
-                      opacity: isHovered ? 1 : 0,
-                      transition: 'opacity 0.2s ease-in-out',
-                    }}>
-                    <Icon source={DragHandleIcon} tone="subdued" />
-                  </div>
-                </div>
-                <Text as="span" variant="bodySm">
-                  {displayName}
-                </Text>
-              </InlineStack>
+  const hasSubBlocksInSchema = (blockSchema?.blocks?.length ?? 0) > 0;
+  const hasCurrentSubBlocks = (block.blocks?.length ?? 0) > 0;
+  const canExpand = hasSubBlocksInSchema;
 
-              {(isHovered || isSelected) && (
-                <InlineStack gap="050">
-                  {onToggleVisibility && (
-                    <div
-                      onClick={(e: React.MouseEvent) => {
-                        e.stopPropagation();
-                        onToggleVisibility();
-                      }}>
-                      <Button variant="plain" icon={<Icon source={ViewIcon} />} />
-                    </div>
-                  )}
-                  {onDelete && (
+  const handleChevronClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (canExpand) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+
+  const handleBlockClick = () => {
+    onSelect();
+    // Si tiene sub-bloques y no está expandido, expandirlo automáticamente
+    if (canExpand && !isExpanded) {
+      setIsExpanded(true);
+    }
+  };
+
+  const ChevronIcon = isExpanded ? ChevronDownIcon : ChevronRightIcon;
+
+  return (
+    <Box>
+      <div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+        <Button
+          variant="tertiary"
+          fullWidth
+          textAlign="left"
+          onClick={handleBlockClick}
+          {...({
+            children: (
+              <InlineStack gap="200" blockAlign="center" align="space-between">
+                <InlineStack gap="200" blockAlign="center">
+                  <InlineStack gap="050" blockAlign="center">
+                    {canExpand && (
+                      <div
+                        onClick={handleChevronClick}
+                        style={{
+                          cursor: 'pointer',
+                          display: 'flex',
+                          alignItems: 'center',
+                          padding: '2px',
+                        }}>
+                        <Icon source={ChevronIcon} tone="subdued" />
+                      </div>
+                    )}
                     <div
-                      onClick={(e: React.MouseEvent) => {
-                        e.stopPropagation();
-                        onDelete();
+                      style={{
+                        position: 'relative',
+                        width: '20px',
+                        height: '20px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                       }}>
-                      <Button variant="plain" icon={<Icon source={DeleteIcon} />} />
+                      <div
+                        style={{
+                          position: 'absolute',
+                          opacity: isHovered ? 1 : 0,
+                          transition: 'opacity 0.2s ease-in-out',
+                        }}>
+                        <Icon source={DragHandleIcon} tone="subdued" />
+                      </div>
                     </div>
-                  )}
+                  </InlineStack>
+                  <Text as="span" variant="bodySm" fontWeight={isSelected ? 'semibold' : 'regular'}>
+                    {displayName}
+                  </Text>
                 </InlineStack>
-              )}
-            </InlineStack>
-          ),
-        } as ComponentProps<typeof Button> & { children: ReactNode })}
-      />
-    </div>
+
+                {(isHovered || isSelected) && (
+                  <InlineStack gap="050">
+                    {onToggleVisibility && (
+                      <div
+                        onClick={(e: React.MouseEvent) => {
+                          e.stopPropagation();
+                          onToggleVisibility();
+                        }}>
+                        <Button variant="plain" icon={<Icon source={ViewIcon} />} />
+                      </div>
+                    )}
+                    {onDelete && (
+                      <div
+                        onClick={(e: React.MouseEvent) => {
+                          e.stopPropagation();
+                          onDelete();
+                        }}>
+                        <Button variant="plain" icon={<Icon source={DeleteIcon} />} />
+                      </div>
+                    )}
+                  </InlineStack>
+                )}
+              </InlineStack>
+            ),
+          } as ComponentProps<typeof Button> & { children: ReactNode })}
+        />
+      </div>
+
+      {isExpanded && canExpand && (
+        <Collapsible open={isExpanded} id={`block-${block.id}-subblocks`}>
+          <Box paddingInlineStart="400">
+            {hasCurrentSubBlocks && block.blocks ? (
+              block.blocks.map(
+                (subBlock: { id: string; type: string; settings: Record<string, any>; name?: string }) => {
+                  const subBlockSchema = blockSchema?.blocks?.find((b: any) => b.type === subBlock.type);
+                  return (
+                    <BlockItem
+                      key={subBlock.id}
+                      block={subBlock}
+                      sectionId={sectionId}
+                      blockSchema={subBlockSchema}
+                      isSelected={selectedSubBlockId === subBlock.id}
+                      onSelect={() => {
+                        // Cuando se selecciona un sub-bloque, pasamos el subBlockId, blockId padre y sectionId
+                        if (onSelectSubBlock && parentBlockId) {
+                          onSelectSubBlock(subBlock.id, parentBlockId, sectionId);
+                        }
+                      }}
+                      parentBlockId={block.id}
+                      onDelete={onDelete}
+                      onToggleVisibility={onToggleVisibility}
+                    />
+                  );
+                }
+              )
+            ) : (
+              <Box padding="200">
+                <Text as="p" variant="bodySm" tone="subdued">
+                  No hay sub-bloques en este bloque
+                </Text>
+              </Box>
+            )}
+          </Box>
+        </Collapsible>
+      )}
+    </Box>
   );
 }
diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
index d780bdea..ba3ddcaa 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-group/SectionGroup.tsx
@@ -29,9 +29,11 @@ export interface SectionGroupProps {
   expandedSections: Set<string>;
   selectedSectionId: string | null;
   selectedBlockId: string | null;
+  selectedSubBlockId?: string | null;
   onToggleSection: (sectionId: string) => void;
   onSelectSection: (sectionId: string) => void;
   onSelectBlock: (blockId: string, sectionId: string) => void;
+  onSelectSubBlock?: (subBlockId: string, blockId: string, sectionId: string) => void;
   onAddSection?: () => void;
 }
 
@@ -69,9 +71,11 @@ export function SectionGroup({
   expandedSections,
   selectedSectionId,
   selectedBlockId,
+  selectedSubBlockId,
   onToggleSection,
   onSelectSection,
   onSelectBlock,
+  onSelectSubBlock,
   onAddSection,
 }: SectionGroupProps) {
   const sortedSections = sortSectionsByOrder(sections, sectionOrder);
@@ -95,9 +99,17 @@ export function SectionGroup({
               isExpanded={expandedSections.has(section.id)}
               isSelected={selectedSectionId === section.id}
               selectedBlockId={selectedBlockId}
+              selectedSubBlockId={selectedSubBlockId}
               onToggleExpand={() => onToggleSection(section.id)}
               onSelect={() => onSelectSection(section.id)}
               onSelectBlock={(blockId) => onSelectBlock(blockId, section.id)}
+              onSelectSubBlock={(subBlockId) => {
+                const sectionBlocks = 'blocks' in section ? section.blocks : [];
+                const parentBlock = sectionBlocks?.find((b: any) => b.blocks?.some((sb: any) => sb.id === subBlockId));
+                if (parentBlock && onSelectSubBlock) {
+                  onSelectSubBlock(subBlockId, parentBlock.id, section.id);
+                }
+              }}
             />
           ))}
 
diff --git a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
index 1a1c61a2..b5031d55 100644
--- a/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
+++ b/packages/theme-studio/src/presentation/components/sidebar/section-item/SectionItem.tsx
@@ -36,9 +36,11 @@ export interface SectionItemProps {
   isExpanded: boolean;
   isSelected: boolean;
   selectedBlockId: string | null;
+  selectedSubBlockId?: string | null;
   onToggleExpand: () => void;
   onSelect: () => void;
   onSelectBlock: (blockId: string) => void;
+  onSelectSubBlock?: (subBlockId: string) => void;
   onDelete?: () => void;
   onToggleVisibility?: () => void;
 }
@@ -52,9 +54,11 @@ export function SectionItem({
   isExpanded,
   isSelected,
   selectedBlockId,
+  selectedSubBlockId,
   onToggleExpand,
   onSelect,
   onSelectBlock,
+  onSelectSubBlock,
   onDelete,
   onToggleVisibility,
 }: SectionItemProps) {
@@ -73,6 +77,9 @@ export function SectionItem({
 
   const handleSectionClick = () => {
     onSelect();
+    if (canExpand && !isExpanded) {
+      onToggleExpand();
+    }
   };
 
   const ChevronIcon = isExpanded ? ChevronDownIcon : ChevronRightIcon;
@@ -164,23 +171,28 @@ export function SectionItem({
         <Collapsible open={isExpanded} id={`section-${section.id}-blocks`}>
           <Box>
             {hasCurrentBlocks && section.blocks ? (
-              section.blocks.map((block: { id: string; type: string; settings: Record<string, any> }) => {
-                const blockSchema = section.schema?.blocks?.find((b: any) => b.type === block.type);
-                return (
-                  <BlockItem
-                    key={block.id}
-                    block={block}
-                    sectionId={section.id}
-                    blockSchema={blockSchema}
-                    isSelected={selectedBlockId === block.id}
-                    onSelect={() => {
-                      onSelectBlock(block.id);
-                    }}
-                    onDelete={onDelete}
-                    onToggleVisibility={onToggleVisibility}
-                  />
-                );
-              })
+              section.blocks.map(
+                (block: { id: string; type: string; settings: Record<string, any>; name?: string; blocks?: any[] }) => {
+                  const blockSchema = section.schema?.blocks?.find((b: any) => b.type === block.type);
+                  return (
+                    <BlockItem
+                      key={block.id}
+                      block={block}
+                      sectionId={section.id}
+                      blockSchema={blockSchema}
+                      isSelected={selectedBlockId === block.id}
+                      selectedSubBlockId={selectedSubBlockId}
+                      onSelect={() => {
+                        onSelectBlock(block.id);
+                      }}
+                      onSelectSubBlock={onSelectSubBlock}
+                      parentBlockId={block.id}
+                      onDelete={onDelete}
+                      onToggleVisibility={onToggleVisibility}
+                    />
+                  );
+                }
+              )
             ) : (
               <Box padding="200">
                 <Text as="p" variant="bodySm" tone="subdued">
diff --git a/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts b/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
index f1253821..c0210731 100644
--- a/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
+++ b/packages/theme-studio/src/presentation/hooks/useSelectedSection.ts
@@ -40,6 +40,7 @@ interface UseSelectedSectionParams {
   currentPageId: string;
   selectedSectionId: string | null;
   selectedBlockId: string | null;
+  selectedSubBlockId?: string | null;
 }
 
 export function useSelectedSection({
@@ -48,6 +49,7 @@ export function useSelectedSection({
   currentPageId,
   selectedSectionId,
   selectedBlockId,
+  selectedSubBlockId,
 }: UseSelectedSectionParams): SelectedSectionData {
   const { template } = useTemplateStructure({
     storeId,
@@ -98,9 +100,23 @@ export function useSelectedSection({
       };
     }
 
-    // Si hay un bloque seleccionado, obtener sus datos
+    // Si hay un sub-bloque seleccionado, obtener sus datos primero
     let block = null;
-    if (selectedBlockId && section.blocks) {
+    if (selectedSubBlockId && selectedBlockId && section.blocks) {
+      const parentBlock = section.blocks.find((b: any) => b.id === selectedBlockId);
+      if (parentBlock?.blocks) {
+        const foundSubBlock = parentBlock.blocks.find((sb: any) => sb.id === selectedSubBlockId);
+        if (foundSubBlock) {
+          block = {
+            id: foundSubBlock.id,
+            type: foundSubBlock.type,
+            settings: foundSubBlock.settings || {},
+            name: foundSubBlock.name,
+          };
+        }
+      }
+    } else if (selectedBlockId && section.blocks) {
+      // Si hay un bloque seleccionado (no sub-bloque), obtener sus datos
       const foundBlock = section.blocks.find((b: any) => b.id === selectedBlockId);
       if (foundBlock) {
         block = {
@@ -112,17 +128,29 @@ export function useSelectedSection({
       }
     }
 
-    // Determinar qué schema usar (bloque o sección)
+    // Determinar qué schema usar (sub-bloque, bloque o sección)
     let schema = null;
     let currentSettings: Record<string, any> = {};
 
-    if (block) {
+    if (block && selectedSubBlockId && selectedBlockId) {
+      // Si es un sub-bloque, buscar su schema dentro del bloque padre
+      const parentBlock = section.blocks?.find((b: any) => b.id === selectedBlockId);
+      const parentBlockSchema = section.schema.blocks?.find((b: any) => b.type === parentBlock?.type);
+      const subBlockSchema = parentBlockSchema?.blocks?.find((b: any) => b.type === block.type);
+      if (subBlockSchema) {
+        schema = {
+          settings: subBlockSchema.settings || [],
+          blocks: [],
+        };
+        currentSettings = block.settings;
+      }
+    } else if (block) {
       // Buscar el schema del bloque en schema.blocks
       const blockSchema = section.schema.blocks?.find((b: any) => b.type === block.type);
       if (blockSchema) {
         schema = {
           settings: blockSchema.settings || [],
-          blocks: [],
+          blocks: blockSchema.blocks || [],
         };
         currentSettings = block.settings;
       }
@@ -141,5 +169,5 @@ export function useSelectedSection({
       schema,
       currentSettings,
     };
-  }, [template, layout, selectedSectionId, selectedBlockId]);
+  }, [template, layout, selectedSectionId, selectedBlockId, selectedSubBlockId]);
 }
diff --git a/packages/theme-studio/src/presentation/hooks/useSidebarState.ts b/packages/theme-studio/src/presentation/hooks/useSidebarState.ts
index ce45285c..28d8219a 100644
--- a/packages/theme-studio/src/presentation/hooks/useSidebarState.ts
+++ b/packages/theme-studio/src/presentation/hooks/useSidebarState.ts
@@ -20,9 +20,11 @@ export interface UseSidebarStateResult {
   expandedSections: Set<string>;
   selectedSectionId: string | null;
   selectedBlockId: string | null;
+  selectedSubBlockId: string | null;
   toggleSection: (sectionId: string) => void;
   selectSection: (sectionId: string) => void;
   selectBlock: (blockId: string, sectionId: string) => void;
+  selectSubBlock: (subBlockId: string, blockId: string, sectionId: string) => void;
   clearSelection: () => void;
 }
 
@@ -30,6 +32,7 @@ export function useSidebarState(): UseSidebarStateResult {
   const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());
   const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null);
   const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+  const [selectedSubBlockId, setSelectedSubBlockId] = useState<string | null>(null);
 
   const toggleSection = useCallback((sectionId: string) => {
     setExpandedSections((prev) => {
@@ -46,25 +49,36 @@ export function useSidebarState(): UseSidebarStateResult {
   const selectSection = useCallback((sectionId: string) => {
     setSelectedSectionId(sectionId);
     setSelectedBlockId(null);
+    setSelectedSubBlockId(null);
   }, []);
 
   const selectBlock = useCallback((blockId: string, sectionId: string) => {
     setSelectedSectionId(sectionId);
     setSelectedBlockId(blockId);
+    setSelectedSubBlockId(null);
+  }, []);
+
+  const selectSubBlock = useCallback((subBlockId: string, blockId: string, sectionId: string) => {
+    setSelectedSectionId(sectionId);
+    setSelectedBlockId(blockId);
+    setSelectedSubBlockId(subBlockId);
   }, []);
 
   const clearSelection = useCallback(() => {
     setSelectedSectionId(null);
     setSelectedBlockId(null);
+    setSelectedSubBlockId(null);
   }, []);
 
   return {
     expandedSections,
     selectedSectionId,
     selectedBlockId,
+    selectedSubBlockId,
     toggleSection,
     selectSection,
     selectBlock,
+    selectSubBlock,
     clearSelection,
   };
 }

From aad395b1fb0423566a14c2a66fc95c1bab34063c Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 13:21:17 -0500
Subject: [PATCH 31/49] Add fasttifyAttributesFilter to filters and update
 related components for sub-block support

This commit introduces the fasttifyAttributesFilter to the main filters export, enhancing the filtering capabilities. It also updates the ThemeStudio and related components to support sub-block selection, allowing for improved management of nested elements. Changes include modifications to the event handlers and selection logic to accommodate the new sub-block structure, enhancing user interaction and overall functionality in the Theme Studio.
---
 packages/liquid-forge/liquid/filters.ts       |   3 +
 .../filters/fasttify-attributes-filter.ts     | 219 ++++++++++++++++++
 .../liquid/filters/html-filters.ts            | 114 ---------
 .../rendering/fasttify-attributes-builder.ts  |  25 +-
 .../presentation/components/ThemeStudio.tsx   |  10 +-
 .../components/preview/PreviewPane.tsx        |   5 +-
 .../presentation/hooks/useIframeSelection.ts  |  19 +-
 .../iframe-selection-script/event-handlers.js |  11 +-
 .../iframe-selection-script/selection.js      |  18 +-
 .../utils/iframe-selection-script/utils.js    |  22 +-
 10 files changed, 305 insertions(+), 141 deletions(-)
 create mode 100644 packages/liquid-forge/liquid/filters/fasttify-attributes-filter.ts

diff --git a/packages/liquid-forge/liquid/filters.ts b/packages/liquid-forge/liquid/filters.ts
index 0877e34f..9c581cc2 100644
--- a/packages/liquid-forge/liquid/filters.ts
+++ b/packages/liquid-forge/liquid/filters.ts
@@ -21,6 +21,7 @@ export { dataAccessFilters } from './filters/data-access-filters';
 export { ecommerceFilters } from './filters/ecommerce-filters';
 export { htmlFilters } from './filters/html-filters';
 export { moneyFilters } from './filters/money-filters';
+export { fasttifyAttributesFilter } from './filters/fasttify-attributes-filter';
 
 // Importar todos los filtros para el array principal
 import { baseFilters } from './filters/base-filters';
@@ -29,6 +30,7 @@ import { dataAccessFilters } from './filters/data-access-filters';
 import { ecommerceFilters } from './filters/ecommerce-filters';
 import { htmlFilters } from './filters/html-filters';
 import { moneyFilters } from './filters/money-filters';
+import { fasttifyAttributesFilter } from './filters/fasttify-attributes-filter';
 
 import type { LiquidFilter } from '../types';
 
@@ -42,6 +44,7 @@ export const allFilters: LiquidFilter[] = [
   ...htmlFilters,
   ...cartFilters,
   ...dataAccessFilters,
+  fasttifyAttributesFilter,
 ];
 
 export const ecommerceFiltersLegacy = allFilters;
diff --git a/packages/liquid-forge/liquid/filters/fasttify-attributes-filter.ts b/packages/liquid-forge/liquid/filters/fasttify-attributes-filter.ts
new file mode 100644
index 00000000..b633031e
--- /dev/null
+++ b/packages/liquid-forge/liquid/filters/fasttify-attributes-filter.ts
@@ -0,0 +1,219 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { logger } from '../../lib/logger';
+import type { LiquidFilter } from '../../types';
+
+/**
+ * Filtro fasttify_attributes - Genera atributos data-section-id, data-block-id y data-sub-block-id
+ * para selección de elementos en Theme Studio.
+ *
+ * Compatible con el formato de Shopify: {{ block.fasttify_attributes }} o {{ section.fasttify_attributes }}
+ *
+ * @example
+ * // En bloques:
+ * <div {{ block.fasttify_attributes }}>
+ * // Genera: data-section-id="hero" data-block-id="hero-button-1"
+ *
+ * @example
+ * // En secciones:
+ * <section {{ section.fasttify_attributes }}>
+ * // Genera: data-section-id="hero"
+ *
+ * @example
+ * // En sub-bloques (bloques anidados):
+ * <div {{ sub_block.fasttify_attributes }}>
+ * // Genera: data-section-id="hero" data-block-id="card-1" data-sub-block-id="image-1"
+ *
+ * @description
+ * Este filtro detecta automáticamente si el objeto es:
+ * - Una sección: genera solo data-section-id y data-section-name
+ * - Un bloque normal: genera data-section-id, data-block-id y data-block-name
+ * - Un sub-bloque: genera data-section-id, data-block-id (padre), data-sub-block-id y data-sub-block-name
+ *
+ * Los nombres se obtienen con la siguiente prioridad:
+ * 1. Nombre personalizado del objeto (obj.name desde el JSON)
+ * 2. Nombre del schema (schema.blocks[].name o schema.name)
+ * 3. ID del objeto como fallback
+ *
+ * @param {any} obj - El objeto block o section del cual generar los atributos
+ * @param {any} [parentBlock] - El bloque padre (opcional, solo para sub-bloques)
+ * @returns {string} String con los atributos HTML listos para usar (ej: ' data-section-id="hero" data-block-id="btn-1"')
+ *
+ * @throws {Error} Logs errores pero no lanza excepciones para no romper el renderizado
+ */
+export const fasttifyAttributesFilter: LiquidFilter = {
+  name: 'fasttify_attributes',
+  filter: function (obj?: any, parentBlock?: any): string {
+    try {
+      let sectionId: string | undefined;
+      let blockId: string | undefined;
+      let subBlockId: string | undefined;
+      let isSubBlock = false;
+
+      // Cuando se llama {{ block.fasttify_attributes }}, obj es el objeto block
+      // Cuando se llama {{ section.fasttify_attributes }}, obj es el objeto section
+      if (obj && typeof obj === 'object') {
+        // Detectar si es un block o una section
+        // Los blocks típicamente tienen 'type' y están dentro de un contexto de section
+        // Las sections tienen 'blocks' array o están en el contexto global de section
+        const isBlock = 'type' in obj && typeof obj.type === 'string';
+
+        if (isBlock) {
+          // Verificar si es un sub-bloque (tiene parentBlock o está dentro de otro bloque)
+          if (parentBlock || (this.context?.getSync && this.context.getSync(['parentBlock']))) {
+            isSubBlock = true;
+            subBlockId = obj.id;
+            // Si hay parentBlock pasado como argumento, obtener su blockId
+            if (parentBlock?.id) {
+              blockId = parentBlock.id;
+            } else {
+              // Intentar obtener del contexto
+              try {
+                const parentBlockFromContext = this.context?.getSync(['parentBlock']);
+                if (parentBlockFromContext?.id) {
+                  blockId = parentBlockFromContext.id;
+                }
+              } catch (error) {
+                // Ignorar errores silenciosamente
+              }
+            }
+          } else {
+            // Es un block normal, necesitamos block.id y section.id del contexto
+            blockId = obj.id;
+          }
+
+          // Intentar obtener section.id del contexto
+          try {
+            const section = this.context?.getSync(['section']);
+            if (section?.id) {
+              sectionId = section.id;
+            }
+          } catch (error) {
+            // Ignorar errores silenciosamente
+          }
+        } else {
+          // Es una section, solo necesitamos section.id
+          if (obj.id) {
+            sectionId = obj.id;
+          }
+        }
+      }
+
+      // Si aún no tenemos sectionId o blockId, intentar leer del contexto directamente
+      if (!sectionId || !blockId) {
+        try {
+          if (!sectionId) {
+            const section = this.context?.getSync(['section']);
+            if (section?.id) {
+              sectionId = section.id;
+            }
+          }
+
+          if (!blockId) {
+            const block = this.context?.getSync(['block']);
+            if (block?.id) {
+              blockId = block.id;
+            }
+          }
+        } catch (error) {
+          // Ignorar errores silenciosamente
+        }
+      }
+
+      // Construir los atributos
+      const attributes: string[] = [];
+
+      if (sectionId) {
+        attributes.push(`data-section-id="${sectionId}"`);
+      }
+
+      if (isSubBlock && subBlockId) {
+        // Es un sub-bloque: agregar data-block-id (padre) y data-sub-block-id (actual)
+        if (blockId) {
+          attributes.push(`data-block-id="${blockId}"`);
+        }
+        attributes.push(`data-sub-block-id="${subBlockId}"`);
+
+        try {
+          const section = this.context?.getSync(['section']);
+          const parentBlockFromContext = parentBlock || this.context?.getSync(['parentBlock']);
+
+          // Prioridad: nombre personalizado del sub-bloque > nombre del schema
+          let subBlockName: string | undefined;
+
+          // 1. Intentar obtener el nombre personalizado del sub-bloque (si existe en el JSON)
+          if (obj.name && typeof obj.name === 'string') {
+            subBlockName = obj.name;
+          }
+
+          // 2. Si no hay nombre personalizado, usar el nombre del schema del sub-bloque
+          if (!subBlockName && parentBlockFromContext && section?.schema?.blocks) {
+            const parentBlockSchema = section.schema.blocks.find((b: any) => b.type === parentBlockFromContext.type);
+            const subBlockSchema = parentBlockSchema?.blocks?.find((b: any) => b.type === obj.type);
+            subBlockName = subBlockSchema?.name;
+          }
+
+          if (subBlockName) {
+            attributes.push(`data-sub-block-name="${subBlockName}"`);
+          }
+        } catch (error) {
+          // Ignorar errores silenciosamente
+        }
+      } else if (blockId) {
+        // Es un bloque normal
+        attributes.push(`data-block-id="${blockId}"`);
+        try {
+          const section = this.context?.getSync(['section']);
+          // Prioridad: nombre personalizado del bloque > nombre del schema
+          let blockName: string | undefined;
+
+          // 1. Intentar obtener el nombre personalizado del bloque (si existe en el JSON)
+          if (obj.name && typeof obj.name === 'string') {
+            blockName = obj.name;
+          }
+
+          // 2. Si no hay nombre personalizado, usar el nombre del schema
+          if (!blockName && section?.schema?.blocks) {
+            const blockSchema = section.schema.blocks.find((b: any) => b.type === obj.type);
+            blockName = blockSchema?.name;
+          }
+
+          if (blockName) {
+            attributes.push(`data-block-name="${blockName}"`);
+          }
+        } catch (error) {
+          // Ignorar errores silenciosamente
+        }
+      } else if (sectionId) {
+        // Es una sección
+        try {
+          const section = this.context?.getSync(['section']);
+          if (section?.schema?.name) {
+            attributes.push(`data-section-name="${section.schema.name}"`);
+          }
+        } catch (error) {
+          // Ignorar errores silenciosamente
+        }
+      }
+
+      return attributes.length > 0 ? ` ${attributes.join(' ')}` : '';
+    } catch (error) {
+      logger.error('fasttify_attributes: Error generating fasttify attributes', error);
+      return '';
+    }
+  },
+};
diff --git a/packages/liquid-forge/liquid/filters/html-filters.ts b/packages/liquid-forge/liquid/filters/html-filters.ts
index a22bce80..c28df14d 100644
--- a/packages/liquid-forge/liquid/filters/html-filters.ts
+++ b/packages/liquid-forge/liquid/filters/html-filters.ts
@@ -228,119 +228,6 @@ export const inlineAssetContentFilter: LiquidFilter = {
   },
 };
 
-/**
- * Filtro fasttify_attributes - Genera atributos data-section-id y data-block-id para selección en Theme Studio
- * Compatible con el formato de Shopify: {{ block.fasttify_attributes }} o {{ section.fasttify_attributes }}
- *
- * Uso:
- * - En bloques: <div {{ block.fasttify_attributes }}>
- * - En secciones: <section {{ section.fasttify_attributes }}>
- *
- * Genera: data-section-id="hero" data-block-id="hero-button-1"
- */
-export const fasttifyAttributesFilter: LiquidFilter = {
-  name: 'fasttify_attributes',
-  filter: function (obj?: any): string {
-    try {
-      let sectionId: string | undefined;
-      let blockId: string | undefined;
-
-      // Cuando se llama {{ block.fasttify_attributes }}, obj es el objeto block
-      // Cuando se llama {{ section.fasttify_attributes }}, obj es el objeto section
-      if (obj && typeof obj === 'object') {
-        // Detectar si es un block o una section
-        // Los blocks típicamente tienen 'type' y están dentro de un contexto de section
-        // Las sections tienen 'blocks' array o están en el contexto global de section
-        const isBlock = 'type' in obj && typeof obj.type === 'string' && !('blocks' in obj);
-
-        if (isBlock) {
-          // Es un block, necesitamos block.id y section.id del contexto
-          blockId = obj.id;
-
-          // Intentar obtener section.id del contexto
-          try {
-            const section = this.context?.getSync(['section']);
-            if (section?.id) {
-              sectionId = section.id;
-            }
-          } catch (error) {
-            // Ignorar errores silenciosamente
-          }
-        } else {
-          // Es una section, solo necesitamos section.id
-          if (obj.id) {
-            sectionId = obj.id;
-          }
-        }
-      }
-
-      // Si aún no tenemos sectionId o blockId, intentar leer del contexto directamente
-      if (!sectionId || !blockId) {
-        try {
-          if (!sectionId) {
-            const section = this.context?.getSync(['section']);
-            if (section?.id) {
-              sectionId = section.id;
-            }
-          }
-
-          if (!blockId) {
-            const block = this.context?.getSync(['block']);
-            if (block?.id) {
-              blockId = block.id;
-            }
-          }
-        } catch (error) {
-          // Ignorar errores silenciosamente
-        }
-      }
-
-      // Construir los atributos
-      const attributes: string[] = [];
-
-      if (sectionId) {
-        attributes.push(`data-section-id="${sectionId}"`);
-      }
-
-      if (blockId) {
-        attributes.push(`data-block-id="${blockId}"`);
-        try {
-          const section = this.context?.getSync(['section']);
-          // Prioridad: nombre personalizado del bloque > nombre del schema
-          let blockName: string | undefined;
-
-          // 1. Intentar obtener el nombre personalizado del bloque (si existe en el JSON)
-          if (obj.name && typeof obj.name === 'string') {
-            blockName = obj.name;
-          }
-
-          // 2. Si no hay nombre personalizado, usar el nombre del schema
-          if (!blockName && section?.schema?.blocks) {
-            const blockSchema = section.schema.blocks.find((b: any) => b.type === obj.type);
-            blockName = blockSchema?.name;
-          }
-
-          if (blockName) {
-            attributes.push(`data-block-name="${blockName}"`);
-          }
-        } catch (error) {}
-      } else if (sectionId) {
-        try {
-          const section = this.context?.getSync(['section']);
-          if (section?.schema?.name) {
-            attributes.push(`data-section-name="${section.schema.name}"`);
-          }
-        } catch (error) {}
-      }
-
-      return attributes.length > 0 ? ` ${attributes.join(' ')}` : '';
-    } catch (error) {
-      logger.error('fasttify_attributes: Error generating fasttify attributes', error);
-      return '';
-    }
-  },
-};
-
 export const htmlFilters: LiquidFilter[] = [
   assetUrlFilter,
   linkToFilter,
@@ -349,5 +236,4 @@ export const htmlFilters: LiquidFilter[] = [
   defaultPaginationFilter,
   imgTagFilter,
   inlineAssetContentFilter,
-  fasttifyAttributesFilter,
 ];
diff --git a/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts b/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
index c8b2f414..e272db0e 100644
--- a/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
+++ b/packages/liquid-forge/services/rendering/fasttify-attributes-builder.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { fasttifyAttributesFilter } from '../../liquid/filters/html-filters';
+import { fasttifyAttributesFilter } from '../../liquid/filters';
 
 interface SectionWithAttributes {
   id: string;
@@ -35,6 +35,8 @@ interface BlockWithAttributes {
   id: string;
   type: string;
   settings: Record<string, any>;
+  name?: string;
+  blocks?: BlockWithAttributes[];
   fasttify_attributes: string;
 }
 
@@ -73,7 +75,7 @@ export function createSectionWithAttributes(
   };
 
   // Ahora asignar los bloques después de que sectionObject esté inicializado
-  sectionObject.blocks = blocks.map((block: any) => createBlockWithAttributes(block, sectionObject));
+  sectionObject.blocks = blocks.map((block: any) => createBlockWithAttributes(block, sectionObject, null));
 
   return sectionObject;
 }
@@ -81,8 +83,15 @@ export function createSectionWithAttributes(
 /**
  * Crea un objeto block con la propiedad fasttify_attributes como getter
  * Cuando LiquidJS accede a block.fasttify_attributes, ejecuta el filtro directamente
+ * @param block - El bloque a crear
+ * @param sectionObject - La sección padre
+ * @param parentBlock - El bloque padre (si es un sub-bloque)
  */
-function createBlockWithAttributes(block: any, sectionObject: SectionWithAttributes): BlockWithAttributes {
+function createBlockWithAttributes(
+  block: any,
+  sectionObject: SectionWithAttributes,
+  parentBlock: BlockWithAttributes | null
+): BlockWithAttributes {
   const blockWithAttributes: BlockWithAttributes = {
     ...block,
     get fasttify_attributes() {
@@ -90,12 +99,20 @@ function createBlockWithAttributes(block: any, sectionObject: SectionWithAttribu
         getSync: (path: string[]) => {
           if (path[0] === 'section') return sectionObject;
           if (path[0] === 'block') return blockWithAttributes;
+          if (path[0] === 'parentBlock' && parentBlock) return parentBlock;
           return undefined;
         },
       };
-      return fasttifyAttributesFilter.filter.call({ context: mockContext }, blockWithAttributes);
+      return fasttifyAttributesFilter.filter.call({ context: mockContext }, blockWithAttributes, parentBlock);
     },
   };
 
+  // Si el bloque tiene sub-bloques, crearlos recursivamente
+  if (block.blocks && Array.isArray(block.blocks)) {
+    blockWithAttributes.blocks = block.blocks.map((subBlock: any) =>
+      createBlockWithAttributes(subBlock, sectionObject, blockWithAttributes)
+    );
+  }
+
   return blockWithAttributes;
 }
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index c39ac72c..7072be09 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -61,10 +61,15 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
   }, [selectedSectionData]);
 
   const handleElementClick = useCallback(
-    (sectionId: string | null, blockId: string | null) => {
-      if (blockId && sectionId) {
+    (sectionId: string | null, blockId: string | null, subBlockId?: string | null) => {
+      if (subBlockId && blockId && sectionId) {
+        // Si hay subBlockId, seleccionar el sub-bloque
+        sidebarState.selectSubBlock(subBlockId, blockId, sectionId);
+      } else if (blockId && sectionId) {
+        // Si solo hay blockId, seleccionar el bloque
         sidebarState.selectBlock(blockId, sectionId);
       } else if (sectionId) {
+        // Si solo hay sectionId, seleccionar la sección
         sidebarState.selectSection(sectionId);
       } else {
         sidebarState.clearSelection();
@@ -117,6 +122,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
               currentPath={currentPath}
               selectedSectionId={sidebarState.selectedSectionId}
               selectedBlockId={sidebarState.selectedBlockId}
+              selectedSubBlockId={sidebarState.selectedSubBlockId}
               selectedElementName={selectedElementName}
               onPathChange={(newPath) => {
                 setCurrentPath(newPath);
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index 0697ab96..e60697d2 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -16,9 +16,10 @@ interface PreviewPaneProps {
   currentPath?: string;
   selectedSectionId?: string | null;
   selectedBlockId?: string | null;
+  selectedSubBlockId?: string | null;
   selectedElementName?: string | null;
   onPathChange?: (newPath: string) => void;
-  onElementClick?: (sectionId: string | null, blockId: string | null) => void;
+  onElementClick?: (sectionId: string | null, blockId: string | null, subBlockId?: string | null) => void;
 }
 
 export function PreviewPane({
@@ -27,6 +28,7 @@ export function PreviewPane({
   currentPath = '/',
   selectedSectionId,
   selectedBlockId,
+  selectedSubBlockId,
   selectedElementName,
   onPathChange,
   onElementClick,
@@ -44,6 +46,7 @@ export function PreviewPane({
     iframeRef,
     selectedSectionId: selectedSectionId || null,
     selectedBlockId: selectedBlockId || null,
+    selectedSubBlockId: selectedSubBlockId || null,
     selectedElementName: selectedElementName || null,
     domain,
     onElementClick,
diff --git a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
index 3b7f956c..bcb2d1e3 100644
--- a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
+++ b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
@@ -22,9 +22,10 @@ interface UseIframeSelectionParams {
   iframeRef: RefObject<HTMLIFrameElement | null>;
   selectedSectionId: string | null;
   selectedBlockId: string | null;
+  selectedSubBlockId?: string | null;
   selectedElementName?: string | null;
   domain?: string | null;
-  onElementClick?: (sectionId: string | null, blockId: string | null) => void;
+  onElementClick?: (sectionId: string | null, blockId: string | null, subBlockId?: string | null) => void;
 }
 
 /**
@@ -39,6 +40,7 @@ export function useIframeSelection({
   iframeRef,
   selectedSectionId,
   selectedBlockId,
+  selectedSubBlockId,
   selectedElementName,
   domain,
   onElementClick,
@@ -46,6 +48,7 @@ export function useIframeSelection({
   const scriptInjectedRef = useRef(false);
   const lastSelectedSectionIdRef = useRef<string | null>(null);
   const lastSelectedBlockIdRef = useRef<string | null>(null);
+  const lastSelectedSubBlockIdRef = useRef<string | null>(null);
 
   // Inyectar script en el iframe cuando carga
   useEffect(() => {
@@ -123,11 +126,11 @@ export function useIframeSelection({
       }
 
       if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_ELEMENT_CLICKED') {
-        const { sectionId, blockId } = event.data;
+        const { sectionId, blockId, subBlockId } = event.data;
 
-        // Notificar al componente padre
+        // Notificar al componente padre con todos los IDs disponibles
         if (onElementClick) {
-          onElementClick(sectionId || null, blockId || null);
+          onElementClick(sectionId || null, blockId || null, subBlockId || null);
         }
       }
     };
@@ -145,12 +148,17 @@ export function useIframeSelection({
     if (!iframe) return;
 
     // Solo enviar si realmente cambió la selección
-    if (selectedSectionId === lastSelectedSectionIdRef.current && selectedBlockId === lastSelectedBlockIdRef.current) {
+    if (
+      selectedSectionId === lastSelectedSectionIdRef.current &&
+      selectedBlockId === lastSelectedBlockIdRef.current &&
+      selectedSubBlockId === lastSelectedSubBlockIdRef.current
+    ) {
       return;
     }
 
     lastSelectedSectionIdRef.current = selectedSectionId;
     lastSelectedBlockIdRef.current = selectedBlockId;
+    lastSelectedSubBlockIdRef.current = selectedSubBlockId || null;
 
     try {
       const iframeWindow = iframe.contentWindow;
@@ -161,6 +169,7 @@ export function useIframeSelection({
         type: 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT',
         sectionId: selectedSectionId,
         blockId: selectedBlockId,
+        subBlockId: selectedSubBlockId || null,
         elementName: selectedElementName || null,
         timestamp,
       };
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
index 6cf8ecc6..64b68628 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
@@ -59,13 +59,14 @@ function eventHandlersModule() {
       }
 
       // Siempre enviar el mensaje de selección, pero no interferir con elementos interactivos
-      const { sectionId, blockId } = getElementIds(selectableElement);
+      const { sectionId, blockId, subBlockId } = getElementIds(selectableElement);
       if (window.parent) {
         window.parent.postMessage(
           {
             type: 'FASTTIFY_THEME_STUDIO_ELEMENT_CLICKED',
             sectionId,
             blockId,
+            subBlockId,
           },
           '*'
         );
@@ -176,7 +177,13 @@ function eventHandlersModule() {
     const isSameOrigin = event.origin === window.location.origin;
     if (!isSameOrigin && !isLocalhost) return;
     if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT') {
-      selectElement(event.data.sectionId, event.data.blockId, event.data.timestamp, event.data.elementName);
+      selectElement(
+        event.data.sectionId,
+        event.data.blockId,
+        event.data.subBlockId,
+        event.data.timestamp,
+        event.data.elementName
+      );
     } else if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_CLEAR_SELECTION') {
       clearSelection();
       lastSelectionTimestamp = 0;
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
index a026e395..e50f40cc 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/selection.js
@@ -118,13 +118,14 @@ function selectionModule() {
   }
 
   /**
-   * Selecciona un elemento por su sectionId o blockId y hace scroll suave hacia él
+   * Selecciona un elemento por su sectionId, blockId o subBlockId y hace scroll suave hacia él
    * @param {string|null} sectionId - ID de la sección a seleccionar
    * @param {string|null} blockId - ID del bloque a seleccionar
+   * @param {string|null} subBlockId - ID del sub-bloque a seleccionar
    * @param {number} [timestamp] - Timestamp para ignorar mensajes obsoletos
    * @param {string} [elementName] - Nombre del elemento a mostrar en la etiqueta
    */
-  function selectElement(sectionId, blockId, timestamp, elementName) {
+  function selectElement(sectionId, blockId, subBlockId, timestamp, elementName) {
     // Ignorar mensajes obsoletos
     if (timestamp && timestamp < lastSelectionTimestamp) {
       return;
@@ -137,12 +138,17 @@ function selectionModule() {
     }
 
     clearSelection();
-    if (!sectionId && !blockId) return;
+    if (!sectionId && !blockId && !subBlockId) return;
     let selector = '';
-    if (blockId) {
-      selector = '[data-block-id="' + blockId + '"]';
+    if (subBlockId) {
+      // Si hay subBlockId, buscar por data-sub-block-id
+      selector = '[data-sub-block-id="' + subBlockId + '"]';
+    } else if (blockId) {
+      // Si hay blockId pero no subBlockId, buscar por data-block-id (y asegurarse de que no tenga data-sub-block-id)
+      selector = '[data-block-id="' + blockId + '"]:not([data-sub-block-id])';
     } else if (sectionId) {
-      selector = '[data-section-id="' + sectionId + '"]';
+      // Si solo hay sectionId, buscar por data-section-id (y asegurarse de que no tenga data-block-id)
+      selector = '[data-section-id="' + sectionId + '"]:not([data-block-id])';
     }
     if (selector) {
       const element = document.querySelector(selector);
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js
index b67d1acb..ea1f4aa8 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/utils.js
@@ -27,7 +27,7 @@ import { extractFunctionBody } from './extract-function-body.js';
  */
 function utilsModule() {
   /**
-   * Busca el elemento seleccionable más cercano (con data-section-id o data-block-id)
+   * Busca el elemento seleccionable más cercano (con data-section-id, data-block-id o data-sub-block-id)
    * subiendo en el árbol DOM desde el elemento dado
    * @param {Element|null} element - El elemento desde donde comenzar la búsqueda
    * @returns {Element|null} El elemento seleccionable encontrado o null
@@ -36,7 +36,12 @@ function utilsModule() {
     if (!element) return null;
     let current = element;
     while (current && current.nodeType === 1) {
-      if (current.hasAttribute && (current.hasAttribute('data-section-id') || current.hasAttribute('data-block-id'))) {
+      if (
+        current.hasAttribute &&
+        (current.hasAttribute('data-section-id') ||
+          current.hasAttribute('data-block-id') ||
+          current.hasAttribute('data-sub-block-id'))
+      ) {
         return current;
       }
       current = current.parentElement;
@@ -45,14 +50,15 @@ function utilsModule() {
   }
 
   /**
-   * Extrae los IDs de sección y bloque de un elemento
+   * Extrae los IDs de sección, bloque y sub-bloque de un elemento
    * @param {Element} element - El elemento del cual extraer los IDs
-   * @returns {{sectionId: string|null, blockId: string|null}} Objeto con sectionId y blockId
+   * @returns {{sectionId: string|null, blockId: string|null, subBlockId: string|null}} Objeto con sectionId, blockId y subBlockId
    */
   function getElementIds(element) {
     return {
       sectionId: element.getAttribute('data-section-id'),
       blockId: element.getAttribute('data-block-id'),
+      subBlockId: element.getAttribute('data-sub-block-id'),
     };
   }
 
@@ -63,13 +69,15 @@ function utilsModule() {
    */
   function getElementName(element) {
     if (!element) return null;
-    // Prioridad: data-block-name > data-section-name > blockId > sectionId
+    // Prioridad: data-sub-block-name > data-block-name > data-section-name > subBlockId > blockId > sectionId
+    const subBlockName = element.getAttribute('data-sub-block-name');
+    if (subBlockName) return subBlockName;
     const blockName = element.getAttribute('data-block-name');
     if (blockName) return blockName;
     const sectionName = element.getAttribute('data-section-name');
     if (sectionName) return sectionName;
-    const { blockId, sectionId } = getElementIds(element);
-    return blockId || sectionId || null;
+    const { subBlockId, blockId, sectionId } = getElementIds(element);
+    return subBlockId || blockId || sectionId || null;
   }
 }
 

From 04381014eeb8a25a6d117505240f1af43c49e735 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 13:28:18 -0500
Subject: [PATCH 32/49] Refactor fasttifyAttributesFilter for improved parent
 block handling and integrate into htmlFilters

This commit enhances the fasttifyAttributesFilter by refining the logic for detecting parent blocks, ensuring more robust handling of nested structures. Additionally, the filter is now included in the main htmlFilters export, expanding its availability for use in the application. These changes improve the overall functionality and maintainability of the filtering system.
---
 .../filters/fasttify-attributes-filter.ts     | 22 +++++++++++++++++--
 .../liquid/filters/html-filters.ts            |  2 ++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/liquid-forge/liquid/filters/fasttify-attributes-filter.ts b/packages/liquid-forge/liquid/filters/fasttify-attributes-filter.ts
index b633031e..e437784b 100644
--- a/packages/liquid-forge/liquid/filters/fasttify-attributes-filter.ts
+++ b/packages/liquid-forge/liquid/filters/fasttify-attributes-filter.ts
@@ -74,7 +74,18 @@ export const fasttifyAttributesFilter: LiquidFilter = {
 
         if (isBlock) {
           // Verificar si es un sub-bloque (tiene parentBlock o está dentro de otro bloque)
-          if (parentBlock || (this.context?.getSync && this.context.getSync(['parentBlock']))) {
+          let hasParentBlock = false;
+          if (parentBlock) {
+            hasParentBlock = true;
+          } else {
+            try {
+              hasParentBlock = !!(this.context?.getSync && this.context.getSync(['parentBlock']));
+            } catch (error) {
+              // Ignorar errores silenciosamente
+            }
+          }
+
+          if (hasParentBlock) {
             isSubBlock = true;
             subBlockId = obj.id;
             // Si hay parentBlock pasado como argumento, obtener su blockId
@@ -150,7 +161,14 @@ export const fasttifyAttributesFilter: LiquidFilter = {
 
         try {
           const section = this.context?.getSync(['section']);
-          const parentBlockFromContext = parentBlock || this.context?.getSync(['parentBlock']);
+          let parentBlockFromContext = parentBlock;
+          if (!parentBlockFromContext) {
+            try {
+              parentBlockFromContext = this.context?.getSync(['parentBlock']);
+            } catch (error) {
+              // Ignorar errores silenciosamente
+            }
+          }
 
           // Prioridad: nombre personalizado del sub-bloque > nombre del schema
           let subBlockName: string | undefined;
diff --git a/packages/liquid-forge/liquid/filters/html-filters.ts b/packages/liquid-forge/liquid/filters/html-filters.ts
index c28df14d..d3372b64 100644
--- a/packages/liquid-forge/liquid/filters/html-filters.ts
+++ b/packages/liquid-forge/liquid/filters/html-filters.ts
@@ -17,6 +17,7 @@
 import { logger } from '../../lib/logger';
 import type { LiquidFilter } from '../../types';
 import { PATH_PATTERNS } from '../../lib/regex-patterns';
+import { fasttifyAttributesFilter } from './fasttify-attributes-filter';
 
 /**
  * Filtro asset_url - Para archivos estáticos (CSS, JS, imágenes de tema)
@@ -236,4 +237,5 @@ export const htmlFilters: LiquidFilter[] = [
   defaultPaginationFilter,
   imgTagFilter,
   inlineAssetContentFilter,
+  fasttifyAttributesFilter,
 ];

From 64aa8dc0a76a4204037fb71bf5c5af6060038dba Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 16:15:06 -0500
Subject: [PATCH 33/49] Update pnpm-lock.yaml for AWS SDK version consistency
 and enhance Theme Studio with new use cases and settings management

This commit updates the pnpm-lock.yaml to ensure consistent versions of AWS SDK dependencies. Additionally, it introduces new use cases in the Theme Studio for updating section, block, and sub-block settings, as well as saving changes. The template entity is also enhanced with optional name and blocks properties, and the template repository interface is updated to include template type in the saveTemplate method. Furthermore, the SettingsPane component is refactored to utilize a new useSettingsPane hook for improved state management and hot reload functionality.
---
 app/api/stores/[storeId]/dev/update/route.ts  | 115 ++++++
 app/api/stores/[storeId]/dev/ws/route.ts      |  46 +++
 .../update-block-setting.use-case.ts          |  88 +++++
 .../update-section-setting.use-case.ts        |  82 +++++
 .../update-sub-block-setting.use-case.ts      |  96 +++++
 .../dev-server/controllers/sse-controller.ts  | 218 ++++++++++++
 .../domain/entities/dev-session.entity.ts     |  82 +++++
 .../domain/ports/section-renderer.port.ts     |  47 +++
 .../domain/ports/template-loader.port.ts      |  38 ++
 .../adapters/section-renderer.adapter.ts      | 102 ++++++
 .../adapters/template-loader.adapter.ts       |  60 ++++
 .../services/dev-session-manager.service.ts   | 102 ++++++
 .../src/application/use-cases/index.ts        |   4 +
 .../use-cases/save-changes.use-case.ts        |  49 +++
 .../update-block-setting.use-case.ts          |  49 +++
 .../update-section-setting.use-case.ts        |  52 +++
 .../update-sub-block-setting.use-case.ts      |  50 +++
 .../domain/entities/editor-session.entity.ts  |  74 ++++
 .../theme-studio/src/domain/entities/index.ts |   1 +
 .../src/domain/entities/template.entity.ts    |   2 +
 .../src/domain/ports/dev-server.port.ts       | 116 ++++++
 .../theme-studio/src/domain/ports/index.ts    |  10 +
 .../src/domain/ports/template-manager.port.ts |  57 +++
 .../domain/ports/template-renderer.port.ts    |  54 +++
 .../domain/ports/template-repository.port.ts  |   3 +-
 .../adapters/dev-server.adapter.ts            | 330 ++++++++++++++++++
 .../adapters/template-manager.adapter.ts      | 159 +++++++++
 .../adapters/template-repository.adapter.ts   |   4 +-
 .../presentation/components/ThemeStudio.tsx   |  14 +-
 .../components/preview/PreviewPane.tsx        |   5 +-
 .../components/settings/SettingsPane.tsx      |  57 +--
 .../src/presentation/hooks/useDevServer.ts    | 141 ++++++++
 .../src/presentation/hooks/useHotReload.ts    | 202 +++++++++++
 .../src/presentation/hooks/useSettingsPane.ts | 182 ++++++++++
 pnpm-lock.yaml                                |   4 +-
 35 files changed, 2663 insertions(+), 32 deletions(-)
 create mode 100644 app/api/stores/[storeId]/dev/update/route.ts
 create mode 100644 app/api/stores/[storeId]/dev/ws/route.ts
 create mode 100644 app/api/stores/_lib/dev-server/application/use-cases/update-block-setting.use-case.ts
 create mode 100644 app/api/stores/_lib/dev-server/application/use-cases/update-section-setting.use-case.ts
 create mode 100644 app/api/stores/_lib/dev-server/application/use-cases/update-sub-block-setting.use-case.ts
 create mode 100644 app/api/stores/_lib/dev-server/controllers/sse-controller.ts
 create mode 100644 app/api/stores/_lib/dev-server/domain/entities/dev-session.entity.ts
 create mode 100644 app/api/stores/_lib/dev-server/domain/ports/section-renderer.port.ts
 create mode 100644 app/api/stores/_lib/dev-server/domain/ports/template-loader.port.ts
 create mode 100644 app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter.ts
 create mode 100644 app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter.ts
 create mode 100644 app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/save-changes.use-case.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/update-block-setting.use-case.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/update-section-setting.use-case.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/update-sub-block-setting.use-case.ts
 create mode 100644 packages/theme-studio/src/domain/entities/editor-session.entity.ts
 create mode 100644 packages/theme-studio/src/domain/ports/dev-server.port.ts
 create mode 100644 packages/theme-studio/src/domain/ports/template-manager.port.ts
 create mode 100644 packages/theme-studio/src/domain/ports/template-renderer.port.ts
 create mode 100644 packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
 create mode 100644 packages/theme-studio/src/infrastructure/adapters/template-manager.adapter.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useDevServer.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useHotReload.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useSettingsPane.ts

diff --git a/app/api/stores/[storeId]/dev/update/route.ts b/app/api/stores/[storeId]/dev/update/route.ts
new file mode 100644
index 00000000..a07bb32c
--- /dev/null
+++ b/app/api/stores/[storeId]/dev/update/route.ts
@@ -0,0 +1,115 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { TemplateLoaderAdapter } from '@/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter';
+import { SectionRendererAdapter } from '@/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter';
+import { UpdateSectionSettingUseCase } from '@/app/api/stores/_lib/dev-server/application/use-cases/update-section-setting.use-case';
+import { UpdateBlockSettingUseCase } from '@/app/api/stores/_lib/dev-server/application/use-cases/update-block-setting.use-case';
+import { UpdateSubBlockSettingUseCase } from '@/app/api/stores/_lib/dev-server/application/use-cases/update-sub-block-setting.use-case';
+import { devSessionManager } from '@/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service';
+import {
+  broadcastChangeApplied,
+  broadcastRenderError,
+} from '@/app/api/stores/_lib/dev-server/controllers/sse-controller';
+
+const templateLoader = new TemplateLoaderAdapter();
+const sectionRenderer = new SectionRendererAdapter();
+const updateSectionSettingUseCase = new UpdateSectionSettingUseCase(templateLoader, sectionRenderer);
+const updateBlockSettingUseCase = new UpdateBlockSettingUseCase(templateLoader, sectionRenderer);
+const updateSubBlockSettingUseCase = new UpdateSubBlockSettingUseCase(templateLoader, sectionRenderer);
+
+/**
+ * Endpoint POST para recibir actualizaciones de settings desde el cliente
+ * Procesa el cambio y envía la actualización por SSE
+ */
+export const POST = withAuthHandler(
+  async (request: NextRequest, { storeId, corsHeaders }) => {
+    try {
+      const body = await request.json();
+      const { type, payload, templateType } = body;
+
+      if (!templateType) {
+        return NextResponse.json({ error: 'Missing templateType' }, { status: 400, headers: corsHeaders });
+      }
+
+      // Obtener o crear sesión
+      let session = devSessionManager.getSession(storeId, templateType);
+      if (!session) {
+        // Cargar template inicial y crear sesión
+        const template = await templateLoader.loadTemplate(storeId, templateType);
+        session = devSessionManager.createOrGetSession(storeId, templateType, template);
+      }
+
+      let result;
+
+      switch (type) {
+        case 'UPDATE_SECTION_SETTING': {
+          result = await updateSectionSettingUseCase.execute(payload, templateType, session.template);
+          if (result.updatedTemplate) {
+            devSessionManager.updateSessionTemplate(storeId, templateType, result.updatedTemplate);
+          }
+          break;
+        }
+
+        case 'UPDATE_BLOCK_SETTING': {
+          result = await updateBlockSettingUseCase.execute(payload, templateType, session.template);
+          if (result.updatedTemplate) {
+            devSessionManager.updateSessionTemplate(storeId, templateType, result.updatedTemplate);
+          }
+          break;
+        }
+
+        case 'UPDATE_SUB_BLOCK_SETTING': {
+          result = await updateSubBlockSettingUseCase.execute(payload, templateType, session.template);
+          if (result.updatedTemplate) {
+            devSessionManager.updateSessionTemplate(storeId, templateType, result.updatedTemplate);
+          }
+          break;
+        }
+
+        default:
+          return NextResponse.json({ error: 'Invalid message type' }, { status: 400, headers: corsHeaders });
+      }
+
+      // Enviar resultado a través de SSE
+      if (result.success) {
+        broadcastChangeApplied(storeId, templateType, result);
+      } else {
+        broadcastRenderError(storeId, templateType, result.error || 'Unknown error', result.sectionId);
+      }
+
+      return NextResponse.json({ success: true }, { headers: corsHeaders });
+    } catch (error) {
+      return NextResponse.json(
+        { error: error instanceof Error ? error.message : 'Unknown error' },
+        { status: 500, headers: corsHeaders }
+      );
+    }
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);
+
+export async function OPTIONS(request: NextRequest) {
+  const corsHeaders = await getNextCorsHeaders(request);
+  return new Response(null, { status: 204, headers: corsHeaders });
+}
diff --git a/app/api/stores/[storeId]/dev/ws/route.ts b/app/api/stores/[storeId]/dev/ws/route.ts
new file mode 100644
index 00000000..d1ea4210
--- /dev/null
+++ b/app/api/stores/[storeId]/dev/ws/route.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest } from 'next/server';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { handleSSEConnection } from '@/app/api/stores/_lib/dev-server/controllers/sse-controller';
+
+/**
+ * Endpoint SSE (Server-Sent Events) para hot-reload del editor
+ * Similar a template-dev pero específico para el Theme Studio
+ */
+export const GET = withAuthHandler(
+  async (request: NextRequest, { storeId }) => {
+    const url = new URL(request.url);
+    if (!url.searchParams.has('storeId')) {
+      url.searchParams.set('storeId', storeId);
+    }
+
+    const modifiedRequest = new NextRequest(url, {
+      method: request.method,
+      headers: request.headers,
+      body: request.body,
+      signal: request.signal,
+    });
+
+    return handleSSEConnection(modifiedRequest);
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);
diff --git a/app/api/stores/_lib/dev-server/application/use-cases/update-block-setting.use-case.ts b/app/api/stores/_lib/dev-server/application/use-cases/update-block-setting.use-case.ts
new file mode 100644
index 00000000..69cffd27
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/application/use-cases/update-block-setting.use-case.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ITemplateLoader } from '../../domain/ports/template-loader.port';
+import type { ISectionRenderer } from '../../domain/ports/section-renderer.port';
+import type { UpdateBlockSettingPayload, AppliedChangePayload } from '../../domain/entities/dev-session.entity';
+import type { TemplateType, Template } from '@fasttify/theme-studio';
+
+/**
+ * Caso de uso: Actualizar setting de bloque y re-renderizar
+ */
+export class UpdateBlockSettingUseCase {
+  constructor(
+    private readonly templateLoader: ITemplateLoader,
+    private readonly sectionRenderer: ISectionRenderer
+  ) {}
+
+  async execute(
+    payload: UpdateBlockSettingPayload,
+    templateType: TemplateType,
+    currentTemplate: Template
+  ): Promise<AppliedChangePayload & { updatedTemplate?: Template }> {
+    const changeId = `change-${Date.now()}-${Math.random()}`;
+
+    try {
+      // 1. Actualizar el template en memoria
+      const updatedTemplate = JSON.parse(JSON.stringify(currentTemplate)); // Deep copy
+      const section = updatedTemplate.sections[payload.sectionId];
+      if (!section?.blocks) {
+        throw new Error(`Section ${payload.sectionId} or blocks not found`);
+      }
+
+      updatedTemplate.sections[payload.sectionId] = {
+        ...section,
+        blocks: section.blocks.map((block: any) =>
+          block.id === payload.blockId
+            ? {
+                ...block,
+                settings: {
+                  ...block.settings,
+                  [payload.settingId]: payload.value,
+                },
+              }
+            : block
+        ),
+      };
+
+      // 2. Re-renderizar la sección
+      const renderResult = await this.sectionRenderer.renderSection({
+        storeId: payload.storeId,
+        sectionId: payload.sectionId,
+        template: updatedTemplate,
+        pageType: templateType,
+      });
+
+      return {
+        changeId,
+        sectionId: payload.sectionId,
+        html: renderResult.html,
+        css: renderResult.css,
+        success: true,
+        timestamp: Date.now(),
+        updatedTemplate, // Retornar template actualizado
+      };
+    } catch (error) {
+      return {
+        changeId,
+        sectionId: payload.sectionId,
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: Date.now(),
+      };
+    }
+  }
+}
diff --git a/app/api/stores/_lib/dev-server/application/use-cases/update-section-setting.use-case.ts b/app/api/stores/_lib/dev-server/application/use-cases/update-section-setting.use-case.ts
new file mode 100644
index 00000000..be681347
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/application/use-cases/update-section-setting.use-case.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ITemplateLoader } from '../../domain/ports/template-loader.port';
+import type { ISectionRenderer } from '../../domain/ports/section-renderer.port';
+import type { UpdateSectionSettingPayload, AppliedChangePayload } from '../../domain/entities/dev-session.entity';
+import type { TemplateType, Template } from '@fasttify/theme-studio';
+
+/**
+ * Caso de uso: Actualizar setting de sección y re-renderizar
+ * Orquesta la lógica de negocio para actualizar un setting y renderizar la sección
+ */
+export class UpdateSectionSettingUseCase {
+  constructor(
+    private readonly templateLoader: ITemplateLoader,
+    private readonly sectionRenderer: ISectionRenderer
+  ) {}
+
+  async execute(
+    payload: UpdateSectionSettingPayload,
+    templateType: TemplateType,
+    currentTemplate: Template
+  ): Promise<AppliedChangePayload & { updatedTemplate?: Template }> {
+    const changeId = `change-${Date.now()}-${Math.random()}`;
+
+    try {
+      // 1. Actualizar el template en memoria
+      const updatedTemplate = JSON.parse(JSON.stringify(currentTemplate)); // Deep copy
+      const section = updatedTemplate.sections[payload.sectionId];
+      if (!section) {
+        throw new Error(`Section ${payload.sectionId} not found`);
+      }
+
+      updatedTemplate.sections[payload.sectionId] = {
+        ...section,
+        settings: {
+          ...section.settings,
+          [payload.settingId]: payload.value,
+        },
+      };
+
+      // 2. Re-renderizar la sección
+      const renderResult = await this.sectionRenderer.renderSection({
+        storeId: payload.storeId,
+        sectionId: payload.sectionId,
+        template: updatedTemplate,
+        pageType: templateType,
+      });
+
+      return {
+        changeId,
+        sectionId: payload.sectionId,
+        html: renderResult.html,
+        css: renderResult.css,
+        success: true,
+        timestamp: Date.now(),
+        updatedTemplate, // Retornar template actualizado
+      };
+    } catch (error) {
+      return {
+        changeId,
+        sectionId: payload.sectionId,
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: Date.now(),
+      };
+    }
+  }
+}
diff --git a/app/api/stores/_lib/dev-server/application/use-cases/update-sub-block-setting.use-case.ts b/app/api/stores/_lib/dev-server/application/use-cases/update-sub-block-setting.use-case.ts
new file mode 100644
index 00000000..a67b0101
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/application/use-cases/update-sub-block-setting.use-case.ts
@@ -0,0 +1,96 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ITemplateLoader } from '../../domain/ports/template-loader.port';
+import type { ISectionRenderer } from '../../domain/ports/section-renderer.port';
+import type { UpdateSubBlockSettingPayload, AppliedChangePayload } from '../../domain/entities/dev-session.entity';
+import type { TemplateType, Template } from '@fasttify/theme-studio';
+
+/**
+ * Caso de uso: Actualizar setting de sub-bloque y re-renderizar
+ */
+export class UpdateSubBlockSettingUseCase {
+  constructor(
+    private readonly templateLoader: ITemplateLoader,
+    private readonly sectionRenderer: ISectionRenderer
+  ) {}
+
+  async execute(
+    payload: UpdateSubBlockSettingPayload,
+    templateType: TemplateType,
+    currentTemplate: Template
+  ): Promise<AppliedChangePayload & { updatedTemplate?: Template }> {
+    const changeId = `change-${Date.now()}-${Math.random()}`;
+
+    try {
+      // 1. Actualizar el template en memoria
+      const updatedTemplate = JSON.parse(JSON.stringify(currentTemplate)); // Deep copy
+      const section = updatedTemplate.sections[payload.sectionId];
+      if (!section?.blocks) {
+        throw new Error(`Section ${payload.sectionId} or blocks not found`);
+      }
+
+      updatedTemplate.sections[payload.sectionId] = {
+        ...section,
+        blocks: section.blocks.map((block: any) => {
+          if (block.id === payload.blockId && block.blocks) {
+            return {
+              ...block,
+              blocks: block.blocks.map((subBlock: any) =>
+                subBlock.id === payload.subBlockId
+                  ? {
+                      ...subBlock,
+                      settings: {
+                        ...subBlock.settings,
+                        [payload.settingId]: payload.value,
+                      },
+                    }
+                  : subBlock
+              ),
+            };
+          }
+          return block;
+        }),
+      };
+
+      // 2. Re-renderizar la sección
+      const renderResult = await this.sectionRenderer.renderSection({
+        storeId: payload.storeId,
+        sectionId: payload.sectionId,
+        template: updatedTemplate,
+        pageType: templateType,
+      });
+
+      return {
+        changeId,
+        sectionId: payload.sectionId,
+        html: renderResult.html,
+        css: renderResult.css,
+        success: true,
+        timestamp: Date.now(),
+        updatedTemplate, // Retornar template actualizado
+      };
+    } catch (error) {
+      return {
+        changeId,
+        sectionId: payload.sectionId,
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: Date.now(),
+      };
+    }
+  }
+}
diff --git a/app/api/stores/_lib/dev-server/controllers/sse-controller.ts b/app/api/stores/_lib/dev-server/controllers/sse-controller.ts
new file mode 100644
index 00000000..de8ba34f
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/controllers/sse-controller.ts
@@ -0,0 +1,218 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { logger } from '@/liquid-forge';
+import type { TemplateType } from '@fasttify/theme-studio';
+import type { AppliedChangePayload } from '../domain/entities/dev-session.entity';
+import { TemplateLoaderAdapter } from '../infrastructure/adapters/template-loader.adapter';
+import { devSessionManager } from '../infrastructure/services/dev-session-manager.service';
+
+const templateLoader = new TemplateLoaderAdapter();
+
+/**
+ * Conexiones SSE activas por storeId:templateType
+ */
+const activeConnections = new Map<string, Set<ReadableStreamDefaultController>>();
+
+function getConnectionKey(storeId: string, templateType: TemplateType): string {
+  return `${storeId}:${templateType}`;
+}
+
+/**
+ * Maneja una conexión SSE para hot-reload del editor
+ */
+export async function handleSSEConnection(request: NextRequest): Promise<NextResponse> {
+  const corsHeaders = await getNextCorsHeaders(request);
+  const encoder = new TextEncoder();
+
+  // Obtener parámetros de la URL
+  const url = new URL(request.url);
+  const storeId = url.searchParams.get('storeId');
+  const templateType = url.searchParams.get('templateType') as TemplateType | null;
+
+  if (!storeId || !templateType) {
+    return NextResponse.json(
+      { error: 'Missing storeId or templateType' },
+      {
+        status: 400,
+        headers: corsHeaders,
+      }
+    );
+  }
+
+  const connectionKey = getConnectionKey(storeId, templateType);
+
+  const stream = new ReadableStream({
+    start(controller) {
+      // Agregar conexión al mapa
+      if (!activeConnections.has(connectionKey)) {
+        activeConnections.set(connectionKey, new Set());
+      }
+      const connections = activeConnections.get(connectionKey);
+      if (connections) {
+        connections.add(controller);
+      }
+
+      // Enviar mensaje de conexión
+      controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'CONNECTED' })}\n\n`));
+
+      // Cargar y enviar template inicial
+      templateLoader
+        .loadTemplate(storeId, templateType)
+        .then((template) => {
+          const session = devSessionManager.createOrGetSession(storeId, templateType, template);
+          const message = JSON.stringify({
+            type: 'TEMPLATE_LOADED',
+            payload: {
+              template: session.template,
+            },
+          });
+          controller.enqueue(encoder.encode(`data: ${message}\n\n`));
+        })
+        .catch((error) => {
+          logger.error(`Error loading template for SSE connection`, error, 'SSEController');
+        });
+
+      // Ping cada 30 segundos para mantener la conexión viva
+      const pingInterval = setInterval(() => {
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'ping' })}\n\n`));
+        } catch (_error) {
+          clearInterval(pingInterval);
+        }
+      }, 30000);
+
+      // Limpiar al cerrar la conexión
+      request.signal.addEventListener('abort', () => {
+        const connections = activeConnections.get(connectionKey);
+        if (connections) {
+          connections.delete(controller);
+          if (connections.size === 0) {
+            activeConnections.delete(connectionKey);
+          }
+        }
+        clearInterval(pingInterval);
+      });
+    },
+  });
+
+  return new NextResponse(stream, {
+    headers: {
+      ...corsHeaders,
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      Connection: 'keep-alive',
+      'X-Accel-Buffering': 'no',
+    },
+  });
+}
+
+/**
+ * Envía un cambio aplicado a todas las conexiones SSE de un storeId:templateType
+ */
+export function broadcastChangeApplied(
+  storeId: string,
+  templateType: TemplateType,
+  change: AppliedChangePayload
+): void {
+  const connectionKey = getConnectionKey(storeId, templateType);
+  const connections = activeConnections.get(connectionKey);
+
+  if (!connections || connections.size === 0) {
+    return;
+  }
+
+  const encoder = new TextEncoder();
+  const message = JSON.stringify({
+    type: 'CHANGE_APPLIED',
+    payload: change,
+  });
+
+  connections.forEach((controller) => {
+    try {
+      controller.enqueue(encoder.encode(`data: ${message}\n\n`));
+    } catch (error) {
+      logger.error('Error sending SSE change message', error, 'SSEController');
+      connections.delete(controller);
+    }
+  });
+}
+
+/**
+ * Envía un error de renderizado a todas las conexiones SSE
+ */
+export function broadcastRenderError(
+  storeId: string,
+  templateType: TemplateType,
+  error: string,
+  sectionId: string
+): void {
+  const connectionKey = getConnectionKey(storeId, templateType);
+  const connections = activeConnections.get(connectionKey);
+
+  if (!connections || connections.size === 0) {
+    return;
+  }
+
+  const encoder = new TextEncoder();
+  const message = JSON.stringify({
+    type: 'RENDER_ERROR',
+    payload: {
+      error,
+      sectionId,
+    },
+  });
+
+  connections.forEach((controller) => {
+    try {
+      controller.enqueue(encoder.encode(`data: ${message}\n\n`));
+    } catch (err) {
+      logger.error('Error sending SSE error message', err, 'SSEController');
+      connections.delete(controller);
+    }
+  });
+}
+
+/**
+ * Envía un template cargado a todas las conexiones SSE
+ */
+export function broadcastTemplateLoaded(storeId: string, templateType: TemplateType, template: any): void {
+  const connectionKey = getConnectionKey(storeId, templateType);
+  const connections = activeConnections.get(connectionKey);
+
+  if (!connections || connections.size === 0) {
+    return;
+  }
+
+  const encoder = new TextEncoder();
+  const message = JSON.stringify({
+    type: 'TEMPLATE_LOADED',
+    payload: {
+      template,
+    },
+  });
+
+  connections.forEach((controller) => {
+    try {
+      controller.enqueue(encoder.encode(`data: ${message}\n\n`));
+    } catch (err) {
+      logger.error('Error sending SSE template loaded message', err, 'SSEController');
+      connections.delete(controller);
+    }
+  });
+}
diff --git a/app/api/stores/_lib/dev-server/domain/entities/dev-session.entity.ts b/app/api/stores/_lib/dev-server/domain/entities/dev-session.entity.ts
new file mode 100644
index 00000000..93d21168
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/domain/entities/dev-session.entity.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from '@fasttify/theme-studio';
+
+/**
+ * Sesión de desarrollo activa
+ * Mantiene el estado del template en memoria durante la sesión de edición
+ */
+export interface DevSession {
+  sessionId: string;
+  storeId: string;
+  templateType: TemplateType;
+  template: Template;
+  createdAt: Date;
+  lastActivityAt: Date;
+}
+
+/**
+ * Mensaje del cliente al servidor
+ */
+export type ClientMessage =
+  | { type: 'UPDATE_SECTION_SETTING'; payload: UpdateSectionSettingPayload }
+  | { type: 'UPDATE_BLOCK_SETTING'; payload: UpdateBlockSettingPayload }
+  | { type: 'UPDATE_SUB_BLOCK_SETTING'; payload: UpdateSubBlockSettingPayload }
+  | { type: 'LOAD_TEMPLATE'; payload: { storeId: string; templateType: TemplateType } };
+
+/**
+ * Mensaje del servidor al cliente
+ */
+export type ServerMessage =
+  | { type: 'CHANGE_APPLIED'; payload: AppliedChangePayload }
+  | { type: 'RENDER_ERROR'; payload: { error: string; sectionId: string } }
+  | { type: 'TEMPLATE_LOADED'; payload: { template: Template } }
+  | { type: 'CONNECTED'; payload: { sessionId: string } };
+
+export interface UpdateSectionSettingPayload {
+  storeId: string;
+  sectionId: string;
+  settingId: string;
+  value: unknown;
+}
+
+export interface UpdateBlockSettingPayload {
+  storeId: string;
+  sectionId: string;
+  blockId: string;
+  settingId: string;
+  value: unknown;
+}
+
+export interface UpdateSubBlockSettingPayload {
+  storeId: string;
+  sectionId: string;
+  blockId: string;
+  subBlockId: string;
+  settingId: string;
+  value: unknown;
+}
+
+export interface AppliedChangePayload {
+  changeId: string;
+  sectionId: string;
+  html?: string;
+  css?: string;
+  success: boolean;
+  error?: string;
+  timestamp: number;
+}
diff --git a/app/api/stores/_lib/dev-server/domain/ports/section-renderer.port.ts b/app/api/stores/_lib/dev-server/domain/ports/section-renderer.port.ts
new file mode 100644
index 00000000..a72020e5
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/domain/ports/section-renderer.port.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from '@fasttify/theme-studio';
+
+/**
+ * Parámetros para renderizar una sección
+ */
+export interface RenderSectionParams {
+  storeId: string;
+  sectionId: string;
+  template: Template; // Template completo con todas las secciones
+  pageType: TemplateType;
+}
+
+/**
+ * Resultado del renderizado de una sección
+ */
+export interface RenderSectionResult {
+  html: string;
+  css?: string;
+}
+
+/**
+ * Puerto (interfaz) para renderizar secciones
+ * Define el contrato para renderizar secciones usando Liquid
+ */
+export interface ISectionRenderer {
+  /**
+   * Renderizar una sección específica
+   * @param params - Parámetros del renderizado
+   */
+  renderSection(params: RenderSectionParams): Promise<RenderSectionResult>;
+}
diff --git a/app/api/stores/_lib/dev-server/domain/ports/template-loader.port.ts b/app/api/stores/_lib/dev-server/domain/ports/template-loader.port.ts
new file mode 100644
index 00000000..cbf516d1
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/domain/ports/template-loader.port.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from '@fasttify/theme-studio';
+
+/**
+ * Puerto (interfaz) para cargar templates
+ * Define el contrato para obtener templates desde el almacenamiento
+ */
+export interface ITemplateLoader {
+  /**
+   * Cargar template por tipo
+   * @param storeId - ID de la tienda
+   * @param templateType - Tipo de template
+   */
+  loadTemplate(storeId: string, templateType: TemplateType): Promise<Template>;
+
+  /**
+   * Guardar template
+   * @param storeId - ID de la tienda
+   * @param templateType - Tipo de template
+   * @param template - Template a guardar
+   */
+  saveTemplate(storeId: string, templateType: TemplateType, template: Template): Promise<void>;
+}
diff --git a/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter.ts b/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter.ts
new file mode 100644
index 00000000..0650bc0b
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { sectionRenderer } from '@/liquid-forge/services/rendering/section-renderer';
+import { templateLoader } from '@/liquid-forge/services/templates/template-loader';
+import { contextBuilder } from '@/liquid-forge/services/rendering/global-context';
+import { cookiesClient } from '@/utils/server/AmplifyServer';
+import type {
+  ISectionRenderer,
+  RenderSectionParams,
+  RenderSectionResult,
+} from '../../domain/ports/section-renderer.port';
+import { logger } from '@/liquid-forge';
+
+/**
+ * Adaptador: Section Renderer
+ * Implementación concreta para renderizar secciones usando Liquid
+ */
+export class SectionRendererAdapter implements ISectionRenderer {
+  async renderSection(params: RenderSectionParams): Promise<RenderSectionResult> {
+    try {
+      const { storeId, sectionId, template, pageType } = params;
+
+      // Obtener la configuración de la sección del template
+      const sectionConfig = template.sections[sectionId];
+      if (!sectionConfig) {
+        throw new Error(`Section ${sectionId} not found in template`);
+      }
+
+      // Cargar el contenido Liquid de la sección
+      const sectionContent = await templateLoader.loadTemplate(storeId, `${sectionConfig.type}.liquid`);
+
+      // Obtener datos de la tienda desde la base de datos
+      const { data: userStore } = await cookiesClient.models.UserStore.get({ storeId });
+      if (!userStore) {
+        throw new Error(`Store ${storeId} not found`);
+      }
+
+      // Construir el objeto store con la estructura esperada por contextBuilder
+      const store = {
+        storeId: userStore.storeId,
+        storeName: userStore.storeName,
+        storeDescription: userStore.storeDescription,
+        storeCurrency: userStore.storeCurrency,
+        currencyFormat: userStore.currencyFormat,
+        currencyLocale: userStore.currencyLocale,
+        currencyDecimalPlaces: userStore.currencyDecimalPlaces,
+        customDomain: userStore.defaultDomain,
+        contactEmail: userStore.contactEmail,
+        contactPhone: userStore.contactPhone,
+        storeAdress: userStore.storeAdress,
+        storeLogo: userStore.storeLogo,
+        storeStatus: true, // Asumir activo para dev server
+      };
+
+      // Construir el contexto base para renderizar
+      const baseContext = await contextBuilder.createRenderContext(
+        store,
+        [], // products - vacío para hot-reload
+        {
+          templates: {
+            [pageType]: template,
+          },
+        }
+      );
+
+      // Renderizar la sección usando el sectionRenderer existente
+      const html = await sectionRenderer.renderSectionWithSchema(
+        sectionConfig.type,
+        sectionContent,
+        baseContext,
+        {
+          templates: {
+            [pageType]: template,
+          },
+        },
+        sectionId,
+        pageType
+      );
+
+      return {
+        html,
+      };
+    } catch (error) {
+      logger.error(`Error rendering section ${params.sectionId}`, error, 'SectionRendererAdapter');
+      throw error;
+    }
+  }
+}
diff --git a/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter.ts b/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter.ts
new file mode 100644
index 00000000..85780462
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { templateLoader } from '@/liquid-forge/services/templates/template-loader';
+import type { ITemplateLoader } from '../../domain/ports/template-loader.port';
+import type { Template, TemplateType } from '@fasttify/theme-studio';
+
+const TEMPLATE_PATHS: Record<string, string> = {
+  index: 'templates/index.json',
+  product: 'templates/product.json',
+  collection: 'templates/collection.json',
+  cart: 'templates/cart.json',
+  page: 'templates/page.json',
+  policies: 'templates/policies.json',
+  search: 'templates/search.json',
+  '404': 'templates/404.json',
+  checkout: 'templates/checkout.json',
+  checkout_confirmation: 'templates/checkout_confirmation.json',
+};
+
+function getTemplatePath(templateType: TemplateType): string {
+  return TEMPLATE_PATHS[templateType] || `templates/${templateType}.json`;
+}
+
+/**
+ * Adaptador: Template Loader
+ * Implementación concreta para cargar templates desde S3 usando templateLoader de liquid-forge
+ */
+export class TemplateLoaderAdapter implements ITemplateLoader {
+  async loadTemplate(storeId: string, templateType: TemplateType): Promise<Template> {
+    const templatePath = getTemplatePath(templateType);
+    const templateContent = await templateLoader.loadTemplate(storeId, templatePath);
+    const templateConfig = JSON.parse(templateContent.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '$1'));
+
+    return {
+      type: templateType,
+      sections: templateConfig.sections || {},
+      order: templateConfig.order || [],
+    };
+  }
+
+  async saveTemplate(_storeId: string, _templateType: TemplateType, _template: Template): Promise<void> {
+    // TODO: Implementar guardado en S3
+    // Por ahora solo en memoria durante la sesión
+    throw new Error('Save template not implemented yet');
+  }
+}
diff --git a/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service.ts b/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service.ts
new file mode 100644
index 00000000..39b482c3
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DevSession } from '../../domain/entities/dev-session.entity';
+import type { Template, TemplateType } from '@fasttify/theme-studio';
+
+/**
+ * Servicio: Dev Session Manager
+ * Gestiona las sesiones de desarrollo activas en memoria
+ */
+export class DevSessionManagerService {
+  private sessions: Map<string, DevSession> = new Map();
+  private readonly SESSION_TIMEOUT_MS = 30 * 60 * 1000; // 30 minutos
+
+  /**
+   * Crea o recupera una sesión de desarrollo
+   */
+  createOrGetSession(storeId: string, templateType: TemplateType, template: Template): DevSession {
+    const sessionKey = `${storeId}:${templateType}`;
+    const existingSession = this.sessions.get(sessionKey);
+
+    if (existingSession) {
+      existingSession.lastActivityAt = new Date();
+      existingSession.template = template; // Actualizar template
+      return existingSession;
+    }
+
+    const newSession: DevSession = {
+      sessionId: `session-${Date.now()}-${Math.random()}`,
+      storeId,
+      templateType,
+      template,
+      createdAt: new Date(),
+      lastActivityAt: new Date(),
+    };
+
+    this.sessions.set(sessionKey, newSession);
+    return newSession;
+  }
+
+  /**
+   * Obtiene una sesión existente
+   */
+  getSession(storeId: string, templateType: TemplateType): DevSession | null {
+    const sessionKey = `${storeId}:${templateType}`;
+    return this.sessions.get(sessionKey) || null;
+  }
+
+  /**
+   * Actualiza el template de una sesión
+   */
+  updateSessionTemplate(storeId: string, templateType: TemplateType, template: Template): void {
+    const session = this.getSession(storeId, templateType);
+    if (session) {
+      session.template = template;
+      session.lastActivityAt = new Date();
+    }
+  }
+
+  /**
+   * Elimina una sesión
+   */
+  removeSession(storeId: string, templateType: TemplateType): void {
+    const sessionKey = `${storeId}:${templateType}`;
+    this.sessions.delete(sessionKey);
+  }
+
+  /**
+   * Limpia sesiones expiradas
+   */
+  cleanupExpiredSessions(): void {
+    const now = Date.now();
+    for (const [key, session] of this.sessions.entries()) {
+      const lastActivity = session.lastActivityAt.getTime();
+      if (now - lastActivity > this.SESSION_TIMEOUT_MS) {
+        this.sessions.delete(key);
+      }
+    }
+  }
+
+  /**
+   * Obtiene todas las sesiones activas (para debugging)
+   */
+  getAllSessions(): DevSession[] {
+    return Array.from(this.sessions.values());
+  }
+}
+
+export const devSessionManager = new DevSessionManagerService();
diff --git a/packages/theme-studio/src/application/use-cases/index.ts b/packages/theme-studio/src/application/use-cases/index.ts
index a0a166c0..50f5399e 100644
--- a/packages/theme-studio/src/application/use-cases/index.ts
+++ b/packages/theme-studio/src/application/use-cases/index.ts
@@ -16,3 +16,7 @@
 
 export { LoadTemplateUseCase } from './load-template.use-case';
 export { RenderPreviewUseCase } from './render-preview.use-case';
+export { UpdateSectionSettingUseCase } from './update-section-setting.use-case';
+export { UpdateBlockSettingUseCase } from './update-block-setting.use-case';
+export { UpdateSubBlockSettingUseCase } from './update-sub-block-setting.use-case';
+export { SaveChangesUseCase } from './save-changes.use-case';
diff --git a/packages/theme-studio/src/application/use-cases/save-changes.use-case.ts b/packages/theme-studio/src/application/use-cases/save-changes.use-case.ts
new file mode 100644
index 00000000..6003355f
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/save-changes.use-case.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { ITemplateRepository } from '../../domain/ports/template-repository.port';
+import type { TemplateType } from '../../domain/entities/template.entity';
+
+/**
+ * Caso de uso: Guardar cambios
+ * Persiste todos los cambios pendientes en la base de datos
+ */
+export class SaveChangesUseCase {
+  constructor(
+    private readonly templateManager: ITemplateManager,
+    private readonly templateRepository: ITemplateRepository
+  ) {}
+
+  async execute(storeId: string, templateType: TemplateType): Promise<void> {
+    // 1. Validar que hay cambios pendientes
+    if (!this.templateManager.hasPendingChanges()) {
+      return; // No hay nada que guardar
+    }
+
+    // 2. Obtener template actual con todos los cambios aplicados
+    const template = this.templateManager.getCurrentTemplate();
+    if (!template) {
+      throw new Error('No template to save');
+    }
+
+    // 3. Persistir en la base de datos
+    await this.templateRepository.saveTemplate(storeId, templateType, template);
+
+    // 4. Limpiar cambios pendientes
+    this.templateManager.clearPendingChanges();
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/update-block-setting.use-case.ts b/packages/theme-studio/src/application/use-cases/update-block-setting.use-case.ts
new file mode 100644
index 00000000..5d4e7db3
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/update-block-setting.use-case.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IDevServer, UpdateBlockSettingParams } from '../../domain/ports/dev-server.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { ChangeType } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Caso de uso: Actualizar setting de bloque
+ * Orquesta la lógica de negocio para actualizar un setting de bloque
+ */
+export class UpdateBlockSettingUseCase {
+  constructor(
+    private readonly devServer: IDevServer,
+    private readonly templateManager: ITemplateManager
+  ) {}
+
+  async execute(params: UpdateBlockSettingParams): Promise<void> {
+    if (!this.devServer.isConnected()) {
+      throw new Error('Dev Server is not connected');
+    }
+
+    const change = {
+      id: `change-${Date.now()}-${Math.random()}`,
+      type: 'UPDATE_BLOCK_SETTING' as ChangeType,
+      sectionId: params.sectionId,
+      blockId: params.blockId,
+      settingId: params.settingId,
+      value: params.value,
+      timestamp: Date.now(),
+    };
+
+    this.templateManager.applyChange(change);
+    await this.devServer.updateBlockSetting(params);
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/update-section-setting.use-case.ts b/packages/theme-studio/src/application/use-cases/update-section-setting.use-case.ts
new file mode 100644
index 00000000..d92a6bba
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/update-section-setting.use-case.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IDevServer, UpdateSectionSettingParams } from '../../domain/ports/dev-server.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { ChangeType } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Caso de uso: Actualizar setting de sección
+ * Orquesta la lógica de negocio para actualizar un setting y notificar al Dev Server
+ */
+export class UpdateSectionSettingUseCase {
+  constructor(
+    private readonly devServer: IDevServer,
+    private readonly templateManager: ITemplateManager
+  ) {}
+
+  async execute(params: UpdateSectionSettingParams): Promise<void> {
+    // 1. Validar que hay conexión al Dev Server
+    if (!this.devServer.isConnected()) {
+      throw new Error('Dev Server is not connected');
+    }
+
+    // 2. Aplicar cambio al template en memoria (optimistic update)
+    const change = {
+      id: `change-${Date.now()}-${Math.random()}`,
+      type: 'UPDATE_SECTION_SETTING' as ChangeType,
+      sectionId: params.sectionId,
+      settingId: params.settingId,
+      value: params.value,
+      timestamp: Date.now(),
+    };
+
+    this.templateManager.applyChange(change);
+
+    // 3. Enviar cambio al Dev Server para re-renderizado
+    await this.devServer.updateSectionSetting(params);
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/update-sub-block-setting.use-case.ts b/packages/theme-studio/src/application/use-cases/update-sub-block-setting.use-case.ts
new file mode 100644
index 00000000..eb6bb8df
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/update-sub-block-setting.use-case.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IDevServer, UpdateSubBlockSettingParams } from '../../domain/ports/dev-server.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { ChangeType } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Caso de uso: Actualizar setting de sub-bloque
+ * Orquesta la lógica de negocio para actualizar un setting de sub-bloque
+ */
+export class UpdateSubBlockSettingUseCase {
+  constructor(
+    private readonly devServer: IDevServer,
+    private readonly templateManager: ITemplateManager
+  ) {}
+
+  async execute(params: UpdateSubBlockSettingParams): Promise<void> {
+    if (!this.devServer.isConnected()) {
+      throw new Error('Dev Server is not connected');
+    }
+
+    const change = {
+      id: `change-${Date.now()}-${Math.random()}`,
+      type: 'UPDATE_SUB_BLOCK_SETTING' as ChangeType,
+      sectionId: params.sectionId,
+      blockId: params.blockId,
+      subBlockId: params.subBlockId,
+      settingId: params.settingId,
+      value: params.value,
+      timestamp: Date.now(),
+    };
+
+    this.templateManager.applyChange(change);
+    await this.devServer.updateSubBlockSetting(params);
+  }
+}
diff --git a/packages/theme-studio/src/domain/entities/editor-session.entity.ts b/packages/theme-studio/src/domain/entities/editor-session.entity.ts
new file mode 100644
index 00000000..f249e419
--- /dev/null
+++ b/packages/theme-studio/src/domain/entities/editor-session.entity.ts
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from './template.entity';
+
+/**
+ * Tipo de cambio que se puede realizar en el editor
+ */
+export type ChangeType =
+  | 'UPDATE_SECTION_SETTING'
+  | 'UPDATE_BLOCK_SETTING'
+  | 'UPDATE_SUB_BLOCK_SETTING'
+  | 'ADD_BLOCK'
+  | 'DELETE_BLOCK'
+  | 'REORDER_BLOCKS'
+  | 'ADD_SUB_BLOCK'
+  | 'DELETE_SUB_BLOCK';
+
+/**
+ * Cambio pendiente en el template
+ * Entidad de dominio pura que representa un cambio sin aplicar
+ */
+export interface TemplateChange {
+  id: string;
+  type: ChangeType;
+  sectionId: string;
+  blockId?: string;
+  subBlockId?: string;
+  settingId?: string;
+  value?: unknown;
+  timestamp: number;
+}
+
+/**
+ * Sesión de edición del Theme Studio
+ * Mantiene el estado del template en memoria durante la sesión de edición
+ */
+export interface EditorSession {
+  sessionId: string;
+  storeId: string;
+  templateType: TemplateType;
+  template: Template;
+  changes: TemplateChange[];
+  isDirty: boolean;
+  isSaving: boolean;
+  createdAt: Date;
+  lastSavedAt: Date | null;
+}
+
+/**
+ * Resultado de aplicar un cambio al template
+ */
+export interface AppliedChange {
+  changeId: string;
+  sectionId: string;
+  html?: string;
+  css?: string;
+  success: boolean;
+  error?: string;
+  timestamp: number;
+}
diff --git a/packages/theme-studio/src/domain/entities/index.ts b/packages/theme-studio/src/domain/entities/index.ts
index 4adb743c..2f1ca83a 100644
--- a/packages/theme-studio/src/domain/entities/index.ts
+++ b/packages/theme-studio/src/domain/entities/index.ts
@@ -22,3 +22,4 @@
 export type { Theme } from './theme.entity';
 export type { Template, TemplateType, TemplateSection, TemplateBlock } from './template.entity';
 export type { Section, SectionSchema, SettingDefinition, SettingType, BlockDefinition, Preset } from './section.entity';
+export type { EditorSession, TemplateChange, AppliedChange, ChangeType } from './editor-session.entity';
diff --git a/packages/theme-studio/src/domain/entities/template.entity.ts b/packages/theme-studio/src/domain/entities/template.entity.ts
index 1ace7473..676feec5 100644
--- a/packages/theme-studio/src/domain/entities/template.entity.ts
+++ b/packages/theme-studio/src/domain/entities/template.entity.ts
@@ -38,6 +38,8 @@ export interface TemplateBlock {
   id: string;
   type: string;
   settings: Record<string, unknown>;
+  name?: string;
+  blocks?: TemplateBlock[];
 }
 
 export interface TemplateSection {
diff --git a/packages/theme-studio/src/domain/ports/dev-server.port.ts b/packages/theme-studio/src/domain/ports/dev-server.port.ts
new file mode 100644
index 00000000..636370e8
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/dev-server.port.ts
@@ -0,0 +1,116 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { AppliedChange } from '../entities/editor-session.entity';
+import type { Template, TemplateType } from '../entities/template.entity';
+
+/**
+ * Parámetros para actualizar un setting de sección
+ */
+export interface UpdateSectionSettingParams {
+  storeId: string;
+  sectionId: string;
+  settingId: string;
+  value: unknown;
+}
+
+/**
+ * Parámetros para actualizar un setting de bloque
+ */
+export interface UpdateBlockSettingParams {
+  storeId: string;
+  sectionId: string;
+  blockId: string;
+  settingId: string;
+  value: unknown;
+}
+
+/**
+ * Parámetros para actualizar un setting de sub-bloque
+ */
+export interface UpdateSubBlockSettingParams {
+  storeId: string;
+  sectionId: string;
+  blockId: string;
+  subBlockId: string;
+  settingId: string;
+  value: unknown;
+}
+
+/**
+ * Callback para recibir actualizaciones del servidor
+ */
+export type ChangeAppliedCallback = (change: AppliedChange) => void;
+
+/**
+ * Callback para recibir errores del servidor
+ */
+export type ErrorCallback = (error: Error) => void;
+
+/**
+ * Puerto (interfaz) para el servidor de desarrollo
+ * Define el contrato que debe cumplir cualquier implementación del Dev Server
+ */
+export interface IDevServer {
+  /**
+   * Conectar al servidor de desarrollo
+   * @param storeId - ID de la tienda
+   * @param onChangeApplied - Callback cuando se aplica un cambio
+   * @param onError - Callback cuando hay un error
+   * @param templateType - Tipo de template (opcional, por defecto 'index')
+   */
+  connect(
+    storeId: string,
+    onChangeApplied: ChangeAppliedCallback,
+    onError: ErrorCallback,
+    templateType?: TemplateType
+  ): Promise<void>;
+
+  /**
+   * Desconectar del servidor de desarrollo
+   */
+  disconnect(): Promise<void>;
+
+  /**
+   * Cargar template inicial desde el servidor
+   * @param storeId - ID de la tienda
+   * @param templateType - Tipo de template a cargar
+   */
+  loadTemplate(storeId: string, templateType: TemplateType): Promise<Template>;
+
+  /**
+   * Actualizar un setting de sección
+   * @param params - Parámetros del cambio
+   */
+  updateSectionSetting(params: UpdateSectionSettingParams): Promise<void>;
+
+  /**
+   * Actualizar un setting de bloque
+   * @param params - Parámetros del cambio
+   */
+  updateBlockSetting(params: UpdateBlockSettingParams): Promise<void>;
+
+  /**
+   * Actualizar un setting de sub-bloque
+   * @param params - Parámetros del cambio
+   */
+  updateSubBlockSetting(params: UpdateSubBlockSettingParams): Promise<void>;
+
+  /**
+   * Obtener el estado de conexión
+   */
+  isConnected(): boolean;
+}
diff --git a/packages/theme-studio/src/domain/ports/index.ts b/packages/theme-studio/src/domain/ports/index.ts
index 91730271..736e42f5 100644
--- a/packages/theme-studio/src/domain/ports/index.ts
+++ b/packages/theme-studio/src/domain/ports/index.ts
@@ -18,3 +18,13 @@ export type { ITemplateRepository } from './template-repository.port';
 export type { ISectionRepository } from './section-repository.port';
 export type { IPreviewRenderer, RenderPreviewParams, RenderPreviewResult } from './preview-renderer.port';
 export type { IThemeRepository } from './theme-repository.port';
+export type {
+  IDevServer,
+  UpdateSectionSettingParams,
+  UpdateBlockSettingParams,
+  UpdateSubBlockSettingParams,
+  ChangeAppliedCallback,
+  ErrorCallback,
+} from './dev-server.port';
+export type { ITemplateRenderer, RenderSectionParams, RenderSectionResult } from './template-renderer.port';
+export type { ITemplateManager } from './template-manager.port';
diff --git a/packages/theme-studio/src/domain/ports/template-manager.port.ts b/packages/theme-studio/src/domain/ports/template-manager.port.ts
new file mode 100644
index 00000000..19c043ed
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/template-manager.port.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template, TemplateType } from '../entities/template.entity';
+import type { TemplateChange } from '../entities/editor-session.entity';
+
+/**
+ * Puerto (interfaz) para el gestor de templates en memoria
+ * Mantiene el estado del template durante la sesión de edición
+ */
+export interface ITemplateManager {
+  /**
+   * Cargar template inicial
+   * @param storeId - ID de la tienda
+   * @param templateType - Tipo de template
+   */
+  loadTemplate(storeId: string, templateType: TemplateType): Promise<Template>;
+
+  /**
+   * Obtener el template actual en memoria
+   */
+  getCurrentTemplate(): Template | null;
+
+  /**
+   * Aplicar un cambio al template en memoria
+   * @param change - Cambio a aplicar
+   */
+  applyChange(change: TemplateChange): Template;
+
+  /**
+   * Obtener todos los cambios pendientes
+   */
+  getPendingChanges(): TemplateChange[];
+
+  /**
+   * Limpiar cambios pendientes (después de guardar)
+   */
+  clearPendingChanges(): void;
+
+  /**
+   * Verificar si hay cambios sin guardar
+   */
+  hasPendingChanges(): boolean;
+}
diff --git a/packages/theme-studio/src/domain/ports/template-renderer.port.ts b/packages/theme-studio/src/domain/ports/template-renderer.port.ts
new file mode 100644
index 00000000..a93a41af
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/template-renderer.port.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template } from '../entities/template.entity';
+
+/**
+ * Parámetros para renderizar una sección
+ */
+export interface RenderSectionParams {
+  storeId: string;
+  sectionId: string;
+  template: Template;
+}
+
+/**
+ * Resultado del renderizado de una sección
+ */
+export interface RenderSectionResult {
+  html: string;
+  css?: string;
+  timestamp: number;
+}
+
+/**
+ * Puerto (interfaz) para el renderizador de templates
+ * Define el contrato para renderizar secciones/bloques usando Liquid
+ */
+export interface ITemplateRenderer {
+  /**
+   * Renderizar una sección específica
+   * @param params - Parámetros del renderizado
+   */
+  renderSection(params: RenderSectionParams): Promise<RenderSectionResult>;
+
+  /**
+   * Renderizar una página completa
+   * @param storeId - ID de la tienda
+   * @param template - Template a renderizar
+   */
+  renderPage(storeId: string, template: Template): Promise<string>;
+}
diff --git a/packages/theme-studio/src/domain/ports/template-repository.port.ts b/packages/theme-studio/src/domain/ports/template-repository.port.ts
index e6390212..b44895ed 100644
--- a/packages/theme-studio/src/domain/ports/template-repository.port.ts
+++ b/packages/theme-studio/src/domain/ports/template-repository.port.ts
@@ -34,9 +34,10 @@ export interface ITemplateRepository {
   /**
    * Guarda un template en el almacenamiento
    * @param storeId - ID de la tienda
+   * @param templateType - Tipo de template
    * @param template - Template a guardar
    */
-  saveTemplate(storeId: string, template: Template): Promise<void>;
+  saveTemplate(storeId: string, templateType: TemplateType, template: Template): Promise<void>;
 
   /**
    * Lista todos los tipos de templates disponibles para un store
diff --git a/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
new file mode 100644
index 00000000..43c319ea
--- /dev/null
+++ b/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
@@ -0,0 +1,330 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {
+  IDevServer,
+  UpdateSectionSettingParams,
+  UpdateBlockSettingParams,
+  UpdateSubBlockSettingParams,
+  ChangeAppliedCallback,
+  ErrorCallback,
+} from '../../domain/ports/dev-server.port';
+import type { Template, TemplateType } from '../../domain/entities/template.entity';
+import type { AppliedChange } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Mensajes SSE del servidor al cliente
+ */
+type ServerMessage =
+  | { type: 'CHANGE_APPLIED'; payload: AppliedChange }
+  | { type: 'RENDER_ERROR'; payload: { error: string; sectionId: string } }
+  | { type: 'TEMPLATE_LOADED'; payload: { template: Template } }
+  | { type: 'CONNECTED' }
+  | { type: 'PING' };
+
+interface TemplateLoadPromise {
+  resolve: (template: Template) => void;
+  reject: (error: Error) => void;
+}
+
+const CONNECTION_TIMEOUT_MS = 5000;
+const TEMPLATE_LOAD_TIMEOUT_MS = 10000;
+
+// Helper: Construir URL del SSE endpoint
+const buildSSEUrl = (apiBaseUrl: string, storeId: string, templateType: TemplateType): string => {
+  return `${apiBaseUrl}/stores/${storeId}/dev/ws?storeId=${storeId}&templateType=${templateType}`;
+};
+
+// Helper: Crear error estándar
+const createError = (message: string): Error => new Error(message);
+
+// Helper: Validar conexión SSE
+const isConnected = (eventSource: EventSource | null): boolean => {
+  return eventSource !== null && eventSource.readyState === EventSource.OPEN;
+};
+
+/**
+ * Adaptador: Dev Server (SSE)
+ * Implementación concreta del cliente SSE para comunicación con el Dev Server
+ */
+export class DevServerAdapter implements IDevServer {
+  private eventSource: EventSource | null = null;
+  private changeAppliedCallback: ChangeAppliedCallback | null = null;
+  private errorCallback: ErrorCallback | null = null;
+  private apiBaseUrl: string;
+  private storeId: string | null = null;
+  private templateType: TemplateType | null = null;
+  private templateLoadPromise: TemplateLoadPromise | null = null;
+
+  constructor(apiBaseUrl: string) {
+    this.apiBaseUrl = apiBaseUrl;
+  }
+
+  async connect(
+    storeId: string,
+    onChangeApplied: ChangeAppliedCallback,
+    onError: ErrorCallback,
+    templateType: TemplateType = 'index'
+  ): Promise<void> {
+    if (isConnected(this.eventSource)) {
+      return;
+    }
+
+    this.changeAppliedCallback = onChangeApplied;
+    this.errorCallback = onError;
+    this.storeId = storeId;
+    this.templateType = templateType;
+
+    return this.establishConnection(storeId, templateType);
+  }
+
+  private establishConnection(storeId: string, templateType: TemplateType): Promise<void> {
+    return new Promise((resolve, reject) => {
+      try {
+        const sseUrl = buildSSEUrl(this.apiBaseUrl, storeId, templateType);
+        this.eventSource = new EventSource(sseUrl);
+
+        const connectionState = { hasResolved: false };
+
+        this.setupEventHandlers(connectionState, resolve, reject);
+        this.setupConnectionTimeout(connectionState, resolve, reject);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  private setupEventHandlers(
+    connectionState: { hasResolved: boolean },
+    resolve: () => void,
+    reject: (error: Error) => void
+  ): void {
+    if (!this.eventSource) return;
+
+    this.eventSource.onopen = () => this.resolveConnection(connectionState, resolve);
+
+    this.eventSource.onmessage = (event) => {
+      try {
+        const message: ServerMessage = JSON.parse(event.data);
+        this.handleServerMessage(message);
+
+        if (message.type === 'CONNECTED') {
+          this.resolveConnection(connectionState, resolve);
+        }
+      } catch (error) {
+        this.handleError(error instanceof Error ? error : createError('Error parsing message'));
+      }
+    };
+
+    this.eventSource.onerror = () => {
+      if (!connectionState.hasResolved && this.eventSource?.readyState === EventSource.CLOSED) {
+        connectionState.hasResolved = true;
+        reject(createError('SSE connection failed'));
+      }
+    };
+  }
+
+  private setupConnectionTimeout(
+    connectionState: { hasResolved: boolean },
+    resolve: () => void,
+    reject: (error: Error) => void
+  ): void {
+    setTimeout(() => {
+      if (connectionState.hasResolved) return;
+
+      connectionState.hasResolved = true;
+      if (isConnected(this.eventSource)) {
+        resolve();
+      } else {
+        reject(createError('SSE connection timeout'));
+      }
+    }, CONNECTION_TIMEOUT_MS);
+  }
+
+  private resolveConnection(connectionState: { hasResolved: boolean }, resolve: () => void): void {
+    if (!connectionState.hasResolved) {
+      connectionState.hasResolved = true;
+      resolve();
+    }
+  }
+
+  async disconnect(): Promise<void> {
+    this.closeEventSource();
+    this.clearCallbacks();
+    this.clearState();
+  }
+
+  private closeEventSource(): void {
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
+    }
+  }
+
+  private clearCallbacks(): void {
+    this.changeAppliedCallback = null;
+    this.errorCallback = null;
+  }
+
+  private clearState(): void {
+    this.storeId = null;
+    this.templateType = null;
+    this.templateLoadPromise = null;
+  }
+
+  async loadTemplate(storeId: string, templateType: TemplateType): Promise<Template> {
+    this.ensureConnected();
+    this.templateType = templateType;
+
+    return this.waitForTemplate();
+  }
+
+  private ensureConnected(): void {
+    if (!isConnected(this.eventSource)) {
+      throw createError('SSE is not connected');
+    }
+  }
+
+  private waitForTemplate(): Promise<Template> {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.clearTemplatePromise();
+        reject(createError('Timeout loading template'));
+      }, TEMPLATE_LOAD_TIMEOUT_MS);
+
+      this.templateLoadPromise = {
+        resolve: (template: Template) => {
+          clearTimeout(timeout);
+          this.clearTemplatePromise();
+          resolve(template);
+        },
+        reject: (error: Error) => {
+          clearTimeout(timeout);
+          this.clearTemplatePromise();
+          reject(error);
+        },
+      };
+    });
+  }
+
+  private clearTemplatePromise(): void {
+    this.templateLoadPromise = null;
+  }
+
+  async updateSectionSetting(params: UpdateSectionSettingParams): Promise<void> {
+    await this.sendUpdateRequest('UPDATE_SECTION_SETTING', params, params.storeId);
+  }
+
+  async updateBlockSetting(params: UpdateBlockSettingParams): Promise<void> {
+    await this.sendUpdateRequest('UPDATE_BLOCK_SETTING', params, params.storeId);
+  }
+
+  async updateSubBlockSetting(params: UpdateSubBlockSettingParams): Promise<void> {
+    await this.sendUpdateRequest('UPDATE_SUB_BLOCK_SETTING', params, params.storeId);
+  }
+
+  isConnected(): boolean {
+    return isConnected(this.eventSource);
+  }
+
+  private async sendUpdateRequest(
+    type: string,
+    payload: UpdateSectionSettingParams | UpdateBlockSettingParams | UpdateSubBlockSettingParams,
+    storeId: string
+  ): Promise<void> {
+    this.ensureConnected();
+    this.ensureTemplateType();
+
+    try {
+      const response = await this.postUpdateRequest(type, payload, storeId);
+      await this.validateResponse(response);
+    } catch (error) {
+      this.handleError(error instanceof Error ? error : createError('Failed to send update'));
+      throw error;
+    }
+  }
+
+  private ensureTemplateType(): void {
+    if (!this.templateType) {
+      throw createError('Template type not set');
+    }
+  }
+
+  private async postUpdateRequest(
+    type: string,
+    payload: UpdateSectionSettingParams | UpdateBlockSettingParams | UpdateSubBlockSettingParams,
+    storeId: string
+  ): Promise<Response> {
+    return fetch(`${this.apiBaseUrl}/stores/${storeId}/dev/update`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        type,
+        payload,
+        templateType: this.templateType,
+      }),
+    });
+  }
+
+  private async validateResponse(response: Response): Promise<void> {
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Unknown error' }));
+      throw createError(error.error || 'Failed to update setting');
+    }
+  }
+
+  private handleError(error: Error): void {
+    if (this.errorCallback) {
+      this.errorCallback(error);
+    }
+  }
+
+  private handleServerMessage(message: ServerMessage): void {
+    const handlers: Record<ServerMessage['type'], () => void> = {
+      CHANGE_APPLIED: () => this.handleChangeApplied(message as Extract<ServerMessage, { type: 'CHANGE_APPLIED' }>),
+      RENDER_ERROR: () => this.handleRenderError(message as Extract<ServerMessage, { type: 'RENDER_ERROR' }>),
+      TEMPLATE_LOADED: () => this.handleTemplateLoaded(message as Extract<ServerMessage, { type: 'TEMPLATE_LOADED' }>),
+      CONNECTED: () => {
+        // Confirmación de conexión - no acción necesaria
+      },
+      PING: () => {
+        // Mantener conexión viva - no acción necesaria
+      },
+    };
+
+    handlers[message.type]?.();
+  }
+
+  private handleChangeApplied(message: Extract<ServerMessage, { type: 'CHANGE_APPLIED' }>): void {
+    if (this.changeAppliedCallback) {
+      this.changeAppliedCallback(message.payload);
+    }
+  }
+
+  private handleRenderError(message: Extract<ServerMessage, { type: 'RENDER_ERROR' }>): void {
+    if (this.errorCallback) {
+      this.errorCallback(createError(message.payload.error));
+    }
+  }
+
+  private handleTemplateLoaded(message: Extract<ServerMessage, { type: 'TEMPLATE_LOADED' }>): void {
+    if (this.templateLoadPromise) {
+      this.templateLoadPromise.resolve(message.payload.template);
+    }
+  }
+}
diff --git a/packages/theme-studio/src/infrastructure/adapters/template-manager.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/template-manager.adapter.ts
new file mode 100644
index 00000000..421964d6
--- /dev/null
+++ b/packages/theme-studio/src/infrastructure/adapters/template-manager.adapter.ts
@@ -0,0 +1,159 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { ITemplateRepository } from '../../domain/ports/template-repository.port';
+import type { Template, TemplateType, TemplateBlock } from '../../domain/entities/template.entity';
+import type { TemplateChange } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Adaptador: Template Manager
+ * Implementación concreta del gestor de templates en memoria
+ * Mantiene el estado del template durante la sesión de edición
+ */
+export class TemplateManagerAdapter implements ITemplateManager {
+  private currentTemplate: Template | null = null;
+  private pendingChanges: TemplateChange[] = [];
+
+  constructor(private readonly templateRepository: ITemplateRepository) {}
+
+  async loadTemplate(storeId: string, templateType: TemplateType): Promise<Template> {
+    const template = await this.templateRepository.getTemplate(storeId, templateType);
+    if (!template) {
+      throw new Error(`Template ${templateType} not found for store ${storeId}`);
+    }
+    this.currentTemplate = template;
+    this.pendingChanges = [];
+    return template;
+  }
+
+  /**
+   * Establece el template directamente sin cargarlo desde el repositorio
+   * Útil cuando el template ya está disponible (por ejemplo, recibido por SSE)
+   */
+  setTemplate(template: Template): void {
+    this.currentTemplate = template;
+    this.pendingChanges = [];
+  }
+
+  getCurrentTemplate(): Template | null {
+    return this.currentTemplate;
+  }
+
+  applyChange(change: TemplateChange): Template {
+    if (!this.currentTemplate) {
+      throw new Error('No template loaded');
+    }
+
+    // Crear copia del template para inmutabilidad
+    const updatedTemplate: Template = {
+      ...this.currentTemplate,
+      sections: { ...this.currentTemplate.sections },
+    };
+
+    // Aplicar cambio según el tipo
+    switch (change.type) {
+      case 'UPDATE_SECTION_SETTING':
+        if (change.settingId && change.value !== undefined) {
+          const section = updatedTemplate.sections[change.sectionId];
+          if (section) {
+            updatedTemplate.sections[change.sectionId] = {
+              ...section,
+              settings: {
+                ...section.settings,
+                [change.settingId]: change.value,
+              },
+            };
+          }
+        }
+        break;
+
+      case 'UPDATE_BLOCK_SETTING':
+        if (change.blockId && change.settingId && change.value !== undefined) {
+          const section = updatedTemplate.sections[change.sectionId];
+          if (section?.blocks) {
+            const settingId = change.settingId as string;
+            updatedTemplate.sections[change.sectionId] = {
+              ...section,
+              blocks: section.blocks.map((block) =>
+                block.id === change.blockId
+                  ? {
+                      ...block,
+                      settings: {
+                        ...block.settings,
+                        [settingId]: change.value,
+                      },
+                    }
+                  : block
+              ),
+            };
+          }
+        }
+        break;
+
+      case 'UPDATE_SUB_BLOCK_SETTING':
+        if (change.blockId && change.subBlockId && change.settingId && change.value !== undefined) {
+          const section = updatedTemplate.sections[change.sectionId];
+          if (section?.blocks) {
+            const settingId = change.settingId as string;
+            updatedTemplate.sections[change.sectionId] = {
+              ...section,
+              blocks: section.blocks.map((block) => {
+                if (block.id === change.blockId && block.blocks) {
+                  return {
+                    ...block,
+                    blocks: block.blocks.map((subBlock: TemplateBlock) =>
+                      subBlock.id === change.subBlockId
+                        ? {
+                            ...subBlock,
+                            settings: {
+                              ...subBlock.settings,
+                              [settingId]: change.value,
+                            },
+                          }
+                        : subBlock
+                    ),
+                  };
+                }
+                return block;
+              }),
+            };
+          }
+        }
+        break;
+
+      // TODO: Implementar otros tipos de cambios (ADD_BLOCK, DELETE_BLOCK, etc.)
+    }
+
+    // Actualizar template y agregar cambio a la lista
+    this.currentTemplate = updatedTemplate;
+    this.pendingChanges.push(change);
+
+    return updatedTemplate;
+  }
+
+  getPendingChanges(): TemplateChange[] {
+    return [...this.pendingChanges];
+  }
+
+  clearPendingChanges(): void {
+    this.pendingChanges = [];
+  }
+
+  hasPendingChanges(): boolean {
+    return this.pendingChanges.length > 0;
+  }
+}
diff --git a/packages/theme-studio/src/infrastructure/adapters/template-repository.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/template-repository.adapter.ts
index c020a647..dd5225ae 100644
--- a/packages/theme-studio/src/infrastructure/adapters/template-repository.adapter.ts
+++ b/packages/theme-studio/src/infrastructure/adapters/template-repository.adapter.ts
@@ -40,8 +40,8 @@ export class TemplateRepositoryAdapter implements ITemplateRepository {
     return this.mapToTemplate(data, templateType);
   }
 
-  async saveTemplate(storeId: string, template: Template): Promise<void> {
-    const response = await fetch(`${this.apiBaseUrl}/stores/${storeId}/themes/templates/${template.type}`, {
+  async saveTemplate(storeId: string, templateType: TemplateType, template: Template): Promise<void> {
+    const response = await fetch(`${this.apiBaseUrl}/stores/${storeId}/themes/templates/${templateType}`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index 7072be09..0f4824c4 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -8,11 +8,12 @@ import { Sidebar } from './sidebar/Sidebar';
 import { PreviewPane } from './preview/PreviewPane';
 import { SettingsPane } from './settings/SettingsPane';
 import { EditorHeader } from './header/EditorHeader';
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { useStoreTemplates } from '../hooks/useStoreTemplates';
 import { useSidebarState } from '../hooks/useSidebarState';
 import { useSelectedSection } from '../hooks/useSelectedSection';
+import { useHotReload } from '../hooks/useHotReload';
 
 export interface ThemeStudioProps {
   storeId: string;
@@ -34,6 +35,15 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
   const router = useRouter();
 
   const sidebarState = useSidebarState();
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const hotReload = useHotReload({
+    storeId,
+    apiBaseUrl,
+    iframeRef,
+    currentPageId,
+    enabled: true,
+  });
 
   const selectedSectionData = useSelectedSection({
     storeId,
@@ -124,6 +134,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
               selectedBlockId={sidebarState.selectedBlockId}
               selectedSubBlockId={sidebarState.selectedSubBlockId}
               selectedElementName={selectedElementName}
+              iframeRef={iframeRef}
               onPathChange={(newPath) => {
                 setCurrentPath(newPath);
                 const page = pages.find((p) => p.url === newPath);
@@ -141,6 +152,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
               currentPageId={currentPageId}
               sidebarState={sidebarState}
               imageSelectorComponent={imageSelectorComponent}
+              hotReload={hotReload}
             />
           </div>
         </div>
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index e60697d2..75755282 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -20,6 +20,7 @@ interface PreviewPaneProps {
   selectedElementName?: string | null;
   onPathChange?: (newPath: string) => void;
   onElementClick?: (sectionId: string | null, blockId: string | null, subBlockId?: string | null) => void;
+  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
 }
 
 export function PreviewPane({
@@ -32,9 +33,11 @@ export function PreviewPane({
   selectedElementName,
   onPathChange,
   onElementClick,
+  iframeRef: externalIframeRef,
 }: PreviewPaneProps) {
   const { previewUrl } = usePreviewUrl({ domain, path: currentPath });
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const internalIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const iframeRef = externalIframeRef || internalIframeRef;
   const { isNavigating } = useIframeNavigation({
     iframeRef,
     domain,
diff --git a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
index 9a4a0b7e..08668f21 100644
--- a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
+++ b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
@@ -20,7 +20,8 @@ import { Card, BlockStack, Text, Button, Box, Scrollable, InlineStack } from '@s
 import { useSelectedSection } from '../../hooks/useSelectedSection';
 import type { UseSidebarStateResult } from '../../hooks/useSidebarState';
 import { SettingsGroup } from './SettingsGroup';
-import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useSettingsPane } from '../../hooks/useSettingsPane';
+import { useMemo, useCallback } from 'react';
 
 interface SettingsPaneProps {
   storeId: string;
@@ -33,6 +34,18 @@ interface SettingsPaneProps {
     onSelect?: (image: { url: string } | null) => void;
     initialSelectedImage?: string | null;
   }) => React.ReactElement | null;
+  hotReload?: {
+    updateSectionSetting: (sectionId: string, settingId: string, value: unknown) => Promise<void>;
+    updateBlockSetting: (sectionId: string, blockId: string, settingId: string, value: unknown) => Promise<void>;
+    updateSubBlockSetting: (
+      sectionId: string,
+      blockId: string,
+      subBlockId: string,
+      settingId: string,
+      value: unknown
+    ) => Promise<void>;
+    isConnected: boolean;
+  };
 }
 
 export function SettingsPane({
@@ -41,6 +54,7 @@ export function SettingsPane({
   currentPageId,
   sidebarState,
   imageSelectorComponent,
+  hotReload,
 }: SettingsPaneProps) {
   const { section, block, schema, currentSettings } = useSelectedSection({
     storeId,
@@ -48,9 +62,14 @@ export function SettingsPane({
     currentPageId,
     selectedSectionId: sidebarState.selectedSectionId,
     selectedBlockId: sidebarState.selectedBlockId,
+    selectedSubBlockId: sidebarState.selectedSubBlockId,
   });
 
-  const [localSettings, setLocalSettings] = useState<Record<string, any>>(currentSettings);
+  const { localSettings, handleSettingChange } = useSettingsPane({
+    currentSettings,
+    sidebarState,
+    hotReload,
+  });
 
   // Agrupar settings por headers
   const groupedSettings = useMemo(() => {
@@ -83,18 +102,6 @@ export function SettingsPane({
     return groups;
   }, [schema]);
 
-  // Sincronizar localSettings con currentSettings cuando cambian
-  useEffect(() => {
-    setLocalSettings(currentSettings);
-  }, [currentSettings]);
-
-  const handleSettingChange = useCallback((settingId: string, value: any) => {
-    setLocalSettings((prev) => ({
-      ...prev,
-      [settingId]: value,
-    }));
-  }, []);
-
   const handleRemoveBlock = useCallback(() => {
     if (!section || !block) return;
 
@@ -102,6 +109,17 @@ export function SettingsPane({
     console.log('Remove block:', block.id);
   }, [section, block]);
 
+  const displayName = useMemo(() => {
+    if (block) {
+      if (block.name && typeof block.name === 'string') {
+        return block.name;
+      }
+      const blockSchema = section?.schema?.blocks?.find((b: any) => b.type === block.type);
+      return blockSchema?.name || block.type;
+    }
+    return section?.name || 'Sección';
+  }, [block, section]);
+
   if (!sidebarState.selectedSectionId) {
     return (
       <div>
@@ -123,17 +141,6 @@ export function SettingsPane({
     );
   }
 
-  const displayName = useMemo(() => {
-    if (block) {
-      if (block.name && typeof block.name === 'string') {
-        return block.name;
-      }
-      const blockSchema = section?.schema?.blocks?.find((b: any) => b.type === block.type);
-      return blockSchema?.name || block.type;
-    }
-    return section?.name || 'Sección';
-  }, [block, section]);
-
   return (
     <div>
       <Box padding="200">
diff --git a/packages/theme-studio/src/presentation/hooks/useDevServer.ts b/packages/theme-studio/src/presentation/hooks/useDevServer.ts
new file mode 100644
index 00000000..f4f41023
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useDevServer.ts
@@ -0,0 +1,141 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { DevServerAdapter } from '../../infrastructure/adapters/dev-server.adapter';
+import type { IDevServer } from '../../domain/ports/dev-server.port';
+import type { AppliedChange } from '../../domain/entities/editor-session.entity';
+import type { Template, TemplateType } from '../../domain/entities/template.entity';
+
+interface UseDevServerParams {
+  storeId: string;
+  apiBaseUrl: string;
+  enabled?: boolean;
+}
+
+interface UseDevServerResult {
+  devServer: IDevServer | null;
+  isConnected: boolean;
+  isConnecting: boolean;
+  error: Error | null;
+  connect: () => Promise<void>;
+  disconnect: () => Promise<void>;
+  loadTemplate: (templateType: TemplateType) => Promise<Template | null>;
+  onChangeApplied: (callback: (change: AppliedChange) => void) => void;
+}
+
+/**
+ * Hook de presentación: useDevServer
+ * Gestiona la conexión y comunicación con el Dev Server
+ */
+export function useDevServer({ storeId, apiBaseUrl, enabled = true }: UseDevServerParams): UseDevServerResult {
+  const [devServer, setDevServer] = useState<IDevServer | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const changeAppliedCallbacksRef = useRef<Set<(change: AppliedChange) => void>>(new Set());
+
+  const handleChangeApplied = useCallback((change: AppliedChange) => {
+    changeAppliedCallbacksRef.current.forEach((callback) => {
+      try {
+        callback(change);
+      } catch (err) {
+        console.error('Error from Dev Server:', err);
+      }
+    });
+  }, []);
+
+  const handleError = useCallback((err: Error) => {
+    setError(err);
+    setIsConnected(false);
+  }, []);
+
+  const connect = useCallback(async () => {
+    if (!enabled || !storeId) return;
+
+    setIsConnecting(true);
+    setError(null);
+
+    try {
+      const server = new DevServerAdapter(apiBaseUrl);
+      await server.connect(storeId, handleChangeApplied, handleError);
+      setDevServer(server);
+      setIsConnected(true);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Error connecting to Dev Server');
+      setError(error);
+      setIsConnected(false);
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [storeId, apiBaseUrl, enabled, handleChangeApplied, handleError]);
+
+  const disconnect = useCallback(async () => {
+    if (devServer) {
+      await devServer.disconnect();
+      setDevServer(null);
+      setIsConnected(false);
+    }
+  }, [devServer]);
+
+  const loadTemplate = useCallback(
+    async (templateType: TemplateType): Promise<Template | null> => {
+      if (!devServer || !isConnected) {
+        return null;
+      }
+
+      try {
+        return await devServer.loadTemplate(storeId, templateType);
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error('Error loading template');
+        setError(error);
+        return null;
+      }
+    },
+    [devServer, isConnected, storeId]
+  );
+
+  const onChangeApplied = useCallback((callback: (change: AppliedChange) => void) => {
+    changeAppliedCallbacksRef.current.add(callback);
+    return () => {
+      changeAppliedCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
+  // Conectar automáticamente cuando se monta el componente
+  useEffect(() => {
+    if (enabled && storeId) {
+      connect();
+    }
+
+    return () => {
+      if (devServer) {
+        disconnect();
+      }
+    };
+  }, [enabled, storeId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    devServer,
+    isConnected,
+    isConnecting,
+    error,
+    connect,
+    disconnect,
+    loadTemplate,
+    onChangeApplied,
+  };
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useHotReload.ts b/packages/theme-studio/src/presentation/hooks/useHotReload.ts
new file mode 100644
index 00000000..7c213af1
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useHotReload.ts
@@ -0,0 +1,202 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+import { UpdateSectionSettingUseCase } from '../../application/use-cases/update-section-setting.use-case';
+import { UpdateBlockSettingUseCase } from '../../application/use-cases/update-block-setting.use-case';
+import { UpdateSubBlockSettingUseCase } from '../../application/use-cases/update-sub-block-setting.use-case';
+import { DevServerAdapter } from '../../infrastructure/adapters/dev-server.adapter';
+import { TemplateManagerAdapter } from '../../infrastructure/adapters/template-manager.adapter';
+import { TemplateRepositoryAdapter } from '../../infrastructure/adapters/template-repository.adapter';
+import type { RefObject } from 'react';
+import type { TemplateType } from '../../domain/entities/template.entity';
+import type { ChangeAppliedCallback, ErrorCallback } from '../../domain/ports/dev-server.port';
+
+interface UseHotReloadParams {
+  storeId: string;
+  apiBaseUrl: string;
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  currentPageId?: string;
+  enabled?: boolean;
+}
+
+interface UseHotReloadResult {
+  updateSectionSetting: (sectionId: string, settingId: string, value: unknown) => Promise<void>;
+  updateBlockSetting: (sectionId: string, blockId: string, settingId: string, value: unknown) => Promise<void>;
+  updateSubBlockSetting: (
+    sectionId: string,
+    blockId: string,
+    subBlockId: string,
+    settingId: string,
+    value: unknown
+  ) => Promise<void>;
+  isConnected: boolean;
+  hasPendingChanges: boolean;
+}
+
+/**
+ * Hook de presentación: useHotReload
+ * Proporciona funciones para actualizar settings con hot-reload
+ * Maneja la comunicación con el Dev Server y actualización del iframe
+ */
+export function useHotReload({
+  storeId,
+  apiBaseUrl,
+  iframeRef,
+  currentPageId = 'index',
+  enabled = true,
+}: UseHotReloadParams): UseHotReloadResult {
+  const devServerRef = useRef<DevServerAdapter | null>(null);
+  const templateManagerRef = useRef<TemplateManagerAdapter | null>(null);
+  const updateSectionSettingUseCaseRef = useRef<UpdateSectionSettingUseCase | null>(null);
+  const updateBlockSettingUseCaseRef = useRef<UpdateBlockSettingUseCase | null>(null);
+  const updateSubBlockSettingUseCaseRef = useRef<UpdateSubBlockSettingUseCase | null>(null);
+  const lastPageIdRef = useRef<string | null>(null);
+
+  // Helper para manejar cambios aplicados en el iframe
+  const handleChangeApplied: ChangeAppliedCallback = useCallback(
+    (change) => {
+      if (change.html && iframeRef.current?.contentWindow) {
+        const iframe = iframeRef.current;
+        const sectionElement = iframe.contentDocument?.querySelector(`[data-section-id="${change.sectionId}"]`);
+        if (sectionElement) {
+          sectionElement.outerHTML = change.html;
+        }
+      }
+    },
+    [iframeRef]
+  );
+
+  // Helper para manejar errores
+  const handleError: ErrorCallback = useCallback((error) => {
+    console.error('Error from Dev Server:', error);
+  }, []);
+
+  // Helper para conectar y cargar template
+  const connectAndLoadTemplate = useCallback(
+    async (devServer: DevServerAdapter, templateManager: TemplateManagerAdapter, pageId: string) => {
+      await devServer.connect(storeId, handleChangeApplied, handleError, pageId as TemplateType);
+      const template = await devServer.loadTemplate(storeId, pageId as any);
+      if (template) {
+        templateManager.setTemplate(template);
+      }
+    },
+    [storeId, handleChangeApplied, handleError]
+  );
+
+  // Inicializar adaptadores y manejar conexión/reconexión
+  useEffect(() => {
+    if (!enabled || !storeId) return;
+
+    const needsReconnect = lastPageIdRef.current !== null && lastPageIdRef.current !== currentPageId;
+    const isInitialized = devServerRef.current !== null;
+
+    // Inicializar adaptadores solo si no están inicializados
+    if (!isInitialized) {
+      const devServer = new DevServerAdapter(apiBaseUrl);
+      const templateRepository = new TemplateRepositoryAdapter(apiBaseUrl);
+      const templateManager = new TemplateManagerAdapter(templateRepository);
+
+      devServerRef.current = devServer;
+      templateManagerRef.current = templateManager;
+      updateSectionSettingUseCaseRef.current = new UpdateSectionSettingUseCase(devServer, templateManager);
+      updateBlockSettingUseCaseRef.current = new UpdateBlockSettingUseCase(devServer, templateManager);
+      updateSubBlockSettingUseCaseRef.current = new UpdateSubBlockSettingUseCase(devServer, templateManager);
+    }
+
+    const devServer = devServerRef.current!;
+    const templateManager = templateManagerRef.current!;
+
+    // Reconectar si cambió la página
+    if (needsReconnect) {
+      devServer
+        .disconnect()
+        .then(() => connectAndLoadTemplate(devServer, templateManager, currentPageId))
+        .catch((error) => console.error('Error reconnecting to Dev Server:', error));
+    } else if (!isInitialized) {
+      // Conexión inicial
+      connectAndLoadTemplate(devServer, templateManager, currentPageId).catch((error) =>
+        console.error('Error connecting to Dev Server:', error)
+      );
+    }
+
+    lastPageIdRef.current = currentPageId;
+
+    return () => {
+      if (needsReconnect || !enabled) {
+        devServer.disconnect().catch(() => {
+          // Ignorar errores al desconectar
+        });
+      }
+    };
+  }, [storeId, apiBaseUrl, enabled, currentPageId, connectAndLoadTemplate]);
+
+  // Helper genérico para ejecutar casos de uso
+  const executeUseCase = useCallback(
+    async <T extends { execute: (params: any) => Promise<void> }>(useCaseRef: { current: T | null }, params: any) => {
+      if (!useCaseRef.current) {
+        throw new Error('Hot reload is not initialized');
+      }
+      await useCaseRef.current.execute(params);
+    },
+    []
+  );
+
+  const updateSectionSetting = useCallback(
+    async (sectionId: string, settingId: string, value: unknown): Promise<void> => {
+      await executeUseCase(updateSectionSettingUseCaseRef, { storeId, sectionId, settingId, value });
+    },
+    [storeId, executeUseCase]
+  );
+
+  const updateBlockSetting = useCallback(
+    async (sectionId: string, blockId: string, settingId: string, value: unknown): Promise<void> => {
+      await executeUseCase(updateBlockSettingUseCaseRef, { storeId, sectionId, blockId, settingId, value });
+    },
+    [storeId, executeUseCase]
+  );
+
+  const updateSubBlockSetting = useCallback(
+    async (
+      sectionId: string,
+      blockId: string,
+      subBlockId: string,
+      settingId: string,
+      value: unknown
+    ): Promise<void> => {
+      await executeUseCase(updateSubBlockSettingUseCaseRef, {
+        storeId,
+        sectionId,
+        blockId,
+        subBlockId,
+        settingId,
+        value,
+      });
+    },
+    [storeId, executeUseCase]
+  );
+
+  const isConnected = devServerRef.current?.isConnected() ?? false;
+  const hasPendingChanges = templateManagerRef.current?.hasPendingChanges() ?? false;
+
+  return {
+    updateSectionSetting,
+    updateBlockSetting,
+    updateSubBlockSetting,
+    isConnected,
+    hasPendingChanges,
+  };
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useSettingsPane.ts b/packages/theme-studio/src/presentation/hooks/useSettingsPane.ts
new file mode 100644
index 00000000..b1768fa3
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useSettingsPane.ts
@@ -0,0 +1,182 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import type { UseSidebarStateResult } from './useSidebarState';
+
+interface UseSettingsPaneParams {
+  currentSettings: Record<string, any>;
+  sidebarState: UseSidebarStateResult;
+  hotReload?: {
+    updateSectionSetting: (sectionId: string, settingId: string, value: unknown) => Promise<void>;
+    updateBlockSetting: (sectionId: string, blockId: string, settingId: string, value: unknown) => Promise<void>;
+    updateSubBlockSetting: (
+      sectionId: string,
+      blockId: string,
+      subBlockId: string,
+      settingId: string,
+      value: unknown
+    ) => Promise<void>;
+    isConnected: boolean;
+  };
+}
+
+interface UseSettingsPaneResult {
+  localSettings: Record<string, any>;
+  handleSettingChange: (settingId: string, value: any) => void;
+}
+
+interface PendingChange {
+  settingId: string;
+  value: any;
+}
+
+const DEBOUNCE_DELAY_MS = 300;
+
+// Helper: Ejecutar update según el tipo de elemento seleccionado
+const executeUpdate = async (
+  hotReload: NonNullable<UseSettingsPaneParams['hotReload']>,
+  sidebarState: UseSidebarStateResult,
+  settingId: string,
+  value: unknown
+): Promise<void> => {
+  const { selectedSectionId, selectedBlockId, selectedSubBlockId } = sidebarState;
+
+  if (!selectedSectionId) {
+    return;
+  }
+
+  if (selectedSubBlockId && selectedBlockId) {
+    return hotReload.updateSubBlockSetting(selectedSectionId, selectedBlockId, selectedSubBlockId, settingId, value);
+  }
+
+  if (selectedBlockId) {
+    return hotReload.updateBlockSetting(selectedSectionId, selectedBlockId, settingId, value);
+  }
+
+  return hotReload.updateSectionSetting(selectedSectionId, settingId, value);
+};
+
+// Helper: Validar si se puede enviar el cambio
+const canSendChange = (hotReload?: UseSettingsPaneParams['hotReload'], selectedSectionId?: string | null): boolean => {
+  return Boolean(hotReload?.isConnected && selectedSectionId);
+};
+
+export function useSettingsPane({
+  currentSettings,
+  sidebarState,
+  hotReload,
+}: UseSettingsPaneParams): UseSettingsPaneResult {
+  const [localSettings, setLocalSettings] = useState<Record<string, any>>(currentSettings);
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const pendingChangesRef = useRef<Map<string, PendingChange>>(new Map());
+
+  const selectionKey = useMemo(
+    () =>
+      `${sidebarState.selectedSectionId || ''}-${sidebarState.selectedBlockId || ''}-${sidebarState.selectedSubBlockId || ''}`,
+    [sidebarState.selectedSectionId, sidebarState.selectedBlockId, sidebarState.selectedSubBlockId]
+  );
+
+  // Helper: Limpiar recursos (timeouts y cambios pendientes)
+  const clearDebounceResources = useCallback(() => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = null;
+    }
+    pendingChangesRef.current.clear();
+  }, []);
+
+  // Sincronizar settings y limpiar recursos al cambiar de selección
+  useEffect(() => {
+    setLocalSettings(currentSettings);
+    clearDebounceResources();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectionKey]);
+
+  // Limpiar timeout al desmontar
+  useEffect(() => clearDebounceResources, [clearDebounceResources]);
+
+  // Helper: Revertir cambio local si falla
+  const revertLocalChange = useCallback(
+    (settingId: string) => {
+      setLocalSettings((prev) => ({
+        ...prev,
+        [settingId]: currentSettings[settingId],
+      }));
+    },
+    [currentSettings]
+  );
+
+  // Helper: Procesar un cambio individual con manejo de errores
+  const processChange = useCallback(
+    async (change: PendingChange) => {
+      if (!hotReload) return;
+
+      try {
+        await executeUpdate(hotReload, sidebarState, change.settingId, change.value);
+      } catch (error) {
+        console.error('Error updating setting:', error);
+        revertLocalChange(change.settingId);
+      }
+    },
+    [hotReload, sidebarState, revertLocalChange]
+  );
+
+  // Función para enviar cambios al servidor
+  const sendChangesToServer = useCallback(async () => {
+    if (!canSendChange(hotReload, sidebarState.selectedSectionId)) {
+      return;
+    }
+
+    const changes = Array.from(pendingChangesRef.current.values());
+    pendingChangesRef.current.clear();
+
+    await Promise.all(changes.map(processChange));
+  }, [hotReload, sidebarState.selectedSectionId, processChange]);
+
+  // Helper: Programar envío de cambios con debounce
+  const scheduleDebouncedSend = useCallback(() => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    debounceTimeoutRef.current = setTimeout(() => {
+      debounceTimeoutRef.current = null;
+      sendChangesToServer();
+    }, DEBOUNCE_DELAY_MS);
+  }, [sendChangesToServer]);
+
+  const handleSettingChange = useCallback(
+    (settingId: string, value: any) => {
+      setLocalSettings((prev) => ({ ...prev, [settingId]: value }));
+
+      if (!canSendChange(hotReload, sidebarState.selectedSectionId)) {
+        if (!hotReload) console.warn('Hot reload not available');
+        else if (!hotReload.isConnected) console.warn('Hot reload not connected');
+        return;
+      }
+
+      pendingChangesRef.current.set(settingId, { settingId, value });
+      scheduleDebouncedSend();
+    },
+    [hotReload, sidebarState.selectedSectionId, scheduleDebouncedSend]
+  );
+
+  return {
+    localSettings,
+    handleSettingChange,
+  };
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a418d6c..f78cfe09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10898,7 +10898,7 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/client-sso-oidc': 3.621.0(@aws-sdk/client-sts@3.901.0)
+      '@aws-sdk/client-sso-oidc': 3.621.0(@aws-sdk/client-sts@3.621.0)
       '@aws-sdk/client-sts': 3.621.0
       '@aws-sdk/core': 3.621.0
       '@aws-sdk/credential-provider-node': 3.621.0(@aws-sdk/client-sso-oidc@3.621.0(@aws-sdk/client-sts@3.621.0))(@aws-sdk/client-sts@3.621.0)
@@ -11036,7 +11036,7 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/client-sso-oidc': 3.621.0(@aws-sdk/client-sts@3.621.0)
+      '@aws-sdk/client-sso-oidc': 3.621.0(@aws-sdk/client-sts@3.901.0)
       '@aws-sdk/client-sts': 3.621.0
       '@aws-sdk/core': 3.621.0
       '@aws-sdk/credential-provider-node': 3.621.0(@aws-sdk/client-sso-oidc@3.621.0(@aws-sdk/client-sts@3.621.0))(@aws-sdk/client-sts@3.621.0)

From a1120343a2656db02527b5980d5a1587af3407f2 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 16:23:22 -0500
Subject: [PATCH 34/49] Update session ID generation in
 DevSessionManagerService to use secure random bytes for improved uniqueness

---
 .../infrastructure/services/dev-session-manager.service.ts     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service.ts b/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service.ts
index 39b482c3..2f4c9059 100644
--- a/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service.ts
+++ b/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service.ts
@@ -16,6 +16,7 @@
 
 import type { DevSession } from '../../domain/entities/dev-session.entity';
 import type { Template, TemplateType } from '@fasttify/theme-studio';
+import crypto from 'crypto';
 
 /**
  * Servicio: Dev Session Manager
@@ -39,7 +40,7 @@ export class DevSessionManagerService {
     }
 
     const newSession: DevSession = {
-      sessionId: `session-${Date.now()}-${Math.random()}`,
+      sessionId: `session-${Date.now()}-${crypto.randomBytes(16).toString('hex')}`,
       storeId,
       templateType,
       template,

From 8696bce23d541bba9ba976d32d363f97a419e012 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Tue, 4 Nov 2025 16:57:42 -0500
Subject: [PATCH 35/49] Enhance SectionRenderer to support compatibility for
 templates without fasttify_attributes

This commit introduces a compatibility system in the SectionRenderer class, allowing templates that do not utilize fasttify_attributes to function correctly. It adds a detection mechanism for fasttify_attributes in the template content and wraps rendered content with compatibility markers when necessary. Additionally, the iframe selection script is updated to include compatibility handling, ensuring seamless integration for themes lacking fasttify_attributes.
---
 .../rendering/fasttify-attributes-detector.ts |  85 ++++++++
 .../services/rendering/section-renderer.ts    |  28 ++-
 .../utils/iframe-selection-script.js          |  17 +-
 .../iframe-selection-script/compatibility.js  | 202 ++++++++++++++++++
 4 files changed, 326 insertions(+), 6 deletions(-)
 create mode 100644 packages/liquid-forge/services/rendering/fasttify-attributes-detector.ts
 create mode 100644 packages/theme-studio/src/presentation/utils/iframe-selection-script/compatibility.js

diff --git a/packages/liquid-forge/services/rendering/fasttify-attributes-detector.ts b/packages/liquid-forge/services/rendering/fasttify-attributes-detector.ts
new file mode 100644
index 00000000..c13e4c40
--- /dev/null
+++ b/packages/liquid-forge/services/rendering/fasttify-attributes-detector.ts
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Detecta si un template Liquid tiene el filtro fasttify_attributes configurado
+ */
+export class FasttifyAttributesDetector {
+  /**
+   * Detecta si el template tiene {{ section.fasttify_attributes }} o {{ block.fasttify_attributes }}
+   * @param templateContent - Contenido del template Liquid
+   * @returns true si tiene el filtro, false si no
+   */
+  static hasFasttifyAttributes(templateContent: string): boolean {
+    if (!templateContent || typeof templateContent !== 'string') {
+      return false;
+    }
+
+    // Patrones para detectar el filtro en diferentes formatos:
+    // - {{ section.fasttify_attributes }}
+    // - {{block.fasttify_attributes}}
+    // - {{ section.fasttify_attributes | filter }}
+    // - {{ block.fasttify_attributes }}
+    const patterns = [
+      /\{\{\s*section\.fasttify_attributes\s*\}\}/i,
+      /\{\{\s*block\.fasttify_attributes\s*\}\}/i,
+      /\{\{\s*section\.fasttify_attributes\s*\|/i,
+      /\{\{\s*block\.fasttify_attributes\s*\|/i,
+      /\{\{-\s*section\.fasttify_attributes\s*-\}\}/i,
+      /\{\{-\s*block\.fasttify_attributes\s*-\}\}/i,
+    ];
+
+    return patterns.some((pattern) => pattern.test(templateContent));
+  }
+
+  /**
+   * Detecta si el template tiene fasttify_attributes para secciones
+   * @param templateContent - Contenido del template Liquid
+   * @returns true si tiene {{ section.fasttify_attributes }}
+   */
+  static hasSectionFasttifyAttributes(templateContent: string): boolean {
+    if (!templateContent || typeof templateContent !== 'string') {
+      return false;
+    }
+
+    const patterns = [
+      /\{\{\s*section\.fasttify_attributes\s*\}\}/i,
+      /\{\{\s*section\.fasttify_attributes\s*\|/i,
+      /\{\{-\s*section\.fasttify_attributes\s*-\}\}/i,
+    ];
+
+    return patterns.some((pattern) => pattern.test(templateContent));
+  }
+
+  /**
+   * Detecta si el template tiene fasttify_attributes para bloques
+   * @param templateContent - Contenido del template Liquid
+   * @returns true si tiene {{ block.fasttify_attributes }}
+   */
+  static hasBlockFasttifyAttributes(templateContent: string): boolean {
+    if (!templateContent || typeof templateContent !== 'string') {
+      return false;
+    }
+
+    const patterns = [
+      /\{\{\s*block\.fasttify_attributes\s*\}\}/i,
+      /\{\{\s*block\.fasttify_attributes\s*\|/i,
+      /\{\{-\s*block\.fasttify_attributes\s*-\}\}/i,
+    ];
+
+    return patterns.some((pattern) => pattern.test(templateContent));
+  }
+}
diff --git a/packages/liquid-forge/services/rendering/section-renderer.ts b/packages/liquid-forge/services/rendering/section-renderer.ts
index 4dfa68cf..38a1b07d 100644
--- a/packages/liquid-forge/services/rendering/section-renderer.ts
+++ b/packages/liquid-forge/services/rendering/section-renderer.ts
@@ -20,6 +20,7 @@ import { schemaParser } from '../templates/parsing/schema-parser';
 import { templateLoader } from '../templates/template-loader';
 import type { RenderContext } from '../../types';
 import { createSectionWithAttributes } from './fasttify-attributes-builder';
+import { FasttifyAttributesDetector } from './fasttify-attributes-detector';
 
 export class SectionRenderer {
   /**
@@ -89,8 +90,20 @@ export class SectionRenderer {
         section: sectionObject,
       };
 
+      // Detectar si el template tiene fasttify_attributes configurado para secciones
+      const hasSectionAttributes = FasttifyAttributesDetector.hasSectionFasttifyAttributes(templateContent);
+
       // Renderizar la sección con el contexto enriquecido
-      return await liquidEngine.render(cleanedContent, sectionContext, `section_${sectionName}`);
+      const renderedContent = await liquidEngine.render(cleanedContent, sectionContext, `section_${sectionName}`);
+
+      // Si el template no tiene {{ section.fasttify_attributes }}, aplicar sistema de compatibilidad
+      // Esto permite que temas sin el filtro funcionen con el selector azul
+      if (!hasSectionAttributes) {
+        return this.wrapWithCompatibilityMarkers(renderedContent, sectionIdForContext);
+      }
+
+      // Si ya tiene fasttify_attributes, retornar sin modificaciones (comportamiento normal)
+      return renderedContent;
     } catch (error) {
       logger.error(`Error rendering section ${sectionName}`, error, 'SectionRenderer');
 
@@ -197,6 +210,19 @@ export class SectionRenderer {
     // Para otros grupos, retornar vacío por ahora
     return [];
   }
+
+  /**
+   * Envuelve el contenido renderizado con comentarios de marcado para compatibilidad
+   * Estos comentarios permiten que el script post-renderizado identifique la sección
+   * y agregue los atributos data-section-id automáticamente
+   */
+  private wrapWithCompatibilityMarkers(renderedContent: string, sectionId: string): string {
+    // Los comentarios son invisibles visualmente pero permiten identificar la sección
+    const startMarker = `<!-- FASTTIFY_SECTION_START:${sectionId} -->`;
+    const endMarker = `<!-- FASTTIFY_SECTION_END:${sectionId} -->`;
+
+    return `${startMarker}\n${renderedContent}\n${endMarker}`;
+  }
 }
 
 export const sectionRenderer = new SectionRenderer();
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script.js
index b1fcc98d..692194b4 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script.js
@@ -24,6 +24,7 @@
  * - selection: Funciones de selección y scroll
  * - event-handlers: Handlers de eventos del usuario
  * - domain-links: Configuración de enlaces con dominio
+ * - compatibility: Sistema de compatibilidad para temas sin fasttify_attributes
  * - init: Inicialización y cleanup
  *
  * @module iframe-selection-script
@@ -34,17 +35,19 @@ import { createUtilsCode } from './iframe-selection-script/utils.js';
 import { createSelectionCode } from './iframe-selection-script/selection.js';
 import { createEventHandlersCode } from './iframe-selection-script/event-handlers.js';
 import { createDomainLinksCode } from './iframe-selection-script/domain-links.js';
+import { createCompatibilityCode } from './iframe-selection-script/compatibility.js';
 import { createInitCode } from './iframe-selection-script/init.js';
 
 /**
  * Genera el script completo de selección del iframe con el dominio de la tienda inyectado
  *
  * El script generado:
- * 1. Detecta clicks en elementos con data-section-id o data-block-id
- * 2. Envía postMessage al padre con el ID encontrado
- * 3. Escucha mensajes del padre para aplicar/quitar resaltado
- * 4. Aplica estilos CSS para el outline azul
- * 5. Configura enlaces relativos con el dominio de la tienda
+ * 1. Detecta comentarios de compatibilidad y agrega atributos automáticamente
+ * 2. Detecta clicks en elementos con data-section-id o data-block-id
+ * 3. Envía postMessage al padre con el ID encontrado
+ * 4. Escucha mensajes del padre para aplicar/quitar resaltado
+ * 5. Aplica estilos CSS para el outline azul
+ * 6. Configura enlaces relativos con el dominio de la tienda
  *
  * @param {string|null} storeDomain - El dominio de la tienda a inyectar (ej: 'mystore.com')
  * @returns {string} El script completo listo para inyectar en el iframe como string
@@ -59,9 +62,11 @@ export function iframeSelectionScript(storeDomain) {
   const selection = createSelectionCode();
   const eventHandlers = createEventHandlersCode();
   const domainLinks = createDomainLinksCode();
+  const compatibility = createCompatibilityCode();
   const init = createInitCode();
 
   // Combinar todos los módulos en un IIFE
+  // El módulo de compatibilidad se ejecuta primero para agregar atributos antes de la inicialización
   return `(function() {
 ${constants}
 
@@ -73,6 +78,8 @@ ${eventHandlers}
 
 ${domainLinks}
 
+${compatibility}
+
 ${init}
 })();`;
 }
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/compatibility.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/compatibility.js
new file mode 100644
index 00000000..fd22bf38
--- /dev/null
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/compatibility.js
@@ -0,0 +1,202 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { extractFunctionBody } from './extract-function-body.js';
+
+/**
+ * Módulo de compatibilidad para temas sin fasttify_attributes
+ * Detecta comentarios de marcado y agrega atributos data-section-id automáticamente
+ * @module compatibility
+ */
+
+/**
+ * Función que contiene el código de compatibilidad
+ * Esta función no se ejecuta directamente, se convierte a string para inyectar en el iframe
+ */
+function compatibilityModule() {
+  /**
+   * Encuentra el siguiente elemento HTML visible después de un comentario
+   * Busca recursivamente en hermanos y en el contenedor padre
+   * @param {Node} commentNode - El nodo comentario desde donde comenzar la búsqueda
+   * @returns {Element|null} El siguiente elemento HTML visible o null
+   */
+  function findNextVisibleElement(commentNode) {
+    if (!commentNode) return null;
+
+    // Tags que deben ser ignorados (no son elementos de contenido visible)
+    const ignoredTags = ['script', 'style', 'meta', 'link', 'noscript', 'template'];
+
+    /**
+     * Verifica si un elemento es válido para ser el elemento raíz de una sección
+     * @param {Element} element - El elemento a verificar
+     * @returns {boolean} true si es válido
+     */
+    function isValidSectionElement(element) {
+      if (!element || element.nodeType !== 1) return false;
+
+      const tagName = element.tagName?.toLowerCase();
+      if (!tagName || ignoredTags.includes(tagName)) {
+        return false;
+      }
+
+      // Verificar que el elemento sea visible (no esté oculto)
+      const style = window.getComputedStyle(element);
+      if (style.display === 'none' || style.visibility === 'hidden') {
+        return false;
+      }
+
+      return true;
+    }
+
+    // Buscar en hermanos siguientes
+    let current = commentNode.nextSibling;
+    while (current) {
+      if (isValidSectionElement(current)) {
+        return current;
+      }
+
+      // Si es un contenedor, buscar dentro de él
+      if (current.nodeType === 1) {
+        const firstChild = current.firstElementChild;
+        if (firstChild && isValidSectionElement(firstChild)) {
+          return firstChild;
+        }
+      }
+
+      current = current.nextSibling;
+    }
+
+    // Si no hay hermanos siguientes, buscar en el padre
+    let parent = commentNode.parentNode;
+    while (parent && parent !== document.body) {
+      // Buscar siguiente hermano del padre
+      let sibling = parent.nextSibling;
+      while (sibling) {
+        if (isValidSectionElement(sibling)) {
+          return sibling;
+        }
+        sibling = sibling.nextSibling;
+      }
+
+      // Si el padre es válido, usarlo
+      if (isValidSectionElement(parent)) {
+        return parent;
+      }
+
+      parent = parent.parentNode;
+    }
+
+    return null;
+  }
+
+  /**
+   * Procesa comentarios de marcado FASTTIFY_SECTION_START y agrega atributos
+   */
+  function processCompatibilityMarkers() {
+    // Buscar todos los comentarios FASTTIFY_SECTION_START
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+
+    const processedSections = new Set();
+    let comment;
+
+    while ((comment = walker.nextNode())) {
+      const commentText = comment.textContent?.trim() || '';
+
+      // Detectar comentario de inicio de sección
+      const sectionStartMatch = commentText.match(/^FASTTIFY_SECTION_START:(.+)$/);
+      if (sectionStartMatch) {
+        const sectionId = sectionStartMatch[1];
+
+        // Evitar procesar la misma sección dos veces
+        if (processedSections.has(sectionId)) {
+          continue;
+        }
+
+        // Encontrar el siguiente elemento visible después del comentario
+        const sectionElement = findNextVisibleElement(comment);
+
+        if (sectionElement) {
+          // Verificar si ya tiene data-section-id (no sobrescribir si ya existe)
+          if (!sectionElement.hasAttribute('data-section-id')) {
+            sectionElement.setAttribute('data-section-id', sectionId);
+
+            // Intentar obtener el nombre de la sección desde el schema si está disponible
+            // Esto se puede mejorar en el futuro leyendo metadata del schema
+            const sectionName = sectionElement.getAttribute('data-section-name');
+            if (!sectionName) {
+              // Usar el ID como nombre por defecto
+              sectionElement.setAttribute('data-section-name', sectionId);
+            }
+          }
+
+          processedSections.add(sectionId);
+        }
+      }
+
+      // Detectar comentario de inicio de bloque (para futura implementación)
+      const blockStartMatch = commentText.match(/^FASTTIFY_BLOCK_START:(.+)$/);
+      if (blockStartMatch) {
+        const blockId = blockStartMatch[1];
+        const blockElement = findNextVisibleElement(comment);
+
+        if (blockElement && !blockElement.hasAttribute('data-block-id')) {
+          // Necesitamos obtener el sectionId del contexto
+          // Por ahora, buscar el sectionId más cercano subiendo en el árbol
+          let parent = blockElement.parentElement;
+          let sectionId = null;
+
+          while (parent && !sectionId) {
+            sectionId = parent.getAttribute('data-section-id');
+            parent = parent.parentElement;
+          }
+
+          if (sectionId) {
+            blockElement.setAttribute('data-section-id', sectionId);
+            blockElement.setAttribute('data-block-id', blockId);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Inicializa el sistema de compatibilidad
+   * Se ejecuta después de que el DOM esté completamente cargado
+   */
+  function initCompatibility() {
+    // Ejecutar inmediatamente si el DOM ya está listo
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', processCompatibilityMarkers);
+    } else {
+      // Usar setTimeout para asegurar que el contenido renderizado esté disponible
+      setTimeout(processCompatibilityMarkers, 0);
+    }
+
+    // También procesar después de un pequeño delay para capturar contenido dinámico
+    setTimeout(processCompatibilityMarkers, 100);
+  }
+
+  // Inicializar cuando el módulo se carga
+  initCompatibility();
+}
+
+/**
+ * Extrae el código de compatibilidad
+ * @returns {string} Código JavaScript con las funciones de compatibilidad
+ */
+export function createCompatibilityCode() {
+  return extractFunctionBody(compatibilityModule, 'compatibility');
+}

From d0bd527c00b4edf9550c98beddc3bdfa004cd42a Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 5 Nov 2025 11:58:37 -0500
Subject: [PATCH 36/49] Refactor SSE connection handling to improve dead
 connection management and enhance reconnection logic in DevServerAdapter

This commit updates the SSE controller to use uppercase 'PING' for ping messages and introduces a mechanism to track and clean up dead connections in the broadcast functions. Additionally, the DevServerAdapter is enhanced with improved reconnection logic, including configurable timeout values and a maximum number of reconnection attempts, ensuring more robust handling of connection issues.
---
 .../dev-server/controllers/sse-controller.ts  | 50 +++++++++---
 .../fasttify/theme/sections/hero.liquid       |  4 +-
 .../adapters/dev-server.adapter.ts            | 81 ++++++++++++++++++-
 3 files changed, 120 insertions(+), 15 deletions(-)

diff --git a/app/api/stores/_lib/dev-server/controllers/sse-controller.ts b/app/api/stores/_lib/dev-server/controllers/sse-controller.ts
index de8ba34f..ed07e866 100644
--- a/app/api/stores/_lib/dev-server/controllers/sse-controller.ts
+++ b/app/api/stores/_lib/dev-server/controllers/sse-controller.ts
@@ -91,7 +91,7 @@ export async function handleSSEConnection(request: NextRequest): Promise<NextRes
       // Ping cada 30 segundos para mantener la conexión viva
       const pingInterval = setInterval(() => {
         try {
-          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'ping' })}\n\n`));
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'PING' })}\n\n`));
         } catch (_error) {
           clearInterval(pingInterval);
         }
@@ -143,14 +143,24 @@ export function broadcastChangeApplied(
     payload: change,
   });
 
+  const deadConnections: ReadableStreamDefaultController[] = [];
+
   connections.forEach((controller) => {
     try {
       controller.enqueue(encoder.encode(`data: ${message}\n\n`));
-    } catch (error) {
-      logger.error('Error sending SSE change message', error, 'SSEController');
-      connections.delete(controller);
+    } catch (_error) {
+      deadConnections.push(controller);
     }
   });
+
+  // Limpiar conexiones muertas
+  deadConnections.forEach((controller) => {
+    connections.delete(controller);
+  });
+
+  if (deadConnections.length > 0 && connections.size === 0) {
+    activeConnections.delete(connectionKey);
+  }
 }
 
 /**
@@ -178,14 +188,24 @@ export function broadcastRenderError(
     },
   });
 
+  const deadConnections: ReadableStreamDefaultController[] = [];
+
   connections.forEach((controller) => {
     try {
       controller.enqueue(encoder.encode(`data: ${message}\n\n`));
-    } catch (err) {
-      logger.error('Error sending SSE error message', err, 'SSEController');
-      connections.delete(controller);
+    } catch (_err) {
+      deadConnections.push(controller);
     }
   });
+
+  // Limpiar conexiones muertas
+  deadConnections.forEach((controller) => {
+    connections.delete(controller);
+  });
+
+  if (deadConnections.length > 0 && connections.size === 0) {
+    activeConnections.delete(connectionKey);
+  }
 }
 
 /**
@@ -207,12 +227,22 @@ export function broadcastTemplateLoaded(storeId: string, templateType: TemplateT
     },
   });
 
+  const deadConnections: ReadableStreamDefaultController[] = [];
+
   connections.forEach((controller) => {
     try {
       controller.enqueue(encoder.encode(`data: ${message}\n\n`));
-    } catch (err) {
-      logger.error('Error sending SSE template loaded message', err, 'SSEController');
-      connections.delete(controller);
+    } catch (_err) {
+      deadConnections.push(controller);
     }
   });
+
+  // Limpiar conexiones muertas
+  deadConnections.forEach((controller) => {
+    connections.delete(controller);
+  });
+
+  if (deadConnections.length > 0 && connections.size === 0) {
+    activeConnections.delete(connectionKey);
+  }
 }
diff --git a/packages/example-themes/fasttify/theme/sections/hero.liquid b/packages/example-themes/fasttify/theme/sections/hero.liquid
index 5e4b61f3..a195cced 100644
--- a/packages/example-themes/fasttify/theme/sections/hero.liquid
+++ b/packages/example-themes/fasttify/theme/sections/hero.liquid
@@ -9,13 +9,13 @@
       {% if hero_collection.image %}
         <img
           class="hero-image"
-          src="{{ hero_collection.image | img_url: '1920x1080' }}"
+          src="{{ hero_collection.image | img_url: 'webp', 1920, 1080 }}"
           alt="{{ hero_collection.title | escape }}"
           loading="lazy">
       {% elsif section.settings.fallback_image %}
         <img
           class="hero-image"
-          src="{{ section.settings.fallback_image | img_url: '1920x1080' }}"
+          src="{{ section.settings.fallback_image | img_url: 'webp', 1920, 1080 }}"
           alt="{{ hero_collection.title }}"
           loading="lazy">
       {% else %}
diff --git a/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
index 43c319ea..30eea685 100644
--- a/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
+++ b/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
@@ -40,8 +40,10 @@ interface TemplateLoadPromise {
   reject: (error: Error) => void;
 }
 
-const CONNECTION_TIMEOUT_MS = 5000;
-const TEMPLATE_LOAD_TIMEOUT_MS = 10000;
+const CONNECTION_TIMEOUT_MS = 10000;
+const TEMPLATE_LOAD_TIMEOUT_MS = 15000;
+const RECONNECT_DELAY_MS = 2000;
+const MAX_RECONNECT_ATTEMPTS = 5;
 
 // Helper: Construir URL del SSE endpoint
 const buildSSEUrl = (apiBaseUrl: string, storeId: string, templateType: TemplateType): string => {
@@ -68,6 +70,9 @@ export class DevServerAdapter implements IDevServer {
   private storeId: string | null = null;
   private templateType: TemplateType | null = null;
   private templateLoadPromise: TemplateLoadPromise | null = null;
+  private reconnectAttempts: number = 0;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private isReconnecting: boolean = false;
 
   constructor(apiBaseUrl: string) {
     this.apiBaseUrl = apiBaseUrl;
@@ -83,10 +88,14 @@ export class DevServerAdapter implements IDevServer {
       return;
     }
 
+    // Cancelar reconexión pendiente si existe
+    this.cancelReconnect();
+
     this.changeAppliedCallback = onChangeApplied;
     this.errorCallback = onError;
     this.storeId = storeId;
     this.templateType = templateType;
+    this.reconnectAttempts = 0;
 
     return this.establishConnection(storeId, templateType);
   }
@@ -130,7 +139,17 @@ export class DevServerAdapter implements IDevServer {
     };
 
     this.eventSource.onerror = () => {
-      if (!connectionState.hasResolved && this.eventSource?.readyState === EventSource.CLOSED) {
+      const readyState = this.eventSource?.readyState;
+
+      // Si ya estaba conectado y ahora hay error, intentar reconectar
+      if (connectionState.hasResolved && readyState === EventSource.CLOSED) {
+        // No rechazar la promesa aquí, solo programar reconexión
+        this.scheduleReconnect();
+        return;
+      }
+
+      // Si aún no se resolvió y está cerrado, rechazar
+      if (!connectionState.hasResolved && readyState === EventSource.CLOSED) {
         connectionState.hasResolved = true;
         reject(createError('SSE connection failed'));
       }
@@ -162,6 +181,7 @@ export class DevServerAdapter implements IDevServer {
   }
 
   async disconnect(): Promise<void> {
+    this.cancelReconnect();
     this.closeEventSource();
     this.clearCallbacks();
     this.clearState();
@@ -183,6 +203,61 @@ export class DevServerAdapter implements IDevServer {
     this.storeId = null;
     this.templateType = null;
     this.templateLoadPromise = null;
+    this.reconnectAttempts = 0;
+    this.isReconnecting = false;
+  }
+
+  private scheduleReconnect(): void {
+    if (this.isReconnecting || !this.storeId || !this.templateType) {
+      return;
+    }
+
+    // Si ya está conectado, no reconectar
+    if (isConnected(this.eventSource)) {
+      return;
+    }
+
+    if (this.reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+      this.handleError(createError('Max reconnection attempts reached'));
+      return;
+    }
+
+    this.isReconnecting = true;
+    this.reconnectAttempts++;
+
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.isReconnecting = false;
+
+      if (!this.storeId || !this.templateType || !this.changeAppliedCallback || !this.errorCallback) {
+        return;
+      }
+
+      // Si ya está conectado durante el delay, cancelar reconexión
+      if (isConnected(this.eventSource)) {
+        this.reconnectAttempts = 0;
+        return;
+      }
+
+      this.closeEventSource();
+
+      this.establishConnection(this.storeId!, this.templateType!)
+        .then(() => {
+          this.reconnectAttempts = 0;
+        })
+        .catch((error) => {
+          this.handleError(error);
+          this.scheduleReconnect();
+        });
+    }, RECONNECT_DELAY_MS * this.reconnectAttempts);
+  }
+
+  private cancelReconnect(): void {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.isReconnecting = false;
   }
 
   async loadTemplate(storeId: string, templateType: TemplateType): Promise<Template> {

From a5d96c4e7c223de588f0ad568cf28f22bd27d0dc Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 5 Nov 2025 12:06:05 -0500
Subject: [PATCH 37/49] Integrate Next.js router in ThemeList component for
 improved navigation

This commit adds the useRouter hook from Next.js to the ThemeList component, enabling navigation to the studio page when customizing a theme. The handleCustomize function is updated to utilize the router for seamless transitions, enhancing user experience in theme management.
---
 .../components/theme-management/components/ThemeList.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/store/components/theme-management/components/ThemeList.tsx b/app/store/components/theme-management/components/ThemeList.tsx
index 0fa24305..c6fa15a2 100644
--- a/app/store/components/theme-management/components/ThemeList.tsx
+++ b/app/store/components/theme-management/components/ThemeList.tsx
@@ -3,6 +3,7 @@
 import { Banner, BlockStack, Button, Card, Spinner, Text } from '@shopify/polaris';
 import { AlertCircleIcon } from '@shopify/polaris-icons';
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { useThemeList } from '@/app/store/components/theme-management/hooks/useThemeList';
 import { useThemeActions } from '@/app/store/components/theme-management/hooks/useThemeActions';
 import { ThemeModals } from '@/app/store/components/theme-management/components/ThemeModals';
@@ -11,6 +12,7 @@ import { ThemePreviewCard } from '@/app/store/components/theme-management/compon
 import { InactiveThemesList } from '@/app/store/components/theme-management/components/InactiveThemesList';
 
 export function ThemeList({ storeId }: { storeId: string }) {
+  const router = useRouter();
   const [showUploadModal, setShowUploadModal] = useState(false);
   const { themes, loading, error, activateTheme, deleteTheme, refreshThemes } = useThemeList(storeId);
 
@@ -63,9 +65,7 @@ export function ThemeList({ storeId }: { storeId: string }) {
   const inactiveThemes = themes.filter((theme) => !theme.isActive);
 
   const handleCustomize = () => {
-    if (activeTheme) {
-      handleThemeAction('edit', activeTheme);
-    }
+    router.push(`/store/${storeId}/studio`);
   };
 
   const handleUploadTheme = () => {

From df7040a20fc1f5bea1715680f8e917ce7d015a29 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 5 Nov 2025 12:55:21 -0500
Subject: [PATCH 38/49] Refactor SectionRendererAdapter to modularize section
 rendering logic and improve data loading

This commit enhances the SectionRendererAdapter by breaking down the section rendering process into modular helper functions. It introduces functions for loading section content, store data, and dynamic page data, improving readability and maintainability. Additionally, it optimizes the rendering context construction, ensuring a more efficient and organized approach to rendering sections with dynamic data.
---
 .../adapters/section-renderer.adapter.ts      | 206 +++++++++++++-----
 .../fasttify/theme/sections/hero.liquid       |  10 +-
 .../liquid/filters/ecommerce-filters.ts       |  35 ++-
 .../services/core/data-transformer.ts         |  22 +-
 .../collection/collection-transformer.ts      |   5 +-
 5 files changed, 209 insertions(+), 69 deletions(-)

diff --git a/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter.ts b/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter.ts
index 0650bc0b..5063bc18 100644
--- a/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter.ts
+++ b/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter.ts
@@ -17,14 +17,153 @@
 import { sectionRenderer } from '@/liquid-forge/services/rendering/section-renderer';
 import { templateLoader } from '@/liquid-forge/services/templates/template-loader';
 import { contextBuilder } from '@/liquid-forge/services/rendering/global-context';
+import { dynamicDataLoader } from '@/liquid-forge/services/page/dynamic-data-loader';
+import { dataFetcher } from '@/liquid-forge/services/fetchers/data-fetcher';
 import { cookiesClient } from '@/utils/server/AmplifyServer';
 import type {
   ISectionRenderer,
   RenderSectionParams,
   RenderSectionResult,
 } from '../../domain/ports/section-renderer.port';
+import type { PageRenderOptions } from '@/liquid-forge/types/template';
+import type { RenderContext } from '@/liquid-forge/types';
 import { logger } from '@/liquid-forge';
 
+/**
+ * Helper: Obtiene la configuración de la sección del template
+ */
+const getSectionConfig = (template: any, sectionId: string) => {
+  const sectionConfig = template.sections[sectionId];
+  if (!sectionConfig) {
+    throw new Error(`Section ${sectionId} not found in template`);
+  }
+  return sectionConfig;
+};
+
+/**
+ * Helper: Carga el contenido Liquid de la sección
+ */
+const loadSectionContent = async (storeId: string, sectionType: string): Promise<string> => {
+  return templateLoader.loadTemplate(storeId, `${sectionType}.liquid`);
+};
+
+/**
+ * Helper: Carga los datos de la tienda desde la base de datos
+ */
+const loadStoreData = async (storeId: string) => {
+  const { data: userStore } = await cookiesClient.models.UserStore.get({ storeId });
+  if (!userStore) {
+    throw new Error(`Store ${storeId} not found`);
+  }
+  return userStore;
+};
+
+/**
+ * Helper: Construye el objeto store para el contexto
+ */
+const buildStoreObject = (userStore: any) => ({
+  storeId: userStore.storeId,
+  storeName: userStore.storeName,
+  storeDescription: userStore.storeDescription,
+  storeCurrency: userStore.storeCurrency,
+  currencyFormat: userStore.currencyFormat,
+  currencyLocale: userStore.currencyLocale,
+  currencyDecimalPlaces: userStore.currencyDecimalPlaces,
+  customDomain: userStore.defaultDomain,
+  contactEmail: userStore.contactEmail,
+  contactPhone: userStore.contactPhone,
+  storeAdress: userStore.storeAdress,
+  storeLogo: userStore.storeLogo,
+  storeStatus: true,
+});
+
+/**
+ * Helper: Construye las opciones de renderizado de página
+ */
+const buildPageRenderOptions = (pageType: string): PageRenderOptions => ({
+  pageType: pageType as PageRenderOptions['pageType'],
+});
+
+/**
+ * Helper: Construye el storeTemplate para el contexto
+ */
+const buildStoreTemplate = (pageType: string, template: any) => ({
+  templates: {
+    [pageType]: template,
+  },
+});
+
+/**
+ * Helper: Carga el settings_schema.json para los límites de búsqueda
+ */
+const loadSettingsSchema = async (storeId: string): Promise<Record<string, string>> => {
+  try {
+    const settingsSchema = await templateLoader.loadTemplate(storeId, 'config/settings_schema.json');
+    return { 'config/settings_schema.json': settingsSchema };
+  } catch (_error) {
+    return {};
+  }
+};
+
+/**
+ * Helper: Carga todos los datos dinámicos necesarios para el contexto
+ */
+const loadDynamicPageData = async (storeId: string, pageType: string) => {
+  const pageRenderOptions = buildPageRenderOptions(pageType);
+  const loadedTemplates = await loadSettingsSchema(storeId);
+  return dynamicDataLoader.loadDynamicData(storeId, pageRenderOptions, {}, loadedTemplates);
+};
+
+/**
+ * Helper: Carga los menús de navegación de la tienda
+ */
+const loadNavigationMenus = async (storeId: string) => {
+  return dataFetcher.getStoreNavigationMenus(storeId).catch(() => null);
+};
+
+/**
+ * Helper: Construye el contexto completo combinando base y datos dinámicos
+ */
+const buildCompleteContext = async (
+  store: any,
+  pageData: any,
+  navigationMenus: any,
+  storeTemplate: any
+): Promise<RenderContext> => {
+  const baseContext = await contextBuilder.createRenderContext(
+    store,
+    pageData.products,
+    storeTemplate,
+    pageData.cartData,
+    navigationMenus || undefined,
+    pageData.contextData.checkout
+  );
+
+  Object.assign(baseContext, pageData.contextData);
+  return baseContext;
+};
+
+/**
+ * Helper: Renderiza la sección con el contexto completo
+ */
+const renderSectionWithContext = async (
+  sectionType: string,
+  sectionContent: string,
+  context: RenderContext,
+  storeTemplate: any,
+  sectionId: string,
+  pageType: string
+): Promise<string> => {
+  return sectionRenderer.renderSectionWithSchema(
+    sectionType,
+    sectionContent,
+    context,
+    storeTemplate,
+    sectionId,
+    pageType
+  );
+};
+
 /**
  * Adaptador: Section Renderer
  * Implementación concreta para renderizar secciones usando Liquid
@@ -34,66 +173,27 @@ export class SectionRendererAdapter implements ISectionRenderer {
     try {
       const { storeId, sectionId, template, pageType } = params;
 
-      // Obtener la configuración de la sección del template
-      const sectionConfig = template.sections[sectionId];
-      if (!sectionConfig) {
-        throw new Error(`Section ${sectionId} not found in template`);
-      }
-
-      // Cargar el contenido Liquid de la sección
-      const sectionContent = await templateLoader.loadTemplate(storeId, `${sectionConfig.type}.liquid`);
-
-      // Obtener datos de la tienda desde la base de datos
-      const { data: userStore } = await cookiesClient.models.UserStore.get({ storeId });
-      if (!userStore) {
-        throw new Error(`Store ${storeId} not found`);
-      }
-
-      // Construir el objeto store con la estructura esperada por contextBuilder
-      const store = {
-        storeId: userStore.storeId,
-        storeName: userStore.storeName,
-        storeDescription: userStore.storeDescription,
-        storeCurrency: userStore.storeCurrency,
-        currencyFormat: userStore.currencyFormat,
-        currencyLocale: userStore.currencyLocale,
-        currencyDecimalPlaces: userStore.currencyDecimalPlaces,
-        customDomain: userStore.defaultDomain,
-        contactEmail: userStore.contactEmail,
-        contactPhone: userStore.contactPhone,
-        storeAdress: userStore.storeAdress,
-        storeLogo: userStore.storeLogo,
-        storeStatus: true, // Asumir activo para dev server
-      };
-
-      // Construir el contexto base para renderizar
-      const baseContext = await contextBuilder.createRenderContext(
-        store,
-        [], // products - vacío para hot-reload
-        {
-          templates: {
-            [pageType]: template,
-          },
-        }
-      );
+      const sectionConfig = getSectionConfig(template, sectionId);
+      const [sectionContent, userStore, pageData, navigationMenus] = await Promise.all([
+        loadSectionContent(storeId, sectionConfig.type),
+        loadStoreData(storeId),
+        loadDynamicPageData(storeId, pageType),
+        loadNavigationMenus(storeId),
+      ]);
 
-      // Renderizar la sección usando el sectionRenderer existente
-      const html = await sectionRenderer.renderSectionWithSchema(
+      const store = buildStoreObject(userStore);
+      const storeTemplate = buildStoreTemplate(pageType, template);
+      const context = await buildCompleteContext(store, pageData, navigationMenus, storeTemplate);
+      const html = await renderSectionWithContext(
         sectionConfig.type,
         sectionContent,
-        baseContext,
-        {
-          templates: {
-            [pageType]: template,
-          },
-        },
+        context,
+        storeTemplate,
         sectionId,
         pageType
       );
 
-      return {
-        html,
-      };
+      return { html };
     } catch (error) {
       logger.error(`Error rendering section ${params.sectionId}`, error, 'SectionRendererAdapter');
       throw error;
diff --git a/packages/example-themes/fasttify/theme/sections/hero.liquid b/packages/example-themes/fasttify/theme/sections/hero.liquid
index a195cced..bff26fa1 100644
--- a/packages/example-themes/fasttify/theme/sections/hero.liquid
+++ b/packages/example-themes/fasttify/theme/sections/hero.liquid
@@ -6,17 +6,17 @@
     <div class="hero-container">
     <!-- Background Image -->
     <div class="hero-background">
-      {% if hero_collection.image %}
+      {% if section.settings.fallback_image %}
         <img
           class="hero-image"
-          src="{{ hero_collection.image | img_url: 'webp', 1920, 1080 }}"
+          src="{{ section.settings.fallback_image | img_url: 'webp', 1920, 1080 }}"
           alt="{{ hero_collection.title | escape }}"
           loading="lazy">
-      {% elsif section.settings.fallback_image %}
+      {% elsif hero_collection.image %}
         <img
           class="hero-image"
-          src="{{ section.settings.fallback_image | img_url: 'webp', 1920, 1080 }}"
-          alt="{{ hero_collection.title }}"
+          src="{{ hero_collection.image | img_url: 'webp', 1920, 1080 }}"
+          alt="{{ hero_collection.title | escape }}"
           loading="lazy">
       {% else %}
         <div class="hero-placeholder">
diff --git a/packages/liquid-forge/liquid/filters/ecommerce-filters.ts b/packages/liquid-forge/liquid/filters/ecommerce-filters.ts
index 3c5ab4fe..98f0d3e9 100644
--- a/packages/liquid-forge/liquid/filters/ecommerce-filters.ts
+++ b/packages/liquid-forge/liquid/filters/ecommerce-filters.ts
@@ -16,6 +16,7 @@
 
 import type { LiquidFilter } from '../../types';
 import { PATH_PATTERNS } from '../../lib/regex-patterns';
+import { getCdnUrlForKey } from '@/utils/server/cdn-url';
 
 /**
  * Interfaz para parámetros de optimización de imágenes
@@ -92,7 +93,7 @@ export const collectionUrlFilter: LiquidFilter = {
  */
 export const imgUrlFilter: LiquidFilter = {
   name: 'img_url',
-  filter: (url: string, ...args: any[]): string => {
+  filter: function (url: string, ...args: any[]): string {
     if (!url) {
       return '';
     }
@@ -129,17 +130,39 @@ export const imgUrlFilter: LiquidFilter = {
       }
     }
 
-    // Si ya es una URL completa, aplicar optimizaciones
+    // Si ya es una URL completa (http/https), aplicar optimizaciones directamente
     if (typeof url === 'string' && (url.startsWith('http://') || url.startsWith('https://'))) {
       return buildOptimizedImageUrl(url, params);
     }
 
-    // Si es una ruta relativa, construir URL completa
-    const baseImageUrl = '/images';
+    // Si es un string simple sin protocolo (como 'collection-img'), NO intentar construir URL
+    // Estos son fallbacks que no corresponden a imágenes reales en S3
     const cleanImageUrl = url.replace(PATH_PATTERNS.leadingSlash, '');
-    const fullUrl = `${baseImageUrl}/${cleanImageUrl}`;
 
-    return buildOptimizedImageUrl(fullUrl, params);
+    // Lista de fallbacks conocidos que no son URLs reales
+    const knownFallbacks = ['collection-img', 'product-img', 'placeholder'];
+
+    if (knownFallbacks.includes(cleanImageUrl)) {
+      // Si es un fallback conocido, devolver string vacío para que no se renderice la imagen
+      return '';
+    }
+
+    // Si parece ser una ruta de S3/CDN sin protocolo (contiene / y no es un fallback)
+    // Intentar construir la URL del CDN solo si parece ser una ruta válida
+    if (cleanImageUrl.includes('/') && !cleanImageUrl.startsWith('/')) {
+      // Parece ser una ruta de S3 (ej: "images/storeId/file.jpg" o "products/storeId/file.jpg")
+      try {
+        const cdnUrl = getCdnUrlForKey(cleanImageUrl);
+        return buildOptimizedImageUrl(cdnUrl, params);
+      } catch {
+        // Si falla al construir la URL del CDN, devolver string vacío
+        return '';
+      }
+    }
+
+    // Si no es una URL completa ni una ruta de S3 válida, devolver string vacío
+    // No intentar construir URLs que no existen en el bucket
+    return '';
   },
 };
 
diff --git a/packages/liquid-forge/services/core/data-transformer.ts b/packages/liquid-forge/services/core/data-transformer.ts
index 074f15ff..09e30c73 100644
--- a/packages/liquid-forge/services/core/data-transformer.ts
+++ b/packages/liquid-forge/services/core/data-transformer.ts
@@ -47,6 +47,7 @@ export class DataTransformer {
 
   /**
    * Transforma array de imágenes desde JSON string o array
+   * Preserva URLs completas tal como vienen de la Lambda/CDN
    */
   public static transformImages(images: any, productName: string): any[] {
     let imagesArray = [];
@@ -64,10 +65,23 @@ export class DataTransformer {
     }
 
     return Array.isArray(imagesArray)
-      ? imagesArray.map((img: any) => ({
-          url: img.url || img.src || '',
-          alt: img.altText || img.alt || productName || '',
-        }))
+      ? imagesArray
+          .map((img: any) => {
+            // Preservar URL completa si existe, de lo contrario usar string vacío
+            const imageUrl = img.url || img.src || '';
+            const cleanUrl = typeof imageUrl === 'string' && imageUrl.trim() !== '' ? imageUrl : '';
+
+            // Solo incluir si hay URL válida
+            if (!cleanUrl) {
+              return null;
+            }
+
+            return {
+              url: cleanUrl,
+              alt: img.altText || img.alt || productName || '',
+            };
+          })
+          .filter((img): img is { url: string; alt: string } => img !== null)
       : [];
   }
 
diff --git a/packages/liquid-forge/services/fetchers/collection/collection-transformer.ts b/packages/liquid-forge/services/fetchers/collection/collection-transformer.ts
index b3fc0bcf..f765affc 100644
--- a/packages/liquid-forge/services/fetchers/collection/collection-transformer.ts
+++ b/packages/liquid-forge/services/fetchers/collection/collection-transformer.ts
@@ -28,6 +28,9 @@ export class CollectionTransformer {
       collection.slug || collection.name || collection.title || `collection-${collection.id}`
     );
 
+    // Preservar URL completa de imagen si existe, de lo contrario usar fallback
+    const imageValue = collection.image && collection.image.trim() !== '' ? collection.image : 'collection-img';
+
     return {
       id: collection.id,
       storeId: collection.storeId,
@@ -35,7 +38,7 @@ export class CollectionTransformer {
       description: collection.description,
       slug: handle,
       url: `/collections/${handle}`,
-      image: collection.image || 'collection-img',
+      image: imageValue,
       products,
       nextToken,
       owner: collection.owner,

From 548b7fcf66426ab8918b505bedf0e2e3ea79c5d1 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 5 Nov 2025 13:33:17 -0500
Subject: [PATCH 39/49] Add history management to use cases and enhance Theme
 Studio with undo/redo functionality

This commit introduces a new IHistoryManager interface and integrates it into the UpdateSectionSettingUseCase, UpdateBlockSettingUseCase, and UpdateSubBlockSettingUseCase, allowing for change recording and history management. Additionally, it adds new use cases for recording, undoing, and redoing changes. The Theme Studio is updated to utilize these features, enabling users to undo and redo actions seamlessly, improving the overall user experience in theme management.
---
 .../src/application/use-cases/index.ts        |   3 +
 .../use-cases/record-change.use-case.ts       |  39 ++++
 .../use-cases/redo-change.use-case.ts         | 110 ++++++++++
 .../use-cases/undo-change.use-case.ts         | 115 ++++++++++
 .../update-block-setting.use-case.ts          |  16 +-
 .../update-section-setting.use-case.ts        |  21 +-
 .../update-sub-block-setting.use-case.ts      |  16 +-
 .../src/domain/entities/history.entity.ts     |  67 ++++++
 .../theme-studio/src/domain/entities/index.ts |   1 +
 .../src/domain/ports/history-manager.port.ts  |  66 ++++++
 .../theme-studio/src/domain/ports/index.ts    |   1 +
 .../src/domain/ports/template-manager.port.ts |   7 +
 .../adapters/history-manager.adapter.ts       | 201 ++++++++++++++++++
 .../presentation/components/ThemeStudio.tsx   |  12 +-
 .../components/header/EditorHeader.tsx        |   2 +
 .../src/presentation/hooks/useHistory.ts      | 131 ++++++++++++
 .../src/presentation/hooks/useHotReload.ts    |  28 ++-
 17 files changed, 823 insertions(+), 13 deletions(-)
 create mode 100644 packages/theme-studio/src/application/use-cases/record-change.use-case.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/redo-change.use-case.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/undo-change.use-case.ts
 create mode 100644 packages/theme-studio/src/domain/entities/history.entity.ts
 create mode 100644 packages/theme-studio/src/domain/ports/history-manager.port.ts
 create mode 100644 packages/theme-studio/src/infrastructure/adapters/history-manager.adapter.ts
 create mode 100644 packages/theme-studio/src/presentation/hooks/useHistory.ts

diff --git a/packages/theme-studio/src/application/use-cases/index.ts b/packages/theme-studio/src/application/use-cases/index.ts
index 50f5399e..f780e8f5 100644
--- a/packages/theme-studio/src/application/use-cases/index.ts
+++ b/packages/theme-studio/src/application/use-cases/index.ts
@@ -20,3 +20,6 @@ export { UpdateSectionSettingUseCase } from './update-section-setting.use-case';
 export { UpdateBlockSettingUseCase } from './update-block-setting.use-case';
 export { UpdateSubBlockSettingUseCase } from './update-sub-block-setting.use-case';
 export { SaveChangesUseCase } from './save-changes.use-case';
+export { RecordChangeUseCase } from './record-change.use-case';
+export { UndoChangeUseCase } from './undo-change.use-case';
+export { RedoChangeUseCase } from './redo-change.use-case';
diff --git a/packages/theme-studio/src/application/use-cases/record-change.use-case.ts b/packages/theme-studio/src/application/use-cases/record-change.use-case.ts
new file mode 100644
index 00000000..6dd63a01
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/record-change.use-case.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { TemplateChange } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Caso de uso: Registrar cambio en el historial
+ * Registra un cambio en el historial para poder deshacerlo/rehacerlo
+ */
+export class RecordChangeUseCase {
+  constructor(
+    private readonly historyManager: IHistoryManager,
+    private readonly templateManager: ITemplateManager
+  ) {}
+
+  execute(change: TemplateChange): void {
+    const templateBefore = this.templateManager.getCurrentTemplate();
+    if (!templateBefore) {
+      return; // No hay template para registrar el cambio
+    }
+
+    // Aplicar el cambio al template
+    const templateAfter = this.templateManager.applyChange(change);
+
+    // Registrar en el historial
+    this.historyManager.recordChange(change, templateBefore, templateAfter);
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/redo-change.use-case.ts b/packages/theme-studio/src/application/use-cases/redo-change.use-case.ts
new file mode 100644
index 00000000..851a2e98
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/redo-change.use-case.ts
@@ -0,0 +1,110 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type {
+  IDevServer,
+  UpdateSectionSettingParams,
+  UpdateBlockSettingParams,
+  UpdateSubBlockSettingParams,
+} from '../../domain/ports/dev-server.port';
+
+/**
+ * Caso de uso: Rehacer cambio
+ * Rehace el último cambio deshecho y re-renderiza la sección afectada
+ */
+export class RedoChangeUseCase {
+  constructor(
+    private readonly historyManager: IHistoryManager,
+    private readonly templateManager: ITemplateManager,
+    private readonly devServer: IDevServer
+  ) {}
+
+  async execute(storeId: string): Promise<void> {
+    if (!this.historyManager.canRedo()) {
+      return; // No hay cambios para rehacer
+    }
+
+    if (!this.devServer.isConnected()) {
+      throw new Error('Dev Server is not connected');
+    }
+
+    // Obtener el template re-aplicado
+    const reappliedTemplate = this.historyManager.redo();
+    if (!reappliedTemplate) {
+      return;
+    }
+
+    // Actualizar el template manager con el template re-aplicado
+    this.templateManager.setTemplate(reappliedTemplate);
+
+    // Obtener el último cambio del pasado (que se acaba de mover del futuro)
+    // Necesitamos obtenerlo después de que se mueva, así que lo obtenemos del pasado
+    const pastEntry = this.historyManager.getLastUndoEntry();
+    if (!pastEntry) {
+      return;
+    }
+
+    // Re-renderizar la sección afectada usando el payload original
+    await this.renderAffectedSection(storeId, pastEntry);
+  }
+
+  private async renderAffectedSection(storeId: string, entry: any): Promise<void> {
+    const { payload, type } = entry;
+
+    // Re-aplicar el valor original usando el payload según el tipo de cambio
+    if (payload.settingId && payload.value !== undefined) {
+      switch (type) {
+        case 'UPDATE_SECTION_SETTING':
+          const sectionParams: UpdateSectionSettingParams = {
+            storeId,
+            sectionId: payload.sectionId,
+            settingId: payload.settingId,
+            value: payload.value,
+          };
+          await this.devServer.updateSectionSetting(sectionParams);
+          break;
+
+        case 'UPDATE_BLOCK_SETTING':
+          if (payload.blockId) {
+            const blockParams: UpdateBlockSettingParams = {
+              storeId,
+              sectionId: payload.sectionId,
+              blockId: payload.blockId,
+              settingId: payload.settingId,
+              value: payload.value,
+            };
+            await this.devServer.updateBlockSetting(blockParams);
+          }
+          break;
+
+        case 'UPDATE_SUB_BLOCK_SETTING':
+          if (payload.blockId && payload.subBlockId) {
+            const subBlockParams: UpdateSubBlockSettingParams = {
+              storeId,
+              sectionId: payload.sectionId,
+              blockId: payload.blockId,
+              subBlockId: payload.subBlockId,
+              settingId: payload.settingId,
+              value: payload.value,
+            };
+            await this.devServer.updateSubBlockSetting(subBlockParams);
+          }
+          break;
+
+        default:
+          break;
+      }
+    }
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/undo-change.use-case.ts b/packages/theme-studio/src/application/use-cases/undo-change.use-case.ts
new file mode 100644
index 00000000..13a3aa8b
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/undo-change.use-case.ts
@@ -0,0 +1,115 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type {
+  IDevServer,
+  UpdateSectionSettingParams,
+  UpdateBlockSettingParams,
+  UpdateSubBlockSettingParams,
+} from '../../domain/ports/dev-server.port';
+
+/**
+ * Caso de uso: Deshacer cambio
+ * Deshace el último cambio realizado y re-renderiza la sección afectada
+ */
+export class UndoChangeUseCase {
+  constructor(
+    private readonly historyManager: IHistoryManager,
+    private readonly templateManager: ITemplateManager,
+    private readonly devServer: IDevServer
+  ) {}
+
+  async execute(storeId: string): Promise<void> {
+    if (!this.historyManager.canUndo()) {
+      return; // No hay cambios para deshacer
+    }
+
+    if (!this.devServer.isConnected()) {
+      throw new Error('Dev Server is not connected');
+    }
+
+    // Obtener el template revertido
+    const revertedTemplate = this.historyManager.undo();
+    if (!revertedTemplate) {
+      return;
+    }
+
+    // Actualizar el template manager con el template revertido
+    this.templateManager.setTemplate(revertedTemplate);
+
+    // Obtener el último cambio del pasado (que se acaba de mover al futuro)
+    // Necesitamos obtenerlo antes de que se mueva, así que lo obtenemos del futuro
+    const futureEntry = this.historyManager.getNextRedoEntry();
+    if (!futureEntry) {
+      return;
+    }
+
+    // Re-renderizar la sección afectada usando el payload inverso
+    await this.renderAffectedSection(storeId, futureEntry);
+  }
+
+  private async renderAffectedSection(storeId: string, entry: any): Promise<void> {
+    const { inversePayload, type } = entry;
+
+    // Re-aplicar el valor anterior usando el payload inverso según el tipo de cambio
+    if (!inversePayload || !inversePayload.settingId) {
+      return;
+    }
+
+    // previousValue puede ser undefined si el setting no existía antes (eso es válido)
+    // Pasamos undefined al servidor para eliminar el setting
+
+    switch (type) {
+      case 'UPDATE_SECTION_SETTING':
+        const sectionParams: UpdateSectionSettingParams = {
+          storeId,
+          sectionId: inversePayload.sectionId,
+          settingId: inversePayload.settingId,
+          value: inversePayload.previousValue, // Puede ser undefined
+        };
+        await this.devServer.updateSectionSetting(sectionParams);
+        break;
+
+      case 'UPDATE_BLOCK_SETTING':
+        if (inversePayload.blockId) {
+          const blockParams: UpdateBlockSettingParams = {
+            storeId,
+            sectionId: inversePayload.sectionId,
+            blockId: inversePayload.blockId,
+            settingId: inversePayload.settingId,
+            value: inversePayload.previousValue,
+          };
+          await this.devServer.updateBlockSetting(blockParams);
+        }
+        break;
+
+      case 'UPDATE_SUB_BLOCK_SETTING':
+        if (inversePayload.blockId && inversePayload.subBlockId) {
+          const subBlockParams: UpdateSubBlockSettingParams = {
+            storeId,
+            sectionId: inversePayload.sectionId,
+            blockId: inversePayload.blockId,
+            subBlockId: inversePayload.subBlockId,
+            settingId: inversePayload.settingId,
+            value: inversePayload.previousValue,
+          };
+          await this.devServer.updateSubBlockSetting(subBlockParams);
+        }
+        break;
+
+      default:
+        break;
+    }
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/update-block-setting.use-case.ts b/packages/theme-studio/src/application/use-cases/update-block-setting.use-case.ts
index 5d4e7db3..c12fa75f 100644
--- a/packages/theme-studio/src/application/use-cases/update-block-setting.use-case.ts
+++ b/packages/theme-studio/src/application/use-cases/update-block-setting.use-case.ts
@@ -16,6 +16,7 @@
 
 import type { IDevServer, UpdateBlockSettingParams } from '../../domain/ports/dev-server.port';
 import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
 import type { ChangeType } from '../../domain/entities/editor-session.entity';
 
 /**
@@ -25,7 +26,8 @@ import type { ChangeType } from '../../domain/entities/editor-session.entity';
 export class UpdateBlockSettingUseCase {
   constructor(
     private readonly devServer: IDevServer,
-    private readonly templateManager: ITemplateManager
+    private readonly templateManager: ITemplateManager,
+    private readonly historyManager?: IHistoryManager
   ) {}
 
   async execute(params: UpdateBlockSettingParams): Promise<void> {
@@ -33,6 +35,11 @@ export class UpdateBlockSettingUseCase {
       throw new Error('Dev Server is not connected');
     }
 
+    const templateBefore = this.templateManager.getCurrentTemplate();
+    if (!templateBefore) {
+      throw new Error('No template loaded');
+    }
+
     const change = {
       id: `change-${Date.now()}-${Math.random()}`,
       type: 'UPDATE_BLOCK_SETTING' as ChangeType,
@@ -43,7 +50,12 @@ export class UpdateBlockSettingUseCase {
       timestamp: Date.now(),
     };
 
-    this.templateManager.applyChange(change);
+    const templateAfter = this.templateManager.applyChange(change);
+
+    if (this.historyManager) {
+      this.historyManager.recordChange(change, templateBefore, templateAfter);
+    }
+
     await this.devServer.updateBlockSetting(params);
   }
 }
diff --git a/packages/theme-studio/src/application/use-cases/update-section-setting.use-case.ts b/packages/theme-studio/src/application/use-cases/update-section-setting.use-case.ts
index d92a6bba..4a75fde6 100644
--- a/packages/theme-studio/src/application/use-cases/update-section-setting.use-case.ts
+++ b/packages/theme-studio/src/application/use-cases/update-section-setting.use-case.ts
@@ -16,6 +16,7 @@
 
 import type { IDevServer, UpdateSectionSettingParams } from '../../domain/ports/dev-server.port';
 import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
 import type { ChangeType } from '../../domain/entities/editor-session.entity';
 
 /**
@@ -25,7 +26,8 @@ import type { ChangeType } from '../../domain/entities/editor-session.entity';
 export class UpdateSectionSettingUseCase {
   constructor(
     private readonly devServer: IDevServer,
-    private readonly templateManager: ITemplateManager
+    private readonly templateManager: ITemplateManager,
+    private readonly historyManager?: IHistoryManager
   ) {}
 
   async execute(params: UpdateSectionSettingParams): Promise<void> {
@@ -34,7 +36,13 @@ export class UpdateSectionSettingUseCase {
       throw new Error('Dev Server is not connected');
     }
 
-    // 2. Aplicar cambio al template en memoria (optimistic update)
+    // 2. Obtener template antes del cambio para el historial
+    const templateBefore = this.templateManager.getCurrentTemplate();
+    if (!templateBefore) {
+      throw new Error('No template loaded');
+    }
+
+    // 3. Aplicar cambio al template en memoria (optimistic update)
     const change = {
       id: `change-${Date.now()}-${Math.random()}`,
       type: 'UPDATE_SECTION_SETTING' as ChangeType,
@@ -44,9 +52,14 @@ export class UpdateSectionSettingUseCase {
       timestamp: Date.now(),
     };
 
-    this.templateManager.applyChange(change);
+    const templateAfter = this.templateManager.applyChange(change);
+
+    // 4. Registrar en el historial si está disponible
+    if (this.historyManager) {
+      this.historyManager.recordChange(change, templateBefore, templateAfter);
+    }
 
-    // 3. Enviar cambio al Dev Server para re-renderizado
+    // 5. Enviar cambio al Dev Server para re-renderizado
     await this.devServer.updateSectionSetting(params);
   }
 }
diff --git a/packages/theme-studio/src/application/use-cases/update-sub-block-setting.use-case.ts b/packages/theme-studio/src/application/use-cases/update-sub-block-setting.use-case.ts
index eb6bb8df..4770949f 100644
--- a/packages/theme-studio/src/application/use-cases/update-sub-block-setting.use-case.ts
+++ b/packages/theme-studio/src/application/use-cases/update-sub-block-setting.use-case.ts
@@ -16,6 +16,7 @@
 
 import type { IDevServer, UpdateSubBlockSettingParams } from '../../domain/ports/dev-server.port';
 import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
 import type { ChangeType } from '../../domain/entities/editor-session.entity';
 
 /**
@@ -25,7 +26,8 @@ import type { ChangeType } from '../../domain/entities/editor-session.entity';
 export class UpdateSubBlockSettingUseCase {
   constructor(
     private readonly devServer: IDevServer,
-    private readonly templateManager: ITemplateManager
+    private readonly templateManager: ITemplateManager,
+    private readonly historyManager?: IHistoryManager
   ) {}
 
   async execute(params: UpdateSubBlockSettingParams): Promise<void> {
@@ -33,6 +35,11 @@ export class UpdateSubBlockSettingUseCase {
       throw new Error('Dev Server is not connected');
     }
 
+    const templateBefore = this.templateManager.getCurrentTemplate();
+    if (!templateBefore) {
+      throw new Error('No template loaded');
+    }
+
     const change = {
       id: `change-${Date.now()}-${Math.random()}`,
       type: 'UPDATE_SUB_BLOCK_SETTING' as ChangeType,
@@ -44,7 +51,12 @@ export class UpdateSubBlockSettingUseCase {
       timestamp: Date.now(),
     };
 
-    this.templateManager.applyChange(change);
+    const templateAfter = this.templateManager.applyChange(change);
+
+    if (this.historyManager) {
+      this.historyManager.recordChange(change, templateBefore, templateAfter);
+    }
+
     await this.devServer.updateSubBlockSetting(params);
   }
 }
diff --git a/packages/theme-studio/src/domain/entities/history.entity.ts b/packages/theme-studio/src/domain/entities/history.entity.ts
new file mode 100644
index 00000000..14cee16a
--- /dev/null
+++ b/packages/theme-studio/src/domain/entities/history.entity.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template } from './template.entity';
+import type { TemplateChange } from './editor-session.entity';
+
+/**
+ * Entrada del historial que representa un cambio realizado
+ * Contiene información necesaria para revertir y re-aplicar el cambio
+ */
+export interface HistoryEntry {
+  id: string;
+  timestamp: number;
+  type: TemplateChange['type'];
+  sectionId: string;
+  blockId?: string;
+  subBlockId?: string;
+  payload: ChangePayload;
+  inversePayload: ChangePayload;
+  templateBefore: Template;
+  templateAfter: Template;
+}
+
+/**
+ * Payload de un cambio que puede ser aplicado o revertido
+ */
+export interface ChangePayload {
+  type: TemplateChange['type'];
+  sectionId: string;
+  blockId?: string;
+  subBlockId?: string;
+  settingId?: string;
+  value?: unknown;
+  previousValue?: unknown;
+  blockData?: {
+    id: string;
+    type: string;
+    settings: Record<string, unknown>;
+    blocks?: Array<{
+      id: string;
+      type: string;
+      settings: Record<string, unknown>;
+    }>;
+  };
+  index?: number;
+}
+
+/**
+ * Entidad de dominio: Historial
+ * Mantiene el estado del historial de cambios (undo/redo)
+ * Entidad pura sin dependencias externas
+ */
+export interface History {
+  past: HistoryEntry[];
+  present: Template | null;
+  future: HistoryEntry[];
+  maxSize: number;
+}
diff --git a/packages/theme-studio/src/domain/entities/index.ts b/packages/theme-studio/src/domain/entities/index.ts
index 2f1ca83a..4eeddbb2 100644
--- a/packages/theme-studio/src/domain/entities/index.ts
+++ b/packages/theme-studio/src/domain/entities/index.ts
@@ -23,3 +23,4 @@ export type { Theme } from './theme.entity';
 export type { Template, TemplateType, TemplateSection, TemplateBlock } from './template.entity';
 export type { Section, SectionSchema, SettingDefinition, SettingType, BlockDefinition, Preset } from './section.entity';
 export type { EditorSession, TemplateChange, AppliedChange, ChangeType } from './editor-session.entity';
+export type { HistoryEntry, ChangePayload, History } from './history.entity';
diff --git a/packages/theme-studio/src/domain/ports/history-manager.port.ts b/packages/theme-studio/src/domain/ports/history-manager.port.ts
new file mode 100644
index 00000000..942f37b8
--- /dev/null
+++ b/packages/theme-studio/src/domain/ports/history-manager.port.ts
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Template } from '../entities/template.entity';
+import type { TemplateChange } from '../entities/editor-session.entity';
+import type { HistoryEntry, ChangePayload } from '../entities/history.entity';
+
+/**
+ * Puerto (interfaz) para el gestor de historial
+ * Define el contrato para manejar undo/redo de cambios
+ */
+export interface IHistoryManager {
+  /**
+   * Registra un cambio en el historial
+   * @param change - Cambio realizado
+   * @param templateBefore - Template antes del cambio
+   * @param templateAfter - Template después del cambio
+   */
+  recordChange(change: TemplateChange, templateBefore: Template, templateAfter: Template): void;
+
+  /**
+   * Deshace el último cambio
+   * @returns Template revertido o null si no hay cambios para deshacer
+   */
+  undo(): Template | null;
+
+  /**
+   * Rehace el último cambio deshecho
+   * @returns Template re-aplicado o null si no hay cambios para rehacer
+   */
+  redo(): Template | null;
+
+  /**
+   * Verifica si se puede deshacer
+   */
+  canUndo(): boolean;
+
+  /**
+   * Verifica si se puede rehacer
+   */
+  canRedo(): boolean;
+
+  /**
+   * Limpia el historial
+   */
+  clear(): void;
+
+  /**
+   * Obtiene el último cambio deshecho (para mostrar información)
+   */
+  getLastUndoEntry(): HistoryEntry | null;
+
+  /**
+   * Obtiene el siguiente cambio a rehacer (para mostrar información)
+   */
+  getNextRedoEntry(): HistoryEntry | null;
+}
diff --git a/packages/theme-studio/src/domain/ports/index.ts b/packages/theme-studio/src/domain/ports/index.ts
index 736e42f5..7ffdc22a 100644
--- a/packages/theme-studio/src/domain/ports/index.ts
+++ b/packages/theme-studio/src/domain/ports/index.ts
@@ -28,3 +28,4 @@ export type {
 } from './dev-server.port';
 export type { ITemplateRenderer, RenderSectionParams, RenderSectionResult } from './template-renderer.port';
 export type { ITemplateManager } from './template-manager.port';
+export type { IHistoryManager } from './history-manager.port';
diff --git a/packages/theme-studio/src/domain/ports/template-manager.port.ts b/packages/theme-studio/src/domain/ports/template-manager.port.ts
index 19c043ed..1589717a 100644
--- a/packages/theme-studio/src/domain/ports/template-manager.port.ts
+++ b/packages/theme-studio/src/domain/ports/template-manager.port.ts
@@ -34,6 +34,13 @@ export interface ITemplateManager {
    */
   getCurrentTemplate(): Template | null;
 
+  /**
+   * Establecer el template directamente sin cargarlo desde el repositorio
+   * Útil cuando el template ya está disponible (por ejemplo, recibido por SSE o undo/redo)
+   * @param template - Template a establecer
+   */
+  setTemplate(template: Template): void;
+
   /**
    * Aplicar un cambio al template en memoria
    * @param change - Cambio a aplicar
diff --git a/packages/theme-studio/src/infrastructure/adapters/history-manager.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/history-manager.adapter.ts
new file mode 100644
index 00000000..914e1aca
--- /dev/null
+++ b/packages/theme-studio/src/infrastructure/adapters/history-manager.adapter.ts
@@ -0,0 +1,201 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
+import type { Template } from '../../domain/entities/template.entity';
+import type { TemplateChange } from '../../domain/entities/editor-session.entity';
+import type { HistoryEntry, ChangePayload } from '../../domain/entities/history.entity';
+
+/**
+ * Adaptador: History Manager
+ * Implementación concreta del gestor de historial (undo/redo)
+ * Mantiene el historial de cambios en memoria
+ */
+export class HistoryManagerAdapter implements IHistoryManager {
+  private past: HistoryEntry[] = [];
+  private present: Template | null = null;
+  private future: HistoryEntry[] = [];
+  private readonly maxSize: number = 100;
+
+  recordChange(change: TemplateChange, templateBefore: Template, templateAfter: Template): void {
+    // Crear payload del cambio
+    const payload: ChangePayload = {
+      type: change.type,
+      sectionId: change.sectionId,
+      blockId: change.blockId,
+      subBlockId: change.subBlockId,
+      settingId: change.settingId,
+      value: change.value,
+    };
+
+    // Crear payload inverso para revertir el cambio
+    const inversePayload: ChangePayload = this.createInversePayload(change, templateBefore);
+
+    // Crear entrada del historial
+    const entry: HistoryEntry = {
+      id: change.id,
+      timestamp: change.timestamp,
+      type: change.type,
+      sectionId: change.sectionId,
+      blockId: change.blockId,
+      subBlockId: change.subBlockId,
+      payload,
+      inversePayload,
+      templateBefore: JSON.parse(JSON.stringify(templateBefore)), // Deep copy
+      templateAfter: JSON.parse(JSON.stringify(templateAfter)), // Deep copy
+    };
+
+    // Agregar al historial pasado
+    this.past.push(entry);
+
+    // Limitar el tamaño del historial
+    if (this.past.length > this.maxSize) {
+      this.past.shift(); // Eliminar el más antiguo
+    }
+
+    // Limpiar el futuro (ya no se puede rehacer después de un nuevo cambio)
+    this.future = [];
+
+    // Actualizar el presente
+    this.present = JSON.parse(JSON.stringify(templateAfter)); // Deep copy
+  }
+
+  undo(): Template | null {
+    if (this.past.length === 0) {
+      return null;
+    }
+
+    // Tomar el último cambio del pasado
+    const entry = this.past.pop()!;
+
+    // Mover al futuro (para poder rehacer)
+    this.future.unshift(entry);
+
+    // Actualizar el presente al estado antes del cambio
+    this.present = JSON.parse(JSON.stringify(entry.templateBefore)); // Deep copy
+
+    return this.present;
+  }
+
+  redo(): Template | null {
+    if (this.future.length === 0) {
+      return null;
+    }
+
+    // Tomar el primer cambio del futuro
+    const entry = this.future.shift()!;
+
+    // Mover al pasado (para poder deshacer)
+    this.past.push(entry);
+
+    // Actualizar el presente al estado después del cambio
+    this.present = JSON.parse(JSON.stringify(entry.templateAfter)); // Deep copy
+
+    return this.present;
+  }
+
+  canUndo(): boolean {
+    return this.past.length > 0;
+  }
+
+  canRedo(): boolean {
+    return this.future.length > 0;
+  }
+
+  clear(): void {
+    this.past = [];
+    this.present = null;
+    this.future = [];
+  }
+
+  getLastUndoEntry(): HistoryEntry | null {
+    return this.past.length > 0 ? this.past[this.past.length - 1] : null;
+  }
+
+  getNextRedoEntry(): HistoryEntry | null {
+    return this.future.length > 0 ? this.future[0] : null;
+  }
+
+  /**
+   * Crea el payload inverso para revertir un cambio
+   */
+  private createInversePayload(change: TemplateChange, templateBefore: Template): ChangePayload {
+    const inversePayload: ChangePayload = {
+      type: change.type,
+      sectionId: change.sectionId,
+      blockId: change.blockId,
+      subBlockId: change.subBlockId,
+      settingId: change.settingId,
+    };
+
+    switch (change.type) {
+      case 'UPDATE_SECTION_SETTING':
+        if (change.settingId) {
+          const section = templateBefore.sections[change.sectionId];
+          inversePayload.previousValue = section?.settings[change.settingId];
+        }
+        break;
+
+      case 'UPDATE_BLOCK_SETTING':
+        if (change.blockId && change.settingId) {
+          const section = templateBefore.sections[change.sectionId];
+          const block = section?.blocks?.find((b) => b.id === change.blockId);
+          inversePayload.previousValue = block?.settings[change.settingId];
+        }
+        break;
+
+      case 'UPDATE_SUB_BLOCK_SETTING':
+        if (change.blockId && change.subBlockId && change.settingId) {
+          const section = templateBefore.sections[change.sectionId];
+          const block = section?.blocks?.find((b) => b.id === change.blockId);
+          const subBlock = block?.blocks?.find((b) => b.id === change.subBlockId);
+          inversePayload.previousValue = subBlock?.settings[change.settingId];
+        }
+        break;
+
+      case 'ADD_BLOCK':
+        // Para revertir ADD_BLOCK, necesitamos el ID del bloque agregado
+        inversePayload.blockId = change.blockId;
+        break;
+
+      case 'DELETE_BLOCK':
+        // Para revertir DELETE_BLOCK, necesitamos guardar el bloque eliminado
+        if (change.blockId) {
+          const section = templateBefore.sections[change.sectionId];
+          const block = section?.blocks?.find((b) => b.id === change.blockId);
+          if (block) {
+            inversePayload.blockData = {
+              id: block.id,
+              type: block.type,
+              settings: { ...block.settings },
+              blocks: block.blocks?.map((sb) => ({
+                id: sb.id,
+                type: sb.type,
+                settings: { ...sb.settings },
+              })),
+            };
+          }
+        }
+        break;
+
+      case 'REORDER_BLOCKS':
+        // Para revertir REORDER_BLOCKS, necesitamos el índice anterior
+        inversePayload.index = change.value as number;
+        break;
+
+      default:
+        break;
+    }
+
+    return inversePayload;
+  }
+}
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index 0f4824c4..b1341a73 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -14,6 +14,7 @@ import { useStoreTemplates } from '../hooks/useStoreTemplates';
 import { useSidebarState } from '../hooks/useSidebarState';
 import { useSelectedSection } from '../hooks/useSelectedSection';
 import { useHotReload } from '../hooks/useHotReload';
+import { useHistory } from '../hooks/useHistory';
 
 export interface ThemeStudioProps {
   storeId: string;
@@ -45,6 +46,13 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
     enabled: true,
   });
 
+  const history = useHistory({
+    storeId,
+    devServer: hotReload.devServer,
+    templateManager: hotReload.templateManager,
+    historyManager: hotReload.historyManager,
+  });
+
   const selectedSectionData = useSelectedSection({
     storeId,
     apiBaseUrl,
@@ -104,8 +112,8 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
         onChangeDevice={setDevice}
         onExit={() => router.back()}
         onInspector={() => {}}
-        onUndo={() => {}}
-        onRedo={() => {}}
+        onUndo={history.canUndo ? history.undo : undefined}
+        onRedo={history.canRedo ? history.redo : undefined}
         onSave={() => {}}
         isSaving={false}
         onPageSelect={(pageId, pageUrl) => {
diff --git a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
index 1803309d..39fc67f0 100644
--- a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
+++ b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
@@ -115,6 +115,7 @@ export function EditorHeader({
               accessibilityLabel="Deshacer"
               icon={<Icon source={UndoIcon} />}
               variant="tertiary"
+              disabled={!onUndo}
             />
           </Tooltip>
           <Tooltip content="Rehacer (Ctrl+Y)">
@@ -123,6 +124,7 @@ export function EditorHeader({
               accessibilityLabel="Rehacer"
               icon={<Icon source={RedoIcon} />}
               variant="tertiary"
+              disabled={!onRedo}
             />
           </Tooltip>
 
diff --git a/packages/theme-studio/src/presentation/hooks/useHistory.ts b/packages/theme-studio/src/presentation/hooks/useHistory.ts
new file mode 100644
index 00000000..6e083712
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useHistory.ts
@@ -0,0 +1,131 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback, useRef, useEffect, useState } from 'react';
+import { UndoChangeUseCase } from '../../application/use-cases/undo-change.use-case';
+import { RedoChangeUseCase } from '../../application/use-cases/redo-change.use-case';
+import { DevServerAdapter } from '../../infrastructure/adapters/dev-server.adapter';
+import { TemplateManagerAdapter } from '../../infrastructure/adapters/template-manager.adapter';
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
+
+interface UseHistoryParams {
+  storeId: string;
+  devServer: DevServerAdapter | null;
+  templateManager: TemplateManagerAdapter | null;
+  historyManager: IHistoryManager | null;
+}
+
+interface UseHistoryResult {
+  undo: () => Promise<void>;
+  redo: () => Promise<void>;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+
+/**
+ * Hook de presentación: useHistory
+ * Proporciona funcionalidad de undo/redo para el Theme Studio
+ */
+export function useHistory({
+  storeId,
+  devServer,
+  templateManager,
+  historyManager,
+}: UseHistoryParams): UseHistoryResult {
+  const undoChangeUseCaseRef = useRef<UndoChangeUseCase | null>(null);
+  const redoChangeUseCaseRef = useRef<RedoChangeUseCase | null>(null);
+
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  // Inicializar casos de uso cuando los adaptadores estén disponibles
+  useEffect(() => {
+    if (devServer && templateManager && historyManager) {
+      undoChangeUseCaseRef.current = new UndoChangeUseCase(historyManager, templateManager, devServer);
+      redoChangeUseCaseRef.current = new RedoChangeUseCase(historyManager, templateManager, devServer);
+
+      // Actualizar estado inicial
+      setCanUndo(historyManager.canUndo());
+      setCanRedo(historyManager.canRedo());
+    }
+  }, [devServer, templateManager, historyManager]);
+
+  // Actualizar estado del historial cuando cambia
+  useEffect(() => {
+    if (!historyManager) {
+      setCanUndo(false);
+      setCanRedo(false);
+      return;
+    }
+
+    const updateHistoryState = () => {
+      setCanUndo(historyManager.canUndo());
+      setCanRedo(historyManager.canRedo());
+    };
+
+    // Actualizar estado inicial
+    updateHistoryState();
+
+    // Actualizar estado periódicamente (cada segundo)
+    // Esto es necesario porque no hay un evento observable en el history manager
+    const interval = setInterval(updateHistoryState, 1000);
+
+    return () => clearInterval(interval);
+  }, [historyManager]);
+
+  const undo = useCallback(async () => {
+    if (!historyManager || !devServer || !templateManager) {
+      return;
+    }
+
+    // Asegurarse de que el caso de uso esté inicializado
+    if (!undoChangeUseCaseRef.current) {
+      undoChangeUseCaseRef.current = new UndoChangeUseCase(historyManager, templateManager, devServer);
+    }
+
+    try {
+      await undoChangeUseCaseRef.current.execute(storeId);
+      // Actualizar estado después de undo
+      setCanUndo(historyManager.canUndo());
+      setCanRedo(historyManager.canRedo());
+    } catch (error) {
+      console.error('Error undoing change:', error);
+    }
+  }, [storeId, historyManager, devServer, templateManager]);
+
+  const redo = useCallback(async () => {
+    if (!historyManager || !devServer || !templateManager) {
+      return;
+    }
+
+    // Asegurarse de que el caso de uso esté inicializado
+    if (!redoChangeUseCaseRef.current) {
+      redoChangeUseCaseRef.current = new RedoChangeUseCase(historyManager, templateManager, devServer);
+    }
+
+    try {
+      await redoChangeUseCaseRef.current.execute(storeId);
+      // Actualizar estado después de redo
+      setCanUndo(historyManager.canUndo());
+      setCanRedo(historyManager.canRedo());
+    } catch (error) {
+      console.error('Error redoing change:', error);
+    }
+  }, [storeId, historyManager, devServer, templateManager]);
+
+  return {
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+  };
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useHotReload.ts b/packages/theme-studio/src/presentation/hooks/useHotReload.ts
index 7c213af1..850d410d 100644
--- a/packages/theme-studio/src/presentation/hooks/useHotReload.ts
+++ b/packages/theme-studio/src/presentation/hooks/useHotReload.ts
@@ -21,9 +21,11 @@ import { UpdateSubBlockSettingUseCase } from '../../application/use-cases/update
 import { DevServerAdapter } from '../../infrastructure/adapters/dev-server.adapter';
 import { TemplateManagerAdapter } from '../../infrastructure/adapters/template-manager.adapter';
 import { TemplateRepositoryAdapter } from '../../infrastructure/adapters/template-repository.adapter';
+import { HistoryManagerAdapter } from '../../infrastructure/adapters/history-manager.adapter';
 import type { RefObject } from 'react';
 import type { TemplateType } from '../../domain/entities/template.entity';
 import type { ChangeAppliedCallback, ErrorCallback } from '../../domain/ports/dev-server.port';
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
 
 interface UseHotReloadParams {
   storeId: string;
@@ -45,6 +47,9 @@ interface UseHotReloadResult {
   ) => Promise<void>;
   isConnected: boolean;
   hasPendingChanges: boolean;
+  devServer: DevServerAdapter | null;
+  templateManager: TemplateManagerAdapter | null;
+  historyManager: IHistoryManager | null;
 }
 
 /**
@@ -61,6 +66,7 @@ export function useHotReload({
 }: UseHotReloadParams): UseHotReloadResult {
   const devServerRef = useRef<DevServerAdapter | null>(null);
   const templateManagerRef = useRef<TemplateManagerAdapter | null>(null);
+  const historyManagerRef = useRef<HistoryManagerAdapter | null>(null);
   const updateSectionSettingUseCaseRef = useRef<UpdateSectionSettingUseCase | null>(null);
   const updateBlockSettingUseCaseRef = useRef<UpdateBlockSettingUseCase | null>(null);
   const updateSubBlockSettingUseCaseRef = useRef<UpdateSubBlockSettingUseCase | null>(null);
@@ -109,19 +115,32 @@ export function useHotReload({
       const devServer = new DevServerAdapter(apiBaseUrl);
       const templateRepository = new TemplateRepositoryAdapter(apiBaseUrl);
       const templateManager = new TemplateManagerAdapter(templateRepository);
+      const historyManager = new HistoryManagerAdapter();
 
       devServerRef.current = devServer;
       templateManagerRef.current = templateManager;
-      updateSectionSettingUseCaseRef.current = new UpdateSectionSettingUseCase(devServer, templateManager);
-      updateBlockSettingUseCaseRef.current = new UpdateBlockSettingUseCase(devServer, templateManager);
-      updateSubBlockSettingUseCaseRef.current = new UpdateSubBlockSettingUseCase(devServer, templateManager);
+      historyManagerRef.current = historyManager;
+      updateSectionSettingUseCaseRef.current = new UpdateSectionSettingUseCase(
+        devServer,
+        templateManager,
+        historyManager
+      );
+      updateBlockSettingUseCaseRef.current = new UpdateBlockSettingUseCase(devServer, templateManager, historyManager);
+      updateSubBlockSettingUseCaseRef.current = new UpdateSubBlockSettingUseCase(
+        devServer,
+        templateManager,
+        historyManager
+      );
     }
 
     const devServer = devServerRef.current!;
     const templateManager = templateManagerRef.current!;
+    const historyManager = historyManagerRef.current!;
 
     // Reconectar si cambió la página
     if (needsReconnect) {
+      // Limpiar historial al cambiar de página
+      historyManager.clear();
       devServer
         .disconnect()
         .then(() => connectAndLoadTemplate(devServer, templateManager, currentPageId))
@@ -198,5 +217,8 @@ export function useHotReload({
     updateSubBlockSetting,
     isConnected,
     hasPendingChanges,
+    devServer: devServerRef.current,
+    templateManager: templateManagerRef.current,
+    historyManager: historyManagerRef.current,
   };
 }

From bd1eef5419372835d76b00e5e25e2e6ed095ff01 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 5 Nov 2025 13:50:02 -0500
Subject: [PATCH 40/49] Integrate save changes functionality in Theme Studio
 and update EditorHeader for pending changes indication

This commit introduces the useSaveChanges hook in the Theme Studio, enabling users to save their changes effectively. The EditorHeader component is updated to include a hasPendingChanges prop, which disables the save button when there are no changes to save, enhancing user experience and preventing unnecessary actions. These updates improve the overall functionality and usability of the theme management interface.
---
 .../presentation/components/ThemeStudio.tsx   | 13 +++-
 .../components/header/EditorHeader.tsx        |  4 +-
 .../src/presentation/hooks/useSaveChanges.ts  | 77 +++++++++++++++++++
 3 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 packages/theme-studio/src/presentation/hooks/useSaveChanges.ts

diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index b1341a73..c7eec0f7 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -15,6 +15,7 @@ import { useSidebarState } from '../hooks/useSidebarState';
 import { useSelectedSection } from '../hooks/useSelectedSection';
 import { useHotReload } from '../hooks/useHotReload';
 import { useHistory } from '../hooks/useHistory';
+import { useSaveChanges } from '../hooks/useSaveChanges';
 
 export interface ThemeStudioProps {
   storeId: string;
@@ -53,6 +54,13 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
     historyManager: hotReload.historyManager,
   });
 
+  const saveChanges = useSaveChanges({
+    storeId,
+    apiBaseUrl,
+    templateManager: hotReload.templateManager,
+    templateType: currentPageId as any,
+  });
+
   const selectedSectionData = useSelectedSection({
     storeId,
     apiBaseUrl,
@@ -114,8 +122,9 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
         onInspector={() => {}}
         onUndo={history.canUndo ? history.undo : undefined}
         onRedo={history.canRedo ? history.redo : undefined}
-        onSave={() => {}}
-        isSaving={false}
+        onSave={saveChanges.save}
+        isSaving={saveChanges.isSaving}
+        hasPendingChanges={hotReload.hasPendingChanges}
         onPageSelect={(pageId, pageUrl) => {
           setCurrentPath(pageUrl);
           setCurrentPageId(pageId);
diff --git a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
index 39fc67f0..37427d6f 100644
--- a/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
+++ b/packages/theme-studio/src/presentation/components/header/EditorHeader.tsx
@@ -22,6 +22,7 @@ interface EditorHeaderProps {
   onRedo?: () => void;
   onSave?: () => void;
   isSaving?: boolean;
+  hasPendingChanges?: boolean;
   onPageSelect?: (pageId: string, pageUrl: string) => void;
 }
 
@@ -38,6 +39,7 @@ export function EditorHeader({
   onRedo,
   onSave,
   isSaving,
+  hasPendingChanges = false,
   onPageSelect,
 }: EditorHeaderProps) {
   const { isLoading: isLoadingTemplates } = useStoreTemplates({
@@ -134,7 +136,7 @@ export function EditorHeader({
               onClick={onSave}
               loading={isSaving}
               accessibilityLabel="Guardar"
-              disabled={isSaving}>
+              disabled={isSaving || !hasPendingChanges}>
               {isSaving ? 'Guardando...' : 'Guardar'}
             </Button>
           </Tooltip>
diff --git a/packages/theme-studio/src/presentation/hooks/useSaveChanges.ts b/packages/theme-studio/src/presentation/hooks/useSaveChanges.ts
new file mode 100644
index 00000000..54213bef
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useSaveChanges.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback, useRef, useEffect, useState } from 'react';
+import { SaveChangesUseCase } from '../../application/use-cases/save-changes.use-case';
+import { TemplateManagerAdapter } from '../../infrastructure/adapters/template-manager.adapter';
+import { TemplateRepositoryAdapter } from '../../infrastructure/adapters/template-repository.adapter';
+import type { TemplateType } from '../../domain/entities/template.entity';
+
+interface UseSaveChangesParams {
+  storeId: string;
+  apiBaseUrl: string;
+  templateManager: TemplateManagerAdapter | null;
+  templateType: TemplateType;
+}
+
+interface UseSaveChangesResult {
+  save: () => Promise<void>;
+  isSaving: boolean;
+}
+
+/**
+ * Hook de presentación: useSaveChanges
+ * Proporciona funcionalidad para guardar cambios
+ */
+export function useSaveChanges({
+  storeId,
+  apiBaseUrl,
+  templateManager,
+  templateType,
+}: UseSaveChangesParams): UseSaveChangesResult {
+  const saveChangesUseCaseRef = useRef<SaveChangesUseCase | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Inicializar caso de uso cuando el template manager esté disponible
+  useEffect(() => {
+    if (templateManager) {
+      const templateRepository = new TemplateRepositoryAdapter(apiBaseUrl);
+      saveChangesUseCaseRef.current = new SaveChangesUseCase(templateManager, templateRepository);
+    }
+  }, [templateManager, apiBaseUrl]);
+
+  const save = useCallback(async () => {
+    if (!saveChangesUseCaseRef.current || !templateManager) {
+      return;
+    }
+
+    if (!templateManager.hasPendingChanges()) {
+      return; // No hay cambios para guardar
+    }
+
+    setIsSaving(true);
+    try {
+      await saveChangesUseCaseRef.current.execute(storeId, templateType);
+    } catch (error) {
+      console.error('Error saving changes:', error);
+      // No limpiar pendingChanges si hay error
+      throw error;
+    } finally {
+      setIsSaving(false);
+    }
+  }, [storeId, templateType, templateManager]);
+
+  return {
+    save,
+    isSaving,
+  };
+}

From a1017c4cb96ef74094cacd8e48cb1d83c18a75e0 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 5 Nov 2025 14:08:45 -0500
Subject: [PATCH 41/49] Refactor SettingsPane to utilize EmptySettingsState
 component for improved user experience

This commit updates the SettingsPane component to replace the previous placeholder content with the new EmptySettingsState component when no section is selected. This change enhances the clarity and usability of the settings interface, providing users with a more intuitive indication of the need to select a section or block for editing.
---
 .../settings/EmptySettingsState.tsx           | 112 ++++++++++++++++++
 .../components/settings/SettingsPane.tsx      |  20 +---
 2 files changed, 114 insertions(+), 18 deletions(-)
 create mode 100644 packages/theme-studio/src/presentation/components/settings/EmptySettingsState.tsx

diff --git a/packages/theme-studio/src/presentation/components/settings/EmptySettingsState.tsx b/packages/theme-studio/src/presentation/components/settings/EmptySettingsState.tsx
new file mode 100644
index 00000000..4da58ea5
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/settings/EmptySettingsState.tsx
@@ -0,0 +1,112 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { BlockStack, Text, Box, Scrollable, InlineStack, Icon, Card } from '@shopify/polaris';
+import { LayoutSectionIcon } from '@shopify/polaris-icons';
+
+/**
+ * Componente: Estado vacío de Settings
+ * Se muestra cuando no hay ninguna sección o bloque seleccionado
+ */
+export function EmptySettingsState() {
+  return (
+    <Box padding="200">
+      <Card padding="300">
+        <BlockStack gap="300">
+          <InlineStack align="space-between" blockAlign="center">
+            <Text as="h2" variant="headingMd">
+              Personaliza tus plantillas
+            </Text>
+          </InlineStack>
+          <Scrollable style={{ height: 'calc(100vh - 160px)' }}>
+            <Box padding="200">
+              <BlockStack gap="600">
+                <BlockStack gap="300">
+                  <InlineStack gap="200" blockAlign="start">
+                    <Box>
+                      <Icon source={LayoutSectionIcon} tone="subdued" />
+                    </Box>
+                    <BlockStack gap="200">
+                      <Text as="p" variant="bodyMd" tone="subdued">
+                        Selecciona una sección o bloque en el sidebar para comenzar.
+                      </Text>
+                    </BlockStack>
+                  </InlineStack>
+                </BlockStack>
+
+                <BlockStack gap="300">
+                  <Text as="h3" variant="headingSm">
+                    Atajos de teclado
+                  </Text>
+                  <BlockStack gap="200">
+                    <InlineStack align="space-between" blockAlign="center">
+                      <Text as="p" variant="bodyMd" tone="subdued">
+                        Deshacer
+                      </Text>
+                      <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                        <Text as="span" variant="bodyMd" fontWeight="medium">
+                          CTRL Z
+                        </Text>
+                      </Box>
+                    </InlineStack>
+                    <InlineStack align="space-between" blockAlign="center">
+                      <Text as="p" variant="bodyMd" tone="subdued">
+                        Rehacer
+                      </Text>
+                      <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                        <Text as="span" variant="bodyMd" fontWeight="medium">
+                          CTRL Y
+                        </Text>
+                      </Box>
+                    </InlineStack>
+                    <InlineStack align="space-between" blockAlign="center">
+                      <Text as="p" variant="bodyMd" tone="subdued">
+                        Guardar
+                      </Text>
+                      <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                        <Text as="span" variant="bodyMd" fontWeight="medium">
+                          CTRL S
+                        </Text>
+                      </Box>
+                    </InlineStack>
+                    <InlineStack align="space-between" blockAlign="center">
+                      <Text as="p" variant="bodyMd" tone="subdued">
+                        Inspector de vista previa
+                      </Text>
+                      <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                        <Text as="span" variant="bodyMd" fontWeight="medium">
+                          CTRL SHIFT I
+                        </Text>
+                      </Box>
+                    </InlineStack>
+                    <InlineStack align="space-between" blockAlign="center">
+                      <Text as="p" variant="bodyMd" tone="subdued">
+                        Ver todos los atajos
+                      </Text>
+                      <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                        <Text as="span" variant="bodyMd" fontWeight="medium">
+                          CTRL /
+                        </Text>
+                      </Box>
+                    </InlineStack>
+                  </BlockStack>
+                </BlockStack>
+              </BlockStack>
+            </Box>
+          </Scrollable>
+        </BlockStack>
+      </Card>
+    </Box>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
index 08668f21..96a9eeba 100644
--- a/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
+++ b/packages/theme-studio/src/presentation/components/settings/SettingsPane.tsx
@@ -21,6 +21,7 @@ import { useSelectedSection } from '../../hooks/useSelectedSection';
 import type { UseSidebarStateResult } from '../../hooks/useSidebarState';
 import { SettingsGroup } from './SettingsGroup';
 import { useSettingsPane } from '../../hooks/useSettingsPane';
+import { EmptySettingsState } from './EmptySettingsState';
 import { useMemo, useCallback } from 'react';
 
 interface SettingsPaneProps {
@@ -121,24 +122,7 @@ export function SettingsPane({
   }, [block, section]);
 
   if (!sidebarState.selectedSectionId) {
-    return (
-      <div>
-        <Box padding="200">
-          <Card padding="300">
-            <BlockStack gap="300">
-              <Text as="h2" variant="headingMd">
-                Ajustes
-              </Text>
-              <Box padding="200">
-                <Text as="p" variant="bodyMd" tone="subdued">
-                  Selecciona una sección o bloque para editar sus ajustes
-                </Text>
-              </Box>
-            </BlockStack>
-          </Card>
-        </Box>
-      </div>
-    );
+    return <EmptySettingsState />;
   }
 
   return (

From 4155d38f6191c9efae0b8326dc66acf50156f565 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 5 Nov 2025 14:23:04 -0500
Subject: [PATCH 42/49] Enhance Theme Studio with inspector toggle
 functionality and keyboard shortcuts integration

This commit introduces a new inspector toggle feature in the Theme Studio, allowing users to enable or disable the inspector mode. It also integrates keyboard shortcuts for actions such as undo, redo, save, and toggling the inspector, improving user experience and accessibility. Additionally, the PreviewPane and useIframeSelection hook are updated to support the inspector state, ensuring consistent behavior across components. A ShortcutsModal is added for displaying available keyboard shortcuts, further enhancing usability.
---
 .../presentation/components/ThemeStudio.tsx   |  28 ++++-
 .../components/preview/PreviewPane.tsx        |   3 +
 .../components/shortcuts/ShortcutsModal.tsx   | 101 +++++++++++++++++
 .../presentation/hooks/useIframeSelection.ts  |  30 +++++-
 .../hooks/useKeyboardShortcuts.ts             | 102 ++++++++++++++++++
 .../iframe-selection-script/constants.js      |  29 +++++
 .../iframe-selection-script/event-handlers.js |  24 +++--
 7 files changed, 306 insertions(+), 11 deletions(-)
 create mode 100644 packages/theme-studio/src/presentation/components/shortcuts/ShortcutsModal.tsx
 create mode 100644 packages/theme-studio/src/presentation/hooks/useKeyboardShortcuts.ts

diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index c7eec0f7..22e96a6f 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -8,6 +8,7 @@ import { Sidebar } from './sidebar/Sidebar';
 import { PreviewPane } from './preview/PreviewPane';
 import { SettingsPane } from './settings/SettingsPane';
 import { EditorHeader } from './header/EditorHeader';
+import { ShortcutsModal } from './shortcuts/ShortcutsModal';
 import { useState, useMemo, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { useStoreTemplates } from '../hooks/useStoreTemplates';
@@ -16,6 +17,7 @@ import { useSelectedSection } from '../hooks/useSelectedSection';
 import { useHotReload } from '../hooks/useHotReload';
 import { useHistory } from '../hooks/useHistory';
 import { useSaveChanges } from '../hooks/useSaveChanges';
+import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 
 export interface ThemeStudioProps {
   storeId: string;
@@ -33,6 +35,8 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
   const [device, setDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
   const [currentPath, setCurrentPath] = useState('/');
   const [currentPageId, setCurrentPageId] = useState('index');
+  const [inspectorEnabled, setInspectorEnabled] = useState(true);
+  const [showShortcutsModal, setShowShortcutsModal] = useState(false);
   const { pages } = useStoreTemplates({ storeId, apiBaseUrl });
   const router = useRouter();
 
@@ -109,6 +113,26 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
     return page?.name;
   }, [pages, currentPageId]);
 
+  const handleToggleInspector = useCallback(() => {
+    setInspectorEnabled((prev) => !prev);
+  }, []);
+
+  const handleShowShortcuts = useCallback(() => {
+    setShowShortcutsModal(true);
+  }, []);
+
+  const handleCloseShortcuts = useCallback(() => {
+    setShowShortcutsModal(false);
+  }, []);
+
+  useKeyboardShortcuts({
+    onUndo: history.canUndo ? history.undo : undefined,
+    onRedo: history.canRedo ? history.redo : undefined,
+    onSave: saveChanges.save,
+    onToggleInspector: handleToggleInspector,
+    onShowShortcuts: handleShowShortcuts,
+  });
+
   return (
     <div style={{ height: '100dvh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
       <EditorHeader
@@ -119,7 +143,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
         device={device}
         onChangeDevice={setDevice}
         onExit={() => router.back()}
-        onInspector={() => {}}
+        onInspector={handleToggleInspector}
         onUndo={history.canUndo ? history.undo : undefined}
         onRedo={history.canRedo ? history.redo : undefined}
         onSave={saveChanges.save}
@@ -152,6 +176,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
               selectedSubBlockId={sidebarState.selectedSubBlockId}
               selectedElementName={selectedElementName}
               iframeRef={iframeRef}
+              inspectorEnabled={inspectorEnabled}
               onPathChange={(newPath) => {
                 setCurrentPath(newPath);
                 const page = pages.find((p) => p.url === newPath);
@@ -174,6 +199,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
           </div>
         </div>
       </div>
+      <ShortcutsModal open={showShortcutsModal} onClose={handleCloseShortcuts} />
     </div>
   );
 }
diff --git a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
index 75755282..f777caa2 100644
--- a/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
+++ b/packages/theme-studio/src/presentation/components/preview/PreviewPane.tsx
@@ -21,6 +21,7 @@ interface PreviewPaneProps {
   onPathChange?: (newPath: string) => void;
   onElementClick?: (sectionId: string | null, blockId: string | null, subBlockId?: string | null) => void;
   iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  inspectorEnabled?: boolean;
 }
 
 export function PreviewPane({
@@ -34,6 +35,7 @@ export function PreviewPane({
   onPathChange,
   onElementClick,
   iframeRef: externalIframeRef,
+  inspectorEnabled = true,
 }: PreviewPaneProps) {
   const { previewUrl } = usePreviewUrl({ domain, path: currentPath });
   const internalIframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -53,6 +55,7 @@ export function PreviewPane({
     selectedElementName: selectedElementName || null,
     domain,
     onElementClick,
+    inspectorEnabled,
   });
 
   const lastUrlRef = useRef<string | null>(null);
diff --git a/packages/theme-studio/src/presentation/components/shortcuts/ShortcutsModal.tsx b/packages/theme-studio/src/presentation/components/shortcuts/ShortcutsModal.tsx
new file mode 100644
index 00000000..f2c54337
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/shortcuts/ShortcutsModal.tsx
@@ -0,0 +1,101 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Modal, BlockStack, Text, Box, InlineStack, Scrollable } from '@shopify/polaris';
+
+interface ShortcutsModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/**
+ * Componente: Modal de atajos de teclado
+ * Muestra la lista completa de atajos de teclado disponibles
+ */
+export function ShortcutsModal({ open, onClose }: ShortcutsModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Atajos de teclado"
+      primaryAction={{
+        content: 'Cerrar',
+        onAction: onClose,
+      }}>
+      <Scrollable style={{ maxHeight: '60vh' }}>
+        <Box padding="400">
+          <BlockStack gap="600">
+            <BlockStack gap="300">
+              <Text as="h3" variant="headingSm">
+                Atajos de teclado
+              </Text>
+              <BlockStack gap="200">
+                <InlineStack align="space-between" blockAlign="center">
+                  <Text as="p" variant="bodyMd" tone="subdued">
+                    Deshacer
+                  </Text>
+                  <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                    <Text as="span" variant="bodyMd" fontWeight="medium">
+                      CTRL Z
+                    </Text>
+                  </Box>
+                </InlineStack>
+                <InlineStack align="space-between" blockAlign="center">
+                  <Text as="p" variant="bodyMd" tone="subdued">
+                    Rehacer
+                  </Text>
+                  <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                    <Text as="span" variant="bodyMd" fontWeight="medium">
+                      CTRL Y
+                    </Text>
+                  </Box>
+                </InlineStack>
+                <InlineStack align="space-between" blockAlign="center">
+                  <Text as="p" variant="bodyMd" tone="subdued">
+                    Guardar
+                  </Text>
+                  <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                    <Text as="span" variant="bodyMd" fontWeight="medium">
+                      CTRL S
+                    </Text>
+                  </Box>
+                </InlineStack>
+                <InlineStack align="space-between" blockAlign="center">
+                  <Text as="p" variant="bodyMd" tone="subdued">
+                    Inspector de vista previa
+                  </Text>
+                  <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                    <Text as="span" variant="bodyMd" fontWeight="medium">
+                      CTRL SHIFT I
+                    </Text>
+                  </Box>
+                </InlineStack>
+                <InlineStack align="space-between" blockAlign="center">
+                  <Text as="p" variant="bodyMd" tone="subdued">
+                    Ver todos los atajos
+                  </Text>
+                  <Box paddingInline="150" paddingBlock="050" background="bg-surface-secondary" borderRadius="100">
+                    <Text as="span" variant="bodyMd" fontWeight="medium">
+                      CTRL /
+                    </Text>
+                  </Box>
+                </InlineStack>
+              </BlockStack>
+            </BlockStack>
+          </BlockStack>
+        </Box>
+      </Scrollable>
+    </Modal>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
index bcb2d1e3..6c6b4044 100644
--- a/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
+++ b/packages/theme-studio/src/presentation/hooks/useIframeSelection.ts
@@ -26,6 +26,7 @@ interface UseIframeSelectionParams {
   selectedElementName?: string | null;
   domain?: string | null;
   onElementClick?: (sectionId: string | null, blockId: string | null, subBlockId?: string | null) => void;
+  inspectorEnabled?: boolean;
 }
 
 /**
@@ -44,6 +45,7 @@ export function useIframeSelection({
   selectedElementName,
   domain,
   onElementClick,
+  inspectorEnabled = true,
 }: UseIframeSelectionParams) {
   const scriptInjectedRef = useRef(false);
   const lastSelectedSectionIdRef = useRef<string | null>(null);
@@ -116,6 +118,8 @@ export function useIframeSelection({
 
   // Escuchar mensajes del iframe
   useEffect(() => {
+    if (!inspectorEnabled) return;
+
     const handleMessage = (event: MessageEvent) => {
       // Validar origen
       const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
@@ -140,10 +144,32 @@ export function useIframeSelection({
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, [onElementClick]);
+  }, [inspectorEnabled, onElementClick]);
+
+  // Enviar mensaje al iframe cuando cambia el estado del inspector
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    try {
+      const iframeWindow = iframe.contentWindow;
+      if (!iframeWindow) return;
+
+      const message = {
+        type: 'FASTTIFY_THEME_STUDIO_TOGGLE_INSPECTOR',
+        enabled: inspectorEnabled,
+      };
+
+      iframeWindow.postMessage(message, '*');
+    } catch (error) {
+      console.debug('Cannot send message to iframe (cross-origin):', error);
+    }
+  }, [iframeRef, inspectorEnabled]);
 
   // Enviar mensaje al iframe cuando cambia la selección del sidebar
   useEffect(() => {
+    if (!inspectorEnabled) return;
+
     const iframe = iframeRef.current;
     if (!iframe) return;
 
@@ -206,7 +232,7 @@ export function useIframeSelection({
     } catch (error) {
       console.debug('Cannot send message to iframe (cross-origin):', error);
     }
-  }, [iframeRef, selectedSectionId, selectedBlockId, selectedElementName]);
+  }, [iframeRef, inspectorEnabled, selectedSectionId, selectedBlockId, selectedSubBlockId, selectedElementName]);
 
   // Limpiar selección cuando se desmonta el componente
   useEffect(() => {
diff --git a/packages/theme-studio/src/presentation/hooks/useKeyboardShortcuts.ts b/packages/theme-studio/src/presentation/hooks/useKeyboardShortcuts.ts
new file mode 100644
index 00000000..06038c0b
--- /dev/null
+++ b/packages/theme-studio/src/presentation/hooks/useKeyboardShortcuts.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useCallback } from 'react';
+
+interface UseKeyboardShortcutsParams {
+  onUndo?: () => void | Promise<void>;
+  onRedo?: () => void | Promise<void>;
+  onSave?: () => void | Promise<void>;
+  onToggleInspector?: () => void;
+  onShowShortcuts?: () => void;
+  enabled?: boolean;
+}
+
+/**
+ * Hook de presentación: useKeyboardShortcuts
+ * Maneja atajos de teclado globales para el Theme Studio
+ */
+export function useKeyboardShortcuts({
+  onUndo,
+  onRedo,
+  onSave,
+  onToggleInspector,
+  onShowShortcuts,
+  enabled = true,
+}: UseKeyboardShortcutsParams) {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!enabled) return;
+
+      // Ignorar si el usuario está escribiendo en un input o textarea
+      const activeElement = document.activeElement;
+      const isInputFocused =
+        activeElement &&
+        (activeElement.tagName === 'INPUT' ||
+          activeElement.tagName === 'TEXTAREA' ||
+          (activeElement as HTMLElement).isContentEditable);
+
+      // Ctrl+Z: Undo
+      if (event.ctrlKey && !event.shiftKey && event.key === 'z' && !event.metaKey) {
+        if (isInputFocused) return; // Permitir undo en inputs
+        event.preventDefault();
+        onUndo?.();
+        return;
+      }
+
+      // Ctrl+Y o Ctrl+Shift+Z: Redo
+      if (
+        (event.ctrlKey && !event.shiftKey && event.key === 'y') ||
+        (event.ctrlKey && event.shiftKey && event.key === 'z')
+      ) {
+        if (isInputFocused) return; // Permitir redo en inputs
+        event.preventDefault();
+        onRedo?.();
+        return;
+      }
+
+      // Ctrl+S: Save
+      if (event.ctrlKey && !event.shiftKey && event.key === 's' && !event.metaKey) {
+        event.preventDefault(); // Prevenir guardado del navegador
+        onSave?.();
+        return;
+      }
+
+      // Ctrl+Shift+I: Toggle Inspector
+      if (event.ctrlKey && event.shiftKey && event.key === 'I') {
+        if (isInputFocused) return;
+        event.preventDefault();
+        onToggleInspector?.();
+        return;
+      }
+
+      // Ctrl+/: Show Shortcuts
+      if (event.ctrlKey && !event.shiftKey && event.key === '/') {
+        if (isInputFocused) return;
+        event.preventDefault();
+        onShowShortcuts?.();
+        return;
+      }
+    },
+    [enabled, onUndo, onRedo, onSave, onToggleInspector, onShowShortcuts]
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [enabled, handleKeyDown]);
+}
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
index 5c80bd04..216c1bc6 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/constants.js
@@ -67,12 +67,41 @@ function constantsModule(storeDomain) {
     '  border-radius: 4px;' +
     '}';
   document.head.appendChild(style);
+  let inspectorEnabled = true;
   let currentSelectedElement = null;
   let hoveredElement = null;
   let currentLabelElement = null;
   let hoverLabelElement = null;
   let lastSelectionTimestamp = 0;
   let scrollAnimationFrame = null;
+
+  /**
+   * Función global para toggle el inspector
+   * @param {boolean} enabled - Si el inspector está habilitado
+   */
+  window.toggleInspector = function (enabled) {
+    inspectorEnabled = enabled !== undefined ? enabled : !inspectorEnabled;
+    if (style) {
+      style.disabled = !inspectorEnabled;
+    }
+    // Limpiar selección cuando se desactiva
+    if (!inspectorEnabled) {
+      if (currentSelectedElement) {
+        currentSelectedElement.classList.remove(SELECTED_CLASS);
+        if (typeof window.removeLabel === 'function') {
+          window.removeLabel(false);
+        }
+        currentSelectedElement = null;
+      }
+      if (hoveredElement) {
+        hoveredElement.classList.remove(HOVER_CLASS);
+        if (typeof window.removeLabel === 'function') {
+          window.removeLabel(true);
+        }
+        hoveredElement = null;
+      }
+    }
+  };
 }
 
 /**
diff --git a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
index 64b68628..8c6e896c 100644
--- a/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
+++ b/packages/theme-studio/src/presentation/utils/iframe-selection-script/event-handlers.js
@@ -33,6 +33,7 @@ function eventHandlersModule() {
    * @param {MouseEvent} event - El evento de click
    */
   function handleClick(event) {
+    if (inspectorEnabled === false) return;
     const target = event.target;
     const selectableElement = findSelectableElement(target);
 
@@ -93,6 +94,7 @@ function eventHandlersModule() {
    * @param {MouseEvent} event - El evento mouseenter
    */
   function handleMouseEnter(event) {
+    if (inspectorEnabled === false) return;
     // Cancelar cualquier timeout de leave pendiente
     if (leaveTimeout) {
       clearTimeout(leaveTimeout);
@@ -176,14 +178,20 @@ function eventHandlersModule() {
     const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
     const isSameOrigin = event.origin === window.location.origin;
     if (!isSameOrigin && !isLocalhost) return;
-    if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT') {
-      selectElement(
-        event.data.sectionId,
-        event.data.blockId,
-        event.data.subBlockId,
-        event.data.timestamp,
-        event.data.elementName
-      );
+    if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_TOGGLE_INSPECTOR') {
+      if (typeof window.toggleInspector === 'function') {
+        window.toggleInspector(event.data.enabled);
+      }
+    } else if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_SELECT_ELEMENT') {
+      if (inspectorEnabled !== false) {
+        selectElement(
+          event.data.sectionId,
+          event.data.blockId,
+          event.data.subBlockId,
+          event.data.timestamp,
+          event.data.elementName
+        );
+      }
     } else if (event.data && event.data.type === 'FASTTIFY_THEME_STUDIO_CLEAR_SELECTION') {
       clearSelection();
       lastSelectionTimestamp = 0;

From 0d22186ec174b6eb7e14f0cf27e8f3ebbb59724a Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Wed, 5 Nov 2025 14:29:14 -0500
Subject: [PATCH 43/49] Add unsaved changes handling in Theme Studio with modal
 confirmation

This commit introduces a new UnsavedChangesModal in the Theme Studio, prompting users to confirm their exit when there are pending changes. It implements logic to prevent accidental loss of unsaved work by utilizing the beforeunload event. The exit handling is refactored to manage navigation based on the presence of unsaved changes, enhancing user experience and data integrity.
---
 .../presentation/components/ThemeStudio.tsx   | 46 ++++++++++++++++-
 .../unsaved-changes/UnsavedChangesModal.tsx   | 51 +++++++++++++++++++
 2 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 packages/theme-studio/src/presentation/components/unsaved-changes/UnsavedChangesModal.tsx

diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index 22e96a6f..206a5651 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -9,7 +9,8 @@ import { PreviewPane } from './preview/PreviewPane';
 import { SettingsPane } from './settings/SettingsPane';
 import { EditorHeader } from './header/EditorHeader';
 import { ShortcutsModal } from './shortcuts/ShortcutsModal';
-import { useState, useMemo, useCallback, useRef } from 'react';
+import { UnsavedChangesModal } from './unsaved-changes/UnsavedChangesModal';
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useStoreTemplates } from '../hooks/useStoreTemplates';
 import { useSidebarState } from '../hooks/useSidebarState';
@@ -37,6 +38,8 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
   const [currentPageId, setCurrentPageId] = useState('index');
   const [inspectorEnabled, setInspectorEnabled] = useState(true);
   const [showShortcutsModal, setShowShortcutsModal] = useState(false);
+  const [showUnsavedChangesModal, setShowUnsavedChangesModal] = useState(false);
+  const [pendingExit, setPendingExit] = useState<(() => void) | null>(null);
   const { pages } = useStoreTemplates({ storeId, apiBaseUrl });
   const router = useRouter();
 
@@ -125,6 +128,44 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
     setShowShortcutsModal(false);
   }, []);
 
+  const handleExit = useCallback(() => {
+    if (hotReload.hasPendingChanges) {
+      setPendingExit(() => router.back);
+      setShowUnsavedChangesModal(true);
+    } else {
+      router.back();
+    }
+  }, [hotReload.hasPendingChanges, router]);
+
+  const handleStay = useCallback(() => {
+    setShowUnsavedChangesModal(false);
+    setPendingExit(null);
+  }, []);
+
+  const handleLeave = useCallback(() => {
+    setShowUnsavedChangesModal(false);
+    if (pendingExit) {
+      pendingExit();
+      setPendingExit(null);
+    }
+  }, [pendingExit]);
+
+  // Prevenir cierre de la pestaña/ventana con cambios sin guardar
+  useEffect(() => {
+    if (!hotReload.hasPendingChanges) return;
+
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = '';
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [hotReload.hasPendingChanges]);
+
   useKeyboardShortcuts({
     onUndo: history.canUndo ? history.undo : undefined,
     onRedo: history.canRedo ? history.redo : undefined,
@@ -142,7 +183,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
         live
         device={device}
         onChangeDevice={setDevice}
-        onExit={() => router.back()}
+        onExit={handleExit}
         onInspector={handleToggleInspector}
         onUndo={history.canUndo ? history.undo : undefined}
         onRedo={history.canRedo ? history.redo : undefined}
@@ -200,6 +241,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
         </div>
       </div>
       <ShortcutsModal open={showShortcutsModal} onClose={handleCloseShortcuts} />
+      <UnsavedChangesModal open={showUnsavedChangesModal} onStay={handleStay} onLeave={handleLeave} />
     </div>
   );
 }
diff --git a/packages/theme-studio/src/presentation/components/unsaved-changes/UnsavedChangesModal.tsx b/packages/theme-studio/src/presentation/components/unsaved-changes/UnsavedChangesModal.tsx
new file mode 100644
index 00000000..19bd0235
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/unsaved-changes/UnsavedChangesModal.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Modal, Text } from '@shopify/polaris';
+
+interface UnsavedChangesModalProps {
+  open: boolean;
+  onStay: () => void;
+  onLeave: () => void;
+}
+
+/**
+ * Componente: Modal de advertencia de cambios sin guardar
+ * Se muestra cuando el usuario intenta salir con cambios sin guardar
+ */
+export function UnsavedChangesModal({ open, onStay, onLeave }: UnsavedChangesModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onStay}
+      title="¿Salir de la página con cambios sin guardar?"
+      primaryAction={{
+        content: 'Salir de la página',
+        onAction: onLeave,
+        destructive: true,
+      }}
+      secondaryActions={[
+        {
+          content: 'Quedarse',
+          onAction: onStay,
+        },
+      ]}>
+      <Modal.Section>
+        <Text as="p" variant="bodyMd">
+          Salir de esta página eliminará todos los cambios sin guardar.
+        </Text>
+      </Modal.Section>
+    </Modal>
+  );
+}

From 7d0218ff9d686b13797abd18d06bea1c954b3945 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 6 Nov 2025 15:33:37 -0500
Subject: [PATCH 44/49] Add reorder functionality for sections, blocks, and
 sub-blocks in Theme Studio

This commit introduces new use cases for reordering sections, blocks, and sub-blocks within the Theme Studio. It updates the relevant interfaces and adapters to support these operations, enhancing the user experience by allowing users to rearrange their layout dynamically. Additionally, the undo and redo functionality is extended to accommodate these new actions, ensuring a seamless editing experience.
---
 .../src/application/use-cases/index.ts        |   3 +
 .../use-cases/redo-change.use-case.ts         | 110 ++++++++----
 .../use-cases/reorder-blocks.use-case.ts      |  85 ++++++++++
 .../use-cases/reorder-sections.use-case.ts    |  74 ++++++++
 .../use-cases/reorder-sub-blocks.use-case.ts  |  91 ++++++++++
 .../use-cases/undo-change.use-case.ts         |  71 ++++++--
 .../domain/entities/editor-session.entity.ts  |   4 +
 .../src/domain/entities/history.entity.ts     |   2 +
 .../src/domain/ports/dev-server.port.ts       |  48 ++++++
 .../adapters/dev-server.adapter.ts            |  31 +++-
 .../adapters/history-manager.adapter.ts       |  19 ++-
 .../adapters/template-manager.adapter.ts      |  48 ++++++
 .../presentation/components/ThemeStudio.tsx   |   1 +
 .../DraggableBlockList.tsx                    | 130 ++++++++++++++
 .../DraggableSectionGroup.tsx                 | 160 ++++++++++++++++++
 .../src/presentation/hooks/useHotReload.ts    |  36 ++++
 16 files changed, 856 insertions(+), 57 deletions(-)
 create mode 100644 packages/theme-studio/src/application/use-cases/reorder-blocks.use-case.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/reorder-sections.use-case.ts
 create mode 100644 packages/theme-studio/src/application/use-cases/reorder-sub-blocks.use-case.ts
 create mode 100644 packages/theme-studio/src/presentation/components/sidebar/draggable-block-list/DraggableBlockList.tsx
 create mode 100644 packages/theme-studio/src/presentation/components/sidebar/draggable-section-group/DraggableSectionGroup.tsx

diff --git a/packages/theme-studio/src/application/use-cases/index.ts b/packages/theme-studio/src/application/use-cases/index.ts
index f780e8f5..1b22009d 100644
--- a/packages/theme-studio/src/application/use-cases/index.ts
+++ b/packages/theme-studio/src/application/use-cases/index.ts
@@ -19,6 +19,9 @@ export { RenderPreviewUseCase } from './render-preview.use-case';
 export { UpdateSectionSettingUseCase } from './update-section-setting.use-case';
 export { UpdateBlockSettingUseCase } from './update-block-setting.use-case';
 export { UpdateSubBlockSettingUseCase } from './update-sub-block-setting.use-case';
+export { ReorderSectionsUseCase } from './reorder-sections.use-case';
+export { ReorderBlocksUseCase } from './reorder-blocks.use-case';
+export { ReorderSubBlocksUseCase } from './reorder-sub-blocks.use-case';
 export { SaveChangesUseCase } from './save-changes.use-case';
 export { RecordChangeUseCase } from './record-change.use-case';
 export { UndoChangeUseCase } from './undo-change.use-case';
diff --git a/packages/theme-studio/src/application/use-cases/redo-change.use-case.ts b/packages/theme-studio/src/application/use-cases/redo-change.use-case.ts
index 851a2e98..74a2b1a1 100644
--- a/packages/theme-studio/src/application/use-cases/redo-change.use-case.ts
+++ b/packages/theme-studio/src/application/use-cases/redo-change.use-case.ts
@@ -17,6 +17,9 @@ import type {
   UpdateSectionSettingParams,
   UpdateBlockSettingParams,
   UpdateSubBlockSettingParams,
+  ReorderSectionsParams,
+  ReorderBlocksParams,
+  ReorderSubBlocksParams,
 } from '../../domain/ports/dev-server.port';
 
 /**
@@ -62,10 +65,9 @@ export class RedoChangeUseCase {
   private async renderAffectedSection(storeId: string, entry: any): Promise<void> {
     const { payload, type } = entry;
 
-    // Re-aplicar el valor original usando el payload según el tipo de cambio
-    if (payload.settingId && payload.value !== undefined) {
-      switch (type) {
-        case 'UPDATE_SECTION_SETTING':
+    switch (type) {
+      case 'UPDATE_SECTION_SETTING':
+        if (payload?.settingId && payload.value !== undefined) {
           const sectionParams: UpdateSectionSettingParams = {
             storeId,
             sectionId: payload.sectionId,
@@ -73,38 +75,74 @@ export class RedoChangeUseCase {
             value: payload.value,
           };
           await this.devServer.updateSectionSetting(sectionParams);
-          break;
-
-        case 'UPDATE_BLOCK_SETTING':
-          if (payload.blockId) {
-            const blockParams: UpdateBlockSettingParams = {
-              storeId,
-              sectionId: payload.sectionId,
-              blockId: payload.blockId,
-              settingId: payload.settingId,
-              value: payload.value,
-            };
-            await this.devServer.updateBlockSetting(blockParams);
-          }
-          break;
-
-        case 'UPDATE_SUB_BLOCK_SETTING':
-          if (payload.blockId && payload.subBlockId) {
-            const subBlockParams: UpdateSubBlockSettingParams = {
-              storeId,
-              sectionId: payload.sectionId,
-              blockId: payload.blockId,
-              subBlockId: payload.subBlockId,
-              settingId: payload.settingId,
-              value: payload.value,
-            };
-            await this.devServer.updateSubBlockSetting(subBlockParams);
-          }
-          break;
-
-        default:
-          break;
-      }
+        }
+        break;
+
+      case 'UPDATE_BLOCK_SETTING':
+        if (payload?.blockId && payload?.settingId && payload.value !== undefined) {
+          const blockParams: UpdateBlockSettingParams = {
+            storeId,
+            sectionId: payload.sectionId,
+            blockId: payload.blockId,
+            settingId: payload.settingId,
+            value: payload.value,
+          };
+          await this.devServer.updateBlockSetting(blockParams);
+        }
+        break;
+
+      case 'UPDATE_SUB_BLOCK_SETTING':
+        if (payload?.blockId && payload?.subBlockId && payload?.settingId && payload.value !== undefined) {
+          const subBlockParams: UpdateSubBlockSettingParams = {
+            storeId,
+            sectionId: payload.sectionId,
+            blockId: payload.blockId,
+            subBlockId: payload.subBlockId,
+            settingId: payload.settingId,
+            value: payload.value,
+          };
+          await this.devServer.updateSubBlockSetting(subBlockParams);
+        }
+        break;
+
+      case 'REORDER_SECTIONS':
+        if (payload?.oldIndex !== undefined && payload?.newIndex !== undefined) {
+          const reorderParams: ReorderSectionsParams = {
+            storeId,
+            oldIndex: payload.oldIndex,
+            newIndex: payload.newIndex,
+          };
+          await this.devServer.reorderSections(reorderParams);
+        }
+        break;
+
+      case 'REORDER_BLOCKS':
+        if (payload?.oldIndex !== undefined && payload?.newIndex !== undefined) {
+          const reorderParams: ReorderBlocksParams = {
+            storeId,
+            sectionId: payload.sectionId,
+            oldIndex: payload.oldIndex,
+            newIndex: payload.newIndex,
+          };
+          await this.devServer.reorderBlocks(reorderParams);
+        }
+        break;
+
+      case 'REORDER_SUB_BLOCKS':
+        if (payload?.blockId && payload?.oldIndex !== undefined && payload?.newIndex !== undefined) {
+          const reorderParams: ReorderSubBlocksParams = {
+            storeId,
+            sectionId: payload.sectionId,
+            blockId: payload.blockId,
+            oldIndex: payload.oldIndex,
+            newIndex: payload.newIndex,
+          };
+          await this.devServer.reorderSubBlocks(reorderParams);
+        }
+        break;
+
+      default:
+        break;
     }
   }
 }
diff --git a/packages/theme-studio/src/application/use-cases/reorder-blocks.use-case.ts b/packages/theme-studio/src/application/use-cases/reorder-blocks.use-case.ts
new file mode 100644
index 00000000..6abdbe8a
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/reorder-blocks.use-case.ts
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IDevServer, ReorderBlocksParams } from '../../domain/ports/dev-server.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
+import type { ChangeType } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Caso de uso: Reordenar bloques dentro de una sección
+ * Orquesta la lógica de negocio para reordenar bloques y notificar al Dev Server
+ */
+export class ReorderBlocksUseCase {
+  constructor(
+    private readonly devServer: IDevServer,
+    private readonly templateManager: ITemplateManager,
+    private readonly historyManager?: IHistoryManager
+  ) {}
+
+  async execute(params: ReorderBlocksParams): Promise<void> {
+    // 1. Validar que hay conexión al Dev Server
+    if (!this.devServer.isConnected()) {
+      throw new Error('Dev Server is not connected');
+    }
+
+    // 2. Obtener template antes del cambio para el historial
+    const templateBefore = this.templateManager.getCurrentTemplate();
+    if (!templateBefore) {
+      throw new Error('No template loaded');
+    }
+
+    // 3. Validar que la sección existe y tiene bloques
+    const section = templateBefore.sections[params.sectionId];
+    if (!section) {
+      throw new Error('Section not found');
+    }
+
+    if (!section.blocks || section.blocks.length === 0) {
+      throw new Error('Section has no blocks');
+    }
+
+    // 4. Validar índices
+    if (params.oldIndex < 0 || params.newIndex < 0) {
+      throw new Error('Invalid indices');
+    }
+
+    if (params.oldIndex >= section.blocks.length || params.newIndex >= section.blocks.length) {
+      throw new Error('Index out of bounds');
+    }
+
+    // 5. Aplicar cambio al template en memoria (optimistic update)
+    const change = {
+      id: `change-${Date.now()}-${Math.random()}`,
+      type: 'REORDER_BLOCKS' as ChangeType,
+      sectionId: params.sectionId,
+      blockId: section.blocks[params.oldIndex].id,
+      oldIndex: params.oldIndex,
+      newIndex: params.newIndex,
+      timestamp: Date.now(),
+    };
+
+    const templateAfter = this.templateManager.applyChange(change);
+
+    // 6. Registrar en el historial si está disponible
+    if (this.historyManager) {
+      this.historyManager.recordChange(change, templateBefore, templateAfter);
+    }
+
+    // 7. Enviar cambio al Dev Server para re-renderizado
+    await this.devServer.reorderBlocks(params);
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/reorder-sections.use-case.ts b/packages/theme-studio/src/application/use-cases/reorder-sections.use-case.ts
new file mode 100644
index 00000000..a6e592d2
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/reorder-sections.use-case.ts
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IDevServer, ReorderSectionsParams } from '../../domain/ports/dev-server.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
+import type { ChangeType } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Caso de uso: Reordenar secciones
+ * Orquesta la lógica de negocio para reordenar secciones y notificar al Dev Server
+ */
+export class ReorderSectionsUseCase {
+  constructor(
+    private readonly devServer: IDevServer,
+    private readonly templateManager: ITemplateManager,
+    private readonly historyManager?: IHistoryManager
+  ) {}
+
+  async execute(params: ReorderSectionsParams): Promise<void> {
+    // 1. Validar que hay conexión al Dev Server
+    if (!this.devServer.isConnected()) {
+      throw new Error('Dev Server is not connected');
+    }
+
+    // 2. Obtener template antes del cambio para el historial
+    const templateBefore = this.templateManager.getCurrentTemplate();
+    if (!templateBefore) {
+      throw new Error('No template loaded');
+    }
+
+    // 3. Validar índices
+    if (params.oldIndex < 0 || params.newIndex < 0) {
+      throw new Error('Invalid indices');
+    }
+
+    if (params.oldIndex >= templateBefore.order.length || params.newIndex >= templateBefore.order.length) {
+      throw new Error('Index out of bounds');
+    }
+
+    // 4. Aplicar cambio al template en memoria (optimistic update)
+    const change = {
+      id: `change-${Date.now()}-${Math.random()}`,
+      type: 'REORDER_SECTIONS' as ChangeType,
+      sectionId: templateBefore.order[params.oldIndex],
+      oldIndex: params.oldIndex,
+      newIndex: params.newIndex,
+      timestamp: Date.now(),
+    };
+
+    const templateAfter = this.templateManager.applyChange(change);
+
+    // 5. Registrar en el historial si está disponible
+    if (this.historyManager) {
+      this.historyManager.recordChange(change, templateBefore, templateAfter);
+    }
+
+    // 6. Enviar cambio al Dev Server para re-renderizado
+    await this.devServer.reorderSections(params);
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/reorder-sub-blocks.use-case.ts b/packages/theme-studio/src/application/use-cases/reorder-sub-blocks.use-case.ts
new file mode 100644
index 00000000..78ecbec3
--- /dev/null
+++ b/packages/theme-studio/src/application/use-cases/reorder-sub-blocks.use-case.ts
@@ -0,0 +1,91 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IDevServer, ReorderSubBlocksParams } from '../../domain/ports/dev-server.port';
+import type { ITemplateManager } from '../../domain/ports/template-manager.port';
+import type { IHistoryManager } from '../../domain/ports/history-manager.port';
+import type { ChangeType } from '../../domain/entities/editor-session.entity';
+
+/**
+ * Caso de uso: Reordenar sub-bloques dentro de un bloque
+ * Orquesta la lógica de negocio para reordenar sub-bloques y notificar al Dev Server
+ */
+export class ReorderSubBlocksUseCase {
+  constructor(
+    private readonly devServer: IDevServer,
+    private readonly templateManager: ITemplateManager,
+    private readonly historyManager?: IHistoryManager
+  ) {}
+
+  async execute(params: ReorderSubBlocksParams): Promise<void> {
+    // 1. Validar que hay conexión al Dev Server
+    if (!this.devServer.isConnected()) {
+      throw new Error('Dev Server is not connected');
+    }
+
+    // 2. Obtener template antes del cambio para el historial
+    const templateBefore = this.templateManager.getCurrentTemplate();
+    if (!templateBefore) {
+      throw new Error('No template loaded');
+    }
+
+    // 3. Validar que la sección y el bloque existen
+    const section = templateBefore.sections[params.sectionId];
+    if (!section) {
+      throw new Error('Section not found');
+    }
+
+    const block = section.blocks?.find((b) => b.id === params.blockId);
+    if (!block) {
+      throw new Error('Block not found');
+    }
+
+    if (!block.blocks || block.blocks.length === 0) {
+      throw new Error('Block has no sub-blocks');
+    }
+
+    // 4. Validar índices
+    if (params.oldIndex < 0 || params.newIndex < 0) {
+      throw new Error('Invalid indices');
+    }
+
+    if (params.oldIndex >= block.blocks.length || params.newIndex >= block.blocks.length) {
+      throw new Error('Index out of bounds');
+    }
+
+    // 5. Aplicar cambio al template en memoria (optimistic update)
+    const change = {
+      id: `change-${Date.now()}-${Math.random()}`,
+      type: 'REORDER_SUB_BLOCKS' as ChangeType,
+      sectionId: params.sectionId,
+      blockId: params.blockId,
+      subBlockId: block.blocks[params.oldIndex].id,
+      oldIndex: params.oldIndex,
+      newIndex: params.newIndex,
+      timestamp: Date.now(),
+    };
+
+    const templateAfter = this.templateManager.applyChange(change);
+
+    // 6. Registrar en el historial si está disponible
+    if (this.historyManager) {
+      this.historyManager.recordChange(change, templateBefore, templateAfter);
+    }
+
+    // 7. Enviar cambio al Dev Server para re-renderizado
+    await this.devServer.reorderSubBlocks(params);
+  }
+}
diff --git a/packages/theme-studio/src/application/use-cases/undo-change.use-case.ts b/packages/theme-studio/src/application/use-cases/undo-change.use-case.ts
index 13a3aa8b..c7f755e4 100644
--- a/packages/theme-studio/src/application/use-cases/undo-change.use-case.ts
+++ b/packages/theme-studio/src/application/use-cases/undo-change.use-case.ts
@@ -17,6 +17,9 @@ import type {
   UpdateSectionSettingParams,
   UpdateBlockSettingParams,
   UpdateSubBlockSettingParams,
+  ReorderSectionsParams,
+  ReorderBlocksParams,
+  ReorderSubBlocksParams,
 } from '../../domain/ports/dev-server.port';
 
 /**
@@ -62,27 +65,21 @@ export class UndoChangeUseCase {
   private async renderAffectedSection(storeId: string, entry: any): Promise<void> {
     const { inversePayload, type } = entry;
 
-    // Re-aplicar el valor anterior usando el payload inverso según el tipo de cambio
-    if (!inversePayload || !inversePayload.settingId) {
-      return;
-    }
-
-    // previousValue puede ser undefined si el setting no existía antes (eso es válido)
-    // Pasamos undefined al servidor para eliminar el setting
-
     switch (type) {
       case 'UPDATE_SECTION_SETTING':
-        const sectionParams: UpdateSectionSettingParams = {
-          storeId,
-          sectionId: inversePayload.sectionId,
-          settingId: inversePayload.settingId,
-          value: inversePayload.previousValue, // Puede ser undefined
-        };
-        await this.devServer.updateSectionSetting(sectionParams);
+        if (inversePayload?.settingId) {
+          const sectionParams: UpdateSectionSettingParams = {
+            storeId,
+            sectionId: inversePayload.sectionId,
+            settingId: inversePayload.settingId,
+            value: inversePayload.previousValue, // Puede ser undefined
+          };
+          await this.devServer.updateSectionSetting(sectionParams);
+        }
         break;
 
       case 'UPDATE_BLOCK_SETTING':
-        if (inversePayload.blockId) {
+        if (inversePayload?.blockId && inversePayload?.settingId) {
           const blockParams: UpdateBlockSettingParams = {
             storeId,
             sectionId: inversePayload.sectionId,
@@ -95,7 +92,7 @@ export class UndoChangeUseCase {
         break;
 
       case 'UPDATE_SUB_BLOCK_SETTING':
-        if (inversePayload.blockId && inversePayload.subBlockId) {
+        if (inversePayload?.blockId && inversePayload?.subBlockId && inversePayload?.settingId) {
           const subBlockParams: UpdateSubBlockSettingParams = {
             storeId,
             sectionId: inversePayload.sectionId,
@@ -108,6 +105,46 @@ export class UndoChangeUseCase {
         }
         break;
 
+      case 'REORDER_SECTIONS':
+        if (inversePayload?.oldIndex !== undefined && inversePayload?.newIndex !== undefined) {
+          const reorderParams: ReorderSectionsParams = {
+            storeId,
+            oldIndex: inversePayload.oldIndex,
+            newIndex: inversePayload.newIndex,
+          };
+          await this.devServer.reorderSections(reorderParams);
+        }
+        break;
+
+      case 'REORDER_BLOCKS':
+        if (inversePayload?.oldIndex !== undefined && inversePayload?.newIndex !== undefined) {
+          const reorderParams: ReorderBlocksParams = {
+            storeId,
+            sectionId: inversePayload.sectionId,
+            oldIndex: inversePayload.oldIndex,
+            newIndex: inversePayload.newIndex,
+          };
+          await this.devServer.reorderBlocks(reorderParams);
+        }
+        break;
+
+      case 'REORDER_SUB_BLOCKS':
+        if (
+          inversePayload?.blockId &&
+          inversePayload?.oldIndex !== undefined &&
+          inversePayload?.newIndex !== undefined
+        ) {
+          const reorderParams: ReorderSubBlocksParams = {
+            storeId,
+            sectionId: inversePayload.sectionId,
+            blockId: inversePayload.blockId,
+            oldIndex: inversePayload.oldIndex,
+            newIndex: inversePayload.newIndex,
+          };
+          await this.devServer.reorderSubBlocks(reorderParams);
+        }
+        break;
+
       default:
         break;
     }
diff --git a/packages/theme-studio/src/domain/entities/editor-session.entity.ts b/packages/theme-studio/src/domain/entities/editor-session.entity.ts
index f249e419..7150046d 100644
--- a/packages/theme-studio/src/domain/entities/editor-session.entity.ts
+++ b/packages/theme-studio/src/domain/entities/editor-session.entity.ts
@@ -25,7 +25,9 @@ export type ChangeType =
   | 'UPDATE_SUB_BLOCK_SETTING'
   | 'ADD_BLOCK'
   | 'DELETE_BLOCK'
+  | 'REORDER_SECTIONS'
   | 'REORDER_BLOCKS'
+  | 'REORDER_SUB_BLOCKS'
   | 'ADD_SUB_BLOCK'
   | 'DELETE_SUB_BLOCK';
 
@@ -41,6 +43,8 @@ export interface TemplateChange {
   subBlockId?: string;
   settingId?: string;
   value?: unknown;
+  oldIndex?: number;
+  newIndex?: number;
   timestamp: number;
 }
 
diff --git a/packages/theme-studio/src/domain/entities/history.entity.ts b/packages/theme-studio/src/domain/entities/history.entity.ts
index 14cee16a..9a87928a 100644
--- a/packages/theme-studio/src/domain/entities/history.entity.ts
+++ b/packages/theme-studio/src/domain/entities/history.entity.ts
@@ -41,6 +41,8 @@ export interface ChangePayload {
   settingId?: string;
   value?: unknown;
   previousValue?: unknown;
+  oldIndex?: number;
+  newIndex?: number;
   blockData?: {
     id: string;
     type: string;
diff --git a/packages/theme-studio/src/domain/ports/dev-server.port.ts b/packages/theme-studio/src/domain/ports/dev-server.port.ts
index 636370e8..b01f099d 100644
--- a/packages/theme-studio/src/domain/ports/dev-server.port.ts
+++ b/packages/theme-studio/src/domain/ports/dev-server.port.ts
@@ -109,8 +109,56 @@ export interface IDevServer {
    */
   updateSubBlockSetting(params: UpdateSubBlockSettingParams): Promise<void>;
 
+  /**
+   * Reordenar secciones
+   * @param params - Parámetros del reordenamiento
+   */
+  reorderSections(params: ReorderSectionsParams): Promise<void>;
+
+  /**
+   * Reordenar bloques dentro de una sección
+   * @param params - Parámetros del reordenamiento
+   */
+  reorderBlocks(params: ReorderBlocksParams): Promise<void>;
+
+  /**
+   * Reordenar sub-bloques dentro de un bloque
+   * @param params - Parámetros del reordenamiento
+   */
+  reorderSubBlocks(params: ReorderSubBlocksParams): Promise<void>;
+
   /**
    * Obtener el estado de conexión
    */
   isConnected(): boolean;
 }
+
+/**
+ * Parámetros para reordenar secciones
+ */
+export interface ReorderSectionsParams {
+  storeId: string;
+  oldIndex: number;
+  newIndex: number;
+}
+
+/**
+ * Parámetros para reordenar bloques
+ */
+export interface ReorderBlocksParams {
+  storeId: string;
+  sectionId: string;
+  oldIndex: number;
+  newIndex: number;
+}
+
+/**
+ * Parámetros para reordenar sub-bloques
+ */
+export interface ReorderSubBlocksParams {
+  storeId: string;
+  sectionId: string;
+  blockId: string;
+  oldIndex: number;
+  newIndex: number;
+}
diff --git a/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
index 30eea685..83356939 100644
--- a/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
+++ b/packages/theme-studio/src/infrastructure/adapters/dev-server.adapter.ts
@@ -19,6 +19,9 @@ import type {
   UpdateSectionSettingParams,
   UpdateBlockSettingParams,
   UpdateSubBlockSettingParams,
+  ReorderSectionsParams,
+  ReorderBlocksParams,
+  ReorderSubBlocksParams,
   ChangeAppliedCallback,
   ErrorCallback,
 } from '../../domain/ports/dev-server.port';
@@ -311,13 +314,31 @@ export class DevServerAdapter implements IDevServer {
     await this.sendUpdateRequest('UPDATE_SUB_BLOCK_SETTING', params, params.storeId);
   }
 
+  async reorderSections(params: ReorderSectionsParams): Promise<void> {
+    await this.sendUpdateRequest('REORDER_SECTIONS', params, params.storeId);
+  }
+
+  async reorderBlocks(params: ReorderBlocksParams): Promise<void> {
+    await this.sendUpdateRequest('REORDER_BLOCKS', params, params.storeId);
+  }
+
+  async reorderSubBlocks(params: ReorderSubBlocksParams): Promise<void> {
+    await this.sendUpdateRequest('REORDER_SUB_BLOCKS', params, params.storeId);
+  }
+
   isConnected(): boolean {
     return isConnected(this.eventSource);
   }
 
   private async sendUpdateRequest(
     type: string,
-    payload: UpdateSectionSettingParams | UpdateBlockSettingParams | UpdateSubBlockSettingParams,
+    payload:
+      | UpdateSectionSettingParams
+      | UpdateBlockSettingParams
+      | UpdateSubBlockSettingParams
+      | ReorderSectionsParams
+      | ReorderBlocksParams
+      | ReorderSubBlocksParams,
     storeId: string
   ): Promise<void> {
     this.ensureConnected();
@@ -340,7 +361,13 @@ export class DevServerAdapter implements IDevServer {
 
   private async postUpdateRequest(
     type: string,
-    payload: UpdateSectionSettingParams | UpdateBlockSettingParams | UpdateSubBlockSettingParams,
+    payload:
+      | UpdateSectionSettingParams
+      | UpdateBlockSettingParams
+      | UpdateSubBlockSettingParams
+      | ReorderSectionsParams
+      | ReorderBlocksParams
+      | ReorderSubBlocksParams,
     storeId: string
   ): Promise<Response> {
     return fetch(`${this.apiBaseUrl}/stores/${storeId}/dev/update`, {
diff --git a/packages/theme-studio/src/infrastructure/adapters/history-manager.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/history-manager.adapter.ts
index 914e1aca..364566df 100644
--- a/packages/theme-studio/src/infrastructure/adapters/history-manager.adapter.ts
+++ b/packages/theme-studio/src/infrastructure/adapters/history-manager.adapter.ts
@@ -35,6 +35,8 @@ export class HistoryManagerAdapter implements IHistoryManager {
       subBlockId: change.subBlockId,
       settingId: change.settingId,
       value: change.value,
+      oldIndex: change.oldIndex,
+      newIndex: change.newIndex,
     };
 
     // Crear payload inverso para revertir el cambio
@@ -187,9 +189,22 @@ export class HistoryManagerAdapter implements IHistoryManager {
         }
         break;
 
+      case 'REORDER_SECTIONS':
+        // Para revertir REORDER_SECTIONS, intercambiamos oldIndex y newIndex
+        inversePayload.oldIndex = change.newIndex;
+        inversePayload.newIndex = change.oldIndex;
+        break;
+
       case 'REORDER_BLOCKS':
-        // Para revertir REORDER_BLOCKS, necesitamos el índice anterior
-        inversePayload.index = change.value as number;
+        // Para revertir REORDER_BLOCKS, intercambiamos oldIndex y newIndex
+        inversePayload.oldIndex = change.newIndex;
+        inversePayload.newIndex = change.oldIndex;
+        break;
+
+      case 'REORDER_SUB_BLOCKS':
+        // Para revertir REORDER_SUB_BLOCKS, intercambiamos oldIndex y newIndex
+        inversePayload.oldIndex = change.newIndex;
+        inversePayload.newIndex = change.oldIndex;
         break;
 
       default:
diff --git a/packages/theme-studio/src/infrastructure/adapters/template-manager.adapter.ts b/packages/theme-studio/src/infrastructure/adapters/template-manager.adapter.ts
index 421964d6..eba2388a 100644
--- a/packages/theme-studio/src/infrastructure/adapters/template-manager.adapter.ts
+++ b/packages/theme-studio/src/infrastructure/adapters/template-manager.adapter.ts
@@ -62,6 +62,7 @@ export class TemplateManagerAdapter implements ITemplateManager {
     const updatedTemplate: Template = {
       ...this.currentTemplate,
       sections: { ...this.currentTemplate.sections },
+      order: [...this.currentTemplate.order],
     };
 
     // Aplicar cambio según el tipo
@@ -135,6 +136,53 @@ export class TemplateManagerAdapter implements ITemplateManager {
         }
         break;
 
+      case 'REORDER_SECTIONS':
+        if (change.oldIndex !== undefined && change.newIndex !== undefined) {
+          const newOrder = [...updatedTemplate.order];
+          const [movedSectionId] = newOrder.splice(change.oldIndex, 1);
+          newOrder.splice(change.newIndex, 0, movedSectionId);
+          updatedTemplate.order = newOrder;
+        }
+        break;
+
+      case 'REORDER_BLOCKS':
+        if (change.oldIndex !== undefined && change.newIndex !== undefined) {
+          const section = updatedTemplate.sections[change.sectionId];
+          if (section?.blocks) {
+            const newBlocks = [...section.blocks];
+            const [movedBlock] = newBlocks.splice(change.oldIndex, 1);
+            newBlocks.splice(change.newIndex, 0, movedBlock);
+            updatedTemplate.sections[change.sectionId] = {
+              ...section,
+              blocks: newBlocks,
+            };
+          }
+        }
+        break;
+
+      case 'REORDER_SUB_BLOCKS':
+        if (change.blockId && change.oldIndex !== undefined && change.newIndex !== undefined) {
+          const section = updatedTemplate.sections[change.sectionId];
+          if (section?.blocks) {
+            updatedTemplate.sections[change.sectionId] = {
+              ...section,
+              blocks: section.blocks.map((block) => {
+                if (block.id === change.blockId && block.blocks) {
+                  const newSubBlocks = [...block.blocks];
+                  const [movedSubBlock] = newSubBlocks.splice(change.oldIndex!, 1);
+                  newSubBlocks.splice(change.newIndex!, 0, movedSubBlock);
+                  return {
+                    ...block,
+                    blocks: newSubBlocks,
+                  };
+                }
+                return block;
+              }),
+            };
+          }
+        }
+        break;
+
       // TODO: Implementar otros tipos de cambios (ADD_BLOCK, DELETE_BLOCK, etc.)
     }
 
diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index 206a5651..ff2de1c7 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -204,6 +204,7 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
               apiBaseUrl={apiBaseUrl}
               currentPageId={currentPageId}
               sidebarState={sidebarState}
+              hotReload={hotReload}
             />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
diff --git a/packages/theme-studio/src/presentation/components/sidebar/draggable-block-list/DraggableBlockList.tsx b/packages/theme-studio/src/presentation/components/sidebar/draggable-block-list/DraggableBlockList.tsx
new file mode 100644
index 00000000..51612266
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/sidebar/draggable-block-list/DraggableBlockList.tsx
@@ -0,0 +1,130 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { useEffect, useRef } from 'react';
+import type { TemplateBlock } from '../../../../domain/entities/template.entity';
+
+interface DraggableBlockListProps {
+  blocks: TemplateBlock[];
+  disabled?: boolean;
+  onReorder: (oldIndex: number, newIndex: number) => void;
+  children: (block: TemplateBlock, index: number) => React.ReactNode;
+}
+
+/**
+ * Componente que permite reordenar bloques mediante drag and drop.
+ * Utiliza @shopify/draggable para proporcionar funcionalidad de arrastrar y soltar.
+ * Este componente es recursivo y puede usarse tanto para bloques como para sub-bloques.
+ *
+ * @param blocks - Array de bloques a mostrar y reordenar
+ * @param disabled - Si es true, deshabilita la funcionalidad de drag and drop
+ * @param onReorder - Callback que se ejecuta cuando se reordena un bloque, recibe oldIndex y newIndex
+ * @param children - Función render que recibe cada bloque y su índice
+ *
+ * @example
+ * ```tsx
+ * <DraggableBlockList
+ *   blocks={blocks}
+ *   onReorder={(oldIndex, newIndex) => handleReorder(oldIndex, newIndex)}
+ * >
+ *   {(block, index) => <BlockItem block={block} />}
+ * </DraggableBlockList>
+ * ```
+ */
+export function DraggableBlockList({ blocks, disabled = false, onReorder, children }: DraggableBlockListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const sortableRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!containerRef.current || disabled || blocks.length === 0 || typeof window === 'undefined') {
+      return;
+    }
+
+    const initSortable = async () => {
+      const draggable = await import('@shopify/draggable');
+      const { Sortable } = draggable;
+      const { Plugins } = draggable;
+      const { SortAnimation, SwapAnimation } = Plugins;
+
+      if (!containerRef.current) return;
+
+      // Crear instancia de Sortable con plugins de animación
+      sortableRef.current = new Sortable(containerRef.current, {
+        draggable: '.draggable-block',
+        handle: '.drag-handle',
+        mirror: {
+          constrainDimensions: true,
+          appendTo: document.body,
+          xAxis: false,
+          yAxis: true,
+          cursorOffsetX: 0,
+          cursorOffsetY: 0,
+        },
+        plugins: [SortAnimation, SwapAnimation],
+        sortAnimation: {
+          duration: 300,
+          easingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)',
+        },
+        swapAnimation: {
+          horizontal: false,
+          duration: 300,
+          easingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)',
+        },
+      });
+
+      // Estilizar el mirror cuando se crea
+      sortableRef.current.on('mirror:created', (event: any) => {
+        const mirror = event.mirror;
+        if (mirror) {
+          mirror.style.cursor = 'grabbing';
+          mirror.style.transform = 'rotate(1deg)';
+          mirror.style.boxShadow = '0 10px 25px -5px rgba(0, 0, 0, 0.3)';
+          mirror.style.opacity = '0.95';
+        }
+      });
+
+      // Manejar eventos de reordenamiento
+      sortableRef.current.on('sortable:stop', (event: any) => {
+        const { oldIndex, newIndex } = event as { oldIndex?: number; newIndex?: number };
+
+        if (oldIndex !== undefined && newIndex !== undefined && oldIndex !== newIndex) {
+          onReorder(oldIndex, newIndex);
+        }
+      });
+    };
+
+    initSortable();
+
+    return () => {
+      if (sortableRef.current) {
+        sortableRef.current.destroy();
+        sortableRef.current = null;
+      }
+    };
+  }, [blocks, onReorder, disabled]);
+
+  if (blocks.length === 0) {
+    return null;
+  }
+
+  return (
+    <div ref={containerRef}>
+      {blocks.map((block, index) => (
+        <div key={block.id} className="draggable-block" id={`block-${block.id}`}>
+          {children(block, index)}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/components/sidebar/draggable-section-group/DraggableSectionGroup.tsx b/packages/theme-studio/src/presentation/components/sidebar/draggable-section-group/DraggableSectionGroup.tsx
new file mode 100644
index 00000000..6ba76e7a
--- /dev/null
+++ b/packages/theme-studio/src/presentation/components/sidebar/draggable-section-group/DraggableSectionGroup.tsx
@@ -0,0 +1,160 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { TemplateSection } from '../../../hooks/useTemplateStructure';
+import { LayoutSection } from '../../../hooks/useLayoutStructure';
+
+interface DraggableSectionGroupProps {
+  sections: (TemplateSection | LayoutSection)[];
+  sectionOrder?: string[];
+  disabled?: boolean;
+  onReorder: (newOrder: string[]) => void;
+  children: (section: TemplateSection | LayoutSection, index: number) => React.ReactNode;
+}
+
+/**
+ * Componente que permite reordenar secciones mediante drag and drop.
+ * Utiliza @shopify/draggable para proporcionar funcionalidad de arrastrar y soltar.
+ *
+ * @param sections - Array de secciones a mostrar y reordenar
+ * @param sectionOrder - Orden opcional de las secciones (array de IDs)
+ * @param disabled - Si es true, deshabilita la funcionalidad de drag and drop
+ * @param onReorder - Callback que se ejecuta cuando se reordena una sección
+ * @param children - Función render que recibe cada sección y su índice
+ *
+ * @example
+ * ```tsx
+ * <DraggableSectionGroup
+ *   sections={sections}
+ *   sectionOrder={order}
+ *   onReorder={(newOrder) => handleReorder(newOrder)}
+ * >
+ *   {(section, index) => <SectionItem section={section} />}
+ * </DraggableSectionGroup>
+ * ```
+ */
+export function DraggableSectionGroup({
+  sections,
+  sectionOrder,
+  disabled = false,
+  onReorder,
+  children,
+}: DraggableSectionGroupProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const sortableRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!containerRef.current || disabled || typeof window === 'undefined') {
+      return;
+    }
+
+    const initSortable = async () => {
+      const draggable = await import('@shopify/draggable');
+      const { Sortable } = draggable;
+      const { Plugins } = draggable;
+      const { SortAnimation, SwapAnimation } = Plugins;
+
+      if (!containerRef.current) return;
+
+      // Crear instancia de Sortable con plugins de animación
+      sortableRef.current = new Sortable(containerRef.current, {
+        draggable: '.draggable-section',
+        handle: '.drag-handle',
+        mirror: {
+          constrainDimensions: true,
+          appendTo: document.body,
+          xAxis: false,
+          yAxis: true,
+          cursorOffsetX: 0,
+          cursorOffsetY: 0,
+        },
+        plugins: [SortAnimation, SwapAnimation],
+        sortAnimation: {
+          duration: 300,
+          easingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)',
+        },
+        swapAnimation: {
+          horizontal: false,
+          duration: 300,
+          easingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)',
+        },
+      });
+
+      // Estilizar el mirror cuando se crea
+      sortableRef.current.on('mirror:created', (event: any) => {
+        const mirror = event.mirror;
+        if (mirror) {
+          mirror.style.cursor = 'grabbing';
+          mirror.style.transform = 'rotate(1deg)';
+          mirror.style.boxShadow = '0 10px 25px -5px rgba(0, 0, 0, 0.3)';
+          mirror.style.opacity = '0.95';
+        }
+      });
+
+      // Manejar eventos de reordenamiento
+      sortableRef.current.on('sortable:stop', (event: any) => {
+        const { oldIndex, newIndex } = event as { oldIndex?: number; newIndex?: number };
+
+        if (oldIndex !== undefined && newIndex !== undefined && oldIndex !== newIndex) {
+          // Si hay sectionOrder, usarlo para determinar el nuevo orden
+          if (sectionOrder && sectionOrder.length > 0) {
+            const newOrder = [...sectionOrder];
+            const [movedSectionId] = newOrder.splice(oldIndex, 1);
+            newOrder.splice(newIndex, 0, movedSectionId);
+            onReorder(newOrder);
+          } else {
+            // Si no hay sectionOrder, crear uno basado en el orden actual de las secciones
+            const currentOrder = sections.map((s) => s.id);
+            const newOrder = [...currentOrder];
+            const [movedSectionId] = newOrder.splice(oldIndex, 1);
+            newOrder.splice(newIndex, 0, movedSectionId);
+            onReorder(newOrder);
+          }
+        }
+      });
+    };
+
+    initSortable();
+
+    return () => {
+      if (sortableRef.current) {
+        sortableRef.current.destroy();
+        sortableRef.current = null;
+      }
+    };
+  }, [sections, sectionOrder, onReorder, disabled]);
+
+  // Ordenar secciones según sectionOrder si está disponible
+  const sortedSections = sectionOrder
+    ? sections.sort((a, b) => {
+        const indexA = sectionOrder.indexOf(a.id);
+        const indexB = sectionOrder.indexOf(b.id);
+        if (indexA === -1 && indexB === -1) return 0;
+        if (indexA === -1) return 1;
+        if (indexB === -1) return -1;
+        return indexA - indexB;
+      })
+    : sections;
+
+  return (
+    <div ref={containerRef}>
+      {sortedSections.map((section, index) => (
+        <div key={section.id} className="draggable-section" id={`section-${section.id}`}>
+          {children(section, index)}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/theme-studio/src/presentation/hooks/useHotReload.ts b/packages/theme-studio/src/presentation/hooks/useHotReload.ts
index 850d410d..be546307 100644
--- a/packages/theme-studio/src/presentation/hooks/useHotReload.ts
+++ b/packages/theme-studio/src/presentation/hooks/useHotReload.ts
@@ -18,6 +18,9 @@ import { useCallback, useEffect, useRef } from 'react';
 import { UpdateSectionSettingUseCase } from '../../application/use-cases/update-section-setting.use-case';
 import { UpdateBlockSettingUseCase } from '../../application/use-cases/update-block-setting.use-case';
 import { UpdateSubBlockSettingUseCase } from '../../application/use-cases/update-sub-block-setting.use-case';
+import { ReorderSectionsUseCase } from '../../application/use-cases/reorder-sections.use-case';
+import { ReorderBlocksUseCase } from '../../application/use-cases/reorder-blocks.use-case';
+import { ReorderSubBlocksUseCase } from '../../application/use-cases/reorder-sub-blocks.use-case';
 import { DevServerAdapter } from '../../infrastructure/adapters/dev-server.adapter';
 import { TemplateManagerAdapter } from '../../infrastructure/adapters/template-manager.adapter';
 import { TemplateRepositoryAdapter } from '../../infrastructure/adapters/template-repository.adapter';
@@ -45,6 +48,9 @@ interface UseHotReloadResult {
     settingId: string,
     value: unknown
   ) => Promise<void>;
+  reorderSections: (oldIndex: number, newIndex: number) => Promise<void>;
+  reorderBlocks: (sectionId: string, oldIndex: number, newIndex: number) => Promise<void>;
+  reorderSubBlocks: (sectionId: string, blockId: string, oldIndex: number, newIndex: number) => Promise<void>;
   isConnected: boolean;
   hasPendingChanges: boolean;
   devServer: DevServerAdapter | null;
@@ -70,6 +76,9 @@ export function useHotReload({
   const updateSectionSettingUseCaseRef = useRef<UpdateSectionSettingUseCase | null>(null);
   const updateBlockSettingUseCaseRef = useRef<UpdateBlockSettingUseCase | null>(null);
   const updateSubBlockSettingUseCaseRef = useRef<UpdateSubBlockSettingUseCase | null>(null);
+  const reorderSectionsUseCaseRef = useRef<ReorderSectionsUseCase | null>(null);
+  const reorderBlocksUseCaseRef = useRef<ReorderBlocksUseCase | null>(null);
+  const reorderSubBlocksUseCaseRef = useRef<ReorderSubBlocksUseCase | null>(null);
   const lastPageIdRef = useRef<string | null>(null);
 
   // Helper para manejar cambios aplicados en el iframe
@@ -131,6 +140,9 @@ export function useHotReload({
         templateManager,
         historyManager
       );
+      reorderSectionsUseCaseRef.current = new ReorderSectionsUseCase(devServer, templateManager, historyManager);
+      reorderBlocksUseCaseRef.current = new ReorderBlocksUseCase(devServer, templateManager, historyManager);
+      reorderSubBlocksUseCaseRef.current = new ReorderSubBlocksUseCase(devServer, templateManager, historyManager);
     }
 
     const devServer = devServerRef.current!;
@@ -208,6 +220,27 @@ export function useHotReload({
     [storeId, executeUseCase]
   );
 
+  const reorderSections = useCallback(
+    async (oldIndex: number, newIndex: number): Promise<void> => {
+      await executeUseCase(reorderSectionsUseCaseRef, { storeId, oldIndex, newIndex });
+    },
+    [storeId, executeUseCase]
+  );
+
+  const reorderBlocks = useCallback(
+    async (sectionId: string, oldIndex: number, newIndex: number): Promise<void> => {
+      await executeUseCase(reorderBlocksUseCaseRef, { storeId, sectionId, oldIndex, newIndex });
+    },
+    [storeId, executeUseCase]
+  );
+
+  const reorderSubBlocks = useCallback(
+    async (sectionId: string, blockId: string, oldIndex: number, newIndex: number): Promise<void> => {
+      await executeUseCase(reorderSubBlocksUseCaseRef, { storeId, sectionId, blockId, oldIndex, newIndex });
+    },
+    [storeId, executeUseCase]
+  );
+
   const isConnected = devServerRef.current?.isConnected() ?? false;
   const hasPendingChanges = templateManagerRef.current?.hasPendingChanges() ?? false;
 
@@ -215,6 +248,9 @@ export function useHotReload({
     updateSectionSetting,
     updateBlockSetting,
     updateSubBlockSetting,
+    reorderSections,
+    reorderBlocks,
+    reorderSubBlocks,
     isConnected,
     hasPendingChanges,
     devServer: devServerRef.current,

From 575d165c9cb29d47212017a6e5ec25b77a3a23ae Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 6 Nov 2025 16:46:45 -0500
Subject: [PATCH 45/49] Enhance featured products section with customizable
 settings and dynamic styles

This commit introduces significant updates to the featured products section, allowing for enhanced customization through new settings such as collection handle, section background color, padding, and various text properties. It also adds dynamic styling capabilities for product cards, including background colors, border settings, and button styles. Additionally, the implementation of conditional rendering for badges and navigation buttons improves the overall user experience, making the section more flexible and visually appealing.
---
 .../theme/sections/featured-products.liquid   | 952 +++++++++++++++++-
 .../fasttify/theme/templates/index.json       |  30 +-
 2 files changed, 934 insertions(+), 48 deletions(-)

diff --git a/packages/example-themes/fasttify/theme/sections/featured-products.liquid b/packages/example-themes/fasttify/theme/sections/featured-products.liquid
index f7da0bed..08a2d5bd 100644
--- a/packages/example-themes/fasttify/theme/sections/featured-products.liquid
+++ b/packages/example-themes/fasttify/theme/sections/featured-products.liquid
@@ -1,10 +1,250 @@
 {{ 'featured-products.css' | asset_url | stylesheet_tag }}
 {{ 'featured-products.js' | asset_url | script_tag }}
 
-<section class="featured-products-section">
+<style>
+  .featured-products-section {
+    {% if section.settings.section_background_color != blank and section.settings.section_background_color != '#000000' and section.settings.section_background_color != '#000' %}
+      background-color: {{ section.settings.section_background_color }};
+    {% endif %}
+    {% if section.settings.section_padding_top != blank %}
+      padding-top: {{ section.settings.section_padding_top }}px;
+    {% endif %}
+    {% if section.settings.section_padding_bottom != blank %}
+      padding-bottom: {{ section.settings.section_padding_bottom }}px;
+    {% endif %}
+  }
+
+  .section-subtitle {
+    {% if section.settings.subtitle_color != blank and section.settings.subtitle_color != '#000000' and section.settings.subtitle_color != '#000' %}
+      color: {{ section.settings.subtitle_color }};
+    {% endif %}
+    {% if section.settings.subtitle_font_size != blank %}
+      font-size: {{ section.settings.subtitle_font_size }}px;
+    {% endif %}
+    {% if section.settings.subtitle_font_weight != blank %}
+      font-weight: {{ section.settings.subtitle_font_weight }};
+    {% endif %}
+  }
+
+  .section-title {
+    {% if section.settings.title_color != blank and section.settings.title_color != '#000000' and section.settings.title_color != '#000' %}
+      color: {{ section.settings.title_color }};
+    {% endif %}
+    {% if section.settings.title_font_size != blank %}
+      font-size: {{ section.settings.title_font_size }}px;
+    {% endif %}
+    {% if section.settings.title_font_weight != blank %}
+      font-weight: {{ section.settings.title_font_weight }};
+    {% endif %}
+  }
+
+  .section-description {
+    {% if section.settings.description_color != blank and section.settings.description_color != '#000000' and section.settings.description_color != '#000' %}
+      color: {{ section.settings.description_color }};
+    {% endif %}
+    {% if section.settings.description_font_size != blank %}
+      font-size: {{ section.settings.description_font_size }}px;
+    {% endif %}
+  }
+
+  .view-all-btn-header {
+    {% if section.settings.view_all_button_bg_color != blank and section.settings.view_all_button_bg_color != '#000000' and section.settings.view_all_button_bg_color != '#000' %}
+      background-color: {{ section.settings.view_all_button_bg_color }};
+    {% endif %}
+    {% if section.settings.view_all_button_text_color != blank and section.settings.view_all_button_text_color != '#000000' and section.settings.view_all_button_text_color != '#000' %}
+      color: {{ section.settings.view_all_button_text_color }};
+    {% endif %}
+    {% if section.settings.view_all_button_border_radius != blank %}
+      border-radius: {{ section.settings.view_all_button_border_radius }}px;
+    {% endif %}
+  }
+
+  {% comment %} Buscar el bloque de configuración de Product Card para aplicar sus estilos {% endcomment %}
+  {% assign product_card_block = null %}
+  {% for block in section.blocks %}
+    {% if block.type == 'product_card' %}
+      {% assign product_card_block = block %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+
+  .product-card {
+    {% if product_card_block %}
+      {% comment %} Siempre aplicar background-color, usar unset si está vacío para revertir {% endcomment %}
+      {% if product_card_block.settings.card_background_color != blank and product_card_block.settings.card_background_color != '#000000' and product_card_block.settings.card_background_color != '#000' %}
+        background-color: {{ product_card_block.settings.card_background_color }};
+      {% else %}
+        background-color: unset;
+      {% endif %}
+
+      {% comment %} Siempre aplicar border-radius, usar unset si está vacío {% endcomment %}
+      {% if product_card_block.settings.card_border_radius != blank %}
+        border-radius: {{ product_card_block.settings.card_border_radius }}px;
+      {% else %}
+        border-radius: unset;
+      {% endif %}
+
+      {% comment %} Siempre aplicar border, usar unset si está vacío {% endcomment %}
+      {% if product_card_block.settings.card_border_width != blank %}
+        border: {{ product_card_block.settings.card_border_width }}px solid {% if product_card_block.settings.card_border_color != blank and product_card_block.settings.card_border_color != '#000000' and product_card_block.settings.card_border_color != '#000' %}{{ product_card_block.settings.card_border_color }}{% else %}transparent{% endif %};
+      {% else %}
+        border: unset;
+      {% endif %}
+
+      {% comment %} Siempre aplicar box-shadow, usar unset si está vacío {% endcomment %}
+      {% if product_card_block.settings.card_shadow != blank %}
+        box-shadow: {{ product_card_block.settings.card_shadow }};
+      {% else %}
+        box-shadow: unset;
+      {% endif %}
+
+      {% comment %} Siempre aplicar padding, usar unset si está vacío {% endcomment %}
+      {% if product_card_block.settings.card_padding != blank %}
+        padding: {{ product_card_block.settings.card_padding }}px;
+      {% else %}
+        padding: unset;
+      {% endif %}
+    {% else %}
+      {% comment %} Fallback a settings de sección si no hay bloque {% endcomment %}
+      {% if section.settings.card_background_color != blank and section.settings.card_background_color != '#000000' and section.settings.card_background_color != '#000' %}
+        background-color: {{ section.settings.card_background_color }};
+      {% else %}
+        background-color: unset;
+      {% endif %}
+      {% if section.settings.card_border_radius != blank %}
+        border-radius: {{ section.settings.card_border_radius }}px;
+      {% else %}
+        border-radius: unset;
+      {% endif %}
+      {% if section.settings.card_border_width != blank %}
+        border: {{ section.settings.card_border_width }}px solid {% if section.settings.card_border_color != blank and section.settings.card_border_color != '#000000' and section.settings.card_border_color != '#000' %}{{ section.settings.card_border_color }}{% else %}transparent{% endif %};
+      {% else %}
+        border: unset;
+      {% endif %}
+      {% if section.settings.card_shadow != blank %}
+        box-shadow: {{ section.settings.card_shadow }};
+      {% else %}
+        box-shadow: unset;
+      {% endif %}
+      {% if section.settings.card_padding != blank %}
+        padding: {{ section.settings.card_padding }}px;
+      {% else %}
+        padding: unset;
+      {% endif %}
+    {% endif %}
+  }
+
+  .product-vendor {
+    {% if section.settings.vendor_color != blank and section.settings.vendor_color != '#000000' and section.settings.vendor_color != '#000' %}
+      color: {{ section.settings.vendor_color }};
+    {% endif %}
+    {% if section.settings.vendor_font_size != blank %}
+      font-size: {{ section.settings.vendor_font_size }}px;
+    {% endif %}
+    {% if section.settings.vendor_font_weight != blank %}
+      font-weight: {{ section.settings.vendor_font_weight }};
+    {% endif %}
+  }
+
+  .product-title {
+    {% if section.settings.product_title_color != blank and section.settings.product_title_color != '#000000' and section.settings.product_title_color != '#000' %}
+      color: {{ section.settings.product_title_color }};
+    {% endif %}
+    {% if section.settings.product_title_font_size != blank %}
+      font-size: {{ section.settings.product_title_font_size }}px;
+    {% endif %}
+    {% if section.settings.product_title_font_weight != blank %}
+      font-weight: {{ section.settings.product_title_font_weight }};
+    {% endif %}
+  }
+
+  .price-current {
+    {% if section.settings.price_color != blank and section.settings.price_color != '#000000' and section.settings.price_color != '#000' %}
+      color: {{ section.settings.price_color }};
+    {% endif %}
+    {% if section.settings.price_font_size != blank %}
+      font-size: {{ section.settings.price_font_size }}px;
+    {% endif %}
+    {% if section.settings.price_font_weight != blank %}
+      font-weight: {{ section.settings.price_font_weight }};
+    {% endif %}
+  }
+
+  .price-compare {
+    {% if section.settings.compare_price_color != blank and section.settings.compare_price_color != '#000000' and section.settings.compare_price_color != '#000' %}
+      color: {{ section.settings.compare_price_color }};
+    {% endif %}
+  }
+
+  .product-badge {
+    {% if section.settings.badge_font_size != blank %}
+      font-size: {{ section.settings.badge_font_size }}px;
+    {% endif %}
+    {% if section.settings.badge_border_radius != blank %}
+      border-radius: {{ section.settings.badge_border_radius }}px;
+    {% endif %}
+  }
+
+  .badge-new {
+    {% if section.settings.badge_new_bg_color != blank and section.settings.badge_new_bg_color != '#000000' and section.settings.badge_new_bg_color != '#000' %}
+      background-color: {{ section.settings.badge_new_bg_color }};
+    {% endif %}
+    {% if section.settings.badge_new_text_color != blank and section.settings.badge_new_text_color != '#000000' and section.settings.badge_new_text_color != '#000' %}
+      color: {{ section.settings.badge_new_text_color }};
+    {% endif %}
+  }
+
+  .badge-sale {
+    {% if section.settings.badge_sale_bg_color != blank and section.settings.badge_sale_bg_color != '#000000' and section.settings.badge_sale_bg_color != '#000' %}
+      background-color: {{ section.settings.badge_sale_bg_color }};
+    {% endif %}
+    {% if section.settings.badge_sale_text_color != blank and section.settings.badge_sale_text_color != '#000000' and section.settings.badge_sale_text_color != '#000' %}
+      color: {{ section.settings.badge_sale_text_color }};
+    {% endif %}
+  }
+
+  .product-btn-primary {
+    {% if section.settings.button_primary_bg_color != blank and section.settings.button_primary_bg_color != '#000000' and section.settings.button_primary_bg_color != '#000' %}
+      background-color: {{ section.settings.button_primary_bg_color }};
+    {% endif %}
+    {% if section.settings.button_primary_text_color != blank and section.settings.button_primary_text_color != '#000000' and section.settings.button_primary_text_color != '#000' %}
+      color: {{ section.settings.button_primary_text_color }};
+    {% endif %}
+    {% if section.settings.button_primary_border_radius != blank %}
+      border-radius: {{ section.settings.button_primary_border_radius }}px;
+    {% endif %}
+  }
+
+  .product-btn-secondary {
+    {% if section.settings.button_secondary_bg_color != blank and section.settings.button_secondary_bg_color != '#000000' and section.settings.button_secondary_bg_color != '#000' %}
+      background-color: {{ section.settings.button_secondary_bg_color }};
+    {% endif %}
+    {% if section.settings.button_secondary_text_color != blank and section.settings.button_secondary_text_color != '#000000' and section.settings.button_secondary_text_color != '#000' %}
+      color: {{ section.settings.button_secondary_text_color }};
+    {% endif %}
+    {% if section.settings.button_secondary_border_radius != blank %}
+      border-radius: {{ section.settings.button_secondary_border_radius }}px;
+    {% endif %}
+  }
+
+  .carousel-nav {
+    {% if section.settings.carousel_nav_bg_color != blank and section.settings.carousel_nav_bg_color != '#000000' and section.settings.carousel_nav_bg_color != '#000' %}
+      background-color: {{ section.settings.carousel_nav_bg_color }};
+    {% endif %}
+    {% if section.settings.carousel_nav_color != blank and section.settings.carousel_nav_color != '#000000' and section.settings.carousel_nav_color != '#000' %}
+      color: {{ section.settings.carousel_nav_color }};
+    {% endif %}
+    {% if section.settings.carousel_nav_border_radius != blank %}
+      border-radius: {{ section.settings.carousel_nav_border_radius }}px;
+    {% endif %}
+  }
+</style>
+
+<section class="featured-products-section" {{ section.fasttify_attributes }}>
   <div class="featured-products-container">
     <!-- Obtener la colección -->
-    {% assign featured_collection = collections['new-products'] %}
+    {% assign collection_handle = section.settings.collection_handle | default: 'new-products' %}
+    {% assign featured_collection = collections[collection_handle] %}
 
     <!-- Header de la sección -->
     <div class="section-header">
@@ -38,17 +278,29 @@
     {% if featured_collection.products.size > 0 %}
       <div class="products-carousel-container">
         <!-- Botón navegación izquierda -->
-        <button class="carousel-nav carousel-nav-prev" aria-label="Producto anterior">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="15,18 9,12 15,6"></polyline>
-          </svg>
-        </button>
+        {% if section.settings.show_carousel_nav %}
+          <button class="carousel-nav carousel-nav-prev" aria-label="Producto anterior">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="15,18 9,12 15,6"></polyline>
+            </svg>
+          </button>
+        {% endif %}
 
         <!-- Carrusel -->
         <div class="products-carousel">
           <div class="products-carousel-track">
-            {% for product in featured_collection.products limit: 8 %}
-              <div class="product-card carousel-slide">
+            {% assign products_limit = section.settings.products_count | default: 8 %}
+            {% comment %} Buscar el bloque de configuración de Product Card {% endcomment %}
+            {% assign product_card_block = null %}
+            {% for block in section.blocks %}
+              {% if block.type == 'product_card' %}
+                {% assign product_card_block = block %}
+                {% break %}
+              {% endif %}
+            {% endfor %}
+
+            {% for product in featured_collection.products limit: products_limit %}
+              <div class="product-card carousel-slide" {% if product_card_block %}{{ product_card_block.fasttify_attributes }}{% endif %}>
             <!-- Imagen del producto -->
             <div class="product-image-wrapper">
               <a href="{{ product.url }}" class="product-link">
@@ -101,28 +353,41 @@
               </a>
 
               <!-- Product Badges -->
-              <div class="product-badges">
-                {% comment %} Determinar qué badge mostrar basado en las tags del producto {% endcomment %}
-                {% if product.tags contains 'new' or product.createdAt > 'now' | date: '%s' | minus: 2592000 %}
-                  <span class="product-badge badge-new">NEW</span>
-                {% elsif product.tags contains 'bestseller' %}
-                  <span class="product-badge badge-bestseller">BESTSELLER</span>
-                {% elsif product.tags contains 'trending' %}
-                  <span class="product-badge badge-trending">TRENDING</span>
-                {% endif %}
+              {% if section.settings.show_badges %}
+                <div class="product-badges">
+                  {% comment %} Determinar qué badge mostrar basado en las tags del producto {% endcomment %}
+                  {% if section.settings.show_new_badge %}
+                    {% if product.tags contains 'new' or product.createdAt > 'now' | date: '%s' | minus: 2592000 %}
+                      <span class="product-badge badge-new">{{ section.settings.new_badge_text | default: 'NEW' }}</span>
+                    {% endif %}
+                  {% endif %}
 
-                {% if product.compare_at_price > product.price %}
-                  <span class="product-badge badge-sale">
-                    SAVE {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round }}%
-                  </span>
-                {% endif %}
-              </div>
+                  {% if section.settings.show_bestseller_badge and product.tags contains 'bestseller' %}
+                    <span class="product-badge badge-bestseller">{{ section.settings.bestseller_badge_text | default: 'BESTSELLER' }}</span>
+                  {% endif %}
+
+                  {% if section.settings.show_trending_badge and product.tags contains 'trending' %}
+                    <span class="product-badge badge-trending">{{ section.settings.trending_badge_text | default: 'TRENDING' }}</span>
+                  {% endif %}
+
+                  {% if section.settings.show_sale_badge and product.compare_at_price > product.price %}
+                    {% assign discount_percent = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round %}
+                    <span class="product-badge badge-sale">
+                      {% if section.settings.sale_badge_text != blank %}
+                        {{ section.settings.sale_badge_text | replace: '%', discount_percent }}
+                      {% else %}
+                        SAVE {{ discount_percent }}%
+                      {% endif %}
+                    </span>
+                  {% endif %}
+                </div>
+              {% endif %}
 
               <!-- Overlay con botón (solo aparece en hover) -->
               <div class="product-overlay">
                 <div class="product-overlay-content">
                   <a href="{{ product.url }}" class="product-btn product-btn-primary">
-                    <span>VER PRODUCTO</span>
+                    <span>{{ section.settings.button_primary_text | default: 'VER PRODUCTO' }}</span>
                   </a>
 
                   {% if section.settings.show_add_to_cart %}
@@ -131,7 +396,7 @@
                       data-product-id="{{ product.id }}"
                       onclick="addProductToCart('{{ product.id }}', 1)"
                       aria-label="Añadir al carrito">
-                      <span>AÑADIR AL CARRITO</span>
+                      <span>{{ section.settings.button_secondary_text | default: 'AÑADIR AL CARRITO' }}</span>
                     </button>
                   {% endif %}
                 </div>
@@ -157,11 +422,13 @@
         </div>
 
         <!-- Botón navegación derecha -->
-        <button class="carousel-nav carousel-nav-next" aria-label="Producto siguiente">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="9,18 15,12 9,6"></polyline>
-          </svg>
-        </button>
+        {% if section.settings.show_carousel_nav %}
+          <button class="carousel-nav carousel-nav-next" aria-label="Producto siguiente">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="9,18 15,12 9,6"></polyline>
+            </svg>
+          </button>
+        {% endif %}
       </div>
 
 
@@ -173,7 +440,20 @@
     {% endif %}
   </div>
 
-  {% render 'banner-marquee', background: '#000000', text_color: '#ffffff', font_size: 40, font_weight: '700', text_transform: 'uppercase', speed: 20, padding: 15, margin_top: 50, text_1: 'NUEVA COLECCIÓN', text_2: 'ENVÍO GRATIS', text_3: 'CALIDAD PREMIUM' %}
+  {% if section.settings.show_marquee %}
+    {% render 'banner-marquee',
+      background: section.settings.marquee_background | default: '#000000',
+      text_color: section.settings.marquee_text_color | default: '#ffffff',
+      font_size: section.settings.marquee_font_size | default: 40,
+      font_weight: section.settings.marquee_font_weight | default: '700',
+      text_transform: section.settings.marquee_text_transform | default: 'uppercase',
+      speed: section.settings.marquee_speed | default: 20,
+      padding: section.settings.marquee_padding | default: 15,
+      margin_top: section.settings.marquee_margin_top | default: 50,
+      text_1: section.settings.marquee_text_1 | default: 'NUEVA COLECCIÓN',
+      text_2: section.settings.marquee_text_2 | default: 'ENVÍO GRATIS',
+      text_3: section.settings.marquee_text_3 | default: 'CALIDAD PREMIUM' %}
+  {% endif %}
 </section>
 
 
@@ -181,10 +461,44 @@
   {
     "name": "Productos Destacados",
     "settings": [
+      {
+        "type": "header",
+        "content": "Colección"
+      },
+      {
+        "type": "text",
+        "id": "collection_handle",
+        "label": "Handle de la colección",
+        "default": "new-products",
+        "info": "El handle de la colección a mostrar (ej: new-products)"
+      },
       {
         "type": "header",
         "content": "Configuración de la sección"
       },
+      {
+        "type": "color",
+        "id": "section_background_color",
+        "label": "Color de fondo de la sección"
+      },
+      {
+        "type": "range",
+        "id": "section_padding_top",
+        "min": 0,
+        "max": 200,
+        "step": 10,
+        "label": "Padding superior (px)",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "section_padding_bottom",
+        "min": 0,
+        "max": 200,
+        "step": 10,
+        "label": "Padding inferior (px)",
+        "default": 0
+      },
       {
         "type": "text",
         "id": "section_subtitle",
@@ -192,6 +506,33 @@
         "default": "NUEVA COLECCIÓN",
         "info": "Texto pequeño que aparece sobre el título principal"
       },
+      {
+        "type": "color",
+        "id": "subtitle_color",
+        "label": "Color del subtítulo"
+      },
+      {
+        "type": "range",
+        "id": "subtitle_font_size",
+        "min": 10,
+        "max": 30,
+        "step": 1,
+        "label": "Tamaño de fuente del subtítulo (px)",
+        "default": 14
+      },
+      {
+        "type": "select",
+        "id": "subtitle_font_weight",
+        "label": "Peso de fuente del subtítulo",
+        "options": [
+          { "value": "300", "label": "Light" },
+          { "value": "400", "label": "Regular" },
+          { "value": "500", "label": "Medium" },
+          { "value": "600", "label": "Semibold" },
+          { "value": "700", "label": "Bold" }
+        ],
+        "default": "400"
+      },
       {
         "type": "text",
         "id": "section_title",
@@ -199,6 +540,33 @@
         "default": "NUEVOS PRODUCTOS",
         "info": "Título principal de la sección"
       },
+      {
+        "type": "color",
+        "id": "title_color",
+        "label": "Color del título"
+      },
+      {
+        "type": "range",
+        "id": "title_font_size",
+        "min": 20,
+        "max": 80,
+        "step": 2,
+        "label": "Tamaño de fuente del título (px)",
+        "default": 40
+      },
+      {
+        "type": "select",
+        "id": "title_font_weight",
+        "label": "Peso de fuente del título",
+        "options": [
+          { "value": "300", "label": "Light" },
+          { "value": "400", "label": "Regular" },
+          { "value": "500", "label": "Medium" },
+          { "value": "600", "label": "Semibold" },
+          { "value": "700", "label": "Bold" }
+        ],
+        "default": "700"
+      },
       {
         "type": "textarea",
         "id": "section_description",
@@ -206,6 +574,55 @@
         "default": "Descubre nuestros últimos diseños y tendencias de moda",
         "info": "Descripción que aparece debajo del título"
       },
+      {
+        "type": "color",
+        "id": "description_color",
+        "label": "Color de la descripción"
+      },
+      {
+        "type": "range",
+        "id": "description_font_size",
+        "min": 12,
+        "max": 24,
+        "step": 1,
+        "label": "Tamaño de fuente de la descripción (px)",
+        "default": 16
+      },
+      {
+        "type": "header",
+        "content": "Botón ver todos"
+      },
+      {
+        "type": "checkbox",
+        "id": "show_view_all_button",
+        "label": "Mostrar botón 'Ver todos'",
+        "default": true
+      },
+      {
+        "type": "text",
+        "id": "view_all_text",
+        "label": "Texto del botón 'Ver todos'",
+        "default": "VER TODA LA COLECCIÓN"
+      },
+      {
+        "type": "color",
+        "id": "view_all_button_bg_color",
+        "label": "Color de fondo del botón 'Ver todos'"
+      },
+      {
+        "type": "color",
+        "id": "view_all_button_text_color",
+        "label": "Color de texto del botón 'Ver todos'"
+      },
+      {
+        "type": "range",
+        "id": "view_all_button_border_radius",
+        "min": 0,
+        "max": 50,
+        "step": 2,
+        "label": "Radio de borde del botón 'Ver todos' (px)",
+        "default": 0
+      },
       {
         "type": "header",
         "content": "Configuración de productos"
@@ -213,50 +630,491 @@
       {
         "type": "range",
         "id": "products_count",
-        "min": 4,
+        "min": 1,
         "max": 12,
         "step": 2,
         "label": "Número de productos a mostrar",
         "default": 8
       },
+      {
+        "type": "header",
+        "content": "Card del producto"
+      },
+      {
+        "type": "color",
+        "id": "card_background_color",
+        "label": "Color de fondo de la card"
+      },
+      {
+        "type": "range",
+        "id": "card_border_radius",
+        "min": 0,
+        "max": 50,
+        "step": 2,
+        "label": "Radio de borde de la card (px)",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "card_border_width",
+        "min": 0,
+        "max": 10,
+        "step": 1,
+        "label": "Ancho del borde de la card (px)",
+        "default": 0
+      },
+      {
+        "type": "color",
+        "id": "card_border_color",
+        "label": "Color del borde de la card"
+      },
+      {
+        "type": "text",
+        "id": "card_shadow",
+        "label": "Sombra de la card",
+        "info": "Ejemplo: 0 2px 8px rgba(0,0,0,0.1)",
+        "default": ""
+      },
+      {
+        "type": "range",
+        "id": "card_padding",
+        "min": 0,
+        "max": 40,
+        "step": 2,
+        "label": "Padding de la card (px)",
+        "default": 0
+      },
+      {
+        "type": "header",
+        "content": "Información del producto"
+      },
+      {
+        "type": "color",
+        "id": "vendor_color",
+        "label": "Color del vendor"
+      },
+      {
+        "type": "range",
+        "id": "vendor_font_size",
+        "min": 10,
+        "max": 20,
+        "step": 1,
+        "label": "Tamaño de fuente del vendor (px)",
+        "default": 12
+      },
+      {
+        "type": "select",
+        "id": "vendor_font_weight",
+        "label": "Peso de fuente del vendor",
+        "options": [
+          { "value": "300", "label": "Light" },
+          { "value": "400", "label": "Regular" },
+          { "value": "500", "label": "Medium" },
+          { "value": "600", "label": "Semibold" },
+          { "value": "700", "label": "Bold" }
+        ],
+        "default": "400"
+      },
+      {
+        "type": "color",
+        "id": "product_title_color",
+        "label": "Color del título del producto"
+      },
+      {
+        "type": "range",
+        "id": "product_title_font_size",
+        "min": 14,
+        "max": 32,
+        "step": 1,
+        "label": "Tamaño de fuente del título del producto (px)",
+        "default": 18
+      },
+      {
+        "type": "select",
+        "id": "product_title_font_weight",
+        "label": "Peso de fuente del título del producto",
+        "options": [
+          { "value": "300", "label": "Light" },
+          { "value": "400", "label": "Regular" },
+          { "value": "500", "label": "Medium" },
+          { "value": "600", "label": "Semibold" },
+          { "value": "700", "label": "Bold" }
+        ],
+        "default": "400"
+      },
+      {
+        "type": "color",
+        "id": "price_color",
+        "label": "Color del precio"
+      },
+      {
+        "type": "range",
+        "id": "price_font_size",
+        "min": 14,
+        "max": 32,
+        "step": 1,
+        "label": "Tamaño de fuente del precio (px)",
+        "default": 18
+      },
+      {
+        "type": "select",
+        "id": "price_font_weight",
+        "label": "Peso de fuente del precio",
+        "options": [
+          { "value": "300", "label": "Light" },
+          { "value": "400", "label": "Regular" },
+          { "value": "500", "label": "Medium" },
+          { "value": "600", "label": "Semibold" },
+          { "value": "700", "label": "Bold" }
+        ],
+        "default": "600"
+      },
+      {
+        "type": "color",
+        "id": "compare_price_color",
+        "label": "Color del precio comparado (tachado)"
+      },
+      {
+        "type": "header",
+        "content": "Badges"
+      },
+      {
+        "type": "checkbox",
+        "id": "show_badges",
+        "label": "Mostrar badges",
+        "default": true
+      },
+      {
+        "type": "checkbox",
+        "id": "show_new_badge",
+        "label": "Mostrar badge 'NEW'",
+        "default": true
+      },
+      {
+        "type": "text",
+        "id": "new_badge_text",
+        "label": "Texto del badge 'NEW'",
+        "default": "NEW"
+      },
+      {
+        "type": "color",
+        "id": "badge_new_bg_color",
+        "label": "Color de fondo del badge 'NEW'"
+      },
+      {
+        "type": "color",
+        "id": "badge_new_text_color",
+        "label": "Color de texto del badge 'NEW'"
+      },
+      {
+        "type": "checkbox",
+        "id": "show_bestseller_badge",
+        "label": "Mostrar badge 'BESTSELLER'",
+        "default": true
+      },
+      {
+        "type": "text",
+        "id": "bestseller_badge_text",
+        "label": "Texto del badge 'BESTSELLER'",
+        "default": "BESTSELLER"
+      },
+      {
+        "type": "checkbox",
+        "id": "show_trending_badge",
+        "label": "Mostrar badge 'TRENDING'",
+        "default": true
+      },
+      {
+        "type": "text",
+        "id": "trending_badge_text",
+        "label": "Texto del badge 'TRENDING'",
+        "default": "TRENDING"
+      },
+      {
+        "type": "checkbox",
+        "id": "show_sale_badge",
+        "label": "Mostrar badge de descuento",
+        "default": true
+      },
+      {
+        "type": "text",
+        "id": "sale_badge_text",
+        "label": "Texto del badge de descuento",
+        "info": "Usa % para el porcentaje (ej: -% OFF)",
+        "default": ""
+      },
+      {
+        "type": "color",
+        "id": "badge_sale_bg_color",
+        "label": "Color de fondo del badge de descuento"
+      },
+      {
+        "type": "color",
+        "id": "badge_sale_text_color",
+        "label": "Color de texto del badge de descuento"
+      },
+      {
+        "type": "range",
+        "id": "badge_font_size",
+        "min": 8,
+        "max": 16,
+        "step": 1,
+        "label": "Tamaño de fuente de los badges (px)",
+        "default": 10
+      },
+      {
+        "type": "range",
+        "id": "badge_border_radius",
+        "min": 0,
+        "max": 20,
+        "step": 1,
+        "label": "Radio de borde de los badges (px)",
+        "default": 0
+      },
+      {
+        "type": "header",
+        "content": "Botones del producto"
+      },
       {
         "type": "checkbox",
         "id": "show_add_to_cart",
         "label": "Mostrar botón 'Añadir al carrito'",
         "default": true
       },
+      {
+        "type": "text",
+        "id": "button_primary_text",
+        "label": "Texto del botón principal",
+        "default": "VER PRODUCTO"
+      },
+      {
+        "type": "color",
+        "id": "button_primary_bg_color",
+        "label": "Color de fondo del botón principal"
+      },
+      {
+        "type": "color",
+        "id": "button_primary_text_color",
+        "label": "Color de texto del botón principal"
+      },
+      {
+        "type": "range",
+        "id": "button_primary_border_radius",
+        "min": 0,
+        "max": 50,
+        "step": 2,
+        "label": "Radio de borde del botón principal (px)",
+        "default": 0
+      },
+      {
+        "type": "text",
+        "id": "button_secondary_text",
+        "label": "Texto del botón secundario",
+        "default": "AÑADIR AL CARRITO"
+      },
+      {
+        "type": "color",
+        "id": "button_secondary_bg_color",
+        "label": "Color de fondo del botón secundario"
+      },
+      {
+        "type": "color",
+        "id": "button_secondary_text_color",
+        "label": "Color de texto del botón secundario"
+      },
+      {
+        "type": "range",
+        "id": "button_secondary_border_radius",
+        "min": 0,
+        "max": 50,
+        "step": 2,
+        "label": "Radio de borde del botón secundario (px)",
+        "default": 0
+      },
       {
         "type": "header",
-        "content": "Botón ver todos"
+        "content": "Carrusel"
       },
       {
         "type": "checkbox",
-        "id": "show_view_all_button",
-        "label": "Mostrar botón 'Ver todos'",
+        "id": "show_carousel_nav",
+        "label": "Mostrar navegación del carrusel",
         "default": true
       },
+      {
+        "type": "color",
+        "id": "carousel_nav_bg_color",
+        "label": "Color de fondo de los botones de navegación"
+      },
+      {
+        "type": "color",
+        "id": "carousel_nav_color",
+        "label": "Color de los iconos de navegación"
+      },
+      {
+        "type": "range",
+        "id": "carousel_nav_border_radius",
+        "min": 0,
+        "max": 50,
+        "step": 2,
+        "label": "Radio de borde de los botones de navegación (px)",
+        "default": 50
+      },
+      {
+        "type": "header",
+        "content": "Banner Marquee"
+      },
+      {
+        "type": "checkbox",
+        "id": "show_marquee",
+        "label": "Mostrar banner marquee",
+        "default": true
+      },
+      {
+        "type": "color",
+        "id": "marquee_background",
+        "label": "Color de fondo del marquee",
+        "default": "#000000"
+      },
+      {
+        "type": "color",
+        "id": "marquee_text_color",
+        "label": "Color de texto del marquee",
+        "default": "#ffffff"
+      },
+      {
+        "type": "range",
+        "id": "marquee_font_size",
+        "min": 20,
+        "max": 80,
+        "step": 2,
+        "label": "Tamaño de fuente del marquee (px)",
+        "default": 40
+      },
+      {
+        "type": "select",
+        "id": "marquee_font_weight",
+        "label": "Peso de fuente del marquee",
+        "options": [
+          { "value": "300", "label": "Light" },
+          { "value": "400", "label": "Regular" },
+          { "value": "500", "label": "Medium" },
+          { "value": "600", "label": "Semibold" },
+          { "value": "700", "label": "Bold" }
+        ],
+        "default": "700"
+      },
+      {
+        "type": "select",
+        "id": "marquee_text_transform",
+        "label": "Transformación de texto del marquee",
+        "options": [
+          { "value": "none", "label": "Ninguna" },
+          { "value": "uppercase", "label": "Mayúsculas" },
+          { "value": "lowercase", "label": "Minúsculas" },
+          { "value": "capitalize", "label": "Capitalizar" }
+        ],
+        "default": "uppercase"
+      },
+      {
+        "type": "range",
+        "id": "marquee_speed",
+        "min": 5,
+        "max": 50,
+        "step": 5,
+        "label": "Velocidad del marquee",
+        "default": 20
+      },
+      {
+        "type": "range",
+        "id": "marquee_padding",
+        "min": 5,
+        "max": 50,
+        "step": 5,
+        "label": "Padding del marquee (px)",
+        "default": 15
+      },
+      {
+        "type": "range",
+        "id": "marquee_margin_top",
+        "min": 0,
+        "max": 100,
+        "step": 10,
+        "label": "Margen superior del marquee (px)",
+        "default": 50
+      },
       {
         "type": "text",
-        "id": "view_all_text",
-        "label": "Texto del botón 'Ver todos'",
-        "default": "VER TODA LA COLECCIÓN"
+        "id": "marquee_text_1",
+        "label": "Texto 1 del marquee",
+        "default": "NUEVA COLECCIÓN"
+      },
+      {
+        "type": "text",
+        "id": "marquee_text_2",
+        "label": "Texto 2 del marquee",
+        "default": "ENVÍO GRATIS"
+      },
+      {
+        "type": "text",
+        "id": "marquee_text_3",
+        "label": "Texto 3 del marquee",
+        "default": "CALIDAD PREMIUM"
       }
     ],
     "blocks": [
       {
-        "type": "featured_product",
-        "name": "Featured Product",
+        "type": "product_card",
+        "name": "Product Card",
+        "limit": 1,
         "settings": [
+          {
+            "type": "header",
+            "content": "Configuración de la Card"
+          },
+          {
+            "type": "color",
+            "id": "card_background_color",
+            "label": "Color de fondo de la card"
+          },
+          {
+            "type": "range",
+            "id": "card_border_radius",
+            "min": 0,
+            "max": 50,
+            "step": 2,
+            "label": "Radio de borde de la card (px)",
+            "default": 0
+          },
+          {
+            "type": "range",
+            "id": "card_border_width",
+            "min": 0,
+            "max": 10,
+            "step": 1,
+            "label": "Ancho del borde de la card (px)",
+            "default": 0
+          },
+          {
+            "type": "color",
+            "id": "card_border_color",
+            "label": "Color del borde de la card"
+          },
           {
             "type": "text",
-            "id": "label",
-            "label": "Label",
-            "default": "Featured Product"
+            "id": "card_shadow",
+            "label": "Sombra de la card",
+            "info": "Ejemplo: 0 2px 8px rgba(0,0,0,0.1)",
+            "default": ""
           },
           {
-            "type": "url",
-            "id": "link",
-            "label": "Link"
+            "type": "range",
+            "id": "card_padding",
+            "min": 0,
+            "max": 40,
+            "step": 2,
+            "label": "Padding de la card (px)",
+            "default": 0
           }
         ]
       }
diff --git a/packages/example-themes/fasttify/theme/templates/index.json b/packages/example-themes/fasttify/theme/templates/index.json
index 1c0075e5..60dff9dc 100644
--- a/packages/example-themes/fasttify/theme/templates/index.json
+++ b/packages/example-themes/fasttify/theme/templates/index.json
@@ -26,7 +26,35 @@
     },
     "featured-products": {
       "type": "sections/featured-products",
-      "settings": {}
+      "settings": {
+        "collection_handle": "new-products",
+        "section_subtitle": "NUEVA COLECCIÓN",
+        "section_title": "NUEVOS PRODUCTOS",
+        "section_description": "Descubre nuestros últimos diseños y tendencias de moda",
+        "products_count": 8,
+        "show_add_to_cart": true,
+        "show_view_all_button": true,
+        "view_all_text": "VER TODA LA COLECCIÓN",
+        "show_badges": true,
+        "show_new_badge": true,
+        "show_bestseller_badge": true,
+        "show_trending_badge": true,
+        "show_sale_badge": true,
+        "show_carousel_nav": true,
+        "show_marquee": true,
+        "marquee_background": "#000000",
+        "marquee_text_color": "#ffffff",
+        "button_primary_text": "VER PRODUCTO",
+        "button_secondary_text": "AÑADIR AL CARRITO"
+      },
+      "blocks": [
+        {
+          "id": "product-card-1",
+          "type": "product_card",
+          "name": "Product Card",
+          "settings": {}
+        }
+      ]
     },
     "home-collections": {
       "type": "sections/home-collections",

From 33c10803dd571881d778520a7e8f8cb14253e1fe Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 6 Nov 2025 17:43:58 -0500
Subject: [PATCH 46/49] Implement S3 integration for template saving and backup
 in TemplateLoaderAdapter

This commit enhances the TemplateLoaderAdapter by adding functionality to save templates to an S3 bucket. It includes a mechanism for creating backups of existing templates before overwriting them, ensuring data integrity. The implementation utilizes the AWS SDK for JavaScript, allowing for efficient storage and retrieval of template data. Additionally, error handling is improved to log issues during the backup process without interrupting the save operation.
---
 .../themes/templates/[templateType]/route.ts  |  60 ++++++++++
 .../use-cases/save-template.use-case.ts       |  62 ++++++++++
 .../adapters/template-loader.adapter.ts       |  94 +++++++++++++++-
 .../controllers/save-template-controller.ts   | 106 ++++++++++++++++++
 4 files changed, 318 insertions(+), 4 deletions(-)
 create mode 100644 app/api/stores/[storeId]/themes/templates/[templateType]/route.ts
 create mode 100644 app/api/stores/_lib/dev-server/application/use-cases/save-template.use-case.ts
 create mode 100644 app/api/stores/_lib/themes/controllers/save-template-controller.ts

diff --git a/app/api/stores/[storeId]/themes/templates/[templateType]/route.ts b/app/api/stores/[storeId]/themes/templates/[templateType]/route.ts
new file mode 100644
index 00000000..d5b2a61d
--- /dev/null
+++ b/app/api/stores/[storeId]/themes/templates/[templateType]/route.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { saveTemplate } from '@/api/stores/_lib/themes/controllers/save-template-controller';
+import { NextRequest, NextResponse } from 'next/server';
+import type { TemplateType } from '@fasttify/theme-studio';
+
+interface RouteParams {
+  storeId: string;
+  templateType: string;
+}
+
+interface RequestWithParams extends NextRequest {
+  params?: RouteParams;
+}
+
+/**
+ * PUT /api/stores/[storeId]/themes/templates/[templateType]
+ * Guarda un template específico en S3
+ */
+export const PUT = withAuthHandler(
+  async (request: NextRequest, { storeId }) => {
+    // Los params ya están inyectados en el request por withAuthHandler
+    const requestWithParams = request as RequestWithParams;
+    const params = requestWithParams.params;
+
+    if (!params || !params.templateType) {
+      const corsHeaders = await getNextCorsHeaders(request);
+      return NextResponse.json({ error: 'Missing templateType parameter' }, { status: 400, headers: corsHeaders });
+    }
+
+    const templateType = params.templateType as TemplateType;
+    return saveTemplate(request, storeId, templateType);
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);
+
+export async function OPTIONS(request: NextRequest) {
+  const corsHeaders = await getNextCorsHeaders(request);
+  return new Response(null, { status: 204, headers: corsHeaders });
+}
diff --git a/app/api/stores/_lib/dev-server/application/use-cases/save-template.use-case.ts b/app/api/stores/_lib/dev-server/application/use-cases/save-template.use-case.ts
new file mode 100644
index 00000000..d5015f10
--- /dev/null
+++ b/app/api/stores/_lib/dev-server/application/use-cases/save-template.use-case.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ITemplateLoader } from '../../domain/ports/template-loader.port';
+import type { TemplateType, Template } from '@fasttify/theme-studio';
+
+/**
+ * Caso de uso: Guardar template
+ * Orquesta la lógica de negocio para guardar un template en el almacenamiento
+ */
+export class SaveTemplateUseCase {
+  constructor(private readonly templateLoader: ITemplateLoader) {}
+
+  async execute(storeId: string, templateType: TemplateType, template: Template): Promise<void> {
+    // 1. Validar estructura del template
+    this.validateTemplate(template);
+
+    // 2. Guardar el nuevo template (el backup se crea automáticamente en el adapter)
+    await this.templateLoader.saveTemplate(storeId, templateType, template);
+  }
+
+  /**
+   * Valida la estructura del template antes de guardar
+   */
+  private validateTemplate(template: Template): void {
+    if (!template) {
+      throw new Error('Template is required');
+    }
+
+    if (!template.type) {
+      throw new Error('Template type is required');
+    }
+
+    if (!template.sections || typeof template.sections !== 'object') {
+      throw new Error('Template sections must be an object');
+    }
+
+    if (!Array.isArray(template.order)) {
+      throw new Error('Template order must be an array');
+    }
+
+    // Validar que todas las secciones en order existan en sections
+    for (const sectionId of template.order) {
+      if (!template.sections[sectionId]) {
+        throw new Error(`Section ${sectionId} in order does not exist in sections`);
+      }
+    }
+  }
+}
diff --git a/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter.ts b/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter.ts
index 85780462..011d66e5 100644
--- a/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter.ts
+++ b/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter.ts
@@ -17,6 +17,8 @@
 import { templateLoader } from '@/liquid-forge/services/templates/template-loader';
 import type { ITemplateLoader } from '../../domain/ports/template-loader.port';
 import type { Template, TemplateType } from '@fasttify/theme-studio';
+import { S3Client, CopyObjectCommand } from '@aws-sdk/client-s3';
+import { Upload } from '@aws-sdk/lib-storage';
 
 const TEMPLATE_PATHS: Record<string, string> = {
   index: 'templates/index.json',
@@ -40,6 +42,16 @@ function getTemplatePath(templateType: TemplateType): string {
  * Implementación concreta para cargar templates desde S3 usando templateLoader de liquid-forge
  */
 export class TemplateLoaderAdapter implements ITemplateLoader {
+  private s3Client: S3Client;
+  private bucketName: string;
+
+  constructor() {
+    this.bucketName = process.env.BUCKET_NAME || '';
+    this.s3Client = new S3Client({
+      region: process.env.REGION_BUCKET,
+    });
+  }
+
   async loadTemplate(storeId: string, templateType: TemplateType): Promise<Template> {
     const templatePath = getTemplatePath(templateType);
     const templateContent = await templateLoader.loadTemplate(storeId, templatePath);
@@ -52,9 +64,83 @@ export class TemplateLoaderAdapter implements ITemplateLoader {
     };
   }
 
-  async saveTemplate(_storeId: string, _templateType: TemplateType, _template: Template): Promise<void> {
-    // TODO: Implementar guardado en S3
-    // Por ahora solo en memoria durante la sesión
-    throw new Error('Save template not implemented yet');
+  async saveTemplate(storeId: string, templateType: TemplateType, template: Template): Promise<void> {
+    if (!this.bucketName) {
+      throw new Error('S3 bucket not configured');
+    }
+
+    const templatePath = getTemplatePath(templateType);
+    const s3Key = `templates/${storeId}/${templatePath}`;
+
+    // 1. Crear backup del template actual antes de sobrescribir
+    try {
+      const currentTemplate = await this.loadTemplate(storeId, templateType);
+      await this.createBackup(storeId, templateType, currentTemplate);
+    } catch (error) {
+      // Si no existe el template actual, no hay problema, continuar
+      // Si hay otro error, loguearlo pero continuar
+      console.warn(`Could not create backup for template ${templateType}:`, error);
+    }
+
+    // 2. Serializar template a JSON
+    const templateJson = JSON.stringify(
+      {
+        sections: template.sections,
+        order: template.order,
+      },
+      null,
+      2
+    );
+
+    // 3. Guardar template en S3
+    const upload = new Upload({
+      client: this.s3Client,
+      params: {
+        Bucket: this.bucketName,
+        Key: s3Key,
+        Body: templateJson,
+        ContentType: 'application/json',
+        Metadata: {
+          storeId,
+          templateType,
+          savedAt: new Date().toISOString(),
+        },
+      },
+    });
+
+    await upload.done();
+
+    // 4. Invalidar caché del template
+    templateLoader.invalidateTemplateCache(storeId, templatePath);
+  }
+
+  /**
+   * Crea un backup del template actual antes de sobrescribir
+   */
+  private async createBackup(storeId: string, templateType: TemplateType, _template: Template): Promise<void> {
+    const templatePath = getTemplatePath(templateType);
+    const sourceKey = `templates/${storeId}/${templatePath}`;
+    const timestamp = Date.now();
+    const backupKey = `backups/${storeId}/templates/${templateType}-${timestamp}.json`;
+
+    try {
+      // Copiar el template actual a la ubicación de backup
+      const copyCommand = new CopyObjectCommand({
+        Bucket: this.bucketName,
+        CopySource: `${this.bucketName}/${sourceKey}`,
+        Key: backupKey,
+        Metadata: {
+          storeId,
+          templateType,
+          backedUpAt: new Date().toISOString(),
+        },
+        MetadataDirective: 'REPLACE',
+      });
+
+      await this.s3Client.send(copyCommand);
+    } catch (error) {
+      // Si falla el backup, loguear pero no fallar el guardado
+      console.warn(`Failed to create backup for template ${templateType}:`, error);
+    }
   }
 }
diff --git a/app/api/stores/_lib/themes/controllers/save-template-controller.ts b/app/api/stores/_lib/themes/controllers/save-template-controller.ts
new file mode 100644
index 00000000..0cba9113
--- /dev/null
+++ b/app/api/stores/_lib/themes/controllers/save-template-controller.ts
@@ -0,0 +1,106 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { logger } from '@/liquid-forge';
+import { SaveTemplateUseCase } from '@/api/stores/_lib/dev-server/application/use-cases/save-template.use-case';
+import { TemplateLoaderAdapter } from '@/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter';
+import type { TemplateType, Template } from '@fasttify/theme-studio';
+
+interface SaveTemplateRequest {
+  sections: Record<string, any>;
+  order: string[];
+}
+
+/**
+ * Controller: Guardar template
+ * Maneja la petición HTTP para guardar un template
+ */
+export async function saveTemplate(
+  request: NextRequest,
+  storeId: string,
+  templateType: TemplateType
+): Promise<NextResponse> {
+  const corsHeaders = await getNextCorsHeaders(request);
+
+  try {
+    // 1. Parsear request body
+    const body: SaveTemplateRequest = await request.json();
+    const { sections, order } = body;
+
+    if (!sections || typeof sections !== 'object') {
+      return NextResponse.json(
+        { error: 'Invalid request: sections must be an object' },
+        { status: 400, headers: corsHeaders }
+      );
+    }
+
+    if (!Array.isArray(order)) {
+      return NextResponse.json(
+        { error: 'Invalid request: order must be an array' },
+        { status: 400, headers: corsHeaders }
+      );
+    }
+
+    // 2. Construir template object
+    const template: Template = {
+      type: templateType,
+      sections,
+      order,
+    };
+
+    // 3. Inicializar use case
+    const templateLoader = new TemplateLoaderAdapter();
+    const saveTemplateUseCase = new SaveTemplateUseCase(templateLoader);
+
+    // 4. Ejecutar caso de uso
+    await saveTemplateUseCase.execute(storeId, templateType, template);
+
+    // 5. Retornar respuesta exitosa
+    return NextResponse.json(
+      {
+        success: true,
+        message: 'Template saved successfully',
+      },
+      { status: 200, headers: corsHeaders }
+    );
+  } catch (error: unknown) {
+    logger.error('Error saving template', error, 'SaveTemplateController');
+
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+
+    // Manejar errores de validación
+    if (error instanceof Error && (error.message.includes('required') || error.message.includes('must be'))) {
+      return NextResponse.json(
+        {
+          error: 'Validation error',
+          message: errorMessage,
+        },
+        { status: 400, headers: corsHeaders }
+      );
+    }
+
+    // Manejar otros errores
+    return NextResponse.json(
+      {
+        error: 'Failed to save template',
+        message: errorMessage,
+      },
+      { status: 500, headers: corsHeaders }
+    );
+  }
+}

From 2c914341ce37e922a0e097755f1a9df5e1c59546 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 6 Nov 2025 17:50:31 -0500
Subject: [PATCH 47/49] Update ecommerce filters tests to handle full URLs for
 image optimization

This commit modifies the test cases for the img_url filter in the ecommerce filters to use full URLs instead of relative paths. The changes ensure that the expected results reflect the correct handling of full image URLs, enhancing the accuracy of the tests for image optimization scenarios.
---
 .../liquid-filters/ecommerce-filters.test.ts  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/test/unit/liquid-filters/ecommerce-filters.test.ts b/test/unit/liquid-filters/ecommerce-filters.test.ts
index ce6c403e..0c45f1fb 100644
--- a/test/unit/liquid-filters/ecommerce-filters.test.ts
+++ b/test/unit/liquid-filters/ecommerce-filters.test.ts
@@ -13,34 +13,34 @@ describe('Ecommerce Filters - Image Optimization', () => {
 
   describe('img_url filter', () => {
     it('should handle legacy size parameter', async () => {
-      const template = `{{ 'image.jpg' | img_url: '600x800' }}`;
+      const template = `{{ 'https://example.com/image.jpg' | img_url: '600x800' }}`;
       const result = await liquid.parseAndRender(template, {});
 
-      expect(result).toBe('/images/image.jpg?size=600x800');
+      expect(result).toBe('https://example.com/image.jpg?size=600x800');
     });
 
     it('should handle format, width, height parameters', async () => {
-      const template = `{{ 'image.jpg' | img_url: 'webp', 600, 800 }}`;
+      const template = `{{ 'https://example.com/image.jpg' | img_url: 'webp', 600, 800 }}`;
       const result = await liquid.parseAndRender(template, {});
 
-      expect(result).toBe('/images/image.jpg?format=webp&width=600&height=800');
+      expect(result).toBe('https://example.com/image.jpg?format=webp&width=600&height=800');
     });
 
     it('should handle only width and height', async () => {
-      const template = `{{ 'image.jpg' | img_url: 600, 800 }}`;
+      const template = `{{ 'https://example.com/image.jpg' | img_url: 600, 800 }}`;
       const result = await liquid.parseAndRender(template, {});
 
-      expect(result).toBe('/images/image.jpg?width=600&height=800');
+      expect(result).toBe('https://example.com/image.jpg?width=600&height=800');
     });
 
     it('should handle object parameters', async () => {
-      const template = `{{ 'image.jpg' | img_url: params }}`;
+      const template = `{{ 'https://example.com/image.jpg' | img_url: params }}`;
       const context = {
         params: { width: 600, height: 800, format: 'auto' },
       };
       const result = await liquid.parseAndRender(template, context);
 
-      expect(result).toBe('/images/image.jpg?format=auto&width=600&height=800');
+      expect(result).toBe('https://example.com/image.jpg?format=auto&width=600&height=800');
     });
 
     it('should handle full URLs', async () => {
@@ -110,12 +110,12 @@ describe('Ecommerce Filters - Image Optimization', () => {
       const template = `{{ product.featured_image | img_url: 'webp', 600, 800 }}`;
       const context = {
         product: {
-          featured_image: 'product-image.jpg',
+          featured_image: 'https://cdn.example.com/product-image.jpg',
         },
       };
       const result = await liquid.parseAndRender(template, context);
 
-      expect(result).toBe('/images/product-image.jpg?format=webp&width=600&height=800');
+      expect(result).toBe('https://cdn.example.com/product-image.jpg?format=webp&width=600&height=800');
     });
 
     it('should handle collection image with auto format', async () => {

From 98a80b98cb746e0c2b1012d8a4da15a6cd67d945 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 6 Nov 2025 18:10:57 -0500
Subject: [PATCH 48/49] Remove unused hotReload prop from ThemeStudio component
 to streamline code and improve clarity.

---
 .../theme-studio/src/presentation/components/ThemeStudio.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
index ff2de1c7..206a5651 100644
--- a/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
+++ b/packages/theme-studio/src/presentation/components/ThemeStudio.tsx
@@ -204,7 +204,6 @@ export function ThemeStudio({ storeId, apiBaseUrl, domain, imageSelectorComponen
               apiBaseUrl={apiBaseUrl}
               currentPageId={currentPageId}
               sidebarState={sidebarState}
-              hotReload={hotReload}
             />
           </div>
           <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>

From 8726fad47f47f99835d6df68d35d2493b6550424 Mon Sep 17 00:00:00 2001
From: Steven <stevenjaime164@gmail.com>
Date: Thu, 6 Nov 2025 18:18:24 -0500
Subject: [PATCH 49/49] Update documentation links in index.mdx for theme
 development and customization

This commit modifies the index.mdx file to correct the file extension for the Theme Development Guide and adds a new entry for the Theme Studio Customization guide, enhancing the documentation structure and accessibility for users.
---
 docs/engine/theme-studio-customization.mdx | 1025 ++++++++++++++++++++
 docs/index.mdx                             |    3 +-
 2 files changed, 1027 insertions(+), 1 deletion(-)
 create mode 100644 docs/engine/theme-studio-customization.mdx

diff --git a/docs/engine/theme-studio-customization.mdx b/docs/engine/theme-studio-customization.mdx
new file mode 100644
index 00000000..79d77305
--- /dev/null
+++ b/docs/engine/theme-studio-customization.mdx
@@ -0,0 +1,1025 @@
+# Guía de Personalización de Temas en Theme Studio
+
+Esta guía te enseñará cómo crear secciones y bloques personalizables que pueden ser editados desde el Theme Studio, permitiendo a los usuarios modificar colores, textos, tamaños y otros aspectos visuales sin necesidad de editar código.
+
+## Tabla de Contenidos
+
+1. [Introducción](#introducción)
+2. [Conceptos Básicos](#conceptos-básicos)
+3. [Creando Secciones Personalizables](#creando-secciones-personalizables)
+4. [Definiendo Settings](#definiendo-settings)
+5. [Aplicando Estilos Dinámicos](#aplicando-estilos-dinámicos)
+6. [Usando Bloques (Blocks)](#usando-bloques-blocks)
+7. [Atributos de Selección](#atributos-de-selección)
+8. [Ejemplos Prácticos](#ejemplos-prácticos)
+9. [Mejores Prácticas](#mejores-prácticas)
+
+## Introducción
+
+El Theme Studio es una herramienta visual que permite personalizar temas sin escribir código. Para que una sección sea personalizable desde el Theme Studio, necesitas definir un **schema** en tu archivo Liquid que especifique qué opciones estarán disponibles para el usuario.
+
+Cuando defines un schema, cada opción (setting) aparece automáticamente en el panel lateral del Theme Studio, permitiendo al usuario cambiar valores que se reflejan en tiempo real en la vista previa.
+
+## Conceptos Básicos
+
+### ¿Qué es una Sección?
+
+Una sección es un archivo `.liquid` ubicado en `sections/` que representa un bloque de contenido reutilizable. Por ejemplo, un hero, un carrusel de productos, o una galería de imágenes.
+
+### ¿Qué es el Schema?
+
+El schema es una definición JSON que especifica qué opciones de personalización estarán disponibles para una sección. Se define al final del archivo Liquid usando `{% schema %}`.
+
+### ¿Qué son los Settings?
+
+Los settings son opciones individuales de personalización, como colores, textos, tamaños, etc. Cada setting tiene un tipo (text, color, range, etc.) y aparece como un campo en el Theme Studio.
+
+### ¿Qué son los Blocks?
+
+Los blocks son elementos repetibles dentro de una sección. Por ejemplo, puedes tener una sección "Galería" con múltiples bloques "Imagen", permitiendo al usuario agregar o eliminar imágenes dinámicamente.
+
+## Creando Secciones Personalizables
+
+Para crear una sección personalizable, necesitas:
+
+1. Crear un archivo `.liquid` en la carpeta `sections/`
+2. Agregar el código HTML/Liquid de la sección
+3. Definir el schema al final del archivo
+
+### Estructura Básica de una Sección
+
+```liquid
+<section class="mi-seccion" {{ section.fasttify_attributes }}>
+  <!-- Contenido de la sección -->
+  <h2>{{ section.settings.titulo }}</h2>
+</section>
+
+{% schema %}
+{
+  "name": "Mi Sección",
+  "settings": [
+    {
+      "type": "text",
+      "id": "titulo",
+      "label": "Título",
+      "default": "Título por defecto"
+    }
+  ]
+}
+{% endschema %}
+```
+
+El atributo `{{ section.fasttify_attributes }}` es esencial: permite que el Theme Studio identifique y seleccione la sección cuando el usuario hace clic en ella en el preview.
+
+## Definiendo Settings
+
+Los settings se definen dentro del array `settings` del schema. Cada setting debe tener al menos:
+
+- `type`: El tipo de control (text, color, range, etc.)
+- `id`: Un identificador único para acceder al valor
+- `label`: El texto que se muestra en el Theme Studio
+
+### Tipos de Settings Disponibles
+
+#### Text
+
+Campo de texto simple para títulos, descripciones, etc.
+
+```json
+{
+  "type": "text",
+  "id": "titulo",
+  "label": "Título de la sección",
+  "default": "Mi Título",
+  "info": "Texto informativo que aparece debajo del campo"
+}
+```
+
+Acceso en Liquid: `{{ section.settings.titulo }}`
+
+#### Textarea
+
+Campo de texto multilínea para descripciones largas.
+
+```json
+{
+  "type": "textarea",
+  "id": "descripcion",
+  "label": "Descripción",
+  "default": "Descripción por defecto"
+}
+```
+
+#### Color
+
+Selector de color para fondos, textos, etc.
+
+```json
+{
+  "type": "color",
+  "id": "color_fondo",
+  "label": "Color de fondo"
+}
+```
+
+Acceso en Liquid: `{{ section.settings.color_fondo }}` (devuelve un valor hexadecimal como `#ff0000`)
+
+#### Range
+
+Slider numérico para tamaños, espaciados, etc.
+
+```json
+{
+  "type": "range",
+  "id": "tamaño_fuente",
+  "min": 10,
+  "max": 100,
+  "step": 2,
+  "label": "Tamaño de fuente (px)",
+  "default": 24
+}
+```
+
+Acceso en Liquid: `{{ section.settings.tamaño_fuente }}` (devuelve un número)
+
+#### Select
+
+Menú desplegable para opciones predefinidas.
+
+```json
+{
+  "type": "select",
+  "id": "alineacion",
+  "label": "Alineación del texto",
+  "options": [
+    { "value": "left", "label": "Izquierda" },
+    { "value": "center", "label": "Centro" },
+    { "value": "right", "label": "Derecha" }
+  ],
+  "default": "center"
+}
+```
+
+#### Checkbox
+
+Casilla de verificación para opciones booleanas.
+
+```json
+{
+  "type": "checkbox",
+  "id": "mostrar_boton",
+  "label": "Mostrar botón",
+  "default": true
+}
+```
+
+Acceso en Liquid: `{{ section.settings.mostrar_boton }}` (devuelve `true` o `false`)
+
+#### Image Picker
+
+Selector de imagen para fondos, logos, etc.
+
+```json
+{
+  "type": "image_picker",
+  "id": "imagen_fondo",
+  "label": "Imagen de fondo",
+  "info": "Recomendado: 1920x1080px"
+}
+```
+
+Acceso en Liquid: `{{ section.settings.imagen_fondo | img_url: '1920x1080' }}`
+
+#### URL
+
+Campo para enlaces.
+
+```json
+{
+  "type": "url",
+  "id": "enlace_boton",
+  "label": "Enlace del botón"
+}
+```
+
+Acceso en Liquid: `{{ section.settings.enlace_boton }}`
+
+#### Header
+
+No es un setting real, sino un separador visual para organizar los settings.
+
+```json
+{
+  "type": "header",
+  "content": "Configuración de Colores"
+}
+```
+
+### Organizando Settings con Headers
+
+Para mejorar la organización, agrupa los settings relacionados usando headers:
+
+```json
+{
+  "name": "Mi Sección",
+  "settings": [
+    {
+      "type": "header",
+      "content": "Contenido"
+    },
+    {
+      "type": "text",
+      "id": "titulo",
+      "label": "Título"
+    },
+    {
+      "type": "textarea",
+      "id": "descripcion",
+      "label": "Descripción"
+    },
+    {
+      "type": "header",
+      "content": "Estilos"
+    },
+    {
+      "type": "color",
+      "id": "color_fondo",
+      "label": "Color de fondo"
+    },
+    {
+      "type": "range",
+      "id": "padding",
+      "min": 0,
+      "max": 100,
+      "step": 5,
+      "label": "Padding (px)",
+      "default": 20
+    }
+  ]
+}
+```
+
+## Aplicando Estilos Dinámicos
+
+Para aplicar estilos dinámicos basados en los settings, tienes dos opciones:
+
+### Opción 1: Estilos Inline en el HTML
+
+Puedes aplicar estilos directamente en los elementos HTML:
+
+```liquid
+<div
+  style="
+    background-color: {{ section.settings.color_fondo }};
+    padding: {{ section.settings.padding }}px;
+    color: {{ section.settings.color_texto }};
+  ">
+  {{ section.settings.contenido }}
+</div>
+```
+
+### Opción 2: Bloque de Estilos Dinámicos (Recomendado)
+
+La forma más limpia es usar un bloque `<style>` al inicio de la sección:
+
+```liquid
+<style>
+  .mi-seccion {
+    {% if section.settings.color_fondo != blank %}
+      background-color: {{ section.settings.color_fondo }};
+    {% endif %}
+    {% if section.settings.padding != blank %}
+      padding: {{ section.settings.padding }}px;
+    {% endif %}
+  }
+
+  .mi-seccion h2 {
+    {% if section.settings.color_texto != blank %}
+      color: {{ section.settings.color_texto }};
+    {% endif %}
+    {% if section.settings.tamaño_fuente != blank %}
+      font-size: {{ section.settings.tamaño_fuente }}px;
+    {% endif %}
+  }
+</style>
+
+<section class="mi-seccion" {{ section.fasttify_attributes }}>
+  <h2>{{ section.settings.titulo }}</h2>
+</section>
+```
+
+### Manejo de Valores Vacíos
+
+Es importante verificar si un setting tiene valor antes de aplicarlo, especialmente para colores:
+
+```liquid
+{% if section.settings.color_fondo != blank
+   and section.settings.color_fondo != '#000000'
+   and section.settings.color_fondo != '#000' %}
+  background-color: {{ section.settings.color_fondo }};
+{% else %}
+  background-color: unset;
+{% endif %}
+```
+
+Esto evita que valores por defecto (como negro) sobrescriban estilos base cuando el usuario no ha configurado el setting.
+
+### Revertir Estilos cuando se Elimina un Setting
+
+Cuando un usuario elimina un valor (lo deja en blanco), debes asegurarte de que el estilo se revierta usando `unset`:
+
+```liquid
+.product-card {
+  {% if section.settings.card_background_color != blank %}
+    background-color: {{ section.settings.card_background_color }};
+  {% else %}
+    background-color: unset;
+  {% endif %}
+
+  {% if section.settings.card_border_radius != blank %}
+    border-radius: {{ section.settings.card_border_radius }}px;
+  {% else %}
+    border-radius: unset;
+  {% endif %}
+}
+```
+
+## Usando Bloques (Blocks)
+
+Los blocks permiten crear elementos repetibles dentro de una sección. Por ejemplo, una galería de imágenes donde el usuario puede agregar o eliminar imágenes.
+
+### Definir Blocks en el Schema
+
+```json
+{
+  "name": "Galería de Imágenes",
+  "settings": [
+    {
+      "type": "text",
+      "id": "titulo",
+      "label": "Título de la galería"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "imagen",
+      "name": "Imagen",
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "imagen",
+          "label": "Imagen"
+        },
+        {
+          "type": "text",
+          "id": "titulo",
+          "label": "Título de la imagen"
+        },
+        {
+          "type": "url",
+          "id": "enlace",
+          "label": "Enlace"
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Renderizar Blocks en Liquid
+
+```liquid
+<section class="galeria" {{ section.fasttify_attributes }}>
+  <h2>{{ section.settings.titulo }}</h2>
+
+  <div class="galeria-grid">
+    {% for block in section.blocks %}
+      {% if block.type == 'imagen' %}
+        <div class="galeria-item" {{ block.fasttify_attributes }}>
+          {% if block.settings.enlace != blank %}
+            <a href="{{ block.settings.enlace }}">
+          {% endif %}
+
+          {% if block.settings.imagen != blank %}
+            <img
+              src="{{ block.settings.imagen | img_url: '800x600' }}"
+              alt="{{ block.settings.titulo }}">
+          {% endif %}
+
+          {% if block.settings.titulo != blank %}
+            <h3>{{ block.settings.titulo }}</h3>
+          {% endif %}
+
+          {% if block.settings.enlace != blank %}
+            </a>
+          {% endif %}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</section>
+```
+
+### Blocks con Límite
+
+Puedes limitar el número de blocks de un tipo específico:
+
+```json
+{
+  "blocks": [
+    {
+      "type": "product_card",
+      "name": "Product Card",
+      "limit": 1,
+      "settings": [
+        {
+          "type": "color",
+          "id": "card_background_color",
+          "label": "Color de fondo de la card"
+        }
+      ]
+    }
+  ]
+}
+```
+
+Cuando usas `limit: 1`, significa que solo puede haber un bloque de ese tipo, y sus settings se aplican a todos los elementos de ese tipo en la sección. Esto es útil para estilos globales.
+
+### Aplicar Estilos de un Block a Múltiples Elementos
+
+Si tienes un block con `limit: 1` que define estilos para todos los productos en un carrusel:
+
+```liquid
+{% comment %} Buscar el bloque de configuración de Product Card {% endcomment %}
+{% assign product_card_block = null %}
+{% for block in section.blocks %}
+  {% if block.type == 'product_card' %}
+    {% assign product_card_block = block %}
+    {% break %}
+  {% endif %}
+{% endfor %}
+
+{% for product in collection.products %}
+  <div class="product-card" {% if product_card_block %}{{ product_card_block.fasttify_attributes }}{% endif %}>
+    <!-- Contenido del producto -->
+  </div>
+{% endfor %}
+
+<style>
+  .product-card {
+    {% if product_card_block %}
+      {% if product_card_block.settings.card_background_color != blank %}
+        background-color: {{ product_card_block.settings.card_background_color }};
+      {% else %}
+        background-color: unset;
+      {% endif %}
+
+      {% if product_card_block.settings.card_border_radius != blank %}
+        border-radius: {{ product_card_block.settings.card_border_radius }}px;
+      {% else %}
+        border-radius: unset;
+      {% endif %}
+    {% endif %}
+  }
+</style>
+```
+
+## Atributos de Selección
+
+### fasttify_attributes
+
+El atributo `{{ section.fasttify_attributes }}` y `{{ block.fasttify_attributes }}` es esencial para la integración con el Theme Studio. Permite que:
+
+1. El elemento sea seleccionable en el preview
+2. Cuando se selecciona en el preview, se resalte con un borde azul
+3. Cuando se selecciona en el sidebar, se resalte en el preview
+
+**Siempre incluye este atributo en el elemento principal de la sección y en cada block:**
+
+```liquid
+<section class="mi-seccion" {{ section.fasttify_attributes }}>
+  <!-- Contenido -->
+
+  {% for block in section.blocks %}
+    <div class="mi-block" {{ block.fasttify_attributes }}>
+      <!-- Contenido del block -->
+    </div>
+  {% endfor %}
+</section>
+```
+
+## Ejemplos Prácticos
+
+### Ejemplo 1: Hero Simple Personalizable
+
+```liquid
+<style>
+  .hero {
+    {% if section.settings.imagen_fondo != blank %}
+      background-image: url('{{ section.settings.imagen_fondo | img_url: '1920x1080' }}');
+    {% endif %}
+    {% if section.settings.color_fondo != blank %}
+      background-color: {{ section.settings.color_fondo }};
+    {% endif %}
+    {% if section.settings.altura != blank %}
+      min-height: {{ section.settings.altura }}px;
+    {% endif %}
+    {% if section.settings.padding != blank %}
+      padding: {{ section.settings.padding }}px;
+    {% endif %}
+  }
+
+  .hero h1 {
+    {% if section.settings.color_titulo != blank %}
+      color: {{ section.settings.color_titulo }};
+    {% endif %}
+    {% if section.settings.tamaño_titulo != blank %}
+      font-size: {{ section.settings.tamaño_titulo }}px;
+    {% endif %}
+  }
+
+  .hero p {
+    {% if section.settings.color_texto != blank %}
+      color: {{ section.settings.color_texto }};
+    {% endif %}
+  }
+
+  .hero-btn {
+    {% if section.settings.color_boton_fondo != blank %}
+      background-color: {{ section.settings.color_boton_fondo }};
+    {% endif %}
+    {% if section.settings.color_boton_texto != blank %}
+      color: {{ section.settings.color_boton_texto }};
+    {% endif %}
+    {% if section.settings.boton_border_radius != blank %}
+      border-radius: {{ section.settings.boton_border_radius }}px;
+    {% endif %}
+  }
+</style>
+
+<section class="hero" {{ section.fasttify_attributes }}>
+  <div class="hero-content">
+    {% if section.settings.titulo != blank %}
+      <h1>{{ section.settings.titulo }}</h1>
+    {% endif %}
+
+    {% if section.settings.descripcion != blank %}
+      <p>{{ section.settings.descripcion }}</p>
+    {% endif %}
+
+    {% if section.settings.texto_boton != blank and section.settings.enlace_boton != blank %}
+      <a href="{{ section.settings.enlace_boton }}" class="hero-btn">
+        {{ section.settings.texto_boton }}
+      </a>
+    {% endif %}
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "Hero",
+  "settings": [
+    {
+      "type": "header",
+      "content": "Contenido"
+    },
+    {
+      "type": "text",
+      "id": "titulo",
+      "label": "Título",
+      "default": "Bienvenido"
+    },
+    {
+      "type": "textarea",
+      "id": "descripcion",
+      "label": "Descripción",
+      "default": "Descripción del hero"
+    },
+    {
+      "type": "text",
+      "id": "texto_boton",
+      "label": "Texto del botón",
+      "default": "Comprar ahora"
+    },
+    {
+      "type": "url",
+      "id": "enlace_boton",
+      "label": "Enlace del botón"
+    },
+    {
+      "type": "header",
+      "content": "Imagen"
+    },
+    {
+      "type": "image_picker",
+      "id": "imagen_fondo",
+      "label": "Imagen de fondo",
+      "info": "Recomendado: 1920x1080px"
+    },
+    {
+      "type": "header",
+      "content": "Estilos"
+    },
+    {
+      "type": "color",
+      "id": "color_fondo",
+      "label": "Color de fondo"
+    },
+    {
+      "type": "range",
+      "id": "altura",
+      "min": 300,
+      "max": 800,
+      "step": 50,
+      "label": "Altura mínima (px)",
+      "default": 500
+    },
+    {
+      "type": "range",
+      "id": "padding",
+      "min": 0,
+      "max": 100,
+      "step": 10,
+      "label": "Padding (px)",
+      "default": 40
+    },
+    {
+      "type": "color",
+      "id": "color_titulo",
+      "label": "Color del título"
+    },
+    {
+      "type": "range",
+      "id": "tamaño_titulo",
+      "min": 24,
+      "max": 120,
+      "step": 4,
+      "label": "Tamaño del título (px)",
+      "default": 48
+    },
+    {
+      "type": "color",
+      "id": "color_texto",
+      "label": "Color del texto"
+    },
+    {
+      "type": "header",
+      "content": "Botón"
+    },
+    {
+      "type": "color",
+      "id": "color_boton_fondo",
+      "label": "Color de fondo del botón"
+    },
+    {
+      "type": "color",
+      "id": "color_boton_texto",
+      "label": "Color de texto del botón"
+    },
+    {
+      "type": "range",
+      "id": "boton_border_radius",
+      "min": 0,
+      "max": 50,
+      "step": 2,
+      "label": "Radio de borde del botón (px)",
+      "default": 4
+    }
+  ]
+}
+{% endschema %}
+```
+
+### Ejemplo 2: Sección con Blocks Repetibles
+
+```liquid
+<style>
+  .testimonios {
+    {% if section.settings.color_fondo != blank %}
+      background-color: {{ section.settings.color_fondo }};
+    {% endif %}
+    {% if section.settings.padding != blank %}
+      padding: {{ section.settings.padding }}px;
+    {% endif %}
+  }
+
+  .testimonio-item {
+    {% if section.settings.color_fondo_item != blank %}
+      background-color: {{ section.settings.color_fondo_item }};
+    {% endif %}
+    {% if section.settings.border_radius_item != blank %}
+      border-radius: {{ section.settings.border_radius_item }}px;
+    {% endif %}
+  }
+</style>
+
+<section class="testimonios" {{ section.fasttify_attributes }}>
+  {% if section.settings.titulo != blank %}
+    <h2>{{ section.settings.titulo }}</h2>
+  {% endif %}
+
+  <div class="testimonios-grid">
+    {% for block in section.blocks %}
+      {% if block.type == 'testimonio' %}
+        <div class="testimonio-item" {{ block.fasttify_attributes }}>
+          {% if block.settings.imagen != blank %}
+            <img
+              src="{{ block.settings.imagen | img_url: '200x200' }}"
+              alt="{{ block.settings.nombre }}">
+          {% endif %}
+
+          {% if block.settings.texto != blank %}
+            <p>{{ block.settings.texto }}</p>
+          {% endif %}
+
+          {% if block.settings.nombre != blank %}
+            <strong>{{ block.settings.nombre }}</strong>
+          {% endif %}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "Testimonios",
+  "settings": [
+    {
+      "type": "text",
+      "id": "titulo",
+      "label": "Título de la sección",
+      "default": "Lo que dicen nuestros clientes"
+    },
+    {
+      "type": "color",
+      "id": "color_fondo",
+      "label": "Color de fondo de la sección"
+    },
+    {
+      "type": "range",
+      "id": "padding",
+      "min": 0,
+      "max": 100,
+      "step": 10,
+      "label": "Padding (px)",
+      "default": 40
+    },
+    {
+      "type": "color",
+      "id": "color_fondo_item",
+      "label": "Color de fondo de los testimonios"
+    },
+    {
+      "type": "range",
+      "id": "border_radius_item",
+      "min": 0,
+      "max": 30,
+      "step": 2,
+      "label": "Radio de borde de los testimonios (px)",
+      "default": 8
+    }
+  ],
+  "blocks": [
+    {
+      "type": "testimonio",
+      "name": "Testimonio",
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "imagen",
+          "label": "Foto del cliente"
+        },
+        {
+          "type": "textarea",
+          "id": "texto",
+          "label": "Texto del testimonio"
+        },
+        {
+          "type": "text",
+          "id": "nombre",
+          "label": "Nombre del cliente"
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}
+```
+
+### Ejemplo 3: Block con Limit para Estilos Globales
+
+Este ejemplo muestra cómo usar un block con `limit: 1` para definir estilos que se aplican a todos los elementos de un tipo:
+
+```liquid
+{% comment %} Buscar el bloque de configuración de Product Card {% endcomment %}
+{% assign product_card_block = null %}
+{% for block in section.blocks %}
+  {% if block.type == 'product_card' %}
+    {% assign product_card_block = block %}
+    {% break %}
+  {% endif %}
+{% endfor %}
+
+<style>
+  .product-card {
+    {% if product_card_block %}
+      {% if product_card_block.settings.card_background_color != blank %}
+        background-color: {{ product_card_block.settings.card_background_color }};
+      {% else %}
+        background-color: unset;
+      {% endif %}
+
+      {% if product_card_block.settings.card_border_radius != blank %}
+        border-radius: {{ product_card_block.settings.card_border_radius }}px;
+      {% else %}
+        border-radius: unset;
+      {% endif %}
+
+      {% if product_card_block.settings.card_border_width != blank %}
+        border: {{ product_card_block.settings.card_border_width }}px solid
+                {% if product_card_block.settings.card_border_color != blank %}
+                  {{ product_card_block.settings.card_border_color }}
+                {% else %}
+                  transparent
+                {% endif %};
+      {% else %}
+        border: unset;
+      {% endif %}
+    {% endif %}
+  }
+</style>
+
+<section class="productos" {{ section.fasttify_attributes }}>
+  {% for product in collection.products %}
+    <div class="product-card" {% if product_card_block %}{{ product_card_block.fasttify_attributes }}{% endif %}>
+      <!-- Contenido del producto -->
+      <h3>{{ product.title }}</h3>
+    </div>
+  {% endfor %}
+</section>
+
+{% schema %}
+{
+  "name": "Productos",
+  "settings": [],
+  "blocks": [
+    {
+      "type": "product_card",
+      "name": "Product Card",
+      "limit": 1,
+      "settings": [
+        {
+          "type": "header",
+          "content": "Configuración de la Card"
+        },
+        {
+          "type": "color",
+          "id": "card_background_color",
+          "label": "Color de fondo de la card"
+        },
+        {
+          "type": "range",
+          "id": "card_border_radius",
+          "min": 0,
+          "max": 50,
+          "step": 2,
+          "label": "Radio de borde de la card (px)",
+          "default": 0
+        },
+        {
+          "type": "range",
+          "id": "card_border_width",
+          "min": 0,
+          "max": 10,
+          "step": 1,
+          "label": "Ancho del borde de la card (px)",
+          "default": 0
+        },
+        {
+          "type": "color",
+          "id": "card_border_color",
+          "label": "Color del borde de la card"
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}
+```
+
+En este ejemplo, el block "Product Card" con `limit: 1` define los estilos que se aplican a todas las cards de producto en el carrusel. Cuando el usuario selecciona este block en el Theme Studio, puede cambiar los estilos que afectan a todas las cards.
+
+## Mejores Prácticas
+
+### 1. Organiza tus Settings con Headers
+
+Agrupa settings relacionados usando headers para mejorar la experiencia del usuario:
+
+```json
+{
+  "settings": [
+    { "type": "header", "content": "Contenido" },
+    { "type": "text", "id": "titulo", "label": "Título" },
+    { "type": "textarea", "id": "descripcion", "label": "Descripción" },
+    { "type": "header", "content": "Estilos" },
+    { "type": "color", "id": "color_fondo", "label": "Color de fondo" },
+    { "type": "range", "id": "padding", "min": 0, "max": 100, "step": 10, "label": "Padding" }
+  ]
+}
+```
+
+### 2. Usa Valores por Defecto Sensatos
+
+Siempre proporciona valores por defecto que funcionen bien:
+
+```json
+{
+  "type": "text",
+  "id": "titulo",
+  "label": "Título",
+  "default": "Mi Título"
+}
+```
+
+### 3. Proporciona Información Útil
+
+Usa el campo `info` para guiar al usuario:
+
+```json
+{
+  "type": "image_picker",
+  "id": "imagen",
+  "label": "Imagen de fondo",
+  "info": "Recomendado: 1920x1080px para mejor calidad"
+}
+```
+
+### 4. Valida Valores Vacíos
+
+Siempre verifica si un setting tiene valor antes de usarlo:
+
+```liquid
+{% if section.settings.color_fondo != blank %}
+  background-color: {{ section.settings.color_fondo }};
+{% endif %}
+```
+
+### 5. Maneja Colores Negros por Defecto
+
+Para colores, verifica también valores negros por defecto:
+
+```liquid
+{% if section.settings.color_fondo != blank
+   and section.settings.color_fondo != '#000000'
+   and section.settings.color_fondo != '#000' %}
+  background-color: {{ section.settings.color_fondo }};
+{% else %}
+  background-color: unset;
+{% endif %}
+```
+
+### 6. Usa unset para Revertir Estilos
+
+Cuando un setting está vacío, usa `unset` para revertir el estilo:
+
+```liquid
+.product-card {
+  {% if section.settings.background_color != blank %}
+    background-color: {{ section.settings.background_color }};
+  {% else %}
+    background-color: unset;
+  {% endif %}
+}
+```
+
+### 7. Siempre Incluye fasttify_attributes
+
+Nunca olvides incluir `{{ section.fasttify_attributes }}` en el elemento principal y `{{ block.fasttify_attributes }}` en cada block para que funcionen con el Theme Studio.
+
+### 8. Mantén los Estilos Dinámicos Separados
+
+Separa los estilos dinámicos (en el bloque `<style>`) de los estilos base (en archivos CSS estáticos). Esto hace el código más mantenible.
+
+### 9. Usa Blocks con Limit para Estilos Globales
+
+Cuando quieras que un estilo se aplique a todos los elementos de un tipo, usa un block con `limit: 1` en lugar de settings de sección.
+
+### 10. Prueba con Valores Vacíos
+
+Siempre prueba tu sección con todos los settings vacíos para asegurar que se ve bien con los valores por defecto del CSS base.
+
+## Resumen
+
+Para crear secciones personalizables en el Theme Studio:
+
+1. Define un schema con `{% schema %}` al final de tu archivo Liquid
+2. Agrega settings con tipos apropiados (text, color, range, etc.)
+3. Organiza los settings con headers
+4. Aplica los valores usando `{{ section.settings.id }}` o `{{ block.settings.id }}`
+5. Usa bloques `<style>` para aplicar estilos dinámicos
+6. Valida valores vacíos y usa `unset` para revertir estilos
+7. Incluye siempre `{{ section.fasttify_attributes }}` y `{{ block.fasttify_attributes }}`
+8. Usa blocks con `limit: 1` para estilos globales aplicados a múltiples elementos
+
+Siguiendo estas prácticas, crearás secciones completamente personalizables que los usuarios pueden modificar fácilmente desde el Theme Studio sin necesidad de editar código.
diff --git a/docs/index.mdx b/docs/index.mdx
index b9c886a7..7464aef2 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -27,7 +27,8 @@ Esta documentación cubre desde la personalización de temas y plantillas, hasta
 - [Liquid Data Access](./engine/liquid-data-access.md) - Acceso a datos en templates Liquid
 - [Pages and Policies](./engine/pages-and-policies.md) - Sistema de páginas y políticas
 - [Render Engine](./engine/render-engine.md) - Arquitectura del motor de renderizado
-- [Theme Development Guide](./engine/theme-development-guide.md) - Guía de desarrollo de temas
+- [Theme Development Guide](./engine/theme-development-guide.mdx) - Guía de desarrollo de temas
+- [Theme Studio Customization](./engine/theme-studio-customization.mdx) - **Crear temas personalizables** - Guía completa para crear secciones y bloques personalizables desde el Theme Studio
 - [Theme Studio Selection](./engine/theme-studio-selection.mdx) - **Selección bidireccional** - Sistema de selección visual entre sidebar y preview
 - [Theme Visual Guide](./engine/theme-visual-guide.md) - Guía visual de temas
 - [Shopify URL Compatibility](./engine/shopify-url-compatibility.md) - Compatibilidad con URLs de Shopify