anentrypoint-design 0.0.122 → 0.0.125
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +253 -253
- package/app-shell.css +977 -594
- package/colors_and_type.css +226 -226
- package/community.css +933 -2255
- package/dist/247420.css +2322 -3075
- package/dist/247420.js +14 -14
- package/package.json +80 -80
- package/src/bootstrap.js +25 -25
- package/src/components/chat.js +199 -199
- package/src/components/community.js +190 -208
- package/src/components/content.js +269 -269
- package/src/components/editor-primitives.js +100 -0
- package/src/components/files-modals.js +107 -107
- package/src/components/files.js +118 -118
- package/src/components/freddie/helpers.js +50 -50
- package/src/components/freddie.js +33 -33
- package/src/components/shell.js +117 -117
- package/src/components/theme-toggle.js +70 -70
- package/src/components.js +59 -67
- package/src/debug.js +30 -30
- package/src/deck-stage.js +21 -21
- package/src/highlight.js +65 -32
- package/src/index.js +86 -86
- package/src/kits/os/about-app.js +52 -52
- package/src/kits/os/app-panes.css +152 -152
- package/src/kits/os/browser-app.js +58 -58
- package/src/kits/os/files-app.js +44 -44
- package/src/kits/os/freddie/helpers.js +59 -59
- package/src/kits/os/freddie/pages-chat.js +143 -143
- package/src/kits/os/freddie/pages-core.js +101 -101
- package/src/kits/os/freddie/pages-os.js +51 -51
- package/src/kits/os/freddie/pages-tools.js +183 -183
- package/src/kits/os/freddie/routes.js +24 -24
- package/src/kits/os/freddie-dashboard.css +51 -51
- package/src/kits/os/freddie-dashboard.js +101 -101
- package/src/kits/os/icons.js +17 -17
- package/src/kits/os/index.js +17 -17
- package/src/kits/os/launcher.css +61 -61
- package/src/kits/os/launcher.js +79 -79
- package/src/kits/os/monitor-app.js +34 -34
- package/src/kits/os/shell.js +214 -214
- package/src/kits/os/terminal-app.js +45 -45
- package/src/kits/os/theme.css +450 -450
- package/src/kits/os/validate.css +19 -19
- package/src/kits/os/validator-app.js +55 -55
- package/src/kits/os/wm.css +115 -115
- package/src/kits/os/wm.js +111 -111
- package/src/markdown.js +39 -39
- package/src/motion.js +35 -35
- package/src/page-html.js +196 -196
- package/src/styles.js +25 -25
- package/src/theme.js +99 -99
- package/src/web-components/ds-chat.js +116 -116
- package/dist/.nojekyll +0 -0
- package/dist/app-shell.css +0 -594
- package/dist/colors_and_type.css +0 -197
- package/dist/favicon.svg +0 -1
- package/dist/index.html +0 -308
- package/dist/preview/buttons.html +0 -28
- package/dist/preview/colors-core.html +0 -45
- package/dist/preview/colors-lore.html +0 -28
- package/dist/preview/colors-semantic.html +0 -34
- package/dist/preview/dateline.html +0 -19
- package/dist/preview/dropzone.html +0 -30
- package/dist/preview/file-grid.html +0 -19
- package/dist/preview/file-row.html +0 -20
- package/dist/preview/file-toolbar.html +0 -40
- package/dist/preview/file-viewer.html +0 -31
- package/dist/preview/header.html +0 -24
- package/dist/preview/icons-unicode.html +0 -26
- package/dist/preview/index-row.html +0 -25
- package/dist/preview/inputs.html +0 -22
- package/dist/preview/manifesto.html +0 -52
- package/dist/preview/motion-default.js +0 -106
- package/dist/preview/rules.html +0 -16
- package/dist/preview/spacing.html +0 -18
- package/dist/preview/stamps-lore.html +0 -20
- package/dist/preview/stamps.html +0 -14
- package/dist/preview/theme-ink.html +0 -15
- package/dist/preview/type-display.html +0 -16
- package/dist/preview/type-mono.html +0 -15
- package/dist/preview/type-prose.html +0 -11
- package/dist/preview/type-scale.html +0 -20
- package/dist/preview/wordmarks.html +0 -28
- package/dist/robots.txt +0 -8
- package/dist/site/content/globals/navigation.yaml +0 -5
- package/dist/site/content/globals/site.yaml +0 -16
- package/dist/site/content/pages/freddie.yaml +0 -88
- package/dist/site/content/pages/home.yaml +0 -190
- package/dist/site/theme.mjs +0 -368
- package/dist/sitemap.xml +0 -31
- package/dist/slides/deck-stage-overlay.js +0 -63
- package/dist/slides/deck-stage-state.js +0 -81
- package/dist/slides/deck-stage-style.js +0 -117
- package/dist/slides/deck-stage.js +0 -159
- package/dist/slides/index.html +0 -276
- package/dist/src/bootstrap.js +0 -25
- package/dist/src/components/chat.js +0 -199
- package/dist/src/components/community.js +0 -167
- package/dist/src/components/content.js +0 -213
- package/dist/src/components/files-modals.js +0 -107
- package/dist/src/components/files.js +0 -118
- package/dist/src/components/freddie/helpers.js +0 -50
- package/dist/src/components/freddie.js +0 -33
- package/dist/src/components/shell.js +0 -117
- package/dist/src/components/theme-toggle.js +0 -70
- package/dist/src/components.js +0 -52
- package/dist/src/debug.js +0 -30
- package/dist/src/deck-stage.js +0 -21
- package/dist/src/highlight.js +0 -32
- package/dist/src/index.js +0 -86
- package/dist/src/kits/os/about-app.js +0 -52
- package/dist/src/kits/os/app-panes.css +0 -152
- package/dist/src/kits/os/browser-app.js +0 -58
- package/dist/src/kits/os/files-app.js +0 -44
- package/dist/src/kits/os/freddie/helpers.js +0 -59
- package/dist/src/kits/os/freddie/pages-chat.js +0 -143
- package/dist/src/kits/os/freddie/pages-core.js +0 -101
- package/dist/src/kits/os/freddie/pages-os.js +0 -51
- package/dist/src/kits/os/freddie/pages-tools.js +0 -183
- package/dist/src/kits/os/freddie/routes.js +0 -24
- package/dist/src/kits/os/freddie-dashboard.css +0 -51
- package/dist/src/kits/os/freddie-dashboard.js +0 -101
- package/dist/src/kits/os/icons.js +0 -17
- package/dist/src/kits/os/index.js +0 -5
- package/dist/src/kits/os/launcher.css +0 -61
- package/dist/src/kits/os/launcher.js +0 -79
- package/dist/src/kits/os/monitor-app.js +0 -34
- package/dist/src/kits/os/shell.js +0 -214
- package/dist/src/kits/os/terminal-app.js +0 -45
- package/dist/src/kits/os/theme.css +0 -412
- package/dist/src/kits/os/validate.css +0 -19
- package/dist/src/kits/os/validator-app.js +0 -55
- package/dist/src/kits/os/wm.css +0 -115
- package/dist/src/kits/os/wm.js +0 -111
- package/dist/src/markdown.js +0 -39
- package/dist/src/motion.js +0 -35
- package/dist/src/page-html.js +0 -196
- package/dist/src/styles.js +0 -25
- package/dist/src/theme.js +0 -99
- package/dist/src/web-components/ds-chat.js +0 -45
- package/dist/ui_kits/aicat/README.md +0 -7
- package/dist/ui_kits/aicat/app.js +0 -156
- package/dist/ui_kits/aicat/index.html +0 -26
- package/dist/ui_kits/aicat/sample-square.png +0 -0
- package/dist/ui_kits/aicat/sample-svg.svg +0 -1
- package/dist/ui_kits/aicat/sample.pdf +0 -32
- package/dist/ui_kits/blog/README.md +0 -3
- package/dist/ui_kits/blog/index.html +0 -90
- package/dist/ui_kits/chat/README.md +0 -5
- package/dist/ui_kits/chat/app.js +0 -110
- package/dist/ui_kits/chat/index.html +0 -26
- package/dist/ui_kits/chat/sample-square.png +0 -0
- package/dist/ui_kits/chat/sample-svg.svg +0 -1
- package/dist/ui_kits/chat/sample.pdf +0 -32
- package/dist/ui_kits/community/app.js +0 -134
- package/dist/ui_kits/community/index.html +0 -24
- package/dist/ui_kits/dashboard/app.js +0 -92
- package/dist/ui_kits/dashboard/index.html +0 -26
- package/dist/ui_kits/docs/README.md +0 -3
- package/dist/ui_kits/docs/index.html +0 -123
- package/dist/ui_kits/error_404/app.js +0 -56
- package/dist/ui_kits/error_404/index.html +0 -26
- package/dist/ui_kits/file_browser/README.md +0 -48
- package/dist/ui_kits/file_browser/app.js +0 -231
- package/dist/ui_kits/file_browser/index.html +0 -33
- package/dist/ui_kits/gallery/app.js +0 -121
- package/dist/ui_kits/gallery/index.html +0 -26
- package/dist/ui_kits/homepage/README.md +0 -7
- package/dist/ui_kits/homepage/app.js +0 -167
- package/dist/ui_kits/homepage/index.html +0 -46
- package/dist/ui_kits/project_page/README.md +0 -3
- package/dist/ui_kits/project_page/app.js +0 -154
- package/dist/ui_kits/project_page/index.html +0 -45
- package/dist/ui_kits/search/app.js +0 -107
- package/dist/ui_kits/search/index.html +0 -26
- package/dist/ui_kits/settings/app.js +0 -133
- package/dist/ui_kits/settings/index.html +0 -26
- package/dist/ui_kits/signin/app.js +0 -115
- package/dist/ui_kits/signin/index.html +0 -26
- package/dist/ui_kits/slide_deck/app.js +0 -174
- package/dist/ui_kits/slide_deck/index.html +0 -26
- package/dist/ui_kits/system_primer/app.js +0 -152
- package/dist/ui_kits/system_primer/index.html +0 -26
- package/dist/ui_kits/terminal/app.js +0 -150
- package/dist/ui_kits/terminal/index.html +0 -26
- package/dist/vendor/webjsx/applyDiff.js +0 -182
- package/dist/vendor/webjsx/attributes.js +0 -154
- package/dist/vendor/webjsx/constants.js +0 -4
- package/dist/vendor/webjsx/createDOMElement.js +0 -52
- package/dist/vendor/webjsx/createElement.js +0 -75
- package/dist/vendor/webjsx/elementTags.js +0 -115
- package/dist/vendor/webjsx/factory.js +0 -6
- package/dist/vendor/webjsx/index.js +0 -6
- package/dist/vendor/webjsx/jsx-dev-runtime.js +0 -2
- package/dist/vendor/webjsx/jsx-runtime.js +0 -30
- package/dist/vendor/webjsx/jsx.js +0 -2
- package/dist/vendor/webjsx/package.json +0 -39
- package/dist/vendor/webjsx/renderSuspension.js +0 -25
- package/dist/vendor/webjsx/types.js +0 -5
- package/dist/vendor/webjsx/utils.js +0 -84
- package/src/components/overlays.js +0 -151
- package/src/components/surfaces.js +0 -399
- 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.
|