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
@@ -1,33 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head>
3
- <meta charset="utf-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
6
- <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
7
- <meta name="color-scheme" content="light dark">
8
- <title>file browser / 247420</title>
9
- <meta name="description" content="file-browser surface — rails by file type, drop-zone upload, modal preview.">
10
- <meta name="author" content="247420 / AnEntrypoint">
11
- <link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/file_browser/">
12
- <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
13
- <meta property="og:type" content="website">
14
- <meta property="og:title" content="file browser / 247420">
15
- <meta property="og:description" content="file-browser surface — rails by file type, drop-zone upload, modal preview.">
16
- <meta property="og:url" content="https://anentrypoint.github.io/design/ui_kits/file_browser/">
17
- <meta property="og:site_name" content="247420 / design">
18
- <meta name="robots" content="index, follow">
19
- <link rel="stylesheet" href="../../colors_and_type.css">
20
- <link rel="stylesheet" href="../../app-shell.css">
21
-
22
- <script type="importmap">
23
- { "imports": {
24
- "webjsx": "../../vendor/webjsx/index.js",
25
- "webjsx/": "../../vendor/webjsx/",
26
- "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js"
27
- } }
28
- </script>
29
- </head>
30
- <body data-screen-label="08 File Browser">
31
- <div id="root"></div>
32
- <script type="module" src="./app.js"></script>
33
- </body></html>
@@ -1,121 +0,0 @@
1
- import * as webjsx from 'webjsx';
2
- import { Topbar, Crumb, Status, Side, AppShell, Panel, Heading, Lede, Chip } from 'ds/components.js';
3
- import { mountKit } from 'ds/bootstrap.js';
4
- const h = webjsx.createElement;
5
-
6
- const root = document.getElementById('root');
7
-
8
- const swatchTokens = [
9
- { name: 'panel-0', hint: 'paper · root surface' },
10
- { name: 'panel-1', hint: 'one shade up · panel bg' },
11
- { name: 'panel-2', hint: 'two shades up · row bg' },
12
- { name: 'panel-3', hint: 'three shades up · header strip' },
13
- { name: 'panel-accent',hint: 'green ink · primary cta' },
14
- { name: 'panel-select',hint: 'mint hover/select tone' }
15
- ];
16
-
17
- const items = [
18
- { id: 'a', label: 'mascot · cat', caption: '/\\_/\\\n( o.o )', tone: 'panel-1', glyph: '◐' },
19
- { id: 'b', label: 'panel · stack', caption: 'panel-on-panel rhythm', tone: 'panel-2', glyph: '▣' },
20
- { id: 'c', label: 'rail · indicator', caption: 'color-coded inset', tone: 'panel-1', glyph: '▰' },
21
- { id: 'd', label: 'mono · label', caption: 'all caps · letter-spaced', tone: 'panel-2', glyph: '§' },
22
- { id: 'e', label: 'cli · prompt', caption: '$ ship it', tone: 'panel-3', glyph: '◆' },
23
- { id: 'f', label: 'pill · radius 999', caption: 'sidebar fab tone', tone: 'panel-1', glyph: '●' },
24
- { id: 'g', label: 'badge · chip', caption: 'meta pill, dim/accent', tone: 'panel-2', glyph: '◇' },
25
- { id: 'h', label: 'glyph · unicode', caption: 'no svgs in chrome', tone: 'panel-1', glyph: '✦' },
26
- { id: 'i', label: 'manifesto · prose', caption: 'long-form, max 64ch', tone: 'panel-2', glyph: '¶' },
27
- { id: 'j', label: 'fade · in', caption: 'visibility-driven only', tone: 'panel-3', glyph: '◌' },
28
- { id: 'k', label: 'rule · divider', caption: '1px panel-2 hairline', tone: 'panel-1', glyph: '—' },
29
- { id: 'l', label: 'stamp · seal', caption: 'editorial mark', tone: 'panel-2', glyph: '◯' }
30
- ];
31
-
32
- const state = { open: null, density: 'comfy' };
33
-
34
- function Tile(it) {
35
- const size = state.density === 'tight' ? '120px' : '160px';
36
- return h('button', {
37
- key: it.id,
38
- onclick: () => { state.open = it.id; kit.render(); },
39
- style: 'all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;background:var(--' + it.tone + ');padding:12px;border-radius:10px;min-height:' + size
40
- },
41
- h('div', { style: 'flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);white-space:pre-line;color:var(--panel-text-2);font-size:18px' }, it.caption),
42
- h('div', { style: 'display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px' },
43
- h('span', { style: 'font-family:var(--ff-mono);color:var(--panel-text-3)' }, it.glyph),
44
- h('span', { style: 'color:var(--panel-text)' }, it.label)
45
- )
46
- );
47
- }
48
-
49
- function Swatch(t) {
50
- return h('div', { key: t.name, style: 'display:flex;flex-direction:column;gap:6px' },
51
- h('div', { style: 'height:64px;border-radius:8px;background:var(--' + t.name + ')' }),
52
- h('div', { style: 'display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:11px' },
53
- h('span', { style: 'color:var(--panel-text)' }, t.name),
54
- h('span', { style: 'color:var(--panel-text-3)' }, t.hint)
55
- )
56
- );
57
- }
58
-
59
- function Lightbox() {
60
- if (!state.open) return null;
61
- const it = items.find((i) => i.id === state.open);
62
- return h('div', {
63
- onclick: () => { state.open = null; kit.render(); },
64
- style: 'position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;padding:32px;z-index:50'
65
- },
66
- h('div', { onclick: (e) => e.stopPropagation(),
67
- style: 'background:var(--panel-0);border-radius:14px;padding:28px;min-width:320px;max-width:520px;display:flex;flex-direction:column;gap:14px' },
68
- h('div', { style: 'display:flex;justify-content:space-between;align-items:center' },
69
- h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, 'tile · ' + it.id),
70
- h('button', { class: 'btn', onclick: () => { state.open = null; kit.render(); } }, 'close')
71
- ),
72
- h('div', { style: 'background:var(--' + it.tone + ');padding:36px;border-radius:10px;text-align:center;font-family:var(--ff-mono);white-space:pre-line;font-size:24px' }, it.caption),
73
- h('p', { style: 'margin:0' }, h('strong', {}, it.label)),
74
- h('p', { style: 'margin:0;color:var(--panel-text-2)' }, 'this lightbox uses the same tonal panel — no extra components, no shadow. backdrop is fixed inset, click outside dismisses.')
75
- )
76
- );
77
- }
78
-
79
- function App() {
80
- const cols = state.density === 'tight' ? 'repeat(auto-fill, minmax(140px, 1fr))' : 'repeat(auto-fill, minmax(180px, 1fr))';
81
- return AppShell({
82
- topbar: Topbar({ brand: '247420', leaf: 'gallery', items: [['index', '../../'], ['source ↗', 'https://github.com/AnEntrypoint/design']] }),
83
- crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'gallery', right: items.length + ' tiles' }),
84
- side: Side({
85
- sections: [
86
- { group: 'density', items: [
87
- { glyph: state.density === 'comfy' ? '●' : '○', label: 'comfy', key: 'd1', onClick: (e) => { e.preventDefault(); state.density = 'comfy'; kit.render(); } },
88
- { glyph: state.density === 'tight' ? '●' : '○', label: 'tight', key: 'd2', onClick: (e) => { e.preventDefault(); state.density = 'tight'; kit.render(); } }
89
- ] },
90
- { group: 'jump', items: [
91
- { glyph: '·', label: 'tiles', key: 'j1', href: '#tiles' },
92
- { glyph: '·', label: 'swatches', key: 'j2', href: '#swatches' }
93
- ] }
94
- ]
95
- }),
96
- main: [
97
- h('div', { class: 'ds-section', style: 'padding:8px' },
98
- Heading({ level: 1, children: 'gallery' }),
99
- Lede({ children: 'visual grid of tonal cards. tiles use the same panel tokens the rest of the system does — no bespoke tile component, no shadows, no borders.' }),
100
- Panel({ title: 'tiles', count: items.length, style: 'margin:8px 0', children:
101
- h('div', { style: 'padding:16px;display:grid;grid-template-columns:' + cols + ';gap:8px' }, ...items.map(Tile))
102
- }),
103
- Panel({ title: 'swatches', count: swatchTokens.length, style: 'margin:8px 0', children:
104
- h('div', { style: 'padding:16px;display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:12px' }, ...swatchTokens.map(Swatch))
105
- }),
106
- Panel({ title: 'about this kit', style: 'margin:8px 0', children: h('div', { class: 'ds-pattern-notes' },
107
- h('p', {}, '· tiles are tonal panels stacked into a css grid — ', Chip({ tone: 'accent', children: 'auto-fill minmax' }), ' for the responsive default.'),
108
- h('p', {}, '· lightbox reuses the panel surface; no extra component, no transitions, no z-stack circus.'),
109
- h('p', {}, '· density toggle drops min tile size — same tokens, different rhythm.')
110
- ) })
111
- ),
112
- Lightbox()
113
- ],
114
- status: Status({
115
- left: ['gallery', '• ' + items.length + ' tiles', '• density=' + state.density],
116
- right: ['247420 / mmxxvi']
117
- })
118
- });
119
- }
120
-
121
- const kit = mountKit({ root, view: App, screen: '14 Gallery' });
@@ -1,26 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head>
3
- <meta charset="utf-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
6
- <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
7
- <meta name="color-scheme" content="light dark">
8
- <title>gallery / 247420</title>
9
- <meta name="description" content="gallery ui kit — visual grid, lightbox, tonal cards.">
10
- <link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/gallery/">
11
- <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
12
- <link rel="stylesheet" href="../../colors_and_type.css">
13
- <link rel="stylesheet" href="../../app-shell.css">
14
- <script type="importmap">
15
- { "imports": {
16
- "webjsx": "../../vendor/webjsx/index.js",
17
- "webjsx/": "../../vendor/webjsx/",
18
- "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
19
- "ds/": "../../src/"
20
- } }
21
- </script>
22
- </head>
23
- <body data-screen-label="14 Gallery">
24
- <div id="root"></div>
25
- <script type="module" src="./app.js"></script>
26
- </body></html>
@@ -1,7 +0,0 @@
1
- # 247420 — Homepage UI Kit
2
-
3
- Portfolio index for 247420.xyz. Flush-left, dateline-header, index-card project list. One hero display line, one acid-accent stamp.
4
-
5
- **Files**
6
- - `index.html` — the full page, interactive
7
- - `components.jsx` — Header, Dateline, Hero, ProjectRow, Footer, Manifesto
@@ -1,167 +0,0 @@
1
- import * as webjsx from 'webjsx';
2
- import { mountKit } from 'ds/bootstrap.js';
3
- const h = webjsx.createElement;
4
-
5
- const state = { route: 'works', opened: 0 };
6
- const root = document.getElementById('root');
7
-
8
- const navItems = [['works','#works'],['writing','#writing'],['manifesto','#manifesto'],['source ↗','https://github.com/AnEntrypoint']];
9
-
10
- function Topbar() {
11
- return h('header', { class: 'app-topbar' },
12
- h('span', { class: 'brand' }, '247420', h('span', { class: 'slash' }, ' / '), 'an entrypoint'),
13
- h('nav', {}, ...navItems.map(([label, href]) =>
14
- h('a', {
15
- key: label,
16
- href,
17
- class: state.route === label.replace(' ↗','') ? 'active' : '',
18
- onclick: (e) => { if (!href.startsWith('http')) { e.preventDefault(); state.route = label.replace(' ↗',''); render(); } }
19
- }, label)
20
- ))
21
- );
22
- }
23
-
24
- function Crumb() {
25
- return h('div', { class: 'app-crumb' },
26
- h('span', {}, '247420'), h('span', { class: 'sep' }, '›'),
27
- h('span', { class: 'leaf' }, state.route)
28
- );
29
- }
30
-
31
- function Hero() {
32
- return h('div', { style: 'padding:32px 32px 24px 32px' },
33
- h('h1', { style: 'font-size:36px;font-weight:600;margin:0 0 4px 0;color:var(--panel-text);letter-spacing:-0.01em' },
34
- 'the creative department of the internet.'
35
- ),
36
- h('p', { style: 'font-size:14px;line-height:1.55;color:var(--panel-text-2);max-width:64ch;margin:0 0 20px 0' },
37
- '247420 is a collective of mercurials. we ship fast, break things on purpose, and document honestly. ',
38
- h('span', { style: 'color:var(--panel-accent);font-weight:500' }, 'humor is load-bearing.')
39
- ),
40
- h('div', { class: 'panel', style: 'max-width:560px;margin:0' },
41
- h('div', { class: 'panel-head' }, h('span', {}, 'currently shipping'), h('span', {}, '3')),
42
- h('div', { class: 'panel-body' },
43
- h('div', { class: 'row' },
44
- h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-accent)' }, '●')),
45
- h('span', { class: 'title' }, 'gm', h('span', { class: 'sub' }, 'state machine v0.4.1')),
46
- h('span', { class: 'meta' }, 'live')
47
- ),
48
- h('div', { class: 'row' },
49
- h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-accent)' }, '●')),
50
- h('span', { class: 'title' }, 'zellous', h('span', { class: 'sub' }, 'push-to-talk')),
51
- h('span', { class: 'meta' }, 'live')
52
- ),
53
- h('div', { class: 'row' },
54
- h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-text-3)' }, '○')),
55
- h('span', { class: 'title' }, 'thebird', h('span', { class: 'sub' }, '—')),
56
- h('span', { class: 'meta' }, 'wip')
57
- )
58
- )
59
- )
60
- );
61
- }
62
-
63
- const works = [
64
- { code:'001', title:'gm', sub:'state machine for coding agents', meta:'2025 · 3k★', body:'a tiny deterministic state machine that lets llms code without losing their minds. it thinks so you don\'t have to (as much).' },
65
- { code:'002', title:'zellous', sub:'production push-to-talk', meta:'2024 · live', body:'hold the button. talk. someone on the other side hears you. opus codec, dynamic rooms, 50-message replay.' },
66
- { code:'003', title:'spoint', sub:'spawnpoint', meta:'2024 · live', body:'the directory for "where should we start?" one url, one room, everyone lands in the same place.' },
67
- { code:'004', title:'flatspace', sub:'flat-file cms', meta:'wip', body:'still figuring out what to say about this one. come back tuesday.' },
68
- { code:'005', title:'thebird', sub:'—', meta:'wip', body:'yes, the name is a reference. no, we won\'t tell you to what.' },
69
- { code:'006', title:'mcp-repl', sub:'repl for mcp', meta:'2024 · live', body:'executenodejs, executedeno, executebash, astgrep_search. if you don\'t know what those are, this one isn\'t for you.' },
70
- { code:'007', title:'mutagen', sub:'adaptogen server', meta:'2024 · live', body:'everything to do with a dapp deg3n. read the source.' },
71
- { code:'008', title:'techshaman', sub:'member site', meta:'ongoing', body:'the official website for the techshaman. an entrypoint probably emerging.' }
72
- ];
73
-
74
- function Works() {
75
- return h('div', { style: 'padding:20px 32px' },
76
- h('h3', {}, '// works'),
77
- h('div', { class: 'panel' },
78
- h('div', { class: 'panel-head' },
79
- h('span', {}, 'works · 08 of ~61'),
80
- h('a', { href: 'https://github.com/AnEntrypoint', style: 'color:var(--panel-accent);text-decoration:none' }, 'all repos ↗')
81
- ),
82
- h('div', { class: 'panel-body' }, ...works.map((w, i) => {
83
- const isOpen = state.opened === i;
84
- return h('div', { key: i },
85
- h('div', {
86
- class: 'row' + (isOpen ? ' active' : ''),
87
- onclick: () => { state.opened = isOpen ? null : i; render(); }
88
- },
89
- h('span', { class: 'code' }, w.code),
90
- h('span', { class: 'title' }, w.title, h('span', { class: 'sub' }, w.sub)),
91
- h('span', { class: 'meta' }, w.meta + ' ' + (isOpen ? '−' : '+'))
92
- ),
93
- isOpen ? h('div', { class: 'work-detail' },
94
- h('p', { class: 'ds-prose ds-work-body' }, w.body),
95
- h('div', { class: 'ds-work-actions' },
96
- h('a', { class: 'btn-primary', href: '#' }, 'open ↗'),
97
- h('a', { class: 'btn', href: '#' }, 'source')
98
- )
99
- ) : null
100
- );
101
- }))
102
- )
103
- );
104
- }
105
-
106
- function Writing() {
107
- const posts = [
108
- { date:'2026.04.14', title:'we were here first', tag:'lore' },
109
- { date:'2026.03.22', title:'gm v0.4 postmortem, or: why state machines', tag:'gm' },
110
- { date:'2026.02.09', title:'push-to-talk is a protocol, not a feature', tag:'zellous' },
111
- { date:'2025.12.11', title:'against the vibe-coded interface', tag:'manifesto' },
112
- { date:'2025.10.03', title:'notes on shipping weird', tag:'notes' }
113
- ];
114
- return h('div', { style: 'padding:20px 32px' },
115
- h('h3', {}, '// recent writing'),
116
- h('div', { class: 'panel' },
117
- h('div', { class: 'panel-body' }, ...posts.map((p, i) =>
118
- h('a', { key: i, class: 'row', href: '#' },
119
- h('span', { class: 'code' }, p.date),
120
- h('span', { class: 'title' }, p.title),
121
- h('span', { class: 'meta' }, '§ ' + p.tag)
122
- )
123
- ))
124
- )
125
- );
126
- }
127
-
128
- function Manifesto() {
129
- return h('div', { class: 'ds-section ds-manifesto-section' },
130
- h('h3', {}, '// manifesto · rough draft'),
131
- h('div', { class: 'ds-prose ds-manifesto' },
132
- h('p', { class: 'ds-manifesto-para' }, 'we are the creative department of the internet. always open (24/7). always a little bit high on possibility (420).'),
133
- h('p', { class: 'ds-manifesto-para' }, 'move fast. break things. document honestly. ship the rough draft. ', h('strong', {}, 'humor is load-bearing.')),
134
- h('p', { class: 'ds-manifesto-para dim' }, 'we will not tolerate simpleton design patterns, trifectas, gradients, or anything silly. nothing lame. we\'re internet natives and not easily pleased.')
135
- )
136
- );
137
- }
138
-
139
- function Status() {
140
- return h('footer', { class: 'app-status' },
141
- h('span', { class: 'item' }, 'main'),
142
- h('span', { class: 'item' }, '• 8 works'),
143
- h('span', { class: 'item' }, '• 5 posts'),
144
- h('span', { class: 'spread' }),
145
- h('span', { class: 'item' }, 'probably emerging'),
146
- h('span', { class: 'item' }, h('a', { href: 'https://github.com/AnEntrypoint' }, 'source ↗'))
147
- );
148
- }
149
-
150
- function App() {
151
- return h('div', { class: 'app' },
152
- Topbar(),
153
- Crumb(),
154
- h('div', { class: 'app-body no-side' },
155
- h('main', { class: 'app-main', style: 'padding:0' },
156
- Hero(),
157
- Works(),
158
- Writing(),
159
- Manifesto()
160
- )
161
- ),
162
- Status()
163
- );
164
- }
165
-
166
- const kit = mountKit({ root, view: App, screen: '01 Homepage' });
167
- function render() { kit.schedule(); }
@@ -1,46 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head>
3
- <meta charset="utf-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
6
- <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
7
- <meta name="color-scheme" content="light dark">
8
- <title>homepage / 247420</title>
9
- <meta name="description" content="landing surface for the 247420 collective — works, writing, manifesto.">
10
- <meta name="author" content="247420 / AnEntrypoint">
11
- <meta name="keywords" content="247420, anentrypoint, design system, webjsx, rippleui, creative collective">
12
- <link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/homepage/">
13
- <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
14
- <meta property="og:type" content="website">
15
- <meta property="og:title" content="homepage / 247420">
16
- <meta property="og:description" content="landing surface for the 247420 collective — works, writing, manifesto.">
17
- <meta property="og:url" content="https://anentrypoint.github.io/design/ui_kits/homepage/">
18
- <meta property="og:site_name" content="247420 / design">
19
- <meta property="og:image" content="https://anentrypoint.github.io/design/og-card.png">
20
- <meta property="og:image:width" content="1200">
21
- <meta property="og:image:height" content="630">
22
- <meta property="og:image:alt" content="247420 design system">
23
- <meta property="og:locale" content="en_US">
24
- <meta name="twitter:card" content="summary_large_image">
25
- <meta name="twitter:title" content="homepage / 247420">
26
- <meta name="twitter:description" content="landing surface for the 247420 collective — works, writing, manifesto.">
27
- <meta name="twitter:image" content="https://anentrypoint.github.io/design/og-card.png">
28
- <meta name="twitter:site" content="@AnEntrypoint">
29
- <meta name="robots" content="index, follow">
30
- <link rel="stylesheet" href="../../colors_and_type.css">
31
- <link rel="stylesheet" href="../../app-shell.css">
32
-
33
- <script type="importmap">
34
- { "imports": {
35
- "webjsx": "../../vendor/webjsx/index.js",
36
- "webjsx/": "../../vendor/webjsx/",
37
- "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
38
- "webjsx-router": "../../vendor/webjsx-router.js",
39
- "ds/": "../../src/"
40
- } }
41
- </script>
42
- </head>
43
- <body data-screen-label="01 Homepage">
44
- <div id="root"></div>
45
- <script type="module" src="./app.js"></script>
46
- </body></html>
@@ -1,3 +0,0 @@
1
- # Project Page UI Kit
2
-
3
- Generic landing page template for any 247420 project (gm, flatspace, spoint, etc.). Hero wordmark + receipt-style stats + install block + changelog.
@@ -1,154 +0,0 @@
1
- import * as webjsx from 'webjsx';
2
- const h = webjsx.createElement;
3
-
4
- const state = { copied: false, tab: 'readme' };
5
- const root = document.getElementById('root');
6
-
7
- const sideSections = [
8
- { group: 'project', items: [
9
- ['◆', 'overview', 'readme', true],
10
- ['§', 'readme', 'readme', false],
11
- ['§', 'docs', 'docs', false],
12
- ['§', 'changelog', 'changelog', false]
13
- ]},
14
- { group: 'reference', items: [
15
- ['›', 'executenodejs', 'ref', false],
16
- ['›', 'executedeno', 'ref', false],
17
- ['›', 'astgrep_*', 'ref', false],
18
- ['›', 'batch_execute', 'ref', false]
19
- ]},
20
- { group: 'links', items: [
21
- ['↗', 'source', 'ext', false],
22
- ['↗', 'npm', 'ext', false],
23
- ['↗', 'releases', 'ext', false]
24
- ]}
25
- ];
26
-
27
- function Topbar() {
28
- return h('header', { class: 'app-topbar' },
29
- h('span', { class: 'brand' }, '247420', h('span', { class: 'slash' }, ' / '), 'gm'),
30
- h('nav', {},
31
- h('a', { href: '../homepage/' }, '← all projects'),
32
- h('a', { href: '#', class: state.tab==='readme'?'active':'' , onclick:(e)=>{e.preventDefault();state.tab='readme';render();}}, 'readme'),
33
- h('a', { href: '#', class: state.tab==='docs'?'active':'' , onclick:(e)=>{e.preventDefault();state.tab='docs';render();}}, 'docs'),
34
- h('a', { href: '#' }, 'source ↗')
35
- )
36
- );
37
- }
38
-
39
- function Crumb() {
40
- return h('div', { class: 'app-crumb' },
41
- h('span', {}, '247420'), h('span', { class: 'sep' }, '›'),
42
- h('span', {}, 'gm'), h('span', { class: 'sep' }, '›'),
43
- h('span', { class: 'leaf' }, state.tab),
44
- h('span', { style: 'margin-left:auto;display:flex;gap:10px;align-items:center' },
45
- h('span', { class: 'chip accent' }, '● live'),
46
- h('span', { class: 'chip dim' }, 'v0.4.1')
47
- )
48
- );
49
- }
50
-
51
- function Side() {
52
- return h('aside', { class: 'app-side' }, ...sideSections.flatMap(sec => [
53
- h('div', { class: 'group', key: sec.group }, sec.group),
54
- ...sec.items.map(([glyph, label, kind, active], i) =>
55
- h('a', { key: sec.group + i, href: '#', class: active ? 'active' : '' },
56
- h('span', { class: 'glyph' }, glyph),
57
- h('span', {}, label)
58
- )
59
- )
60
- ]));
61
- }
62
-
63
- function Overview() {
64
- return [
65
- h('h1', {}, 'gm'),
66
- h('p', { class: 'lede' }, 'state machine for coding agents. it thinks, so you don\'t have to (as much).'),
67
-
68
- h('h3', {}, 'install'),
69
- Install({ cmd: 'npx -y @anentrypoint/mcp-gm' }),
70
-
71
- h('h3', {}, 'receipt'),
72
- Receipt({ rows: [
73
- ['status','live · ships tuesdays'],
74
- ['stars','3,124'],
75
- ['license','MIT'],
76
- ['lang','typescript · deno'],
77
- ['size','2.1mb'],
78
- ['deps','0 runtime'],
79
- ['authors','the collective'],
80
- ['first commit','2024.09.03']
81
- ]}),
82
-
83
- h('h3', {}, 'changelog'),
84
- Changelog({ entries: [
85
- { date:'2026.04.20', ver:'v0.4.1', msg:'ship it. fixed the thing everyone complained about.' },
86
- { date:'2026.03.22', ver:'v0.4.0', msg:'new state machine runtime. broke everything on purpose. read the postmortem.' },
87
- { date:'2026.02.09', ver:'v0.3.7', msg:'astgrep_search is now astgrep_enhanced_search. you will adapt.' },
88
- { date:'2025.12.11', ver:'v0.3.0', msg:'first public release. gm, world.' }
89
- ]})
90
- ];
91
- }
92
-
93
- function Install({ cmd }) {
94
- return h('div', { class: 'cli' },
95
- h('span', { class: 'prompt' }, '$'),
96
- h('span', { class: 'cmd' }, cmd),
97
- h('span', {
98
- class: 'copy',
99
- onclick: () => { navigator.clipboard?.writeText(cmd); state.copied = true; render(); setTimeout(() => { state.copied = false; render(); }, 1200); }
100
- }, state.copied ? 'copied' : 'copy')
101
- );
102
- }
103
-
104
- function Receipt({ rows }) {
105
- return h('table', { class: 'kv' },
106
- h('tbody', {}, ...rows.map(([k, v], i) =>
107
- h('tr', { key: i },
108
- h('td', {}, k),
109
- h('td', {}, v)
110
- )
111
- ))
112
- );
113
- }
114
-
115
- function Changelog({ entries }) {
116
- return h('div', { class: 'panel', style: 'max-width:900px' },
117
- h('div', { class: 'panel-body' }, ...entries.map((e, i) =>
118
- h('div', { key: i, class: 'row', style: 'grid-template-columns:100px 70px 1fr' },
119
- h('span', { class: 'code' }, e.date),
120
- h('span', { style: 'color:var(--panel-accent);font-family:var(--ff-mono);font-size:14px' }, e.ver),
121
- h('span', { class: 'title' }, e.msg)
122
- )
123
- ))
124
- );
125
- }
126
-
127
- function Status() {
128
- return h('footer', { class: 'app-status' },
129
- h('span', { class: 'item' }, 'main'),
130
- h('span', { class: 'item' }, '• typescript'),
131
- h('span', { class: 'item' }, '• 0 errors'),
132
- h('span', { class: 'item' }, '• 0 warnings'),
133
- h('span', { class: 'spread' }),
134
- h('span', { class: 'item' }, 'v0.4.1'),
135
- h('span', { class: 'item' }, '• MIT')
136
- );
137
- }
138
-
139
- function App() {
140
- return h('div', { class: 'app' },
141
- Topbar(),
142
- Crumb(),
143
- h('div', { class: 'app-body' },
144
- Side(),
145
- h('main', { class: 'app-main narrow' }, ...Overview())
146
- ),
147
- Status()
148
- );
149
- }
150
-
151
- function render() {
152
- webjsx.applyDiff(root, App());
153
- }
154
- render();
@@ -1,45 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="auto" class="ds-247420"><head>
3
- <meta charset="utf-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
6
- <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
7
- <meta name="color-scheme" content="light dark">
8
- <title>project / gm · 247420</title>
9
- <meta name="description" content="generic project landing template — install, receipt, changelog, docs sidebar.">
10
- <meta name="author" content="247420 / AnEntrypoint">
11
- <meta name="keywords" content="247420, anentrypoint, design system, webjsx, rippleui, creative collective">
12
- <link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/project_page/">
13
- <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
14
- <meta property="og:type" content="website">
15
- <meta property="og:title" content="project / gm · 247420">
16
- <meta property="og:description" content="generic project landing template — install, receipt, changelog, docs sidebar.">
17
- <meta property="og:url" content="https://anentrypoint.github.io/design/ui_kits/project_page/">
18
- <meta property="og:site_name" content="247420 / design">
19
- <meta property="og:image" content="https://anentrypoint.github.io/design/og-card.png">
20
- <meta property="og:image:width" content="1200">
21
- <meta property="og:image:height" content="630">
22
- <meta property="og:image:alt" content="247420 design system">
23
- <meta property="og:locale" content="en_US">
24
- <meta name="twitter:card" content="summary_large_image">
25
- <meta name="twitter:title" content="project / gm · 247420">
26
- <meta name="twitter:description" content="generic project landing template — install, receipt, changelog, docs sidebar.">
27
- <meta name="twitter:image" content="https://anentrypoint.github.io/design/og-card.png">
28
- <meta name="twitter:site" content="@AnEntrypoint">
29
- <meta name="robots" content="index, follow">
30
- <link rel="stylesheet" href="../../colors_and_type.css">
31
- <link rel="stylesheet" href="../../app-shell.css">
32
-
33
- <script type="importmap">
34
- { "imports": {
35
- "webjsx": "../../vendor/webjsx/index.js",
36
- "webjsx/": "../../vendor/webjsx/",
37
- "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
38
- "webjsx-router": "../../vendor/webjsx-router.js"
39
- } }
40
- </script>
41
- </head>
42
- <body data-screen-label="02 Project Page">
43
- <div id="root"></div>
44
- <script type="module" src="./app.js"></script>
45
- </body></html>