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,28 +1,39 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
-
<
|
|
4
|
-
<link rel="stylesheet" href="../
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<div style="
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<
|
|
15
|
-
</
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
<button class="btn-primary" disabled style="opacity:0.5;cursor:not-allowed">disabled</button>
|
|
19
|
-
<button class="btn">
|
|
20
|
-
<span style="color:var(--panel-accent)">●</span>
|
|
21
|
-
<span>with icon</span>
|
|
22
|
-
</button>
|
|
23
|
-
<button class="btn" style="padding:5px 10px;font-size:14px">small</button>
|
|
24
|
-
<button class="btn" style="padding:10px 18px;font-size:14px">large</button>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<div style="font-family:var(--ff-mono);font-size:14px;color:var(--panel-text-2);margin-top:6px">primary · secondary · ghost — 6px radius, hover lightens, active darkens</div>
|
|
28
|
-
</body></html>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>247420 / components / buttons preview</title>
|
|
4
|
+
<link rel="stylesheet" href="../colors_and_type.css">
|
|
5
|
+
<link rel="stylesheet" href="../app-shell.css">
|
|
6
|
+
<style>body{padding:var(--space-4);background:var(--panel-0);color:var(--panel-text);}</style>
|
|
7
|
+
<script defer src="./motion-default.js"></script>
|
|
8
|
+
</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. -->
|
|
9
|
+
<body>
|
|
10
|
+
<div class="ds-demo-label" style="font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--fg-3)">247420 / components / buttons</div>
|
|
11
|
+
|
|
12
|
+
<!-- Variants — shared .ds-demo gallery cell (hairline box, flex-wrap, gap). -->
|
|
13
|
+
<div class="ds-demo">
|
|
14
|
+
<button class="btn-primary">ship it -></button>
|
|
15
|
+
<button class="btn">read source</button>
|
|
16
|
+
<button class="btn-ghost">cancel</button>
|
|
17
|
+
<a href="#" class="btn">link as button</a>
|
|
29
18
|
<!-- lint-dead-controls:allow specimen -->
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="ds-demo">
|
|
22
|
+
<button class="btn-primary" disabled>disabled</button>
|
|
23
|
+
<button class="btn">
|
|
24
|
+
<span class="ds-dot" style="color:var(--panel-accent)"></span>
|
|
25
|
+
<span>with icon</span>
|
|
26
|
+
</button>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<!-- Real size ladder (sm/md/lg) — heights snap to --ctl-sm/md/lg, no inline
|
|
30
|
+
padding overrides. Every variant honours the size class. -->
|
|
31
|
+
<div class="ds-demo">
|
|
32
|
+
<button class="btn btn-sm">small</button>
|
|
33
|
+
<button class="btn">medium</button>
|
|
34
|
+
<button class="btn btn-lg">large</button>
|
|
35
|
+
<button class="btn-primary btn-sm">sm primary</button>
|
|
36
|
+
<button class="btn-ghost btn-lg">lg ghost</button>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div class="ds-demo-desc" style="font-family:var(--ff-mono);margin-top:var(--space-2)">primary · secondary · ghost — size ladder sm/md/lg on the --ctl-* height scale</div>
|
|
40
|
+
</body></html>
|
|
@@ -1,16 +1,26 @@
|
|
|
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>colors core / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
5
|
<style>
|
|
5
|
-
body{padding:
|
|
6
|
-
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:
|
|
7
|
-
.sw{padding:
|
|
6
|
+
body{padding:var(--space-4);background:var(--panel-0);}
|
|
7
|
+
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2-75);margin-top:var(--space-3);}
|
|
8
|
+
.sw{padding:var(--space-3-5);min-height:140px;border-radius:var(--r-3);display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden;}
|
|
9
|
+
.sw .name,.sw .hex,.sw .tok{overflow-wrap:anywhere;}
|
|
10
|
+
@media (max-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
|
|
11
|
+
/* 24px is the UPPER BOUND of --fs-h4's clamp(19px, 1.8cqi, 24px), pinned as
|
|
12
|
+
a fixed literal on purpose. The swatch names must all render at one
|
|
13
|
+
identical size so the four colour fields read as a set; --fs-h4 is
|
|
14
|
+
cqi-fluid, so each swatch would size its own name to its own container
|
|
15
|
+
width and a 4-up would show four different title sizes. Measured: the
|
|
16
|
+
token resolves to 23.04px here, not 24px. A specimen demonstrating the
|
|
17
|
+
palette must not wobble with container width. Kept literal deliberately. */
|
|
8
18
|
.sw .name{font-family:var(--ff-display);font-size:24px;font-weight:700;letter-spacing:-0.01em;}
|
|
9
|
-
.sw .hex{font-family:var(--ff-mono);font-size:
|
|
10
|
-
.sw .tok{font-family:var(--ff-mono);font-size:
|
|
19
|
+
.sw .hex{font-family:var(--ff-mono);font-size:var(--fs-sm);font-weight:500;}
|
|
20
|
+
.sw .tok{font-family:var(--ff-mono);font-size:var(--fs-tiny);text-transform:uppercase;letter-spacing:0.14em;opacity:0.7;}
|
|
11
21
|
</style><script defer src="./motion-default.js"></script>
|
|
12
22
|
</head><body>
|
|
13
|
-
<div class="dateline"><span>247420
|
|
23
|
+
<div class="dateline"><span>247420 · COLORS · CORE</span><span class="spread"></span><span>04 SWATCHES</span></div>
|
|
14
24
|
<div class="grid">
|
|
15
25
|
<div class="sw" style="background:var(--panel-0);color:var(--panel-text)">
|
|
16
26
|
<div class="name">paper</div>
|
|
@@ -33,7 +43,7 @@
|
|
|
33
43
|
<div class="tok" style="opacity:0.8">--ink · warm near-black</div>
|
|
34
44
|
</div>
|
|
35
45
|
</div>
|
|
36
|
-
<div class="sw" style="background
|
|
46
|
+
<div class="sw" style="background:var(--green);color:var(--panel-0)">
|
|
37
47
|
<div class="name">green</div>
|
|
38
48
|
<div>
|
|
39
49
|
<div class="hex">#247420</div>
|
|
@@ -1,27 +1,36 @@
|
|
|
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>colors 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-3-5);background:var(--panel-0);color:var(--panel-text);}
|
|
6
|
+
.preview-grid > *{min-width:0;overflow:hidden;}
|
|
7
|
+
.preview-grid > *>*{overflow-wrap:anywhere;}
|
|
8
|
+
@media (max-width:640px){.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}</style><script defer src="./motion-default.js"></script>
|
|
5
9
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
-
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px">
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
<div class="dateline"><span>247420 · COLORS · LORE</span><span class="spread"></span><span>THE ACTUAL PALETTE</span></div>
|
|
11
|
+
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:16px" class="preview-grid">
|
|
12
|
+
<!-- Fixed tones, not --panel-0: these swatches paint a CONSTANT colour in every
|
|
13
|
+
theme, so a theme-relative text token flips underneath them. --panel-0 is
|
|
14
|
+
#0E0E12 in ink, which measured 1.15:1 on --purple. --ink and --paper are
|
|
15
|
+
constants and stay correct in all three themes. -->
|
|
16
|
+
<div style="background:var(--green);color:var(--ink);padding:20px;min-height:140px">
|
|
17
|
+
<div class="t-label" style="color:var(--ink)">MARIJUANA GREEN</div>
|
|
18
|
+
<div class="t-micro" style="margin-top:6px;color:var(--ink)">#247420</div>
|
|
19
|
+
<div class="t-micro" style="color:var(--ink)">--green · primary lore accent</div>
|
|
12
20
|
<div style="margin-top:14px;font-family:var(--ff-display);font-size:36px;line-height:1">24·74·20</div>
|
|
13
21
|
</div>
|
|
14
|
-
<div style="background
|
|
15
|
-
<div class="t-label" style="color:var(--
|
|
16
|
-
<div class="t-micro" style="margin-top:6px;color:var(--
|
|
17
|
-
<div class="t-micro" style="color:var(--
|
|
22
|
+
<div style="background:var(--purple);color:var(--paper);padding:20px;min-height:140px">
|
|
23
|
+
<div class="t-label" style="color:var(--paper)">MARIJUANA PURPLE</div>
|
|
24
|
+
<div class="t-micro" style="margin-top:6px;color:var(--paper)">#420247</div>
|
|
25
|
+
<div class="t-micro" style="color:var(--paper)">--purple · the ONE allowed purple</div>
|
|
18
26
|
<div style="margin-top:14px;font-family:var(--ff-display);font-size:36px;line-height:1">42·02·47</div>
|
|
19
27
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<div class="t-
|
|
23
|
-
<div class="t-micro" style="color
|
|
24
|
-
<div style="
|
|
28
|
+
<!-- --on-color (#fff) fails WCAG AA (3.51:1) against --mascot; --ink passes -->
|
|
29
|
+
<div style="background:var(--mascot);color:var(--ink);padding:20px;min-height:140px">
|
|
30
|
+
<div class="t-label" style="color:var(--ink)">MASCOT</div>
|
|
31
|
+
<div class="t-micro" style="margin-top:6px;color:var(--ink)">#FF2E84</div>
|
|
32
|
+
<div class="t-micro" style="color:var(--ink)">--mascot · magenta/mauve/pink · wild</div>
|
|
33
|
+
<div style="margin-top:14px;font-family:var(--ff-display);font-size:36px;line-height:1;color:var(--ink)">hi.</div>
|
|
25
34
|
</div>
|
|
26
35
|
</div>
|
|
27
36
|
<div class="t-meta" style="margin-top:12px">247420 (green) + 420247 (purple) — the lore pair. mascot pink used randomly/wildly on accent elements.</div>
|
|
@@ -1,22 +1,28 @@
|
|
|
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>colors semantic / 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
|
+
.preview-grid > *>*{overflow-wrap:anywhere;}
|
|
8
|
+
@media (max-width:640px){.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}</style><script defer src="./motion-default.js"></script>
|
|
5
9
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
-
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:16px">
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<div class="t-
|
|
10
|
+
<div class="dateline"><span>247420 · COLORS · SEMANTIC</span><span class="spread"></span><span>05 TOKENS</span></div>
|
|
11
|
+
<div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:16px" class="preview-grid">
|
|
12
|
+
<!-- --on-color (#fff, 4.32:1) AND --ink (#0e0e12, 4.45:1) both fail WCAG AA's
|
|
13
|
+
4.5:1 against --sky at this font size; only true black clears it -->
|
|
14
|
+
<div style="background:var(--sky);color:#000;padding:12px;min-height:90px">
|
|
15
|
+
<div class="t-label" style="color:#000">LINK</div>
|
|
16
|
+
<div class="t-micro" style="margin-top:4px;color:#000">#3A6EFF</div>
|
|
17
|
+
<div class="t-micro" style="color:#000">--sky · prose only</div>
|
|
12
18
|
</div>
|
|
13
|
-
<div style="background
|
|
14
|
-
<div class="t-label" style="color
|
|
15
|
-
<div class="t-micro" style="margin-top:4px;color
|
|
16
|
-
<div class="t-micro" style="color
|
|
19
|
+
<div style="background:var(--warn);color:var(--on-color);padding:12px;min-height:90px">
|
|
20
|
+
<div class="t-label" style="color:var(--on-color)">WARN</div>
|
|
21
|
+
<div class="t-micro" style="margin-top:4px;color:var(--on-color)">#E0241A</div>
|
|
22
|
+
<div class="t-micro" style="color:var(--on-color)">--warn · destructive</div>
|
|
17
23
|
</div>
|
|
18
|
-
<div style="background
|
|
19
|
-
<div class="t-label" style="color:var(--panel-0)">
|
|
24
|
+
<div style="background:var(--green);color:var(--panel-0);padding:12px;min-height:90px">
|
|
25
|
+
<div class="t-label" style="color:var(--panel-0)">ON</div>
|
|
20
26
|
<div class="t-micro" style="margin-top:4px;color:var(--panel-0)">#247420</div>
|
|
21
27
|
<div class="t-micro" style="color:var(--panel-0)">--live · success · up</div>
|
|
22
28
|
</div>
|
|
@@ -25,10 +31,10 @@
|
|
|
25
31
|
<div class="t-micro" style="margin-top:4px;color:var(--panel-0)">var(--panel-text-2)</div>
|
|
26
32
|
<div class="t-micro" style="color:var(--panel-0)">--ink-2 · secondary fg</div>
|
|
27
33
|
</div>
|
|
28
|
-
<div style="background:var(--panel-text-3);color
|
|
29
|
-
<div class="t-label" style="color
|
|
30
|
-
<div class="t-micro" style="margin-top:4px;color
|
|
31
|
-
<div class="t-micro" style="color
|
|
34
|
+
<div style="background:var(--panel-text-3);color:var(--on-color);padding:12px;min-height:90px">
|
|
35
|
+
<div class="t-label" style="color:var(--on-color)">INK-3</div>
|
|
36
|
+
<div class="t-micro" style="margin-top:4px;color:var(--on-color)">var(--panel-text-3)</div>
|
|
37
|
+
<div class="t-micro" style="color:var(--on-color)">--ink-3 · metadata</div>
|
|
32
38
|
</div>
|
|
33
39
|
</div>
|
|
34
40
|
</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>dateline / 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 · BRAND · DATELINE</span><span class="spread"></span><span>EVERY PAGE</span></div>
|
|
7
8
|
<div style="margin-top:18px">
|
|
8
|
-
<div class="dateline"><span>247420
|
|
9
|
+
<div class="dateline"><span>247420 · AN ENTRYPOINT</span><span>THE WORKS</span><span class="spread"></span><span>APR 20 2026</span></div>
|
|
9
10
|
</div>
|
|
10
11
|
<div style="margin-top:24px;background:var(--panel-text);padding:14px 20px">
|
|
11
12
|
<div class="dateline" style="color:var(--panel-0)">
|
|
12
|
-
<span style="color:var(--panel-0)">247420
|
|
13
|
+
<span style="color:var(--panel-0)">247420 · AN ENTRYPOINT</span>
|
|
13
14
|
<span style="color:var(--panel-0)">GM · DOCS</span>
|
|
14
15
|
<span class="spread" style=""></span>
|
|
15
16
|
<span style="color:var(--panel-0)">V0.4.1 · TUE</span>
|
|
@@ -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>dropzone / 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);} .row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);max-width:880px}</style><script defer src="./motion-default.js"></script>
|
|
5
6
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
+
<div class="dateline"><span>247420 · FILE-BROWSER · DROPZONE</span><span class="spread"></span><span>TONAL TARGET · NO DASHED BORDERS</span></div>
|
|
7
8
|
<div class="row-2" style="margin-top:14px">
|
|
8
9
|
<div>
|
|
9
10
|
<div class="t-meta" style="margin-bottom:6px">idle</div>
|
|
@@ -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>file grid / 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 · FILE-BROWSER · FILE-GRID</span><span class="spread"></span><span>STACK OF ROWS · ZEBRA · NEVER A BORDER</span></div>
|
|
7
8
|
<div class="panel" style="margin-top:14px;max-width:680px">
|
|
8
9
|
<div class="panel-head"><span>tigers/photos · 06 of 06</span><span style="color:var(--panel-text-3)">06 items</span></div>
|
|
9
10
|
<div class="ds-file-grid">
|
|
10
|
-
<div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir"
|
|
11
|
-
<div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir"
|
|
12
|
-
<div class="ds-file-row row active" data-file-type="image"><span class="ds-file-icon" data-file-type="image"
|
|
13
|
-
<div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image"
|
|
14
|
-
<div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image"
|
|
15
|
-
<div class="ds-file-row row" data-file-type="document"><span class="ds-file-icon" data-file-type="document"
|
|
11
|
+
<div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg></span><span class="title">raw</span><span class="ds-file-meta meta">—</span></div>
|
|
12
|
+
<div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg></span><span class="title">edits</span><span class="ds-file-meta meta">—</span></div>
|
|
13
|
+
<div class="ds-file-row row active" data-file-type="image"><span class="ds-file-icon" data-file-type="image"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg></span><span class="title">tiger-01.jpg</span><span class="ds-file-meta meta">2.1 MB · 2026.04.18</span></div>
|
|
14
|
+
<div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg></span><span class="title">tiger-02.jpg</span><span class="ds-file-meta meta">1.9 MB · 2026.04.18</span></div>
|
|
15
|
+
<div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg></span><span class="title">tiger-03.jpg</span><span class="ds-file-meta meta">2.4 MB · 2026.04.18</span></div>
|
|
16
|
+
<div class="ds-file-row row" data-file-type="document"><span class="ds-file-icon" data-file-type="document"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3v5h5"/><path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg></span><span class="title">contact-sheet.pdf</span><span class="ds-file-meta meta">412 KB · 2026.04.04</span></div>
|
|
16
17
|
</div>
|
|
17
18
|
</div>
|
|
18
19
|
<div class="t-meta" style="margin-top:12px">grid = panel + stack of rows. directories sort first. selected row gets the mint <code>.active</code> tone — no underline, no bold.</div>
|
|
@@ -1,20 +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>file row / 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 · FILE-BROWSER · FILE-ROW</span><span class="spread"></span><span>RAIL · ICON · NAME · META · ACTIONS</span></div>
|
|
7
8
|
<div class="ds-file-grid" style="margin-top:14px">
|
|
8
|
-
<div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir"
|
|
9
|
-
<div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image"
|
|
10
|
-
<div class="ds-file-row row" data-file-type="video"><span class="ds-file-icon" data-file-type="video"
|
|
11
|
-
<div class="ds-file-row row" data-file-type="audio"><span class="ds-file-icon" data-file-type="audio"
|
|
12
|
-
<div class="ds-file-row row" data-file-type="code"><span class="ds-file-icon" data-file-type="code"
|
|
13
|
-
<div class="ds-file-row row" data-file-type="text"><span class="ds-file-icon" data-file-type="text"
|
|
14
|
-
<div class="ds-file-row row" data-file-type="archive"><span class="ds-file-icon" data-file-type="archive"
|
|
15
|
-
<div class="ds-file-row row" data-file-type="document"><span class="ds-file-icon" data-file-type="document"
|
|
16
|
-
<div class="ds-file-row row" data-file-type="symlink"><span class="ds-file-icon" data-file-type="symlink"
|
|
17
|
-
<div class="ds-file-row row" data-file-type="other"><span class="ds-file-icon" data-file-type="other"
|
|
9
|
+
<div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg></span><span class="title">src</span><span class="ds-file-meta meta">—</span></div>
|
|
10
|
+
<div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg></span><span class="title">cover.png</span><span class="ds-file-meta meta">180 KB · 2026.04.18</span></div>
|
|
11
|
+
<div class="ds-file-row row" data-file-type="video"><span class="ds-file-icon" data-file-type="video"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m10 9 5 3-5 3z"/></svg></span><span class="title">reel.mp4</span><span class="ds-file-meta meta">2.3 MB · 2026.04.17</span></div>
|
|
12
|
+
<div class="ds-file-row row" data-file-type="audio"><span class="ds-file-icon" data-file-type="audio"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l10-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="16" cy="16" r="3"/></svg></span><span class="title">theme.mp3</span><span class="ds-file-meta meta">4.6 MB · 2026.04.16</span></div>
|
|
13
|
+
<div class="ds-file-row row" data-file-type="code"><span class="ds-file-icon" data-file-type="code"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg></span><span class="title">main.js</span><span class="ds-file-meta meta">4 KB · 2026.04.21</span></div>
|
|
14
|
+
<div class="ds-file-row row" data-file-type="text"><span class="ds-file-icon" data-file-type="text"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3v5h5"/><path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M8 13h8M8 17h8"/></svg></span><span class="title">README.md</span><span class="ds-file-meta meta">2 KB · 2026.04.21</span></div>
|
|
15
|
+
<div class="ds-file-row row" data-file-type="archive"><span class="ds-file-icon" data-file-type="archive"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v4M12 9v2M12 13v2"/></svg></span><span class="title">archive.zip</span><span class="ds-file-meta meta">17.4 MB · 2026.04.10</span></div>
|
|
16
|
+
<div class="ds-file-row row" data-file-type="document"><span class="ds-file-icon" data-file-type="document"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3v5h5"/><path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg></span><span class="title">spec.pdf</span><span class="ds-file-meta meta">402 KB · 2026.04.04</span></div>
|
|
17
|
+
<div class="ds-file-row row" data-file-type="symlink"><span class="ds-file-icon" data-file-type="symlink"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></span><span class="title">link-out</span><span class="ds-file-meta meta">-> /elsewhere</span></div>
|
|
18
|
+
<div class="ds-file-row row" data-file-type="other"><span class="ds-file-icon" data-file-type="other"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3v5h5"/><path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg></span><span class="title">.config</span><span class="ds-file-meta meta">220 B</span></div>
|
|
18
19
|
</div>
|
|
19
20
|
<div class="t-meta" style="margin-top:12px">a row per file. 4px tonal rail keyed by data-file-type — never hand-applied. icon + name + meta, optional actions on hover.</div>
|
|
20
21
|
</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>file toolbar / 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 · FILE-BROWSER · TOOLBAR</span><span class="spread"></span><span>BREADCRUMB · ACTIONS · COUNT</span></div>
|
|
7
8
|
|
|
8
9
|
<div style="margin-top:14px;max-width:880px">
|
|
9
10
|
<div class="ds-crumb-path" style="margin-bottom:10px">
|
|
@@ -1,5 +1,6 @@
|
|
|
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>file viewer / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
5
|
<style>body{padding:0;background:var(--panel-0);color:var(--panel-text);min-height:100vh;display:flex;align-items:center;justify-content:center}</style>
|
|
5
6
|
</head><body>
|
|
@@ -9,8 +10,8 @@
|
|
|
9
10
|
<span class="ds-preview-name">FileRow.js</span>
|
|
10
11
|
<span class="ds-preview-meta">code · 4.3 KB · 2026.04.21</span>
|
|
11
12
|
<span class="ds-preview-actions">
|
|
12
|
-
<button class="ds-file-act" title="download"
|
|
13
|
-
<button class="ds-file-act" title="close"
|
|
13
|
+
<button class="ds-file-act" title="download" aria-label="download"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="m5 12 7 7 7-7"/></svg></button>
|
|
14
|
+
<button class="ds-file-act" title="close" aria-label="close"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
|
|
14
15
|
</span>
|
|
15
16
|
</div>
|
|
16
17
|
<div class="ds-preview-body" data-file-type="code">
|
package/dist/preview/header.html
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
-
<
|
|
4
|
-
<link rel="stylesheet" href="../
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<a href="#">
|
|
14
|
-
<a href="#">source ↗</a>
|
|
15
|
-
</nav>
|
|
16
|
-
</header>
|
|
17
|
-
<div class="app-crumb">
|
|
18
|
-
<span>247420</span><span class="sep">›</span>
|
|
19
|
-
<span class="leaf">works</span>
|
|
20
|
-
</div>
|
|
21
|
-
<div style="padding:20px;font-family:var(--ff-mono);font-size:14px;color:var(--panel-text-2)">
|
|
22
|
-
sticky · 36px · panel-2 background · nav hover uses panel-hover · active uses panel-1
|
|
23
|
-
</div>
|
|
24
|
-
</body></html>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
|
|
3
|
+
<title>header preview</title>
|
|
4
|
+
<link rel="stylesheet" href="../colors_and_type.css">
|
|
5
|
+
<link rel="stylesheet" href="../app-shell.css">
|
|
6
|
+
<style>body{padding:0;margin:0;background:var(--panel-0);color:var(--panel-text);}</style>
|
|
7
|
+
<script defer src="./motion-default.js"></script>
|
|
8
|
+
</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. -->
|
|
9
|
+
<body>
|
|
10
|
+
<header class="app-topbar">
|
|
11
|
+
<span class="brand">247420<span class="slash"> / </span>an entrypoint</span>
|
|
12
|
+
<nav>
|
|
13
|
+
<a href="#" class="active">works</a>
|
|
25
14
|
<!-- lint-dead-controls:allow specimen -->
|
|
15
|
+
<a href="#">writing</a>
|
|
26
16
|
<!-- lint-dead-controls:allow specimen -->
|
|
17
|
+
<a href="#">manifesto</a>
|
|
27
18
|
<!-- lint-dead-controls:allow specimen -->
|
|
19
|
+
<a href="#">source -></a>
|
|
28
20
|
<!-- lint-dead-controls:allow specimen -->
|
|
21
|
+
</nav>
|
|
22
|
+
</header>
|
|
23
|
+
<div class="app-crumb">
|
|
24
|
+
<span>247420</span><span class="sep">›</span>
|
|
25
|
+
<span class="leaf">works</span>
|
|
26
|
+
</div>
|
|
27
|
+
<div style="padding:20px;font-family:var(--ff-mono);font-size:14px;color:var(--panel-text-2)">
|
|
28
|
+
sticky · 36px · panel-2 background · nav hover uses panel-hover · active uses panel-1
|
|
29
|
+
</div>
|
|
30
|
+
</body></html>
|
|
@@ -1,10 +1,13 @@
|
|
|
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>icons unicode / 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(4,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:14px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;font-family:var(--ff-mono)">
|
|
9
|
+
<div class="dateline"><span>247420 · ICONS · UNICODE</span><span class="spread"></span><span>THE FREE SET</span></div>
|
|
10
|
+
<div style="margin-top:14px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;font-family:var(--ff-mono)" class="preview-grid">
|
|
8
11
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">→</div><div class="t-micro" style="margin-top:4px">LINK</div></div>
|
|
9
12
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">↗</div><div class="t-micro" style="margin-top:4px">EXT</div></div>
|
|
10
13
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">↳</div><div class="t-micro" style="margin-top:4px">REPLY</div></div>
|
|
@@ -14,7 +17,7 @@
|
|
|
14
17
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">¶</div><div class="t-micro" style="margin-top:4px">PARA</div></div>
|
|
15
18
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">†</div><div class="t-micro" style="margin-top:4px">FN</div></div>
|
|
16
19
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">■</div><div class="t-micro" style="margin-top:4px">STOP</div></div>
|
|
17
|
-
<div style="padding:12px;text-align:center"><div style="font-size:22px">●</div><div class="t-micro" style="margin-top:4px">
|
|
20
|
+
<div style="padding:12px;text-align:center"><div style="font-size:22px">●</div><div class="t-micro" style="margin-top:4px">ON</div></div>
|
|
18
21
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">○</div><div class="t-micro" style="margin-top:4px">IDLE</div></div>
|
|
19
22
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">▲</div><div class="t-micro" style="margin-top:4px">UP</div></div>
|
|
20
23
|
<div style="padding:12px;text-align:center"><div style="font-size:22px">//</div><div class="t-micro" style="margin-top:4px">CODE</div></div>
|
|
@@ -1,25 +1,33 @@
|
|
|
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>index row / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
|
|
3
4
|
<link rel="stylesheet" href="../app-shell.css">
|
|
4
|
-
<style>
|
|
5
|
+
<style>
|
|
6
|
+
body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}
|
|
7
|
+
/* Page-local spacing lives here, not in style= attributes — an inline layout
|
|
8
|
+
string escapes every media query and the [data-density] rules
|
|
9
|
+
(scripts/lint-inline-styles.mjs). */
|
|
10
|
+
.ir-stack{margin-top:var(--space-3)}
|
|
11
|
+
.ir-note{margin-top:var(--space-3)}
|
|
12
|
+
</style><script defer src="./motion-default.js"></script>
|
|
5
13
|
</head><body>
|
|
6
|
-
<div class="dateline"><span>247420
|
|
7
|
-
<div
|
|
14
|
+
<div class="dateline"><span>247420 · COMPONENTS · INDEX-ROW</span><span class="spread"></span><span>CORE PRIMITIVE</span></div>
|
|
15
|
+
<div class="row-list ir-stack">
|
|
8
16
|
<div class="row">
|
|
9
|
-
<div class="row-code"
|
|
17
|
+
<div class="row-code">001</div>
|
|
10
18
|
<div class="row-title">gm</div>
|
|
11
|
-
<div class="row-meta">state machine · 3k
|
|
19
|
+
<div class="row-meta">state machine · 3k · shipping</div>
|
|
12
20
|
</div>
|
|
13
21
|
<div class="row">
|
|
14
|
-
<div class="row-code"
|
|
22
|
+
<div class="row-code">002</div>
|
|
15
23
|
<div class="row-title">zellous</div>
|
|
16
24
|
<div class="row-meta">push-to-talk · 2024</div>
|
|
17
25
|
</div>
|
|
18
26
|
<div class="row">
|
|
19
|
-
<div class="row-code"
|
|
27
|
+
<div class="row-code">003</div>
|
|
20
28
|
<div class="row-title">thebird</div>
|
|
21
29
|
<div class="row-meta">wip</div>
|
|
22
30
|
</div>
|
|
23
31
|
</div>
|
|
24
|
-
<div class="t-meta
|
|
32
|
+
<div class="t-meta ir-note">how we list projects. no dots. no colons. the hairline is the divider.</div>
|
|
25
33
|
</body></html>
|
package/dist/preview/inputs.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>inputs / 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 · INPUTS</span><span class="spread"></span><span>HAIRLINE ONLY</span></div>
|
|
7
8
|
<div style="margin-top:20px;max-width:480px;display:grid;gap:20px">
|
|
8
9
|
<div>
|
|
9
10
|
<div class="t-label">EMAIL</div>
|