go-duck-cli 1.0.8 → 1.1.1

package/templates/docs/pages/federation.hbs

@@ -0,0 +1,241 @@
+<div class="prose prose-slate max-w-none">
+    <!-- Hero Section -->
+    <div class="flex items-center space-x-3 mb-8 text-blue-700">
+        <div class="p-4 bg-gradient-to-br from-blue-600 to-indigo-800 rounded-2xl shadow-lg shadow-blue-200">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+        </div>
+        <h1 class="text-5xl font-black text-slate-900 m-0 tracking-tight leading-tight">Federated <br><span class="text-blue-600 italic">Multi-Silo Masterclass.</span></h1>
+    </div>
+
+    <p class="text-2xl text-slate-500 font-medium mb-12 leading-relaxed">
+        Achieve 100% data isolation with a unified global view. GO-DUCK's Federated Architecture orchestrates multiple independent database silos into a single, high-performance empire.
+    </p>
+
+    <!-- FOUNDATIONAL CONCEPTS -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight italic underline decoration-blue-500 underline-offset-8">The Foundations: Silos vs. Federation</h2>
+        
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
+            <div class="p-8 bg-white border border-slate-200 rounded-[2.5rem] shadow-sm relative overflow-hidden group hover:border-blue-300 transition-all">
+                <div class="absolute top-0 right-0 w-24 h-24 bg-blue-50 translate-x-12 -translate-y-12 rounded-full group-hover:scale-150 transition-transform"></div>
+                <h3 class="text-xl font-bold text-slate-900 mb-4 flex items-center">
+                    <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mr-3 font-black">S</span>
+                    What is a "Silo"?
+                </h3>
+                <p class="text-slate-600 text-sm leading-relaxed mb-4">
+                    In database architecture, a <strong>Silo</strong> is a physically isolated storage unit. Unlike traditional multi-tenancy where all users share the same table (Soft-Tenancy), GO-DUCK uses <strong>Hard-Silo Isolation</strong>.
+                </p>
+                <ul class="space-y-2 text-xs text-slate-500 font-medium">
+                    <li class="flex items-center"><svg class="w-3.5 h-3.5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path></svg> <strong>Physical Separation</strong>: Each Silo is its own Database/Schema.</li>
+                    <li class="flex items-center"><svg class="w-3.5 h-3.5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path></svg> <strong>Security</strong>: No risk of cross-tenant data leakage via <code>WHERE</code> clause bugs.</li>
+                    <li class="flex items-center"><svg class="w-3.5 h-3.5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path></svg> <strong>Compliance</strong>: GDPR/HIPAA-ready dedicated storage paths.</li>
+                </ul>
+            </div>
+
+            <div class="p-8 bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-xl relative overflow-hidden group">
+                <div class="absolute top-0 right-0 w-24 h-24 bg-blue-500/10 translate-x-12 -translate-y-12 rounded-full group-hover:scale-150 transition-transform"></div>
+                <h3 class="text-xl font-bold text-white mb-4 flex items-center">
+                    <span class="w-8 h-8 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-3 font-black">F</span>
+                    What is "Federation"?
+                </h3>
+                <p class="text-slate-400 text-sm leading-relaxed mb-4">
+                    <strong>Federation</strong> is the "Virtual Connectivity Layer" that sits above your Silos. It allows your application to treat 100 independent databases as a single <strong>Unified Empire</strong>.
+                </p>
+                <ul class="space-y-2 text-xs text-slate-500 font-medium italic">
+                    <li class="flex items-center"><svg class="w-3.5 h-3.5 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path></svg> <strong>Aggregation</strong>: Query one endpoint, get results from every Silo.</li>
+                    <li class="flex items-center"><svg class="w-3.5 h-3.5 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path></svg> <strong>Orchestration</strong>: Broadcat a single write to multiple regions.</li>
+                    <li class="flex items-center"><svg class="w-3.5 h-3.5 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path></svg> <strong>Transparency</strong>: Front-end devs don't need to know which Silo they are hitting.</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+
+    <!-- The Scenario: The Dealership Empire -->
+    <section class="mb-20">
+        <div class="bg-blue-50 border border-blue-100 rounded-[3rem] p-12 relative overflow-hidden">
+            <h2 class="text-3xl font-black text-slate-900 mb-6 italic tracking-tight uppercase">Case Study: The Dealership Empire</h2>
+            <p class="text-slate-600 mb-8 leading-relaxed max-w-3xl">
+                Imagine you are running a global car dealership. Every regional branch (USA, Germany, Japan) requires <strong>physical isolation</strong> for local accounting compliance, but your CEO needs a <strong>global stock report</strong> in real-time.
+            </p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="p-6 bg-white rounded-2xl border border-blue-100 shadow-sm border-t-4 border-t-blue-500">
+                    <h4 class="font-bold text-slate-800 mb-2 font-mono">USA SILO</h4>
+                    <p class="text-xs text-slate-500 leading-relaxed italic">"Site-specific Inventory. Physically trapped in local DB."</p>
+                </div>
+                <div class="p-6 bg-white rounded-2xl border border-blue-100 shadow-sm border-t-4 border-t-blue-500">
+                    <h4 class="font-bold text-slate-800 mb-2 font-mono">UK SILO</h4>
+                    <p class="text-xs text-slate-500 leading-relaxed italic">"Isolated branch ops. No link to foreign data."</p>
+                </div>
+                <div class="p-6 bg-indigo-600 rounded-2xl shadow-xl text-white">
+                    <h4 class="font-bold mb-2 font-mono uppercase tracking-widest text-indigo-200">FEDERAL LAYER</h4>
+                    <p class="text-xs text-indigo-100 leading-relaxed font-bold italic">"The Harvester. Aggregates USA + UK into a single API response."</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- TRIPLE-IDENTITY REGISTRY DIAGRAM -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight italic underline decoration-blue-500 underline-offset-8 text-center">Visualizing the Registry Logic</h2>
+        <div class="bg-slate-900 rounded-[3rem] p-4 shadow-2xl relative overflow-hidden group">
+            <img src="triple_identity_registry.png" alt="Triple-Identity Registry Diagram" class="w-full h-auto rounded-[2.5rem] cursor-zoom-in transition-transform duration-500 hover:scale-[1.02]" onclick="openLightbox(this.src)">
+            <div class="p-8 text-white">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
+                    <div class="p-6 bg-white/5 rounded-2xl border border-white/10 italic">
+                        <h4 class="text-blue-400 font-bold mb-3 flex items-center">
+                            <span class="w-2 h-2 rounded-full bg-blue-400 mr-2"></span>
+                            Scenario A: Isolated Branch
+                        </h4>
+                        <p class="text-sm text-slate-400 leading-relaxed italic">
+                            A <strong>Branch Manager</strong> (ID Layer) presents a token. The <strong>Triple-Identity Mapping Engine</strong> maps them to a single Opaque UUID. The logic strictly routes their connection to the <strong>USA Silo</strong> only. No other silos are visible or reachable.
+                        </p>
+                    </div>
+                    <div class="p-6 bg-white/5 rounded-2xl border border-white/10 italic">
+                        <h4 class="text-indigo-400 font-bold mb-3 flex items-center">
+                            <span class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></span>
+                            Scenario B: Federated Harvester
+                        </h4>
+                        <p class="text-sm text-slate-400 leading-relaxed italic">
+                            A <strong>Global Admin</strong> (ID Layer) initiates a query with <code>?federated=true</code>. The Mapping Engine validates their authority and fan-outs the request across <strong>USA, UK, and DE Silos</strong> simultaneously, harvesting and aggregating the collective state.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- TRIPLE-IDENTITY REGISTRY STEPPER -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight">The Mapping Decoupling</h2>
+        <p class="text-slate-600 mb-8 leading-relaxed">
+            GO-DUCK solves the "ID Enumeration" problem using an internal 3-layer mapping engine. This ensures that no internal database connection strings or IDs are ever exposed to the client.
+        </p>
+        
+        <div class="bg-white border border-slate-200 rounded-[2.5rem] p-12 shadow-inner">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 text-center items-center">
+                <div class="space-y-4">
+                    <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto text-white shadow-lg"><svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></div>
+                    <h5 class="font-black text-slate-900 uppercase text-xs tracking-widest italic">1. Role Mapping</h5>
+                    <p class="text-xs text-slate-500 font-mono bg-slate-50 p-2 rounded">realm_role: 'branch_usa'</p>
+                </div>
+                <div class="hidden lg:block"><svg class="w-8 h-8 text-slate-300 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5-5 5M6 7l5 5-5 5"></path></svg></div>
+                <div class="space-y-4">
+                    <div class="w-16 h-16 bg-indigo-600 rounded-2xl flex items-center justify-center mx-auto text-white shadow-lg"><svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></div>
+                    <h5 class="font-black text-slate-900 uppercase text-xs tracking-widest italic">2. Opaque Proxy</h5>
+                    <p class="text-xs text-slate-500 font-mono bg-slate-50 p-2 rounded">UUID: 'bc72-...-a180'</p>
+                </div>
+                <div class="hidden lg:block"><svg class="w-8 h-8 text-slate-300 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5-5 5M6 7l5 5-5 5"></path></svg></div>
+                <div class="space-y-4">
+                    <div class="w-16 h-16 bg-emerald-600 rounded-2xl flex items-center justify-center mx-auto text-white shadow-lg"><svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7a2 2 0 012-2h12a2 2 0 012 2M4 7l8-4 8 4"></path></svg></div>
+                    <h5 class="font-black text-slate-900 uppercase text-xs tracking-widest italic">3. Silo Routing</h5>
+                    <p class="text-xs text-slate-500 font-mono bg-slate-50 p-2 rounded">DB: 'car_dealership_usa'</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- RUNTIME PROVISIONING: THE CONTROL PLANE -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight italic underline decoration-blue-500 underline-offset-8">The Control Plane: Runtime Provisioning</h2>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
+            <div class="p-10 bg-slate-900 rounded-[3rem] text-white shadow-2xl relative overflow-hidden group">
+                <div class="relative z-10">
+                    <h3 class="text-2xl font-bold mb-4 text-emerald-400">Zero-Touch Onboarding</h3>
+                    <p class="text-slate-400 text-sm leading-relaxed mb-6 italic">
+                        GO-DUCK isn't just a static mapping. It includes a built-in <strong>SaaS Management Engine</strong> that can provision entire DB silos on the fly.
+                    </p>
+                    <div class="space-y-3">
+                        <div class="flex items-center text-xs text-emerald-300 font-mono">
+                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-2"></span>
+                            POST /api/mgmt/database
+                        </div>
+                        <p class="text-xs text-slate-500 italic max-w-xs">Triggering this endpoint creates the DB, registers the UUID mapping, and runs schema migrations in one atomic action.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="p-10 bg-slate-50 border border-slate-200 rounded-[3rem] shadow-sm italic hover:bg-white transition-all">
+                <h3 class="text-xl font-bold text-slate-900 mb-4">Lazy Connection Management</h3>
+                <p class="text-slate-600 text-sm leading-relaxed mb-4">
+                    To maintain elite performance, silos are <strong>Lazily Hydrated</strong>. Connection pools are only initialized upon the first incoming request for that Silo.
+                </p>
+                <div class="p-4 bg-white rounded-2xl border border-slate-200 text-xs font-mono text-blue-800">
+                    // Internal Registry Logic<br>
+                    if pool := registry.Find(siloID); pool == nil {<br>
+                    &nbsp;&nbsp;registry.Hydrate(siloID); // Lazy Init<br>
+                    }
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- PRECISION HARVESTING -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight italic underline decoration-indigo-500 underline-offset-8 text-right px-4">Precision Global Harvesting</h2>
+        <div class="p-12 bg-white border border-slate-200 rounded-[3rem] shadow-sm relative overflow-hidden group">
+            <div class="flex flex-col md:flex-row gap-12 items-start">
+                <div class="flex-grow">
+                    <h3 class="text-2xl font-bold mb-4 text-slate-900 italic">Surgical Silo Selection</h3>
+                    <p class="text-slate-600 mb-8 leading-relaxed max-w-2xl italic">
+                        What if a user has access to <strong>10 different silos</strong> but only needs to reconcile data from <strong>3 specific regions</strong>? 
+                        GO-DUCK supports <strong>Precision Harvesting</strong> via the <code>X-Tenant-ID</code> header and the <code>?federated=true</code> parameter.
+                    </p>
+                    <div class="space-y-4">
+                        <div class="flex items-start gap-4">
+                            <div class="p-2 bg-indigo-50 rounded-lg text-indigo-600 font-bold text-xs">HEADER</div>
+                            <code class="text-sm text-indigo-900 font-black tracking-widest whitespace-normal break-all">X-Tenant-ID: uuid-1, uuid-2, uuid-3</code>
+                        </div>
+                        <p class="text-xs text-slate-400 font-medium italic">The Parallel Harvester 2.0 detects the comma-separated list and reduces its concurrent fan-out to ONLY the intersected set of authorized silos.</p>
+                    </div>
+                </div>
+                <div class="w-full md:w-1/3 bg-slate-900 rounded-2xl p-6 text-emerald-400 font-mono text-xs leading-relaxed">
+                    <span class="text-slate-500">// Harvester Logic</span><br>
+                    authorized := user.GetSilos()<br>
+                    requested := header.GetTenants()<br>
+                    target := intersect(authorized, requested)<br>
+                    <br>
+                    <span class="text-slate-500">// Fan-out only to target</span><br>
+                    for silo := range target {<br>
+                    &nbsp;&nbsp;go harvest(silo)<br>
+                    }
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- PRECISION API REFERENCE -->
+    <section class="mb-16">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight text-center italic uppercase tracking-widest">Federated API Guide</h2>
+        <div class="overflow-x-auto rounded-[2rem] border border-slate-200 shadow-xl">
+            <table class="min-w-full divide-y divide-slate-200">
+                <thead class="bg-slate-50">
+                    <tr>
+                        <th class="px-6 py-4 text-left text-xs font-black text-slate-500 uppercase tracking-widest">Action Type</th>
+                        <th class="px-6 py-4 text-left text-xs font-black text-slate-500 uppercase tracking-widest">Header / Params</th>
+                        <th class="px-6 py-4 text-left text-xs font-black text-slate-500 uppercase tracking-widest">Resulting Behavior</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-slate-100 italic font-medium">
+                    <tr><td class="px-6 py-4 font-bold text-slate-900">Standard Action</td><td class="px-6 py-4 font-mono text-slate-400 font-bold italic">(None)</td><td class="px-6 py-4 text-sm text-blue-600">Dynamic routing to your assigned localized Silo.</td></tr>
+                    <tr class="bg-blue-50/30"><td class="px-6 py-4 font-bold text-slate-900">Silo Narrowing</td><td class="px-6 py-4 font-mono text-indigo-600 font-bold italic">X-Tenant-ID: {UUID}</td><td class="px-6 py-4 text-sm text-slate-600">Force focus on a specific regional database silo.</td></tr>
+                    <tr class="bg-indigo-50/30"><td class="px-6 py-4 font-bold text-slate-900">Global Harvest</td><td class="px-6 py-4 font-mono text-indigo-600 font-bold italic">?federated=true</td><td class="px-6 py-4 text-sm text-indigo-800">Aggregates results from ALL silos in a single response.</td></tr>
+                    <tr><td class="px-6 py-4 font-bold text-slate-900">Atomic Broadcast</td><td class="px-6 py-4 font-mono text-indigo-600 font-bold italic">X-Broadcast: true</td><td class="px-6 py-4 text-sm text-slate-600">Writes to Lead-Silo and pushes to all others via Saga Outbox.</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    <!-- FOOTER CTA -->
+    <div class="p-10 bg-slate-900 rounded-[3rem] text-center text-white shadow-2xl relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-600/20 to-transparent"></div>
+        <h3 class="text-3xl font-black mb-4 tracking-tight relative z-10">Scale Without Data Leakage</h3>
+        <p class="text-slate-400 mb-8 max-w-2xl mx-auto italic relative z-10">Entities marked with <code>@Federated</code> automatically participate in this multi-silo orchestrator. Start your creation process today.</p>
+        <a href="index.html" class="relative z-10 inline-flex items-center px-8 py-4 bg-blue-600 text-white font-black rounded-full hover:bg-blue-700 transition-all shadow-xl hover:scale-105 active:scale-95">
+            Back to Quick Start
+            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5-5 5M6 7l5 5-5 5"></path></svg>
+        </a>
+    </div>
+</div>

package/templates/docs/pages/gdl-advanced.hbs

@@ -0,0 +1,91 @@
+<div class="prose prose-slate max-w-none">
+    <!-- Advanced Hero -->
+    <div class="flex items-center space-x-3 mb-10 text-indigo-700">
+        <div class="p-4 bg-gradient-to-br from-indigo-600 to-indigo-800 rounded-3xl shadow-xl shadow-indigo-100">
+            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
+            </svg>
+        </div>
+        <div>
+            <h1 class="text-4xl font-black text-slate-900 m-0 tracking-tight leading-none">Advanced Topics</h1>
+            <p class="text-indigo-600 font-bold tracking-widest uppercase text-[10px] mt-2 ml-1">Enums, Security & Public APIs</p>
+        </div>
+    </div>
+
+    <p class="text-xl text-slate-600 mb-12 italic leading-relaxed">
+        Beyond core data modeling, GDL provides the tools to define typed constants and fine-tune the granular security of your API endpoints.
+    </p>
+
+    <!-- ENUMS SECTION -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight italic">The Typed Truth: Enums</h2>
+        <p class="text-slate-600 mb-8 leading-relaxed">Enums (Enumerated Types) allow you to define a fixed set of allowed values for a field. GDL enums are high-fidelity, generating Go string-enums, Protobuf enums, and GraphQL enums simultaneously.</p>
+        
+        <div class="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-200">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
+                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-4 font-mono">GDL Definition</span>
+                    <pre class="text-indigo-700 font-mono text-sm leading-relaxed whitespace-pre font-bold">
+enum OrderStatus {
+    PENDING,
+    SHIPPED,
+    DELIVERED,
+    CANCELLED
+}
+                    </pre>
+                </div>
+                <div class="bg-indigo-900 p-6 rounded-2xl shadow-sm">
+                    <span class="text-[10px] font-bold text-indigo-400 uppercase tracking-widest block mb-4 font-mono">Usage in Entity</span>
+                    <pre class="text-white font-mono text-sm leading-relaxed whitespace-pre italic">
+entity Order {
+    OrderStatus status required
+    datetime orderDate
+}
+                    </pre>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- PUBLIC API SECTION -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight italic underline decoration-indigo-500 underline-offset-8">Public / Open Entities</h2>
+        <p class="text-slate-600 mb-8 leading-relaxed">By default, all GO-DUCK endpoints require a valid Keycloak JWT. The `open` keyword allows you to selectively disable authentication for specific entities with action-level granularity.</p>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+            <div class="p-8 bg-white border border-slate-200 rounded-3xl group hover:border-indigo-200 transition-colors shadow-sm">
+                <code class="text-indigo-700 font-mono font-black text-lg block mb-4">open EntityName</code>
+                <p class="text-sm text-slate-600 leading-relaxed mb-0">Disables authentication for <strong>ALL</strong> actions (Read, Create, Update, Delete) on the entity. <strong>Caution: Use with care!</strong></p>
+            </div>
+            <div class="p-8 bg-white border border-slate-200 rounded-3xl group hover:border-indigo-200 transition-colors shadow-sm">
+                <code class="text-indigo-700 font-mono font-black text-lg block mb-4">open Entity(read, create)</code>
+                <p class="text-sm text-slate-600 leading-relaxed mb-0">Surgical precision. For example, allowing public <strong>read</strong> and <strong>create</strong> while requiring admin JWT for updates/deletes.</p>
+            </div>
+        </div>
+
+        <div class="bg-indigo-950 p-8 rounded-3xl shadow-xl shadow-indigo-100 text-indigo-200 text-sm font-mono leading-relaxed border-t-8 border-t-indigo-600">
+            <span class="text-indigo-500 font-bold block mb-4">// Complete GDL Schema Fragment</span>
+            <span class="text-white">enum</span> <span class="text-indigo-400">ArticleStatus</span> { PUBLISHED, DRAFT }<br/><br/>
+            
+            <span class="text-white">entity</span> <span class="text-indigo-400">Article</span> {<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;string(255) title required<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;text content<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;ArticleStatus status<br/>
+            }<br/><br/>
+            
+            <span class="text-slate-500">// Allow public reading of articles, but require JWT for mutations</span><br/>
+            <span class="text-indigo-400 font-bold">open Article(read)</span>
+        </div>
+    </section>
+
+    <!-- FOOTER NAV -->
+    <div class="flex flex-col md:flex-row gap-4 mb-20">
+        <a href="cli.html" class="flex-1 p-6 bg-slate-900 rounded-2xl text-white hover:bg-slate-800 transition-colors group">
+            <div class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Back to Reference</div>
+            <div class="text-xl font-bold flex items-center">
+                CLI Usage
+                <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+            </div>
+        </a>
+    </div>
+</div>

package/templates/docs/pages/gdl-annotations.hbs

@@ -0,0 +1,137 @@
+<div class="prose prose-slate max-w-none">
+    <!-- Annotations Hero -->
+    <div class="flex items-center space-x-3 mb-10 text-orange-700">
+        <div class="p-4 bg-gradient-to-br from-orange-600 to-orange-800 rounded-3xl shadow-xl shadow-orange-100">
+            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a2 2 0 002 2h3a2 2 0 012 2v3a2 2 0 002 2h1a2 2 0 110 4h-1a2 2 0 00-2 2v3a2 2 0 01-2 2h-3a2 2 0 00-2 2v1a2 2 0 11-4 0v-1a2 2 0 00-2-2H7a2 2 0 01-2-2v-3a2 2 0 00-2-2H4a2 2 0 110-4h1a2 2 0 002-2V7a2 2 0 012-2h3a2 2 0 002-2V4z" />
+            </svg>
+        </div>
+        <div>
+            <h1 class="text-4xl font-black text-slate-900 m-0 tracking-tight leading-none">Power-up Annotations</h1>
+            <p class="text-orange-600 font-bold tracking-widest uppercase text-[10px] mt-2 ml-1">Behavioral Extensions & Plugins</p>
+        </div>
+    </div>
+
+    <p class="text-xl text-slate-600 mb-12 italic border-l-4 border-orange-500 pl-6 leading-relaxed">
+        Annotations are the "Secret Sauce" of GO-DUCK. By marking an entity with an annotation, you inject sophisticated distributed logic that would otherwise require hundreds of lines of manual code.
+    </p>
+
+    <!-- THE POWER-UPS GRID -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
+        <!-- @Federated -->
+        <div class="p-10 bg-blue-50 border border-blue-100 rounded-[3rem] shadow-sm transition-all duration-300 hover:shadow-blue-200 group">
+            <div class="flex items-center justify-between mb-8">
+                <code class="text-blue-700 font-mono font-black text-2xl group-hover:scale-105 transition-transform">@Federated</code>
+                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-sm">🌐</div>
+            </div>
+            <h4 class="text-lg font-black text-slate-900 mb-4 m-0 uppercase tracking-tighter">Multi-Silo Core</h4>
+            <p class="text-sm text-slate-700 leading-relaxed m-0 italic mb-6">Enables the <strong>Precision Harvester 2.0</strong>. The entity becomes cross-silo aware, supporting parallel read aggregations and atomic multi-broadcast writes via the Federated Router.</p>
+            <div class="p-4 bg-white/50 rounded-2xl border border-blue-200 border-dashed">
+                <span class="text-[10px] font-bold text-blue-400 uppercase tracking-widest block mb-2 font-mono">Architectural Impact</span>
+                <p class="text-[11px] text-blue-900 m-0 font-medium font-mono leading-tight">Injects Silo-Discovery interceptors & Atomic Mutex locks on write ops.</p>
+            </div>
+        </div>
+
+        <!-- @Searchable -->
+        <div class="p-10 bg-orange-50 border border-orange-100 rounded-[3rem] shadow-sm transition-all duration-300 hover:shadow-orange-200 group">
+            <div class="flex items-center justify-between mb-8">
+                <code class="text-orange-700 font-mono font-black text-2xl group-hover:scale-105 transition-transform">@Searchable</code>
+                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-sm">⚡</div>
+            </div>
+            <h4 class="text-lg font-black text-slate-900 mb-4 m-0 uppercase tracking-tighter">Elasticsearch Sync</h4>
+            <p class="text-sm text-slate-700 leading-relaxed m-0 italic mb-6">Triggers real-time indexing into Elasticsearch. Every mutation (Create/Update/Delete) is automatically mirrored to the ES engine.</p>
+            <div class="p-4 bg-white/50 rounded-2xl border border-orange-200 border-dashed">
+                <span class="text-[10px] font-bold text-orange-400 uppercase tracking-widest block mb-2 font-mono">Architectural Impact</span>
+                <p class="text-[11px] text-orange-900 m-0 font-medium font-mono leading-tight">Registers GORM AfterSave hooks & scaffolds /api/search/:entity endpoints.</p>
+            </div>
+        </div>
+
+        <!-- @Audited -->
+        <div class="p-10 bg-purple-50 border border-purple-100 rounded-[3rem] shadow-sm transition-all duration-300 hover:shadow-purple-200 group">
+            <div class="flex items-center justify-between mb-8">
+                <code class="text-purple-700 font-mono font-black text-2xl group-hover:scale-105 transition-transform">@Audited</code>
+                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-sm">📜</div>
+            </div>
+            <h4 class="text-lg font-black text-slate-900 mb-4 m-0 uppercase tracking-tighter">Zero-Trust Logging</h4>
+            <p class="text-sm text-slate-700 leading-relaxed m-0 italic mb-6">Enables deep regulatory auditing. Every row change is logged to the central `audit_log` table with Keycloak identity, client IP, and realm roles.</p>
+            <div class="p-4 bg-white/50 rounded-2xl border border-purple-200 border-dashed">
+                <span class="text-[10px] font-bold text-purple-400 uppercase tracking-widest block mb-2 font-mono">Architectural Impact</span>
+                <p class="text-[11px] text-purple-900 m-0 font-medium font-mono leading-tight">Injects AuditContext midddleware & historical row-version snapshotting.</p>
+            </div>
+        </div>
+
+        <!-- @Version -->
+        <div class="p-10 bg-amber-50 border border-amber-100 rounded-[3rem] shadow-sm transition-all duration-300 hover:shadow-amber-200 group">
+            <div class="flex items-center justify-between mb-8">
+                <code class="text-amber-700 font-mono font-black text-2xl group-hover:scale-105 transition-transform">@Version</code>
+                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-sm">🔒</div>
+            </div>
+            <h4 class="text-lg font-black text-slate-900 mb-4 m-0 uppercase tracking-tighter">Optimistic Locking</h4>
+            <p class="text-sm text-slate-700 leading-relaxed m-0 italic mb-6">Implicitly adds a `version` field. GORM automatically rejects updates (HTTP 409) if the version has changed since the data was fetched.</p>
+            <div class="p-4 bg-white/50 rounded-2xl border border-amber-200 border-dashed">
+                <span class="text-[10px] font-bold text-amber-400 uppercase tracking-widest block mb-2 font-mono">Architectural Impact</span>
+                <p class="text-[11px] text-amber-900 m-0 font-medium font-mono leading-tight">Injects GORM Optimistic Locking plugin & atomic integer increments.</p>
+            </div>
+        </div>
+
+        <!-- open Security Rule -->
+        <div class="p-10 bg-indigo-50 border border-indigo-100 rounded-[3rem] shadow-sm transition-all duration-300 hover:shadow-indigo-200 group relative overflow-hidden">
+            <div class="absolute top-0 right-0 p-6 opacity-[0.03] group-hover:opacity-[0.07] transition-opacity">
+                <svg class="w-32 h-32 text-indigo-900" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H15V7a5 5 0 00-5-5zM8 7a2 2 0 114 0v2H8V7z"></path></svg>
+            </div>
+            <div class="flex items-center justify-between mb-8">
+                <code class="text-indigo-700 font-mono font-black text-2xl group-hover:scale-105 transition-transform">open</code>
+                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-sm">🔓</div>
+            </div>
+            <h4 class="text-lg font-black text-slate-900 mb-4 m-0 uppercase tracking-tighter">Public API Access</h4>
+            <p class="text-sm text-slate-700 leading-relaxed m-0 italic mb-6">Selectively bypasses the Keycloak JWT stack. This allows you to expose specific entities or <strong>granular actions</strong> to the public internet without authentication headers.</p>
+            
+            <div class="space-y-4 mb-8">
+                <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest italic">Supported Method Granularity</p>
+                <div class="grid grid-cols-2 gap-2">
+                    <div class="px-3 py-1 bg-white border border-indigo-100 rounded-lg text-[10px] font-bold text-slate-600 flex items-center gap-2"><span class="w-1.5 h-1.5 bg-emerald-400 rounded-full"></span>read</div>
+                    <div class="px-3 py-1 bg-white border border-indigo-100 rounded-lg text-[10px] font-bold text-slate-600 flex items-center gap-2"><span class="w-1.5 h-1.5 bg-emerald-400 rounded-full"></span>list</div>
+                    <div class="px-3 py-1 bg-white border border-indigo-100 rounded-lg text-[10px] font-bold text-slate-600 flex items-center gap-2"><span class="w-1.5 h-1.5 bg-amber-400 rounded-full"></span>create</div>
+                    <div class="px-3 py-1 bg-white border border-indigo-100 rounded-lg text-[10px] font-bold text-slate-600 flex items-center gap-2"><span class="w-1.5 h-1.5 bg-rose-400 rounded-full"></span>delete</div>
+                </div>
+            </div>
+
+            <div class="p-4 bg-white/50 rounded-2xl border border-indigo-200 border-dashed">
+                <p class="text-[11px] text-indigo-900 m-0 font-medium font-mono leading-tight">Architectural Impact: Scaffolds routes into the <code class="text-indigo-600 text-[10px]">/api/open/*</code> group, bypassing the OIDC Validator middleware chain.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- COMPLEX EXAMPLE -->
+    <div class="bg-slate-900 rounded-[3rem] p-12 text-white shadow-2xl relative overflow-hidden group mb-16">
+        <div class="absolute inset-0 bg-gradient-to-br from-orange-900/40 to-transparent"></div>
+        <div class="relative z-10">
+            <h2 class="text-3xl font-black mb-6 leading-tight m-0">The Complete Power-Up Stack</h2>
+            <div class="bg-slate-800/80 rounded-3xl p-8 border border-white/10 shadow-lg backdrop-blur-md">
+                <pre class="text-orange-300 font-mono text-base leading-relaxed overflow-x-auto m-0 selection:bg-orange-500/30">
+<span class="text-slate-500">// Entities can combine any number of power-ups</span>
+@Searchable @Audited @Federated
+entity Transaction {
+    string(100) ref required unique
+    bigdecimal amount
+    datetime txDate
+    @Version int(32) v
+}
+                </pre>
+            </div>
+            <p class="mt-8 text-slate-400 text-xs italic font-medium leading-relaxed m-0 border-l border-slate-700 pl-6">
+                Combining all three creates a globally synchronized, audited, and searchable entity with zero-trust integrity.
+            </p>
+        </div>
+    </div>
+
+    <div class="flex flex-col md:flex-row gap-4 mb-20">
+        <a href="gdl-advanced.html" class="flex-1 p-6 bg-slate-900 rounded-2xl text-white hover:bg-slate-800 transition-colors group">
+            <div class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Next Category</div>
+            <div class="text-xl font-bold flex items-center">
+                🔮 Advanced Topics
+                <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+            </div>
+        </a>
+    </div>
+</div>

package/templates/docs/pages/gdl-entities.hbs

@@ -0,0 +1,134 @@
+<div class="prose prose-slate max-w-none">
+    <!-- Entities Hero -->
+    <div class="flex items-center space-x-3 mb-10 text-emerald-700">
+        <div class="p-4 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-3xl shadow-xl shadow-emerald-100">
+            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+        </div>
+        <div>
+            <h1 class="text-4xl font-black text-slate-900 m-0 tracking-tight leading-none">Entities & Fields</h1>
+            <p class="text-emerald-600 font-bold tracking-widest uppercase text-[10px] mt-2 ml-1">Data Modeling & Type System</p>
+        </div>
+    </div>
+
+    <p class="text-xl text-slate-600 mb-12 italic leading-relaxed">
+        Entities represent the core data structures of your microservice. Each entity is mapped to a GORM model, a Protobuf message, and a PostgreSQL table.
+    </p>
+
+    <!-- Syntax Guide -->
+    <div class="bg-slate-50 p-10 rounded-[3rem] border border-slate-200 mb-20 shadow-sm">
+        <h2 class="text-2xl font-black text-slate-900 mb-6 m-0">The Declaration Syntax</h2>
+        <p class="text-slate-600 mb-6">GDL supports two declaration styles for flexibility, though the <strong>Type-First</strong> approach is the modern standard for elite developers.</p>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm border-t-4 border-t-emerald-500">
+                <span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2 block">Modern Style (Type-First)</span>
+                <pre class="bg-transparent p-0 text-emerald-700 font-mono text-sm leading-relaxed whitespace-pre font-bold">
+string(100) fullName required
+datetime lastLogin
+jsonb metadata
+                </pre>
+            </div>
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm border-l-4 border-l-slate-300">
+                <span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2 block">Classic Style (Field-First)</span>
+                <pre class="bg-transparent p-0 text-slate-600 font-mono text-sm leading-relaxed whitespace-pre italic">
+fullName String required
+lastLogin DateTime
+metadata JSONB
+                </pre>
+            </div>
+        </div>
+    </div>
+
+    <!-- ELITE TYPE REFERENCE -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight underline decoration-emerald-500 underline-offset-8">Global Type System Reference</h2>
+        <div class="overflow-x-auto rounded-[2.5rem] border border-slate-200 shadow-sm border-t-8 border-t-emerald-600">
+            <table class="min-w-full divide-y divide-slate-200 m-0">
+                <thead class="bg-emerald-50 text-emerald-900">
+                    <tr>
+                        <th class="px-6 py-5 text-left text-xs font-black uppercase tracking-[0.2em]">GDL Type</th>
+                        <th class="px-6 py-5 text-left text-xs font-black uppercase tracking-[0.2em]">Go Native</th>
+                        <th class="px-6 py-5 text-left text-xs font-black uppercase tracking-[0.2em]">SQL (Postgres)</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-slate-100 text-sm font-medium italic">
+                    <tr class="hover:bg-emerald-50/30 transition-colors">
+                        <td class="px-6 py-4 font-mono font-bold text-emerald-700">string(N)</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">string</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">VARCHAR(N)</td>
+                    </tr>
+                    <tr class="hover:bg-emerald-50/30 transition-colors">
+                        <td class="px-6 py-4 font-mono font-bold text-emerald-700">text</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">string</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">TEXT</td>
+                    </tr>
+                    <tr class="hover:bg-emerald-50/30 transition-colors">
+                        <td class="px-6 py-4 font-mono font-bold text-emerald-700">int / integer</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">int</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">INTEGER</td>
+                    </tr>
+                    <tr class="hover:bg-emerald-50/30 transition-colors">
+                        <td class="px-6 py-4 font-mono font-bold text-emerald-700">long</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">int64</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">BIGINT</td>
+                    </tr>
+                    <tr class="hover:bg-emerald-50/30 transition-colors">
+                        <td class="px-6 py-4 font-mono font-bold text-emerald-700">bool / boolean</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">bool</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">BOOLEAN</td>
+                    </tr>
+                    <tr class="hover:bg-emerald-50/30 transition-colors">
+                        <td class="px-6 py-4 font-mono font-bold text-emerald-700">json / jsonb</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">datatypes.JSON</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">JSON / JSONB</td>
+                    </tr>
+                    <tr class="hover:bg-emerald-50/30 transition-colors">
+                        <td class="px-6 py-4 font-mono font-bold text-emerald-700">datetime / instant</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">time.Time</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">TIMESTAMP</td>
+                    </tr>
+                    <tr class="hover:bg-emerald-50/30 transition-colors">
+                        <td class="px-6 py-4 font-mono font-bold text-emerald-700">uuid</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">uuid.UUID</td>
+                        <td class="px-6 py-4 font-mono text-slate-400">UUID</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    <!-- Field Modifiers -->
+    <section class="mb-20">
+        <h2 class="text-3xl font-black text-slate-900 mb-8 tracking-tight">Field Modifiers</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="p-8 bg-white border border-slate-200 rounded-3xl group hover:border-emerald-200 transition-colors shadow-sm">
+                <div class="flex items-center space-x-3 mb-4">
+                    <span class="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-black font-mono">required</span>
+                    <span class="h-px bg-slate-100 flex-1"></span>
+                </div>
+                <h4 class="text-base font-bold text-slate-900 mb-2 m-0 group-hover:text-emerald-700 transition-colors">Strict Integrity</h4>
+                <p class="text-sm text-slate-600 m-0 leading-relaxed">Adds `NOT NULL` to the SQL schema and marks the field as required in Protobuf and Gin validation hooks.</p>
+            </div>
+            <div class="p-8 bg-white border border-slate-200 rounded-3xl group hover:border-emerald-200 transition-colors shadow-sm">
+                <div class="flex items-center space-x-3 mb-4">
+                    <span class="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-black font-mono">unique</span>
+                    <span class="h-px bg-slate-100 flex-1"></span>
+                </div>
+                <h4 class="text-base font-bold text-slate-900 mb-2 m-0 group-hover:text-emerald-700 transition-colors">Natural Key Protection</h4>
+                <p class="text-sm text-slate-600 m-0 leading-relaxed">Automatically creates a unique index in PostgreSQL to prevent duplicate records across all silos.</p>
+            </div>
+        </div>
+    </section>
+
+    <div class="flex flex-col md:flex-row gap-4 mb-20">
+        <a href="gdl-relationships.html" class="flex-1 p-6 bg-slate-900 rounded-2xl text-white hover:bg-slate-800 transition-colors group">
+            <div class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Next Category</div>
+            <div class="text-xl font-bold flex items-center">
+                🧬 Relationships
+                <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+            </div>
+        </a>
+    </div>
+</div>