@alfadocs/ui-kit 1.54.3 → 1.55.0

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

@@ -0,0 +1,1009 @@
+import { jsxs as a, jsx as o, Fragment as ot } from "react/jsx-runtime";
+import { forwardRef as It, useId as Se, useState as _, useRef as c, useMemo as Pe, useEffect as y, useCallback as I } from "react";
+import { c as P } from "./index-D2ZczOXr.js";
+import { useTranslation as Lt, Trans as Vt } from "react-i18next";
+import { A as Gt } from "./ai-permission-notice-5vpblPCx.js";
+import { A as Ft } from "./ai-sparkle-D23NT8Z_.js";
+import { B as Mt } from "./badge-hnBt8o7n.js";
+import { B as st } from "./button-Bn16lcFM.js";
+import { I as Dt } from "./icon-button-COX76Jdj.js";
+import { C as $t, b as Bt, a as jt } from "./collapsible-DVPM46bq.js";
+import { F as qt } from "./form-field-Ani72sVY.js";
+import { K as Ht } from "./kbd-Bx7eQv9f.js";
+import { L as oe } from "./list-RRN2TJ_7.js";
+import { L as Wt } from "./live-region-C41SO3cA.js";
+import { S as Ut } from "./select-Ce5RMk93.js";
+import { a as Jt, b as rt, c as Qt, d as Xt } from "./ai-fab-pill-BOu96kCx.js";
+import { c as Zt } from "./compose-refs-C0k0tdqF.js";
+import { g as Yt, a as en } from "./glass-surface-CPok0jEe.js";
+import { p as at } from "./floating-clearance-nIx9fFLy.js";
+import { u as tn } from "./registry-DvAUVLHh.js";
+import { u as nn } from "./use-ai-sparkle-Cf4yVTLB.js";
+import { u as on } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { C as pt } from "./circle-alert-rGDZ73Wh.js";
+import { T as sn } from "./triangle-alert-CBnO6nq_.js";
+import { C as rn } from "./circle-check-BN6rz4NV.js";
+import { I as Re } from "./info-CGn22peZ.js";
+import { X as an } from "./x-B5YnXwCz.js";
+import { L as it } from "./loader-circle-BECIU_8N.js";
+import { S as lt } from "./square-DASBRZ0U.js";
+import { c as ln } from "./createLucideIcon-DhHxpK9K.js";
+import { C as dn } from "./chevron-down-DWE7GSq9.js";
+import { S as cn } 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 un = [
+  ["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" }]
+], dt = ln("audio-lines", un), pn = {
+  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()
+    }
+  },
+  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.",
+      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, or to cancel a start. Does nothing when not starting or listening.",
+      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, g) => {
+        t.pickCandidate(g.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();
+      }
+    }
+  },
+  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."
+    }
+  }
+}, mn = P(
+  [
+    // 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 = P(
+  [
+    "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" }
+  }
+), ct = P(
+  "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" }
+  }
+), Oe = "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]", gn = P(
+  [
+    "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",
+    Oe
+  ].join(" ")
+), vn = P(
+  [
+    "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",
+    Oe
+  ].join(" ")
+), hn = P(
+  [
+    "ds:fixed ds:z-[var(--z-fixed)]",
+    "ds:bottom-[calc(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" }
+  }
+), bn = P(
+  [
+    "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(--spacing-lg)*2)-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(--spacing-lg)*2)-var(--spacing-sm)-env(safe-area-inset-bottom,0px))]",
+    "ds:overflow-y-auto ds:overscroll-contain",
+    Yt,
+    en,
+    "ds:text-[color:var(--foreground)]",
+    Oe
+  ].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" }
+  }
+), yn = P(
+  "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 }
+  }
+), xn = {
+  alt: "Alt",
+  option: "Alt",
+  ctrl: "Control",
+  control: "Control",
+  shift: "Shift",
+  meta: "Meta",
+  cmd: "Meta",
+  command: "Meta"
+};
+function wn(t) {
+  const g = t.split("+").map((R) => R.trim()).filter(Boolean);
+  if (g.length === 0) return null;
+  const m = g[g.length - 1], L = /* @__PURE__ */ new Set();
+  for (const R of g.slice(0, -1)) {
+    const q = xn[R.toLowerCase()];
+    if (!q) return null;
+    L.add(q);
+  }
+  const V = m.length === 1 ? m.toUpperCase() : m, G = ["Control", "Alt", "Shift", "Meta"].filter(
+    (R) => L.has(R)
+  );
+  return {
+    modifiers: L,
+    key: V,
+    aria: [...G, V].join("+"),
+    keys: [...G, V]
+  };
+}
+function kn(t, g) {
+  if (t.altKey !== g.modifiers.has("Alt") || t.ctrlKey !== g.modifiers.has("Control") || t.shiftKey !== g.modifiers.has("Shift") || t.metaKey !== g.modifiers.has("Meta")) return !1;
+  const { key: m } = g;
+  return /^[A-Z]$/.test(m) ? t.code === `Key${m}` : /^[0-9]$/.test(m) ? t.code === `Digit${m}` : t.key.toLowerCase() === m.toLowerCase();
+}
+function Nn({ keys: t }) {
+  return /* @__PURE__ */ o(Ht, { keys: t, separator: "plus", size: "sm" });
+}
+const Cn = {
+  info: Re,
+  success: rn,
+  warning: sn,
+  error: pt
+}, Sn = [], ut = "ds:min-h-[var(--min-target-size)]", Pn = "ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)]", Rn = /[.!?…:。．！？؟।]$/u, On = " ", An = It(
+  ({
+    status: t,
+    onToggle: g,
+    disabled: m = !1,
+    title: L,
+    beta: V = !1,
+    betaNotice: G,
+    language: R,
+    languages: q,
+    onLanguageChange: se,
+    extraControls: re,
+    target: ae,
+    transcript: d,
+    message: f,
+    error: C,
+    candidates: F = Sn,
+    candidatesLabel: E,
+    onCandidatePick: M,
+    commands: ie,
+    defaultCommandsOpen: mt = !1,
+    shortcut: H = "Alt+V",
+    id: D,
+    layout: ft = "inline",
+    position: le = "bottom-end",
+    open: Ae,
+    defaultOpen: gt = !1,
+    onOpenChange: Ee,
+    aiSparkle: vt = !0,
+    aiConsent: r,
+    aiConsentHeadingLevel: ht,
+    className: ze,
+    ...Ke
+  }, Te) => {
+    const { t: i } = Lt("ui"), de = Se(), _e = Se(), Ie = Se(), [ce, ue] = _(mt), v = ft === "floating", pe = c(null), Le = Pe(() => Zt(Te, pe), [Te]), W = c(null), Ve = c(null), U = c(null), me = c(null), Ge = c(null), h = Pe(
+      () => H === !1 ? null : wn(H),
+      [H]
+    );
+    y(() => {
+    }, [H, h]);
+    const [bt, yt] = _(gt), fe = Ae !== void 0, b = v && (fe ? Ae : bt), $ = r !== void 0 && !r.granted, [ge, ve] = _(!1), xt = ge && $, J = c(!1), B = c(!1), [wt, Fe] = _(!1), kt = ((r == null ? void 0 : r.pending) ?? !1) || wt, l = c({
+      status: t,
+      onToggle: g,
+      disabled: m,
+      candidates: F,
+      onCandidatePick: M,
+      commandsOpen: ce,
+      aiBlocked: $,
+      floating: v,
+      panelOpen: b,
+      controlled: fe,
+      onOpenChange: Ee
+    });
+    l.current = {
+      status: t,
+      onToggle: g,
+      disabled: m,
+      candidates: F,
+      onCandidatePick: M,
+      commandsOpen: ce,
+      aiBlocked: $,
+      floating: v,
+      panelOpen: b,
+      controlled: fe,
+      onOpenChange: Ee
+    };
+    const Q = c(null), [, Nt] = _(0), x = I((e) => {
+      Q.current = e, Nt((n) => n + 1);
+    }, []), z = c(null), he = c(!1), N = I((e) => {
+      var s;
+      const n = l.current;
+      !n.floating || n.panelOpen === e || (n.controlled || yt(e), (s = n.onOpenChange) == null || s.call(n, e));
+    }, []), X = I(() => {
+      J.current = !1, B.current = !1, ve(!1);
+    }, []), Me = I(() => {
+      const e = typeof document > "u" ? null : document.activeElement;
+      z.current = e instanceof HTMLElement && e !== document.body ? e : null, J.current = !0, ve(!0), N(!0), x("gate");
+    }, [N, x]), Z = I(() => {
+      const { status: e, disabled: n, aiBlocked: s } = l.current;
+      if (e === "starting" || e === "listening") {
+        l.current.onToggle("stop");
+        return;
+      }
+      if (!n) {
+        if (s) {
+          Me();
+          return;
+        }
+        l.current.onToggle("start");
+      }
+    }, [Me]), Y = c(Z);
+    Y.current = Z;
+    const Ct = I(() => {
+      var n;
+      B.current = !0;
+      const e = (n = r == null ? void 0 : r.onGrant) == null ? void 0 : n.call(r);
+      e && typeof e.then == "function" && (Fe(!0), Promise.resolve(e).catch(() => {
+        B.current = !1;
+      }).finally(() => Fe(!1)));
+    }, [r]), De = c((r == null ? void 0 : r.granted) ?? !0);
+    y(() => {
+      const e = De.current, n = (r == null ? void 0 : r.granted) ?? !0;
+      if (De.current = n, e || !n) return;
+      const s = J.current, u = B.current;
+      if (J.current = !1, B.current = !1, ve(!1), !s) return;
+      const k = typeof document > "u" || !document.activeElement || document.activeElement === document.body;
+      if (u) {
+        const { status: S, disabled: p } = l.current;
+        !p && S !== "starting" && S !== "listening" && l.current.onToggle("start"), z.current = null, x("toggle");
+      } else k && x("toggle");
+    }, [r == null ? void 0 : r.granted, x]), y(() => {
+      if (!(t === "starting" || t === "listening") || !$) {
+        he.current = !1;
+        return;
+      }
+      he.current || (he.current = !0, l.current.onToggle("stop"));
+    }, [$, t]), y(() => {
+      v && !b && ge && X();
+    }, [v, b, ge, X]), y(() => {
+      if (!h || typeof document > "u") return;
+      const e = (n) => {
+        if (n.defaultPrevented || n.repeat || n.isComposing || !kn(n, h)) return;
+        const { status: s, disabled: u } = l.current;
+        u && s !== "starting" && s !== "listening" || (n.preventDefault(), Y.current());
+      };
+      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+    }, [h]);
+    const St = Pe(
+      () => ({
+        getStatus: () => l.current.status,
+        start: () => {
+          const { status: e, disabled: n } = l.current;
+          n || e === "starting" || e === "listening" || Y.current();
+        },
+        stop: () => {
+          const { status: e } = l.current;
+          e !== "starting" && e !== "listening" || Y.current();
+        },
+        getCandidateIds: () => l.current.candidates.map((e) => e.id),
+        pickCandidate: (e) => {
+          var n, s;
+          l.current.disabled || l.current.candidates.some((u) => u.id === e) && ((s = (n = l.current).onCandidatePick) == null || s.call(n, e));
+        },
+        isCommandsOpen: () => l.current.commandsOpen,
+        openCommands: () => ue(!0),
+        closeCommands: () => ue(!1),
+        isPanelOpen: () => l.current.panelOpen,
+        openPanel: () => N(!0),
+        closePanel: () => N(!1)
+      }),
+      [N]
+    );
+    tn(pn, St, D);
+    const K = i(`voiceControl.status.${t}`), O = C ? i(`voiceControl.error.${C}`) : "", ee = (f == null ? void 0 : f.text) ?? "", T = ee ? `${(f == null ? void 0 : f.id) ?? ""}\0${ee}` : "", be = F.length > 0, w = F.map((e) => e.id).join("\0"), $e = t === "starting" || t === "listening", te = i(t === "listening" ? "voiceControl.action.stop" : t === "starting" ? "common.cancel" : t === "paused" ? "voiceControl.action.resume" : "voiceControl.action.start"), [ye, Pt] = _({ text: "", count: 0 }), Be = c({
+      status: t,
+      errorText: O,
+      messageKey: T,
+      candidatesKey: w
+    });
+    y(() => {
+      const e = Be.current, n = [];
+      t !== e.status && n.push(K), O && O !== e.errorText && n.push(O), T && T !== e.messageKey && n.push(ee), w && w !== e.candidatesKey && n.push(E || i("voiceControl.candidates")), Be.current = { status: t, errorText: O, messageKey: T, candidatesKey: w }, n.length > 0 && Pt((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(
+          (u, k) => Rn.test(u) ? `${u} ${k}` : i("voiceControl.announcementJoin", {
+            first: u,
+            next: k
+          })
+        ),
+        count: s.count + 1
+      }));
+    }, [
+      i,
+      t,
+      K,
+      O,
+      T,
+      ee,
+      w,
+      E
+    ]);
+    const je = c({ error: C, candidatesKey: w });
+    y(() => {
+      const e = je.current;
+      je.current = { error: C, candidatesKey: w }, v && (C && C !== e.error || w && w !== e.candidatesKey) && N(!0);
+    }, [v, C, w, N]), y(() => {
+      const e = pe.current;
+      if (!v || !e) return;
+      const n = {}, s = () => {
+        var nt;
+        const k = window.getComputedStyle(e), S = Number.parseFloat(k.rowGap) || 0, p = (Number.parseFloat(k.bottom) || 0) + (((nt = Ge.current) == null ? void 0 : nt.offsetHeight) ?? 0) + S, A = W.current, tt = A && !A.hidden ? A.offsetHeight : 0;
+        at(
+          n,
+          tt > 0 ? Math.max(
+            p,
+            Math.min(p + tt + S, window.innerHeight / 2)
+          ) : p
+        );
+      };
+      s();
+      const u = typeof ResizeObserver > "u" ? null : new ResizeObserver(s);
+      return u == null || u.observe(e), window.addEventListener("resize", s), () => {
+        u == null || u.disconnect(), window.removeEventListener("resize", s), at(n, null);
+      };
+    }, [v]);
+    const xe = v && vt, {
+      state: qe,
+      props: He,
+      land: We
+    } = nn({ enabled: xe }), j = (f == null ? void 0 : f.tone) === "success" ? T : "", Ue = c(j);
+    y(() => {
+      j !== Ue.current && (Ue.current = j, xe && j && We());
+    }, [xe, j, We]);
+    const we = c(!1);
+    y(() => {
+      var n;
+      if (be || !we.current) return;
+      we.current = !1;
+      const e = typeof document > "u" ? null : document.activeElement;
+      (!e || e === document.body) && ((n = U.current) == null || n.focus());
+    }, [be]);
+    const Je = c(() => {
+    });
+    y(() => {
+      const e = pe.current;
+      if (!v || !e) return;
+      const n = (s) => {
+        s.key !== "Escape" || s.defaultPrevented || l.current.panelOpen && (s.preventDefault(), Je.current(!0));
+      };
+      return e.addEventListener("keydown", n), () => e.removeEventListener("keydown", n);
+    }, [v]);
+    const Qe = c(b);
+    on(() => {
+      var s;
+      const e = Qe.current;
+      if (Qe.current = b, !e || b || Q.current) return;
+      const n = document.activeElement;
+      n && ((s = W.current) != null && s.contains(n)) && x("launcher");
+    }, [b, x]), y(() => {
+      var n, s, u, k, S;
+      const e = Q.current;
+      if (e)
+        if (Q.current = null, e === "gate") {
+          const p = Ve.current, A = (p == null ? void 0 : p.querySelector(
+            '[role="checkbox"]:not([disabled])'
+          )) ?? (p == null ? void 0 : p.querySelector(
+            '[data-component="ai-consent-banner"]'
+          ));
+          A == null || A.focus();
+        } else if (e === "return") {
+          const p = z.current;
+          z.current = null, p != null && p.isConnected && p.getClientRects().length > 0 ? p.focus() : l.current.floating && !l.current.panelOpen ? (n = me.current) == null || n.focus() : (s = U.current) == null || s.focus();
+        } else e === "panel" ? (u = W.current) == null || u.focus() : e === "toggle" ? (k = U.current) == null || k.focus() : (S = me.current) == null || S.focus();
+    });
+    const Xe = (q ?? []).map((e) => ({
+      value: e.value,
+      label: e.label
+    })), Ze = Xe.length > 1, Rt = Ze || re != null && re !== !1, Ot = !!(d != null && d.final) || !!(d != null && d.partial), ne = t === "starting", At = f ? Cn[f.tone] : Re, ke = (e) => {
+      N(!1), X(), e && x(z.current ? "return" : "launcher");
+    };
+    Je.current = ke;
+    const Et = /* @__PURE__ */ a("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: de,
+          className: "ds:m-0 type-label ds:font-semibold ds:text-[color:var(--foreground)]",
+          children: L ?? i("voiceControl.title")
+        }
+      ),
+      V ? /* @__PURE__ */ o(Mt, { variant: "brand", size: "sm", children: i("voiceControl.beta") }) : null,
+      /* @__PURE__ */ a("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: K })
+      ] }),
+      v ? /* @__PURE__ */ o(
+        Dt,
+        {
+          intent: "ghost",
+          size: "md",
+          icon: /* @__PURE__ */ o(an, {}),
+          "aria-label": i("common.close"),
+          onClick: () => ke(!0),
+          className: Pn,
+          "data-voice-close": ""
+        }
+      ) : null
+    ] }), zt = G ? /* @__PURE__ */ a("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(Re, { "aria-hidden": "true", className: "ds:mt-px ds:size-4 ds:shrink-0" }),
+      /* @__PURE__ */ o("span", { children: G })
+    ] }) : null, Kt = xt && r ? /* @__PURE__ */ a(
+      "div",
+      {
+        ref: Ve,
+        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+        "data-voice-consent": "",
+        children: [
+          /* @__PURE__ */ o(
+            Gt,
+            {
+              tabIndex: -1,
+              granted: r.granted,
+              grantedAt: r.grantedAt,
+              grantedBy: r.grantedBy,
+              canGrant: (r.canGrant ?? !0) && r.onGrant !== void 0,
+              pending: kt,
+              onGrantConsent: Ct,
+              headingLevel: ht
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: "ds:flex ds:justify-end", children: /* @__PURE__ */ o(
+            st,
+            {
+              intent: "ghost",
+              size: "md",
+              onClick: () => {
+                X(), x("return");
+              },
+              className: ut,
+              children: i("common.close")
+            }
+          ) })
+        ]
+      }
+    ) : null, Tt = /* @__PURE__ */ a(ot, { children: [
+      /* @__PURE__ */ a("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(
+          st,
+          {
+            ref: U,
+            intent: t === "listening" ? "outline" : "primary",
+            background: "surface",
+            size: "md",
+            disabled: m && !$e,
+            "aria-busy": ne || void 0,
+            "aria-keyshortcuts": h == null ? void 0 : h.aria,
+            onClick: () => Z(),
+            startIcon: ne ? /* @__PURE__ */ o(it, { className: "ds:animate-[var(--accessible-off,spin_1s_linear_infinite)] ds:motion-reduce:animate-none" }) : t === "listening" ? /* @__PURE__ */ o(lt, { className: "ds:fill-current" }) : /* @__PURE__ */ o(dt, {}),
+            className: `${ut} ds:w-full ds:@[560px]/voice-control:w-auto`,
+            "data-voice-toggle": "",
+            children: te
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "ds:flex ds:min-w-0 ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+          ae != null && ae !== "" ? /* @__PURE__ */ o("p", { className: "ds:m-0 type-body-sm ds:font-semibold ds:[overflow-wrap:anywhere]", children: ae }) : null,
+          Ot ? /* @__PURE__ */ a(
+            "p",
+            {
+              className: "ds:m-0 type-body-sm ds:[overflow-wrap:anywhere]",
+              "data-voice-transcript": "",
+              children: [
+                /* @__PURE__ */ a("span", { className: "ds:sr-only", children: [
+                  i("voiceControl.heard"),
+                  " "
+                ] }),
+                d != null && d.final ? /* @__PURE__ */ o("span", { className: "ds:text-[color:var(--foreground)]", children: d.final }) : null,
+                d != null && d.final && (d != null && d.partial) ? " " : null,
+                d != null && d.partial ? /* @__PURE__ */ o(
+                  "span",
+                  {
+                    className: "ds:italic ds:text-[color:var(--muted-foreground)]",
+                    "data-voice-partial": "",
+                    children: d.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,
+          C ? /* @__PURE__ */ a("p", { className: ct({ tone: "error" }), children: [
+            /* @__PURE__ */ o(
+              pt,
+              {
+                "aria-hidden": "true",
+                className: "ds:mt-px ds:size-4 ds:shrink-0"
+              }
+            ),
+            /* @__PURE__ */ o("span", { children: O })
+          ] }) : null,
+          f && f.text ? /* @__PURE__ */ a(
+            "p",
+            {
+              className: ct({ tone: f.tone }),
+              "data-tone": f.tone,
+              children: [
+                /* @__PURE__ */ o(
+                  At,
+                  {
+                    "aria-hidden": "true",
+                    className: "ds:mt-px ds:size-4 ds:shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ o("span", { children: f.text })
+              ]
+            }
+          ) : null
+        ] }),
+        Rt ? /* @__PURE__ */ a("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: [
+          Ze ? (
+            // A visible, associated label (the kit FormField pattern).
+            /* @__PURE__ */ o(qt, { label: i("voiceControl.language"), children: /* @__PURE__ */ o(
+              Ut,
+              {
+                options: Xe,
+                value: R ?? "",
+                onValueChange: (e) => {
+                  e && (se == null || se(e));
+                },
+                disabled: m
+              }
+            ) })
+          ) : null,
+          re
+        ] }) : null
+      ] }),
+      be ? /* @__PURE__ */ a(
+        "div",
+        {
+          role: "group",
+          "aria-labelledby": E ? _e : void 0,
+          "aria-label": E ? void 0 : i("voiceControl.candidates"),
+          className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
+          "data-voice-candidates": "",
+          children: [
+            E ? /* @__PURE__ */ o(
+              "p",
+              {
+                id: _e,
+                className: "ds:m-0 type-body-sm ds:text-[color:var(--foreground)]",
+                children: E
+              }
+            ) : null,
+            /* @__PURE__ */ o(oe, { as: "ol", density: "compact", children: F.map((e, n) => /* @__PURE__ */ o(
+              oe.Item,
+              {
+                title: /* @__PURE__ */ o(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: m,
+                    onClick: () => {
+                      we.current = !0, M == null || M(e.id);
+                    },
+                    className: gn(),
+                    "data-candidate-id": e.id,
+                    children: /* @__PURE__ */ a("span", { children: [
+                      /* @__PURE__ */ o("span", { className: "ds:sr-only", children: i("voiceControl.candidate", {
+                        number: n + 1
+                      }) }),
+                      " ",
+                      /* @__PURE__ */ o("span", { className: "ds:font-medium", children: e.label }),
+                      e.detail ? /* @__PURE__ */ a(ot, { 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,
+      ie && ie.length > 0 ? /* @__PURE__ */ a($t, { open: ce, onOpenChange: ue, children: [
+        /* @__PURE__ */ a(Bt, { className: vn(), children: [
+          /* @__PURE__ */ o(
+            dn,
+            {
+              "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: h ? /* @__PURE__ */ o(
+            Vt,
+            {
+              ns: "ui",
+              i18nKey: "voiceControl.commandsWithShortcut",
+              components: {
+                shortcut: /* @__PURE__ */ o(Nn, { keys: h.keys })
+              }
+            }
+          ) : i("voiceControl.commands") })
+        ] }),
+        /* @__PURE__ */ o(
+          jt,
+          {
+            "aria-label": i("voiceControl.commands"),
+            className: "ds:pt-[var(--spacing-xs)]",
+            children: /* @__PURE__ */ o(oe, { density: "compact", children: ie.map((e, n) => /* @__PURE__ */ o(
+              oe.Item,
+              {
+                title: e.phrase,
+                description: e.description
+              },
+              n
+            )) })
+          }
+        )
+      ] }) : null
+    ] }), Ye = /* @__PURE__ */ a("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+      Et,
+      zt,
+      Kt ?? Tt
+    ] }), et = /* @__PURE__ */ o(Wt, { politeness: "polite", "data-voice-announcer": "", children: ye.text ? (
+      // Alternate a trailing no-break space so the same words said
+      // twice in a row still change the region and are announced.
+      `${ye.text}${ye.count % 2 ? On : ""}`
+    ) : "" });
+    if (!v)
+      return /* @__PURE__ */ a(
+        "div",
+        {
+          ref: Le,
+          role: "group",
+          "aria-labelledby": de,
+          "data-component": "voice-control-panel",
+          "data-component-id": D,
+          "data-status": t,
+          id: D,
+          ...Ke,
+          className: mn({ status: t, className: ze }),
+          children: [
+            Ye,
+            et
+          ]
+        }
+      );
+    const Ne = t === "listening", Ce = Ne || t === "paused", _t = Ce && !te.toLocaleLowerCase().includes(K.toLocaleLowerCase()) ? i("voiceControl.statusWithAction", {
+      status: K,
+      action: te
+    }) : te;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: Le,
+        "data-component": "voice-control-panel",
+        "data-component-id": D,
+        "data-status": t,
+        "data-layout": "floating",
+        "data-position": le,
+        "data-open": b ? "" : void 0,
+        id: D,
+        ...Ke,
+        className: hn({ position: le, className: ze }),
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              ref: W,
+              id: Ie,
+              role: "group",
+              "aria-labelledby": de,
+              tabIndex: -1,
+              hidden: !b,
+              className: bn({ position: le }),
+              "data-voice-panel": "",
+              children: Ye
+            }
+          ),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              ref: Ge,
+              className: "ds:relative",
+              "data-ai-sparkle": He["data-ai-sparkle"],
+              children: [
+                /* @__PURE__ */ a("div", { className: Jt, "data-voice-pill": "", children: [
+                  /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => Z(),
+                      disabled: m && !$e || void 0,
+                      "aria-label": _t,
+                      "aria-busy": ne || void 0,
+                      "aria-keyshortcuts": h == null ? void 0 : h.aria,
+                      className: rt({
+                        // The word on the red needs 7:1 in the accessible themes:
+                        // `labelled` holds the hover red there.
+                        recording: Ne ? "labelled" : !1,
+                        className: yn({ extended: Ce })
+                      }),
+                      "data-voice-mic": "",
+                      children: [
+                        ne ? /* @__PURE__ */ o(
+                          it,
+                          {
+                            "aria-hidden": "true",
+                            className: "ds:size-5 ds:animate-[var(--accessible-off,spin_1s_linear_infinite)] ds:motion-reduce:animate-none"
+                          }
+                        ) : Ne ? /* @__PURE__ */ o(
+                          lt,
+                          {
+                            "aria-hidden": "true",
+                            className: "ds:size-5 ds:fill-current"
+                          }
+                        ) : /* @__PURE__ */ o(dt, { "aria-hidden": "true", className: "ds:size-5" }),
+                        Ce ? /* @__PURE__ */ o("span", { className: "type-label ds:whitespace-nowrap", children: K }) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ o("span", { "aria-hidden": "true", className: Qt }),
+                  /* @__PURE__ */ o(
+                    "button",
+                    {
+                      ref: me,
+                      type: "button",
+                      onClick: () => {
+                        b ? ke(!1) : (z.current = null, N(!0), x("panel"));
+                      },
+                      "aria-label": i("voiceControl.panelToggle"),
+                      "aria-expanded": b,
+                      "aria-controls": Ie,
+                      className: rt({ recording: !1 }),
+                      "data-voice-launcher": "",
+                      children: /* @__PURE__ */ o(cn, { "aria-hidden": "true", className: "ds:size-5" })
+                    }
+                  ),
+                  qe ? /* @__PURE__ */ o(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: `${Xt} ${He.className}`
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ o(Ft, { state: qe })
+              ]
+            }
+          ),
+          et
+        ]
+      }
+    );
+  }
+);
+An.displayName = "VoiceControlPanel";
+export {
+  An as V,
+  pn as v
+};
+//# sourceMappingURL=voice-control-panel-Bg1eklL0.js.map