@vibes.diy/base 14.3.21 → 14.3.22

package/components/UnifiedVibeCard.js

@@ -1,1658 +0,0 @@
-import { UNIFIED_VIBE_SHARE_LIGHT_VARS, UNIFIED_VIBE_SHARE_DARK_VARS, UNIFIED_VIBE_SHARE_CSS, } from "./UnifiedVibeCardShare.styles.js";
-import { PublishBanner } from "./PublishBanner.js";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { UNIFIED_VIBE_SETTINGS_LIGHT_VARS, UNIFIED_VIBE_SETTINGS_DARK_VARS, UNIFIED_VIBE_SETTINGS_CSS, } from "./UnifiedVibeCardSettings.styles.js";
-import { VibesSwitch } from "./VibesSwitch.js";
-import { ovalColors } from "./VibesSwitch.styles.js";
-import { EditorTabStrip } from "./EditorTabStrip.js";
-import { ViewerStandingView } from "./ViewerStandingView.js";
-import { OptionButtons } from "./OptionButtons.js";
-import { ChatMessageRow } from "./ChatMessageRow.js";
-import { ViewerTagView } from "./ViewerTagView.js";
-import { SignedOutSavePrompt } from "./SignedOutSavePrompt.js";
-import { HandlePickerMenu } from "./HandlePickerMenu.js";
-import { CreditsRingView } from "./CreditsRingView.js";
-import { CreditsDetailMenu } from "./CreditsDetailMenu.js";
-import { CodingIndicator } from "./CodingIndicator.js";
-import { CopyLinkIconButton } from "./LinkLineControls.js";
-import { AttachmentButton, AttachmentChips } from "./AttachmentRow.js";
-import { useAttachments } from "../attachments/use-attachments.js";
-import { composerFileDrop } from "../attachments/composer-file-drop.js";
-import { PeopleIcon } from "./icons/index.js";
-import { useCardFloat } from "../hooks/useCardFloat.js";
-import { useHomeMotionPress } from "../hooks/useHomeMotionPress.js";
-import { HOME_BRAND_FONT } from "./homeBrandFont.js";
-import { SAFE_AREA_TOP } from "../theme/safe-area.js";
-const UNIFIED_VIBE_CARD_DARK_VARS = `
-  --uvc-closed-build-bg: #28262f;
-  --uvc-closed-build-text: #b5afc2;
-  --color-dark-primary: #e0e0e0;
-  --color-dark-secondary: #aaaaaa;
-  --color-dark-decorative-00: #333333;
-  --color-dark-decorative-01: #444444;
-  --color-dark-decorative-02: #e0e0e0;
-  --color-dark-background-00: #1a1a1a;
-  --color-dark-background-01: #222222;
-  --color-dark-background-02: #222222;
-  /* The global field palette follows the OS. Pin the same semantic dark
-     values here so an explicit .dark host also darkens fields and borders. */
-  --vibes-field-bg: var(--vibes-ink-deep, #141414);
-  --vibes-card-border: var(--vibes-gray-mid, #555555);
-  --uvc-amber-text: #fbbf24;
-  --uvc-blue-text: #93c5fd;
-  --uvc-purple-text: #c4b5fd;
-  --uvc-suggestion-bg: #262c34;
-  --uvc-suggestion-border: #6c7685;
-  --uvc-suggestion-text: #e5e7eb;
-  --uvc-helper-text: #c2cbd8;
-  --uvc-build-text: #bac4d2;
-  --uvc-nav-edit: #fb923c;
-  --uvc-nav-share: #4ade80;
-  --uvc-nav-faq: #cbd5e1;
-  --color-light-primary: var(--color-dark-primary, #e0e0e0);
-  --color-light-secondary: var(--color-dark-secondary, #e0e0e0);
-  --color-light-decorative-00: var(--color-dark-decorative-00, #333333);
-  --color-light-decorative-01: var(--color-dark-decorative-01, #444444);
-  --color-light-decorative-02: var(--color-dark-decorative-02, #e0e0e0);
-  --color-light-background-00: var(--color-dark-background-00, #1a1a1a);
-  --color-light-background-01: var(--color-dark-background-01, #222222);
-  --color-light-background-02: var(--color-dark-background-02, #222222);`;
-const UNIFIED_VIBE_CARD_GLASS_LIGHT_VARS = `${UNIFIED_VIBE_SETTINGS_LIGHT_VARS}
-${UNIFIED_VIBE_SHARE_LIGHT_VARS}
-  --uvc-reading-ink:#161b18;
-  --uvc-reading-label:#414b44;
-  --uvc-reading-veil:rgba(255,255,240,.25);
-  --uvc-submit-arrow:var(--vibes-cream, #fffff0);
-  --uvc-submit-fill:rgba(64,89,114,.2);
-  --uvc-notch-width: 52px;
-  --uvc-notch-opacity: .25;
-  --uvc-notch-fill: repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 .4px,transparent .4px 1px),linear-gradient(180deg,rgba(16,26,24,.65),rgba(16,26,24,.4) 30%,rgba(16,26,24,.9) 72%,rgba(16,26,24,.55));
-  --uvc-notch-shadow: inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 1px rgba(0,0,0,.2),0 1px 2px rgba(16,26,24,.18);
-  --uvc-composer-border: rgba(16,26,24,.28);
-  --uvc-glass-fill: rgba(255,255,255,.8);
-  --uvc-glass-edge: rgba(255,255,255,.3);
-  --uvc-glass-highlight: rgba(255,255,255,.8);
-  --uvc-menu-strip: rgba(255,255,255,.18);
-  --uvc-menu-tab: rgba(255,255,255,.45);
-  --uvc-share-muted: #424954;
-  --uvc-glass-shadow: 0 4px 16px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.08);
-  --color-light-background-00: rgba(255,255,255,.24);
-  --color-light-background-01: rgba(255,255,255,.2);
-  --uvc-suggestion-bg: rgba(255,255,255,.28);
-  --vibes-field-bg: rgba(255,255,255,.2);
-  --uvc-nav-home: #2563eb;`;
-const UNIFIED_VIBE_CARD_OBSIDIAN_VARS = `
-  --uvc-glass-fill: rgba(6,9,10,.94);
-  --uvc-glass-edge: rgba(255,255,255,.12);
-  --uvc-glass-highlight: rgba(255,255,255,.25);
-  --uvc-glass-shadow: 0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.035), inset 0 0 12px rgba(255,255,255,.02);
-  --uvc-nav-home: #93b4ff;`;
-const UNIFIED_VIBE_CARD_GLASS_DARK_VARS = `${UNIFIED_VIBE_CARD_OBSIDIAN_VARS}
-${UNIFIED_VIBE_SETTINGS_DARK_VARS}
-${UNIFIED_VIBE_SHARE_DARK_VARS}
-  --uvc-reading-ink:#fffff0;
-  --uvc-reading-label:#d0d6ce;
-  --uvc-reading-veil:rgba(10,16,14,.25);
-  --uvc-submit-arrow:#aaa;
-  --uvc-submit-fill:#000;
-  --uvc-notch-opacity: .125;
-  --uvc-notch-width: 52px;
-  --uvc-notch-fill: repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 .6px,transparent .6px 2px),linear-gradient(180deg,rgba(230,255,245,.6),rgba(230,255,245,.3) 40%,rgba(210,239,228,.12) 58%,rgba(210,239,228,.2));
-  --uvc-notch-shadow: inset 0 0 0 1px rgba(230,255,245,.2),0 1px 2px rgba(0,0,0,.3);
-  --uvc-composer-border: rgba(210,239,228,.28);
-  --uvc-glass-fill: rgba(6,9,10,.8);
-  --uvc-menu-strip: rgba(16,26,24,.18);
-  --uvc-menu-tab: rgba(230,255,245,.12);
-  --uvc-share-muted: #b7becb;
-  --color-light-background-00: rgba(16,26,24,.28);
-  --color-light-background-01: rgba(16,26,24,.24);
-  --uvc-suggestion-bg: rgba(16,26,24,.32);
-  --vibes-field-bg: rgba(16,26,24,.28);
-  --uvc-nav-home: #93b4ff;`;
-const UNIFIED_VIBE_CARD_NAV_LIGHT_VARS = `
- --uvc-glass-fill:rgba(255,255,255,.08);
- --uvc-glass-edge:rgba(255,255,255,.3);
- --uvc-glass-highlight:rgba(255,255,255,.8);
- --uvc-glass-shadow:0 4px 16px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.08);
- --uvc-nav-home:#2d5bd1; --uvc-nav-edit:#a34b0a; --uvc-nav-share:#18713b;
- --uvc-nav-fill:rgba(255,255,240,.92);
- --uvc-nav-border:color-mix(in srgb,currentColor 65%,transparent);
- --uvc-nav-selected-width:1px;
- --uvc-nav-selected-shadow:inset 0 0 5px 1px color-mix(in srgb,currentColor 45%,transparent),inset 0 0 2px color-mix(in srgb,currentColor 25%,transparent);`;
-const UNIFIED_VIBE_CARD_NAV_DARK_VARS = `${UNIFIED_VIBE_CARD_OBSIDIAN_VARS}
- --uvc-nav-edit:#fb923c; --uvc-nav-share:#4ade80;
- --uvc-nav-fill:rgba(0,0,0,.5);
- --uvc-nav-border:currentColor;
- --uvc-nav-selected-width:3px;
- --uvc-nav-selected-shadow:inset 0 4px 8px 1px rgba(0,0,0,.85),inset 0 1px 3px rgba(0,0,0,.65),inset 0 -1px 0 color-mix(in srgb,currentColor 45%,transparent);`;
-const unifiedVibeCardDarkCss = `
-[data-unified-vibe-card] {${UNIFIED_VIBE_CARD_GLASS_LIGHT_VARS}
-}
-@media (prefers-color-scheme: dark) {
-  [data-unified-vibe-card], [data-vibe-handle-menu], [data-vibe-version-menu], [data-vibe-closed-build-status] {${UNIFIED_VIBE_CARD_DARK_VARS}
-  }
-  [data-unified-vibe-card] {${UNIFIED_VIBE_CARD_GLASS_DARK_VARS}
-  }
-}
-.dark [data-unified-vibe-card], .dark [data-vibe-handle-menu], .dark [data-vibe-version-menu], .dark [data-vibe-closed-build-status] {${UNIFIED_VIBE_CARD_DARK_VARS}
-}
-.dark [data-unified-vibe-card] {${UNIFIED_VIBE_CARD_GLASS_DARK_VARS}
-}
-/* The detached row owns its theme independently of the card content. */
-[data-vibe-card-nav] {${UNIFIED_VIBE_CARD_DARK_VARS}${UNIFIED_VIBE_CARD_NAV_LIGHT_VARS}
-}
-[data-vibe-switch-glass] {${UNIFIED_VIBE_CARD_OBSIDIAN_VARS}
-}
-/* The card's layout still includes its footer. Only its glass surface ends
-   at the former divider: retain the outer 1px border and footer's 1px top
-   border as transparent spacing so the circles and switch keep their layout. */
-[data-unified-vibe-card]::before {
-  content: ""; position: absolute; inset: -1px -1px 50px; border-radius: 14px;
-}
-/* The agent panel retains its existing 50px switch reservation, without the
-   ordinary nav row's extra divider pixel. Its body ends one pixel lower. */
-[data-unified-vibe-card][data-vibe-agent-panel="true"]::before { bottom: 49px; }
-[data-vibe-card-nav] { position: relative; isolation: isolate; }
-[data-vibe-card-nav]::before {
-  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); z-index: -1;
-  width: calc(3 * var(--uvc-nav-size, 38px) + 2 * var(--uvc-nav-gap, 6px) + 12px);
-  height: calc(var(--uvc-nav-size, 38px) + 10px); border-radius: 999px;
-}
-[data-unified-vibe-card]::before, [data-vibe-card-nav]::before, [data-vibe-switch-glass]::before {
-  box-sizing: border-box; border: 1px solid transparent; pointer-events: none;
-}
-[data-unified-vibe-card]::before, [data-vibe-card-nav]::before, [data-vibe-switch-glass]::before {
-  background: linear-gradient(to right, transparent, var(--uvc-glass-highlight), transparent) top / 100% 1px no-repeat,
-    linear-gradient(to bottom, var(--uvc-glass-highlight), transparent, var(--uvc-glass-edge)) left / 1px 100% no-repeat,
-    var(--uvc-glass-fill);
-  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
-  box-shadow: var(--uvc-glass-shadow);
-}
-[data-vibe-card-nav]::before { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
-@media (prefers-color-scheme: dark) {
- [data-vibe-card-nav] {${UNIFIED_VIBE_CARD_NAV_DARK_VARS}}
- [data-vibe-card-nav]::before { backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
-}
-.dark [data-vibe-card-nav] {${UNIFIED_VIBE_CARD_NAV_DARK_VARS}}
-.dark [data-vibe-card-nav]::before { backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
-.light [data-vibe-card-nav] {${UNIFIED_VIBE_CARD_NAV_LIGHT_VARS}}
-.light [data-vibe-card-nav]::before { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
-[data-vibe-card-nav] [data-vibe-nav-selected="true"] svg { stroke-width:3; }
-/* The arrival uses the fitted glass surface, leaving the brand artwork untouched.
-   Keying the layer by status replays same-color arrivals without a JS timer. */
-[data-vibe-switch-glass]:has([data-vibe-switch-highlight])::before { visibility:hidden; }
-[data-vibe-switch-rest] {
- background:linear-gradient(to right,transparent,var(--uvc-glass-highlight),transparent) top/100% 1px no-repeat,
- linear-gradient(to bottom,var(--uvc-glass-highlight),transparent,var(--uvc-glass-edge)) left/1px 100% no-repeat,var(--uvc-glass-fill);
- box-shadow:var(--uvc-glass-shadow);
- animation:uvc-notification-rest 7s forwards;
-}
-[data-vibe-switch-highlight] {
- --uvc-arrival-fill:color-mix(in srgb,currentColor 80%,transparent);
- --uvc-arrival-edge:color-mix(in srgb,color-mix(in srgb,currentColor 50%,white) 60%,transparent);
- --uvc-arrival-highlight:color-mix(in srgb,color-mix(in srgb,currentColor 20%,white) 90%,transparent);
- background:linear-gradient(to right,transparent,var(--uvc-arrival-highlight),transparent) top/100% 1px no-repeat,
- linear-gradient(to bottom,var(--uvc-arrival-highlight),transparent,var(--uvc-arrival-edge)) left/1px 100% no-repeat,var(--uvc-arrival-fill);
- box-shadow:0 4px 16px rgba(0,0,0,.2),inset 0 1px 0 var(--uvc-arrival-highlight),inset 0 -1px 0 var(--uvc-arrival-edge),inset 0 0 12px rgba(255,255,255,.06);
- animation:uvc-notification-glass 7s forwards;
-}
-/* Preserve the original Amber material for the yellow/pending status. */
-[data-vibe-switch-highlight][data-arrival-amber="true"] {
- --uvc-arrival-fill:rgba(191,142,66,.8);
- --uvc-arrival-edge:rgba(255,229,167,.6);
- --uvc-arrival-highlight:rgba(255,246,218,.9);
-}
-[data-vibe-switch-highlight], [data-vibe-switch-rest] {
- box-sizing:border-box; border:1px solid transparent; pointer-events:none;
- backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
-}
-@keyframes uvc-notification-rest {
- 0%,100% { opacity:1; }
- 14.3%,71.4% { opacity:0; }
-}
-@keyframes uvc-notification-glass {
- 0% { opacity:0; }
- 14.3%,71.4% { opacity:1; }
- 100% { opacity:0; }
-}
-@media (prefers-reduced-motion:reduce) {
- [data-vibe-switch-highlight] { animation-name:uvc-notification-glass-reduced; }
- [data-vibe-switch-rest] { animation-name:uvc-notification-rest-reduced; }
-}
-@keyframes uvc-notification-rest-reduced {
- 0%,71.4% { opacity:0; }
- 100% { opacity:1; }
-}
-@keyframes uvc-notification-glass-reduced {
- 0%,71.4% { opacity:1; }
- 100% { opacity:0; }
-}
-/* Fit the painted 102px logo, excluding the SVG's transparent side margins.
-   Match the nav oval's height without moving the existing 120×44 hit target. */
-[data-vibe-switch-glass] { isolation: isolate; }
-[data-vibe-switch-glass]::before, [data-vibe-switch-highlight], [data-vibe-switch-rest] {
-  content: ""; position: absolute; left: 6px; right: 6px; top: calc(50% + 1px);
-  height: calc(var(--uvc-nav-size, 38px) + 10px); transform: translateY(-50%);
-  border-radius: 999px; z-index: -1;
-}
-[data-unified-vibe-card] form.vibes-edit-field {
-  --vibes-card-border: var(--uvc-composer-border);
-}
-/* Reading treatment lives inside the card, away from the detached controls.
-   Style keeps its own palette surfaces; only its text inherits the stronger ink.
-   History and streaming share one surface marker so a build never drops the veil. */
-[data-vibe-card-body] {
-  --color-light-primary:var(--uvc-reading-ink);
-  --color-dark-primary:var(--uvc-reading-ink);
-  --color-light-secondary:var(--uvc-reading-label);
-  --color-dark-secondary:var(--uvc-reading-label);
-  --vibes-card-text:var(--uvc-reading-ink);
-  color:var(--uvc-reading-ink);
-}
-[data-vibe-card-body] .prose {
-  color:var(--uvc-reading-ink);
-  --tw-prose-body:var(--uvc-reading-ink); --tw-prose-bold:var(--uvc-reading-ink);
-  --tw-prose-invert-body:var(--uvc-reading-ink); --tw-prose-invert-bold:var(--uvc-reading-ink);
-}
-[data-vibe-card-body] :is([data-message-role="narration"],[data-message-role="user-prompt"]) > :first-child {
-  color:var(--uvc-reading-label); opacity:1;
-}
-[data-unified-vibe-card][data-vibe-reading-mode="ink-veil"] [data-vibe-reading-surface],
-[data-unified-vibe-card][data-vibe-reading-mode="ink-veil"] form.vibes-edit-field {
-  background:var(--uvc-reading-veil);
-}
-[data-unified-vibe-card][data-vibe-reading-mode="ink-veil"] [data-vibe-reading-surface] { border-radius:10px; }
-[data-vibe-card-body] form.vibes-edit-field textarea { color:var(--uvc-reading-ink); }
-/* Inverse Float at 50% audition strength, preserving the outer opening scale.
-   Total x/y travel: ovals 2.25/4.5px, contents 2.125/4.25px,
-   glass 1.875/3.75px, header 1.375/2.75px, conversation .875/1.75px,
-   composer .375/.75px. Nested text subtracts .25/.5px from its surface.
-   Every layer moves in the same direction; layout and timing stay unchanged. */
-[data-vibe-floating="true"]::before { translate:calc(var(--vibe-float-x,0)*1.875px) calc(var(--vibe-float-y,0)*3.75px); }
-[data-vibe-floating="true"] [data-vibe-card-nav],
-[data-vibe-floating-controls="true"] [data-vibe-switch-glass] { translate:calc(var(--vibe-float-x,0)*2.25px) calc(var(--vibe-float-y,0)*4.5px); }
-[data-vibe-floating="true"] [data-vibe-card-nav] > button,
-[data-vibe-floating-controls="true"] [data-vibe-switch-glass] > svg { translate:calc(var(--vibe-float-x,0)*-.125px) calc(var(--vibe-float-y,0)*-.25px); }
-[data-vibe-floating="true"] [data-vibe-card-body] { translate:calc(var(--vibe-float-x,0)*1.375px) calc(var(--vibe-float-y,0)*2.75px); }
-[data-vibe-floating="true"] [data-testid="vibe-card-scroll"] { translate:calc(var(--vibe-float-x,0)*-.5px) calc(var(--vibe-float-y,0)*-1px); }
-[data-vibe-floating="true"] form.vibes-edit-field { translate:calc(var(--vibe-float-x,0)*-1px) calc(var(--vibe-float-y,0)*-2px); }
-[data-vibe-floating="true"] [data-vibe-float-text],
-[data-vibe-floating="true"] .prose,
-[data-vibe-floating="true"] .vibes-chip-well [data-chip-role="option"] > span:first-child { translate:calc(var(--vibe-float-x,0)*-.25px) calc(var(--vibe-float-y,0)*-.5px); }
-@media (prefers-reduced-motion:reduce) {
- [data-vibe-floating]::before, [data-vibe-floating] [data-vibe-card-body],
- [data-vibe-floating] [data-testid="vibe-card-scroll"], [data-vibe-floating] form.vibes-edit-field,
- [data-vibe-floating] [data-vibe-float-text], [data-vibe-floating] .prose,
- [data-vibe-floating] .vibes-chip-well [data-chip-role="option"] > span:first-child,
- [data-vibe-floating] [data-vibe-card-nav], [data-vibe-floating-controls] [data-vibe-switch-glass],
- [data-vibe-floating] [data-vibe-card-nav] > button, [data-vibe-floating-controls] [data-vibe-switch-glass] > svg { translate:none; }
-}
-.light [data-unified-vibe-card] {
-${UNIFIED_VIBE_SHARE_LIGHT_VARS}
-  --uvc-reading-ink:#161b18; --uvc-reading-label:#414b44; --uvc-reading-veil:rgba(255,255,240,.25);
-}
-${UNIFIED_VIBE_SETTINGS_CSS}
-/* The selected Frost header rule fades at both ends at half opacity,
-   without consuming any of the card's content height. */
-[data-vibe-card-header]::after {
-  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
-  background: linear-gradient(90deg, transparent, var(--uvc-glass-edge) 22%, var(--uvc-glass-edge) 78%, transparent);
-  opacity: .5; pointer-events: none;
-}
-${UNIFIED_VIBE_SHARE_CSS}
-/* A · Line: the clip edge sits under the painted switch, inside the 120px
-   hit box (whose SVG has transparent air at its left). 22px padding leaves
-   the resting strip at right:132px without changing the switch geometry. */
-[data-vibe-closed-build-status] {
-  position: absolute; left: 12px; right: 110px; bottom: 17px;
-  z-index: 2; display: flex; justify-content: flex-end; padding-right: 22px;
-  overflow: hidden; pointer-events: none; box-sizing: border-box;
-}
-[data-vibe-closed-build-line] {
-  min-width: 0; max-width: 100%; box-sizing: border-box;
-  padding: 3px 5px; border-radius: 3px;
-  background: var(--uvc-closed-build-bg, #fff);
-  color: var(--uvc-closed-build-text, #6d6973);
-  font: 12px/18px Inter, system-ui, sans-serif;
-  transform: translateX(calc(100% + 22px));
-  transition: transform 240ms cubic-bezier(.22,.68,0,1);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-[data-vibe-closed-build-line][data-revealed="true"] { transform: translateX(0); }
-[data-vibe-closed-build-line] [data-testid="thinking-line"] {
-  display: flex; align-items: baseline; gap: 6px; min-width: 0;
-}
-[data-vibe-closed-build-line] [data-testid="thinking-line-glyph"] { flex-shrink: 0; }
-[data-vibe-closed-build-line] [data-testid="thinking-line-verb"] {
-  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-@media (prefers-reduced-motion: reduce) {
-  [data-vibe-closed-build-line] { transition: none; }
-}
-/* Composer submit button: a blue pulsating glow while the field holds unsent
-   content, nudging the user to send it — the same "something's live, act on it"
-   cue the homepage submit-ripple gives, tinted to the button's vibes-blue.
-   Applied via className in OtherRow, gated to typed/staged-but-unsent + enabled.
-   Each stop keeps the .vibes-edit-btn hard offset shadow as the first layer so
-   the brutalist depth stays put while the ring pulses on top — a bare ring-only
-   box-shadow would override the class shadow (animations beat normal
-   declarations) and flicker the depth out exactly when the button wants notice. */
-@keyframes vibesSubmitPulse {
-  0% {
-    box-shadow: 2px 2px 0 0 var(--vibes-card-border), 0 0 0 0 rgba(59, 130, 246, 0.5);
-  }
-  70% {
-    box-shadow: 2px 2px 0 0 var(--vibes-card-border), 0 0 0 7px rgba(59, 130, 246, 0);
-  }
-  100% {
-    box-shadow: 2px 2px 0 0 var(--vibes-card-border), 0 0 0 0 rgba(59, 130, 246, 0);
-  }
-}
-.vibes-submit-pulse {
-  animation: vibesSubmitPulse 1.5s ease-out infinite;
-}
-/* Reduced motion: hold one soft static ring instead of the loop so the "ready
-   to send" cue still reads without any movement (mirrors .submit-ripple) — layered
-   over the same hard shadow so the brutalist depth is preserved here too. */
-@media (prefers-reduced-motion: reduce) {
-  [data-unified-vibe-card], [data-vibe-card-content] {
-    transition: none !important;
-  }
-  .vibes-submit-pulse {
-    animation: none;
-    box-shadow: 2px 2px 0 0 var(--vibes-card-border), 0 0 0 3px rgba(59, 130, 246, 0.35);
-  }
-}
-/* Access-wizard held state (#4056): the wizard is a whole codegen turn — tens of
-   seconds — and the banner spent all of it as a flat blue rectangle with a
-   static "Securing…" stamp, which reads as hung rather than working. A slow
-   indeterminate sweep across the banner plus a spinner in the held control give
-   the wait a pulse, so "still going" is legible without a progress number we
-   don't have. Self-contained keyframes (no global.css / Tailwind dependency) to
-   match the rest of this card. Reduced motion holds both still — the banner
-   keeps a soft static highlight so the state still reads as distinct. */
-@keyframes vibesSecuringSweep {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-.vibes-securing {
-  background-image: linear-gradient(100deg, transparent 35%, rgba(59, 130, 246, 0.16) 50%, transparent 65%);
-  background-size: 250% 100%;
-  background-repeat: no-repeat;
-  animation: vibesSecuringSweep 1.8s linear infinite;
-}
-@keyframes vibesSecuringSpin {
-  to { transform: rotate(360deg); }
-}
-.vibes-securing-spinner {
-  animation: vibesSecuringSpin 0.8s linear infinite;
-}
-@media (prefers-reduced-motion: reduce) {
-  .vibes-securing {
-    animation: none;
-    background-image: linear-gradient(100deg, transparent 35%, rgba(59, 130, 246, 0.1) 50%, transparent 65%);
-    background-size: 100% 100%;
-  }
-  .vibes-securing-spinner {
-    animation: none;
-  }
-}
-/* Three shrink-proof nav circles (Home / Edit / Share) share the footer with the 120px logo spacer.
-   Compact size/gap steps keep them clear of the logo on narrow phones without
-   flex shrinking circles into ovals. */
-@media (max-width: 400px) {
-  [data-unified-vibe-card], [data-vibe-switch-glass] { --uvc-nav-size: 34px; --uvc-nav-gap: 4px; }
-}
-@media (max-width: 360px) {
-  [data-unified-vibe-card], [data-vibe-switch-glass] { --uvc-nav-size: 30px; }
-}
-/* Composer input row — a FIELD, not a button (Storybook audition C2, #4578).
-   It used to wear a hard 2px/3px offset shadow over the card's own grey, which
-   put it one pixel of shadow away from .vibes-edit-btn and made the row read
-   as three buttons instead of a field with two controls. So: no shadow at all
-   (the send button is now the only raised thing in the row — that IS
-   the cue), and a distinct field fill (--vibes-field-bg: white on the pale
-   card, one step below near-black on the dark card) so the surface you type
-   into is visibly a different kind of surface from the card. The 2px border and
-   8px corners stay — the brutalist language is the border, not the shadow.
-   Focus swaps the border to brand blue (--vibes-blue, #3b82f6 both modes) in
-   place of the default focus ring. The caret is the real one: it appears on
-   focus, because a painted caret on an unfocused input lies about focus state. */
-.vibes-edit-field {
-  border: 2px solid var(--vibes-card-border);
-  border-radius: 8px;
-  background: var(--vibes-field-bg, #ffffff);
-  box-shadow: none;
-  transition: border-color 0.12s ease;
-}
-.vibes-edit-field:focus-within {
-  border-color: var(--vibes-blue);
-}
-/* The suggestion well shares the transcript’s attributed content column. Quiet
-   suggestion borders and an opaque invitation distinguish optional actions
-   from the writing field. Gold upgrades retain their semantic color.
-   OptionButtons outside this well keep their own presentation. */
-.vibes-chip-well {
-  background: var(--uvc-suggestion-bg, #f1f3f6);
-  border-radius: 10px;
-  padding: 10px;
-  gap: 6px;
-}
-.vibes-chip-well [data-testid="option-buttons-explainer"] {
-  opacity: 1;
-  color: var(--uvc-helper-text, #4b5563);
-  font-size: 12px;
-  line-height: 1.5;
-}
-.vibes-chip-well [data-message-role="brainstorm-options"] {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.vibes-chip-well [data-testid="option-buttons-explainer"] {
-  flex: 0 0 100%;
-  margin: 0;
-}
-/* Decorated chips keep their adjacent owner control in the same wrapping item. */
-.vibes-chip-well [data-message-role="brainstorm-options"] > div {
-  min-width: 0;
-  max-width: 100%;
-}
-.vibes-chip-well [data-message-role="brainstorm-options"] > div [data-chip-role="option"] {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.vibes-chip-well [data-chip-role="option"]:not([data-chip-tone="gold"]) {
-  background-color: var(--vibes-field-bg, #ffffff);
-  border: 1px solid var(--uvc-suggestion-border, #a6adb7);
-  box-shadow: none;
-  color: var(--uvc-suggestion-text, #27303d);
-}
-/* Self-sized suggestions retain a 40px minimum height and a 6px gap. */
-.vibes-chip-well [data-chip-role="option"] {
-  width: auto;
-  max-width: 100%;
-  flex: 0 0 auto;
-  align-self: flex-start;
-  border-radius: 8px;
-  font-size: 13px;
-  line-height: 20px;
-  padding: 3px 6px;
-  min-height: 40px;
-  text-align: left;
-  overflow-wrap: anywhere;
-}
-/* The card owns this density; other SubTabStrip and BuildCard consumers keep
-   their defaults. Tab inline sizes need a scoped override, not a shared edit. */
-[data-vibe-card-editor-tabs] [role="tablist"] {
-  padding-inline: 2px;
-  gap: 2px;
-}
-[data-vibe-card-editor-tabs] [role="tab"] {
-  min-height: 36px;
-  padding-inline: 3px !important;
-  font-size: 14px !important;
-}
-/* Share and Chat/editor strips are pinned outside their content scrollers.
-   Continue the card glass across both menus; standalone strips retain their
-   opaque surfaces so scrolling text cannot show through them. */
-[data-unified-vibe-card] [data-share-panel] > [role="tablist"],
-[data-unified-vibe-card] [data-vibe-card-editor-tabs] [role="tablist"] {
-  background: var(--uvc-menu-strip);
-  border-color: var(--uvc-glass-edge);
-}
-[data-unified-vibe-card] [data-share-panel] > [role="tablist"] [role="tab"][aria-selected="true"],
-[data-unified-vibe-card] [data-vibe-card-editor-tabs] [role="tab"][aria-selected="true"] {
-  background: var(--uvc-menu-tab);
-  box-shadow: inset 0 1px 0 var(--uvc-glass-edge);
-}
-[data-unified-vibe-card] [data-share-secondary] {
-  color: var(--uvc-share-muted);
-}
-[data-unified-vibe-card] [data-testid="build-card"] {
-  --text-secondary: var(--uvc-build-text, #526071);
-}
-/* The field's :focus-within (blue border) is the SINGLE focus cue. The inner
-   <input> would otherwise draw the app-wide global :focus-visible outline
-   (2px solid var(--vibes-blue), offset 2px — see base/theme/global-styles.ts),
-   which paints a second blue rectangle nested inside the field. Suppress it
-   here; keyboard focus stays visible via the field border, so a11y holds. */
-.vibes-edit-field input:focus,
-.vibes-edit-field input:focus-visible,
-.vibes-edit-field textarea:focus,
-.vibes-edit-field textarea:focus-visible {
-  outline: none;
-}
-/* Submit / stop buttons get the brutalist treatment: 2px solid border, a hard
-   mini offset shadow, and the global press effect (translate into the shadow,
-   which drops — same feel as the neo-brutalist <select>:active). Rounded-square
-   footprint (borderRadius 8 from OTHER_ROW_BUTTON_STYLE, matching the field's
-   corners) — the audition winner over the old circle. */
-.vibes-edit-btn {
-  border: 2px solid var(--vibes-card-border);
-  box-shadow: 2px 2px 0 0 var(--vibes-card-border);
-  transition: transform 0.12s ease, box-shadow 0.12s ease;
-}
-.vibes-edit-btn:active:not(:disabled) {
-  transform: translate(2px, 2px);
-  box-shadow: none;
-}`;
-const CARD_VIEWPORT_HEIGHT = "80%";
-const CARD_FULL_VIEWPORT_HEIGHT = "94%";
-function ClosedBuildStatus({ visible, content }) {
-    const [retainedContent, setRetainedContent] = useState(visible ? content : undefined);
-    const [revealed, setRevealed] = useState(false);
-    const [reducedMotion, setReducedMotion] = useState(false);
-    useEffect(() => {
-        if (typeof window.matchMedia !== "function")
-            return;
-        const media = window.matchMedia("(prefers-reduced-motion: reduce)");
-        function updateMotion() {
-            setReducedMotion(media.matches);
-        }
-        updateMotion();
-        media.addEventListener("change", updateMotion);
-        return () => media.removeEventListener("change", updateMotion);
-    }, []);
-    useEffect(() => {
-        if (visible)
-            setRetainedContent(content);
-    }, [visible, content]);
-    useEffect(() => {
-        let firstFrame;
-        let secondFrame;
-        let exitTimer;
-        if (visible) {
-            if (reducedMotion)
-                setRevealed(true);
-            else
-                firstFrame = requestAnimationFrame(() => {
-                    secondFrame = requestAnimationFrame(() => setRevealed(true));
-                });
-        }
-        else {
-            setRevealed(false);
-            if (reducedMotion)
-                setRetainedContent(undefined);
-            else
-                exitTimer = setTimeout(() => setRetainedContent(undefined), 240);
-        }
-        return () => {
-            if (firstFrame !== undefined)
-                cancelAnimationFrame(firstFrame);
-            if (secondFrame !== undefined)
-                cancelAnimationFrame(secondFrame);
-            clearTimeout(exitTimer);
-        };
-    }, [visible, reducedMotion]);
-    if (retainedContent === undefined || retainedContent === null)
-        return undefined;
-    return (React.createElement("div", { "data-vibe-closed-build-status": true, "data-testid": "closed-build-status", "aria-hidden": visible ? undefined : true, inert: !visible },
-        React.createElement("div", { "data-vibe-closed-build-line": true, "data-revealed": revealed }, retainedContent)));
-}
-export function UnifiedVibeCard(props) {
-    const { appTitle, appSlug, isTwinkling, isTeasing, open: controlledOpen, onOpenChange } = props;
-    const editorTabDisabled = props.editorTab === undefined ? false : props.disabledEditorTabs?.includes(props.editorTab) === true;
-    const editorTabForRender = editorTabDisabled ? "edit-chat" : props.editorTab;
-    const retainedEditorVisible = props.editorVisible === true && editorTabDisabled === false;
-    const retainedEditorMounted = props.retainedEditor != null && editorTabDisabled === false;
-    const switchGlassColor = props.switchOvalColor ??
-        (props.versionLocked || props.publishState === "draft" || props.onViewDraft !== undefined
-            ? ovalColors.yellow
-            : ovalColors.neutral);
-    const [internalOpen, setInternalOpen] = useState(false);
-    const open = controlledOpen ?? internalOpen;
-    const setOpen = (next) => {
-        if (controlledOpen === undefined)
-            setInternalOpen(next);
-        onOpenChange?.(next);
-    };
-    const [hidden, setHidden] = useState(false);
-    const LONG_PRESS_HIDE_MS = 500;
-    const HIDE_MOVE_TOLERANCE_PX = 10;
-    const hidePressTimer = useRef(undefined);
-    const hideOrigin = useRef(undefined);
-    const restorePressed = useRef(false);
-    useEffect(() => () => clearTimeout(hidePressTimer.current), []);
-    const cancelHidePress = () => {
-        clearTimeout(hidePressTimer.current);
-        hidePressTimer.current = undefined;
-        hideOrigin.current = undefined;
-    };
-    const onSwitchPointerDown = (e) => {
-        if (e.pointerType === "mouse" && e.button !== 0)
-            return;
-        hideOrigin.current = { x: e.clientX, y: e.clientY };
-        clearTimeout(hidePressTimer.current);
-        hidePressTimer.current = setTimeout(() => {
-            hidePressTimer.current = undefined;
-            hideOrigin.current = undefined;
-            setOpen(false);
-            setHidden(true);
-        }, LONG_PRESS_HIDE_MS);
-    };
-    const onSwitchPointerMove = (e) => {
-        if (!hideOrigin.current)
-            return;
-        if (Math.hypot(e.clientX - hideOrigin.current.x, e.clientY - hideOrigin.current.y) > HIDE_MOVE_TOLERANCE_PX) {
-            cancelHidePress();
-        }
-    };
-    const pickerInteractive = props.handles !== undefined || props.onAccountSettings !== undefined;
-    const [internalPickerOpen, setInternalPickerOpen] = useState(false);
-    const pickerOpen = props.handlePickerOpen ?? internalPickerOpen;
-    const setPickerOpen = (next) => {
-        if (props.handlePickerOpen === undefined)
-            setInternalPickerOpen(next);
-        props.onHandlePickerOpenChange?.(next);
-        if (next === false)
-            setCreditsOpen(false);
-    };
-    const pickerWrapRef = useRef(null);
-    const menuRef = useRef(null);
-    useEffect(() => {
-        if (!pickerOpen)
-            return;
-        const onDown = (e) => {
-            const target = e.target;
-            if (!pickerWrapRef.current?.contains(target) && !menuRef.current?.contains(target))
-                setPickerOpen(false);
-        };
-        const onBlur = () => {
-            if (document.activeElement?.tagName === "IFRAME")
-                setPickerOpen(false);
-        };
-        document.addEventListener("pointerdown", onDown);
-        window.addEventListener("blur", onBlur);
-        return () => {
-            document.removeEventListener("pointerdown", onDown);
-            window.removeEventListener("blur", onBlur);
-        };
-    }, [pickerOpen]);
-    useEffect(() => {
-        if (open === false && pickerOpen === true)
-            setPickerOpen(false);
-    }, [open, pickerOpen]);
-    const creditsEnabled = props.credits?.enabled === true;
-    const [internalCreditsOpen, setInternalCreditsOpen] = useState(false);
-    const creditsOpen = props.creditsMenuOpen ?? internalCreditsOpen;
-    const setCreditsOpen = (next) => {
-        if (props.creditsMenuOpen === undefined)
-            setInternalCreditsOpen(next);
-        props.onCreditsMenuOpenChange?.(next);
-    };
-    useEffect(() => {
-        if (open === false && creditsOpen === true)
-            setCreditsOpen(false);
-    }, [open, creditsOpen]);
-    const [draft, setDraft] = useState("");
-    const [queued, setQueued] = useState([]);
-    const attachmentsCtl = useAttachments();
-    const prevAppSlugRef = useRef(props.appSlug);
-    if (prevAppSlugRef.current !== props.appSlug) {
-        prevAppSlugRef.current = props.appSlug;
-        setDraft("");
-        setQueued([]);
-        attachmentsCtl.clear();
-    }
-    const restore = props.restoreComposer;
-    const stageAttachments = attachmentsCtl.stage;
-    const prevRestoreSeqRef = useRef(undefined);
-    useEffect(() => {
-        if (restore === undefined || restore.seq === prevRestoreSeqRef.current)
-            return;
-        prevRestoreSeqRef.current = restore.seq;
-        setDraft((d) => (d === "" ? restore.text : d));
-        stageAttachments(restore.attachments);
-    }, [restore, stageAttachments]);
-    const seed = props.seedComposer;
-    const prevSeedSeqRef = useRef(undefined);
-    useEffect(() => {
-        if (seed === undefined || seed.seq === prevSeedSeqRef.current)
-            return;
-        prevSeedSeqRef.current = seed.seq;
-        setDraft((d) => (d === "" ? seed.text : d));
-    }, [seed]);
-    const { generating, onSubmitOther } = props;
-    const liveDuringBuild = props.liveDuringBuild;
-    const canSendNow = props.canSendNow;
-    const [flushAttempt, setFlushAttempt] = useState(0);
-    useEffect(() => {
-        const flushable = liveDuringBuild === true && canSendNow === true ? true : !generating;
-        if (!flushable || queued.length === 0)
-            return;
-        const batch = queued.join("\n\n");
-        if (onSubmitOther?.(batch) !== false) {
-            setQueued([]);
-            setFlushAttempt(0);
-            return;
-        }
-        if (flushAttempt >= QUEUE_FLUSH_MAX_ATTEMPTS) {
-            setQueued([]);
-            setFlushAttempt(0);
-            setDraft((d) => (d === "" ? batch : `${d}\n${batch}`));
-            return;
-        }
-        const timer = setTimeout(() => setFlushAttempt((n) => n + 1), QUEUE_FLUSH_RETRY_MS);
-        return () => clearTimeout(timer);
-    }, [generating, queued, onSubmitOther, flushAttempt, liveDuringBuild, canSendNow]);
-    const [mounted, setMounted] = useState(open);
-    const [grown, setGrown] = useState(open);
-    const closeDurationMs = props.closeDurationMs ?? 240;
-    const scaleTransition = `transform ${open ? 240 : closeDurationMs}ms ${open ? "cubic-bezier(0.34, 1.56, 0.64, 1)" : "ease-in-out"}`;
-    useEffect(() => {
-        let t;
-        if (open) {
-            setMounted(true);
-            t = setTimeout(() => setGrown(true), 10);
-        }
-        else {
-            setGrown(false);
-            t = setTimeout(() => setMounted(false), closeDurationMs);
-        }
-        return () => clearTimeout(t);
-    }, [open, closeDurationMs]);
-    const [everOpened, setEverOpened] = useState(open);
-    useEffect(() => {
-        if (open)
-            setEverOpened(true);
-    }, [open]);
-    const retained = Boolean(props.keepMounted) && everOpened;
-    const internalScrollRegionRef = useRef(null);
-    const scrollRegionRef = props.scrollContainerRef ?? internalScrollRegionRef;
-    const chipsRegionRef = useRef(null);
-    const stickToBottomRef = useRef(true);
-    const hasHistory = (props.historyBody != null || props.streamBody != null) && props.body == null;
-    const streamLive = props.streamBody != null && props.streamSettled !== true;
-    const chipBuildLive = streamLive && props.activeChip !== undefined;
-    const visibleChips = props.activeChip === undefined || props.chips?.slice(0, 3).includes(props.activeChip) === true
-        ? props.chips?.slice(0, 3)
-        : [props.activeChip, ...(props.chips ?? []).filter((chip) => chip !== props.activeChip)].slice(0, 3);
-    useEffect(() => {
-        if (!streamLive)
-            return;
-        stickToBottomRef.current = true;
-        const region = scrollRegionRef.current;
-        if (region)
-            region.scrollTop = region.scrollHeight;
-    }, [streamLive]);
-    useEffect(() => {
-        const region = scrollRegionRef.current;
-        const content = chipsRegionRef.current;
-        if (!hasHistory || !region || !content)
-            return;
-        const pin = () => {
-            if (stickToBottomRef.current)
-                region.scrollTop = region.scrollHeight;
-        };
-        const onScroll = () => {
-            stickToBottomRef.current = region.scrollHeight - region.scrollTop - region.clientHeight < 48;
-        };
-        region.addEventListener("scroll", onScroll);
-        pin();
-        const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(pin) : undefined;
-        ro?.observe(content);
-        return () => {
-            region.removeEventListener("scroll", onScroll);
-            ro?.disconnect();
-        };
-    }, [hasHistory, mounted]);
-    const [userHeight, setUserHeight] = useState(null);
-    const cardRef = useRef(null);
-    const switchWrapRef = useRef(null);
-    const float = useCardFloat(cardRef, open && !hidden && (mounted || retained), switchWrapRef);
-    useEffect(() => {
-        if (open === false)
-            return;
-        const onOutsideClick = (event) => {
-            if (event.defaultPrevented || event.cancelBubble)
-                return;
-            const path = event.composedPath();
-            if ([cardRef.current, switchWrapRef.current].some((node) => node !== null && path.includes(node)))
-                return;
-            if (path.some((node) => "hasAttribute" in node &&
-                typeof node.hasAttribute === "function" &&
-                (node.hasAttribute("data-vibe-handle-menu") || node.hasAttribute("data-vibe-version-menu"))))
-                return;
-            setOpen(false);
-        };
-        window.addEventListener("click", onOutsideClick);
-        return () => window.removeEventListener("click", onOutsideClick);
-    }, [open, controlledOpen, onOpenChange]);
-    const dragStateRef = useRef(null);
-    const [dragging, setDragging] = useState(false);
-    const RESIZE_MIN = 220;
-    const FLICK_VELOCITY = 0.6;
-    const FLICK_MIN_SAMPLE_MS = 8;
-    const FLICK_MAX_IDLE_MS = 120;
-    function resizeMaxHeight() {
-        const parentEl = cardRef.current?.offsetParent ?? null;
-        const viewportH = typeof window === "undefined" ? RESIZE_MIN : window.innerHeight;
-        const parentH = parentEl instanceof HTMLElement && parentEl.clientHeight > 0 ? parentEl.clientHeight : viewportH;
-        return Math.max(RESIZE_MIN, parentH - 24);
-    }
-    function clampHeight(px) {
-        return Math.min(Math.max(px, RESIZE_MIN), resizeMaxHeight());
-    }
-    const heightFractionRef = useRef(null);
-    function setForcedHeight(px) {
-        const clamped = clampHeight(px);
-        const max = resizeMaxHeight();
-        heightFractionRef.current = max > 0 ? clamped / max : null;
-        setUserHeight(clamped);
-    }
-    function clearForcedHeight() {
-        heightFractionRef.current = null;
-        setUserHeight(null);
-    }
-    useEffect(() => {
-        if (typeof window === "undefined")
-            return;
-        const onResize = () => {
-            const frac = heightFractionRef.current;
-            if (frac === null)
-                return;
-            setUserHeight(clampHeight(frac * resizeMaxHeight()));
-        };
-        window.addEventListener("resize", onResize);
-        return () => window.removeEventListener("resize", onResize);
-    }, []);
-    function currentHeight() {
-        return userHeight ?? cardRef.current?.offsetHeight ?? 0;
-    }
-    function onHandlePointerDown(e) {
-        e.preventDefault();
-        setDragging(true);
-        const now = performance.now();
-        dragStateRef.current = { startY: e.clientY, startHeight: currentHeight(), lastY: e.clientY, lastT: now, velocity: 0 };
-        if (typeof e.currentTarget.setPointerCapture === "function")
-            e.currentTarget.setPointerCapture(e.pointerId);
-    }
-    function onHandlePointerMove(e) {
-        const drag = dragStateRef.current;
-        if (drag === null)
-            return;
-        const now = performance.now();
-        const dt = now - drag.lastT;
-        if (dt >= FLICK_MIN_SAMPLE_MS) {
-            drag.velocity = (drag.lastY - e.clientY) / dt;
-            drag.lastY = e.clientY;
-            drag.lastT = now;
-        }
-        setForcedHeight(drag.startHeight + (drag.startY - e.clientY));
-    }
-    function cancelHandleDrag(e) {
-        dragStateRef.current = null;
-        setDragging(false);
-        if (typeof e.currentTarget.releasePointerCapture === "function")
-            e.currentTarget.releasePointerCapture(e.pointerId);
-    }
-    function endHandleDrag(e) {
-        const drag = dragStateRef.current;
-        dragStateRef.current = null;
-        setDragging(false);
-        if (typeof e.currentTarget.releasePointerCapture === "function")
-            e.currentTarget.releasePointerCapture(e.pointerId);
-        if (drag === null)
-            return;
-        const settled = performance.now() - drag.lastT > FLICK_MAX_IDLE_MS;
-        const velocity = settled ? 0 : drag.velocity;
-        if (velocity > FLICK_VELOCITY) {
-            setForcedHeight(resizeMaxHeight());
-        }
-        else if (velocity < -FLICK_VELOCITY) {
-            clearForcedHeight();
-            setOpen(false);
-        }
-    }
-    function onHandleKeyDown(e) {
-        if (e.key !== "ArrowUp" && e.key !== "ArrowDown")
-            return;
-        e.preventDefault();
-        setForcedHeight(currentHeight() + (e.key === "ArrowUp" ? 24 : -24));
-    }
-    const cardHeight = userHeight ?? (props.fullHeight ? CARD_FULL_VIEWPORT_HEIGHT : CARD_VIEWPORT_HEIGHT);
-    const agentPanelActive = props.agentPanel != null;
-    const resizeValueMax = resizeMaxHeight();
-    const resizeValueNow = Math.round(Math.min(Math.max(userHeight ?? cardRef.current?.offsetHeight ?? 0, RESIZE_MIN), resizeValueMax));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("style", null, unifiedVibeCardDarkCss),
-        React.createElement(ClosedBuildStatus, { visible: open === false && hidden === false && props.closedBuildStatus !== undefined && props.closedBuildStatus !== null, content: props.closedBuildStatus }),
-        !hidden && (mounted || retained) && (React.createElement("div", { ref: cardRef, role: "dialog", "aria-label": "Vibe menu", "data-unified-vibe-card": true, "data-vibe-settings-active": editorTabForRender === "settings" && props.selectedNav !== "share" && !agentPanelActive, "data-vibe-agent-panel": agentPanelActive, "data-vibe-reading-mode": editorTabForRender === "style" && props.selectedNav !== "share" && !agentPanelActive ? "ink" : "ink-veil", className: props.className, "aria-hidden": mounted ? undefined : true, inert: mounted ? undefined : true, style: {
-                position: "absolute",
-                left: 2,
-                right: 2,
-                bottom: 2,
-                zIndex: 2,
-                borderRadius: 14,
-                maxHeight: cardHeight,
-                height: cardHeight,
-                overflow: "visible",
-                display: "flex",
-                flexDirection: "column",
-                background: "transparent",
-                border: "1px solid transparent",
-                transformOrigin: "bottom right",
-                transform: grown ? "scale(1)" : "scale(0)",
-                transition: dragging ? scaleTransition : `${scaleTransition}, max-height 0.24s ease, height 0.24s ease`,
-                pointerEvents: grown ? "auto" : "none",
-                ...(mounted ? null : { visibility: "hidden" }),
-            } },
-            React.createElement("div", { "data-vibe-card-content": true, style: {
-                    position: "relative",
-                    display: "flex",
-                    flexDirection: "column",
-                    minHeight: 0,
-                    flex: "1 1 auto",
-                    opacity: grown ? 1 : 0,
-                    transition: grown ? "opacity 0.18s ease 0.14s" : "opacity 0.1s ease",
-                }, className: "text-light-primary dark:text-dark-primary" },
-                React.createElement("div", { "data-vibe-card-body": true, style: {
-                        display: "flex",
-                        flexDirection: "column",
-                        flex: "1 1 auto",
-                        minHeight: 0,
-                        overflow: "hidden",
-                        borderRadius: 13,
-                    } },
-                    React.createElement("div", { "data-vibe-card-header": true, style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 8,
-                            padding: "10px 10px 10px",
-                            flexShrink: 0,
-                            position: "relative",
-                            userSelect: "none",
-                        } },
-                        React.createElement("div", { "data-testid": "vibe-card-resize-handle", role: "separator", "aria-orientation": "horizontal", "aria-label": "Resize chat height", "aria-valuemin": RESIZE_MIN, "aria-valuemax": resizeValueMax, "aria-valuenow": resizeValueNow, tabIndex: 0, onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: endHandleDrag, onPointerCancel: cancelHandleDrag, onKeyDown: onHandleKeyDown, onDoubleClick: () => clearForcedHeight(), style: {
-                                position: "absolute",
-                                top: 0,
-                                left: 0,
-                                right: 0,
-                                bottom: 0,
-                                zIndex: 0,
-                                cursor: "ns-resize",
-                                touchAction: "none",
-                            } },
-                            React.createElement("span", { "aria-hidden": true, style: {
-                                    position: "absolute",
-                                    top: 4,
-                                    left: "50%",
-                                    transform: "translateX(-50%)",
-                                    width: "var(--uvc-notch-width, 44px)",
-                                    height: 4,
-                                    borderRadius: 999,
-                                    background: "var(--uvc-notch-fill)",
-                                    boxShadow: "var(--uvc-notch-shadow)",
-                                    opacity: "var(--uvc-notch-opacity)",
-                                } })),
-                        React.createElement("div", { style: {
-                                position: "relative",
-                                width: 30,
-                                height: 30,
-                                borderRadius: 8,
-                                flexShrink: 0,
-                                overflow: "hidden",
-                                background: "var(--vibes-cream, #fffff0)",
-                                border: "1px solid rgba(0,0,0,0.15)",
-                                pointerEvents: "none",
-                            } },
-                            props.appIconUrl && (React.createElement("img", { src: props.appIconUrl, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", transform: "scale(2)" } })),
-                            React.createElement(CodingIndicator, { active: props.coding === true })),
-                        React.createElement("div", { style: { lineHeight: 1.2, minWidth: 0, flex: "1 1 auto" } },
-                            React.createElement("strong", { "data-vibe-float-text": true, style: {
-                                    fontFamily: HOME_BRAND_FONT,
-                                    display: "block",
-                                    fontSize: 13,
-                                    lineHeight: 1.3,
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis",
-                                    whiteSpace: "nowrap",
-                                } }, appTitle),
-                            appSlug &&
-                                (props.onOpenApp === undefined && props.onCopyAppUrl === undefined ? (React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, appSlug)) : (React.createElement("div", { "data-vibe-card-header-controls": "true", "data-testid": "vibe-card-slug-line", style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 4, minWidth: 0 } },
-                                    props.onOpenApp === undefined ? (React.createElement("span", { className: "text-light-secondary dark:text-dark-secondary", style: {
-                                            fontSize: 12,
-                                            minWidth: 0,
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap",
-                                        } }, appSlug)) : (React.createElement("button", { type: "button", "data-testid": "vibe-card-slug-link", onClick: props.onOpenApp, className: "text-light-secondary dark:text-dark-secondary", style: {
-                                            font: "inherit",
-                                            fontSize: 12,
-                                            lineHeight: "20px",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap",
-                                            minWidth: 0,
-                                            textDecoration: "underline",
-                                            textUnderlineOffset: 2,
-                                            background: "none",
-                                            border: "none",
-                                            padding: 0,
-                                            cursor: "pointer",
-                                            textAlign: "left",
-                                        } }, appSlug)),
-                                    props.onCopyAppUrl !== undefined && (React.createElement(CopyLinkIconButton, { onCopy: props.onCopyAppUrl, color: "currentColor" })))))),
-                        (() => {
-                            const badges = [
-                                props.publishState === "old" ? React.createElement(DraftBadge, { key: "old", variant: "old" }) : null,
-                                props.publishState === "draft" && !props.versionLocked ? React.createElement(DraftBadge, { key: "draft", variant: "draft" }) : null,
-                                props.versionLocked ? React.createElement(LockedBadge, { key: "locked" }) : null,
-                                !props.publishState && props.onViewDraft && !props.versionLocked ? (React.createElement(ViewDraftBadge, { key: "view-draft", onClick: props.onViewDraft })) : null,
-                            ].filter(Boolean);
-                            return badges.length === 0 ? null : (React.createElement("div", { "data-vibe-card-header-controls": "true", style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 10, flexShrink: 0 } }, badges));
-                        })(),
-                        React.createElement("div", { "data-vibe-card-header-controls": "true", style: {
-                                position: "relative",
-                                zIndex: 1,
-                                marginLeft: "auto",
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 10,
-                                flexShrink: 0,
-                                maxWidth: "38%",
-                                minWidth: 0,
-                            } }, props.hideViewerTag ? null : props.handleSlug ? (React.createElement("div", { ref: pickerWrapRef, style: { position: "relative", minWidth: 0, maxWidth: "100%" } },
-                            React.createElement(ViewerTagView, { slug: props.handleSlug, displayName: `@${props.handleSlug}`, avatarUrl: props.handleAvatarUrl, editable: Boolean(props.onPickAvatar), onPickFile: props.onPickAvatar, onTagClick: pickerInteractive ? () => setPickerOpen(!pickerOpen) : undefined, tagExpanded: pickerOpen, tagLabel: "Account and handles", style: {
-                                    background: "var(--color-light-background-01, #eee)",
-                                    border: "1px solid var(--color-light-decorative-01, #ddd)",
-                                    color: "var(--color-light-primary, #333)",
-                                    fontSize: 13,
-                                    padding: "3px 8px 3px 4px",
-                                    minWidth: 0,
-                                    maxWidth: "100%",
-                                } }))) : props.viewerPending ? (React.createElement(ViewerTagView, { slug: "", pending: true })) : props.viewerNeedsHandle && !pickerInteractive ? (React.createElement(ViewerTagView, { slug: "", needsHandle: true, onChooseHandle: props.onChooseHandle })) : props.viewerNeedsHandle ? (React.createElement("div", { ref: pickerWrapRef },
-                            React.createElement(ViewerTagView, { slug: "?", displayName: "Account", onTagClick: () => setPickerOpen(!pickerOpen), tagExpanded: pickerOpen, tagLabel: "Account and handles" }))) : pickerInteractive ? (React.createElement("div", { ref: pickerWrapRef },
-                            React.createElement(ViewerTagView, { slug: "?", displayName: "Account", onTagClick: () => setPickerOpen(!pickerOpen), tagExpanded: pickerOpen, tagLabel: "Account and handles" }))) : (React.createElement(ViewerTagView, { slug: "?", anonymous: true, onSignIn: props.onSignIn })))),
-                    (() => {
-                        const wizardBanner = (props.publishWizardActive === true || props.publishWizardError === true) && props.onPublish;
-                        if (wizardBanner && props.selectedNav !== "share") {
-                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                                React.createElement(PublishBanner, { variant: props.publishState === "draft" || props.publishState === "old" ? props.publishState : undefined, onPublish: props.onPublish, publishing: props.publishing, wizardActive: props.publishWizardActive, wizardError: props.publishWizardError, escapeRevealed: props.publishEscapeRevealed, onPublishWithoutAccess: props.onPublishWithoutAccess, onRetryWizard: props.onRetryWizard })));
-                        }
-                        if (props.autoPublishError === true && props.selectedNav !== "share") {
-                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                                React.createElement(PublishBanner, { variant: undefined, autoPublishError: true, onRetryAutoPublish: props.onRetryAutoPublish })));
-                        }
-                        if (props.statusBanner && props.selectedNav !== "share") {
-                            return React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } }, props.statusBanner);
-                        }
-                        if (props.versionLocked === true && props.selectedNav !== "share") {
-                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                                React.createElement(PublishBanner, { variant: undefined, locked: true, onUnlock: props.onUnlock })));
-                        }
-                        if (props.signedOutSavePrompt && props.selectedNav !== "share") {
-                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                                React.createElement(SignedOutSavePrompt, { onSignIn: props.onSignIn })));
-                        }
-                        if (props.selectedNav === "share")
-                            return null;
-                        const hasPendingVersion = props.publishState === "draft" || props.publishState === "old";
-                        if (hasPendingVersion && Boolean(props.onPublish)) {
-                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                                React.createElement(PublishBanner, { variant: props.publishState === "draft" || props.publishState === "old" ? props.publishState : undefined, onPublish: props.onPublish, publishing: props.publishing })));
-                        }
-                        return null;
-                    })(),
-                    editorTabForRender != null && props.selectedNav !== "share" && !agentPanelActive && (React.createElement("div", { "data-vibe-card-editor-tabs": true, style: { padding: "0 14px 6px", flexShrink: 0 } },
-                        React.createElement(EditorTabStrip, { tab: editorTabForRender, disabledTabs: props.disabledEditorTabs, onTab: (t) => {
-                                if (props.disabledEditorTabs?.includes(t) === true)
-                                    return;
-                                props.onEditorTab?.(t);
-                            }, standing: {
-                                viewerMode: props.viewerMode,
-                                memberReadOnly: props.memberReadOnly,
-                                adminMode: props.adminMode,
-                                versionLocked: props.versionLocked,
-                                publishState: props.publishState,
-                                publishAccess: props.publishAccess,
-                            } }))),
-                    (props.body == null || editorTabDisabled) && props.composerControls && !agentPanelActive && (React.createElement("div", { "data-testid": "vibe-card-composer-controls", "aria-hidden": streamLive ? true : undefined, inert: streamLive ? true : undefined, style: {
-                            padding: "0 14px",
-                            marginBottom: 6,
-                            flexShrink: 0,
-                            ...(streamLive ? { visibility: "hidden" } : null),
-                        } }, props.composerControls)),
-                    React.createElement("div", { ref: scrollRegionRef, "data-testid": "vibe-card-scroll", "data-vibe-reading-surface": (props.body != null && editorTabDisabled === false) ||
-                            retainedEditorVisible ||
-                            agentPanelActive ||
-                            editorTabForRender === "standing"
-                            ? true
-                            : undefined, style: {
-                            padding: "0 14px 4px",
-                            overflowY: "auto",
-                            overflowX: "hidden",
-                            flex: "1 1 auto",
-                            minHeight: 0,
-                            ...((props.bodyFill && props.body) || agentPanelActive || props.body == null
-                                ? { display: "flex", flexDirection: "column" }
-                                : null),
-                        } },
-                        retainedEditorMounted && (React.createElement("div", { hidden: !retainedEditorVisible || agentPanelActive, inert: !retainedEditorVisible || agentPanelActive ? true : undefined, style: retainedEditorVisible && !agentPanelActive ? { flex: "1 1 auto", minHeight: 0 } : { display: "none" } }, props.retainedEditor)),
-                        agentPanelActive ? (React.createElement("div", { style: { flex: "1 1 auto", minHeight: 0 } }, props.agentPanel)) : retainedEditorVisible && props.retainedEditor != null ? null : editorTabForRender === "standing" ? (React.createElement(ViewerStandingView, { viewerMode: props.viewerMode, memberReadOnly: props.memberReadOnly, adminMode: props.adminMode, versionLocked: props.versionLocked, publishState: props.publishState, publishAccess: props.publishAccess, myGrant: props.myGrant, onToggleAdmin: props.onToggleAdmin, onUnlock: props.onUnlock })) : props.body != null && editorTabDisabled === false ? (props.bodyFill ? (React.createElement("div", { style: { flex: "1 1 auto", minHeight: 0 } }, props.body)) : (props.body)) : (React.createElement(React.Fragment, null,
-                            React.createElement("div", { ref: chipsRegionRef, style: {
-                                    flex: "1 0 auto",
-                                    minHeight: 0,
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    justifyContent: "flex-end",
-                                } },
-                                props.historyBody && (React.createElement("div", { "data-testid": "vibe-card-history", "data-vibe-reading-surface": true, "aria-hidden": props.streamBody ? true : undefined, inert: props.streamBody ? true : undefined, style: { marginBottom: 8, ...(props.streamBody ? { display: "none" } : null) } }, props.historyBody)),
-                                React.createElement("div", { "data-testid": "vibe-card-stream-region" },
-                                    props.streamBody && (React.createElement("div", { "data-testid": streamLive ? undefined : "vibe-card-stream-settled", "data-vibe-reading-surface": true, style: { marginBottom: 8 } },
-                                        props.streamBody,
-                                        props.liveDuringBuild === true && React.createElement(PendingMessages, { messages: queued }))),
-                                    React.createElement("div", { "aria-hidden": streamLive && !chipBuildLive ? true : undefined, inert: streamLive && !chipBuildLive ? true : undefined, style: streamLive && !chipBuildLive ? { display: "none" } : undefined }, (props.seedOffer || (visibleChips && visibleChips.length > 0)) && (React.createElement("div", { className: "mx-auto mt-2 w-full max-w-5xl" },
-                                        React.createElement(ChatMessageRow, { role: "ai", rowAttrs: { "data-message-role": "suggestions" } },
-                                            React.createElement("div", { className: "vibes-chip-well flex flex-col", "data-testid": "vibe-chip-set" },
-                                                props.seedOffer && (React.createElement("div", { className: "flex flex-col gap-[6px]", inert: props.activeChip !== undefined }, props.seedOffer)),
-                                                visibleChips && visibleChips.length > 0 && (React.createElement(OptionButtons, { options: visibleChips, activeOption: props.activeChip, inSet: true, isFirst: props.activeChip === undefined, firstMessage: props.viewerPending === true || props.isOwner === true
-                                                        ? "Suggested requests:"
-                                                        : "Describe a change to remix your own copy of this app:", onSelect: (o) => {
-                                                        const r = props.onSelectChip?.(o);
-                                                        return r && typeof r === "object" && "then" in r ? r.then((ok) => ok ?? false) : false;
-                                                    }, decorate: (option) => decorateChip(option, props) }))))))),
-                                    props.streamFooter !== undefined && React.createElement("div", { className: "mx-auto w-full max-w-5xl" }, props.streamFooter)))))),
-                    (props.body == null || editorTabDisabled) && !agentPanelActive && (React.createElement("div", { style: { flexShrink: 0, padding: "0 14px 10px" } },
-                        React.createElement(OtherRow, { value: draft, onValueChange: setDraft, queued: queued, onQueuedChange: setQueued, onSubmitOther: props.onSubmitOther, generating: props.generating, liveDuringBuild: props.liveDuringBuild, canSendNow: props.canSendNow, onStop: props.onStop, stopDisabled: props.stopDisabled, attachmentsCtl: attachmentsCtl })))),
-                agentPanelActive ? (React.createElement("div", { "aria-hidden": true, style: { display: "flex", flexShrink: 0, padding: "0 8px" } },
-                    React.createElement("div", { style: { width: 120, height: 50, marginLeft: "auto" } }))) : (React.createElement("div", { "data-vibe-card-nav": true, style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "var(--uvc-nav-gap, 6px)",
-                        padding: "0 8px",
-                        borderTop: "1px solid transparent",
-                        flexShrink: 0,
-                    } },
-                    React.createElement(NavIcon, { label: "Home", color: "var(--uvc-nav-home, #2563eb)", onClick: props.onHome, onLongPress: float.toggle },
-                        React.createElement("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
-                            React.createElement("path", { d: "M3 12l9-9 9 9" }),
-                            React.createElement("path", { d: "M5 10v10a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1V10" }))),
-                    React.createElement("span", { role: "status", className: "sr-only" }, float.status),
-                    React.createElement(NavIcon, { label: "Edit", color: "var(--uvc-nav-edit, #c2410c)", selected: ["edit", "edit-chat", "standing", "code", "files", "data", "style", "settings", "faq"].includes(props.selectedNav ?? "edit"), onClick: props.onEdit ?? props.onChat },
-                        React.createElement("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
-                            React.createElement("path", { d: "M12 20h9" }),
-                            React.createElement("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" }))),
-                    React.createElement(NavIcon, { label: "Share", color: "var(--uvc-nav-share, #15803d)", selected: props.selectedNav === "share", onClick: props.onShare, buttonRef: props.shareButtonRef, badgeCount: props.pendingRequestCount ?? 0 },
-                        React.createElement(PeopleIcon, null)),
-                    React.createElement("div", { "aria-hidden": true, style: { width: 120, height: 50, flexShrink: 0, marginLeft: "auto" } })))))),
-        open && pickerInteractive && pickerOpen && (React.createElement("div", { ref: menuRef, "data-vibe-handle-menu": true, className: "text-light-primary dark:text-dark-primary", style: {
-                position: "fixed",
-                top: `calc(${SAFE_AREA_TOP} + 16px)`,
-                right: 3,
-                zIndex: 4,
-                pointerEvents: "auto",
-            } }, React.createElement(HandlePickerMenu, { handles: props.handles ?? [], activeSlug: props.handleSlug, busy: props.handlePickerBusy, header: creditsEnabled ? (React.createElement("div", { style: { padding: 8 } },
-                React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
-                    React.createElement(CreditsRingView, { remaining: props.credits?.remaining, grantIncluded: props.credits?.grantIncluded, loading: props.credits?.loading, expanded: creditsOpen, onClick: () => setCreditsOpen(!creditsOpen) }),
-                    React.createElement("span", null, "Credits")),
-                creditsOpen && (React.createElement(CreditsDetailMenu, { plan: props.credits?.plan, remaining: props.credits?.remaining, grantRemaining: props.credits?.grantRemaining, grantIncluded: props.credits?.grantIncluded, grantResetsAt: props.credits?.grantResetsAt, purchasedRemaining: props.credits?.purchasedRemaining, loading: props.credits?.loading, style: {
-                        position: "static",
-                        right: "auto",
-                        top: "auto",
-                        bottom: "auto",
-                        width: "100%",
-                        minWidth: 0,
-                        boxShadow: "none",
-                        border: "none",
-                        padding: 0,
-                    }, onManage: props.onManageCredits
-                        ? () => {
-                            props.onManageCredits?.();
-                            setCreditsOpen(false);
-                        }
-                        : undefined })))) : undefined, onSignIn: props.onSignIn, onChooseHandle: props.viewerNeedsHandle ? props.onChooseHandle : undefined, onSettings: props.onAccountSettings
-                ? () => {
-                    props.onAccountSettings?.();
-                    setPickerOpen(false);
-                }
-                : undefined, onMyVibes: props.onMyVibes
-                ? () => {
-                    props.onMyVibes?.();
-                    setPickerOpen(false);
-                }
-                : undefined, onMemberships: props.onMemberships
-                ? () => {
-                    props.onMemberships?.();
-                    setPickerOpen(false);
-                }
-                : undefined, style: { position: "static", right: "auto", top: "auto", bottom: "auto" }, onSelect: (slug) => {
-                props.onSelectHandle?.(slug);
-                setPickerOpen(false);
-            }, onNewHandle: props.onNewHandle
-                ? (handle) => {
-                    props.onNewHandle?.(handle);
-                    setPickerOpen(false);
-                }
-                : undefined, onLogout: props.onLogout
-                ? () => {
-                    props.onLogout?.();
-                    setPickerOpen(false);
-                }
-                : undefined }))),
-        !hidden && (React.createElement("div", { ref: switchWrapRef, style: {
-                position: "absolute",
-                right: 2,
-                bottom: 7,
-                zIndex: 3,
-                pointerEvents: "auto",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: 22,
-            } },
-            !open && props.versionLocked && (React.createElement("button", { type: "button", "data-testid": "locked-chiclet", "aria-label": "Version locked \u2014 new edits aren't live. Open the vibe menu to unlock.", title: "A version is locked as the live release \u2014 open the menu to unlock", onClick: () => setOpen(true), style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 4,
-                    borderRadius: 999,
-                    padding: "2px 9px",
-                    fontSize: 11,
-                    fontWeight: 600,
-                    lineHeight: 1.4,
-                    color: "#92400e",
-                    background: "#fef5e7",
-                    border: "1px solid rgba(245,158,11,0.4)",
-                    boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
-                    whiteSpace: "nowrap",
-                    cursor: "pointer",
-                } },
-                React.createElement(LockGlyphSmall, null),
-                "Locked")),
-            !open && !props.versionLocked && (props.publishState === "draft" || props.onViewDraft !== undefined) && (React.createElement("button", { type: "button", "data-testid": "draft-chiclet", "aria-label": "Draft \u2014 not live yet. Open the vibe menu to update.", title: "Your latest changes aren't live yet \u2014 open the menu to update", onClick: () => setOpen(true), style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 4,
-                    borderRadius: 999,
-                    padding: "2px 9px",
-                    fontSize: 11,
-                    fontWeight: 600,
-                    lineHeight: 1.4,
-                    color: "#92400e",
-                    background: "#fef5e7",
-                    border: "1px solid rgba(245,158,11,0.4)",
-                    boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
-                    whiteSpace: "nowrap",
-                    cursor: "pointer",
-                } },
-                React.createElement("span", { "aria-hidden": true, style: { width: 6, height: 6, borderRadius: "50%", background: "#f59e0b" } }),
-                "draft")),
-            React.createElement("button", { type: "button", "data-vibe-switch-glass": true, "aria-label": open
-                    ? "Close vibe menu"
-                    : (props.pendingRequestCount ?? 0) > 0
-                        ?
-                            `Open vibe menu (${props.pendingRequestCount} pending access request${props.pendingRequestCount === 1 ? "" : "s"})`
-                        : "Open vibe menu", onClick: () => setOpen(!open), onPointerDown: onSwitchPointerDown, onPointerMove: onSwitchPointerMove, onPointerUp: cancelHidePress, onPointerLeave: cancelHidePress, onPointerCancel: cancelHidePress, title: "Hold to hide the vibe controls", style: {
-                    display: "block",
-                    background: "none",
-                    border: "none",
-                    padding: 0,
-                    cursor: "pointer",
-                    width: 120,
-                    height: 44,
-                    position: "relative",
-                    overflow: "visible",
-                } },
-                switchGlassColor !== ovalColors.neutral && (React.createElement(React.Fragment, { key: `${switchGlassColor}|${props.switchOvalStatusKey ?? ""}` },
-                    React.createElement("span", { "data-vibe-switch-rest": true, "aria-hidden": "true" }),
-                    React.createElement("span", { "data-vibe-switch-highlight": true, "data-testid": "vibe-switch-highlight", "data-arrival-amber": switchGlassColor === ovalColors.yellow, "aria-hidden": "true", style: { color: switchGlassColor } }))),
-                React.createElement(VibesSwitch, { size: 60, style: { position: "absolute", right: 0, bottom: 0, pointerEvents: "none" }, isActive: !open, isTwinkling: !open && isTwinkling, isTeasing: !open && isTeasing }),
-                !open && (props.pendingRequestCount ?? 0) > 0 && (React.createElement("span", { "data-testid": "vibe-switch-pending-badge", "aria-hidden": "true", style: {
-                        position: "absolute",
-                        top: -4,
-                        right: -4,
-                        minWidth: 18,
-                        height: 18,
-                        padding: "0 5px",
-                        boxSizing: "border-box",
-                        borderRadius: 9999,
-                        background: "var(--vibes-near-black, #1a1a1a)",
-                        color: "#fff",
-                        border: "1px solid #fff",
-                        fontSize: 11,
-                        lineHeight: "16px",
-                        fontWeight: 700,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        pointerEvents: "none",
-                    } }, (props.pendingRequestCount ?? 0) > 9 ? "9+" : String(props.pendingRequestCount)))))),
-        hidden && (React.createElement("button", { type: "button", "data-testid": "vibe-controls-restore", "aria-label": "Show vibe controls", title: "Show vibe controls", onPointerDown: () => {
-                restorePressed.current = true;
-            }, onClick: (e) => {
-                const keyboard = e.detail === 0;
-                if (!restorePressed.current && !keyboard)
-                    return;
-                restorePressed.current = false;
-                setHidden(false);
-            }, style: {
-                position: "absolute",
-                right: 16,
-                bottom: 24,
-                zIndex: 3,
-                pointerEvents: "auto",
-                width: 24,
-                height: 24,
-                borderRadius: "50%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: 0,
-                cursor: "pointer",
-                opacity: 0.35,
-                background: "rgba(0,0,0,0.28)",
-                border: "1px solid rgba(255,255,255,0.35)",
-                boxShadow: "0 1px 3px rgba(0,0,0,0.25)",
-            } },
-            React.createElement("span", { "aria-hidden": true, style: { width: 5, height: 5, borderRadius: "50%", background: "rgba(255,255,255,0.9)" } })))));
-}
-function LockGlyphSmall() {
-    return (React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: 11, height: 11, fill: "none", stroke: "currentColor", strokeWidth: 2.4, strokeLinecap: "round", strokeLinejoin: "round", style: { display: "block" } },
-        React.createElement("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
-        React.createElement("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })));
-}
-function LockedBadge() {
-    return (React.createElement("span", { role: "status", "aria-label": "Version locked \u2014 new edits aren't live", title: "A version is locked as the live release \u2014 new edits won't go live until you unlock", style: {
-            flexShrink: 0,
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 4,
-            borderRadius: 999,
-            padding: "2px 8px",
-            fontSize: 11,
-            fontWeight: 600,
-            lineHeight: 1.4,
-            color: "var(--uvc-amber-text, #92400e)",
-            background: "rgba(245,158,11,0.14)",
-            border: "1px solid rgba(245,158,11,0.45)",
-            whiteSpace: "nowrap",
-        } },
-        React.createElement(LockGlyphSmall, null),
-        "Locked"));
-}
-function DraftBadge({ variant }) {
-    const draft = variant === "draft";
-    return (React.createElement("span", { role: "status", "aria-label": draft ? "Draft — not live yet" : "Older version — not the published one", title: draft ? "You're viewing a draft that isn't live yet" : "You're viewing a version that isn't the published one", style: {
-            flexShrink: 0,
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 4,
-            borderRadius: 999,
-            padding: "2px 8px",
-            fontSize: 11,
-            fontWeight: 600,
-            lineHeight: 1.4,
-            color: "var(--uvc-amber-text, #92400e)",
-            background: "rgba(245,158,11,0.14)",
-            border: "1px solid rgba(245,158,11,0.45)",
-            whiteSpace: "nowrap",
-        } },
-        React.createElement("span", { "aria-hidden": true, style: { width: 6, height: 6, borderRadius: "50%", background: "#f59e0b" } }),
-        draft ? "Draft" : "Older version"));
-}
-function ViewDraftBadge({ onClick }) {
-    return (React.createElement("button", { type: "button", "aria-label": "Newer draft available \u2014 view it", title: "You have a draft that isn't live yet \u2014 click to view it", onClick: onClick, style: {
-            flexShrink: 0,
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 4,
-            borderRadius: 999,
-            padding: "2px 8px",
-            fontSize: 11,
-            fontWeight: 600,
-            lineHeight: 1.4,
-            color: "var(--uvc-amber-text, #92400e)",
-            background: "rgba(245,158,11,0.14)",
-            border: "1px solid rgba(245,158,11,0.45)",
-            whiteSpace: "nowrap",
-            cursor: "pointer",
-        } },
-        React.createElement("span", { "aria-hidden": true, style: { width: 6, height: 6, borderRadius: "50%", background: "#f59e0b" } }),
-        "Draft \u00B7 view"));
-}
-function decorateChip(option, props) {
-    const fp = props.chipFastPaths?.[option];
-    if (!fp)
-        return undefined;
-    if (fp.jump)
-        return { tone: "gold", leading: React.createElement(ChipJumpBadge, null) };
-    const badge = fp.shielded ? React.createElement(ChipShieldBadge, null) : undefined;
-    const aside = fp.canUnbless && props.onUnblessChip ? (React.createElement(FastPathToggle, { blessed: true, onClick: () => props.onUnblessChip?.(option) })) : fp.canBless && props.onBlessChip ? (React.createElement(FastPathToggle, { onClick: () => props.onBlessChip?.(option) })) : undefined;
-    return badge || aside ? { badge, aside } : undefined;
-}
-function ChipJumpBadge() {
-    return (React.createElement("span", { role: "img", "aria-label": "Opens another app", title: "Instant curated jump \u2014 opens another app (no sign-in)", className: "inline-flex shrink-0 text-amber-500 dark:text-amber-300" },
-        React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
-            React.createElement("path", { d: "M5 12h14" }),
-            React.createElement("path", { d: "M13 6l6 6-6 6" }))));
-}
-function ChipShieldBadge() {
-    return (React.createElement("span", { role: "img", "aria-label": "Stays here", title: "Featured fast path \u2014 clicking stays here, on the same data", style: { display: "inline-flex", flexShrink: 0, color: "#16a34a" } },
-        React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
-            React.createElement("path", { d: "M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" }))));
-}
-function FastPathToggle({ blessed, onClick }) {
-    const label = blessed ? "Remove fast path (unbless)" : "Feature as fast path (bless)";
-    return (React.createElement("button", { type: "button", "aria-label": label, title: label, "aria-pressed": Boolean(blessed), onClick: onClick, className: "shrink-0 rounded-md border px-2 py-1.5 text-xs font-semibold transition-colors", style: {
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 4,
-            cursor: "pointer",
-            whiteSpace: "nowrap",
-            ...(blessed
-                ? { color: "#15803d", background: "rgba(22,163,74,0.12)", borderColor: "rgba(22,163,74,0.5)" }
-                : {
-                    color: "var(--color-light-primary, #333)",
-                    background: "var(--color-light-background-01, #eee)",
-                    borderColor: "var(--color-light-decorative-01, #ddd)",
-                }),
-        } },
-        React.createElement("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: blessed ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
-            React.createElement("path", { d: "M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" })),
-        React.createElement("span", null, blessed ? "Featured" : "Feature")));
-}
-function NavIcon({ label, color, selected, onClick, onLongPress, buttonRef, badgeCount, children, }) {
-    const press = useHomeMotionPress({ onHome: () => onClick?.(), onLongPress });
-    const showBadge = typeof badgeCount === "number" && badgeCount > 0;
-    const badgeText = showBadge ? (badgeCount > 99 ? "99+" : String(badgeCount)) : "";
-    return (React.createElement("button", { ref: buttonRef, type: "button", "aria-label": showBadge ? `${label} (${badgeCount})` : label, title: onLongPress === undefined ? label : "Home · Hold and release to toggle Float (Alt+Enter)", "data-vibe-nav-selected": selected === true, ...press, style: {
-            position: "relative",
-            width: "var(--uvc-nav-size, 38px)",
-            height: "var(--uvc-nav-size, 38px)",
-            flexShrink: 0,
-            boxSizing: "border-box",
-            borderRadius: "50%",
-            background: "var(--uvc-nav-fill)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            color,
-            fontSize: 16,
-            cursor: "pointer",
-            border: selected ? "var(--uvc-nav-selected-width) solid currentColor" : "1px solid var(--uvc-nav-border)",
-            boxShadow: selected ? "var(--uvc-nav-selected-shadow)" : "none",
-        } },
-        children,
-        showBadge ? (React.createElement("span", { "aria-hidden": "true", style: {
-                position: "absolute",
-                top: -4,
-                right: -4,
-                minWidth: 16,
-                height: 16,
-                padding: "0 4px",
-                boxSizing: "border-box",
-                borderRadius: 9999,
-                background: "var(--vibes-near-black, #1a1a1a)",
-                color: "#fff",
-                border: "1px solid #fff",
-                fontSize: 10,
-                lineHeight: "14px",
-                fontWeight: 700,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            } }, badgeText)) : null));
-}
-function PendingMessages({ messages }) {
-    if (messages.length === 0)
-        return null;
-    return (React.createElement("div", { role: "status", "data-testid": "pending-messages", style: {
-            flexShrink: 0,
-            padding: "6px 0 2px",
-            display: "flex",
-            flexDirection: "column",
-            gap: 6,
-            fontFamily: "var(--font-serif, Georgia, serif)",
-        } },
-        messages.map((message, i) => (React.createElement("div", { key: `${i}-${message}`, style: { display: "flex", justifyContent: "flex-end" } },
-            React.createElement("div", { className: "text-light-primary dark:text-dark-primary", style: {
-                    maxWidth: "85%",
-                    borderRadius: 10,
-                    background: "rgba(139,92,246,0.10)",
-                    border: "1px solid rgba(139,92,246,0.28)",
-                    padding: "6px 9px",
-                    fontSize: 13,
-                    lineHeight: 1.35,
-                    overflowWrap: "anywhere",
-                } }, message)))),
-        React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 11, textAlign: "right" } }, "sends when this build finishes")));
-}
-const QUEUE_FLUSH_RETRY_MS = 400;
-const QUEUE_FLUSH_MAX_ATTEMPTS = 25;
-const OTHER_ROW_BUTTON_STYLE = {
-    width: 30,
-    height: 30,
-    flexShrink: 0,
-    borderRadius: 8,
-    color: "#fff",
-    fontSize: 17,
-    fontWeight: "bold",
-    lineHeight: 1,
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-};
-function AutoGrowTextarea({ value, onValueChange, ariaLabel, }) {
-    const ref = useRef(null);
-    const measure = useCallback(() => {
-        const ta = ref.current;
-        if (ta === null)
-            return;
-        ta.style.height = "auto";
-        ta.style.height = `${Math.min(ta.scrollHeight, 120)}px`;
-    }, []);
-    useEffect(() => {
-        measure();
-    }, [value, measure]);
-    useEffect(() => {
-        const ta = ref.current;
-        if (ta === null || typeof ResizeObserver === "undefined")
-            return;
-        let lastWidth = ta.clientWidth;
-        const ro = new ResizeObserver(() => {
-            if (ta.clientWidth !== lastWidth) {
-                lastWidth = ta.clientWidth;
-                measure();
-            }
-        });
-        ro.observe(ta);
-        return () => ro.disconnect();
-    }, [measure]);
-    return (React.createElement("textarea", { ref: ref, value: value, rows: 1, onChange: (e) => onValueChange(e.target.value), onKeyDown: (e) => {
-            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.nativeEvent.keyCode !== 229) {
-                e.preventDefault();
-                e.currentTarget.form?.requestSubmit();
-            }
-        }, "aria-label": ariaLabel, className: "w-full bg-transparent text-sm text-light-primary dark:text-dark-primary outline-none", style: { resize: "none", overflowY: "auto", maxHeight: 120, fontSize: 15, lineHeight: "22px" } }));
-}
-function OtherRow({ value, onValueChange, queued, onQueuedChange, onSubmitOther, generating, liveDuringBuild, canSendNow, onStop, stopDisabled, attachmentsCtl, }) {
-    const showStop = Boolean(generating) && value.trim() === "";
-    const submitDisabled = attachmentsCtl.busy || (Boolean(generating) && attachmentsCtl.readyAttachments.length > 0);
-    const sendNow = liveDuringBuild === true && canSendNow === true && queued.length === 0 && attachmentsCtl.readyAttachments.length === 0;
-    const hasUnsentContent = value.trim() !== "" || attachmentsCtl.readyAttachments.length > 0;
-    const composerDrop = composerFileDrop({ onFiles: attachmentsCtl.add });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(AttachmentChips, { chips: attachmentsCtl.attachments, onRemove: attachmentsCtl.remove }),
-        React.createElement("form", { onDragOver: composerDrop.onDragOver, onDrop: composerDrop.onDrop, onSubmit: (e) => {
-                e.preventDefault();
-                const text = value.trim();
-                const files = attachmentsCtl.readyAttachments;
-                if (!text && files.length === 0)
-                    return;
-                if (attachmentsCtl.busy)
-                    return;
-                if (generating && !sendNow) {
-                    if (files.length > 0)
-                        return;
-                    if (!text)
-                        return;
-                    onQueuedChange([...queued, text]);
-                }
-                else {
-                    const sent = onSubmitOther?.(text || (files.length === 1 ? "Use the attached file." : "Use the attached files."), files.length > 0 ? files : undefined);
-                    if (sent === false)
-                        return;
-                    attachmentsCtl.clear();
-                }
-                onValueChange("");
-            }, style: { display: "flex", flexDirection: "column", gap: 6, marginTop: 6, padding: "10px 10px 10px 12px" }, className: "vibes-edit-field" },
-            React.createElement("div", { "data-vibe-float-text": true, style: { position: "relative", minWidth: 0, display: "flex" } },
-                React.createElement(AutoGrowTextarea, { value: value, onValueChange: onValueChange, ariaLabel: "Change the app" }),
-                value === "" && (React.createElement("span", { "aria-hidden": true, className: "text-sm text-light-secondary dark:text-dark-secondary", style: {
-                        position: "absolute",
-                        left: 0,
-                        top: 0,
-                        bottom: 0,
-                        display: "flex",
-                        alignItems: "center",
-                        pointerEvents: "none",
-                        whiteSpace: "nowrap",
-                        color: "var(--uvc-helper-text, #4b5563)",
-                    } },
-                    "Change the app with ",
-                    React.createElement("s", { style: { margin: "0 0.25em" } }, "magic"),
-                    " words\u2026"))),
-            React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
-                React.createElement(AttachmentButton, { onFiles: attachmentsCtl.add }),
-                React.createElement("div", { style: { flex: 1 } }),
-                showStop ? (React.createElement("button", { type: "button", "aria-label": "Stop generating", disabled: stopDisabled, className: "vibes-edit-btn", onClick: () => {
-                        if (queued.length > 0) {
-                            onValueChange(queued.join("\n"));
-                            onQueuedChange([]);
-                        }
-                        onStop?.();
-                    }, style: { ...OTHER_ROW_BUTTON_STYLE, background: "var(--vibes-near-black, #1a1a1a)" } },
-                    React.createElement("span", { "aria-hidden": "true", style: { width: 10, height: 10, borderRadius: 2, background: "#fff", display: "block" } }))) : (React.createElement("button", { type: "submit", "aria-label": generating && !sendNow ? "Queue message" : "Submit change", disabled: submitDisabled, className: `vibes-edit-btn${hasUnsentContent && !submitDisabled ? " vibes-submit-pulse" : ""}`, title: Boolean(generating) && attachmentsCtl.readyAttachments.length > 0
-                        ? "Files send with the next change — wait for this one to finish"
-                        : generating && !sendNow
-                            ? "Sends when the current change finishes"
-                            : undefined, style: {
-                        ...OTHER_ROW_BUTTON_STYLE,
-                        background: "var(--uvc-submit-fill, rgba(64,89,114,.2))",
-                        color: "var(--uvc-submit-arrow, var(--vibes-cream, #fffff0))",
-                        boxShadow: "none",
-                        opacity: submitDisabled ? 0.5 : 1,
-                        cursor: submitDisabled ? "default" : "pointer",
-                    } },
-                    React.createElement("span", { "aria-hidden": "true" }, "\u2191"))))),
-        liveDuringBuild !== true && Boolean(generating) && queued.length > 0 && (React.createElement("div", { role: "status", className: "text-xs text-light-secondary dark:text-dark-secondary", style: { marginTop: 6, lineHeight: 1.4 } },
-            React.createElement("div", null,
-                queued.length === 1 ? "1 message queued" : `${queued.length} messages queued`,
-                " \u2014 sends when this one finishes (Stop returns it to the box)."),
-            React.createElement("ol", { style: {
-                    margin: "3px 0 0",
-                    padding: 0,
-                    listStyle: "none",
-                    maxHeight: 68,
-                    overflowY: "auto",
-                    overscrollBehavior: "contain",
-                } }, queued.map((message, i) => (React.createElement("li", { key: `${i}-${message}`, style: { display: "flex", gap: 5, marginTop: 1 } },
-                React.createElement("span", { "aria-hidden": "true", style: { opacity: 0.6 } },
-                    i + 1,
-                    "."),
-                React.createElement("span", { style: { minWidth: 0, overflowWrap: "anywhere" } }, message)))))))));
-}
-//# sourceMappingURL=UnifiedVibeCard.js.map