anentrypoint-design 0.0.121 → 0.0.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (202) hide show
  1. package/README.md +253 -253
  2. package/app-shell.css +931 -594
  3. package/colors_and_type.css +226 -226
  4. package/community.css +817 -1222
  5. package/dist/247420.css +2202 -2084
  6. package/dist/247420.js +13 -13
  7. package/package.json +80 -80
  8. package/src/bootstrap.js +25 -25
  9. package/src/components/chat.js +199 -199
  10. package/src/components/community.js +190 -208
  11. package/src/components/content.js +269 -269
  12. package/src/components/editor-primitives.js +100 -0
  13. package/src/components/files-modals.js +107 -107
  14. package/src/components/files.js +118 -118
  15. package/src/components/freddie/helpers.js +50 -50
  16. package/src/components/freddie.js +33 -33
  17. package/src/components/shell.js +117 -117
  18. package/src/components/theme-toggle.js +70 -70
  19. package/src/components.js +59 -57
  20. package/src/debug.js +30 -30
  21. package/src/deck-stage.js +21 -21
  22. package/src/highlight.js +65 -32
  23. package/src/index.js +86 -86
  24. package/src/kits/os/about-app.js +52 -52
  25. package/src/kits/os/app-panes.css +152 -152
  26. package/src/kits/os/browser-app.js +58 -58
  27. package/src/kits/os/files-app.js +44 -44
  28. package/src/kits/os/freddie/helpers.js +59 -59
  29. package/src/kits/os/freddie/pages-chat.js +143 -143
  30. package/src/kits/os/freddie/pages-core.js +101 -101
  31. package/src/kits/os/freddie/pages-os.js +51 -51
  32. package/src/kits/os/freddie/pages-tools.js +183 -183
  33. package/src/kits/os/freddie/routes.js +24 -24
  34. package/src/kits/os/freddie-dashboard.css +51 -51
  35. package/src/kits/os/freddie-dashboard.js +101 -101
  36. package/src/kits/os/icons.js +17 -17
  37. package/src/kits/os/index.js +17 -17
  38. package/src/kits/os/launcher.css +61 -61
  39. package/src/kits/os/launcher.js +79 -79
  40. package/src/kits/os/monitor-app.js +34 -34
  41. package/src/kits/os/shell.js +214 -214
  42. package/src/kits/os/terminal-app.js +45 -45
  43. package/src/kits/os/theme.css +450 -450
  44. package/src/kits/os/validate.css +19 -19
  45. package/src/kits/os/validator-app.js +55 -55
  46. package/src/kits/os/wm.css +115 -115
  47. package/src/kits/os/wm.js +111 -111
  48. package/src/markdown.js +39 -39
  49. package/src/motion.js +35 -35
  50. package/src/page-html.js +196 -196
  51. package/src/styles.js +25 -25
  52. package/src/theme.js +99 -99
  53. package/src/web-components/ds-chat.js +116 -116
  54. package/dist/.nojekyll +0 -0
  55. package/dist/app-shell.css +0 -594
  56. package/dist/colors_and_type.css +0 -197
  57. package/dist/favicon.svg +0 -1
  58. package/dist/index.html +0 -308
  59. package/dist/preview/buttons.html +0 -28
  60. package/dist/preview/colors-core.html +0 -45
  61. package/dist/preview/colors-lore.html +0 -28
  62. package/dist/preview/colors-semantic.html +0 -34
  63. package/dist/preview/dateline.html +0 -19
  64. package/dist/preview/dropzone.html +0 -30
  65. package/dist/preview/file-grid.html +0 -19
  66. package/dist/preview/file-row.html +0 -20
  67. package/dist/preview/file-toolbar.html +0 -40
  68. package/dist/preview/file-viewer.html +0 -31
  69. package/dist/preview/header.html +0 -24
  70. package/dist/preview/icons-unicode.html +0 -26
  71. package/dist/preview/index-row.html +0 -25
  72. package/dist/preview/inputs.html +0 -22
  73. package/dist/preview/manifesto.html +0 -52
  74. package/dist/preview/motion-default.js +0 -106
  75. package/dist/preview/rules.html +0 -16
  76. package/dist/preview/spacing.html +0 -18
  77. package/dist/preview/stamps-lore.html +0 -20
  78. package/dist/preview/stamps.html +0 -14
  79. package/dist/preview/theme-ink.html +0 -15
  80. package/dist/preview/type-display.html +0 -16
  81. package/dist/preview/type-mono.html +0 -15
  82. package/dist/preview/type-prose.html +0 -11
  83. package/dist/preview/type-scale.html +0 -20
  84. package/dist/preview/wordmarks.html +0 -28
  85. package/dist/robots.txt +0 -8
  86. package/dist/site/content/globals/navigation.yaml +0 -5
  87. package/dist/site/content/globals/site.yaml +0 -16
  88. package/dist/site/content/pages/freddie.yaml +0 -88
  89. package/dist/site/content/pages/home.yaml +0 -190
  90. package/dist/site/theme.mjs +0 -368
  91. package/dist/sitemap.xml +0 -31
  92. package/dist/slides/deck-stage-overlay.js +0 -63
  93. package/dist/slides/deck-stage-state.js +0 -81
  94. package/dist/slides/deck-stage-style.js +0 -117
  95. package/dist/slides/deck-stage.js +0 -159
  96. package/dist/slides/index.html +0 -276
  97. package/dist/src/bootstrap.js +0 -25
  98. package/dist/src/components/chat.js +0 -199
  99. package/dist/src/components/community.js +0 -167
  100. package/dist/src/components/content.js +0 -213
  101. package/dist/src/components/files-modals.js +0 -107
  102. package/dist/src/components/files.js +0 -118
  103. package/dist/src/components/freddie/helpers.js +0 -50
  104. package/dist/src/components/freddie.js +0 -33
  105. package/dist/src/components/shell.js +0 -117
  106. package/dist/src/components/theme-toggle.js +0 -70
  107. package/dist/src/components.js +0 -52
  108. package/dist/src/debug.js +0 -30
  109. package/dist/src/deck-stage.js +0 -21
  110. package/dist/src/highlight.js +0 -32
  111. package/dist/src/index.js +0 -86
  112. package/dist/src/kits/os/about-app.js +0 -52
  113. package/dist/src/kits/os/app-panes.css +0 -152
  114. package/dist/src/kits/os/browser-app.js +0 -58
  115. package/dist/src/kits/os/files-app.js +0 -44
  116. package/dist/src/kits/os/freddie/helpers.js +0 -59
  117. package/dist/src/kits/os/freddie/pages-chat.js +0 -143
  118. package/dist/src/kits/os/freddie/pages-core.js +0 -101
  119. package/dist/src/kits/os/freddie/pages-os.js +0 -51
  120. package/dist/src/kits/os/freddie/pages-tools.js +0 -183
  121. package/dist/src/kits/os/freddie/routes.js +0 -24
  122. package/dist/src/kits/os/freddie-dashboard.css +0 -51
  123. package/dist/src/kits/os/freddie-dashboard.js +0 -101
  124. package/dist/src/kits/os/icons.js +0 -17
  125. package/dist/src/kits/os/index.js +0 -5
  126. package/dist/src/kits/os/launcher.css +0 -61
  127. package/dist/src/kits/os/launcher.js +0 -79
  128. package/dist/src/kits/os/monitor-app.js +0 -34
  129. package/dist/src/kits/os/shell.js +0 -214
  130. package/dist/src/kits/os/terminal-app.js +0 -45
  131. package/dist/src/kits/os/theme.css +0 -412
  132. package/dist/src/kits/os/validate.css +0 -19
  133. package/dist/src/kits/os/validator-app.js +0 -55
  134. package/dist/src/kits/os/wm.css +0 -115
  135. package/dist/src/kits/os/wm.js +0 -111
  136. package/dist/src/markdown.js +0 -39
  137. package/dist/src/motion.js +0 -35
  138. package/dist/src/page-html.js +0 -196
  139. package/dist/src/styles.js +0 -25
  140. package/dist/src/theme.js +0 -99
  141. package/dist/src/web-components/ds-chat.js +0 -45
  142. package/dist/ui_kits/aicat/README.md +0 -7
  143. package/dist/ui_kits/aicat/app.js +0 -156
  144. package/dist/ui_kits/aicat/index.html +0 -26
  145. package/dist/ui_kits/aicat/sample-square.png +0 -0
  146. package/dist/ui_kits/aicat/sample-svg.svg +0 -1
  147. package/dist/ui_kits/aicat/sample.pdf +0 -32
  148. package/dist/ui_kits/blog/README.md +0 -3
  149. package/dist/ui_kits/blog/index.html +0 -90
  150. package/dist/ui_kits/chat/README.md +0 -5
  151. package/dist/ui_kits/chat/app.js +0 -110
  152. package/dist/ui_kits/chat/index.html +0 -26
  153. package/dist/ui_kits/chat/sample-square.png +0 -0
  154. package/dist/ui_kits/chat/sample-svg.svg +0 -1
  155. package/dist/ui_kits/chat/sample.pdf +0 -32
  156. package/dist/ui_kits/community/app.js +0 -134
  157. package/dist/ui_kits/community/index.html +0 -24
  158. package/dist/ui_kits/dashboard/app.js +0 -92
  159. package/dist/ui_kits/dashboard/index.html +0 -26
  160. package/dist/ui_kits/docs/README.md +0 -3
  161. package/dist/ui_kits/docs/index.html +0 -123
  162. package/dist/ui_kits/error_404/app.js +0 -56
  163. package/dist/ui_kits/error_404/index.html +0 -26
  164. package/dist/ui_kits/file_browser/README.md +0 -48
  165. package/dist/ui_kits/file_browser/app.js +0 -231
  166. package/dist/ui_kits/file_browser/index.html +0 -33
  167. package/dist/ui_kits/gallery/app.js +0 -121
  168. package/dist/ui_kits/gallery/index.html +0 -26
  169. package/dist/ui_kits/homepage/README.md +0 -7
  170. package/dist/ui_kits/homepage/app.js +0 -167
  171. package/dist/ui_kits/homepage/index.html +0 -46
  172. package/dist/ui_kits/project_page/README.md +0 -3
  173. package/dist/ui_kits/project_page/app.js +0 -154
  174. package/dist/ui_kits/project_page/index.html +0 -45
  175. package/dist/ui_kits/search/app.js +0 -107
  176. package/dist/ui_kits/search/index.html +0 -26
  177. package/dist/ui_kits/settings/app.js +0 -133
  178. package/dist/ui_kits/settings/index.html +0 -26
  179. package/dist/ui_kits/signin/app.js +0 -115
  180. package/dist/ui_kits/signin/index.html +0 -26
  181. package/dist/ui_kits/slide_deck/app.js +0 -174
  182. package/dist/ui_kits/slide_deck/index.html +0 -26
  183. package/dist/ui_kits/system_primer/app.js +0 -152
  184. package/dist/ui_kits/system_primer/index.html +0 -26
  185. package/dist/ui_kits/terminal/app.js +0 -150
  186. package/dist/ui_kits/terminal/index.html +0 -26
  187. package/dist/vendor/webjsx/applyDiff.js +0 -182
  188. package/dist/vendor/webjsx/attributes.js +0 -154
  189. package/dist/vendor/webjsx/constants.js +0 -4
  190. package/dist/vendor/webjsx/createDOMElement.js +0 -52
  191. package/dist/vendor/webjsx/createElement.js +0 -75
  192. package/dist/vendor/webjsx/elementTags.js +0 -115
  193. package/dist/vendor/webjsx/factory.js +0 -6
  194. package/dist/vendor/webjsx/index.js +0 -6
  195. package/dist/vendor/webjsx/jsx-dev-runtime.js +0 -2
  196. package/dist/vendor/webjsx/jsx-runtime.js +0 -30
  197. package/dist/vendor/webjsx/jsx.js +0 -2
  198. package/dist/vendor/webjsx/package.json +0 -39
  199. package/dist/vendor/webjsx/renderSuspension.js +0 -25
  200. package/dist/vendor/webjsx/types.js +0 -5
  201. package/dist/vendor/webjsx/utils.js +0 -84
  202. package/src/components/overlays.js +0 -151
package/dist/preview/colors-semantic.html DELETED
@@ -1,34 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // COLORS // SEMANTIC</span><span class="spread"></span><span>05 TOKENS</span></div>
7
- <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:16px">
8
- <div style="background:#3A6EFF;color:#ffffff;padding:12px;min-height:90px">
9
- <div class="t-label" style="color:#ffffff">LINK</div>
10
- <div class="t-micro" style="margin-top:4px;color:#ffffff">#3A6EFF</div>
11
- <div class="t-micro" style="color:#ffffff">--link · prose only</div>
12
- </div>
13
- <div style="background:#E0241A;color:#ffffff;padding:12px;min-height:90px">
14
- <div class="t-label" style="color:#ffffff">WARN</div>
15
- <div class="t-micro" style="margin-top:4px;color:#ffffff">#E0241A</div>
16
- <div class="t-micro" style="color:#ffffff">--warn · destructive</div>
17
- </div>
18
- <div style="background:#247420;color:var(--panel-0);padding:12px;min-height:90px">
19
- <div class="t-label" style="color:var(--panel-0)">LIVE</div>
20
- <div class="t-micro" style="margin-top:4px;color:var(--panel-0)">#247420</div>
21
- <div class="t-micro" style="color:var(--panel-0)">--live · success · up</div>
22
- </div>
23
- <div style="background:var(--panel-text-2);color:var(--panel-0);padding:12px;min-height:90px">
24
- <div class="t-label" style="color:var(--panel-0)">INK-2</div>
25
- <div class="t-micro" style="margin-top:4px;color:var(--panel-0)">var(--panel-text-2)</div>
26
- <div class="t-micro" style="color:var(--panel-0)">--ink-2 · secondary fg</div>
27
- </div>
28
- <div style="background:var(--panel-text-3);color:#ffffff;padding:12px;min-height:90px">
29
- <div class="t-label" style="color:#ffffff">INK-3</div>
30
- <div class="t-micro" style="margin-top:4px;color:#ffffff">var(--panel-text-3)</div>
31
- <div class="t-micro" style="color:#ffffff">--ink-3 · metadata</div>
32
- </div>
33
- </div>
34
- </body></html>
package/dist/preview/dateline.html DELETED
@@ -1,19 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // BRAND // DATELINE</span><span class="spread"></span><span>EVERY PAGE</span></div>
7
- <div style="margin-top:18px">
8
- <div class="dateline"><span>247420 // AN ENTRYPOINT</span><span>THE WORKS</span><span class="spread"></span><span>APR 20 2026 · LIVE</span></div>
9
- </div>
10
- <div style="margin-top:24px;background:var(--panel-text);padding:14px 20px">
11
- <div class="dateline" style="color:var(--panel-0)">
12
- <span style="color:var(--panel-0)">247420 // AN ENTRYPOINT</span>
13
- <span style="color:var(--panel-0)">GM · DOCS</span>
14
- <span class="spread" style=""></span>
15
- <span style="color:var(--panel-0)">V0.4.1 · TUE</span>
16
- </div>
17
- </div>
18
- <div class="t-meta" style="margin-top:16px">the "dateline" — ASCII bar at top of every page. 3 or 4 slots, dotted spreader fills the gap.</div>
19
- </body></html>
package/dist/preview/dropzone.html DELETED
@@ -1,30 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);} .row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:880px}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // FILE-BROWSER // DROPZONE</span><span class="spread"></span><span>TONAL TARGET · NO DASHED BORDERS</span></div>
7
- <div class="row-2" style="margin-top:14px">
8
- <div>
9
- <div class="t-meta" style="margin-bottom:6px">idle</div>
10
- <div class="ds-dropzone">
11
- <div class="ds-dropzone-inner">
12
- <span class="ds-dropzone-glyph">⇪</span>
13
- <span class="ds-dropzone-label">drop files here to upload</span>
14
- <a class="btn">pick files</a>
15
- </div>
16
- </div>
17
- </div>
18
- <div>
19
- <div class="t-meta" style="margin-bottom:6px">dragover</div>
20
- <div class="ds-dropzone dragover">
21
- <div class="ds-dropzone-inner">
22
- <span class="ds-dropzone-glyph">⇪</span>
23
- <span class="ds-dropzone-label">release to upload</span>
24
- <a class="btn">pick files</a>
25
- </div>
26
- </div>
27
- </div>
28
- </div>
29
- <div class="t-meta" style="margin-top:12px">dropzone is a tonal panel that swaps to <code>--panel-select</code> on dragover. <strong>preventDefault must run on document, not just the zone</strong> or the browser will navigate to the dropped file.</div>
30
- </body></html>
package/dist/preview/file-grid.html DELETED
@@ -1,19 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <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
- <div class="panel" style="margin-top:14px;max-width:680px">
8
- <div class="panel-head"><span>tigers/photos · 06 of 06</span><span style="color:var(--panel-text-3)">06 items</span></div>
9
- <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">▣</span><span class="title">raw</span><span class="ds-file-meta meta">—</span></div>
11
- <div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir">▣</span><span class="title">edits</span><span class="ds-file-meta meta">—</span></div>
12
- <div class="ds-file-row row active" data-file-type="image"><span class="ds-file-icon" data-file-type="image">◰</span><span class="title">tiger-01.jpg</span><span class="ds-file-meta meta">2.1 MB · 2026.04.18</span></div>
13
- <div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image">◰</span><span class="title">tiger-02.jpg</span><span class="ds-file-meta meta">1.9 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">◰</span><span class="title">tiger-03.jpg</span><span class="ds-file-meta meta">2.4 MB · 2026.04.18</span></div>
15
- <div class="ds-file-row row" data-file-type="document"><span class="ds-file-icon" data-file-type="document">▢</span><span class="title">contact-sheet.pdf</span><span class="ds-file-meta meta">412 KB · 2026.04.04</span></div>
16
- </div>
17
- </div>
18
- <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>
19
- </body></html>
package/dist/preview/file-row.html DELETED
@@ -1,20 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // FILE-BROWSER // FILE-ROW</span><span class="spread"></span><span>RAIL · ICON · NAME · META · ACTIONS</span></div>
7
- <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">▣</span><span class="title">src</span><span class="ds-file-meta meta">—</span></div>
9
- <div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image">◰</span><span class="title">cover.png</span><span class="ds-file-meta meta">180 KB · 2026.04.18</span></div>
10
- <div class="ds-file-row row" data-file-type="video"><span class="ds-file-icon" data-file-type="video">▰</span><span class="title">reel.mp4</span><span class="ds-file-meta meta">2.3 MB · 2026.04.17</span></div>
11
- <div class="ds-file-row row" data-file-type="audio"><span class="ds-file-icon" data-file-type="audio">◎</span><span class="title">theme.mp3</span><span class="ds-file-meta meta">4.6 MB · 2026.04.16</span></div>
12
- <div class="ds-file-row row" data-file-type="code"><span class="ds-file-icon" data-file-type="code">⌘</span><span class="title">main.js</span><span class="ds-file-meta meta">4 KB · 2026.04.21</span></div>
13
- <div class="ds-file-row row" data-file-type="text"><span class="ds-file-icon" data-file-type="text">§</span><span class="title">README.md</span><span class="ds-file-meta meta">2 KB · 2026.04.21</span></div>
14
- <div class="ds-file-row row" data-file-type="archive"><span class="ds-file-icon" data-file-type="archive">◐</span><span class="title">archive.zip</span><span class="ds-file-meta meta">17.4 MB · 2026.04.10</span></div>
15
- <div class="ds-file-row row" data-file-type="document"><span class="ds-file-icon" data-file-type="document">▢</span><span class="title">spec.pdf</span><span class="ds-file-meta meta">402 KB · 2026.04.04</span></div>
16
- <div class="ds-file-row row" data-file-type="symlink"><span class="ds-file-icon" data-file-type="symlink">↗</span><span class="title">link-out</span><span class="ds-file-meta meta">→ /elsewhere</span></div>
17
- <div class="ds-file-row row" data-file-type="other"><span class="ds-file-icon" data-file-type="other">◌</span><span class="title">.config</span><span class="ds-file-meta meta">220 B</span></div>
18
- </div>
19
- <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
- </body></html>
package/dist/preview/file-toolbar.html DELETED
@@ -1,40 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // FILE-BROWSER // TOOLBAR</span><span class="spread"></span><span>BREADCRUMB · ACTIONS · COUNT</span></div>
7
-
8
- <div style="margin-top:14px;max-width:880px">
9
- <div class="ds-crumb-path" style="margin-bottom:10px">
10
- <button class="ds-crumb-seg">root</button>
11
- <span class="ds-crumb-sep">›</span>
12
- <button class="ds-crumb-seg">tigers</button>
13
- <span class="ds-crumb-sep">›</span>
14
- <button class="ds-crumb-seg leaf">photos</button>
15
- </div>
16
- <div class="ds-file-toolbar">
17
- <div class="ds-file-toolbar-left">
18
- <a class="btn">⇪ upload</a>
19
- <a class="btn">+ folder</a>
20
- </div>
21
- <div class="ds-file-toolbar-right">
22
- <span class="meta" style="color:var(--panel-text-3);font-family:var(--ff-mono);font-size:12px">06 items</span>
23
- </div>
24
- </div>
25
-
26
- <div class="ds-upload-progress" style="margin-top:14px">
27
- <div class="ds-upload-item">
28
- <span class="ds-upload-name">tiger-04.jpg</span>
29
- <span class="ds-upload-bar"><span class="ds-upload-fill" data-pct="64"></span></span>
30
- <span class="ds-upload-pct">64%</span>
31
- </div>
32
- <div class="ds-upload-item done">
33
- <span class="ds-upload-name">tiger-05.jpg</span>
34
- <span class="ds-upload-bar"><span class="ds-upload-fill" data-pct="100"></span></span>
35
- <span class="ds-upload-pct">ok</span>
36
- </div>
37
- </div>
38
- </div>
39
- <div class="t-meta" style="margin-top:12px">toolbar is one row, left-aligned actions and right-aligned count. breadcrumb above. upload progress below — tonal bar, no animation jitter.</div>
40
- </body></html>
package/dist/preview/file-viewer.html DELETED
@@ -1,31 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <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
- </head><body>
6
- <div class="ds-modal-backdrop" style="position:relative;width:100%;height:100vh">
7
- <div class="ds-modal ds-modal-preview">
8
- <div class="ds-modal-head ds-preview-head" data-file-type="code">
9
- <span class="ds-preview-name">FileRow.js</span>
10
- <span class="ds-preview-meta">code · 4.3 KB · 2026.04.21</span>
11
- <span class="ds-preview-actions">
12
- <button class="ds-file-act" title="download">↓</button>
13
- <button class="ds-file-act" title="close">✕</button>
14
- </span>
15
- </div>
16
- <div class="ds-preview-body" data-file-type="code">
17
- <pre class="ds-preview-code lang-js"><code class="language-js">export function FileRow({ name, type, size, modified, onOpen }) {
18
- return h('div', {
19
- class: 'ds-file-row',
20
- 'data-file-type': type,
21
- onclick: onOpen
22
- },
23
- FileIcon({ type }),
24
- h('span', { class: 'title' }, name),
25
- h('span', { class: 'meta' }, fmtFileSize(size))
26
- );
27
- }</code></pre>
28
- </div>
29
- </div>
30
- </div>
31
- </body></html>
package/dist/preview/header.html DELETED
@@ -1,24 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
3
- <link rel="stylesheet" href="../colors_and_type.css">
4
- <link rel="stylesheet" href="../app-shell.css">
5
- <style>body{padding:0;margin:0;background:var(--panel-0);color:var(--panel-text);}</style>
6
- <script defer src="./motion-default.js"></script>
7
- </head><body>
8
- <header class="app-topbar">
9
- <span class="brand">247420<span class="slash"> / </span>an entrypoint</span>
10
- <nav>
11
- <a href="#" class="active">works</a>
12
- <a href="#">writing</a>
13
- <a href="#">manifesto</a>
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>
package/dist/preview/icons-unicode.html DELETED
@@ -1,26 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // ICONS // UNICODE</span><span class="spread"></span><span>THE FREE SET</span></div>
7
- <div style="margin-top:14px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;font-family:var(--ff-mono)">
8
- <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
- <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
- <div style="padding:12px;text-align:center"><div style="font-size:22px">↳</div><div class="t-micro" style="margin-top:4px">REPLY</div></div>
11
- <div style="padding:12px;text-align:center"><div style="font-size:22px">·</div><div class="t-micro" style="margin-top:4px">SEP</div></div>
12
- <div style="padding:12px;text-align:center"><div style="font-size:22px">※</div><div class="t-micro" style="margin-top:4px">NOTE</div></div>
13
- <div style="padding:12px;text-align:center"><div style="font-size:22px">§</div><div class="t-micro" style="margin-top:4px">SECT</div></div>
14
- <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
- <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
- <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">LIVE</div></div>
18
- <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
- <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
- <div style="padding:12px;text-align:center"><div style="font-size:22px">//</div><div class="t-micro" style="margin-top:4px">CODE</div></div>
21
- <div style="padding:12px;text-align:center"><div style="font-size:22px">##</div><div class="t-micro" style="margin-top:4px">TAG</div></div>
22
- <div style="padding:12px;text-align:center"><div style="font-size:22px">—</div><div class="t-micro" style="margin-top:4px">DASH</div></div>
23
- <div style="padding:12px;text-align:center"><div style="font-size:22px">…</div><div class="t-micro" style="margin-top:4px">WAIT</div></div>
24
- </div>
25
- <div class="t-meta" style="margin-top:12px">no icon font. no svg slop. unicode does the job. lucide via cdn for anything these can't cover.</div>
26
- </body></html>
package/dist/preview/index-row.html DELETED
@@ -1,25 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // COMPONENTS // INDEX-ROW</span><span class="spread"></span><span>CORE PRIMITIVE</span></div>
7
- <div style="margin-top:14px">
8
- <div class="row">
9
- <div class="row-code">// 001</div>
10
- <div class="row-title">gm</div>
11
- <div class="row-meta">state machine · 3k★ · live</div>
12
- </div>
13
- <div class="row">
14
- <div class="row-code">// 002</div>
15
- <div class="row-title">zellous</div>
16
- <div class="row-meta">push-to-talk · 2024</div>
17
- </div>
18
- <div class="row">
19
- <div class="row-code">// 003</div>
20
- <div class="row-title">thebird</div>
21
- <div class="row-meta">wip</div>
22
- </div>
23
- </div>
24
- <div class="t-meta" style="margin-top:12px">how we list projects. no dots. no colons. the hairline is the divider.</div>
25
- </body></html>
package/dist/preview/inputs.html DELETED
@@ -1,22 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:24px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // COMPONENTS // INPUTS</span><span class="spread"></span><span>HAIRLINE ONLY</span></div>
7
- <div style="margin-top:20px;max-width:480px;display:grid;gap:20px">
8
- <div>
9
- <div class="t-label">EMAIL</div>
10
- <input class="input" placeholder="you@example.tld" value="hi@247420.xyz" />
11
- </div>
12
- <div>
13
- <div class="t-label">WHAT ARE YOU SHIPPING?</div>
14
- <input class="input" placeholder="short, lowercase, don't oversell it" />
15
- </div>
16
- <div>
17
- <div class="t-label">URL</div>
18
- <input class="input" placeholder="https://" />
19
- </div>
20
- </div>
21
- <div class="t-meta" style="margin-top:18px">no box. no fill. bottom hairline thickens to 2px on focus.</div>
22
- </body></html>
package/dist/preview/manifesto.html DELETED
@@ -1,52 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
3
- <link rel="stylesheet" href="../colors_and_type.css">
4
- <link rel="stylesheet" href="../app-shell.css">
5
- <style>
6
- body{padding:24px;background:var(--panel-0);color:var(--panel-text);}
7
- .wrap{margin-top:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
8
- .prin{padding:22px;min-height:180px;border-radius:var(--r-3);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;}
9
- .prin .num{font-family:var(--ff-mono);font-size:15px;font-weight:600;letter-spacing:0.12em;opacity:0.85;}
10
- .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:15px;font-weight:500;line-height:1.45;max-width:40ch;}
12
- .prin .tag{display:inline-block;align-self:flex-start;font-family:var(--ff-mono);font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);margin-top:auto;}
13
- /* Saturated bg → always white text (readable in any theme) */
14
- .p1{background:var(--green);color:#ffffff;}
15
- .p1 .tag{background:#ffffff;color:var(--green);}
16
- .p2{background:var(--purple);color:#ffffff;}
17
- .p2 .tag{background:#ffffff;color:var(--purple);}
18
- .p3{background:var(--sun);color:#1a1a1a;}
19
- .p3 .tag{background:#1a1a1a;color:var(--sun);}
20
- .p4{background:var(--mascot);color:#ffffff;}
21
- .p4 .tag{background:#ffffff;color:var(--mascot);}
22
- </style><script defer src="./motion-default.js"></script>
23
- </head><body>
24
- <div class="dateline"><span>247420 // MANIFESTO // 2018 → FOREVER</span><span class="spread"></span><span>probably emerging 🌀</span></div>
25
- <div class="wrap">
26
- <div class="prin p1">
27
- <div class="num">01 //</div>
28
- <div class="ttl">code is communication</div>
29
- <div class="sub">talk is cheap. PRs are truth. the conversation happens in the review, not the marketing thread.</div>
30
- <span class="tag">PRs are truth</span>
31
- </div>
32
- <div class="prin p2">
33
- <div class="num">02 //</div>
34
- <div class="ttl">community &gt; capital</div>
35
- <div class="sub">we optimize for the people who show up — not the people who write checks.</div>
36
- <span class="tag">show up</span>
37
- </div>
38
- <div class="prin p3">
39
- <div class="num">03 //</div>
40
- <div class="ttl">learn in public</div>
41
- <div class="sub">ship broken code. iterate fast. improve in the open. the goal isn't perfection — it's movement.</div>
42
- <span class="tag">broken on purpose</span>
43
- </div>
44
- <div class="prin p4">
45
- <div class="num">04 //</div>
46
- <div class="ttl">fun is a feature</div>
47
- <div class="sub">if your dApp isn't at least a little bit fun to use, you've failed. web3 is the wild west — not a spreadsheet with extra steps.</div>
48
- <span class="tag">fun is a feature</span>
49
- </div>
50
- </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 🧞</p>
52
- </body></html>
package/dist/preview/motion-default.js DELETED
@@ -1,106 +0,0 @@
1
- (function () {
2
- function reduced() {
3
- return typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
4
- }
5
-
6
- function loadAnimateCss() {
7
- if (document.getElementById('animate-style-cdn')) return;
8
- var link = document.createElement('link');
9
- link.id = 'animate-style-cdn';
10
- link.rel = 'stylesheet';
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() {
16
- if (document.getElementById('preview-motion-vars')) return;
17
- var style = document.createElement('style');
18
- style.id = 'preview-motion-vars';
19
- style.textContent = [
20
- ':root{--motion-fast:220ms;--motion-base:420ms;--motion-slow:720ms;--motion-step:70ms;}',
21
- '@media (prefers-reduced-motion: reduce){.animate__animated{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;}}'
22
- ].join('');
23
- document.head.appendChild(style);
24
- }
25
-
26
- function animateEntry(el, cfg, i) {
27
- if (!el || !el.classList) return;
28
- var effect = cfg.effect || 'fadeInUp';
29
- var duration = cfg.duration || 'var(--motion-base)';
30
- var delay = cfg.stagger ? ('calc(' + i + ' * var(--motion-step))') : (cfg.delay || '0ms');
31
-
32
- el.classList.add('animate__animated', 'animate__' + effect);
33
- el.style.setProperty('--animate-duration', duration);
34
- if (delay && delay !== '0ms') el.style.setProperty('--animate-delay', delay);
35
- }
36
-
37
- function runList(selector, cfg) {
38
- var nodes = Array.prototype.slice.call(document.querySelectorAll(selector));
39
- nodes.forEach(function (el, i) {
40
- animateEntry(el, cfg, i);
41
- });
42
- }
43
-
44
- function runAllChildren(cfg) {
45
- var nodes = Array.prototype.slice.call(document.body.children || []);
46
- var n = 0;
47
- nodes.forEach(function (el) {
48
- if (!el || !el.classList) return;
49
- if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE') return;
50
- animateEntry(el, cfg, n);
51
- n += 1;
52
- });
53
- }
54
-
55
- function presetForPage(file) {
56
- var presets = {
57
- 'buttons.html': [{ selector: 'button, .btn, .btn-primary, .btn-ghost', effect: 'fadeInUp', duration: 'var(--motion-fast)', stagger: true }],
58
- 'colors-core.html': [{ selector: '.sw', effect: 'fadeIn', duration: 'var(--motion-base)', stagger: true }],
59
- 'colors-lore.html': [{ selector: 'body > div:nth-of-type(2) > div', effect: 'zoomIn', duration: 'var(--motion-base)', stagger: true }],
60
- 'colors-semantic.html': [{ selector: 'body > div:nth-of-type(2) > div', effect: 'fadeInUp', duration: 'var(--motion-fast)', stagger: true }],
61
- 'dateline.html': [{ selector: '.dateline', effect: 'fadeInDown', duration: 'var(--motion-fast)', stagger: true }],
62
- 'header.html': [
63
- { selector: '.app-topbar', effect: 'fadeInDown', duration: 'var(--motion-fast)' },
64
- { selector: '.app-crumb', effect: 'fadeIn', duration: 'var(--motion-base)', delay: '120ms' }
65
- ],
66
- 'icons-unicode.html': [{ selector: 'body > div:nth-of-type(2) > div', effect: 'fadeIn', duration: 'var(--motion-fast)', stagger: true }],
67
- 'index-row.html': [{ selector: '.row', effect: 'fadeInLeft', duration: 'var(--motion-fast)', stagger: true }],
68
- 'inputs.html': [{ selector: '.input, .t-label', effect: 'fadeInUp', duration: 'var(--motion-fast)', stagger: true }],
69
- 'manifesto.html': [{ selector: '.prin', effect: 'fadeInUp', duration: 'var(--motion-base)', stagger: true }],
70
- 'rules.html': [{ selector: '.rule, .rule-double, .rule-dotted', effect: 'fadeIn', duration: 'var(--motion-fast)', stagger: true }],
71
- 'spacing.html': [{ selector: 'body > div:nth-of-type(2) > div', effect: 'fadeInRight', duration: 'var(--motion-fast)', stagger: true }],
72
- 'stamps-lore.html': [{ selector: '.stamp, .btn-stamp', effect: 'jackInTheBox', duration: 'var(--motion-base)', stagger: true }],
73
- 'stamps.html': [{ selector: '.stamp', effect: 'jackInTheBox', duration: 'var(--motion-base)', stagger: true }],
74
- 'theme-ink.html': [{ selector: 'body > *', effect: 'fadeIn', duration: 'var(--motion-base)', stagger: true }],
75
- 'type-display.html': [{ selector: '.t-hero, .t-h1', effect: 'fadeInUp', duration: 'var(--motion-base)', stagger: true }],
76
- 'type-mono.html': [{ selector: 'body > div:nth-of-type(2) > div', effect: 'fadeIn', duration: 'var(--motion-fast)', stagger: true }],
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 }]
80
- };
81
-
82
- return presets[file] || null;
83
- }
84
-
85
- function applyDefaults() {
86
- if (reduced()) return;
87
-
88
- var file = (window.location.pathname.split('/').pop() || '').toLowerCase();
89
- var preset = presetForPage(file);
90
-
91
- if (!preset) {
92
- runAllChildren({ effect: 'fadeInUp', duration: 'var(--motion-base)', stagger: true });
93
- return;
94
- }
95
-
96
- preset.forEach(function (cfg) {
97
- runList(cfg.selector, cfg);
98
- });
99
- }
100
-
101
- document.addEventListener('DOMContentLoaded', function () {
102
- loadAnimateCss();
103
- installTokens();
104
- applyDefaults();
105
- }, { once: true });
106
- })();
package/dist/preview/rules.html DELETED
@@ -1,16 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // RULES // HAIRLINES</span><span class="spread"></span><span>3 VARIANTS</span></div>
7
- <div style="margin-top:20px">
8
- <div class="t-label">SINGLE (default separator)</div>
9
- <hr class="rule" style="margin:6px 0 20px 0">
10
- <div class="t-label">DOUBLE (major section break)</div>
11
- <hr class="rule-double" style="margin:6px 0 20px 0">
12
- <div class="t-label">DOTTED (optional / skippable)</div>
13
- <hr class="rule-dotted" style="margin:6px 0 0 0">
14
- </div>
15
- <p class="t-meta" style="margin-top:18px">no boxes. no cards. structure comes from rules.</p>
16
- </body></html>
package/dist/preview/spacing.html DELETED
@@ -1,18 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // SPACING // 8PT</span><span class="spread"></span><span>10 STEPS</span></div>
7
- <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:80px">SPACE-1 · 4</span><div style="height:12px;width:4px;background:var(--panel-text)"></div></div>
9
- <div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:80px">SPACE-2 · 8</span><div style="height:12px;width:8px;background:var(--panel-text)"></div></div>
10
- <div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:80px">SPACE-3 · 16</span><div style="height:12px;width:16px;background:var(--panel-text)"></div></div>
11
- <div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:80px">SPACE-4 · 24</span><div style="height:12px;width:24px;background:var(--panel-text)"></div></div>
12
- <div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:80px">SPACE-5 · 32</span><div style="height:12px;width:32px;background:var(--panel-text)"></div></div>
13
- <div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:80px">SPACE-6 · 48</span><div style="height:12px;width:48px;background:var(--panel-text)"></div></div>
14
- <div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:80px">SPACE-7 · 64</span><div style="height:12px;width:64px;background:var(--panel-text)"></div></div>
15
- <div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:80px">SPACE-8 · 96</span><div style="height:12px;width:96px;background:var(--panel-text)"></div></div>
16
- <div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:80px">SPACE-9 · 128</span><div style="height:12px;width:128px;background:var(--panel-text)"></div></div>
17
- </div>
18
- </body></html>
package/dist/preview/stamps-lore.html DELETED
@@ -1,20 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:24px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // STAMPS // LORE</span><span class="spread"></span><span>FULL SET</span></div>
7
- <div style="margin-top:20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap">
8
- <span class="stamp">247420</span>
9
- <span class="stamp ink">approved</span>
10
- <span class="stamp acid">live · v0.4.1</span>
11
- <span class="stamp purple">420247</span>
12
- <span class="stamp mascot" style="transform:rotate(3deg)">mascot sez hi</span>
13
- </div>
14
- <div style="margin-top:24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap">
15
- <button class="btn-stamp">ship it ↗</button>
16
- <button class="btn-stamp acid">approved</button>
17
- <button class="btn-stamp purple">420 mode</button>
18
- <button class="btn-stamp mascot">wild card</button>
19
- </div>
20
- </body></html>
package/dist/preview/stamps.html DELETED
@@ -1,14 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:24px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // COMPONENTS // STAMPS</span><span class="spread"></span><span>3 VARIANTS</span></div>
7
- <div style="margin-top:20px;display:flex;gap:24px;align-items:center;flex-wrap:wrap">
8
- <span class="stamp">247420</span>
9
- <span class="stamp ink">approved</span>
10
- <span class="stamp acid">live · v0.4.1</span>
11
- <span class="stamp" style="transform:rotate(4deg)">do not ship</span>
12
- </div>
13
- <div class="t-meta" style="margin-top:18px">rubber-stamp motif · always rotated slightly · max 1 per page</div>
14
- </body></html>
package/dist/preview/theme-ink.html DELETED
@@ -1,15 +0,0 @@
1
- <!doctype html>
2
- <html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:0;margin:0;background:#181a1f;color:#e4e6eb;min-height:200px;}</style><script defer src="./motion-default.js"></script>
5
- </head><body data-theme="dark">
6
- <div class="dateline" style="padding:20px"><span>247420 // THEME // INK MODE</span><span class="spread"></span><span>DEFAULT FOR DOCS · TOOLS</span></div>
7
- <div style="padding:0 20px 20px 20px">
8
- <h2 style="font-family:var(--ff-display);font-size:40px;margin:14px 0 6px 0;color:#e4e6eb">gm runs in the dark</h2>
9
- <p class="t-meta" style="color:var(--panel-text-3)">ink mode inverts paper/ink; acid stays the same; border becomes paper.</p>
10
- <div style="margin-top:16px;display:flex;gap:12px;align-items:center">
11
- <button class="btn" style="color:#e4e6eb">read source</button>
12
- <button class="btn-stamp acid">ship it ↗</button>
13
- </div>
14
- </div>
15
- </body></html>
package/dist/preview/type-display.html DELETED
@@ -1,16 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // TYPE // DISPLAY</span><span class="spread"></span><span>ARCHIVO BLACK</span></div>
7
- <div style="margin-top:20px">
8
- <div class="t-hero" style="font-size:96px">farts generally</div>
9
- <div class="t-micro" style="margin-top:8px">HERO / 128px · ARCHIVO BLACK · letter-spacing -0.02em</div>
10
- </div>
11
- <hr class="rule" style="margin-top:16px">
12
- <div style="margin-top:16px">
13
- <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 / 72px</div>
15
- </div>
16
- </body></html>
package/dist/preview/type-mono.html DELETED
@@ -1,15 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
3
- <link rel="stylesheet" href="../app-shell.css">
4
- <style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
5
- </head><body>
6
- <div class="dateline"><span>247420 // TYPE // MONO</span><span class="spread"></span><span>JETBRAINS MONO</span></div>
7
- <div style="margin-top:16px;display:grid;gap:10px">
8
- <div><span class="t-label">LABEL / 12PX CAPS · TRACKED 0.14EM</span></div>
9
- <div class="t-body">body // 16px regular — the default UI voice. it should feel like a terminal with better table manners.</div>
10
- <div class="t-meta">meta · 12px · var(--panel-text-3) — timestamps, breadcrumbs, versions, commit hashes</div>
11
- <div class="t-micro">MICRO · 10PX · CORNERS AND DATELINES</div>
12
- <div><code>code · 14px · hairline box</code> — inline</div>
13
- <div class="t-h3">h3 // mono 28px / medium</div>
14
- </div>
15
- </body></html>