@bongos/core 1.19.726 → 1.19.727

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 (226) hide show
  1. package/.bongos-core.json +176 -491
  2. package/.devcontainer/Dockerfile +1 -1
  3. package/.devcontainer/devcontainer.json +2 -2
  4. package/.devcontainer/healthcheck.sh +1 -1
  5. package/.devcontainer/init-firewall.sh +1 -1
  6. package/.devcontainer/post-create.sh +2 -2
  7. package/.env.local.example +1 -1
  8. package/Dockerfile +1 -1
  9. package/docs/copy-inventory.md +1 -1
  10. package/docs/copy-registry.json +9 -9
  11. package/docs/module-api-changelog.md +2 -0
  12. package/docs/recipes/devbox-app-release.md +4 -4
  13. package/modules/dev-box/app/scripts/dmgbuild-settings.py +5 -5
  14. package/modules/dev-box/app/scripts/gen-brand.js +1 -1
  15. package/modules/dev-box/app/src/brand.js +1 -1
  16. package/modules/dev-box/app/test/unit.mjs +16 -16
  17. package/modules/dev-box/box-access.js +1 -1
  18. package/modules/dev-box/routes/box.js +1 -1
  19. package/modules/discord/discord-approvals.js +1 -1
  20. package/modules/grading/grader-model.js +1 -1
  21. package/modules/grading/grader-prompt.js +1 -1
  22. package/modules/grading/grader-workers/quality.js +1 -1
  23. package/modules/hall-ui/module.json +1 -1
  24. package/modules/hall-ui/public/brand-apply.js +1 -1
  25. package/modules/hall-ui/public/shell.js +1 -1
  26. package/modules/hall-ui/public/work.js +1 -1
  27. package/modules/lifecycle/conflict-resolve.js +1 -1
  28. package/modules/lifecycle/db-analytics.js +1 -1
  29. package/modules/lifecycle/routes/analytics.js +1 -1
  30. package/modules/onboarding/approval-broadcast.js +1 -1
  31. package/modules/onboarding/onboarding.js +1 -1
  32. package/modules/provisioning/tests/liveness.mjs +1 -1
  33. package/modules/public-landing/public/index.html +1 -1
  34. package/modules/public-landing/public/projects-floor.states.json +2 -2
  35. package/modules/public-landing/public/projects.probes.json +4 -4
  36. package/modules/public-landing/public/projects.states.json +2 -2
  37. package/modules/status-ui/module.json +1 -1
  38. package/modules/status-ui/public/status.js +4 -4
  39. package/modules/status-ui/public/style.css +1 -1
  40. package/modules/ui-design/kit/fixtures/cost-summary.json +1 -1
  41. package/modules/ui-design/kit/fixtures/featured-hub.json +1 -1
  42. package/modules/ui-design/kit/fixtures/featured.json +1 -1
  43. package/modules/ui-design/kit/fixtures/leaderboard.json +1 -1
  44. package/modules/ui-design/kit/fixtures/my-projects.json +1 -1
  45. package/modules/ui-design/kit/fixtures/progress.json +1 -1
  46. package/modules/ui-design/kit/fixtures/recent-shipped.json +1 -1
  47. package/package-lock.json +2 -2
  48. package/package.json +1 -1
  49. package/scripts/cron/style_guide_audit.sh +1 -1
  50. package/scripts/discord/lib.js +1 -1
  51. package/scripts/discord/post.js +1 -1
  52. package/scripts/gds/audit-authorship.sh +1 -1
  53. package/scripts/gds/audit-replay.sh +29 -2
  54. package/scripts/gds/audit-ships.js +1 -1
  55. package/scripts/gds/backfill-sessions.js +2 -2
  56. package/scripts/gds/cf-tunnel.js +4 -4
  57. package/scripts/gds/claude-materialize.js +2 -2
  58. package/scripts/gds/cli-lib.js +6 -6
  59. package/scripts/gds/cutover-codemod.js +1 -1
  60. package/scripts/gds/dev-lib.js +2 -2
  61. package/scripts/gds/diagnose-achievements.js +2 -2
  62. package/scripts/gds/fitness-checks-identity.js +6 -4
  63. package/scripts/gds/gen-diagrams.js +1 -1
  64. package/scripts/gds/leak-scan-allowlist.js +293 -0
  65. package/scripts/gds/learning-capture.js +1 -1
  66. package/scripts/gds/linkify-refs.js +2 -2
  67. package/scripts/gds/local-preview-lib.js +1 -1
  68. package/scripts/gds/mirror-lineage-check.js +1 -1
  69. package/scripts/gds/mirror-redact.js +17 -2
  70. package/scripts/gds/newcomer-floor.templates.json +1 -1
  71. package/scripts/gds/package-core.js +18 -1
  72. package/scripts/gds/paste-token.js +1 -1
  73. package/scripts/gds/provision-units.js +2 -2
  74. package/scripts/gds/publish-manifest.js +15 -0
  75. package/scripts/gds/repo-metrics.js +1 -1
  76. package/scripts/gds/sandbox-stage.js +1 -1
  77. package/scripts/gds/seed-bongos-coreB-tranche1-tasks.js +1 -1
  78. package/scripts/gds/seed-bongos-coreB-tranche2-tasks.js +1 -1
  79. package/scripts/gds/seed-bongos-goal-hierarchy-tasks.js +1 -1
  80. package/scripts/gds/seed-bongos-tasks.js +2 -2
  81. package/scripts/gds/seed-gds-v4-tasks.js +1 -1
  82. package/scripts/gds/seed-medusa-tasks.js +10 -10
  83. package/scripts/gds/seed-module-upstreaming.js +1 -1
  84. package/scripts/gds/seed-productization-tasks.js +6 -6
  85. package/scripts/gds/seed-provisioning-tasks.js +2 -2
  86. package/scripts/gds/seed-staging.sh +19 -6
  87. package/scripts/gds/ship-deploy-target.js +1 -1
  88. package/scripts/gds/ship-flow.js +1 -1
  89. package/scripts/gds/smoke-gds.js +1 -1
  90. package/scripts/status-probe.mjs +2 -2
  91. package/src/bongos/auth-discord.js +2 -2
  92. package/src/bongos/live-channel.js +1 -1
  93. package/src/bongos/pool.js +1 -1
  94. package/src/bongos/routes/auth.js +11 -11
  95. package/src/bongos/routes/security.js +1 -1
  96. package/src/bongos/routes.js +1 -1
  97. package/src/branding.js +1 -1
  98. package/src/devbox-downloads.js +1 -1
  99. package/src/instance-config.js +2 -2
  100. package/src/module-api.js +1 -1
  101. package/src/module-loader/provenance.js +2 -2
  102. package/tests/art_stage.mjs +2 -2
  103. package/tests/auth_anthropic_identity.mjs +1 -1
  104. package/tests/auth_duplicate_cookie.mjs +1 -1
  105. package/tests/auth_error_brand.mjs +1 -1
  106. package/tests/auth_inactive_builder.mjs +1 -1
  107. package/tests/backup_cli.mjs +4 -4
  108. package/tests/bongos_box_connect.mjs +2 -2
  109. package/tests/bongos_downloads.mjs +2 -2
  110. package/tests/bongos_login.mjs +5 -5
  111. package/tests/box_connect_e2e.mjs +2 -2
  112. package/tests/box_dns_repoint.mjs +10 -10
  113. package/tests/box_host_keys.mjs +1 -1
  114. package/tests/box_onboard.mjs +9 -9
  115. package/tests/box_scope_session.mjs +1 -1
  116. package/tests/box_terminal_ssrf.mjs +7 -7
  117. package/tests/boxes.mjs +9 -9
  118. package/tests/branding.mjs +2 -2
  119. package/tests/bump_version.mjs +2 -2
  120. package/tests/cf_tunnel.mjs +40 -40
  121. package/tests/cli_token_reissue.mjs +7 -7
  122. package/tests/cloud_bongos_pack.mjs +1 -1
  123. package/tests/currency_label.mjs +8 -8
  124. package/tests/dev_lib.mjs +4 -4
  125. package/tests/devbox_dmg_backdrop.mjs +1 -1
  126. package/tests/devbox_downloads.mjs +2 -2
  127. package/tests/devbox_icons.mjs +1 -1
  128. package/tests/discord_approvals.mjs +1 -1
  129. package/tests/discord_oauth.mjs +2 -2
  130. package/tests/executed_closure.mjs +6 -1
  131. package/tests/first_admin_bootstrap.mjs +1 -1
  132. package/tests/gate_approvals.mjs +5 -5
  133. package/tests/grade_aggregates_unavailable.mjs +1 -1
  134. package/tests/hook_user_agents.mjs +2 -2
  135. package/tests/init.mjs +6 -6
  136. package/tests/instance_config.mjs +1 -1
  137. package/tests/instance_manifest.mjs +5 -5
  138. package/tests/instance_mismatch_guard.mjs +13 -13
  139. package/tests/leak_scan_allowlist.mjs +94 -0
  140. package/tests/migrate_root_resolution.mjs +4 -4
  141. package/tests/mirror_redact.mjs +28 -4
  142. package/tests/module_catalog.mjs +5 -5
  143. package/tests/module_submissions.mjs +3 -3
  144. package/tests/package_core.mjs +1 -1
  145. package/tests/parallel-load.mjs +6 -6
  146. package/tests/projects_hub.mjs +2 -2
  147. package/tests/provision.mjs +50 -50
  148. package/tests/provisioning_github_app_routes.mjs +1 -1
  149. package/tests/provisioning_onboard_mode.mjs +2 -2
  150. package/tests/publish_reconciler.mjs +4 -4
  151. package/tests/sandbox_stage.mjs +1 -1
  152. package/tests/scrubber_corpus.mjs +3 -3
  153. package/tests/search_isolation.mjs +1 -1
  154. package/tests/session_records.mjs +1 -1
  155. package/tests/ship_card.mjs +6 -6
  156. package/tests/ship_ci_deploy.mjs +1 -1
  157. package/tests/single_host_hall.mjs +9 -9
  158. package/tests/smoke_preflight.mjs +1 -1
  159. package/tests/smoke_target.mjs +1 -1
  160. package/tests/status-probe.mjs +1 -1
  161. package/tests/status_mirror_sync.mjs +1 -1
  162. package/docs/adr/0004-amazonprimea-name-and-trademark-acceptance.md +0 -45
  163. package/docs/design/mocks/_schemes.css +0 -604
  164. package/docs/design/mocks/component-sheet.html +0 -428
  165. package/docs/design/mocks/hall/_tokens.css +0 -370
  166. package/docs/design/mocks/hall/board/v1.html +0 -846
  167. package/docs/design/mocks/hall/board/v2.html +0 -858
  168. package/docs/design/mocks/hall/board/v3.html +0 -884
  169. package/docs/design/mocks/hall/goals/v1.html +0 -1212
  170. package/docs/design/mocks/hall/goals/v2.html +0 -1192
  171. package/docs/design/mocks/hall/goals/v3.html +0 -1205
  172. package/docs/design/mocks/hall/hall-sheet.html +0 -244
  173. package/docs/design/mocks/hall/reading/v1.html +0 -1125
  174. package/docs/design/mocks/hall/reading/v2.html +0 -1177
  175. package/docs/design/mocks/hall/reading/v3.html +0 -1150
  176. package/docs/design/mocks/hall/settings/v1.html +0 -1238
  177. package/docs/design/mocks/hall/settings/v2.html +0 -1235
  178. package/docs/design/mocks/hall/settings/v3.html +0 -1299
  179. package/docs/design/mocks/hall/task/v1.html +0 -633
  180. package/docs/design/mocks/hall/task/v2.html +0 -646
  181. package/docs/design/mocks/hall/task/v3.html +0 -647
  182. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg +0 -0
  183. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg.json +0 -13
  184. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg +0 -0
  185. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg.json +0 -13
  186. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg +0 -0
  187. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg.json +0 -13
  188. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg +0 -0
  189. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg.json +0 -13
  190. package/docs/design/mocks/hub/hub-sheet.html +0 -192
  191. package/docs/design/mocks/hub/mine.html +0 -465
  192. package/docs/design/mocks/hub/picker.html +0 -421
  193. package/docs/design/mocks/hub/planets.html +0 -356
  194. package/docs/design/mocks/hub/v1.html +0 -1209
  195. package/docs/design/mocks/hub/v2.html +0 -1257
  196. package/docs/design/mocks/hub/v3.html +0 -1496
  197. package/docs/design/mocks/hub/wizard.html +0 -421
  198. package/docs/design/mocks/landing/landing-sheet.html +0 -131
  199. package/docs/design/mocks/landing/v1.html +0 -956
  200. package/docs/design/mocks/landing/v2.html +0 -708
  201. package/docs/design/mocks/landing/v3.html +0 -911
  202. package/docs/design/mocks/landing-page-mock.html +0 -687
  203. package/docs/design/mocks/landing-palettes.html +0 -103
  204. package/docs/design/mocks/projects-hub-mock.html +0 -991
  205. package/docs/design/mocks/projects-hub-variants.html +0 -146
  206. package/docs/design/mocks/projects-page-mock.html +0 -167
  207. package/docs/design/mocks/world/blue-hud/_tokens.css +0 -246
  208. package/docs/design/mocks/world/blue-hud/hall.html +0 -595
  209. package/docs/design/mocks/world/blue-hud/landing.html +0 -424
  210. package/docs/design/mocks/world/blue-hud/status.html +0 -410
  211. package/docs/design/mocks/world/chrome-blobs/_tokens.css +0 -479
  212. package/docs/design/mocks/world/chrome-blobs/hall.html +0 -553
  213. package/docs/design/mocks/world/chrome-blobs/landing-b.html +0 -581
  214. package/docs/design/mocks/world/chrome-blobs/landing.html +0 -328
  215. package/docs/design/mocks/world/chrome-blobs/status.html +0 -416
  216. package/docs/design/mocks/world/natgeo-editorial/_tokens.css +0 -377
  217. package/docs/design/mocks/world/natgeo-editorial/hall.html +0 -649
  218. package/docs/design/mocks/world/natgeo-editorial/landing-b.html +0 -743
  219. package/docs/design/mocks/world/natgeo-editorial/landing.html +0 -475
  220. package/docs/design/mocks/world/natgeo-editorial/status.html +0 -437
  221. package/docs/design/mocks/world/organic-cards/_tokens.css +0 -462
  222. package/docs/design/mocks/world/organic-cards/hall.html +0 -625
  223. package/docs/design/mocks/world/organic-cards/landing-b.html +0 -736
  224. package/docs/design/mocks/world/organic-cards/landing.html +0 -420
  225. package/docs/design/mocks/world/organic-cards/status.html +0 -458
  226. package/docs/design/mocks/world/world-sheet.html +0 -156
package/docs/design/mocks/hub/wizard.html DELETED
@@ -1,421 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-mode="dark">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>The create wizard, in the world</title>
7
- <link rel="icon" href="data:,">
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&family=Manrope:wght@300;400;500;600&display=swap">
11
- <link rel="stylesheet" href="../../../../modules/public-landing/public/assets/cosmos.css">
12
- <style>
13
- body{
14
- /* The composition round for task 1003346 (docs/design/projects-hub-direction-v2.md §15). cosmos.css
15
- carries the hub's contract, the planets and the fixed status vocabulary; this sheet adds only the
16
- wizard's composition in the world's grammar: the six-step strip as the lifecycle rail, the type and
17
- home choices as hairline cells, fields with one bottom hairline, the review as ledger rows, pills for
18
- the doors with the accent only on the primary one, the standup strip as the same rail. Dark only
19
- (ADR 0204). Every colour is a token. */
20
- --orb-shadow:opacity(1);
21
- }
22
- .mock .worldOrb{position:relative;left:auto;top:auto;transform:none;display:block;cursor:default;}
23
- .mock .worldOrb .disc{display:block;margin:0;}
24
-
25
- /* ── the view: one column, a lowercase display title, one clause ── */
26
- .view{max-width:1180px;margin:0 auto;padding:34px var(--gutter) 60px;}
27
- .vTitle{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.035em;line-height:1.04;text-transform:lowercase;color:var(--ink);margin:0;max-width:18ch;text-wrap:balance;}
28
- .vLede{font-size:15.5px;line-height:1.5;color:var(--ink-soft);max-width:62ch;margin:10px 0 0;}
29
- .vLede b{color:var(--ink);font-weight:500;}
30
- .eyebrow{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;}
31
-
32
- /* ── the six-step strip as the lifecycle rail: hairlines, a 7px dot, one lit step ── */
33
- .wizRail{display:grid;grid-template-columns:repeat(6,1fr);gap:0 10px;list-style:none;margin:0 0 40px;padding:0;}
34
- .wizRail li{position:relative;border-top:1px solid var(--rule);padding:12px 0 0;font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);line-height:1.3;}
35
- .wizRail li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);}
36
- .wizRail li.done{border-top-color:var(--ink-soft);color:var(--ink-soft);}
37
- .wizRail li.done::before{background:var(--ink-soft);border-color:var(--ink-soft);}
38
- .wizRail li.now{border-top-color:var(--accent);color:var(--ink);}
39
- .wizRail li.now::before{background:var(--accent);border-color:var(--accent);outline:4px solid color-mix(in srgb,var(--accent) 22%,transparent);}
40
- .wizRail li.done{cursor:pointer;}
41
- .wizRail li .snum{display:block;font-family:var(--font-display);font-weight:300;font-size:22px;letter-spacing:-.02em;color:inherit;text-transform:none;margin-bottom:2px;}
42
-
43
- /* ── the step: title, clause, the field, the doors ── */
44
- .step{max-width:640px;}
45
- .hairField{display:block;border-bottom:1px solid var(--rule);padding:14px 0 10px;margin:26px 0 0;}
46
- .hairField>span{display:block;font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
47
- .hairField>span small{text-transform:none;letter-spacing:0;color:var(--ink-faint);}
48
- .hairField input,.hairField textarea{display:block;width:100%;min-height:32px;background:none;border:0;font-family:var(--font-body);font-size:17px;color:var(--ink);padding:4px 0;resize:vertical;}
49
- .hairField input::placeholder,.hairField textarea::placeholder{color:var(--ink-faint);}
50
- .hairField input:focus,.hairField textarea:focus{outline:none;}
51
- .hairField:focus-within{border-bottom-color:var(--ink);}
52
- .hairField .hint{font-size:13.5px;line-height:1.45;color:var(--ink-faint);margin-top:8px;min-height:18px;}
53
- .hairField .hint.ok{color:var(--ok);}
54
- .hairField .hint.err{color:var(--err);}
55
- .hairField .hint code,.fact code,.ledger code{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);background:none;padding:0;}
56
- .fact{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:14px 0 0;max-width:62ch;}
57
- .fact a,.vLede a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:3px 0;min-height:24px;line-height:18px;}
58
- /* the doors: a row under the step, back as a plain pill, the primary on the accent, the skip as text */
59
- .doors{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:34px 0 0;}
60
- .door{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid var(--rule);border-radius:var(--radius-pill);background:none;font-family:var(--font-body);font-size:15px;color:var(--ink);text-transform:lowercase;text-decoration:none;cursor:pointer;white-space:nowrap;}
61
- .door:hover{border-color:var(--ink-faint);}
62
- .door.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-on);font-weight:500;}
63
- .door.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink));}
64
- .door.big{min-height:48px;padding:0 26px;font-size:16px;}
65
- .door.invert{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:500;gap:10px;}
66
- .door.invert svg{width:17px;height:17px;fill:currentColor;}
67
- .doors .push{margin-left:auto;}
68
- .textDoor{background:none;border:0;padding:10px 4px;min-height:44px;font-family:var(--font-body);font-size:15px;color:var(--ink-soft);text-transform:lowercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer;}
69
- .textDoor:hover{color:var(--ink);}
70
-
71
- /* ── a choice: hairline cells of one band; the chosen one carries the dot and the ink ── */
72
- .choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:26px 0 0;}
73
- .choice label{display:grid;gap:6px;align-content:start;padding:16px 18px 18px;border-left:1px solid var(--rule-soft);cursor:pointer;color:var(--ink-soft);position:relative;}
74
- .choice label:first-child{border-left:0;padding-left:0;}
75
- .choice .ch{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--ink);}
76
- .choice .ch::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);flex:none;}
77
- .choice label.on .ch::before{background:var(--accent);border-color:var(--accent);outline:4px solid color-mix(in srgb,var(--accent) 22%,transparent);}
78
- .choice .cb{font-size:13px;line-height:1.45;color:var(--ink-faint);}
79
- .choice input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
80
- .choice.two{grid-template-columns:1fr 1fr;}
81
- .choice.two label{padding:22px 22px 24px;}
82
- .choice.two .ch{font-size:17px;}
83
- .choice.two .cb{font-size:14px;color:var(--ink-soft);max-width:36ch;}
84
-
85
- /* ── the review: a ledger of what is about to be filed ── */
86
- .ledger{display:grid;grid-template-columns:172px 1fr;gap:0 22px;margin:26px 0 0;}
87
- .ledger > *{border-top:1px solid var(--rule-soft);padding:13px 0;}
88
- .ledger .k{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);padding-top:16px;}
89
- .ledger .v{font-size:15px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;}
90
- .ledger .v em{font-style:normal;color:var(--warn);}
91
- .ledger .v small{display:block;font-size:13px;color:var(--ink-soft);}
92
- .ledger.last > :nth-last-child(-n+2){border-bottom:1px solid var(--rule-soft);}
93
-
94
- /* ── the address as a fact with its two alternatives in the open ── */
95
- .addrBig{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,3vw,36px);letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:26px 0 8px;overflow-wrap:anywhere;}
96
- .addrBig b{font-weight:500;color:var(--accent-deep);}
97
- details.fold{margin:18px 0 0;}
98
- details.fold summary{cursor:pointer;display:inline-flex;align-items:center;min-height:24px;font-size:14.5px;color:var(--ink-soft);}
99
- details.fold summary:hover,details.fold[open] summary{color:var(--ink);}
100
- .opt{display:flex;align-items:flex-start;gap:12px;margin:18px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer;}
101
- .opt input{margin:4px 0 0;flex:none;width:16px;height:16px;accent-color:var(--accent);}
102
-
103
- /* ── the done panel: the standup as the same rail, then the steps only you can play ── */
104
- .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px;list-style:none;margin:26px 0 0;padding:0;max-width:520px;}
105
- .rail li{position:relative;border-top:1px solid var(--rule);padding:12px 0 0;font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);line-height:1.3;}
106
- .rail li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);}
107
- .rail li.done{border-top-color:var(--ink-soft);color:var(--ink-soft);}
108
- .rail li.done::before{background:var(--ink-soft);border-color:var(--ink-soft);}
109
- .rail li.now{border-top-color:var(--accent);color:var(--ink);}
110
- .rail li.now::before{background:var(--accent);border-color:var(--accent);outline:4px solid color-mix(in srgb,var(--accent) 22%,transparent);}
111
- .railNote{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--ink-soft);max-width:520px;}
112
- .humanSteps{list-style:none;margin:34px 0 0;padding:0;counter-reset:hs;max-width:640px;}
113
- .humanSteps li{display:grid;grid-template-columns:44px 1fr;gap:0 16px;border-top:1px solid var(--rule-soft);padding:16px 0 18px;counter-increment:hs;}
114
- .humanSteps li > *{grid-column:2;}
115
- .humanSteps li:last-child{border-bottom:1px solid var(--rule-soft);}
116
- .humanSteps li::before{content:counter(hs,decimal-leading-zero);font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);color:var(--ink-faint);padding-top:3px;}
117
- .humanSteps b{display:block;font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--ink);}
118
- .humanSteps p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:56ch;}
119
- .humanSteps li.sdone::before{color:var(--ok);content:"done";text-transform:uppercase;}
120
- .humanSteps li.sdone b{color:var(--ink-soft);}
121
- .humanSteps .doors{margin:12px 0 0;}
122
- .samePath{font-size:13px;color:var(--ink-faint);margin:18px 0 0;}
123
-
124
- /* ── v2 · the rail beside: the six steps as a ledger on the left, the step on the right, the planet forming at its foot ── */
125
- .beside{display:grid;grid-template-columns:260px 1fr;gap:0 48px;align-items:start;}
126
- .sideRail{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
127
- .sideRail li{display:grid;grid-template-columns:28px 1fr;gap:0 10px;align-items:baseline;border-bottom:1px solid var(--rule-soft);padding:14px 0;font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);position:relative;}
128
- .sideRail li::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);align-self:center;}
129
- .sideRail li.done{color:var(--ink-soft);}
130
- .sideRail li.done::before{background:var(--ink-soft);border-color:var(--ink-soft);}
131
- .sideRail li.now{color:var(--ink);}
132
- .sideRail li.now::before{background:var(--accent);border-color:var(--accent);outline:4px solid color-mix(in srgb,var(--accent) 22%,transparent);}
133
- .sideRail li.now::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--accent);}
134
- .sideRail .sub{display:block;grid-column:2;font-family:var(--font-body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-faint);margin-top:2px;}
135
- .sideRail li.done .sub{color:var(--ink-soft);}
136
- .forming{margin:34px 0 0;display:grid;gap:12px;justify-items:start;}
137
- .forming .fact{margin:0;}
138
-
139
- /* ── the sheet furniture ── */
140
- .sheet{padding:34px var(--gutter) 60px;max-width:1180px;margin:0 auto;}
141
- .sheet h2{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3.1vw,42px);letter-spacing:-.035em;line-height:1.06;color:var(--ink);margin:0 0 6px;}
142
- .sheet > p{font-size:15.5px;line-height:1.5;color:var(--ink-soft);max-width:62ch;margin:0 0 26px;}
143
- section[data-state]{display:none;}
144
- body[data-state="gate"] section[data-state="gate"],
145
- body[data-state="name"] section[data-state="name"],
146
- body[data-state="type"] section[data-state="type"],
147
- body[data-state="about"] section[data-state="about"],
148
- body[data-state="home"] section[data-state="home"],
149
- body[data-state="address"] section[data-state="address"],
150
- body[data-state="review"] section[data-state="review"],
151
- body[data-state="done"] section[data-state="done"],
152
- body[data-state="beside"] section[data-state="beside"]{display:block;}
153
- .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
154
- .skip{position:absolute;left:12px;top:-60px;background:var(--bg-card);color:var(--ink);padding:11px 18px;border-radius:999px;}
155
- .skip:focus{top:12px;}
156
- .bar{height:var(--top-h);display:flex;align-items:center;padding:0 var(--gutter);border-bottom:1px solid var(--rule);font-family:var(--font-body);font-weight:500;font-size:17px;letter-spacing:-.015em;color:var(--ink);}
157
- .mock .foot{padding:18px var(--gutter);font-size:14px;color:var(--ink-soft);text-align:center;}
158
- a:focus-visible,button:focus-visible,label:focus-within,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
159
-
160
- @media (max-width:900px){
161
- .wizRail{grid-template-columns:repeat(3,1fr);gap:18px 10px;margin-bottom:30px;}
162
- .wizRail li .snum{font-size:18px;}
163
- .choice{grid-template-columns:1fr;}
164
- .choice label{border-left:0;padding-left:0;border-top:1px solid var(--rule-soft);}
165
- .choice label:first-child{border-top:0;}
166
- .choice.two{grid-template-columns:1fr;}
167
- .ledger{grid-template-columns:1fr;gap:0;}
168
- .ledger .k{padding-bottom:0;}
169
- .ledger .v{border-top:0;padding-top:6px;}
170
- .doors .push{margin-left:0;}
171
- .beside{grid-template-columns:1fr;gap:26px 0;}
172
- .sideRail{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;border-top:0;}
173
- .sideRail li{display:block;border-bottom:0;border-top:1px solid var(--rule);padding:12px 0 0;}
174
- .sideRail li::before{position:absolute;top:-4px;left:0;}
175
- .sideRail li.now::after{top:-1px;bottom:auto;height:1px;}
176
- .sideRail .sub{display:none;}
177
- .forming{display:none;}
178
- }
179
- </style>
180
- </head>
181
- <body class="mock" data-state="name">
182
- <!--
183
- The create wizard, the composition round (task 1003346, goal 1000080).
184
- ?state=gate signed out: the display title, the clause, the inverted sign-in door, the consent line
185
- ?state=name step 1 of six: the rail on top, one hairline field, the doors
186
- ?state=type step 2: the type as five hairline cells of one band, the chosen one carrying the dot
187
- ?state=about step 3 (optional): a hairline textarea, the team as three cells, skip as a text door
188
- ?state=home step 4: fresh or adopt as two cells, the repository field, the repo-access line
189
- ?state=address step 5: the handle field, the address in the display voice, the two alternatives in the open
190
- ?state=review step 6: the review as a ledger, one primary door, the trust line
191
- ?state=done the standup as the rail, then the steps only you can play as a numbered ledger
192
- ?state=beside v2 the rail beside: the six steps as a ledger on the left, the step on the right, the planet forming at its foot
193
- -->
194
- <a class="skip" href="#main">Skip to content</a>
195
- <header class="bar">Cloud Bongos</header>
196
- <main id="main">
197
- <h1 class="vh">The create wizard</h1>
198
-
199
- <section data-state="gate">
200
- <div class="view">
201
- <p class="eyebrow">new project</p>
202
- <h2 class="vTitle">create a project</h2>
203
- <p class="vLede">Your own Cloud Bongos project: its own repository, its own home on the web, and a hall of AI builders who do the building. You set the direction; agents lay down the code. Sign in with GitHub so the project belongs to <b>you</b> from the very first beat.</p>
204
- <div class="doors"><a class="door invert big" href="#"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>sign in with github</a></div>
205
- <p class="fact">Signing in asks GitHub for repository access. GitHub words this as access to all your repositories; that is the only permission it offers that can write to a private repo. We use it to create (or read) the one repo your project lives in and push its starting files. Nothing else is touched.</p>
206
- <p class="fact">Free while we find our feet. Your project's repo and server are yours. Cloud Bongos is <a href="#">open source (AGPL-3.0)</a> and capture-resistant by design.</p>
207
- </div>
208
- </section>
209
-
210
- <section data-state="name">
211
- <div class="view">
212
- <ol class="wizRail" aria-label="Creation steps">
213
- <li class="now" aria-current="step"><span class="snum">1</span>Name</li>
214
- <li><span class="snum">2</span>Type</li>
215
- <li><span class="snum">3</span>About</li>
216
- <li><span class="snum">4</span>Home</li>
217
- <li><span class="snum">5</span>Address</li>
218
- <li><span class="snum">6</span>Create</li>
219
- </ol>
220
- <div class="step">
221
- <h2 class="vTitle">start a project</h2>
222
- <p class="vLede">Your own project: its own repository, its own home on the web, and a hall of AI builders who do the building. You set the direction; agents lay down the code.</p>
223
- <label class="hairField"><span>Project name</span><input type="text" placeholder="What should it be called?" aria-label="Project name"><div class="hint">&nbsp;</div></label>
224
- <div class="doors"><button type="button" class="door primary push">continue</button></div>
225
- <p class="fact">Free while we find our feet. Your project's repo and server are yours. Cloud Bongos is <a href="#">open source (AGPL-3.0)</a> and capture-resistant by design.</p>
226
- </div>
227
- </div>
228
- </section>
229
-
230
- <section data-state="type">
231
- <div class="view">
232
- <ol class="wizRail" aria-label="Creation steps">
233
- <li class="done"><span class="snum">1</span>Name</li>
234
- <li class="now" aria-current="step"><span class="snum">2</span>Type</li>
235
- <li><span class="snum">3</span>About</li>
236
- <li><span class="snum">4</span>Home</li>
237
- <li><span class="snum">5</span>Address</li>
238
- <li><span class="snum">6</span>Create</li>
239
- </ol>
240
- <div class="step" style="max-width:none">
241
- <h2 class="vTitle">what kind of project is it?</h2>
242
- <p class="vLede">Pick the shape that fits best. It is how the project is listed on the map, and it stays as you pick it for now. Not sure is a fine answer.</p>
243
- <div class="choice" role="group" aria-label="Project type">
244
- <label class="on"><input type="radio" name="t" checked><span class="ch">Game</span><span class="cb">A world people play in. Its hall builds levels, characters and the loop.</span></label>
245
- <label><input type="radio" name="t"><span class="ch">Research</span><span class="cb">A question and the work to answer it. Notes, data, a paper, a tool.</span></label>
246
- <label><input type="radio" name="t"><span class="ch">Business</span><span class="cb">A product or a service with customers. A shop, an app, a company.</span></label>
247
- <label><input type="radio" name="t"><span class="ch">Non-profit</span><span class="cb">A cause with a community around it. Nobody owns it for profit.</span></label>
248
- <label><input type="radio" name="t"><span class="ch">Not sure</span><span class="cb">Fine. It can change later, and nothing else waits on it.</span></label>
249
- </div>
250
- <div class="doors"><button type="button" class="door">back</button><button type="button" class="door primary push">next</button></div>
251
- </div>
252
- </div>
253
- </section>
254
-
255
- <section data-state="about">
256
- <div class="view">
257
- <ol class="wizRail" aria-label="Creation steps">
258
- <li class="done"><span class="snum">1</span>Name</li>
259
- <li class="done"><span class="snum">2</span>Type</li>
260
- <li class="now" aria-current="step"><span class="snum">3</span>About</li>
261
- <li><span class="snum">4</span>Home</li>
262
- <li><span class="snum">5</span>Address</li>
263
- <li><span class="snum">6</span>Create</li>
264
- </ol>
265
- <div class="step" style="max-width:none">
266
- <h2 class="vTitle">tell us about it</h2>
267
- <p class="vLede">Optional. Skip it and nothing about your project changes. Answering shapes what we set up for you, and a description is what puts the project on the public map.</p>
268
- <label class="hairField" style="max-width:640px"><span>What are you building? <small>(a sentence or two)</small></span><textarea rows="2" placeholder="A co-op farming game where the seasons never repeat." aria-label="What are you building?"></textarea></label>
269
- <p class="eyebrow" style="margin:30px 0 0">Who's building it?</p>
270
- <div class="choice" role="group" aria-label="Who's building it" style="margin-top:10px">
271
- <label><input type="radio" name="w"><span class="ch">Just me</span><span class="cb">One founder and the hall's agents.</span></label>
272
- <label class="on"><input type="radio" name="w" checked><span class="ch">A small team</span><span class="cb">A few people who already know each other.</span></label>
273
- <label><input type="radio" name="w"><span class="ch">An open community</span><span class="cb">Anyone who signs in can join and build.</span></label>
274
- </div>
275
- <div class="doors"><button type="button" class="door">back</button><span class="push"></span><button type="button" class="textDoor">skip for now</button><button type="button" class="door primary">next</button></div>
276
- </div>
277
- </div>
278
- </section>
279
-
280
- <section data-state="home">
281
- <div class="view">
282
- <ol class="wizRail" aria-label="Creation steps">
283
- <li class="done"><span class="snum">1</span>Name</li>
284
- <li class="done"><span class="snum">2</span>Type</li>
285
- <li class="done"><span class="snum">3</span>About</li>
286
- <li class="now" aria-current="step"><span class="snum">4</span>Home</li>
287
- <li><span class="snum">5</span>Address</li>
288
- <li><span class="snum">6</span>Create</li>
289
- </ol>
290
- <div class="step" style="max-width:none">
291
- <h2 class="vTitle">where the code lives</h2>
292
- <p class="vLede">Every project is a real GitHub repository that you own. Start from a clean slate, or bring a repo you already have.</p>
293
- <div class="choice two" role="group" aria-label="Starting point">
294
- <label class="on"><input type="radio" name="h" checked><span class="ch">Start fresh</span><span class="cb">A new, empty public repo. We scaffold everything: config, first version, kickoff tasks.</span></label>
295
- <label><input type="radio" name="h"><span class="ch">Adopt a repo I have</span><span class="cb">Layer Cloud Bongos onto an existing repository, history, code and backlog intact. Public or private, we never change it.</span></label>
296
- </div>
297
- <label class="hairField" style="max-width:640px"><span>New repository name</span><input type="text" placeholder="mercury" aria-label="New repository name"><div class="hint">We'll create an empty <code>public</code> repo at <code>github.com/builder/mercury</code>. Projects here are open by design.</div></label>
298
- <p class="fact">Repository access is granted. Want private code? Create the repo yourself on GitHub and adopt it; we never change a repo's visibility. <a href="#">Enter it manually</a> instead.</p>
299
- <div class="doors"><button type="button" class="door">back</button><button type="button" class="door primary push">next</button></div>
300
- </div>
301
- </div>
302
- </section>
303
-
304
- <section data-state="address">
305
- <div class="view">
306
- <ol class="wizRail" aria-label="Creation steps">
307
- <li class="done"><span class="snum">1</span>Name</li>
308
- <li class="done"><span class="snum">2</span>Type</li>
309
- <li class="done"><span class="snum">3</span>About</li>
310
- <li class="done"><span class="snum">4</span>Home</li>
311
- <li class="now" aria-current="step"><span class="snum">5</span>Address</li>
312
- <li><span class="snum">6</span>Create</li>
313
- </ol>
314
- <div class="step">
315
- <h2 class="vTitle">its address in the sky</h2>
316
- <p class="vLede">The handle names your project on the platform, and its address comes with it. Once it stands up, a few GitHub steps (the next screen walks you through them) switch sign-in on.</p>
317
- <label class="hairField"><span>Project handle</span><input type="text" value="mercury" aria-label="Project handle"><div class="hint ok">mercury is free.</div></label>
318
- <p class="addrBig"><b>mercury</b>.cloudbongos.com</p>
319
- <p class="fact" style="margin-top:0">Yours from the moment it stands up. You can point a domain you own at it any time.</p>
320
- <details class="fold"><summary>use a domain I own instead</summary><label class="hairField" style="margin-top:6px"><span>Domain you own</span><input type="text" placeholder="mercury.example.com" aria-label="Domain you own"><div class="hint">&nbsp;</div></label></details>
321
- <label class="opt"><input type="checkbox"><span>Start without an address. Possible, but sign-in on your project can't be set up until it has one.</span></label>
322
- <div class="doors"><button type="button" class="door">back</button><button type="button" class="door primary push">next</button></div>
323
- </div>
324
- </div>
325
- </section>
326
-
327
- <section data-state="review">
328
- <div class="view">
329
- <ol class="wizRail" aria-label="Creation steps">
330
- <li class="done"><span class="snum">1</span>Name</li>
331
- <li class="done"><span class="snum">2</span>Type</li>
332
- <li class="done"><span class="snum">3</span>About</li>
333
- <li class="done"><span class="snum">4</span>Home</li>
334
- <li class="done"><span class="snum">5</span>Address</li>
335
- <li class="now" aria-current="step"><span class="snum">6</span>Create</li>
336
- </ol>
337
- <div class="step" style="max-width:760px">
338
- <h2 class="vTitle">ready to roll</h2>
339
- <p class="vLede">One tap files the request and the platform starts standing your project up: server, database, address. Here is the beat you are about to drop.</p>
340
- <div class="ledger last">
341
- <span class="k">project</span><span class="v">Mercury</span>
342
- <span class="k">type</span><span class="v">Game</span>
343
- <span class="k">about</span><span class="v">A co-op farming game where the seasons never repeat.</span>
344
- <span class="k">who's building it</span><span class="v">A small team</span>
345
- <span class="k">starting from</span><span class="v">A fresh, empty repo</span>
346
- <span class="k">repository</span><span class="v"><code>builder/mercury</code></span>
347
- <span class="k">handle</span><span class="v"><code>mercury</code></span>
348
- <span class="k">address</span><span class="v"><code>mercury.cloudbongos.com</code></span>
349
- <span class="k">shape</span><span class="v">Its own server, running the platform's current release</span>
350
- </div>
351
- <div class="doors"><button type="button" class="door">back</button><button type="button" class="door primary big push">create my project</button></div>
352
- <p class="fact">This files the request; the control plane does the real standup and nothing touches servers from this page. You'll get the few steps only you can do right after.</p>
353
- </div>
354
- </div>
355
- </section>
356
-
357
- <section data-state="done">
358
- <div class="view">
359
- <div class="step" style="max-width:760px">
360
- <p class="eyebrow">filed</p>
361
- <h2 class="vTitle">the drums are rolling</h2>
362
- <p class="vLede">Provisioning is requested for <b>Mercury</b>. The platform stands up the server, database, and address on its own. Watch it right here, or any time on <a href="#" style="color:var(--ink)">your projects page</a>.</p>
363
- <ul class="rail" role="status"><li class="done">Request filed</li><li class="now">Standing it up</li><li>Live</li></ul>
364
- <p class="railNote">Raising the server, database, and address. Nothing needed from you.</p>
365
- <p class="eyebrow" style="margin:40px 0 0">Your steps, the parts only you can play</p>
366
- <ol class="humanSteps">
367
- <li class="sdone"><b>Sign in with GitHub</b><p>Done at the door. The project belongs to you.</p></li>
368
- <li><b>Install the project's GitHub App</b><p>One click on GitHub gives the hall's agents a door into the repository. Nothing else on your account is touched.</p><div class="doors"><a class="door primary" href="#">open on github</a></div></li>
369
- <li><b>Say who can join</b><p>Anyone, by application, or by invitation. You can change it any time from the project's page.</p></li>
370
- <li><b>Point your domain</b><p>Only if you brought one: one DNS record at your registrar, the exact value shown on the project's page.</p></li>
371
- </ol>
372
- <p class="samePath">These are the same steps however a project is created. Nothing here is special to this page.</p>
373
- </div>
374
- </div>
375
- </section>
376
-
377
- <section data-state="beside">
378
- <div class="view">
379
- <div class="beside">
380
- <div>
381
- <ol class="sideRail" aria-label="Creation steps">
382
- <li class="done">Name<span class="sub">Mercury</span></li>
383
- <li class="now" aria-current="step">Type<span class="sub">what kind of project it is</span></li>
384
- <li>About<span class="sub">optional</span></li>
385
- <li>Home<span class="sub">where the code lives</span></li>
386
- <li>Address<span class="sub">its handle and its address</span></li>
387
- <li>Create<span class="sub">the review, then the request</span></li>
388
- </ol>
389
- <div class="forming">
390
- <span class="worldOrb" data-shape="bead" data-material="chrome" data-style="tint" style="--acc:var(--sea);--d:96px"><span class="disc"></span></span>
391
- <p class="fact">Its planet, forming. The walk chooses one for the name; you can change it from the project's page.</p>
392
- </div>
393
- </div>
394
- <div class="step" style="max-width:none">
395
- <h2 class="vTitle">what kind of project is it?</h2>
396
- <p class="vLede">Pick the shape that fits best. It is how the project is listed on the map, and it stays as you pick it for now. Not sure is a fine answer.</p>
397
- <div class="choice" role="group" aria-label="Project type">
398
- <label class="on"><input type="radio" name="t2" checked><span class="ch">Game</span><span class="cb">A world people play in. Its hall builds levels, characters and the loop.</span></label>
399
- <label><input type="radio" name="t2"><span class="ch">Research</span><span class="cb">A question and the work to answer it.</span></label>
400
- <label><input type="radio" name="t2"><span class="ch">Business</span><span class="cb">A product or a service with customers.</span></label>
401
- <label><input type="radio" name="t2"><span class="ch">Non-profit</span><span class="cb">A cause with a community around it.</span></label>
402
- <label><input type="radio" name="t2"><span class="ch">Not sure</span><span class="cb">Fine. It can change later.</span></label>
403
- </div>
404
- <div class="doors"><button type="button" class="door">back</button><button type="button" class="door primary push">next</button></div>
405
- </div>
406
- </div>
407
- </div>
408
- </section>
409
- </main>
410
- <footer class="foot">A composition sheet for task 1003346. Nothing here is served.</footer>
411
- <script>
412
- /* The mock's state contract: read ?state= once, apply one state. No motion in script; nothing is built here. */
413
- (function () {
414
- var states = ['gate', 'name', 'type', 'about', 'home', 'address', 'review', 'done', 'beside'];
415
- var state = new URLSearchParams(location.search || location.hash.slice(1) || (window.__Q || '')).get('state') || 'name';
416
- if (states.indexOf(state) === -1) state = 'name';
417
- document.body.setAttribute('data-state', state);
418
- })();
419
- </script>
420
- </body>
421
- </html>
package/docs/design/mocks/landing/landing-sheet.html DELETED
@@ -1,131 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Landing composition round: three versions of the chrome world (task 1003297)</title>
7
- <style>
8
- :root{--ink:#14151a;--soft:#585c6b;--faint:#8a8fa0;--line:#d9dce5;--bg:#f3f4f8;--card:#ffffff;--kick:#0b5fff;}
9
- :root[data-mode="dark"]{--ink:#f1f2f7;--soft:#a9aec0;--faint:#737890;--line:#2a2e3b;--bg:#0c0e14;--card:#151822;--kick:#7aa2ff;}
10
- @media (prefers-color-scheme:dark){:root:not([data-mode="light"]){--ink:#f1f2f7;--soft:#a9aec0;--faint:#737890;--line:#2a2e3b;--bg:#0c0e14;--card:#151822;--kick:#7aa2ff;}}
11
- *{box-sizing:border-box;margin:0;padding:0}
12
- body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding:clamp(18px,3vw,40px);-webkit-font-smoothing:antialiased;line-height:1.5}
13
- h1{font-size:clamp(22px,3vw,32px);letter-spacing:-.4px;margin-bottom:6px}
14
- .sub{color:var(--soft);max-width:96ch;font-size:14.5px;margin-bottom:8px}
15
- .sub b{color:var(--ink)}
16
- .read{border-left:3px solid var(--kick);padding:10px 14px;margin:14px 0 18px;font-size:14px;max-width:104ch;background:color-mix(in srgb,var(--kick) 7%,transparent);border-radius:0 8px 8px 0}
17
- .read code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
18
- .read ol{margin:6px 0 0 18px}
19
- .bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 22px;position:sticky;top:0;background:var(--bg);padding:10px 0;z-index:5;border-bottom:1px solid var(--line)}
20
- .bar span{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin-left:10px}
21
- .bar span:first-child{margin-left:0}
22
- .bar button{cursor:pointer;font:inherit;font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
23
- .bar button[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
24
- .cand{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px 18px 18px;margin-bottom:22px}
25
- .kick{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--kick);font-weight:700}
26
- .cand h2{font-size:20px;margin:2px 0 4px;letter-spacing:-.2px}
27
- .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 22px;font-size:13.5px;color:var(--soft);margin:6px 0 12px}
28
- .meta b{color:var(--ink);font-weight:600}
29
- .tiles{display:grid;grid-template-columns:3fr 3fr 1fr;gap:12px;align-items:start}
30
- @media (max-width:1100px){.tiles{grid-template-columns:1fr 1fr}}
31
- @media (max-width:640px){.tiles{grid-template-columns:1fr}}
32
- .tile{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
33
- .tileHead{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:12px;color:var(--soft);border-bottom:1px solid var(--line)}
34
- .tileHead a{color:var(--kick);font-weight:600;text-decoration:none}
35
- .frame{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden}
36
- .frame iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:0 0}
37
- .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
38
- .tall .frame{aspect-ratio:1440/2600}
39
- .tall .frame iframe{height:2600px}
40
- .phone .frame{aspect-ratio:390/844}
41
- .phone .frame iframe{width:390px;height:844px}
42
- .tmpl{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:12.5px;color:var(--soft)}
43
- .tmpl img{height:56px;border-radius:6px;border:1px solid var(--line)}
44
- .decide{border:1.5px solid var(--kick);border-radius:16px;padding:16px 18px;margin-bottom:22px;font-size:14px;max-width:110ch}
45
- .decide h2{font-size:18px;margin-bottom:6px}
46
- .decide ol{margin:6px 0 0 20px}
47
- .decide li{margin:4px 0}
48
- footer{color:var(--faint);font-size:12.5px;margin-top:28px}
49
- </style>
50
- <script>
51
- (function(){try{var q=new URLSearchParams(location.search).get('mode');var m=(q==='light'||q==='dark')?q:'dark';document.documentElement.setAttribute('data-mode',m);}catch(e){}})();
52
- </script>
53
- </head>
54
- <body>
55
-
56
- <h1>The landing in the chrome world: three full-page compositions, one to approve</h1>
57
- <p class="sub">Round 2 of the apex pass (task 1003297, goal 1000080), after the world round picked <b>chrome-blobs, composition A</b>. Each version is the whole page (hero, the lifecycle, the ledger proof, living proof, Verro Labs, the basics, the closing pair, the footer with the hall link), built code-led on the chosen mock and the owner's template, with the round-2 hero plates and no new comps. Each carries the owner's named signature interaction, <b>the animated chrome background</b>, done a different way, and a <b>different answer to light mode</b>. Mocks are judged <b>dark first</b>; flip to light to see each version's light answer. The left tile is the first viewport at 1440, the middle tile the full page scrolled, the right tile the page at 390. <b>Template</b> swaps the first tile for the owner's reference. <b>Owner's pick (2026-08-27): v3, the template's page, with light mode rebuilt to the dark standard.</b> Open this sheet from the checkout that holds <code>docs/design/mocks/landing/</code>; the tiles are local iframes.</p>
58
-
59
- <div class="read">
60
- <b>How to read the three.</b> Same content, same token layer (<code>../world/chrome-blobs/_tokens.css</code>), same mechanics, same template; the composition, the motion and the light answer differ. <b>v1</b> keeps the approved first viewport and lets the chrome drift. <b>v2</b> makes the chrome forms bongo-shaped (the owner's ask) and keeps the first viewport black in both modes. <b>v3</b> follows the owner's reference more closely than the mock did (the headline crossing the big blob, the doors inside it) and rebuilds light mode with the chrome on the pale ground. The pick can be a version, or a steer that merges two.
61
- </div>
62
-
63
- <div class="decide" id="light">
64
- <h2>The decision this round asks of the owner: light mode</h2>
65
- The world round's light landing put the chrome in a black panel and the owner called it weak. The settled constraint (dark-first with a real, tested light mode) stands until decided. The three versions show the range:
66
- <ol>
67
- <li><b>v1</b>: the black specimen panel, refined (the chrome stays on black inside one panel on the pale page).</li>
68
- <li><b>v2</b>: dark hero, light page (the first viewport is black in both modes because the chrome needs black; the rest of the page goes light).</li>
69
- <li><b>v3</b>: light rebuilt to the dark standard (the chrome forms cut out and set on the pale ground, no black anywhere).</li>
70
- <li>Or: the landing ships <b>dark-only</b> while the hall and the hub keep both modes.</li>
71
- </ol>
72
- </div>
73
-
74
- <div class="bar">
75
- <span>mode</span>
76
- <button data-md="dark" aria-pressed="true" type="button">dark</button>
77
- <button data-md="light" aria-pressed="false" type="button">light</button>
78
- <span>show</span>
79
- <button data-v="mock" aria-pressed="true" type="button">mock</button>
80
- <button data-v="template" aria-pressed="false" type="button">template</button>
81
- </div>
82
-
83
- <div id="cands"></div>
84
-
85
- <footer>Mocks: <code>docs/design/mocks/landing/v{1,2,3}.html</code> on the chosen world's token layer <code>docs/design/mocks/world/chrome-blobs/_tokens.css</code>. Template: <code>docs/design/references/2026-08-26/site-2-iridescent-chrome-blobs-warm-cta.jpg</code>. Plates: <code>.impeccable/mocks/world-assets/r2-*</code> (kept out of the published core). Decision record: <code>docs/design/landing-page-direction-v2.md</code>; the world pick: <code>docs/design/apex-pass-2-direction.md</code>.</footer>
86
-
87
- <script>
88
- var REF='../../references/2026-08-26/site-2-iridescent-chrome-blobs-warm-cta.jpg';
89
- var CANDS=[
90
- {slug:'v1',name:'v1, the room',
91
- thesis:'Composition A carried to a full page: the staggered lowercase headline over the chrome field, the callouts on the bongo pair, the joined pill doors centred on the round blob.',
92
- signature:'The drift: the three chrome layers float on slow independent loops and answer the pointer with a gentle parallax; the bongos stay still.',
93
- light:'The black specimen panel, refined.'},
94
- {slug:'v2',name:'v2, the bongo field',
95
- thesis:'Centred headline on two lines over a field whose forms are the bongo pair itself: four drum-profile silhouettes at four depths, masked over the chrome plate, with lit hoops, tension rods and matte heads; no separate hero object.',
96
- signature:'The chrome slides inside the drum shapes while the pairs drift across the void on long loops; on load they settle from a soft blur within two thirds of a second.',
97
- light:'Dark hero, light page: the first viewport stays black in both modes.'},
98
- {slug:'v3',name:'v3, the template\'s page',
99
- thesis:'The owner\'s reference followed closely: one big blob (the single-blob plate, whole and uncropped) dominates centre-left, the two-line headline crosses it, the callouts sit at the template\'s three positions, the doors float inside the blob, the three-quarter bongo cutout rides the sweeping form at the right.',
100
- signature:'The breath: the big blob breathes (14 s) and its iridescence drifts (40 s) while the small bead orbits it (60 s); on load the three forms converge into place.',
101
- light:'Light rebuilt to the dark standard: the same sculpture as alpha cutouts on the pale ground with a contact shadow, type on clean paper, no black panel anywhere.'}
102
- ];
103
- var mode='dark', view='mock';
104
- function tile(c,label,cls){
105
- var src=c.slug+'.html?mode='+mode;
106
- var body = (view==='template' && !cls) ? '<img src="'+REF+'" alt="the owner\'s template">' : '<iframe loading="lazy" src="'+src+'" title="'+c.name+': '+label+'"></iframe>';
107
- return '<div class="tile '+(cls||'')+'"><div class="tileHead"><span>'+label+'</span><a href="'+src+'" target="_blank">open full</a></div><div class="frame">'+body+'</div></div>';
108
- }
109
- function render(){
110
- document.getElementById('cands').innerHTML=CANDS.map(function(c,i){
111
- return '<section class="cand" id="'+c.slug+'">'+
112
- '<div class="kick">Version '+(i+1)+' of 3</div><h2>'+c.name+'</h2>'+
113
- '<div class="meta"><div><b>Composition.</b> '+c.thesis+'</div><div><b>Signature.</b> '+c.signature+'</div><div><b>Light answer.</b> '+c.light+'</div></div>'+
114
- '<div class="tiles">'+tile(c,'first viewport at 1440')+tile(c,'the full page','tall')+tile(c,'at 390','phone')+'</div>'+
115
- '</section>';
116
- }).join('');
117
- fit();
118
- }
119
- function fit(){
120
- document.querySelectorAll('.frame').forEach(function(f){
121
- var fr=f.querySelector('iframe'); if(!fr) return;
122
- var w=f.closest('.phone')?390:1440; fr.style.transform='scale('+(f.clientWidth/w)+')';
123
- });
124
- }
125
- document.querySelectorAll('[data-md]').forEach(function(b){b.onclick=function(){mode=b.dataset.md;document.documentElement.setAttribute('data-mode',mode);document.querySelectorAll('[data-md]').forEach(function(x){x.setAttribute('aria-pressed',String(x===b));});render();};});
126
- document.querySelectorAll('[data-v]').forEach(function(b){b.onclick=function(){view=b.dataset.v;document.querySelectorAll('[data-v]').forEach(function(x){x.setAttribute('aria-pressed',String(x===b));});render();};});
127
- window.addEventListener('resize',fit);
128
- render();
129
- </script>
130
- </body>
131
- </html>