@jsonpages/cli 3.0.40 → 3.0.43

package/assets/src_tenant_alpha.sh

@@ -27,147 +27,147 @@ END_OF_FILE_CONTENT
 mkdir -p "src"
 echo "Creating src/App.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/App.tsx"
-/**
- * Thin Entry Point (Tenant).
- * Data from getHydratedData (file-backed or draft); assets from public/assets/images.
- * Supports Hybrid Persistence: Local Filesystem (Dev) or Cloud Bridge (Prod).
- */
-import { useState, useEffect } from 'react';
-import { JsonPagesEngine } from '@jsonpages/core';
-import type { LibraryImageEntry } from '@jsonpages/core';
-import { ComponentRegistry } from '@/lib/ComponentRegistry';
-import { SECTION_SCHEMAS } from '@/lib/schemas';
-import { addSectionConfig } from '@/lib/addSectionConfig';
-import { getHydratedData } from '@/lib/draftStorage';
-import type { JsonPagesConfig, ProjectState } from '@jsonpages/core';
-import type { SiteConfig, ThemeConfig, MenuConfig } from '@/types';
-
-import siteData from '@/data/config/site.json';
-import themeData from '@/data/config/theme.json';
-import menuData from '@/data/config/menu.json';
-import { getFilePages } from '@/lib/getFilePages';
-
-import fontsCss from './fonts.css?inline';
-import tenantCss from './index.css?inline';
-
-// Cloud Configuration (Injected by Vercel/Netlify Env Vars)
-const CLOUD_API_URL = import.meta.env.VITE_JSONPAGES_CLOUD_URL;
-const CLOUD_API_KEY = import.meta.env.VITE_JSONPAGES_API_KEY;
-
-const themeConfig = themeData as unknown as ThemeConfig;
-const menuConfig = menuData as unknown as MenuConfig;
-const TENANT_ID = 'alpha';
-
-const filePages = getFilePages();
-const fileSiteConfig = siteData as unknown as SiteConfig;
-const MAX_UPLOAD_SIZE_BYTES = 5 * 1024 * 1024;
-
-function getInitialData() {
-  return getHydratedData(TENANT_ID, filePages, fileSiteConfig);
-}
-
-function App() {
-  const [{ pages, siteConfig }] = useState(getInitialData);
-  const [assetsManifest, setAssetsManifest] = useState<LibraryImageEntry[]>([]);
-
-  useEffect(() => {
-    // In Cloud mode, listing assets might be different or disabled for MVP
-    // For now, we keep the local fetch which will fail gracefully on Vercel (404)
-    fetch('/api/list-assets')
-      .then((r) => (r.ok ? r.json() : []))
-      .then((list: LibraryImageEntry[]) => setAssetsManifest(Array.isArray(list) ? list : []))
-      .catch(() => setAssetsManifest([]));
-  }, []);
-  
-console.log("🔍 DEBUG ENV:", {
-  URL: import.meta.env.VITE_JSONPAGES_CLOUD_URL,
-  KEY: import.meta.env.VITE_JSONPAGES_API_KEY ? "PRESENT" : "MISSING"
-});
-  const config: JsonPagesConfig = {
-    tenantId: TENANT_ID,
-    registry: ComponentRegistry as JsonPagesConfig['registry'],
-    schemas: SECTION_SCHEMAS as unknown as JsonPagesConfig['schemas'],
-    pages,
-    siteConfig,
-    themeConfig,
-    menuConfig,
-    themeCss: { tenant: fontsCss + '\n' + tenantCss },
-    addSection: addSectionConfig,
-    persistence: {
-      async saveToFile(state: ProjectState, slug: string): Promise<void> {
-        
-        // ☁️ SCENARIO A: CLOUD BRIDGE (Production)
-        if (CLOUD_API_URL && CLOUD_API_KEY) {
-          console.log(`☁️ Saving ${slug} via Cloud Bridge...`);
-          
-          const res = await fetch(`${CLOUD_API_URL}/save`, {
-            method: 'POST',
-            headers: { 
-              'Content-Type': 'application/json',
-              'Authorization': `Bearer ${CLOUD_API_KEY}`
-            },
-            body: JSON.stringify({ 
-              // Mapping logical slug to physical path in repo
-              path: `src/data/pages/${slug}.json`, 
-              // We save the page config specifically
-              content: state.page, 
-              message: `Content update for ${slug} via Visual Editor`
-            }),
-          });
-
-          if (!res.ok) {
-            const err = await res.json().catch(() => ({}));
-            throw new Error(err.error || `Cloud save failed: ${res.status}`);
-          }
-          return;
-        }
-
-        // 💻 SCENARIO B: LOCAL FILESYSTEM (Development)
-        console.log(`💻 Saving ${slug} to Local Filesystem...`);
-        const res = await fetch('/api/save-to-file', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ projectState: state, slug }),
-        });
-        
-        const body = (await res.json().catch(() => ({}))) as { error?: string };
-        if (!res.ok) throw new Error(body.error ?? `Save to file failed: ${res.status}`);
-      },
-    },
-    assets: {
-      assetsBaseUrl: '/assets',
-      assetsManifest,
-      async onAssetUpload(file: File): Promise<string> {
-        // Note: Asset upload in Cloud Mode requires the R2 Bridge (Next Step in Roadmap)
-        // For now, this works in Local Mode.
-        if (!file.type.startsWith('image/')) throw new Error('Invalid file type.');
-        if (file.size > MAX_UPLOAD_SIZE_BYTES) throw new Error(`File too large. Max ${MAX_UPLOAD_SIZE_BYTES / 1024 / 1024}MB.`);
-        
-        const base64 = await new Promise<string>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload  = () => resolve((reader.result as string).split(',')[1] ?? '');
-          reader.onerror = () => reject(reader.error);
-          reader.readAsDataURL(file);
-        });
-
-        const res = await fetch('/api/upload-asset', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ filename: file.name, mimeType: file.type || undefined, data: base64 }),
-        });
-        
-        const body = (await res.json().catch(() => ({}))) as { url?: string; error?: string };
-        if (!res.ok) throw new Error(body.error || `Upload failed: ${res.status}`);
-        if (typeof body.url !== 'string') throw new Error('Invalid server response: missing url');
-        return body.url;
-      },
-    },
-  };
-
-  return <JsonPagesEngine config={config} />;
-}
-
-export default App;
+/**
+ * Thin Entry Point (Tenant).
+ * Data from getHydratedData (file-backed or draft); assets from public/assets/images.
+ * Supports Hybrid Persistence: Local Filesystem (Dev) or Cloud Bridge (Prod).
+ */
+import { useState, useEffect } from 'react';
+import { JsonPagesEngine } from '@jsonpages/core';
+import type { LibraryImageEntry } from '@jsonpages/core';
+import { ComponentRegistry } from '@/lib/ComponentRegistry';
+import { SECTION_SCHEMAS } from '@/lib/schemas';
+import { addSectionConfig } from '@/lib/addSectionConfig';
+import { getHydratedData } from '@/lib/draftStorage';
+import type { JsonPagesConfig, ProjectState } from '@jsonpages/core';
+import type { SiteConfig, ThemeConfig, MenuConfig } from '@/types';
+
+import siteData from '@/data/config/site.json';
+import themeData from '@/data/config/theme.json';
+import menuData from '@/data/config/menu.json';
+import { getFilePages } from '@/lib/getFilePages';
+
+import fontsCss from './fonts.css?inline';
+import tenantCss from './index.css?inline';
+
+// Cloud Configuration (Injected by Vercel/Netlify Env Vars)
+const CLOUD_API_URL = import.meta.env.VITE_JSONPAGES_CLOUD_URL;
+const CLOUD_API_KEY = import.meta.env.VITE_JSONPAGES_API_KEY;
+
+const themeConfig = themeData as unknown as ThemeConfig;
+const menuConfig = menuData as unknown as MenuConfig;
+const TENANT_ID = 'alpha';
+
+const filePages = getFilePages();
+const fileSiteConfig = siteData as unknown as SiteConfig;
+const MAX_UPLOAD_SIZE_BYTES = 5 * 1024 * 1024;
+
+function getInitialData() {
+  return getHydratedData(TENANT_ID, filePages, fileSiteConfig);
+}
+
+function App() {
+  const [{ pages, siteConfig }] = useState(getInitialData);
+  const [assetsManifest, setAssetsManifest] = useState<LibraryImageEntry[]>([]);
+
+  useEffect(() => {
+    // In Cloud mode, listing assets might be different or disabled for MVP
+    // For now, we keep the local fetch which will fail gracefully on Vercel (404)
+    fetch('/api/list-assets')
+      .then((r) => (r.ok ? r.json() : []))
+      .then((list: LibraryImageEntry[]) => setAssetsManifest(Array.isArray(list) ? list : []))
+      .catch(() => setAssetsManifest([]));
+  }, []);
+  
+console.log("🔍 DEBUG ENV:", {
+  URL: import.meta.env.VITE_JSONPAGES_CLOUD_URL,
+  KEY: import.meta.env.VITE_JSONPAGES_API_KEY ? "PRESENT" : "MISSING"
+});
+  const config: JsonPagesConfig = {
+    tenantId: TENANT_ID,
+    registry: ComponentRegistry as JsonPagesConfig['registry'],
+    schemas: SECTION_SCHEMAS as unknown as JsonPagesConfig['schemas'],
+    pages,
+    siteConfig,
+    themeConfig,
+    menuConfig,
+    themeCss: { tenant: fontsCss + '\n' + tenantCss },
+    addSection: addSectionConfig,
+    persistence: {
+      async saveToFile(state: ProjectState, slug: string): Promise<void> {
+        
+        // ☁️ SCENARIO A: CLOUD BRIDGE (Production)
+        if (CLOUD_API_URL && CLOUD_API_KEY) {
+          console.log(`☁️ Saving ${slug} via Cloud Bridge...`);
+          
+          const res = await fetch(`${CLOUD_API_URL}/save`, {
+            method: 'POST',
+            headers: { 
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${CLOUD_API_KEY}`
+            },
+            body: JSON.stringify({ 
+              // Mapping logical slug to physical path in repo
+              path: `src/data/pages/${slug}.json`, 
+              // We save the page config specifically
+              content: state.page, 
+              message: `Content update for ${slug} via Visual Editor`
+            }),
+          });
+
+          if (!res.ok) {
+            const err = await res.json().catch(() => ({}));
+            throw new Error(err.error || `Cloud save failed: ${res.status}`);
+          }
+          return;
+        }
+
+        // 💻 SCENARIO B: LOCAL FILESYSTEM (Development)
+        console.log(`💻 Saving ${slug} to Local Filesystem...`);
+        const res = await fetch('/api/save-to-file', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ projectState: state, slug }),
+        });
+        
+        const body = (await res.json().catch(() => ({}))) as { error?: string };
+        if (!res.ok) throw new Error(body.error ?? `Save to file failed: ${res.status}`);
+      },
+    },
+    assets: {
+      assetsBaseUrl: '/assets',
+      assetsManifest,
+      async onAssetUpload(file: File): Promise<string> {
+        // Note: Asset upload in Cloud Mode requires the R2 Bridge (Next Step in Roadmap)
+        // For now, this works in Local Mode.
+        if (!file.type.startsWith('image/')) throw new Error('Invalid file type.');
+        if (file.size > MAX_UPLOAD_SIZE_BYTES) throw new Error(`File too large. Max ${MAX_UPLOAD_SIZE_BYTES / 1024 / 1024}MB.`);
+        
+        const base64 = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload  = () => resolve((reader.result as string).split(',')[1] ?? '');
+          reader.onerror = () => reject(reader.error);
+          reader.readAsDataURL(file);
+        });
+
+        const res = await fetch('/api/upload-asset', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filename: file.name, mimeType: file.type || undefined, data: base64 }),
+        });
+        
+        const body = (await res.json().catch(() => ({}))) as { url?: string; error?: string };
+        if (!res.ok) throw new Error(body.error || `Upload failed: ${res.status}`);
+        if (typeof body.url !== 'string') throw new Error('Invalid server response: missing url');
+        return body.url;
+      },
+    },
+  };
+
+  return <JsonPagesEngine config={config} />;
+}
+
+export default App;
 
 END_OF_FILE_CONTENT
 # SKIP: src/App.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
@@ -305,161 +305,161 @@ END_OF_FILE_CONTENT
 mkdir -p "src/components/arch-layers"
 echo "Creating src/components/arch-layers/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/arch-layers/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { ArchLayersData, ArchLayersSettings, ArchLayerLevel, SyntaxTokenType } from './types';
-
-const layerBgStyles: Record<ArchLayerLevel, string> = {
-  l0: 'bg-[#3b82f6]',
-  l1: 'bg-[rgba(59,130,246,0.6)]',
-  l2: 'bg-[rgba(59,130,246,0.35)]',
-};
-
-const tokenStyles: Record<SyntaxTokenType, string> = {
-  plain: 'text-[#cbd5e1]',
-  keyword: 'text-[#60a5fa]',
-  type: 'text-[#22d3ee]',
-  string: 'text-[#4ade80]',
-  comment: 'text-[#64748b] italic',
-  operator: 'text-[#f472b6]',
-};
-
-export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--card)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'var(--border)',
-        '--local-deep': 'var(--background)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
-      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="text-center">
-          {data.label && (
-            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-              <span className="w-5 h-px bg-[var(--local-primary)]" />
-              {data.label}
-            </div>
-          )}
-          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-            {data.title}
-          </h2>
-          {data.description && (
-            <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed" data-jp-field="description">
-              {data.description}
-            </p>
-          )}
-        </div>
-        <div className="mt-14 max-w-[740px] mx-auto">
-          {data.layers.map((layer, idx) => (
-            <div
-              key={layer.id ?? idx}
-              className="group border border-[rgba(255,255,255,0.06)] rounded-[7px] p-8 mb-4 bg-[rgba(255,255,255,0.015)] flex items-start gap-6 transition-all duration-300 hover:border-[rgba(59,130,246,0.2)] hover:translate-x-1.5"
-              data-jp-item-id={layer.id ?? `legacy-${idx}`}
-              data-jp-item-field="layers"
-            >
-              <div className={cn(
-                'shrink-0 w-9 h-9 rounded-lg flex items-center justify-center font-mono text-[0.85rem] font-bold text-white',
-                layerBgStyles[layer.layerLevel]
-              )}>
-                {layer.number}
-              </div>
-              <div>
-                <h4 className="text-[1.05rem] font-bold text-[var(--local-text)] mb-1.5">
-                  {layer.title}
-                </h4>
-                <p className="text-[0.92rem] text-[var(--local-text-muted)] leading-relaxed">
-                  {layer.description}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-        {data.codeLines && data.codeLines.length > 0 && (
-          <div className="mt-12 max-w-[740px] mx-auto">
-            <div className="border border-[rgba(255,255,255,0.08)] rounded-[7px] overflow-hidden bg-[var(--local-deep)]">
-              <div className="flex items-center gap-2 px-5 py-3 bg-[rgba(255,255,255,0.03)] border-b border-[rgba(255,255,255,0.06)]">
-                <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
-                <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
-                <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
-                {data.codeFilename && (
-                  <span className="ml-3 font-mono text-[0.75rem] text-[var(--local-text-muted)] opacity-60" data-jp-field="codeFilename">
-                    {data.codeFilename}
-                  </span>
-                )}
-              </div>
-              <div className="p-6 font-mono text-[0.82rem] leading-[1.7] overflow-x-auto">
-                {data.codeLines.map((line, idx) => (
-                  <div key={idx} data-jp-item-id={(line as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="codeLines">
-                    <span className={tokenStyles[line.tokenType]}>
-                      {line.content}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { ArchLayersData, ArchLayersSettings, ArchLayerLevel, SyntaxTokenType } from './types';
+
+const layerBgStyles: Record<ArchLayerLevel, string> = {
+  l0: 'bg-[#3b82f6]',
+  l1: 'bg-[rgba(59,130,246,0.6)]',
+  l2: 'bg-[rgba(59,130,246,0.35)]',
+};
+
+const tokenStyles: Record<SyntaxTokenType, string> = {
+  plain: 'text-[#cbd5e1]',
+  keyword: 'text-[#60a5fa]',
+  type: 'text-[#22d3ee]',
+  string: 'text-[#4ade80]',
+  comment: 'text-[#64748b] italic',
+  operator: 'text-[#f472b6]',
+};
+
+export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--card)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'var(--border)',
+        '--local-deep': 'var(--background)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="text-center">
+          {data.label && (
+            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+              <span className="w-5 h-px bg-[var(--local-primary)]" />
+              {data.label}
+            </div>
+          )}
+          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+            {data.title}
+          </h2>
+          {data.description && (
+            <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed" data-jp-field="description">
+              {data.description}
+            </p>
+          )}
+        </div>
+        <div className="mt-14 max-w-[740px] mx-auto">
+          {data.layers.map((layer, idx) => (
+            <div
+              key={layer.id ?? idx}
+              className="group border border-[rgba(255,255,255,0.06)] rounded-[7px] p-8 mb-4 bg-[rgba(255,255,255,0.015)] flex items-start gap-6 transition-all duration-300 hover:border-[rgba(59,130,246,0.2)] hover:translate-x-1.5"
+              data-jp-item-id={layer.id ?? `legacy-${idx}`}
+              data-jp-item-field="layers"
+            >
+              <div className={cn(
+                'shrink-0 w-9 h-9 rounded-lg flex items-center justify-center font-mono text-[0.85rem] font-bold text-white',
+                layerBgStyles[layer.layerLevel]
+              )}>
+                {layer.number}
+              </div>
+              <div>
+                <h4 className="text-[1.05rem] font-bold text-[var(--local-text)] mb-1.5">
+                  {layer.title}
+                </h4>
+                <p className="text-[0.92rem] text-[var(--local-text-muted)] leading-relaxed">
+                  {layer.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+        {data.codeLines && data.codeLines.length > 0 && (
+          <div className="mt-12 max-w-[740px] mx-auto">
+            <div className="border border-[rgba(255,255,255,0.08)] rounded-[7px] overflow-hidden bg-[var(--local-deep)]">
+              <div className="flex items-center gap-2 px-5 py-3 bg-[rgba(255,255,255,0.03)] border-b border-[rgba(255,255,255,0.06)]">
+                <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
+                <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
+                <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
+                {data.codeFilename && (
+                  <span className="ml-3 font-mono text-[0.75rem] text-[var(--local-text-muted)] opacity-60" data-jp-field="codeFilename">
+                    {data.codeFilename}
+                  </span>
+                )}
+              </div>
+              <div className="p-6 font-mono text-[0.82rem] leading-[1.7] overflow-x-auto">
+                {data.codeLines.map((line, idx) => (
+                  <div key={idx} data-jp-item-id={(line as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="codeLines">
+                    <span className={tokenStyles[line.tokenType]}>
+                      {line.content}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/arch-layers/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/arch-layers/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/arch-layers/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/arch-layers/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-export const ArchLayerLevelSchema = z.enum(['l0', 'l1', 'l2']);
-export const SyntaxTokenTypeSchema = z.enum(['plain', 'keyword', 'type', 'string', 'comment', 'operator']);
-
-const ArchLayerItemSchema = BaseArrayItem.extend({
-  number: z.string().describe('ui:text'),
-  layerLevel: ArchLayerLevelSchema.describe('ui:select'),
-  title: z.string().describe('ui:text'),
-  description: z.string().describe('ui:textarea'),
-});
-
-const SyntaxLineSchema = z.object({
-  content: z.string().describe('ui:text'),
-  tokenType: SyntaxTokenTypeSchema.default('plain').describe('ui:select'),
-});
-
-export const ArchLayersSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  layers: z.array(ArchLayerItemSchema).describe('ui:list'),
-  codeFilename: z.string().optional().describe('ui:text'),
-  codeLines: z.array(SyntaxLineSchema).optional().describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+export const ArchLayerLevelSchema = z.enum(['l0', 'l1', 'l2']);
+export const SyntaxTokenTypeSchema = z.enum(['plain', 'keyword', 'type', 'string', 'comment', 'operator']);
+
+const ArchLayerItemSchema = BaseArrayItem.extend({
+  number: z.string().describe('ui:text'),
+  layerLevel: ArchLayerLevelSchema.describe('ui:select'),
+  title: z.string().describe('ui:text'),
+  description: z.string().describe('ui:textarea'),
+});
+
+const SyntaxLineSchema = z.object({
+  content: z.string().describe('ui:text'),
+  tokenType: SyntaxTokenTypeSchema.default('plain').describe('ui:select'),
+});
+
+export const ArchLayersSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  layers: z.array(ArchLayerItemSchema).describe('ui:list'),
+  codeFilename: z.string().optional().describe('ui:text'),
+  codeLines: z.array(SyntaxLineSchema).optional().describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/arch-layers/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/arch-layers/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { ArchLayersSchema, ArchLayerLevelSchema, SyntaxTokenTypeSchema } from './schema';
-
-export type ArchLayersData = z.infer<typeof ArchLayersSchema>;
-export type ArchLayersSettings = z.infer<typeof BaseSectionSettingsSchema>;
-export type ArchLayerLevel = z.infer<typeof ArchLayerLevelSchema>;
-export type SyntaxTokenType = z.infer<typeof SyntaxTokenTypeSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { ArchLayersSchema, ArchLayerLevelSchema, SyntaxTokenTypeSchema } from './schema';
+
+export type ArchLayersData = z.infer<typeof ArchLayersSchema>;
+export type ArchLayersSettings = z.infer<typeof BaseSectionSettingsSchema>;
+export type ArchLayerLevel = z.infer<typeof ArchLayerLevelSchema>;
+export type SyntaxTokenType = z.infer<typeof SyntaxTokenTypeSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/cli-section"
@@ -832,100 +832,100 @@ END_OF_FILE_CONTENT
 mkdir -p "src/components/code-block"
 echo "Creating src/components/code-block/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/code-block/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { Icon } from '@/lib/IconResolver';
-import type { CodeBlockData, CodeBlockSettings } from './types';
-
-export const CodeBlock: React.FC<{ data: CodeBlockData; settings?: CodeBlockSettings }> = ({ data, settings }) => {
-  const showLineNumbers = settings?.showLineNumbers ?? true;
-
-  return (
-    <section
-      style={{
-        '--local-surface': 'var(--card)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-bg': 'var(--background)',
-        '--local-border': 'var(--border)',
-        '--local-text': 'var(--foreground)',
-        '--local-accent': 'var(--primary)',
-        '--local-radius-lg': 'var(--radius)',
-      } as React.CSSProperties}
-      className="py-16 bg-[var(--local-surface)]"
-    >
-      <div className="container mx-auto px-6 max-w-4xl">
-        {data.label && (
-          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[var(--local-text-muted)] mb-4" data-jp-field="label">
-            <Icon name="terminal" size={14} />
-            <span>{data.label}</span>
-          </div>
-        )}
-        <div className="rounded-[var(--local-radius-lg)] bg-[var(--local-bg)] border border-[var(--local-border)] overflow-hidden">
-          <div className="p-6 font-mono text-sm overflow-x-auto">
-            {data.lines.map((line, idx) => (
-              <div key={idx} className="flex items-start gap-4 py-1" data-jp-item-id={(line as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="lines">
-                {showLineNumbers && (
-                  <span className="select-none w-6 text-right text-[var(--local-text-muted)]/50">
-                    {idx + 1}
-                  </span>
-                )}
-                <span
-                  className={cn(
-                    line.isComment
-                      ? 'text-[var(--local-text-muted)]/60'
-                      : 'text-[var(--local-text)]'
-                  )}
-                >
-                  {!line.isComment && (
-                    <span className="text-[var(--local-accent)] mr-2">$</span>
-                  )}
-                  {line.content}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { Icon } from '@/lib/IconResolver';
+import type { CodeBlockData, CodeBlockSettings } from './types';
+
+export const CodeBlock: React.FC<{ data: CodeBlockData; settings?: CodeBlockSettings }> = ({ data, settings }) => {
+  const showLineNumbers = settings?.showLineNumbers ?? true;
+
+  return (
+    <section
+      style={{
+        '--local-surface': 'var(--card)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-bg': 'var(--background)',
+        '--local-border': 'var(--border)',
+        '--local-text': 'var(--foreground)',
+        '--local-accent': 'var(--primary)',
+        '--local-radius-lg': 'var(--radius)',
+      } as React.CSSProperties}
+      className="py-16 bg-[var(--local-surface)]"
+    >
+      <div className="container mx-auto px-6 max-w-4xl">
+        {data.label && (
+          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[var(--local-text-muted)] mb-4" data-jp-field="label">
+            <Icon name="terminal" size={14} />
+            <span>{data.label}</span>
+          </div>
+        )}
+        <div className="rounded-[var(--local-radius-lg)] bg-[var(--local-bg)] border border-[var(--local-border)] overflow-hidden">
+          <div className="p-6 font-mono text-sm overflow-x-auto">
+            {data.lines.map((line, idx) => (
+              <div key={idx} className="flex items-start gap-4 py-1" data-jp-item-id={(line as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="lines">
+                {showLineNumbers && (
+                  <span className="select-none w-6 text-right text-[var(--local-text-muted)]/50">
+                    {idx + 1}
+                  </span>
+                )}
+                <span
+                  className={cn(
+                    line.isComment
+                      ? 'text-[var(--local-text-muted)]/60'
+                      : 'text-[var(--local-text)]'
+                  )}
+                >
+                  {!line.isComment && (
+                    <span className="text-[var(--local-accent)] mr-2">$</span>
+                  )}
+                  {line.content}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/code-block/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/code-block/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/code-block/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/code-block/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData } from '@/lib/base-schemas';
-
-export const LegacyCodeLineSchema = z.object({
-  content: z.string().describe('ui:text'),
-  isComment: z.boolean().default(false).describe('ui:checkbox'),
-});
-
-export const CodeBlockSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  lines: z.array(LegacyCodeLineSchema).describe('ui:list'),
-});
-
-export const CodeBlockSettingsSchema = z.object({
-  showLineNumbers: z.boolean().optional().describe('ui:checkbox'),
-});
+import { z } from 'zod';
+import { BaseSectionData } from '@/lib/base-schemas';
+
+export const LegacyCodeLineSchema = z.object({
+  content: z.string().describe('ui:text'),
+  isComment: z.boolean().default(false).describe('ui:checkbox'),
+});
+
+export const CodeBlockSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  lines: z.array(LegacyCodeLineSchema).describe('ui:list'),
+});
+
+export const CodeBlockSettingsSchema = z.object({
+  showLineNumbers: z.boolean().optional().describe('ui:checkbox'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/code-block/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/code-block/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { CodeBlockSchema, CodeBlockSettingsSchema } from './schema';
-
-export type CodeBlockData = z.infer<typeof CodeBlockSchema>;
-export type CodeBlockSettings = z.infer<typeof BaseSectionSettingsSchema> & z.infer<typeof CodeBlockSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { CodeBlockSchema, CodeBlockSettingsSchema } from './schema';
+
+export type CodeBlockData = z.infer<typeof CodeBlockSchema>;
+export type CodeBlockSettings = z.infer<typeof BaseSectionSettingsSchema> & z.infer<typeof CodeBlockSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/cta-banner"
@@ -1002,9 +1002,9 @@ export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSett
 END_OF_FILE_CONTENT
 echo "Creating src/components/cta-banner/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/cta-banner/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/cta-banner/schema.ts..."
@@ -1542,195 +1542,195 @@ END_OF_FILE_CONTENT
 mkdir -p "src/components/feature-grid"
 echo "Creating src/components/feature-grid/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/feature-grid/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { Icon } from '@/lib/IconResolver';
-import type { FeatureGridData, FeatureGridSettings } from './types';
-
-const columnsMap: Record<2 | 3 | 4, string> = {
-  2: 'md:grid-cols-2',
-  3: 'md:grid-cols-3',
-  4: 'md:grid-cols-4',
-};
-
-export const FeatureGrid: React.FC<{ data: FeatureGridData; settings?: FeatureGridSettings }> = ({ data, settings }) => {
-  const colKey = settings?.columns ?? 3;
-  const cols = (colKey === 2 || colKey === 3 || colKey === 4) ? columnsMap[colKey] : columnsMap[3];
-  const isBordered = settings?.cardStyle === 'bordered';
-
-  const localStyles = {
-    '--local-bg': 'var(--background)',
-    '--local-text': 'var(--foreground)',
-    '--local-text-muted': 'var(--muted-foreground)',
-    '--local-surface': 'var(--card)',
-    '--local-surface-alt': 'var(--muted)',
-    '--local-border': 'var(--border)',
-    '--local-radius-lg': 'var(--radius)',
-    '--local-radius-md': 'calc(var(--radius) - 2px)',
-  } as React.CSSProperties;
-
-  return (
-    <section style={localStyles} className="py-20 bg-[var(--local-bg)] relative z-0">
-      <div className="container mx-auto px-6">
-        <h2 className="text-3xl md:text-4xl font-bold text-center text-[var(--local-text)] mb-16" data-jp-field="sectionTitle">
-          {data.sectionTitle}
-        </h2>
-        <div className={cn('grid grid-cols-1 gap-6', cols)}>
-          {data.cards.map((card, idx) => (
-            <div
-              key={card.id ?? idx}
-              className={cn(
-                'p-6 rounded-[var(--local-radius-lg)] bg-[var(--local-surface)]',
-                isBordered && 'border border-[var(--local-border)]'
-              )}
-              data-jp-item-id={card.id ?? `legacy-${idx}`}
-              data-jp-item-field="cards"
-            >
-              {card.icon && (
-                <div className="w-10 h-10 rounded-[var(--local-radius-md)] bg-[var(--local-surface-alt)] flex items-center justify-center mb-4">
-                  <Icon name={card.icon} size={20} className="text-[var(--local-text-muted)]" />
-                </div>
-              )}
-              <h3 className="text-lg font-semibold text-[var(--local-text)] mb-2">
-                {card.emoji && <span className="mr-2">{card.emoji}</span>}
-                {card.title}
-              </h3>
-              <p className="text-sm text-[var(--local-text-muted)] leading-relaxed">
-                {card.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { Icon } from '@/lib/IconResolver';
+import type { FeatureGridData, FeatureGridSettings } from './types';
+
+const columnsMap: Record<2 | 3 | 4, string> = {
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+};
+
+export const FeatureGrid: React.FC<{ data: FeatureGridData; settings?: FeatureGridSettings }> = ({ data, settings }) => {
+  const colKey = settings?.columns ?? 3;
+  const cols = (colKey === 2 || colKey === 3 || colKey === 4) ? columnsMap[colKey] : columnsMap[3];
+  const isBordered = settings?.cardStyle === 'bordered';
+
+  const localStyles = {
+    '--local-bg': 'var(--background)',
+    '--local-text': 'var(--foreground)',
+    '--local-text-muted': 'var(--muted-foreground)',
+    '--local-surface': 'var(--card)',
+    '--local-surface-alt': 'var(--muted)',
+    '--local-border': 'var(--border)',
+    '--local-radius-lg': 'var(--radius)',
+    '--local-radius-md': 'calc(var(--radius) - 2px)',
+  } as React.CSSProperties;
+
+  return (
+    <section style={localStyles} className="py-20 bg-[var(--local-bg)] relative z-0">
+      <div className="container mx-auto px-6">
+        <h2 className="text-3xl md:text-4xl font-bold text-center text-[var(--local-text)] mb-16" data-jp-field="sectionTitle">
+          {data.sectionTitle}
+        </h2>
+        <div className={cn('grid grid-cols-1 gap-6', cols)}>
+          {data.cards.map((card, idx) => (
+            <div
+              key={card.id ?? idx}
+              className={cn(
+                'p-6 rounded-[var(--local-radius-lg)] bg-[var(--local-surface)]',
+                isBordered && 'border border-[var(--local-border)]'
+              )}
+              data-jp-item-id={card.id ?? `legacy-${idx}`}
+              data-jp-item-field="cards"
+            >
+              {card.icon && (
+                <div className="w-10 h-10 rounded-[var(--local-radius-md)] bg-[var(--local-surface-alt)] flex items-center justify-center mb-4">
+                  <Icon name={card.icon} size={20} className="text-[var(--local-text-muted)]" />
+                </div>
+              )}
+              <h3 className="text-lg font-semibold text-[var(--local-text)] mb-2">
+                {card.emoji && <span className="mr-2">{card.emoji}</span>}
+                {card.title}
+              </h3>
+              <p className="text-sm text-[var(--local-text-muted)] leading-relaxed">
+                {card.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/feature-grid/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/feature-grid/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/feature-grid/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/feature-grid/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-export const FeatureCardSchema = BaseArrayItem.extend({
-  icon: z.string().optional().describe('ui:icon-picker'),
-  emoji: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().describe('ui:textarea'),
-});
-
-export const FeatureGridSchema = BaseSectionData.extend({
-  sectionTitle: z.string().describe('ui:text'),
-  cards: z.array(FeatureCardSchema).describe('ui:list'),
-});
-
-export const FeatureGridSettingsSchema = z.object({
-  columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).optional().describe('ui:number'),
-  cardStyle: z.enum(['plain', 'bordered']).optional().describe('ui:select'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+export const FeatureCardSchema = BaseArrayItem.extend({
+  icon: z.string().optional().describe('ui:icon-picker'),
+  emoji: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().describe('ui:textarea'),
+});
+
+export const FeatureGridSchema = BaseSectionData.extend({
+  sectionTitle: z.string().describe('ui:text'),
+  cards: z.array(FeatureCardSchema).describe('ui:list'),
+});
+
+export const FeatureGridSettingsSchema = z.object({
+  columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).optional().describe('ui:number'),
+  cardStyle: z.enum(['plain', 'bordered']).optional().describe('ui:select'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/feature-grid/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/feature-grid/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { FeatureGridSchema, FeatureGridSettingsSchema } from './schema';
-
-export type FeatureGridData = z.infer<typeof FeatureGridSchema>;
-export type FeatureGridSettings = z.infer<typeof BaseSectionSettingsSchema> & z.infer<typeof FeatureGridSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { FeatureGridSchema, FeatureGridSettingsSchema } from './schema';
+
+export type FeatureGridData = z.infer<typeof FeatureGridSchema>;
+export type FeatureGridSettings = z.infer<typeof BaseSectionSettingsSchema> & z.infer<typeof FeatureGridSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/footer"
 echo "Creating src/components/footer/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/footer/View.tsx"
-import React from 'react';
-import type { FooterData, FooterSettings } from './types';
-
-export const Footer: React.FC<{ data: FooterData; settings?: FooterSettings }> = ({ data }) => {
-  return (
-    <footer
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'rgba(255,255,255,0.05)',
-      } as React.CSSProperties}
-      className="py-12 border-t border-[var(--local-border)] bg-[var(--local-bg)] relative z-0"
-    >
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
-          <div className="flex items-center gap-2 font-bold text-[0.9rem] text-[var(--local-text-muted)]" data-jp-field="brandText">
-            {data.brandText}
-            {data.brandHighlight && (
-              <span className="text-[var(--local-accent)]" data-jp-field="brandHighlight">{data.brandHighlight}</span>
-            )}
-          </div>
-          {data.links && data.links.length > 0 && (
-            <nav className="flex gap-6">
-              {data.links.map((link, idx) => (
-                <a
-                  key={idx}
-                  href={link.href}
-                  className="text-[0.82rem] text-[var(--local-text-muted)] hover:text-[var(--local-accent)] transition-colors no-underline"
-                  data-jp-item-id={(link as { id?: string }).id ?? `legacy-${idx}`}
-                  data-jp-item-field="links"
-                >
-                  {link.label}
-                </a>
-              ))}
-            </nav>
-          )}
-          <div className="text-[0.8rem] text-[var(--local-text-muted)] opacity-60" data-jp-field="copyright">
-            {data.copyright}
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-};
+import React from 'react';
+import type { FooterData, FooterSettings } from './types';
+
+export const Footer: React.FC<{ data: FooterData; settings?: FooterSettings }> = ({ data }) => {
+  return (
+    <footer
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'rgba(255,255,255,0.05)',
+      } as React.CSSProperties}
+      className="py-12 border-t border-[var(--local-border)] bg-[var(--local-bg)] relative z-0"
+    >
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="flex items-center gap-2 font-bold text-[0.9rem] text-[var(--local-text-muted)]" data-jp-field="brandText">
+            {data.brandText}
+            {data.brandHighlight && (
+              <span className="text-[var(--local-accent)]" data-jp-field="brandHighlight">{data.brandHighlight}</span>
+            )}
+          </div>
+          {data.links && data.links.length > 0 && (
+            <nav className="flex gap-6">
+              {data.links.map((link, idx) => (
+                <a
+                  key={idx}
+                  href={link.href}
+                  className="text-[0.82rem] text-[var(--local-text-muted)] hover:text-[var(--local-accent)] transition-colors no-underline"
+                  data-jp-item-id={(link as { id?: string }).id ?? `legacy-${idx}`}
+                  data-jp-item-field="links"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+          )}
+          <div className="text-[0.8rem] text-[var(--local-text-muted)] opacity-60" data-jp-field="copyright">
+            {data.copyright}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/footer/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/footer/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/footer/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/footer/schema.ts"
-import { z } from 'zod';
-
-export const FooterSchema = z.object({
-  brandText: z.string().describe('ui:text'),
-  brandHighlight: z.string().optional().describe('ui:text'),
-  copyright: z.string().describe('ui:text'),
-  links: z.array(z.object({
-    label: z.string().describe('ui:text'),
-    href: z.string().describe('ui:text'),
-  })).optional().describe('ui:list'),
-});
-
-export const FooterSettingsSchema = z.object({
-  showLogo: z.boolean().optional().describe('ui:checkbox'),
-});
+import { z } from 'zod';
+
+export const FooterSchema = z.object({
+  brandText: z.string().describe('ui:text'),
+  brandHighlight: z.string().optional().describe('ui:text'),
+  copyright: z.string().describe('ui:text'),
+  links: z.array(z.object({
+    label: z.string().describe('ui:text'),
+    href: z.string().describe('ui:text'),
+  })).optional().describe('ui:list'),
+});
+
+export const FooterSettingsSchema = z.object({
+  showLogo: z.boolean().optional().describe('ui:checkbox'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/footer/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/footer/types.ts"
-import { z } from 'zod';
-import { FooterSchema, FooterSettingsSchema } from './schema';
-
-export type FooterData = z.infer<typeof FooterSchema>;
-export type FooterSettings = z.infer<typeof FooterSettingsSchema>;
+import { z } from 'zod';
+import { FooterSchema, FooterSettingsSchema } from './schema';
+
+export type FooterData = z.infer<typeof FooterSchema>;
+export type FooterSettings = z.infer<typeof FooterSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/git-section"
@@ -1893,118 +1893,118 @@ END_OF_FILE_CONTENT
 mkdir -p "src/components/header"
 echo "Creating src/components/header/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/header/View.tsx"
-import React, { useState, useEffect } from 'react';
-import { cn } from '@/lib/utils';
-import type { MenuItem } from '@jsonpages/core';
-import type { HeaderData, HeaderSettings } from './types';
-
-export const Header: React.FC<{
-  data: HeaderData;
-  settings?: HeaderSettings;
-  menu: MenuItem[];
-}> = ({ data, menu }) => {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => setScrolled(window.scrollY > 40);
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <header
-      style={{
-        '--local-bg': 'rgba(6,13,27,0.92)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'rgba(59,130,246,0.08)',
-      } as React.CSSProperties}
-      className={cn(
-        'w-full py-4 transition-all duration-300 z-0',
-        scrolled
-          ? 'bg-[var(--local-bg)] backdrop-blur-[20px] border-b border-[var(--local-border)]'
-          : 'bg-transparent border-b border-transparent'
-      )}
-    >
-      <div className="max-w-[1200px] mx-auto px-8 flex justify-between items-center">
-        <a
-          href="/"
-          className="flex items-center gap-2.5 no-underline font-bold text-xl tracking-tight text-[var(--local-text)]"
-        >
-          {data.logoIconText && (
-            <div className="w-8 h-8 rounded-md bg-gradient-to-br from-[var(--local-primary)] to-[var(--local-accent)] flex items-center justify-center font-mono text-[0.8rem] font-bold text-[var(--background)]" data-jp-field="logoIconText">
-              {data.logoIconText}
-            </div>
-          )}
-          <span data-jp-field="logoText">
-            {data.logoText}
-            {data.logoHighlight && (
-              <span className="text-[var(--local-accent)]" data-jp-field="logoHighlight">{data.logoHighlight}</span>
-            )}
-          </span>
-        </a>
-
-        <nav className="hidden md:flex items-center gap-10">
-          {menu.map((item, idx) => (
-            <a
-              key={(item as { id?: string }).id ?? idx}
-              href={item.href}
-              data-jp-item-id={(item as { id?: string }).id ?? `legacy-${idx}`}
-              data-jp-item-field="links"
-              target={item.external ? '_blank' : undefined}
-              rel={item.external ? 'noopener noreferrer' : undefined}
-              className={cn(
-                'no-underline text-sm font-medium transition-colors',
-                item.isCta
-                  ? 'bg-[var(--local-primary)] text-white px-5 py-2 rounded-lg font-semibold hover:brightness-110 hover:-translate-y-px'
-                  : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)]'
-              )}
-            >
-              {item.label}
-            </a>
-          ))}
-        </nav>
-
-        <button
-          type="button"
-          className="md:hidden p-2 text-[var(--local-text-muted)] hover:text-[var(--local-text)]"
-          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
-        >
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            {mobileMenuOpen ? (
-              <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>
-            ) : (
-              <><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></>
-            )}
-          </svg>
-        </button>
-      </div>
-
-      {mobileMenuOpen && (
-        <nav className="md:hidden border-t border-[var(--local-border)] bg-[var(--local-bg)] backdrop-blur-[20px]">
-          <div className="max-w-[1200px] mx-auto px-8 py-4 flex flex-col gap-4">
-            {menu.map((item, idx) => (
-              <a
-                key={(item as { id?: string }).id ?? idx}
-                href={item.href}
-                className="text-base font-medium text-[var(--local-text-muted)] hover:text-[var(--local-text)] transition-colors py-2 no-underline"
-                onClick={() => setMobileMenuOpen(false)}
-                data-jp-item-id={(item as { id?: string }).id ?? `legacy-${idx}`}
-                data-jp-item-field="links"
-              >
-                {item.label}
-              </a>
-            ))}
-          </div>
-        </nav>
-      )}
-    </header>
-  );
-};
+import React, { useState, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+import type { MenuItem } from '@jsonpages/core';
+import type { HeaderData, HeaderSettings } from './types';
+
+export const Header: React.FC<{
+  data: HeaderData;
+  settings?: HeaderSettings;
+  menu: MenuItem[];
+}> = ({ data, menu }) => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 40);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <header
+      style={{
+        '--local-bg': 'rgba(6,13,27,0.92)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'rgba(59,130,246,0.08)',
+      } as React.CSSProperties}
+      className={cn(
+        'w-full py-4 transition-all duration-300 z-0',
+        scrolled
+          ? 'bg-[var(--local-bg)] backdrop-blur-[20px] border-b border-[var(--local-border)]'
+          : 'bg-transparent border-b border-transparent'
+      )}
+    >
+      <div className="max-w-[1200px] mx-auto px-8 flex justify-between items-center">
+        <a
+          href="/"
+          className="flex items-center gap-2.5 no-underline font-bold text-xl tracking-tight text-[var(--local-text)]"
+        >
+          {data.logoIconText && (
+            <div className="w-8 h-8 rounded-md bg-gradient-to-br from-[var(--local-primary)] to-[var(--local-accent)] flex items-center justify-center font-mono text-[0.8rem] font-bold text-[var(--background)]" data-jp-field="logoIconText">
+              {data.logoIconText}
+            </div>
+          )}
+          <span data-jp-field="logoText">
+            {data.logoText}
+            {data.logoHighlight && (
+              <span className="text-[var(--local-accent)]" data-jp-field="logoHighlight">{data.logoHighlight}</span>
+            )}
+          </span>
+        </a>
+
+        <nav className="hidden md:flex items-center gap-10">
+          {menu.map((item, idx) => (
+            <a
+              key={(item as { id?: string }).id ?? idx}
+              href={item.href}
+              data-jp-item-id={(item as { id?: string }).id ?? `legacy-${idx}`}
+              data-jp-item-field="links"
+              target={item.external ? '_blank' : undefined}
+              rel={item.external ? 'noopener noreferrer' : undefined}
+              className={cn(
+                'no-underline text-sm font-medium transition-colors',
+                item.isCta
+                  ? 'bg-[var(--local-primary)] text-white px-5 py-2 rounded-lg font-semibold hover:brightness-110 hover:-translate-y-px'
+                  : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)]'
+              )}
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+
+        <button
+          type="button"
+          className="md:hidden p-2 text-[var(--local-text-muted)] hover:text-[var(--local-text)]"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            {mobileMenuOpen ? (
+              <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>
+            ) : (
+              <><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></>
+            )}
+          </svg>
+        </button>
+      </div>
+
+      {mobileMenuOpen && (
+        <nav className="md:hidden border-t border-[var(--local-border)] bg-[var(--local-bg)] backdrop-blur-[20px]">
+          <div className="max-w-[1200px] mx-auto px-8 py-4 flex flex-col gap-4">
+            {menu.map((item, idx) => (
+              <a
+                key={(item as { id?: string }).id ?? idx}
+                href={item.href}
+                className="text-base font-medium text-[var(--local-text-muted)] hover:text-[var(--local-text)] transition-colors py-2 no-underline"
+                onClick={() => setMobileMenuOpen(false)}
+                data-jp-item-id={(item as { id?: string }).id ?? `legacy-${idx}`}
+                data-jp-item-field="links"
+              >
+                {item.label}
+              </a>
+            ))}
+          </div>
+        </nav>
+      )}
+    </header>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/header/index.ts..."
@@ -2280,39 +2280,39 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
 END_OF_FILE_CONTENT
 echo "Creating src/components/hero/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/hero/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/hero/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/hero/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, CtaSchema } from '@/lib/base-schemas';
-
-const HeroMetricSchema = z.object({
-  val: z.string().describe('ui:text'),
-  label: z.string().describe('ui:text'),
-});
-
-export const HeroSchema = BaseSectionData.extend({
-  badge: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  titleHighlight: z.string().optional().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  ctas: z.array(CtaSchema).optional().describe('ui:list'),
-  metrics: z.array(HeroMetricSchema).optional().describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, CtaSchema } from '@/lib/base-schemas';
+
+const HeroMetricSchema = z.object({
+  val: z.string().describe('ui:text'),
+  label: z.string().describe('ui:text'),
+});
+
+export const HeroSchema = BaseSectionData.extend({
+  badge: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  titleHighlight: z.string().optional().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  ctas: z.array(CtaSchema).optional().describe('ui:list'),
+  metrics: z.array(HeroMetricSchema).optional().describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/hero/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/hero/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { HeroSchema } from './schema';
-
-export type HeroData = z.infer<typeof HeroSchema>;
-export type HeroSettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { HeroSchema } from './schema';
+
+export type HeroData = z.infer<typeof HeroSchema>;
+export type HeroSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/image-break"
@@ -2399,646 +2399,646 @@ mkdir -p "src/components/image-test"
 mkdir -p "src/components/pa-section"
 echo "Creating src/components/pa-section/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pa-section/View.tsx"
-import React from 'react';
-import type { PaSectionData, PaSectionSettings } from './types';
-
-export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--card)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-deep': 'var(--background)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
-      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
-      <div className="max-w-[1200px] mx-auto px-8">
-        {data.label && (
-          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-            <span className="w-5 h-px bg-[var(--local-primary)]" />
-            {data.label}
-          </div>
-        )}
-        <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-          {data.title}
-        </h2>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
-          <div>
-            <h3 className="text-2xl font-bold text-[var(--local-text)] mb-4" data-jp-field="subtitle">
-              {data.subtitle}
-            </h3>
-            {data.paragraphs.map((p, idx) => (
-              <p key={idx} className="text-[var(--local-text-muted)] mb-5 text-[1.05rem] leading-relaxed" data-jp-item-id={(p as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="paragraphs">
-                {p.text}
-              </p>
-            ))}
-            {data.badges && data.badges.length > 0 && (
-              <div className="flex gap-2.5 flex-wrap mt-4">
-                {data.badges.map((badge, idx) => (
-                  <span
-                    key={idx}
-                    className="inline-flex items-center gap-1.5 bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.2)] text-[#4ade80] px-3 py-1.5 rounded-md text-[0.78rem] font-semibold"
-                    data-jp-item-id={(badge as { id?: string }).id ?? `legacy-${idx}`}
-                    data-jp-item-field="badges"
-                  >
-                    {badge.label}
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
-          <div className="border border-[rgba(255,255,255,0.06)] rounded-lg p-12 bg-[rgba(255,255,255,0.02)] text-center">
-            {data.engines && data.engines.length >= 2 && (
-              <div className="flex items-center justify-center gap-6 mb-8">
-                {data.engines.map((engine, idx) => (
-                  <React.Fragment key={idx}>
-                    {idx > 0 && (
-                      <span className="text-[var(--local-text-muted)] text-2xl opacity-50">⇄</span>
-                    )}
-                    <div
-                      className={
-                        engine.variant === 'tailwind'
-                          ? 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.2)] text-[#60a5fa]'
-                          : 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.2)] text-[#4ade80]'
-                      }
-                      data-jp-item-id={(engine as { id?: string }).id ?? `legacy-${idx}`}
-                      data-jp-item-field="engines"
-                    >
-                      {engine.label}
-                    </div>
-                  </React.Fragment>
-                ))}
-              </div>
-            )}
-            {data.codeSnippet && (
-              <div className="font-mono text-[0.85rem] text-[var(--local-text-muted)] bg-[var(--local-deep)] p-4 rounded-lg text-left border border-[rgba(255,255,255,0.04)]" data-jp-field="codeSnippet">
-                <pre className="whitespace-pre-wrap m-0">{data.codeSnippet}</pre>
-                <div className="mt-4 text-[0.75rem] text-center opacity-50">
-                  Same JSON. Different Render Engine.
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import type { PaSectionData, PaSectionSettings } from './types';
+
+export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--card)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-deep': 'var(--background)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
+      <div className="max-w-[1200px] mx-auto px-8">
+        {data.label && (
+          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+            <span className="w-5 h-px bg-[var(--local-primary)]" />
+            {data.label}
+          </div>
+        )}
+        <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+          {data.title}
+        </h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
+          <div>
+            <h3 className="text-2xl font-bold text-[var(--local-text)] mb-4" data-jp-field="subtitle">
+              {data.subtitle}
+            </h3>
+            {data.paragraphs.map((p, idx) => (
+              <p key={idx} className="text-[var(--local-text-muted)] mb-5 text-[1.05rem] leading-relaxed" data-jp-item-id={(p as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="paragraphs">
+                {p.text}
+              </p>
+            ))}
+            {data.badges && data.badges.length > 0 && (
+              <div className="flex gap-2.5 flex-wrap mt-4">
+                {data.badges.map((badge, idx) => (
+                  <span
+                    key={idx}
+                    className="inline-flex items-center gap-1.5 bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.2)] text-[#4ade80] px-3 py-1.5 rounded-md text-[0.78rem] font-semibold"
+                    data-jp-item-id={(badge as { id?: string }).id ?? `legacy-${idx}`}
+                    data-jp-item-field="badges"
+                  >
+                    {badge.label}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="border border-[rgba(255,255,255,0.06)] rounded-lg p-12 bg-[rgba(255,255,255,0.02)] text-center">
+            {data.engines && data.engines.length >= 2 && (
+              <div className="flex items-center justify-center gap-6 mb-8">
+                {data.engines.map((engine, idx) => (
+                  <React.Fragment key={idx}>
+                    {idx > 0 && (
+                      <span className="text-[var(--local-text-muted)] text-2xl opacity-50">⇄</span>
+                    )}
+                    <div
+                      className={
+                        engine.variant === 'tailwind'
+                          ? 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.2)] text-[#60a5fa]'
+                          : 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.2)] text-[#4ade80]'
+                      }
+                      data-jp-item-id={(engine as { id?: string }).id ?? `legacy-${idx}`}
+                      data-jp-item-field="engines"
+                    >
+                      {engine.label}
+                    </div>
+                  </React.Fragment>
+                ))}
+              </div>
+            )}
+            {data.codeSnippet && (
+              <div className="font-mono text-[0.85rem] text-[var(--local-text-muted)] bg-[var(--local-deep)] p-4 rounded-lg text-left border border-[rgba(255,255,255,0.04)]" data-jp-field="codeSnippet">
+                <pre className="whitespace-pre-wrap m-0">{data.codeSnippet}</pre>
+                <div className="mt-4 text-[0.75rem] text-center opacity-50">
+                  Same JSON. Different Render Engine.
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pa-section/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pa-section/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pa-section/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pa-section/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData } from '@/lib/base-schemas';
-
-const PaBadgeSchema = z.object({
-  label: z.string().describe('ui:text'),
-});
-
-const PaEngineSchema = z.object({
-  label: z.string().describe('ui:text'),
-  variant: z.enum(['tailwind', 'bootstrap']).describe('ui:select'),
-});
-
-export const PaSectionSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  subtitle: z.string().describe('ui:text'),
-  paragraphs: z.array(z.object({ text: z.string().describe('ui:textarea') })).describe('ui:list'),
-  badges: z.array(PaBadgeSchema).optional().describe('ui:list'),
-  engines: z.array(PaEngineSchema).optional().describe('ui:list'),
-  codeSnippet: z.string().optional().describe('ui:textarea'),
-});
+import { z } from 'zod';
+import { BaseSectionData } from '@/lib/base-schemas';
+
+const PaBadgeSchema = z.object({
+  label: z.string().describe('ui:text'),
+});
+
+const PaEngineSchema = z.object({
+  label: z.string().describe('ui:text'),
+  variant: z.enum(['tailwind', 'bootstrap']).describe('ui:select'),
+});
+
+export const PaSectionSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  subtitle: z.string().describe('ui:text'),
+  paragraphs: z.array(z.object({ text: z.string().describe('ui:textarea') })).describe('ui:list'),
+  badges: z.array(PaBadgeSchema).optional().describe('ui:list'),
+  engines: z.array(PaEngineSchema).optional().describe('ui:list'),
+  codeSnippet: z.string().optional().describe('ui:textarea'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pa-section/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pa-section/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { PaSectionSchema } from './schema';
-
-export type PaSectionData = z.infer<typeof PaSectionSchema>;
-export type PaSectionSettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { PaSectionSchema } from './schema';
+
+export type PaSectionData = z.infer<typeof PaSectionSchema>;
+export type PaSectionSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/philosophy"
 echo "Creating src/components/philosophy/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/philosophy/View.tsx"
-import React from 'react';
-import type { PhilosophyData, PhilosophySettings } from './types';
-
-export const Philosophy: React.FC<{ data: PhilosophyData; settings?: PhilosophySettings }> = ({ data }) => {
-  const renderQuote = () => {
-    if (!data.quoteHighlightWord) {
-      return <>{data.quote}</>;
-    }
-    const parts = data.quote.split(data.quoteHighlightWord);
-    return (
-      <>
-        {parts.map((part, idx) => (
-          <React.Fragment key={idx}>
-            {part}
-            {idx < parts.length - 1 && (
-              <em className="not-italic text-[var(--local-accent)]">
-                {data.quoteHighlightWord}
-              </em>
-            )}
-          </React.Fragment>
-        ))}
-      </>
-    );
-  };
-
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-primary': 'var(--primary)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="max-w-[760px] mx-auto text-center">
-          {data.label && (
-            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-              <span className="w-5 h-px bg-[var(--local-primary)]" />
-              {data.label}
-            </div>
-          )}
-          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-            {data.title}
-          </h2>
-          <blockquote className="font-display text-[clamp(1.6rem,3vw,2.4rem)] text-[var(--local-text)] font-bold leading-[1.35] my-8" data-jp-field="quote">
-            &ldquo;{renderQuote()}&rdquo;
-          </blockquote>
-          {data.description && (
-            <p className="text-[1.05rem] text-[var(--local-text-muted)] max-w-[560px] mx-auto leading-relaxed" data-jp-field="description">
-              {data.description}
-            </p>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import type { PhilosophyData, PhilosophySettings } from './types';
+
+export const Philosophy: React.FC<{ data: PhilosophyData; settings?: PhilosophySettings }> = ({ data }) => {
+  const renderQuote = () => {
+    if (!data.quoteHighlightWord) {
+      return <>{data.quote}</>;
+    }
+    const parts = data.quote.split(data.quoteHighlightWord);
+    return (
+      <>
+        {parts.map((part, idx) => (
+          <React.Fragment key={idx}>
+            {part}
+            {idx < parts.length - 1 && (
+              <em className="not-italic text-[var(--local-accent)]">
+                {data.quoteHighlightWord}
+              </em>
+            )}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-primary': 'var(--primary)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="max-w-[760px] mx-auto text-center">
+          {data.label && (
+            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+              <span className="w-5 h-px bg-[var(--local-primary)]" />
+              {data.label}
+            </div>
+          )}
+          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+            {data.title}
+          </h2>
+          <blockquote className="font-display text-[clamp(1.6rem,3vw,2.4rem)] text-[var(--local-text)] font-bold leading-[1.35] my-8" data-jp-field="quote">
+            &ldquo;{renderQuote()}&rdquo;
+          </blockquote>
+          {data.description && (
+            <p className="text-[1.05rem] text-[var(--local-text-muted)] max-w-[560px] mx-auto leading-relaxed" data-jp-field="description">
+              {data.description}
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/philosophy/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/philosophy/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/philosophy/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/philosophy/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData } from '@/lib/base-schemas';
-
-export const PhilosophySchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  quote: z.string().describe('ui:textarea'),
-  quoteHighlightWord: z.string().optional().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-});
+import { z } from 'zod';
+import { BaseSectionData } from '@/lib/base-schemas';
+
+export const PhilosophySchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  quote: z.string().describe('ui:textarea'),
+  quoteHighlightWord: z.string().optional().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/philosophy/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/philosophy/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { PhilosophySchema } from './schema';
-
-export type PhilosophyData = z.infer<typeof PhilosophySchema>;
-export type PhilosophySettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { PhilosophySchema } from './schema';
+
+export type PhilosophyData = z.infer<typeof PhilosophySchema>;
+export type PhilosophySettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/pillars-grid"
 echo "Creating src/components/pillars-grid/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pillars-grid/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { Icon, isIconName } from '@/lib/IconResolver';
-import type { PillarsGridData, PillarsGridSettings, PillarIconVariant, PillarTagVariant } from './types';
-
-const iconVariantStyles: Record<PillarIconVariant, string> = {
-  split: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
-  registry: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
-  federation: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
-};
-
-const tagVariantStyles: Record<PillarTagVariant, string> = {
-  core: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
-  pattern: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
-  enterprise: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
-};
-
-export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGridSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'var(--border)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.15)] to-transparent" />
-      <div className="max-w-[1200px] mx-auto px-8">
-        {data.label && (
-          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-            <span className="w-5 h-px bg-[var(--local-primary)]" />
-            {data.label}
-          </div>
-        )}
-        <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-          {data.title}
-        </h2>
-        {data.description && (
-          <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] leading-relaxed" data-jp-field="description">
-            {data.description}
-          </p>
-        )}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-14">
-          {data.pillars.map((pillar, idx) => (
-            <div
-              key={pillar.id ?? idx}
-              className="jp-pillar-card group relative border border-[rgba(255,255,255,0.06)] rounded-lg p-10 bg-[rgba(255,255,255,0.015)] transition-all duration-300 overflow-hidden hover:border-[rgba(59,130,246,0.2)] hover:-translate-y-1 hover:bg-[rgba(59,130,246,0.03)]"
-              data-jp-item-id={pillar.id ?? `legacy-${idx}`}
-              data-jp-item-field="pillars"
-            >
-              <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[var(--local-primary)] to-[#22d3ee] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-              <div className={cn(
-                'w-12 h-12 rounded-xl flex items-center justify-center mb-6 text-xl font-bold',
-                iconVariantStyles[pillar.iconVariant]
-              )}>
-                {pillar.icon && isIconName(pillar.icon) ? (
-                  <Icon name={pillar.icon} size={24} className="shrink-0" />
-                ) : pillar.icon ? (
-                  <span>{pillar.icon}</span>
-                ) : null}
-              </div>
-              <h3 className="text-xl font-bold text-[var(--local-text)] mb-3">
-                {pillar.title}
-              </h3>
-              <p className="text-[0.95rem] text-[var(--local-text-muted)] leading-relaxed">
-                {pillar.description}
-              </p>
-              <span className={cn(
-                'inline-block text-[0.7rem] font-semibold uppercase tracking-wide px-3 py-1 rounded mt-4',
-                tagVariantStyles[pillar.tagVariant]
-              )}>
-                {pillar.tag}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { Icon, isIconName } from '@/lib/IconResolver';
+import type { PillarsGridData, PillarsGridSettings, PillarIconVariant, PillarTagVariant } from './types';
+
+const iconVariantStyles: Record<PillarIconVariant, string> = {
+  split: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
+  registry: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
+  federation: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
+};
+
+const tagVariantStyles: Record<PillarTagVariant, string> = {
+  core: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
+  pattern: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
+  enterprise: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
+};
+
+export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGridSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'var(--border)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.15)] to-transparent" />
+      <div className="max-w-[1200px] mx-auto px-8">
+        {data.label && (
+          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+            <span className="w-5 h-px bg-[var(--local-primary)]" />
+            {data.label}
+          </div>
+        )}
+        <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+          {data.title}
+        </h2>
+        {data.description && (
+          <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] leading-relaxed" data-jp-field="description">
+            {data.description}
+          </p>
+        )}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-14">
+          {data.pillars.map((pillar, idx) => (
+            <div
+              key={pillar.id ?? idx}
+              className="jp-pillar-card group relative border border-[rgba(255,255,255,0.06)] rounded-lg p-10 bg-[rgba(255,255,255,0.015)] transition-all duration-300 overflow-hidden hover:border-[rgba(59,130,246,0.2)] hover:-translate-y-1 hover:bg-[rgba(59,130,246,0.03)]"
+              data-jp-item-id={pillar.id ?? `legacy-${idx}`}
+              data-jp-item-field="pillars"
+            >
+              <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[var(--local-primary)] to-[#22d3ee] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <div className={cn(
+                'w-12 h-12 rounded-xl flex items-center justify-center mb-6 text-xl font-bold',
+                iconVariantStyles[pillar.iconVariant]
+              )}>
+                {pillar.icon && isIconName(pillar.icon) ? (
+                  <Icon name={pillar.icon} size={24} className="shrink-0" />
+                ) : pillar.icon ? (
+                  <span>{pillar.icon}</span>
+                ) : null}
+              </div>
+              <h3 className="text-xl font-bold text-[var(--local-text)] mb-3">
+                {pillar.title}
+              </h3>
+              <p className="text-[0.95rem] text-[var(--local-text-muted)] leading-relaxed">
+                {pillar.description}
+              </p>
+              <span className={cn(
+                'inline-block text-[0.7rem] font-semibold uppercase tracking-wide px-3 py-1 rounded mt-4',
+                tagVariantStyles[pillar.tagVariant]
+              )}>
+                {pillar.tag}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pillars-grid/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pillars-grid/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pillars-grid/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pillars-grid/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-export const PillarIconVariantSchema = z.enum(['split', 'registry', 'federation']);
-export const PillarTagVariantSchema = z.enum(['core', 'pattern', 'enterprise']);
-
-const PillarCardSchema = BaseArrayItem.extend({
-  icon: z.string().describe('ui:icon-picker'),
-  iconVariant: PillarIconVariantSchema.describe('ui:select'),
-  title: z.string().describe('ui:text'),
-  description: z.string().describe('ui:textarea'),
-  tag: z.string().describe('ui:text'),
-  tagVariant: PillarTagVariantSchema.describe('ui:select'),
-});
-
-export const PillarsGridSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  pillars: z.array(PillarCardSchema).describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+export const PillarIconVariantSchema = z.enum(['split', 'registry', 'federation']);
+export const PillarTagVariantSchema = z.enum(['core', 'pattern', 'enterprise']);
+
+const PillarCardSchema = BaseArrayItem.extend({
+  icon: z.string().describe('ui:icon-picker'),
+  iconVariant: PillarIconVariantSchema.describe('ui:select'),
+  title: z.string().describe('ui:text'),
+  description: z.string().describe('ui:textarea'),
+  tag: z.string().describe('ui:text'),
+  tagVariant: PillarTagVariantSchema.describe('ui:select'),
+});
+
+export const PillarsGridSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  pillars: z.array(PillarCardSchema).describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pillars-grid/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pillars-grid/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { PillarsGridSchema, PillarIconVariantSchema, PillarTagVariantSchema } from './schema';
-
-export type PillarsGridData = z.infer<typeof PillarsGridSchema>;
-export type PillarsGridSettings = z.infer<typeof BaseSectionSettingsSchema>;
-export type PillarIconVariant = z.infer<typeof PillarIconVariantSchema>;
-export type PillarTagVariant = z.infer<typeof PillarTagVariantSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { PillarsGridSchema, PillarIconVariantSchema, PillarTagVariantSchema } from './schema';
+
+export type PillarsGridData = z.infer<typeof PillarsGridSchema>;
+export type PillarsGridSettings = z.infer<typeof BaseSectionSettingsSchema>;
+export type PillarIconVariant = z.infer<typeof PillarIconVariantSchema>;
+export type PillarTagVariant = z.infer<typeof PillarTagVariantSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/problem-statement"
 echo "Creating src/components/problem-statement/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/problem-statement/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { ProblemStatementData, ProblemStatementSettings, SiloBlockVariant } from './types';
-
-const variantStyles: Record<SiloBlockVariant, string> = {
-  red: 'bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-[#f87171]',
-  amber: 'bg-[rgba(245,158,11,0.08)] border-[rgba(245,158,11,0.3)] text-[#fbbf24]',
-  green: 'bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.3)] text-[#4ade80]',
-  blue: 'bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.3)] text-[#60a5fa]',
-};
-
-export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?: ProblemStatementSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-surface': 'var(--card)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-border': 'var(--border)',
-      } as React.CSSProperties}
-      className="jp-problem relative z-0 py-28 bg-gradient-to-b from-[var(--local-bg)] to-[var(--local-surface)]"
-    >
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[360px] border border-[rgba(255,255,255,0.06)] rounded-lg bg-[rgba(255,255,255,0.02)] overflow-hidden flex items-center justify-center">
-            <div className="text-center p-8">
-              {data.siloGroups.map((group, gIdx) => (
-                <div
-                  key={gIdx}
-                  className="mb-4"
-                  data-jp-item-id={(group as { id?: string }).id ?? `legacy-${gIdx}`}
-                  data-jp-item-field="siloGroups"
-                >
-                  <div className="flex flex-wrap justify-center gap-1.5">
-                    {group.blocks.map((block, bIdx) => (
-                      <span
-                        key={(block as { id?: string }).id ?? bIdx}
-                        className={cn(
-                          'inline-block px-4 py-2 rounded-lg text-[0.8rem] font-semibold border',
-                          variantStyles[block.variant]
-                        )}
-                        data-jp-item-id={(block as { id?: string }).id ?? `legacy-${bIdx}`}
-                        data-jp-item-field="blocks"
-                      >
-                        {block.label}
-                      </span>
-                    ))}
-                  </div>
-                  <span className="text-[0.7rem] text-[var(--local-text-muted)] uppercase tracking-widest mt-2 block opacity-60">
-                    {group.label}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div>
-            <h3 className="text-2xl font-bold text-[var(--local-text)] mb-4" data-jp-field="title">
-              {data.title}
-            </h3>
-            {data.paragraphs.map((p, idx) => (
-              <p
-                key={idx}
-                className="text-[var(--local-text-muted)] mb-5 text-[1.05rem] leading-relaxed"
-                data-jp-item-id={(p as { id?: string }).id ?? `legacy-${idx}`}
-                data-jp-item-field="paragraphs"
-              >
-                {p.isBold ? <strong className="text-[var(--local-text)]">{p.text}</strong> : p.text}
-              </p>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { ProblemStatementData, ProblemStatementSettings, SiloBlockVariant } from './types';
+
+const variantStyles: Record<SiloBlockVariant, string> = {
+  red: 'bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-[#f87171]',
+  amber: 'bg-[rgba(245,158,11,0.08)] border-[rgba(245,158,11,0.3)] text-[#fbbf24]',
+  green: 'bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.3)] text-[#4ade80]',
+  blue: 'bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.3)] text-[#60a5fa]',
+};
+
+export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?: ProblemStatementSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-surface': 'var(--card)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-border': 'var(--border)',
+      } as React.CSSProperties}
+      className="jp-problem relative z-0 py-28 bg-gradient-to-b from-[var(--local-bg)] to-[var(--local-surface)]"
+    >
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div className="relative h-[360px] border border-[rgba(255,255,255,0.06)] rounded-lg bg-[rgba(255,255,255,0.02)] overflow-hidden flex items-center justify-center">
+            <div className="text-center p-8">
+              {data.siloGroups.map((group, gIdx) => (
+                <div
+                  key={gIdx}
+                  className="mb-4"
+                  data-jp-item-id={(group as { id?: string }).id ?? `legacy-${gIdx}`}
+                  data-jp-item-field="siloGroups"
+                >
+                  <div className="flex flex-wrap justify-center gap-1.5">
+                    {group.blocks.map((block, bIdx) => (
+                      <span
+                        key={(block as { id?: string }).id ?? bIdx}
+                        className={cn(
+                          'inline-block px-4 py-2 rounded-lg text-[0.8rem] font-semibold border',
+                          variantStyles[block.variant]
+                        )}
+                        data-jp-item-id={(block as { id?: string }).id ?? `legacy-${bIdx}`}
+                        data-jp-item-field="blocks"
+                      >
+                        {block.label}
+                      </span>
+                    ))}
+                  </div>
+                  <span className="text-[0.7rem] text-[var(--local-text-muted)] uppercase tracking-widest mt-2 block opacity-60">
+                    {group.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <h3 className="text-2xl font-bold text-[var(--local-text)] mb-4" data-jp-field="title">
+              {data.title}
+            </h3>
+            {data.paragraphs.map((p, idx) => (
+              <p
+                key={idx}
+                className="text-[var(--local-text-muted)] mb-5 text-[1.05rem] leading-relaxed"
+                data-jp-item-id={(p as { id?: string }).id ?? `legacy-${idx}`}
+                data-jp-item-field="paragraphs"
+              >
+                {p.isBold ? <strong className="text-[var(--local-text)]">{p.text}</strong> : p.text}
+              </p>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/problem-statement/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/problem-statement/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/problem-statement/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/problem-statement/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-export const SiloBlockVariantSchema = z.enum(['red', 'amber', 'green', 'blue']);
-const SiloBlockSchema = BaseArrayItem.extend({
-  label: z.string().describe('ui:text'),
-  variant: SiloBlockVariantSchema.describe('ui:select'),
-});
-
-const SiloGroupSchema = BaseArrayItem.extend({
-  blocks: z.array(SiloBlockSchema).describe('ui:list'),
-  label: z.string().describe('ui:text'),
-});
-
-const ProblemParagraphSchema = BaseArrayItem.extend({
-  text: z.string().describe('ui:textarea'),
-  isBold: z.boolean().default(false).describe('ui:checkbox'),
-});
-
-export const ProblemStatementSchema = BaseSectionData.extend({
-  siloGroups: z.array(SiloGroupSchema).describe('ui:list'),
-  title: z.string().describe('ui:text'),
-  paragraphs: z.array(ProblemParagraphSchema).describe('ui:list'),
-  highlight: z.string().optional().describe('ui:text'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+export const SiloBlockVariantSchema = z.enum(['red', 'amber', 'green', 'blue']);
+const SiloBlockSchema = BaseArrayItem.extend({
+  label: z.string().describe('ui:text'),
+  variant: SiloBlockVariantSchema.describe('ui:select'),
+});
+
+const SiloGroupSchema = BaseArrayItem.extend({
+  blocks: z.array(SiloBlockSchema).describe('ui:list'),
+  label: z.string().describe('ui:text'),
+});
+
+const ProblemParagraphSchema = BaseArrayItem.extend({
+  text: z.string().describe('ui:textarea'),
+  isBold: z.boolean().default(false).describe('ui:checkbox'),
+});
+
+export const ProblemStatementSchema = BaseSectionData.extend({
+  siloGroups: z.array(SiloGroupSchema).describe('ui:list'),
+  title: z.string().describe('ui:text'),
+  paragraphs: z.array(ProblemParagraphSchema).describe('ui:list'),
+  highlight: z.string().optional().describe('ui:text'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/problem-statement/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/problem-statement/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { ProblemStatementSchema, SiloBlockVariantSchema } from './schema';
-
-export type ProblemStatementData = z.infer<typeof ProblemStatementSchema>;
-export type ProblemStatementSettings = z.infer<typeof BaseSectionSettingsSchema>;
-export type SiloBlockVariant = z.infer<typeof SiloBlockVariantSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { ProblemStatementSchema, SiloBlockVariantSchema } from './schema';
+
+export type ProblemStatementData = z.infer<typeof ProblemStatementSchema>;
+export type ProblemStatementSettings = z.infer<typeof BaseSectionSettingsSchema>;
+export type SiloBlockVariant = z.infer<typeof SiloBlockVariantSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/product-triad"
 echo "Creating src/components/product-triad/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/product-triad/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { ProductTriadData, ProductTriadSettings } from './types';
-
-export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: ProductTriadSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'var(--border)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="text-center">
-          {data.label && (
-            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-              <span className="w-5 h-px bg-[var(--local-primary)]" />
-              {data.label}
-            </div>
-          )}
-          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-            {data.title}
-          </h2>
-          {data.description && (
-            <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed" data-jp-field="description">
-              {data.description}
-            </p>
-          )}
-        </div>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-14">
-          {data.products.map((product, idx) => (
-            <div
-              key={product.id ?? idx}
-              className={cn(
-                'relative border rounded-lg p-10 transition-all duration-300 hover:-translate-y-1',
-                product.featured
-                  ? 'border-[rgba(59,130,246,0.3)] bg-gradient-to-b from-[rgba(59,130,246,0.06)] to-[rgba(59,130,246,0.01)] hover:border-[rgba(59,130,246,0.4)]'
-                  : 'border-[rgba(255,255,255,0.06)] bg-[rgba(255,255,255,0.015)] hover:border-[rgba(59,130,246,0.2)]'
-              )}
-              data-jp-item-id={product.id ?? `legacy-${idx}`}
-              data-jp-item-field="products"
-            >
-              {product.featured && (
-                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--local-primary)] text-white text-[0.7rem] font-bold px-4 py-1 rounded-full uppercase tracking-wide">
-                  Most Popular
-                </div>
-              )}
-              <div className="text-[0.75rem] font-bold uppercase tracking-[0.1em] text-[var(--local-accent)] mb-2">
-                {product.tier}
-              </div>
-              <div className="text-2xl font-extrabold text-[var(--local-text)] mb-2">
-                {product.name}
-              </div>
-              <div className="font-display text-[2.2rem] font-extrabold text-[var(--local-text)] mb-1">
-                {product.price}
-                {product.priceSuffix && (
-                  <span className="text-[0.9rem] font-normal text-[var(--local-text-muted)]">
-                    {product.priceSuffix}
-                  </span>
-                )}
-              </div>
-              <div className="text-[0.85rem] text-[var(--local-text-muted)] mb-6 pb-6 border-b border-[rgba(255,255,255,0.06)]">
-                {product.delivery}
-              </div>
-              <ul className="mb-8 space-y-0">
-                {product.features.map((feature, fIdx) => (
-                  <li
-                    key={fIdx}
-                    className="text-[0.9rem] text-[#cbd5e1] py-1.5 pl-6 relative before:content-['✓'] before:absolute before:left-0 before:text-[var(--local-accent)] before:font-bold before:text-[0.8rem]"
-                  >
-                    {feature.text}
-                  </li>
-                ))}
-              </ul>
-              {product.ctaLabel && product.ctaHref && (
-                <a
-                  href={product.ctaHref}
-                  className={cn(
-                    'block text-center py-3 rounded-[5px] no-underline font-semibold text-[0.95rem] transition-all duration-200',
-                    product.ctaVariant === 'primary'
-                      ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-px'
-                      : 'bg-[rgba(255,255,255,0.05)] text-[#e2e8f0] border border-[rgba(255,255,255,0.1)] hover:bg-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.2)]'
-                  )}
-                >
-                  {product.ctaLabel}
-                </a>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { ProductTriadData, ProductTriadSettings } from './types';
+
+export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: ProductTriadSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'var(--border)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="text-center">
+          {data.label && (
+            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+              <span className="w-5 h-px bg-[var(--local-primary)]" />
+              {data.label}
+            </div>
+          )}
+          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+            {data.title}
+          </h2>
+          {data.description && (
+            <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed" data-jp-field="description">
+              {data.description}
+            </p>
+          )}
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-14">
+          {data.products.map((product, idx) => (
+            <div
+              key={product.id ?? idx}
+              className={cn(
+                'relative border rounded-lg p-10 transition-all duration-300 hover:-translate-y-1',
+                product.featured
+                  ? 'border-[rgba(59,130,246,0.3)] bg-gradient-to-b from-[rgba(59,130,246,0.06)] to-[rgba(59,130,246,0.01)] hover:border-[rgba(59,130,246,0.4)]'
+                  : 'border-[rgba(255,255,255,0.06)] bg-[rgba(255,255,255,0.015)] hover:border-[rgba(59,130,246,0.2)]'
+              )}
+              data-jp-item-id={product.id ?? `legacy-${idx}`}
+              data-jp-item-field="products"
+            >
+              {product.featured && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--local-primary)] text-white text-[0.7rem] font-bold px-4 py-1 rounded-full uppercase tracking-wide">
+                  Most Popular
+                </div>
+              )}
+              <div className="text-[0.75rem] font-bold uppercase tracking-[0.1em] text-[var(--local-accent)] mb-2">
+                {product.tier}
+              </div>
+              <div className="text-2xl font-extrabold text-[var(--local-text)] mb-2">
+                {product.name}
+              </div>
+              <div className="font-display text-[2.2rem] font-extrabold text-[var(--local-text)] mb-1">
+                {product.price}
+                {product.priceSuffix && (
+                  <span className="text-[0.9rem] font-normal text-[var(--local-text-muted)]">
+                    {product.priceSuffix}
+                  </span>
+                )}
+              </div>
+              <div className="text-[0.85rem] text-[var(--local-text-muted)] mb-6 pb-6 border-b border-[rgba(255,255,255,0.06)]">
+                {product.delivery}
+              </div>
+              <ul className="mb-8 space-y-0">
+                {product.features.map((feature, fIdx) => (
+                  <li
+                    key={fIdx}
+                    className="text-[0.9rem] text-[#cbd5e1] py-1.5 pl-6 relative before:content-['✓'] before:absolute before:left-0 before:text-[var(--local-accent)] before:font-bold before:text-[0.8rem]"
+                  >
+                    {feature.text}
+                  </li>
+                ))}
+              </ul>
+              {product.ctaLabel && product.ctaHref && (
+                <a
+                  href={product.ctaHref}
+                  className={cn(
+                    'block text-center py-3 rounded-[5px] no-underline font-semibold text-[0.95rem] transition-all duration-200',
+                    product.ctaVariant === 'primary'
+                      ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-px'
+                      : 'bg-[rgba(255,255,255,0.05)] text-[#e2e8f0] border border-[rgba(255,255,255,0.1)] hover:bg-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.2)]'
+                  )}
+                >
+                  {product.ctaLabel}
+                </a>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/product-triad/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/product-triad/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/product-triad/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/product-triad/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-const ProductFeatureSchema = z.object({
-  text: z.string().describe('ui:text'),
-});
-
-const ProductCardSchema = BaseArrayItem.extend({
-  tier: z.string().describe('ui:text'),
-  name: z.string().describe('ui:text'),
-  price: z.string().describe('ui:text'),
-  priceSuffix: z.string().optional().describe('ui:text'),
-  delivery: z.string().describe('ui:text'),
-  features: z.array(ProductFeatureSchema).describe('ui:list'),
-  featured: z.boolean().default(false).describe('ui:checkbox'),
-  ctaLabel: z.string().optional().describe('ui:text'),
-  ctaHref: z.string().optional().describe('ui:text'),
-  ctaVariant: z.enum(['primary', 'secondary']).default('secondary').describe('ui:select'),
-});
-
-export const ProductTriadSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  products: z.array(ProductCardSchema).describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+const ProductFeatureSchema = z.object({
+  text: z.string().describe('ui:text'),
+});
+
+const ProductCardSchema = BaseArrayItem.extend({
+  tier: z.string().describe('ui:text'),
+  name: z.string().describe('ui:text'),
+  price: z.string().describe('ui:text'),
+  priceSuffix: z.string().optional().describe('ui:text'),
+  delivery: z.string().describe('ui:text'),
+  features: z.array(ProductFeatureSchema).describe('ui:list'),
+  featured: z.boolean().default(false).describe('ui:checkbox'),
+  ctaLabel: z.string().optional().describe('ui:text'),
+  ctaHref: z.string().optional().describe('ui:text'),
+  ctaVariant: z.enum(['primary', 'secondary']).default('secondary').describe('ui:select'),
+});
+
+export const ProductTriadSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  products: z.array(ProductCardSchema).describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/product-triad/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/product-triad/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { ProductTriadSchema } from './schema';
-
-export type ProductTriadData = z.infer<typeof ProductTriadSchema>;
-export type ProductTriadSettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { ProductTriadSchema } from './schema';
+
+export type ProductTriadData = z.infer<typeof ProductTriadSchema>;
+export type ProductTriadSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/ui"
@@ -4361,180 +4361,180 @@ export const useDocumentMeta = (meta: PageMeta): void => {
 END_OF_FILE_CONTENT
 echo "Creating src/index.css..."
 cat << 'END_OF_FILE_CONTENT' > "src/index.css"
-@import "tailwindcss";
-
-@source "./**/*.tsx";
-
-@theme {
-  /* 
-     🎯 MASTER MAPPING (V2.7 Landing) 
-  */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-
-  --color-accent: var(--accent);
-  --color-border: var(--border);
-  
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-
-  --font-primary: var(--theme-font-primary);
-  --font-mono: var(--theme-font-mono);
-
-  /* 
-     🔧 DISPLAY FONT — Forward-compatible workaround
-     theme-manager.ts does NOT inject --theme-font-display (Skeleton v2.7 gap).
-     The var() falls through to the hardcoded fallback today.
-     When Skeleton v2.8 wires display into theme-manager, the var() will resolve
-     automatically and the fallback becomes dead code.
-  */
-  --font-display: var(--theme-font-display, 'Playfair Display', Georgia, serif);
-}
-
-/* 
-   🌍 TENANT BRAND TOKENS (JSP 1.5)
-*/
-:root {
-  --background: var(--theme-background);
-  --foreground: var(--theme-text);
-  --card: var(--theme-surface);
-  --card-foreground: var(--theme-text);
-  --primary: var(--theme-primary);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: var(--theme-secondary);
-  --secondary-foreground: var(--theme-text);
-  --muted: var(--theme-surface-alt);
-  --muted-foreground: var(--theme-text-muted);
-  --border: var(--theme-border);
-  --radius: 0.45rem;
-
-  /* 
-     🔧 ACCENT CHAIN — Forward-compatible workaround
-     theme-manager.ts already injects --theme-accent on :root,
-     but the original index.css never bridged it into the semantic layer.
-     This closes the gap: --theme-accent → --accent → --color-accent.
-     Falls back to --theme-primary if accent is undefined.
-  */
-  --accent: var(--theme-accent, var(--theme-primary));
-}
-
-@layer base {
-  * { border-color: var(--border); }
-  body {
-    background-color: var(--background);
-    color: var(--foreground);
-    font-family: var(--font-primary);
-    line-height: 1.7;
-    overflow-x: hidden;
-    @apply antialiased;
-  }
-}
-
-/* ==========================================================================
-   FONT DISPLAY UTILITY
-   Maps .font-display class to the display font family (Playfair Display)
-   ========================================================================== */
-.font-display {
-  font-family: var(--font-display, var(--font-primary));
-}
-
-/* ==========================================================================
-   LANDING ANIMATIONS
-   ========================================================================== */
-@keyframes jp-fadeUp {
-  from { opacity: 0; transform: translateY(30px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes jp-pulseDot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-.jp-animate-in {
-  opacity: 0;
-  animation: jp-fadeUp 0.7s ease forwards;
-}
-.jp-d1 { animation-delay: 0.1s; }
-.jp-d2 { animation-delay: 0.2s; }
-.jp-d3 { animation-delay: 0.3s; }
-.jp-d4 { animation-delay: 0.4s; }
-.jp-d5 { animation-delay: 0.5s; }
-
-.jp-pulse-dot {
-  animation: jp-pulseDot 2s ease infinite;
-}
-
-/* ==========================================================================
-   SMOOTH SCROLL
-   ========================================================================== */
-html {
-  scroll-behavior: smooth;
-}
-
-/* ==========================================================================
-   ICE ADMIN — Section highlight in preview iframe
-   The preview iframe only receives tenant CSS; core's overlay classes
-   (z-[50], absolute, etc.) are not in this build. Define them here so
-   the section highlight is always visible in /admin.
-   ========================================================================== */
-[data-jp-section-overlay] {
-  position: absolute;
-  inset: 0;
-  z-index: 9999;
-  pointer-events: none;
-  transition: border-color 0.2s, background-color 0.2s;
-  border: 2px solid transparent;
-}
-
-[data-section-id]:hover [data-jp-section-overlay] {
-  border-color: rgba(96, 165, 250, 0.5);
-  border-style: dashed;
-}
-
-[data-section-id][data-jp-selected] [data-jp-section-overlay] {
-  border-color: rgb(37, 99, 235);
-  border-style: solid;
-  background-color: rgba(59, 130, 246, 0.05);
-}
-
-[data-jp-section-overlay] > div {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 0.25rem 0.5rem;
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  background: rgb(37, 99, 235);
-  color: white;
-  transition: opacity 0.2s;
-}
-
-[data-section-id]:hover [data-jp-section-overlay] > div,
-[data-section-id][data-jp-selected] [data-jp-section-overlay] > div {
-  opacity: 1;
-}
-
-[data-section-id] [data-jp-section-overlay] > div {
-  opacity: 0;
-}
-
-
+@import "tailwindcss";
+
+@source "./**/*.tsx";
+
+@theme {
+  /* 
+     🎯 MASTER MAPPING (V2.7 Landing) 
+  */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-border: var(--border);
+  
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --font-primary: var(--theme-font-primary);
+  --font-mono: var(--theme-font-mono);
+
+  /* 
+     🔧 DISPLAY FONT — Forward-compatible workaround
+     theme-manager.ts does NOT inject --theme-font-display (Skeleton v2.7 gap).
+     The var() falls through to the hardcoded fallback today.
+     When Skeleton v2.8 wires display into theme-manager, the var() will resolve
+     automatically and the fallback becomes dead code.
+  */
+  --font-display: var(--theme-font-display, 'Playfair Display', Georgia, serif);
+}
+
+/* 
+   🌍 TENANT BRAND TOKENS (JSP 1.5)
+*/
+:root {
+  --background: var(--theme-background);
+  --foreground: var(--theme-text);
+  --card: var(--theme-surface);
+  --card-foreground: var(--theme-text);
+  --primary: var(--theme-primary);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: var(--theme-secondary);
+  --secondary-foreground: var(--theme-text);
+  --muted: var(--theme-surface-alt);
+  --muted-foreground: var(--theme-text-muted);
+  --border: var(--theme-border);
+  --radius: 0.45rem;
+
+  /* 
+     🔧 ACCENT CHAIN — Forward-compatible workaround
+     theme-manager.ts already injects --theme-accent on :root,
+     but the original index.css never bridged it into the semantic layer.
+     This closes the gap: --theme-accent → --accent → --color-accent.
+     Falls back to --theme-primary if accent is undefined.
+  */
+  --accent: var(--theme-accent, var(--theme-primary));
+}
+
+@layer base {
+  * { border-color: var(--border); }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-primary);
+    line-height: 1.7;
+    overflow-x: hidden;
+    @apply antialiased;
+  }
+}
+
+/* ==========================================================================
+   FONT DISPLAY UTILITY
+   Maps .font-display class to the display font family (Playfair Display)
+   ========================================================================== */
+.font-display {
+  font-family: var(--font-display, var(--font-primary));
+}
+
+/* ==========================================================================
+   LANDING ANIMATIONS
+   ========================================================================== */
+@keyframes jp-fadeUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes jp-pulseDot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.jp-animate-in {
+  opacity: 0;
+  animation: jp-fadeUp 0.7s ease forwards;
+}
+.jp-d1 { animation-delay: 0.1s; }
+.jp-d2 { animation-delay: 0.2s; }
+.jp-d3 { animation-delay: 0.3s; }
+.jp-d4 { animation-delay: 0.4s; }
+.jp-d5 { animation-delay: 0.5s; }
+
+.jp-pulse-dot {
+  animation: jp-pulseDot 2s ease infinite;
+}
+
+/* ==========================================================================
+   SMOOTH SCROLL
+   ========================================================================== */
+html {
+  scroll-behavior: smooth;
+}
+
+/* ==========================================================================
+   ICE ADMIN — Section highlight in preview iframe
+   The preview iframe only receives tenant CSS; core's overlay classes
+   (z-[50], absolute, etc.) are not in this build. Define them here so
+   the section highlight is always visible in /admin.
+   ========================================================================== */
+[data-jp-section-overlay] {
+  position: absolute;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  transition: border-color 0.2s, background-color 0.2s;
+  border: 2px solid transparent;
+}
+
+[data-section-id]:hover [data-jp-section-overlay] {
+  border-color: rgba(96, 165, 250, 0.5);
+  border-style: dashed;
+}
+
+[data-section-id][data-jp-selected] [data-jp-section-overlay] {
+  border-color: rgb(37, 99, 235);
+  border-style: solid;
+  background-color: rgba(59, 130, 246, 0.05);
+}
+
+[data-jp-section-overlay] > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.25rem 0.5rem;
+  font-size: 9px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  background: rgb(37, 99, 235);
+  color: white;
+  transition: opacity 0.2s;
+}
+
+[data-section-id]:hover [data-jp-section-overlay] > div,
+[data-section-id][data-jp-selected] [data-jp-section-overlay] > div {
+  opacity: 1;
+}
+
+[data-section-id] [data-jp-section-overlay] > div {
+  opacity: 0;
+}
+
+
 
 END_OF_FILE_CONTENT
 mkdir -p "src/lib"
@@ -4706,44 +4706,44 @@ export const addSectionConfig: AddSectionConfig = {
 END_OF_FILE_CONTENT
 echo "Creating src/lib/base-schemas.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/base-schemas.ts"
-import { z } from 'zod';
-
-/**
- * Image picker field: object { url, alt? } with ui:image-picker for Form Factory.
- * Use in section data and resolve with resolveAssetUrl(url, tenantId) in View.
- */
-export const ImageSelectionSchema = z
-  .object({
-    url: z.string(),
-    alt: z.string().optional(),
-  }) 
-  .describe('ui:image-picker');
-
-/**
- * Base schemas shared by section capsules (CIP governance).
- * Capsules extend these for consistent anchorId, array items, and settings.
- */
-export const BaseSectionData = z.object({
-  anchorId: z.string().optional().describe('ui:text'),
-});
-
-export const BaseArrayItem = z.object({
-  id: z.string().optional(),
-});
-
-export const BaseSectionSettingsSchema = z.object({
-  paddingTop: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
-  paddingBottom: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
-  theme: z.enum(['dark', 'light', 'accent']).default('dark').describe('ui:select'),
-  container: z.enum(['boxed', 'fluid']).default('boxed').describe('ui:select'),
-});
-
-export const CtaSchema = z.object({
-  id: z.string().optional(),
-  label: z.string().describe('ui:text'),
-  href: z.string().describe('ui:text'),
-  variant: z.enum(['primary', 'secondary']).default('primary').describe('ui:select'),
-});
+import { z } from 'zod';
+
+/**
+ * Image picker field: object { url, alt? } with ui:image-picker for Form Factory.
+ * Use in section data and resolve with resolveAssetUrl(url, tenantId) in View.
+ */
+export const ImageSelectionSchema = z
+  .object({
+    url: z.string(),
+    alt: z.string().optional(),
+  }) 
+  .describe('ui:image-picker');
+
+/**
+ * Base schemas shared by section capsules (CIP governance).
+ * Capsules extend these for consistent anchorId, array items, and settings.
+ */
+export const BaseSectionData = z.object({
+  anchorId: z.string().optional().describe('ui:text'),
+});
+
+export const BaseArrayItem = z.object({
+  id: z.string().optional(),
+});
+
+export const BaseSectionSettingsSchema = z.object({
+  paddingTop: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
+  paddingBottom: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
+  theme: z.enum(['dark', 'light', 'accent']).default('dark').describe('ui:select'),
+  container: z.enum(['boxed', 'fluid']).default('boxed').describe('ui:select'),
+});
+
+export const CtaSchema = z.object({
+  id: z.string().optional(),
+  label: z.string().describe('ui:text'),
+  href: z.string().describe('ui:text'),
+  variant: z.enum(['primary', 'secondary']).default('primary').describe('ui:select'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/lib/draftStorage.ts..."
@@ -4868,20 +4868,20 @@ export function cn(...inputs: ClassValue[]) {
 END_OF_FILE_CONTENT
 echo "Creating src/main.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/main.tsx"
-import '@/types'; // TBP: load type augmentation from capsule-driven types
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-// ... resto del file
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-
-
+import '@/types'; // TBP: load type augmentation from capsule-driven types
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+// ... resto del file
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+
+
 
 END_OF_FILE_CONTENT
 # SKIP: src/main.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.