@vibes.diy/base 14.3.20 → 14.3.22

package/components/vibe-menu/shell/shell.styles.js

@@ -0,0 +1,386 @@
+import { MENU_GEOMETRY } from "../geometry.js";
+import { MOTION } from "../motion.js";
+const G = MENU_GEOMETRY;
+export const VIBE_MENU_SHELL_CSS = `
+.vm-layer,
+.vm-layer *,
+.vm-layer *::before,
+.vm-layer *::after {
+  box-sizing: border-box;
+}
+/* The full-viewport layer: a size container (Code mode and the caps read cqh)
+   that takes no hits itself. Not a backdrop: clicks fall through to the app. */
+.vm-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  pointer-events: none;
+  container-type: size;
+}
+/* Stories and screenshot fixtures place the layer inside a sized box. */
+.vm-layer[data-frame="contained"] {
+  position: absolute;
+}
+
+/* ---------- the anchor: the pill's box, edge px from the corner ---------- */
+.vm-layer .vm-menu {
+  --vm-edge: ${G.edgeDesktop}px;
+  --vm-ring: ${G.ring}px;
+  --vm-pill-w: ${G.pillW}px;
+  --vm-pill-h: ${G.pillH}px;
+  --vm-bar-h: ${G.barH}px;
+  --vm-tab-w: ${G.tabW}px;
+  --vm-tab-inset: 9px; /* space-9: the bar's rhythm */
+  --vm-home-extra: ${G.homeExtra}px;
+  --vm-band: ${G.band}px;
+  --vm-pill-flat-inset: ${G.pillFlatInset}px;
+  --vm-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --vm-glass-w: calc(var(--vm-pill-w) + 2 * var(--vm-ring));
+  /* The bar stops halfway under the glass: Share's colour wraps the pill's left curve. */
+  --vm-bar-end: calc(var(--vm-glass-w) / 2);
+  --vm-menu-open-w: calc(var(--vm-tab-w) * 4 + var(--vm-home-extra) + var(--vm-bar-end) + 2px);
+  /* The card's right edge stops where the pill artwork's flat top ends. */
+  --vm-card-w: calc(var(--vm-menu-open-w) + var(--vm-bar-end) - var(--vm-ring) - var(--vm-pill-flat-inset));
+  --vm-frame-limit: calc(100cqh - 2 * var(--vm-edge) - var(--vm-safe-bottom) - 80px);
+  --vm-open-ms: ${MOTION.openMs}ms;
+  --vm-close-ms: ${MOTION.closeMs}ms;
+  --vm-open-ease: ${MOTION.openEase};
+  --vm-close-ease: ${MOTION.closeEase};
+  --vm-stagger-ms: ${MOTION.stripStaggerMs}ms;
+  --vm-settle-ms: ${MOTION.settleMs}ms;
+  position: absolute;
+  right: calc(var(--vm-edge) + var(--vm-ring));
+  bottom: calc(var(--vm-edge) + var(--vm-ring) + var(--vm-safe-bottom));
+  height: var(--vm-pill-h);
+}
+
+/* ---------- the switch ---------- */
+.vm-layer .vm-pill {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  top: auto;
+  width: var(--vm-pill-w);
+  height: var(--vm-pill-h);
+  padding: 0;
+  border: 0;
+  background: none;
+  overflow: visible;
+  cursor: pointer;
+  z-index: 4; /* above the glass (3) and the bar (2) */
+  pointer-events: auto;
+  touch-action: manipulation;
+}
+.vm-layer .vm-pill .vm-badge {
+  position: absolute;
+  top: -6px;
+  right: 4px;
+}
+/* The obsidian oval, fitted around the pill only: above the bar, below the pill. */
+.vm-layer .vm-glass {
+  position: absolute;
+  right: calc(-1 * var(--vm-ring));
+  bottom: calc(-1 * var(--vm-ring));
+  width: var(--vm-glass-w);
+  height: calc(var(--vm-pill-h) + 2 * var(--vm-ring));
+  z-index: 3;
+  pointer-events: none;
+}
+/* Beside the collapsed switch: the Draft/Locked chiclet, then the build line. */
+.vm-layer .vm-beside {
+  position: absolute;
+  right: calc(var(--vm-pill-w) + var(--vm-ring) + 6px);
+  bottom: 0;
+  height: var(--vm-pill-h);
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: 6px;
+  pointer-events: none;
+}
+.vm-layer .vm-menu[data-bar="open"] .vm-beside {
+  display: none;
+}
+.vm-layer .vm-chiclet {
+  border: 0;
+  cursor: pointer;
+  pointer-events: auto;
+  white-space: nowrap;
+}
+.vm-layer .vm-closed-status {
+  overflow: hidden;
+  max-width: min(260px, calc(100cqw - 2 * var(--vm-edge) - var(--vm-pill-w) - 80px));
+}
+.vm-layer .vm-closed-status-line {
+  padding: 3px 5px;
+  border-radius: 3px;
+  background: var(--card-bg);
+  color: var(--muted);
+  font: 12px/18px var(--font-tab);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transform: translateX(calc(100% + 6px));
+  transition: transform var(--vm-close-ms) var(--vm-open-ease);
+}
+.vm-layer .vm-closed-status-line[data-revealed="true"] {
+  transform: translateX(0);
+}
+
+/* ---------- the bar: window / sliding bar / counter-sliding tabs ---------- */
+.vm-layer .vm-strip {
+  --vm-strip-w: var(--vm-menu-open-w);
+  /* Collapsed slide distance: everything but the part under the pill. */
+  --vm-slide-max: calc(var(--vm-strip-w) - var(--vm-bar-end));
+  position: absolute;
+  right: calc(var(--vm-bar-end) - var(--vm-ring));
+  bottom: calc(-1 * var(--vm-ring));
+  width: var(--vm-strip-w);
+  height: var(--vm-bar-h);
+  overflow: hidden;
+  z-index: 2;
+  pointer-events: auto;
+}
+.vm-layer .vm-menu[data-bar="closed"] .vm-strip {
+  pointer-events: none;
+}
+.vm-layer .vm-strip-slide {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 2px solid var(--line);
+  border-right: 0; /* the square end is tucked under the pill */
+  /* The top-left corner squares off while a card stands on it: the sequencer
+     writes --bar-tl from the same progress value as the outline. */
+  border-radius: var(--bar-tl, calc(var(--vm-bar-h) / 2)) 0 0 calc(var(--vm-bar-h) / 2);
+  overflow: hidden;
+  background: var(--card-bg);
+  transform: translateX(var(--vm-slide-max));
+  will-change: transform;
+  transition: transform var(--vm-close-ms) var(--vm-close-ease);
+}
+.vm-layer .vm-strip-inner {
+  display: flex;
+  justify-content: flex-end; /* right-packed: tabs hold their positions */
+  width: 100%;
+  height: 100%;
+  transform: translateX(calc(-1 * var(--vm-slide-max)));
+  will-change: transform;
+  transition: transform var(--vm-close-ms) var(--vm-close-ease);
+}
+.vm-layer .vm-menu[data-bar="open"] .vm-strip-slide,
+.vm-layer .vm-menu[data-bar="open"] .vm-strip-inner {
+  transform: translateX(0px);
+  transition: transform var(--vm-open-ms) var(--vm-open-ease);
+}
+.vm-layer .vm-tab {
+  position: relative;
+  width: var(--vm-tab-w);
+  flex: none;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: 0;
+  padding: 0 0 0 var(--vm-tab-inset);
+  background: var(--accent);
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity var(--vm-close-ms) var(--vm-close-ease);
+  touch-action: manipulation;
+}
+.vm-layer .vm-tab[data-section="home"] {
+  --i: 3;
+  width: calc(var(--vm-tab-w) + var(--vm-home-extra));
+  padding-left: calc(var(--vm-tab-inset) + var(--vm-home-extra) / 2);
+}
+.vm-layer .vm-tab[data-section="home"] .vm-tab-label {
+  left: calc(var(--vm-home-extra) / 2);
+}
+.vm-layer .vm-tab[data-section="settings"] {
+  --i: 2;
+}
+.vm-layer .vm-tab[data-section="vibe"] {
+  --i: 1;
+}
+.vm-layer .vm-tab[data-section="share"] {
+  --i: 0;
+  width: calc(var(--vm-tab-w) + var(--vm-bar-end)); /* runs on under the pill */
+}
+.vm-layer .vm-tab[data-section="share"] .vm-tab-label {
+  right: var(--vm-bar-end);
+}
+.vm-layer .vm-tab .vm-badge {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+}
+.vm-layer .vm-tab[data-section="share"] .vm-badge {
+  right: calc(var(--vm-bar-end) + 6px); /* clear of the glass */
+}
+/* Retract: tabs stay solid while the bar carries them away, then vanish. */
+.vm-layer .vm-menu[data-bar="closed"] .vm-tab {
+  opacity: 0;
+  transition: opacity 0s linear var(--vm-close-ms);
+}
+.vm-layer .vm-menu[data-bar="open"] .vm-tab {
+  transition: opacity var(--vm-open-ms) var(--vm-open-ease);
+  transition-delay: calc(var(--i) * var(--vm-stagger-ms));
+}
+.vm-layer .vm-menu.has-card .vm-tab:not(.is-active) {
+  opacity: var(--opacity-tab-inactive);
+}
+
+/* ---------- the card: surface only; the outline draws its edge and band ---------- */
+.vm-layer .vm-card {
+  position: absolute;
+  right: var(--vm-pill-flat-inset);
+  left: auto;
+  top: auto;
+  bottom: calc(var(--vm-pill-h) + var(--vm-ring)); /* flush on the bar's top edge */
+  z-index: 1;
+  width: var(--vm-card-w);
+  max-height: min(480px, var(--vm-frame-limit));
+  overflow: auto;
+  background: var(--card-bg);
+  color: var(--ink);
+  border-radius: 0;
+  will-change: clip-path;
+  contain: layout paint;
+  visibility: hidden; /* the sequencer shows it while it has any height */
+  pointer-events: auto;
+}
+.vm-layer .vm-card .vm-card-body {
+  padding-bottom: calc(16px + var(--vm-band)); /* clears the band drawn over it */
+}
+/* An open agent log and the Share card lift the cap to the frame limit. */
+.vm-layer .vm-menu[data-log-open] .vm-card,
+.vm-layer .vm-menu[data-section="share"] .vm-card {
+  max-height: var(--vm-frame-limit);
+}
+/* FirstBuildCard's fullHeight (VibeMenuShellProps.frameCap): every card lifts to the frame limit. */
+.vm-layer[data-frame-cap] .vm-card {
+  max-height: var(--vm-frame-limit);
+}
+/* Code mode: a tall box (80% of the frame) and, on desktop, a wide one that
+   grows leftwards; the sequencer tweens between the two boxes. */
+.vm-layer .vm-menu[data-code-mode] .vm-card {
+  height: 80cqh;
+  max-height: none;
+  width: min(1200px, calc(100cqw - 2 * var(--vm-edge) - var(--vm-ring) - var(--vm-pill-flat-inset)));
+  display: flex;
+  flex-direction: column;
+  /* Only the tab body scrolls (smoke F3): the kicker, composer, moment and
+     tab strip stay on top, so the card itself never scrolls in Code mode. */
+  overflow: hidden;
+}
+.vm-layer .vm-menu[data-code-mode] .vm-card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+/* The agent log's clip: its open and shut rules live in T5's VIBE_MENU_CSS
+   (RULINGS.md R1); the sequencer eases its height inline over them. */
+
+/* ---------- the outline: one stroke, the band and the colour column ---------- */
+.vm-layer .vm-outline {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  overflow: visible;
+  z-index: 3; /* same as the glass, which comes later in the DOM and wins */
+  pointer-events: none;
+  display: none; /* the sequencer shows it while a card has any height */
+}
+.vm-layer .vm-outline .vm-band,
+.vm-layer .vm-outline .vm-cover {
+  fill: var(--accent, transparent);
+  transition: fill var(--vm-settle-ms) var(--vm-open-ease);
+}
+.vm-layer .vm-outline .vm-edge {
+  fill: none;
+  stroke: var(--line);
+  stroke-width: 2;
+  stroke-linejoin: miter;
+}
+
+/* ---------- phones: the bar and card span the width ---------- */
+@container (max-width: ${G.phoneMaxWidth}px) {
+  .vm-layer .vm-menu {
+    --vm-edge: ${G.edgePhone}px;
+    left: var(--vm-edge);
+  }
+  .vm-layer .vm-strip {
+    --vm-strip-w: calc(100cqw - 2 * var(--vm-edge) - var(--vm-bar-end));
+  }
+  .vm-layer .vm-tab {
+    width: auto;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    min-width: 0;
+    padding: 4px 2px;
+  }
+  .vm-layer .vm-tab-circle {
+    width: 22px;
+    height: 22px;
+  }
+  .vm-layer .vm-tab[data-section="home"] {
+    width: auto;
+    padding: 4px 2px 4px calc(2px + var(--vm-home-extra) * 0.7);
+  }
+  .vm-layer .vm-tab[data-section="share"] {
+    width: auto;
+    padding-right: var(--vm-bar-end);
+    flex-grow: 1;
+  }
+  .vm-layer .vm-tab-label {
+    position: static;
+    display: block;
+    font-size: 9.6px;
+    letter-spacing: 1px;
+    white-space: nowrap;
+    padding: 0 0 0 1px;
+  }
+  .vm-layer .vm-tab svg {
+    width: 12px;
+    height: 12px;
+  }
+  .vm-layer .vm-card,
+  .vm-layer .vm-menu[data-code-mode] .vm-card {
+    left: 0;
+    width: auto;
+  }
+  .vm-layer .vm-card {
+    max-height: min(560px, 70cqh, var(--vm-frame-limit));
+  }
+}
+@container (max-width: ${G.narrowMaxWidth}px) {
+  .vm-layer .vm-tab-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+}
+
+/* ---------- reduced motion: every transition snaps ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .vm-layer .vm-menu *,
+  .vm-layer .vm-menu *::before {
+    transition: none !important;
+  }
+}
+.vm-layer[data-reduced-motion="true"] .vm-menu *,
+.vm-layer[data-reduced-motion="true"] .vm-menu *::before {
+  transition: none !important;
+}
+`;
+//# sourceMappingURL=shell.styles.js.map

package/components/vibe-menu/shell/shell.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.styles.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/shell/shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAYtC,MAAM,CAAC,GAAG,aAAa,CAAC;AAExB,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;eAuBpB,CAAC,CAAC,WAAW;eACb,CAAC,CAAC,IAAI;iBACJ,CAAC,CAAC,KAAK;iBACP,CAAC,CAAC,KAAK;gBACR,CAAC,CAAC,IAAI;gBACN,CAAC,CAAC,IAAI;;qBAED,CAAC,CAAC,SAAS;eACjB,CAAC,CAAC,IAAI;0BACK,CAAC,CAAC,aAAa;;;;;;;;;kBASvB,MAAM,CAAC,MAAM;mBACZ,MAAM,CAAC,OAAO;oBACb,MAAM,CAAC,QAAQ;qBACd,MAAM,CAAC,SAAS;qBAChB,MAAM,CAAC,cAAc;oBACtB,MAAM,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsQV,CAAC,CAAC,aAAa;;iBAEvB,CAAC,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAkDH,CAAC,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBxC,CAAC"}

package/components/vibe-menu/shell/useMenuSequencer.d.ts

@@ -0,0 +1,33 @@
+import type { RefObject } from "react";
+import type { MenuState, Section } from "../menu-state.js";
+import type { PresentStep, Shown } from "./menu-sequence.js";
+export type SequencerStep = PresentStep | "resize";
+export type LogDirection = "open" | "close";
+export interface TabRefs {
+    readonly current: Record<Section, HTMLButtonElement | null>;
+}
+export interface MenuSequencerRefs {
+    readonly menu: RefObject<HTMLDivElement | null>;
+    readonly slide: RefObject<HTMLDivElement | null>;
+    readonly card: RefObject<HTMLElement | null>;
+    readonly body: RefObject<HTMLDivElement | null>;
+    readonly outline: RefObject<SVGSVGElement | null>;
+    readonly band: RefObject<SVGRectElement | null>;
+    readonly cover: RefObject<SVGRectElement | null>;
+    readonly edge: RefObject<SVGPathElement | null>;
+    readonly tabs: TabRefs;
+}
+export interface MenuSequencerInput {
+    readonly state: MenuState;
+    readonly contentKey: string;
+    readonly logOpen: boolean;
+    readonly reducedMotion: boolean | undefined;
+    readonly onStep?: (step: SequencerStep) => void;
+    readonly settledAtMount?: boolean;
+}
+export interface MenuSequencer {
+    readonly shown: Shown;
+    readonly refs: MenuSequencerRefs;
+}
+export declare function prefersReducedMotion(): boolean;
+export declare function useMenuSequencer(input: MenuSequencerInput): MenuSequencer;