anentrypoint-design 0.0.218 → 0.0.219
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/app-shell.css +4 -0
- package/dist/.nojekyll +0 -0
- package/dist/247420.css +4 -0
- package/dist/247420.js +13 -13
- package/dist/app-shell.css +594 -0
- package/dist/colors_and_type.css +197 -0
- package/dist/favicon.svg +1 -0
- package/dist/index.html +308 -0
- package/dist/preview/buttons.html +28 -0
- package/dist/preview/colors-core.html +45 -0
- package/dist/preview/colors-lore.html +28 -0
- package/dist/preview/colors-semantic.html +34 -0
- package/dist/preview/dateline.html +19 -0
- package/dist/preview/dropzone.html +30 -0
- package/dist/preview/file-grid.html +19 -0
- package/dist/preview/file-row.html +20 -0
- package/dist/preview/file-toolbar.html +40 -0
- package/dist/preview/file-viewer.html +31 -0
- package/dist/preview/header.html +24 -0
- package/dist/preview/icons-unicode.html +26 -0
- package/dist/preview/index-row.html +25 -0
- package/dist/preview/inputs.html +22 -0
- package/dist/preview/manifesto.html +52 -0
- package/dist/preview/motion-default.js +106 -0
- package/dist/preview/rules.html +16 -0
- package/dist/preview/spacing.html +18 -0
- package/dist/preview/stamps-lore.html +20 -0
- package/dist/preview/stamps.html +14 -0
- package/dist/preview/theme-ink.html +15 -0
- package/dist/preview/type-display.html +16 -0
- package/dist/preview/type-mono.html +15 -0
- package/dist/preview/type-prose.html +11 -0
- package/dist/preview/type-scale.html +20 -0
- package/dist/preview/wordmarks.html +28 -0
- package/dist/robots.txt +8 -0
- package/dist/site/content/globals/navigation.yaml +5 -0
- package/dist/site/content/globals/site.yaml +16 -0
- package/dist/site/content/pages/freddie.yaml +88 -0
- package/dist/site/content/pages/home.yaml +190 -0
- package/dist/site/theme.mjs +368 -0
- package/dist/sitemap.xml +31 -0
- package/dist/slides/deck-stage-overlay.js +63 -0
- package/dist/slides/deck-stage-state.js +81 -0
- package/dist/slides/deck-stage-style.js +117 -0
- package/dist/slides/deck-stage.js +159 -0
- package/dist/slides/index.html +276 -0
- package/dist/src/bootstrap.js +25 -0
- package/dist/src/components/chat.js +199 -0
- package/dist/src/components/community.js +167 -0
- package/dist/src/components/content.js +213 -0
- package/dist/src/components/files-modals.js +107 -0
- package/dist/src/components/files.js +118 -0
- package/dist/src/components/freddie/helpers.js +50 -0
- package/dist/src/components/freddie.js +33 -0
- package/dist/src/components/shell.js +117 -0
- package/dist/src/components/theme-toggle.js +70 -0
- package/dist/src/components.js +52 -0
- package/dist/src/debug.js +30 -0
- package/dist/src/deck-stage.js +21 -0
- package/dist/src/highlight.js +32 -0
- package/dist/src/index.js +86 -0
- package/dist/src/kits/os/about-app.js +52 -0
- package/dist/src/kits/os/app-panes.css +152 -0
- package/dist/src/kits/os/browser-app.js +58 -0
- package/dist/src/kits/os/files-app.js +44 -0
- package/dist/src/kits/os/freddie/helpers.js +59 -0
- package/dist/src/kits/os/freddie/pages-chat.js +143 -0
- package/dist/src/kits/os/freddie/pages-core.js +101 -0
- package/dist/src/kits/os/freddie/pages-os.js +51 -0
- package/dist/src/kits/os/freddie/pages-tools.js +183 -0
- package/dist/src/kits/os/freddie/routes.js +24 -0
- package/dist/src/kits/os/freddie-dashboard.css +51 -0
- package/dist/src/kits/os/freddie-dashboard.js +101 -0
- package/dist/src/kits/os/icons.js +17 -0
- package/dist/src/kits/os/index.js +5 -0
- package/dist/src/kits/os/launcher.css +61 -0
- package/dist/src/kits/os/launcher.js +79 -0
- package/dist/src/kits/os/monitor-app.js +34 -0
- package/dist/src/kits/os/shell.js +214 -0
- package/dist/src/kits/os/terminal-app.js +45 -0
- package/dist/src/kits/os/theme.css +412 -0
- package/dist/src/kits/os/validate.css +19 -0
- package/dist/src/kits/os/validator-app.js +55 -0
- package/dist/src/kits/os/wm.css +115 -0
- package/dist/src/kits/os/wm.js +111 -0
- package/dist/src/markdown.js +39 -0
- package/dist/src/motion.js +35 -0
- package/dist/src/page-html.js +196 -0
- package/dist/src/styles.js +25 -0
- package/dist/src/theme.js +99 -0
- package/dist/src/web-components/ds-chat.js +45 -0
- package/dist/ui_kits/aicat/README.md +7 -0
- package/dist/ui_kits/aicat/app.js +156 -0
- package/dist/ui_kits/aicat/index.html +26 -0
- package/dist/ui_kits/aicat/sample-square.png +0 -0
- package/dist/ui_kits/aicat/sample-svg.svg +1 -0
- package/dist/ui_kits/aicat/sample.pdf +32 -0
- package/dist/ui_kits/blog/README.md +3 -0
- package/dist/ui_kits/blog/index.html +90 -0
- package/dist/ui_kits/chat/README.md +5 -0
- package/dist/ui_kits/chat/app.js +110 -0
- package/dist/ui_kits/chat/index.html +26 -0
- package/dist/ui_kits/chat/sample-square.png +0 -0
- package/dist/ui_kits/chat/sample-svg.svg +1 -0
- package/dist/ui_kits/chat/sample.pdf +32 -0
- package/dist/ui_kits/community/app.js +134 -0
- package/dist/ui_kits/community/index.html +24 -0
- package/dist/ui_kits/dashboard/app.js +92 -0
- package/dist/ui_kits/dashboard/index.html +26 -0
- package/dist/ui_kits/docs/README.md +3 -0
- package/dist/ui_kits/docs/index.html +123 -0
- package/dist/ui_kits/error_404/app.js +56 -0
- package/dist/ui_kits/error_404/index.html +26 -0
- package/dist/ui_kits/file_browser/README.md +48 -0
- package/dist/ui_kits/file_browser/app.js +231 -0
- package/dist/ui_kits/file_browser/index.html +33 -0
- package/dist/ui_kits/gallery/app.js +121 -0
- package/dist/ui_kits/gallery/index.html +26 -0
- package/dist/ui_kits/homepage/README.md +7 -0
- package/dist/ui_kits/homepage/app.js +167 -0
- package/dist/ui_kits/homepage/index.html +46 -0
- package/dist/ui_kits/project_page/README.md +3 -0
- package/dist/ui_kits/project_page/app.js +154 -0
- package/dist/ui_kits/project_page/index.html +45 -0
- package/dist/ui_kits/search/app.js +107 -0
- package/dist/ui_kits/search/index.html +26 -0
- package/dist/ui_kits/settings/app.js +133 -0
- package/dist/ui_kits/settings/index.html +26 -0
- package/dist/ui_kits/signin/app.js +115 -0
- package/dist/ui_kits/signin/index.html +26 -0
- package/dist/ui_kits/slide_deck/app.js +174 -0
- package/dist/ui_kits/slide_deck/index.html +26 -0
- package/dist/ui_kits/system_primer/app.js +152 -0
- package/dist/ui_kits/system_primer/index.html +26 -0
- package/dist/ui_kits/terminal/app.js +150 -0
- package/dist/ui_kits/terminal/index.html +26 -0
- package/dist/vendor/webjsx/applyDiff.js +182 -0
- package/dist/vendor/webjsx/attributes.js +171 -0
- package/dist/vendor/webjsx/constants.js +4 -0
- package/dist/vendor/webjsx/createDOMElement.js +52 -0
- package/dist/vendor/webjsx/createElement.js +75 -0
- package/dist/vendor/webjsx/elementTags.js +115 -0
- package/dist/vendor/webjsx/factory.js +6 -0
- package/dist/vendor/webjsx/index.js +6 -0
- package/dist/vendor/webjsx/jsx-dev-runtime.js +2 -0
- package/dist/vendor/webjsx/jsx-runtime.js +30 -0
- package/dist/vendor/webjsx/jsx.js +2 -0
- package/dist/vendor/webjsx/package.json +39 -0
- package/dist/vendor/webjsx/renderSuspension.js +25 -0
- package/dist/vendor/webjsx/types.js +5 -0
- package/dist/vendor/webjsx/utils.js +84 -0
- package/package.json +1 -1
|
@@ -0,0 +1,368 @@
|
|
|
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, '&').replace(/</g, '<').replace(/>/g, '>')
|
|
10
|
+
.replace(/"/g, '"').replace(/'/g, ''');
|
|
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'),
|
|
56
|
+
title: it.title || it.name,
|
|
57
|
+
sub: it.sub || it.desc || '',
|
|
58
|
+
meta: it.cta || it.meta || 'open ↗',
|
|
59
|
+
href: it.href || '#'
|
|
60
|
+
}));
|
|
61
|
+
}
|
|
62
|
+
|
|
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
|
+
});
|
|
158
|
+
}
|
|
159
|
+
|
|
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() {
|
|
191
|
+
const sb = home.sidebar || {};
|
|
192
|
+
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
|
+
);
|
|
224
|
+
}
|
|
225
|
+
|
|
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
|
+
export default {
|
|
357
|
+
render: async (ctx) => {
|
|
358
|
+
const site = ctx.readGlobal('site') || {};
|
|
359
|
+
const nav = ctx.readGlobal('navigation') || { links: [] };
|
|
360
|
+
const homeDoc = ctx.read('pages').docs.find(p => p.id === 'home');
|
|
361
|
+
if (!homeDoc) throw new Error('site/content/pages/home.yaml missing or has no id: home');
|
|
362
|
+
|
|
363
|
+
return [{
|
|
364
|
+
path: 'index.html',
|
|
365
|
+
html: html({ site, nav, home: homeDoc })
|
|
366
|
+
}];
|
|
367
|
+
}
|
|
368
|
+
};
|
package/dist/sitemap.xml
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
3
|
+
<url><loc>https://anentrypoint.github.io/design/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
|
|
4
|
+
<url><loc>https://anentrypoint.github.io/design/ui_kits/homepage/</loc><changefreq>weekly</changefreq><priority>0.9</priority></url>
|
|
5
|
+
<url><loc>https://anentrypoint.github.io/design/ui_kits/project_page/</loc><changefreq>weekly</changefreq><priority>0.9</priority></url>
|
|
6
|
+
<url><loc>https://anentrypoint.github.io/design/ui_kits/docs/</loc><changefreq>weekly</changefreq><priority>0.8</priority></url>
|
|
7
|
+
<url><loc>https://anentrypoint.github.io/design/ui_kits/blog/</loc><changefreq>weekly</changefreq><priority>0.8</priority></url>
|
|
8
|
+
<url><loc>https://anentrypoint.github.io/design/ui_kits/chat/</loc><changefreq>weekly</changefreq><priority>0.8</priority></url>
|
|
9
|
+
<url><loc>https://anentrypoint.github.io/design/ui_kits/aicat/</loc><changefreq>weekly</changefreq><priority>0.8</priority></url>
|
|
10
|
+
<url><loc>https://anentrypoint.github.io/design/slides/</loc><changefreq>monthly</changefreq><priority>0.6</priority></url>
|
|
11
|
+
<url><loc>https://anentrypoint.github.io/design/preview/buttons.html</loc><priority>0.5</priority></url>
|
|
12
|
+
<url><loc>https://anentrypoint.github.io/design/preview/colors-core.html</loc><priority>0.5</priority></url>
|
|
13
|
+
<url><loc>https://anentrypoint.github.io/design/preview/colors-lore.html</loc><priority>0.5</priority></url>
|
|
14
|
+
<url><loc>https://anentrypoint.github.io/design/preview/colors-semantic.html</loc><priority>0.5</priority></url>
|
|
15
|
+
<url><loc>https://anentrypoint.github.io/design/preview/dateline.html</loc><priority>0.5</priority></url>
|
|
16
|
+
<url><loc>https://anentrypoint.github.io/design/preview/header.html</loc><priority>0.5</priority></url>
|
|
17
|
+
<url><loc>https://anentrypoint.github.io/design/preview/icons-unicode.html</loc><priority>0.5</priority></url>
|
|
18
|
+
<url><loc>https://anentrypoint.github.io/design/preview/index-row.html</loc><priority>0.5</priority></url>
|
|
19
|
+
<url><loc>https://anentrypoint.github.io/design/preview/inputs.html</loc><priority>0.5</priority></url>
|
|
20
|
+
<url><loc>https://anentrypoint.github.io/design/preview/manifesto.html</loc><priority>0.5</priority></url>
|
|
21
|
+
<url><loc>https://anentrypoint.github.io/design/preview/rules.html</loc><priority>0.5</priority></url>
|
|
22
|
+
<url><loc>https://anentrypoint.github.io/design/preview/spacing.html</loc><priority>0.5</priority></url>
|
|
23
|
+
<url><loc>https://anentrypoint.github.io/design/preview/stamps.html</loc><priority>0.5</priority></url>
|
|
24
|
+
<url><loc>https://anentrypoint.github.io/design/preview/stamps-lore.html</loc><priority>0.5</priority></url>
|
|
25
|
+
<url><loc>https://anentrypoint.github.io/design/preview/theme-ink.html</loc><priority>0.5</priority></url>
|
|
26
|
+
<url><loc>https://anentrypoint.github.io/design/preview/type-display.html</loc><priority>0.5</priority></url>
|
|
27
|
+
<url><loc>https://anentrypoint.github.io/design/preview/type-mono.html</loc><priority>0.5</priority></url>
|
|
28
|
+
<url><loc>https://anentrypoint.github.io/design/preview/type-prose.html</loc><priority>0.5</priority></url>
|
|
29
|
+
<url><loc>https://anentrypoint.github.io/design/preview/type-scale.html</loc><priority>0.5</priority></url>
|
|
30
|
+
<url><loc>https://anentrypoint.github.io/design/preview/wordmarks.html</loc><priority>0.5</priority></url>
|
|
31
|
+
</urlset>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
const ICON_PREV = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg>';
|
|
2
|
+
const ICON_NEXT = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>';
|
|
3
|
+
|
|
4
|
+
export function buildOverlay({ onPrev, onNext, onReset }) {
|
|
5
|
+
const overlay = document.createElement('div');
|
|
6
|
+
overlay.className = 'overlay export-hidden';
|
|
7
|
+
overlay.setAttribute('role', 'toolbar');
|
|
8
|
+
overlay.setAttribute('aria-label', 'Deck controls');
|
|
9
|
+
overlay.innerHTML = `
|
|
10
|
+
<button class="btn prev" type="button" aria-label="Previous slide" title="Previous (←)">${ICON_PREV}</button>
|
|
11
|
+
<span class="count" aria-live="polite"><span class="current">1</span><span class="sep">/</span><span class="total">1</span></span>
|
|
12
|
+
<button class="btn next" type="button" aria-label="Next slide" title="Next (→)">${ICON_NEXT}</button>
|
|
13
|
+
<span class="divider"></span>
|
|
14
|
+
<button class="btn reset" type="button" aria-label="Reset to first slide" title="Reset (R)">Reset<span class="kbd">R</span></button>
|
|
15
|
+
`;
|
|
16
|
+
overlay.querySelector('.prev').addEventListener('click', onPrev);
|
|
17
|
+
overlay.querySelector('.next').addEventListener('click', onNext);
|
|
18
|
+
overlay.querySelector('.reset').addEventListener('click', onReset);
|
|
19
|
+
return overlay;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export function buildTapzones({ onBack, onForward }) {
|
|
23
|
+
const tapzones = document.createElement('div');
|
|
24
|
+
tapzones.className = 'tapzones export-hidden';
|
|
25
|
+
tapzones.setAttribute('aria-hidden', 'true');
|
|
26
|
+
const tzBack = document.createElement('div');
|
|
27
|
+
tzBack.className = 'tapzone tapzone--back';
|
|
28
|
+
const tzMid = document.createElement('div');
|
|
29
|
+
tzMid.className = 'tapzone tapzone--mid';
|
|
30
|
+
tzMid.style.pointerEvents = 'none';
|
|
31
|
+
const tzFwd = document.createElement('div');
|
|
32
|
+
tzFwd.className = 'tapzone tapzone--fwd';
|
|
33
|
+
tzBack.addEventListener('click', onBack);
|
|
34
|
+
tzFwd.addEventListener('click', onForward);
|
|
35
|
+
tapzones.append(tzBack, tzMid, tzFwd);
|
|
36
|
+
return tapzones;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const KEY_HANDLERS = {
|
|
40
|
+
ArrowRight: (deck) => deck._go(deck._index + 1, 'keyboard'),
|
|
41
|
+
PageDown: (deck) => deck._go(deck._index + 1, 'keyboard'),
|
|
42
|
+
' ': (deck) => deck._go(deck._index + 1, 'keyboard'),
|
|
43
|
+
Spacebar: (deck) => deck._go(deck._index + 1, 'keyboard'),
|
|
44
|
+
ArrowLeft: (deck) => deck._go(deck._index - 1, 'keyboard'),
|
|
45
|
+
PageUp: (deck) => deck._go(deck._index - 1, 'keyboard'),
|
|
46
|
+
Home: (deck) => deck._go(0, 'keyboard'),
|
|
47
|
+
End: (deck) => deck._go(deck._slides.length - 1, 'keyboard'),
|
|
48
|
+
r: (deck) => deck._go(0, 'keyboard'),
|
|
49
|
+
R: (deck) => deck._go(0, 'keyboard')
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export function handleDeckKey(deck, e) {
|
|
53
|
+
const t = e.target;
|
|
54
|
+
if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return false;
|
|
55
|
+
if (e.metaKey || e.ctrlKey || e.altKey) return false;
|
|
56
|
+
const fn = KEY_HANDLERS[e.key];
|
|
57
|
+
if (fn) { fn(deck); return true; }
|
|
58
|
+
if (/^[0-9]$/.test(e.key)) {
|
|
59
|
+
const n = e.key === '0' ? 9 : parseInt(e.key, 10) - 1;
|
|
60
|
+
if (n < deck._slides.length) { deck._go(n, 'keyboard'); return true; }
|
|
61
|
+
}
|
|
62
|
+
return false;
|
|
63
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
export const STORAGE_PREFIX = 'deck-stage:slide:';
|
|
2
|
+
const VALIDATE_ATTR = 'no_overflowing_text,no_overlapping_text,slide_sized_text';
|
|
3
|
+
const pad2 = (n) => String(n).padStart(2, '0');
|
|
4
|
+
|
|
5
|
+
export function loadNotes(deckEl) {
|
|
6
|
+
const tag = document.getElementById('speaker-notes');
|
|
7
|
+
if (!tag) return [];
|
|
8
|
+
try {
|
|
9
|
+
const parsed = JSON.parse(tag.textContent || '[]');
|
|
10
|
+
return Array.isArray(parsed) ? parsed : [];
|
|
11
|
+
} catch (e) {
|
|
12
|
+
console.warn('[deck-stage] Failed to parse #speaker-notes JSON:', e);
|
|
13
|
+
return [];
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function restoreIndex(deckEl, slides) {
|
|
18
|
+
const storageKey = STORAGE_PREFIX + (location.pathname || '/');
|
|
19
|
+
try {
|
|
20
|
+
const raw = localStorage.getItem(storageKey);
|
|
21
|
+
if (raw == null) return 0;
|
|
22
|
+
const n = parseInt(raw, 10);
|
|
23
|
+
if (Number.isFinite(n) && n >= 0 && n < slides.length) return n;
|
|
24
|
+
} catch (e) { /* ignore */ }
|
|
25
|
+
return 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export function persistIndex(deckEl, index) {
|
|
29
|
+
const storageKey = STORAGE_PREFIX + (location.pathname || '/');
|
|
30
|
+
try { localStorage.setItem(storageKey, String(index)); } catch (e) {}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export function collectSlides(deckEl, slot) {
|
|
34
|
+
const assigned = slot.assignedElements({ flatten: true });
|
|
35
|
+
const slides = assigned.filter((el) => {
|
|
36
|
+
const tag = el.tagName;
|
|
37
|
+
return tag !== 'TEMPLATE' && tag !== 'SCRIPT' && tag !== 'STYLE';
|
|
38
|
+
});
|
|
39
|
+
slides.forEach((slide, i) => {
|
|
40
|
+
const n = i + 1;
|
|
41
|
+
let label = slide.getAttribute('data-label');
|
|
42
|
+
if (!label) {
|
|
43
|
+
const existing = slide.getAttribute('data-screen-label');
|
|
44
|
+
if (existing) label = existing.replace(/^\s*\d+\s*/, '').trim() || existing;
|
|
45
|
+
}
|
|
46
|
+
if (!label) {
|
|
47
|
+
const heading = slide.querySelector('h1, h2, h3, [data-title]');
|
|
48
|
+
if (heading) label = (heading.textContent || '').trim().slice(0, 40);
|
|
49
|
+
}
|
|
50
|
+
if (!label) label = 'Slide';
|
|
51
|
+
slide.setAttribute('data-screen-label', `${pad2(n)} ${label}`);
|
|
52
|
+
if (!slide.hasAttribute('data-om-validate')) slide.setAttribute('data-om-validate', VALIDATE_ATTR);
|
|
53
|
+
slide.setAttribute('data-deck-slide', String(i));
|
|
54
|
+
});
|
|
55
|
+
return slides;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export function applyIndex(deckEl, { index, prevIndex, slides, countEl, showOverlay = true, broadcast = true, reason = 'init', flashFn = null } = {}) {
|
|
59
|
+
if (!slides.length) return;
|
|
60
|
+
const prev = prevIndex == null ? -1 : prevIndex;
|
|
61
|
+
const curr = index;
|
|
62
|
+
slides.forEach((s, i) => {
|
|
63
|
+
if (i === curr) s.setAttribute('data-deck-active', '');
|
|
64
|
+
else s.removeAttribute('data-deck-active');
|
|
65
|
+
});
|
|
66
|
+
if (countEl) countEl.textContent = String(curr + 1);
|
|
67
|
+
persistIndex(deckEl, curr);
|
|
68
|
+
if (broadcast) {
|
|
69
|
+
try { window.postMessage({ slideIndexChanged: curr }, '*'); } catch (e) {}
|
|
70
|
+
deckEl.dispatchEvent(new CustomEvent('slidechange', {
|
|
71
|
+
detail: {
|
|
72
|
+
index: curr, previousIndex: prev, total: slides.length,
|
|
73
|
+
slide: slides[curr] || null,
|
|
74
|
+
previousSlide: prev >= 0 ? (slides[prev] || null) : null,
|
|
75
|
+
reason
|
|
76
|
+
},
|
|
77
|
+
bubbles: true, composed: true
|
|
78
|
+
}));
|
|
79
|
+
}
|
|
80
|
+
if (showOverlay && flashFn) flashFn();
|
|
81
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
export const STYLESHEET = `
|
|
2
|
+
:host {
|
|
3
|
+
position: fixed;
|
|
4
|
+
inset: 0;
|
|
5
|
+
display: block;
|
|
6
|
+
background: var(--panel-0, #000);
|
|
7
|
+
color: var(--panel-text, #fff);
|
|
8
|
+
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
}
|
|
11
|
+
.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
|
|
12
|
+
.canvas {
|
|
13
|
+
position: relative;
|
|
14
|
+
transform-origin: center center;
|
|
15
|
+
flex-shrink: 0;
|
|
16
|
+
background: var(--panel-1, #fff);
|
|
17
|
+
will-change: transform;
|
|
18
|
+
}
|
|
19
|
+
::slotted(*) {
|
|
20
|
+
position: absolute !important;
|
|
21
|
+
inset: 0 !important;
|
|
22
|
+
width: 100% !important;
|
|
23
|
+
height: 100% !important;
|
|
24
|
+
box-sizing: border-box !important;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
opacity: 0;
|
|
27
|
+
pointer-events: none;
|
|
28
|
+
visibility: hidden;
|
|
29
|
+
}
|
|
30
|
+
::slotted([data-deck-active]) { opacity: 1; pointer-events: auto; visibility: visible; }
|
|
31
|
+
.tapzones {
|
|
32
|
+
position: fixed; inset: 0; display: flex; z-index: 2147482000; pointer-events: none;
|
|
33
|
+
}
|
|
34
|
+
.tapzone { flex: 1; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
|
|
35
|
+
@media (hover: hover) and (pointer: fine) { .tapzones { display: none; } }
|
|
36
|
+
.overlay {
|
|
37
|
+
position: fixed;
|
|
38
|
+
left: 50%; bottom: 22px;
|
|
39
|
+
transform: translate(-50%, 6px) scale(0.92);
|
|
40
|
+
filter: blur(6px);
|
|
41
|
+
display: flex; align-items: center;
|
|
42
|
+
gap: 4px; padding: 4px;
|
|
43
|
+
background: #000; color: #fff;
|
|
44
|
+
border-radius: 999px;
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
font-feature-settings: "tnum" 1;
|
|
47
|
+
letter-spacing: 0.01em;
|
|
48
|
+
opacity: 0; pointer-events: none;
|
|
49
|
+
transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms ease;
|
|
50
|
+
transform-origin: center bottom;
|
|
51
|
+
z-index: 2147483000;
|
|
52
|
+
user-select: none;
|
|
53
|
+
}
|
|
54
|
+
.overlay[data-visible] {
|
|
55
|
+
opacity: 1; pointer-events: auto;
|
|
56
|
+
transform: translate(-50%, 0) scale(1);
|
|
57
|
+
filter: blur(0);
|
|
58
|
+
}
|
|
59
|
+
.btn {
|
|
60
|
+
appearance: none; -webkit-appearance: none;
|
|
61
|
+
background: transparent; border: 0; margin: 0; padding: 0;
|
|
62
|
+
color: inherit; font: inherit; cursor: default;
|
|
63
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
64
|
+
height: 28px; min-width: 28px;
|
|
65
|
+
border-radius: 999px;
|
|
66
|
+
color: rgba(255,255,255,0.72);
|
|
67
|
+
transition: background 140ms ease, color 140ms ease;
|
|
68
|
+
-webkit-tap-highlight-color: transparent;
|
|
69
|
+
}
|
|
70
|
+
.btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
|
|
71
|
+
.btn:active { background: rgba(255,255,255,0.18); }
|
|
72
|
+
.btn:focus, .btn:focus-visible { outline: none; }
|
|
73
|
+
.btn::-moz-focus-inner { border: 0; }
|
|
74
|
+
.btn svg { width: 14px; height: 14px; display: block; }
|
|
75
|
+
.btn.reset {
|
|
76
|
+
font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
|
|
77
|
+
padding: 0 10px 0 12px; gap: 6px;
|
|
78
|
+
color: rgba(255,255,255,0.72);
|
|
79
|
+
}
|
|
80
|
+
.btn.reset .kbd {
|
|
81
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
82
|
+
min-width: 16px; height: 16px; padding: 0 4px;
|
|
83
|
+
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
84
|
+
font-size: 12px; line-height: 1;
|
|
85
|
+
color: rgba(255,255,255,0.88);
|
|
86
|
+
background: rgba(255,255,255,0.12);
|
|
87
|
+
border-radius: 4px;
|
|
88
|
+
}
|
|
89
|
+
.count {
|
|
90
|
+
font-variant-numeric: tabular-nums;
|
|
91
|
+
color: #fff; font-weight: 500;
|
|
92
|
+
padding: 0 8px; min-width: 42px;
|
|
93
|
+
text-align: center; font-size: 14px;
|
|
94
|
+
}
|
|
95
|
+
.count .sep { color: rgba(255,255,255,0.45); margin: 0 3px; font-weight: 400; }
|
|
96
|
+
.count .total { color: rgba(255,255,255,0.55); }
|
|
97
|
+
.divider { width: 1px; height: 14px; background: rgba(255,255,255,0.18); margin: 0 2px; }
|
|
98
|
+
@media print {
|
|
99
|
+
:host { position: static; inset: auto; background: none; overflow: visible; color: inherit; }
|
|
100
|
+
.stage { position: static; display: block; }
|
|
101
|
+
.canvas { transform: none !important; width: auto !important; height: auto !important; background: none; will-change: auto; }
|
|
102
|
+
::slotted(*) {
|
|
103
|
+
position: relative !important;
|
|
104
|
+
inset: auto !important;
|
|
105
|
+
width: var(--deck-design-w) !important;
|
|
106
|
+
height: var(--deck-design-h) !important;
|
|
107
|
+
box-sizing: border-box !important;
|
|
108
|
+
opacity: 1 !important;
|
|
109
|
+
visibility: visible !important;
|
|
110
|
+
pointer-events: auto;
|
|
111
|
+
break-after: page; page-break-after: always; break-inside: avoid;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
}
|
|
114
|
+
::slotted(*:last-child) { break-after: auto; page-break-after: auto; }
|
|
115
|
+
.overlay, .tapzones { display: none !important; }
|
|
116
|
+
}
|
|
117
|
+
`;
|