@bongos/core 1.19.92 → 1.19.94

package/public-landing/assets/cosmos.css

@@ -293,6 +293,12 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
 .confirmRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--err);}
 .confirmRow .plain{font-weight:600;color:var(--ink-soft);}
 .finePrint{font-size:12.5px;color:var(--ink-faint);font-weight:600;margin-top:16px;line-height:1.5;}
+/* a link in fine print still has to look like one — without this it fell back to
+   the browser's default blue, the one colour in the page that is not ours */
+.finePrint a{color:var(--accent-deep);font-weight:700;text-decoration:none;}
+.finePrint a:hover{text-decoration:underline;}
+:root[data-mode="dark"] .finePrint a{color:var(--sun-lit);}
+@media (prefers-color-scheme: dark){:root:not([data-mode="light"]) .finePrint a{color:var(--sun-lit);}}
 
 /* ── progress strips: one visual, per-flow vocabularies (direction §4).
    Default = the sea-blue "working" look; .isLive = verified-landed green;
@@ -359,6 +365,240 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
 .foot{position:relative;z-index:1;text-align:center;font-size:13px;font-weight:600;color:var(--foot-ink);padding:0 20px 34px;text-shadow:var(--chrome-glow);}
 .foot code{font-family:var(--font-mono);color:var(--foot-code);}
 
+/* ═══════════════════════════════════════════════════════════════════════
+   THE PROJECT HUB (task 1002743, direction docs/design/projects-hub-direction.md §6)
+
+   /projects is one surface holding three views — map (sky | table), your
+   projects, new project — under a persistent shell. These components were
+   authored page-locally in the approved mock and GRADUATE here, so the hub
+   and the manage cards are one system rather than two that resemble each
+   other. Every dark override is written TWICE (the explicit hook and the
+   prefers-color-scheme twin); tests/cosmos_token_contrast.mjs compares them.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* ── the persistent shell header. It belongs to the PAGE, not to the orb
+   field, so it never drifts, scales or pans with the sky — and it renders in
+   EVERY view including the table, which is what the gate's
+   `body:not(.view-space)` rule got wrong. ── */
+.shell{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;
+  gap:clamp(10px,2vw,22px);padding:16px clamp(16px,4vw,34px);flex-wrap:wrap;}
+/* The wordmark TYPES, so its width changes every ~190ms. As the middle child of
+   a space-between row the nav would slide with it. Equal `flex:1 1 0` flanks
+   compute to the same width regardless of content, which pins the nav dead
+   centre and lets the mark change width inside its own box. Measured: 0px drift
+   across seven typed states. */
+.shell .mark{flex:1 1 0;min-width:0;
+  font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.5px;
+  text-transform:lowercase;color:var(--chrome-ink);text-decoration:none;text-shadow:var(--chrome-glow);
+  white-space:nowrap;}
+.shell .mark span{color:var(--chrome-accent);}
+.shell .caret{color:var(--chrome-accent);animation:cbBlink 1s step-end infinite;font-weight:400;}
+@keyframes cbBlink{50%{opacity:0;}}
+.shell-right{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;
+  gap:clamp(8px,1.6vw,14px);flex-wrap:wrap;}
+
+/* the three destinations, in the .btn-space glass voice so the nav and the
+   chrome buttons read as one family */
+.navrow{flex:0 0 auto;display:flex;align-items:center;gap:4px;background:var(--glass-bg);
+  border:1.5px solid var(--glass-border);border-radius:999px;padding:4px;backdrop-filter:blur(4px);}
+.navrow a{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--glass-ink);
+  text-decoration:none;padding:7px 15px;border-radius:999px;white-space:nowrap;text-shadow:var(--chrome-glow);}
+.navrow a:hover{color:var(--chrome-accent);}
+.navrow a[aria-current="page"]{background:var(--accent);color:#fff;text-shadow:none;}
+/* Home LEAVES the hub, so it never takes the current-view pill and a hairline
+   sets it apart. Without it the header offered no way back to the landing page
+   except the wordmark, which nothing announced as a link. */
+.navrow .navHome{color:var(--glass-ink);opacity:.9;}
+.navrow .navHome:hover{opacity:1;color:var(--chrome-accent);}
+.navSep{width:1px;align-self:stretch;margin:4px 3px;background:var(--glass-border);flex:0 0 auto;}
+/* below the mid breakpoint the three groups stack and centre rather than
+   fighting for one row — equal flanks only buy a centred nav while it fits */
+@media (max-width:820px){
+  .shell{justify-content:center;}
+  .shell .mark,.shell-right{flex:0 0 auto;}
+  .navrow{order:3;flex-basis:100%;justify-content:center;}
+}
+
+/* ── the per-view control strip: Sky|Table, the only-mine filter, search ── */
+.toolbar{position:relative;z-index:30;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
+  padding:0 clamp(16px,4vw,34px) 16px;}
+.seg{display:inline-flex;background:var(--glass-bg);border:1.5px solid var(--glass-border);
+  border-radius:999px;padding:4px;gap:4px;backdrop-filter:blur(4px);}
+.seg button{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--glass-ink);
+  background:none;border:none;cursor:pointer;padding:7px 16px;border-radius:999px;text-shadow:var(--chrome-glow);}
+.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;text-shadow:none;}
+
+.search{flex:1;min-width:190px;max-width:460px;display:flex;align-items:center;gap:9px;
+  background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:999px;
+  padding:8px 16px;backdrop-filter:blur(4px);}
+.search svg{width:15px;height:15px;fill:none;stroke:var(--glass-ink);stroke-width:2;flex:0 0 auto;}
+.search input{flex:1;min-width:0;background:none;border:none;outline:none;font-family:var(--font-mono);
+  font-size:13px;color:var(--chrome-ink);}
+.search input::placeholder{color:var(--glass-ink);opacity:.75;}
+.search .count{font-family:var(--font-mono);font-size:11.5px;color:var(--glass-ink);white-space:nowrap;}
+
+/* the only-mine filter — a real two-state control, not a link: it filters the
+   SAME data in place rather than navigating */
+.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:var(--glass-bg);
+  border:1.5px solid var(--glass-border);border-radius:999px;padding:7px 15px 7px 11px;
+  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--glass-ink);
+  backdrop-filter:blur(4px);text-shadow:var(--chrome-glow);white-space:nowrap;}
+.switch input{position:absolute;opacity:0;pointer-events:none;}
+.switch .track{width:32px;height:18px;border-radius:999px;background:color-mix(in srgb,var(--ink) 22%,transparent);
+  position:relative;flex:0 0 auto;transition:background .16s ease;}
+.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+  background:#fff;transition:transform .16s ease;box-shadow:0 1px 3px rgba(0,0,0,.3);}
+.switch input:checked + .track{background:var(--accent);}
+.switch input:checked + .track::after{transform:translateX(14px);}
+.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px;}
+.switch:has(input:checked){color:var(--chrome-accent);border-color:var(--accent);}
+
+/* ── the orb field. Ground B (owner, 2026-08-13): dual-mode full-bleed — the
+   sky IS the page and follows light/dark, which is what --sky-bg/--star-display
+   already encode. Deliberately STATIC: where things sit is this pass, how the
+   sky moves is not. Component-scoped custom properties only — a page-local or
+   component `:root` would outrank the branding pack spliced after this file. ── */
+.fieldWrap{padding:0;max-width:none;}
+.field{position:relative;height:calc(100vh - 232px);min-height:340px;overflow:hidden;
+  --grid-ink:color-mix(in srgb,var(--rule) 92%,transparent);}
+.field .ground{position:absolute;inset:0;background:var(--sky-bg);}
+/* the gravity sheet, flattened: two gradients under a radial mask */
+.field .ground::after{content:"";position:absolute;inset:-10%;
+  background-image:linear-gradient(var(--grid-ink) 1px,transparent 1px),
+                   linear-gradient(90deg,var(--grid-ink) 1px,transparent 1px);
+  background-size:74px 74px;
+  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 12%,transparent 78%);
+          mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 12%,transparent 78%);}
+.field .stars{position:absolute;inset:0;display:var(--star-display);}
+.field .stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.55;}
+
+/* a project rendered as an orb. Colour comes from tokens, never a literal, so
+   every accent follows a re-theme. */
+.worldOrb{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
+  align-items:center;gap:9px;cursor:pointer;background:none;border:none;padding:0;text-decoration:none;}
+.worldOrb .disc{width:var(--d,96px);height:var(--d,96px);border-radius:50%;position:relative;
+  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--acc) 22%,#fff) 0%,
+             var(--acc) 42%,color-mix(in srgb,var(--acc) 72%,#000) 100%);
+  box-shadow:0 0 34px -4px color-mix(in srgb,var(--acc) 55%,transparent);}
+.worldOrb .disc::after{content:"";position:absolute;inset:0;border-radius:50%;
+  border:1.5px solid color-mix(in srgb,#fff 55%,transparent);}
+.worldOrb .nm{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--chrome-ink);
+  text-shadow:var(--chrome-glow);white-space:nowrap;}
+.worldOrb .sub{font-family:var(--font-mono);font-size:11.5px;color:var(--chrome-accent);
+  text-shadow:var(--chrome-glow);white-space:nowrap;}
+/* z-index 3: the disc's ::after rim is positioned and later in DOM order, so
+   without this the badge is painted over by the orb it labels */
+.worldOrb .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:3;
+  font-family:var(--font-mono);font-size:10.5px;font-weight:500;padding:2px 9px;border-radius:999px;
+  white-space:nowrap;background:var(--gold-soft);color:#2b170e;
+  box-shadow:0 2px 8px color-mix(in srgb,var(--ink) 30%,transparent);}
+/* the owned ring is ONE ring, not two — a second cream halo read as a defect */
+.worldOrb[data-rel="owner"] .disc{box-shadow:0 0 34px -4px color-mix(in srgb,var(--acc) 55%,transparent),
+                              0 0 0 3px var(--accent);}
+.worldOrb[data-rel="owner"] .badge{background:var(--accent);color:#fff;}
+/* building, not owning — a lighter claim, said differently on purpose */
+.worldOrb[data-rel="builder"] .disc{box-shadow:0 0 34px -4px color-mix(in srgb,var(--acc) 55%,transparent),
+                              0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent);}
+.worldOrb[data-rel="builder"] .badge{background:var(--accent-soft);color:var(--accent-deep);
+  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);}
+:root[data-mode="dark"] .worldOrb[data-rel="builder"] .badge{color:var(--sun-lit);}
+@media (prefers-color-scheme: dark){:root:not([data-mode="light"]) .worldOrb[data-rel="builder"] .badge{color:var(--sun-lit);}}
+.worldOrb .chip{transform:scale(.88);}
+
+/* what the only-mine filter shows when you are connected to nothing. Not a
+   hypothetical — GET /my-projects returns { owned: [], building: [] } for the
+   platform's own archon today, so it is the DAY-ONE state. */
+.fieldEmpty{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
+  justify-content:center;gap:14px;text-align:center;padding:26px;z-index:4;}
+.field.isEmpty .fieldEmpty{display:flex;}
+.fieldEmpty p{font-size:15px;font-weight:600;color:var(--chrome-ink);max-width:44ch;line-height:1.55;
+  text-shadow:var(--chrome-glow);}
+.fieldEmpty .sub{font-size:13.5px;font-weight:600;color:var(--glass-ink);}
+
+.hintbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;
+  flex-wrap:wrap;justify-content:center;font-family:var(--font-mono);font-size:11.5px;
+  color:var(--glass-ink);background:var(--glass-bg);border:1.5px solid var(--glass-border);
+  border-radius:999px;padding:7px 16px;backdrop-filter:blur(4px);max-width:92%;}
+.hintbar kbd{font-family:var(--font-mono);background:color-mix(in srgb,var(--accent) 24%,transparent);
+  border-radius:5px;padding:1px 6px;font-size:11px;color:var(--chrome-accent);}
+
+/* ── the directory table: the same rows, the same filter, and the shell is
+   still overhead — the gate's table dropped the projects door entirely. ── */
+.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:20px;overflow:hidden;
+  box-shadow:var(--shadow-card);}
+.tbl th{text-align:left;font-family:var(--font-display);font-size:11.5px;font-weight:700;
+  letter-spacing:.9px;text-transform:uppercase;color:var(--ink-faint);padding:15px 18px;
+  border-bottom:2px solid var(--line);white-space:nowrap;}
+.tbl td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;
+  color:var(--ink-soft);vertical-align:middle;}
+.tbl tr:last-child td{border-bottom:none;}
+.tbl tr:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent);}
+.tbl .pname{display:flex;align-items:center;gap:11px;}
+.tbl .pdot{width:11px;height:11px;border-radius:50%;background:var(--acc);flex:0 0 auto;
+  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent);}
+.tbl .ptitle{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);}
+.tbl .ptag{font-size:12.5px;color:var(--ink-faint);font-weight:600;}
+.tbl .num{font-family:var(--font-mono);font-weight:500;}
+.tbl .pill{display:inline-block;font-family:var(--font-mono);font-size:11px;padding:3px 10px;
+  border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);}
+:root[data-mode="dark"] .tbl .pill{color:var(--sun-lit);}
+@media (prefers-color-scheme: dark){:root:not([data-mode="light"]) .tbl .pill{color:var(--sun-lit);}}
+.tbl .tags{display:flex;gap:6px;flex-wrap:wrap;}
+.tbl .tags span{font-family:var(--font-mono);font-size:10.5px;padding:2px 8px;border-radius:999px;
+  border:1px solid var(--line);color:var(--ink-faint);}
+.tbl td.right{text-align:right;}
+/* Nothing in an action or status cell may wrap: "Manage →" breaking after the
+   space and the chip's recency dropping to a second line both read as a broken
+   control rather than a tight column. Those two cells claim their width and the
+   name cell absorbs the slack. */
+.tbl .btn,.tbl .chip{white-space:nowrap;}
+.tbl .colStatus{width:1%;white-space:nowrap;}
+.tbl .colGo{width:1%;white-space:nowrap;padding-left:8px;}
+.tbl .colName{width:auto;}
+@media (max-width:780px){.tbl .colTags,.tbl .colType{display:none;}}
+
+/* ── your projects: search + a state filter whose pills carry live counts, so
+   a state with nothing in it reads 0 before you click it. The filter GROUPS
+   the chip outcomes; it never relabels them — "Live" holds both `live` and
+   `live?` because neither is known-down, and each card still says which. ── */
+.mineBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
+.mineBar .search{background:var(--bg-card);border-color:var(--line);}
+.mineBar .search input{color:var(--ink);}
+.mineBar .search input::placeholder{color:var(--ink-faint);}
+.mineBar .search svg{stroke:var(--ink-faint);}
+.mineBar .search .count{color:var(--ink-faint);}
+.filters{display:flex;gap:7px;flex-wrap:wrap;}
+.filters button{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--font-display);
+  font-weight:700;font-size:13px;color:var(--ink-soft);background:var(--bg-card);
+  border:2px solid var(--line);border-radius:999px;padding:7px 14px;white-space:nowrap;}
+.filters button:hover{border-color:var(--accent);color:var(--accent-deep);}
+.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
+.filters .n{font-family:var(--font-mono);font-weight:500;font-size:11.5px;opacity:.75;}
+.mineEmpty{font-size:14.5px;font-weight:600;color:var(--ink-soft);padding:10px 0 22px;}
+
+/* ── the create rail ── */
+.steps{display:flex;align-items:flex-start;margin-bottom:26px;}
+.steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;list-style:none;}
+.steps li:not(:first-child)::before{content:"";position:absolute;top:15px;right:50%;width:100%;height:3px;
+  background:var(--line);margin-right:15px;border-radius:2px;}
+.steps li.done:not(:first-child)::before{background:var(--accent);}
+.steps .snum{width:32px;height:32px;border-radius:50%;border:3px solid var(--line);background:var(--bg-card);
+  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;
+  font-size:14px;color:var(--ink-faint);position:relative;z-index:1;}
+.steps li.done .snum{border-color:var(--accent);background:var(--accent);color:#fff;}
+.steps li.now .snum{border-color:var(--accent);color:var(--accent-deep);}
+:root[data-mode="dark"] .steps li.now .snum{color:var(--sun-lit);}
+@media (prefers-color-scheme: dark){:root:not([data-mode="light"]) .steps li.now .snum{color:var(--sun-lit);}}
+.steps .slbl{font-size:12.5px;font-weight:700;color:var(--ink-faint);}
+.steps li.now .slbl,.steps li.done .slbl{color:var(--ink-soft);}
+.createSplit{display:grid;grid-template-columns:1fr 300px;gap:var(--pad-md);align-items:center;}
+@media (max-width:840px){.createSplit{grid-template-columns:1fr;}.createSplit .bongoCell{display:none;}}
+
+/* ── the honest empty / not-available-here state. A child instance does not
+   provision, so it must SAY so rather than fall into the generic alert. ── */
+.fieldNote{border:2px dashed var(--line);border-radius:18px;padding:24px;text-align:center;
+  font-size:14.5px;font-weight:600;color:var(--ink-soft);line-height:1.55;}
+
 @media (max-width:640px){
   .projHead{gap:8px;}
   .actions{flex-direction:column;align-items:stretch;}

package/public-landing/index.html

@@ -233,7 +233,7 @@ h1.big{font-family:var(--font-display);font-weight:700;font-size:clamp(33px,5.4v
 <div class="wrap">
   <section class="lead">
     <div>
-      <p class="eyebrow">type <span class="typed" id="typed">bongos</span><span class="caret" aria-hidden="true">▌</span> in any AI</p>
+      <p class="eyebrow">type <b>bongos</b> in <span class="typed" id="typed">any AI</span><span class="caret" aria-hidden="true">▌</span></p>
       <h1 class="big" data-brand-tagline>Building software is laying&nbsp;down a beat.</h1>
       <p class="lede">AI agents claim tasks and ship the code; you set the direction and the gates.</p>
       <div class="cta-row">
@@ -556,9 +556,15 @@ h1.big{font-family:var(--font-display);font-weight:700;font-size:clamp(33px,5.4v
   var reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
   /* ── the self-typing eyebrow. DECORATION over real text: the markup already
-     says "bongos" and stays correct with scripting off or motion reduced. ── */
+     reads "type bongos in any AI" and stays correct with scripting off or
+     motion reduced.
+
+     `bongos` is the CONSTANT and the ASSISTANT is what varies — that is the
+     whole claim: one word, and it works in any of them. Typing the first slot
+     instead produced "type claude in any AI", which nobody does and which
+     inverted the point of the line. ── */
   if (!reduce) {
-    var el = document.getElementById('typed'), words = ['claude','gemini','chatgpt','bongos'], w = 0;
+    var el = document.getElementById('typed'), words = ['Claude','ChatGPT','Gemini','any AI'], w = 0;
     (function cycle(){
       var word = words[w++ % words.length], i = 0;
       el.textContent = '';
@@ -567,7 +573,7 @@ h1.big{font-family:var(--font-display);font-weight:700;font-size:clamp(33px,5.4v
         else setTimeout(function erase(){
           if (el.textContent.length) { el.textContent = el.textContent.slice(0, -1); setTimeout(erase, 38); }
           else cycle();
-        }, word === 'bongos' ? 2100 : 900);
+        }, word === 'any AI' ? 2100 : 900);
       })();
     })();
   }