spectoflow 0.17.1 → 0.18.0

package/templates/dashboard/public/designs/console.css

@@ -54,6 +54,15 @@ html[data-design="console"] nav.tabs#tabs {
 }
 html[data-design="console"] .topbar { padding-left:calc(var(--cx-rail-w) + 16px); }
 html[data-design="console"] .stage { margin-left:var(--cx-rail-w); }
+/* .app-footer is a sibling of .stage, not inside it — the rail is fixed to the viewport (not just
+   .stage), so without this it clips the footer's left edge (the brand name loses its first letters)
+   at every scroll position, not just at the top. */
+html[data-design="console"] .app-footer { margin-left:var(--cx-rail-w); }
+/* The header brand mark reads too small at the base 26px against this design's darker, denser
+   topbar — give it more presence. The footer's own (deliberately smaller) logo keeps its existing,
+   more specific rule and is unaffected. */
+html[data-design="console"] .topbar .brand-logo { height:34px; }
+html[data-design="console"] .topbar .brand-logo-img { height:34px; }
 html[data-design="console"] nav.tabs#tabs .tab {
   position:relative; flex-direction:column; justify-content:center; gap:0;
   width:52px; height:48px; padding:0; border-radius:12px; flex-shrink:0;
@@ -179,6 +188,7 @@ html[data-design="console"][data-theme="light"] .cx-cmdk { background:rgba(15,23
   }
   html[data-design="console"] .topbar { padding-left:16px; }
   html[data-design="console"] .stage { margin-left:0; margin-bottom:64px; }
+  html[data-design="console"] .app-footer { margin-left:0; }
   html[data-design="console"] nav.tabs#tabs .tab-label { display:none !important; }
 }
 

package/templates/dashboard/public/designs/orbit.css

@@ -45,6 +45,12 @@ html[data-design="orbit"] .kpi-num { font-weight:700; }
 
 /* navigation is the radial menu — the tab bar is hidden, content runs full width */
 html[data-design="orbit"] nav.tabs { display:none; }
+
+/* The hub (orbit.js) takes over the brand mark's visual role, so the original logo link is hidden;
+   the "spectoflow" text becomes the dashboard link in its place (see orbit.js's brand-name handler). */
+html[data-design="orbit"] .brand-logo { display:none; }
+html[data-design="orbit"] .brand-name { cursor:pointer; transition:opacity .15s; }
+html[data-design="orbit"] .brand-name:hover { opacity:.72; text-decoration:underline; text-underline-offset:3px; }
 html[data-design="orbit"] .topbar { grid-template-columns:auto 1fr auto; }
 
 /* pills + rounder cards */
@@ -88,24 +94,30 @@ html[data-design="orbit"] body.booting .card { animation: ob-rise .45s cubic-bez
  * THE HUB — round brand button in the header; shows live global progress %, doubles as the
  * radial-menu trigger. Injected by orbit.js as the first child of .brand.
  * ============================================================================================ */
+/* The hub IS the brand mark: the original .brand-logo link is hidden (see below) and this button
+   takes over both roles it used to split — visual identity AND, now, the menu trigger. The ring is a
+   conic-gradient driven by --ob-pct (set in orbit.js on every progress update): a live "how much of
+   the project shipped" reading at a glance, without needing a text percentage on the closed hub. */
 html[data-design="orbit"] .ob-hub {
-  position:relative; width:46px; height:46px; border-radius:50%; flex-shrink:0;
-  background:var(--signal); color:var(--on-accent); display:grid; place-items:center;
-  box-shadow:0 8px 20px color-mix(in srgb, var(--signal) 40%, transparent);
-  transition:transform .18s; cursor:pointer; border:0; font:inherit;
-}
-html[data-design="orbit"] .ob-hub:hover { transform:scale(1.06); }
-html[data-design="orbit"] .ob-hub .ob-pct { font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:-.02em; }
-html[data-design="orbit"] .ob-hub::after {
-  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--signal); opacity:.35;
-  animation: ob-breathe 2.6s ease-in-out infinite;
+  position:relative; width:46px; height:46px; border-radius:50%; flex-shrink:0; padding:3px;
+  background:conic-gradient(var(--signal) calc(var(--ob-pct,0) * 1%), var(--surface-3) 0);
+  display:grid; place-items:center; box-shadow:0 6px 16px color-mix(in srgb, var(--signal) 28%, transparent);
+  transition:transform .18s,box-shadow .18s; cursor:pointer; border:0; font:inherit;
 }
-@keyframes ob-breathe { 0%,100%{ transform:scale(1); opacity:.35; } 50%{ transform:scale(1.08); opacity:.12; } }
+html[data-design="orbit"] .ob-hub::before {
+  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--surface); z-index:0;
+}
+/* No `display` here: the theme-toggle rule (.brand-logo-img.is-dark/.is-light in styles.css) must stay
+   in control of which of the two cloned <img>s is shown — an explicit display:block on this class
+   used to outrank it (higher specificity) and forced BOTH clones visible at once, a ghosted double
+   logo most visible in dark mode (the two assets differ more there than in light mode). */
+html[data-design="orbit"] .ob-hub .ob-hub-logo { position:relative; z-index:1; height:21px; width:auto; }
+html[data-design="orbit"] .ob-hub:hover { transform:scale(1.07); box-shadow:0 8px 20px color-mix(in srgb, var(--signal) 38%, transparent); }
 
 /* ---- fixed bottom-left FAB on small screens ---- */
 @media (max-width:900px) {
-  html[data-design="orbit"] .ob-hub { position:fixed; left:16px; bottom:18px; z-index:42; width:56px; height:56px; }
-  html[data-design="orbit"] .ob-hub .ob-pct { font-size:14px; }
+  html[data-design="orbit"] .ob-hub { position:fixed; left:16px; bottom:18px; z-index:42; width:56px; height:56px; padding:4px; }
+  html[data-design="orbit"] .ob-hub .ob-hub-logo { height:25px; }
 }
 
 /* ============================================================================================
@@ -149,21 +161,26 @@ html[data-design="orbit"] .ob-chev.ob-left:hover { transform:translateY(-50%) sc
 html[data-design="orbit"] .ob-chev.ob-right { top:50%; right:-4px; transform:translateY(-50%); }
 html[data-design="orbit"] .ob-chev.ob-right:hover { transform:translateY(-50%) scale(1.12); }
 
+/* The dial's center repeats the brand mark alone — the same logo as the hub, at a size that makes it
+   the clear focal point of the whole dial, so identity carries through from closed button to open
+   menu. The % is already encoded by the ring around it (.ob-prog); repeating it as text here would
+   only compete with the logo instead of framing it. */
 html[data-design="orbit"] .ob-center {
   position:absolute; left:50%; top:50%; width:76px; height:76px; transform:translate(-50%,-50%);
-  border-radius:50%; display:grid; place-items:center; background:var(--signal); color:var(--on-accent);
-  box-shadow:0 10px 24px color-mix(in srgb, var(--signal) 40%, transparent); text-align:center; line-height:1;
+  border-radius:50%; display:grid; place-items:center;
+  background:var(--signal); color:var(--on-accent);
+  box-shadow:0 10px 24px color-mix(in srgb, var(--signal) 40%, transparent);
   border:0; cursor:pointer;
 }
-html[data-design="orbit"] .ob-center .ob-pct { font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.03em; }
-html[data-design="orbit"] .ob-center .ob-lbl { font:500 9.5px var(--mono); opacity:.85; margin-top:2px; letter-spacing:.06em; text-transform:uppercase; }
+html[data-design="orbit"] .ob-center .ob-center-logo { height:34px; width:auto; }
 html[data-design="orbit"] .ob-center::after {
   content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--signal); opacity:.35;
   animation: ob-breathe 2.6s ease-in-out infinite;
 }
+@keyframes ob-breathe { 0%,100%{ transform:scale(1); opacity:.35; } 50%{ transform:scale(1.08); opacity:.12; } }
 @media (max-width:900px) {
   html[data-design="orbit"] .ob-center { width:60px; height:60px; }
-  html[data-design="orbit"] .ob-center .ob-pct { font-size:17px; }
+  html[data-design="orbit"] .ob-center .ob-center-logo { height:27px; }
 }
 
 html[data-design="orbit"] .ob-item {

package/templates/dashboard/public/designs/orbit.js

@@ -20,7 +20,21 @@
     return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="' + d + '"/></svg>';
   }
 
-  /* ---- hub button (injected into .brand) ---- */
+  /* ---- the brand mark, reused wherever Orbit needs a logo ----
+     Clones the header's own theme-aware <img> pair (.brand-logo-img.is-dark/.is-light) rather than
+     hardcoding a filename, so a custom-uploaded logo or a future asset change is picked up for free.
+     The light/dark swap rule is written purely against the shared class names (no ancestor scoping),
+     so it keeps working no matter where these clones end up (hub button, dial center). */
+  function logoImgsHtml(extraClass) {
+    var imgs = document.querySelectorAll('.brand > .brand-logo .brand-logo-img');
+    if (!imgs.length) return '';
+    return Array.prototype.map.call(imgs, function (img) {
+      var variant = img.className.replace('brand-logo-img', '').trim();
+      return '<img class="brand-logo-img' + (variant ? ' ' + variant : '') + (extraClass ? ' ' + extraClass : '') + '" src="' + img.getAttribute('src') + '" alt="" />';
+    }).join('');
+  }
+
+  /* ---- hub button (injected into .brand) — the logo itself, ringed with live progress ---- */
   function buildHub() {
     if (hubEl) return;
     var brand = document.querySelector('.brand');
@@ -30,21 +44,28 @@
     hubEl.className = 'ob-hub';
     hubEl.title = 'Menu (M)';
     hubEl.setAttribute('aria-haspopup', 'dialog');
-    hubEl.innerHTML = '<span class="ob-pct">0%</span>';
+    hubEl.setAttribute('aria-label', 'Open menu');
+    hubEl.innerHTML = logoImgsHtml('ob-hub-logo');
     brand.insertBefore(hubEl, brand.firstChild);
     hubEl.addEventListener('click', toggleOverlay);
   }
   function removeHub() { if (hubEl) { hubEl.remove(); hubEl = null; } }
 
+  /* ---- "spectoflow" text next to the hub opens the dashboard (the hub itself opens the menu) ---- */
+  function onBrandNameClick() {
+    var board = tabs().filter(function (t) { return t.dataset.tab === 'board'; })[0];
+    if (board) board.click();
+  }
+
   /* ---- global progress % — read #globalMeterFill's width, kept live ---- */
   function updatePct() {
     var fill = document.getElementById('globalMeterFill');
     var pct = 0;
     if (fill && fill.style && fill.style.width) pct = parseFloat(fill.style.width) || 0;
     pct = Math.max(0, Math.min(100, Math.round(pct)));
-    if (hubEl) { var hp = hubEl.querySelector('.ob-pct'); if (hp) hp.textContent = pct + '%'; }
+    if (hubEl) hubEl.style.setProperty('--ob-pct', pct); // drives the hub's conic-gradient ring
     if (ovEl) {
-      var cp = ovEl.querySelector('.ob-center .ob-pct'); if (cp) cp.textContent = pct + '%';
+      // the center is the logo alone; progress is read from the ring around it, not repeated as text
       var prog = ovEl.querySelector('.ob-prog');
       if (prog) { var C = 804.2, len = (pct / 100 * C).toFixed(1); prog.setAttribute('stroke-dasharray', len + ' ' + C); }
     }
@@ -80,7 +101,7 @@
         '<button type="button" class="ob-chev ob-down" title="Next (Down)">' + chevSvg('down') + '</button>' +
         '<button type="button" class="ob-chev ob-left" title="Search / Board">' + chevSvg('left') + '</button>' +
         '<button type="button" class="ob-chev ob-right" title="Run">' + chevSvg('right') + '</button>' +
-        '<button type="button" class="ob-center" title="Close (Esc)"><span class="ob-pct">0%</span><span class="ob-lbl">Delivered</span></button>' +
+        '<button type="button" class="ob-center" title="Close (Esc)" aria-label="Close menu">' + logoImgsHtml('ob-center-logo') + '</button>' +
         items +
       '</div>';
     document.body.appendChild(ovEl);
@@ -179,12 +200,16 @@
       fillObserver = new MutationObserver(updatePct);
       fillObserver.observe(fill, { attributes: true, attributeFilter: ['style'] });
     }
+    var bn = document.querySelector('.brand-name');
+    if (bn) bn.addEventListener('click', onBrandNameClick);
   }
   function leave() {
     closeOverlay();
     removeHub();
     if (pctInterval) { clearInterval(pctInterval); pctInterval = null; }
     if (fillObserver) { fillObserver.disconnect(); fillObserver = null; }
+    var bn = document.querySelector('.brand-name');
+    if (bn) bn.removeEventListener('click', onBrandNameClick);
   }
   function sync() {
     var on = isOrbit();