components

4.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 ff51cf46**
25. (2026-10-01, mission 048: #113 mpackdb update, #115/#116 lambda members in faces/client, #118 `for` over a literal list
26. in a View, client-built SVG namespace, hl:markdown #111 — not used here; earlier: #103–#106, #94, #83 hashed URLs, #82).
27. Built from a read-only `git archive master` with `zig build -Doptimize=ReleaseFast -Dtarget=x86_64-linux-gnu.2.39` in
28. `native/`; binary sha256 `87229302…6d251335`. **No local patch**: a re-vendor = copy binary + plugins (the ones listed;
29. the build also refreshes their `.so`), run the gate. Previous copy: `.scratch/pre-048/` (master e6720b1f).
31. ## PWA (mission 046)
32. Installable, the same way as calendar/tracker: hl:web's own manifest (`/__hl/manifest.webmanifest`) + service worker
33. (`/__hl/sw.js`) from settings in `project.hl`, no JavaScript of ours.
34. - `appTitle` "Hybriel components", `appShortName` "Components", `appIcons` (192 + 512 PNG, each `any` + `maskable`),
35. `appTouchIcon` (180), `appFavicon` `/icons/favicon.svg`, `appThemeColor` = token `darker` (the header,
36. rgb(15, 20, 25)), `appBackgroundColor` = token `dark`. `/favicon.ico` is a real icon (16/32/48). Each icon has a `file` route.
37. - **Icons** (`icons/`): `icon.svg` = source (512, hand-written: three stacked building blocks with studs, green-light
38. `#b5cea8` on rgb(25,30,35), all inside the maskable safe circle r = 204 → one image for `any` + `maskable`);
39. `favicon.svg` = the same drawing cropped on a rounded tile. Rendered on Loreana:
40. ```bash
41. rsvg-convert -w 192 -h 192 icons/icon.svg -o icons/icon-192.png
42. rsvg-convert -w 512 -h 512 icons/icon.svg -o icons/icon-512.png
43. rsvg-convert -w 180 -h 180 icons/icon.svg -o icons/apple-touch-icon.png
44. for s in 16 32 48; do rsvg-convert -w $s -h $s icons/favicon.svg -o /tmp/fav-$s.png; done
45. magick /tmp/fav-16.png /tmp/fav-32.png /tmp/fav-48.png icons/favicon.ico
46. ```
47. - **Offline**: `offline = [ Index ]` — the worker keeps the shell and `/` (the home list). Without a network `/` opens
48. from the cache and says "You are offline. The demos need the network." (`components/main.hl`: an invisible `netProbe`
49. runs a 1 s CSS animation, each `animationiteration` reads `navigator.onLine` — hl:web has no connection state / mount
50. hook). Every demo page offline gets hl:web's "Unavailable offline" page.
51. - Gate: the `pwa:` / `offline:` checks at the end of `tests/browser.mjs` (manifest + icons over HTTP, Chrome's
52. installability + manifest parse, worker scope `/`, then CDP offline + the server stopped → reload of `/` shows the
53. shell; screenshots `.scratch/gate-pwa-phone-{online,offline}.png`, 390 px).
55. ## Run, test, deploy
56. - `COMPONENTS_PORT=8700 ./bin/hybriel project.hl` (env: `COMPONENTS_WATCH=0` no watcher, `HL_HOST`).
57. - `node tests/browser.mjs` — the gate: own server + headless Chrome (ports 8700, 8701–8709). Other ports (workers):
58. `COMPONENTS_GATE_PORT=8720 COMPONENTS_GATE_CHROME=8721-8729 node tests/browser.mjs`.
59. - `./deploy.sh` on Loreana (architect): gate → backup → rsync → `docker compose up -d --build` on Byrodin (port 45006) → URL 200.