Repository navigation
Expand file tree
/
Copy pathapi.html
More file actions
336 lines (306 loc) · 24.3 KB
/
Copy pathapi.html
File metadata and controls
336 lines (306 loc) · 24.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Schema API | devtemDesign 0.1.0 Configuration Reference</title>
<meta name="description" content="Complete devtemDesign 0.1.0 Schema API reference: every config property, object shape, return handle, 7 templates and theme tokens, with copyable examples.">
<meta name="keywords" content="devtemDesign schema, devtemDesign API, devtemDesign configuration, config object reference, declarative UI schema, JavaScript UI engine API, theme tokens">
<meta name="author" content="DevTemple">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta name="theme-color" content="#050b14">
<link rel="canonical" href="https://design.devtem.org/api">
<meta property="og:type" content="article">
<meta property="og:site_name" content="devtemDesign">
<meta property="og:title" content="Schema API | devtemDesign 0.1.0">
<meta property="og:description" content="Every configuration property, object structure and theme token for devtemDesign.">
<meta property="og:url" content="https://design.devtem.org/api">
<meta property="og:image" content="https://design.devtem.org/assets/images/og.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Schema API | devtemDesign 0.1.0">
<meta name="twitter:description" content="Full configuration schema reference for devtemDesign.">
<meta name="twitter:image" content="https://design.devtem.org/assets/images/og.jpg">
<link rel="icon" href="https://design.devtem.org/assets/images/logo.png">
<script type="application/ld+json">
{"@context":"https://schema.org","@graph":[
{"@type":"TechArticle","headline":"devtemDesign Schema API","description":"Complete configuration schema reference for devtemDesign 0.1.0.","url":"https://design.devtem.org/schema","image":"https://design.devtem.org/assets/images/og.jpg","dateModified":"2026-10-24","author":{"@type":"Organization","name":"DevTemple"},"publisher":{"@type":"Organization","name":"DevTemple"}},
{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"devtemDesign","item":"https://design.devtem.org/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://design.devtem.org/docs"},{"@type":"ListItem","position":3,"name":"Schema API","item":"https://design.devtem.org/api"}]}]}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/style.min.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/script.min.js"></script>
<style>
/* the engine supplies nav, orbs, footer and tokens; its hero is hidden here */
.hero,.marquee-section{display:none!important}
:root{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{font-family:var(--mono);font-size:.88em;background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:6px}
.api-page{position:relative;z-index:2}
.api-header{padding:64px 24px 44px;border-bottom:1px solid var(--glass-border)}
.api-header-inner{max-width:1100px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:.68rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--accent)}
.api-header h1{font-size:clamp(2.2rem,6vw,3.8rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:16px}
.api-header h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{color:var(--muted);max-width:600px;margin-bottom:24px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:99px;font:.7rem var(--mono);border:1px solid var(--glass-border);background:var(--surface);color:var(--muted)}
.badge.on{border-color:var(--accent);color:var(--accent)}
.api-body{display:grid;grid-template-columns:230px minmax(0,1fr);max-width:1100px;margin:0 auto;padding:0 24px;gap:40px}
.side{position:sticky;top:calc(var(--nav-h) + 16px);align-self:start;max-height:calc(100vh - var(--nav-h) - 32px);overflow-y:auto;padding:32px 0;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.side h4{font:.62rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.7;margin:20px 0 8px 10px}.side h4:first-child{margin-top:0}
.side a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font-size:.82rem;color:var(--muted);transition:.2s}
.side a:hover{color:var(--text);background:var(--surface)}
.side a.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.side i{width:14px;text-align:center;font-size:.72rem}
.content{padding:40px 0 80px;min-width:0}
.sec{margin-bottom:64px;scroll-margin-top:calc(var(--nav-h) + 56px)}
.sec h2{display:flex;align-items:center;gap:12px;font-size:1.45rem;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--glass-border);margin-bottom:12px}
.sec h2 .ic{width:32px;height:32px;border-radius:10px;border:1px solid var(--glass-border);background:var(--surface);display:grid;place-items:center;color:var(--accent);font-size:.8rem;flex:none}
.intro{color:var(--muted);font-size:.92rem;max-width:660px;margin-bottom:20px}
.tw{overflow-x:auto;border:1px solid var(--glass-border);border-radius:14px;margin-bottom:18px}
table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:600px}
th{text-align:left;padding:10px 14px;font:.62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--glass-border);background:var(--surface)}
td{padding:11px 14px;vertical-align:top;border-bottom:1px solid var(--line);color:var(--muted)}
tr:last-child td{border:0}
td:first-child{font:600 .8rem var(--mono);color:var(--accent);white-space:nowrap}
td.t{font:italic .78rem var(--mono);color:var(--accent3);white-space:nowrap}
td.d{font:.76rem var(--mono);opacity:.8}
.code{position:relative;border:1px solid var(--glass-border);border-radius:14px;background:var(--surface);margin-bottom:20px}
.code .lb{position:absolute;top:-1px;left:16px;transform:translateY(-50%);font:700 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bg-deep);background:var(--accent);padding:3px 12px;border-radius:99px}
.code pre{margin:0;padding:24px 20px 20px;overflow-x:auto;font:.78rem/1.75 var(--mono);color:var(--text);white-space:pre}
.cp{position:absolute;top:10px;right:12px;padding:4px 12px;border-radius:99px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--muted);font:.62rem var(--mono);cursor:pointer}
.cp:hover{color:var(--text);border-color:var(--accent)}
.kw{color:var(--accent2)}.str{color:var(--accent3)}.cm{color:var(--muted);opacity:.7;font-style:italic}.fn{color:var(--accent)}
.call{display:flex;gap:12px;padding:14px 18px;border-radius:12px;font-size:.84rem;margin-bottom:18px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--muted)}
.call.warn{border-color:rgba(255,170,0,.35);background:rgba(255,170,0,.07)}.call.warn i{color:#ffaa00}.call i{color:var(--accent);margin-top:3px}
.sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.swatch{text-align:left;border:1px solid var(--glass-border);border-radius:14px;padding:16px 18px;background:var(--surface);cursor:pointer;color:inherit;font:inherit;transition:.2s}
.swatch:hover{transform:translateY(-2px);border-color:var(--accent)}
.swatch .dots{display:flex;gap:6px;margin-bottom:12px}.swatch .dots b{width:11px;height:11px;border-radius:50%}
.swatch strong{display:block;font:700 .75rem var(--mono);letter-spacing:.08em;margin-bottom:4px}
.swatch span{font-size:.74rem;color:var(--muted)}
@media(max-width:900px){
.api-header{padding:44px 18px 32px}
.api-body{display:block;padding:0 18px}
.side{position:sticky;top:var(--nav-h);z-index:50;display:flex;gap:6px;overflow-x:auto;max-height:none;padding:10px 18px;margin:0 -18px;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border)}
.side h4{display:none}.side a{flex:none;border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:.76rem}.side i{display:none}
.content{padding-top:28px}.sec{scroll-margin-top:calc(var(--nav-h) + 64px)}
}
</style>
</head>
<body>
<div id="app-root"></div>
<noscript><p style="padding:24px">The schema reference needs JavaScript. See the <a href="/docs">documentation</a> for the same options in plain HTML.</p></noscript>
<script>
const page = devtemDesign("app-root", {
template: "figsh", themeSwitcher: true, cursor: false,
logoName: "DEVTEM", logo: "https://fscss.devtem.org/assets/images/fscss.png",
navLinks: [
{ label: "Docs", href: "/docs" }, { label: "Sandbox", href: "/sandbox" },
{ label: "Schema API", href: "/api" }, { label: "Examples", href: "/examples" },
{ label: "npm Package", href: "https://www.npmjs.com/package/devtemdesign" }
],
ctaText: "CDN →", ctaHref: "/docs#install",
footer: {
tagline: "Declarative UI engine for the modern web. Zero config. Full motion.",
columns: [
{ heading: "Product", links: [{ label: "Documentation", href: "/docs" }, { label: "Examples", href: "/examples" }, { label: "Schema API", href: "/api" }, { label: "Changelog", href: "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/devtem-dev/devtemDesign" }] },
{ heading: "Resources", links: [{ label: "npm Package", href: "https://www.npmjs.com/package/devtemdesign" }, { label: "GitHub", href: "/devtem-dev" }, { label: "FSCSS Engine", href: "https://fscss.devtem.org" }] },
{ heading: "Company", links: [{ label: "About DevTemple", href: "https://devtem.org" }, { label: "Templates", href: "https://devtem.org/home?q=@devtemDesign" }, { label: "Contact", href: "https://devtem.org/contact" }] }
],
social: [
{ icon: "fab fa-github", href: "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/devtem-dev/devtemDesign", label: "GitHub" },
{ icon: "fab fa-twitter", href: "https://twitter.com/fscss_ttr", label: "Twitter" },
{ icon: "fab fa-npm", href: "https://npmjs.com/package/devtemdesign", label: "npm" },
{ icon: "fab fa-dev", href: "https://dev.to/fscss", label: "DEV" }
],
legal: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Use", href: "/terms" }, { label: "License (MIT)", href: "/license" }],
copy: `© ${new Date().getFullYear()} Figsh · devtemDesign is open source`
}
});
/* ---------- schema data ---------- */
const H = ["Property", "Type", "Default", "Description"];
const S = [
{ id:"quickstart", ic:"bolt", t:"Quick Start", intro:"Add two tags, a container, and one call.",
code:["HTML",`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/style.min.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/script.min.js"><\/script>
<div id="app-root"></div>
<script>
devtemDesign("app-root", {
template: "cyber",
logoName: "MYAPP",
heroTitleLine1: "Hello",
heroTitleLine2: "World"
});
<\/script>`],
note:["info","Font Awesome is optional. It is only needed for `icon` fields and footer social icons."] },
{ id:"signature", ic:"terminal", t:"Function Signature", intro:"One global function. It returns a handle you can use at runtime.",
code:["TypeScript",`devtemDesign(containerId: string, config?: DevtemConfig): DevtemHandle | null
interface DevtemHandle {
version: string;
setTemplate(name: TemplateName): void; // switch theme, no re-render
destroy(): void; // remove listeners, observers, markup
}
devtemDesign.version; // "0.1.0"
devtemDesign.templates; // ["figsh", "cyber", "aurora", ...]`],
head:["Parameter","Type","Default","Description"],
rows:[["containerId","string",'"app-root"',"ID of the element to render into. Returns `null` if it is not found."],
["config","DevtemConfig","{}","Configuration object. Every field is optional."]],
note:["warn","Rendering replaces the container's contents. Calling it again on the same container destroys the previous instance first, so nothing leaks."] },
{ id:"core", ic:"cube", t:"Core", intro:"Identity, theme and behavior switches.",
rows:[["template","TemplateName",'"figsh"',"`figsh` `cyber` `aurora` `monochrome` `sunset` `ocean` `paper`."],
["theme","object","{}","Token overrides, with or without the `--` prefix. See Theme Tokens."],
["themeSwitcher","boolean | string[]","false","Adds a navbar theme button. An array limits the cycle. Choice is saved in `localStorage`."],
["cursor","boolean","true","Set `false` to disable the custom cursor."],
["logo","string (URL)","fscss logo","Brand image for navbar and footer."],
["logoName","string","\"CORE\"","Brand name in navbar and footer."],
["logoHref","string",'"/"',"Where the navbar brand links to."]] },
{ id:"nav", ic:"bars", t:"Navigation", intro:"Sticky glass navbar. Below 860px it becomes an animated hamburger with a slide-in drawer.",
rows:[["navLinks","(string | NavItem)[]","Features, How it works, Pricing","Strings (href `#`) or `{ label, href }`. Both can be mixed."],
["ctaText","string (HTML)",'"Get started"',"Navbar button text. Repeated at the end of the drawer."],
["ctaHref","string",'"#"',"Navbar button link."]],
code:["NavItem",`{ label: "Docs", href: "/docs" }`],
note:["info","Links to on-page sections get an active underline while that section is in view."] },
{ id:"hero", ic:"star", t:"Hero", intro:"Full-height hero. Text fields accept HTML.",
rows:[["heroBadge","string (HTML)","none","Pill above the title."],
["heroTitleLine1","string (HTML)",'"Declarative UI,"',"First line of the H1."],
["heroTitleLine2","string (HTML)",'"Zero-Config Motion"',"Second line, animated gradient."],
["heroSubtitle","string (HTML)","default copy","Paragraph under the H1."],
["primaryBtnText / primaryBtnHref","string",'"Get started" / "#"',"Main button."],
["secondaryBtnText / secondaryBtnHref","string","none","Ghost button, rendered only when text is set."],
["brands","string[]","[]","Feeds hero chips and the seamless marquee (pauses on hover)."],
["brandsSubtitle","string","default","Caption under the chips."]] },
{ id:"stats", ic:"chart-simple", t:"Stats", intro:"Numbers that count up the first time they scroll into view.",
rows:[["stats","Stat[]","none","`{ value, label }`. Prefix, suffix, commas and decimals are kept."],
["statsId","string",'"stats"',"Anchor id for the section."]],
code:["Stat",`{ value: "12k+", label: "Developers" } // also "$1,200", "99.9%"`] },
{ id:"features", ic:"table-cells", t:"Features", intro:"Auto-fit card grid with a cursor spotlight. Anchor `#features`.",
rows:[["featuresLabel","string (HTML)",'"Features"',"Small label above the title."],
["featuresTitle","string (HTML)","default","Section H2."],["featuresSub","string","none","Optional subtitle."],
["features","Feature[]","none","Pass an array to render the section."]],
code:["Feature",`{
title: "Zero Config",
desc: "Pass JSON, get a page.",
icon: "<i class='fas fa-cube'></i>" // HTML or emoji, optional
}`] },
{ id:"steps", ic:"list-ol", t:"Steps", intro:"Numbered process section. Anchor `#how`.",
rows:[["stepsLabel / stepsTitle / stepsSub","string","defaults","Section heading."],
["steps","Step[]","none","`{ title, desc }`, numbered automatically."]] },
{ id:"panels", ic:"layer-group", t:"Panels", intro:"Numbered content blocks.",
rows:[["panelsLabel / panelsTitle / panelsSub","string","none","Optional heading above the panels."],
["panels","Panel[]","none","`{ tag, title, desc }`, numbered 01, 02, ..."]] },
{ id:"pricing", ic:"tags", t:"Pricing", intro:"Plan cards with an optional Monthly/Yearly toggle. Anchor `#pricing`.",
rows:[["pricingLabel / pricingTitle / pricingSub","string","defaults","Section heading."],
["yearlyBadge","string","none","Label on the Yearly toggle, e.g. `Save 20%`."],
["pricing","Plan[]","none","Plans, see below. The toggle appears when any plan has `yearly`."]],
code:["Plan",`{
tier: "Pro", amount: "$12", period: "/mo", desc: "For product landings.",
features: ["Everything in Free", "Priority support"],
cta: "Go Pro", href: "/signup",
featured: true, badge: "Most popular",
yearly: { amount: "$115", period: "/yr" } // optional
}`] },
{ id:"faq", ic:"circle-question", t:"FAQ and CTA", intro:"Accordion (one open at a time) and a closing call to action. Anchor `#faq`.",
rows:[["faqLabel / faqTitle / faqSub","string","defaults","Section heading."],
["faq","FaqItem[]","none","`{ q, a }`. Uses native `<details>`."],
["cta","Cta","none","`{ title, sub, text, href }` renders a full-width band."]] },
{ id:"footer", ic:"table-columns", t:"Footer", intro:"Brand column, link columns, socials and a legal strip. Every field is optional.",
rows:[["footer.tagline","string","none","Text under the footer logo."],
["footer.copy","string","© year","Copyright line. `config.footerCopy` still works as a fallback."],
["footer.columns","Column[]","none","`{ heading, links: Link[] }`."],
["footer.social","SocialLink[]","none","`{ icon, href, label }`. `icon` is a Font Awesome class."],
["footer.legal","Link[]","none","`{ label, href }`."]],
code:["Example",`footer: {
tagline: "Declarative UI engine.",
copy: "© 2026 Figsh Digital",
columns: [{ heading: "Product", links: [{ label: "Docs", href: "/docs" }] }],
social: [{ icon: "fab fa-github", href: "/...", label: "GitHub" }],
legal: [{ label: "Privacy", href: "/privacy" }]
}`] },
{ id:"templates", ic:"palette", t:"Templates", intro:"Seven built-in themes. Click a swatch to preview it on this page with `setTemplate()`.", swatches:true },
{ id:"tokens", ic:"sliders", t:"Theme Tokens", intro:"Each template sets these CSS custom properties on `:root`. Override any of them with `theme`.",
head:["Token","Type","Default","Purpose"],
rows:[["--accent / --accent2 / --accent3","color","per template","Brand colors and gradients."],
["--text / --muted","color","per template","Primary and secondary text."],
["--bg-deep","color","per template","Page background, and text color on filled buttons."],
["--glass-bg / --glass-border / --glass-blur","css","per template","Card surfaces."],
["--surface / --line","color","per template","Subtle fills and dividers."],
["--orb","number","0.22","Ambient orb opacity."]],
code:["JS",`theme: { accent: "#ff4d6d", accent2: "#ffb703", "bg-deep": "#0b0710" }`] },
{ id:"example", ic:"file-code", t:"Full Example", intro:"A compact config touching every section.",
code:["JS",`const page = devtemDesign("app-root", {
template: "ocean", themeSwitcher: true,
logoName: "MYAPP",
navLinks: [{ label: "Docs", href: "/docs" }, "Pricing"],
ctaText: "Get Started", ctaHref: "/signup",
heroBadge: "Now in beta",
heroTitleLine1: "Ship faster", heroTitleLine2: "with less code",
heroSubtitle: "One config schema. Full animated layout.",
primaryBtnText: "Get Started", primaryBtnHref: "/signup",
brands: ["DEVTEMPLE", "FSCSS", "FIGSH"],
stats: [{ value: "12k+", label: "Developers" }],
features: [{ title: "Zero Config", desc: "One function call.", icon: "<i class='fas fa-cube'></i>" }],
steps: [{ title: "Describe", desc: "Fill the config." }],
panels: [{ tag: "API", title: "devtemDesign({...})", desc: "One handler." }],
pricing: [{ tier: "Free", amount: "$0", features: ["All templates"], cta: "Start", href: "#" }],
faq: [{ q: "Need a build step?", a: "No." }],
cta: { title: "Ready?", text: "Read the docs", href: "/docs" },
footer: { tagline: "Declarative UI engine.", copy: "© 2026 Your Name" }
});
page.setTemplate("sunset");`] }
];
const TPL = [["figsh","Futuristic glass","#7af4ff #b77cff #ff7096"],["cyber","Neon cyberpunk","#00f0ff #ff2bd6 #ff3366"],["aurora","Organic nature","#48bb78 #8b5cf6 #3b82f6"],["monochrome","Minimal grayscale","#ffffff #b0b0b0 #7a7a7a"],["sunset","Warm dusk","#ff9a5a #ff5c8a #ffd166"],["ocean","Cool depth","#38bdf8 #2dd4bf #818cf8"],["paper","Light mode","#4f46e5 #db2777 #0891b2"]];
/* ---------- renderers ---------- */
const esc = s => String(s).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
const md = s => esc(s).replace(/`([^`]+)`/g, "<code>$1</code>");
const hl = s => esc(s).replace(/(\/\/.*|\/\*[\s\S]*?\*\/)|("(?:[^"\\\n]|\\.)*"|'[^'\n]*')|\b(devtemDesign|setTemplate)\b|\b([A-Za-z_][\w-]*)(?=\s*:)/g,
(m,c,st,fn,k) => c ? `<span class="cm">${c}</span>` : st ? `<span class="str">${st}</span>` : fn ? `<span class="fn">${fn}</span>` : `<span class="kw">${k}</span>`);
function table(head, rows) {
return `<div class="tw"><table><thead><tr>${head.map(h=>`<th>${h}</th>`).join("")}</tr></thead><tbody>${
rows.map(r=>`<tr><td>${esc(r[0])}</td><td class="t">${esc(r[1])}</td><td class="d">${esc(r[2])}</td><td>${md(r[3])}</td></tr>`).join("")}</tbody></table></div>`;
}
function sec(s) {
let h = `<section class="sec" id="${s.id}"><h2><span class="ic"><i class="fas fa-${s.ic}"></i></span>${s.t}</h2><p class="intro">${md(s.intro)}</p>`;
if (s.swatches) h += `<div class="sw">${TPL.map(t=>`<button class="swatch" type="button" data-t="${t[0]}"><div class="dots">${t[2].split(" ").map(c=>`<b style="background:${c}"></b>`).join("")}</div><strong style="color:${t[2].split(" ")[0]}">"${t[0]}"</strong><span>${t[1]}</span></button>`).join("")}</div>`;
if (s.rows) h += table(s.head || H, s.rows);
if (s.code) h += `<div class="code"><span class="lb">${s.code[0]}</span><button class="cp" type="button">copy</button><pre><code>${hl(s.code[1])}</code></pre></div>`;
if (s.note) h += `<div class="call ${s.note[0]==="warn"?"warn":""}"><i class="fas fa-${s.note[0]==="warn"?"triangle-exclamation":"circle-info"}"></i><div>${md(s.note[1])}</div></div>`;
return h + "</section>";
}
const groups = [["Getting Started", ["quickstart","signature"]], ["Config Schema", ["core","nav","hero","stats","features","steps","panels","pricing","faq","footer"]], ["Reference", ["templates","tokens","example"]]];
const side = groups.map(g => `<h4>${g[0]}</h4>` + g[1].map(id => { const s = S.find(x=>x.id===id); return `<a href="#${id}"><i class="fas fa-${s.ic}"></i>${s.t}</a>`; }).join("")).join("");
const el = document.createElement("div");
el.className = "api-page";
el.innerHTML = `
<header class="api-header"><div class="api-header-inner">
<div class="eyebrow"><i class="fas fa-code"></i> Reference</div>
<h1>Schema <em>API</em></h1>
<p class="lede">Complete configuration reference for <code>devtemDesign()</code>. One function call, one config object. Everything else is handled by the engine.</p>
<div class="badges"><span class="badge on"><i class="fas fa-tag"></i> v0.1.0</span><span class="badge"><i class="fab fa-npm"></i> devtemdesign</span><span class="badge"><i class="fas fa-circle" style="color:#22c55e;font-size:.5rem"></i> Stable</span><a class="badge" href="/docs">Docs</a><a class="badge" href="/examples">Examples</a></div>
</div></header>
<div class="api-body"><nav class="side" aria-label="Schema sections">${side}</nav><main class="content">${S.map(sec).join("")}</main></div>`;
document.querySelector(".site-footer").before(el);
/* ---------- interactions ---------- */
el.addEventListener("click", e => {
const sw = e.target.closest(".swatch");
if (sw) { page.setTemplate(sw.dataset.t); return; }
const b = e.target.closest(".cp");
if (b) navigator.clipboard.writeText(b.parentNode.querySelector("pre").textContent).then(
() => { b.textContent = "copied!"; setTimeout(() => b.textContent = "copy", 1600); },
() => { b.textContent = "failed"; setTimeout(() => b.textContent = "copy", 1600); });
});
const links = {};
el.querySelectorAll(".side a").forEach(a => links[a.hash.slice(1)] = a);
const io = new IntersectionObserver(es => es.forEach(en => {
if (!en.isIntersecting) return;
Object.values(links).forEach(l => l.classList.remove("active"));
const a = links[en.target.id]; if (!a) return;
a.classList.add("active");
a.scrollIntoView({ block: "nearest", inline: "nearest" });
}), { rootMargin: "-25% 0px -65% 0px" });
el.querySelectorAll(".sec").forEach(s => io.observe(s));
if (location.hash) document.getElementById(location.hash.slice(1))?.scrollIntoView();
</script>
</body>
</html>