anentrypoint-design 0.0.414 → 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 +62 -12
- 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
|
@@ -1,27 +1,44 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>manifesto preview</title>
|
|
3
4
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
4
5
|
<link rel="stylesheet" href="../app-shell.css">
|
|
5
6
|
<style>
|
|
6
|
-
body{padding:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
body{padding:var(--space-4);background:var(--panel-0);color:var(--panel-text);}
|
|
8
|
+
/* gap:14px and padding:22px are off-scale ON PURPOSE, and both are load-
|
|
9
|
+
bearing for what this specimen demonstrates. The principle cards are a
|
|
10
|
+
fixed 2-up of large saturated colour fields; the card gutter and the inset
|
|
11
|
+
from the card edge to its text are tuned against each OTHER (22px inset
|
|
12
|
+
reading as roughly 1.5x the 14px gutter) so the colour fields separate
|
|
13
|
+
cleanly at a glance. Snapping either onto the 8pt rhythm — 16px gutter or
|
|
14
|
+
24px inset — collapses that ratio toward 1:1 and the two cards start
|
|
15
|
+
reading as one banded block, which is exactly the thing the page exists to
|
|
16
|
+
show is wrong. Not drift; do not "fix" these to --space-3/--space-4. */
|
|
17
|
+
.wrap{margin-top:var(--space-3);display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
|
|
18
|
+
.prin{padding:22px;min-height:180px;border-radius:var(--r-3);display:flex;flex-direction:column;gap:var(--space-2-5);position:relative;overflow:hidden;}
|
|
19
|
+
.prin .num{font-family:var(--ff-mono);font-size:var(--fs-sm);font-weight:600;letter-spacing:0.12em;opacity:0.85;}
|
|
20
|
+
/* 30px is the UPPER BOUND of --fs-h3's clamp(22px, 2.4cqi, 30px), pinned as
|
|
21
|
+
a fixed value on purpose: these cards must render every principle at one
|
|
22
|
+
identical size regardless of card width, and a cqi-fluid token would size
|
|
23
|
+
each card's title to its own container, so the 2-up would show two
|
|
24
|
+
different title sizes side by side. A specimen demonstrating a scale must
|
|
25
|
+
not itself be fluid. Kept literal; it tracks --fs-h3's ceiling by hand. */
|
|
10
26
|
.prin .ttl{font-family:var(--ff-display);font-size:30px;font-weight:800;line-height:1.02;letter-spacing:-0.02em;}
|
|
11
|
-
.prin .sub{font-family:var(--ff-body);font-size:
|
|
12
|
-
.prin .tag{display:inline-block;align-self:flex-start;font-family:var(--ff-mono);font-size:
|
|
13
|
-
/* Saturated bg
|
|
14
|
-
.p1{background:var(--green);color
|
|
15
|
-
.p1 .tag{background
|
|
16
|
-
.p2{background:var(--purple);color
|
|
17
|
-
.p2 .tag{background
|
|
18
|
-
.p3{background:var(--sun);color
|
|
19
|
-
.p3 .tag{background
|
|
20
|
-
.
|
|
21
|
-
.p4
|
|
27
|
+
.prin .sub{font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:500;line-height:1.45;max-width:40ch;}
|
|
28
|
+
.prin .tag{display:inline-block;align-self:flex-start;font-family:var(--ff-mono);font-size:var(--fs-tiny);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;padding:var(--space-1) var(--space-2-5);border-radius:var(--r-pill);margin-top:auto;}
|
|
29
|
+
/* Saturated bg -> always white text (readable in any theme) */
|
|
30
|
+
.p1{background:var(--green);color:var(--on-color);}
|
|
31
|
+
.p1 .tag{background:var(--on-color);color:var(--green);}
|
|
32
|
+
.p2{background:var(--purple);color:var(--on-color);}
|
|
33
|
+
.p2 .tag{background:var(--on-color);color:var(--purple);}
|
|
34
|
+
.p3{background:var(--sun);color:var(--ink);}
|
|
35
|
+
.p3 .tag{background:var(--ink);color:var(--sun);}
|
|
36
|
+
/* --mascot fails WCAG AA against --on-color (#fff, 3.51:1); --ink passes, same fix as .p3/--sun above */
|
|
37
|
+
.p4{background:var(--mascot);color:var(--ink);}
|
|
38
|
+
.p4 .tag{background:var(--ink);color:var(--mascot);}
|
|
22
39
|
</style><script defer src="./motion-default.js"></script>
|
|
23
40
|
</head><body>
|
|
24
|
-
<div class="dateline"><span>247420
|
|
41
|
+
<div class="dateline"><span>247420 · MANIFESTO · 2018 -> FOREVER</span><span class="spread"></span><span>probably emerging</span></div>
|
|
25
42
|
<div class="wrap">
|
|
26
43
|
<div class="prin p1">
|
|
27
44
|
<div class="num">01 //</div>
|
|
@@ -48,5 +65,5 @@
|
|
|
48
65
|
<span class="tag">fun is a feature</span>
|
|
49
66
|
</div>
|
|
50
67
|
</div>
|
|
51
|
-
<p class="t-meta" style="margin-top:16px;font-style:italic">"an entrypoint is just a beginning. what matters is what you build once you're through the door." — b0gie, TechShaman
|
|
68
|
+
<p class="t-meta" style="margin-top:16px;font-style:italic">"an entrypoint is just a beginning. what matters is what you build once you're through the door." — b0gie, TechShaman</p>
|
|
52
69
|
</body></html>
|
|
@@ -1,84 +1,105 @@
|
|
|
1
|
+
// Preview entrance motion — SDK-native, zero network.
|
|
2
|
+
//
|
|
3
|
+
// WHY THIS DOES NOT LOAD animate.css: it used to inject
|
|
4
|
+
// https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css at
|
|
5
|
+
// runtime and apply `animate__*` classes. That contradicted the SDK's own
|
|
6
|
+
// documented position (src/motion.js:1-2: "the SDK historically wired
|
|
7
|
+
// animate.css for entry flourishes. We tone this down: no animate.css"), made
|
|
8
|
+
// every preview page depend on a third-party CDN for decoration, and was the
|
|
9
|
+
// sole cause of a cross-origin SecurityError when reading document.styleSheets
|
|
10
|
+
// (the CDN sheet is opaque to same-origin cssRules access). Worse, the link was
|
|
11
|
+
// injected even under `prefers-reduced-motion: reduce`, where no animation
|
|
12
|
+
// would ever play — pure privacy and latency cost for zero benefit.
|
|
13
|
+
//
|
|
14
|
+
// The replacement uses the SAME mechanism as the real SDK: a `data-anim`
|
|
15
|
+
// in -> ready transition driven by --dur-reveal / --ease / --ease-spring,
|
|
16
|
+
// wrapped in `prefers-reduced-motion: no-preference` so the animated block
|
|
17
|
+
// simply does not exist for users who asked for less motion.
|
|
1
18
|
(function () {
|
|
2
19
|
function reduced() {
|
|
3
20
|
return typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
4
21
|
}
|
|
5
22
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
|
|
12
|
-
document.head.appendChild(link);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function installTokens() {
|
|
23
|
+
// The entrance rule. Mirrors src/motion.js's [data-anim] contract rather than
|
|
24
|
+
// inventing a second one, so a preview animates exactly like a real SDK
|
|
25
|
+
// surface. --anim-delay is a per-element custom property (the stagger), which
|
|
26
|
+
// is why this is a stylesheet and not an inline transition string.
|
|
27
|
+
function installMotionStyle() {
|
|
16
28
|
if (document.getElementById('preview-motion-vars')) return;
|
|
17
29
|
var style = document.createElement('style');
|
|
18
30
|
style.id = 'preview-motion-vars';
|
|
19
31
|
style.textContent = [
|
|
20
|
-
'
|
|
21
|
-
'
|
|
32
|
+
'@media (prefers-reduced-motion: no-preference){',
|
|
33
|
+
'[data-anim="in"]{opacity:0;transform:translateY(10px);',
|
|
34
|
+
'transition:opacity var(--dur-reveal,560ms) var(--ease,cubic-bezier(.2,0,0,1)) var(--anim-delay,0ms),',
|
|
35
|
+
'transform var(--dur-reveal,560ms) var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) var(--anim-delay,0ms);}',
|
|
36
|
+
'[data-anim="ready"]{opacity:1;transform:translateY(0);}',
|
|
37
|
+
'}'
|
|
22
38
|
].join('');
|
|
23
39
|
document.head.appendChild(style);
|
|
24
40
|
}
|
|
25
41
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
42
|
+
// Stagger ceiling: past a handful of elements a per-index delay stops reading
|
|
43
|
+
// as rhythm and starts reading as lag, so it clamps (same shape as
|
|
44
|
+
// src/motion.js's Math.min(i, 6)).
|
|
45
|
+
var STAGGER_MS = 40;
|
|
46
|
+
var STAGGER_MAX = 8;
|
|
31
47
|
|
|
32
|
-
|
|
33
|
-
el.
|
|
34
|
-
if (
|
|
48
|
+
function animateEntry(el, cfg, i) {
|
|
49
|
+
if (!el || !el.dataset) return;
|
|
50
|
+
if (el.dataset.anim) return;
|
|
51
|
+
if (cfg.stagger) {
|
|
52
|
+
el.style.setProperty('--anim-delay', (Math.min(i, STAGGER_MAX) * STAGGER_MS) + 'ms');
|
|
53
|
+
}
|
|
54
|
+
el.dataset.anim = 'in';
|
|
55
|
+
// Flip on the next frame so the browser paints the `in` state first;
|
|
56
|
+
// setting both in one frame yields no transition at all.
|
|
57
|
+
requestAnimationFrame(function () {
|
|
58
|
+
requestAnimationFrame(function () { el.dataset.anim = 'ready'; });
|
|
59
|
+
});
|
|
35
60
|
}
|
|
36
61
|
|
|
37
62
|
function runList(selector, cfg) {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
animateEntry(el, cfg, i);
|
|
41
|
-
});
|
|
63
|
+
Array.prototype.slice.call(document.querySelectorAll(selector))
|
|
64
|
+
.forEach(function (el, i) { animateEntry(el, cfg, i); });
|
|
42
65
|
}
|
|
43
66
|
|
|
44
67
|
function runAllChildren(cfg) {
|
|
45
|
-
var nodes = Array.prototype.slice.call(document.body.children || []);
|
|
46
68
|
var n = 0;
|
|
47
|
-
|
|
48
|
-
if (!el || !el.
|
|
49
|
-
if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE') return;
|
|
69
|
+
Array.prototype.slice.call(document.body.children || []).forEach(function (el) {
|
|
70
|
+
if (!el || !el.tagName) return;
|
|
71
|
+
if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE' || el.tagName === 'LINK') return;
|
|
50
72
|
animateEntry(el, cfg, n);
|
|
51
73
|
n += 1;
|
|
52
74
|
});
|
|
53
75
|
}
|
|
54
76
|
|
|
77
|
+
// Per-page entrance targets. The effect vocabulary is gone: every entrance is
|
|
78
|
+
// now the one house reveal (fade + spring rise), because a preview page's job
|
|
79
|
+
// is to demonstrate the design system's motion, not a CDN library's presets.
|
|
55
80
|
function presetForPage(file) {
|
|
56
81
|
var presets = {
|
|
57
|
-
'buttons.html': [
|
|
58
|
-
'colors-core.html': [
|
|
59
|
-
'colors-lore.html': [
|
|
60
|
-
'colors-semantic.html': [
|
|
61
|
-
'dateline.html': [
|
|
62
|
-
'header.html': [
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
],
|
|
66
|
-
'
|
|
67
|
-
'
|
|
68
|
-
'
|
|
69
|
-
'
|
|
70
|
-
'
|
|
71
|
-
'
|
|
72
|
-
'
|
|
73
|
-
'
|
|
74
|
-
'
|
|
75
|
-
'type-
|
|
76
|
-
'
|
|
77
|
-
'type-prose.html': [{ selector: '.prose p', effect: 'fadeIn', duration: 'var(--motion-base)', stagger: true }],
|
|
78
|
-
'type-scale.html': [{ selector: 'body > div:nth-of-type(2) > div', effect: 'fadeIn', duration: 'var(--motion-fast)', stagger: true }],
|
|
79
|
-
'wordmarks.html': [{ selector: 'body > div:nth-of-type(2) > div', effect: 'fadeInUp', duration: 'var(--motion-fast)', stagger: true }]
|
|
82
|
+
'buttons.html': ['button, .btn, .btn-primary, .btn-ghost'],
|
|
83
|
+
'colors-core.html': ['.sw'],
|
|
84
|
+
'colors-lore.html': ['body > div:nth-of-type(2) > div'],
|
|
85
|
+
'colors-semantic.html': ['body > div:nth-of-type(2) > div'],
|
|
86
|
+
'dateline.html': ['.dateline'],
|
|
87
|
+
'header.html': ['.app-topbar', '.app-crumb'],
|
|
88
|
+
'icons-unicode.html': ['body > div:nth-of-type(2) > div'],
|
|
89
|
+
'index-row.html': ['.row'],
|
|
90
|
+
'inputs.html': ['.input, .t-label'],
|
|
91
|
+
'manifesto.html': ['.prin'],
|
|
92
|
+
'rules.html': ['.rule, .rule-double, .rule-dotted'],
|
|
93
|
+
'spacing.html': ['body > div:nth-of-type(2) > div'],
|
|
94
|
+
'stamps-lore.html': ['.stamp, .btn-stamp'],
|
|
95
|
+
'stamps.html': ['.stamp'],
|
|
96
|
+
'theme-ink.html': ['body > *'],
|
|
97
|
+
'type-display.html': ['.t-hero, .t-h1'],
|
|
98
|
+
'type-mono.html': ['body > div:nth-of-type(2) > div'],
|
|
99
|
+
'type-prose.html': ['.prose p'],
|
|
100
|
+
'type-scale.html': ['body > div:nth-of-type(2) > div'],
|
|
101
|
+
'wordmarks.html': ['body > div:nth-of-type(2) > div']
|
|
80
102
|
};
|
|
81
|
-
|
|
82
103
|
return presets[file] || null;
|
|
83
104
|
}
|
|
84
105
|
|
|
@@ -89,18 +110,17 @@
|
|
|
89
110
|
var preset = presetForPage(file);
|
|
90
111
|
|
|
91
112
|
if (!preset) {
|
|
92
|
-
runAllChildren({
|
|
113
|
+
runAllChildren({ stagger: true });
|
|
93
114
|
return;
|
|
94
115
|
}
|
|
95
116
|
|
|
96
|
-
preset.forEach(function (
|
|
97
|
-
runList(
|
|
117
|
+
preset.forEach(function (selector) {
|
|
118
|
+
runList(selector, { stagger: true });
|
|
98
119
|
});
|
|
99
120
|
}
|
|
100
121
|
|
|
101
122
|
document.addEventListener('DOMContentLoaded', function () {
|
|
102
|
-
|
|
103
|
-
installTokens();
|
|
123
|
+
installMotionStyle();
|
|
104
124
|
applyDefaults();
|
|
105
125
|
}, { once: true });
|
|
106
126
|
})();
|
package/dist/preview/rules.html
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>rules / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:
|
|
5
|
+
<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
|
|
5
6
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
+
<div class="dateline"><span>247420 · RULES · HAIRLINES</span><span class="spread"></span><span>3 VARIANTS</span></div>
|
|
7
8
|
<div style="margin-top:20px">
|
|
8
9
|
<div class="t-label">SINGLE (default separator)</div>
|
|
9
10
|
<hr class="rule" style="margin:6px 0 20px 0">
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>spacing / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:
|
|
5
|
+
<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
|
|
5
6
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
+
<div class="dateline"><span>247420 · SPACING · 8PT</span><span class="spread"></span><span>9 STEPS</span></div>
|
|
7
8
|
<div style="margin-top:14px;display:grid;gap:4px">
|
|
8
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
9
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
10
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
11
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
12
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
13
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
14
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
15
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
16
|
-
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:
|
|
9
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-1 · 4</span><div style="height:12px;width:4px;background:var(--panel-text)"></div></div>
|
|
10
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-2 · 8</span><div style="height:12px;width:8px;background:var(--panel-text)"></div></div>
|
|
11
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-3 · 16</span><div style="height:12px;width:16px;background:var(--panel-text)"></div></div>
|
|
12
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-4 · 24</span><div style="height:12px;width:24px;background:var(--panel-text)"></div></div>
|
|
13
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-5 · 32</span><div style="height:12px;width:32px;background:var(--panel-text)"></div></div>
|
|
14
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-6 · 48</span><div style="height:12px;width:48px;background:var(--panel-text)"></div></div>
|
|
15
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-7 · 64</span><div style="height:12px;width:64px;background:var(--panel-text)"></div></div>
|
|
16
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-8 · 96</span><div style="height:12px;width:96px;background:var(--panel-text)"></div></div>
|
|
17
|
+
<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-9 · 128</span><div style="height:12px;width:128px;background:var(--panel-text)"></div></div>
|
|
17
18
|
</div>
|
|
18
19
|
</body></html>
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>stamps lore / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:
|
|
5
|
+
<style>body{padding:var(--space-4);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
|
|
5
6
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
+
<div class="dateline"><span>247420 · STAMPS · LORE</span><span class="spread"></span><span>FULL SET</span></div>
|
|
7
8
|
<div style="margin-top:20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap">
|
|
8
9
|
<span class="stamp">247420</span>
|
|
9
10
|
<span class="stamp ink">approved</span>
|
|
@@ -12,7 +13,7 @@
|
|
|
12
13
|
<span class="stamp mascot" style="transform:rotate(3deg)">mascot sez hi</span>
|
|
13
14
|
</div>
|
|
14
15
|
<div style="margin-top:24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap">
|
|
15
|
-
<button class="btn-stamp">ship it
|
|
16
|
+
<button class="btn-stamp">ship it -></button>
|
|
16
17
|
<button class="btn-stamp acid">approved</button>
|
|
17
18
|
<button class="btn-stamp purple">420 mode</button>
|
|
18
19
|
<button class="btn-stamp mascot">wild card</button>
|
package/dist/preview/stamps.html
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>stamps / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:
|
|
5
|
+
<style>body{padding:var(--space-4);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
|
|
5
6
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
+
<div class="dateline"><span>247420 · COMPONENTS · STAMPS</span><span class="spread"></span><span>3 VARIANTS</span></div>
|
|
7
8
|
<div style="margin-top:20px;display:flex;gap:24px;align-items:center;flex-wrap:wrap">
|
|
8
9
|
<span class="stamp">247420</span>
|
|
9
10
|
<span class="stamp ink">approved</span>
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html
|
|
2
|
+
<html lang="en" class="ds-247420" data-theme="ink"><head><meta charset="utf-8">
|
|
3
|
+
<title>theme ink / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:0;margin:0;background
|
|
5
|
+
<style>body{padding:0;margin:0;background:var(--panel-0);color:var(--panel-text);min-height:200px;}</style><script defer src="./motion-default.js"></script>
|
|
5
6
|
</head><body data-theme="dark">
|
|
6
|
-
<div class="dateline" style="padding:20px"><span>247420
|
|
7
|
+
<div class="dateline" style="padding:20px"><span>247420 · THEME · INK MODE</span><span class="spread"></span><span>DEFAULT FOR DOCS · TOOLS</span></div>
|
|
7
8
|
<div style="padding:0 20px 20px 20px">
|
|
8
|
-
<h2 style="font-family:var(--ff-display);font-size:40px;margin:14px 0 6px 0;color
|
|
9
|
+
<h2 style="font-family:var(--ff-display);font-size:40px;margin:14px 0 6px 0;color:var(--panel-text)">gm runs in the dark</h2>
|
|
9
10
|
<p class="t-meta" style="color:var(--panel-text-3)">ink mode inverts paper/ink; acid stays the same; border becomes paper.</p>
|
|
10
11
|
<div style="margin-top:16px;display:flex;gap:12px;align-items:center">
|
|
11
|
-
<button class="btn" style="color
|
|
12
|
-
<button class="btn-stamp acid">ship it
|
|
12
|
+
<button class="btn" style="color:var(--panel-text)">read source</button>
|
|
13
|
+
<button class="btn-stamp acid">ship it -></button>
|
|
13
14
|
</div>
|
|
14
15
|
</div>
|
|
15
16
|
</body></html>
|
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>type display / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:
|
|
5
|
+
<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}
|
|
6
|
+
.t-hero,.t-h1{overflow-wrap:anywhere;word-break:break-word;}
|
|
7
|
+
/* 48px/32px are narrow-viewport CAPS on the fluid display tokens, and there is
|
|
8
|
+
no --fs-* rung they could use: every display tier (--fs-hero, --fs-h1) is a
|
|
9
|
+
clamp() whose own lower bound is what runs at this width, and the point of
|
|
10
|
+
this override is to come in BELOW that bound so the specimen's oversized
|
|
11
|
+
display type does not overflow a 640px screen. A fixed rung cannot express
|
|
12
|
+
"smaller than the token's own floor". Kept literal deliberately. */
|
|
13
|
+
@media (max-width:640px){.t-hero{font-size:48px !important;}.t-h1{font-size:32px !important;}}</style><script defer src="./motion-default.js"></script>
|
|
5
14
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
15
|
+
<div class="dateline"><span>247420 · TYPE · DISPLAY</span><span class="spread"></span><span>SYSTEM SANS</span></div>
|
|
7
16
|
<div style="margin-top:20px">
|
|
8
17
|
<div class="t-hero" style="font-size:96px">farts generally</div>
|
|
9
|
-
<div class="t-micro" style="margin-top:8px">HERO /
|
|
18
|
+
<div class="t-micro" style="margin-top:8px">HERO / 96px · system-ui · letter-spacing -0.02em</div>
|
|
10
19
|
</div>
|
|
11
20
|
<hr class="rule" style="margin-top:16px">
|
|
12
21
|
<div style="margin-top:16px">
|
|
13
22
|
<div class="t-h1" style="font-size:56px">gm. it's 4:20 somewhere.</div>
|
|
14
|
-
<div class="t-micro" style="margin-top:8px">H1 /
|
|
23
|
+
<div class="t-micro" style="margin-top:8px">H1 / 56px</div>
|
|
15
24
|
</div>
|
|
16
25
|
</body></html>
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>type mono / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:
|
|
5
|
+
<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
|
|
5
6
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
+
<div class="dateline"><span>247420 · TYPE · MONO</span><span class="spread"></span><span>UI-MONOSPACE</span></div>
|
|
7
8
|
<div style="margin-top:16px;display:grid;gap:10px">
|
|
8
9
|
<div><span class="t-label">LABEL / 12PX CAPS · TRACKED 0.14EM</span></div>
|
|
9
|
-
<div class="t-body">body
|
|
10
|
+
<div class="t-body">body · 16px regular — the default UI voice. it should feel like a terminal with better table manners.</div>
|
|
10
11
|
<div class="t-meta">meta · 12px · var(--panel-text-3) — timestamps, breadcrumbs, versions, commit hashes</div>
|
|
11
12
|
<div class="t-micro">MICRO · 10PX · CORNERS AND DATELINES</div>
|
|
12
13
|
<div><code>code · 14px · hairline box</code> — inline</div>
|
|
13
|
-
<div class="t-h3">h3
|
|
14
|
+
<div class="t-h3">h3 · mono 28px / medium</div>
|
|
14
15
|
</div>
|
|
15
16
|
</body></html>
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
3
|
-
<link rel="stylesheet" href="../
|
|
4
|
-
<
|
|
5
|
-
</
|
|
6
|
-
|
|
7
|
-
<
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>type prose / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
4
|
+
<link rel="stylesheet" href="../app-shell.css">
|
|
5
|
+
<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
|
|
6
|
+
</head><!-- lint-dead-controls:allow — specimen markup: this page exists to show what the component LOOKS like in isolation, so its anchors have nowhere real to point. Not a navigable surface. -->
|
|
7
|
+
<body>
|
|
8
|
+
<div class="dateline"><span>247420 · TYPE · PROSE</span><span class="spread"></span><span>SANS · LONG-FORM</span></div>
|
|
9
|
+
<div class="ds-prose" style="margin-top:16px">
|
|
10
|
+
<p>we make things. some of them work. a few of them become the future. we don't know which is which until later. the point is to ship — to put something into the world that didn't exist yesterday — and then pay attention to what happens next.</p>
|
|
11
|
+
<p>this is the <a href="#">long-form voice</a>. quiet sans, generous line-height, designed for reading without flourish.</p>
|
|
11
12
|
<!-- lint-dead-controls:allow specimen -->
|
|
13
|
+
</div>
|
|
12
14
|
</body></html>
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>type scale / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:
|
|
5
|
+
<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
|
|
5
6
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
+
<div class="dateline"><span>247420 · TYPE · SCALE</span><span class="spread"></span><span>11 STEPS</span></div>
|
|
7
8
|
<div style="margin-top:14px;display:grid;grid-template-columns:120px 1fr;gap:8px 16px;align-items:baseline;font-family:var(--ff-mono)">
|
|
8
9
|
<div class="t-micro">HERO · 128</div><div style="font-family:var(--ff-display);font-size:48px;line-height:1">Aa</div>
|
|
9
10
|
<div class="t-micro">H1 · 72</div><div style="font-family:var(--ff-display);font-size:36px;line-height:1">Aa</div>
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>wordmarks / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>body{padding:
|
|
5
|
+
<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}
|
|
6
|
+
.preview-grid > *{min-width:0;overflow:hidden;}
|
|
7
|
+
@media (max-width:640px){.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}</style><script defer src="./motion-default.js"></script>
|
|
5
8
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
-
<div style="margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px">
|
|
9
|
+
<div class="dateline"><span>247420 · BRAND · WORDMARKS</span><span class="spread"></span><span>TYPOGRAPHIC ONLY</span></div>
|
|
10
|
+
<div style="margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px" class="preview-grid">
|
|
8
11
|
<div style="padding:16px;display:flex;align-items:center;justify-content:center;min-height:80px">
|
|
9
|
-
<span style="font-family:var(--ff-mono);font-size:28px;font-weight:500"
|
|
12
|
+
<span style="font-family:var(--ff-mono);font-size:28px;font-weight:500">gm</span>
|
|
10
13
|
</div>
|
|
11
14
|
<div style="padding:16px;display:flex;align-items:center;justify-content:center;min-height:80px">
|
|
12
|
-
<span style="font-family:var(--ff-mono);font-size:24px;font-weight:500"
|
|
15
|
+
<span style="font-family:var(--ff-mono);font-size:24px;font-weight:500">flatspace</span>
|
|
13
16
|
</div>
|
|
14
17
|
<div style="padding:16px;display:flex;align-items:center;justify-content:center;min-height:80px">
|
|
15
|
-
<span style="font-family:var(--ff-mono);font-size:24px;font-weight:500"
|
|
18
|
+
<span style="font-family:var(--ff-mono);font-size:24px;font-weight:500">-> thebird</span>
|
|
16
19
|
</div>
|
|
17
20
|
<div style="padding:16px;display:flex;align-items:center;justify-content:center;min-height:80px">
|
|
18
21
|
<span style="font-family:var(--ff-mono);font-size:24px;font-weight:500">spoint</span>
|
|
@@ -9,8 +9,10 @@ keywords:
|
|
|
9
9
|
- "tokens"
|
|
10
10
|
- "247420"
|
|
11
11
|
- "anentrypoint"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
# Brand accent gradient — mirrors the canonical palette (--green → --green-2).
|
|
13
|
+
# YAML is content config, not CSS, so it cannot use var(); keep in sync with colors_and_type.css.
|
|
14
|
+
accent_from: "#247420"
|
|
15
|
+
accent_to: "#3A9A34"
|
|
16
|
+
glyph: "·"
|
|
15
17
|
code: "072"
|
|
16
18
|
category: "web"
|
|
@@ -4,7 +4,7 @@ template: home
|
|
|
4
4
|
hero:
|
|
5
5
|
heading: freddie dashboard
|
|
6
6
|
subheading: full agent dashboard UI as SDK components
|
|
7
|
-
body: "all 14 freddie dashboard pages
|
|
7
|
+
body: "all 14 freddie dashboard pages, from sessions and tools to chat, models, cron, config, env, skills, projects, agents, analytics, batch, and gateway, exported from anentrypoint-design and composable in any webjsx app."
|
|
8
8
|
badges:
|
|
9
9
|
- label: 14 page components
|
|
10
10
|
- label: webjsx
|
|
@@ -79,7 +79,7 @@ examples:
|
|
|
79
79
|
cta: object map of all 14 page functions
|
|
80
80
|
- name: skillLabel
|
|
81
81
|
href: "#helpers"
|
|
82
|
-
cta: format gm:skill-name
|
|
82
|
+
cta: format gm:skill-name to readable label
|
|
83
83
|
- name: renderChatMessages
|
|
84
84
|
href: "#helpers"
|
|
85
85
|
cta: render message array into DOM element
|