json-renderers 1.18.5 → 1.18.8

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.
package/docs/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" class="dark">
2
+ <html lang="en">
3
3
 
4
4
  <head>
5
5
  <meta charset="UTF-8">
@@ -16,18 +16,15 @@
16
16
  <script src="https://cdn.tailwindcss.com"></script>
17
17
  <script>
18
18
  tailwind.config = {
19
- darkMode: 'class',
20
19
  theme: {
21
20
  extend: {
22
21
  colors: {
23
22
  brand: {
24
- 50: '#eef2ff',
25
- 100: '#e0e7ff',
26
- 500: '#6366f1',
27
- 600: '#4f46e5',
28
- 700: '#4338ca',
29
- 800: '#3730a3',
30
- 900: '#312e81'
23
+ 50: '#f0fdf4',
24
+ 100: '#dcfce7',
25
+ 500: '#10b981',
26
+ 600: '#059669',
27
+ 700: '#047857'
31
28
  }
32
29
  },
33
30
  fontFamily: {
@@ -39,6 +36,12 @@
39
36
  };
40
37
  </script>
41
38
  <style>
39
+ body {
40
+ font-family: 'Inter', sans-serif;
41
+ background-color: #ffffff;
42
+ color: #1e293b;
43
+ }
44
+
42
45
  pre,
43
46
  code {
44
47
  font-family: 'Fira Code', monospace;
@@ -50,974 +53,397 @@
50
53
  }
51
54
 
52
55
  .custom-scrollbar::-webkit-scrollbar-track {
53
- background: rgba(15, 23, 42, 0.6);
56
+ background: #f1f5f9;
54
57
  }
55
58
 
56
59
  .custom-scrollbar::-webkit-scrollbar-thumb {
57
- background: rgba(99, 102, 241, 0.3);
60
+ background: #cbd5e1;
58
61
  border-radius: 4px;
59
62
  }
60
63
 
61
64
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
62
- background: rgba(99, 102, 241, 0.6);
65
+ background: #94a3b8;
63
66
  }
64
67
 
65
- .glass-panel {
66
- background: rgba(15, 23, 42, 0.75);
67
- backdrop-filter: blur(12px);
68
- border: 1px solid rgba(255, 255, 255, 0.08);
68
+ .light-card {
69
+ background: #ffffff;
70
+ border: 1px solid #e2e8f0;
71
+ border-radius: 1.25rem;
72
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
73
+ transition: all 0.2s ease-in-out;
69
74
  }
70
75
 
71
- .glass-card {
72
- background: rgba(30, 41, 59, 0.5);
73
- backdrop-filter: blur(8px);
74
- border: 1px solid rgba(255, 255, 255, 0.05);
76
+ .light-card:hover {
77
+ box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.06);
75
78
  }
76
79
  </style>
77
80
  </head>
78
81
 
79
82
  <body
80
- class="bg-slate-950 text-slate-100 min-h-screen antialiased flex flex-col font-sans selection:bg-indigo-500 selection:text-white">
83
+ class="bg-white text-slate-800 min-h-screen antialiased flex flex-col font-sans selection:bg-emerald-500 selection:text-white">
81
84
 
82
- <!-- Top Navbar -->
83
- <header class="border-b border-slate-800/80 bg-slate-900/80 backdrop-blur sticky top-0 z-50">
85
+ <!-- Top Sticky Navbar -->
86
+ <header class="border-b border-slate-200 bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm">
84
87
  <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
85
88
  <div class="flex items-center gap-3">
86
- <div
87
- class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-600 to-indigo-600 flex items-center justify-center font-bold text-white shadow-lg text-lg shadow-emerald-500/20">
89
+ <a href="index.html"
90
+ class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-600 to-indigo-600 flex items-center justify-center font-bold text-white shadow-md text-lg hover:scale-105 transition">
88
91
  🖥️
89
- </div>
92
+ </a>
90
93
  <div>
91
94
  <div class="flex items-center gap-2">
92
- <h1 class="text-base font-bold text-white tracking-tight">json-renderers</h1>
95
+ <a href="index.html"
96
+ class="text-base font-bold text-slate-900 tracking-tight hover:text-emerald-600 transition">json-renderers</a>
93
97
  <span
94
- class="px-2 py-0.5 text-xs bg-emerald-500/20 text-emerald-300 rounded-full border border-emerald-500/30 font-mono">v13.1.0</span>
98
+ class="px-2 py-0.5 text-xs bg-emerald-50 text-emerald-800 rounded-full border border-emerald-200 font-mono font-medium">v14.0</span>
95
99
  </div>
96
- <p class="text-xs text-slate-400">Browser DOM Component Renderer Runtime</p>
100
+ <p class="text-xs text-slate-500">Browser DOM Component Renderer Runtime</p>
97
101
  </div>
98
102
  </div>
99
103
 
100
- <div class="flex items-center gap-2.5">
101
- <a href="subDoc/index.html"
102
- class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-purple-600 hover:bg-purple-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-purple-600/30">
103
- <span>📚</span> Sub Docs
104
- </a>
105
- <a href="aboutSelect.html"
106
- class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-cyan-600/30">
107
- <span>▣</span> About Select Guide
108
- </a>
109
- <a href="table/index.html"
110
- class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-indigo-600/30">
111
- <span>📖</span> Table Guide
112
- </a>
113
- <a href="#workbench"
114
- class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white transition flex items-center gap-1.5 shadow-sm shadow-emerald-600/30">
115
- <span>⚡</span> Live DOM Workbench
104
+ <nav class="flex items-center gap-1.5 sm:gap-2 text-sm">
105
+ <a href="samples/index.html"
106
+ class="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-teal-600 hover:bg-teal-700 text-white transition flex items-center gap-1.5 shadow-sm">
107
+ <span>📦</span> Samples Hub
116
108
  </a>
117
- <a href="#samples"
118
- class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition hidden sm:flex items-center gap-1">
119
- <span>📂</span> Samples
109
+ <a href="subDoc/index.html"
110
+ class="px-3 py-1.5 text-xs font-medium rounded-lg bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 transition">
111
+ Sub Docs
120
112
  </a>
113
+
121
114
  <a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
122
- class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition flex items-center gap-1.5">
123
- <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
115
+ class="px-3 py-1.5 text-xs font-medium rounded-lg bg-white hover:bg-slate-50 text-slate-800 border border-slate-300 transition flex items-center gap-1.5 shadow-xs">
116
+ <svg class="w-4 h-4 fill-current text-slate-800" viewBox="0 0 24 24">
124
117
  <path
125
118
  d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
126
119
  </svg>
127
- <span class="hidden md:inline">GitHub</span>
120
+ <span class="hidden lg:inline font-semibold">GitHub</span>
128
121
  </a>
129
- </div>
122
+ </nav>
130
123
  </div>
131
124
  </header>
132
125
 
133
- <main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-12">
126
+ <main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-12 bg-white">
134
127
 
135
128
  <!-- Hero Section -->
136
- <section class="text-center py-6 sm:py-10 space-y-5">
129
+ <section class="bg-white rounded-3xl p-6 sm:p-10 border border-slate-200 text-center space-y-4 shadow-sm">
137
130
  <div
138
- class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-300 font-mono">
139
- <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
140
- Ecosystem Story: DOM Mounting Runtime
131
+ class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-xs text-emerald-800 font-mono font-semibold">
132
+ <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
133
+ Declarative DOM Mounting Runtime
141
134
  </div>
142
- <h2 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight leading-tight">
143
- Render Business JSON into Live DOM <br class="hidden sm:inline" />
144
- <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-teal-300 to-indigo-400">Powered
145
- by json-renderers-build + json-to-tag</span>
146
- </h2>
147
- <p class="max-w-4xl mx-auto text-slate-400 text-sm sm:text-base leading-relaxed">
148
- The real DOM magic happens in <strong class="text-emerald-300 font-mono">@keshavsoft/json-to-tag</strong>.
149
- Before that, data may be shaped in <strong class="text-indigo-300 font-mono">json-transformer</strong>, a
150
- component blueprint is built in <strong class="text-indigo-300 font-mono">json-renderers-build</strong>, and
151
- <strong class="text-slate-200">json-renderers</strong> simply orchestrates the runtime flow and mounts the final
152
- HTML into the browser container.
153
- </p>
154
135
 
155
- <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
156
- <a href="subDoc/index.html"
157
- class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-purple-600/25">
158
- <span>📚</span> Sub Docs (Simple &amp; Advanced)
159
- </a>
160
- <a href="aboutSelect.html"
161
- class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-cyan-600 to-teal-600 hover:from-cyan-500 hover:to-teal-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-cyan-600/25">
162
- <span>▣</span> Select Guide (CDN &amp; KS)
163
- </a>
164
- <a href="table/index.html"
165
- class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-emerald-600 to-indigo-600 hover:from-emerald-500 hover:to-indigo-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-indigo-600/25">
166
- <span>📖</span> Table Guide (CDN &amp; KS)
167
- </a>
168
- <a href="#workbench"
169
- class="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-xs sm:text-sm transition flex items-center gap-2 shadow-lg shadow-emerald-600/25">
170
- <span>⚡</span> Try Live DOM Mounting
171
- </a>
172
- <a href="table.html"
173
- class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-200 font-semibold text-xs sm:text-sm transition flex items-center gap-2">
174
- <span>📊</span> Table Story
175
- </a>
176
- <a href="select.html"
177
- class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-200 font-semibold text-xs sm:text-sm transition flex items-center gap-2">
178
- <span>▣</span> Select Story
136
+ <h1 class="text-3xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
137
+ Render Business JSON into Live DOM <br class="hidden sm:inline" />
138
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 via-teal-600 to-indigo-600">
139
+ Powered by json-renderers-build + json-to-tag
140
+ </span>
141
+ </h1>
142
+
143
+ <p class="max-w-3xl mx-auto text-slate-700 text-sm sm:text-base leading-relaxed">
144
+ The real DOM creation happens in <strong
145
+ class="text-emerald-700 font-mono font-semibold">@keshavsoft/json-to-tag</strong>.
146
+ Before that, component blueprints are prepared in <strong
147
+ class="text-indigo-700 font-mono font-semibold">json-renderers-build</strong>, and
148
+ <strong class="text-slate-900 font-bold">json-renderers</strong> orchestrates the runtime flow and mounts the
149
+ final
150
+ HTML into your browser container.
151
+ <div class="pt-2 flex justify-center gap-3 flex-wrap">
152
+ <a href="https://keshavsoft.github.io/dom-builder/" target="_blank"
153
+ class="px-5 py-2.5 text-sm font-semibold rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white transition flex items-center gap-2 shadow-md hover:scale-105">
154
+ <span>🌐</span> Explore Interactive Demos &amp; Playground (dom-builder) &rarr;
179
155
  </a>
180
156
  </div>
181
157
  </section>
182
158
 
183
- <!-- Inside the Builder: JSON Shape Section -->
184
- <section id="inside-builder" class="space-y-6">
185
- <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-slate-800/80 pb-4">
159
+ <!-- Simple House-Building Story Section (From subDoc/simpleDoc.html) -->
160
+ <section id="house-story" class="space-y-6">
161
+ <div class="border-b border-slate-200 pb-4 flex flex-col sm:flex-row sm:items-end justify-between gap-3">
186
162
  <div>
187
- <span class="text-xs uppercase font-mono tracking-wider text-cyan-400">Inside the Builder</span>
188
- <h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">What the runtime actually asks for</h3>
189
- </div>
190
- <p class="text-xs text-slate-400 max-w-md">
191
- The runtime does not hand-code table or select DOM. It asks for a JSON blueprint and then lets <span
192
- class="text-emerald-300 font-mono">json-to-tag</span> create real elements.
193
- </p>
194
- </div>
195
-
196
- <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
197
- <div class="glass-panel p-5 rounded-2xl">
198
- <div class="flex items-center justify-between mb-3">
199
- <span
200
- class="px-2 py-0.5 text-[11px] font-mono rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">Table
201
- Spec</span>
202
- <span class="text-lg">📊</span>
203
- </div>
204
- <pre class="text-xs text-slate-200 bg-slate-950/80 border border-slate-800 rounded-xl p-3 overflow-auto"><code>{
205
- "type": "table",
206
- "children": [
207
- { "type": "thead", "children": [{ "type": "tr", "children": ["Name", "City", "Amount"] }] },
208
- { "type": "tbody", "children": [
209
- { "type": "tr", "children": ["Alpha", "Hyderabad", 1200] },
210
- { "type": "tr", "children": ["Beta", "Bengaluru", 2200] }
211
- ] }
212
- ]
213
- }</code></pre>
214
- </div>
215
-
216
- <div class="glass-panel p-5 rounded-2xl">
217
- <div class="flex items-center justify-between mb-3">
218
- <span
219
- class="px-2 py-0.5 text-[11px] font-mono rounded bg-cyan-500/20 text-cyan-300 border border-cyan-500/30">Select
220
- Spec</span>
221
- <span class="text-lg">▣</span>
222
- </div>
223
- <pre class="text-xs text-slate-200 bg-slate-950/80 border border-slate-800 rounded-xl p-3 overflow-auto"><code>{
224
- "type": "select",
225
- "id": "city-select",
226
- "children": [
227
- { "type": "option", "value": "Hyderabad", "text": "Hyderabad" },
228
- { "type": "option", "value": "Bengaluru", "text": "Bengaluru" },
229
- { "type": "option", "value": "Pune", "text": "Pune" }
230
- ]
231
- }</code></pre>
163
+ <span class="text-xs uppercase font-mono tracking-wider text-emerald-700 font-bold">Conceptual Mental
164
+ Model</span>
165
+ <h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight mt-1">Simple House-Building Story
166
+ </h2>
232
167
  </div>
168
+ <a href="subDoc/simpleDoc.html"
169
+ class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-700 hover:text-emerald-800 font-mono transition">
170
+ <span>📖</span> Full simpleDoc.html &rarr;
171
+ </a>
233
172
  </div>
234
- </section>
235
173
 
236
- <!-- The In-Between & 3-Tier Pipeline Section -->
237
- <section id="in-between" class="space-y-6">
238
- <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-slate-800/80 pb-4">
239
- <div>
240
- <span class="text-xs uppercase font-mono tracking-wider text-emerald-400">Ecosystem Architecture</span>
241
- <h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">The "In-Between" Handoff Story</h3>
242
- </div>
243
- <p class="text-xs text-slate-400 max-w-md">
244
- How <span class="text-indigo-300 font-mono">json-transformer</span>, <span
245
- class="text-indigo-300 font-mono">json-renderers-build</span>, <span
246
- class="text-emerald-300 font-mono">json-to-tag</span>, and <span
247
- class="text-emerald-300 font-mono">json-renderers</span> work together.
174
+ <!-- Lead Narrative Box -->
175
+ <div class="bg-white p-6 rounded-2xl border border-slate-200 space-y-3 shadow-xs">
176
+ <p class="text-sm text-slate-700 leading-relaxed">
177
+ <strong class="text-slate-900 font-semibold">json-renderers</strong> is the browser runtime layer in the
178
+ KeshavSoft declarative UI ecosystem. It accepts render configuration, obtains a JSON description of the
179
+ requested component, asks <code
180
+ class="text-purple-700 font-mono bg-purple-50 px-1.5 py-0.5 rounded border border-purple-200">@keshavsoft/json-to-tag</code>
181
+ to create DOM nodes, and mounts the result in the requested browser container.
182
+ </p>
183
+ <p class="text-xs text-slate-600 leading-relaxed">
184
+ It is an orchestration layer rather than the specification compiler itself. The component structure is
185
+ prepared upstream by <code
186
+ class="text-indigo-700 font-mono bg-indigo-50 px-1.5 py-0.5 rounded border border-indigo-200">json-renderers-build</code>;
187
+ actual element construction is delegated to <code
188
+ class="text-purple-700 font-mono bg-purple-50 px-1.5 py-0.5 rounded border border-purple-200">@keshavsoft/json-to-tag</code>.
248
189
  </p>
249
190
  </div>
250
191
 
192
+ <!-- 3 Roles Grid -->
251
193
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
252
- <!-- Step 1 -->
253
- <div class="glass-panel p-5 rounded-2xl relative">
254
- <div class="flex items-center justify-between mb-3">
194
+
195
+ <!-- Role 1: The Architect -->
196
+ <div class="light-card p-6 space-y-3 bg-white">
197
+ <div class="flex items-center justify-between">
255
198
  <span
256
- class="px-2 py-0.5 text-[11px] font-mono rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">Step
257
- 1 • Spec Request</span>
258
- <span class="text-lg">📦</span>
199
+ class="w-10 h-10 rounded-xl bg-indigo-100 text-indigo-700 flex items-center justify-center text-xl font-bold">
200
+ 🏗️
201
+ </span>
202
+ <span
203
+ class="text-xs font-mono px-2.5 py-0.5 rounded-full bg-indigo-50 text-indigo-800 border border-indigo-200 font-semibold">
204
+ Step 1 &bull; Blueprint
205
+ </span>
206
+ </div>
207
+ <div>
208
+ <h3 class="text-base font-bold text-slate-900">json-renderers-build</h3>
209
+ <span class="text-xs font-semibold text-indigo-600 font-mono">The Architect</span>
259
210
  </div>
260
- <h4 class="text-base font-bold text-white mb-2">json-renderers-build</h4>
261
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
262
- <code class="text-emerald-300 font-mono">json-renderers</code> calls <code
263
- class="text-indigo-300 font-mono">jsonRenderBuild({ type, data, columns })</code>. The builder matches the
264
- skeleton blueprint (<code class="text-indigo-300 font-mono">table</code>, <code
265
- class="text-indigo-300 font-mono">select</code>) and evaluates it with <code
266
- class="text-indigo-300 font-mono">json-to-spec</code>.
211
+ <p class="text-xs text-slate-600 leading-relaxed">
212
+ Prepares a clean JSON blueprint specifying tags, classes, and attributes without touching real browser DOM
213
+ elements.
267
214
  </p>
268
215
  <div
269
- class="p-2.5 rounded-lg bg-slate-950/80 border border-indigo-500/30 text-[11px] font-mono text-indigo-300">
270
- Returns: specAsJsonToDom (AST)
216
+ class="bg-white p-2.5 rounded-lg border border-slate-200 text-[11px] font-mono text-indigo-700 font-medium">
217
+ Returns: specAsJsonToDom AST
271
218
  </div>
272
219
  </div>
273
220
 
274
- <!-- Step 2 -->
275
- <div class="glass-panel p-5 rounded-2xl relative">
276
- <div class="flex items-center justify-between mb-3">
221
+ <!-- Role 2: The Construction Worker -->
222
+ <div class="light-card p-6 space-y-3 bg-white">
223
+ <div class="flex items-center justify-between">
277
224
  <span
278
- class="px-2 py-0.5 text-[11px] font-mono rounded bg-purple-500/20 text-purple-300 border border-purple-500/30">Step
279
- 2 • Instantiation</span>
280
- <span class="text-lg">🏷️</span>
225
+ class="w-10 h-10 rounded-xl bg-purple-100 text-purple-700 flex items-center justify-center text-xl font-bold">
226
+ 🔨
227
+ </span>
228
+ <span
229
+ class="text-xs font-mono px-2.5 py-0.5 rounded-full bg-purple-50 text-purple-800 border border-purple-200 font-semibold">
230
+ Step 2 &bull; Elements
231
+ </span>
232
+ </div>
233
+ <div>
234
+ <h3 class="text-base font-bold text-slate-900">@keshavsoft/json-to-tag</h3>
235
+ <span class="text-xs font-semibold text-purple-600 font-mono">The Construction Worker</span>
281
236
  </div>
282
- <h4 class="text-base font-bold text-white mb-2">@keshavsoft/json-to-tag</h4>
283
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
284
- The generated specification AST is unwrapped (if fragment) and handed to <code
285
- class="text-purple-300 font-mono">jsonToTag(spec)</code>. Real browser DOM elements (<code
286
- class="text-purple-300 font-mono">HTMLTableElement</code>, <code
287
- class="text-purple-300 font-mono">DocumentFragment</code>) are constructed.
237
+ <p class="text-xs text-slate-600 leading-relaxed">
238
+ Reads the JSON blueprint and creates real native browser HTML elements using <code
239
+ class="text-purple-700 font-mono font-semibold">document.createElement()</code>.
288
240
  </p>
289
241
  <div
290
- class="p-2.5 rounded-lg bg-slate-950/80 border border-purple-500/30 text-[11px] font-mono text-purple-300">
291
- Returns: content (DOM Node / List)
242
+ class="bg-white p-2.5 rounded-lg border border-slate-200 text-[11px] font-mono text-purple-700 font-medium">
243
+ Returns: native DOM elements
292
244
  </div>
293
245
  </div>
294
246
 
295
- <!-- Step 3 -->
296
- <div
297
- class="glass-panel p-5 rounded-2xl border-emerald-500/50 shadow-xl shadow-emerald-500/10 bg-slate-900/90 relative">
298
- <div
299
- class="absolute top-0 right-0 bg-emerald-600 text-white text-[10px] uppercase font-bold tracking-wider px-2.5 py-0.5 rounded-bl-lg">
300
- This Repo
301
- </div>
302
- <div class="flex items-center justify-between mb-3">
247
+ <!-- Role 3: The Site Manager -->
248
+ <div class="light-card p-6 space-y-3 border-emerald-300 bg-white">
249
+ <div class="flex items-center justify-between">
250
+ <span
251
+ class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center text-xl font-bold">
252
+ 📋
253
+ </span>
303
254
  <span
304
- class="px-2 py-0.5 text-[11px] font-mono rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">Step
305
- 3 • Container Mount</span>
306
- <span class="text-lg">🖥️</span>
255
+ class="text-xs font-mono px-2.5 py-0.5 rounded-full bg-emerald-50 text-emerald-800 border border-emerald-200 font-semibold">
256
+ Step 3 &bull; Mount
257
+ </span>
307
258
  </div>
308
- <h4 class="text-base font-bold text-emerald-300 mb-2">json-renderers</h4>
309
- <p class="text-xs text-slate-300 leading-relaxed mb-4">
310
- Locates <code class="text-emerald-300 font-mono">document.getElementById(targetHtmlId)</code>. Clears or
311
- prepends content based on <code class="text-emerald-300 font-mono">appendPosition</code>, mounts the nodes,
312
- and returns the mounted container.
259
+ <div>
260
+ <h3 class="text-base font-bold text-slate-900">json-renderers</h3>
261
+ <span class="text-xs font-semibold text-emerald-700 font-mono">The Site Manager</span>
262
+ </div>
263
+ <p class="text-xs text-slate-600 leading-relaxed">
264
+ Puts those constructed elements in the correct target position on the webpage (<code
265
+ class="text-emerald-700 font-mono font-semibold">targetHtmlId</code>) and manages placement.
313
266
  </p>
314
267
  <div
315
- class="p-2.5 rounded-lg bg-slate-950/80 border border-emerald-500/30 text-[11px] font-mono text-emerald-200">
268
+ class="bg-white p-2.5 rounded-lg border border-slate-200 text-[11px] font-mono text-emerald-700 font-medium">
316
269
  container.append(content)
317
270
  </div>
318
271
  </div>
319
- </div>
320
- </section>
321
272
 
322
- <!-- Interactive Live DOM Workbench -->
323
- <section id="workbench" class="space-y-6">
324
- <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-slate-800/80 pb-4">
325
- <div>
326
- <span class="text-xs uppercase font-mono tracking-wider text-emerald-400">Live Demonstration</span>
327
- <h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">Interactive DOM Mounting Workbench</h3>
328
- </div>
329
- <div class="flex items-center gap-3">
330
- <label for="component-type" class="text-xs text-slate-400 font-medium">Type:</label>
331
- <select id="component-type"
332
- class="bg-slate-900 border border-slate-700 text-xs rounded-lg px-3 py-1.5 text-white font-mono focus:ring-2 focus:ring-emerald-500 focus:outline-none">
333
- <option value="table" selected>table</option>
334
- <option value="select">select</option>
335
- <option value="selectOptionsOnly">selectOptionsOnly</option>
336
- </select>
337
- <button id="btn-render-dom"
338
- class="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-semibold shadow-sm transition flex items-center gap-1 shadow-emerald-600/30">
339
- <span>▶</span> Mount to DOM
340
- </button>
341
- </div>
342
273
  </div>
343
274
 
344
- <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
345
-
346
- <!-- Left Column: Inputs (5 Cols) -->
347
- <div class="lg:col-span-5 space-y-4">
348
- <div class="glass-panel p-4 rounded-2xl space-y-3">
349
- <div class="flex items-center justify-between">
350
- <span class="text-xs font-bold text-white uppercase tracking-wider font-mono flex items-center gap-1.5">
351
- <span>📝</span> Input Data (JSON)
352
- </span>
353
- <div class="flex items-center gap-2">
354
- <select id="preset-selector"
355
- class="bg-slate-800 border border-slate-700 text-[11px] rounded px-2 py-1 text-slate-300 font-mono">
356
- <option value="batches">Preset: Batches</option>
357
- <option value="employees">Preset: Employees</option>
358
- <option value="ledgers">Preset: Ledgers</option>
359
- </select>
360
- <button id="btn-format-data"
361
- class="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800">Format</button>
362
- </div>
363
- </div>
364
- <textarea id="input-data" rows="8"
365
- class="w-full bg-slate-950 text-emerald-200 border border-slate-800 rounded-xl p-3 font-mono text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none custom-scrollbar"
366
- spellcheck="false"></textarea>
367
- </div>
368
-
369
- <div id="columns-panel" class="glass-panel p-4 rounded-2xl space-y-3">
370
- <div class="flex items-center justify-between">
371
- <span class="text-xs font-bold text-white uppercase tracking-wider font-mono flex items-center gap-1.5">
372
- <span>📊</span> Columns (for table)
373
- </span>
374
- <button id="btn-format-columns"
375
- class="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800">Format</button>
376
- </div>
377
- <textarea id="input-columns" rows="5"
378
- class="w-full bg-slate-950 text-emerald-200 border border-slate-800 rounded-xl p-3 font-mono text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none custom-scrollbar"
379
- spellcheck="false"></textarea>
380
- </div>
381
-
382
- <div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800/80 text-xs text-slate-400 space-y-1">
383
- <div class="flex items-center gap-1.5 text-emerald-400 font-semibold font-mono">
384
- <span>🎯</span> Mounting Contract
385
- </div>
386
- <p>
387
- Calls <code
388
- class="text-emerald-300 font-mono">render({ type, targetHtmlId: "live-mount-container", data, columns })</code>.
389
- Ingests spec from <code class="text-indigo-300 font-mono">json-renderers-build</code> and instantiates
390
- into DOM.
391
- </p>
392
- </div>
393
- </div>
394
-
395
- <!-- Right Column: Outputs (7 Cols) -->
396
- <div class="lg:col-span-7 flex flex-col space-y-3">
397
- <!-- View Toggle -->
398
- <div class="flex items-center justify-between bg-slate-900/80 p-1.5 rounded-xl border border-slate-800">
399
- <div class="flex items-center gap-1">
400
- <button id="tab-dom"
401
- class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-emerald-600 text-white transition flex items-center gap-1.5">
402
- <span>🖥️</span> Live Mounted DOM
403
- </button>
404
- <button id="tab-in-between"
405
- class="px-3 py-1.5 text-xs font-semibold rounded-lg text-slate-400 hover:text-white transition flex items-center gap-1.5">
406
- <span>🔗</span> "In-Between" Spec AST
407
- </button>
408
- </div>
409
-
410
- <div class="flex items-center gap-2 pr-1">
411
- <span id="mount-status-badge"
412
- class="px-2 py-0.5 text-[11px] bg-emerald-500/20 text-emerald-300 rounded font-mono border border-emerald-500/30">
413
- Mounted
414
- </span>
415
- </div>
416
- </div>
417
-
418
- <!-- View 1: Real DOM Container -->
419
- <div id="view-dom" class="glass-panel p-4 rounded-2xl flex-1 flex flex-col min-h-[460px]">
420
- <div
421
- class="flex items-center justify-between pb-2 border-b border-slate-800/80 mb-3 text-xs text-slate-400">
422
- <span class="font-mono text-emerald-400 flex items-center gap-1.5">
423
- <span class="w-2 h-2 rounded-full bg-emerald-400"></span> #live-mount-container
424
- </span>
425
- <span class="font-mono text-[11px]">Real HTML Elements</span>
426
- </div>
427
-
428
- <div id="live-mount-container"
429
- class="flex-1 p-3 bg-slate-900/60 rounded-xl border border-slate-800 overflow-auto custom-scrollbar">
430
- <!-- Elements mounted by json-renderers here -->
431
- </div>
432
- </div>
433
-
434
- <!-- View 2: "In-Between" Spec AST from json-renderers-build -->
435
- <div id="view-in-between" class="glass-panel p-4 rounded-2xl flex-1 flex flex-col min-h-[460px] hidden">
436
- <div
437
- class="flex items-center justify-between pb-2 border-b border-slate-800/80 mb-3 text-xs text-slate-400">
438
- <span class="font-mono text-indigo-400 flex items-center gap-1.5">
439
- <span>📦</span> Generated by json-renderers-build before mounting
440
- </span>
441
- <button id="btn-copy-ast"
442
- class="px-2 py-0.5 text-[11px] bg-slate-800 hover:bg-slate-700 text-slate-300 rounded font-mono">Copy
443
- AST</button>
444
- </div>
445
- <pre
446
- class="flex-1 m-0 p-3 bg-slate-950 rounded-xl text-indigo-200 font-mono text-xs overflow-auto custom-scrollbar leading-relaxed max-h-[500px]"><code id="code-output-ast">// Loading in-between spec...</code></pre>
447
- </div>
448
-
449
- </div>
450
-
275
+ <!-- Golden Rule "Remember" Callout Box -->
276
+ <div class="p-4 sm:p-5 rounded-2xl bg-white border-2 border-emerald-300 text-center shadow-xs">
277
+ <span class="text-xs font-mono uppercase tracking-wider text-emerald-800 font-bold block mb-1">Golden Rule to
278
+ Remember</span>
279
+ <p class="text-sm sm:text-base font-bold text-slate-900 tracking-wide">
280
+ Build prepares the blueprint &rarr; json-to-tag creates the DOM &rarr; json-renderers mounts it on the page.
281
+ </p>
451
282
  </div>
452
283
  </section>
453
284
 
454
- <!-- Component Renderers Catalog -->
285
+ <!-- Component Guides & Samples Hub Showcase Section -->
455
286
  <section class="space-y-6">
456
- <div class="border-b border-slate-800/80 pb-4">
457
- <span class="text-xs uppercase font-mono tracking-wider text-emerald-400">Component Catalog</span>
458
- <h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">Supported Renderers in v13</h3>
459
- </div>
460
-
461
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
462
-
463
- <!-- Table Card -->
464
- <div class="glass-card p-5 rounded-2xl space-y-3">
465
- <div class="flex items-center justify-between">
466
- <span class="text-xs font-mono font-bold text-white uppercase tracking-wider">type: "table"</span>
467
- <span class="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 text-[11px] font-mono">Data Grid</span>
468
- </div>
469
- <p class="text-xs text-slate-400 leading-relaxed">
470
- Mounts complete Bootstrap-styled table into the target element. Supports multi-column headers and automated
471
- cell value bindings.
472
- </p>
473
- <div class="text-[11px] font-mono text-slate-400 bg-slate-950 p-2.5 rounded-lg border border-slate-800">
474
- render({ type: "table", targetHtmlId, data, columns })
475
- </div>
476
- </div>
477
-
478
- <!-- Select Card -->
479
- <div class="glass-card p-5 rounded-2xl space-y-3">
480
- <div class="flex items-center justify-between">
481
- <span class="text-xs font-mono font-bold text-white uppercase tracking-wider">type: "select"</span>
482
- <span class="px-2 py-0.5 rounded bg-teal-500/20 text-teal-300 text-[11px] font-mono">Select Element</span>
483
- </div>
484
- <p class="text-xs text-slate-400 leading-relaxed">
485
- Mounts a newly created <code class="text-teal-300">&lt;select id="LedgerName"&gt;</code> populated with
486
- child option elements into the target container.
487
- </p>
488
- <div class="text-[11px] font-mono text-slate-400 bg-slate-950 p-2.5 rounded-lg border border-slate-800">
489
- render({ type: "select", targetHtmlId, data })
490
- </div>
491
- </div>
492
-
493
- <!-- Select Options Only Card -->
494
- <div class="glass-card p-5 rounded-2xl space-y-3">
495
- <div class="flex items-center justify-between">
496
- <span class="text-xs font-mono font-bold text-white uppercase tracking-wider">type:
497
- "selectOptionsOnly"</span>
498
- <span class="px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-300 text-[11px] font-mono">Option
499
- Injection</span>
500
- </div>
501
- <p class="text-xs text-slate-400 leading-relaxed">
502
- Populates dynamic option items directly into a pre-existing <code
503
- class="text-indigo-300">&lt;select&gt;</code> element without modifying outer wrapper tags.
504
- </p>
505
- <div class="text-[11px] font-mono text-slate-400 bg-slate-950 p-2.5 rounded-lg border border-slate-800">
506
- render({ type: "selectOptionsOnly", targetHtmlId, data })
507
- </div>
508
- </div>
509
-
510
- </div>
511
- </section>
512
-
513
- <!-- Runnable Samples Section -->
514
- <section id="samples" class="space-y-6">
515
- <div class="border-b border-slate-800/80 pb-4 flex flex-col sm:flex-row sm:items-end justify-between gap-3">
287
+ <div class="border-b border-slate-200 pb-4 flex flex-col sm:flex-row sm:items-end justify-between gap-3">
516
288
  <div>
517
- <span class="text-xs uppercase font-mono tracking-wider text-emerald-400">Browser Demos</span>
518
- <h3 class="text-xl sm:text-2xl font-bold text-white tracking-tight">Included Verification Samples</h3>
519
- </div>
520
- <a href="aboutTable.html"
521
- class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-400 hover:text-emerald-300 font-mono transition">
522
- <span>📖</span> Read Complete Table Guide (CDN &amp; window.ks) &rarr;
523
- </a>
524
- </div>
525
-
526
- <!-- Spotlight Banner for Table Guide -->
527
- <div
528
- class="glass-panel p-5 rounded-2xl border border-indigo-500/30 bg-gradient-to-r from-indigo-950/40 via-slate-900 to-emerald-950/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
529
- <div class="space-y-1">
530
- <div
531
- class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 text-xs font-mono">
532
- Table Guide
533
- </div>
534
- <h4 class="text-base font-bold text-white">How to Create HTML Tables with CDN &amp; window.ks</h4>
535
- <p class="text-xs text-slate-400 max-w-2xl leading-relaxed">
536
- Beginner-friendly walkthrough explaining step-by-step how to render tables using CDN imports vs the global
537
- <code class="text-indigo-300 font-mono">window.ks</code> namespace, complete with live playground and
538
- side-by-side comparison.
539
- </p>
289
+ <span class="text-xs uppercase font-mono tracking-wider text-teal-700 font-bold">Explore Documentation</span>
290
+ <h2 class="text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight mt-1">Explore the 3 Component
291
+ Suites</h2>
540
292
  </div>
541
- <a href="table/index.html"
542
- class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs transition whitespace-nowrap shadow-md shadow-indigo-600/30 flex items-center gap-1.5">
543
- <span>📖</span> Open Table Guide &rarr;
293
+ <a href="samples/index.html"
294
+ class="inline-flex items-center gap-1.5 text-xs font-semibold text-teal-700 hover:text-teal-800 font-mono transition">
295
+ <span>📦</span> Open Samples Hub &rarr;
544
296
  </a>
545
297
  </div>
546
298
 
547
- <!-- Spotlight Banner for Select Guide -->
548
- <div
549
- class="glass-panel p-5 rounded-2xl border border-cyan-500/30 bg-gradient-to-r from-cyan-950/40 via-slate-900 to-teal-950/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
550
- <div class="space-y-1">
551
- <div
552
- class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 text-xs font-mono">
553
- Select Guide (White BG Edition)
554
- </div>
555
- <h4 class="text-base font-bold text-white">How to Create HTML Select Dropdowns with CDN &amp; window.ks</h4>
556
- <p class="text-xs text-slate-400 max-w-2xl leading-relaxed">
557
- Complete guide on populating dropdown elements from JSON data using <code class="text-cyan-300 font-mono">byCdn</code> and <code class="text-cyan-300 font-mono">byKs</code> with interactive testing and live selection tracking.
558
- </p>
559
- </div>
560
- <a href="aboutSelect.html"
561
- class="px-4 py-2 rounded-xl bg-cyan-600 hover:bg-cyan-500 text-white font-semibold text-xs transition whitespace-nowrap shadow-md shadow-cyan-600/30 flex items-center gap-1.5">
562
- <span>▣</span> Open Select Guide &rarr;
563
- </a>
564
- </div>
565
-
566
- <!-- Spotlight Banner for SubDoc Guides -->
567
- <div
568
- class="glass-panel p-5 rounded-2xl border border-purple-500/30 bg-gradient-to-r from-purple-950/40 via-slate-900 to-indigo-950/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
569
- <div class="space-y-1">
570
- <div
571
- class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-purple-500/20 text-purple-300 border border-purple-500/30 text-xs font-mono">
572
- SubDoc Directory &bull; Two Complementary Tracks
573
- </div>
574
- <h4 class="text-base font-bold text-white">Simple House-Building Story vs In-Depth Architectural Pipeline</h4>
575
- <p class="text-xs text-slate-400 max-w-2xl leading-relaxed">
576
- Choose between the 3-minute conceptual mental model (<code class="text-emerald-300 font-mono">simpleDoc.html</code>) or the comprehensive 15-minute runtime specification and build guide (<code class="text-purple-300 font-mono">advanceDoc.html</code>).
577
- </p>
578
- </div>
579
- <div class="flex items-center gap-2 flex-wrap">
580
- <a href="subDoc/index.html"
581
- class="px-3.5 py-2 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-semibold text-xs transition whitespace-nowrap shadow-md shadow-purple-600/30 flex items-center gap-1.5">
582
- <span>📚</span> SubDoc Hub &rarr;
583
- </a>
584
- <a href="subDoc/simpleDoc.html"
585
- class="px-3.5 py-2 rounded-xl bg-emerald-600/30 hover:bg-emerald-600/50 text-emerald-300 border border-emerald-500/30 font-semibold text-xs transition whitespace-nowrap flex items-center gap-1.5">
586
- <span>🌱</span> Simple Guide
587
- </a>
588
- <a href="subDoc/advanceDoc.html"
589
- class="px-3.5 py-2 rounded-xl bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 border border-purple-500/30 font-semibold text-xs transition whitespace-nowrap flex items-center gap-1.5">
590
- <span>🚀</span> Advanced Guide
591
- </a>
592
- </div>
593
- </div>
594
-
595
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
596
-
597
- <a href="../samples/select/byCdn/index.html"
598
- class="glass-panel p-5 rounded-2xl group hover:border-cyan-500/50 transition flex flex-col justify-between">
599
- <div>
600
- <div class="flex items-center justify-between mb-3">
601
- <span class="text-xl">⚡</span>
602
- <span class="text-xs text-cyan-400 font-mono group-hover:translate-x-1 transition">Open Demo &rarr;</span>
603
- </div>
604
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-cyan-300 transition">Select via CDN (byCdn)</h4>
605
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
606
- Mounts select dropdown via direct ES module import from jsDelivr CDN (<code class="text-cyan-300 font-mono">samples/select/byCdn</code>).
607
- </p>
608
- </div>
609
- <div class="text-[11px] font-mono text-slate-500">samples/select/byCdn/index.html</div>
610
- </a>
611
-
612
- <a href="../samples/select/byKs/index.html"
613
- class="glass-panel p-5 rounded-2xl group hover:border-indigo-500/50 transition flex flex-col justify-between">
614
- <div>
615
- <div class="flex items-center justify-between mb-3">
616
- <span class="text-xl">🌐</span>
617
- <span class="text-xs text-indigo-400 font-mono group-hover:translate-x-1 transition">Open Demo &rarr;</span>
618
- </div>
619
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-indigo-300 transition">Select via window.ks (byKs)</h4>
620
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
621
- Mounts select dropdown using the global namespace (<code class="text-indigo-300 font-mono">samples/select/byKs</code>).
622
- </p>
623
- </div>
624
- <div class="text-[11px] font-mono text-slate-500">samples/select/byKs/index.html</div>
625
- </a>
299
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
626
300
 
627
- <a href="aboutSelect.html"
628
- class="glass-panel p-5 rounded-2xl group hover:border-cyan-500/50 transition flex flex-col justify-between border-dashed border-cyan-500/40">
629
- <div>
630
- <div class="flex items-center justify-between mb-3">
631
- <span class="text-xl">▣</span>
632
- <span class="text-xs text-cyan-400 font-mono group-hover:translate-x-1 transition">Read Guide &rarr;</span>
301
+ <!-- Table Card -->
302
+ <div class="light-card p-6 flex flex-col justify-between space-y-4">
303
+ <div class="space-y-2">
304
+ <div class="flex items-center justify-between">
305
+ <span class="text-2xl">📊</span>
306
+ <span
307
+ class="text-xs font-mono px-2.5 py-0.5 rounded-full bg-emerald-50 text-emerald-800 border border-emerald-200 font-semibold">&lt;table&gt;</span>
633
308
  </div>
634
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-cyan-300 transition">About Select Guide</h4>
635
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
636
- Complete beginner documentation with white background and suitable font colors.
309
+ <h3 class="text-base font-bold text-slate-900">Table Renderer</h3>
310
+ <p class="text-xs text-slate-600 leading-relaxed">
311
+ Multi-column tabular data rendering from JSON row objects with hover states and column configurations.
637
312
  </p>
638
313
  </div>
639
- <div class="text-[11px] font-mono text-cyan-400/80">docs/aboutSelect.html</div>
640
- </a>
641
-
642
- <a href="../samples/table/byCdn/index.html"
643
- class="glass-panel p-5 rounded-2xl group hover:border-emerald-500/50 transition flex flex-col justify-between">
644
- <div>
645
- <div class="flex items-center justify-between mb-3">
646
- <span class="text-xl">⚡</span>
647
- <span class="text-xs text-emerald-400 font-mono group-hover:translate-x-1 transition">Open Demo
648
- &rarr;</span>
649
- </div>
650
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-emerald-300 transition">Table via CDN Sample
651
- </h4>
652
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
653
- Mounts batches table via direct ES module import from jsDelivr CDN (<code
654
- class="text-emerald-300 font-mono">import render from "..."</code>).
655
- </p>
314
+ <div class="space-y-1.5 pt-3 border-t border-slate-100">
315
+ <a href="samples/table/index.html"
316
+ class="block text-xs font-semibold text-emerald-700 hover:underline transition">
317
+ &bull; HTML Process &amp; Story &rarr;
318
+ </a>
319
+ <a href="samples/table/cdn.html"
320
+ class="block text-xs font-semibold text-slate-600 hover:text-slate-900 transition">
321
+ &bull; Using CDN (ES Modules) &rarr;
322
+ </a>
323
+ <a href="samples/table/windowKs.html"
324
+ class="block text-xs font-semibold text-slate-600 hover:text-slate-900 transition">
325
+ &bull; window.ks Global Runtime &rarr;
326
+ </a>
656
327
  </div>
657
- <div class="text-[11px] font-mono text-slate-500">samples/table/byCdn/index.html</div>
658
- </a>
659
-
660
- <a href="../samples/table/byKs/index.html"
661
- class="glass-panel p-5 rounded-2xl group hover:border-indigo-500/50 transition flex flex-col justify-between">
662
- <div>
663
- <div class="flex items-center justify-between mb-3">
664
- <span class="text-xl">🌐</span>
665
- <span class="text-xs text-indigo-400 font-mono group-hover:translate-x-1 transition">Open Demo
666
- &rarr;</span>
667
- </div>
668
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-indigo-300 transition">Table via window.ks
669
- Sample</h4>
670
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
671
- Mounts table using the globally attached namespace (<code
672
- class="text-indigo-300 font-mono">window.ks.jsonRenderers.renderToDom</code>).
673
- </p>
674
- </div>
675
- <div class="text-[11px] font-mono text-slate-500">samples/table/byKs/index.html</div>
676
- </a>
328
+ </div>
677
329
 
678
- <a href="table/index.html"
679
- class="glass-panel p-5 rounded-2xl group hover:border-emerald-500/50 transition flex flex-col justify-between border-dashed border-emerald-500/40">
680
- <div>
681
- <div class="flex items-center justify-between mb-3">
682
- <span class="text-xl">📖</span>
683
- <span class="text-xs text-emerald-400 font-mono group-hover:translate-x-1 transition">Read Guide
684
- &rarr;</span>
330
+ <!-- Select Card -->
331
+ <div class="light-card p-6 flex flex-col justify-between space-y-4">
332
+ <div class="space-y-2">
333
+ <div class="flex items-center justify-between">
334
+ <span class="text-2xl">▣</span>
335
+ <span
336
+ class="text-xs font-mono px-2.5 py-0.5 rounded-full bg-blue-50 text-blue-800 border border-blue-200 font-semibold">&lt;select&gt;</span>
685
337
  </div>
686
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-emerald-300 transition">Table Process Guide
687
- </h4>
688
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
689
- Detailed step-by-step documentation explaining table creation for beginners.
338
+ <h3 class="text-base font-bold text-slate-900">Select Renderer</h3>
339
+ <p class="text-xs text-slate-600 leading-relaxed">
340
+ Native dropdown components populated from string or object arrays with live change tracking.
690
341
  </p>
691
342
  </div>
692
- <div class="text-[11px] font-mono text-emerald-400/80">docs/table/index.html</div>
693
- </a>
694
-
695
- <!-- SubDoc Hub Card -->
696
- <a href="subDoc/index.html"
697
- class="glass-panel p-5 rounded-2xl group hover:border-purple-500/50 transition flex flex-col justify-between border-dashed border-purple-500/40">
698
- <div>
699
- <div class="flex items-center justify-between mb-3">
700
- <span class="text-xl">📚</span>
701
- <span class="text-xs text-purple-400 font-mono group-hover:translate-x-1 transition">Open Hub &rarr;</span>
702
- </div>
703
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-purple-300 transition">SubDoc Guide Hub</h4>
704
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
705
- Central guide directory comparing Simple vs Advanced guides with architecture matrices and quick links.
706
- </p>
343
+ <div class="space-y-1.5 pt-3 border-t border-slate-100">
344
+ <a href="samples/select/index.html"
345
+ class="block text-xs font-semibold text-blue-700 hover:underline transition">
346
+ &bull; HTML Process &amp; Story &rarr;
347
+ </a>
348
+ <a href="samples/select/cdn.html"
349
+ class="block text-xs font-semibold text-slate-600 hover:text-slate-900 transition">
350
+ &bull; Using CDN (ES Modules) &rarr;
351
+ </a>
352
+ <a href="samples/select/windowks.html"
353
+ class="block text-xs font-semibold text-slate-600 hover:text-slate-900 transition">
354
+ &bull; window.ks Global Runtime &rarr;
355
+ </a>
707
356
  </div>
708
- <div class="text-[11px] font-mono text-purple-400/80">docs/subDoc/index.html</div>
709
- </a>
357
+ </div>
710
358
 
711
- <!-- SubDoc Simple Guide Card -->
712
- <a href="subDoc/simpleDoc.html"
713
- class="glass-panel p-5 rounded-2xl group hover:border-emerald-500/50 transition flex flex-col justify-between">
714
- <div>
715
- <div class="flex items-center justify-between mb-3">
716
- <span class="text-xl">🌱</span>
717
- <span class="text-xs text-emerald-400 font-mono group-hover:translate-x-1 transition">Read Guide &rarr;</span>
359
+ <!-- Datalist Card -->
360
+ <div class="light-card p-6 flex flex-col justify-between space-y-4">
361
+ <div class="space-y-2">
362
+ <div class="flex items-center justify-between">
363
+ <span class="text-2xl">🔍</span>
364
+ <span
365
+ class="text-xs font-mono px-2.5 py-0.5 rounded-full bg-purple-50 text-purple-800 border border-purple-200 font-semibold">&lt;datalist&gt;</span>
718
366
  </div>
719
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-emerald-300 transition">Simple Guide (House Story)</h4>
720
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
721
- 3-minute conceptual guide: Architect, Construction Worker, and Site Manager mounting student data.
367
+ <h3 class="text-base font-bold text-slate-900">Datalist Renderer</h3>
368
+ <p class="text-xs text-slate-600 leading-relaxed">
369
+ Native browser search autocomplete popovers linked to input controls without heavy plugins.
722
370
  </p>
723
371
  </div>
724
- <div class="text-[11px] font-mono text-slate-500">docs/subDoc/simpleDoc.html</div>
725
- </a>
726
-
727
- <!-- SubDoc Advanced Guide Card -->
728
- <a href="subDoc/advanceDoc.html"
729
- class="glass-panel p-5 rounded-2xl group hover:border-purple-500/50 transition flex flex-col justify-between">
730
- <div>
731
- <div class="flex items-center justify-between mb-3">
732
- <span class="text-xl">🚀</span>
733
- <span class="text-xs text-purple-400 font-mono group-hover:translate-x-1 transition">Read Reference &rarr;</span>
734
- </div>
735
- <h4 class="text-base font-bold text-white mb-1 group-hover:text-purple-300 transition">Advanced Documentation</h4>
736
- <p class="text-xs text-slate-400 leading-relaxed mb-4">
737
- Deep dive reference: multi-stage pipeline, API options, Vite bundling, and filterable section search.
738
- </p>
372
+ <div class="space-y-1.5 pt-3 border-t border-slate-100">
373
+ <a href="samples/datalist/index.html"
374
+ class="block text-xs font-semibold text-purple-700 hover:underline transition">
375
+ &bull; HTML Process &amp; Story &rarr;
376
+ </a>
377
+ <a href="samples/datalist/cdn.html"
378
+ class="block text-xs font-semibold text-slate-600 hover:text-slate-900 transition">
379
+ &bull; Using CDN (ES Modules) &rarr;
380
+ </a>
381
+ <a href="samples/datalist/windowks.html"
382
+ class="block text-xs font-semibold text-slate-600 hover:text-slate-900 transition">
383
+ &bull; window.ks Global Runtime &rarr;
384
+ </a>
739
385
  </div>
740
- <div class="text-[11px] font-mono text-slate-500">docs/subDoc/advanceDoc.html</div>
741
- </a>
386
+ </div>
742
387
 
743
388
  </div>
744
389
  </section>
745
390
 
746
391
  <!-- Quick CDN & Installation Code -->
747
- <section class="glass-panel p-6 rounded-2xl space-y-4">
748
- <h3 class="text-sm font-bold text-white uppercase tracking-wider font-mono flex items-center gap-2">
749
- <span>📦</span> Installation & Distribution
750
- </h3>
392
+ <section class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-200 space-y-4 shadow-sm">
393
+ <h2 class="text-base font-bold text-slate-900 uppercase tracking-wider font-mono flex items-center gap-2">
394
+ <span>📦</span> Installation &amp; Distribution
395
+ </h2>
751
396
 
752
397
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
753
398
  <div>
754
- <label class="text-xs text-slate-400 mb-1 block font-mono">NPM Package:</label>
399
+ <label class="text-xs text-slate-700 mb-1.5 block font-mono font-semibold">NPM Package:</label>
755
400
  <pre
756
- class="p-3 bg-slate-950 rounded-xl text-xs text-emerald-300 font-mono border border-slate-800 overflow-x-auto"><code>npm install json-renderers</code></pre>
401
+ class="p-3.5 bg-white rounded-xl text-xs text-slate-900 font-mono border border-slate-200 overflow-x-auto shadow-xs"><code><span class="text-indigo-600 font-bold">npm</span> install json-renderers</code></pre>
757
402
  </div>
758
403
 
759
404
  <div>
760
- <label class="text-xs text-slate-400 mb-1 block font-mono">ES Module CDN:</label>
405
+ <label class="text-xs text-slate-700 mb-1.5 block font-mono font-semibold">ES Module CDN:</label>
761
406
  <pre
762
- class="p-3 bg-slate-950 rounded-xl text-xs text-emerald-300 font-mono border border-slate-800 overflow-x-auto"><code>import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v13/min.js";</code></pre>
407
+ class="p-3.5 bg-white rounded-xl text-xs text-slate-900 font-mono border border-slate-200 overflow-x-auto shadow-xs"><code><span class="text-indigo-600 font-bold">import</span> render <span class="text-indigo-600 font-bold">from</span> <span class="text-emerald-700">"https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js"</span>;</code></pre>
763
408
  </div>
764
409
  </div>
765
410
  </section>
766
411
 
767
412
  </main>
768
413
 
769
- <!-- Footer -->
770
- <footer class="border-t border-slate-900 bg-slate-950 py-6 text-center text-xs text-slate-500">
771
- <div class="max-w-7xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
414
+ <!-- Clean Light Footer -->
415
+ <footer class="border-t border-slate-200 bg-white py-8 text-center text-xs text-slate-600">
416
+ <div class="max-w-7xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-4">
772
417
  <div>
773
- <strong class="text-slate-400">json-renderers</strong> &bull; KeshavSoft &bull; MIT License
418
+ <strong class="text-slate-900">json-renderers</strong> &bull; KeshavSoft &bull; MIT License
774
419
  </div>
775
- <div class="flex items-center gap-4 text-slate-400 flex-wrap">
776
- <a href="subDoc/index.html" class="hover:text-purple-400 transition font-medium">SubDoc Hub</a>
777
- <a href="subDoc/simpleDoc.html" class="hover:text-emerald-400 transition">Simple Guide</a>
778
- <a href="subDoc/advanceDoc.html" class="hover:text-purple-400 transition">Advanced Guide</a>
779
- <span class="text-slate-700 hidden sm:inline">|</span>
780
- <a href="https://github.com/keshavsoft/json-renderers" class="hover:text-white transition">json-renderers</a>
781
- <a href="https://github.com/keshavsoft/json-renderers-build"
782
- class="hover:text-white transition">json-renderers-build</a>
783
- <a href="https://github.com/keshavsoft/json-to-spec" class="hover:text-white transition">json-to-spec</a>
420
+ <div class="flex items-center gap-4 text-slate-600 flex-wrap">
421
+ <a href="samples/index.html" class="hover:text-teal-700 transition font-semibold">Samples Hub</a>
422
+ <a href="subDoc/index.html" class="hover:text-purple-700 transition font-medium">SubDoc Hub</a>
423
+ <a href="subDoc/simpleDoc.html" class="hover:text-emerald-700 transition">Simple Guide</a>
424
+ <a href="subDoc/advanceDoc.html" class="hover:text-purple-700 transition">Advanced Guide</a>
425
+ <span class="text-slate-300 hidden sm:inline">|</span>
426
+ <a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
427
+ class="hover:text-slate-900 transition font-medium">GitHub</a>
784
428
  </div>
785
429
  </div>
786
430
  </footer>
787
431
 
788
- <!-- Workbench Script importing docs/dist/v13/min.js -->
432
+ <!-- Module Preloader Script -->
789
433
  <script type="module">
790
- import render from "./dist/v13/min.js";
791
-
792
- // Presets catalog
793
- const PRESETS = {
794
- table: {
795
- batches: {
796
- data: [
797
- { id: "B-101", name: "Aluminium Rods 25mm", qty: 450, status: "Verified" },
798
- { id: "B-102", name: "Copper Sheets 1.2mm", qty: 280, status: "In Transit" },
799
- { id: "B-103", name: "Steel Fasteners M8", qty: 1200, status: "Verified" }
800
- ],
801
- columns: [{ title: "Batch ID" }, { title: "Item Name" }, { title: "Quantity" }, { title: "Status" }]
802
- },
803
- employees: {
804
- data: [
805
- { empId: "EMP-01", name: "Sarah Connor", role: "Security Architect", city: "London" },
806
- { empId: "EMP-02", name: "John Miller", role: "DevOps Engineer", city: "Berlin" },
807
- { empId: "EMP-03", name: "Anita Rao", role: "Lead Developer", city: "Bengaluru" }
808
- ],
809
- columns: ["Emp ID", "Employee Name", "Designation", "Base Location"]
810
- },
811
- ledgers: {
812
- data: [
813
- { code: "A-001", account: "State Bank of India", balance: 540000 },
814
- { code: "A-002", account: "HDFC Operating", balance: 1250000 }
815
- ],
816
- columns: [{ title: "Code" }, { title: "Account Name" }, { title: "Balance (INR)" }]
817
- }
818
- },
819
- select: {
820
- ledgers: {
821
- data: ["Cash In Hand", "State Bank of India", "Accounts Receivable", "General Reserves", "Sales Account"]
822
- },
823
- batches: {
824
- data: ["Batch 2026-A1", "Batch 2026-A2", "Batch 2026-B1"]
825
- },
826
- employees: {
827
- data: ["Bangalore HQ", "Hyderabad Campus", "Singapore Branch"]
828
- }
829
- },
830
- selectOptionsOnly: {
831
- ledgers: {
832
- data: ["Deluxe Suite", "Executive Premier", "Presidential Villa"]
833
- },
834
- batches: {
835
- data: ["High Priority", "Medium Priority", "Low Priority"]
836
- },
837
- employees: {
838
- data: ["Finance", "Human Resources", "Engineering", "Marketing"]
839
- }
840
- }
841
- };
842
-
843
- // DOM references
844
- const typeSelect = document.getElementById("component-type");
845
- const presetSelect = document.getElementById("preset-selector");
846
- const inputDataEl = document.getElementById("input-data");
847
- const inputColumnsEl = document.getElementById("input-columns");
848
- const columnsPanel = document.getElementById("columns-panel");
849
- const btnRenderDom = document.getElementById("btn-render-dom");
850
- const btnFormatData = document.getElementById("btn-format-data");
851
- const btnFormatColumns = document.getElementById("btn-format-columns");
852
- const liveMountContainer = document.getElementById("live-mount-container");
853
- const codeOutputAst = document.getElementById("code-output-ast");
854
- const mountStatusBadge = document.getElementById("mount-status-badge");
855
- const btnCopyAst = document.getElementById("btn-copy-ast");
856
-
857
- // Tabs
858
- const tabDom = document.getElementById("tab-dom");
859
- const tabInBetween = document.getElementById("tab-in-between");
860
- const viewDom = document.getElementById("view-dom");
861
- const viewInBetween = document.getElementById("view-in-between");
862
-
863
- let currentAstOutput = null;
864
-
865
- function switchTab(activeTab) {
866
- if (activeTab === "dom") {
867
- tabDom.className = "px-3 py-1.5 text-xs font-semibold rounded-lg bg-emerald-600 text-white transition flex items-center gap-1.5";
868
- tabInBetween.className = "px-3 py-1.5 text-xs font-semibold rounded-lg text-slate-400 hover:text-white transition flex items-center gap-1.5";
869
- viewDom.classList.remove("hidden");
870
- viewInBetween.classList.add("hidden");
871
- } else {
872
- tabDom.className = "px-3 py-1.5 text-xs font-semibold rounded-lg text-slate-400 hover:text-white transition flex items-center gap-1.5";
873
- tabInBetween.className = "px-3 py-1.5 text-xs font-semibold rounded-lg bg-indigo-600 text-white transition flex items-center gap-1.5";
874
- viewDom.classList.add("hidden");
875
- viewInBetween.classList.remove("hidden");
876
- }
877
- }
878
-
879
- tabDom.addEventListener("click", () => switchTab("dom"));
880
- tabInBetween.addEventListener("click", () => switchTab("in-between"));
881
-
882
- function syncTypeUI() {
883
- const type = typeSelect.value;
884
- if (type === "table") {
885
- columnsPanel.classList.remove("hidden");
886
- } else {
887
- columnsPanel.classList.add("hidden");
888
- }
889
- loadPreset();
890
- }
891
-
892
- function loadPreset() {
893
- const type = typeSelect.value;
894
- const presetKey = presetSelect.value;
895
- const typePresets = PRESETS[type] || {};
896
- const preset = typePresets[presetKey] || typePresets[Object.keys(typePresets)[0]];
897
-
898
- if (preset) {
899
- inputDataEl.value = JSON.stringify(preset.data, null, 2);
900
- if (preset.columns) {
901
- inputColumnsEl.value = JSON.stringify(preset.columns, null, 2);
902
- } else {
903
- inputColumnsEl.value = "[]";
904
- }
905
- }
906
-
907
- mountToDom();
908
- }
909
-
910
- // Mount to DOM execution
911
- function mountToDom() {
434
+ try {
435
+ await import("./dist/v14/min.js");
436
+ } catch {
912
437
  try {
913
- const type = typeSelect.value;
914
- const rawData = JSON.parse(inputDataEl.value || "[]");
915
- let rawColumns = undefined;
916
-
917
- if (type === "table") {
918
- try {
919
- rawColumns = JSON.parse(inputColumnsEl.value || "[]");
920
- } catch (e) {
921
- rawColumns = [];
922
- }
438
+ await import("./dist/v13/min.js");
439
+ } catch {
440
+ try {
441
+ await import("https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js");
442
+ } catch (err) {
443
+ console.warn("Could not pre-load dist bundle.", err);
923
444
  }
924
-
925
- let targetId = "live-mount-container";
926
-
927
- // Setup host if selectOptionsOnly needs an existing <select>
928
- if (type === "selectOptionsOnly") {
929
- liveMountContainer.innerHTML = `
930
- <div class="p-3 bg-slate-950 rounded-lg max-w-sm border border-slate-800">
931
- <label for="demo-existing-select" class="block text-xs font-mono text-slate-400 mb-1.5">Pre-existing Dropdown Target:</label>
932
- <select id="demo-existing-select" class="form-select bg-slate-900 text-white border-slate-700"></select>
933
- </div>
934
- `;
935
- targetId = "demo-existing-select";
936
- } else {
937
- liveMountContainer.innerHTML = "";
938
- }
939
-
940
- // Call the real json-renderers function!
941
- const result = render({
942
- type,
943
- targetHtmlId: targetId,
944
- data: rawData,
945
- columns: rawColumns
946
- });
947
-
948
- // If table, wrap in clean white bootstrap card for readability
949
- if (type === "table") {
950
- const table = liveMountContainer.querySelector("table");
951
- if (table) {
952
- table.classList.add("bg-white", "text-dark", "rounded");
953
- }
954
- } else if (type === "select") {
955
- const sel = liveMountContainer.querySelector("select");
956
- if (sel) {
957
- sel.className = "form-select bg-slate-950 text-white border-slate-700 max-w-sm";
958
- }
959
- }
960
-
961
- mountStatusBadge.textContent = `Mounted (${type})`;
962
- mountStatusBadge.className = "px-2 py-0.5 text-[11px] bg-emerald-500/20 text-emerald-300 rounded font-mono border border-emerald-500/30";
963
-
964
- // Also compute the "in-between" spec AST for inspection tab
965
- if (window.ks?.jsonRenderersBuild?.renderToDom) {
966
- const ast = window.ks.jsonRenderersBuild.renderToDom({
967
- type,
968
- data: rawData,
969
- columns: rawColumns
970
- });
971
- currentAstOutput = ast;
972
- codeOutputAst.textContent = JSON.stringify(ast, null, 2);
973
- } else {
974
- codeOutputAst.textContent = "// json-renderers-build AST rendered into DOM successfully";
975
- }
976
-
977
- } catch (err) {
978
- console.error("Mount error:", err);
979
- liveMountContainer.innerHTML = `<div class="alert alert-danger font-mono text-xs m-2">${err.message}</div>`;
980
- mountStatusBadge.textContent = "Error";
981
- mountStatusBadge.className = "px-2 py-0.5 text-[11px] bg-rose-500/20 text-rose-300 rounded font-mono border border-rose-500/30";
982
445
  }
983
446
  }
984
-
985
- // Event listeners
986
- typeSelect.addEventListener("change", syncTypeUI);
987
- presetSelect.addEventListener("change", loadPreset);
988
- btnRenderDom.addEventListener("click", mountToDom);
989
-
990
- btnFormatData.addEventListener("click", () => {
991
- try {
992
- inputDataEl.value = JSON.stringify(JSON.parse(inputDataEl.value), null, 2);
993
- } catch (e) { }
994
- });
995
-
996
- btnFormatColumns.addEventListener("click", () => {
997
- try {
998
- inputColumnsEl.value = JSON.stringify(JSON.parse(inputColumnsEl.value), null, 2);
999
- } catch (e) { }
1000
- });
1001
-
1002
- btnCopyAst.addEventListener("click", () => {
1003
- if (currentAstOutput) {
1004
- navigator.clipboard.writeText(JSON.stringify(currentAstOutput, null, 2));
1005
- btnCopyAst.textContent = "Copied!";
1006
- setTimeout(() => { btnCopyAst.textContent = "Copy AST"; }, 1500);
1007
- }
1008
- });
1009
-
1010
- // Auto-update on typing with debounce
1011
- let debounceTimer;
1012
- [inputDataEl, inputColumnsEl].forEach(el => {
1013
- el.addEventListener("input", () => {
1014
- clearTimeout(debounceTimer);
1015
- debounceTimer = setTimeout(mountToDom, 350);
1016
- });
1017
- });
1018
-
1019
- // Initial setup
1020
- syncTypeUI();
1021
447
  </script>
1022
448
  </body>
1023
449