components

7.8 KB

1. # components.hybriel.worldapi.org
3. Hybriel components, developed standalone (CONCEPT.md). The home lists them; each component has a demo page, a README
4. and a browser gate. Apps vendor a component by copying its folder. https://components.hybriel.worldapi.org
6. ## Components
7. | Component | Demo | README |
8. |-----------|------|--------|
9. | Month view | `/month-view` | `components/month-view/README.md` (also `/month-view/README.md`) |
10. | Date picker | `/date-picker` | `components/date-picker/README.md` (also `/date-picker/README.md`) |
11. | Date range picker | `/range-picker` | `components/range-picker/README.md` (also `/range-picker/README.md`) |
12. | Pagination | `/pagination` | `components/pagination/README.md` (also `/pagination/README.md`) |
13. | Markdown editor | `/md-editor` | `components/md-editor/README.md` (also `/md-editor/README.md`) |
14. | Code editor | `/code-editor` | `components/code-editor/README.md` (also `/code-editor/README.md`) |
15. | Modal | `/modal` | `components/modal/README.md` (also `/modal/README.md`) |
17. The Markdown editor takes files and images (drop, paste, File button) through `emit server mdUpload` (hybriel#94). The one-file upload (`components/file-upload/`, ticket #4) sends its file through `emit server saveFile` (hybriel#94). The multi-file upload (#5) is not built yet.
19. ## Layout
20. - `project.hl` routes · `styles.hl` the site's page layout only (tokens from `shared/tokens.hl`, accent = light blue) · `components/main.hl` shell ·
21. `components/index.hl` the home · `components/<name>/` one folder per component (component, demo, script, README).
22. - To add a component: its folder, a demo route + a README route in `project.hl`, one entry in `components/index.hl`,
23. its own `Style` in its file, checks in `tests/browser.mjs`.
24. - `bin/hybriel` + `plugins/` (core crypto data fs http http1 proc time web) are vendored = hybriel **master 06617221**
25. (2026-10-03, antcolony mission 074: plugin allocators 3a781359 + 413f60e4 (#126), http1 773de63e (request owns its parse —
26. uploads no longer retained), mpackdb 2cb7ae5e, f0ac2d2d (plugin ABI field — bin and .so must match); no lambda semantics change;
27. sha256 `21059cc7…d77bdb`, built the same way from `git archive 06617221`; previous copy (190aa11d) in `.scratch/pre-074/`. Gate
28. `COMPONENTS_GATE_PORT=8760 COMPONENTS_GATE_CHROME=8761-8769 node tests/browser.mjs` → 220/0. Memory: `LOADS=N UPLOADS=N [IDLE=s]
29. node .scratch/w074/memtest.mjs <vendor dir with bin/+plugins/> <label>` (port 8760, Chrome 8761–8769; needs the live storage copy in
30. `.scratch/w074/live/storage`, deleted after the run): 2000 loads 184 → 205 MB flat, 400 × 1 MiB uploads level at ~363–403 MB
31. (old 190aa11d: +1 MB per upload, 829 MB).
32. Before: master 190aa11d (2026-10-02, antcolony mission 072: fc838894 GC correctness (string index / plugin error read freed memory), 038d84b3 #126
33. returned closure scopes, #127 d98926c6/04df4428; no lambda semantics change since 8efba065), sha256 `860f5e61…0a23626`,
34. built read-only from `git archive 190aa11d`; previous copy (8efba065) in `.scratch/pre-072/`. Gate
35. `COMPONENTS_GATE_PORT=8720 COMPONENTS_GATE_CHROME=8721-8729 node tests/browser.mjs` 220/0. Memory:
36. `node .scratch/w072/memtest.mjs <vendor dir> <label>` (port 8720, Chrome 8721-8728; LOADS/UPLOADS/IDLE; needs the live
37. storage copy in `.scratch/w072/live/storage`, deleted after each run — re-tar it): 200 loads new 182 → 205 MB (old 288 → 353);
38. uploads still retain RAM: 400 × 1 MiB new 185 → 751 MB (old 8efba065 277 → 713 MB, HWM 823), nothing freed after 60 s idle.
39. Before: master 8efba065 (2026-10-02, antcolony mission 069: #126 the collector also runs by bytes — memory is freed now; #48 a lambda PARAMETER
40. COPIES its argument like a method does, write `(&p) =>` when the caller must see the change; #112 #117 #119 #120 opt-in, not
41. used; earlier: #113, #115/#116, #118, SVG namespace, #111, #103–#106, #94, #83 hashed URLs, #82).
42. Built from a read-only `git archive master` with `zig build -Doptimize=ReleaseFast -Dtarget=x86_64-linux-gnu.2.39` in
43. `native/`; binary sha256 `231fb9f2…395546fc6`. **No local patch**: a re-vendor = copy binary + plugins (the ones listed;
44. the build also refreshes their `.so`), run the gate. Previous copy: `.scratch/pre-069/` (master ff51cf46).
45. - **#48 lambda rule**: the app has 5 lambdas (`python3 .scratch/w069/lambdas.py` / `lambdas2.py` list them and flag writes
46. to parameters); none writes to a parameter, so none needs `&`. Components are methods / faces, which already copied.
47. Probe: `bin/hybriel .scratch/w069/probe48.hl` → `copy: n=1 len=0` = #48 active.
48. - **Memory check** (RSS of one server, live storage copy, 200 loads of the 9 pages + 100 file-upload drops of 1 MiB):
49. `node .scratch/w069/memtest.mjs <dir with bin/ + plugins/> <label>` (port 8730, Chrome 8722–8729; env LOADS, UPLOADS,
50. IDLE; it copies the app without .env into `.scratch/w069/mem-<label>/` — copy the live `storage/` to
51. `.scratch/w069/live/storage` first, delete both afterwards).
53. ## PWA (antcolony mission 046)
54. Installable, the same way as calendar/tracker: hl:web's own manifest (`/__hl/manifest.webmanifest`) + service worker
55. (`/__hl/sw.js`) from settings in `project.hl`, no JavaScript of ours.
56. - `appTitle` "Hybriel components", `appShortName` "Components", `appIcons` (192 + 512 PNG, each `any` + `maskable`),
57. `appTouchIcon` (180), `appFavicon` `/icons/favicon.svg`, `appThemeColor` = token `darker` (the header,
58. rgb(15, 20, 25)), `appBackgroundColor` = token `dark`. `/favicon.ico` is a real icon (16/32/48). Each icon has a `file` route.
59. - **Icons** (`icons/`): `icon.svg` = source (512, hand-written: three stacked building blocks with studs, green-light
60. `#b5cea8` on rgb(25,30,35), all inside the maskable safe circle r = 204 → one image for `any` + `maskable`);
61. `favicon.svg` = the same drawing cropped on a rounded tile. Rendered on Loreana:
62. ```bash
63. rsvg-convert -w 192 -h 192 icons/icon.svg -o icons/icon-192.png
64. rsvg-convert -w 512 -h 512 icons/icon.svg -o icons/icon-512.png
65. rsvg-convert -w 180 -h 180 icons/icon.svg -o icons/apple-touch-icon.png
66. for s in 16 32 48; do rsvg-convert -w $s -h $s icons/favicon.svg -o /tmp/fav-$s.png; done
67. magick /tmp/fav-16.png /tmp/fav-32.png /tmp/fav-48.png icons/favicon.ico
68. ```
69. - **Offline**: `offline = [ Index ]` — the worker keeps the shell and `/` (the home list). Without a network `/` opens
70. from the cache and says "You are offline. The demos need the network." (`components/main.hl`: an invisible `netProbe`
71. runs a 1 s CSS animation, each `animationiteration` reads `navigator.onLine` — hl:web has no connection state / mount
72. hook). Every demo page offline gets hl:web's "Unavailable offline" page.
73. - Gate: the `pwa:` / `offline:` checks at the end of `tests/browser.mjs` (manifest + icons over HTTP, Chrome's
74. installability + manifest parse, worker scope `/`, then CDP offline + the server stopped → reload of `/` shows the
75. shell; screenshots `.scratch/gate-pwa-phone-{online,offline}.png`, 390 px).
77. ## Run, test, deploy
78. - `COMPONENTS_PORT=8700 ./bin/hybriel project.hl` (env: `COMPONENTS_WATCH=0` no watcher, `HL_HOST`).
79. - `node tests/browser.mjs` — the gate: own server + headless Chrome (ports 8700, 8701–8709). Other ports (workers):
80. `COMPONENTS_GATE_PORT=8720 COMPONENTS_GATE_CHROME=8721-8729 node tests/browser.mjs`.
81. - `./deploy.sh` on Loreana (architect): gate → backup → rsync → `docker compose up -d --build` on Byrodin (port 45006) → URL 200.
83. ## History and worker briefs
84. - `LOG.md` — append-only history, one dated line per step (moved here from the antcolony LOG on 2026-10-01).
85. - `missions/NNN-*.md` — worker briefs for this app; `reports/NNN-*.md` — their reports (same name). Numbered per
86. project since 2026-10-01 (antcolony#40); older text, code comments and commits use the old antcolony numbers →
87. map: `/media/STORAGE/projects/antcolony-docs/docs/mission-map.md` (Byrodin: `/CONTAINERS/projects/antcolony/docs/mission-map.md`).