@vibes.diy/base 14.3.230 → 14.3.232

package/components/VibesWindowFrame.styles.d.ts

@@ -1 +1 @@
-export declare const VIBES_WINDOW_CSS: string;
+export declare const VIBES_WINDOW_CSS = "\n.vwin-scope {\n  --vwin-frame: #000;\n  --vwin-bar: #fefff1;\n  --vwin-line: #2c2c22;\n  --vwin-field: #cccdc8;\n  --vwin-grid-line: rgba(255, 255, 255, 0.375);\n  --vwin-red: #d92a1c;\n  --vwin-gear-disc: #231f20;\n  --vwin-cream: #fffff0;\n  --vwin-edge: #231f20;\n  --vwin-menu-bg: #fefff1;\n  --vwin-menu-ink: #1a1a1a;\n  --vwin-bar-height: 53px;\n  /* The black border: 15px on the sides, top and bottom from 768px up (the\n     designer comp, #6906). Phones go full bleed (Marcus, 2026-10-07: side\n     borders made the page feel glitchy on a phone); the black stays only at\n     the top, behind the bar's rounded corners. */\n  --vwin-side: 15px;\n  --vwin-top: 15px;\n  --vwin-bottom: 15px;\n  /* The bottom border never sits over the home indicator, except in the iOS\n     app on a phone (see the phone tokens). */\n  --vwin-bottom-floor: var(--vibes-safe-bottom, env(safe-area-inset-bottom, 0px));\n  /* Display headings in the frame are set bold (Chris, 2026-10-07); getTitle\n     reads this, so pages outside the frame keep the regular cut. */\n  --vibes-home-title-weight: 700;\n}\n/* Phones (Chris, 2026-10-08): a few px of black round the sides and top, and\n   a black foundation under the window, so the site sits popped out on top of\n   a black base with all the active content above it. The window ends in\n   rounded corners 16px above the foundation strip (see .vwin-frame::after);\n   in mobile Safari that strip is the whole toolbar area, painted solid black,\n   so the address bar floats on black. */\n@media (width < 768px) {\n  .vwin-scope {\n    --vwin-side: 4px;\n    --vwin-top: 4px;\n    --vwin-bottom: 16px;\n  }\n  /* The iOS app has no address bar to float: the bottom edge matches the\n     sides (4px) and the window runs over the home-indicator area, its content\n     padded to clear the indicator (Marcus, 2026-10-08). */\n  .vwin-scope[data-shell=\"native\"] {\n    --vwin-bottom: 4px;\n    --vwin-bottom-floor: 0px;\n  }\n  .vwin-scope[data-shell=\"native\"] .vwin-content {\n    padding-bottom: var(--vibes-safe-bottom, env(safe-area-inset-bottom, 0px));\n  }\n}\n@media (prefers-color-scheme: dark) {\n  .vwin-scope:not([data-scheme=\"light\"]) {\n  --vwin-line: #83817d;\n  --vwin-field: #2a2a2a;\n  --vwin-grid-line: rgba(0, 0, 0, 0.275);\n  --vwin-edge: #000;\n  --vwin-menu-bg: #2a2a2a;\n  --vwin-menu-ink: #e0e0e0;\n  --vibes-home-title-ink: #fefff1;\n}\n}\n.vwin-scope[data-scheme=\"dark\"] {\n  --vwin-line: #83817d;\n  --vwin-field: #2a2a2a;\n  --vwin-grid-line: rgba(0, 0, 0, 0.275);\n  --vwin-edge: #000;\n  --vwin-menu-bg: #2a2a2a;\n  --vwin-menu-ink: #e0e0e0;\n  --vibes-home-title-ink: #fefff1;\n}\n\n/* The page background is the frame's black. Safari paints the strips above\n   and below the page (status bar, the room under its toolbar) from it or from\n   the fixed black edges, so the site sits on black all round (Chris,\n   2026-10-08: the window resting on a solid black foundation). */\nhtml:has(.vwin-frame),\nbody:has(.vwin-frame) {\n  background-color: #000;\n}\n/* An open menu holds the page still behind its overlay. */\nhtml[data-vwin-menu-open] {\n  overflow: hidden;\n}\n\n/* The page scrolls on the DOCUMENT, not inside the panel. iOS 26 Safari only\n   lets page content show through its floating glass address bar when the\n   document scrolls; a frame whose content scrolled in an inner box got solid\n   strips there instead. So the frame and panel are in flow, at least the large\n   viewport tall (toolbar collapsed; 100vh where lvh is unknown), and nothing\n   fixed or sticky touches the bottom edge while the menu is closed: Safari\n   colours the strip under its toolbar from such an element (it took the\n   panel's grey when the frame was pinned there). */\n.vwin-frame {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 100vh;\n  min-height: 100lvh;\n  /* The page ends --vwin-bottom above the bottom (15px from 768px up). Phones\n     override the whole frame below (it is fixed there). */\n  padding: max(var(--vwin-top), var(--vibes-safe-top, env(safe-area-inset-top, 0px))) max(var(--vwin-side), var(--vibes-safe-right, env(safe-area-inset-right, 0px))) var(--vwin-bottom)\n    max(var(--vwin-side), var(--vibes-safe-left, env(safe-area-inset-left, 0px)));\n  background-color: var(--vwin-frame);\n}\n/* No z-index and no isolation on purpose: a page's own full-screen overlays\n   (z-50 detail panels and modals) must still rise above the bar (40) and the\n   menu (45), as they do outside the frame. */\n.vwin-panel {\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  /* The fixed bar covers the panel's first 54px at rest; content starts under it. */\n  padding-top: calc(var(--vwin-bar-height) + 1px);\n  border-radius: 12px;\n  overflow: clip;\n  background-color: var(--vwin-field);\n}\n/* The black border, fixed over the page edges, so it shows on every side\n   while the page scrolls under it: a rounded cut-out the size of the window,\n   with black spread out from it. 15px all round from 768px up (the comp,\n   #6906); on phones a 4px edge and the black foundation at the bottom (see the\n   phone tokens). Above the menu (45) so the menu's ends tuck under the border;\n   a page's own z-50 overlays still cover it. It holds still with the chrome\n   through the iOS keyboard pan (--vwin-pan). */\n.vwin-frame::before {\n  content: \"\";\n  position: fixed;\n  top: max(var(--vwin-top), var(--vibes-safe-top, env(safe-area-inset-top, 0px)));\n  left: max(var(--vwin-side), var(--vibes-safe-left, env(safe-area-inset-left, 0px)));\n  right: max(var(--vwin-side), var(--vibes-safe-right, env(safe-area-inset-right, 0px)));\n  bottom: max(var(--vwin-bottom), var(--vwin-bottom-floor));\n  border-radius: 12px;\n  box-shadow: 0 0 0 100vmax var(--vwin-frame);\n  transform: translateY(var(--vwin-pan, 0px));\n  pointer-events: none;\n  z-index: 46;\n}\n/* Phones: the black foundation strip, pinned to the bottom edge. A fixed\n   element on that edge is what mobile Safari colours the strip under its\n   floating toolbar from, so the whole toolbar area turns solid black and the\n   address bar floats on it; the window's rounded bottom sits 16px above. In the\n   iOS app (no toolbar) it is the home-indicator area. */\n@media (width < 768px) {\n  .vwin-frame::after {\n    content: \"\";\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: max(var(--vwin-bottom), var(--vwin-bottom-floor));\n    background-color: var(--vwin-frame);\n    transform: translateY(var(--vwin-pan, 0px));\n    pointer-events: none;\n    z-index: 46;\n  }\n}\n\n/* The grid: behind the content, the full height of the panel, whole cells\n   only. It scrolls with the page (a fixed grid would touch the bottom edge). */\n.vwin-grid-area {\n  position: absolute;\n  top: calc(var(--vwin-bar-height) + 1px);\n  left: 15px;\n  right: 15px;\n  bottom: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  pointer-events: none;\n  z-index: 0;\n}\n.vwin-grid {\n  flex: none;\n  width: 100%;\n  height: 100%;\n  background-image:\n    linear-gradient(to right, var(--vwin-grid-line) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--vwin-grid-line) 1px, transparent 1px);\n  background-size: 32px 30px;\n  background-position: 0 0;\n}\n@supports (width: round(down, 100px, 32px)) {\n  .vwin-grid {\n    width: calc(round(down, 100% - 1px, 32px) + 1px);\n    height: calc(round(down, 100% - 1px, 30px) + 1px);\n  }\n}\n/* Phones: the grid runs edge to edge inside the window. A plain strip of field\n   beside a whole-cell grid read as a border down each side (Marcus,\n   2026-10-07). Cells start at the left edge, as the iOS launch screen tiles\n   them, so the launch hands off to the same grid. */\n@media (width < 768px) {\n  .vwin-grid-area {\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n  .vwin-grid {\n    width: 100%;\n    height: 100%;\n    background-position: 0 0;\n  }\n}\n\n/* The page, in normal flow under the bar and over the grid. Positioned (after\n   the grid) so it paints above it, and so a page that fills the panel\n   (absolute inset-0: the auth boot shell, the logged-out view) fills at least\n   the viewport under the bar. */\n.vwin-content {\n  position: relative;\n  flex: 1 0 auto;\n  /* The panel runs under the home indicator; the last content clears it. */\n  padding-bottom: var(--vibes-safe-bottom, env(safe-area-inset-bottom, 0px));\n  box-sizing: border-box;\n}\n\n/* Leaving: a navigation away has started, so the page clears off the grid and\n   only the bar and the grid stay until the next page commits. The short delay\n   keeps a navigation that commits at once from flickering; the return is\n   instant (no transition outside this state). */\n.vwin-frame[data-leaving] .vwin-content {\n  opacity: 0;\n  transform: translateY(6px);\n  pointer-events: none;\n  transition:\n    opacity 120ms ease-in 40ms,\n    transform 120ms ease-in 40ms;\n}\n@media (prefers-reduced-motion: reduce) {\n  .vwin-frame[data-leaving] .vwin-content {\n    transform: none;\n  }\n}\n\n/* Phones: the window is fixed and its content scrolls inside it, the grid\n   holding still behind (the #6906 layout). Mobile Safari only paints the strip\n   under its floating toolbar solid when the document itself does not scroll;\n   then it takes the colour of the black foundation pinned to the bottom edge\n   (.vwin-frame::after), and the window rests on black with the address bar\n   floating on it (Chris, 2026-10-08). From 768px up the document scrolls. */\n@media (width < 768px) {\n  html:has(.vwin-frame),\n  body:has(.vwin-frame) {\n    height: 100%;\n    overflow: hidden;\n  }\n  .vwin-frame {\n    position: fixed;\n    inset: 0;\n    min-height: 0;\n    padding-bottom: max(var(--vwin-bottom), var(--vwin-bottom-floor));\n  }\n  .vwin-panel {\n    flex: 1 1 auto;\n    min-height: 0;\n  }\n  .vwin-content {\n    position: absolute;\n    top: calc(var(--vwin-bar-height) + 1px);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    padding-bottom: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n}\n\n/* The top chrome: a fixed black strip holding the bar. iOS 26 Safari colours\n   the status-bar strip from the fixed element pinned to the top edge; pinned\n   there itself, the bar turned it cream. The strip's black also shows in the\n   bar's rounded top corners, as the frame's did. */\n.vwin-chrome {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 40;\n  box-sizing: border-box;\n  padding: max(var(--vwin-top), var(--vibes-safe-top, env(safe-area-inset-top, 0px))) max(var(--vwin-side), var(--vibes-safe-right, env(safe-area-inset-right, 0px))) 0 max(var(--vwin-side), var(--vibes-safe-left, env(safe-area-inset-left, 0px)));\n  background-color: var(--vwin-frame);\n}\n.vwin-chrome-bar {\n  position: relative;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n\n/* The bar: one real button, so a tap anywhere on it toggles the menu. */\n.vwin-bar {\n  position: relative;\n  z-index: 40;\n  box-sizing: content-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--vwin-bar-height);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-bottom: 1px solid var(--vwin-line);\n  background-color: var(--vwin-bar);\n  color: var(--vwin-cream);\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  overflow: hidden;\n}\n.vwin-bar:focus-visible {\n  outline: 3px solid var(--vwin-red);\n  outline-offset: -3px;\n}\n.vwin-pill {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding-left: 4px;\n}\n/* The pill's slide runs on the menu's clock (same 0.5s and closing curve), so\n   pill and menu read as one physical piece. Opening, its spring is a touch\n   softer than the menu's (1.25 vs 1.56): at the menu's full overshoot the\n   cream shape poked past the pill's black outline. */\n.vwin-pill {\n  --vibes-switch-slide: 0.5s cubic-bezier(0.34, 1.25, 0.64, 1);\n}\n.vwin-frame[data-menu-phase=\"closing\"] .vwin-pill,\n.vwin-frame[data-menu-phase=\"closed\"] .vwin-pill {\n  --vibes-switch-slide: 0.5s cubic-bezier(0.64, 0, 0.66, 0);\n}\n/* The status glow behind the pill (#7154 option 5b; made invisible at rest\n   by owner 2026-10-30, #8202). It keeps the vibe card corner's .vm-glass shape,\n   fitted to the drawn logo at size 54 (the black stadium measures 91.9 x\n   33.6px, its left edge 12px into .vwin-pill and its centre 26.3px down the\n   bar) with 3px on every side, the menu's MENU_GEOMETRY.ring, but no obsidian\n   paint: the top-left logo sits bare on the bar, and the obsidian glass\n   belongs only to the switch docked bottom right. The switch draws no status\n   ring here (statusRing={false}); a live status fills this shape instead. */\n.vwin-pill {\n  position: relative;\n}\n.vwin-pill-glass {\n  position: absolute;\n  left: 9px;\n  top: 6px;\n  width: 98px;\n  height: 40px;\n  border-radius: 999px;\n  background-color: transparent;\n  pointer-events: none;\n}\n/* The status cue, on the ring's own clock: VibesSwitch's vibes-oval-trace is\n   one 7s pass that draws the ring on by 14.3% (cubic-bezier(0.3, 0.6, 0.25,\n   1)), holds it to 71.4%, then fades it out (ease-in) by 100%. The glow runs\n   the same stops: clear to the status colour while the ring would draw, held\n   while it would hold, back to clear while it would fade. Replays per status\n   because VibesWindowHeader keys the glow on colour + status id, as\n   VibesSwitch keys the ellipse. */\n.vwin-pill-glass-status {\n  animation: vwin-pill-glass-status 7s forwards;\n}\n@keyframes vwin-pill-glass-status {\n  0%    { background-color: transparent; animation-timing-function: cubic-bezier(0.3, 0.6, 0.25, 1); }\n  14.3% { background-color: var(--vwin-pill-status); }\n  71.4% { background-color: var(--vwin-pill-status); animation-timing-function: ease-in; }\n  100%  { background-color: transparent; }\n}\n.vwin-pill svg {\n  position: relative;\n  /* The switch's viewBox carries headroom for its status ring; this centres the\n     drawn logo (not the svg box) on the bar. */\n  top: -8.5px;\n  pointer-events: none;\n}\n.vwin-menu-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: var(--vwin-bar-height);\n  padding: 0 16px 0 10px;\n  background-color: var(--vwin-red);\n  color: var(--vwin-cream);\n  flex-shrink: 0;\n}\n.vwin-gear {\n  display: flex;\n  width: 35px;\n  height: 35px;\n  transform-origin: 50% 50%;\n}\n.vwin-menu-label {\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1.5px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);\n  color: var(--vwin-cream);\n  opacity: 1;\n}\n@media (hover: hover) {\n  .vwin-bar:hover .vwin-gear {\n    animation: vwin-wiggle 0.6s ease-in-out infinite;\n  }\n}\n.vwin-bar:active .vwin-menu-button {\n  animation: vwin-shake 0.3s ease-in-out;\n}\n@keyframes vwin-wiggle {\n  0%, 100% { transform: rotate(0deg); }\n  25% { transform: rotate(-5deg); }\n  75% { transform: rotate(5deg); }\n}\n@keyframes vwin-shake {\n  0%, 100% { transform: translateX(0); }\n  25% { transform: translateX(-3px); }\n  75% { transform: translateX(3px); }\n}\n\n/* The menu: an overlay under the bar and a panel sliding in from the right,\n   fixed from under the bar to the viewport bottom (touching the bottom edge\n   only while open is fine). The bar stays live above it, so the pill's own\n   slide plays and a header tap closes the menu the same way it opened it. */\n.vwin-menu-layer {\n  position: fixed;\n  top: calc(max(var(--vwin-top), var(--vibes-safe-top, env(safe-area-inset-top, 0px))) + var(--vwin-bar-height) + 1px);\n  left: max(var(--vwin-side), var(--vibes-safe-left, env(safe-area-inset-left, 0px)));\n  right: max(var(--vwin-side), var(--vibes-safe-right, env(safe-area-inset-right, 0px)));\n  bottom: var(--vwin-bottom);\n  z-index: 45;\n  overflow: hidden;\n}\n.vwin-frame[data-menu-phase=\"closed\"] .vwin-menu-layer {\n  visibility: hidden;\n  pointer-events: none;\n}\n.vwin-overlay {\n  position: absolute;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.6);\n  animation: vwin-fade-in 0.3s ease-out;\n}\n.vwin-menu-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 400px;\n  max-width: 90%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background-color: var(--vwin-menu-bg);\n  color: var(--vwin-menu-ink);\n  border-top: 8px solid var(--vwin-edge);\n  border-bottom: 8px solid var(--vwin-edge);\n  box-shadow: -8px 0 0 0 var(--vwin-edge);\n  animation: vwin-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n  outline: none;\n  overflow: hidden;\n}\n/* Focus lands on the panel itself when the menu opens (so the next Tab reaches\n   the first row); that programmatic focus draws no ring. Rows and buttons\n   inside keep their own focus-visible rings. */\n.vwin-menu-panel:focus,\n.vwin-menu-panel:focus-visible {\n  outline: none;\n}\n.vwin-frame[data-menu-phase=\"closing\"] .vwin-overlay {\n  animation: vwin-fade-out 0.3s ease-out forwards;\n}\n.vwin-frame[data-menu-phase=\"closing\"] .vwin-menu-panel {\n  animation: vwin-slide-out 0.5s cubic-bezier(0.64, 0, 0.66, 0) forwards;\n}\n.vwin-frame[data-menu-phase=\"closed\"] .vwin-overlay,\n.vwin-frame[data-menu-phase=\"closed\"] .vwin-menu-panel {\n  animation: none;\n}\n@keyframes vwin-fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes vwin-fade-out { from { opacity: 1; } to { opacity: 0; } }\n@keyframes vwin-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }\n@keyframes vwin-slide-out { from { transform: translateX(0); } to { transform: translateX(calc(100% + 8px)); } }\n\n@media (prefers-reduced-motion: reduce) {\n  .vwin-pill,\n  .vwin-frame .vwin-pill {\n    --vibes-switch-slide: 0s;\n  }\n  /* The ring's reduced-motion arm (vibes-oval-fade) skips the drawing sweep:\n     full ring at once, hold, fade. The glow mirrors it: the status colour at\n     once, held to 71.4%, then eased back to clear. A colour change is not\n     motion, and it keeps the \"this is expiring\" meaning. */\n  .vwin-pill-glass-status {\n    animation-name: vwin-pill-glass-fade;\n  }\n  @keyframes vwin-pill-glass-fade {\n    0%    { background-color: var(--vwin-pill-status); }\n    71.4% { background-color: var(--vwin-pill-status); animation-timing-function: ease-in; }\n    100%  { background-color: transparent; }\n  }\n  .vwin-bar:hover .vwin-gear,\n  .vwin-bar:active .vwin-menu-button,\n  .vwin-overlay,\n  .vwin-menu-panel {\n    animation: none !important;\n  }\n  /* No slide to wait out: a closing menu is simply gone. */\n  .vwin-frame[data-menu-phase=\"closing\"] .vwin-menu-layer {\n    visibility: hidden;\n  }\n}\n";

package/components/VibesWindowFrame.styles.js

@@ -1,8 +1,4 @@
 import { SAFE_AREA_BOTTOM, SAFE_AREA_LEFT, SAFE_AREA_RIGHT, SAFE_AREA_TOP } from "../theme/safe-area.js";
-import { VIBE_MENU_LIGHT_VARS } from "./vibe-menu/vibe-menu.styles.js";
-const OBSIDIAN_TOKENS = VIBE_MENU_LIGHT_VARS.split("\n")
-    .filter((line) => line.trim().startsWith("--obsidian-"))
-    .join("\n");
 const DARK_TOKENS = `
   --vwin-line: #83817d;
   --vwin-field: #2a2a2a;
@@ -332,47 +328,42 @@ html[data-vwin-menu-open] {
 .vwin-frame[data-menu-phase="closed"] .vwin-pill {
   --vibes-switch-slide: 0.5s cubic-bezier(0.64, 0, 0.66, 0);
 }
-/* The obsidian glass behind the pill (#7154, owner option 5b, 2026-10-13):
-   the vibe card corner's .vm-glass treatment, here fitted to the drawn logo
-   at size 54 (the black stadium measures 91.9 x 33.6px, its left edge 12px
-   into .vwin-pill and its centre 26.3px down the bar) with 3px of glass on
-   every side, the menu's MENU_GEOMETRY.ring. The switch draws no status ring
-   in this bar (statusRing={false}); the status cue is this glass's colour. */
+/* The status glow behind the pill (#7154 option 5b; made invisible at rest
+   by owner 2026-10-30, #8202). It keeps the vibe card corner's .vm-glass shape,
+   fitted to the drawn logo at size 54 (the black stadium measures 91.9 x
+   33.6px, its left edge 12px into .vwin-pill and its centre 26.3px down the
+   bar) with 3px on every side, the menu's MENU_GEOMETRY.ring, but no obsidian
+   paint: the top-left logo sits bare on the bar, and the obsidian glass
+   belongs only to the switch docked bottom right. The switch draws no status
+   ring here (statusRing={false}); a live status fills this shape instead. */
 .vwin-pill {
   position: relative;
 }
-.vwin-pill-glass {${OBSIDIAN_TOKENS}
+.vwin-pill-glass {
   position: absolute;
   left: 9px;
   top: 6px;
   width: 98px;
   height: 40px;
   border-radius: 999px;
-  background-image:
-    linear-gradient(to right, transparent, var(--obsidian-highlight), transparent),
-    linear-gradient(to bottom, var(--obsidian-highlight), transparent, var(--obsidian-edge));
-  background-position: top, left;
-  background-size: 100% 1px, 1px 100%;
-  background-repeat: no-repeat;
-  background-color: var(--obsidian-fill);
-  box-shadow: var(--obsidian-shadow);
+  background-color: transparent;
   pointer-events: none;
 }
 /* The status cue, on the ring's own clock: VibesSwitch's vibes-oval-trace is
    one 7s pass that draws the ring on by 14.3% (cubic-bezier(0.3, 0.6, 0.25,
-   1)), holds it to 71.4%, then fades it out (ease-in) by 100%. The glass runs
-   the same stops: obsidian to the status colour while the ring would draw,
-   held while it would hold, back to obsidian while it would fade. Replays per
-   status because VibesWindowHeader keys the glass on colour + status id, as
+   1)), holds it to 71.4%, then fades it out (ease-in) by 100%. The glow runs
+   the same stops: clear to the status colour while the ring would draw, held
+   while it would hold, back to clear while it would fade. Replays per status
+   because VibesWindowHeader keys the glow on colour + status id, as
    VibesSwitch keys the ellipse. */
 .vwin-pill-glass-status {
   animation: vwin-pill-glass-status 7s forwards;
 }
 @keyframes vwin-pill-glass-status {
-  0%    { background-color: var(--obsidian-fill); animation-timing-function: cubic-bezier(0.3, 0.6, 0.25, 1); }
+  0%    { background-color: transparent; animation-timing-function: cubic-bezier(0.3, 0.6, 0.25, 1); }
   14.3% { background-color: var(--vwin-pill-status); }
   71.4% { background-color: var(--vwin-pill-status); animation-timing-function: ease-in; }
-  100%  { background-color: var(--obsidian-fill); }
+  100%  { background-color: transparent; }
 }
 .vwin-pill svg {
   position: relative;
@@ -496,8 +487,8 @@ html[data-vwin-menu-open] {
     --vibes-switch-slide: 0s;
   }
   /* The ring's reduced-motion arm (vibes-oval-fade) skips the drawing sweep:
-     full ring at once, hold, fade. The glass mirrors it: the status colour at
-     once, held to 71.4%, then eased back to obsidian. A colour change is not
+     full ring at once, hold, fade. The glow mirrors it: the status colour at
+     once, held to 71.4%, then eased back to clear. A colour change is not
      motion, and it keeps the "this is expiring" meaning. */
   .vwin-pill-glass-status {
     animation-name: vwin-pill-glass-fade;
@@ -505,7 +496,7 @@ html[data-vwin-menu-open] {
   @keyframes vwin-pill-glass-fade {
     0%    { background-color: var(--vwin-pill-status); }
     71.4% { background-color: var(--vwin-pill-status); animation-timing-function: ease-in; }
-    100%  { background-color: var(--obsidian-fill); }
+    100%  { background-color: transparent; }
   }
   .vwin-bar:hover .vwin-gear,
   .vwin-bar:active .vwin-menu-button,

package/components/VibesWindowFrame.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibesWindowFrame.styles.js","sourceRoot":"","sources":["../../jsr/components/VibesWindowFrame.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzG,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAQvE,MAAM,eAAe,GAAG,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC;KACrD,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;KACvD,IAAI,CAAC,IAAI,CAAC,CAAC;AAgDd,MAAM,WAAW,GAAG;;;;;;;;CAQnB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;yBAuBP,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;sBAyBnB,gBAAgB;;;;4CAIM,WAAW;;mCAEpB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA+BZ,aAAa,2BAA2B,eAAe;4BAC7D,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA4BZ,aAAa;gCACX,cAAc;iCACb,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAmF5B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAqEF,aAAa,2BAA2B,eAAe,6BAA6B,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA6DhH,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCA2FA,aAAa;gCAChB,cAAc;iCACb,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoF/C,CAAC"}
+{"version":3,"file":"VibesWindowFrame.styles.js","sourceRoot":"","sources":["../../jsr/components/VibesWindowFrame.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAgDzG,MAAM,WAAW,GAAG;;;;;;;;CAQnB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;yBAuBP,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;sBAyBnB,gBAAgB;;;;4CAIM,WAAW;;mCAEpB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA+BZ,aAAa,2BAA2B,eAAe;4BAC7D,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA4BZ,aAAa;gCACX,cAAc;iCACb,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAmF5B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAqEF,aAAa,2BAA2B,eAAe,6BAA6B,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAmJjG,aAAa;gCAChB,cAAc;iCACb,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoF/C,CAAC"}

package/components/VibesWindowHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibesWindowHeader.js","sourceRoot":"","sources":["../../jsr/components/VibesWindowHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAQhE,MAAM,UAAU,iBAAiB;IAC/B,OAAO,mCAAQ,gBAAgB,CAAS,CAAC;AAC3C,CAAC;AAID,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,GAAG,EAAE,EAAqB;IAC9D,OAAO,CACL,6BAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,iBAAa,MAAM;QACnH,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,gCAAgC,GAAG;QACvE,8BACE,IAAI,EAAC,4BAA4B,EACjC,CAAC,EAAC,w0FAAw0F,GAC10F,CACE,CACP,CAAC;AACJ,CAAC;AAmCD,MAAM,UAAU,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,UAAU,EACV,KAAK,GAAG,MAAM,EACd,MAAM,EACN,SAAS,EACT,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,QAAQ,GACe;IAKvB,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACnG,OAAO,CACL;QACG,UAAU,IAAI,oBAAC,iBAAiB,OAAG;QACpC,gCACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,iBAClB,MAAM,iBACP,YAAY,mBACT,MAAM,mBACN,UAAU,EACzB,OAAO,EAAE,QAAQ,EACjB,cAAc,EAAE,QAAQ,EACxB,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,QAAQ;YAEjB,8BAAM,SAAS,EAAC,WAAW,2CAA8B,MAAM;gBAC7D,8BACE,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,aAAa,IAAI,EAAE,EAAE,EAC7E,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,wCAAwC,EAC9F,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,EAAE,oBAAoB,EAAE,MAAM,EAA0B,4BAC5E,EAAE,GACzB;gBACF,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,GAAI,CACrH;YACP,8BAAM,SAAS,EAAC,kBAAkB;gBAChC,8BAAM,SAAS,EAAC,WAAW;oBACzB,oBAAC,eAAe,OAAG,CACd;gBACP,8BAAM,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAQ,CAC3C,CACA,CACR,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"VibesWindowHeader.js","sourceRoot":"","sources":["../../jsr/components/VibesWindowHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAQhE,MAAM,UAAU,iBAAiB;IAC/B,OAAO,mCAAQ,gBAAgB,CAAS,CAAC;AAC3C,CAAC;AAID,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,GAAG,EAAE,EAAqB;IAC9D,OAAO,CACL,6BAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,iBAAa,MAAM;QACnH,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,gCAAgC,GAAG;QACvE,8BACE,IAAI,EAAC,4BAA4B,EACjC,CAAC,EAAC,w0FAAw0F,GAC10F,CACE,CACP,CAAC;AACJ,CAAC;AAoCD,MAAM,UAAU,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,UAAU,EACV,KAAK,GAAG,MAAM,EACd,MAAM,EACN,SAAS,EACT,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,QAAQ,GACe;IAKvB,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACnG,OAAO,CACL;QACG,UAAU,IAAI,oBAAC,iBAAiB,OAAG;QACpC,gCACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,iBAClB,MAAM,iBACP,YAAY,mBACT,MAAM,mBACN,UAAU,EACzB,OAAO,EAAE,QAAQ,EACjB,cAAc,EAAE,QAAQ,EACxB,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,QAAQ;YAEjB,8BAAM,SAAS,EAAC,WAAW,2CAA8B,MAAM;gBAC7D,8BACE,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,aAAa,IAAI,EAAE,EAAE,EAC7E,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,wCAAwC,EAC9F,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,EAAE,oBAAoB,EAAE,MAAM,EAA0B,4BAC5E,EAAE,GACzB;gBACF,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,GAAI,CACrH;YACP,8BAAM,SAAS,EAAC,kBAAkB;gBAChC,8BAAM,SAAS,EAAC,WAAW;oBACzB,oBAAC,eAAe,OAAG,CACd;gBACP,8BAAM,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAQ,CAC3C,CACA,CACR,CACJ,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/base",
-  "version": "14.3.230",
+  "version": "14.3.232",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -10,10 +10,10 @@
   "dependencies": {
     "@adviser/cement": "~0.5.34",
     "@emotion/css": "~11.13.5",
-    "@vibes.diy/api-types": "14.3.230",
-    "@vibes.diy/use-vibes-types": "14.3.230",
-    "@vibes.diy/vibe-runtime": "14.3.230",
-    "@vibes.diy/vibe-types": "14.3.230",
+    "@vibes.diy/api-types": "14.3.232",
+    "@vibes.diy/use-vibes-types": "14.3.232",
+    "@vibes.diy/vibe-runtime": "14.3.232",
+    "@vibes.diy/vibe-types": "14.3.232",
     "arktype": "~2.2.8",
     "officeparser": "~8.1.1",
     "qrcode-generator": "~2.0.4",