npm - json-to-spec - Versions diffs - 19.1.0 - Mend

json-to-spec 19.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (217) hide show

package/README.md +118 -0
package/docs/demo.html +426 -0
package/docs/dist/min.js +164 -0
package/docs/dist/v1/min.js +124 -0
package/docs/dist/v17/min.js +355 -0
package/docs/dist/v18/min.js +160 -0
package/docs/dist/v19/min.js +164 -0
package/docs/dist/v2/min.js +129 -0
package/docs/dist/v3/min.js +201 -0
package/docs/index.html +248 -0
package/docs/pages/architecture.html +115 -0
package/docs/pages/how-it-works.html +125 -0
package/docs/pages/what-not.html +100 -0
package/docs/pages/what.html +105 -0
package/docs/pages/why.html +88 -0
package/docs/samples/form.html +265 -0
package/docs/samples/index.html +112 -0
package/docs/samples/table.html +306 -0
package/index.js +2 -0
package/package.json +50 -0
package/samples/dataList/index.html +31 -0
package/samples/dataList/index.js +62 -0
package/samples/dataList/input/data.json +5043 -0
package/samples/dataList/input/structure.json +38 -0
package/samples/dataList copy/index.html +30 -0
package/samples/dataList copy/index.js +61 -0
package/samples/dataList copy/input/data.json +35307 -0
package/samples/dataList copy/input/structure.json +18 -0
package/samples/form/index.html +29 -0
package/samples/form/index.js +64 -0
package/samples/form/input/data.json +9 -0
package/samples/form/input/structure.json +192 -0
package/samples/form-/data.json +42 -0
package/samples/form-/structure.json +110 -0
package/samples/select/index.html +31 -0
package/samples/select/index.js +61 -0
package/samples/select/input/data.json +35287 -0
package/samples/select/input/select.json +18 -0
package/samples/select/input/structure.json +47 -0
package/samples/table/index.html +29 -0
package/samples/table/index.js +61 -0
package/samples/table/input/data.json +35287 -0
package/samples/table/input/structure copy.json +47 -0
package/samples/table/input/structure.json +86 -0
package/samples/table/input/table.json +135 -0
package/samples/table-/data.json +68 -0
package/samples/table-/structure.json +235 -0
package/src/index.js +2 -0
package/src/v10/index.js +96 -0
package/src/v10/instructionEngine/compile/compileTree.js +191 -0
package/src/v10/instructionEngine/compileTree.js +1 -0
package/src/v10/instructionEngine/expandIteration.js +1 -0
package/src/v10/instructionEngine/index.js +29 -0
package/src/v10/instructionEngine/interpolate.js +2 -0
package/src/v10/instructionEngine/iteration/expandIteration.js +95 -0
package/src/v10/instructionEngine/operation/operation.js +237 -0
package/src/v10/instructionEngine/other/other.js +150 -0
package/src/v10/instructionEngine/pipeline/pipeline.js +47 -0
package/src/v10/instructionEngine/replace/replace.js +173 -0
package/src/v10/instructionEngine/resolve/resolvePath.js +18 -0
package/src/v10/instructionEngine/resolve/resolveTokenValue.js +22 -0
package/src/v10/instructionEngine/resolvePath.js +1 -0
package/src/v10/instructionEngine/resolveTokenValue.js +1 -0
package/src/v10/instructionEngine/story/storyInjector.js +50 -0
package/src/v10/instructionEngine/storyInjector.js +1 -0
package/src/v10/instructionEngine/value/interpolate.js +38 -0
package/src/v11/index.js +116 -0
package/src/v11/iterate.js +270 -0
package/src/v11/replace.js +169 -0
package/src/v11/resolvePath.js +29 -0
package/src/v12/index.js +122 -0
package/src/v12/iterate/bindFormValues.js +74 -0
package/src/v12/iterate/expandIteration.js +181 -0
package/src/v12/iterate/index.js +10 -0
package/src/v12/iterate/iterate.js +56 -0
package/src/v12/iterate/iterateNode.js +86 -0
package/src/v12/iterate/resolveCollection.js +37 -0
package/src/v12/iterate.js +270 -0
package/src/v12/replace.js +169 -0
package/src/v12/resolvePath.js +29 -0
package/src/v13/index.js +110 -0
package/src/v13/iterate/bindFormValues.js +74 -0
package/src/v13/iterate/expandIteration.js +188 -0
package/src/v13/iterate/index.js +9 -0
package/src/v13/iterate/iterate.js +32 -0
package/src/v13/iterate/iterateNode.js +86 -0
package/src/v13/iterate/resolveCollection.js +37 -0
package/src/v13/iterate/walk.js +90 -0
package/src/v13/iterate.js +270 -0
package/src/v13/replace.js +169 -0
package/src/v13/resolvePath.js +29 -0
package/src/v14/index.js +112 -0
package/src/v14/iterate/bindFormValues.js +74 -0
package/src/v14/iterate/expandIteration.js +188 -0
package/src/v14/iterate/index.js +9 -0
package/src/v14/iterate/iterate.js +32 -0
package/src/v14/iterate/resolveCollection.js +37 -0
package/src/v14/iterate/walk/walk copy 2.js +114 -0
package/src/v14/iterate/walk/walk copy.js +90 -0
package/src/v14/iterate/walk/walk.js +98 -0
package/src/v14/iterate.js +270 -0
package/src/v14/replace/index.js +16 -0
package/src/v14/replace/walk.js +90 -0
package/src/v14/replace.js +153 -0
package/src/v14/resolvePath.js +29 -0
package/src/v15/index.js +123 -0
package/src/v15/iterate/bindFormValues.js +74 -0
package/src/v15/iterate/expandIteration.js +188 -0
package/src/v15/iterate/index.js +9 -0
package/src/v15/iterate/iterate.js +32 -0
package/src/v15/iterate/resolveCollection.js +37 -0
package/src/v15/iterate/walk/walk copy 2.js +114 -0
package/src/v15/iterate/walk/walk copy.js +90 -0
package/src/v15/iterate/walk/walk.js +195 -0
package/src/v15/iterate.js +270 -0
package/src/v15/replace/index.js +16 -0
package/src/v15/replace/walk.js +90 -0
package/src/v15/replace.js +155 -0
package/src/v15/resolvePath.js +29 -0
package/src/v16/index.js +129 -0
package/src/v16/iterate/bindFormValues.js +74 -0
package/src/v16/iterate/expandIteration.js +188 -0
package/src/v16/iterate/index.js +9 -0
package/src/v16/iterate/iterate.js +32 -0
package/src/v16/iterate/resolveCollection.js +37 -0
package/src/v16/iterate/walk/walk copy 2.js +114 -0
package/src/v16/iterate/walk/walk copy.js +90 -0
package/src/v16/iterate/walk/walk.js +196 -0
package/src/v16/iterate.js +270 -0
package/src/v16/replace/index.js +16 -0
package/src/v16/replace/walk.js +90 -0
package/src/v16/replace.js +155 -0
package/src/v16/resolvePath.js +29 -0
package/src/v17/index.js +119 -0
package/src/v17/iterate/bindFormValues.js +74 -0
package/src/v17/iterate/expandIteration.js +188 -0
package/src/v17/iterate/index.js +9 -0
package/src/v17/iterate/iterate.js +32 -0
package/src/v17/iterate/resolveCollection.js +37 -0
package/src/v17/iterate/walk/iterateDo.js +42 -0
package/src/v17/iterate/walk/replaceWithData.js +60 -0
package/src/v17/iterate/walk/walk.js +94 -0
package/src/v17/iterate.js +270 -0
package/src/v17/replace/index.js +16 -0
package/src/v17/replace/walk.js +90 -0
package/src/v17/replace.js +160 -0
package/src/v17/resolvePath.js +29 -0
package/src/v18/index.js +66 -0
package/src/v18/meta.js +7 -0
package/src/v18/registerGlobal.js +17 -0
package/src/v18/replace.js +18 -0
package/src/v18/resolvePath.js +29 -0
package/src/v18/walk/iterate/v1/index.js +42 -0
package/src/v18/walk/iterate/v2/index.js +32 -0
package/src/v18/walk/iterate/v3/index.js +46 -0
package/src/v18/walk/iterate/v4/createChildren.js +24 -0
package/src/v18/walk/iterate/v4/index.js +25 -0
package/src/v18/walk/replaceWithData/v1/index.js +42 -0
package/src/v18/walk/replaceWithData/v1/replaceCommon.js +21 -0
package/src/v18/walk/replaceWithData/v2/index.js +105 -0
package/src/v18/walk/replaceWithData/v2/replaceCommon.js +21 -0
package/src/v18/walk/replaceWithData/v3/index.js +15 -0
package/src/v18/walk/replaceWithData/v3/replaceAttributes.js +29 -0
package/src/v18/walk/replaceWithData/v3/replaceCommon.js +23 -0
package/src/v18/walk/replaceWithData/v3/replaceNodeValue.js +27 -0
package/src/v18/walk/walk.js +94 -0
package/src/v19/index.js +55 -0
package/src/v19/meta.js +7 -0
package/src/v19/registerGlobal.js +17 -0
package/src/v19/replace.js +18 -0
package/src/v19/resolvePath.js +29 -0
package/src/v19/walk/iterate/v1/index.js +42 -0
package/src/v19/walk/iterate/v2/index.js +32 -0
package/src/v19/walk/iterate/v3/index.js +46 -0
package/src/v19/walk/iterate/v4/createChildren.js +27 -0
package/src/v19/walk/iterate/v4/index.js +25 -0
package/src/v19/walk/replaceWithData/v1/index.js +42 -0
package/src/v19/walk/replaceWithData/v1/replaceCommon.js +21 -0
package/src/v19/walk/replaceWithData/v2/index.js +105 -0
package/src/v19/walk/replaceWithData/v2/replaceCommon.js +21 -0
package/src/v19/walk/replaceWithData/v3/index.js +15 -0
package/src/v19/walk/replaceWithData/v3/replaceAttributes.js +29 -0
package/src/v19/walk/replaceWithData/v3/replaceCommon.js +23 -0
package/src/v19/walk/replaceWithData/v3/replaceNodeValue.js +27 -0
package/src/v19/walk/walk.js +97 -0
package/src/v8/index.js +69 -0
package/src/v8/instructionEngine/compile/compileTree.js +191 -0
package/src/v8/instructionEngine/compileTree.js +1 -0
package/src/v8/instructionEngine/expandIteration.js +1 -0
package/src/v8/instructionEngine/index.js +16 -0
package/src/v8/instructionEngine/interpolate.js +2 -0
package/src/v8/instructionEngine/iteration/expandIteration.js +95 -0
package/src/v8/instructionEngine/resolve/resolvePath.js +18 -0
package/src/v8/instructionEngine/resolve/resolveTokenValue.js +22 -0
package/src/v8/instructionEngine/resolvePath.js +1 -0
package/src/v8/instructionEngine/resolveTokenValue.js +1 -0
package/src/v8/instructionEngine/story/storyInjector.js +50 -0
package/src/v8/instructionEngine/storyInjector.js +1 -0
package/src/v8/instructionEngine/value/interpolate.js +38 -0
package/src/v9/index.js +96 -0
package/src/v9/instructionEngine/compile/compileTree.js +191 -0
package/src/v9/instructionEngine/compileTree.js +1 -0
package/src/v9/instructionEngine/expandIteration.js +1 -0
package/src/v9/instructionEngine/index.js +29 -0
package/src/v9/instructionEngine/interpolate.js +2 -0
package/src/v9/instructionEngine/iteration/expandIteration.js +95 -0
package/src/v9/instructionEngine/operation/operation.js +237 -0
package/src/v9/instructionEngine/other/other.js +150 -0
package/src/v9/instructionEngine/pipeline/pipeline.js +47 -0
package/src/v9/instructionEngine/replace/replace.js +173 -0
package/src/v9/instructionEngine/resolve/resolvePath.js +18 -0
package/src/v9/instructionEngine/resolve/resolveTokenValue.js +22 -0
package/src/v9/instructionEngine/resolvePath.js +1 -0
package/src/v9/instructionEngine/resolveTokenValue.js +1 -0
package/src/v9/instructionEngine/story/storyInjector.js +50 -0
package/src/v9/instructionEngine/storyInjector.js +1 -0
package/src/v9/instructionEngine/value/interpolate.js +38 -0

package/README.md ADDED Viewed

@@ -0,0 +1,118 @@
+# json-to-spec
+A story about taking two JSON inputs and turning them into a final, concrete UI spec.
+At the center of this project is a simple idea:
+- `structure` is the blueprint: the shape, layout, rules, and instructions
+- `data` is the truth: fields, rows, values, arrays, and metadata
+- `compile` is the story engine: it resolves the values, replaces placeholders, and expands iterations
+The final output is a clean, serializable JSON spec, ready for rendering by `json-to-dom` or any similar consumer.
+---
+## The story in one line
+`json-to-spec` is a compiler for declarative UI: it reads a blueprint and a data payload, resolves what belongs where, injects values, expands loops, and emits a final specification tree.
+---
+## The three core operations
+This repo is best understood as a pipeline with three essential stages:
+1. `resolve` — find the value from the active context or root data
+2. `replace` — replace `${...}` tokens inside strings, attributes, and text content
+3. `iterate` — expand collection-driven operations into concrete child nodes
+That is the heart of the architecture. Everything else is supporting structure around this idea.
+---
+## Why this design matters
+Most UI systems treat layout and data as separate problems, but they still get tangled in components, templates, and imperative logic.
+`json-to-spec` keeps them decoupled:
+- the structure describes how a screen should look
+- the data tells what should appear
+- the compiler merges them deterministically
+This makes the flow predictable, testable, and easy to reason about.
+---
+## 📖 Start Here
+- **What is json-to-spec?**: [docs/pages/what.html](docs/pages/what.html)
+- **Why this project exists**: [docs/pages/why.html](docs/pages/why.html)
+- **How the compiler works**: [docs/pages/how-it-works.html](docs/pages/how-it-works.html)
+- **Runtime architecture**: [docs/pages/architecture.html](docs/pages/architecture.html)
+- **Documentation hub**: [docs/index.html](docs/index.html)
+---
+## ⚡ Quick Start
+```bash
+npm install
+npm run dev
+```
+---
+## 💻 Minimal Example
+```javascript
+import { compile } from "json-to-spec";
+const structure = {
+  tagName: "div",
+  attributes: { class: "card" },
+  children: [
+    { tagName: "h3", textContent: "${title}" },
+    {
+      operation: "iterate",
+      source: "users",
+      template: {
+        tagName: "div",
+        textContent: "${$number}. ${name} (${role})"
+      }
+    }
+  ]
+};
+const data = {
+  title: "Engineering Team",
+  users: [
+    { name: "Karthik", role: "Architect" },
+    { name: "Praveen", role: "Engineer" }
+  ]
+};
+const spec = compile({ inStructure: structure, inData: data });
+console.log(spec);
+```
+The compile flow is:
+- resolve the values inside `${...}`
+- replace tokens in the structure
+- iterate over `users` and expand the template
+- return the final spec JSON
+---
+## 🎯 Scope
+This project is intentionally focused. It is a compiler, not a renderer, framework, or business-logic engine.
+It does one job well: it translates declarative structure + data into a final spec tree.
+---
+## 📄 License
+MIT &copy; [KeshavSoft](https://github.com/keshavsoft)

package/docs/demo.html ADDED Viewed

@@ -0,0 +1,426 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>json-to-spec | Live Interactive Playground</title>
+    <meta name="description" content="Test and compile specifications live in the browser using json-to-spec.">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        code, pre, textarea { font-family: 'JetBrains Mono', monospace; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col">
+    <!-- Navbar -->
+    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur border-b border-slate-200">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+                <a href="index.html" class="flex items-center space-x-2 font-black text-lg text-slate-900 hover:text-indigo-600 transition">
+                    <span class="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-black text-sm">JS</span>
+                    <span>json-to-spec</span>
+                </a>
+                <span class="text-xs bg-indigo-50 text-indigo-700 font-semibold px-2 py-0.5 rounded-full border border-indigo-200">Playground</span>
+            </div>
+            <nav class="flex items-center space-x-4 text-sm font-medium">
+                <a href="samples/form.html" class="text-slate-600 hover:text-indigo-600 transition">Form Sample</a>
+                <a href="samples/table.html" class="text-slate-600 hover:text-indigo-600 transition">Table Sample</a>
+                <a href="samples/index.html" class="text-slate-600 hover:text-indigo-600 transition">Samples Hub</a>
+                <a href="index.html" class="text-indigo-600 font-semibold">&larr; Back to Docs</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Main Playground Workspace -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-1 w-full flex flex-col space-y-4">
+        <!-- Controls Bar -->
+        <div class="flex flex-wrap items-center justify-between gap-4 bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
+            <div class="flex items-center gap-2">
+                <span class="text-xs font-bold text-slate-500 uppercase tracking-wide mr-2">Presets:</span>
+                <button id="preset-form" class="px-3 py-1.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 rounded-lg text-xs font-semibold transition border border-indigo-200">
+                    Form Engine
+                </button>
+                <button id="preset-table" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-xs font-semibold transition border border-slate-200">
+                    Table Engine
+                </button>
+                <button id="preset-simple" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-xs font-semibold transition border border-slate-200">
+                    Simple Card
+                </button>
+            </div>
+            <div class="flex items-center gap-3">
+                <span id="compile-status" class="text-xs font-mono text-emerald-600 font-semibold flex items-center gap-1.5">
+                    <span class="w-2 h-2 rounded-full bg-emerald-500"></span> Ready
+                </span>
+                <button id="compile-btn" class="px-4 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-bold flex items-center gap-1.5 shadow-sm transition">
+                    <span>⚡ Compile Spec & Render</span>
+                </button>
+            </div>
+        </div>
+        <!-- 2x2 Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1">
+            <!-- Left Top: structure.json -->
+            <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-[380px]">
+                <div class="px-4 py-2.5 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
+                    <span class="text-xs font-bold text-slate-700 flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-purple-500"></span> 1. structure.json (HOW: UI Blueprint)
+                    </span>
+                    <span class="text-[10px] font-mono text-slate-400">Editable Template</span>
+                </div>
+                <div class="p-2 flex-1 flex flex-col bg-slate-900">
+                    <textarea id="structure-editor" class="w-full flex-1 bg-transparent text-purple-300 p-2 text-xs leading-relaxed focus:outline-none resize-none" spellcheck="false"></textarea>
+                </div>
+            </div>
+            <!-- Right Top: data.json -->
+            <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-[380px]">
+                <div class="px-4 py-2.5 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
+                    <span class="text-xs font-bold text-slate-700 flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span> 2. data.json (WHAT: Collections & Values)
+                    </span>
+                    <span class="text-[10px] font-mono text-slate-400">Editable Payload</span>
+                </div>
+                <div class="p-2 flex-1 flex flex-col bg-slate-900">
+                    <textarea id="data-editor" class="w-full flex-1 bg-transparent text-emerald-300 p-2 text-xs leading-relaxed focus:outline-none resize-none" spellcheck="false"></textarea>
+                </div>
+            </div>
+            <!-- Left Bottom: Compiled Spec JSON Output -->
+            <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-[420px]">
+                <div class="px-4 py-2.5 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
+                    <span class="text-xs font-bold text-slate-700 flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-amber-500"></span> 3. Compiled Spec JSON (json-to-spec Output)
+                    </span>
+                    <button id="copy-spec-btn" class="px-2 py-0.5 text-[11px] bg-slate-100 hover:bg-slate-200 rounded font-mono text-slate-600 border border-slate-200 transition">
+                        Copy Spec
+                    </button>
+                </div>
+                <div class="p-2 flex-1 flex flex-col bg-slate-900 overflow-auto">
+                    <pre id="spec-output" class="text-amber-300 text-xs p-2 leading-relaxed"></pre>
+                </div>
+            </div>
+            <!-- Right Bottom: Native Browser DOM Output -->
+            <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-[420px]">
+                <div class="px-4 py-2.5 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
+                    <span class="text-xs font-bold text-slate-700 flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> 4. Live Rendered DOM (via json-to-dom Engine)
+                    </span>
+                    <span class="px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded font-mono text-xs border border-emerald-200">Live DOM Node</span>
+                </div>
+                <div class="p-6 flex-1 overflow-auto bg-slate-50" id="output-wrapper">
+                    <div id="app" class="w-full">
+                        <!-- Rendered DOM inserted here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="mt-auto bg-white border-t border-slate-200 py-6 text-center text-xs text-slate-500">
+        json-to-spec &bull; KeshavSoft &bull; MIT License
+    </footer>
+    <!-- Script loading: Resilient local/CDN import -->
+    <script type="module">
+        let compile;
+        try {
+            const mod = await import("./dist/min.js");
+            compile = mod.compile;
+        } catch {
+            const mod = await import("https://keshavsoft.github.io/json-to-spec/dist/v1/min.js");
+            compile = mod.compile;
+        }
+        import { buildSpecElement } from "https://keshavsoft.github.io/json-to-dom/dist/v16/min.js";
+        const PRESETS = {
+            form: {
+                structure: {
+                    "tagName": "div",
+                    "attributes": {
+                        "class": "card shadow-sm border border-slate-200 rounded-xl overflow-hidden max-w-xl mx-auto"
+                    },
+                    "children": [
+                        {
+                            "tagName": "div",
+                            "attributes": { "class": "card-header bg-slate-100 px-6 py-4 border-b border-slate-200" },
+                            "children": [
+                                { "tagName": "h2", "textContent": "Item Master Form", "attributes": { "class": "h5 mb-0 fw-bold text-slate-800" } },
+                                { "tagName": "p", "textContent": "Compiled via json-to-spec -> Rendered via json-to-dom", "attributes": { "class": "small text-muted mb-0" } }
+                            ]
+                        },
+                        {
+                            "tagName": "div",
+                            "attributes": { "id": "form-body", "class": "card-body p-6 space-y-3" },
+                            "children": [
+                                {
+                                    "operation": "iterate",
+                                    "source": "columns",
+                                    "filter": { "isVisible": true },
+                                    "template": {
+                                        "tagName": "div",
+                                        "attributes": { "class": "row align-items-center g-2 mb-3" },
+                                        "children": [
+                                            {
+                                                "tagName": "label",
+                                                "textContent": "${title}",
+                                                "attributes": { "class": "col-sm-4 col-form-label text-sm-end mb-0 fw-semibold text-secondary small" }
+                                            },
+                                            {
+                                                "tagName": "div",
+                                                "attributes": { "class": "col-sm-8" },
+                                                "children": [
+                                                    {
+                                                        "tagName": "input",
+                                                        "attributes": {
+                                                            "type": "text",
+                                                            "name": "${field}",
+                                                            "placeholder": "Enter ${title}...",
+                                                            "class": "form-control"
+                                                        }
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            "tagName": "div",
+                            "attributes": { "class": "card-footer bg-slate-50 px-6 py-3 border-t border-slate-200 d-flex justify-content-end gap-2" },
+                            "children": [
+                                { "tagName": "button", "textContent": "Cancel", "attributes": { "type": "button", "class": "btn btn-outline-secondary btn-sm" } },
+                                { "tagName": "button", "textContent": "Save Item", "attributes": { "type": "submit", "class": "btn btn-primary btn-sm" } }
+                            ]
+                        }
+                    ]
+                },
+                data: {
+                    "columns": [
+                        { "columnName": "Category", "title": "Category", "field": "Category", "value": "Beverages", "isVisible": true },
+                        { "columnName": "ItemName", "title": "Item Name", "field": "ItemName", "value": "Green Tea", "isVisible": true },
+                        { "columnName": "Service", "title": "Service", "field": "Service", "value": "Packaging", "isVisible": true },
+                        { "columnName": "Rate", "title": "Rate", "field": "Rate", "value": 150, "isVisible": true },
+                        { "columnName": "pk", "title": "pk", "field": "pk", "isVisible": false }
+                    ],
+                    "Category": "Beverages",
+                    "ItemName": "Green Tea",
+                    "Service": "Packaging",
+                    "Rate": 150
+                }
+            },
+            table: {
+                structure: {
+                    "tagName": "div",
+                    "attributes": { "class": "card shadow-sm border border-slate-200 rounded-xl overflow-hidden max-w-4xl mx-auto" },
+                    "children": [
+                        {
+                            "tagName": "div",
+                            "attributes": { "class": "card-header bg-slate-100 px-6 py-4 border-b border-slate-200 d-flex justify-content-between align-items-center" },
+                            "children": [
+                                {
+                                    "tagName": "div",
+                                    "children": [
+                                        { "tagName": "h2", "textContent": "Item Inventory Table", "attributes": { "class": "h5 mb-0 fw-bold text-slate-800" } },
+                                        { "tagName": "p", "textContent": "Rendered via nested iterations (thead & tbody)", "attributes": { "class": "small text-muted mb-0" } }
+                                    ]
+                                },
+                                { "tagName": "span", "textContent": "${summary.totalItems} Items", "attributes": { "class": "badge bg-indigo-600 text-white font-mono px-3 py-1.5" } }
+                            ]
+                        },
+                        {
+                            "tagName": "div",
+                            "attributes": { "class": "table-responsive" },
+                            "children": [
+                                {
+                                    "tagName": "table",
+                                    "attributes": { "class": "table table-hover table-striped align-middle mb-0" },
+                                    "children": [
+                                        {
+                                            "tagName": "thead",
+                                            "attributes": { "class": "table-light" },
+                                            "children": [
+                                                {
+                                                    "tagName": "tr",
+                                                    "children": [
+                                                        { "tagName": "th", "textContent": "#", "attributes": { "class": "text-center py-3", "style": "width: 50px;" } },
+                                                        {
+                                                            "operation": "iterate",
+                                                            "source": "columns",
+                                                            "filter": { "isVisible": true },
+                                                            "template": {
+                                                                "tagName": "th",
+                                                                "textContent": "${title}",
+                                                                "attributes": { "class": "text-start py-3" }
+                                                            }
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "tagName": "tbody",
+                                            "children": [
+                                                {
+                                                    "operation": "iterate",
+                                                    "source": "rows",
+                                                    "template": {
+                                                        "tagName": "tr",
+                                                        "children": [
+                                                            { "tagName": "td", "textContent": "${$number}", "attributes": { "class": "text-center font-mono small text-muted py-2.5" } },
+                                                            {
+                                                                "operation": "iterate",
+                                                                "source": "columns",
+                                                                "filter": { "isVisible": true },
+                                                                "template": {
+                                                                    "tagName": "td",
+                                                                    "textContent": "${value}",
+                                                                    "attributes": { "class": "text-start py-2.5" }
+                                                                }
+                                                            }
+                                                        ]
+                                                    }
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "tagName": "tfoot",
+                                            "attributes": { "class": "table-light border-top" },
+                                            "children": [
+                                                {
+                                                    "tagName": "tr",
+                                                    "children": [
+                                                        {
+                                                            "tagName": "td",
+                                                            "textContent": "Summary: Total Items: ${summary.totalItems} | Avg Rate: ?${summary.avgRate}",
+                                                            "attributes": { "colspan": "6", "class": "small text-muted py-2.5 px-4 fw-semibold" }
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                },
+                data: {
+                    "columns": [
+                        { "title": "Category", "field": "Category", "isVisible": true },
+                        { "title": "Item Name", "field": "ItemName", "isVisible": true },
+                        { "title": "Service", "field": "Service", "isVisible": true },
+                        { "title": "Rate", "field": "Rate", "isVisible": true },
+                        { "title": "PK", "field": "pk", "isVisible": false }
+                    ],
+                    "rows": [
+                        { "pk": "1", "Category": "Beverages", "ItemName": "Green Tea", "Service": "Packaging", "Rate": 150 },
+                        { "pk": "2", "Category": "Beverages", "ItemName": "Espresso Coffee", "Service": "Grinding", "Rate": 220 },
+                        { "pk": "3", "Category": "Bakery", "ItemName": "Almond Cookies", "Service": "Baking", "Rate": 95 }
+                    ],
+                    "summary": { "totalItems": 3, "avgRate": 155 }
+                }
+            },
+            simple: {
+                structure: {
+                    "tagName": "div",
+                    "attributes": { "class": "card p-4 border border-indigo-200 rounded-2xl max-w-sm mx-auto text-center bg-indigo-50/50" },
+                    "children": [
+                        { "tagName": "h3", "textContent": "${greeting}", "attributes": { "class": "h5 fw-bold text-indigo-900" } },
+                        { "tagName": "p", "textContent": "${message}", "attributes": { "class": "small text-indigo-700 mb-3" } },
+                        {
+                            "operation": "iterate",
+                            "source": "badges",
+                            "template": {
+                                "tagName": "span",
+                                "textContent": "${title}",
+                                "attributes": { "class": "badge bg-indigo-600 text-white me-1 mb-1 font-mono text-xs" }
+                            }
+                        }
+                    ]
+                },
+                data: {
+                    "greeting": "Hello Declarative UI",
+                    "message": "Pure JSON compiled into valid DOM spec",
+                    "badges": [
+                        { "title": "Zero Dependencies" },
+                        { "title": "Universal Traversal" },
+                        { "title": "json-to-dom Compatible" }
+                    ]
+                }
+            }
+        };
+        const structEditor = document.getElementById("structure-editor");
+        const dataEditor = document.getElementById("data-editor");
+        const specOutput = document.getElementById("spec-output");
+        const app = document.getElementById("app");
+        const compileStatus = document.getElementById("compile-status");
+        function executeCompile() {
+            try {
+                const structure = JSON.parse(structEditor.value);
+                const data = JSON.parse(dataEditor.value);
+                const t0 = performance.now();
+                const compiledSpec = compile({ inStructure: structure, inData: data });
+                const elapsed = (performance.now() - t0).toFixed(2);
+                specOutput.textContent = JSON.stringify(compiledSpec, null, 2);
+                app.innerHTML = "";
+                const domNode = buildSpecElement({ inSpec: compiledSpec });
+                if (domNode) {
+                    if (Array.isArray(domNode)) app.append(...domNode);
+                    else app.appendChild(domNode);
+                }
+                compileStatus.innerHTML = `<span class="w-2 h-2 rounded-full bg-emerald-500"></span> Compiled in ${elapsed}ms`;
+                compileStatus.className = "text-xs font-mono text-emerald-600 font-semibold flex items-center gap-1.5";
+            } catch (err) {
+                console.error(err);
+                compileStatus.innerHTML = `<span class="w-2 h-2 rounded-full bg-rose-500"></span> Error: ${err.message}`;
+                compileStatus.className = "text-xs font-mono text-rose-600 font-semibold flex items-center gap-1.5";
+            }
+        }
+        function loadPreset(key) {
+            const p = PRESETS[key];
+            if (!p) return;
+            structEditor.value = JSON.stringify(p.structure, null, 2);
+            dataEditor.value = JSON.stringify(p.data, null, 2);
+            executeCompile();
+        }
+        document.getElementById("preset-form").addEventListener("click", () => loadPreset("form"));
+        document.getElementById("preset-table").addEventListener("click", () => loadPreset("table"));
+        document.getElementById("preset-simple").addEventListener("click", () => loadPreset("simple"));
+        document.getElementById("compile-btn").addEventListener("click", executeCompile);
+        document.getElementById("copy-spec-btn").addEventListener("click", () => {
+            navigator.clipboard.writeText(specOutput.textContent).then(() => {
+                const btn = document.getElementById("copy-spec-btn");
+                btn.textContent = "Copied!";
+                setTimeout(() => { btn.textContent = "Copy Spec"; }, 1500);
+            });
+        });
+        // Initial preset
+        loadPreset("form");
+    </script>
+</body>
+</html>