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/docs/index.html ADDED Viewed

@@ -0,0 +1,248 @@
+<!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 | Pure JSON Specification Compiler</title>
+    <meta name="description"
+        content="json-to-spec: The pure JSON specification compiler that transforms structure.json (HOW) + data.json (WHAT) into valid Spec JSON ready for json-to-dom.">
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Fonts -->
+    <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;900&family=JetBrains+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        code, pre { font-family: 'JetBrains Mono', monospace; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col antialiased">
+    <!-- Top Navbar -->
+    <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-200">
+        <div class="max-w-6xl 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 shadow-sm">JS</span>
+                    <span>json-to-spec</span>
+                </a>
+                <span class="text-xs bg-indigo-50 text-indigo-700 font-semibold px-2.5 py-0.5 rounded-full border border-indigo-200">v1.0.0</span>
+            </div>
+            <nav class="flex items-center space-x-4 text-sm font-medium">
+                <a href="pages/what.html" class="text-slate-600 hover:text-indigo-600 transition">What</a>
+                <a href="pages/why.html" class="text-slate-600 hover:text-indigo-600 transition">Why</a>
+                <a href="pages/what-not.html" class="text-slate-600 hover:text-indigo-600 transition">What Not</a>
+                <a href="pages/architecture.html" class="text-slate-600 hover:text-indigo-600 transition">Architecture</a>
+                <a href="pages/how-it-works.html" class="text-slate-600 hover:text-indigo-600 transition">How It Works</a>
+                <a href="samples/index.html" class="text-slate-600 hover:text-indigo-600 transition">Samples</a>
+                <a href="demo.html" class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 shadow-sm transition">Playground</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Main Container -->
+    <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 flex-1 w-full space-y-12">
+        <!-- Hero Section -->
+        <div class="text-center max-w-3xl mx-auto space-y-4">
+            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-200 text-indigo-700 text-xs font-mono font-semibold">
+                <span>structure.json + data.json &rarr; spec.json</span>
+            </div>
+            <h1 class="text-4xl sm:text-5xl font-black text-slate-900 tracking-tight leading-tight">
+                Pure JSON Specification Compiler for <span class="text-indigo-600">Declarative UI</span>
+            </h1>
+            <p class="text-base text-slate-600 leading-relaxed">
+                Eliminate template synchronization friction. The 2-file compiler separates <strong>HOW</strong> to display from <strong>WHAT</strong> to display, outputting standard specification JSON ready for <code class="text-indigo-600 font-semibold">json-to-dom</code>.
+            </p>
+            <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
+                <a href="demo.html" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm rounded-xl shadow-md transition flex items-center gap-2">
+                    <span>⚡</span> Launch Live Playground
+                </a>
+                <a href="samples/index.html" class="px-5 py-2.5 bg-white hover:bg-slate-100 border border-slate-300 text-slate-700 font-bold text-sm rounded-xl transition flex items-center gap-2">
+                    <span>📦</span> Explore CDN Samples
+                </a>
+            </div>
+        </div>
+        <!-- Documentation Topic Gateways -->
+        <div class="space-y-4">
+            <h2 class="text-xl font-black text-slate-900 tracking-tight">Documentation & Guides</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
+                <!-- Gateway 1: What -->
+                <a href="pages/what.html" class="group p-5 bg-white rounded-2xl border border-slate-200 hover:border-indigo-500 hover:shadow-md transition flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="w-8 h-8 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold text-sm">💡</span>
+                            <span class="text-[10px] font-mono px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100">Core</span>
+                        </div>
+                        <h3 class="text-base font-bold text-slate-900 group-hover:text-indigo-600 transition mb-1">What is json-to-spec?</h3>
+                        <p class="text-xs text-slate-600 leading-relaxed">
+                            The 2-file specification compiler contract, core properties, and why data-in / data-out transforms matter.
+                        </p>
+                    </div>
+                    <div class="mt-4 pt-3 border-t border-slate-100 text-xs font-semibold text-indigo-600 flex items-center gap-1">
+                        <span>Read Guide</span> <span>&rarr;</span>
+                    </div>
+                </a>
+                <!-- Gateway 2: Why -->
+                <a href="pages/why.html" class="group p-5 bg-white rounded-2xl border border-slate-200 hover:border-indigo-500 hover:shadow-md transition flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="w-8 h-8 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold text-sm">🎯</span>
+                            <span class="text-[10px] font-mono px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100">Rationale</span>
+                        </div>
+                        <h3 class="text-base font-bold text-slate-900 group-hover:text-indigo-600 transition mb-1">Why this repo exists</h3>
+                        <p class="text-xs text-slate-600 leading-relaxed">
+                            The flaws of string templates, heavy component frameworks, and multi-file orchestrators solved by the 2-file model.
+                        </p>
+                    </div>
+                    <div class="mt-4 pt-3 border-t border-slate-100 text-xs font-semibold text-indigo-600 flex items-center gap-1">
+                        <span>Read Rationale</span> <span>&rarr;</span>
+                    </div>
+                </a>
+                <!-- Gateway 3: What Not -->
+                <a href="pages/what-not.html" class="group p-5 bg-white rounded-2xl border border-slate-200 hover:border-rose-500 hover:shadow-md transition flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="w-8 h-8 rounded-lg bg-rose-50 text-rose-600 flex items-center justify-center font-bold text-sm">🚫</span>
+                            <span class="text-[10px] font-mono px-2 py-0.5 rounded-full bg-rose-50 text-rose-700 border border-rose-100">Boundaries</span>
+                        </div>
+                        <h3 class="text-base font-bold text-slate-900 group-hover:text-rose-600 transition mb-1">What json-to-spec is NOT</h3>
+                        <p class="text-xs text-slate-600 leading-relaxed">
+                            Clear non-goals: not a DOM renderer, not a virtual DOM, not a CSS framework, and not an imperative eval engine.
+                        </p>
+                    </div>
+                    <div class="mt-4 pt-3 border-t border-slate-100 text-xs font-semibold text-rose-600 flex items-center gap-1">
+                        <span>Read Boundaries</span> <span>&rarr;</span>
+                    </div>
+                </a>
+                <!-- Gateway 4: Architecture -->
+                <a href="pages/architecture.html" class="group p-5 bg-white rounded-2xl border border-slate-200 hover:border-emerald-500 hover:shadow-md transition flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center font-bold text-sm">⚙️</span>
+                            <span class="text-[10px] font-mono px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-100">Internals</span>
+                        </div>
+                        <h3 class="text-base font-bold text-slate-900 group-hover:text-emerald-600 transition mb-1">Runtime Architecture</h3>
+                        <p class="text-xs text-slate-600 leading-relaxed">
+                            Compiler pipeline breakdown: traversal, operation detection, filter evaluation, and safe token interpolation.
+                        </p>
+                    </div>
+                    <div class="mt-4 pt-3 border-t border-slate-100 text-xs font-semibold text-emerald-600 flex items-center gap-1">
+                        <span>Read Architecture</span> <span>&rarr;</span>
+                    </div>
+                </a>
+                <!-- Gateway 5: How It Works -->
+                <a href="pages/how-it-works.html" class="group p-5 bg-white rounded-2xl border border-slate-200 hover:border-indigo-500 hover:shadow-md transition flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="w-8 h-8 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold text-sm">📘</span>
+                            <span class="text-[10px] font-mono px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100">Tutorial</span>
+                        </div>
+                        <h3 class="text-base font-bold text-slate-900 group-hover:text-indigo-600 transition mb-1">How It Works</h3>
+                        <p class="text-xs text-slate-600 leading-relaxed">
+                            Step-by-step tutorial: create structure.json, provide data.json, compile, and render live DOM with json-to-dom.
+                        </p>
+                    </div>
+                    <div class="mt-4 pt-3 border-t border-slate-100 text-xs font-semibold text-indigo-600 flex items-center gap-1">
+                        <span>Read Tutorial</span> <span>&rarr;</span>
+                    </div>
+                </a>
+                <!-- Gateway 6: Samples Hub -->
+                <a href="samples/index.html" class="group p-5 bg-white rounded-2xl border border-slate-200 hover:border-amber-500 hover:shadow-md transition flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="w-8 h-8 rounded-lg bg-amber-50 text-amber-600 flex items-center justify-center font-bold text-sm">🧪</span>
+                            <span class="text-[10px] font-mono px-2 py-0.5 rounded-full bg-amber-50 text-amber-700 border border-amber-100">Samples</span>
+                        </div>
+                        <h3 class="text-base font-bold text-slate-900 group-hover:text-amber-600 transition mb-1">Samples & Demos</h3>
+                        <p class="text-xs text-slate-600 leading-relaxed">
+                            Pre-built live workbenches for Dynamic Forms and Nested Tables loading compiler bundles directly from CDN.
+                        </p>
+                    </div>
+                    <div class="mt-4 pt-3 border-t border-slate-100 text-xs font-semibold text-amber-600 flex items-center gap-1">
+                        <span>Open Samples</span> <span>&rarr;</span>
+                    </div>
+                </a>
+            </div>
+        </div>
+        <!-- 30-Second Quick Start -->
+        <div class="bg-slate-900 text-slate-100 rounded-2xl p-6 sm:p-8 shadow-sm border border-slate-800">
+            <div class="flex items-center justify-between mb-4">
+                <div>
+                    <span class="text-xs uppercase font-bold text-slate-400 tracking-wider">30-Second Integration</span>
+                    <h3 class="text-base font-bold text-white">How It Works in Your Application</h3>
+                </div>
+                <span class="text-xs text-indigo-400 font-mono">Pure CDN &bull; ES Modules</span>
+            </div>
+            <div class="bg-slate-950 p-4 rounded-xl font-mono text-xs overflow-x-auto text-slate-200 leading-relaxed border border-slate-800">
+<span class="text-slate-500">// 1. Import compiler & DOM engine directly via GitHub Pages CDN (or npm package)</span>
+<span class="text-indigo-400">import</span> { compile } <span class="text-indigo-400">from</span> <span class="text-emerald-300">"https://keshavsoft.github.io/json-to-spec/dist/v1/min.js"</span>;
+<span class="text-indigo-400">import</span> { buildSpecElement } <span class="text-indigo-400">from</span> <span class="text-emerald-300">"https://keshavsoft.github.io/json-to-dom/dist/v16/min.js"</span>;
+<span class="text-slate-500">// 2. Compile structure.json (HOW) + data.json (WHAT) &rarr; spec</span>
+<span class="text-indigo-400">const</span> spec = compile({
+    inStructure: structureBlueprint,
+    inData: businessDataPayload
+});
+<span class="text-slate-500">// 3. Render directly into native browser DOM elements</span>
+<span class="text-indigo-400">const</span> domNode = buildSpecElement({ inSpec: spec });
+document.getElementById(<span class="text-amber-300">"app"</span>).appendChild(domNode);
+            </div>
+        </div>
+        <!-- CDN Distribution Endpoints -->
+        <div class="bg-white rounded-2xl p-6 border border-slate-200 space-y-4">
+            <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wide">Official CDN Endpoints</h3>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-mono">
+                <div class="p-3 rounded-xl bg-slate-50 border border-slate-200">
+                    <span class="text-slate-400 block text-[10px] uppercase font-bold">Latest Stable CDN</span>
+                    <span class="text-indigo-600 break-all font-semibold">https://keshavsoft.github.io/json-to-spec/dist/min.js</span>
+                </div>
+                <div class="p-3 rounded-xl bg-slate-50 border border-slate-200">
+                    <span class="text-slate-400 block text-[10px] uppercase font-bold">Version 1 CDN</span>
+                    <span class="text-indigo-600 break-all font-semibold">https://keshavsoft.github.io/json-to-spec/dist/v1/min.js</span>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Clean Footer -->
+    <footer class="bg-white border-t border-slate-200 py-6 mt-auto">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500">
+            <div class="flex items-center space-x-2">
+                <span class="font-bold text-slate-700">json-to-spec</span>
+                <span>&bull;</span>
+                <span>KeshavSoft Pure Declarative UI Architecture</span>
+            </div>
+            <div class="flex items-center space-x-4 flex-wrap">
+                <a href="pages/what.html" class="hover:text-indigo-600 transition">What</a>
+                <a href="pages/why.html" class="hover:text-indigo-600 transition">Why</a>
+                <a href="pages/what-not.html" class="hover:text-indigo-600 transition">What Not</a>
+                <a href="pages/architecture.html" class="hover:text-indigo-600 transition">Architecture</a>
+                <a href="pages/how-it-works.html" class="hover:text-indigo-600 transition">How It Works</a>
+                <a href="demo.html" class="hover:text-indigo-600 transition">Playground</a>
+                <a href="samples/index.html" class="hover:text-indigo-600 transition">Samples</a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>

package/docs/pages/architecture.html ADDED Viewed

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Architecture & Pipeline | json-to-spec</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        code, pre { font-family: 'JetBrains Mono', monospace; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col antialiased">
+    <!-- Top Navbar -->
+    <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-200">
+        <div class="max-w-6xl 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">Architecture</span>
+            </div>
+            <nav class="flex items-center space-x-4 text-sm font-medium">
+                <a href="../index.html" class="text-slate-600 hover:text-slate-900 transition">Home</a>
+                <a href="./what.html" class="text-slate-600 hover:text-slate-900 transition">What</a>
+                <a href="./why.html" class="text-slate-600 hover:text-slate-900 transition">Why</a>
+                <a href="./what-not.html" class="text-slate-600 hover:text-slate-900 transition">What Not</a>
+                <a href="./architecture.html" class="text-indigo-600 font-bold">Architecture</a>
+                <a href="./how-it-works.html" class="text-slate-600 hover:text-slate-900 transition">How It Works</a>
+                <a href="../demo.html" class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 shadow-sm transition">Playground</a>
+            </nav>
+        </div>
+    </header>
+    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1 w-full space-y-8">
+        <div class="space-y-3">
+            <span class="text-xs uppercase font-bold text-indigo-600 tracking-wider font-mono">Engine Internals</span>
+            <h1 class="text-4xl font-black text-slate-900 tracking-tight">Compiler Architecture</h1>
+            <p class="text-base text-slate-600 leading-relaxed">
+                The compilation flow from decoupled JSON inputs to valid specification JSON follows a multi-stage recursive tree traversal pipeline.
+            </p>
+        </div>
+        <div class="bg-slate-900 text-slate-100 rounded-2xl p-6 font-mono text-xs overflow-x-auto leading-relaxed border border-slate-800">
+┌─────────────────────────────────────────────────────────────┐
+│ 1. Normalization (compile)                                  │
+│    - Accepts inStructure & inData via in-local convention   │
+└──────────────────────────────┬──────────────────────────────┘
+                               │
+                               ▼
+┌─────────────────────────────────────────────────────────────┐
+│ 2. Recursive Traversal (compileTree.js)                     │
+│    - Array Nodes: Compile children & flatten                │
+│    - Object Nodes: Check operation vs standard element      │
+└──────────────────────────────┬──────────────────────────────┘
+                               │
+        ┌──────────────────────┴──────────────────────┐
+        ▼                                             ▼
+┌──────────────────────────────┐        ┌──────────────────────────────┐
+│ [operation: "iterate"]       │        │ [Standard Element Node]      │
+│ - Resolve source collection  │        │ - Clone & tag transformation │
+│ - Filter isVisible: false    │        │ - Interpolate textContent    │
+│ - Stamp template per item    │        │ - Interpolate attributes     │
+│ - Bind $index, $number, row  │        │ - Bind data values           │
+└──────────────┬───────────────┘        └──────────────┬───────────────┘
+               │                                       │
+               └───────────────────┬───────────────────┘
+                                   │
+                                   ▼
+┌─────────────────────────────────────────────────────────────┐
+│ 3. Spec JSON Output (ready for json-to-dom)                 │
+└─────────────────────────────────────────────────────────────┘
+        </div>
+        <div class="space-y-4">
+            <h2 class="text-xl font-bold text-slate-900">Pipeline Stages</h2>
+            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-2">
+                <span class="text-xs font-bold uppercase text-purple-600 font-mono">Stage 1</span>
+                <h3 class="font-bold text-slate-800 text-sm">Universal Tree Traversal</h3>
+                <p class="text-xs text-slate-600 leading-relaxed">
+                    Traverses any arbitrary depth. Arrays are recursively mapped and automatically flattened, allowing node operations to expand dynamically into sibling nodes.
+                </p>
+            </div>
+            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-2">
+                <span class="text-xs font-bold uppercase text-emerald-600 font-mono">Stage 2</span>
+                <h3 class="font-bold text-slate-800 text-sm">Operation Detection & Filter Execution</h3>
+                <p class="text-xs text-slate-600 leading-relaxed">
+                    Detects <code>operation: "iterate"</code>. Resolves collections from root data or local context, drops items marked <code>isVisible: false</code>, and injects <code>$index</code>, <code>$number</code>, and parent <code>row</code> references.
+                </p>
+            </div>
+            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-2">
+                <span class="text-xs font-bold uppercase text-indigo-600 font-mono">Stage 3</span>
+                <h3 class="font-bold text-slate-800 text-sm">Token Interpolation & Control Adaptation</h3>
+                <p class="text-xs text-slate-600 leading-relaxed">
+                    Interpolates <code>${field}</code>, <code>${value}</code>, <code>${title}</code>, and deep dot-paths. Converts <code>input</code> elements to <code>textarea</code> when field metadata requires multiline input.
+                </p>
+            </div>
+        </div>
+    </main>
+    <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 Declarative UI Architecture &bull; MIT License
+    </footer>
+</body>
+</html>

package/docs/pages/how-it-works.html ADDED Viewed

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>How It Works | json-to-spec Guide</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        code, pre { font-family: 'JetBrains Mono', monospace; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col antialiased">
+    <!-- Top Navbar -->
+    <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-200">
+        <div class="max-w-6xl 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">Guide</span>
+            </div>
+            <nav class="flex items-center space-x-4 text-sm font-medium">
+                <a href="../index.html" class="text-slate-600 hover:text-slate-900 transition">Home</a>
+                <a href="./what.html" class="text-slate-600 hover:text-slate-900 transition">What</a>
+                <a href="./why.html" class="text-slate-600 hover:text-slate-900 transition">Why</a>
+                <a href="./what-not.html" class="text-slate-600 hover:text-slate-900 transition">What Not</a>
+                <a href="./architecture.html" class="text-slate-600 hover:text-slate-900 transition">Architecture</a>
+                <a href="./how-it-works.html" class="text-indigo-600 font-bold">How It Works</a>
+                <a href="../demo.html" class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 shadow-sm transition">Playground</a>
+            </nav>
+        </div>
+    </header>
+    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1 w-full space-y-8">
+        <div class="space-y-3">
+            <span class="text-xs uppercase font-bold text-indigo-600 tracking-wider font-mono">Step-by-Step Guide</span>
+            <h1 class="text-4xl font-black text-slate-900 tracking-tight">How to Build UIs with json-to-spec</h1>
+            <p class="text-base text-slate-600 leading-relaxed">
+                Follow this quick 4-step tutorial to declare a blueprint, supply data, compile the spec, and render it into the live DOM.
+            </p>
+        </div>
+        <!-- Step 1 -->
+        <div class="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200 shadow-sm space-y-4">
+            <div class="flex items-center gap-3">
+                <span class="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-bold text-sm">1</span>
+                <h2 class="text-lg font-bold text-slate-900">Define the UI Blueprint (structure.json)</h2>
+            </div>
+            <p class="text-xs text-slate-600 leading-relaxed">
+                Create a declarative JSON tree. When a dynamic repeat point is needed, use <code>"operation": "iterate"</code>:
+            </p>
+            <pre class="bg-slate-900 text-purple-300 p-4 rounded-xl text-xs overflow-x-auto leading-relaxed border border-slate-800">
+{
+  "tagName": "div",
+  "attributes": { "class": "card p-4 shadow-sm" },
+  "children": [
+    { "tagName": "h3", "textContent": "${title}", "attributes": { "class": "h5 mb-3" } },
+    {
+      "operation": "iterate",
+      "source": "users",
+      "template": {
+        "tagName": "div",
+        "attributes": { "class": "d-flex justify-content-between py-2 border-bottom" },
+        "children": [
+          { "tagName": "span", "textContent": "${$number}. ${name}" },
+          { "tagName": "span", "textContent": "${role}", "attributes": { "class": "badge bg-primary" } }
+        ]
+      }
+    }
+  ]
+}</pre>
+        </div>
+        <!-- Step 2 -->
+        <div class="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200 shadow-sm space-y-4">
+            <div class="flex items-center gap-3">
+                <span class="w-8 h-8 rounded-lg bg-emerald-600 text-white flex items-center justify-center font-bold text-sm">2</span>
+                <h2 class="text-lg font-bold text-slate-900">Provide the Data Payload (data.json)</h2>
+            </div>
+            <pre class="bg-slate-900 text-emerald-300 p-4 rounded-xl text-xs overflow-x-auto leading-relaxed border border-slate-800">
+{
+  "title": "Engineering Team Directory",
+  "users": [
+    { "name": "Karthik", "role": "Lead Architect" },
+    { "name": "Praveen", "role": "Frontend Engineer" },
+    { "name": "Suresh", "role": "DevOps Engineer" }
+  ]
+}</pre>
+        </div>
+        <!-- Step 3 & 4 -->
+        <div class="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200 shadow-sm space-y-4">
+            <div class="flex items-center gap-3">
+                <span class="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-bold text-sm">3</span>
+                <h2 class="text-lg font-bold text-slate-900">Compile & Render to DOM</h2>
+            </div>
+            <pre class="bg-slate-900 text-indigo-300 p-4 rounded-xl text-xs overflow-x-auto leading-relaxed border border-slate-800">
+import { compile } from "https://keshavsoft.github.io/json-to-spec/dist/v1/min.js";
+import { buildSpecElement } from "https://keshavsoft.github.io/json-to-dom/dist/v16/min.js";
+// 1. Compile structure + data into spec
+const spec = compile({
+    inStructure: structureBlueprint,
+    inData: dataPayload
+});
+// 2. Render directly via json-to-dom
+const domNode = buildSpecElement({ inSpec: spec });
+document.getElementById("app").appendChild(domNode);</pre>
+        </div>
+    </main>
+    <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 Declarative UI Architecture &bull; MIT License
+    </footer>
+</body>
+</html>

package/docs/pages/what-not.html ADDED Viewed

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>What json-to-spec is NOT | Non-Goals & Boundaries</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        code, pre { font-family: 'JetBrains Mono', monospace; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col antialiased">
+    <!-- Top Navbar -->
+    <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-200">
+        <div class="max-w-6xl 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-rose-50 text-rose-700 font-semibold px-2 py-0.5 rounded-full border border-rose-200">Boundaries</span>
+            </div>
+            <nav class="flex items-center space-x-4 text-sm font-medium">
+                <a href="../index.html" class="text-slate-600 hover:text-slate-900 transition">Home</a>
+                <a href="./what.html" class="text-slate-600 hover:text-slate-900 transition">What</a>
+                <a href="./why.html" class="text-slate-600 hover:text-slate-900 transition">Why</a>
+                <a href="./what-not.html" class="text-indigo-600 font-bold">What Not</a>
+                <a href="./architecture.html" class="text-slate-600 hover:text-slate-900 transition">Architecture</a>
+                <a href="./how-it-works.html" class="text-slate-600 hover:text-slate-900 transition">How It Works</a>
+                <a href="../demo.html" class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 shadow-sm transition">Playground</a>
+            </nav>
+        </div>
+    </header>
+    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1 w-full space-y-8">
+        <div class="space-y-3">
+            <span class="text-xs uppercase font-bold text-rose-600 tracking-wider font-mono">Boundaries & Non-Goals</span>
+            <h1 class="text-4xl font-black text-slate-900 tracking-tight">What json-to-spec is NOT.</h1>
+            <p class="text-base text-slate-600 leading-relaxed">
+                By maintaining strict boundaries, `json-to-spec` remains zero-dependency, ultra-lightweight, and universally portable.
+            </p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-2">
+                <div class="w-10 h-10 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center font-bold text-lg mb-2">
+                    🚫
+                </div>
+                <h2 class="text-lg font-bold text-slate-900">NOT a DOM Renderer</h2>
+                <p class="text-xs text-slate-600 leading-relaxed">
+                    It does not call <code>document.createElement</code> or touch the browser DOM. This keeps it completely server- and edge-friendly. Rendering is delegated to <code class="text-indigo-600 font-bold">json-to-dom</code>.
+                </p>
+            </div>
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-2">
+                <div class="w-10 h-10 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center font-bold text-lg mb-2">
+                    🚫
+                </div>
+                <h2 class="text-lg font-bold text-slate-900">NOT a Virtual DOM</h2>
+                <p class="text-xs text-slate-600 leading-relaxed">
+                    It does not maintain a reactive Virtual DOM tree or diffing algorithms. When data updates, re-running <code>compile()</code> takes less than 0.4ms.
+                </p>
+            </div>
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-2">
+                <div class="w-10 h-10 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center font-bold text-lg mb-2">
+                    🚫
+                </div>
+                <h2 class="text-lg font-bold text-slate-900">NOT a CSS Framework</h2>
+                <p class="text-xs text-slate-600 leading-relaxed">
+                    It does not provide opinionated styling or themes. You can use Tailwind CSS, Bootstrap, Bulma, vanilla CSS, or custom utility tokens.
+                </p>
+            </div>
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-2">
+                <div class="w-10 h-10 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center font-bold text-lg mb-2">
+                    🚫
+                </div>
+                <h2 class="text-lg font-bold text-slate-900">NOT an Imperative Eval Engine</h2>
+                <p class="text-xs text-slate-600 leading-relaxed">
+                    It does not execute arbitrary JavaScript or use <code>eval()</code>. Operations are declarative JSON only, guaranteeing safety and strict CSP compliance.
+                </p>
+            </div>
+        </div>
+    </main>
+    <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 Declarative UI Architecture &bull; MIT License
+    </footer>
+</body>
+</html>