@alfadocs/ui-kit 1.66.0 → 1.68.0

package/dist/_chunks/voice-control-panel-B8Lrk0C4.js

@@ -0,0 +1,1148 @@
+import { jsxs as c, jsx as o, Fragment as Me } from "react/jsx-runtime";
+import { forwardRef as on, useId as $e, useState as I, useRef as r, useMemo as je, useEffect as x, useCallback as k } from "react";
+import { c as K } from "./index-D2ZczOXr.js";
+import { useTranslation as sn, Trans as rn } from "react-i18next";
+import { u as an, w as cn } from "./ai-credits-notice-DQ-r3iQU.js";
+import { A as ln, a as dn } from "./ai-credits-exhausted-notice-Bg8NpW2K.js";
+import { A as un } from "./ai-permission-notice-C00i6VhY.js";
+import { A as fn } from "./ai-sparkle-D23NT8Z_.js";
+import { B as pn } from "./badge-BUk4RjTS.js";
+import { B as qe } from "./button-D-MQxsA_.js";
+import { I as mn } from "./icon-button-C_1TgRiK.js";
+import { C as gn, b as vn, a as hn } from "./collapsible-DVPM46bq.js";
+import { F as yn } from "./form-field-Ani72sVY.js";
+import { K as bn } from "./kbd-Bx7eQv9f.js";
+import { L as pe } from "./list-CNnn7DOD.js";
+import { L as xn } from "./live-region-C41SO3cA.js";
+import { S as wn } from "./select-4S-eYZUf.js";
+import { a as Nn, b as Ct, c as Cn, d as kn } from "./ai-fab-pill-BOu96kCx.js";
+import { c as An } from "./compose-refs-C0k0tdqF.js";
+import { g as Rn, a as En } from "./glass-surface-CPok0jEe.js";
+import { p as kt } from "./floating-clearance-nIx9fFLy.js";
+import { u as On } from "./registry-DvAUVLHh.js";
+import { u as Sn } from "./use-ai-sparkle-Cf4yVTLB.js";
+import { u as Pn } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { C as St } from "./circle-alert-rGDZ73Wh.js";
+import { T as In } from "./triangle-alert-CBnO6nq_.js";
+import { C as Kn } from "./circle-check-BN6rz4NV.js";
+import { I as We } from "./info-CGn22peZ.js";
+import { X as Tn } from "./x-B5YnXwCz.js";
+import { L as At } from "./loader-circle-BECIU_8N.js";
+import { S as Rt } from "./square-DASBRZ0U.js";
+import { c as _n } from "./createLucideIcon-DhHxpK9K.js";
+import { C as zn } from "./chevron-down-DWE7GSq9.js";
+import { S as Ln } from "./sliders-horizontal-D-F97cnE.js";
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Bn = [
+  ["path", { d: "M2 10v3", key: "1fnikh" }],
+  ["path", { d: "M6 6v11", key: "11sgs0" }],
+  ["path", { d: "M10 3v18", key: "yhl04a" }],
+  ["path", { d: "M14 8v7", key: "3a1oy3" }],
+  ["path", { d: "M18 5v13", key: "123xd1" }],
+  ["path", { d: "M22 10v3", key: "154ddg" }]
+], Et = _n("audio-lines", Bn), Gn = {
+  id: "voice-control-panel",
+  capabilities: ["capture", "pick", "expand", "open", "close"],
+  state: {
+    status: {
+      type: "'idle' | 'starting' | 'listening' | 'paused' | 'error'",
+      descriptionKey: "ui.agent.voiceControlPanel.state.status",
+      description: "Where the host voice session is: idle, starting, listening, paused or error.",
+      read: (t) => t.getStatus()
+    },
+    candidateIds: {
+      type: "string[]",
+      descriptionKey: "ui.agent.voiceControlPanel.state.candidateIds",
+      description: "Ids of the matches currently offered, in spoken order (option 1 first). Empty when there is nothing to choose.",
+      read: (t) => t.getCandidateIds()
+    },
+    commandsOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.voiceControlPanel.state.commandsOpen",
+      description: "True when the voice commands list is expanded.",
+      read: (t) => t.isCommandsOpen()
+    },
+    panelOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.voiceControlPanel.state.panelOpen",
+      description: "Floating layout: true when the panel above the pill is open. Always false inline.",
+      read: (t) => t.isPanelOpen()
+    },
+    creditsExhausted: {
+      type: "boolean",
+      descriptionKey: "ui.agent.voiceControlPanel.state.creditsExhausted",
+      description: "True when the practice is out of AI credits: every start shows the out-of-credits notice instead of listening.",
+      read: (t) => t.isCreditsExhausted()
+    },
+    creditsNoticeOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.voiceControlPanel.state.creditsNoticeOpen",
+      description: "True when the out-of-credits notice is showing in the panel, in place of the controls.",
+      read: (t) => t.isCreditsNoticeOpen()
+    }
+  },
+  actions: {
+    start_listening: {
+      safety: "write",
+      idempotent: !0,
+      // The host streams the patient's audio to its transcription service.
+      openWorld: !0,
+      descriptionKey: "ui.agent.voiceControlPanel.actions.startListening",
+      description: "Ask the host to start listening (it opens the microphone). Does nothing when already starting or listening, or while the panel is disabled. Without patient AI consent it shows the consent banner instead; out of AI credits (creditsExhausted) it shows the out-of-credits notice instead.",
+      errors: ["Microphone permission denied", "Speech service unavailable"],
+      invoke: (t) => {
+        t.start();
+      }
+    },
+    stop_listening: {
+      safety: "write",
+      idempotent: !0,
+      descriptionKey: "ui.agent.voiceControlPanel.actions.stopListening",
+      description: "Ask the host to stop listening, cancel a start or end a paused session. Never gated by consent or AI credits. Does nothing when idle or stopped.",
+      invoke: (t) => {
+        t.stop();
+      }
+    },
+    pick_candidate: {
+      // The host turns the pick into a write on the patient's record (the
+      // care plan adds a treatment line), so it is gated as PHI.
+      safety: "phi",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "One of the ids in the candidateIds state slot."
+          }
+        },
+        required: ["id"],
+        additionalProperties: !1
+      },
+      descriptionKey: "ui.agent.voiceControlPanel.actions.pickCandidate",
+      description: "Pick one of the offered matches by id, the same as saying its option number or pressing it. Unknown ids are ignored.",
+      examples: [
+        { args: { id: "otve" }, note: "Pick the match with id otve." }
+      ],
+      invoke: (t, v) => {
+        t.pickCandidate(v.id);
+      }
+    },
+    open_commands: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.voiceControlPanel.actions.openCommands",
+      description: "Expand the voice commands list.",
+      invoke: (t) => {
+        t.openCommands();
+      }
+    },
+    close_commands: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.voiceControlPanel.actions.closeCommands",
+      description: "Collapse the voice commands list.",
+      invoke: (t) => {
+        t.closeCommands();
+      }
+    },
+    open_panel: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.voiceControlPanel.actions.openPanel",
+      description: "Floating layout: open the panel above the pill. Does nothing inline.",
+      invoke: (t) => {
+        t.openPanel();
+      }
+    },
+    close_panel: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.voiceControlPanel.actions.closePanel",
+      description: "Floating layout: close the panel above the pill. Listening carries on. Does nothing inline.",
+      invoke: (t) => {
+        t.closePanel();
+      }
+    },
+    close_credits_notice: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.voiceControlPanel.actions.closeCreditsNotice",
+      description: "Close the out-of-credits notice and go back to the controls. Credits stay out: the next start shows it again.",
+      invoke: (t) => {
+        t.closeCreditsNotice();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "voice-control-panel",
+      description: "Marks the VoiceControlPanel root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop on VoiceControlPanel."
+    },
+    item: {
+      attr: "data-candidate-id",
+      description: "On each match button, the candidate id that pick_candidate takes."
+    }
+  }
+}, Vn = K(
+  [
+    // The container query lives on the root and is read by descendants only,
+    // never by a flex parent of its own (see the grid below).
+    "ds:@container/voice-control",
+    "ds:block ds:w-full ds:min-w-0",
+    // The edge is --surface-border-width (1px, 2px in the accessible themes),
+    // at zero specificity so the nearest theme root decides it.
+    "ds:rounded-[var(--radius-lg)] ds:[:where(&)]:border-[length:var(--surface-border-width,var(--border-width-sm))]",
+    "ds:bg-[var(--card)] ds:text-[color:var(--foreground)]",
+    "ds:p-[var(--spacing-md)]",
+    "ds:print:hidden"
+  ].join(" "),
+  {
+    variants: {
+      // The border colour lives only here, never beside a base colour, so
+      // the listening ring can't lose a race on stylesheet order.
+      status: {
+        idle: "ds:border-[color:var(--card-border)]",
+        starting: "ds:border-[color:var(--card-border)]",
+        listening: "ds:border-[color:var(--ring)]",
+        paused: "ds:border-[color:var(--card-border)]",
+        error: "ds:border-[color:var(--card-border)]"
+      }
+    },
+    defaultVariants: { status: "idle" }
+  }
+), Fn = K(
+  [
+    "ds:relative ds:inline-flex ds:size-2.5 ds:shrink-0 ds:rounded-[var(--radius-full)]",
+    "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      status: {
+        idle: "ds:border ds:border-[color:var(--muted-foreground)]",
+        starting: "ds:bg-[color:var(--muted-foreground)]",
+        listening: "ds:bg-[color:var(--destructive)]",
+        paused: "ds:bg-[color:var(--warning)]",
+        error: "ds:bg-[color:var(--error)]"
+      }
+    },
+    defaultVariants: { status: "idle" }
+  }
+), Ot = K(
+  "ds:m-0 ds:flex ds:items-start ds:gap-[var(--spacing-xs)] type-body-sm",
+  {
+    variants: {
+      tone: {
+        info: "ds:text-[color:var(--info-foreground)]",
+        success: "ds:text-[color:var(--success-foreground)]",
+        warning: "ds:text-[color:var(--warning-foreground)]",
+        error: "ds:text-[color:var(--error-foreground)]"
+      }
+    },
+    defaultVariants: { tone: "info" }
+  }
+), me = "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", Dn = K(
+  [
+    "ds:flex ds:w-full ds:items-center",
+    "ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]",
+    "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:py-[var(--spacing-2xs)]",
+    "ds:text-start ds:text-[color:var(--foreground)] ds:cursor-pointer",
+    "ds:hover:bg-[color:var(--muted)] ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+    me
+  ].join(" ")
+), Mn = K(
+  [
+    "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+    "ds:min-h-[var(--min-target-size)] ds:py-[var(--spacing-2xs)]",
+    "ds:rounded-[var(--radius-sm)] type-meta ds:text-[color:var(--muted-foreground)] ds:text-start",
+    "ds:hover:text-[color:var(--foreground)] ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    me
+  ].join(" ")
+), $n = K(
+  [
+    "ds:fixed ds:z-[var(--z-fixed)]",
+    // `--voice-control-offset` (default: the kit's corner gap) lifts the
+    // cluster, for example above the page's own floating button; the
+    // panel's height cap below reads the same property.
+    "ds:bottom-[calc(var(--voice-control-offset,var(--spacing-lg))+env(safe-area-inset-bottom,0px))]",
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+    "ds:pointer-events-none ds:[&>*]:pointer-events-auto",
+    "ds:print:hidden"
+  ].join(" "),
+  {
+    variants: {
+      position: {
+        "bottom-end": "ds:end-[var(--spacing-lg)] ds:items-end",
+        "bottom-start": "ds:start-[var(--spacing-lg)] ds:items-start"
+      }
+    },
+    defaultVariants: { position: "bottom-end" }
+  }
+), jn = K(
+  [
+    "ds:@container/voice-control",
+    // Closed is `hidden`: never let a display utility win over it.
+    "ds:min-w-0 ds:[&[hidden]]:hidden",
+    "ds:[inline-size:min(24rem,calc(100vw-(var(--spacing-lg)*2)))]",
+    "ds:[max-block-size:calc(100dvh-var(--min-target-size)-var(--voice-control-offset,var(--spacing-lg))-var(--spacing-lg)-var(--spacing-sm)-env(safe-area-inset-bottom,0px))]",
+    // On a phone the panel spans the screen, so it stops at half the height
+    // (scrolling inside) and the voice cursor row above it stays in view.
+    "ds:max-sm:[max-block-size:calc(50dvh-var(--min-target-size)-var(--voice-control-offset,var(--spacing-lg))-var(--spacing-lg)-var(--spacing-sm)-env(safe-area-inset-bottom,0px))]",
+    "ds:overflow-y-auto ds:overscroll-contain",
+    Rn,
+    En,
+    "ds:text-[color:var(--foreground)]",
+    me
+  ].join(" "),
+  {
+    variants: {
+      position: {
+        "bottom-end": "ds:origin-bottom-right ds:rtl:origin-bottom-left",
+        "bottom-start": "ds:origin-bottom-left ds:rtl:origin-bottom-right"
+      }
+    },
+    defaultVariants: { position: "bottom-end" }
+  }
+), qn = K(
+  "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+  {
+    variants: {
+      extended: {
+        true: "ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-md)]",
+        false: ""
+      }
+    },
+    defaultVariants: { extended: !1 }
+  }
+), Hn = {
+  alt: "Alt",
+  option: "Alt",
+  ctrl: "Control",
+  control: "Control",
+  shift: "Shift",
+  meta: "Meta",
+  cmd: "Meta",
+  command: "Meta"
+};
+function Wn(t) {
+  const v = t.split("+").map((T) => T.trim()).filter(Boolean);
+  if (v.length === 0) return null;
+  const p = v[v.length - 1], M = /* @__PURE__ */ new Set();
+  for (const T of v.slice(0, -1)) {
+    const ee = Hn[T.toLowerCase()];
+    if (!ee) return null;
+    M.add(ee);
+  }
+  const $ = p.length === 1 ? p.toUpperCase() : p, j = ["Control", "Alt", "Shift", "Meta"].filter(
+    (T) => M.has(T)
+  );
+  return {
+    modifiers: M,
+    key: $,
+    aria: [...j, $].join("+"),
+    keys: [...j, $]
+  };
+}
+function Un(t, v) {
+  if (t.altKey !== v.modifiers.has("Alt") || t.ctrlKey !== v.modifiers.has("Control") || t.shiftKey !== v.modifiers.has("Shift") || t.metaKey !== v.modifiers.has("Meta")) return !1;
+  const { key: p } = v;
+  return /^[A-Z]$/.test(p) ? t.code === `Key${p}` : /^[0-9]$/.test(p) ? t.code === `Digit${p}` : t.key.toLowerCase() === p.toLowerCase();
+}
+function Jn({ keys: t }) {
+  return /* @__PURE__ */ o(bn, { keys: t, separator: "plus", size: "sm" });
+}
+const Qn = {
+  info: We,
+  success: Kn,
+  warning: In,
+  error: St
+}, Xn = [], He = "ds:min-h-[var(--min-target-size)]", Zn = "ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)]", Yn = /[.!?…:。．！？؟।]$/u, eo = 1e4, to = " ", no = on(
+  ({
+    status: t,
+    onToggle: v,
+    disabled: p = !1,
+    title: M,
+    beta: $ = !1,
+    betaNotice: j,
+    language: T,
+    languages: ee,
+    onLanguageChange: ge,
+    extraControls: ve,
+    target: he,
+    transcript: u,
+    message: m,
+    error: A,
+    candidates: q = Xn,
+    candidatesLabel: L,
+    onCandidatePick: H,
+    commands: ye,
+    defaultCommandsOpen: Pt = !1,
+    shortcut: te = "Alt+V",
+    id: W,
+    layout: It = "inline",
+    position: be = "bottom-end",
+    open: Ue,
+    defaultOpen: Kt = !1,
+    onOpenChange: Je,
+    aiSparkle: Tt = !0,
+    aiConsent: i,
+    aiConsentHeadingLevel: Qe,
+    aiCredits: B,
+    aiCreditsNotice: _t,
+    className: Xe,
+    ...Ze
+  }, Ye) => {
+    const { t: l } = sn("ui"), xe = $e(), et = $e(), tt = $e(), [we, Ne] = I(Pt), g = It === "floating", Ce = r(null), nt = je(() => An(Ye, Ce), [Ye]), ne = r(null), ot = r(null), oe = r(null), se = r(null), ke = r(null), st = r(null), w = je(
+      () => te === !1 ? null : Wn(te),
+      [te]
+    );
+    x(() => {
+    }, [te, w]);
+    const [zt, Lt] = I(Kt), Ae = Ue !== void 0, y = g && (Ae ? Ue : zt), U = i !== void 0 && !i.granted, [Re, Ee] = I(!1), Bt = Re && U, re = r(!1), J = r(!1), [Gt, rt] = I(!1), Vt = ((i == null ? void 0 : i.pending) ?? !1) || Gt, R = (B == null ? void 0 : B.exhausted) === !0, [Q, _] = I(!1), Oe = Q && R, Se = r(!1), [Ft, Dt] = I(0), X = r(Q);
+    X.current = Q;
+    const it = r(null), G = r(!1), a = r({
+      status: t,
+      onToggle: v,
+      disabled: p,
+      candidates: q,
+      onCandidatePick: H,
+      commandsOpen: we,
+      aiBlocked: U,
+      creditsBlocked: R,
+      showCredits: Oe,
+      floating: g,
+      panelOpen: y,
+      controlled: Ae,
+      onOpenChange: Je
+    });
+    a.current = {
+      status: t,
+      onToggle: v,
+      disabled: p,
+      candidates: q,
+      onCandidatePick: H,
+      commandsOpen: we,
+      aiBlocked: U,
+      creditsBlocked: R,
+      showCredits: Oe,
+      floating: g,
+      panelOpen: y,
+      controlled: Ae,
+      onOpenChange: Je
+    };
+    const Z = r(null), [, Mt] = I(0), f = k((e) => {
+      Z.current = e, Mt((n) => n + 1);
+    }, []), E = r(null), Pe = r(!1), b = k((e) => {
+      var s;
+      const n = a.current;
+      !n.floating || n.panelOpen === e || (n.controlled || Lt(e), (s = n.onOpenChange) == null || s.call(n, e));
+    }, []), ie = k(() => {
+      re.current = !1, J.current = !1, Ee(!1);
+    }, []), ae = k(() => {
+      const e = typeof document > "u" ? null : document.activeElement;
+      E.current = e instanceof HTMLElement && e !== document.body ? e : null;
+    }, []), at = k(() => {
+      ae(), re.current = !0, _(!1), Ee(!0), b(!0), f("gate");
+    }, [ae, b, f]), Ie = k(() => {
+      var n;
+      if (typeof document > "u") return !1;
+      const e = document.activeElement;
+      return !e || e === document.body || !!((n = it.current) != null && n.contains(e));
+    }, []), Ke = k(() => {
+      var n;
+      const e = !!((n = oe.current) != null && n.contains(document.activeElement));
+      G.current = !1, _(!1), e && f("toggle");
+    }, [f]), ce = k(
+      (e = !1) => {
+        e || ae(), X.current = !0, _(!0), b(!0), f("credits");
+      },
+      [ae, b, f]
+    ), le = k(() => {
+      const {
+        status: e,
+        disabled: n,
+        aiBlocked: s,
+        creditsBlocked: d
+      } = a.current;
+      if (e === "starting" || e === "listening") {
+        a.current.onToggle("stop");
+        return;
+      }
+      if (!n) {
+        if (s) {
+          at();
+          return;
+        }
+        if (d) {
+          ce();
+          return;
+        }
+        a.current.onToggle("start");
+      }
+    }, [at, ce]), Te = r(le);
+    Te.current = le;
+    const $t = k(() => {
+      var n;
+      J.current = !0;
+      const e = (n = i == null ? void 0 : i.onGrant) == null ? void 0 : n.call(i);
+      e && typeof e.then == "function" && (rt(!0), Promise.resolve(e).catch(() => {
+        J.current = !1;
+      }).finally(() => rt(!1)));
+    }, [i]), ct = r((i == null ? void 0 : i.granted) ?? !0);
+    x(() => {
+      const e = ct.current, n = (i == null ? void 0 : i.granted) ?? !0;
+      if (ct.current = n, e || !n) return;
+      const s = re.current, d = J.current;
+      if (re.current = !1, J.current = !1, Ee(!1), !s) return;
+      const C = typeof document > "u" || !document.activeElement || document.activeElement === document.body;
+      if (d) {
+        const {
+          status: O,
+          disabled: S,
+          creditsBlocked: P
+        } = a.current;
+        if (!S && O !== "starting" && O !== "listening") {
+          if (P) {
+            ce(!0);
+            return;
+          }
+          a.current.onToggle("start");
+        }
+        E.current = null, f("toggle");
+      } else C && f("toggle");
+    }, [i == null ? void 0 : i.granted, f, ce]), x(() => {
+      if (!(t === "starting" || t === "listening" || t === "paused") || !(U || R)) {
+        Pe.current = !1;
+        return;
+      }
+      Pe.current || (Pe.current = !0, a.current.onToggle("stop"));
+    }, [U, R, t]);
+    const jt = r({ live: !1, endedAt: -1 / 0 }), _e = r(!1);
+    x(() => {
+      const e = jt.current;
+      if (t === "starting" || t === "listening" || t === "paused" ? e.live = !0 : e.live && (e.live = !1, e.endedAt = Date.now()), !R) {
+        _e.current = !1, X.current && (G.current && Ie() && f("toggle"), G.current = !1, E.current = null, _(!1));
+        return;
+      }
+      _e.current || t === "starting" || t === "listening" || !(t === "paused" || Date.now() - e.endedAt <= eo) || (_e.current = !0, E.current = null, Ie() && document.activeElement !== document.body ? f("credits") : (G.current = !1, Se.current = !0, Dt((d) => d + 1)), X.current = !0, _(!0), b(!0));
+    }, [R, t, b, Ie, f]), x(() => {
+      g && !y && Re && ie(), g && !y && Q && _(!1);
+    }, [g, y, Re, ie, Q]), x(() => {
+      if (!w || typeof document > "u") return;
+      const e = (n) => {
+        if (n.defaultPrevented || n.repeat || n.isComposing || !Un(n, w)) return;
+        const { status: s, disabled: d } = a.current;
+        d && s !== "starting" && s !== "listening" || (n.preventDefault(), Te.current());
+      };
+      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+    }, [w]);
+    const qt = je(
+      () => ({
+        getStatus: () => a.current.status,
+        start: () => {
+          const { status: e, disabled: n } = a.current;
+          n || e === "starting" || e === "listening" || Te.current();
+        },
+        stop: () => {
+          const { status: e } = a.current;
+          e !== "starting" && e !== "listening" && e !== "paused" || a.current.onToggle("stop");
+        },
+        getCandidateIds: () => a.current.candidates.map((e) => e.id),
+        pickCandidate: (e) => {
+          var n, s;
+          a.current.disabled || a.current.candidates.some((d) => d.id === e) && ((s = (n = a.current).onCandidatePick) == null || s.call(n, e));
+        },
+        isCommandsOpen: () => a.current.commandsOpen,
+        openCommands: () => Ne(!0),
+        closeCommands: () => Ne(!1),
+        isPanelOpen: () => a.current.panelOpen,
+        openPanel: () => b(!0),
+        closePanel: () => b(!1),
+        isCreditsExhausted: () => a.current.creditsBlocked,
+        isCreditsNoticeOpen: () => a.current.showCredits,
+        closeCreditsNotice: () => Ke()
+      }),
+      [b, Ke]
+    );
+    On(Gn, qt, W);
+    const V = l(`voiceControl.status.${t}`), z = A ? l(`voiceControl.error.${A}`) : "", de = (m == null ? void 0 : m.text) ?? "", F = de ? `${(m == null ? void 0 : m.id) ?? ""}\0${de}` : "", ze = q.length > 0, N = q.map((e) => e.id).join("\0"), lt = t === "starting" || t === "listening", ue = l(t === "listening" ? "voiceControl.action.stop" : t === "starting" ? "common.cancel" : t === "paused" ? "voiceControl.action.resume" : "voiceControl.action.start"), [Le, Ht] = I({ text: "", count: 0 }), dt = r({
+      status: t,
+      errorText: z,
+      messageKey: F,
+      candidatesKey: N
+    });
+    x(() => {
+      const e = dt.current, n = [];
+      t !== e.status && n.push(V), z && z !== e.errorText && n.push(z), F && F !== e.messageKey && n.push(de), N && N !== e.candidatesKey && n.push(L || l("voiceControl.candidates")), Se.current && (Se.current = !1, n.push(l("aiCredits.title"))), dt.current = { status: t, errorText: z, messageKey: F, candidatesKey: N }, n.length > 0 && Ht((s) => ({
+        // A sentence break between parts gives the screen reader a pause:
+        // "Stopped. Microphone access is blocked…". The break is a
+        // translated template (Japanese ends a sentence with 。), skipped
+        // when a part already ends one.
+        text: n.reduce(
+          (d, C) => Yn.test(d) ? `${d} ${C}` : l("voiceControl.announcementJoin", {
+            first: d,
+            next: C
+          })
+        ),
+        count: s.count + 1
+      }));
+    }, [
+      l,
+      t,
+      V,
+      z,
+      F,
+      de,
+      N,
+      L,
+      Ft
+    ]);
+    const ut = r({ error: A, candidatesKey: N });
+    x(() => {
+      const e = ut.current;
+      ut.current = { error: A, candidatesKey: N }, g && (A && A !== e.error || N && N !== e.candidatesKey) && b(!0);
+    }, [g, A, N, b]), x(() => {
+      const e = Ce.current;
+      if (!g || !e) return;
+      const n = {}, s = () => {
+        var D;
+        const C = window.getComputedStyle(e), O = Number.parseFloat(C.rowGap) || 0, S = (Number.parseFloat(C.bottom) || 0) + (((D = st.current) == null ? void 0 : D.offsetHeight) ?? 0) + O, P = ne.current, h = P && !P.hidden ? P.offsetHeight : 0;
+        kt(
+          n,
+          h > 0 ? Math.max(
+            S,
+            Math.min(S + h + O, window.innerHeight / 2)
+          ) : S
+        );
+      };
+      s();
+      const d = typeof ResizeObserver > "u" ? null : new ResizeObserver(s);
+      return d == null || d.observe(e), window.addEventListener("resize", s), () => {
+        d == null || d.disconnect(), window.removeEventListener("resize", s), kt(n, null);
+      };
+    }, [g]);
+    const Wt = an(
+      g ? _t : void 0
+    ), Be = g && Tt, {
+      state: ft,
+      props: pt,
+      land: mt
+    } = Sn({ enabled: Be }), Y = (m == null ? void 0 : m.tone) === "success" ? F : "", gt = r(Y);
+    x(() => {
+      Y !== gt.current && (gt.current = Y, Be && Y && mt());
+    }, [Be, Y, mt]);
+    const Ge = r(!1);
+    x(() => {
+      var n;
+      if (ze || !Ge.current) return;
+      Ge.current = !1;
+      const e = typeof document > "u" ? null : document.activeElement;
+      (!e || e === document.body) && ((n = se.current) == null || n.focus());
+    }, [ze]);
+    const vt = r(() => {
+    });
+    x(() => {
+      const e = Ce.current;
+      if (!g || !e) return;
+      const n = (s) => {
+        s.key !== "Escape" || s.defaultPrevented || a.current.panelOpen && (s.preventDefault(), vt.current(!0));
+      };
+      return e.addEventListener("keydown", n), () => e.removeEventListener("keydown", n);
+    }, [g]);
+    const ht = r(y);
+    Pn(() => {
+      var s;
+      const e = ht.current;
+      if (ht.current = y, !e || y || Z.current) return;
+      const n = document.activeElement;
+      n && ((s = ne.current) != null && s.contains(n)) && f("launcher");
+    }, [y, f]), x(() => {
+      var n, s, d, C, O, S, P;
+      const e = Z.current;
+      if (e) {
+        if (e === "credits" && !oe.current) {
+          (!a.current.creditsBlocked || !X.current) && (Z.current = null);
+          return;
+        }
+        if (Z.current = null, e === "gate") {
+          const h = ot.current, D = (h == null ? void 0 : h.querySelector(
+            '[role="checkbox"]:not([disabled])'
+          )) ?? (h == null ? void 0 : h.querySelector(
+            '[data-component="ai-consent-banner"]'
+          ));
+          D == null || D.focus();
+        } else if (e === "credits")
+          (s = (n = oe.current) == null ? void 0 : n.querySelector(
+            '[data-component="ai-credits-exhausted-notice"]'
+          )) == null || s.focus();
+        else if (e === "return") {
+          const h = E.current;
+          E.current = null, h != null && h.isConnected && h.getClientRects().length > 0 ? h.focus() : a.current.floating && !a.current.panelOpen ? (d = ke.current) == null || d.focus() : (C = se.current) == null || C.focus();
+        } else e === "panel" ? (O = ne.current) == null || O.focus() : e === "toggle" ? (S = se.current) == null || S.focus() : (P = ke.current) == null || P.focus();
+      }
+    });
+    const yt = (ee ?? []).map((e) => ({
+      value: e.value,
+      label: e.label
+    })), bt = yt.length > 1, Ut = bt || ve != null && ve !== !1, Jt = !!(u != null && u.final) || !!(u != null && u.partial), fe = t === "starting", Qt = m ? Qn[m.tone] : We, Ve = (e) => {
+      b(!1), ie(), _(!1), e && f(E.current ? "return" : "launcher");
+    };
+    vt.current = Ve;
+    const Xt = /* @__PURE__ */ c("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-x-[var(--spacing-xs)] ds:gap-y-[var(--spacing-2xs)]", children: [
+      /* @__PURE__ */ o(
+        "p",
+        {
+          id: xe,
+          className: "ds:m-0 type-label ds:font-semibold ds:text-[color:var(--foreground)]",
+          children: M ?? l("voiceControl.title")
+        }
+      ),
+      $ ? /* @__PURE__ */ o(pn, { variant: "brand", size: "sm", children: l("voiceControl.beta") }) : null,
+      /* @__PURE__ */ c("span", { className: "ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-meta ds:text-[color:var(--muted-foreground)]", children: [
+        /* @__PURE__ */ o("span", { "aria-hidden": "true", className: Fn({ status: t }), children: t === "listening" ? /* @__PURE__ */ o(
+          "span",
+          {
+            className: [
+              "ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)]",
+              "ds:bg-[color:var(--destructive)]",
+              // No pulse in the accessible themes (--accessible-off).
+              "ds:motion-safe:animate-[var(--accessible-off,recorder-pulse_1.2s_ease-out_infinite)]"
+            ].join(" ")
+          }
+        ) : null }),
+        /* @__PURE__ */ o("span", { "data-voice-status": "", children: V })
+      ] }),
+      g ? /* @__PURE__ */ o(
+        mn,
+        {
+          intent: "ghost",
+          size: "md",
+          icon: /* @__PURE__ */ o(Tn, {}),
+          "aria-label": l("common.close"),
+          onClick: () => Ve(!0),
+          className: Zn,
+          "data-voice-close": ""
+        }
+      ) : null
+    ] }), Zt = j ? /* @__PURE__ */ c("p", { className: "ds:m-0 ds:flex ds:items-start ds:gap-[var(--spacing-2xs)] type-meta ds:text-[color:var(--muted-foreground)]", children: [
+      /* @__PURE__ */ o(We, { "aria-hidden": "true", className: "ds:mt-px ds:size-4 ds:shrink-0" }),
+      /* @__PURE__ */ o("span", { children: j })
+    ] }) : null, xt = Bt && i ? /* @__PURE__ */ c(
+      "div",
+      {
+        ref: ot,
+        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+        "data-voice-consent": "",
+        children: [
+          /* @__PURE__ */ o(
+            un,
+            {
+              tabIndex: -1,
+              granted: i.granted,
+              grantedAt: i.grantedAt,
+              grantedBy: i.grantedBy,
+              canGrant: (i.canGrant ?? !0) && i.onGrant !== void 0,
+              pending: Vt,
+              onGrantConsent: $t,
+              headingLevel: Qe
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: "ds:flex ds:justify-end", children: /* @__PURE__ */ o(
+            qe,
+            {
+              intent: "ghost",
+              size: "md",
+              onClick: () => {
+                ie(), f("return");
+              },
+              className: He,
+              children: l("common.close")
+            }
+          ) })
+        ]
+      }
+    ) : null, Yt = Oe && !xt ? /* @__PURE__ */ c(
+      "div",
+      {
+        ref: oe,
+        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+        "data-voice-credits": "",
+        onFocusCapture: () => {
+          G.current = !0;
+        },
+        onBlurCapture: () => {
+          G.current = !1;
+        },
+        children: [
+          /* @__PURE__ */ o(
+            ln,
+            {
+              tabIndex: -1,
+              className: me,
+              credits: B,
+              headingLevel: Qe ?? 5,
+              announce: "off"
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: "ds:flex ds:justify-end", children: /* @__PURE__ */ o(
+            qe,
+            {
+              intent: "ghost",
+              size: "md",
+              onClick: () => {
+                Ke(), f("return");
+              },
+              className: He,
+              children: l("common.close")
+            }
+          ) })
+        ]
+      }
+    ) : null, en = B ? /* @__PURE__ */ o(dn, { credits: B, exhausted: R }) : null, tn = /* @__PURE__ */ c(Me, { children: [
+      /* @__PURE__ */ c("div", { className: "ds:grid ds:grid-cols-1 ds:items-start ds:gap-[var(--spacing-sm)] ds:@[560px]/voice-control:grid-cols-[auto_minmax(0,1fr)_auto]", children: [
+        /* @__PURE__ */ o(
+          qe,
+          {
+            ref: se,
+            intent: t === "listening" ? "outline" : "primary",
+            background: "surface",
+            size: "md",
+            disabled: p && !lt,
+            "aria-busy": fe || void 0,
+            "aria-keyshortcuts": w == null ? void 0 : w.aria,
+            onClick: () => le(),
+            startIcon: fe ? /* @__PURE__ */ o(At, { className: "ds:animate-[var(--accessible-off,spin_1s_linear_infinite)] ds:motion-reduce:animate-none" }) : t === "listening" ? /* @__PURE__ */ o(Rt, { className: "ds:fill-current" }) : /* @__PURE__ */ o(Et, {}),
+            className: `${He} ds:w-full ds:@[560px]/voice-control:w-auto`,
+            "data-voice-toggle": "",
+            children: ue
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: "ds:flex ds:min-w-0 ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+          he != null && he !== "" ? /* @__PURE__ */ o("p", { className: "ds:m-0 type-body-sm ds:font-semibold ds:[overflow-wrap:anywhere]", children: he }) : null,
+          Jt ? /* @__PURE__ */ c(
+            "p",
+            {
+              className: "ds:m-0 type-body-sm ds:[overflow-wrap:anywhere]",
+              "data-voice-transcript": "",
+              children: [
+                /* @__PURE__ */ c("span", { className: "ds:sr-only", children: [
+                  l("voiceControl.heard"),
+                  " "
+                ] }),
+                u != null && u.final ? /* @__PURE__ */ o("span", { className: "ds:text-[color:var(--foreground)]", children: u.final }) : null,
+                u != null && u.final && (u != null && u.partial) ? " " : null,
+                u != null && u.partial ? /* @__PURE__ */ o(
+                  "span",
+                  {
+                    className: "ds:italic ds:text-[color:var(--muted-foreground)]",
+                    "data-voice-partial": "",
+                    children: u.partial
+                  }
+                ) : null
+              ]
+            }
+          ) : t === "listening" ? (
+            // Holds the line while nothing has been heard yet, so the first
+            // words do not push the panel down.
+            /* @__PURE__ */ o(
+              "p",
+              {
+                "aria-hidden": "true",
+                className: "ds:m-0 type-body-sm ds:min-h-[1lh]"
+              }
+            )
+          ) : null,
+          A ? /* @__PURE__ */ c("p", { className: Ot({ tone: "error" }), children: [
+            /* @__PURE__ */ o(
+              St,
+              {
+                "aria-hidden": "true",
+                className: "ds:mt-px ds:size-4 ds:shrink-0"
+              }
+            ),
+            /* @__PURE__ */ o("span", { children: z })
+          ] }) : null,
+          m && m.text ? /* @__PURE__ */ c(
+            "p",
+            {
+              className: Ot({ tone: m.tone }),
+              "data-tone": m.tone,
+              children: [
+                /* @__PURE__ */ o(
+                  Qt,
+                  {
+                    "aria-hidden": "true",
+                    className: "ds:mt-px ds:size-4 ds:shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ o("span", { children: m.text })
+              ]
+            }
+          ) : null
+        ] }),
+        Ut ? /* @__PURE__ */ c("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:@[560px]/voice-control:flex-row ds:@[560px]/voice-control:flex-wrap ds:@[560px]/voice-control:items-end", children: [
+          bt ? (
+            // A visible, associated label (the kit FormField pattern).
+            /* @__PURE__ */ o(yn, { label: l("voiceControl.language"), children: /* @__PURE__ */ o(
+              wn,
+              {
+                options: yt,
+                value: T ?? "",
+                onValueChange: (e) => {
+                  e && (ge == null || ge(e));
+                },
+                disabled: p
+              }
+            ) })
+          ) : null,
+          ve
+        ] }) : null
+      ] }),
+      ze ? /* @__PURE__ */ c(
+        "div",
+        {
+          role: "group",
+          "aria-labelledby": L ? et : void 0,
+          "aria-label": L ? void 0 : l("voiceControl.candidates"),
+          className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
+          "data-voice-candidates": "",
+          children: [
+            L ? /* @__PURE__ */ o(
+              "p",
+              {
+                id: et,
+                className: "ds:m-0 type-body-sm ds:text-[color:var(--foreground)]",
+                children: L
+              }
+            ) : null,
+            /* @__PURE__ */ o(pe, { as: "ol", density: "compact", children: q.map((e, n) => /* @__PURE__ */ o(
+              pe.Item,
+              {
+                title: /* @__PURE__ */ o(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: p,
+                    onClick: () => {
+                      Ge.current = !0, H == null || H(e.id);
+                    },
+                    className: Dn(),
+                    "data-candidate-id": e.id,
+                    children: /* @__PURE__ */ c("span", { children: [
+                      /* @__PURE__ */ o("span", { className: "ds:sr-only", children: l("voiceControl.candidate", {
+                        number: n + 1
+                      }) }),
+                      " ",
+                      /* @__PURE__ */ o("span", { className: "ds:font-medium", children: e.label }),
+                      e.detail ? /* @__PURE__ */ c(Me, { children: [
+                        " ",
+                        /* @__PURE__ */ o("span", { className: "ds:ms-[var(--spacing-2xs)] type-meta ds:text-[color:var(--muted-foreground)]", children: e.detail })
+                      ] }) : null
+                    ] })
+                  }
+                )
+              },
+              e.id
+            )) })
+          ]
+        }
+      ) : null,
+      ye && ye.length > 0 ? /* @__PURE__ */ c(gn, { open: we, onOpenChange: Ne, children: [
+        /* @__PURE__ */ c(vn, { className: Mn(), children: [
+          /* @__PURE__ */ o(
+            zn,
+            {
+              "aria-hidden": "true",
+              className: "ds:size-4 ds:shrink-0 ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:[[data-state=open]_&]:rotate-180"
+            }
+          ),
+          /* @__PURE__ */ o("span", { children: w ? /* @__PURE__ */ o(
+            rn,
+            {
+              ns: "ui",
+              i18nKey: "voiceControl.commandsWithShortcut",
+              components: {
+                shortcut: /* @__PURE__ */ o(Jn, { keys: w.keys })
+              }
+            }
+          ) : l("voiceControl.commands") })
+        ] }),
+        /* @__PURE__ */ o(
+          hn,
+          {
+            "aria-label": l("voiceControl.commands"),
+            className: "ds:pt-[var(--spacing-xs)]",
+            children: /* @__PURE__ */ o(pe, { density: "compact", children: ye.map((e, n) => /* @__PURE__ */ o(
+              pe.Item,
+              {
+                title: e.phrase,
+                description: e.description
+              },
+              n
+            )) })
+          }
+        )
+      ] }) : null
+    ] }), wt = /* @__PURE__ */ c("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+      Xt,
+      Zt,
+      /* @__PURE__ */ o("div", { ref: it, className: "ds:contents", children: xt ?? Yt ?? /* @__PURE__ */ c(Me, { children: [
+        en,
+        tn
+      ] }) })
+    ] }), Nt = /* @__PURE__ */ o(xn, { politeness: "polite", "data-voice-announcer": "", children: Le.text ? (
+      // Alternate a trailing no-break space so the same words said
+      // twice in a row still change the region and are announced.
+      `${Le.text}${Le.count % 2 ? to : ""}`
+    ) : "" });
+    if (!g)
+      return /* @__PURE__ */ c(
+        "div",
+        {
+          ref: nt,
+          role: "group",
+          "aria-labelledby": xe,
+          "data-component": "voice-control-panel",
+          "data-component-id": W,
+          "data-status": t,
+          id: W,
+          ...Ze,
+          className: Vn({ status: t, className: Xe }),
+          children: [
+            wt,
+            Nt
+          ]
+        }
+      );
+    const Fe = t === "listening", De = Fe || t === "paused", nn = De && !ue.toLocaleLowerCase().includes(V.toLocaleLowerCase()) ? l("voiceControl.statusWithAction", {
+      status: V,
+      action: ue
+    }) : ue;
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: nt,
+        "data-component": "voice-control-panel",
+        "data-component-id": W,
+        "data-status": t,
+        "data-layout": "floating",
+        "data-position": be,
+        "data-open": y ? "" : void 0,
+        id: W,
+        ...Ze,
+        className: $n({ position: be, className: Xe }),
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              ref: ne,
+              id: tt,
+              role: "group",
+              "aria-labelledby": xe,
+              tabIndex: -1,
+              hidden: !y,
+              className: jn({ position: be }),
+              "data-voice-panel": "",
+              children: wt
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ref: st,
+              className: "ds:relative",
+              "data-ai-sparkle": pt["data-ai-sparkle"],
+              children: [
+                /* @__PURE__ */ c("div", { className: Nn, "data-voice-pill": "", children: [
+                  cn(
+                    /* @__PURE__ */ c(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => le(),
+                        disabled: p && !lt || void 0,
+                        "aria-label": nn,
+                        "aria-busy": fe || void 0,
+                        "aria-keyshortcuts": w == null ? void 0 : w.aria,
+                        className: Ct({
+                          // The word on the red needs 7:1 in the accessible themes:
+                          // `labelled` holds the hover red there.
+                          recording: Fe ? "labelled" : !1,
+                          className: qn({ extended: De })
+                        }),
+                        "data-voice-mic": "",
+                        children: [
+                          fe ? /* @__PURE__ */ o(
+                            At,
+                            {
+                              "aria-hidden": "true",
+                              className: "ds:size-5 ds:animate-[var(--accessible-off,spin_1s_linear_infinite)] ds:motion-reduce:animate-none"
+                            }
+                          ) : Fe ? /* @__PURE__ */ o(
+                            Rt,
+                            {
+                              "aria-hidden": "true",
+                              className: "ds:size-5 ds:fill-current"
+                            }
+                          ) : /* @__PURE__ */ o(Et, { "aria-hidden": "true", className: "ds:size-5" }),
+                          De ? /* @__PURE__ */ o("span", { className: "type-label ds:whitespace-nowrap", children: V }) : null
+                        ]
+                      }
+                    ),
+                    Wt,
+                    // The pill sits at the foot of the viewport: the card opens up.
+                    "top"
+                  ),
+                  /* @__PURE__ */ o("span", { "aria-hidden": "true", className: Cn }),
+                  /* @__PURE__ */ o(
+                    "button",
+                    {
+                      ref: ke,
+                      type: "button",
+                      onClick: () => {
+                        y ? Ve(!1) : (E.current = null, b(!0), f("panel"));
+                      },
+                      "aria-label": l("voiceControl.panelToggle"),
+                      "aria-expanded": y,
+                      "aria-controls": tt,
+                      className: Ct({ recording: !1 }),
+                      "data-voice-launcher": "",
+                      children: /* @__PURE__ */ o(Ln, { "aria-hidden": "true", className: "ds:size-5" })
+                    }
+                  ),
+                  ft ? /* @__PURE__ */ o(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: `${kn} ${pt.className}`
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ o(fn, { state: ft })
+              ]
+            }
+          ),
+          Nt
+        ]
+      }
+    );
+  }
+);
+no.displayName = "VoiceControlPanel";
+export {
+  no as V,
+  Gn as v
+};
+//# sourceMappingURL=voice-control-panel-B8Lrk0C4.js.map