anentrypoint-design 0.0.116 → 0.0.118

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 (200) hide show
  1. package/README.md +253 -253
  2. package/app-shell.css +594 -594
  3. package/colors_and_type.css +226 -226
  4. package/community.css +933 -0
  5. package/dist/.nojekyll +0 -0
  6. package/dist/247420.css +1626 -691
  7. package/dist/247420.js +12 -12
  8. package/dist/app-shell.css +594 -0
  9. package/dist/colors_and_type.css +197 -0
  10. package/dist/favicon.svg +1 -0
  11. package/dist/index.html +308 -0
  12. package/dist/preview/buttons.html +28 -0
  13. package/dist/preview/colors-core.html +45 -0
  14. package/dist/preview/colors-lore.html +28 -0
  15. package/dist/preview/colors-semantic.html +34 -0
  16. package/dist/preview/dateline.html +19 -0
  17. package/dist/preview/dropzone.html +30 -0
  18. package/dist/preview/file-grid.html +19 -0
  19. package/dist/preview/file-row.html +20 -0
  20. package/dist/preview/file-toolbar.html +40 -0
  21. package/dist/preview/file-viewer.html +31 -0
  22. package/dist/preview/header.html +24 -0
  23. package/dist/preview/icons-unicode.html +26 -0
  24. package/dist/preview/index-row.html +25 -0
  25. package/dist/preview/inputs.html +22 -0
  26. package/dist/preview/manifesto.html +52 -0
  27. package/dist/preview/motion-default.js +106 -0
  28. package/dist/preview/rules.html +16 -0
  29. package/dist/preview/spacing.html +18 -0
  30. package/dist/preview/stamps-lore.html +20 -0
  31. package/dist/preview/stamps.html +14 -0
  32. package/dist/preview/theme-ink.html +15 -0
  33. package/dist/preview/type-display.html +16 -0
  34. package/dist/preview/type-mono.html +15 -0
  35. package/dist/preview/type-prose.html +11 -0
  36. package/dist/preview/type-scale.html +20 -0
  37. package/dist/preview/wordmarks.html +28 -0
  38. package/dist/robots.txt +8 -0
  39. package/dist/site/content/globals/navigation.yaml +5 -0
  40. package/dist/site/content/globals/site.yaml +16 -0
  41. package/dist/site/content/pages/freddie.yaml +88 -0
  42. package/dist/site/content/pages/home.yaml +190 -0
  43. package/dist/site/theme.mjs +368 -0
  44. package/dist/sitemap.xml +31 -0
  45. package/dist/slides/deck-stage-overlay.js +63 -0
  46. package/dist/slides/deck-stage-state.js +81 -0
  47. package/dist/slides/deck-stage-style.js +117 -0
  48. package/dist/slides/deck-stage.js +159 -0
  49. package/dist/slides/index.html +276 -0
  50. package/dist/src/bootstrap.js +25 -0
  51. package/dist/src/components/chat.js +199 -0
  52. package/dist/src/components/community.js +167 -0
  53. package/dist/src/components/content.js +213 -0
  54. package/dist/src/components/files-modals.js +107 -0
  55. package/dist/src/components/files.js +118 -0
  56. package/dist/src/components/freddie/helpers.js +50 -0
  57. package/dist/src/components/freddie.js +33 -0
  58. package/dist/src/components/shell.js +117 -0
  59. package/dist/src/components/theme-toggle.js +70 -0
  60. package/dist/src/components.js +52 -0
  61. package/dist/src/debug.js +30 -0
  62. package/dist/src/deck-stage.js +21 -0
  63. package/dist/src/highlight.js +32 -0
  64. package/dist/src/index.js +86 -0
  65. package/dist/src/kits/os/about-app.js +52 -0
  66. package/dist/src/kits/os/app-panes.css +152 -0
  67. package/dist/src/kits/os/browser-app.js +58 -0
  68. package/dist/src/kits/os/files-app.js +44 -0
  69. package/dist/src/kits/os/freddie/helpers.js +59 -0
  70. package/dist/src/kits/os/freddie/pages-chat.js +143 -0
  71. package/dist/src/kits/os/freddie/pages-core.js +101 -0
  72. package/dist/src/kits/os/freddie/pages-os.js +51 -0
  73. package/dist/src/kits/os/freddie/pages-tools.js +183 -0
  74. package/dist/src/kits/os/freddie/routes.js +24 -0
  75. package/dist/src/kits/os/freddie-dashboard.css +51 -0
  76. package/dist/src/kits/os/freddie-dashboard.js +101 -0
  77. package/dist/src/kits/os/icons.js +17 -0
  78. package/dist/src/kits/os/index.js +5 -0
  79. package/dist/src/kits/os/launcher.css +61 -0
  80. package/dist/src/kits/os/launcher.js +79 -0
  81. package/dist/src/kits/os/monitor-app.js +34 -0
  82. package/dist/src/kits/os/shell.js +214 -0
  83. package/dist/src/kits/os/terminal-app.js +45 -0
  84. package/dist/src/kits/os/theme.css +412 -0
  85. package/dist/src/kits/os/validate.css +19 -0
  86. package/dist/src/kits/os/validator-app.js +55 -0
  87. package/dist/src/kits/os/wm.css +115 -0
  88. package/dist/src/kits/os/wm.js +111 -0
  89. package/dist/src/markdown.js +39 -0
  90. package/dist/src/motion.js +35 -0
  91. package/dist/src/page-html.js +196 -0
  92. package/dist/src/styles.js +25 -0
  93. package/dist/src/theme.js +99 -0
  94. package/dist/src/web-components/ds-chat.js +45 -0
  95. package/dist/ui_kits/aicat/README.md +7 -0
  96. package/dist/ui_kits/aicat/app.js +156 -0
  97. package/dist/ui_kits/aicat/index.html +26 -0
  98. package/dist/ui_kits/aicat/sample-square.png +0 -0
  99. package/dist/ui_kits/aicat/sample-svg.svg +1 -0
  100. package/dist/ui_kits/aicat/sample.pdf +32 -0
  101. package/dist/ui_kits/blog/README.md +3 -0
  102. package/dist/ui_kits/blog/index.html +90 -0
  103. package/dist/ui_kits/chat/README.md +5 -0
  104. package/dist/ui_kits/chat/app.js +110 -0
  105. package/dist/ui_kits/chat/index.html +26 -0
  106. package/dist/ui_kits/chat/sample-square.png +0 -0
  107. package/dist/ui_kits/chat/sample-svg.svg +1 -0
  108. package/dist/ui_kits/chat/sample.pdf +32 -0
  109. package/dist/ui_kits/community/app.js +134 -0
  110. package/dist/ui_kits/community/index.html +24 -0
  111. package/dist/ui_kits/dashboard/app.js +92 -0
  112. package/dist/ui_kits/dashboard/index.html +26 -0
  113. package/dist/ui_kits/docs/README.md +3 -0
  114. package/dist/ui_kits/docs/index.html +123 -0
  115. package/dist/ui_kits/error_404/app.js +56 -0
  116. package/dist/ui_kits/error_404/index.html +26 -0
  117. package/dist/ui_kits/file_browser/README.md +48 -0
  118. package/dist/ui_kits/file_browser/app.js +231 -0
  119. package/dist/ui_kits/file_browser/index.html +33 -0
  120. package/dist/ui_kits/gallery/app.js +121 -0
  121. package/dist/ui_kits/gallery/index.html +26 -0
  122. package/dist/ui_kits/homepage/README.md +7 -0
  123. package/dist/ui_kits/homepage/app.js +167 -0
  124. package/dist/ui_kits/homepage/index.html +46 -0
  125. package/dist/ui_kits/project_page/README.md +3 -0
  126. package/dist/ui_kits/project_page/app.js +154 -0
  127. package/dist/ui_kits/project_page/index.html +45 -0
  128. package/dist/ui_kits/search/app.js +107 -0
  129. package/dist/ui_kits/search/index.html +26 -0
  130. package/dist/ui_kits/settings/app.js +133 -0
  131. package/dist/ui_kits/settings/index.html +26 -0
  132. package/dist/ui_kits/signin/app.js +115 -0
  133. package/dist/ui_kits/signin/index.html +26 -0
  134. package/dist/ui_kits/slide_deck/app.js +174 -0
  135. package/dist/ui_kits/slide_deck/index.html +26 -0
  136. package/dist/ui_kits/system_primer/app.js +152 -0
  137. package/dist/ui_kits/system_primer/index.html +26 -0
  138. package/dist/ui_kits/terminal/app.js +150 -0
  139. package/dist/ui_kits/terminal/index.html +26 -0
  140. package/dist/vendor/webjsx/applyDiff.js +182 -0
  141. package/dist/vendor/webjsx/attributes.js +154 -0
  142. package/dist/vendor/webjsx/constants.js +4 -0
  143. package/dist/vendor/webjsx/createDOMElement.js +52 -0
  144. package/dist/vendor/webjsx/createElement.js +75 -0
  145. package/dist/vendor/webjsx/elementTags.js +115 -0
  146. package/dist/vendor/webjsx/factory.js +6 -0
  147. package/dist/vendor/webjsx/index.js +6 -0
  148. package/dist/vendor/webjsx/jsx-dev-runtime.js +2 -0
  149. package/dist/vendor/webjsx/jsx-runtime.js +30 -0
  150. package/dist/vendor/webjsx/jsx.js +2 -0
  151. package/dist/vendor/webjsx/package.json +39 -0
  152. package/dist/vendor/webjsx/renderSuspension.js +25 -0
  153. package/dist/vendor/webjsx/types.js +5 -0
  154. package/dist/vendor/webjsx/utils.js +84 -0
  155. package/package.json +80 -78
  156. package/src/bootstrap.js +25 -25
  157. package/src/components/chat.js +199 -199
  158. package/src/components/community.js +190 -167
  159. package/src/components/content.js +213 -213
  160. package/src/components/files-modals.js +107 -107
  161. package/src/components/files.js +118 -118
  162. package/src/components/freddie/helpers.js +50 -50
  163. package/src/components/freddie.js +33 -33
  164. package/src/components/shell.js +117 -117
  165. package/src/components/theme-toggle.js +70 -70
  166. package/src/components.js +52 -52
  167. package/src/debug.js +30 -30
  168. package/src/deck-stage.js +21 -21
  169. package/src/highlight.js +32 -32
  170. package/src/index.js +86 -86
  171. package/src/kits/os/about-app.js +52 -52
  172. package/src/kits/os/app-panes.css +152 -152
  173. package/src/kits/os/browser-app.js +58 -58
  174. package/src/kits/os/files-app.js +44 -44
  175. package/src/kits/os/freddie/helpers.js +59 -59
  176. package/src/kits/os/freddie/pages-chat.js +143 -143
  177. package/src/kits/os/freddie/pages-core.js +101 -101
  178. package/src/kits/os/freddie/pages-os.js +51 -51
  179. package/src/kits/os/freddie/pages-tools.js +183 -183
  180. package/src/kits/os/freddie/routes.js +24 -24
  181. package/src/kits/os/freddie-dashboard.css +51 -51
  182. package/src/kits/os/freddie-dashboard.js +101 -101
  183. package/src/kits/os/icons.js +17 -17
  184. package/src/kits/os/index.js +17 -17
  185. package/src/kits/os/launcher.css +61 -61
  186. package/src/kits/os/launcher.js +79 -79
  187. package/src/kits/os/monitor-app.js +34 -34
  188. package/src/kits/os/shell.js +214 -214
  189. package/src/kits/os/terminal-app.js +45 -45
  190. package/src/kits/os/theme.css +450 -450
  191. package/src/kits/os/validate.css +19 -19
  192. package/src/kits/os/validator-app.js +55 -55
  193. package/src/kits/os/wm.css +115 -115
  194. package/src/kits/os/wm.js +111 -111
  195. package/src/markdown.js +39 -39
  196. package/src/motion.js +35 -35
  197. package/src/page-html.js +196 -196
  198. package/src/styles.js +25 -25
  199. package/src/theme.js +99 -99
  200. package/src/web-components/ds-chat.js +116 -45
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.