anentrypoint-design 0.0.413 → 0.0.415
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/dist/247420.js +63 -13
- package/dist/app-shell.css +40 -594
- package/dist/colors_and_type.css +607 -47
- package/dist/index.html +227 -277
- package/dist/preview/buttons.html +39 -28
- package/dist/preview/colors-core.html +18 -8
- package/dist/preview/colors-lore.html +26 -17
- package/dist/preview/colors-semantic.html +24 -18
- package/dist/preview/dateline.html +6 -5
- package/dist/preview/dropzone.html +4 -3
- package/dist/preview/file-grid.html +10 -9
- package/dist/preview/file-row.html +14 -13
- package/dist/preview/file-toolbar.html +4 -3
- package/dist/preview/file-viewer.html +4 -3
- package/dist/preview/header.html +26 -24
- package/dist/preview/icons-unicode.html +8 -5
- package/dist/preview/index-row.html +17 -9
- package/dist/preview/inputs.html +4 -3
- package/dist/preview/manifesto.html +34 -17
- package/dist/preview/motion-default.js +77 -57
- package/dist/preview/rules.html +4 -3
- package/dist/preview/spacing.html +13 -12
- package/dist/preview/stamps-lore.html +5 -4
- package/dist/preview/stamps.html +4 -3
- package/dist/preview/theme-ink.html +7 -6
- package/dist/preview/type-display.html +14 -5
- package/dist/preview/type-mono.html +6 -5
- package/dist/preview/type-prose.html +12 -10
- package/dist/preview/type-scale.html +4 -3
- package/dist/preview/wordmarks.html +10 -7
- package/dist/site/content/globals/site.yaml +5 -3
- package/dist/site/content/pages/freddie.yaml +2 -2
- package/dist/site/content/pages/home.yaml +55 -55
- package/dist/site/theme.mjs +96 -348
- package/dist/slides/index.html +13 -13
- package/dist/src/bootstrap.js +10 -1
- package/dist/src/components/chat.js +43 -195
- package/dist/src/components/community.js +18 -166
- package/dist/src/components/content.js +30 -210
- package/dist/src/components/files-modals.js +14 -106
- package/dist/src/components/files.js +15 -116
- package/dist/src/components/freddie/helpers.js +53 -8
- package/dist/src/components/freddie.js +35 -25
- package/dist/src/components/shell.js +16 -114
- package/dist/src/components/theme-toggle.js +69 -25
- package/dist/src/components.js +92 -13
- package/dist/src/deck-stage.js +6 -4
- package/dist/src/highlight.js +51 -7
- package/dist/src/index.js +58 -12
- package/dist/src/kits/os/about-app.js +2 -3
- package/dist/src/kits/os/app-panes.css +46 -70
- package/dist/src/kits/os/browser-app.js +28 -1
- package/dist/src/kits/os/files-app.js +7 -0
- package/dist/src/kits/os/freddie/pages-chat.js +90 -75
- package/dist/src/kits/os/freddie/pages-core.js +9 -9
- package/dist/src/kits/os/freddie/pages-os.js +8 -8
- package/dist/src/kits/os/freddie/pages-tools.js +14 -14
- package/dist/src/kits/os/freddie/routes.js +21 -19
- package/dist/src/kits/os/freddie-dashboard.css +42 -21
- package/dist/src/kits/os/freddie-dashboard.js +6 -6
- package/dist/src/kits/os/icons.js +38 -16
- package/dist/src/kits/os/index.js +11 -0
- package/dist/src/kits/os/launcher.css +26 -10
- package/dist/src/kits/os/launcher.js +3 -0
- package/dist/src/kits/os/shell.js +72 -108
- package/dist/src/kits/os/terminal-app.js +1 -1
- package/dist/src/kits/os/theme.css +1330 -150
- package/dist/src/kits/os/wm.css +68 -15
- package/dist/src/kits/os/wm.js +93 -17
- package/dist/src/markdown.js +121 -12
- package/dist/src/motion.js +18 -2
- package/dist/src/page-html.js +62 -134
- package/dist/src/theme.js +106 -13
- package/dist/src/web-components/ds-chat.js +80 -9
- package/dist/ui_kits/aicat/app.js +54 -6
- package/dist/ui_kits/aicat/index.html +2 -0
- package/dist/ui_kits/blog/index.html +33 -17
- package/dist/ui_kits/chat/app.js +90 -22
- package/dist/ui_kits/chat/index.html +2 -0
- package/dist/ui_kits/community/app.js +86 -24
- package/dist/ui_kits/community/index.html +1 -0
- package/dist/ui_kits/dashboard/app.js +123 -34
- package/dist/ui_kits/dashboard/index.html +1 -0
- package/dist/ui_kits/docs/index.html +43 -33
- package/dist/ui_kits/error_404/app.js +78 -23
- package/dist/ui_kits/file_browser/README.md +1 -1
- package/dist/ui_kits/file_browser/app.js +45 -10
- package/dist/ui_kits/file_browser/index.html +1 -0
- package/dist/ui_kits/gallery/app.js +130 -51
- package/dist/ui_kits/homepage/app.js +156 -138
- package/dist/ui_kits/project_page/app.js +142 -125
- package/dist/ui_kits/project_page/index.html +2 -1
- package/dist/ui_kits/search/app.js +52 -15
- package/dist/ui_kits/settings/app.js +166 -39
- package/dist/ui_kits/signin/app.js +175 -49
- package/dist/ui_kits/signin/index.html +1 -0
- package/dist/ui_kits/slide_deck/app.js +83 -49
- package/dist/ui_kits/system_primer/app.js +57 -40
- package/dist/ui_kits/terminal/app.js +160 -43
- package/package.json +1 -1
- package/src/page-html/client-script.js +40 -11
- package/src/page-html/page-styles.js +22 -1
- package/src/page-html.js +10 -0
package/dist/index.html
CHANGED
|
@@ -1,319 +1,269 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en" class="ds-247420" data-theme="auto">
|
|
3
3
|
<head>
|
|
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
|
-
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>design — design</title>
|
|
7
|
+
|
|
8
|
+
<meta name="description" content="the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.">
|
|
9
|
+
<meta name="keywords" content="design-system, tokens, 247420, anentrypoint">
|
|
10
|
+
<meta name="author" content="247420 / AnEntrypoint">
|
|
11
|
+
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
|
|
12
|
+
<meta name="generator" content="anentrypoint-design">
|
|
13
|
+
<link rel="canonical" href="https://anentrypoint.github.io/design">
|
|
14
|
+
<meta property="og:type" content="website">
|
|
15
|
+
<meta property="og:title" content="design">
|
|
16
|
+
<meta property="og:description" content="the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.">
|
|
17
|
+
<meta property="og:url" content="https://anentrypoint.github.io/design">
|
|
18
|
+
<meta property="og:site_name" content="design">
|
|
19
|
+
<meta property="og:locale" content="en_US">
|
|
20
|
+
<meta property="og:image" content="https://anentrypoint.github.io/design/og-card.png">
|
|
21
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
22
|
+
<meta name="twitter:title" content="design">
|
|
23
|
+
<meta name="twitter:description" content="the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.">
|
|
24
|
+
<meta name="twitter:site" content="@AnEntrypoint">
|
|
25
|
+
<meta name="twitter:image" content="https://anentrypoint.github.io/design/og-card.png">
|
|
26
|
+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"design","url":"https://anentrypoint.github.io/design","description":"the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.","inLanguage":"en"}</script>
|
|
27
|
+
<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%C2%B7%3C/text%3E%3C/svg%3E">
|
|
28
|
+
<link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
|
|
29
|
+
<script type="importmap">
|
|
30
|
+
{ "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
|
|
31
|
+
</script>
|
|
32
|
+
<style>
|
|
33
|
+
.app-stage { width: 100%; max-width: var(--stage-wide, min(96%, 1600px)); margin-inline: auto; padding: var(--space-6, 48px) var(--space-4, 24px) var(--space-8, 96px); display: grid; gap: var(--space-6, 48px); box-sizing: border-box }
|
|
34
|
+
@media (max-width: 768px) { .app-stage { padding: var(--space-4, 24px) var(--space-3, 16px) var(--space-6, 48px); gap: var(--space-5, 32px) } }
|
|
35
|
+
/* Tier movements — the stage's uniform gap is deliberately overridden here.
|
|
36
|
+
Panels inside one tier sit tight (--space-3, 16px) because they are peers;
|
|
37
|
+
between tiers that reopens to --space-5 on top of the stage's own --space-6,
|
|
38
|
+
so the three movements read as distinct instead of one repeating slab. */
|
|
39
|
+
.app-stage > .ds-tier { display: grid; gap: var(--space-3, 16px) }
|
|
40
|
+
.app-stage > .ds-tier + .ds-tier { margin-top: var(--space-5, 32px) }
|
|
41
|
+
.ds-tier-head { display: grid; gap: var(--space-2, 8px); margin-bottom: var(--space-1, 4px); justify-items: start }
|
|
42
|
+
/* The tier label is an h2 so the three movements are real landmarks in the
|
|
43
|
+
accessibility tree; it keeps the .eyebrow voice, so the UA heading margin
|
|
44
|
+
and size are reset back onto the mono kicker scale. */
|
|
45
|
+
.ds-tier-head > h2.eyebrow { margin: 0; font-size: var(--fs-tiny, 11px); line-height: 1.2 }
|
|
46
|
+
.ds-tier-lede { margin: 0; max-width: var(--measure, 68ch); color: var(--fg-3); font-size: var(--fs-sm, 15px) }
|
|
47
|
+
/* The lead tier carries the accent spine so the primary path is visible at a
|
|
48
|
+
squint; supporting tiers stay unmarked rather than competing. The head div
|
|
49
|
+
is the tier's first child, so the marker is an explicit class rather than a
|
|
50
|
+
positional :first-of-type, which would not match past it. */
|
|
51
|
+
.ds-tier-lead { border-radius: 0 var(--r-2, 14px) var(--r-2, 14px) 0; padding-left: calc(var(--space-3, 16px) + var(--bw-chunk, 6px)); position: relative }
|
|
52
|
+
.ds-tier-lead::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--bw-chunk, 6px); background: var(--accent); border-radius: var(--bw-chunk, 6px) 0 0 var(--bw-chunk, 6px) }
|
|
53
|
+
/* Tertiary tier reads at prose weight: quieter rows, no panel fill competition. */
|
|
54
|
+
.ds-tier-read .panel { background: var(--panel-1, var(--bg)) }
|
|
55
|
+
.ds-tier-read .row .meta { color: var(--fg-3) }
|
|
56
|
+
.page-body > :first-child { margin-top: 0 }
|
|
57
|
+
.page-body h1 { margin-top: 0 } .page-body h2 { margin-top: var(--space-5, 32px) } .page-body h3 { margin-top: var(--space-4, 24px) }
|
|
58
|
+
.page-body > * + * { margin-top: var(--space-3, 16px) }
|
|
59
|
+
.page-body pre { margin: var(--space-3, 16px) 0; background: var(--panel-2); padding: var(--space-3, 16px); border-radius: var(--r-1, 10px); overflow-x: auto }
|
|
60
|
+
/* .app-stage owns inter-block rhythm via grid gap; sections/hero must not double it.
|
|
61
|
+
These selectors carry !important because this inline block loads before the
|
|
62
|
+
unpkg CSS bundle, which would otherwise win on load-order for equal specificity. */
|
|
63
|
+
.ds-247420 .app-stage > .ds-hero { margin: 0 !important; padding: var(--space-4, 24px) 0 0 !important; max-width: none !important; gap: var(--space-4, 24px) !important }
|
|
64
|
+
.ds-247420 .app-stage > .ds-section { margin: 0 !important }
|
|
65
|
+
.app-stage .row + .row { margin-top: var(--space-1, 4px) }
|
|
66
|
+
.app-stage .ds-section .row { margin-top: var(--space-2, 8px) }
|
|
67
|
+
.app-stage .ds-section > p.ds-lede { margin: 0 0 var(--space-3, 16px); max-width: var(--measure, 68ch); color: var(--fg-2) }
|
|
68
|
+
.row-benefit { font-style: italic; color: var(--fg-3); font-size: var(--fs-sm); margin-top: var(--space-1, 4px) }
|
|
69
|
+
.ds-row-arrow { margin-left: auto; opacity: .5; transition: opacity var(--dur-snap, 80ms) var(--ease) }
|
|
70
|
+
a.row:hover .ds-row-arrow { opacity: 1 }
|
|
71
|
+
/* hero stat strip — all badges as a wrapping inline rhythm, not one empty panel */
|
|
72
|
+
.ds-hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-3, 16px) var(--space-5, 32px); margin-top: var(--space-2, 8px) }
|
|
73
|
+
.ds-hero-stat { display: flex; align-items: baseline; gap: var(--space-2, 8px) }
|
|
74
|
+
.ds-hero-stat-n { font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-lg, 18px); color: var(--fg) }
|
|
75
|
+
.ds-hero-stat-l { font-size: var(--fs-sm, 15px); color: var(--fg-3) }
|
|
76
|
+
/* accent sits on its own line, muted, so it reads as a distinct aside instead
|
|
77
|
+
of running on from the hero body sentence. */
|
|
78
|
+
.ds-hero-accent { display: block; margin-top: var(--space-2, 8px); color: var(--fg-3) }
|
|
79
|
+
/* feature rows — single-column stack (the dashboard .row grid forces a 3-col
|
|
80
|
+
code/title/meta layout that mangles title+desc+benefit) */
|
|
81
|
+
/* background uses a theme-neutral panel token (resolves per data-theme) so dark
|
|
82
|
+
mode doesn't flash a literal white card before/independent of the bundle.
|
|
83
|
+
Flat tonal fill only — no border-left rail accent (house style: no bespoke
|
|
84
|
+
tile chrome, no shadows, no borders; see ui_kits/gallery/app.js). */
|
|
85
|
+
.ds-feature { padding: var(--space-3, 16px) var(--space-4, 24px); background: var(--panel-1, var(--bg)); border-radius: var(--r-2, 14px); display: grid; gap: var(--space-1, 4px) }
|
|
86
|
+
.ds-feature + .ds-feature { margin-top: var(--space-2, 8px) }
|
|
87
|
+
.ds-feature-title { font-weight: 600; font-size: var(--fs-lg, 18px); color: var(--fg) }
|
|
88
|
+
.ds-feature-desc { font-size: var(--fs-sm, 15px); color: var(--fg-2); line-height: 1.5; overflow-wrap: anywhere }
|
|
89
|
+
.ds-feature-benefit { font-style: italic; font-size: var(--fs-sm, 15px); color: var(--fg-3); margin-top: var(--space-1, 4px) }
|
|
90
|
+
</style>
|
|
91
|
+
<script id="__site__" type="application/json">{"title":"design","slug":"index","siteName":"design","navItems":[["247420","https://247420.xyz"],["GitHub","https://github.com/AnEntrypoint"]],"theme":"auto","hero":{"heading":"design","subheading":"the 247420 design system","body":"acid editorial. oversized display type, one electric green, print texture over glow. every 247420 surface runs on it.","badges":[{"label":"design-system"},{"label":"tokens"},{"label":"web"}],"ctas":[{"label":"GitHub","href":"https://github.com/AnEntrypoint/design","primary":true},{"label":"247420","href":"https://247420.xyz"}]},"sections":[],"examples":[{"label":"index shell","desc":"full navigation shell with tabs, filters, and row interactions.","href":"./index.html"},{"label":"homepage kit","desc":"hero + works layout and updated readable type scale.","href":"./ui_kits/homepage/"},{"label":"project page kit","desc":"overview, install, receipt, and changelog template.","href":"./ui_kits/project_page/"},{"label":"docs kit","desc":"technical documentation layout with sidebar and prose.","href":"./ui_kits/docs/"},{"label":"blog kit","desc":"long-form writing layout tuned for readability.","href":"./ui_kits/blog/"},{"label":"chat kit","desc":"message thread + composer with pill bubbles and room sidebar.","href":"./ui_kits/chat/"},{"label":"aicat kit","desc":"ai assistant with cat persona — ascii portrait + mood face.","href":"./ui_kits/aicat/"},{"label":"slide deck","desc":"16:9 deck stage with improved presenter controls text.","href":"./slides/"},{"label":"dashboard kit","desc":"kpis, tables, receipts, changelog — operations surface.","href":"./ui_kits/dashboard/"},{"label":"terminal kit","desc":"cli prompt, command lines, log viewer.","href":"./ui_kits/terminal/"},{"label":"settings kit","desc":"sectioned forms, toggles, segmented buttons, save bar.","href":"./ui_kits/settings/"},{"label":"signin kit","desc":"auth panel, providers, magic link.","href":"./ui_kits/signin/"},{"label":"search kit","desc":"query bar, faceted filters, ranked results.","href":"./ui_kits/search/"},{"label":"404 kit","desc":"empty-state hero with suggested routes.","href":"./ui_kits/error_404/"},{"label":"gallery kit","desc":"visual grid + lightbox over tonal cards.","href":"./ui_kits/gallery/"},{"label":"preview samples","desc":"design previews and component samples.","href":"./preview/buttons.html"}],"bodyHtml":"","sidebar":{"sections":[{"group":"open","items":[{"glyph":"+","label":"open","href":"./ui_kits/homepage/"}]},{"group":"bins","items":[{"label":"everything","href":"#all","count":23,"active":true},{"label":"pinned","href":"#kits","count":5},{"label":"shipped","href":"#previews","count":12},{"label":"drafts","href":"#decks","count":6}]},{"group":"labels","items":[{"label":"ui kits","href":"#kits","count":4},{"label":"decks","href":"#decks","count":1},{"label":"previews","href":"#previews","count":20},{"label":"docs","href":"#docs","count":3}]},{"group":"more","items":[{"label":"readme","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"label":"skill","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"label":"tokens","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"label":"source","href":"https://github.com/AnEntrypoint/design"}]}]},"marquee":{"items":["open source","design tokens","buildless components","zero raw color literals"],"sep":"/"},"panels":[{"id":"kits","title":"ui kits","count":"14 surfaces","items":[{"code":"","title":"homepage","sub":"marquee + works grid","meta":"open ->","href":"./ui_kits/homepage/"},{"code":"","title":"project page","sub":"hero receipt install changelog","meta":"open ->","href":"./ui_kits/project_page/"},{"code":"","title":"docs","sub":"long-form prose chrome","meta":"open ->","href":"./ui_kits/docs/"},{"code":"","title":"blog","sub":"dated index + reading view","meta":"open ->","href":"./ui_kits/blog/"},{"code":"","title":"chat","sub":"message thread + composer","meta":"open ->","href":"./ui_kits/chat/"},{"code":"","title":"aicat","sub":"ai assistant with cat persona","meta":"open ->","href":"./ui_kits/aicat/"},{"code":"","title":"file browser","sub":"rails by file type drop preview","meta":"open ->","href":"./ui_kits/file_browser/"},{"code":"","title":"dashboard","sub":"kpis tables receipts changelog","meta":"open ->","href":"./ui_kits/dashboard/"},{"code":"","title":"terminal","sub":"cli prompt command lines log view","meta":"open ->","href":"./ui_kits/terminal/"},{"code":"","title":"settings","sub":"sectioned forms toggles save bar","meta":"open ->","href":"./ui_kits/settings/"},{"code":"","title":"signin","sub":"auth providers magic link","meta":"open ->","href":"./ui_kits/signin/"},{"code":"","title":"search","sub":"topbar query faceted filters rows","meta":"open ->","href":"./ui_kits/search/"},{"code":"","title":"404","sub":"empty-state hero suggested routes","meta":"open ->","href":"./ui_kits/error_404/"},{"code":"","title":"gallery","sub":"visual grid tonal cards lightbox","meta":"open ->","href":"./ui_kits/gallery/"}]},{"id":"file_browser","title":"file browser","count":"primitives","items":[{"code":"fb","title":"file_browser kit","sub":"drop, list, preview, dialogs","meta":"open kit","href":"./ui_kits/file_browser/"},{"code":"fb","title":"FileRow","sub":"rail icon name meta","meta":"preview","href":"./preview/file-row.html"},{"code":"fb","title":"FileGrid","sub":"stack of rows in a panel","meta":"preview","href":"./preview/file-grid.html"},{"code":"fb","title":"DropZone","sub":"tonal upload target","meta":"preview","href":"./preview/dropzone.html"},{"code":"fb","title":"FileViewer","sub":"modal preview keyed head","meta":"preview","href":"./preview/file-viewer.html"},{"code":"fb","title":"FileToolbar","sub":"actions breadcrumb upload","meta":"preview","href":"./preview/file-toolbar.html"},{"code":"fb","title":"fsbrowse","sub":"Express + busboy backend","meta":"source","href":"https://github.com/AnEntrypoint/fsbrowse"}]},{"id":"desktop_os","title":"desktop os shell","count":"in-page wm","items":[{"code":"os","title":"createDesktopShell","sub":"menubar apps launcher taskbar window manager","meta":"shell.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/shell.js"},{"code":"os","title":"icons set","sub":"svg glyphs for menubar + taskbar","meta":"icons.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/icons.js"},{"code":"os","title":"theme.css","sub":"os chrome tokens menubar launcher wm","meta":"theme.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/theme.css"},{"code":"os","title":"import path","sub":"anentrypoint-design/desktop","meta":"exports","href":"https://github.com/AnEntrypoint/design/blob/main/package.json"}]},{"id":"web_components","title":"web components","count":"1 element","items":[{"code":"wc","title":"\u003cds-chat>","sub":"auto-registers when the sdk loads in a browser","meta":"ds-chat.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/web-components/ds-chat.js"},{"code":"wc","title":"registerChatElement","sub":"manual register helper","meta":"source","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js"}]},{"id":"api_exports","title":"public api","count":"sdk surface","items":[{"code":"api","title":"h / applyDiff","sub":"webjsx createElement + diff","meta":"index.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js"},{"code":"api","title":"installStyles / scope","sub":"ds-247420 css scope + bootstrap","meta":"styles.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js"},{"code":"api","title":"loadCss","sub":"fetch the bundled css string","meta":"styles.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js"},{"code":"api","title":"mount / mountKit","sub":"ds shell + ui_kit bootstrap","meta":"bootstrap.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/bootstrap.js"},{"code":"api","title":"registerDeckStage / getDeckStage","sub":"16:9 deck stage api","meta":"deck-stage.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/deck-stage.js"},{"code":"api","title":"renderMarkdown","sub":"marked v15 + dompurify lazy stack","meta":"markdown.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/markdown.js"},{"code":"api","title":"ensurePrism / highlightAllUnder","sub":"prism core + per-language","meta":"highlight.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/highlight.js"},{"code":"api","title":"renderPageHtml","sub":"static page html template","meta":"page-html.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/page-html.js"},{"code":"api","title":"components / motion / debug","sub":"namespaces from the default export","meta":"components.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/components.js"}]},{"id":"decks","title":"decks","count":1,"items":[{"code":"","title":"deck template","sub":"16:9 stage with auto-fit","meta":"open ->","href":"./slides/"}]},{"id":"docs","title":"docs","count":3,"items":[{"code":"md","title":"readme","sub":"overview, manifesto, conventions","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"code":"md","title":"skill","sub":"authoring rules for the agent","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"code":"css","title":"tokens","sub":"colors, type, panel surface tokens","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"}]},{"id":"features","title":"why design","count":4,"items":[{"code":"","title":"layered surfaces","sub":"panel-on-panel rhythm; loud content sits inside quiet chrome.","meta":"open ->","href":"#"},{"code":"","title":"monospace labels","sub":"mono only for codes/labels/CLI; sans for everything legible.","meta":"open ->","href":"#"},{"code":"","title":"indicator rails","sub":"color-coded inset rails for category separation, never borders.","meta":"open ->","href":"#"},{"code":"","title":"tokens-only","sub":"every surface, type ramp, accent driven by --panel-* / --fs-* tokens.","meta":"open ->","href":"#"}]},{"id":"previews","title":"previews","count":25,"items":[{"code":"","title":"buttons","sub":"preview · buttons.html","meta":"open ->","href":"./preview/buttons.html"},{"code":"","title":"colors core","sub":"preview · colors-core.html","meta":"open ->","href":"./preview/colors-core.html"},{"code":"","title":"colors lore","sub":"preview · colors-lore.html","meta":"open ->","href":"./preview/colors-lore.html"},{"code":"","title":"colors semantic","sub":"preview · colors-semantic.html","meta":"open ->","href":"./preview/colors-semantic.html"},{"code":"","title":"dateline","sub":"preview · dateline.html","meta":"open ->","href":"./preview/dateline.html"},{"code":"","title":"dropzone","sub":"preview · dropzone.html","meta":"open ->","href":"./preview/dropzone.html"},{"code":"","title":"file grid","sub":"preview · file-grid.html","meta":"open ->","href":"./preview/file-grid.html"},{"code":"","title":"file row","sub":"preview · file-row.html","meta":"open ->","href":"./preview/file-row.html"},{"code":"","title":"file toolbar","sub":"preview · file-toolbar.html","meta":"open ->","href":"./preview/file-toolbar.html"},{"code":"","title":"file viewer","sub":"preview · file-viewer.html","meta":"open ->","href":"./preview/file-viewer.html"},{"code":"","title":"header","sub":"preview · header.html","meta":"open ->","href":"./preview/header.html"},{"code":"","title":"icons unicode","sub":"preview · icons-unicode.html","meta":"open ->","href":"./preview/icons-unicode.html"},{"code":"","title":"index row","sub":"preview · index-row.html","meta":"open ->","href":"./preview/index-row.html"},{"code":"","title":"inputs","sub":"preview · inputs.html","meta":"open ->","href":"./preview/inputs.html"},{"code":"","title":"manifesto","sub":"preview · manifesto.html","meta":"open ->","href":"./preview/manifesto.html"},{"code":"","title":"rules","sub":"preview · rules.html","meta":"open ->","href":"./preview/rules.html"},{"code":"","title":"spacing","sub":"preview · spacing.html","meta":"open ->","href":"./preview/spacing.html"},{"code":"","title":"stamps","sub":"preview · stamps.html","meta":"open ->","href":"./preview/stamps.html"},{"code":"","title":"stamps lore","sub":"preview · stamps-lore.html","meta":"open ->","href":"./preview/stamps-lore.html"},{"code":"","title":"theme ink","sub":"preview · theme-ink.html","meta":"open ->","href":"./preview/theme-ink.html"},{"code":"","title":"type display","sub":"preview · type-display.html","meta":"open ->","href":"./preview/type-display.html"},{"code":"","title":"type mono","sub":"preview · type-mono.html","meta":"open ->","href":"./preview/type-mono.html"},{"code":"","title":"type prose","sub":"preview · type-prose.html","meta":"open ->","href":"./preview/type-prose.html"},{"code":"","title":"type scale","sub":"preview · type-scale.html","meta":"open ->","href":"./preview/type-scale.html"},{"code":"","title":"wordmarks","sub":"preview · wordmarks.html","meta":"open ->","href":"./preview/wordmarks.html"}]}],"quickstart":{"heading":"quick start","lines":[{"kind":"cmt","text":"# install via importmap (no bundler)"},{"kind":"cmd","text":"\u003cscript type='importmap'>{\"imports\":{\"anentrypoint-design\":\"https://unpkg.com/anentrypoint-design@latest/dist/247420.js\"}}\u003c/script>"},{"kind":"cmt","text":"# or clone the source"},{"kind":"cmd","text":"git clone https://github.com/AnEntrypoint/design.git"}]},"statusLeft":["main","utf-8","lf"],"statusRight":["247420 · mmxxvi","probably emerging"]}</script>
|
|
92
|
+
<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>
|
|
54
93
|
</head>
|
|
55
94
|
<body>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<h1>design — 247420 design system</h1>
|
|
60
|
-
<p>the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.</p>
|
|
61
|
-
<nav><a href="https://247420.xyz">247420</a>
|
|
62
|
-
<a href="https://github.com/AnEntrypoint">GitHub</a></nav>
|
|
63
|
-
</main>
|
|
64
|
-
</noscript>
|
|
65
|
-
<script type="application/json" id="__site__">{"site":{"title":"design","tagline":"247420 design system","description":"the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.","repo":"https://github.com/AnEntrypoint/design","url":"https://anentrypoint.github.io/design","year":2026,"keywords":["design-system","tokens","247420","anentrypoint"],"accent_from":"#247420","accent_to":"#3A9A34","glyph":"·","code":"072","category":"web"},"nav":{"links":[{"label":247420,"href":"https://247420.xyz"},{"label":"GitHub","href":"https://github.com/AnEntrypoint"}]},"home":{"id":"home","title":"Home","hero":{"heading":"design","subheading":"the 247420 design system","body":"acid editorial. oversized display type, one electric green, print texture over glow. every 247420 surface runs on it.","badges":[{"label":"design-system"},{"label":"tokens"},{"label":"web"}],"ctas":[{"label":"GitHub","href":"https://github.com/AnEntrypoint/design","primary":true},{"label":"247420","href":"https://247420.xyz"}]},"sidebar":{"fab":{"label":"open","glyph":"+","href":"./ui_kits/homepage/"},"bins":[{"label":"everything","href":"#all","count":23,"active":true},{"label":"pinned","href":"#kits","count":5},{"label":"shipped","href":"#previews","count":12},{"label":"drafts","href":"#decks","count":6}],"labels_group":"labels","labels":[{"label":"ui kits","href":"#kits","count":4},{"label":"decks","href":"#decks","count":1},{"label":"previews","href":"#previews","count":20},{"label":"docs","href":"#docs","count":3}],"more_group":"more","more":[{"label":"readme","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"label":"skill","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"label":"tokens","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"label":"source","href":"https://github.com/AnEntrypoint/design"}]},"tabs":[{"label":"everything","href":"#all","active":true},{"label":"kits","href":"#kits"},{"label":"decks","href":"#decks"},{"label":"previews","href":"#previews"}],"kits":{"heading":"ui kits","count":"14 surfaces","items":[{"code":"01","title":"homepage","sub":"marquee + works grid","desc":"editorial banner over a quiet shell","href":"./ui_kits/homepage/"},{"code":"02","title":"project page","sub":"hero receipt install changelog","desc":"shippable case-study template","href":"./ui_kits/project_page/"},{"code":"03","title":"docs","sub":"long-form prose chrome","desc":"sidebar nav, mono headings, code blocks","href":"./ui_kits/docs/"},{"code":"04","title":"blog","sub":"dated index + reading view","desc":"typographic, no clutter","href":"./ui_kits/blog/"},{"code":"05","title":"chat","sub":"message thread + composer","desc":"pill bubbles, monospace timestamps, room sidebar","href":"./ui_kits/chat/"},{"code":"06","title":"aicat","sub":"ai assistant with cat persona","desc":"ascii portrait, thinking dots, mood-swapping face","href":"./ui_kits/aicat/"},{"code":"07","title":"file browser","sub":"rails by file type drop preview","desc":"static demo wired to fsbrowse — every file-row primitive in one surface","href":"./ui_kits/file_browser/"},{"code":"08","title":"dashboard","sub":"kpis tables receipts changelog","desc":"every content primitive in one operations surface","href":"./ui_kits/dashboard/"},{"code":"09","title":"terminal","sub":"cli prompt command lines log view","desc":"five line kinds (cmt cmd out ok warn) over a tonal panel","href":"./ui_kits/terminal/"},{"code":"10","title":"settings","sub":"sectioned forms toggles save bar","desc":"every input primitive — fields, segmented buttons, danger panel","href":"./ui_kits/settings/"},{"code":"11","title":"signin","sub":"auth providers magic link","desc":"narrow shell + tone-on-tone form, no shadows, no spinners","href":"./ui_kits/signin/"},{"code":"12","title":"search","sub":"topbar query faceted filters rows","desc":"ranked results reuse the same RowLink primitive every list does","href":"./ui_kits/search/"},{"code":"13","title":"404","sub":"empty-state hero suggested routes","desc":"narrow shell, oversized mono code, three CTAs","href":"./ui_kits/error_404/"},{"code":"14","title":"gallery","sub":"visual grid tonal cards lightbox","desc":"tiles share the panel tokens; lightbox reuses the same surface","href":"./ui_kits/gallery/"}]},"decks":{"heading":"decks","items":[{"code":"01","title":"deck template","sub":"16:9 stage with auto-fit","desc":"title, lede, code, comparison, manifesto","href":"./slides/"}]},"docs":{"heading":"docs","items":[{"code":"md","title":"readme","sub":"overview, manifesto, conventions","desc":"start here","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"code":"md","title":"skill","sub":"authoring rules for the agent","desc":"editorial zine surface modes","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"code":"css","title":"tokens","sub":"colors, type, panel surface tokens","desc":"canonical source of truth","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"}]},"previews":{"heading":"previews","base":"./preview/","items":["buttons","colors-core","colors-lore","colors-semantic","dateline","dropzone","file-grid","file-row","file-toolbar","file-viewer","header","icons-unicode","index-row","inputs","manifesto","rules","spacing","stamps","stamps-lore","theme-ink","type-display","type-mono","type-prose","type-scale","wordmarks"]},"file_browser":{"heading":"file browser","count":"primitives","items":[{"code":"fb","title":"file_browser kit","sub":"drop, list, preview, dialogs","desc":"the full surface, working with mock data","href":"./ui_kits/file_browser/","cta":"open kit"},{"code":"fb","title":"FileRow","sub":"rail icon name meta","desc":"data-file-type drives the rail color — never apply rail-* manually","href":"./preview/file-row.html","cta":"preview"},{"code":"fb","title":"FileGrid","sub":"stack of rows in a panel","desc":"directories sort first; selected row gets the mint .active tone","href":"./preview/file-grid.html","cta":"preview"},{"code":"fb","title":"DropZone","sub":"tonal upload target","desc":"swap to --panel-select on dragover; preventDefault on document, not just zone","href":"./preview/dropzone.html","cta":"preview"},{"code":"fb","title":"FileViewer","sub":"modal preview keyed head","desc":"head + body both carry data-file-type so rails propagate inside the modal","href":"./preview/file-viewer.html","cta":"preview"},{"code":"fb","title":"FileToolbar","sub":"actions breadcrumb upload","desc":"left-aligned actions, right-aligned count; UploadProgress sits underneath","href":"./preview/file-toolbar.html","cta":"preview"},{"code":"fb","title":"fsbrowse","sub":"Express + busboy backend","desc":"canonical real-world wiring — same SDK, real filesystem operations","href":"https://github.com/AnEntrypoint/fsbrowse","cta":"source"}]},"quickstart":{"heading":"quick start","lines":[{"kind":"cmt","text":"# install via importmap (no bundler)"},{"kind":"cmd","text":"\u003cscript type='importmap'\u003e{\"imports\":{\"anentrypoint-design\":\"https://unpkg.com/anentrypoint-design@latest/dist/247420.js\"}}\u003c/script\u003e"},{"kind":"cmt","text":"# or clone the source"},{"kind":"cmd","text":"git clone https://github.com/AnEntrypoint/design.git"}]},"desktop_os":{"heading":"desktop os shell","count":"in-page wm","items":[{"code":"os","title":"createDesktopShell","sub":"menubar apps launcher taskbar window manager","desc":"in-page desktop OS chrome — mount any app registry into a draggable wm","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/shell.js","cta":"shell.js"},{"code":"os","title":"icons set","sub":"svg glyphs for menubar + taskbar","desc":"home, apps, search, settings — used by the shell and exposed for apps","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/icons.js","cta":"icons.js"},{"code":"os","title":"theme.css","sub":"os chrome tokens menubar launcher wm","desc":"scoped css module loaded by the shell — keeps desktop visuals isolated","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/theme.css","cta":"theme.css"},{"code":"os","title":"import path","sub":"anentrypoint-design/desktop","desc":"subpath export; no bundler needed — pulls icons + createDesktopShell","href":"https://github.com/AnEntrypoint/design/blob/main/package.json","cta":"exports"}]},"web_components":{"heading":"web components","count":"1 element","items":[{"code":"wc","title":"\u003cds-chat\u003e","sub":"auto-registers when the sdk loads in a browser","desc":"set el.messages = [...] or pass json via attribute; listen for 'send' event","href":"https://github.com/AnEntrypoint/design/blob/main/src/web-components/ds-chat.js","cta":"ds-chat.js"},{"code":"wc","title":"registerChatElement","sub":"manual register helper","desc":"exported from the sdk root for ssr / late-mount when customElements is gated","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js","cta":"source"}]},"api_exports":{"heading":"public api","count":"sdk surface","items":[{"code":"api","title":"h / applyDiff","sub":"webjsx createElement + diff","desc":"build vnodes with h(), render with applyDiff(root, [vnode]) — no jsx pragma needed","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js","cta":"index.js"},{"code":"api","title":"installStyles / scope","sub":"ds-247420 css scope + bootstrap","desc":"installStyles() injects the prefixed css; scope = '.ds-247420' for selector composition","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js","cta":"styles.js"},{"code":"api","title":"loadCss","sub":"fetch the bundled css string","desc":"useful for shadow roots or custom style injection paths","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js","cta":"styles.js"},{"code":"api","title":"mount / mountKit","sub":"ds shell + ui_kit bootstrap","desc":"mount(root, viewFn) wires applyDiff + motion; mountKit({root,view,screen}) wires a kit","href":"https://github.com/AnEntrypoint/design/blob/main/src/bootstrap.js","cta":"bootstrap.js"},{"code":"api","title":"registerDeckStage / getDeckStage","sub":"16:9 deck stage api","desc":"register custom deck stages and fetch the active stage for slide transitions","href":"https://github.com/AnEntrypoint/design/blob/main/src/deck-stage.js","cta":"deck-stage.js"},{"code":"api","title":"renderMarkdown","sub":"marked v15 + dompurify lazy stack","desc":"lazy-loads marked + dompurify from jsdelivr; only xss gate for chat html","href":"https://github.com/AnEntrypoint/design/blob/main/src/markdown.js","cta":"markdown.js"},{"code":"api","title":"ensurePrism / highlightAllUnder","sub":"prism core + per-language","desc":"injects prism on first use; CodeNode ref-callback highlights inside any subtree","href":"https://github.com/AnEntrypoint/design/blob/main/src/highlight.js","cta":"highlight.js"},{"code":"api","title":"renderPageHtml","sub":"static page html template","desc":"shared head/body wrapper for kit pages — meta, importmap, ds-247420 scope","href":"https://github.com/AnEntrypoint/design/blob/main/src/page-html.js","cta":"page-html.js"},{"code":"api","title":"components / motion / debug","sub":"namespaces from the default export","desc":"components.* are the C.* primitives; motion.animateTree, debug.window.__debug registry","href":"https://github.com/AnEntrypoint/design/blob/main/src/components.js","cta":"components.js"}]},"features":{"heading":"why design","items":[{"name":"layered surfaces","desc":"panel-on-panel rhythm; loud content sits inside quiet chrome."},{"name":"monospace labels","desc":"mono only for codes/labels/CLI; sans for everything legible."},{"name":"indicator rails","desc":"color-coded inset rails for category separation, never borders."},{"name":"tokens-only","desc":"every surface, type ramp, accent driven by --panel-* / --fs-* tokens."}]},"examples":{"heading":"live examples","items":[{"name":"index shell","desc":"full navigation shell with tabs, filters, and row interactions.","href":"./index.html","cta":"open index"},{"name":"homepage kit","desc":"hero + works layout and updated readable type scale.","href":"./ui_kits/homepage/","cta":"open kit"},{"name":"project page kit","desc":"overview, install, receipt, and changelog template.","href":"./ui_kits/project_page/","cta":"open kit"},{"name":"docs kit","desc":"technical documentation layout with sidebar and prose.","href":"./ui_kits/docs/","cta":"open docs"},{"name":"blog kit","desc":"long-form writing layout tuned for readability.","href":"./ui_kits/blog/","cta":"open writing"},{"name":"chat kit","desc":"message thread + composer with pill bubbles and room sidebar.","href":"./ui_kits/chat/","cta":"open chat"},{"name":"aicat kit","desc":"ai assistant with cat persona — ascii portrait + mood face.","href":"./ui_kits/aicat/","cta":"open aicat"},{"name":"slide deck","desc":"16:9 deck stage with improved presenter controls text.","href":"./slides/","cta":"open slides"},{"name":"dashboard kit","desc":"kpis, tables, receipts, changelog — operations surface.","href":"./ui_kits/dashboard/","cta":"open dashboard"},{"name":"terminal kit","desc":"cli prompt, command lines, log viewer.","href":"./ui_kits/terminal/","cta":"open terminal"},{"name":"settings kit","desc":"sectioned forms, toggles, segmented buttons, save bar.","href":"./ui_kits/settings/","cta":"open settings"},{"name":"signin kit","desc":"auth panel, providers, magic link.","href":"./ui_kits/signin/","cta":"open signin"},{"name":"search kit","desc":"query bar, faceted filters, ranked results.","href":"./ui_kits/search/","cta":"open search"},{"name":"404 kit","desc":"empty-state hero with suggested routes.","href":"./ui_kits/error_404/","cta":"open 404"},{"name":"gallery kit","desc":"visual grid + lightbox over tonal cards.","href":"./ui_kits/gallery/","cta":"open gallery"},{"name":"preview samples","desc":"design previews and component samples.","href":"./preview/buttons.html","cta":"open previews"}]},"status_left":["main","utf-8","lf"],"status_right":["247420 · mmxxvi","probably emerging"]}}</script>
|
|
66
|
-
<script type="module">
|
|
67
|
-
import { h, applyDiff, installStyles, components as C, initTheme } from 'anentrypoint-design';
|
|
68
|
-
installStyles();
|
|
69
|
-
document.documentElement.classList.add('ds-247420');
|
|
70
|
-
// initTheme picks up data-theme on <html>, reapplies stored override from
|
|
71
|
-
// localStorage if present, and binds matchMedia so OS-level dark-mode flips
|
|
72
|
-
// re-emit to listeners. Safe no-op if data-theme is already 'auto'.
|
|
73
|
-
try { initTheme && initTheme(); } catch {}
|
|
74
|
-
|
|
75
|
-
const __reveal = () => document.documentElement.classList.add('ds-ready');
|
|
76
|
-
const __fallback = setTimeout(__reveal, 1500);
|
|
77
|
-
|
|
95
|
+
<div id="app"></div>
|
|
96
|
+
<script type="module">
|
|
97
|
+
import { mount, components as C, h } from 'anentrypoint-design';
|
|
78
98
|
const data = JSON.parse(document.getElementById('__site__').textContent);
|
|
79
|
-
const { site, nav, home } = data;
|
|
80
99
|
|
|
81
|
-
function
|
|
82
|
-
if (!
|
|
83
|
-
const
|
|
84
|
-
const
|
|
85
|
-
?
|
|
100
|
+
function heroNode(hero) {
|
|
101
|
+
if (!hero) return null;
|
|
102
|
+
const badges = Array.isArray(hero.badges) ? hero.badges.filter(Boolean) : [];
|
|
103
|
+
const badgeRow = badges.length
|
|
104
|
+
? h('div', { class: 'ds-hero-stats' }, ...badges.map((b, i) =>
|
|
105
|
+
h('span', { key: i, class: 'ds-hero-stat' },
|
|
106
|
+
h('strong', { class: 'ds-hero-stat-n' }, String(b.label != null ? b.label : b)),
|
|
107
|
+
b.desc ? h('span', { class: 'ds-hero-stat-l' }, String(b.desc)) : null,
|
|
108
|
+
)))
|
|
86
109
|
: null;
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
110
|
+
return h('div', { class: 'ds-hero' },
|
|
111
|
+
hero.eyebrow ? h('span', { class: 'eyebrow' }, hero.eyebrow) : null,
|
|
112
|
+
h('h1', { class: 'ds-hero-title' }, hero.heading || hero.title || data.title),
|
|
113
|
+
(hero.body || hero.subheading) ? h('p', { class: 'ds-hero-body' },
|
|
114
|
+
hero.body || hero.subheading,
|
|
115
|
+
hero.accent ? h('span', { class: 'ds-hero-accent' }, ' ' + hero.accent) : null,
|
|
116
|
+
) : null,
|
|
117
|
+
Array.isArray(hero.ctas) && hero.ctas.length
|
|
118
|
+
? h('div', { class: 'ds-hero-actions' }, ...hero.ctas.map((c, i) =>
|
|
119
|
+
h('a', { key: i, class: i === 0 ? 'btn btn-accent' : 'btn btn-ghost', href: c.href || '#' }, c.label || c.cta || 'go')))
|
|
120
|
+
: null,
|
|
121
|
+
badgeRow,
|
|
95
122
|
);
|
|
96
123
|
}
|
|
97
124
|
|
|
98
|
-
function
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
href: it.href || '#'
|
|
106
|
-
}));
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
function Kits() {
|
|
110
|
-
if (!home.kits || !home.kits.items || !home.kits.items.length) return null;
|
|
111
|
-
return C.Panel({
|
|
112
|
-
id: 'kits',
|
|
113
|
-
title: home.kits.heading || 'ui kits',
|
|
114
|
-
count: home.kits.count || home.kits.items.length,
|
|
115
|
-
class: 'ds-home-panel',
|
|
116
|
-
children: rowsFromItems(home.kits.items, 'k')
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
function Decks() {
|
|
121
|
-
if (!home.decks || !home.decks.items || !home.decks.items.length) return null;
|
|
122
|
-
return C.Panel({
|
|
123
|
-
id: 'decks',
|
|
124
|
-
title: home.decks.heading || 'decks',
|
|
125
|
-
class: 'ds-home-panel',
|
|
126
|
-
children: rowsFromItems(home.decks.items, 'd')
|
|
125
|
+
function sectionNode(sec, idx) {
|
|
126
|
+
const features = sec.features || sec.items || [];
|
|
127
|
+
const rows = features.map((f, i) => {
|
|
128
|
+
const kids = [h('div', { key: 't', class: 'ds-feature-title' }, String(f.name || ''))];
|
|
129
|
+
if (f.desc) kids.push(h('div', { key: 'd', class: 'ds-feature-desc', innerHTML: String(f.desc).replace(/`([^`]+)`/g, '<code>$1</code>') }));
|
|
130
|
+
if (f.benefit) kids.push(h('div', { key: 'b', class: 'ds-feature-benefit' }, String(f.benefit)));
|
|
131
|
+
return h('div', { key: i, class: 'ds-feature' }, ...kids);
|
|
127
132
|
});
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
children: rowsFromItems(home.file_browser.items, 'fb')
|
|
133
|
+
return C.Section({
|
|
134
|
+
id: sec.id || null,
|
|
135
|
+
title: sec.name || sec.title || sec.id,
|
|
136
|
+
children: [
|
|
137
|
+
sec.lede ? h('p', { class: 'ds-lede' }, sec.lede) : null,
|
|
138
|
+
...rows,
|
|
139
|
+
sec.body && String(sec.body).trim() ? h('div', { class: 'page-body', innerHTML: __md(sec.body) }) : null,
|
|
140
|
+
].filter(Boolean),
|
|
137
141
|
});
|
|
138
142
|
}
|
|
139
143
|
|
|
140
|
-
function
|
|
141
|
-
if (!
|
|
142
|
-
return C.
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
144
|
+
function examplesNode(examples) {
|
|
145
|
+
if (!examples || !examples.length) return null;
|
|
146
|
+
return C.Section({
|
|
147
|
+
title: 'explore',
|
|
148
|
+
children: examples.map((e, i) => {
|
|
149
|
+
const code = e.code == null ? '' : String(e.code).trim();
|
|
150
|
+
const kids = [];
|
|
151
|
+
if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
|
|
152
|
+
kids.push(h('span', { key: 't', class: 'title' }, String(e.label || e.name || e.href || '')));
|
|
153
|
+
if (e.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + e.desc));
|
|
154
|
+
kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, '->'));
|
|
155
|
+
return h('a', { key: i, class: 'row', href: e.href || '#' }, ...kids);
|
|
156
|
+
}),
|
|
147
157
|
});
|
|
148
158
|
}
|
|
149
159
|
|
|
150
|
-
function
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
const rows =
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
return C.Panel({
|
|
162
|
-
id: 'previews',
|
|
163
|
-
title: home.previews.heading || 'previews',
|
|
164
|
-
count: rows.length,
|
|
165
|
-
class: 'ds-home-panel',
|
|
166
|
-
children: rows
|
|
160
|
+
function panelNode(panel, idx) {
|
|
161
|
+
const items = Array.isArray(panel.items) ? panel.items : [];
|
|
162
|
+
if (!items.length) return null;
|
|
163
|
+
const rows = items.map((it, i) => {
|
|
164
|
+
const code = it.code == null ? '' : String(it.code).trim();
|
|
165
|
+
const kids = [];
|
|
166
|
+
if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
|
|
167
|
+
kids.push(h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')));
|
|
168
|
+
if (it.sub || it.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + (it.sub || it.desc)));
|
|
169
|
+
kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
|
|
170
|
+
return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
|
|
167
171
|
});
|
|
172
|
+
return C.Panel({ id: panel.id || null, title: panel.title || panel.name || '', count: panel.count || items.length, children: rows });
|
|
168
173
|
}
|
|
169
174
|
|
|
170
|
-
function
|
|
171
|
-
if (!
|
|
172
|
-
|
|
173
|
-
key: 'f' + i,
|
|
174
|
-
code: String(i + 1).padStart(2, '0'),
|
|
175
|
-
title: it.name,
|
|
176
|
-
sub: it.desc || '',
|
|
177
|
-
meta: it.meta || '',
|
|
178
|
-
href: it.href || '#'
|
|
179
|
-
}));
|
|
180
|
-
return C.Panel({
|
|
181
|
-
title: home.features.heading || 'why design',
|
|
182
|
-
class: 'ds-home-panel',
|
|
183
|
-
children: rows
|
|
184
|
-
});
|
|
175
|
+
function marqueeNode(marquee) {
|
|
176
|
+
if (!marquee || !Array.isArray(marquee.items) || !marquee.items.length) return null;
|
|
177
|
+
return C.Marquee ? C.Marquee({ items: marquee.items, sep: marquee.sep || '/' }) : null;
|
|
185
178
|
}
|
|
186
179
|
|
|
187
|
-
function
|
|
188
|
-
if (!
|
|
189
|
-
const lineNodes =
|
|
180
|
+
function quickstartNode(quickstart) {
|
|
181
|
+
if (!quickstart || !Array.isArray(quickstart.lines) || !quickstart.lines.length) return null;
|
|
182
|
+
const lineNodes = quickstart.lines.map((l, i) => h('div', { key: 'q' + i, class: 'cli' },
|
|
190
183
|
h('span', { class: 'prompt' }, l.kind === 'cmt' ? '#' : '$'),
|
|
191
184
|
h('span', { class: 'cmd' }, l.text)
|
|
192
185
|
));
|
|
193
|
-
return C.Panel({
|
|
194
|
-
title: home.quickstart.heading || 'quick start',
|
|
195
|
-
class: 'ds-home-panel',
|
|
196
|
-
children: h('div', { class: 'ds-quickstart' }, ...lineNodes)
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
function DesktopOS() {
|
|
201
|
-
if (!home.desktop_os || !home.desktop_os.items || !home.desktop_os.items.length) return null;
|
|
202
|
-
return C.Panel({
|
|
203
|
-
title: home.desktop_os.heading || 'desktop os shell',
|
|
204
|
-
count: home.desktop_os.count || home.desktop_os.items.length,
|
|
205
|
-
class: 'ds-home-panel',
|
|
206
|
-
children: rowsFromItems(home.desktop_os.items, 'os')
|
|
207
|
-
});
|
|
186
|
+
return C.Panel({ title: quickstart.heading || 'quick start', children: h('div', { class: 'ds-quickstart' }, ...lineNodes) });
|
|
208
187
|
}
|
|
209
188
|
|
|
210
|
-
function
|
|
211
|
-
if (!
|
|
212
|
-
return C.
|
|
213
|
-
title: home.web_components.heading || 'web components',
|
|
214
|
-
count: home.web_components.count || home.web_components.items.length,
|
|
215
|
-
class: 'ds-home-panel',
|
|
216
|
-
children: rowsFromItems(home.web_components.items, 'wc')
|
|
217
|
-
});
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
function ApiExports() {
|
|
221
|
-
if (!home.api_exports || !home.api_exports.items || !home.api_exports.items.length) return null;
|
|
222
|
-
return C.Panel({
|
|
223
|
-
title: home.api_exports.heading || 'public api',
|
|
224
|
-
count: home.api_exports.count || home.api_exports.items.length,
|
|
225
|
-
class: 'ds-home-panel',
|
|
226
|
-
children: rowsFromItems(home.api_exports.items, 'api')
|
|
227
|
-
});
|
|
189
|
+
function sideNode(sidebar) {
|
|
190
|
+
if (!sidebar || !Array.isArray(sidebar.sections) || !sidebar.sections.length || !C.Side) return null;
|
|
191
|
+
return C.Side({ sections: sidebar.sections });
|
|
228
192
|
}
|
|
229
193
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
group: 'open',
|
|
246
|
-
items: [{ glyph: sb.fab.glyph || '+', label: sb.fab.label || 'open', href: sb.fab.href || '#' }]
|
|
247
|
-
});
|
|
248
|
-
}
|
|
249
|
-
if (sb.bins && sb.bins.length) {
|
|
250
|
-
sections.push({ group: 'bins', items: sb.bins });
|
|
194
|
+
// minimal client-side markdown renderer matching server-side renderer (idempotent for already-html bodies)
|
|
195
|
+
function __slug(s) { return String(s || '').trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-'); }
|
|
196
|
+
function __md(md) {
|
|
197
|
+
const lines = String(md || '').split('\n');
|
|
198
|
+
const out = []; let inCode = false, inList = false;
|
|
199
|
+
const esc = (s) => String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
200
|
+
const inl = (s) => s.replace(/`([^`]+)`/g, '<code>$1</code>').replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>').replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
|
|
201
|
+
for (const line of lines) {
|
|
202
|
+
if (line.startsWith('```')) { if (inCode) { out.push('</pre>'); inCode = false; } else { out.push('<pre>'); inCode = true; } continue; }
|
|
203
|
+
if (inCode) { out.push(esc(line)); continue; }
|
|
204
|
+
if (line.startsWith('# ')) { const t = line.slice(2); out.push('<h1 id="' + __slug(t) + '">' + esc(t) + '</h1>'); }
|
|
205
|
+
else if (line.startsWith('## ')) { const t = line.slice(3); out.push('<h2 id="' + __slug(t) + '">' + esc(t) + '</h2>'); }
|
|
206
|
+
else if (line.startsWith('### ')) { const t = line.slice(4); out.push('<h3 id="' + __slug(t) + '">' + esc(t) + '</h3>'); }
|
|
207
|
+
else if (line.startsWith('- ')) { if (!inList) { out.push('<ul>'); inList = true; } out.push('<li>' + inl(esc(line.slice(2))) + '</li>'); }
|
|
208
|
+
else { if (inList) { out.push('</ul>'); inList = false; } if (line.trim()) out.push('<p>' + inl(esc(line)) + '</p>'); }
|
|
251
209
|
}
|
|
252
|
-
if (
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
if (sb.more && sb.more.length) {
|
|
256
|
-
sections.push({ group: sb.more_group || 'more', items: sb.more });
|
|
257
|
-
}
|
|
258
|
-
return C.Side({ sections });
|
|
210
|
+
if (inList) out.push('</ul>');
|
|
211
|
+
if (inCode) out.push('</pre>');
|
|
212
|
+
return out.join('\n');
|
|
259
213
|
}
|
|
260
214
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
},
|
|
270
|
-
t.glyph ? h('span', { class: 'glyph' }, t.glyph) : null,
|
|
271
|
-
h('span', {}, t.label)
|
|
272
|
-
))
|
|
215
|
+
const bodyNode = data.bodyHtml ? C.Section({ children: h('div', { class: 'page-body', innerHTML: data.bodyHtml }) }) : null;
|
|
216
|
+
|
|
217
|
+
function tierNode(tier, children) {
|
|
218
|
+
const kids = children.filter(Boolean);
|
|
219
|
+
if (!kids.length) return null;
|
|
220
|
+
const labelId = 'tier-' + tier.key + '-label';
|
|
221
|
+
const head = h('div', { key: 'h', class: 'ds-tier-head' },
|
|
222
|
+
h('h2', { class: 'eyebrow', id: labelId }, tier.label),
|
|
223
|
+
tier.lede ? h('p', { class: 'ds-tier-lede' }, tier.lede) : null,
|
|
273
224
|
);
|
|
225
|
+
return h('section', { key: tier.key, class: 'ds-tier ds-tier-' + tier.key, id: tier.key, 'aria-labelledby': labelId }, head, ...kids);
|
|
274
226
|
}
|
|
275
227
|
|
|
276
|
-
const
|
|
228
|
+
const panelsById = new Map((data.panels || []).map((p) => [p.id || p.title || p.name || '', p]));
|
|
229
|
+
const takePanel = (id) => { const p = panelsById.get(id); if (p) panelsById.delete(id); return p ? panelNode(p) : null; };
|
|
277
230
|
|
|
278
|
-
const
|
|
279
|
-
|
|
231
|
+
const TIERS = [
|
|
232
|
+
{ key: 'open', label: 'open', lede: 'browse and try the system running.', ids: ['kits', 'previews', 'decks'], extra: () => [examplesNode(data.examples)] },
|
|
233
|
+
{ key: 'ships', label: 'ships', lede: 'what the package contains.', ids: ['file_browser', 'desktop_os', 'web_components', 'api_exports'], extra: () => [] },
|
|
234
|
+
{ key: 'read', label: 'read', lede: 'understand the rules behind it.', ids: ['docs', 'features'], extra: () => [quickstartNode(data.quickstart)] },
|
|
235
|
+
];
|
|
280
236
|
|
|
281
|
-
const
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
side: buildSide(),
|
|
289
|
-
main: h('div', { id: 'all' },
|
|
290
|
-
Hero(),
|
|
291
|
-
C.Marquee({ items: ['open source', 'design tokens', 'buildless components', 'zero raw color literals'], sep: '/' }),
|
|
292
|
-
Tabs(),
|
|
293
|
-
Kits(),
|
|
294
|
-
FileBrowser(),
|
|
295
|
-
DesktopOS(),
|
|
296
|
-
WebComponents(),
|
|
297
|
-
ApiExports(),
|
|
298
|
-
Decks(),
|
|
299
|
-
Docs(),
|
|
300
|
-
Previews(),
|
|
301
|
-
Features(),
|
|
302
|
-
Quickstart(),
|
|
303
|
-
Examples()
|
|
304
|
-
),
|
|
305
|
-
status: C.Status({ left: statusLeft, right: statusRight })
|
|
237
|
+
const tierNodes = TIERS.map((t) => {
|
|
238
|
+
const kids = [...t.ids.map(takePanel), ...t.extra()].filter(Boolean);
|
|
239
|
+
if (t.key === 'open' && kids.length) {
|
|
240
|
+
const lead = kids[0];
|
|
241
|
+
if (lead.props) lead.props.class = (lead.props.class || '') + ' ds-tier-lead';
|
|
242
|
+
}
|
|
243
|
+
return tierNode(t, kids);
|
|
306
244
|
});
|
|
245
|
+
const leftoverPanels = [...panelsById.values()].map(panelNode);
|
|
307
246
|
|
|
308
|
-
|
|
247
|
+
const mainChildren = [
|
|
248
|
+
heroNode(data.hero),
|
|
249
|
+
marqueeNode(data.marquee),
|
|
250
|
+
...data.sections.map(sectionNode),
|
|
251
|
+
...tierNodes,
|
|
252
|
+
...leftoverPanels,
|
|
253
|
+
bodyNode,
|
|
254
|
+
].filter(Boolean);
|
|
255
|
+
|
|
256
|
+
mount(document.getElementById('app'), () => C.AppShell({
|
|
257
|
+
topbar: C.Topbar({ brand: data.siteName, items: data.navItems, active: data.title }),
|
|
258
|
+
crumb: C.Crumb({ leaf: data.title }),
|
|
259
|
+
side: sideNode(data.sidebar),
|
|
260
|
+
main: h('div', { class: 'app-stage' }, ...mainChildren),
|
|
261
|
+
status: C.Status({
|
|
262
|
+
left: data.statusLeft || [data.siteName.toLowerCase(), data.slug],
|
|
263
|
+
right: data.statusRight || ['live'],
|
|
264
|
+
}),
|
|
265
|
+
}));
|
|
309
266
|
|
|
310
|
-
const __fontsReady = (document.fonts && document.fonts.ready) ? document.fonts.ready : Promise.resolve();
|
|
311
|
-
Promise.race([__fontsReady, new Promise(r => setTimeout(r, 1200))]).then(() => {
|
|
312
|
-
requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
313
|
-
clearTimeout(__fallback);
|
|
314
|
-
__reveal();
|
|
315
|
-
}));
|
|
316
|
-
});
|
|
317
267
|
</script>
|
|
318
268
|
</body>
|
|
319
|
-
</html>
|
|
269
|
+
</html>
|