anentrypoint-design 0.0.414 → 0.0.416

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 (102) hide show
  1. package/dist/247420.js +62 -12
  2. package/dist/app-shell.css +40 -594
  3. package/dist/colors_and_type.css +607 -47
  4. package/dist/index.html +227 -277
  5. package/dist/preview/buttons.html +39 -28
  6. package/dist/preview/colors-core.html +18 -8
  7. package/dist/preview/colors-lore.html +26 -17
  8. package/dist/preview/colors-semantic.html +24 -18
  9. package/dist/preview/dateline.html +6 -5
  10. package/dist/preview/dropzone.html +4 -3
  11. package/dist/preview/file-grid.html +10 -9
  12. package/dist/preview/file-row.html +14 -13
  13. package/dist/preview/file-toolbar.html +4 -3
  14. package/dist/preview/file-viewer.html +4 -3
  15. package/dist/preview/header.html +26 -24
  16. package/dist/preview/icons-unicode.html +8 -5
  17. package/dist/preview/index-row.html +17 -9
  18. package/dist/preview/inputs.html +4 -3
  19. package/dist/preview/manifesto.html +34 -17
  20. package/dist/preview/motion-default.js +77 -57
  21. package/dist/preview/rules.html +4 -3
  22. package/dist/preview/spacing.html +13 -12
  23. package/dist/preview/stamps-lore.html +5 -4
  24. package/dist/preview/stamps.html +4 -3
  25. package/dist/preview/theme-ink.html +7 -6
  26. package/dist/preview/type-display.html +14 -5
  27. package/dist/preview/type-mono.html +6 -5
  28. package/dist/preview/type-prose.html +12 -10
  29. package/dist/preview/type-scale.html +4 -3
  30. package/dist/preview/wordmarks.html +10 -7
  31. package/dist/site/content/globals/site.yaml +5 -3
  32. package/dist/site/content/pages/freddie.yaml +2 -2
  33. package/dist/site/content/pages/home.yaml +55 -55
  34. package/dist/site/theme.mjs +96 -348
  35. package/dist/slides/index.html +13 -13
  36. package/dist/src/bootstrap.js +10 -1
  37. package/dist/src/components/chat.js +43 -195
  38. package/dist/src/components/community.js +18 -166
  39. package/dist/src/components/content.js +30 -210
  40. package/dist/src/components/files-modals.js +14 -106
  41. package/dist/src/components/files.js +15 -116
  42. package/dist/src/components/freddie/helpers.js +53 -8
  43. package/dist/src/components/freddie.js +35 -25
  44. package/dist/src/components/shell.js +16 -114
  45. package/dist/src/components/theme-toggle.js +69 -25
  46. package/dist/src/components.js +92 -13
  47. package/dist/src/deck-stage.js +6 -4
  48. package/dist/src/highlight.js +51 -7
  49. package/dist/src/index.js +58 -12
  50. package/dist/src/kits/os/about-app.js +2 -3
  51. package/dist/src/kits/os/app-panes.css +46 -70
  52. package/dist/src/kits/os/browser-app.js +28 -1
  53. package/dist/src/kits/os/files-app.js +7 -0
  54. package/dist/src/kits/os/freddie/pages-chat.js +90 -75
  55. package/dist/src/kits/os/freddie/pages-core.js +9 -9
  56. package/dist/src/kits/os/freddie/pages-os.js +8 -8
  57. package/dist/src/kits/os/freddie/pages-tools.js +14 -14
  58. package/dist/src/kits/os/freddie/routes.js +21 -19
  59. package/dist/src/kits/os/freddie-dashboard.css +42 -21
  60. package/dist/src/kits/os/freddie-dashboard.js +6 -6
  61. package/dist/src/kits/os/icons.js +38 -16
  62. package/dist/src/kits/os/index.js +11 -0
  63. package/dist/src/kits/os/launcher.css +26 -10
  64. package/dist/src/kits/os/launcher.js +3 -0
  65. package/dist/src/kits/os/shell.js +72 -108
  66. package/dist/src/kits/os/terminal-app.js +1 -1
  67. package/dist/src/kits/os/theme.css +1330 -150
  68. package/dist/src/kits/os/wm.css +68 -15
  69. package/dist/src/kits/os/wm.js +93 -17
  70. package/dist/src/markdown.js +121 -12
  71. package/dist/src/motion.js +18 -2
  72. package/dist/src/page-html.js +62 -134
  73. package/dist/src/theme.js +106 -13
  74. package/dist/src/web-components/ds-chat.js +80 -9
  75. package/dist/ui_kits/aicat/app.js +54 -6
  76. package/dist/ui_kits/aicat/index.html +2 -0
  77. package/dist/ui_kits/blog/index.html +33 -17
  78. package/dist/ui_kits/chat/app.js +90 -22
  79. package/dist/ui_kits/chat/index.html +2 -0
  80. package/dist/ui_kits/community/app.js +86 -24
  81. package/dist/ui_kits/community/index.html +1 -0
  82. package/dist/ui_kits/dashboard/app.js +123 -34
  83. package/dist/ui_kits/dashboard/index.html +1 -0
  84. package/dist/ui_kits/docs/index.html +43 -33
  85. package/dist/ui_kits/error_404/app.js +78 -23
  86. package/dist/ui_kits/file_browser/README.md +1 -1
  87. package/dist/ui_kits/file_browser/app.js +45 -10
  88. package/dist/ui_kits/file_browser/index.html +1 -0
  89. package/dist/ui_kits/gallery/app.js +130 -51
  90. package/dist/ui_kits/homepage/app.js +156 -138
  91. package/dist/ui_kits/project_page/app.js +142 -125
  92. package/dist/ui_kits/project_page/index.html +2 -1
  93. package/dist/ui_kits/search/app.js +52 -15
  94. package/dist/ui_kits/settings/app.js +166 -39
  95. package/dist/ui_kits/signin/app.js +175 -49
  96. package/dist/ui_kits/signin/index.html +1 -0
  97. package/dist/ui_kits/slide_deck/app.js +83 -49
  98. package/dist/ui_kits/system_primer/app.js +57 -40
  99. package/dist/ui_kits/terminal/app.js +160 -43
  100. package/package.json +1 -1
  101. package/src/page-html/client-script.js +40 -11
  102. package/src/page-html/page-styles.js +22 -1
package/dist/site/theme.mjs CHANGED
@@ -1,368 +1,116 @@
1
- // AnEntrypoint design-system theme for flatspace.
2
- // Renders the full landing via the anentrypoint-design SDK — Topbar + Side
3
- // (sidebar bins / labels / more) + Crumb + main panels (hero, kits, desktop_os,
4
- // web_components, api_exports, decks, docs, previews, features, quickstart,
5
- // examples) + Status. No hand-rolled
6
- // HTML inside #app; every node comes from window.ds (C.* components).
7
-
8
- const escapeHtml = (s) => String(s ?? '')
9
- .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
10
- .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
11
-
12
- const escapeJson = (obj) => JSON.stringify(obj)
13
- .replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026')
14
- .replace(new RegExp('\\u2028', 'g'), '\\u2028').replace(new RegExp('\\u2029', 'g'), '\\u2029');
15
-
16
- const SDK_URL = 'https://unpkg.com/anentrypoint-design@latest/dist/247420.js';
17
-
18
- const clientScript = `
19
- import { h, applyDiff, installStyles, components as C, initTheme } from 'anentrypoint-design';
20
- installStyles();
21
- document.documentElement.classList.add('ds-247420');
22
- // initTheme picks up data-theme on <html>, reapplies stored override from
23
- // localStorage if present, and binds matchMedia so OS-level dark-mode flips
24
- // re-emit to listeners. Safe no-op if data-theme is already 'auto'.
25
- try { initTheme && initTheme(); } catch {}
26
-
27
- const __reveal = () => document.documentElement.classList.add('ds-ready');
28
- const __fallback = setTimeout(__reveal, 1500);
29
-
30
- const data = JSON.parse(document.getElementById('__site__').textContent);
31
- const { site, nav, home } = data;
32
-
33
- function Hero() {
34
- if (!home || !home.hero) return null;
35
- const hero = home.hero;
36
- return C.Panel({
37
- style: 'margin:8px',
38
- children: h('div', { style: 'padding:24px 22px' },
39
- C.Heading({ level: 1, style: 'margin:0 0 8px 0', children: hero.heading || site.title }),
40
- hero.subheading ? C.Lede({ children: hero.subheading }) : null,
41
- hero.body ? h('p', { style: 'margin:8px 0 16px 0;color:var(--panel-text-2);max-width:64ch' }, hero.body) : null,
42
- (hero.badges && hero.badges.length) ? h('div', { style: 'display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px 0' },
43
- ...hero.badges.map((b, i) => C.Chip({ key: 'b' + i, children: b.label }))
44
- ) : null,
45
- (hero.ctas && hero.ctas.length) ? h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap' },
46
- ...hero.ctas.map((c, i) => C.Btn({ key: 'c' + i, href: c.href, primary: c.primary, children: c.label }))
47
- ) : null
48
- )
49
- });
50
- }
51
-
52
- function rowsFromItems(items, prefix) {
53
- return items.map((it, i) => C.RowLink({
54
- key: prefix + i,
55
- code: it.code || String(i + 1).padStart(2, '0'),
1
+ // AnEntrypoint design-system theme for flatspace — thin delegate over this
2
+ // repo's OWN renderPageHtml (../src/page-html.js). The SDK owns all 247420
3
+ // page scaffolding (hero, sections, panels, sidebar, marquee, quickstart,
4
+ // SEO meta); this file only maps site/content YAML -> renderPageHtml's data
5
+ // shape. Same repo, so this imports the source module directly (no npm
6
+ // package-boundary round-trip needed).
7
+
8
+ import { renderPageHtml } from '../src/page-html.js';
9
+
10
+ // A row `code` is a type tag (md, css, fb, os, wc, api), never a position.
11
+ // Bare ordinals carry no information the row order does not already show, so
12
+ // a numeric code is dropped rather than rendered as decoration.
13
+ const isOrdinal = (c) => /^\d+$/.test(String(c).trim());
14
+
15
+ function rows(items) {
16
+ return (items || []).map((it) => ({
17
+ code: it.code && !isOrdinal(it.code) ? it.code : '',
56
18
  title: it.title || it.name,
57
19
  sub: it.sub || it.desc || '',
58
- meta: it.cta || it.meta || 'open ↗',
59
- href: it.href || '#'
20
+ meta: it.cta || it.meta || 'open ->',
21
+ href: it.href || '#',
60
22
  }));
61
23
  }
62
24
 
63
- function Kits() {
64
- if (!home.kits || !home.kits.items || !home.kits.items.length) return null;
65
- return C.Panel({
66
- title: home.kits.heading || 'ui kits',
67
- count: home.kits.count || home.kits.items.length,
68
- style: 'margin:8px',
69
- children: rowsFromItems(home.kits.items, 'k')
70
- });
71
- }
72
-
73
- function Decks() {
74
- if (!home.decks || !home.decks.items || !home.decks.items.length) return null;
75
- return C.Panel({
76
- title: home.decks.heading || 'decks',
77
- style: 'margin:8px',
78
- children: rowsFromItems(home.decks.items, 'd')
79
- });
80
- }
81
-
82
- function FileBrowser() {
83
- if (!home.file_browser || !home.file_browser.items || !home.file_browser.items.length) return null;
84
- return C.Panel({
85
- title: home.file_browser.heading || 'file browser',
86
- count: home.file_browser.count || home.file_browser.items.length,
87
- style: 'margin:8px',
88
- children: rowsFromItems(home.file_browser.items, 'fb')
89
- });
90
- }
91
-
92
- function Docs() {
93
- if (!home.docs || !home.docs.items || !home.docs.items.length) return null;
94
- return C.Panel({
95
- title: home.docs.heading || 'docs',
96
- style: 'margin:8px',
97
- children: rowsFromItems(home.docs.items, 'doc')
98
- });
99
- }
100
-
101
- function Previews() {
102
- if (!home.previews || !home.previews.items || !home.previews.items.length) return null;
103
- const base = home.previews.base || './preview/';
104
- const rows = home.previews.items.map((name, i) => C.RowLink({
105
- key: 'p' + i,
106
- code: String(i + 1).padStart(2, '0'),
107
- title: String(name).replace(/-/g, ' '),
108
- sub: 'preview · ' + name + '.html',
109
- meta: 'open ↗',
110
- href: base + name + '.html'
111
- }));
112
- return C.Panel({
113
- title: home.previews.heading || 'previews',
114
- count: rows.length,
115
- style: 'margin:8px',
116
- children: rows
117
- });
118
- }
119
-
120
- function Features() {
121
- if (!home.features || !home.features.items || !home.features.items.length) return null;
122
- const rows = home.features.items.map((it, i) => C.RowLink({
123
- key: 'f' + i,
124
- code: String(i + 1).padStart(2, '0'),
125
- title: it.name,
126
- sub: it.desc || '',
127
- meta: it.meta || '',
128
- href: it.href || '#'
129
- }));
130
- return C.Panel({
131
- title: home.features.heading || 'why design',
132
- style: 'margin:8px',
133
- children: rows
134
- });
135
- }
136
-
137
- function Quickstart() {
138
- if (!home.quickstart || !home.quickstart.lines || !home.quickstart.lines.length) return null;
139
- const lineNodes = home.quickstart.lines.map((l, i) => h('div', { key: 'q' + i, class: 'cli' },
140
- h('span', { class: 'prompt' }, l.kind === 'cmt' ? '#' : '$'),
141
- h('span', { class: 'cmd' }, l.text)
142
- ));
143
- return C.Panel({
144
- title: home.quickstart.heading || 'quick start',
145
- style: 'margin:8px',
146
- children: h('div', { style: 'padding:16px 22px;display:flex;flex-direction:column;gap:6px' }, ...lineNodes)
147
- });
148
- }
149
-
150
- function DesktopOS() {
151
- if (!home.desktop_os || !home.desktop_os.items || !home.desktop_os.items.length) return null;
152
- return C.Panel({
153
- title: home.desktop_os.heading || 'desktop os shell',
154
- count: home.desktop_os.count || home.desktop_os.items.length,
155
- style: 'margin:8px',
156
- children: rowsFromItems(home.desktop_os.items, 'os')
157
- });
25
+ function panel(section, id, itemsKey = 'items') {
26
+ if (!section || !section[itemsKey] || !section[itemsKey].length) return null;
27
+ return {
28
+ id: section.id || id,
29
+ title: section.heading,
30
+ count: section.count || section[itemsKey].length,
31
+ items: rows(section[itemsKey]),
32
+ };
158
33
  }
159
34
 
160
- function WebComponents() {
161
- if (!home.web_components || !home.web_components.items || !home.web_components.items.length) return null;
162
- return C.Panel({
163
- title: home.web_components.heading || 'web components',
164
- count: home.web_components.count || home.web_components.items.length,
165
- style: 'margin:8px',
166
- children: rowsFromItems(home.web_components.items, 'wc')
167
- });
168
- }
169
-
170
- function ApiExports() {
171
- if (!home.api_exports || !home.api_exports.items || !home.api_exports.items.length) return null;
172
- return C.Panel({
173
- title: home.api_exports.heading || 'public api',
174
- count: home.api_exports.count || home.api_exports.items.length,
175
- style: 'margin:8px',
176
- children: rowsFromItems(home.api_exports.items, 'api')
177
- });
178
- }
179
-
180
- function Examples() {
181
- if (!home.examples || !home.examples.items || !home.examples.items.length) return null;
182
- return C.Panel({
183
- title: home.examples.heading || 'live examples',
184
- count: home.examples.items.length,
185
- style: 'margin:8px',
186
- children: rowsFromItems(home.examples.items, 'e')
187
- });
188
- }
189
-
190
- function buildSide() {
35
+ function buildSidebar(home) {
191
36
  const sb = home.sidebar || {};
192
37
  const sections = [];
193
- if (sb.fab) {
194
- sections.push({
195
- group: 'open',
196
- items: [{ glyph: sb.fab.glyph || '✦', label: sb.fab.label || 'open', href: sb.fab.href || '#' }]
197
- });
198
- }
199
- if (sb.bins && sb.bins.length) {
200
- sections.push({ group: 'bins', items: sb.bins });
201
- }
202
- if (sb.labels && sb.labels.length) {
203
- sections.push({ group: sb.labels_group || 'labels', items: sb.labels });
204
- }
205
- if (sb.more && sb.more.length) {
206
- sections.push({ group: sb.more_group || 'more', items: sb.more });
207
- }
208
- return C.Side({ sections });
209
- }
210
-
211
- function Tabs() {
212
- if (!home.tabs || !home.tabs.length) return null;
213
- return h('div', { class: 'tabs', role: 'tablist', style: 'margin:8px' },
214
- ...home.tabs.map((t, i) => h('a', {
215
- key: 't' + i,
216
- href: t.href || '#',
217
- class: t.active ? 'active' : '',
218
- role: 'tab'
219
- },
220
- t.glyph ? h('span', { class: 'glyph' }, t.glyph) : null,
221
- h('span', {}, t.label)
222
- ))
223
- );
38
+ if (sb.fab) sections.push({ group: 'open', items: [{ glyph: sb.fab.glyph || '+', label: sb.fab.label || 'open', href: sb.fab.href || '#' }] });
39
+ if (sb.bins && sb.bins.length) sections.push({ group: 'bins', items: sb.bins });
40
+ if (sb.labels && sb.labels.length) sections.push({ group: sb.labels_group || 'labels', items: sb.labels });
41
+ if (sb.more && sb.more.length) sections.push({ group: sb.more_group || 'more', items: sb.more });
42
+ return sections.length ? { sections } : null;
224
43
  }
225
44
 
226
- const navItems = (nav && nav.links ? nav.links : []).map(l => [String(l.label || ''), l.href]);
227
-
228
- const statusLeft = home.status_left || ['main', '• utf-8', '• lf'];
229
- const statusRight = home.status_right || ['247420 / mmxxvi', '• probably emerging'];
230
-
231
- const App = C.AppShell({
232
- topbar: C.Topbar({
233
- brand: '247420',
234
- leaf: site.title || 'design',
235
- items: navItems
236
- }),
237
- crumb: C.Crumb({ trail: ['247420'], leaf: site.title || 'design' }),
238
- side: buildSide(),
239
- main: h('div', {},
240
- Hero(),
241
- Tabs(),
242
- Kits(),
243
- FileBrowser(),
244
- DesktopOS(),
245
- WebComponents(),
246
- ApiExports(),
247
- Decks(),
248
- Docs(),
249
- Previews(),
250
- Features(),
251
- Quickstart(),
252
- Examples()
253
- ),
254
- status: C.Status({ left: statusLeft, right: statusRight })
255
- });
256
-
257
- applyDiff(document.getElementById('app'), [App]);
258
-
259
- const __fontsReady = (document.fonts && document.fonts.ready) ? document.fonts.ready : Promise.resolve();
260
- Promise.race([__fontsReady, new Promise(r => setTimeout(r, 1200))]).then(() => {
261
- requestAnimationFrame(() => requestAnimationFrame(() => {
262
- clearTimeout(__fallback);
263
- __reveal();
264
- }));
265
- });
266
- `;
267
-
268
- const html = ({ site, nav, home }) => {
269
- const title = `${escapeHtml(site.title)}${site.tagline ? ' — ' + escapeHtml(site.tagline) : ''}`;
270
- const desc = escapeHtml(site.description || site.tagline || site.title);
271
- const url = escapeHtml(site.url || '');
272
- const image = escapeHtml(site.image || (site.url ? site.url.replace(/\/$/, '') + '/og-card.png' : ''));
273
- const siteName = escapeHtml(site.siteName || site.title);
274
- const author = escapeHtml(site.author || '247420 / AnEntrypoint');
275
- const twitter = escapeHtml(site.twitter || '@AnEntrypoint');
276
- const keywords = escapeHtml((site.keywords && site.keywords.join(', ')) || '247420, anentrypoint, design system');
277
- const locale = escapeHtml(site.locale || 'en_US');
278
- const lang = escapeHtml(site.lang || 'en');
279
- const ldJson = JSON.stringify({
280
- '@context': 'https://schema.org',
281
- '@type': 'WebSite',
282
- name: site.title || '',
283
- alternateName: site.siteName || undefined,
284
- url: site.url || '',
285
- description: site.description || site.tagline || '',
286
- inLanguage: site.lang || 'en',
287
- publisher: {
288
- '@type': 'Organization',
289
- name: site.author || '247420 / AnEntrypoint',
290
- url: 'https://247420.xyz'
291
- }
292
- }).replace(/</g, '\\u003c');
293
- return `<!DOCTYPE html>
294
- <html lang="${lang}" class="ds-247420" data-theme="auto">
295
- <head>
296
- <meta charset="UTF-8" />
297
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
298
- <title>${title}</title>
299
- <meta name="description" content="${desc}" />
300
- <meta name="keywords" content="${keywords}" />
301
- <meta name="author" content="${author}" />
302
- <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
303
- <meta name="referrer" content="strict-origin-when-cross-origin" />
304
- <meta name="generator" content="anentrypoint-design" />
305
- <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)" />
306
- <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)" />
307
- <meta name="color-scheme" content="light dark" />
308
- <meta name="application-name" content="${siteName}" />
309
- <meta name="apple-mobile-web-app-title" content="${siteName}" />
310
- <meta name="apple-mobile-web-app-capable" content="yes" />
311
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
312
- <meta name="mobile-web-app-capable" content="yes" />
313
- <meta name="msapplication-TileColor" content="#247420" />
314
- <meta http-equiv="content-language" content="${lang}" />
315
- <link rel="canonical" href="${url}" />
316
- <link rel="alternate" hreflang="${lang}" href="${url}" />
317
- <link rel="alternate" hreflang="x-default" href="${url}" />
318
- <meta property="og:type" content="website" />
319
- <meta property="og:title" content="${escapeHtml(site.title)}" />
320
- <meta property="og:description" content="${escapeHtml(site.description || site.tagline || '')}" />
321
- <meta property="og:url" content="${url}" />
322
- <meta property="og:site_name" content="${siteName}" />
323
- <meta property="og:locale" content="${locale}" />
324
- ${image ? `<meta property="og:image" content="${image}" />
325
- <meta property="og:image:secure_url" content="${image}" />
326
- <meta property="og:image:type" content="image/png" />
327
- <meta property="og:image:width" content="1200" />
328
- <meta property="og:image:height" content="630" />
329
- <meta property="og:image:alt" content="${escapeHtml(site.title)}" />` : ''}
330
- <meta name="twitter:card" content="summary_large_image" />
331
- <meta name="twitter:title" content="${escapeHtml(site.title)}" />
332
- <meta name="twitter:description" content="${escapeHtml(site.description || site.tagline || '')}" />
333
- <meta name="twitter:site" content="${twitter}" />
334
- <meta name="twitter:creator" content="${twitter}" />
335
- ${image ? `<meta name="twitter:image" content="${image}" />
336
- <meta name="twitter:image:alt" content="${escapeHtml(site.title)}" />` : ''}
337
- <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E${encodeURIComponent(site.glyph || '◆')}%3C/text%3E%3C/svg%3E" />
338
- <link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E${encodeURIComponent(site.glyph || '◆')}%3C/text%3E%3C/svg%3E" />
339
- <script type="application/ld+json">${ldJson}</script>
340
- <script type="importmap">{"imports":{"anentrypoint-design":"${SDK_URL}"}}</script>
341
- <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
342
- <link rel="preconnect" href="https://unpkg.com" crossorigin>
343
- <link rel="dns-prefetch" href="https://unpkg.com">
344
- <style>html,body{margin:0;padding:0}body{background:var(--app-bg,#FBF6EB);color:var(--ink,#1F1B16);font-family:var(--ff-ui,'Nunito',system-ui,sans-serif)}html:not(.ds-ready) body{visibility:hidden}html.ds-ready body{visibility:visible;animation:ds-fade-in .18s ease-out both}@keyframes ds-fade-in{from{opacity:0}to{opacity:1}}</style>
345
- <noscript><style>html body{visibility:visible !important}</style></noscript>
346
- </head>
347
- <body>
348
- <div id="app"></div>
349
- <script type="application/json" id="__site__">${escapeJson({ site, nav, home })}</script>
350
- <script type="module">${clientScript}</script>
351
- </body>
352
- </html>
353
- `;
354
- };
355
-
356
45
  export default {
357
46
  render: async (ctx) => {
358
47
  const site = ctx.readGlobal('site') || {};
359
48
  const nav = ctx.readGlobal('navigation') || { links: [] };
360
49
  const homeDoc = ctx.read('pages').docs.find(p => p.id === 'home');
361
50
  if (!homeDoc) throw new Error('site/content/pages/home.yaml missing or has no id: home');
51
+ const home = homeDoc;
52
+ const hero = home.hero || null;
53
+
54
+ const panels = [
55
+ panel(home.kits, 'kits'),
56
+ panel(home.file_browser, 'file_browser'),
57
+ panel(home.desktop_os, 'desktop_os'),
58
+ panel(home.web_components, 'web_components'),
59
+ panel(home.api_exports, 'api_exports'),
60
+ panel(home.decks, 'decks'),
61
+ panel(home.docs, 'docs'),
62
+ panel(home.features, 'features'),
63
+ ].filter(Boolean);
64
+
65
+ if (home.previews && home.previews.items && home.previews.items.length) {
66
+ const base = home.previews.base || './preview/';
67
+ panels.push({
68
+ id: 'previews',
69
+ title: home.previews.heading || 'previews',
70
+ count: home.previews.items.length,
71
+ items: home.previews.items.map((name) => ({
72
+ code: '',
73
+ title: String(name).replace(/-/g, ' '),
74
+ sub: 'preview · ' + name + '.html',
75
+ meta: 'open ->',
76
+ href: base + name + '.html',
77
+ })),
78
+ });
79
+ }
80
+
81
+ const html = renderPageHtml({
82
+ title: site.title || home.title || '247420',
83
+ slug: 'index',
84
+ siteName: site.siteName || site.title || '247420',
85
+ navItems: (nav.links || []).map(l => [String(l.label || ''), l.href]),
86
+ hero: hero ? {
87
+ heading: hero.heading, subheading: hero.subheading || site.tagline,
88
+ body: hero.body, badges: hero.badges,
89
+ ctas: hero.ctas,
90
+ } : null,
91
+ panels,
92
+ examples: home.examples && home.examples.items ? home.examples.items.map((e) => ({
93
+ label: e.name || e.title, desc: e.desc, href: e.href,
94
+ })) : null,
95
+ marquee: { items: ['open source', 'design tokens', 'buildless components', 'zero raw color literals'], sep: '/' },
96
+ quickstart: home.quickstart && home.quickstart.lines ? { heading: home.quickstart.heading, lines: home.quickstart.lines } : null,
97
+ sidebar: buildSidebar(home),
98
+ statusLeft: home.status_left || ['main', '- utf-8', '- lf'],
99
+ statusRight: home.status_right || ['247420 · mmxxvi', '- probably emerging'],
100
+ seo: {
101
+ description: site.description || site.tagline || site.title,
102
+ keywords: site.keywords || ['247420', 'anentrypoint', 'design system'],
103
+ author: site.author || '247420 / AnEntrypoint',
104
+ twitter: site.twitter || '@AnEntrypoint',
105
+ locale: site.locale || 'en_US',
106
+ lang: site.lang || 'en',
107
+ image: site.image || (site.url ? site.url.replace(/\/$/, '') + '/og-card.png' : ''),
108
+ url: site.url || '',
109
+ },
110
+ faviconGlyph: site.glyph || (site.title ? site.title.trim().charAt(0).toUpperCase() : '2'),
111
+ headExtra: `<style>html,body{margin:0;padding:0}body{background:var(--bg,#F6F5F1);color:var(--fg,#131318);font-family:var(--ff-body,system-ui,sans-serif)}</style>`,
112
+ });
362
113
 
363
- return [{
364
- path: 'index.html',
365
- html: html({ site, nav, home: homeDoc })
366
- }];
114
+ return [{ path: 'index.html', html }];
367
115
  }
368
116
  };
package/dist/slides/index.html CHANGED
@@ -30,7 +30,7 @@
30
30
  <link rel="stylesheet" href="../colors_and_type.css">
31
31
  <link rel="stylesheet" href="../app-shell.css">
32
32
  <style>
33
- /* Slides consume panel tokens → auto light/dark */
33
+ /* Slides consume panel tokens -> auto light/dark */
34
34
  body { background: var(--panel-0); margin: 0; }
35
35
  deck-stage { display: block; }
36
36
  section {
@@ -93,7 +93,7 @@
93
93
  color: var(--panel-accent);
94
94
  }
95
95
  .s-sub {
96
- font-family: 'Inter', system-ui, sans-serif;
96
+ font-family: var(--ff-body);
97
97
  font-size: 34px;
98
98
  line-height: 1.4;
99
99
  margin-top: 32px;
@@ -154,7 +154,7 @@
154
154
  }
155
155
  .cmp .cmp-after .cmp-h { color: var(--panel-accent-fg); }
156
156
  .cmp .cmp-p {
157
- font-family: 'Inter', system-ui, sans-serif;
157
+ font-family: var(--ff-body);
158
158
  font-size: 28px;
159
159
  line-height: 1.45;
160
160
  color: var(--panel-text-3);
@@ -190,15 +190,15 @@
190
190
  color: var(--panel-text);
191
191
  }
192
192
  </style>
193
- <script type="module" src="deck-stage.js"></script>
193
+ <script type="module" src="../src/kits/slides/deck-stage.js"></script>
194
194
  </head>
195
195
  <body>
196
196
  <deck-stage width="1920" height="1080">
197
197
 
198
198
  <section class="s-elev" data-label="Title">
199
- <div class="s-dateline"><span>247420 // an entrypoint</span><span class="spread"></span><span>apr 20 · 2026 · live</span></div>
199
+ <div class="s-dateline"><span>247420 · an entrypoint</span><span class="spread"></span><span>apr 20 · 2026 · live</span></div>
200
200
  <div>
201
- <div class="s-label" style="margin-bottom:24px">// internal · do not circulate</div>
201
+ <div class="s-label" style="margin-bottom:24px">internal · do not circulate</div>
202
202
  <div class="s-hero">we fart in its<br/>general direction.</div>
203
203
  <div class="s-sub">a short presentation about what comes next, delivered at 4:20 sharp.</div>
204
204
  </div>
@@ -206,7 +206,7 @@
206
206
  </section>
207
207
 
208
208
  <section data-label="Section Intro">
209
- <div class="s-dateline"><span>247420</span><span>§ 01</span><span class="spread"></span><span>of 05</span></div>
209
+ <div class="s-dateline"><span>247420</span><span>01</span><span class="spread"></span><span>of 05</span></div>
210
210
  <div>
211
211
  <div class="s-label" style="margin-bottom:32px">chapter one</div>
212
212
  <div class="s-h1">the problem<br/>with everything.</div>
@@ -215,7 +215,7 @@
215
215
  </section>
216
216
 
217
217
  <section class="s-canvas" data-label="Big Quote">
218
- <div class="s-dateline"><span>247420</span><span>§ quote</span><span class="spread"></span><span>overheard · 2am</span></div>
218
+ <div class="s-dateline"><span>247420</span><span>quote</span><span class="spread"></span><span>overheard · 2am</span></div>
219
219
  <div style="display:flex;align-items:center;height:100%">
220
220
  <div>
221
221
  <div style="font-family:var(--ff-display);font-size:240px;line-height:0.8;margin-bottom:-40px;color:var(--panel-accent)">&ldquo;</div>
@@ -227,9 +227,9 @@
227
227
  </section>
228
228
 
229
229
  <section class="s-elev" data-label="Receipt">
230
- <div class="s-dateline"><span>247420</span><span>§ receipt · gm v0.4.1</span><span class="spread"></span><span>live</span></div>
230
+ <div class="s-dateline"><span>247420</span><span>receipt · gm v0.4.1</span><span class="spread"></span><span>live</span></div>
231
231
  <div>
232
- <div class="s-label" style="margin-bottom:32px">// by the numbers</div>
232
+ <div class="s-label" style="margin-bottom:32px">by the numbers</div>
233
233
  <div class="receipt">
234
234
  <div class="receipt-row"><span>stars</span><span>3,124</span></div>
235
235
  <div class="receipt-row"><span>weekly downloads</span><span>47k</span></div>
@@ -243,7 +243,7 @@
243
243
  </section>
244
244
 
245
245
  <section data-label="Comparison">
246
- <div class="s-dateline"><span>247420</span><span>§ a vs b</span><span class="spread"></span><span>it's not close</span></div>
246
+ <div class="s-dateline"><span>247420</span><span>a vs b</span><span class="spread"></span><span>it's not close</span></div>
247
247
  <div>
248
248
  <div class="cmp">
249
249
  <div class="cmp-before">
@@ -262,11 +262,11 @@
262
262
  </section>
263
263
 
264
264
  <section class="s-accent" data-label="End">
265
- <div class="s-dateline"><span>247420 // an entrypoint</span><span class="spread"></span><span>end · q&amp;a</span></div>
265
+ <div class="s-dateline"><span>247420 · an entrypoint</span><span class="spread"></span><span>end · q&amp;a</span></div>
266
266
  <div style="display:flex;align-items:center;height:100%">
267
267
  <div>
268
268
  <div class="s-hero" style="font-size:280px;color:var(--panel-accent-fg)">gm.</div>
269
- <div style="font-family:var(--ff-mono);font-size:32px;margin-top:32px;color:var(--panel-accent-fg);opacity:0.85">// questions? open a pr.</div>
269
+ <div style="font-family:var(--ff-mono);font-size:32px;margin-top:32px;color:var(--panel-accent-fg);opacity:0.85">questions? open a pr.</div>
270
270
  </div>
271
271
  </div>
272
272
  <div class="s-footer"><span>fin</span><span>247420 / mmxxvi</span></div>
package/dist/src/bootstrap.js CHANGED
@@ -5,9 +5,18 @@ import * as webjsx from '../vendor/webjsx/index.js';
5
5
  import * as motion from './motion.js';
6
6
  import { register } from './debug.js';
7
7
 
8
+ // Tracks nodes already mounted via mountKit() so a second mountKit() call
9
+ // onto the same root fails loud instead of silently layering a second
10
+ // applyDiff/motion loop on one DOM node.
11
+ const _mountedKitRoots = new WeakSet();
12
+
8
13
  export function mountKit({ root, view, screen, animateOnMount = true } = {}) {
9
- if (!root) throw new Error('mountKit: root required');
14
+ if (!root) throw new Error('mountKit: root required (received ' + (root === null ? 'null' : typeof root) + ')');
10
15
  if (typeof view !== 'function') throw new Error('mountKit: view fn required');
16
+ if (_mountedKitRoots.has(root)) {
17
+ throw new Error('mountKit: this root is already mounted — call the returned render()/schedule() to re-render, do not mountKit() the same root twice');
18
+ }
19
+ _mountedKitRoots.add(root);
11
20
  if (screen && typeof document !== 'undefined') document.body.dataset.screenLabel = screen;
12
21
  motion.installMotion();
13
22
  let scheduled = false;