@mova-ui/react 0.4.7 → 0.4.8

package/dist/index.js

@@ -4135,7 +4135,7 @@ function AnimatedSidebar({
             "data-open": isSectionOpen,
             id: sectionId,
             children: /* @__PURE__ */ jsx12("div", { className: "mova-sidebar__section-content-inner", children: /* @__PURE__ */ jsx12("ul", { className: "mova-sidebar__list", children: SIDEBAR_ITEMS.map((item) => {
-              const Icon2 = item.icon;
+              const Icon3 = item.icon;
               const isActive = activeItem === item.id;
               return /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs12(
                 "button",
@@ -4148,7 +4148,7 @@ function AnimatedSidebar({
                   tabIndex: isSectionOpen ? 0 : -1,
                   type: "button",
                   children: [
-                    /* @__PURE__ */ jsx12("span", { className: "mova-sidebar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(Icon2, { size: 17, strokeWidth: 1.8 }) }),
+                    /* @__PURE__ */ jsx12("span", { className: "mova-sidebar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(Icon3, { size: 17, strokeWidth: 1.8 }) }),
                     /* @__PURE__ */ jsxs12("span", { className: "mova-sidebar__item-copy", children: [
                       /* @__PURE__ */ jsx12("span", { className: "mova-sidebar__item-label", children: item.label }),
                       /* @__PURE__ */ jsx12("span", { className: "mova-sidebar__item-meta", children: item.meta })
@@ -4174,163 +4174,619 @@ function AnimatedSidebar({
 
 // .generated/ui/cards/balance-bar-chart-card.tsx
 import * as React from "react";
-import { ArrowDownRight, ArrowUpRight } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var periodsDefault = [
-  { id: "week", label: "Week", balance: 12480.5, change: "+8.2%", detail: "+ $940.20 this week", points: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((label, i) => ({ label, value: [640, 920, 760, 1180, 960, 1380, 1140][i] })) },
-  { id: "month", label: "Month", balance: 12480.5, change: "+12.8%", detail: "+ $1,416.23 this month", points: ["1\u20134", "5\u20138", "9\u201312", "13\u201316", "17\u201320", "21\u201324", "25\u201331"].map((label, i) => ({ label, value: [2800, 3400, 2100, 3900, 3200, 4600, 5100][i] })) },
-  { id: "year", label: "Year", balance: 12480.5, change: "+24.6%", detail: "+ $2,464.05 this year", points: ["Jan", "Mar", "May", "Jul", "Sep", "Nov", "Dec"].map((label, i) => ({ label, value: [5200, 6800, 6100, 8400, 9200, 11400, 12480][i] })) }
+  { id: "week", label: "Week", balance: 12480.5, change: "+8.2%", detail: "+$940.20 this week", points: ["M", "T", "W", "T", "F", "S", "S"].map((label, i) => ({ label, value: [96, 142, 88, 210, 175, 120, 109][i] })) },
+  { id: "month", label: "Month", balance: 12480.5, change: "+12.4%", detail: "+$4,220.60 this month", points: ["1", "5", "10", "15", "20", "25", "30"].map((label, i) => ({ label, value: [420, 610, 380, 720, 560, 890, 640][i] })) },
+  { id: "year", label: "Year", balance: 12480.5, change: "+18.6%", detail: "+$32,520.00 this year", points: ["Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"].map((label, i) => ({ label, value: [3120, 4210, 3680, 5020, 4460, 5890, 6140][i] })) }
 ];
+var useLayoutEffect6 = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function SoftText({ text, className = "" }) {
+  const element = React.useRef(null);
+  const initial = React.useRef(text);
+  useLayoutEffect6(() => {
+    const el = element.current;
+    if (!el) return;
+    const previous = el.dataset.text ?? initial.current;
+    if (previous === text) return;
+    el.dataset.text = text;
+    const width = el.getBoundingClientRect().width;
+    const old = document.createElement("span");
+    old.className = "mbc-soft-old";
+    old.setAttribute("aria-hidden", "true");
+    old.textContent = previous;
+    const next = document.createElement("span");
+    next.className = "mbc-soft-new";
+    next.textContent = text;
+    el.classList.remove("is-swapping");
+    el.replaceChildren(old, next);
+    const nextWidth = next.getBoundingClientRect().width;
+    el.style.width = `${width}px`;
+    void el.offsetWidth;
+    el.classList.add("is-swapping");
+    el.style.width = `${nextWidth}px`;
+    const computed = getComputedStyle(el);
+    const duration = Math.max(parseFloat(computed.getPropertyValue("--mbc-text-dur")) || 0, parseFloat(computed.getPropertyValue("--mbc-text-resize-dur")) || 0);
+    const timer = window.setTimeout(() => {
+      el.classList.remove("is-swapping");
+      el.style.removeProperty("width");
+      el.textContent = text;
+    }, duration + 40);
+    return () => window.clearTimeout(timer);
+  }, [text]);
+  return /* @__PURE__ */ jsx13("span", { ref: element, className: `mbc-soft ${className}`, children: initial.current });
+}
 function BalanceBarChartCard({ periods = periodsDefault, defaultPeriod = "week", currency = "USD", locale = "en-US", onPeriodChange, theme = "light", className = "", style } = {}) {
   const [selected, setSelected] = React.useState(defaultPeriod);
   const [active, setActive] = React.useState(null);
+  const root = React.useRef(null);
+  const chart = React.useRef(null);
+  const tooltip = React.useRef(null);
+  const tooltipText = React.useRef(null);
+  const tabs = React.useRef(null);
+  const pill = React.useRef(null);
+  const measuredPill = React.useRef(false);
+  const lastTooltip = React.useRef("");
+  const tipId = React.useId();
+  const chartId = React.useId();
   const period = periods.find((item) => item.id === selected) ?? periods[0];
-  const money = new Intl.NumberFormat(locale, { style: "currency", currency });
+  const periodIndex = period ? periods.indexOf(period) : -1;
+  const money2 = new Intl.NumberFormat(locale, { style: "currency", currency });
+  const pointMoney = new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 0, maximumFractionDigits: 2 });
+  const amountParts = money2.formatToParts(period?.balance ?? 0);
   const max = Math.max(1, ...period?.points.map((point) => Math.abs(point.value)) ?? []);
-  const tipId = React.useId();
   const signed = period?.points.some((point) => point.value < 0) ?? false;
   const negativeChange = period?.change.trim().startsWith("-");
-  return /* @__PURE__ */ jsxs13("section", { className: `mova-balance ${className}`, "data-theme": theme, style, "aria-label": "Balance chart", children: [
+  const detail = /^(.*?)(\$[\d,.]+)(\s+this\s+)(.+)$/.exec(period?.detail ?? "");
+  if (active !== null && period?.points[active]) lastTooltip.current = pointMoney.format(period.points[active].value);
+  useLayoutEffect6(() => {
+    const tip = tooltip.current;
+    if (!tip) return;
+    const trigger = chart.current?.querySelectorAll(".mbc-column")[active ?? -1];
+    if (active === null || !trigger || !chart.current || !tooltipText.current) {
+      tip.dataset.show = "false";
+      tip.setAttribute("aria-hidden", "true");
+      return;
+    }
+    const showing = tip.dataset.show === "true";
+    const computed = getComputedStyle(tip);
+    const width = Math.ceil(tooltipText.current.scrollWidth + parseFloat(computed.paddingLeft) + parseFloat(computed.paddingRight));
+    const groupRect = chart.current.getBoundingClientRect();
+    const rect = trigger.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.left - groupRect.left + rect.width / 2 - width / 2, groupRect.width - width));
+    if (!showing) tip.style.transition = "none";
+    tip.style.width = `${width}px`;
+    tip.style.setProperty("--mbc-tip-x", `${x}px`);
+    if (!showing) {
+      void tip.offsetWidth;
+      tip.style.transition = "";
+    }
+    tip.dataset.show = "true";
+    tip.setAttribute("aria-hidden", "false");
+  }, [active, period, currency, locale]);
+  const movePill = React.useCallback((animate) => {
+    const tab = tabs.current?.querySelector('[role=tab][aria-selected="true"]');
+    const el = pill.current;
+    if (!tab || !el) return;
+    if (!animate) el.style.transition = "none";
+    el.style.transform = `translateX(${tab.offsetLeft}px)`;
+    el.style.width = `${tab.offsetWidth}px`;
+    if (!animate) {
+      void el.offsetWidth;
+      el.style.transition = "";
+    }
+  }, []);
+  useLayoutEffect6(() => {
+    movePill(measuredPill.current);
+    measuredPill.current = true;
+  }, [movePill, periodIndex, periods]);
+  useLayoutEffect6(() => {
+    const resize = () => movePill(false);
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(resize) : void 0;
+    if (tabs.current) observer?.observe(tabs.current);
+    window.addEventListener("resize", resize);
+    let cancelled = false;
+    document.fonts?.ready.then(() => {
+      if (!cancelled) movePill(false);
+    });
+    return () => {
+      cancelled = true;
+      observer?.disconnect();
+      window.removeEventListener("resize", resize);
+    };
+  }, []);
+  React.useEffect(() => {
+    const el = root.current;
+    if (!el) return;
+    let pressed = null;
+    let started = 0;
+    let timer;
+    const clear = () => {
+      if (pressed) delete pressed.dataset.pressed;
+      pressed = null;
+    };
+    const down = (event) => {
+      if (event.pointerType === "mouse") return;
+      const button = event.target.closest("button");
+      if (!button || button.disabled) return;
+      clearTimeout(timer);
+      clear();
+      pressed = button;
+      started = performance.now();
+      button.dataset.pressed = "true";
+    };
+    const up = () => {
+      if (!pressed) return;
+      const duration = parseFloat(getComputedStyle(pressed).getPropertyValue("--mbc-press-dur")) || 150;
+      timer = setTimeout(clear, Math.max(0, duration - (performance.now() - started)));
+    };
+    el.addEventListener("pointerdown", down);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+    return () => {
+      clearTimeout(timer);
+      clear();
+      el.removeEventListener("pointerdown", down);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+    };
+  }, []);
+  function selectPeriod(item) {
+    if (period?.id === item.id) return;
+    setSelected(item.id);
+    setActive(null);
+    onPeriodChange?.(item);
+  }
+  return /* @__PURE__ */ jsxs13("section", { ref: root, className: `mova-balance ${className}`, "data-theme": theme, style, "aria-label": "Balance chart", children: [
     /* @__PURE__ */ jsx13("style", { children: css }),
     /* @__PURE__ */ jsx13("div", { className: "mbc-label", children: "Balance" }),
-    /* @__PURE__ */ jsxs13("div", { className: "mbc-summary", children: [
-      /* @__PURE__ */ jsx13("strong", { children: money.format(period?.balance ?? 0) }),
-      period && /* @__PURE__ */ jsxs13("span", { className: "mbc-change", "data-negative": negativeChange, children: [
-        negativeChange ? /* @__PURE__ */ jsx13(ArrowDownRight, { size: 11, "aria-hidden": "true" }) : /* @__PURE__ */ jsx13(ArrowUpRight, { size: 11, "aria-hidden": "true" }),
-        period.change
-      ] })
+    /* @__PURE__ */ jsx13("div", { className: "mbc-summary", children: amountParts.map((part, index) => /* @__PURE__ */ jsx13("span", { className: part.type === "decimal" || part.type === "fraction" ? "mbc-cents" : void 0, children: part.value }, index)) }),
+    /* @__PURE__ */ jsxs13("div", { className: "mbc-change-row", children: [
+      period && /* @__PURE__ */ jsx13("span", { className: "mbc-change", "data-negative": negativeChange, children: /* @__PURE__ */ jsx13(SoftText, { text: period.change }) }),
+      /* @__PURE__ */ jsx13("span", { className: "mbc-detail", children: detail ? /* @__PURE__ */ jsxs13(Fragment7, { children: [
+        detail[1],
+        /* @__PURE__ */ jsx13(SoftText, { text: detail[2] }),
+        detail[3],
+        /* @__PURE__ */ jsx13(SoftText, { text: detail[4] })
+      ] }) : /* @__PURE__ */ jsx13(SoftText, { text: period?.detail ?? "No balance data" }) })
     ] }),
-    /* @__PURE__ */ jsx13("p", { className: "mbc-detail", children: period?.detail ?? "No balance data" }),
-    /* @__PURE__ */ jsxs13("div", { className: "mbc-chart", onMouseLeave: () => setActive(null), children: [
-      period?.points.map((point, index) => /* @__PURE__ */ jsxs13("button", { type: "button", className: "mbc-column", "aria-label": `${point.label}: ${money.format(point.value)}`, "aria-describedby": active === index ? tipId : void 0, onFocus: () => setActive(index), onBlur: () => setActive(null), onMouseEnter: () => setActive(index), onClick: () => setActive(index), "data-active": active === index || active === null && index === period.points.length - 1, children: [
-        /* @__PURE__ */ jsx13("span", { className: "mbc-track", "data-signed": signed, children: /* @__PURE__ */ jsx13("span", { className: "mbc-bar", style: { height: `${Math.max(1, Math.abs(point.value) / max * (signed ? 50 : 100))}%`, ...signed ? point.value < 0 ? { top: "50%", bottom: "auto", borderRadius: "0 0 3px 3px" } : { bottom: "50%" } : {} } }) }),
-        /* @__PURE__ */ jsx13("span", { className: "mbc-axis", children: period.id === "week" ? point.label[0] : point.label })
-      ] }, `${period.id}-${index}`)),
-      active !== null && period?.points[active] && /* @__PURE__ */ jsxs13("div", { id: tipId, role: "tooltip", className: "mbc-tooltip", children: [
-        period.points[active].label,
-        " \xB7 ",
-        money.format(period.points[active].value)
-      ] })
+    /* @__PURE__ */ jsxs13("div", { ref: chart, id: chartId, className: "mbc-chart", role: "tabpanel", "aria-label": period?.label ?? "Balance data", onPointerLeave: () => setActive(null), children: [
+      period?.points.map((point, index) => /* @__PURE__ */ jsxs13("button", { type: "button", className: "mbc-column", "aria-label": `${point.label}: ${money2.format(point.value)}`, "aria-describedby": active === index ? tipId : void 0, onFocus: () => setActive(index), onBlur: () => setActive(null), onPointerEnter: () => setActive(index), onClick: () => setActive(index), "data-current": index === period.points.length - 1, children: [
+        /* @__PURE__ */ jsx13("span", { className: "mbc-track", "data-signed": signed, children: /* @__PURE__ */ jsx13("span", { className: "mbc-bar", style: { height: `${Math.max(4, Math.round(Math.abs(point.value) / max * (signed ? 56 : 72)))}px`, ...signed ? point.value < 0 ? { top: "50%", bottom: "auto", borderRadius: "0 0 2px 2px" } : { bottom: "50%" } : {} } }) }),
+        /* @__PURE__ */ jsx13(SoftText, { className: "mbc-axis", text: point.label })
+      ] }, index)),
+      /* @__PURE__ */ jsx13("div", { ref: tooltip, id: tipId, role: "tooltip", className: "mbc-tooltip", "data-show": "false", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("span", { ref: tooltipText, children: lastTooltip.current }) })
     ] }),
-    /* @__PURE__ */ jsx13("div", { className: "mbc-periods", role: "group", "aria-label": "Chart period", children: periods.map((item) => /* @__PURE__ */ jsx13("button", { type: "button", "aria-pressed": period?.id === item.id, onClick: () => {
-      setSelected(item.id);
-      setActive(null);
-      onPeriodChange?.(item);
-    }, children: item.label }, item.id)) })
+    /* @__PURE__ */ jsxs13("div", { ref: tabs, className: "mbc-periods", role: "tablist", "aria-label": "Chart period", children: [
+      /* @__PURE__ */ jsx13("span", { ref: pill, className: "mbc-period-pill", "aria-hidden": "true" }),
+      periods.map((item, index) => /* @__PURE__ */ jsx13("button", { type: "button", role: "tab", "aria-selected": period?.id === item.id, "aria-controls": chartId, tabIndex: period?.id === item.id ? 0 : -1, onClick: () => selectPeriod(item), onKeyDown: (event) => {
+        const next = event.key === "ArrowRight" ? (index + 1) % periods.length : event.key === "ArrowLeft" ? (index - 1 + periods.length) % periods.length : event.key === "Home" ? 0 : event.key === "End" ? periods.length - 1 : -1;
+        if (next < 0) return;
+        event.preventDefault();
+        selectPeriod(periods[next]);
+        tabs.current?.querySelectorAll("[role=tab]")[next]?.focus();
+      }, children: item.label }, item.id))
+    ] })
   ] });
 }
 var css = `
-.mova-balance{--mbc-bg:#fff;--mbc-fg:#202124;--mbc-muted:#737373;--mbc-bar:#e6e6e8;--mbc-chip:#f4f4f5;box-sizing:border-box;width:300px;max-width:100%;padding:24px;border-radius:24px;border:1px solid #88888818;background:var(--mbc-bg);color:var(--mbc-fg);font:400 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 8px 32px -4px #0000000c}.mova-balance[data-theme=dark]{--mbc-bg:#1d1d1d;--mbc-fg:#f2f2f2;--mbc-muted:#aaa;--mbc-bar:#3b3b3e;--mbc-chip:#29292b;color-scheme:dark}.mova-balance *{box-sizing:border-box}.mbc-label{font-size:13px;color:var(--mbc-muted)}.mbc-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}.mbc-summary>strong{font-size:28px;line-height:34px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}.mbc-change{display:inline-flex;align-items:center;background:#e5f6ed;color:#267151;font-size:10px;line-height:17px;padding:0 5px;border-radius:20px}.mova-balance[data-theme=dark] .mbc-change{background:#243d31;color:#8bd8b0}.mbc-detail{margin:4px 0 0;color:var(--mbc-muted);font-size:12px}.mbc-chart{display:flex;position:relative;gap:8px;margin-top:24px}.mova-balance button{border:0;font:inherit;cursor:pointer;color:inherit}.mova-balance button:focus-visible{outline:2px solid #7e9be9;outline-offset:3px}.mbc-column{background:transparent;min-width:0;flex:1;padding:0 0 4px;display:flex;flex-direction:column;gap:8px;align-items:center;border-radius:4px}.mbc-track{position:relative;height:112px;width:100%;display:flex;align-items:flex-end;justify-content:center}.mbc-track[data-signed=true]:after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#8885}.mbc-track[data-signed=true] .mbc-bar{position:absolute}.mbc-change[data-negative=true]{background:#fbe9e9;color:#ad3c3c}.mova-balance[data-theme=dark] .mbc-change[data-negative=true]{background:#4c2b2b;color:#ffaaaa}.mbc-bar{width:100%;max-width:24px;border-radius:3px 3px 0 0;background:var(--mbc-bar);transform-origin:bottom;animation:mbc-rise 350ms ease-out;transition:height 250ms,background 150ms}.mbc-column[data-active=true] .mbc-bar{background:var(--mbc-fg)}.mbc-axis{font-size:10px;line-height:16px;color:var(--mbc-muted)}.mbc-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--mbc-fg);color:var(--mbc-bg);padding:4px 8px;border-radius:7px;max-width:100%;width:max-content;overflow-wrap:anywhere;text-align:center;font-size:11px;pointer-events:none}.mbc-periods{display:flex;gap:4px;background:var(--mbc-chip);padding:4px;border-radius:24px;margin-top:20px}.mbc-periods button{background:transparent;flex:1;min-width:0;overflow-wrap:anywhere;padding:6px 4px;border-radius:20px;font-size:12px;color:var(--mbc-muted);transition:background 180ms,color 180ms}.mbc-periods button[aria-pressed=true]{color:var(--mbc-fg);background:var(--mbc-bg);box-shadow:0 1px 3px #00000012}@keyframes mbc-rise{from{transform:scaleY(.05);opacity:.4}to{transform:scaleY(1);opacity:1}}@media(prefers-reduced-motion:reduce){.mova-balance *{animation:none!important;transition:none!important}}
+.mova-balance{--mbc-bg:#fff;--mbc-fg:#0d0d0d;--mbc-muted:#6c6c6c;--mbc-bar:rgba(28,95,251,.14);--mbc-bar-hover:rgba(28,95,251,.26);--mbc-bar-current:#1c5ffb;--mbc-chip:rgba(0,0,0,.04);--mbc-pill:#fff;--mbc-tip-bg:#fff;--mbc-tip-fg:#2f2f2f;--mbc-fill:#e7f9f3;--mbc-ink:#216e55;--mbc-ease:cubic-bezier(.22,1,.36,1);--mbc-press-dur:150ms;--mbc-chart-dur:400ms;--mbc-text-dur:200ms;--mbc-text-resize-dur:240ms;--mbc-tabs-dur:250ms;box-sizing:border-box;width:300px;max-width:100%;padding:24px;border-radius:24px;background:var(--mbc-bg);color:var(--mbc-fg);font:400 13px/20px 'Inter Variable',Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px #0000000a,0 8px 32px -4px #0000000f,0 1px 3px #0000000a}
+.mova-balance[data-theme=dark]{--mbc-bg:#1d1d1d;--mbc-fg:#f2f2f2;--mbc-muted:rgba(202,202,202,.7);--mbc-bar:rgba(92,140,255,.22);--mbc-bar-hover:rgba(92,140,255,.36);--mbc-bar-current:#5c8cff;--mbc-chip:rgba(255,255,255,.07);--mbc-pill:rgba(255,255,255,.12);--mbc-tip-bg:#262626;--mbc-tip-fg:#f2f2f2;--mbc-fill:#12291f;--mbc-ink:#6fd3a8;color-scheme:dark;box-shadow:0 0 0 1px #ffffff0f,0 8px 32px -4px #0000004d,0 1px 3px #0003}
+.mova-balance *{box-sizing:border-box}.mova-balance button{font:inherit;letter-spacing:inherit;margin:0;border:0;padding:0;background:none;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;transition:transform var(--mbc-press-dur) var(--mbc-ease)}.mova-balance button:is(:active,[data-pressed=true]){transform:scale(.97)}.mova-balance button:focus{outline:none}.mova-balance button:focus-visible{box-shadow:0 0 0 2px var(--mbc-bg),0 0 0 4px var(--mbc-fg)}
+.mbc-label{font-size:13px;line-height:20px;color:var(--mbc-muted)}.mbc-summary{margin-top:16px;font-size:28px;line-height:34px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.mbc-cents{color:var(--mbc-muted)}.mbc-change-row{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--mbc-muted);min-width:0}.mbc-detail{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.mbc-change{flex:none;display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:50px;font-size:11px;line-height:16px;font-weight:500;background:var(--mbc-fill);color:var(--mbc-ink);font-variant-numeric:tabular-nums;box-shadow:0 1px 3px #0000000a,inset 0 0 0 1px color-mix(in srgb,var(--mbc-ink) 14%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--mbc-ink) 10%,transparent)}.mbc-change[data-negative=true]{--mbc-fill:#fbe9e9;--mbc-ink:#ad3c3c}.mova-balance[data-theme=dark] .mbc-change[data-negative=true]{--mbc-fill:#4c2b2b;--mbc-ink:#ffaaaa}
+.mbc-soft{display:inline-grid;justify-items:var(--mbc-text-align,start);transition:width var(--mbc-text-resize-dur) var(--mbc-ease)}.mbc-soft>span{grid-area:1/1;white-space:pre;transition:filter var(--mbc-text-dur) ease-in-out,opacity var(--mbc-text-dur) ease-in-out}.mbc-soft-new{opacity:0;filter:blur(2px)}.mbc-soft.is-swapping .mbc-soft-old{opacity:0;filter:blur(2px)}.mbc-soft.is-swapping .mbc-soft-new{opacity:1;filter:blur(0)}
+.mbc-chart{display:flex;position:relative;width:100%;gap:4px;margin-top:16px}.mova-balance .mbc-column{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:4px;border-radius:8px;cursor:default}.mbc-track{position:relative;height:112px;width:100%;display:flex;align-items:flex-end;justify-content:center}.mbc-track[data-signed=true]:after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#8885}.mbc-track[data-signed=true] .mbc-bar{position:absolute}.mbc-bar{display:block;width:100%;max-width:24px;border-radius:2px 2px 0 0;background:var(--mbc-bar);transition:height var(--mbc-chart-dur) var(--mbc-ease),background-color 150ms var(--mbc-ease)}.mbc-column:focus-visible .mbc-bar{background:var(--mbc-bar-hover)}@media(hover:hover) and (pointer:fine){.mbc-column:hover .mbc-bar{background:var(--mbc-bar-hover)}.mbc-periods button:not([aria-selected=true]):hover{color:var(--mbc-fg)}}.mbc-column[data-current=true] .mbc-bar{background:var(--mbc-bar-current)}.mbc-axis{font-size:12px;line-height:16px;color:var(--mbc-muted);--mbc-text-align:center}.mbc-column[data-current=true] .mbc-axis{color:var(--mbc-fg)}
+.mbc-tooltip{position:absolute;top:0;left:0;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:0;max-width:100%;overflow:hidden;translate:var(--mbc-tip-x,0px) 0;scale:.98;transform-origin:50% 100%;padding:8px 12px;border-radius:8px;background:var(--mbc-tip-bg);color:var(--mbc-tip-fg);white-space:nowrap;box-shadow:0 0 0 1px #0000000f,0 2px 6px #0000000d,0 4px 42px #0000000f;opacity:0;pointer-events:none;font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;transition:opacity 50ms ease-out,scale 50ms ease-out,translate 160ms var(--mbc-ease),width 160ms var(--mbc-ease)}.mbc-tooltip[data-show=true]{opacity:1;scale:1;transition:opacity 150ms ease-out 80ms,scale 150ms ease-out 80ms,translate 160ms var(--mbc-ease),width 160ms var(--mbc-ease)}.mova-balance[data-theme=dark] .mbc-tooltip{box-shadow:0 1px 3px #0000000a,inset 0 1px #ffffff0a,inset 0 0 0 1px #c4c4c414}
+.mbc-periods{position:relative;display:flex;align-items:center;width:100%;gap:3px;background:var(--mbc-chip);padding:3px;border-radius:48px;margin-top:16px}.mova-balance .mbc-periods button{position:relative;flex:1;min-width:0;height:30px;padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:48px;font-size:13px;line-height:20px;font-weight:500;color:var(--mbc-muted);cursor:pointer;z-index:1;transition:color var(--mbc-tabs-dur) var(--mbc-ease),transform var(--mbc-press-dur) var(--mbc-ease)}.mbc-periods button[aria-selected=true]{color:var(--mbc-fg)}.mbc-period-pill{position:absolute;top:3px;left:0;height:30px;width:0;background:var(--mbc-pill);border-radius:48px;box-shadow:0 1px 3px #00000014,0 0 0 1px #0000000a;transform:translateX(0);transition:transform var(--mbc-tabs-dur) var(--mbc-ease),width var(--mbc-tabs-dur) var(--mbc-ease);will-change:transform,width;z-index:0;pointer-events:none}
+@media(prefers-reduced-motion:reduce){.mova-balance *{animation:none!important;transition:none!important}.mova-balance button:is(:active,[data-pressed=true]){transform:none}}
 `;
 
 // .generated/ui/cards/calendar-day-card.tsx
 import * as React2 from "react";
-import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
-var weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
-var meetingTitles = [["Weekly planning", "Design critique"], ["Roadmap review", "Lunch with Priya", "Hiring sync"], ["Customer call", "Sprint demo"], ["Standup", "Product review", "1:1 with Maya"], ["Retro", "Team drinks"]];
-var meetingTimes = [["9:30 \u2013 10:15", "14:00 \u2013 15:00"], ["10:00 \u2013 11:00", "13:30 \u2013 14:30", "16:00 \u2013 16:30"], ["11:00 \u2013 11:30", "15:00 \u2013 16:00"], ["9:00 \u2013 9:15", "11:30 \u2013 12:30", "16:00 \u2013 16:30"], ["10:00 \u2013 10:45", "15:30 \u2013 16:30"]];
-var defaultDays = weekdays.map((weekday, index) => ({ id: `${index + 11}`, weekday, day: index + 11, dateLabel: `March ${index + 11}`, events: meetingTitles[index].map((title, event) => ({ id: `${index}-${event}`, title, time: meetingTimes[index][event], location: ["Zoom", "Room 2", "Caf\xE9"][event], color: ["#7894e3", "#d7a265", "#b18ad1"][event] })) }));
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var portrait = (name, photo) => ({ name, image: `https://images.unsplash.com/${photo}?auto=format&fit=crop&q=80&w=48&h=48` });
+var people = {
+  leo: portrait("Leo Park", "photo-1500648767791-00dcc994a43e"),
+  maya: portrait("Maya Chen", "photo-1534528741775-53994a69daeb"),
+  tom: portrait("Tom Hale", "photo-1506794778202-cad84cf45f1d"),
+  ana: portrait("Ana Ruiz", "photo-1438761681033-6461ffad8d80"),
+  jade: portrait("Jade Wu", "photo-1580489944761-15a19d654956"),
+  priya: portrait("Priya Nair", "photo-1544005313-94ddf0286df2"),
+  sam: portrait("Sam Okafor", "photo-1570158268183-d296b2892211"),
+  nina: portrait("Nina Brooks", "photo-1632765854612-9b02b6ec2b15")
+};
+var defaultDays = [
+  { id: "11", weekday: "Monday", day: 11, dateLabel: "March 11", events: [
+    { id: "0-0", title: "Weekly planning", time: "9:30 \u2013 10:15", location: "Room 2", color: "#1C5FFB" },
+    { id: "0-1", title: "Design critique", time: "14:00 \u2013 15:00", location: "Studio", color: "#B01CFB", attendees: [people.maya, people.sam] }
+  ] },
+  { id: "12", weekday: "Tuesday", day: 12, dateLabel: "March 12", events: [
+    { id: "1-0", title: "Roadmap review", time: "10:00 \u2013 11:00", location: "Zoom", color: "#EF8121", attendees: [people.leo, people.ana, people.nina] },
+    { id: "1-1", title: "Lunch with Priya", time: "13:30 \u2013 14:30", location: "Caf\xE9", color: "#1EBB26", attendees: [people.priya] },
+    { id: "1-2", title: "Hiring sync", time: "16:00 \u2013 16:30", location: "Room 4", color: "#1C5FFB" }
+  ] },
+  { id: "13", weekday: "Wednesday", day: 13, dateLabel: "March 13", events: [
+    { id: "2-0", title: "Customer call", time: "11:00 \u2013 11:30", location: "Zoom", color: "#EC4A4A", attendees: [people.tom, people.jade] },
+    { id: "2-1", title: "Sprint demo", time: "15:00 \u2013 16:00", location: "Studio", color: "#B01CFB" }
+  ] },
+  { id: "14", weekday: "Thursday", day: 14, dateLabel: "March 14", events: [
+    { id: "3-0", title: "Standup", time: "9:00 \u2013 9:15", location: "Zoom", color: "#1C5FFB" },
+    { id: "3-1", title: "Product review", time: "11:30 \u2013 12:30", location: "Room 2", color: "#B01CFB", attendees: [people.jade, people.leo, people.tom] },
+    { id: "3-2", title: "1:1 with Maya", time: "16:00 \u2013 16:30", location: "Caf\xE9", color: "#1EBB26", attendees: [people.maya] }
+  ] },
+  { id: "15", weekday: "Friday", day: 15, dateLabel: "March 15", events: [
+    { id: "4-0", title: "Retro", time: "10:00 \u2013 10:45", location: "Studio", color: "#EF8121", attendees: [people.ana, people.sam, people.nina] },
+    { id: "4-1", title: "Team drinks", time: "15:30 \u2013 16:30", location: "Rooftop", color: "#1EBB26" }
+  ] }
+];
+function SoftText2({ text, className = "" }) {
+  const root = React2.useRef(null);
+  const incoming = React2.useRef(null);
+  const last = React2.useRef(text);
+  const [content, setContent] = React2.useState({ old: "", next: text });
+  const [swapping, setSwapping] = React2.useState(false);
+  const [width, setWidth] = React2.useState();
+  React2.useLayoutEffect(() => {
+    if (last.current === text) return;
+    const old = last.current;
+    last.current = text;
+    setWidth(root.current?.getBoundingClientRect().width);
+    setSwapping(false);
+    setContent({ old, next: text });
+    const frame = requestAnimationFrame(() => {
+      setWidth(incoming.current?.getBoundingClientRect().width);
+      setSwapping(true);
+    });
+    const timer = setTimeout(() => {
+      setContent({ old: "", next: text });
+      setWidth(void 0);
+      setSwapping(false);
+    }, 280);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+    };
+  }, [text]);
+  return /* @__PURE__ */ jsxs14("span", { ref: root, className: `mcd-soft ${className}`, "data-swapping": swapping, "data-changing": !!content.old, style: { width }, children: [
+    content.old && /* @__PURE__ */ jsx14("span", { className: "mcd-soft-old", "aria-hidden": "true", children: content.old }),
+    /* @__PURE__ */ jsx14("span", { ref: incoming, className: "mcd-soft-new", children: content.next })
+  ] });
+}
+function Attendees({ people: attendees }) {
+  const [active, setActive] = React2.useState(null);
+  const [returning, setReturning] = React2.useState(false);
+  const shift = (index) => active === null ? 0 : -4 * Math.pow(0.45, Math.abs(index - active));
+  function activate(index) {
+    setReturning(false);
+    setActive(index);
+  }
+  function reset() {
+    setReturning(true);
+    setActive(null);
+  }
+  return /* @__PURE__ */ jsx14("div", { className: "mcd-attendees", role: "group", "aria-label": `Attendees: ${attendees.map((person) => person.name).join(", ")}`, onMouseLeave: reset, children: attendees.map((person, index) => /* @__PURE__ */ jsx14("span", { className: "mcd-avatar", role: "img", "aria-label": person.name, tabIndex: 0, onMouseEnter: () => activate(index), onFocus: () => activate(index), onBlur: reset, "data-returning": returning, style: { "--mcd-shift": `${shift(index)}px`, "--mcd-scale": active === index ? 1.05 : 1, "--mcd-cut-dy": `${index < attendees.length - 1 ? shift(index + 1) - shift(index) : 0}px`, "--mcd-avatar-color": person.color ?? "#c6b7d8" }, children: person.image ? /* @__PURE__ */ jsx14("img", { src: person.image, alt: "", width: 24, height: 24 }) : /* @__PURE__ */ jsx14("span", { className: "mcd-initials", "aria-hidden": "true", children: person.name.split(/\s+/).map((part) => part[0]).slice(0, 2).join("") }) }, `${person.name}-${index}`)) });
+}
 function CalendarDayCard({ days = defaultDays, defaultSelectedDay = "14", onDayChange, onEventClick, theme = "light", className = "", style } = {}) {
   const [selected, setSelected] = React2.useState(defaultSelectedDay);
   const currentIndex = Math.max(0, days.findIndex((day) => day.id === selected));
   const current = days[currentIndex];
-  const labelId = React2.useId();
-  function select(index) {
+  const id = React2.useId();
+  const tabs = React2.useRef([]);
+  const dayStrip = React2.useRef(null);
+  const measured = React2.useRef(false);
+  const [pill, setPill] = React2.useState({ left: 0, width: 0, animate: false });
+  React2.useLayoutEffect(() => {
+    const tab = tabs.current[currentIndex];
+    if (tab) setPill({ left: tab.offsetLeft, width: tab.offsetWidth, animate: measured.current });
+    measured.current = true;
+  }, [currentIndex, days]);
+  React2.useLayoutEffect(() => {
+    const measure = () => {
+      const tab = dayStrip.current?.querySelector('[aria-selected="true"]');
+      if (tab) setPill({ left: tab.offsetLeft, width: tab.offsetWidth, animate: false });
+    };
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    if (dayStrip.current) observer?.observe(dayStrip.current);
+    return () => observer?.disconnect();
+  }, [days.length]);
+  const [pressedDay, setPressedDay] = React2.useState(null);
+  const pressStart = React2.useRef(0);
+  const pressTimer = React2.useRef(void 0);
+  React2.useEffect(() => () => clearTimeout(pressTimer.current), []);
+  function startPress(event, index) {
+    if (event.pointerType === "mouse") return;
+    clearTimeout(pressTimer.current);
+    pressStart.current = performance.now();
+    setPressedDay(index);
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+  }
+  function endPress() {
+    pressTimer.current = setTimeout(() => setPressedDay(null), Math.max(0, 150 - (performance.now() - pressStart.current)));
+  }
+  function select(index, focus = false) {
     const day = days[index];
-    if (day) {
-      setSelected(day.id);
-      onDayChange?.(day);
+    if (!day) return;
+    if (focus) tabs.current[index]?.focus();
+    if (current?.id === day.id) return;
+    setSelected(day.id);
+    onDayChange?.(day);
+  }
+  function handleKey(event, index) {
+    const next = event.key === "ArrowRight" ? (index + 1) % days.length : event.key === "ArrowLeft" ? (index - 1 + days.length) % days.length : event.key === "Home" ? 0 : event.key === "End" ? days.length - 1 : null;
+    if (next !== null) {
+      event.preventDefault();
+      select(next, true);
     }
   }
-  return /* @__PURE__ */ jsxs14("section", { className: `mova-calendar ${className}`, "data-theme": theme, style, "aria-label": "Calendar day", children: [
+  return /* @__PURE__ */ jsxs14("section", { className: `mova-calendar ${className}`, "data-theme": theme, style, "aria-label": "Calendar", children: [
     /* @__PURE__ */ jsx14("style", { children: css2 }),
-    /* @__PURE__ */ jsxs14("header", { children: [
-      /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsx14("h2", { id: labelId, children: current?.weekday ?? "Your calendar" }),
-        /* @__PURE__ */ jsx14("p", { children: current ? `${current.dateLabel} \xB7 ${current.events.length} ${current.events.length === 1 ? "meeting" : "meetings"}` : "No days available" })
-      ] }),
-      /* @__PURE__ */ jsxs14("div", { className: "mcd-arrows", children: [
-        /* @__PURE__ */ jsx14("button", { type: "button", "aria-label": "Previous day", disabled: !current || currentIndex === 0, onClick: () => select(currentIndex - 1), children: /* @__PURE__ */ jsx14(ChevronLeft, { size: 16 }) }),
-        /* @__PURE__ */ jsx14("button", { type: "button", "aria-label": "Next day", disabled: !current || currentIndex === days.length - 1, onClick: () => select(currentIndex + 1), children: /* @__PURE__ */ jsx14(ChevronRight3, { size: 16 }) })
-      ] })
+    /* @__PURE__ */ jsxs14("header", { className: "mcd-head", children: [
+      /* @__PURE__ */ jsx14("h2", { children: /* @__PURE__ */ jsx14(SoftText2, { text: current?.weekday ?? "Your calendar" }) }),
+      /* @__PURE__ */ jsx14("p", { className: "mcd-meta", "aria-live": "polite", "aria-atomic": "true", children: current ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+        /* @__PURE__ */ jsx14(SoftText2, { text: current.dateLabel }),
+        /* @__PURE__ */ jsx14("span", { children: " \xB7 " }),
+        /* @__PURE__ */ jsx14(SoftText2, { text: String(current.events.length), className: "mcd-number" }),
+        /* @__PURE__ */ jsx14("span", { children: current.events.length === 1 ? " meeting" : " meetings" })
+      ] }) : "No days available" })
     ] }),
-    /* @__PURE__ */ jsx14("div", { className: "mcd-days", role: "group", "aria-label": "Select a day", children: days.map((day, index) => /* @__PURE__ */ jsxs14("button", { type: "button", "aria-pressed": current?.id === day.id, "aria-label": `${day.weekday}, ${day.dateLabel}`, onClick: () => select(index), children: [
-      /* @__PURE__ */ jsx14("span", { children: day.weekday.slice(0, 3) }),
-      /* @__PURE__ */ jsx14("strong", { children: day.day })
-    ] }, day.id)) }),
-    /* @__PURE__ */ jsx14("div", { className: "mcd-agenda", "aria-labelledby": labelId, "aria-live": "polite", children: current?.events.length ? current.events.map((event) => /* @__PURE__ */ jsxs14("button", { type: "button", className: "mcd-event", onClick: () => onEventClick?.(event), disabled: !onEventClick, style: { "--mcd-event": event.color ?? "#7894e3" }, children: [
-      /* @__PURE__ */ jsx14("span", { className: "mcd-event-line", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxs14("span", { children: [
-        /* @__PURE__ */ jsx14("strong", { children: event.title }),
-        /* @__PURE__ */ jsxs14("small", { children: [
-          event.time,
-          event.location ? ` \xB7 ${event.location}` : ""
-        ] })
-      ] })
-    ] }, event.id)) : /* @__PURE__ */ jsx14("p", { className: "mcd-empty", children: "Nothing scheduled. Enjoy your day." }) }, current?.id)
+    !!days.length && /* @__PURE__ */ jsxs14("div", { ref: dayStrip, className: "mcd-days", role: "tablist", "aria-label": `Week of ${days[0].dateLabel}`, style: { "--mcd-count": days.length, "--mcd-index": currentIndex }, children: [
+      /* @__PURE__ */ jsx14("span", { className: "mcd-pill", "aria-hidden": "true", style: { width: pill.width, transform: `translateX(${pill.left}px)`, transition: pill.animate ? void 0 : "none" } }),
+      days.map((day, index) => /* @__PURE__ */ jsxs14("button", { type: "button", role: "tab", ref: (element) => {
+        tabs.current[index] = element;
+      }, id: `${id}-tab-${index}`, "aria-selected": current?.id === day.id, "aria-controls": `${id}-panel-${index}`, "aria-label": `${day.weekday}, ${day.dateLabel}`, tabIndex: current?.id === day.id ? 0 : -1, "data-pressed": pressedDay === index, onPointerDown: (event) => startPress(event, index), onPointerUp: endPress, onPointerCancel: endPress, onKeyDown: (event) => handleKey(event, index), onClick: () => select(index), children: [
+        /* @__PURE__ */ jsx14("span", { children: day.weekday.slice(0, 3) }),
+        /* @__PURE__ */ jsx14("strong", { children: day.day })
+      ] }, day.id))
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "mcd-agenda", children: [
+      days.map((day, index) => /* @__PURE__ */ jsx14("section", { className: "mcd-page", role: "tabpanel", "aria-label": `${day.weekday} meetings`, id: `${id}-panel-${index}`, "aria-labelledby": `${id}-tab-${index}`, "aria-hidden": index !== currentIndex, inert: index !== currentIndex || void 0, "data-active": index === currentIndex, style: { "--mcd-side": index < currentIndex ? "-8px" : "8px" }, children: day.events.length ? /* @__PURE__ */ jsx14("ul", { children: day.events.map((event) => /* @__PURE__ */ jsxs14("li", { className: "mcd-event", style: { "--mcd-event": event.color ?? "#1C5FFB" }, children: [
+        onEventClick ? /* @__PURE__ */ jsxs14("button", { type: "button", className: "mcd-event-main", onClick: () => onEventClick(event), children: [
+          /* @__PURE__ */ jsx14("span", { className: "mcd-event-line", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs14("span", { className: "mcd-event-text", children: [
+            /* @__PURE__ */ jsx14("strong", { children: event.title }),
+            /* @__PURE__ */ jsxs14("small", { children: [
+              /* @__PURE__ */ jsx14("span", { children: event.time }),
+              event.location ? ` \xB7 ${event.location}` : ""
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs14("div", { className: "mcd-event-main", children: [
+          /* @__PURE__ */ jsx14("span", { className: "mcd-event-line", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs14("span", { className: "mcd-event-text", children: [
+            /* @__PURE__ */ jsx14("strong", { children: event.title }),
+            /* @__PURE__ */ jsxs14("small", { children: [
+              /* @__PURE__ */ jsx14("span", { children: event.time }),
+              event.location ? ` \xB7 ${event.location}` : ""
+            ] })
+          ] })
+        ] }),
+        !!event.attendees?.length && /* @__PURE__ */ jsx14(Attendees, { people: event.attendees })
+      ] }, event.id)) }) : /* @__PURE__ */ jsx14("p", { className: "mcd-empty", children: "Nothing scheduled. Enjoy your day." }) }, day.id)),
+      !current && /* @__PURE__ */ jsx14("p", { className: "mcd-empty", children: "Nothing scheduled. Enjoy your day." })
+    ] })
   ] });
 }
 var css2 = `
-.mova-calendar{--mcd-bg:#fff;--mcd-fg:#222;--mcd-muted:#737373;--mcd-chip:#f4f4f4;width:300px;max-width:100%;box-sizing:border-box;padding:24px;border-radius:24px;color:var(--mcd-fg);background:var(--mcd-bg);font:400 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;border:1px solid #88888818;box-shadow:0 8px 32px -4px #0000000c}.mova-calendar[data-theme=dark]{--mcd-bg:#1d1d1d;--mcd-fg:#f2f2f2;--mcd-muted:#aaa;--mcd-chip:#2b2b2b;color-scheme:dark}.mova-calendar *{box-sizing:border-box}.mova-calendar h2,.mova-calendar p{margin:0}.mova-calendar h2{font-size:16px;line-height:22px;font-weight:500}.mova-calendar header{display:flex;align-items:center;gap:8px}.mova-calendar header>div:first-child{min-width:0;flex:1}.mova-calendar header p{font-size:12px;color:var(--mcd-muted);margin-top:2px}.mova-calendar button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer}.mova-calendar button:focus-visible{outline:2px solid #6d8ee6;outline-offset:3px}.mcd-arrows{display:flex;flex:none}.mcd-arrows button{width:28px;height:32px;display:grid;place-items:center;border-radius:8px}.mcd-arrows button:hover{background:var(--mcd-chip)}.mcd-arrows button:disabled{opacity:.3;cursor:default}.mcd-days{display:flex;gap:4px;margin:20px 0 16px;overflow:auto;padding:3px}.mcd-days button{min-width:38px;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;transition:background 180ms,color 180ms}.mcd-days span{font-size:11px;color:var(--mcd-muted)}.mcd-days strong{font-size:16px;font-weight:500}.mcd-days button[aria-pressed=true]{background:var(--mcd-fg);color:var(--mcd-bg)}.mcd-days button[aria-pressed=true] span{color:inherit;opacity:.75}.mcd-days button:not([aria-pressed=true]):hover{background:var(--mcd-chip)}.mcd-agenda{border-top:1px solid #88888820;padding-top:12px;min-height:174px;animation:mcd-enter 220ms ease-out}.mcd-event{width:100%;display:flex;gap:12px;padding:8px 0!important;text-align:left;border-radius:5px}.mcd-event:disabled{opacity:1;cursor:default}.mcd-event-line{width:3px;align-self:stretch;background:var(--mcd-event);border-radius:4px;flex:none}.mcd-event>span:last-child{min-width:0}.mcd-event strong{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}.mcd-event small{display:block;font-size:12px;color:var(--mcd-muted)}.mcd-empty{padding-top:12px;color:var(--mcd-muted)}@keyframes mcd-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mova-calendar *{animation:none!important;transition:none!important}}
+@property --mcd-cut-dy{syntax:'<length>';inherits:false;initial-value:0px}
+.mova-calendar{--mcd-bg:#fff;--mcd-fg:#0d0d0d;--mcd-muted:#6c6c6c;--mcd-track:#0000000a;--mcd-hover:#0000000a;--mcd-pill:#fff;--mcd-tint:7%;--mcd-pill-shadow:0 0 0 1px #0000000f,0 2px 6px #0000000d,0 1px 2px #0000000a;--mcd-ease:cubic-bezier(.22,1,.36,1);width:300px;max-width:100%;box-sizing:border-box;padding:24px;border-radius:24px;color:var(--mcd-fg);background:var(--mcd-bg);font:400 13px/20px "Inter Variable",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;font-optical-sizing:auto;font-feature-settings:'liga' 1,'calt' 1;-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px #0000000a,0 8px 32px -4px #0000000f,0 1px 3px #0000000a;display:flex;flex-direction:column;gap:16px}.mova-calendar[data-theme=dark]{--mcd-bg:#1d1d1d;--mcd-fg:#f2f2f2;--mcd-muted:rgba(202,202,202,.7);--mcd-track:#ffffff0a;--mcd-hover:rgba(255,255,255,.065);--mcd-pill:#ffffff1a;--mcd-tint:14%;--mcd-pill-shadow:0 1px 3px #0000003d,inset 0 0 0 1px #ffffff0f,inset 0 1px 0 #ffffff0f;color-scheme:dark}.mova-calendar *{box-sizing:border-box}.mova-calendar h2,.mova-calendar p,.mova-calendar ul{margin:0;padding:0}.mova-calendar button{font:inherit;letter-spacing:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}.mova-calendar button:focus-visible,.mcd-avatar:focus-visible{outline:2px solid var(--mcd-fg);outline-offset:2px}.mcd-head{display:flex;flex-direction:column;gap:4px}.mova-calendar h2{font-size:28px;line-height:34px;font-weight:500}.mcd-meta{display:flex;white-space:pre;font-size:12px;line-height:16px;color:var(--mcd-muted)}.mcd-number,.mcd-event small span{font-variant-numeric:tabular-nums}.mcd-soft{display:inline-grid;justify-items:start;transition:width 240ms var(--mcd-ease)}.mcd-soft>span{grid-area:1/1;white-space:pre;transition:filter 200ms ease-in-out,opacity 200ms ease-in-out}.mcd-soft[data-changing=true] .mcd-soft-new{opacity:0;filter:blur(2px)}.mcd-soft[data-swapping=true] .mcd-soft-old{opacity:0;filter:blur(2px)}.mcd-soft[data-swapping=true] .mcd-soft-new{opacity:1;filter:blur(0)}.mcd-days{position:relative;display:flex;align-items:center;gap:2px;padding:4px;border-radius:16px;background:var(--mcd-track)}.mcd-days button{position:relative;flex:1;min-width:0;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;z-index:1;transition:color 250ms var(--mcd-ease),background-color 250ms var(--mcd-ease),transform 150ms var(--mcd-ease)}.mcd-days button>span{font-size:12px;line-height:16px;color:var(--mcd-muted)}.mcd-days strong{font-size:15px;line-height:20px;font-weight:400;font-variant-numeric:tabular-nums}.mcd-days button:is(:active,[data-pressed=true]){transform:scale(.95)}.mcd-days button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--mcd-bg),0 0 0 4px var(--mcd-fg)}.mcd-pill{position:absolute;top:4px;left:0;height:52px;background:var(--mcd-pill);box-shadow:var(--mcd-pill-shadow);border-radius:12px;transition:transform 250ms var(--mcd-ease),width 250ms var(--mcd-ease);pointer-events:none}.mcd-agenda{display:grid;position:relative}.mcd-page{grid-area:1/1;min-width:0;opacity:0;pointer-events:none;transform:translateX(var(--mcd-side));filter:blur(3px);transition:opacity 250ms var(--mcd-ease),transform 250ms var(--mcd-ease),filter 250ms var(--mcd-ease)}.mcd-page[data-active=true]{opacity:1;pointer-events:auto;transform:translateX(0);filter:blur(0)}.mcd-page ul{list-style:none;display:flex;flex-direction:column;gap:8px}.mcd-event{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:12px;background:color-mix(in srgb,var(--mcd-event) var(--mcd-tint),transparent)}.mcd-event-main{flex:1;min-width:0;display:flex;align-self:stretch;align-items:center;gap:12px;text-align:left;border-radius:4px}.mcd-event-line{flex:none;align-self:stretch;width:3px;border-radius:2px;background:var(--mcd-event)}.mcd-event-text{min-width:0;flex:1}.mcd-event strong{display:block;font-size:13px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mcd-event small{display:block;font-size:12px;line-height:16px;color:var(--mcd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mcd-attendees{display:flex;align-items:center;flex:none;align-self:center}.mcd-avatar{display:flex;flex:none;width:24px;height:24px;border-radius:50%;transform-origin:center;transform:translateY(var(--mcd-shift,0px)) scale(var(--mcd-scale,1));transition:transform 320ms var(--mcd-ease),--mcd-cut-dy 320ms var(--mcd-ease)}.mcd-avatar[data-returning=true]{transition-timing-function:cubic-bezier(.34,3.85,.64,1)}.mcd-avatar+.mcd-avatar{margin-left:-6px}.mcd-avatar:not(:last-child){-webkit-mask:radial-gradient(58.333% 58.333% at 125% calc(50% + var(--mcd-cut-dy)),transparent calc(100% - .5px),#000 calc(100% + .5px));mask:radial-gradient(58.333% 58.333% at 125% calc(50% + var(--mcd-cut-dy)),transparent calc(100% - .5px),#000 calc(100% + .5px))}.mcd-avatar img{display:block;width:24px;height:24px;border-radius:50%;object-fit:cover;outline:1px solid #00000014;outline-offset:-1px}.mova-calendar[data-theme=dark] .mcd-avatar img{outline-color:#ffffff14}.mcd-initials{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:10px;line-height:1;background:var(--mcd-avatar-color);color:#25212b}.mcd-empty{font-size:12px;color:var(--mcd-muted);padding:8px 0!important;min-height:52px}@media(hover:hover) and (pointer:fine){.mcd-days button:not([aria-selected=true]):hover{background:var(--mcd-hover)}}@media(prefers-reduced-motion:reduce){.mova-calendar *{animation:none!important;transition:none!important}.mcd-days button:is(:active,[data-pressed=true]),.mcd-avatar{transform:none!important}.mcd-page{transform:none;filter:none}}
 `;
 
 // .generated/ui/cards/day-trading-order-ticket.tsx
 import * as React3 from "react";
-import { Check as Check2, Minus, Plus as Plus2 } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var types = [
+  { id: "market", label: "Market", priceLabel: "", hint: "" },
+  { id: "limit", label: "Limit", priceLabel: "Limit price", hint: "a limit price" },
+  { id: "stop", label: "Stop market", priceLabel: "Stop price", hint: "a stop price" },
+  { id: "trail", label: "Trailing stop", priceLabel: "Trail amount", hint: "a trail amount" }
+];
+var money = (value) => new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(value);
+function SwapText({ text }) {
+  const ref = React3.useRef(null);
+  const [shown, setShown] = React3.useState(text);
+  const entering = React3.useRef(false);
+  React3.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (text === shown) {
+      el.classList.remove("mot-is-exit");
+      return;
+    }
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setShown(text);
+      return;
+    }
+    el.classList.remove("mot-is-enter-start");
+    el.classList.add("mot-is-exit");
+    const timer = window.setTimeout(() => {
+      entering.current = true;
+      setShown(text);
+    }, 150);
+    return () => window.clearTimeout(timer);
+  }, [text, shown]);
+  React3.useLayoutEffect(() => {
+    if (!entering.current || !ref.current) return;
+    entering.current = false;
+    ref.current.classList.remove("mot-is-exit");
+    ref.current.classList.add("mot-is-enter-start");
+    void ref.current.offsetHeight;
+    ref.current.classList.remove("mot-is-enter-start");
+  }, [shown]);
+  return /* @__PURE__ */ jsx15("span", { ref, className: "mot-t-text-swap", children: shown });
+}
+function PopNumber({ value }) {
+  const ref = React3.useRef(null);
+  const previous = React3.useRef(value);
+  const samePrefix = React3.useRef(value.length);
+  if (previous.current !== value) {
+    let same2 = 0;
+    while (same2 < previous.current.length && same2 < value.length && previous.current[same2] === value[same2]) same2++;
+    samePrefix.current = same2;
+  }
+  const same = samePrefix.current;
+  React3.useLayoutEffect(() => {
+    if (previous.current === value || !ref.current) return;
+    previous.current = value;
+    ref.current.classList.remove("mot-is-animating");
+    void ref.current.offsetHeight;
+    ref.current.classList.add("mot-is-animating");
+  }, [value]);
+  return /* @__PURE__ */ jsx15("span", { ref, className: "mot-t-digit-group", "aria-hidden": "true", children: value.split("").map((character, index) => /* @__PURE__ */ jsx15("span", { className: "mot-t-digit", "data-same": index < same ? "" : void 0, "data-stagger": index === value.length - 2 ? "1" : index === value.length - 1 ? "2" : void 0, children: character }, index)) });
+}
+function CheckMark({ size = 16 }) {
+  return /* @__PURE__ */ jsx15("svg", { className: "mot-hi", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: size === 24 ? 2 : 3, "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M5.25 12.7033 9.40385 17.37 18.75 6.87" }) });
+}
+function useFieldError() {
+  const [error, setError] = React3.useState(false);
+  const [shake, setShake] = React3.useState(0);
+  const timer = React3.useRef(null);
+  const box = React3.useRef(null);
+  React3.useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  React3.useLayoutEffect(() => {
+    if (!error || !box.current) return;
+    box.current.classList.remove("mot-is-shaking");
+    void box.current.offsetWidth;
+    box.current.classList.add("mot-is-shaking");
+    const shakeTimer = setTimeout(() => box.current?.classList.remove("mot-is-shaking"), 300);
+    return () => clearTimeout(shakeTimer);
+  }, [error, shake]);
+  const clear = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setError(false);
+  };
+  const show = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setError(true);
+    setShake((value) => value + 1);
+    timer.current = setTimeout(() => setError(false), 3280);
+  };
+  return { error, box, clear, show };
+}
 function DayTradingOrderTicket({ symbol = "NOVA", company = "Novaline Robotics", quote = 184.2, change = "+1.24%", initialShares = 10, onSubmit, theme = "light", className = "", style } = {}) {
   const [side, setSide] = React3.useState("buy");
   const [type, setType] = React3.useState("limit");
-  const [shares, setShares] = React3.useState(String(initialShares));
+  const [shares, setShares] = React3.useState(String(Math.min(9999, Math.max(0, Math.trunc(Number.isFinite(initialShares) ? initialShares : 10)))));
   const [price, setPrice] = React3.useState(quote.toFixed(2));
-  const [error, setError] = React3.useState("");
+  const [menuOpen, setMenuOpen] = React3.useState(false);
+  const [menuClosing, setMenuClosing] = React3.useState(false);
   const [busy, setBusy] = React3.useState(false);
   const [done, setDone] = React3.useState(null);
+  const [submitError, setSubmitError] = React3.useState("");
+  const sharesError = useFieldError();
+  const priceError = useFieldError();
   const guard = React3.useRef(false);
   const alive = React3.useRef(true);
+  const placedTimer = React3.useRef(null);
+  const menuTimer = React3.useRef(null);
+  const menu = React3.useRef(null);
+  const typeButton = React3.useRef(null);
   const heading = React3.useRef(null);
   const shareInput = React3.useRef(null);
+  const priceInput = React3.useRef(null);
+  const newOrderFocus = React3.useRef(false);
   const id = React3.useId();
-  const refocus = React3.useRef(false);
+  const typeInfo = types.find((item) => item.id === type);
+  const count = parseInt(shares, 10) || 0;
+  const numericPrice = parseFloat(price);
+  const effectivePrice = type === "limit" || type === "stop" ? numericPrice : quote;
+  const total = count > 0 && Number.isFinite(effectivePrice) && effectivePrice > 0 ? count * effectivePrice : 0;
+  const totalText = money(total);
+  const description = (draft) => draft.type === "market" ? "at market" : draft.type === "limit" ? `at ${money(draft.price)}` : draft.type === "stop" ? `stop ${money(draft.price)}` : `trailing ${money(draft.trailAmount ?? 0)}`;
   React3.useEffect(() => {
     alive.current = true;
     return () => {
       alive.current = false;
+      if (placedTimer.current) clearTimeout(placedTimer.current);
+      if (menuTimer.current) clearTimeout(menuTimer.current);
     };
   }, []);
   React3.useEffect(() => {
     if (done) heading.current?.focus();
-    else if (refocus.current) {
-      shareInput.current?.focus();
-      refocus.current = false;
-    }
-  }, [done]);
-  const count = Number(shares);
-  const effectivePrice = type === "market" ? quote : Number(price);
-  const total = Number.isFinite(count * effectivePrice) && count > 0 && effectivePrice > 0 ? count * effectivePrice : 0;
-  const money = (value) => new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(value);
+    else if (newOrderFocus.current) {
+      newOrderFocus.current = false;
+      (type === "market" ? typeButton : shareInput).current?.focus();
+    }
+  }, [done, type]);
+  function closeMenu(focus = false) {
+    setMenuOpen(false);
+    setMenuClosing(true);
+    if (menuTimer.current) clearTimeout(menuTimer.current);
+    menuTimer.current = setTimeout(() => setMenuClosing(false), 150);
+    if (focus) typeButton.current?.focus();
+  }
+  React3.useEffect(() => {
+    if (!menuOpen) return;
+    const onDown = (event) => {
+      if (!menu.current?.contains(event.target)) closeMenu();
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMenu(true);
+      }
+    };
+    document.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [menuOpen]);
+  function openMenu(focusIndex) {
+    if (menuTimer.current) clearTimeout(menuTimer.current);
+    setMenuClosing(false);
+    setMenuOpen(true);
+    if (focusIndex !== void 0) requestAnimationFrame(() => menu.current?.querySelectorAll('[role="menuitemradio"]')[focusIndex]?.focus());
+  }
+  function selectType(value) {
+    if (value === "trail" !== (type === "trail")) setPrice(value === "trail" ? "1.50" : quote.toFixed(2));
+    priceError.clear();
+    sharesError.clear();
+    setSubmitError("");
+    setType(value);
+    closeMenu(true);
+  }
+  const updateShares = (value) => {
+    setShares(value);
+    sharesError.clear();
+    setSubmitError("");
+  };
   async function submit(event) {
     event.preventDefault();
-    if (guard.current) return;
-    if (!Number.isInteger(count) || count < 1 || count > 9999) {
-      setError("Enter between 1 and 9,999 whole shares.");
-      shareInput.current?.focus();
+    if (guard.current || done) return;
+    const invalidShares = count < 1 || count > 9999;
+    const invalidPrice = type !== "market" && !(Number.isFinite(numericPrice) && numericPrice > 0);
+    if (invalidShares) sharesError.show();
+    if (invalidPrice) priceError.show();
+    if (invalidShares || invalidPrice) {
+      if (type === "market") typeButton.current?.focus();
+      else (invalidShares ? shareInput : priceInput).current?.focus();
       return;
     }
     if (!Number.isFinite(effectivePrice) || effectivePrice <= 0) {
-      setError("Enter a price greater than zero.");
+      setSubmitError("The quote must be greater than zero.");
       return;
     }
-    const draft = { symbol, side, type, shares: count, price: effectivePrice, estimatedTotal: total };
+    const draft = { symbol, side, type, shares: count, price: effectivePrice, estimatedTotal: total, ...type === "trail" ? { trailAmount: numericPrice } : {} };
     guard.current = true;
     setBusy(true);
-    setError("");
+    setSubmitError("");
+    closeMenu();
     try {
-      await onSubmit?.(draft);
+      await Promise.all([onSubmit?.(draft), new Promise((resolve) => {
+        placedTimer.current = setTimeout(() => {
+          placedTimer.current = null;
+          resolve();
+        }, 1800);
+      })]);
       if (alive.current) setDone(draft);
     } catch {
-      if (alive.current) setError("The order could not be submitted. Please try again.");
+      if (placedTimer.current) {
+        clearTimeout(placedTimer.current);
+        placedTimer.current = null;
+      }
+      if (alive.current) setSubmitError("The order could not be submitted. Please try again.");
     } finally {
       guard.current = false;
       if (alive.current) setBusy(false);
@@ -4338,94 +4794,604 @@ function DayTradingOrderTicket({ symbol = "NOVA", company = "Novaline Robotics",
   }
   return /* @__PURE__ */ jsxs15("section", { className: `mova-order ${className}`, "data-theme": theme, style, "aria-label": "Trading order ticket", children: [
     /* @__PURE__ */ jsx15("style", { children: css3 }),
-    done ? /* @__PURE__ */ jsxs15("div", { className: "mot-done", children: [
-      /* @__PURE__ */ jsx15("span", { className: "mot-check", children: /* @__PURE__ */ jsx15(Check2, { size: 24 }) }),
-      /* @__PURE__ */ jsx15("h2", { ref: heading, tabIndex: -1, children: onSubmit ? "Order submitted" : "Order preview ready" }),
-      /* @__PURE__ */ jsxs15("p", { children: [
-        done.side === "buy" ? "Buy" : "Sell",
-        " ",
-        done.shares,
-        " ",
-        done.symbol,
-        " \xB7 ",
-        done.type,
-        " order"
-      ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "mot-total", children: [
-        /* @__PURE__ */ jsx15("span", { children: "Est. total" }),
-        /* @__PURE__ */ jsx15("strong", { children: money(done.estimatedTotal) })
-      ] }),
-      /* @__PURE__ */ jsx15("button", { type: "button", className: "mot-submit", onClick: () => {
-        refocus.current = true;
-        setDone(null);
-      }, children: "New order" })
-    ] }) : /* @__PURE__ */ jsxs15("form", { onSubmit: (event) => void submit(event), noValidate: true, children: [
-      /* @__PURE__ */ jsxs15("header", { children: [
-        /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx15("h2", { children: symbol }),
-          /* @__PURE__ */ jsx15("p", { children: company })
+    !onSubmit && /* @__PURE__ */ jsx15("p", { className: "mot-sr-only", children: "Interactive preview \xB7 no real order" }),
+    /* @__PURE__ */ jsxs15("div", { className: "mot-t-page-slide", "data-page": done ? 2 : 1, children: [
+      /* @__PURE__ */ jsxs15("form", { className: "mot-t-page mot-page-form", "data-page-id": "1", onSubmit: (event) => void submit(event), noValidate: true, inert: !!done, "aria-hidden": done ? true : void 0, children: [
+        /* @__PURE__ */ jsxs15("header", { className: "mot-head", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "mot-head-main", children: [
+            /* @__PURE__ */ jsx15("h2", { className: "mot-ticker", children: symbol }),
+            /* @__PURE__ */ jsx15("p", { className: "mot-company", children: company })
+          ] }),
+          /* @__PURE__ */ jsxs15("div", { className: "mot-quote", children: [
+            /* @__PURE__ */ jsx15("span", { className: "mot-quote-price", children: money(quote) }),
+            /* @__PURE__ */ jsx15("span", { className: "mot-badge", "data-negative": change.trim().startsWith("-"), children: change })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs15("div", { className: "mot-quote", children: [
-          /* @__PURE__ */ jsx15("span", { children: money(quote) }),
-          /* @__PURE__ */ jsx15("small", { "data-negative": change.trim().startsWith("-"), children: change })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx15("div", { className: "mot-side", role: "group", "aria-label": "Order side", children: ["buy", "sell"].map((value) => /* @__PURE__ */ jsx15("button", { type: "button", "aria-pressed": value === side, disabled: busy, onClick: () => setSide(value), children: value === "buy" ? "Buy" : "Sell" }, value)) }),
-      /* @__PURE__ */ jsxs15("label", { className: "mot-type", htmlFor: `${id}-type`, children: [
-        /* @__PURE__ */ jsx15("span", { children: "Order type" }),
-        /* @__PURE__ */ jsxs15("select", { id: `${id}-type`, value: type, disabled: busy, onChange: (event) => {
-          setType(event.target.value);
-          setError("");
-        }, children: [
-          /* @__PURE__ */ jsx15("option", { value: "market", children: "Market order" }),
-          /* @__PURE__ */ jsx15("option", { value: "limit", children: "Limit order" }),
-          /* @__PURE__ */ jsx15("option", { value: "stop", children: "Stop order" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs15("label", { className: "mot-field", htmlFor: `${id}-shares`, children: [
-        /* @__PURE__ */ jsx15("span", { children: "Shares" }),
-        /* @__PURE__ */ jsxs15("span", { className: "mot-input", children: [
-          /* @__PURE__ */ jsx15("button", { type: "button", "aria-label": "One share less", disabled: busy || count <= 1, onClick: () => {
-            setShares(String(Math.max(1, (Number(shares) || 1) - 1)));
-            setError("");
-          }, children: /* @__PURE__ */ jsx15(Minus, { size: 15 }) }),
-          /* @__PURE__ */ jsx15("input", { ref: shareInput, id: `${id}-shares`, inputMode: "numeric", value: shares, disabled: busy, "aria-describedby": error ? `${id}-error` : void 0, onChange: (event) => {
-            setShares(event.target.value.replace(/[^0-9]/g, "").slice(0, 4));
-            setError("");
-          } }),
-          /* @__PURE__ */ jsx15("button", { type: "button", "aria-label": "One share more", disabled: busy || count >= 9999, onClick: () => {
-            setShares(String(Math.min(9999, (Number(shares) || 0) + 1)));
-            setError("");
-          }, children: /* @__PURE__ */ jsx15(Plus2, { size: 15 }) })
-        ] })
-      ] }),
-      type !== "market" && /* @__PURE__ */ jsxs15("label", { className: "mot-field mot-price", htmlFor: `${id}-price`, children: [
-        /* @__PURE__ */ jsx15("span", { children: type === "stop" ? "Stop price" : "Limit price" }),
-        /* @__PURE__ */ jsxs15("span", { className: "mot-input", children: [
-          /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "$" }),
-          /* @__PURE__ */ jsx15("input", { id: `${id}-price`, inputMode: "decimal", value: price, disabled: busy, "aria-describedby": error ? `${id}-error` : void 0, onChange: (event) => {
-            setPrice(event.target.value);
-            setError("");
-          } })
+        /* @__PURE__ */ jsxs15("div", { className: "mot-t-tabs", role: "tablist", "aria-label": "Order side", children: [
+          /* @__PURE__ */ jsx15("span", { className: "mot-t-tabs-pill", "aria-hidden": "true", style: { transform: `translateX(${side === "buy" ? "3px" : "calc(100% + 6px)"})` } }),
+          ["buy", "sell"].map((value, index) => /* @__PURE__ */ jsx15("button", { type: "button", role: "tab", className: "mot-t-tab", "aria-selected": value === side, tabIndex: value === side ? 0 : -1, disabled: busy, onClick: () => setSide(value), onKeyDown: (event) => {
+            if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+              event.preventDefault();
+              const next = event.key === "Home" ? "buy" : event.key === "End" ? "sell" : index === 0 ? "sell" : "buy";
+              setSide(next);
+              event.currentTarget.parentElement?.querySelectorAll('[role="tab"]')[next === "buy" ? 0 : 1]?.focus();
+            }
+          }, children: value === "buy" ? "Buy" : "Sell" }, value))
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "mot-fields", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "mot-field", children: [
+            /* @__PURE__ */ jsx15("span", { className: "mot-field-label", id: `${id}-type-label`, children: "Order type" }),
+            /* @__PURE__ */ jsxs15("div", { className: "mot-type-anchor", ref: menu, children: [
+              /* @__PURE__ */ jsxs15("button", { type: "button", ref: typeButton, className: "mot-box mot-type-btn mot-t-input", "aria-haspopup": "menu", "aria-expanded": menuOpen, "aria-controls": `${id}-types`, "aria-labelledby": `${id}-type-label ${id}-type-value`, disabled: busy, onClick: () => menuOpen ? closeMenu() : openMenu(), onKeyDown: (event) => {
+                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                  event.preventDefault();
+                  openMenu(event.key === "ArrowDown" ? 0 : types.length - 1);
+                }
+              }, children: [
+                /* @__PURE__ */ jsx15("span", { className: "mot-type-btn-label", id: `${id}-type-value`, children: /* @__PURE__ */ jsx15(SwapText, { text: typeInfo.label }) }),
+                /* @__PURE__ */ jsx15("svg", { className: "mot-hi", width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M4.46967 6.46967C4.76256 6.17678 5.23744 6.17678 5.53033 6.46967L8 8.93934L10.4697 6.46967C10.7626 6.17678 11.2374 6.17678 11.5303 6.46967C11.8232 6.76256 11.8232 7.23744 11.5303 7.53033L8.53033 10.5303C8.23744 10.8232 7.76256 10.8232 7.46967 10.5303L4.46967 7.53033C4.17678 7.23744 4.17678 6.76256 4.46967 6.46967Z" }) })
+              ] }),
+              /* @__PURE__ */ jsx15("div", { id: `${id}-types`, className: `mot-t-dropdown${menuOpen ? " mot-is-open" : menuClosing ? " mot-is-closing" : ""}`, role: "menu", "aria-label": "Order type", "aria-hidden": !menuOpen, inert: !menuOpen, onKeyDown: (event) => {
+                const items2 = Array.from(event.currentTarget.querySelectorAll('[role="menuitemradio"]'));
+                const current = items2.indexOf(document.activeElement);
+                const next = event.key === "ArrowDown" ? (current + 1) % items2.length : event.key === "ArrowUp" ? (current + items2.length - 1) % items2.length : event.key === "Home" ? 0 : event.key === "End" ? items2.length - 1 : -1;
+                if (next >= 0) {
+                  event.preventDefault();
+                  items2[next]?.focus();
+                }
+                if (event.key === "Tab") closeMenu();
+              }, children: types.map((item) => /* @__PURE__ */ jsxs15("button", { type: "button", role: "menuitemradio", "aria-checked": item.id === type, className: "mot-menu-item", tabIndex: menuOpen ? 0 : -1, onClick: () => selectType(item.id), children: [
+                /* @__PURE__ */ jsx15("span", { children: item.label }),
+                item.id === type && /* @__PURE__ */ jsx15(CheckMark, {})
+              ] }, item.id)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx15("div", { className: "mot-t-acc", "data-open": type !== "market", "aria-hidden": type === "market", inert: type === "market", children: /* @__PURE__ */ jsx15("div", { className: "mot-t-acc-panel", children: /* @__PURE__ */ jsx15("div", { className: "mot-t-acc-panel-inner", children: /* @__PURE__ */ jsxs15("div", { className: "mot-t-acc-body", children: [
+            /* @__PURE__ */ jsxs15("div", { className: `mot-field mot-t-input-wrap${sharesError.error ? " mot-is-error" : ""}`, children: [
+              /* @__PURE__ */ jsx15("label", { className: "mot-field-label", htmlFor: `${id}-shares`, children: "Shares" }),
+              /* @__PURE__ */ jsxs15("div", { className: `mot-box mot-t-input${sharesError.error ? " mot-is-error" : ""}`, ref: sharesError.box, children: [
+                /* @__PURE__ */ jsx15("button", { type: "button", className: "mot-step", "aria-label": "One share less", disabled: busy, onClick: () => updateShares(String(Math.max(0, count - 1))), children: /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2.25", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M5 12h14" }) }) }),
+                /* @__PURE__ */ jsx15("input", { ref: shareInput, id: `${id}-shares`, inputMode: "numeric", value: shares, disabled: busy, "aria-invalid": sharesError.error, "aria-describedby": sharesError.error ? `${id}-shares-error` : void 0, onChange: (event) => updateShares(event.target.value.replace(/\D/g, "").slice(0, 4)) }),
+                /* @__PURE__ */ jsx15("button", { type: "button", className: "mot-step", "aria-label": "One share more", disabled: busy, onClick: () => updateShares(String(Math.min(9999, count + 1))), children: /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2.25", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M12 4.5v15m7.5-7.5h-15" }) }) })
+              ] }),
+              /* @__PURE__ */ jsx15("p", { className: "mot-t-error-msg", id: `${id}-shares-error`, role: sharesError.error ? "alert" : void 0, children: "Enter at least 1 share" })
+            ] }),
+            /* @__PURE__ */ jsxs15("div", { className: `mot-field mot-t-input-wrap${priceError.error ? " mot-is-error" : ""}`, children: [
+              /* @__PURE__ */ jsx15("label", { className: "mot-field-label", htmlFor: `${id}-price`, children: /* @__PURE__ */ jsx15(SwapText, { text: typeInfo.priceLabel || "Limit price" }) }),
+              /* @__PURE__ */ jsxs15("div", { className: `mot-box mot-price mot-t-input${priceError.error ? " mot-is-error" : ""}`, ref: priceError.box, children: [
+                /* @__PURE__ */ jsx15("span", { className: "mot-prefix", "aria-hidden": "true", children: "$" }),
+                /* @__PURE__ */ jsx15("input", { ref: priceInput, id: `${id}-price`, tabIndex: type === "market" ? -1 : 0, inputMode: "decimal", value: price, disabled: busy, "aria-invalid": priceError.error, "aria-describedby": priceError.error ? `${id}-price-error` : void 0, onChange: (event) => {
+                  setPrice(event.target.value.replace(/[^0-9.]/g, "").replace(/(\..*)\./g, "$1").slice(0, 8));
+                  priceError.clear();
+                  setSubmitError("");
+                } })
+              ] }),
+              /* @__PURE__ */ jsxs15("p", { className: "mot-t-error-msg", id: `${id}-price-error`, role: priceError.error ? "alert" : void 0, children: [
+                "Enter ",
+                typeInfo.hint || "a limit price"
+              ] })
+            ] })
+          ] }) }) }) })
+        ] }),
+        /* @__PURE__ */ jsx15("div", { className: "mot-divider", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs15("div", { className: "mot-total", children: [
+          /* @__PURE__ */ jsx15("span", { className: "mot-total-label", children: "Est. total" }),
+          /* @__PURE__ */ jsxs15("span", { className: "mot-total-value", children: [
+            /* @__PURE__ */ jsx15(PopNumber, { value: totalText }),
+            /* @__PURE__ */ jsx15("span", { className: "mot-sr-only", "aria-live": "polite", children: totalText })
+          ] })
+        ] }),
+        submitError && /* @__PURE__ */ jsx15("p", { className: "mot-submit-error", role: "alert", children: submitError }),
+        /* @__PURE__ */ jsxs15("button", { type: "submit", className: `mot-submit${busy ? " mot-is-loading" : ""}`, "aria-live": "polite", "aria-busy": busy, disabled: busy, children: [
+          /* @__PURE__ */ jsx15("span", { className: "mot-btn-loader", children: /* @__PURE__ */ jsx15("span", { className: "mot-t-matrix", "aria-hidden": "true", children: Array.from({ length: 16 }, (_, index) => /* @__PURE__ */ jsx15("i", { className: [0, 3, 12, 15].includes(index) ? "mot-is-gap" : void 0, style: { "--d": index % 4 * 120 } }, index)) }) }),
+          /* @__PURE__ */ jsx15(SwapText, { text: busy ? "Placing order" : side === "buy" ? "Buy" : "Sell" })
         ] })
       ] }),
-      error && /* @__PURE__ */ jsx15("p", { id: `${id}-error`, className: "mot-error", role: "alert", children: error }),
-      /* @__PURE__ */ jsxs15("div", { className: "mot-total", children: [
-        /* @__PURE__ */ jsx15("span", { children: "Est. total" }),
-        /* @__PURE__ */ jsx15("strong", { children: money(total) }, total)
-      ] }),
-      /* @__PURE__ */ jsx15("button", { type: "submit", className: "mot-submit", disabled: busy, "aria-busy": busy, children: busy ? "Submitting\u2026" : `${side === "buy" ? "Buy" : "Sell"} ${symbol}` }),
-      !onSubmit && /* @__PURE__ */ jsx15("p", { className: "mot-note", children: "Interactive preview \xB7 no real order" })
+      /* @__PURE__ */ jsxs15("section", { className: "mot-t-page mot-page-done", "data-page-id": "2", "aria-hidden": !done, inert: !done, children: [
+        /* @__PURE__ */ jsxs15("div", { className: "mot-done-head", children: [
+          /* @__PURE__ */ jsx15("span", { className: "mot-done-icon", children: /* @__PURE__ */ jsx15(CheckMark, { size: 24 }) }),
+          /* @__PURE__ */ jsx15("h2", { className: "mot-done-title", ref: heading, tabIndex: -1, children: onSubmit ? "Order submitted" : "Order preview ready" }),
+          /* @__PURE__ */ jsx15("p", { className: "mot-done-meta", children: done ? `${done.side === "buy" ? "Buy" : "Sell"} ${done.shares} ${done.symbol} ${description(done)}` : `Buy ${count} ${symbol} at ${money(quote)}` })
+        ] }),
+        /* @__PURE__ */ jsx15("div", { className: "mot-divider", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs15("div", { className: "mot-total", children: [
+          /* @__PURE__ */ jsx15("span", { className: "mot-total-label", children: "Est. total" }),
+          /* @__PURE__ */ jsx15("span", { className: "mot-total-value", children: money(done?.estimatedTotal ?? total) })
+        ] }),
+        /* @__PURE__ */ jsx15("button", { type: "button", className: "mot-again", tabIndex: done ? 0 : -1, onClick: () => {
+          newOrderFocus.current = true;
+          setDone(null);
+        }, children: "New order" })
+      ] })
     ] })
   ] });
 }
 var css3 = `
-.mova-order{--mot-bg:#fff;--mot-fg:#232323;--mot-muted:#777;--mot-chip:#f4f4f4;box-sizing:border-box;width:300px;max-width:100%;padding:24px;border-radius:24px;background:var(--mot-bg);color:var(--mot-fg);border:1px solid #88888818;box-shadow:0 8px 32px -4px #0000000c;font:400 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.mova-order[data-theme=dark]{--mot-bg:#1d1d1d;--mot-fg:#f2f2f2;--mot-muted:#aaa;--mot-chip:#2c2c2c;color-scheme:dark}.mova-order *{box-sizing:border-box}.mova-order h2,.mova-order p{margin:0}.mova-order h2{font-size:16px;line-height:22px;font-weight:500}.mova-order button,.mova-order input,.mova-order select{font:inherit;color:inherit}.mova-order button{border:0;cursor:pointer}.mova-order button:disabled{cursor:default;opacity:.5}.mova-order :focus-visible{outline:2px solid #7696e9;outline-offset:3px}.mova-order header{display:flex;align-items:flex-start;gap:8px}.mova-order header>div:first-child{min-width:0;flex:1}.mova-order header p{font-size:12px;color:var(--mot-muted);overflow-wrap:anywhere}.mot-quote{display:flex;flex-direction:column;align-items:flex-end;flex:none;font-variant-numeric:tabular-nums}.mot-quote small{padding:0 6px;font-size:10px;line-height:18px;border-radius:20px;background:#e7f8ef;color:#327b59}.mova-order[data-theme=dark] .mot-quote small{background:#254636;color:#a1dbb9}.mot-quote small[data-negative=true]{background:#fbe9e9;color:#ad3c3c}.mova-order[data-theme=dark] .mot-quote small[data-negative=true]{background:#4c2b2b;color:#ffaaaa}.mot-side{display:flex;gap:4px;background:var(--mot-chip);padding:4px;border-radius:24px;margin:18px 0}.mot-side button{background:none;flex:1;padding:7px;border-radius:20px;color:var(--mot-muted);transition:background 180ms}.mot-side button[aria-pressed=true]{background:var(--mot-bg);color:var(--mot-fg);box-shadow:0 1px 3px #0002}.mot-type{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;color:var(--mot-muted)}.mot-type select{min-width:0;max-width:65%;background:transparent;border:0;cursor:pointer;font-size:12px}.mot-type option{background:var(--mot-bg)}.mot-field{display:flex;flex-direction:column;gap:7px;margin-top:12px;font-size:12px;color:var(--mot-muted)}.mot-input{display:flex;align-items:center;border-radius:10px;background:var(--mot-chip);padding:5px;min-height:38px;color:var(--mot-fg)}.mot-input>span{padding-left:8px}.mot-input button{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:6px;background:none}.mot-input button:hover{background:#88888820}.mot-input input{width:100%;min-width:0;text-align:center;background:none;border:0;padding:3px;outline:none;font-variant-numeric:tabular-nums}.mot-price input{text-align:right;padding-right:8px}.mot-input:focus-within{outline:2px solid #7696e9;outline-offset:2px}.mot-total{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #88888820;padding-top:16px;margin-top:20px}.mot-total>span{color:var(--mot-muted)}.mot-total strong{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;animation:mot-appear 200ms ease-out}.mot-submit{display:block;width:100%;margin-top:18px;padding:11px 12px;border-radius:24px;background:var(--mot-fg);color:var(--mot-bg)!important;transition:opacity 150ms,transform 150ms}.mot-submit:active{transform:scale(.98)}.mot-note{color:var(--mot-muted);font-size:10px;text-align:center;margin-top:8px!important}.mot-error{font-size:12px;color:#d34c4c;margin-top:12px!important}.mot-done{min-height:276px;display:flex;flex-direction:column;justify-content:center;animation:mot-appear 240ms ease-out}.mot-check{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--mot-chip);margin-bottom:16px}.mot-done>p{font-size:12px;color:var(--mot-muted);margin-top:6px}.mot-done h2:focus{outline:none}@keyframes mot-appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mova-order *{animation:none!important;transition:none!important}}
+.mova-order{--stage-fg:#0d0d0d;--stage-muted:#6c6c6c;--stage-border:rgba(0,0,0,.08);--stage-surface:#fff;--stage-accent:#17181c;--stage-on-accent:#fff;color-scheme:light;font:400 13px/20px "Inter Variable",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-optical-sizing:auto;font-feature-settings:"liga" 1,"calt" 1;letter-spacing:0;-webkit-font-smoothing:antialiased}
+.mova-order[data-theme=dark]{--stage-fg:#f2f2f2;--stage-muted:rgba(202,202,202,.7);--stage-border:rgba(255,255,255,.08);--stage-surface:#1d1d1d;--stage-accent:#fff;--stage-on-accent:#0d0d0d;color-scheme:dark}
+.mova-order *{box-sizing:border-box}
+.mova-order {
+  --page-slide-dur: 250ms;
+  --page-fade-dur: 250ms;
+  --page-slide-distance: 8px;
+  --page-blur: 3px;
+  --page-stagger: 0ms;
+  --page-exit-enabled: 1;
+  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --matrix-cycle: 1200ms;
+  --matrix-base: color-mix(in srgb, var(--stage-on-accent) 35%, transparent);
+  --matrix-active: var(--stage-on-accent);
+  --matrix-ease: ease-in-out;
+  --done-pop-dur: 500ms;
+  --done-pop-scale: 0.6;
+  --shake-distance: 6px;
+  --shake-overshoot: 4px;
+  --shake-dur-a: 80ms;
+  --shake-dur-b: 60ms;
+  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --revert-hold: 3000ms;
+  --revert-dur: 280ms;
+  --digit-dur: 500ms;
+  --digit-distance: 8px;
+  --digit-stagger: 70ms;
+  --digit-blur: 2px;
+  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
+  --digit-dir-x: 0;
+  --digit-dir-y: 1;
+  --tabs-dur: 250ms;
+  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --tabs-text-muted: var(--stage-muted);
+  --tabs-text-active: var(--stage-fg);
+  --tabs-bar-bg: var(--chip);
+  --tabs-pill-bg: var(--stage-surface);
+  --text-swap-dur: 150ms;
+  --text-swap-translate-y: 4px;
+  --text-swap-blur: 2px;
+  --text-swap-ease: ease-in-out;
+  --press-scale: 0.99;
+  --press-dur: 150ms;
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --duration-quick: 150ms;
+  --ease-out: ease-out;
+
+  --dropdown-open-dur: 250ms;
+  --dropdown-close-dur: 150ms;
+  --dropdown-pre-scale: 0.97;
+  --dropdown-closing-scale: 0.99;
+  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --acc-expand: 250ms;
+  --acc-collapse: 250ms;
+  --acc-chevron: 250ms;
+  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --menu-shadow: 0 4px 42px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.06);
+
+  --chip: rgba(0,0,0,.04);
+  --chip-hover: rgba(0,0,0,.06);
+  --chip-press: rgba(0,0,0,.08);
+  --ring-soft: rgba(0,0,0,.06);
+  --err: #EC4A4A;
+  --divider: color-mix(in srgb, var(--stage-border) 49%, transparent);
+  --badge-fill: #E7F9F3;
+  --badge-ink: #216E55;
+  --pill-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
+  --cta-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
+  --cta-hover: rgba(255,255,255,.06);
+  --card-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 32px -4px rgba(0,0,0,.06), 0 1px 3px 0 rgba(0,0,0,.04);
+}
+.mova-order[data-theme="dark"] {
+  --chip: rgba(255,255,255,.07);
+  --chip-hover: rgba(255,255,255,.10);
+  --chip-press: rgba(255,255,255,.08);
+  --ring-soft: rgba(255,255,255,.10);
+  --err: #FF6B6B;
+  --badge-fill: rgba(33,110,85,.28);
+  --badge-ink: #7FDDB8;
+  --tabs-pill-bg: rgba(255,255,255,.10);
+  --pill-shadow: 0 1px 2px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
+  --cta-shadow: 0 1px 2px 0 rgba(0,0,0,.4);
+  --cta-hover: rgba(0,0,0,.06);
+  --card-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 32px -4px rgba(0,0,0,.3), 0 1px 3px 0 rgba(0,0,0,.2);
+}
+
+.mova-order {
+  width: 300px;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 24px;
+  border-radius: 24px;
+  background: var(--stage-surface);
+  box-shadow: var(--card-shadow);
+  color: var(--stage-fg);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+:where(.mova-order) :is(button, input) { font: inherit; color: inherit; }
+:where(.mova-order) button { padding: 0; border: 0; background: none; cursor: pointer; }
+:where(.mova-order) p { margin: 0; }
+.mova-order :focus-visible:not(input) {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--stage-surface), 0 0 0 4px var(--stage-accent);
+}
+
+.mot-head { display: flex; align-items: flex-start; gap: 12px; }
+.mot-head-main { flex: 1; min-width: 0; }
+.mot-ticker { font-size: 16px; line-height: 22px; font-weight: 500; margin: 0; }
+.mot-company { font-size: 12px; line-height: 16px; color: var(--stage-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mot-quote { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
+.mot-quote-price { font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
+.mot-badge {
+  display: inline-flex; align-items: center;
+  height: 18px; padding: 0 6px; border-radius: 50px;
+  font-size: 11px; line-height: 16px; font-weight: 500;
+  background: var(--badge-fill); color: var(--badge-ink);
+  box-shadow: 0 1px 3px rgba(0,0,0,.04), inset 0 0 0 1px color-mix(in srgb, var(--badge-ink) 14%, transparent), inset 0 -1px 0 0 color-mix(in srgb, var(--badge-ink) 10%, transparent);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Tabs sliding */
+.mot-t-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border-radius: 48px;
+  background: var(--tabs-bar-bg);
+}
+.mot-t-tab {
+  position: relative;
+  flex: 1;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  height: 30px;
+  padding: 4px 12px;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--tabs-text-muted);
+  cursor: pointer;
+  border-radius: 48px;
+  z-index: 1;
+  --press-scale: 0.97;
+  transition: color var(--tabs-dur) var(--tabs-ease), transform var(--press-dur) var(--ease-smooth-out);
+}
+.mova-order .mot-t-tab { color: var(--tabs-text-muted); }
+.mova-order .mot-t-tab[aria-selected="true"] { color: var(--tabs-text-active); }
+@media (hover: hover) and (pointer: fine) { .mova-order .mot-t-tab:not([aria-selected="true"]):hover { color: var(--tabs-text-active); } }
+.mot-t-tabs-pill {
+  position: absolute;
+  top: 3px;
+  left: 0;
+  height: 30px;
+  width: calc((100% - 9px) / 2);
+  background: var(--tabs-pill-bg);
+  box-shadow: var(--pill-shadow);
+  border-radius: 48px;
+  transform: translateX(0);
+  transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease);
+  will-change: transform, width;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* Fields */
+.mot-fields { display: flex; flex-direction: column; gap: 4px; }
+.mot-field {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  column-gap: 12px;
+}
+.mot-field-label { font-size: 13px; line-height: 20px; }
+.mot-box {
+  width: 136px;
+  height: 36px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+  border-radius: 10px;
+  background: var(--stage-surface);
+  box-shadow: 0 0 0 1px var(--stage-border);
+}
+.mot-t-input {
+  transition: box-shadow var(--duration-quick) var(--ease-out);
+  will-change: transform;
+}
+.mot-box:focus-within { box-shadow: 0 0 0 1px var(--stage-accent), 0 0 0 3px var(--ring-soft); }
+.mot-t-input.mot-is-error,
+.mot-t-input.mot-is-error:focus-within {
+  box-shadow: 0 0 0 1px var(--err), 0 0 0 3px color-mix(in srgb, var(--err) 14%, transparent);
+  transition: box-shadow var(--revert-dur, 280ms) ease-out;
+}
+.mot-box input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  outline: none;
+  background: none;
+  padding: 0;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  color: var(--stage-fg);
+  text-align: center;
+}
+.mot-box.mot-price { padding: 0 12px; gap: 2px; }
+.mot-box.mot-price input { text-align: right; }
+.mot-prefix { font-size: 13px; line-height: 20px; color: var(--stage-muted); }
+.mot-step {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  display: grid;
+  place-items: center;
+  color: var(--stage-muted);
+  --press-scale: 0.95;
+  transition: background-color var(--duration-quick) var(--ease-out), transform var(--press-dur) var(--ease-smooth-out);
+}
+@media (hover: hover) and (pointer: fine) { .mot-step:hover { background: var(--chip); } }
+.mot-step:is(:active,.mot-is-pressed) { background: var(--chip-press); transform: scale(var(--press-scale)); }
+
+.mot-t-error-msg {
+  grid-column: 1 / -1;
+  margin: 4px 0 0;
+  height: 16px;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: right;
+  color: var(--err);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear var(--revert-dur, 280ms);
+}
+.mot-t-input-wrap.mot-is-error .mot-t-error-msg {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear 0s;
+}
+.mot-t-input.mot-is-shaking {
+  animation: mot-t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
+}
+@keyframes mot-t-input-shake {
+  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
+  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
+  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
+  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
+  100%    { transform: translateX(0); }
+}
+
+/* Total */
+.mot-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--divider) 20%, var(--divider) 80%, transparent); }
+.mot-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 20px; }
+.mot-total-label { color: var(--stage-muted); }
+.mot-total-value { font-variant-numeric: tabular-nums; }
+
+@keyframes mot-t-digit-pop-in {
+  0% {
+    transform: translate(calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)));
+    opacity: 0;
+    filter: blur(var(--digit-blur));
+  }
+  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
+}
+.mot-t-digit-group { display: inline-flex; align-items: baseline; }
+.mot-t-digit { display: inline-block; white-space: pre; }
+.mot-t-digit-group.mot-is-animating .mot-t-digit { animation: mot-t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }
+.mot-t-digit-group.mot-is-animating .mot-t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
+.mot-t-digit-group.mot-is-animating .mot-t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }
+.mot-t-digit-group.mot-is-animating .mot-t-digit[data-same] { animation: none; }
+
+/* Submit */
+.mot-submit {
+  height: 36px;
+  width: 100%;
+  border-radius: 40px;
+  background: var(--stage-accent);
+  color: var(--stage-on-accent);
+  box-shadow: var(--cta-shadow);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  padding: 0 12px;
+  overflow: hidden;
+  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-out);
+}
+.mova-order .mot-submit { color: var(--stage-on-accent); }
+@media (hover: hover) and (pointer: fine) { .mot-submit:hover { background-image: linear-gradient(var(--cta-hover), var(--cta-hover)); } }
+.mot-submit:is(:active,.mot-is-pressed) { transform: scale(var(--press-scale)); }
+.mot-t-tab:is(:active,.mot-is-pressed) { transform: scale(var(--press-scale)); }
+
+.mot-t-text-swap {
+  display: inline-block;
+  transform: translateY(0);
+  filter: blur(0);
+  opacity: 1;
+  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
+}
+.mot-t-text-swap.mot-is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
+.mot-t-text-swap.mot-is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }
+
+/* Page side-by-side */
+.mot-t-page-slide { position: relative; display: grid; }
+.mot-t-page-slide .mot-t-page[data-page-id="1"] { --t-page-from-x: calc(var(--page-slide-distance) * -1); }
+.mot-t-page-slide .mot-t-page[data-page-id="2"] { --t-page-from-x: var(--page-slide-distance); }
+.mot-t-page-slide .mot-t-page {
+  grid-area: 1 / 1;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
+  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
+  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);
+}
+.mot-t-page-slide[data-page="1"] .mot-t-page[data-page-id="1"],
+.mot-t-page-slide[data-page="2"] .mot-t-page[data-page-id="2"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  filter: blur(0);
+  transition-delay: var(--page-stagger);
+}
+.mot-page-form { display: flex; flex-direction: column; gap: 16px; }
+.mot-page-done { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; text-align: center; }
+.mot-done-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.mot-done-icon {
+  width: 48px; height: 48px; border-radius: 50%;
+  display: grid; place-items: center;
+  margin-bottom: 8px;
+  background: var(--badge-fill); color: var(--badge-ink);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-ink) 14%, transparent);
+  opacity: 0;
+  transform: scale(var(--done-pop-scale));
+  transition: opacity var(--done-pop-dur) var(--ease-smooth-out), transform var(--done-pop-dur) var(--ease-smooth-out);
+}
+.mot-t-page-slide[data-page="2"] .mot-done-icon { opacity: 1; transform: scale(1); transition-delay: var(--page-slide-dur); }
+.mot-done-title { font-size: 16px; line-height: 22px; font-weight: 500; }
+.mot-done-meta { font-size: 12px; line-height: 16px; color: var(--stage-muted); }
+.mot-again {
+  height: 36px; width: 100%; border-radius: 40px;
+  background: var(--chip); color: var(--stage-fg);
+  font-size: 13px; line-height: 20px; font-weight: 500;
+  --press-scale: 0.97;
+  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-out);
+}
+@media (hover: hover) and (pointer: fine) { .mot-again:hover { background: var(--chip-hover); } }
+.mot-again:is(:active,.mot-is-pressed) { background: var(--chip-press); transform: scale(var(--press-scale)); }
+
+/* Matrix dot loader */
+.mot-btn-loader { position: absolute; left: 16px; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity var(--duration-quick) var(--ease-out); }
+.mot-submit.mot-is-loading .mot-btn-loader { opacity: 1; }
+.mot-submit { position: relative; }
+.mot-t-matrix { display: grid; grid-template-columns: repeat(4, 2px); grid-auto-rows: 2px; gap: 2px; }
+.mot-t-matrix i { display: block; background: var(--matrix-base); animation: mot-t-matrix-pulse var(--matrix-cycle) var(--matrix-ease) infinite; animation-delay: calc(var(--d, 0) * 1ms); }
+.mot-t-matrix i.mot-is-gap { visibility: hidden; animation: none; }
+@keyframes mot-t-matrix-pulse {
+  0%, 45%, 100% { background-color: var(--matrix-base); }
+  15% { background-color: var(--matrix-active); }
+}
+
+.mot-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .mot-t-input { animation: none !important; transform: none !important; }
+  .mot-t-digit-group .mot-t-digit { animation: none !important; }
+  .mot-t-tabs-pill, .mot-t-tab { transition: none !important; }
+  .mot-t-text-swap { transition: none !important; }
+  .mot-t-page-slide .mot-t-page, .mot-done-icon { transition: none !important; }
+  .mot-t-matrix i { animation: none !important; }
+  .mot-again:is(:active,.mot-is-pressed) { transform: none; }
+  .mot-submit:is(:active,.mot-is-pressed), .mot-step:is(:active,.mot-is-pressed), .mot-t-tab:is(:active,.mot-is-pressed) { transform: none; }
+}
+/* Order type menu */
+.mova-order[data-theme="dark"] { --menu-shadow: 0 1px 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(196,196,196,.08); }
+.mot-type-anchor { position: relative; }
+.mot-box.mot-type-btn {
+  width: 136px;
+  justify-content: space-between;
+  padding: 0 10px 0 12px;
+  gap: 6px;
+  font-size: 13px;
+  line-height: 20px;
+  --press-scale: 0.97;
+  transition: box-shadow var(--duration-quick) var(--ease-out), transform var(--press-dur) var(--ease-smooth-out);
+}
+.mot-box.mot-type-btn:is(:active,.mot-is-pressed) { transform: scale(var(--press-scale)); }
+.mot-type-btn .mot-hi, .mot-type-btn [data-icon] { color: var(--stage-muted); flex: none; }
+.mot-type-btn-label { overflow: hidden; white-space: nowrap; }
+.mova-order .mot-box.mot-type-btn:focus-visible { box-shadow: 0 0 0 1px var(--stage-accent), 0 0 0 3px var(--ring-soft); }
+.mot-t-dropdown {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  z-index: 5;
+  width: 168px;
+  box-sizing: border-box;
+  padding: 6px;
+  border-radius: 12px;
+  background: var(--stage-surface);
+  box-shadow: var(--menu-shadow);
+  transform-origin: top right;
+  transform: scale(var(--dropdown-pre-scale));
+  opacity: 0;
+  pointer-events: none;
+  transition: transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease);
+  will-change: transform, opacity;
+}
+.mot-t-dropdown.mot-is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
+.mot-t-dropdown.mot-is-closing {
+  transform: scale(var(--dropdown-closing-scale));
+  opacity: 0;
+  pointer-events: none;
+  transition: transform var(--dropdown-close-dur) var(--dropdown-ease), opacity var(--dropdown-close-dur) var(--dropdown-ease);
+}
+.mot-menu-item {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 6px 0 8px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: left;
+  --press-scale: 0.97;
+  transition: background-color var(--duration-quick) var(--ease-out), transform var(--press-dur) var(--ease-smooth-out);
+}
+@media (hover: hover) and (pointer: fine) { .mot-menu-item:hover { background: var(--chip); } }
+.mot-menu-item:is(:active,.mot-is-pressed) { background: var(--chip-press); transform: scale(var(--press-scale)); }
+.mot-menu-item [data-icon], .mot-menu-item .mot-hi { color: var(--stage-muted); }
+
+/* Accordion expand */
+.mot-t-acc { margin: -4px -4px; }
+.mot-t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
+.mot-t-acc[data-open="true"] .mot-t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
+.mot-t-acc-panel-inner {
+  min-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  filter: blur(2px);
+  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
+}
+.mot-t-acc[data-open="true"] .mot-t-acc-panel-inner {
+  opacity: 1;
+  filter: blur(0);
+  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
+}
+.mot-t-acc-body { padding: 4px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .mot-t-dropdown, .mot-box.mot-type-btn, .mot-menu-item { transition: none !important; }
+  .mot-box.mot-type-btn:is(:active,.mot-is-pressed), .mot-menu-item:is(:active,.mot-is-pressed) { transform: none; }
+  .mot-t-acc-panel, .mot-t-acc-panel-inner, .mot-t-acc-chevron { transition: none !important; }
+}
+
+/* Icons: Heroicons (outline), Copyright (c) Tailwind Labs, Inc. MIT License */
+.mot-hi-play{translate:1px 0}.mot-hi-heart{translate:0 1px}
+
+/* Touch press feedback stays local to this component. */
+.mova-order :is(button,[role="tab"],[role="menuitemradio"]){-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-touch-callout:none}
+
+.mova-order .mot-done-title{margin:0}
+.mova-order .mot-done-title:focus{outline:none;box-shadow:none}
+.mova-order button:disabled{cursor:default}
+.mova-order .mot-badge[data-negative=true]{--badge-fill:#fbe9e9;--badge-ink:#ad3c3c}
+.mova-order[data-theme=dark] .mot-badge[data-negative=true]{--badge-fill:#4c2b2b;--badge-ink:#ffaaaa}
+.mova-order .mot-submit-error{font-size:12px;line-height:16px;color:var(--err)}
+@media(prefers-reduced-motion:reduce){.mova-order *{animation:none!important;transition:none!important}.mova-order .mot-t-text-swap{transform:none;filter:none;opacity:1}}
 `;
 
 // .generated/ui/cards/imessage-chat.tsx
 import * as React4 from "react";
-import { ArrowUp, RotateCcw, Video } from "lucide-react";
+import { Video } from "lucide-react";
 import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var conversation = [
   { id: "1", text: "Are we still on for Saturday?", direction: "incoming" },
@@ -4434,329 +5400,1469 @@ var conversation = [
   { id: "4", text: "The good kind this time", direction: "incoming" },
   { id: "5", text: "You're the best", direction: "outgoing" }
 ];
-function IMessageChat({ name = "Maya Chen", avatar, deliveryStatus, initialMessages = conversation, onSend, onVideoCall, theme = "light", className = "", style } = {}) {
+var defaultAvatar = "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=64&h=64";
+var replies = ["Love that", "See you there!", "Haha deal", "Bringing snacks too"];
+function IMessageChat({ name = "Maya Chen", avatar = defaultAvatar, deliveryStatus, initialMessages = conversation, onSend, onAudioCall, onVideoCall, theme = "light", className = "", style } = {}) {
   const [messages, setMessages] = React4.useState(initialMessages);
   const [draft, setDraft] = React4.useState("");
   const [status, setStatus] = React4.useState("Read");
+  const [statusPhase, setStatusPhase] = React4.useState("stable");
+  const [receiptAfter, setReceiptAfter] = React4.useState(initialMessages[initialMessages.length - 1]?.id);
+  const [newMessages, setNewMessages] = React4.useState(() => /* @__PURE__ */ new Set());
+  const [receiptNew, setReceiptNew] = React4.useState(false);
+  const [typing, setTyping] = React4.useState(false);
+  const [tooltip, setTooltip] = React4.useState({ text: "", visible: false, width: 0, x: 0 });
+  const [pressed, setPressed] = React4.useState();
   const thread = React4.useRef(null);
+  const input = React4.useRef(null);
+  const statusText = React4.useRef(null);
+  const tooltipText = React4.useRef(null);
+  const actions = React4.useRef(null);
+  const tooltipTrigger = React4.useRef(null);
+  const timers = React4.useRef([]);
+  const pressTimer = React4.useRef(void 0);
+  const pressStarted = React4.useRef(0);
+  const initiallyScrolled = React4.useRef(false);
   const sequence = React4.useRef(0);
+  const replyIndex = React4.useRef(0);
   const instanceId = React4.useId();
+  const tooltipId = `${instanceId}-tooltip`;
+  function clearTimers() {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+  }
+  function later(callback, delay) {
+    timers.current.push(setTimeout(callback, delay));
+  }
+  React4.useEffect(() => () => {
+    clearTimers();
+    clearTimeout(pressTimer.current);
+  }, []);
   React4.useEffect(() => {
-    if (thread.current) thread.current.scrollTop = thread.current.scrollHeight;
-  }, [messages]);
+    if (!thread.current) return;
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    thread.current.scrollTo({ top: thread.current.scrollHeight, behavior: !initiallyScrolled.current || reduced ? "auto" : "smooth" });
+    initiallyScrolled.current = true;
+  }, [messages, typing]);
+  React4.useLayoutEffect(() => {
+    if (statusPhase !== "enter") return;
+    void statusText.current?.offsetHeight;
+    setStatusPhase("stable");
+  }, [statusPhase]);
+  React4.useLayoutEffect(() => {
+    if (!tooltip.visible || !tooltipText.current || !tooltipTrigger.current || !actions.current) return;
+    const width = Math.ceil(tooltipText.current.scrollWidth + 24);
+    const group = actions.current.getBoundingClientRect();
+    const trigger = tooltipTrigger.current.getBoundingClientRect();
+    const x = Math.min(trigger.left - group.left + trigger.width / 2 - width / 2, group.width + 6 - width);
+    setTooltip((current) => current.width === width && current.x === x ? current : { ...current, width, x });
+  }, [tooltip.text, tooltip.visible]);
+  function showTooltip(event, text) {
+    tooltipTrigger.current = event.currentTarget;
+    setTooltip((current) => ({ ...current, text, visible: true }));
+  }
+  function hideTooltip() {
+    setTooltip((current) => ({ ...current, visible: false }));
+  }
+  function press(event) {
+    if (event.pointerType === "mouse") return;
+    clearTimeout(pressTimer.current);
+    pressStarted.current = performance.now();
+    setPressed(event.currentTarget.dataset.press);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+  function releasePress() {
+    pressTimer.current = setTimeout(() => setPressed(void 0), Math.max(0, 150 - (performance.now() - pressStarted.current)));
+  }
+  function finishAnimation(id, event) {
+    if (event.animationName !== "mic-pop") return;
+    setNewMessages((current) => {
+      const next = new Set(current);
+      next.delete(id);
+      return next;
+    });
+  }
   function send(event) {
     event.preventDefault();
     const text = draft.trim();
     if (!text) return;
-    setMessages((current) => [...current, { id: `${instanceId}-sent-${++sequence.current}`, text, direction: "outgoing" }]);
+    clearTimers();
+    const id = `${instanceId}-sent-${++sequence.current}`;
+    setTyping(false);
+    setMessages((current) => [...current, { id, text, direction: "outgoing" }]);
+    setNewMessages((current) => new Set(current).add(id));
+    setReceiptAfter(id);
+    setReceiptNew(true);
+    setStatus("Delivered");
+    setStatusPhase("stable");
     setDraft("");
-    setStatus("Sent");
+    later(() => {
+      setStatusPhase("exit");
+      later(() => {
+        setStatus("Read");
+        setStatusPhase("enter");
+      }, 150);
+    }, 1200);
+    later(() => setTyping(true), 1800);
+    later(() => {
+      setTyping(false);
+      const replyId = `${instanceId}-reply-${++sequence.current}`;
+      const reply = replies[replyIndex.current++ % replies.length];
+      setMessages((current) => [...current, { id: replyId, text: reply, direction: "incoming" }]);
+      setNewMessages((current) => new Set(current).add(replyId));
+    }, 3400);
     onSend?.(text);
   }
+  const receipt = /* @__PURE__ */ jsx16("div", { className: `mic-status${receiptNew ? " mic-new" : ""}`, role: "status", onAnimationEnd: (event) => {
+    if (event.animationName === "mic-pop") setReceiptNew(false);
+  }, children: /* @__PURE__ */ jsx16("span", { ref: statusText, className: `mic-text-swap${statusPhase === "exit" ? " mic-exit" : statusPhase === "enter" ? " mic-enter-start" : ""}`, children: deliveryStatus ?? status }) }, "receipt");
+  const contents = [/* @__PURE__ */ jsx16("div", { className: "mic-time", children: "Today 9:41 AM" }, "timestamp")];
+  messages.forEach((message) => {
+    contents.push(/* @__PURE__ */ jsx16("div", { className: `mic-bubble mic-${message.direction}${newMessages.has(message.id) ? " mic-new" : ""}`, onAnimationEnd: (event) => finishAnimation(message.id, event), children: message.text }, message.id));
+    if (message.id === receiptAfter) contents.push(receipt);
+  });
+  if (!messages.length) contents.push(receipt);
+  if (typing) contents.push(/* @__PURE__ */ jsxs16("div", { className: "mic-bubble mic-incoming mic-typing mic-new", "aria-label": `${name.split(" ")[0]} is typing`, children: [
+    /* @__PURE__ */ jsx16("i", {}),
+    /* @__PURE__ */ jsx16("i", {}),
+    /* @__PURE__ */ jsx16("i", {})
+  ] }, "typing"));
   return /* @__PURE__ */ jsxs16("section", { className: `mova-imessage ${className}`, "data-theme": theme, style, "aria-label": `Conversation with ${name}`, children: [
     /* @__PURE__ */ jsx16("style", { children: css4 }),
     /* @__PURE__ */ jsxs16("header", { children: [
-      /* @__PURE__ */ jsx16("span", { className: "mic-avatar", children: avatar ? /* @__PURE__ */ jsx16("img", { src: avatar, alt: "" }) : name.split(" ").map((word) => word[0]).slice(0, 2).join("") }),
+      /* @__PURE__ */ jsx16("span", { className: "mic-avatar", children: avatar ? /* @__PURE__ */ jsx16("img", { src: avatar, alt: name, width: 32, height: 32 }) : name.split(" ").map((word) => word[0]).slice(0, 2).join("") }),
       /* @__PURE__ */ jsxs16("div", { className: "mic-person", children: [
         /* @__PURE__ */ jsx16("strong", { children: name }),
         /* @__PURE__ */ jsx16("span", { children: "iMessage" })
       ] }),
-      /* @__PURE__ */ jsx16("button", { type: "button", "aria-label": "Restart conversation", title: "Restart conversation", onClick: () => {
-        setMessages(initialMessages);
-        setStatus("Read");
-      }, children: /* @__PURE__ */ jsx16(RotateCcw, { size: 16 }) }),
-      onVideoCall && /* @__PURE__ */ jsx16("button", { type: "button", "aria-label": `Video call ${name}`, onClick: onVideoCall, children: /* @__PURE__ */ jsx16(Video, { size: 17 }) })
+      /* @__PURE__ */ jsxs16("span", { className: "mic-actions", ref: actions, onPointerLeave: hideTooltip, children: [
+        /* @__PURE__ */ jsx16("button", { type: "button", className: "mic-icon", "aria-label": "Audio call", "aria-describedby": tooltipId, "data-press": "audio", "data-pressed": pressed === "audio", onPointerDown: press, onPointerUp: releasePress, onPointerCancel: releasePress, onPointerEnter: (event) => showTooltip(event, "Audio call"), onFocus: (event) => showTooltip(event, "Audio call"), onBlur: hideTooltip, onClick: () => {
+          hideTooltip();
+          onAudioCall?.();
+        }, children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.25", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" }) }) }),
+        onVideoCall && /* @__PURE__ */ jsx16("button", { type: "button", className: "mic-icon", "aria-label": `Video call ${name}`, "aria-describedby": tooltipId, "data-press": "video", "data-pressed": pressed === "video", onPointerDown: press, onPointerUp: releasePress, onPointerCancel: releasePress, onPointerEnter: (event) => showTooltip(event, "Video call"), onFocus: (event) => showTooltip(event, "Video call"), onBlur: hideTooltip, onClick: () => {
+          hideTooltip();
+          onVideoCall();
+        }, children: /* @__PURE__ */ jsx16(Video, { size: 16 }) }),
+        /* @__PURE__ */ jsx16("span", { className: "mic-tooltip", id: tooltipId, role: "tooltip", "aria-hidden": !tooltip.visible, "data-show": tooltip.visible, style: { width: tooltip.width, "--mic-tooltip-x": `${tooltip.x}px` }, children: /* @__PURE__ */ jsx16("span", { ref: tooltipText, children: tooltip.text }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: "mic-thread", ref: thread, role: "log", "aria-label": "Messages", "aria-relevant": "additions", children: /* @__PURE__ */ jsxs16("div", { className: "mic-messages", children: [
-      /* @__PURE__ */ jsx16("div", { className: "mic-time", children: "Today 9:41 AM" }),
-      messages.map((message) => /* @__PURE__ */ jsx16("div", { className: `mic-bubble mic-${message.direction}`, children: message.text }, message.id)),
-      /* @__PURE__ */ jsx16("div", { className: "mic-status", role: "status", children: deliveryStatus ?? status })
-    ] }) }),
-    /* @__PURE__ */ jsxs16("form", { onSubmit: send, children: [
-      /* @__PURE__ */ jsx16("input", { "aria-label": "Message", placeholder: "iMessage", value: draft, maxLength: 2e3, onChange: (event) => setDraft(event.target.value) }),
-      /* @__PURE__ */ jsx16("button", { type: "submit", "aria-label": "Send message", disabled: !draft.trim(), children: /* @__PURE__ */ jsx16(ArrowUp, { size: 18 }) })
-    ] })
+    /* @__PURE__ */ jsx16("div", { className: "mic-divider", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx16("div", { className: "mic-thread", ref: thread, role: "log", "aria-label": "Messages", "aria-live": "polite", "aria-relevant": "additions", children: /* @__PURE__ */ jsx16("div", { className: "mic-messages", children: contents }) }),
+    /* @__PURE__ */ jsx16("form", { onSubmit: send, children: /* @__PURE__ */ jsxs16("label", { className: "mic-field", children: [
+      /* @__PURE__ */ jsx16("input", { ref: input, type: "text", "aria-label": "Message", placeholder: "iMessage", autoComplete: "off", value: draft, maxLength: 2e3, onChange: (event) => setDraft(event.target.value) }),
+      /* @__PURE__ */ jsx16("button", { type: "submit", className: `mic-send${draft.trim() ? " mic-ready" : ""}`, "aria-label": "Send", "aria-disabled": !draft.trim(), "data-press": "send", "data-pressed": pressed === "send", onPointerDown: press, onPointerUp: releasePress, onPointerCancel: releasePress, onClick: () => input.current?.focus(), children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.25", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" }) }) })
+    ] }) })
   ] });
 }
 var css4 = `
-.mova-imessage{--mic-bg:#fff;--mic-fg:#202124;--mic-muted:#727479;--mic-soft:#f0f0f2;--mic-line:#dfdfe3;box-sizing:border-box;width:300px;max-width:100%;border-radius:24px;background:var(--mic-bg);color:var(--mic-fg);font:400 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 1px 3px #0000000a,0 8px 32px -4px #00000010;border:1px solid #88888818;overflow:hidden}
-.mova-imessage[data-theme=dark]{--mic-bg:#1d1d1d;--mic-fg:#f2f2f2;--mic-muted:#a2a2a8;--mic-soft:#313133;--mic-line:#49494c;color-scheme:dark}
-.mova-imessage *{box-sizing:border-box}.mova-imessage button,.mova-imessage input{font:inherit}.mova-imessage button{border:0;cursor:pointer;display:grid;place-items:center;flex:none;background:transparent;color:inherit;width:32px;height:32px;border-radius:50%;transition:background 160ms,transform 160ms}.mova-imessage button:hover{background:var(--mic-soft)}.mova-imessage button:active{transform:scale(.95)}.mova-imessage :focus-visible{outline:2px solid #3478f6;outline-offset:3px}.mova-imessage header{display:flex;gap:10px;align-items:center;padding:16px;border-bottom:1px solid #88888814}.mic-avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#c7b0a1;color:#433b37;font-size:11px;font-weight:600;overflow:hidden}.mic-avatar img{width:100%;height:100%;object-fit:cover}.mic-person{flex:1;min-width:0;display:flex;flex-direction:column}.mic-person strong{font-size:15px;font-weight:500;overflow-wrap:anywhere}.mic-person span,.mic-time,.mic-status{font-size:12px;line-height:16px;color:var(--mic-muted)}.mic-thread{height:252px;overflow:auto;padding:12px 16px;overscroll-behavior:contain}.mic-messages{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}.mic-time{align-self:center;margin-bottom:8px}.mic-bubble{max-width:82%;padding:8px 12px;border-radius:18px;overflow-wrap:anywhere;animation:mic-enter 240ms ease-out both}.mic-incoming{align-self:flex-start;background:var(--mic-soft);border-bottom-left-radius:5px}.mic-outgoing{align-self:flex-end;background:#2767f4;color:#fff;border-bottom-right-radius:5px}.mic-status{align-self:flex-end;margin-top:2px}.mova-imessage form{margin:12px 16px 16px;border:1px solid var(--mic-line);border-radius:24px;display:flex;align-items:center;padding:3px;gap:4px}.mova-imessage input{min-width:0;width:100%;border:0;outline:none;background:transparent;color:inherit;padding:4px 8px}.mova-imessage form:focus-within{outline:2px solid #3478f6;outline-offset:2px}.mova-imessage form button{background:#2767f4;color:#fff;width:28px;height:28px}.mova-imessage form button:hover{background:#1759e1}.mova-imessage form button:disabled{background:var(--mic-soft);color:var(--mic-muted);cursor:default}@keyframes mic-enter{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mova-imessage *{animation:none!important;transition:none!important}}
+.mova-imessage{--mic-bg:#fff;--mic-fg:#0d0d0d;--mic-muted:#6c6c6c;--mic-chip:rgba(0,0,0,.04);--mic-bubble-in:rgba(0,0,0,.05);--mic-bubble-out:#1c5ffb;--mic-input-line:rgba(0,0,0,.14);--mic-input-focus:#585858;--mic-divider:rgba(0,0,0,.0392);--mic-tooltip-bg:#fff;--mic-tooltip-fg:#2f2f2f;box-sizing:border-box;width:300px;max-width:100%;display:flex;flex-direction:column;border-radius:24px;background:var(--mic-bg);color:var(--mic-fg);font:400 13px/20px "Inter Variable",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;box-shadow:0 0 0 1px #0000000a,0 8px 32px -4px #0000000f,0 1px 3px #0000000a;overflow:hidden;-webkit-font-smoothing:antialiased}
+.mova-imessage[data-theme=dark]{--mic-bg:#1d1d1d;--mic-fg:#f2f2f2;--mic-muted:rgba(202,202,202,.7);--mic-chip:rgba(255,255,255,.07);--mic-bubble-in:rgba(255,255,255,.08);--mic-bubble-out:#2f6bff;--mic-input-line:rgba(255,255,255,.14);--mic-input-focus:#a5a5a5;--mic-divider:rgba(255,255,255,.0392);--mic-tooltip-bg:#262626;--mic-tooltip-fg:#f2f2f2;color-scheme:dark}
+.mova-imessage *{box-sizing:border-box}.mova-imessage button,.mova-imessage input{font:inherit;letter-spacing:inherit}.mova-imessage button{padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.mova-imessage button:is(:active,[data-pressed=true]){transform:scale(.95)}.mova-imessage :focus-visible:not(input){outline:none;box-shadow:0 0 0 2px var(--mic-bg),0 0 0 4px var(--mic-fg)}.mova-imessage header{display:flex;gap:12px;align-items:center;padding:16px;position:relative;z-index:2}.mic-avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#c7b0a1;color:#433b37;font-size:12.8px;font-weight:500;line-height:1;overflow:hidden}.mic-avatar img{display:block;width:32px;height:32px;border-radius:50%;object-fit:cover;outline:1px solid #00000014;outline-offset:-1px}.mova-imessage[data-theme=dark] .mic-avatar img{outline-color:#ffffff14}.mic-person{flex:1;min-width:0;display:flex;flex-direction:column}.mic-person strong{font-size:15px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mic-person>span,.mic-time,.mic-status{font-size:12px;line-height:16px;color:var(--mic-muted)}.mic-actions{position:relative;display:inline-flex;flex:none;gap:4px;margin-right:-6px}.mova-imessage .mic-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--mic-muted);transition:transform 150ms cubic-bezier(.22,1,.36,1),background-color 150ms cubic-bezier(.22,1,.36,1)}@media(hover:hover) and (pointer:fine){.mova-imessage .mic-icon:hover{background:var(--mic-chip)}}.mic-tooltip{position:absolute;top:calc(100% + 8px);left:0;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;translate:var(--mic-tooltip-x,0px) 0;scale:.98;transform-origin:50% 0;padding:8px 12px;border-radius:8px;background:var(--mic-tooltip-bg);color:var(--mic-tooltip-fg);font-size:12px;line-height:16px;white-space:nowrap;box-shadow:0 0 0 1px #0000000f,0 2px 6px #0000000d,0 4px 42px #0000000f;opacity:0;pointer-events:none;z-index:3;transition:opacity 50ms ease-out,scale 50ms ease-out,translate 160ms cubic-bezier(.22,1,.36,1),width 160ms cubic-bezier(.22,1,.36,1)}.mic-tooltip[data-show=true]{opacity:1;scale:1;transition:opacity 150ms ease-out 80ms,scale 150ms ease-out 80ms,translate 160ms cubic-bezier(.22,1,.36,1),width 160ms cubic-bezier(.22,1,.36,1)}.mic-tooltip>span{white-space:nowrap}.mic-divider{height:1px;flex:none;background:linear-gradient(90deg,transparent,var(--mic-divider) 20%,var(--mic-divider) 80%,transparent)}.mic-thread{box-sizing:content-box;height:228px;display:flex;flex-direction:column;overflow-y:auto;padding:12px 16px;scrollbar-width:none;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px);mask-image:linear-gradient(to bottom,transparent,#000 16px)}.mic-thread::-webkit-scrollbar{display:none}.mic-messages{margin-top:auto;display:flex;flex-direction:column;gap:2px}.mic-time{align-self:center;margin-bottom:8px}.mic-bubble{box-sizing:content-box;max-width:78%;padding:8px 12px;border-radius:18px;font-size:13px;line-height:20px;overflow-wrap:anywhere;text-wrap:pretty;transition:border-radius 250ms cubic-bezier(.22,1,.36,1)}.mic-incoming{align-self:flex-start;background:var(--mic-bubble-in);border-bottom-left-radius:6px;transform-origin:0 100%}.mic-outgoing{align-self:flex-end;background:var(--mic-bubble-out);color:#fff;border-bottom-right-radius:6px;transform-origin:100% 100%}.mic-incoming:has(+.mic-incoming){border-bottom-left-radius:18px}.mic-outgoing:has(+.mic-outgoing){border-bottom-right-radius:18px}.mic-incoming+.mic-outgoing,.mic-outgoing+.mic-incoming,.mic-status+.mic-bubble{margin-top:6px}.mic-status{align-self:flex-end;padding:2px 4px 0 0;transform-origin:100% 0}.mic-new{animation:mic-pop 500ms cubic-bezier(.34,1.36,.64,1) both,mic-fade 400ms cubic-bezier(.22,1,.36,1) both}@keyframes mic-pop{from{transform:translateY(8px) scale(.92)}to{transform:none}}@keyframes mic-fade{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}.mic-bubble.mic-typing{display:flex;align-items:center;gap:4px;padding:14px 12px}.mic-typing i{width:6px;height:6px;border-radius:50%;background:var(--mic-muted);animation:mic-typing 1200ms ease-in-out infinite}.mic-typing i:nth-child(2){animation-delay:180ms}.mic-typing i:nth-child(3){animation-delay:360ms}@keyframes mic-typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}.mic-text-swap{display:inline-block;transform:translateY(0);filter:blur(0);opacity:1;transition:transform 150ms ease-in-out,filter 150ms ease-in-out,opacity 150ms ease-in-out;will-change:transform,filter,opacity}.mic-text-swap.mic-exit{transform:translateY(-4px);filter:blur(2px);opacity:0}.mic-text-swap.mic-enter-start{transform:translateY(4px);filter:blur(2px);opacity:0;transition:none}.mova-imessage form{padding:8px 16px 16px;margin:0}.mic-field{display:flex;align-items:center;gap:8px;height:36px;padding:0 4px 0 14px;border-radius:40px;background:var(--mic-bg);box-shadow:inset 0 0 0 1px var(--mic-input-line);transition:box-shadow 120ms ease;cursor:text}.mic-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--mic-input-focus)}.mova-imessage input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;color:var(--mic-fg);font-size:13px;line-height:20px}.mova-imessage input::placeholder{color:var(--mic-muted)}.mova-imessage .mic-send{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--mic-chip);color:var(--mic-muted);transition:transform 150ms cubic-bezier(.22,1,.36,1),background-color 150ms cubic-bezier(.22,1,.36,1),color 150ms cubic-bezier(.22,1,.36,1)}.mova-imessage .mic-send[aria-disabled=true]{cursor:default}.mova-imessage .mic-send.mic-ready{background:var(--mic-bubble-out);color:#fff}@media(prefers-reduced-motion:reduce){.mova-imessage *{animation:none!important;transition:none!important}.mova-imessage .mic-typing i{opacity:.6}.mova-imessage button:is(:active,[data-pressed=true]){transform:none}}
 `;
 
 // .generated/ui/cards/liquid-glass-sheet.tsx
 import * as React5 from "react";
-import { Check as Check3, Copy, Heart, Link, Play, Share2, X } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
-function LiquidGlassSheet({ title = "Autumn forest", subtitle = "Liquid glass sheet", backgroundImage, link = "https://mova-ui.com", defaultOpen = true, onOpenChange, onSaveChange, onPlay, onShare, theme = "light", className = "", style } = {}) {
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var FOREST_IMAGE = "https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?auto=format&fit=crop&q=80&w=800";
+var DEFAULT_LINK = "https://liquid-glass-react-studio.vercel.app/components";
+function refractionMap(width, height, radius, depth) {
+  const resolution = Math.min(1, 280 / Math.max(width, height));
+  const w = Math.max(8, Math.round(width * resolution));
+  const h = Math.max(8, Math.round(height * resolution));
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const context = canvas.getContext("2d");
+  if (!context) return "";
+  const pixels = context.createImageData(w, h);
+  const halfW = w / 2, halfH = h / 2;
+  const corner = Math.min(radius * resolution, halfW - 1, halfH - 1);
+  const rimWidth = Math.max(3, (4 + depth / 100 * Math.min(w, h) * 0.42) * resolution);
+  const distance = (x, y) => {
+    const qx = Math.abs(x) - halfW + corner;
+    const qy = Math.abs(y) - halfH + corner;
+    return Math.hypot(Math.max(0, qx), Math.max(0, qy)) + Math.min(0, Math.max(qx, qy)) - corner;
+  };
+  for (let index = 0; index < w * h; index++) {
+    const x = index % w + 0.5 - halfW;
+    const y = Math.floor(index / w) + 0.5 - halfH;
+    const d = distance(x, y);
+    let red = 128, green = 128;
+    if (d <= 0.5) {
+      const edge = Math.pow(1 - Math.min(1, Math.max(0, -d) / rimWidth), 0.72);
+      const curved = edge * edge * (3 - 2 * edge);
+      const dx = distance(x + 1, y) - distance(x - 1, y);
+      const dy = distance(x, y + 1) - distance(x, y - 1);
+      const length = Math.hypot(dx, dy) || 1;
+      const face = 0.18 * (1 - curved);
+      red = Math.round(128 + 127 * (dx / length * curved + x / halfW * face));
+      green = Math.round(128 + 127 * (dy / length * curved + y / halfH * face));
+    }
+    pixels.data.set([Math.max(0, Math.min(255, red)), Math.max(0, Math.min(255, green)), 128, 255], index * 4);
+  }
+  context.putImageData(pixels, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+function GlassMaterial({ id, width, height, radius, depth, refraction, dispersion, liquidity }) {
+  const [map, setMap] = React5.useState("");
+  React5.useEffect(() => {
+    setMap(refractionMap(width, height, radius, depth));
+  }, [width, height, radius, depth]);
+  const bend = refraction / 100 * 0.36;
+  const spread = bend * dispersion / 100 * 0.4;
+  const wobble = liquidity / 100 * 0.06;
+  const channelMap = wobble > 2e-3 ? "warped" : "normal";
+  return /* @__PURE__ */ jsx17("svg", { width: "0", height: "0", style: { position: "absolute" }, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx17("filter", { id, x: "-.08", y: "-.08", width: "1.16", height: "1.16", filterUnits: "objectBoundingBox", primitiveUnits: "objectBoundingBox", colorInterpolationFilters: "sRGB", children: map && /* @__PURE__ */ jsxs17(Fragment9, { children: [
+    /* @__PURE__ */ jsx17("feImage", { href: map, x: "0", y: "0", width: "1", height: "1", preserveAspectRatio: "none", result: "normal" }),
+    wobble > 2e-3 && /* @__PURE__ */ jsxs17(Fragment9, { children: [
+      /* @__PURE__ */ jsx17("feTurbulence", { type: "fractalNoise", baseFrequency: ".012 .016", numOctaves: 1, seed: 7, result: "noise" }),
+      /* @__PURE__ */ jsx17("feDisplacementMap", { in: "normal", in2: "noise", scale: wobble, xChannelSelector: "R", yChannelSelector: "G", result: "warped" })
+    ] }),
+    /* @__PURE__ */ jsx17("feDisplacementMap", { in: "SourceGraphic", in2: channelMap, scale: Math.max(0, bend - spread), xChannelSelector: "R", yChannelSelector: "G", result: "red" }),
+    /* @__PURE__ */ jsx17("feColorMatrix", { in: "red", type: "matrix", values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0", result: "redOnly" }),
+    /* @__PURE__ */ jsx17("feDisplacementMap", { in: "SourceGraphic", in2: channelMap, scale: bend, xChannelSelector: "R", yChannelSelector: "G", result: "green" }),
+    /* @__PURE__ */ jsx17("feColorMatrix", { in: "green", type: "matrix", values: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0", result: "greenOnly" }),
+    /* @__PURE__ */ jsx17("feDisplacementMap", { in: "SourceGraphic", in2: channelMap, scale: bend + spread * 1.15, xChannelSelector: "R", yChannelSelector: "G", result: "blue" }),
+    /* @__PURE__ */ jsx17("feColorMatrix", { in: "blue", type: "matrix", values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0", result: "blueOnly" }),
+    /* @__PURE__ */ jsx17("feComposite", { in: "redOnly", in2: "greenOnly", operator: "arithmetic", k2: "1", k3: "1", result: "redGreen" }),
+    /* @__PURE__ */ jsx17("feComposite", { in: "redGreen", in2: "blueOnly", operator: "arithmetic", k2: "1", k3: "1" })
+  ] }) }) });
+}
+function Icon2({ kind, className = "", strokeWidth = 2.25, draw = false }) {
+  const paths = {
+    share: "M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z",
+    save: "M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z",
+    check: "M5.25 12.7033 9.40385 17.37 18.75 6.87",
+    globe: "M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418",
+    copy: "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+  };
+  return /* @__PURE__ */ jsx17("svg", { className: `mgs-icon ${className}`, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth, "aria-hidden": "true", children: /* @__PURE__ */ jsx17("path", { className: draw ? "mgs-tick" : void 0, pathLength: kind === "check" ? 1 : void 0, d: paths[kind] }) });
+}
+async function copyText(text) {
+  const previous = document.activeElement;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.readOnly = true;
+  Object.assign(textarea.style, { position: "fixed", top: "0", left: "0", opacity: "0", pointerEvents: "none" });
+  document.body.append(textarea);
+  textarea.select();
+  let copied = false;
+  try {
+    copied = document.execCommand("copy");
+  } catch {
+  }
+  textarea.remove();
+  previous?.focus({ preventScroll: true });
+  if (copied) return true;
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function LiquidGlassSheet({ title = "Autumn forest", subtitle = "Liquid glass sheet", backgroundImage = FOREST_IMAGE, link = DEFAULT_LINK, linkLabel = "liquid-glass-react-studio", defaultOpen = true, onOpenChange, onSaveChange, onShare, theme = "light", className = "", style } = {}) {
   const [open, setOpen] = React5.useState(defaultOpen);
+  const [mounted, setMounted] = React5.useState(defaultOpen);
   const [saved, setSaved] = React5.useState(false);
-  const [status, setStatus] = React5.useState("");
+  const [status, setStatus] = React5.useState("idle");
+  const [touched, setTouched] = React5.useState(false);
+  const [highlight2, setHighlight] = React5.useState(null);
   const [drag, setDrag] = React5.useState(0);
-  const start = React5.useRef(null);
+  const [dragging, setDragging] = React5.useState(false);
+  const [closing, setClosing] = React5.useState(false);
   const trigger = React5.useRef(null);
-  const panel = React5.useRef(null);
-  const titleId = React5.useId();
+  const list = React5.useRef(null);
+  const dragStart = React5.useRef(null);
+  const dragOffset = React5.useRef(0);
+  const timer = React5.useRef(void 0);
+  const closeTimer = React5.useRef(void 0);
+  const frames = React5.useRef([]);
+  const attempt = React5.useRef(0);
+  const id = `mgs-${React5.useId().replace(/:/g, "")}`;
   const wasOpened = React5.useRef(false);
-  function changeOpen(value) {
-    setOpen(value);
-    setDrag(0);
-    onOpenChange?.(value);
-    if (!value) trigger.current?.focus();
-  }
   React5.useEffect(() => {
-    if (open && wasOpened.current) panel.current?.querySelector("button")?.focus();
+    if (open && wasOpened.current) list.current?.querySelector("button")?.focus({ preventScroll: true });
     wasOpened.current = true;
   }, [open]);
+  React5.useEffect(() => () => {
+    clearTimeout(timer.current);
+    clearTimeout(closeTimer.current);
+    frames.current.forEach(cancelAnimationFrame);
+    attempt.current++;
+  }, []);
+  function changeOpen(next) {
+    if (next === open) return;
+    clearTimeout(closeTimer.current);
+    if (next) {
+      setMounted(true);
+      setClosing(false);
+    } else {
+      setClosing(true);
+      setHighlight(null);
+      closeTimer.current = setTimeout(() => {
+        setMounted(false);
+        setClosing(false);
+      }, 350);
+    }
+    setOpen(next);
+    setDrag(0);
+    dragOffset.current = 0;
+    dragStart.current = null;
+    setDragging(false);
+    onOpenChange?.(next);
+    if (!next) requestAnimationFrame(() => trigger.current?.focus({ preventScroll: true }));
+  }
   async function copy() {
-    try {
-      await navigator.clipboard.writeText(link);
-      setStatus("Link copied");
-    } catch {
-      setStatus("Copy unavailable. Select the link below.");
-    }
+    const current = ++attempt.current;
+    clearTimeout(timer.current);
+    frames.current.forEach(cancelAnimationFrame);
+    const copied2 = await copyText(link);
+    if (current !== attempt.current) return;
+    setTouched(true);
+    setStatus("idle");
+    frames.current = [requestAnimationFrame(() => {
+      frames.current.push(requestAnimationFrame(() => {
+        if (current !== attempt.current) return;
+        setStatus(copied2 ? "copied" : "failed");
+        timer.current = setTimeout(() => setStatus("idle"), copied2 ? 1800 : 1400);
+      }));
+    })];
   }
   function keys(event) {
+    if (!open) return;
     if (event.key === "Escape") {
       event.preventDefault();
       changeOpen(false);
+      return;
     }
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      const buttons = Array.from(panel.current?.querySelectorAll("button") ?? []);
-      const at = buttons.indexOf(document.activeElement);
-      event.preventDefault();
-      buttons[(at + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
-    }
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+    const buttons = Array.from(list.current?.querySelectorAll("button") ?? []);
+    const index = buttons.indexOf(document.activeElement);
+    event.preventDefault();
+    buttons[(index + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
   }
-  return /* @__PURE__ */ jsxs17("section", { className: `mova-glass-sheet ${className}`, "data-theme": theme, style: { ...style, ...backgroundImage ? { backgroundImage: `url(${JSON.stringify(backgroundImage)})` } : {} }, "aria-label": title, children: [
+  function endDrag(cancelled = false) {
+    if (dragStart.current === null) return;
+    dragStart.current = null;
+    setDragging(false);
+    if (!cancelled && dragOffset.current > 90) changeOpen(false);
+    dragOffset.current = 0;
+    setDrag(0);
+  }
+  const copied = status === "copied", failed = status === "failed";
+  const filterStyle = { "--mgs-pane-filter": `url(#${id}-pane)`, "--mgs-trigger-filter": `url(#${id}-trigger)` };
+  return /* @__PURE__ */ jsxs17("section", { className: `mova-glass-sheet${open ? " is-open" : ""} ${className}`, "data-theme": theme, onKeyDown: keys, style: { ...filterStyle, backgroundImage: `url(${JSON.stringify(backgroundImage)})`, ...style }, "aria-label": title, children: [
     /* @__PURE__ */ jsx17("style", { children: css5 }),
-    /* @__PURE__ */ jsxs17("div", { className: "mgs-forest", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx17("i", {}),
-      /* @__PURE__ */ jsx17("i", {}),
-      /* @__PURE__ */ jsx17("i", {}),
-      /* @__PURE__ */ jsx17("i", {}),
-      /* @__PURE__ */ jsx17("i", {}),
-      /* @__PURE__ */ jsx17("i", {})
-    ] }),
-    /* @__PURE__ */ jsx17("button", { type: "button", className: "mgs-trigger", ref: trigger, "aria-expanded": open, "aria-controls": `${titleId}-sheet`, onClick: () => changeOpen(!open), children: open ? "Close sheet" : "Open sheet" }),
-    open && /* @__PURE__ */ jsxs17("section", { className: "mgs-panel", ref: panel, id: `${titleId}-sheet`, "aria-labelledby": titleId, onKeyDown: keys, style: { transform: `translateY(${drag}px)` }, children: [
-      /* @__PURE__ */ jsx17("div", { className: "mgs-grab", onPointerDown: (event) => {
-        start.current = event.clientY;
-        event.currentTarget.setPointerCapture(event.pointerId);
-      }, onPointerMove: (event) => {
-        if (start.current !== null) setDrag(Math.max(0, event.clientY - start.current));
-      }, onPointerUp: () => {
-        start.current = null;
-        if (drag > 60) changeOpen(false);
-        else setDrag(0);
-      }, onPointerCancel: () => {
-        start.current = null;
-        setDrag(0);
-      }, "aria-hidden": "true", children: /* @__PURE__ */ jsx17("span", {}) }),
-      /* @__PURE__ */ jsxs17("header", { children: [
-        /* @__PURE__ */ jsxs17("div", { children: [
-          /* @__PURE__ */ jsx17("h2", { id: titleId, children: title }),
-          /* @__PURE__ */ jsx17("p", { children: subtitle })
+    /* @__PURE__ */ jsx17(GlassMaterial, { id: `${id}-pane`, width: 304, height: 244, radius: 28, depth: 30, refraction: 78, dispersion: 42, liquidity: 6 }),
+    /* @__PURE__ */ jsx17(GlassMaterial, { id: `${id}-trigger`, width: 132, height: 44, radius: 22, depth: 26, refraction: 60, dispersion: 30, liquidity: 4 }),
+    /* @__PURE__ */ jsx17("div", { className: `mgs-scrim mgs-t-modal${open ? " is-open" : ""}${closing ? " is-closing" : ""}`, onClick: () => changeOpen(false), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx17("button", { type: "button", className: "mgs-trigger", ref: trigger, "aria-label": "Open sheet", "aria-expanded": open, "aria-controls": `${id}-sheet`, "aria-hidden": open, tabIndex: open ? -1 : 0, onClick: () => changeOpen(true), children: /* @__PURE__ */ jsx17("span", { children: "Open sheet" }) }),
+    /* @__PURE__ */ jsxs17("div", { className: `mgs-sheet${dragging ? " is-dragging" : ""}`, role: "dialog", "aria-labelledby": `${id}-title`, "aria-hidden": !open, inert: !open, id: `${id}-sheet`, style: { "--drag": `${drag}px` }, children: [
+      /* @__PURE__ */ jsx17("div", { className: "mgs-glass", "data-open": open }),
+      /* @__PURE__ */ jsx17("div", { className: "mgs-t-panel-slide mgs-panel", "data-open": open, children: mounted && /* @__PURE__ */ jsxs17("div", { className: "mgs-body", children: [
+        /* @__PURE__ */ jsx17("button", { type: "button", className: "mgs-grab", "aria-label": "Drag down to close", onPointerDown: (event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          dragStart.current = event.clientY;
+          setDragging(true);
+        }, onPointerMove: (event) => {
+          if (dragStart.current === null) return;
+          const delta = event.clientY - dragStart.current;
+          dragOffset.current = delta >= 0 ? delta : -Math.pow(-delta, 0.6) * 2;
+          setDrag(dragOffset.current);
+        }, onPointerUp: () => endDrag(), onPointerCancel: () => endDrag(true), onClick: (event) => {
+          if (event.detail === 0) changeOpen(false);
+        }, children: /* @__PURE__ */ jsx17("span", {}) }),
+        /* @__PURE__ */ jsxs17("header", { className: "mgs-head", children: [
+          /* @__PURE__ */ jsx17("h2", { id: `${id}-title`, className: "mgs-title", children: title }),
+          /* @__PURE__ */ jsx17("p", { className: "mgs-meta", children: subtitle })
         ] }),
-        /* @__PURE__ */ jsx17("button", { type: "button", className: "mgs-close", "aria-label": "Close sheet", onClick: () => changeOpen(false), children: /* @__PURE__ */ jsx17(X, { size: 15 }) })
-      ] }),
-      /* @__PURE__ */ jsxs17("button", { type: "button", className: "mgs-row", onClick: () => {
-        onPlay?.();
-        setStatus("Preview selected");
-      }, children: [
-        /* @__PURE__ */ jsx17(Play, { size: 16 }),
-        /* @__PURE__ */ jsx17("span", { children: "Play preview" })
-      ] }),
-      /* @__PURE__ */ jsxs17("button", { type: "button", className: "mgs-row", onClick: () => {
-        onShare?.();
-        if (!onShare) void copy();
-        else setStatus("Share selected");
-      }, children: [
-        /* @__PURE__ */ jsx17(Share2, { size: 16 }),
-        /* @__PURE__ */ jsx17("span", { children: "Share" })
-      ] }),
-      /* @__PURE__ */ jsxs17("button", { type: "button", className: "mgs-row", "aria-pressed": saved, onClick: () => {
-        setSaved(!saved);
-        onSaveChange?.(!saved);
-      }, children: [
-        saved ? /* @__PURE__ */ jsx17(Check3, { size: 16 }) : /* @__PURE__ */ jsx17(Heart, { size: 16 }),
-        /* @__PURE__ */ jsx17("span", { children: saved ? "Saved to favorites" : "Save to favorites" })
-      ] }),
-      /* @__PURE__ */ jsxs17("button", { type: "button", className: "mgs-row", onClick: () => void copy(), children: [
-        /* @__PURE__ */ jsx17(Link, { size: 16 }),
-        /* @__PURE__ */ jsx17("span", { children: status === "Link copied" ? status : "Copy link" }),
-        /* @__PURE__ */ jsx17(Copy, { size: 14 })
-      ] }),
-      status && /* @__PURE__ */ jsxs17("p", { className: "mgs-status", role: "status", children: [
-        status,
-        status.startsWith("Copy unavailable") && /* @__PURE__ */ jsx17("input", { "aria-label": "Link to copy", readOnly: true, value: link, onFocus: (event) => event.currentTarget.select() })
-      ] })
-    ] })
+        /* @__PURE__ */ jsxs17("div", { className: "mgs-list", ref: list, onMouseLeave: () => setHighlight(null), children: [
+          /* @__PURE__ */ jsx17("span", { className: "mgs-hl", style: { transform: `translateY(${(highlight2 ?? 0) * 44}px)`, opacity: highlight2 === null ? 0 : 1 } }),
+          /* @__PURE__ */ jsxs17("button", { type: "button", className: "mgs-row", onMouseEnter: () => setHighlight(0), onFocus: () => setHighlight(0), onBlur: () => setHighlight(null), onClick: () => {
+            onShare?.();
+            changeOpen(false);
+          }, children: [
+            /* @__PURE__ */ jsx17(Icon2, { kind: "share" }),
+            /* @__PURE__ */ jsx17("span", { className: "mgs-label", children: "Share" })
+          ] }),
+          /* @__PURE__ */ jsxs17("button", { type: "button", className: `mgs-row${saved ? " mgs-saved" : ""}`, "aria-pressed": saved, onMouseEnter: () => setHighlight(1), onFocus: () => setHighlight(1), onBlur: () => setHighlight(null), onClick: () => {
+            setSaved(!saved);
+            onSaveChange?.(!saved);
+          }, children: [
+            /* @__PURE__ */ jsxs17("span", { className: "mgs-slot", children: [
+              /* @__PURE__ */ jsx17(Icon2, { kind: "save", className: "mgs-icon-a" }),
+              /* @__PURE__ */ jsx17(Icon2, { kind: "check", className: "mgs-icon-b", strokeWidth: 3 })
+            ] }),
+            /* @__PURE__ */ jsx17("span", { className: "mgs-label", children: saved ? "Saved" : "Save" })
+          ] }),
+          /* @__PURE__ */ jsxs17("div", { className: `mgs-linkrow${copied ? " is-copied" : ""}${failed ? " is-failed" : ""}`, onMouseEnter: () => setHighlight(2), onFocus: () => setHighlight(2), onBlur: () => setHighlight(null), children: [
+            /* @__PURE__ */ jsxs17("button", { type: "button", className: "mgs-row mgs-linkmain", "aria-label": copied ? "Link copied" : failed ? "Copy blocked" : "Copy link", onClick: () => void copy(), children: [
+              /* @__PURE__ */ jsxs17("span", { className: "mgs-slot", children: [
+                /* @__PURE__ */ jsx17(Icon2, { kind: "globe", className: "mgs-icon-a" }),
+                /* @__PURE__ */ jsx17(Icon2, { kind: "check", className: "mgs-icon-b", strokeWidth: 3, draw: true })
+              ] }),
+              /* @__PURE__ */ jsx17("span", { className: `mgs-label${touched ? " mgs-label-anim" : ""}`, children: copied ? "Link copied" : failed ? "Copy blocked" : linkLabel }, status)
+            ] }),
+            /* @__PURE__ */ jsx17("button", { type: "button", className: "mgs-copy", "aria-label": "Copy link", onClick: () => void copy(), children: /* @__PURE__ */ jsx17(Icon2, { kind: "copy" }) })
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx17("span", { className: "mgs-status", role: "status", "aria-live": "polite", children: copied ? "Link copied" : failed ? "Copy blocked" : "" })
   ] });
 }
 var css5 = `
-.mova-glass-sheet{box-sizing:border-box;position:relative;width:320px;max-width:100%;height:380px;isolation:isolate;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 68% 10%,#d6b85a44,transparent 50%),linear-gradient(160deg,#687349,#293e26 45%,#8a5c2f);background-size:cover;background-position:center;color:white;font:400 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 8px 32px #00000018}.mova-glass-sheet *{box-sizing:border-box}.mgs-forest{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:.75;background:radial-gradient(ellipse at 65% 12%,#f4d57388,transparent 40%),radial-gradient(ellipse at 20% 70%,#8d633199,transparent 40%)}.mgs-forest i{position:absolute;top:-10%;bottom:-10%;width:12px;background:linear-gradient(90deg,#16251c,#35402c,#1b291f);transform:rotate(-8deg);left:10%;box-shadow:25px 0 60px #13261f55}.mgs-forest i:nth-child(2){left:29%;width:20px;transform:rotate(8deg)}.mgs-forest i:nth-child(3){left:48%;width:8px}.mgs-forest i:nth-child(4){left:68%;width:24px;transform:rotate(5deg)}.mgs-forest i:nth-child(5){left:91%;width:18px}.mgs-forest i:nth-child(6){left:80%;width:5px;opacity:.7}.mova-glass-sheet button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}.mova-glass-sheet button:focus-visible{outline:2px solid #fff;outline-offset:-3px}.mgs-trigger{position:absolute;top:24px;left:50%;transform:translateX(-50%);border:1px solid #ffffff60!important;background:#ffffff20!important;backdrop-filter:blur(10px);padding:10px 20px;border-radius:22px;white-space:nowrap;box-shadow:inset 0 1px #ffffff60,0 3px 10px #0002}.mgs-panel{position:absolute;left:8px;right:8px;bottom:8px;max-height:calc(100% - 82px);overflow:auto;border:1px solid #ffffff50;border-radius:28px;padding:0 8px 8px;background:#43513966;backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 1px #ffffffa0,inset 0 -1px 1px #ffffff40,0 20px 44px #0004;animation:mgs-enter 300ms cubic-bezier(.2,.8,.2,1);transition:transform 180ms ease-out}.mgs-grab{height:24px;display:grid;place-items:center;touch-action:none;cursor:grab}.mgs-grab span{width:36px;height:5px;border-radius:5px;background:#ffffffb0}.mgs-panel header{display:flex;align-items:center;padding:0 12px 8px;gap:8px}.mgs-panel header>div{flex:1;min-width:0}.mgs-panel h2{margin:0;font-size:16px;line-height:22px;font-weight:500;overflow-wrap:anywhere}.mgs-panel header p{margin:0;opacity:.85;font-size:12px}.mgs-close{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;flex:none}.mgs-row{display:flex;align-items:center;text-align:left;gap:10px;width:100%;min-height:42px;border-radius:15px;padding:10px!important;transition:background 160ms}.mgs-row span{flex:1;min-width:0;overflow-wrap:anywhere}.mgs-row svg{flex:none}.mgs-row:hover,.mgs-row:focus-visible,.mgs-close:hover{background:#ffffff26}.mgs-status{font-size:11px;margin:4px 12px;line-height:16px}.mgs-status input{width:100%;background:#0004;color:#fff;border:1px solid #fff8;border-radius:4px;padding:4px;font:inherit}@keyframes mgs-enter{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.mova-glass-sheet *{animation:none!important;transition:none!important}}@media(prefers-reduced-transparency:reduce){.mgs-panel{background:#3c4a35;backdrop-filter:none}}
+.mova-glass-sheet{
+  --panel-open-dur: 400ms;
+  --panel-close-dur: 350ms;
+  --panel-translate-y: 100px;
+  --panel-blur: 2px;
+  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --modal-open-dur: 250ms;
+  --modal-close-dur: 150ms;
+  --modal-scale: 0.96;
+  --modal-scale-close: 0.96;
+  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --scrim-dur:150ms;
+  --hl-dur:250ms;
+  --hl-ease:cubic-bezier(0.22,1,0.36,1);
+  --icon-dur:250ms;
+  --press-scale:0.97;
+  --press-dur:150ms;
+  --ease-smooth-out:cubic-bezier(0.22,1,0.36,1);
+  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
+  --mgs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --mgs-ease-liquid: cubic-bezier(0.16, 1, 0.3, 1);
+  --mgs-press: 160ms;
+}
+
+.mova-glass-sheet{position:relative;box-sizing:border-box;width:320px;max-width:100%;height:360px;font:400 13px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;border-radius:24px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 8px 32px -4px rgba(0,0,0,.06),0 1px 3px 0 rgba(0,0,0,.04);color:#fff}
+.mova-glass-sheet :is(button,a){font:inherit;color:inherit;text-decoration:none}
+.mova-glass-sheet :where(button){border:0;background:none;padding:0;cursor:pointer}
+.mgs-scrim{position:absolute;inset:0;background:rgba(0,0,0,.28)}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Compact iOS 26 glass trigger (44px full-round capsule) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.mova-glass-sheet .mgs-trigger{
+  position:absolute;
+  left:50%;
+  bottom:28px;
+  translate:-50% 0;
+  isolation:isolate;
+  overflow:hidden;
+  box-sizing:border-box;
+  width:auto;
+  height:44px;
+  padding:0 22px;
+  border-radius:999px;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  white-space:nowrap;
+  color:#fff;
+  font-size:15px;
+  line-height:20px;
+  font-weight:600;
+  letter-spacing:-0.01em;
+  text-shadow:0 1px 2px rgb(0 0 0 / 0.25);
+  background:rgb(255 255 255 / 0.10);
+  -webkit-backdrop-filter:var(--mgs-trigger-filter) blur(2px) saturate(170%);
+  backdrop-filter:var(--mgs-trigger-filter) blur(2px) saturate(170%);
+  box-shadow:
+    inset 1.5px 1.5px 0.5px -0.5px rgb(255 255 255 / 0.12),
+    inset -1px -1px 0.5px -0.5px rgb(255 255 255 / 0.04),
+    inset 0 0 0 1px rgb(255 255 255 / 0.18),
+    0 0 0 0.5px rgb(255 255 255 / 0.22),
+    0 8px 24px rgb(0 0 0 / 0.18);
+  transition:
+    transform 380ms var(--ease-spring),
+    box-shadow var(--mgs-press) var(--mgs-ease-out),
+    opacity var(--scrim-dur) var(--ease-smooth-out);
+}
+.mgs-trigger::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  z-index:-1;
+  border-radius:inherit;
+  pointer-events:none;
+  background:radial-gradient(70% 55% at 69.8% 30.2%, rgb(255 255 255 / 0.035) 0%, transparent 46%);
+  mix-blend-mode:plus-lighter;
+  opacity:0;
+  transition:opacity 240ms var(--mgs-ease-out);
+}
+.mgs-trigger:hover::before{opacity:1}
+.mgs-trigger::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  z-index:-1;
+  border-radius:inherit;
+  pointer-events:none;
+  background:radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.48) 22%, rgb(255 255 255 / 0.1) 48%, transparent 65%);
+  mix-blend-mode:plus-lighter;
+  opacity:0;
+  transform:scale(0.65);
+  transition:opacity var(--mgs-press) var(--mgs-ease-out), transform var(--mgs-press) var(--mgs-ease-out);
+}
+.mgs-trigger:active{transform:scale(0.94)}
+.mgs-trigger:active::before{opacity:1}
+.mgs-trigger:active::after{opacity:0.110;transform:scale(1)}
+.mova-glass-sheet.is-open .mgs-trigger{opacity:0;pointer-events:none}
+
+@supports not (backdrop-filter: url(#mgs-filter)){
+  .mova-glass-sheet .mgs-trigger{
+    -webkit-backdrop-filter:blur(25px) saturate(160%) brightness(1.06);
+    backdrop-filter:blur(25px) saturate(160%) brightness(1.06);
+    background:linear-gradient(145deg, rgb(255 255 255 / 0.015) 0%, rgb(255 255 255 / 0.004) 45%, rgb(255 255 255 / 0.096) 100%);
+    box-shadow:
+      inset 2px 2px 1px -0.5px rgb(255 255 255 / 0.066),
+      inset -1.5px -1.5px 1px -0.5px rgb(255 255 255 / 0.025),
+      inset 0 0 0 1.2px rgb(255 255 255 / 0.224),
+      0 20px 48px rgb(0 0 0 / 0.24);
+  }
+  .mgs-trigger::before{opacity:0.75}
+}
+@media (prefers-reduced-transparency: reduce){
+  .mova-glass-sheet .mgs-trigger{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(255 255 255 / 0.88);color:#111;text-shadow:none}
+}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sheet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.mgs-sheet{position:absolute;left:8px;right:8px;bottom:8px;height:244px;border-radius:28px;transform:translateY(var(--drag,0px));transition:transform var(--panel-open-dur) var(--panel-ease);touch-action:none;pointer-events:none}
+.mova-glass-sheet.is-open .mgs-sheet{pointer-events:auto}
+.mgs-panel{position:absolute;inset:0}
+.mgs-sheet.is-dragging{transition:none!important}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 REAL LIQUID GLASS MATERIAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.mgs-glass{
+  position:absolute;
+  inset:0;
+  isolation:isolate;
+  overflow:hidden;
+  border-radius:28px;
+  corner-shape:squircle;
+  pointer-events:none;
+  background:rgb(255 255 255 / 0.080);
+  -webkit-backdrop-filter:var(--mgs-pane-filter) blur(3px) saturate(160%);
+  backdrop-filter:var(--mgs-pane-filter) blur(3px) saturate(160%);
+  box-shadow:
+    inset 1.5px 1.5px 0.5px -0.5px rgb(255 255 255 / 0.055),
+    inset -1px -1px 0.5px -0.5px rgb(255 255 255 / 0.018),
+    inset 0 0 0 1.2px rgb(255 255 255 / 0.140),
+    0 0 0 0.5px rgb(255 255 255 / 0.22),
+    0 18px 40px rgb(0 0 0 / 0.2);
+  transform:translateY(var(--panel-translate-y));
+  opacity:0;
+  transition:
+    transform var(--panel-close-dur) var(--panel-ease),
+    opacity var(--panel-close-dur) var(--panel-ease),
+    box-shadow var(--mgs-press) var(--mgs-ease-out);
+}
+.mgs-glass[data-open="true"]{
+  transform:none;
+  opacity:1;
+  transition:
+    transform var(--panel-open-dur) var(--panel-ease),
+    opacity var(--panel-open-dur) var(--panel-ease),
+    box-shadow var(--mgs-press) var(--mgs-ease-out);
+}
+.mgs-glass::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  z-index:-1;
+  border-radius:inherit;
+  pointer-events:none;
+  background:radial-gradient(70% 55% at 69.8% 30.2%, rgb(255 255 255 / 0.035) 0%, transparent 46%);
+  mix-blend-mode:plus-lighter;
+  opacity:0;
+  transition:opacity 240ms var(--mgs-ease-out);
+}
+.mgs-sheet:hover .mgs-glass::before{opacity:1}
+.mgs-glass::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  z-index:-1;
+  border-radius:inherit;
+  pointer-events:none;
+  background:radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.48) 22%, rgb(255 255 255 / 0.1) 48%, transparent 65%);
+  mix-blend-mode:plus-lighter;
+  opacity:0;
+  transform:scale(0.65);
+  transition:opacity var(--mgs-press) var(--mgs-ease-out), transform var(--mgs-press) var(--mgs-ease-out);
+}
+.mgs-sheet:active .mgs-glass::before{opacity:1}
+.mgs-sheet:active .mgs-glass::after{opacity:0.110;transform:scale(1)}
+
+@supports not (backdrop-filter: url(#mgs-filter)){
+  .mgs-glass{
+    -webkit-backdrop-filter:blur(25px) saturate(160%) brightness(1.06);
+    backdrop-filter:blur(25px) saturate(160%) brightness(1.06);
+    background:linear-gradient(145deg, rgb(255 255 255 / 0.015) 0%, rgb(255 255 255 / 0.004) 45%, rgb(255 255 255 / 0.096) 100%);
+    box-shadow:
+      inset 2px 2px 1px -0.5px rgb(255 255 255 / 0.066),
+      inset -1.5px -1.5px 1px -0.5px rgb(255 255 255 / 0.025),
+      inset 0 0 0 1.2px rgb(255 255 255 / 0.224),
+      0 20px 48px rgb(0 0 0 / 0.24);
+  }
+  .mgs-glass::before{opacity:0.75}
+}
+@media (prefers-reduced-transparency: reduce){
+  .mgs-glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(255 255 255 / 0.88)}
+}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Body / grabber / header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.mgs-body{position:relative;padding:0 8px 8px}
+.mgs-grab{display:flex;justify-content:center;width:100%;height:24px;align-items:center;cursor:grab;touch-action:none}
+.mgs-grab:is(:active,.is-pressed){cursor:grabbing}
+.mgs-grab span{width:36px;height:5px;border-radius:5px;background:rgba(255,255,255,.7)}
+.mgs-head{padding:0 12px 8px}
+.mgs-title{margin:0;font-size:16px;line-height:22px;font-weight:500}
+.mgs-meta{margin:0;font-size:12px;line-height:16px;color:rgba(255,255,255,.85)}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 List / rows / highlight \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.mgs-list{position:relative;display:flex;flex-direction:column;margin-top:4px}
+.mgs-hl{position:absolute;left:0;right:0;top:0;height:44px;border-radius:16px;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);opacity:0;transition:transform var(--hl-dur) var(--hl-ease),opacity var(--hl-dur) var(--hl-ease);pointer-events:none}
+.mgs-row{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 10px;border-radius:16px;font-size:13px;line-height:20px;text-align:left;width:100%;outline:none}
+.mgs-row .mgs-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mgs-row:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
+.mgs-row .mgs-icon{flex:none}
+.mgs-slot{position:relative;width:16px;height:16px;flex:none}
+.mgs-slot .mgs-icon{position:absolute;inset:0;transition:opacity var(--icon-dur) ease-in-out,transform var(--icon-dur) ease-in-out,filter var(--icon-dur) ease-in-out}
+.mgs-slot .mgs-icon-b{opacity:0;transform:scale(.25);filter:blur(2px)}
+.mgs-saved .mgs-slot .mgs-icon-a{opacity:0;transform:scale(.25);filter:blur(2px)}
+.mgs-saved .mgs-slot .mgs-icon-b{opacity:1;transform:scale(1);filter:blur(0)}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Link row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.mgs-linkrow{position:relative;display:flex;align-items:center;height:44px;border-radius:16px}
+.mgs-linkrow .mgs-row{flex:1;min-width:0;width:auto;padding-right:6px}
+
+/* the link itself: soft flash when copied, shake when blocked */
+.mgs-linkmain{cursor:pointer;transition:transform 380ms var(--ease-spring)}
+.mgs-linkmain:active{transform:scale(var(--press-scale))}
+.mgs-linkrow.is-copied .mgs-linkmain{animation:mgs-row-flash 700ms var(--mgs-ease-out)}
+.mgs-linkrow.is-failed .mgs-linkmain{animation:mgs-copy-shake 420ms var(--mgs-ease-out)}
+
+/* link icon: globe -> drawn checkmark */
+.mgs-linkrow.is-copied .mgs-linkmain .mgs-slot .mgs-icon-a{opacity:0;transform:scale(.25) rotate(-25deg);filter:blur(2px)}
+.mgs-linkrow.is-copied .mgs-linkmain .mgs-slot .mgs-icon-b{opacity:1;transform:scale(1);filter:blur(0)}
+.mgs-tick{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 380ms var(--mgs-ease-out)}
+.mgs-linkrow.is-copied .mgs-linkmain .mgs-tick{stroke-dashoffset:0;transition-delay:140ms}
+
+/* corner copy icon: static, no copied/failed animation */
+.mgs-linkrow .mgs-copy{
+  position:relative;
+  display:grid;
+  place-items:center;
+  flex:none;
+  width:32px;
+  height:32px;
+  margin-right:6px;
+  border-radius:11px;
+  corner-shape:squircle;
+  outline:none;
+  color:rgba(255,255,255,.85);
+  background:transparent;
+}
+@media (hover: hover) and (pointer: fine){
+  .mgs-linkrow .mgs-copy:hover{background:rgba(255,255,255,.18);color:#fff}
+}
+.mgs-linkrow .mgs-copy:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
+
+/* label swaps with a soft blur-in */
+.mgs-label-anim{animation:mgs-label-in 320ms var(--mgs-ease-out)}
+
+@keyframes mgs-copy-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
+@keyframes mgs-label-in{from{opacity:0;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
+@keyframes mgs-row-flash{0%{background:rgba(255,255,255,.26)}100%{background:rgba(255,255,255,0)}}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Motion helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.mgs-t-panel-slide{transform:translateY(var(--panel-translate-y));opacity:0;filter:blur(var(--panel-blur));pointer-events:none;transition:transform var(--panel-close-dur) var(--panel-ease),opacity var(--panel-close-dur) var(--panel-ease),filter var(--panel-close-dur) var(--panel-ease)}
+.mgs-t-panel-slide[data-open="true"]{transform:translateY(0);opacity:1;filter:none;pointer-events:auto;transition:transform var(--panel-open-dur) var(--panel-ease),opacity var(--panel-open-dur) var(--panel-ease),filter var(--panel-open-dur) var(--panel-ease)}
+.mgs-t-modal{transform-origin:center;transform:scale(var(--modal-scale));opacity:0;pointer-events:none;transition:transform var(--modal-open-dur) var(--modal-ease),opacity var(--modal-open-dur) var(--modal-ease)}
+.mgs-t-modal.is-open{transform:scale(1);opacity:1;pointer-events:auto}
+.mgs-t-modal.is-closing{transform:scale(var(--modal-scale-close));opacity:0;pointer-events:none;transition:transform var(--modal-close-dur) var(--modal-ease),opacity var(--modal-close-dur) var(--modal-ease)}
+@media (prefers-reduced-motion:reduce){
+  .mgs-sheet,.mgs-t-panel-slide,.mgs-t-modal,.mgs-hl,.mgs-scrim,.mgs-trigger,.mgs-trigger::before,.mgs-trigger::after,.mgs-slot .mgs-icon,.mgs-glass,.mgs-glass::before,.mgs-glass::after,.mgs-linkmain,.mgs-tick{transition:none!important}
+  .mgs-label-anim,.mgs-linkrow.is-copied .mgs-linkmain,.mgs-linkrow.is-failed .mgs-linkmain{animation:none!important}
+}
+
+.mgs-icon-play{translate:1px 0}.mgs-icon-heart{translate:0 1px}
+
+.mova-glass-sheet :where(button,[role="button"],[role="tab"],[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],[role="switch"],summary,.t-pressable){-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
+
+.mova-glass-sheet *{box-sizing:border-box}.mgs-trigger:focus-visible,.mgs-grab:focus-visible{outline:2px solid #fff;outline-offset:-3px}.mgs-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 `;
 
 // .generated/ui/cards/voice-assistant-card.tsx
 import * as React6 from "react";
-import { ArrowUp as ArrowUp2, ImagePlus, Menu, Plus as Plus3, X as X2 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
-var recentChats = [{ id: "cafe", title: "Quiet caf\xE9 nearby", preview: "A little room to think", time: "Now" }, { id: "trip", title: "A weekend away", preview: "Plan a slow Sunday", time: "Yesterday" }, { id: "ideas", title: "Ideas for the studio", preview: "A fresh perspective", time: "Monday" }];
+import { VoiceBeam } from "voice-glow";
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+var recentChats = [
+  { id: "cafe", title: "Quiet caf\xE9 nearby", preview: "Found 3 spots with good wifi", time: "Now" },
+  { id: "trip", title: "Weekend in Lisbon", preview: "Day trips from the city", time: "Yesterday" },
+  { id: "dinner", title: "Dinner for four", preview: "Pasta, salad and a cake", time: "Mon" },
+  { id: "playlist", title: "Morning run playlist", preview: "45 minutes of upbeat songs", time: "Sun" }
+];
+function numeric(element, name, fallback) {
+  const value = element ? parseFloat(getComputedStyle(element).getPropertyValue(name)) : NaN;
+  return Number.isFinite(value) ? value : fallback;
+}
+function bezier(value) {
+  const match = value.replace(/\s+/g, "").match(/cubic-bezier\(([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\)/);
+  if (!match) return (t) => t;
+  const [x1, y1, x2, y2] = match.slice(1).map(Number);
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+  return (t) => {
+    if (t <= 0 || t >= 1) return Math.min(1, Math.max(0, t));
+    let s = t;
+    for (let i = 0; i < 8; i++) {
+      const delta = ((ax * s + bx) * s + cx) * s - t;
+      const derivative = (3 * ax * s + 2 * bx) * s + cx;
+      if (Math.abs(delta) < 1e-6 || derivative === 0) break;
+      s -= delta / derivative;
+    }
+    return ((ay * s + by) * s + cy) * s;
+  };
+}
+function SwapText2({ value }) {
+  const [shown, setShown] = React6.useState(value);
+  const ref = React6.useRef(null);
+  React6.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (value === shown || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      el.classList.remove("is-exit", "is-enter-start");
+      setShown(value);
+      return;
+    }
+    el.classList.remove("is-enter-start");
+    el.classList.add("is-exit");
+    const timer = window.setTimeout(() => setShown(value), numeric(el, "--text-swap-dur", 150));
+    return () => window.clearTimeout(timer);
+  }, [value, shown]);
+  React6.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el?.classList.contains("is-exit")) return;
+    el.classList.remove("is-exit");
+    el.classList.add("is-enter-start");
+    void el.offsetHeight;
+    el.classList.remove("is-enter-start");
+  }, [shown]);
+  return /* @__PURE__ */ jsx18("span", { ref, className: "mvc-t-text-swap", children: shown });
+}
+function useImageUrl(file) {
+  const [url, setUrl] = React6.useState("");
+  React6.useEffect(() => {
+    if (!file) {
+      setUrl("");
+      return;
+    }
+    const next = URL.createObjectURL(file);
+    setUrl(next);
+    return () => URL.revokeObjectURL(next);
+  }, [file]);
+  return url;
+}
 function VoiceAssistantCard({ name = "Aria", chats = recentChats, simulatedTranscript = "Find me a quiet caf\xE9 nearby with good wifi for this afternoon", onSend, onChatChange, theme = "light", className = "", style } = {}) {
-  const [list, setList] = React6.useState(false);
+  const [page, setPage] = React6.useState(2);
   const [chatId, setChatId] = React6.useState(chats[0]?.id);
-  const [draft, setDraft] = React6.useState("");
-  const [transcript, setTranscript] = React6.useState("");
   const [phase, setPhase] = React6.useState("idle");
+  const [words, setWords] = React6.useState([]);
+  const [count, setCount] = React6.useState(0);
+  const [runKey, setRunKey] = React6.useState(0);
+  const [text, setText] = React6.useState("");
   const [attachment, setAttachment] = React6.useState();
-  const [imageUrl, setImageUrl] = React6.useState("");
-  const fileInput = React6.useRef(null);
-  const input = React6.useRef(null);
+  const [attached, setAttached] = React6.useState(false);
+  const [sentImage, setSentImage] = React6.useState();
+  const [clearing, setClearing] = React6.useState(false);
+  const [clearText, setClearText] = React6.useState("");
+  const [pending, setPending] = React6.useState(false);
+  const [reducedMotion, setReducedMotion] = React6.useState(false);
+  const speaking = React6.useRef(false);
   const generation = React6.useRef(0);
   const sending = React6.useRef(false);
-  const menu = React6.useRef(null);
+  const timers = React6.useRef([]);
+  const raf = React6.useRef(0);
+  const cardRef = React6.useRef(null);
+  const wrapRef = React6.useRef(null);
+  const inputRef = React6.useRef(null);
+  const mirrorRef = React6.useRef(null);
+  const placeholderRef = React6.useRef(null);
+  const glowRef = React6.useRef(null);
+  const fileRef = React6.useRef(null);
+  const menuRef = React6.useRef(null);
+  const focusChat = React6.useRef(false);
   const listRef = React6.useRef(null);
-  const pendingFocus = React6.useRef(false);
-  const currentChat = chats.find((chat) => chat.id === chatId);
+  const chatRef = React6.useRef(null);
+  const thumb = useImageUrl(attachment);
+  const sentUrl = useImageUrl(sentImage);
+  const chat = chats.find((item) => item.id === chatId) ?? chats[0];
+  const live = phase === "listening";
+  const hasContent = Boolean(text.trim() || attached);
+  const caption = { idle: "Type, or tap the lines to speak", listening: "Listening\u2026", thinking: "One moment", error: "Could not send. Please try again." }[phase];
   React6.useEffect(() => {
-    if (!attachment) {
-      setImageUrl("");
-      return;
-    }
-    const url = URL.createObjectURL(attachment);
-    setImageUrl(url);
-    return () => URL.revokeObjectURL(url);
-  }, [attachment]);
-  React6.useEffect(() => () => {
-    generation.current++;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const read = () => setReducedMotion(query.matches);
+    read();
+    query.addEventListener("change", read);
+    return () => {
+      query.removeEventListener("change", read);
+      timers.current.forEach(window.clearTimeout);
+      cancelAnimationFrame(raf.current);
+      generation.current++;
+    };
   }, []);
   React6.useEffect(() => {
-    if (phase !== "listening") return;
-    let index = 0;
-    const words = simulatedTranscript.split(/\s+/).filter(Boolean);
-    const timer = window.setInterval(() => {
-      index++;
-      setTranscript(words.slice(0, index).join(" "));
-      if (index >= words.length) {
-        window.clearInterval(timer);
-        setDraft(simulatedTranscript);
-        setPhase("idle");
+    listRef.current?.toggleAttribute("inert", page !== 1);
+    chatRef.current?.toggleAttribute("inert", page !== 2);
+    if (page === 2 && focusChat.current) {
+      inputRef.current?.focus();
+      focusChat.current = false;
+    }
+  }, [page]);
+  function clearTimers() {
+    timers.current.forEach(window.clearTimeout);
+    timers.current = [];
+  }
+  function later(callback, duration) {
+    timers.current.push(window.setTimeout(callback, Math.max(0, duration)));
+  }
+  function think() {
+    speaking.current = false;
+    setPhase("thinking");
+    later(() => setPhase("idle"), 1800);
+  }
+  function start() {
+    clearTimers();
+    generation.current++;
+    const transcript = simulatedTranscript.split(/\s+/).filter(Boolean);
+    setWords(transcript);
+    setSentImage(void 0);
+    setCount(0);
+    setRunKey((key) => key + 1);
+    speaking.current = true;
+    setPhase("listening");
+    transcript.forEach((_, index) => later(() => setCount(index + 1), 400 + index * 280));
+    later(think, 400 + transcript.length * 280 + 500);
+  }
+  function buildGlow(value) {
+    const wrap = wrapRef.current, input = inputRef.current;
+    const context = document.createElement("canvas").getContext("2d");
+    if (!context || !wrap || !input) return "";
+    context.font = getComputedStyle(input).font;
+    const rgb = theme === "dark" ? "255,255,255" : "0,0,0";
+    const width = wrap.clientWidth || 200;
+    const padding = parseFloat(getComputedStyle(input).paddingLeft) || 4;
+    const spread = numeric(cardRef.current, "--glow-spread", 1.5);
+    const layers = [];
+    let x = 0;
+    value.split(/(\s+)/).forEach((segment) => {
+      const segmentWidth = context.measureText(segment).width;
+      if (segment.trim()) {
+        const center = padding + x + segmentWidth / 2;
+        const halfWidth = Math.max(segmentWidth * 0.45, 8) * spread;
+        [[0, 0.8, 7, 0.22], [halfWidth * 0.45, 0.55, 8, 0.18], [-halfWidth * 0.4, 0.65, 6, 0.16], [halfWidth * 0.15, 0.9, 5, 0.14]].forEach(([dx, multiplier, height, opacity]) => {
+          layers.push(`radial-gradient(ellipse ${Math.max(halfWidth * multiplier, 2).toFixed(1)}px ${height}px at ${((center + dx) / width * 100).toFixed(2)}% 100%, rgba(${rgb},${opacity}), transparent)`);
+        });
       }
-    }, 160);
-    return () => window.clearInterval(timer);
-  }, [phase, simulatedTranscript]);
-  React6.useEffect(() => {
-    if (list) listRef.current?.querySelector("button")?.focus();
-    else if (pendingFocus.current) {
-      input.current?.focus();
-      pendingFocus.current = false;
-    }
-  }, [list]);
-  async function send(event) {
-    event?.preventDefault();
-    if (!draft.trim() && !attachment || sending.current) return;
-    const text = draft.trim();
+      x += segmentWidth;
+    });
+    return layers.join(", ");
+  }
+  function stopDissolve() {
+    cancelAnimationFrame(raf.current);
+    [mirrorRef, placeholderRef, glowRef].forEach((ref) => {
+      if (ref.current) ref.current.style.cssText = "";
+    });
+    setClearing(false);
+    setClearText("");
+  }
+  function dissolve(old) {
+    stopDissolve();
+    const mirror = mirrorRef.current, placeholder = placeholderRef.current, glow = glowRef.current;
+    setText("");
+    if (!mirror || !placeholder || !glow || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const token = (name2, fallback) => numeric(cardRef.current, name2, fallback);
+    const total = token("--clear-dur", 1e3), outDuration = Math.max(1, token("--clear-out-dur", 400)), inDuration = Math.max(1, token("--clear-in-dur", 400));
+    const outFly = token("--clear-out-fly", 12), inFly = token("--clear-in-fly", 12), blur = token("--clear-blur", 2);
+    const delay = token("--glow-delay", 50), peakAt = Math.min(0.999, Math.max(1e-3, token("--glow-peak-at", 0.15))), opacity = token("--glow-opacity", 0.42);
+    const computed = getComputedStyle(cardRef.current);
+    const easeOut = bezier(computed.getPropertyValue("--clear-out-ease")), easeIn = bezier(computed.getPropertyValue("--clear-in-ease"));
+    setClearText(old);
+    setClearing(true);
+    glow.style.background = buildGlow(old);
+    glow.style.opacity = "0";
+    placeholder.style.transform = `translateY(-${inFly}px)`;
+    placeholder.style.opacity = ".9";
+    placeholder.style.filter = `blur(${blur}px)`;
+    const started = performance.now();
+    const tick = (now) => {
+      const elapsed = now - started, out = easeOut(Math.min(1, elapsed / outDuration)), incoming = easeIn(Math.min(1, elapsed / inDuration));
+      mirror.style.transform = `translateY(${(out * outFly).toFixed(1)}px)`;
+      mirror.style.opacity = (1 - out).toFixed(3);
+      mirror.style.filter = `blur(${(out * blur).toFixed(1)}px)`;
+      placeholder.style.transform = `translateY(${(-inFly + incoming * inFly).toFixed(1)}px)`;
+      placeholder.style.opacity = (0.9 + incoming * 0.1).toFixed(3);
+      placeholder.style.filter = `blur(${(blur - incoming * blur).toFixed(1)}px)`;
+      let glowStrength = 0;
+      if (elapsed > delay) {
+        const progress = Math.min(1, (elapsed - delay) / Math.max(1, total - delay));
+        glowStrength = progress < peakAt ? progress / peakAt : 1 - (progress - peakAt) / (1 - peakAt);
+      }
+      glow.style.opacity = (glowStrength * opacity).toFixed(3);
+      if (elapsed < total) raf.current = requestAnimationFrame(tick);
+      else stopDissolve();
+    };
+    raf.current = requestAnimationFrame(tick);
+  }
+  function send() {
+    const message = text.trim(), image = attached ? attachment : void 0;
+    if (!message && !image || sending.current || live) return;
+    clearTimers();
     const run = ++generation.current;
+    const nextWords = message ? message.split(/\s+/) : [];
+    setWords(nextWords);
+    setSentImage(image);
+    setCount(0);
+    setRunKey((key) => key + 1);
+    if (message) dissolve(text);
+    setAttached(false);
+    speaking.current = false;
+    const gap = numeric(cardRef.current, "--stream-gap", 60), steps = Math.max(nextWords.length, 1);
+    for (let index = 0; index < steps; index++) later(() => setCount(index + 1), 80 + index * gap);
+    later(think, 80 + steps * gap + 400);
+    if (!onSend) return;
     sending.current = true;
-    setTranscript(text);
-    setPhase("sending");
-    try {
-      await onSend?.(text, attachment);
-      if (generation.current === run) {
-        setDraft("");
-        setPhase("sent");
+    setPending(true);
+    Promise.resolve().then(() => onSend(message, image)).catch(() => {
+      if (run !== generation.current) return;
+      clearTimers();
+      stopDissolve();
+      setText(message);
+      setAttachment(image);
+      setAttached(Boolean(image));
+      setPhase("error");
+    }).finally(() => {
+      if (run === generation.current) {
+        sending.current = false;
+        setPending(false);
       }
-    } catch {
-      if (generation.current === run) setPhase("error");
-    } finally {
+    });
+  }
+  function onRight() {
+    if (live) {
+      clearTimers();
+      setCount(words.length);
+      think();
+    } else if (hasContent) send();
+    else start();
+  }
+  function openChat(item) {
+    if (item.id !== chatId) {
+      clearTimers();
+      stopDissolve();
+      generation.current++;
       sending.current = false;
-    }
+      setPending(false);
+      speaking.current = false;
+      setPhase("idle");
+      setWords([]);
+      setSentImage(void 0);
+      setCount(0);
+      setRunKey((key) => key + 1);
+      setChatId(item.id);
+      onChatChange?.(item);
+    }
+    focusChat.current = true;
+    setPage(2);
   }
-  function reset() {
-    pendingFocus.current = true;
-    setChatId(void 0);
-    generation.current++;
-    setDraft("");
-    setTranscript("");
-    setAttachment(void 0);
-    setPhase("idle");
-    setList(false);
+  function keepFocus(event) {
+    if (document.activeElement === inputRef.current) event.preventDefault();
   }
-  const caption = { idle: "Type, or try the voice preview", listening: "Voice preview \xB7 listening\u2026", sending: "Sending\u2026", sent: onSend ? "Message sent" : "Message preview ready", error: "Could not send. Please try again." }[phase];
-  return /* @__PURE__ */ jsxs18("section", { className: `mova-voice ${className}`, "data-theme": theme, "data-listening": phase === "listening", style, "aria-label": `${name} voice assistant`, children: [
+  function togglePage() {
+    setPage((current) => current === 2 ? 1 : 2);
+  }
+  const iconState = live ? "a" : hasContent ? "b" : "a";
+  return /* @__PURE__ */ jsxs18("section", { ref: cardRef, className: `mova-voice ${className}`, "data-theme": theme, "data-phase": phase, style, "aria-label": `${name} voice assistant`, children: [
     /* @__PURE__ */ jsx18("style", { children: css6 }),
-    /* @__PURE__ */ jsxs18("header", { children: [
-      /* @__PURE__ */ jsx18("button", { ref: menu, type: "button", "aria-label": list ? "Close conversations" : "Open conversations", "aria-expanded": list, disabled: phase === "sending", onClick: () => {
-        setList(!list);
-        if (phase === "listening") setPhase("idle");
-      }, children: list ? /* @__PURE__ */ jsx18(X2, { size: 17 }) : /* @__PURE__ */ jsx18(Menu, { size: 17 }) }),
-      /* @__PURE__ */ jsxs18("div", { children: [
-        /* @__PURE__ */ jsx18("strong", { children: name }),
-        /* @__PURE__ */ jsx18("small", { children: list ? "Your conversations" : currentChat?.title ?? "New conversation" })
-      ] })
-    ] }),
-    list ? /* @__PURE__ */ jsxs18("div", { className: "mvc-list", ref: listRef, onKeyDown: (event) => {
-      if (event.key === "Escape") {
-        setList(false);
-        menu.current?.focus();
-      }
-    }, children: [
-      /* @__PURE__ */ jsxs18("button", { type: "button", className: "mvc-new", onClick: reset, children: [
-        /* @__PURE__ */ jsx18(Plus3, { size: 16 }),
-        "New conversation"
-      ] }),
-      chats.map((chat) => /* @__PURE__ */ jsxs18("button", { type: "button", className: "mvc-chat", onClick: () => {
-        reset();
-        setChatId(chat.id);
-        onChatChange?.(chat);
-      }, children: [
-        /* @__PURE__ */ jsxs18("span", { children: [
-          /* @__PURE__ */ jsx18("strong", { children: chat.title }),
-          /* @__PURE__ */ jsx18("small", { children: chat.preview })
-        ] }),
-        /* @__PURE__ */ jsx18("small", { children: chat.time })
-      ] }, chat.id))
-    ] }) : /* @__PURE__ */ jsxs18(Fragment7, { children: [
-      /* @__PURE__ */ jsxs18("div", { className: "mvc-body", children: [
-        /* @__PURE__ */ jsx18("p", { className: "mvc-greeting", children: "How can I help you today?" }),
-        /* @__PURE__ */ jsxs18("div", { className: "mvc-transcript", role: "status", "aria-live": phase === "listening" ? "off" : "polite", children: [
-          imageUrl && /* @__PURE__ */ jsx18("img", { src: imageUrl, alt: "Attached image preview" }),
-          transcript && /* @__PURE__ */ jsx18("p", { children: transcript })
+    /* @__PURE__ */ jsx18(VoiceBeam, { className: "mvc-beam", level: () => {
+      if (!speaking.current || reducedMotion) return 0.06;
+      const time = Date.now();
+      return Math.max(0.06, Math.min(1, 0.55 + Math.sin(time / 150) * 0.22 + Math.sin(time / 61) * 0.12 + Math.sin(time / 37) * 0.08)) * 0.6;
+    }, processing: phase === "thinking" || pending, paused: reducedMotion, ...theme === "dark" ? { theme: "dark" } : {}, children: /* @__PURE__ */ jsx18("div", { className: "mvc-inner", children: /* @__PURE__ */ jsxs18("div", { className: "mvc-content", children: [
+      /* @__PURE__ */ jsxs18("header", { className: "mvc-top", children: [
+        /* @__PURE__ */ jsx18("button", { ref: menuRef, type: "button", className: `mvc-menu${page === 1 ? " is-open" : ""}`, "aria-label": page === 1 ? "Close conversations" : "Open conversations", "aria-expanded": page === 1, onClick: togglePage, children: /* @__PURE__ */ jsxs18("svg", { className: "mvc-menu-icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx18("line", { className: "mvc-l1", x1: "2.5", y1: "4", x2: "13.5", y2: "4" }),
+          /* @__PURE__ */ jsx18("line", { className: "mvc-l2", x1: "2.5", y1: "8", x2: "13.5", y2: "8" }),
+          /* @__PURE__ */ jsx18("line", { className: "mvc-l3", x1: "2.5", y1: "12", x2: "13.5", y2: "12" })
+        ] }) }),
+        /* @__PURE__ */ jsxs18("div", { className: "mvc-top-text", children: [
+          /* @__PURE__ */ jsx18("span", { className: "mvc-name", children: /* @__PURE__ */ jsx18(SwapText2, { value: page === 1 ? "Chats" : name }) }),
+          /* @__PURE__ */ jsx18("span", { className: "mvc-meta", children: /* @__PURE__ */ jsx18(SwapText2, { value: page === 1 ? `${chats.length} conversations` : chat?.title ?? "New conversation" }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs18("footer", { children: [
-        /* @__PURE__ */ jsx18("div", { className: "mvc-caption", role: "status", children: caption }),
-        /* @__PURE__ */ jsxs18("form", { onSubmit: (event) => void send(event), children: [
-          /* @__PURE__ */ jsx18("button", { type: "button", "aria-label": attachment ? "Remove image" : "Attach image", disabled: phase === "sending", onClick: () => attachment ? setAttachment(void 0) : fileInput.current?.click(), children: attachment ? /* @__PURE__ */ jsx18(X2, { size: 16 }) : /* @__PURE__ */ jsx18(ImagePlus, { size: 16 }) }),
-          /* @__PURE__ */ jsx18("input", { ref: fileInput, hidden: true, type: "file", accept: "image/*", onChange: (event) => {
-            const file = event.target.files?.[0];
-            if (file?.type.startsWith("image/") && file.size <= 10 * 1024 * 1024) setAttachment(file);
-            event.target.value = "";
-          } }),
-          /* @__PURE__ */ jsx18("input", { ref: input, type: "text", "aria-label": `Message ${name}`, placeholder: `Ask ${name} anything`, value: draft, disabled: phase === "listening" || phase === "sending", maxLength: 2e3, onChange: (event) => setDraft(event.target.value) }),
-          draft.trim() || attachment ? /* @__PURE__ */ jsx18("button", { type: "submit", className: "mvc-action", "aria-label": "Send message", disabled: phase === "sending", children: /* @__PURE__ */ jsx18(ArrowUp2, { size: 17 }) }) : /* @__PURE__ */ jsx18("button", { type: "button", className: "mvc-action", "aria-label": phase === "listening" ? "Stop voice preview" : "Start voice preview", "aria-pressed": phase === "listening", onClick: () => {
-            if (phase === "listening") {
-              setDraft(transcript);
-              setPhase("idle");
-            } else {
-              setTranscript("");
-              setPhase("listening");
-            }
-          }, children: /* @__PURE__ */ jsx18("span", { className: "mvc-wave", "aria-hidden": "true", children: [8, 13, 19, 11, 6].map((height, index) => /* @__PURE__ */ jsx18("i", { style: { height, animationDelay: `${index * 90}ms` } }, index)) }) })
+      /* @__PURE__ */ jsx18("div", { className: "mvc-divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs18("div", { className: "mvc-t-page-slide", "data-page": page, children: [
+        /* @__PURE__ */ jsx18("section", { className: "mvc-t-page mvc-page", "data-page-id": "1", ref: listRef, "aria-label": "Your conversations", "aria-hidden": page !== 1, inert: page !== 1, onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            setPage(2);
+            menuRef.current?.focus();
+          }
+        }, children: /* @__PURE__ */ jsx18("ul", { className: "mvc-list", children: chats.map((item) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsxs18("button", { type: "button", className: "mvc-row", onClick: () => openChat(item), children: [
+          /* @__PURE__ */ jsxs18("span", { className: "mvc-row-text", children: [
+            /* @__PURE__ */ jsx18("span", { className: "mvc-row-title", children: item.title }),
+            /* @__PURE__ */ jsx18("span", { className: "mvc-row-preview", children: item.preview })
+          ] }),
+          /* @__PURE__ */ jsx18("span", { className: "mvc-row-time", children: item.time })
+        ] }) }, item.id)) }) }),
+        /* @__PURE__ */ jsxs18("section", { className: "mvc-t-page mvc-page", "data-page-id": "2", ref: chatRef, "aria-label": `Chat with ${name}`, "aria-hidden": page !== 2, inert: page !== 2, children: [
+          /* @__PURE__ */ jsxs18("div", { className: "mvc-body", children: [
+            /* @__PURE__ */ jsx18("div", { className: "mvc-bubble-row", children: /* @__PURE__ */ jsx18("p", { className: "mvc-bubble", children: /* @__PURE__ */ jsx18("span", { children: "How can I help you today?" }) }) }),
+            /* @__PURE__ */ jsxs18("div", { className: "mvc-transcript", "aria-live": "polite", "aria-atomic": "true", children: [
+              /* @__PURE__ */ jsx18("span", { className: "mvc-sr-only", children: words.slice(0, count).join(" ") }),
+              sentUrl && /* @__PURE__ */ jsx18("img", { className: `mvc-sent-img mvc-t-stream-w${count > 0 ? " is-in" : ""}`, src: sentUrl, alt: "Image you sent", width: 40, height: 40 }),
+              words.length > 0 && /* @__PURE__ */ jsx18("p", { "aria-hidden": "true", children: /* @__PURE__ */ jsx18("span", { children: words.map((word, index) => /* @__PURE__ */ jsxs18(React6.Fragment, { children: [
+                /* @__PURE__ */ jsx18("span", { className: `mvc-t-stream-w${index < count ? " is-in" : ""}`, children: word }),
+                index < words.length - 1 ? " " : ""
+              ] }, index)) }) })
+            ] }, runKey)
+          ] }),
+          /* @__PURE__ */ jsxs18("div", { className: "mvc-bottom", children: [
+            /* @__PURE__ */ jsx18("span", { className: "mvc-caption", role: "status", children: /* @__PURE__ */ jsx18(SwapText2, { value: caption }) }),
+            /* @__PURE__ */ jsxs18("form", { className: "mvc-field", onSubmit: (event) => {
+              event.preventDefault();
+              send();
+            }, children: [
+              /* @__PURE__ */ jsxs18("button", { type: "button", className: "mvc-attach mvc-t-icon-swap", "data-state": attached ? "b" : "a", "aria-label": attached ? "Remove image" : "Attach image", disabled: pending, onPointerDown: keepFocus, onMouseDown: keepFocus, onClick: () => attached ? setAttached(false) : fileRef.current?.click(), children: [
+                /* @__PURE__ */ jsx18("span", { className: "mvc-t-icon", "data-icon": "a", children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.25", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("path", { d: "m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" }) }) }),
+                /* @__PURE__ */ jsx18("span", { className: "mvc-t-icon", "data-icon": "b", children: thumb && /* @__PURE__ */ jsx18("img", { className: "mvc-thumb", src: thumb, alt: "", width: 28, height: 28 }) })
+              ] }),
+              /* @__PURE__ */ jsx18("input", { ref: fileRef, type: "file", accept: "image/*", hidden: true, onChange: (event) => {
+                const file = event.target.files?.[0];
+                event.target.value = "";
+                if (file?.type.startsWith("image/") && file.size <= 10 * 1024 * 1024) {
+                  setAttachment(file);
+                  setAttached(true);
+                }
+              } }),
+              /* @__PURE__ */ jsxs18("div", { ref: wrapRef, className: `mvc-t-clear mvc-input-wrap${text && !clearing ? " has-value" : ""}${clearing ? " is-clearing" : ""}`, children: [
+                /* @__PURE__ */ jsx18("input", { ref: inputRef, className: "mvc-input", type: "text", value: text, "aria-label": `Message ${name}`, disabled: pending, maxLength: 2e3, onChange: (event) => {
+                  if (clearing) stopDissolve();
+                  setText(event.target.value);
+                } }),
+                /* @__PURE__ */ jsx18("div", { className: "mvc-t-clear-mirror", ref: mirrorRef, "aria-hidden": "true", children: (clearing ? clearText : text).replace(/ /g, "\xA0") }),
+                /* @__PURE__ */ jsxs18("div", { className: "mvc-t-clear-placeholder", ref: placeholderRef, "aria-hidden": "true", children: [
+                  "Ask ",
+                  name,
+                  " anything"
+                ] }),
+                /* @__PURE__ */ jsx18("div", { className: "mvc-t-clear-glow", ref: glowRef, "aria-hidden": "true" })
+              ] }),
+              /* @__PURE__ */ jsxs18("button", { type: "button", className: `mvc-mic mvc-t-icon-swap${live ? " is-live" : ""}`, "data-state": iconState, "aria-label": live ? "Stop voice preview" : hasContent ? "Send message" : "Start voice preview", "aria-pressed": live, disabled: pending, onPointerDown: keepFocus, onMouseDown: keepFocus, onClick: onRight, children: [
+                /* @__PURE__ */ jsx18("span", { className: "mvc-t-icon", "data-icon": "a", children: /* @__PURE__ */ jsxs18("span", { className: "mvc-wave", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx18("i", {}),
+                  /* @__PURE__ */ jsx18("i", {}),
+                  /* @__PURE__ */ jsx18("i", {}),
+                  /* @__PURE__ */ jsx18("i", {}),
+                  /* @__PURE__ */ jsx18("i", {})
+                ] }) }),
+                /* @__PURE__ */ jsx18("span", { className: "mvc-t-icon", "data-icon": "b", children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.25", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("path", { d: "M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" }) }) })
+              ] })
+            ] })
+          ] })
         ] })
       ] })
-    ] })
+    ] }) }) })
   ] });
 }
 var css6 = `
-.mova-voice{--mvc-bg:#fff;--mvc-fg:#252525;--mvc-muted:#777;--mvc-chip:#f0f0f0;position:relative;box-sizing:border-box;width:360px;max-width:100%;height:340px;border-radius:24px;border:1px solid #8888881a;background:var(--mvc-bg);color:var(--mvc-fg);font:400 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;flex-direction:column;box-shadow:0 8px 32px -4px #0000000c;isolation:isolate}.mova-voice[data-theme=dark]{--mvc-bg:#1d1d1d;--mvc-fg:#f2f2f2;--mvc-muted:#999;--mvc-chip:#303030;color-scheme:dark}.mova-voice:after{content:"";position:absolute;z-index:-1;bottom:-1px;left:18%;right:18%;height:2px;background:linear-gradient(90deg,transparent,#b9dbbc,#b294ce,#efaf84,transparent);filter:blur(5px);opacity:.7;transition:opacity 250ms,filter 250ms}.mova-voice[data-listening=true]:after{opacity:1;filter:blur(7px);height:6px}.mova-voice *{box-sizing:border-box}.mova-voice button,.mova-voice input{font:inherit;color:inherit}.mova-voice button{border:0;background:none;cursor:pointer}.mova-voice button:disabled{opacity:.5;cursor:default}.mova-voice :focus-visible{outline:2px solid #7898e8;outline-offset:2px}.mova-voice header{padding:12px;display:flex;gap:8px;align-items:center;border-bottom:1px solid #88888818;flex:none}.mova-voice header>button{width:30px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}.mova-voice header>div{min-width:0}.mova-voice header strong{display:block;font-size:16px;line-height:22px;font-weight:500}.mova-voice header small{display:block;font-size:12px;line-height:16px;color:var(--mvc-muted);overflow-wrap:anywhere}.mvc-body{flex:1;min-height:0;overflow:auto;padding:20px 24px}.mvc-greeting{margin:0;padding:8px 12px;background:var(--mvc-chip);border-radius:18px 18px 18px 4px;display:inline-block}.mvc-transcript{margin-top:16px}.mvc-transcript p{margin:0;overflow-wrap:anywhere;animation:mvc-in 200ms ease-out}.mvc-transcript img{width:40px;height:40px;object-fit:cover;border-radius:8px;margin-bottom:8px}.mova-voice footer{padding:0 12px 12px}.mvc-caption{text-align:center;min-height:20px;font-size:11px;color:var(--mvc-muted);margin-bottom:6px}.mova-voice form{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid #88888830;border-radius:24px}.mova-voice form>button{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}.mova-voice button:hover{background:var(--mvc-chip)}.mova-voice form>input[type=text]{min-width:0;width:100%;border:0;background:none;outline:none;padding:4px 2px;font-size:12px}.mova-voice form:focus-within{outline:2px solid #7898e8;outline-offset:2px}.mova-voice .mvc-action{background:var(--mvc-chip)}.mvc-wave{height:20px;display:flex;align-items:center;gap:2px}.mvc-wave i{display:block;width:2px;background:currentColor;border-radius:2px}.mova-voice[data-listening=true] .mvc-wave i{animation:mvc-wave 700ms ease-in-out infinite alternate}.mvc-list{padding:12px;overflow:auto;flex:1}.mvc-new{display:flex;gap:8px;align-items:center;width:100%;padding:10px;border-radius:10px}.mvc-chat{display:flex;align-items:center;gap:8px;text-align:left;width:100%;padding:12px 10px;border-radius:12px}.mvc-chat>span{flex:1;min-width:0}.mvc-chat strong{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}.mvc-chat small{display:block;color:var(--mvc-muted);font-size:11px}.mvc-chat>small{flex:none;font-size:10px}@keyframes mvc-wave{to{transform:scaleY(.35)}}@keyframes mvc-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mova-voice *,.mova-voice:after{animation:none!important;transition:none!important}}
+/* @motion
+[Page slide] chat and chats screens
+--page-slide-dur: Duration
+--page-slide-ease: Easing
+--page-slide-distance: Distance
+more --page-fade-dur: Fade duration
+more --page-fade-ease: Fade easing
+more --page-blur: Blur
+more --page-stagger: Delay
+more --page-exit-enabled: Exit slide
+[Streaming transcript] your message under Aria's
+--stream-fade: Duration
+--stream-ease: Easing
+--stream-gap: Word gap
+more --stream-blur: Blur
+[Send dissolve] prompt text on send
+--clear-dur: Duration
+--clear-out-ease: Easing
+--clear-out-fly: Distance
+more --clear-out-dur: Text out duration
+more --clear-in-dur: Placeholder in duration
+more --clear-in-fly: Placeholder distance
+more --clear-in-ease: Placeholder easing
+more --clear-blur: Blur
+more --glow-delay: Glow delay
+more --glow-peak-at: Glow peak
+more --glow-opacity: Glow opacity
+more --glow-spread: Glow spread
+more [Status swap] caption and header titles
+--text-swap-dur: Duration
+--text-swap-ease: Easing
+--text-swap-translate-y: Distance
+more --text-swap-blur: Blur
+more [Icon swap] voice / send and image buttons
+--icon-swap-dur: Duration
+--icon-swap-ease: Easing
+--icon-swap-start-scale: Start scale
+more --icon-swap-blur: Blur
+more [Menu morph] menu lines into a close X
+--duration-fast: Duration
+more [Voice lines] bars in the voice button
+--wave-dur: Duration
+--wave-min: Rest scale
+more [Bubble float] assistant message
+--float-dur: Duration
+--float-distance: Distance
+more [Field focus] prompt ring, row hover
+--duration-quick: Duration
+more [Button press] all buttons and rows
+--press-scale: Scale
+--press-dur: Duration
+--ease-smooth-out: Easing
+*/
+.mova-voice {
+  --page-slide-dur: 250ms;
+  --page-fade-dur: 250ms;
+  --page-slide-distance: 8px;
+  --page-blur: 3px;
+  --page-stagger: 0ms;
+  --page-exit-enabled: 1;
+  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --stream-gap: 60ms;
+  --stream-fade: 350ms;
+  --stream-blur: 1px;
+  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --clear-dur: 1000ms;
+  --clear-out-dur: 400ms;
+  --clear-in-dur: 400ms;
+  --clear-out-fly: 12px;
+  --clear-in-fly: 12px;
+  --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --clear-blur: 2px;
+  --glow-delay: 50ms;
+  --glow-peak-at: 0.15;
+  --glow-opacity: 0.42;
+  --glow-spread: 1.5;
+  --text-swap-dur: 150ms;
+  --text-swap-translate-y: 4px;
+  --text-swap-blur: 2px;
+  --text-swap-ease: ease-in-out;
+  --icon-swap-dur: 250ms;
+  --icon-swap-blur: 2px;
+  --icon-swap-start-scale: 0.25;
+  --icon-swap-ease: ease-in-out;
+  --duration-fast: 250ms;
+  --duration-quick: 150ms;
+  --wave-dur: 900ms;
+  --wave-min: 0.35;
+  --float-dur: 4000ms;
+  --float-distance: 3px;
+  --press-scale: 0.99;
+  --press-dur: 150ms;
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --mvc-btn-bg: var(--mvc-surface);
+  --mvc-btn-shadow: 0 1px 3px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -1px 0 0 rgba(0,0,0,.08);
+  --mvc-hover: rgba(0, 0, 0, 0.02);
+  --mvc-chip: rgba(0, 0, 0, 0.04);
+  --mvc-focus-soft: rgba(0, 115, 229, 0.06);
+  --mvc-img-outline: rgba(0, 0, 0, 0.1);
+  --mvc-card-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 32px -4px rgba(0,0,0,.06), 0 1px 3px 0 rgba(0,0,0,.04);
+  --divider: color-mix(in srgb, var(--mvc-border) 49%, transparent);
+  --bubble: color-mix(in srgb, var(--mvc-fg) 6%, var(--mvc-surface));
+}
+.mova-voice[data-theme="dark"] {
+  --mvc-btn-bg: rgba(255, 255, 255, 0.04);
+  --mvc-btn-shadow: 0 1px 1px 0 rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 0 rgba(255,255,255,.06);
+  --mvc-hover: rgba(255, 255, 255, 0.02);
+  --mvc-chip: rgba(255, 255, 255, 0.07);
+  --mvc-focus-soft: rgba(0, 115, 229, 0.16);
+  --mvc-img-outline: rgba(255, 255, 255, 0.1);
+  --glow-opacity: 0.85;
+  --bubble: color-mix(in srgb, var(--mvc-fg) 9%, var(--mvc-surface));
+}
+
+.mova-voice {
+  display: grid;
+  width: 360px;
+  max-width: 100%;
+  height: 340px;
+  border-radius: 24px;
+  background: var(--mvc-surface);
+  box-shadow: var(--mvc-card-shadow);
+  color: var(--mvc-fg);
+  -webkit-font-smoothing: antialiased;
+}
+.mvc-beam { margin: -1px; border-radius: 25px; }
+.mvc-inner { position: relative; height: 100%; border-radius: 25px; background: transparent; overflow: hidden; }
+.mvc-content { position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; }
+:where(.mova-voice) :is(button, input) { font: inherit; padding: 0; border: 0; background: none; color: inherit; }
+:where(.mova-voice) button { cursor: pointer; }
+.mova-voice :focus-visible:not(input) { outline: none; box-shadow: 0 0 0 2px var(--mvc-surface), 0 0 0 4px var(--mvc-accent); }
+
+.mvc-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 12px; flex: none; }
+.mvc-top-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.mvc-name { font-size: 16px; line-height: 22px; font-weight: 500; }
+.mvc-meta { font-size: 12px; line-height: 16px; color: var(--mvc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mvc-divider { height: 1px; flex: none; background: linear-gradient(90deg, transparent, var(--divider) 20%, var(--divider) 80%, transparent); }
+
+.mvc-menu {
+  --press-scale: 0.95;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: var(--mvc-fg);
+  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out);
+}
+@media (hover: hover) and (pointer: fine) { .mvc-menu:hover { background-color: var(--mvc-chip); } }
+.mvc-menu:is(:active,.is-pressed) { transform: scale(var(--press-scale)); }
+.mvc-menu-icon line {
+  transform-box: view-box;
+  transform-origin: 8px 8px;
+  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out);
+}
+.mvc-menu.is-open .mvc-l1 { transform: rotate(45deg) translateY(4px); }
+.mvc-menu.is-open .mvc-l2 { opacity: 0; }
+.mvc-menu.is-open .mvc-l3 { transform: rotate(-45deg) translateY(-4px); }
+
+.mvc-t-page-slide { position: relative; flex: 1; min-height: 0; }
+.mvc-t-page-slide .mvc-t-page[data-page-id="1"] { --t-page-from-x: calc(var(--page-slide-distance) * -1); }
+.mvc-t-page-slide .mvc-t-page[data-page-id="2"] { --t-page-from-x: var(--page-slide-distance); }
+.mvc-t-page-slide .mvc-t-page {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
+  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
+  transition:
+    opacity   var(--page-fade-dur)  var(--page-fade-ease),
+    transform var(--page-slide-dur) var(--page-slide-ease),
+    filter    var(--page-slide-dur) var(--page-slide-ease);
+  will-change: opacity, transform, filter;
+}
+.mvc-t-page-slide[data-page="1"] .mvc-t-page[data-page-id="1"],
+.mvc-t-page-slide[data-page="2"] .mvc-t-page[data-page-id="2"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  filter: blur(0);
+  transition-delay: var(--page-stagger);
+}
+.mvc-page { display: flex; flex-direction: column; }
+
+.mvc-list { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; }
+.mvc-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: 12px;
+  text-align: left;
+  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out);
+}
+@media (hover: hover) and (pointer: fine) { .mvc-row:hover { background-color: var(--mvc-hover); } }
+.mvc-row:is(:active,.is-pressed) { transform: scale(var(--press-scale)); }
+.mvc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.mvc-row-title { font-size: 13px; line-height: 20px; color: var(--mvc-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mvc-row-preview { font-size: 12px; line-height: 16px; color: var(--mvc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mvc-row-time { flex: none; font-size: 12px; line-height: 16px; color: var(--mvc-muted); }
+
+.mvc-body { flex: 1; min-height: 0; overflow: hidden; padding: 24px 24px 0; display: flex; flex-direction: column; gap: 16px; }
+.mvc-bubble-row { padding-left: 8px; animation: mvc-float var(--float-dur) ease-in-out infinite; }
+@keyframes mvc-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(calc(var(--float-distance) * -1)); }
+}
+.mvc-bubble { position: relative; display: inline-block; max-width: 240px; padding: 8px 12px; border-radius: 18px; background: var(--bubble); font-size: 14px; line-height: 20px; margin: 0; }
+.mvc-bubble span { position: relative; z-index: 1; }
+.mvc-bubble::before { content: ""; position: absolute; bottom: 0; left: -7px; width: 20px; height: 20px; background: var(--bubble); border-bottom-right-radius: 16px 14px; }
+.mvc-bubble::after { content: ""; position: absolute; bottom: 0; left: -26px; width: 26px; height: 20px; background: var(--mvc-surface); border-bottom-right-radius: 10px; }
+
+.mvc-transcript { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-left: 32px; }
+.mvc-transcript p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--mvc-fg);
+  text-align: right;
+  text-wrap: pretty;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+.mvc-sent-img { display: block; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; outline: 1px solid var(--mvc-img-outline); outline-offset: -1px; }
+.mvc-t-stream-w {
+  opacity: 0;
+  filter: blur(var(--stream-blur));
+  transition:
+    opacity var(--stream-fade) var(--stream-ease),
+    filter var(--stream-fade) var(--stream-ease);
+}
+.mvc-t-stream-w.is-in { opacity: 1; filter: blur(0); }
+
+.mvc-bottom { flex: none; padding: 0 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.mvc-caption { font-size: 12px; line-height: 16px; color: var(--mvc-muted); }
+
+.mvc-t-text-swap {
+  display: inline-block;
+  transform: translateY(0);
+  filter: blur(0);
+  opacity: 1;
+  transition:
+    transform var(--text-swap-dur) var(--text-swap-ease),
+    filter    var(--text-swap-dur) var(--text-swap-ease),
+    opacity   var(--text-swap-dur) var(--text-swap-ease);
+  will-change: transform, filter, opacity;
+}
+.mvc-t-text-swap.is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
+.mvc-t-text-swap.is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }
+
+.mvc-t-icon-swap { position: relative; display: inline-grid; }
+.mvc-t-icon-swap .mvc-t-icon {
+  grid-area: 1 / 1;
+  transition:
+    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
+    filter    var(--icon-swap-dur) var(--icon-swap-ease),
+    transform var(--icon-swap-dur) var(--icon-swap-ease);
+}
+.mvc-t-icon-swap[data-state="a"] .mvc-t-icon[data-icon="a"],
+.mvc-t-icon-swap[data-state="b"] .mvc-t-icon[data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); }
+.mvc-t-icon-swap[data-state="a"] .mvc-t-icon[data-icon="b"],
+.mvc-t-icon-swap[data-state="b"] .mvc-t-icon[data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }
+.mvc-t-icon { display: grid; place-items: center; }
+
+.mvc-field {
+  box-sizing: border-box;
+  width: 100%;
+  height: 44px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 22px;
+  background: var(--mvc-surface);
+  box-shadow: 0 0 0 1px var(--mvc-border);
+  transition: box-shadow var(--duration-quick) var(--ease-smooth-out);
+}
+.mvc-field:has(.mvc-input:focus) { box-shadow: 0 0 0 1px var(--mvc-accent), 0 0 0 4px var(--mvc-focus-soft); }
+.mvc-attach {
+  --press-scale: 0.95;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: var(--mvc-muted);
+  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out);
+}
+@media (hover: hover) and (pointer: fine) { .mvc-attach:hover { background-color: var(--mvc-chip); } }
+.mvc-attach:is(:active,.is-pressed) { transform: scale(var(--press-scale)); }
+.mvc-thumb { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; outline: 1px solid var(--mvc-img-outline); outline-offset: -1px; }
+
+.mvc-t-clear { position: relative; overflow: hidden; }
+.mvc-input-wrap { flex: 1; min-width: 0; height: 36px; }
+.mvc-input { width: 100%; height: 100%; box-sizing: border-box; padding: 0 4px; outline: none; font-size: 13px; line-height: 20px; color: var(--mvc-fg); caret-color: var(--mvc-fg); }
+.mvc-t-clear-mirror, .mvc-t-clear-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 2;
+  padding: 0 4px;
+  font-size: 13px;
+  line-height: 20px;
+}
+.mvc-t-clear-mirror { opacity: 0; color: var(--mvc-fg); }
+.mvc-t-clear-placeholder { color: var(--mvc-muted); }
+.mvc-t-clear.has-value .mvc-t-clear-mirror, .mvc-t-clear.is-clearing .mvc-t-clear-mirror { opacity: 1; }
+.mvc-t-clear.has-value > input, .mvc-t-clear.is-clearing > input { -webkit-text-fill-color: transparent; }
+.mvc-t-clear.has-value .mvc-t-clear-placeholder { opacity: 0; }
+.mvc-t-clear-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; mix-blend-mode: multiply; }
+.mova-voice[data-theme="dark"] .mvc-t-clear-glow { mix-blend-mode: screen; }
+
+.mvc-mic {
+  --press-scale: 0.95;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--mvc-btn-bg);
+  box-shadow: var(--mvc-btn-shadow);
+  color: var(--mvc-fg);
+  transition: transform var(--press-dur) var(--ease-smooth-out);
+}
+:where(.mova-voice) .mvc-mic { background: var(--mvc-btn-bg); }
+@media (hover: hover) and (pointer: fine) { .mvc-mic:hover { background-image: linear-gradient(var(--mvc-hover), var(--mvc-hover)); } }
+.mvc-mic:is(:active,.is-pressed) { transform: scale(var(--press-scale)); }
+.mova-voice .mvc-mic:focus-visible { box-shadow: var(--mvc-btn-shadow), 0 0 0 2px var(--mvc-surface), 0 0 0 4px var(--mvc-accent); }
+.mvc-wave { display: flex; align-items: center; gap: 2px; height: 16px; }
+.mvc-wave i { display: block; width: 2px; border-radius: 1px; background: currentColor; transform-origin: center; }
+.mvc-wave i:nth-child(1) { height: 4px; }
+.mvc-wave i:nth-child(2) { height: 9px; }
+.mvc-wave i:nth-child(3) { height: 14px; }
+.mvc-wave i:nth-child(4) { height: 9px; }
+.mvc-wave i:nth-child(5) { height: 4px; }
+.mvc-mic.is-live .mvc-wave i { animation: mvc-wave var(--wave-dur) ease-in-out infinite; }
+.mvc-mic.is-live .mvc-wave i:nth-child(2) { animation-delay: calc(var(--wave-dur) * -0.3); }
+.mvc-mic.is-live .mvc-wave i:nth-child(3) { animation-delay: calc(var(--wave-dur) * -0.6); }
+.mvc-mic.is-live .mvc-wave i:nth-child(4) { animation-delay: calc(var(--wave-dur) * -0.15); }
+.mvc-mic.is-live .mvc-wave i:nth-child(5) { animation-delay: calc(var(--wave-dur) * -0.45); }
+@keyframes mvc-wave {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(var(--wave-min)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mvc-bubble-row, .mvc-mic.is-live .mvc-wave i { animation: none !important; }
+  .mvc-t-text-swap, .mvc-t-icon-swap .mvc-t-icon, .mvc-t-page-slide .mvc-t-page, .mvc-menu-icon line { transition: none !important; }
+  .mvc-t-stream-w { transition: none !important; filter: none !important; opacity: 1 !important; }
+  .mvc-t-clear-glow { opacity: 0 !important; }
+  .mvc-mic, .mvc-menu, .mvc-attach, .mvc-row { transition: none; }
+  .mvc-mic:is(:active,.is-pressed), .mvc-menu:is(:active,.is-pressed), .mvc-attach:is(:active,.is-pressed), .mvc-row:is(:active,.is-pressed) { transform: none; }
+}
+
+.mova-voice { --mvc-bg:#f9f9f9; --mvc-fg:#0d0d0d; --mvc-muted:#6c6c6c; --mvc-border:rgba(0,0,0,.08); --mvc-surface:#fff; --mvc-accent:#17181c; font:400 13px/20px "Inter Variable",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-optical-sizing:auto; font-feature-settings:"liga" 1,"calt" 1; letter-spacing:0; color-scheme:light; }
+.mova-voice[data-theme="dark"] { --mvc-bg:#131313; --mvc-fg:#f2f2f2; --mvc-muted:rgba(202,202,202,.7); --mvc-border:rgba(255,255,255,.08); --mvc-surface:#1d1d1d; --mvc-accent:#fff; color-scheme:dark; }
+.mova-voice { min-width:0; }
+.mova-voice, .mova-voice * { box-sizing:border-box; }
+.mova-voice button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
+.mova-voice button:disabled { cursor:default; opacity:.5; }
+.mova-voice .mvc-list { overflow:auto; }
+.mova-voice .mvc-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
+.mova-voice .mvc-transcript p { overflow-wrap:anywhere; }
+@media (prefers-reduced-motion:reduce) { .mova-voice *, .mova-voice *::before, .mova-voice *::after { animation:none!important; transition:none!important; } }
 `;
 
 // .generated/ui/cursor/cursor-trail.tsx
-import { useEffect as useEffect14, useState as useState20 } from "react";
+import { useEffect as useEffect16, useState as useState20 } from "react";
 import { motion as motion7, useSpring } from "framer-motion";
-import { Fragment as Fragment8, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx19 } from "react/jsx-runtime";
 function CursorTrail({
   color = "bg-blue-500",
   size = 8,
@@ -4764,7 +6870,7 @@ function CursorTrail({
 }) {
   const [coords, setCoords] = useState20({ x: 0, y: 0 });
   const [isVisible, setIsVisible] = useState20(false);
-  useEffect14(() => {
+  useEffect16(() => {
     const handleMouseMove = (e) => {
       setCoords({ x: e.clientX, y: e.clientY });
       if (!isVisible) setIsVisible(true);
@@ -4779,7 +6885,7 @@ function CursorTrail({
       document.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [isVisible]);
-  return /* @__PURE__ */ jsx19(Fragment8, { children: isVisible && Array.from({ length: count }).map((_, index) => {
+  return /* @__PURE__ */ jsx19(Fragment11, { children: isVisible && Array.from({ length: count }).map((_, index) => {
     const springConfig = {
       stiffness: 300 - index * 30,
       damping: 25 + index * 2,
@@ -4809,7 +6915,7 @@ function TrailDot({
 }) {
   const x = useSpring(coords.x, springConfig);
   const y = useSpring(coords.y, springConfig);
-  useEffect14(() => {
+  useEffect16(() => {
     x.set(coords.x);
     y.set(coords.y);
   }, [coords, x, y]);
@@ -4833,7 +6939,7 @@ function TrailDot({
 }
 
 // .generated/ui/cursor/mouse-follow.tsx
-import { useEffect as useEffect15, useState as useState21 } from "react";
+import { useEffect as useEffect17, useState as useState21 } from "react";
 import { motion as motion8, useSpring as useSpring2 } from "framer-motion";
 import { jsx as jsx20 } from "react/jsx-runtime";
 function MouseFollow({
@@ -4845,7 +6951,7 @@ function MouseFollow({
   const [isVisible, setIsVisible] = useState21(false);
   const x = useSpring2(0, { stiffness, damping });
   const y = useSpring2(0, { stiffness, damping });
-  useEffect15(() => {
+  useEffect17(() => {
     const handleMouseMove = (e) => {
       x.set(e.clientX);
       y.set(e.clientY);
@@ -4878,7 +6984,7 @@ function MouseFollow({
 }
 
 // .generated/ui/cursor/spotlight.tsx
-import { useRef as useRef11, useState as useState22 } from "react";
+import { useRef as useRef13, useState as useState22 } from "react";
 import { motion as motion9 } from "framer-motion";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function Spotlight({
@@ -4887,7 +6993,7 @@ function Spotlight({
   glowColor = "rgba(255, 255, 255, 0.08)",
   glowSize = 250
 }) {
-  const containerRef = useRef11(null);
+  const containerRef = useRef13(null);
   const [coords, setCoords] = useState22({ x: 0, y: 0 });
   const [opacity, setOpacity] = useState22(0);
   const handleMouseMove = (e) => {
@@ -5163,7 +7269,7 @@ function CardHover({
 }
 
 // .generated/ui/hover/glow-button.tsx
-import { useRef as useRef12, useState as useState24 } from "react";
+import { useRef as useRef14, useState as useState24 } from "react";
 import { motion as motion18 } from "framer-motion";
 import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function GlowButton({
@@ -5173,7 +7279,7 @@ function GlowButton({
   // Light blue default
   onClick
 }) {
-  const containerRef = useRef12(null);
+  const containerRef = useRef14(null);
   const [coords, setCoords] = useState24({ x: 0, y: 0 });
   const [opacity, setOpacity] = useState24(0);
   const handleMouseMove = (e) => {
@@ -5211,7 +7317,7 @@ function GlowButton({
 }
 
 // .generated/ui/hover/inset-button.tsx
-import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var insetButtonStyles = `
 .mova-inset-button {
   --surface-elevated: oklch(0.996 0.001 95);
@@ -5284,7 +7390,7 @@ var insetButtonStyles = `
 }
 `;
 function InsetButton({ variant = "text", theme = "dark", children, className = "", type = "button", ...props }) {
-  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx31("style", { children: insetButtonStyles }),
     /* @__PURE__ */ jsx31(
       "button",
@@ -5302,7 +7408,7 @@ function InsetButton({ variant = "text", theme = "dark", children, className = "
 }
 
 // .generated/ui/hover/magnetic-button.tsx
-import { useRef as useRef13, useState as useState25 } from "react";
+import { useRef as useRef15, useState as useState25 } from "react";
 import { motion as motion19, useSpring as useSpring3 } from "framer-motion";
 import { jsx as jsx32 } from "react/jsx-runtime";
 function MagneticButton({
@@ -5312,7 +7418,7 @@ function MagneticButton({
   className = "",
   onClick
 }) {
-  const ref = useRef13(null);
+  const ref = useRef15(null);
   const [position, setPosition] = useState25({ x: 0, y: 0 });
   const springConfig = { stiffness: 150, damping: 15, mass: 0.6 };
   const x = useSpring3(0, springConfig);
@@ -5353,7 +7459,7 @@ function MagneticButton({
 }
 
 // .generated/ui/hover/tilt-card.tsx
-import { useRef as useRef14, useState as useState26 } from "react";
+import { useRef as useRef16, useState as useState26 } from "react";
 import { motion as motion20, useMotionValue, useSpring as useSpring4, useTransform } from "framer-motion";
 import { jsx as jsx33 } from "react/jsx-runtime";
 function TiltCard({
@@ -5362,7 +7468,7 @@ function TiltCard({
   className = "",
   cardClassName = ""
 }) {
-  const cardRef = useRef14(null);
+  const cardRef = useRef16(null);
   const [isHovered, setIsHovered] = useState26(false);
   const x = useMotionValue(0);
   const y = useMotionValue(0);
@@ -8110,7 +10216,7 @@ var WanderingCube = () => {
 };
 
 // .generated/ui/loading/wandering-eyes.tsx
-import { Fragment as Fragment10, jsx as jsx165, jsxs as jsxs79 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx165, jsxs as jsxs79 } from "react/jsx-runtime";
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -8138,7 +10244,7 @@ function WanderingEyes({
     "--mova-wandering-eyes-blink": `${safeBlinkScale}`,
     "--mova-wandering-eyes-travel-scale": `${safeTravelScale}`
   };
-  return /* @__PURE__ */ jsxs79(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs79(Fragment13, { children: [
     /* @__PURE__ */ jsx165("style", { children: `
         @keyframes mova-wandering-eyes-move {
           0%, 10% { background-position: 0 0; }
@@ -8364,7 +10470,7 @@ var ZigZagPulse = () => {
 };
 
 // .generated/ui/patterns/animated-tags.tsx
-import { CircleX, Plus as Plus4 } from "lucide-react";
+import { CircleX, Plus as Plus2 } from "lucide-react";
 import { AnimatePresence as AnimatePresence7, motion as motion155, useReducedMotion as useReducedMotion9 } from "framer-motion";
 import { useState as useState27 } from "react";
 import { jsx as jsx171, jsxs as jsxs81 } from "react/jsx-runtime";
@@ -8444,7 +10550,7 @@ function AnimatedTags({
           tag,
           " ",
           /* @__PURE__ */ jsx171(
-            Plus4,
+            Plus2,
             {
               className: "ease flex items-center justify-center rounded-full transition-all duration-200 group-hover/tag:bg-primary group-hover/tag:text-foreground",
               size: 16
@@ -8458,7 +10564,7 @@ function AnimatedTags({
 }
 
 // .generated/ui/patterns/expanding-icon-tabs.tsx
-import { useEffect as useEffect16, useRef as useRef15, useState as useState28 } from "react";
+import { useEffect as useEffect18, useRef as useRef17, useState as useState28 } from "react";
 import { Activity as Activity2, Compass, CreditCard, SlidersHorizontal as SlidersHorizontal2, Users } from "lucide-react";
 import { jsx as jsx172, jsxs as jsxs82 } from "react/jsx-runtime";
 var items = [
@@ -8471,8 +10577,8 @@ var items = [
 ];
 function ExpandingIconTabs() {
   const [active, setActive] = useState28(null);
-  const rootRef = useRef15(null);
-  useEffect16(() => {
+  const rootRef = useRef17(null);
+  useEffect18(() => {
     if (!active) return;
     const region = rootRef.current?.parentElement;
     if (!region) return;
@@ -8553,13 +10659,13 @@ function ExpandingIconTabs() {
 
 // .generated/ui/patterns/gooey-popover.tsx
 import gsap from "gsap";
-import { useCallback as useCallback3, useEffect as useEffect17, useId as useId11, useRef as useRef16, useState as useState29 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect19, useId as useId11, useRef as useRef18, useState as useState29 } from "react";
 import { jsx as jsx173, jsxs as jsxs83 } from "react/jsx-runtime";
 function cn2(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function useClickOutside(ref, handler, eventType = "mousedown") {
-  useEffect17(() => {
+  useEffect19(() => {
     function callback(event) {
       const target = event.target;
       if (!target?.isConnected) return;
@@ -8599,15 +10705,15 @@ function GooeyPopover({
   const [internalIsOpen, setInternalIsOpen] = useState29(false);
   const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
   const [isVisible, setIsVisible] = useState29(false);
-  const containerRef = useRef16(null);
-  const measureRef = useRef16(null);
-  const filteredContentRef = useRef16(null);
-  const unfilteredContentRef = useRef16(null);
-  const innerContentRef = useRef16(null);
-  const timelineRef = useRef16(null);
+  const containerRef = useRef18(null);
+  const measureRef = useRef18(null);
+  const filteredContentRef = useRef18(null);
+  const unfilteredContentRef = useRef18(null);
+  const innerContentRef = useRef18(null);
+  const timelineRef = useRef18(null);
   const [contentHeight, setContentHeight] = useState29(0);
   const [prefersReducedMotion, setPrefersReducedMotion] = useState29(false);
-  useEffect17(() => {
+  useEffect19(() => {
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     setPrefersReducedMotion(mq.matches);
     const handler = (e) => {
@@ -8616,7 +10722,7 @@ function GooeyPopover({
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
-  const setIsOpen = useCallback3(
+  const setIsOpen = useCallback4(
     (open) => {
       if (!isControlled) {
         setInternalIsOpen(open);
@@ -8625,13 +10731,13 @@ function GooeyPopover({
     },
     [isControlled, onOpenChange]
   );
-  const handleClose = useCallback3(() => {
+  const handleClose = useCallback4(() => {
     if (isOpen) {
       setIsOpen(false);
     }
   }, [isOpen, setIsOpen]);
   useClickOutside(containerRef, handleClose);
-  useEffect17(() => {
+  useEffect19(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -8640,7 +10746,7 @@ function GooeyPopover({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, setIsOpen]);
-  useEffect17(() => {
+  useEffect19(() => {
     const measureHeight = () => {
       if (measureRef.current) {
         const height = measureRef.current.scrollHeight;
@@ -8662,7 +10768,7 @@ function GooeyPopover({
   const triggerRadius = triggerSize / 2;
   const translateY = side === "top" ? -(contentHeight + sideOffset) : triggerSize + sideOffset;
   const contentLeft = triggerRadius - contentWidth / 2;
-  useEffect17(() => {
+  useEffect19(() => {
     if (contentHeight === 0) {
       return;
     }
@@ -9019,7 +11125,7 @@ function ScrollReveal({
 }
 
 // .generated/ui/scroll/sticky-reveal.tsx
-import { useRef as useRef17, useState as useState30 } from "react";
+import { useRef as useRef19, useState as useState30 } from "react";
 import { motion as motion158, useMotionValueEvent, useScroll as useScroll2 } from "framer-motion";
 import { jsx as jsx176, jsxs as jsxs84 } from "react/jsx-runtime";
 function StickyReveal({
@@ -9027,7 +11133,7 @@ function StickyReveal({
   className = ""
 }) {
   const [activeCard, setActiveCard] = useState30(0);
-  const ref = useRef17(null);
+  const ref = useRef19(null);
   const { scrollYProgress } = useScroll2({
     target: ref,
     offset: ["start start", "end end"]
@@ -9322,7 +11428,7 @@ var ClassicToggle = () => {
 };
 
 // .generated/ui/transitions/page-transition.tsx
-import { useEffect as useEffect18, useRef as useRef18 } from "react";
+import { useEffect as useEffect20, useRef as useRef20 } from "react";
 import { motion as motion164 } from "framer-motion";
 import { jsx as jsx182, jsxs as jsxs85 } from "react/jsx-runtime";
 var PageTransition = ({
@@ -9331,8 +11437,8 @@ var PageTransition = ({
   onComplete,
   className = ""
 }) => {
-  const pathRefs = useRef18([]);
-  useEffect18(() => {
+  const pathRefs = useRef20([]);
+  useEffect20(() => {
     if (type !== "liquid-wave" || !isVisible) return;
     let animId;
     const numPoints = 12;