anentrypoint-design 0.0.122 → 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 (204) 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 +933 -2255
  5. package/dist/247420.css +2276 -3075
  6. package/dist/247420.js +14 -14
  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 -67
  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
  203. package/src/components/surfaces.js +0 -399
  204. package/src/components/voice.js +0 -132
package/README.md CHANGED
@@ -1,253 +1,253 @@
1
- # 247420
2
-
3
- The 247420 / AnEntrypoint design system, packaged as a single-file ESM SDK.
4
-
5
- friendly rounded sans body, monospace only on real code, tonal surfaces over borders, indicator rails for color-coded separation, generous negative space, terminal-flavoured rhythm.
6
-
7
- we fart in its general direction. ◰
8
-
9
- ## install (the only step)
10
-
11
- You have two choices. Both are one line.
12
-
13
- **npm** (when you already have a bundler):
14
-
15
- ```bash
16
- npm install anentrypoint-design
17
- ```
18
-
19
- **unpkg** (when you don't, and you don't want one):
20
-
21
- ```html
22
- <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
23
- <script type="importmap">
24
- { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
25
- </script>
26
- ```
27
-
28
- Add the scope class on a wrapping element and you are done:
29
-
30
- ```html
31
- <html class="ds-247420" data-theme="light">
32
- <body><div id="app"></div></body>
33
- </html>
34
- ```
35
-
36
- ## use it (3-line app)
37
-
38
- ```js
39
- import { mount, components as C } from 'anentrypoint-design';
40
-
41
- mount(document.getElementById('app'), () => C.AppShell({
42
- topbar: C.Topbar({ brand: '247420', leaf: 'gm', items: [['works','#/works']] }),
43
- main: C.HomeView({ /* hero, features, examples — see ./site/content/pages/home.yaml */ }),
44
- status: C.Status({ left: ['main'], right: ['live'] })
45
- }));
46
- ```
47
-
48
- `mount` automatically adds `.ds-247420` to your root.
49
-
50
- ## what's in the box
51
-
52
- - **chrome** — `Topbar`, `Crumb`, `Side`, `Status`, `AppShell`, `Brand`, `Chip`, `Btn`, `Glyph`, `Heading`, `Lede`
53
- - **content** — `Panel`, `Row`, `RowLink`, `Hero`, `Install`, `Receipt`, `Changelog`, `WorksList`, `WritingList`, `Manifesto`, `Section`, `Kpi`, `Table`, `HomeView`, `ProjectView`
54
- - **chat** — `Chat`, `ChatMessage`, `ChatComposer`, `AICat`, `AICatPortrait`
55
- - **file browser** — `FileRow`, `FileGrid`, `FileToolbar`, `FileIcon`, `DropZone`, `UploadProgress`, `EmptyState`, `BreadcrumbPath`, plus modal pieces `FileViewer`, `FilePreviewMedia`, `FilePreviewCode`, `FilePreviewText`, `ConfirmDialog`, `PromptDialog`
56
- - **ui_kits** — `homepage`, `project_page`, `docs`, `blog`, `chat`, `aicat`, `file_browser`. Each is a fully-working buildless example loading the SDK from this repo.
57
-
58
- The file-browser surface (rails by file type, drop-zone upload, modal preview) ships its canonical real-world wiring at [`fsbrowse`](https://github.com/AnEntrypoint/fsbrowse) — Express + busboy backend, the SDK frontend.
59
-
60
- ## use it from a buildless flatspace project
61
-
62
- A canonical example lives at `c:\dev\flatspace-demo`. It has **no `package.json`**. It has a `flatspace.config.mjs`, YAML pages under `config/`, and a `src/theme.mjs` that turns each page into HTML at build-time. CI runs `npx --yes flatspace@latest build` and deploys `dist/`.
63
-
64
- To plug 247420 into that shape, do exactly three things:
65
-
66
- ### 1. Reference the SDK from `<head>` in `src/theme.mjs`
67
-
68
- ```js
69
- export default function render({ site, page }) {
70
- return `<!doctype html>
71
- <html lang="en" class="ds-247420" data-theme="light">
72
- <head>
73
- <meta charset="utf-8">
74
- <meta name="viewport" content="width=device-width, initial-scale=1">
75
- <title>${page.title} — ${site.title}</title>
76
- <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
77
- <script type="importmap">
78
- { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
79
- </script>
80
- </head>
81
- <body>
82
- <div id="app"></div>
83
- <script type="module">
84
- import { mount, components as C } from 'anentrypoint-design';
85
- const data = ${JSON.stringify({ site, page })};
86
- mount(document.getElementById('app'), () => C.AppShell({
87
- topbar: C.Topbar({ brand: data.site.title, items: data.site.nav }),
88
- crumb: C.Crumb({ leaf: data.page.title }),
89
- main: data.page.template === 'home' ? C.HomeView(data.page) : C.Section(data.page),
90
- status: C.Status({ left: ['main'], right: ['live'] }),
91
- }));
92
- </script>
93
- </body>
94
- </html>`;
95
- }
96
- ```
97
-
98
- ### 2. Author pages in YAML
99
-
100
- ```yaml
101
- # config/pages/home.yaml
102
- id: home
103
- title: home
104
- template: home
105
- hero:
106
- heading: tigers
107
- subheading: large striped cats
108
- body: a flatspace site, styled by 247420.
109
- badges: [ { label: encyclopedic }, { label: lowercase }, { label: 100% YAML } ]
110
- features:
111
- heading: why tigers
112
- items:
113
- - { name: stripes, desc: structurally redundant, semiotically loud. }
114
- - { name: silence, desc: we like ambush as a design pattern. }
115
- examples:
116
- heading: pages
117
- items:
118
- - { name: about, href: ./about.html, cta: open }
119
- - { name: species, href: ./species.html, cta: open }
120
- ```
121
-
122
- ### 3. CI workflow (`.github/workflows/build.yml`)
123
-
124
- ```yaml
125
- name: Deploy
126
- on: { push: { branches: [main] }, workflow_dispatch: }
127
- permissions: { contents: read, pages: write, id-token: write }
128
- concurrency: { group: pages, cancel-in-progress: false }
129
- jobs:
130
- build:
131
- runs-on: ubuntu-latest
132
- steps:
133
- - uses: actions/checkout@v4
134
- - uses: actions/setup-node@v4
135
- with: { node-version: '20' }
136
- - run: npx --yes flatspace@latest build
137
- - uses: actions/configure-pages@v5
138
- - uses: actions/upload-pages-artifact@v3
139
- with: { path: ./dist }
140
- deploy:
141
- needs: build
142
- runs-on: ubuntu-latest
143
- environment: { name: github-pages, url: ${{ steps.deployment.outputs.page_url }} }
144
- steps:
145
- - id: deployment
146
- uses: actions/deploy-pages@v4
147
- ```
148
-
149
- That is the whole integration. No `package.json`, no install, no bundler, no copy step. Push a YAML change to `main`, GH Actions builds, GH Pages serves.
150
-
151
- ## components
152
-
153
- Primitives: `Brand`, `Chip`, `Btn`, `Glyph`, `Heading`, `Lede`, `Dot`, `Rail`.
154
- Chrome: `Topbar`, `Crumb`, `Side`, `Status`, `AppShell`.
155
- Surfaces: `Panel`, `Row`, `RowLink`, `Section`, `Install`, `Receipt`, `Changelog`.
156
- Pages: `Hero`, `WorksList`, `WritingList`, `Manifesto`, `HomeView`, `ProjectView`.
157
- Chat: `Chat`, `ChatMessage`, `ChatComposer`, `AICat`, `AICatPortrait`. Helpers: `renderInline`, `fmtBytes`.
158
- Files: `FileIcon`, `FileRow`, `FileGrid`, `FileToolbar`, `DropZone`, `UploadProgress`, `EmptyState`, `BreadcrumbPath`, `FileViewer` (+ `ConfirmDialog` / `PromptDialog` / `FilePreviewMedia` / `FilePreviewCode` / `FilePreviewText`). Helpers: `fileGlyph`, `fmtFileSize`.
159
-
160
- All factories are pure: props in, WebJSX tree out. Component source is split per group under `src/components/<shell|content|chat>.js`; `src/components.js` is a re-export barrel. The 200-line cap applies per module.
161
-
162
- ## chat / markdown / code-highlight
163
-
164
- `Chat({ messages, onSend })` renders the bubble timeline; `ChatComposer({ onSend })` is the input row. Block markdown inside messages is sanitized through `renderMarkdown` (`marked@15` + `DOMPurify@3`, lazy-loaded from jsDelivr ESM on first call) and code blocks are highlighted by Prism (lazy-loaded core + per-language scripts via `ensurePrism` / `highlightAllUnder`). Direct `innerHTML` from chat content is forbidden — DOMPurify is the only XSS gate.
165
-
166
- ```js
167
- import { components as C } from 'anentrypoint-design';
168
-
169
- C.Chat({
170
- messages: [
171
- { role: 'user', text: 'hello' },
172
- { role: 'assistant', text: '```js\nconsole.log(1)\n```' }
173
- ],
174
- onSend: text => /* push to your store, re-render */ null
175
- });
176
- ```
177
-
178
- ## `<ds-chat>` web component
179
-
180
- `src/index.js` auto-registers `<ds-chat>` in any browser context. Set `el.messages = [...]` (or pass JSON via the `messages` attribute) and listen for the bubbling, composed `send` event:
181
-
182
- ```html
183
- <ds-chat id="c"></ds-chat>
184
- <script type="module">
185
- import 'https://unpkg.com/anentrypoint-design@latest/dist/247420.js';
186
- const el = document.getElementById('c');
187
- el.messages = [{ role: 'assistant', text: 'gm.' }];
188
- el.addEventListener('send', e => console.log(e.detail.text));
189
- </script>
190
- ```
191
-
192
- ## ui-kit bootstrap
193
-
194
- `mountKit({ root, view, screen })` is the single entry point every kit uses — it installs styles, scopes the root, runs the WebJSX render loop, and registers the kit on the `window.__debug` registry. Do not roll your own motion / applyDiff / CDN loop in a kit's `app.js`.
195
-
196
- ```js
197
- import { mountKit } from 'anentrypoint-design';
198
- mountKit({ root: document.getElementById('app'), view: () => myView(), screen: 'aicat' });
199
- ```
200
-
201
- ## DeckStage
202
-
203
- ```js
204
- import { registerDeckStage } from 'anentrypoint-design';
205
- await registerDeckStage();
206
- // <deck-stage width="1920" height="1080">…<section>…</section></deck-stage>
207
- ```
208
-
209
- ## tokens (override anywhere)
210
-
211
- The system runs entirely on CSS custom properties under `.ds-247420`. To rebrand a single surface, declare overrides at any level:
212
-
213
- ```html
214
- <div class="ds-247420" style="
215
- --panel-accent: #6FA9FF;
216
- --panel-select: #DCE8FF;
217
- --green: #6FA9FF;
218
- ">
219
- …same components, sky-blue accent…
220
- </div>
221
- ```
222
-
223
- The full token list lives in `colors_and_type.css`. The voice rules and the storytelling pass live in `SKILL.md`.
224
-
225
- ## why scope-prefixed
226
-
227
- Every selector in the bundle is namespaced under `.ds-247420` via PostCSS. The bundle ships Nunito + Archivo + JetBrains Mono + the design tokens **without** colliding with whatever the host app already runs. Add the class to a root element to opt in.
228
-
229
- ## CSS only (no JS)
230
-
231
- ```html
232
- <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
233
- <div class="ds-247420">…</div>
234
- ```
235
-
236
- You get the tokens, primitives, and utility classes. You write the markup.
237
-
238
- ## publishing
239
-
240
- Every push to `main` runs `.github/workflows/publish.yml`:
241
-
242
- 1. Resolves max(local, remote) version, bumps **patch**.
243
- 2. Builds with `scripts/build.mjs` (esbuild + postcss-prefix-selector).
244
- 3. Publishes to npm with `NPM_TOKEN`.
245
- 4. Commits the bump back to `main` and pushes a `vX.Y.Z` tag.
246
-
247
- Skip publish for any commit by including `[skip publish]` in the message; release commits use that automatically to prevent loops.
248
-
249
- ## links
250
-
251
- - live: <https://anentrypoint.github.io/design/>
252
- - npm: <https://www.npmjs.com/package/anentrypoint-design>
253
- - skill: see `SKILL.md` for the full visual paradigm and storytelling rules.
1
+ # 247420
2
+
3
+ The 247420 / AnEntrypoint design system, packaged as a single-file ESM SDK.
4
+
5
+ friendly rounded sans body, monospace only on real code, tonal surfaces over borders, indicator rails for color-coded separation, generous negative space, terminal-flavoured rhythm.
6
+
7
+ we fart in its general direction. ◰
8
+
9
+ ## install (the only step)
10
+
11
+ You have two choices. Both are one line.
12
+
13
+ **npm** (when you already have a bundler):
14
+
15
+ ```bash
16
+ npm install anentrypoint-design
17
+ ```
18
+
19
+ **unpkg** (when you don't, and you don't want one):
20
+
21
+ ```html
22
+ <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
23
+ <script type="importmap">
24
+ { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
25
+ </script>
26
+ ```
27
+
28
+ Add the scope class on a wrapping element and you are done:
29
+
30
+ ```html
31
+ <html class="ds-247420" data-theme="light">
32
+ <body><div id="app"></div></body>
33
+ </html>
34
+ ```
35
+
36
+ ## use it (3-line app)
37
+
38
+ ```js
39
+ import { mount, components as C } from 'anentrypoint-design';
40
+
41
+ mount(document.getElementById('app'), () => C.AppShell({
42
+ topbar: C.Topbar({ brand: '247420', leaf: 'gm', items: [['works','#/works']] }),
43
+ main: C.HomeView({ /* hero, features, examples — see ./site/content/pages/home.yaml */ }),
44
+ status: C.Status({ left: ['main'], right: ['live'] })
45
+ }));
46
+ ```
47
+
48
+ `mount` automatically adds `.ds-247420` to your root.
49
+
50
+ ## what's in the box
51
+
52
+ - **chrome** — `Topbar`, `Crumb`, `Side`, `Status`, `AppShell`, `Brand`, `Chip`, `Btn`, `Glyph`, `Heading`, `Lede`
53
+ - **content** — `Panel`, `Row`, `RowLink`, `Hero`, `Install`, `Receipt`, `Changelog`, `WorksList`, `WritingList`, `Manifesto`, `Section`, `Kpi`, `Table`, `HomeView`, `ProjectView`
54
+ - **chat** — `Chat`, `ChatMessage`, `ChatComposer`, `AICat`, `AICatPortrait`
55
+ - **file browser** — `FileRow`, `FileGrid`, `FileToolbar`, `FileIcon`, `DropZone`, `UploadProgress`, `EmptyState`, `BreadcrumbPath`, plus modal pieces `FileViewer`, `FilePreviewMedia`, `FilePreviewCode`, `FilePreviewText`, `ConfirmDialog`, `PromptDialog`
56
+ - **ui_kits** — `homepage`, `project_page`, `docs`, `blog`, `chat`, `aicat`, `file_browser`. Each is a fully-working buildless example loading the SDK from this repo.
57
+
58
+ The file-browser surface (rails by file type, drop-zone upload, modal preview) ships its canonical real-world wiring at [`fsbrowse`](https://github.com/AnEntrypoint/fsbrowse) — Express + busboy backend, the SDK frontend.
59
+
60
+ ## use it from a buildless flatspace project
61
+
62
+ A canonical example lives at `c:\dev\flatspace-demo`. It has **no `package.json`**. It has a `flatspace.config.mjs`, YAML pages under `config/`, and a `src/theme.mjs` that turns each page into HTML at build-time. CI runs `npx --yes flatspace@latest build` and deploys `dist/`.
63
+
64
+ To plug 247420 into that shape, do exactly three things:
65
+
66
+ ### 1. Reference the SDK from `<head>` in `src/theme.mjs`
67
+
68
+ ```js
69
+ export default function render({ site, page }) {
70
+ return `<!doctype html>
71
+ <html lang="en" class="ds-247420" data-theme="light">
72
+ <head>
73
+ <meta charset="utf-8">
74
+ <meta name="viewport" content="width=device-width, initial-scale=1">
75
+ <title>${page.title} — ${site.title}</title>
76
+ <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
77
+ <script type="importmap">
78
+ { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
79
+ </script>
80
+ </head>
81
+ <body>
82
+ <div id="app"></div>
83
+ <script type="module">
84
+ import { mount, components as C } from 'anentrypoint-design';
85
+ const data = ${JSON.stringify({ site, page })};
86
+ mount(document.getElementById('app'), () => C.AppShell({
87
+ topbar: C.Topbar({ brand: data.site.title, items: data.site.nav }),
88
+ crumb: C.Crumb({ leaf: data.page.title }),
89
+ main: data.page.template === 'home' ? C.HomeView(data.page) : C.Section(data.page),
90
+ status: C.Status({ left: ['main'], right: ['live'] }),
91
+ }));
92
+ </script>
93
+ </body>
94
+ </html>`;
95
+ }
96
+ ```
97
+
98
+ ### 2. Author pages in YAML
99
+
100
+ ```yaml
101
+ # config/pages/home.yaml
102
+ id: home
103
+ title: home
104
+ template: home
105
+ hero:
106
+ heading: tigers
107
+ subheading: large striped cats
108
+ body: a flatspace site, styled by 247420.
109
+ badges: [ { label: encyclopedic }, { label: lowercase }, { label: 100% YAML } ]
110
+ features:
111
+ heading: why tigers
112
+ items:
113
+ - { name: stripes, desc: structurally redundant, semiotically loud. }
114
+ - { name: silence, desc: we like ambush as a design pattern. }
115
+ examples:
116
+ heading: pages
117
+ items:
118
+ - { name: about, href: ./about.html, cta: open }
119
+ - { name: species, href: ./species.html, cta: open }
120
+ ```
121
+
122
+ ### 3. CI workflow (`.github/workflows/build.yml`)
123
+
124
+ ```yaml
125
+ name: Deploy
126
+ on: { push: { branches: [main] }, workflow_dispatch: }
127
+ permissions: { contents: read, pages: write, id-token: write }
128
+ concurrency: { group: pages, cancel-in-progress: false }
129
+ jobs:
130
+ build:
131
+ runs-on: ubuntu-latest
132
+ steps:
133
+ - uses: actions/checkout@v4
134
+ - uses: actions/setup-node@v4
135
+ with: { node-version: '20' }
136
+ - run: npx --yes flatspace@latest build
137
+ - uses: actions/configure-pages@v5
138
+ - uses: actions/upload-pages-artifact@v3
139
+ with: { path: ./dist }
140
+ deploy:
141
+ needs: build
142
+ runs-on: ubuntu-latest
143
+ environment: { name: github-pages, url: ${{ steps.deployment.outputs.page_url }} }
144
+ steps:
145
+ - id: deployment
146
+ uses: actions/deploy-pages@v4
147
+ ```
148
+
149
+ That is the whole integration. No `package.json`, no install, no bundler, no copy step. Push a YAML change to `main`, GH Actions builds, GH Pages serves.
150
+
151
+ ## components
152
+
153
+ Primitives: `Brand`, `Chip`, `Btn`, `Glyph`, `Heading`, `Lede`, `Dot`, `Rail`.
154
+ Chrome: `Topbar`, `Crumb`, `Side`, `Status`, `AppShell`.
155
+ Surfaces: `Panel`, `Row`, `RowLink`, `Section`, `Install`, `Receipt`, `Changelog`.
156
+ Pages: `Hero`, `WorksList`, `WritingList`, `Manifesto`, `HomeView`, `ProjectView`.
157
+ Chat: `Chat`, `ChatMessage`, `ChatComposer`, `AICat`, `AICatPortrait`. Helpers: `renderInline`, `fmtBytes`.
158
+ Files: `FileIcon`, `FileRow`, `FileGrid`, `FileToolbar`, `DropZone`, `UploadProgress`, `EmptyState`, `BreadcrumbPath`, `FileViewer` (+ `ConfirmDialog` / `PromptDialog` / `FilePreviewMedia` / `FilePreviewCode` / `FilePreviewText`). Helpers: `fileGlyph`, `fmtFileSize`.
159
+
160
+ All factories are pure: props in, WebJSX tree out. Component source is split per group under `src/components/<shell|content|chat>.js`; `src/components.js` is a re-export barrel. The 200-line cap applies per module.
161
+
162
+ ## chat / markdown / code-highlight
163
+
164
+ `Chat({ messages, onSend })` renders the bubble timeline; `ChatComposer({ onSend })` is the input row. Block markdown inside messages is sanitized through `renderMarkdown` (`marked@15` + `DOMPurify@3`, lazy-loaded from jsDelivr ESM on first call) and code blocks are highlighted by Prism (lazy-loaded core + per-language scripts via `ensurePrism` / `highlightAllUnder`). Direct `innerHTML` from chat content is forbidden — DOMPurify is the only XSS gate.
165
+
166
+ ```js
167
+ import { components as C } from 'anentrypoint-design';
168
+
169
+ C.Chat({
170
+ messages: [
171
+ { role: 'user', text: 'hello' },
172
+ { role: 'assistant', text: '```js\nconsole.log(1)\n```' }
173
+ ],
174
+ onSend: text => /* push to your store, re-render */ null
175
+ });
176
+ ```
177
+
178
+ ## `<ds-chat>` web component
179
+
180
+ `src/index.js` auto-registers `<ds-chat>` in any browser context. Set `el.messages = [...]` (or pass JSON via the `messages` attribute) and listen for the bubbling, composed `send` event:
181
+
182
+ ```html
183
+ <ds-chat id="c"></ds-chat>
184
+ <script type="module">
185
+ import 'https://unpkg.com/anentrypoint-design@latest/dist/247420.js';
186
+ const el = document.getElementById('c');
187
+ el.messages = [{ role: 'assistant', text: 'gm.' }];
188
+ el.addEventListener('send', e => console.log(e.detail.text));
189
+ </script>
190
+ ```
191
+
192
+ ## ui-kit bootstrap
193
+
194
+ `mountKit({ root, view, screen })` is the single entry point every kit uses — it installs styles, scopes the root, runs the WebJSX render loop, and registers the kit on the `window.__debug` registry. Do not roll your own motion / applyDiff / CDN loop in a kit's `app.js`.
195
+
196
+ ```js
197
+ import { mountKit } from 'anentrypoint-design';
198
+ mountKit({ root: document.getElementById('app'), view: () => myView(), screen: 'aicat' });
199
+ ```
200
+
201
+ ## DeckStage
202
+
203
+ ```js
204
+ import { registerDeckStage } from 'anentrypoint-design';
205
+ await registerDeckStage();
206
+ // <deck-stage width="1920" height="1080">…<section>…</section></deck-stage>
207
+ ```
208
+
209
+ ## tokens (override anywhere)
210
+
211
+ The system runs entirely on CSS custom properties under `.ds-247420`. To rebrand a single surface, declare overrides at any level:
212
+
213
+ ```html
214
+ <div class="ds-247420" style="
215
+ --panel-accent: #6FA9FF;
216
+ --panel-select: #DCE8FF;
217
+ --green: #6FA9FF;
218
+ ">
219
+ …same components, sky-blue accent…
220
+ </div>
221
+ ```
222
+
223
+ The full token list lives in `colors_and_type.css`. The voice rules and the storytelling pass live in `SKILL.md`.
224
+
225
+ ## why scope-prefixed
226
+
227
+ Every selector in the bundle is namespaced under `.ds-247420` via PostCSS. The bundle ships Nunito + Archivo + JetBrains Mono + the design tokens **without** colliding with whatever the host app already runs. Add the class to a root element to opt in.
228
+
229
+ ## CSS only (no JS)
230
+
231
+ ```html
232
+ <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
233
+ <div class="ds-247420">…</div>
234
+ ```
235
+
236
+ You get the tokens, primitives, and utility classes. You write the markup.
237
+
238
+ ## publishing
239
+
240
+ Every push to `main` runs `.github/workflows/publish.yml`:
241
+
242
+ 1. Resolves max(local, remote) version, bumps **patch**.
243
+ 2. Builds with `scripts/build.mjs` (esbuild + postcss-prefix-selector).
244
+ 3. Publishes to npm with `NPM_TOKEN`.
245
+ 4. Commits the bump back to `main` and pushes a `vX.Y.Z` tag.
246
+
247
+ Skip publish for any commit by including `[skip publish]` in the message; release commits use that automatically to prevent loops.
248
+
249
+ ## links
250
+
251
+ - live: <https://anentrypoint.github.io/design/>
252
+ - npm: <https://www.npmjs.com/package/anentrypoint-design>
253
+ - skill: see `SKILL.md` for the full visual paradigm and storytelling rules.