components

6.1 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 8efba065**
25. (2026-10-02, antcolony mission 069: #126 the collector also runs by bytes — memory is freed now; #48 a lambda PARAMETER
26. COPIES its argument like a method does, write `(&p) =>` when the caller must see the change; #112 #117 #119 #120 opt-in, not
27. used; earlier: #113, #115/#116, #118, SVG namespace, #111, #103–#106, #94, #83 hashed URLs, #82).
28. Built from a read-only `git archive master` with `zig build -Doptimize=ReleaseFast -Dtarget=x86_64-linux-gnu.2.39` in
29. `native/`; binary sha256 `231fb9f2…395546fc6`. **No local patch**: a re-vendor = copy binary + plugins (the ones listed;
30. the build also refreshes their `.so`), run the gate. Previous copy: `.scratch/pre-069/` (master ff51cf46).
31. - **#48 lambda rule**: the app has 5 lambdas (`python3 .scratch/w069/lambdas.py` / `lambdas2.py` list them and flag writes
32. to parameters); none writes to a parameter, so none needs `&`. Components are methods / faces, which already copied.
33. Probe: `bin/hybriel .scratch/w069/probe48.hl` → `copy: n=1 len=0` = #48 active.
34. - **Memory check** (RSS of one server, live storage copy, 200 loads of the 9 pages + 100 file-upload drops of 1 MiB):
35. `node .scratch/w069/memtest.mjs <dir with bin/ + plugins/> <label>` (port 8730, Chrome 8722–8729; env LOADS, UPLOADS,
36. IDLE; it copies the app without .env into `.scratch/w069/mem-<label>/` — copy the live `storage/` to
37. `.scratch/w069/live/storage` first, delete both afterwards).
39. ## PWA (antcolony mission 046)
40. Installable, the same way as calendar/tracker: hl:web's own manifest (`/__hl/manifest.webmanifest`) + service worker
41. (`/__hl/sw.js`) from settings in `project.hl`, no JavaScript of ours.
42. - `appTitle` "Hybriel components", `appShortName` "Components", `appIcons` (192 + 512 PNG, each `any` + `maskable`),
43. `appTouchIcon` (180), `appFavicon` `/icons/favicon.svg`, `appThemeColor` = token `darker` (the header,
44. rgb(15, 20, 25)), `appBackgroundColor` = token `dark`. `/favicon.ico` is a real icon (16/32/48). Each icon has a `file` route.
45. - **Icons** (`icons/`): `icon.svg` = source (512, hand-written: three stacked building blocks with studs, green-light
46. `#b5cea8` on rgb(25,30,35), all inside the maskable safe circle r = 204 → one image for `any` + `maskable`);
47. `favicon.svg` = the same drawing cropped on a rounded tile. Rendered on Loreana:
48. ```bash
49. rsvg-convert -w 192 -h 192 icons/icon.svg -o icons/icon-192.png
50. rsvg-convert -w 512 -h 512 icons/icon.svg -o icons/icon-512.png
51. rsvg-convert -w 180 -h 180 icons/icon.svg -o icons/apple-touch-icon.png
52. for s in 16 32 48; do rsvg-convert -w $s -h $s icons/favicon.svg -o /tmp/fav-$s.png; done
53. magick /tmp/fav-16.png /tmp/fav-32.png /tmp/fav-48.png icons/favicon.ico
54. ```
55. - **Offline**: `offline = [ Index ]` — the worker keeps the shell and `/` (the home list). Without a network `/` opens
56. from the cache and says "You are offline. The demos need the network." (`components/main.hl`: an invisible `netProbe`
57. runs a 1 s CSS animation, each `animationiteration` reads `navigator.onLine` — hl:web has no connection state / mount
58. hook). Every demo page offline gets hl:web's "Unavailable offline" page.
59. - Gate: the `pwa:` / `offline:` checks at the end of `tests/browser.mjs` (manifest + icons over HTTP, Chrome's
60. installability + manifest parse, worker scope `/`, then CDP offline + the server stopped → reload of `/` shows the
61. shell; screenshots `.scratch/gate-pwa-phone-{online,offline}.png`, 390 px).
63. ## Run, test, deploy
64. - `COMPONENTS_PORT=8700 ./bin/hybriel project.hl` (env: `COMPONENTS_WATCH=0` no watcher, `HL_HOST`).
65. - `node tests/browser.mjs` — the gate: own server + headless Chrome (ports 8700, 8701–8709). Other ports (workers):
66. `COMPONENTS_GATE_PORT=8720 COMPONENTS_GATE_CHROME=8721-8729 node tests/browser.mjs`.
67. - `./deploy.sh` on Loreana (architect): gate → backup → rsync → `docker compose up -d --build` on Byrodin (port 45006) → URL 200.
69. ## History and worker briefs
70. - `LOG.md` — append-only history, one dated line per step (moved here from the antcolony LOG on 2026-10-01).
71. - `missions/NNN-*.md` — worker briefs for this app; `reports/NNN-*.md` — their reports (same name). Numbered per
72. project since 2026-10-01 (antcolony#40); older text, code comments and commits use the old antcolony numbers →
73. map: `/media/STORAGE/projects/antcolony-docs/docs/mission-map.md` (Byrodin: `/CONTAINERS/projects/antcolony/docs/mission-map.md`).