@meridial/react 0.1.0

package/dist/chunk-WCRZUGN4.js

@@ -0,0 +1,1933 @@
+import {
+  Button,
+  DragHandle,
+  EMPTY_ARRAY,
+  EMPTY_OBJECT,
+  STORAGE_KEYS,
+  SafeReact,
+  Separator,
+  __export,
+  apiWorkflowsResponseSchema,
+  cn,
+  cva,
+  error,
+  formatErrorMessage,
+  useButton,
+  useCompositeRootContext,
+  useElementTracker,
+  useIsoLayoutEffect,
+  useMergedRefs,
+  useRenderElement,
+  useStableCallback
+} from "./chunk-QCWLFL7O.js";
+
+// src/voicebox.tsx
+import {
+  useSession,
+  useAgent,
+  useSessionContext as useSessionContext3,
+  useEnsureRoom as useEnsureRoom3
+} from "@livekit/components-react";
+import { AnimatePresence as AnimatePresence3, motion as motion3 } from "motion/react";
+import { TokenSource, RpcError as RpcError2 } from "livekit-client";
+import { useDraggable } from "@neodrag/react";
+import {
+  useRef as useRef6,
+  useState as useState9,
+  useMemo as useMemo5,
+  useEffect as useEffect5,
+  useCallback as useCallback5
+} from "react";
+import { ChatFeedback01Icon, Loading03Icon as Loading03Icon3 } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as HugeiconsIcon7 } from "@hugeicons/react";
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/toggle/Toggle.js
+import * as React7 from "react";
+
+// ../../node_modules/.pnpm/@base-ui+utils@0.2.5_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/utils/esm/useControlled.js
+import * as React from "react";
+function useControlled({
+  controlled,
+  default: defaultProp,
+  name,
+  state = "value"
+}) {
+  const {
+    current: isControlled
+  } = React.useRef(controlled !== void 0);
+  const [valueState, setValue] = React.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  if (process.env.NODE_ENV !== "production") {
+    React.useEffect(() => {
+      if (isControlled !== (controlled !== void 0)) {
+        console.error([`Base UI: A component is changing the ${isControlled ? "" : "un"}controlled ${state} state of ${name} to be ${isControlled ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join("\n"));
+      }
+    }, [state, name, controlled]);
+    const {
+      current: defaultValue
+    } = React.useRef(defaultProp);
+    React.useEffect(() => {
+      if (!isControlled && JSON.stringify(defaultValue) !== JSON.stringify(defaultProp)) {
+        console.error([`Base UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`].join("\n"));
+      }
+    }, [JSON.stringify(defaultProp)]);
+  }
+  const setValueIfUncontrolled = React.useCallback((newValue) => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}
+
+// ../../node_modules/.pnpm/@base-ui+utils@0.2.5_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/utils/esm/useId.js
+import * as React2 from "react";
+var globalId = 0;
+function useGlobalId(idOverride, prefix = "mui") {
+  const [defaultId, setDefaultId] = React2.useState(idOverride);
+  const id = idOverride || defaultId;
+  React2.useEffect(() => {
+    if (defaultId == null) {
+      globalId += 1;
+      setDefaultId(`${prefix}-${globalId}`);
+    }
+  }, [defaultId, prefix]);
+  return id;
+}
+var maybeReactUseId = SafeReact.useId;
+function useId(idOverride, prefix) {
+  if (maybeReactUseId !== void 0) {
+    const reactId = maybeReactUseId();
+    return idOverride ?? (prefix ? `${prefix}-${reactId}` : reactId);
+  }
+  return useGlobalId(idOverride, prefix);
+}
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/utils/useBaseUiId.js
+function useBaseUiId(idOverride) {
+  return useId(idOverride, "base-ui");
+}
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/toggle-group/ToggleGroupContext.js
+import * as React3 from "react";
+var ToggleGroupContext = /* @__PURE__ */ React3.createContext(void 0);
+if (process.env.NODE_ENV !== "production") ToggleGroupContext.displayName = "ToggleGroupContext";
+function useToggleGroupContext(optional = true) {
+  const context = React3.useContext(ToggleGroupContext);
+  if (context === void 0 && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: ToggleGroupContext is missing. ToggleGroup parts must be placed within <ToggleGroup>." : formatErrorMessage(7));
+  }
+  return context;
+}
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/composite/item/useCompositeItem.js
+import * as React6 from "react";
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/composite/list/useCompositeListItem.js
+import * as React5 from "react";
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/composite/list/CompositeListContext.js
+import * as React4 from "react";
+var CompositeListContext = /* @__PURE__ */ React4.createContext({
+  register: () => {
+  },
+  unregister: () => {
+  },
+  subscribeMapChange: () => {
+    return () => {
+    };
+  },
+  elementsRef: {
+    current: []
+  },
+  nextIndexRef: {
+    current: 0
+  }
+});
+if (process.env.NODE_ENV !== "production") CompositeListContext.displayName = "CompositeListContext";
+function useCompositeListContext() {
+  return React4.useContext(CompositeListContext);
+}
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/composite/list/useCompositeListItem.js
+var IndexGuessBehavior = /* @__PURE__ */ (function(IndexGuessBehavior2) {
+  IndexGuessBehavior2[IndexGuessBehavior2["None"] = 0] = "None";
+  IndexGuessBehavior2[IndexGuessBehavior2["GuessFromOrder"] = 1] = "GuessFromOrder";
+  return IndexGuessBehavior2;
+})({});
+function useCompositeListItem(params = {}) {
+  const {
+    label,
+    metadata,
+    textRef,
+    indexGuessBehavior,
+    index: externalIndex
+  } = params;
+  const {
+    register,
+    unregister,
+    subscribeMapChange,
+    elementsRef,
+    labelsRef,
+    nextIndexRef
+  } = useCompositeListContext();
+  const indexRef = React5.useRef(-1);
+  const [index, setIndex] = React5.useState(externalIndex ?? (indexGuessBehavior === IndexGuessBehavior.GuessFromOrder ? () => {
+    if (indexRef.current === -1) {
+      const newIndex = nextIndexRef.current;
+      nextIndexRef.current += 1;
+      indexRef.current = newIndex;
+    }
+    return indexRef.current;
+  } : -1));
+  const componentRef = React5.useRef(null);
+  const ref = React5.useCallback((node) => {
+    componentRef.current = node;
+    if (index !== -1 && node !== null) {
+      elementsRef.current[index] = node;
+      if (labelsRef) {
+        const isLabelDefined = label !== void 0;
+        labelsRef.current[index] = isLabelDefined ? label : textRef?.current?.textContent ?? node.textContent;
+      }
+    }
+  }, [index, elementsRef, labelsRef, label, textRef]);
+  useIsoLayoutEffect(() => {
+    if (externalIndex != null) {
+      return void 0;
+    }
+    const node = componentRef.current;
+    if (node) {
+      register(node, metadata);
+      return () => {
+        unregister(node);
+      };
+    }
+    return void 0;
+  }, [externalIndex, register, unregister, metadata]);
+  useIsoLayoutEffect(() => {
+    if (externalIndex != null) {
+      return void 0;
+    }
+    return subscribeMapChange((map) => {
+      const i = componentRef.current ? map.get(componentRef.current)?.index : null;
+      if (i != null) {
+        setIndex(i);
+      }
+    });
+  }, [externalIndex, subscribeMapChange, setIndex]);
+  return React5.useMemo(() => ({
+    ref,
+    index
+  }), [index, ref]);
+}
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/composite/item/useCompositeItem.js
+function useCompositeItem(params = {}) {
+  const {
+    highlightItemOnHover,
+    highlightedIndex,
+    onHighlightedIndexChange
+  } = useCompositeRootContext();
+  const {
+    ref,
+    index
+  } = useCompositeListItem(params);
+  const isHighlighted = highlightedIndex === index;
+  const itemRef = React6.useRef(null);
+  const mergedRef = useMergedRefs(ref, itemRef);
+  const compositeProps = React6.useMemo(() => ({
+    tabIndex: isHighlighted ? 0 : -1,
+    onFocus() {
+      onHighlightedIndexChange(index);
+    },
+    onMouseMove() {
+      const item = itemRef.current;
+      if (!highlightItemOnHover || !item) {
+        return;
+      }
+      const disabled2 = item.hasAttribute("disabled") || item.ariaDisabled === "true";
+      if (!isHighlighted && !disabled2) {
+        item.focus();
+      }
+    }
+  }), [isHighlighted, onHighlightedIndexChange, index, highlightItemOnHover]);
+  return {
+    compositeProps,
+    compositeRef: mergedRef,
+    index
+  };
+}
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/composite/item/CompositeItem.js
+function CompositeItem(componentProps) {
+  const {
+    render,
+    className,
+    state = EMPTY_OBJECT,
+    props = EMPTY_ARRAY,
+    refs = EMPTY_ARRAY,
+    metadata,
+    stateAttributesMapping,
+    tag = "div",
+    ...elementProps
+  } = componentProps;
+  const {
+    compositeProps,
+    compositeRef
+  } = useCompositeItem({
+    metadata
+  });
+  return useRenderElement(tag, componentProps, {
+    state,
+    ref: [...refs, compositeRef],
+    props: [compositeProps, ...props, elementProps],
+    stateAttributesMapping
+  });
+}
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/utils/reason-parts.js
+var reason_parts_exports = {};
+__export(reason_parts_exports, {
+  cancelOpen: () => cancelOpen,
+  chipRemovePress: () => chipRemovePress,
+  clearPress: () => clearPress,
+  closePress: () => closePress,
+  closeWatcher: () => closeWatcher,
+  decrementPress: () => decrementPress,
+  disabled: () => disabled,
+  drag: () => drag,
+  escapeKey: () => escapeKey,
+  focusOut: () => focusOut,
+  imperativeAction: () => imperativeAction,
+  incrementPress: () => incrementPress,
+  inputBlur: () => inputBlur,
+  inputChange: () => inputChange,
+  inputClear: () => inputClear,
+  inputPaste: () => inputPaste,
+  inputPress: () => inputPress,
+  itemPress: () => itemPress,
+  keyboard: () => keyboard,
+  linkPress: () => linkPress,
+  listNavigation: () => listNavigation,
+  none: () => none,
+  outsidePress: () => outsidePress,
+  pointer: () => pointer,
+  scrub: () => scrub,
+  siblingOpen: () => siblingOpen,
+  swipe: () => swipe,
+  trackPress: () => trackPress,
+  triggerFocus: () => triggerFocus,
+  triggerHover: () => triggerHover,
+  triggerPress: () => triggerPress,
+  wheel: () => wheel,
+  windowResize: () => windowResize
+});
+var none = "none";
+var triggerPress = "trigger-press";
+var triggerHover = "trigger-hover";
+var triggerFocus = "trigger-focus";
+var outsidePress = "outside-press";
+var itemPress = "item-press";
+var closePress = "close-press";
+var linkPress = "link-press";
+var clearPress = "clear-press";
+var chipRemovePress = "chip-remove-press";
+var trackPress = "track-press";
+var incrementPress = "increment-press";
+var decrementPress = "decrement-press";
+var inputChange = "input-change";
+var inputClear = "input-clear";
+var inputBlur = "input-blur";
+var inputPaste = "input-paste";
+var inputPress = "input-press";
+var focusOut = "focus-out";
+var escapeKey = "escape-key";
+var closeWatcher = "close-watcher";
+var listNavigation = "list-navigation";
+var keyboard = "keyboard";
+var pointer = "pointer";
+var drag = "drag";
+var wheel = "wheel";
+var scrub = "scrub";
+var cancelOpen = "cancel-open";
+var siblingOpen = "sibling-open";
+var disabled = "disabled";
+var imperativeAction = "imperative-action";
+var swipe = "swipe";
+var windowResize = "window-resize";
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/utils/createBaseUIEventDetails.js
+function createChangeEventDetails(reason, event, trigger, customProperties) {
+  let canceled = false;
+  let allowPropagation = false;
+  const custom = customProperties ?? EMPTY_OBJECT;
+  const details = {
+    reason,
+    event: event ?? new Event("base-ui"),
+    cancel() {
+      canceled = true;
+    },
+    allowPropagation() {
+      allowPropagation = true;
+    },
+    get isCanceled() {
+      return canceled;
+    },
+    get isPropagationAllowed() {
+      return allowPropagation;
+    },
+    trigger,
+    ...custom
+  };
+  return details;
+}
+
+// ../../node_modules/.pnpm/@base-ui+react@1.2.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/esm/toggle/Toggle.js
+import { jsx as _jsx } from "react/jsx-runtime";
+var Toggle = /* @__PURE__ */ React7.forwardRef(function Toggle2(componentProps, forwardedRef) {
+  const {
+    className,
+    defaultPressed: defaultPressedProp = false,
+    disabled: disabledProp = false,
+    form,
+    // never participates in form validation
+    onPressedChange: onPressedChangeProp,
+    pressed: pressedProp,
+    render,
+    type,
+    // cannot change button type
+    value: valueProp,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const value = useBaseUiId(valueProp || void 0);
+  const groupContext = useToggleGroupContext();
+  const groupValue = groupContext?.value ?? [];
+  const defaultPressed = groupContext ? void 0 : defaultPressedProp;
+  const disabled2 = (disabledProp || groupContext?.disabled) ?? false;
+  if (process.env.NODE_ENV !== "production") {
+    useIsoLayoutEffect(() => {
+      if (groupContext && valueProp === void 0 && groupContext.isValueInitialized) {
+        error("A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.", "This will cause issues between the Toggle Group and Toggle values.", "Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.");
+      }
+    }, [groupContext, valueProp, groupContext?.isValueInitialized]);
+  }
+  const [pressed, setPressedState] = useControlled({
+    controlled: groupContext ? value !== void 0 && groupValue.indexOf(value) > -1 : pressedProp,
+    default: defaultPressed,
+    name: "Toggle",
+    state: "pressed"
+  });
+  const onPressedChange = useStableCallback((nextPressed, eventDetails) => {
+    if (value) {
+      groupContext?.setGroupValue?.(value, nextPressed, eventDetails);
+    }
+    onPressedChangeProp?.(nextPressed, eventDetails);
+  });
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled: disabled2,
+    native: nativeButton
+  });
+  const state = {
+    disabled: disabled2,
+    pressed
+  };
+  const refs = [buttonRef, forwardedRef];
+  const props = [{
+    "aria-pressed": pressed,
+    onClick(event) {
+      const nextPressed = !pressed;
+      const details = createChangeEventDetails(reason_parts_exports.none, event.nativeEvent);
+      onPressedChange(nextPressed, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setPressedState(nextPressed);
+    }
+  }, elementProps, getButtonProps];
+  const element = useRenderElement("button", componentProps, {
+    enabled: !groupContext,
+    state,
+    ref: refs,
+    props
+  });
+  if (groupContext) {
+    return /* @__PURE__ */ _jsx(CompositeItem, {
+      tag: "button",
+      render,
+      className,
+      state,
+      refs,
+      props
+    });
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") Toggle.displayName = "Toggle";
+
+// ../ui/src/components/toggle.tsx
+import { jsx } from "react/jsx-runtime";
+var toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted"
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+        lg: "h-9 min-w-9 px-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle3({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/lib/schema-serializer.ts
+import { z } from "zod";
+function serializeTools(tools) {
+  return tools.map((tool) => ({
+    name: tool.name,
+    description: tool.description,
+    parameters: z.toJSONSchema(tool.parameters, {
+      target: "openapi-3.0"
+    })
+  }));
+}
+
+// src/hooks/use-tool-registration.ts
+import { useEffect as useEffect3 } from "react";
+import { RpcError } from "livekit-client";
+import { useEnsureRoom } from "@livekit/components-react";
+function useToolRegistration(tools, onToolComplete) {
+  const room = useEnsureRoom();
+  useEffect3(() => {
+    if (!tools || tools.length === 0) return;
+    const cleanups = [];
+    for (const tool of tools) {
+      const methodName = `tool:${tool.name}`;
+      room.registerRpcMethod(methodName, async (data) => {
+        try {
+          const params = JSON.parse(data.payload);
+          const parsed = tool.parameters.parse(params);
+          const result = await tool.execute(parsed);
+          onToolComplete?.();
+          return JSON.stringify(result);
+        } catch (error2) {
+          const message = error2 instanceof Error ? error2.message : "Tool execution failed";
+          throw new RpcError(1, message);
+        }
+      });
+      cleanups.push(() => {
+        room.unregisterRpcMethod(methodName);
+      });
+    }
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    };
+  }, [room, tools, onToolComplete]);
+}
+
+// src/components/agent-session-provider.tsx
+import {
+  SessionProvider,
+  RoomAudioRenderer
+} from "@livekit/components-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AgentSessionProvider({
+  session,
+  children,
+  ...roomAudioRendererProps
+}) {
+  return /* @__PURE__ */ jsxs(SessionProvider, { session, children: [
+    children,
+    /* @__PURE__ */ jsx2(RoomAudioRenderer, { ...roomAudioRendererProps })
+  ] });
+}
+
+// src/components/agent-audio-visualizer-bar.tsx
+import { Fragment, useMemo as useMemo3 } from "react";
+import {
+  useMultibandTrackVolume
+} from "@livekit/components-react";
+
+// src/hooks/use-agent-audio-visualizer-bar.ts
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+function generateConnectingSequenceBar(columns) {
+  const seq = [];
+  for (let x = 0; x < columns; x++) {
+    seq.push([x, columns - 1 - x]);
+  }
+  return seq;
+}
+function generateListeningSequenceBar(columns) {
+  const center = Math.floor(columns / 2);
+  return [[center], [-1]];
+}
+function useAgentAudioVisualizerBarAnimator(state, columns, interval) {
+  const [index, setIndex] = useState4(0);
+  const [sequence, setSequence] = useState4([[]]);
+  useEffect4(() => {
+    if (state === "thinking") {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === "connecting" || state === "initializing") {
+      setSequence([...generateConnectingSequenceBar(columns)]);
+    } else if (state === "listening") {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === void 0 || state === "speaking") {
+      setSequence([new Array(columns).fill(0).map((_, idx) => idx)]);
+    } else {
+      setSequence([[]]);
+    }
+    setIndex(0);
+  }, [state, columns]);
+  const animationFrameId = useRef4(null);
+  useEffect4(() => {
+    let startTime = performance.now();
+    const animate = (time) => {
+      if (time - startTime >= interval) {
+        setIndex((prev) => prev + 1);
+        startTime = time;
+      }
+      animationFrameId.current = requestAnimationFrame(animate);
+    };
+    animationFrameId.current = requestAnimationFrame(animate);
+    return () => {
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current);
+      }
+    };
+  }, [interval, columns, state, sequence.length]);
+  return sequence[index % sequence.length] ?? [];
+}
+
+// src/components/agent-audio-visualizer-bar.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function AgentAudioVisualizerBar({
+  state = "connecting",
+  barCount = 3,
+  audioTrack,
+  className,
+  children
+}) {
+  const sequencerInterval = useMemo3(() => {
+    switch (state) {
+      case "connecting":
+        return 2e3 / barCount;
+      case "initializing":
+        return 2e3;
+      case "listening":
+        return 500;
+      case "thinking":
+        return 150;
+      default:
+        return 1e3;
+    }
+  }, [state, barCount]);
+  const highlightedIndices = useAgentAudioVisualizerBarAnimator(
+    state,
+    barCount,
+    sequencerInterval
+  );
+  const volumeBands = useMultibandTrackVolume(audioTrack, {
+    bands: barCount,
+    loPass: 100,
+    hiPass: 200
+  });
+  const bands = useMemo3(
+    () => state === "speaking" ? volumeBands : new Array(barCount).fill(0),
+    [state, volumeBands, barCount]
+  );
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-lk-state": state,
+      className: cn(
+        "relative flex h-6 items-center justify-center gap-0.5",
+        className
+      ),
+      children: bands.map(
+        (band, idx) => children ? /* @__PURE__ */ jsx3(Fragment, { children }, idx) : /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "data-lk-index": idx,
+            "data-lk-highlighted": highlightedIndices.includes(idx),
+            style: { height: `${Math.max(4, band * 24)}px` },
+            className: "min-h-1 w-1 rounded-full bg-primary/20 transition-[height] duration-100 ease-linear data-[lk-highlighted=true]:bg-primary"
+          },
+          idx
+        )
+      )
+    }
+  );
+}
+
+// src/components/agent-track-toggle.tsx
+import { useMemo as useMemo4, useState as useState5 } from "react";
+import { Track } from "livekit-client";
+import {
+  MicIcon,
+  MicOffIcon,
+  Loading03Icon,
+  VideoIcon,
+  VideoOffIcon
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function getSourceIcon(source, enabled, pending = false) {
+  if (pending) return Loading03Icon;
+  switch (source) {
+    case Track.Source.Microphone:
+      return enabled ? MicIcon : MicOffIcon;
+    case Track.Source.Camera:
+      return enabled ? VideoIcon : VideoOffIcon;
+    default:
+      return MicIcon;
+  }
+}
+function AgentTrackToggle({
+  source,
+  pending = false,
+  pressed,
+  defaultPressed = false,
+  className,
+  onPressedChange,
+  ...props
+}) {
+  const [uncontrolledPressed, setUncontrolledPressed] = useState5(
+    defaultPressed ?? false
+  );
+  const isControlled = pressed !== void 0;
+  const resolvedPressed = useMemo4(
+    () => (isControlled ? pressed : uncontrolledPressed) ?? false,
+    [isControlled, pressed, uncontrolledPressed]
+  );
+  const IconComponent = getSourceIcon(
+    source,
+    resolvedPressed,
+    pending
+  );
+  const handlePressedChange = (nextPressed) => {
+    if (!isControlled) setUncontrolledPressed(nextPressed);
+    onPressedChange?.(nextPressed);
+  };
+  return /* @__PURE__ */ jsxs2(
+    Toggle3,
+    {
+      pressed: isControlled ? pressed : void 0,
+      defaultPressed: isControlled ? void 0 : defaultPressed,
+      "aria-label": `Toggle ${source}`,
+      onPressedChange: handlePressedChange,
+      className: cn(
+        "size-9 rounded-lg",
+        "data-[state=on]:bg-muted data-[state=on]:text-foreground",
+        "data-[state=off]:bg-destructive/10 data-[state=off]:text-destructive",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(
+          HugeiconsIcon,
+          {
+            icon: IconComponent,
+            className: cn(pending && "animate-spin")
+          }
+        ),
+        props.children
+      ]
+    }
+  );
+}
+
+// src/components/agent-track-control.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function AgentTrackControl({
+  source,
+  pressed,
+  pending,
+  disabled: disabled2,
+  className,
+  audioTrack,
+  onPressedChange
+}) {
+  return /* @__PURE__ */ jsx5("div", { className: cn("flex items-center gap-0 rounded-md", className), children: /* @__PURE__ */ jsx5(
+    AgentTrackToggle,
+    {
+      source,
+      pressed,
+      pending,
+      disabled: disabled2,
+      onPressedChange,
+      className: "peer/track group/track focus:z-10 has-[.audiovisualizer]:w-auto has-[.audiovisualizer]:px-3 has-[~_button]:rounded-r-none has-[~_button]:border-r-0 has-[~_button]:pr-2 has-[~_button]:pl-3",
+      children: audioTrack && /* @__PURE__ */ jsx5(
+        AgentAudioVisualizerBar,
+        {
+          barCount: 3,
+          state: pressed ? "speaking" : "disconnected",
+          audioTrack: pressed ? audioTrack : void 0,
+          className: "audiovisualizer"
+        }
+      )
+    }
+  ) });
+}
+
+// src/components/agent-disconnect-button.tsx
+import { useSessionContext } from "@livekit/components-react";
+import { CallEnd03Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function AgentDisconnectButton({
+  children,
+  onClick,
+  className,
+  ...props
+}) {
+  const { end } = useSessionContext();
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (typeof end === "function") end();
+  };
+  return /* @__PURE__ */ jsx6(
+    Button,
+    {
+      variant: "destructive",
+      size: "icon",
+      onClick: handleClick,
+      className,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx6(HugeiconsIcon2, { icon: CallEnd03Icon })
+    }
+  );
+}
+
+// src/components/agent-transcript-panel.tsx
+import { useState as useState6 } from "react";
+import { useChat } from "@livekit/components-react";
+import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
+import { Loading03Icon as Loading03Icon2, Navigation03Icon } from "@hugeicons/core-free-icons";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function AgentTranscriptPanel() {
+  const { send } = useChat();
+  const [message, setMessage] = useState6("");
+  const [isSending, setIsSending] = useState6(false);
+  const isDisabled = isSending || message.trim().length === 0;
+  const handleSend = async () => {
+    if (isDisabled) return;
+    try {
+      setIsSending(true);
+      await send(message.trim());
+      setMessage("");
+    } catch {
+    } finally {
+      setIsSending(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  return /* @__PURE__ */ jsx7("div", { className: "flex h-full flex-col border-b", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-end gap-1 px-2 py-1", children: [
+    /* @__PURE__ */ jsx7(
+      "textarea",
+      {
+        autoFocus: true,
+        value: message,
+        disabled: isSending,
+        placeholder: "Type something...",
+        onKeyDown: handleKeyDown,
+        onChange: (e) => setMessage(e.target.value),
+        className: "field-sizing-content max-h-20 min-h-6 flex-1 resize-none py-1 text-xs [scrollbar-width:thin] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        disabled: isDisabled,
+        onClick: handleSend,
+        title: isSending ? "Sending\u2026" : "Send",
+        className: cn(
+          "flex size-6 flex-shrink-0 items-center justify-center self-end rounded",
+          isDisabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer text-foreground hover:opacity-80"
+        ),
+        children: isSending ? /* @__PURE__ */ jsx7(
+          HugeiconsIcon3,
+          {
+            icon: Loading03Icon2,
+            size: 18,
+            className: "animate-spin"
+          }
+        ) : /* @__PURE__ */ jsx7(
+          HugeiconsIcon3,
+          {
+            icon: Navigation03Icon,
+            size: 18,
+            className: "fill-primary/50 text-primary"
+          }
+        )
+      }
+    )
+  ] }) });
+}
+
+// src/hooks/use-input-controls.ts
+import { useCallback as useCallback3 } from "react";
+import { Track as Track2 } from "livekit-client";
+import {
+  useTrackToggle,
+  usePersistentUserChoices,
+  useLocalParticipantPermissions,
+  useSessionContext as useSessionContext2
+} from "@livekit/components-react";
+function useInputControls({
+  saveUserChoices = true,
+  onDeviceError
+} = {}) {
+  const {
+    local: { microphoneTrack }
+  } = useSessionContext2();
+  const microphoneToggle = useTrackToggle({
+    source: Track2.Source.Microphone,
+    onDeviceError: (error2) => onDeviceError?.({ source: Track2.Source.Microphone, error: error2 })
+  });
+  const cameraToggle = useTrackToggle({
+    source: Track2.Source.Camera,
+    onDeviceError: (error2) => onDeviceError?.({ source: Track2.Source.Camera, error: error2 })
+  });
+  const screenShareToggle = useTrackToggle({
+    source: Track2.Source.ScreenShare,
+    onDeviceError: (error2) => onDeviceError?.({ source: Track2.Source.ScreenShare, error: error2 })
+  });
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId
+  } = usePersistentUserChoices({ preventSave: !saveUserChoices });
+  const handleAudioDeviceChange = useCallback3(
+    (deviceId) => {
+      saveAudioInputDeviceId(deviceId ?? "default");
+    },
+    [saveAudioInputDeviceId]
+  );
+  const handleVideoDeviceChange = useCallback3(
+    (deviceId) => {
+      saveVideoInputDeviceId(deviceId ?? "default");
+    },
+    [saveVideoInputDeviceId]
+  );
+  const handleToggleCamera = useCallback3(
+    async (enabled) => {
+      if (screenShareToggle.enabled) {
+        screenShareToggle.toggle(false);
+      }
+      await cameraToggle.toggle(enabled);
+      saveVideoInputEnabled(!cameraToggle.enabled);
+    },
+    [cameraToggle, screenShareToggle, saveVideoInputEnabled]
+  );
+  const handleToggleMicrophone = useCallback3(
+    async (enabled) => {
+      await microphoneToggle.toggle(enabled);
+      saveAudioInputEnabled(!microphoneToggle.enabled);
+    },
+    [microphoneToggle, saveAudioInputEnabled]
+  );
+  const handleToggleScreenShare = useCallback3(
+    async (enabled) => {
+      if (cameraToggle.enabled) {
+        cameraToggle.toggle(false);
+      }
+      await screenShareToggle.toggle(enabled);
+    },
+    [cameraToggle, screenShareToggle]
+  );
+  const handleMicrophoneDeviceSelectError = useCallback3(
+    (error2) => onDeviceError?.({ source: Track2.Source.Microphone, error: error2 }),
+    [onDeviceError]
+  );
+  const handleCameraDeviceSelectError = useCallback3(
+    (error2) => onDeviceError?.({ source: Track2.Source.Camera, error: error2 }),
+    [onDeviceError]
+  );
+  return {
+    microphoneTrack,
+    cameraToggle: {
+      ...cameraToggle,
+      toggle: handleToggleCamera
+    },
+    microphoneToggle: {
+      ...microphoneToggle,
+      toggle: handleToggleMicrophone
+    },
+    screenShareToggle: {
+      ...screenShareToggle,
+      toggle: handleToggleScreenShare
+    },
+    handleAudioDeviceChange,
+    handleVideoDeviceChange,
+    handleMicrophoneDeviceSelectError,
+    handleCameraDeviceSelectError
+  };
+}
+
+// src/components/start-audio-button.tsx
+import { useEnsureRoom as useEnsureRoom2, useStartAudio } from "@livekit/components-react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function StartAudioButton({
+  size = "default",
+  variant = "default",
+  label,
+  room,
+  ...props
+}) {
+  const roomEnsured = useEnsureRoom2(room);
+  const { mergedProps } = useStartAudio({ room: roomEnsured, props });
+  return /* @__PURE__ */ jsx8(Button, { size, variant, ...props, ...mergedProps, children: label });
+}
+
+// src/components/workflow-execution.tsx
+import { useState as useState7, useCallback as useCallback4, useRef as useRef5 } from "react";
+import { createPortal } from "react-dom";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  AnimatePresence
+} from "motion/react";
+import {
+  Cursor02Icon,
+  ArrowLeft01Icon,
+  ArrowRight01Icon,
+  Tick01Icon
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var SPRING_CONFIG = { stiffness: 120, damping: 20, mass: 0.8 };
+var CURSOR_OFFSET = 16;
+function WorkflowExecution({
+  workflow,
+  cursor,
+  onClose,
+  onError
+}) {
+  const [currentIndex, setCurrentIndex] = useState7(0);
+  const steps = workflow.steps;
+  const currentStep = steps[currentIndex];
+  const isFirstStep = currentIndex === 0;
+  const isLastStep = currentIndex === steps.length - 1;
+  const handleBack = useCallback4(() => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+  const handleNext = useCallback4(() => {
+    setCurrentIndex((prev) => {
+      if (prev >= steps.length - 1) {
+        onClose();
+        return prev;
+      }
+      return prev + 1;
+    });
+  }, [steps.length, onClose]);
+  if (!currentStep) return null;
+  return /* @__PURE__ */ jsx9(
+    ExecutionOverlay,
+    {
+      step: currentStep,
+      stepIndex: currentIndex,
+      totalSteps: steps.length,
+      isFirstStep,
+      isLastStep,
+      cursor,
+      onBack: handleBack,
+      onNext: handleNext,
+      onError
+    }
+  );
+}
+function ExecutionOverlay({
+  step,
+  stepIndex,
+  totalSteps,
+  isFirstStep,
+  isLastStep,
+  cursor,
+  onBack,
+  onNext,
+  onError
+}) {
+  const { rect } = useElementTracker({
+    selector: step.elementId,
+    urlPath: step.urlPath,
+    onError: onError ? (msg) => {
+      if (msg !== null) onError(msg);
+    } : void 0,
+    onClick: onNext
+  });
+  const hasAnimated = useRef5(false);
+  const springX = useSpring(useMotionValue(0), SPRING_CONFIG);
+  const springY = useSpring(useMotionValue(0), SPRING_CONFIG);
+  if (rect) {
+    const targetX = rect.right + CURSOR_OFFSET;
+    const targetY = rect.bottom + CURSOR_OFFSET;
+    if (!hasAnimated.current) {
+      springX.jump(targetX);
+      springY.jump(targetY);
+      hasAnimated.current = true;
+    } else {
+      springX.set(targetX);
+      springY.set(targetY);
+    }
+  } else {
+    hasAnimated.current = false;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx9(AnimatePresence, { children: rect && /* @__PURE__ */ jsxs4(
+      motion.div,
+      {
+        "data-meridial-ui": true,
+        className: "pointer-events-none fixed z-[99999] flex items-start gap-3",
+        style: { top: springY, left: springX },
+        initial: { opacity: 0, scale: 0.6 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.6 },
+        transition: { duration: 0.2 },
+        children: [
+          cursor ?? /* @__PURE__ */ jsx9(
+            HugeiconsIcon4,
+            {
+              icon: Cursor02Icon,
+              strokeWidth: 2,
+              size: 32,
+              className: "mt-1 shrink-0 fill-primary/60 text-primary"
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              "data-meridial-ui": true,
+              className: "pointer-events-auto w-72 overflow-hidden rounded-lg border border-border bg-card shadow-lg",
+              children: [
+                /* @__PURE__ */ jsx9(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs4(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, y: 8 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: -8 },
+                    transition: { duration: 0.2, ease: "easeInOut" },
+                    className: "px-4 pt-3 pb-2",
+                    children: [
+                      /* @__PURE__ */ jsx9("p", { className: "text-sm leading-relaxed text-foreground", children: step.description || /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground italic", children: "No description" }) }),
+                      /* @__PURE__ */ jsxs4("span", { className: "mt-1 block text-xs text-muted-foreground", children: [
+                        "Step ",
+                        stepIndex + 1,
+                        " of ",
+                        totalSteps
+                      ] })
+                    ]
+                  },
+                  step.id
+                ) }),
+                /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    "data-meridial-ui": true,
+                    className: "flex justify-end gap-2 border-t px-3 py-2",
+                    children: [
+                      /* @__PURE__ */ jsxs4(
+                        Button,
+                        {
+                          variant: "outline",
+                          size: "sm",
+                          "data-meridial-ui": true,
+                          onClick: onBack,
+                          disabled: isFirstStep,
+                          children: [
+                            /* @__PURE__ */ jsx9(HugeiconsIcon4, { icon: ArrowLeft01Icon, size: 14 }),
+                            "Back"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx9(
+                        Button,
+                        {
+                          variant: "default",
+                          size: "sm",
+                          "data-meridial-ui": true,
+                          onClick: onNext,
+                          children: isLastStep ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                            "Finish",
+                            /* @__PURE__ */ jsx9(HugeiconsIcon4, { icon: Tick01Icon, size: 14 })
+                          ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                            "Next",
+                            /* @__PURE__ */ jsx9(HugeiconsIcon4, { icon: ArrowRight01Icon, size: 14 })
+                          ] })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/components/outcome-bar.tsx
+import {
+  ThumbsUpIcon,
+  ThumbsDownIcon,
+  MultiplicationSignIcon
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function OutcomeBar({ onSubmit }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [
+    /* @__PURE__ */ jsx10("span", { className: "text-sm text-muted-foreground", children: "Did we help?" }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => onSubmit("POSITIVE"),
+          "aria-label": "Yes, this helped",
+          children: /* @__PURE__ */ jsx10(HugeiconsIcon5, { icon: ThumbsUpIcon, className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => onSubmit("NEGATIVE"),
+          "aria-label": "No, this didn't help",
+          children: /* @__PURE__ */ jsx10(HugeiconsIcon5, { icon: ThumbsDownIcon, className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => onSubmit("NEUTRAL"),
+          "aria-label": "Dismiss",
+          children: /* @__PURE__ */ jsx10(HugeiconsIcon5, { icon: MultiplicationSignIcon, className: "size-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/meridial-logo.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function MeridialLogo(props) {
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      viewBox: "0 0 120 120",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx11(
+          "path",
+          {
+            d: "M13.281 74.0881L15.7251 69.8003L37.7371 89.6218L83.4484 98.732L102.441 97.8991L83.2815 101.205L35.3287 95.2458L13.281 74.0881Z",
+            fill: "#009EBC",
+            stroke: "#009EBC",
+            strokeWidth: "0.5"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "path",
+          {
+            d: "M88.6986 90.1613L15.4758 69.5032L36.8477 90.3775L83.0111 99.2024L102.445 97.7944L88.6986 90.1613Z",
+            fill: "url(#fl-g0)"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "path",
+          {
+            d: "M9.59212 38.8499L12.934 33.2319L34.6462 62.7104L86.7973 80.1624L108.813 81.1994L86.6098 82.9394L33.6228 69.8917L9.59212 38.8499Z",
+            fill: "#009EBC",
+            stroke: "#009EBC",
+            strokeWidth: "0.5"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "path",
+          {
+            d: "M94.1734 69.4478L12.7627 33.0524L34.7293 62.7357L86.5626 80.2897L109.003 81.1016L94.1734 69.4478Z",
+            fill: "url(#fl-g1)"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "path",
+          {
+            d: "M28.3329 17.4895L33.7347 13.5331L45.9901 38.7534L78.8505 55.5351L93.5023 57.1106L78.3627 57.1381L38.9556 40.7981L28.3329 17.4895Z",
+            fill: "#009EBC",
+            stroke: "#009EBC",
+            strokeWidth: "0.5"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "path",
+          {
+            d: "M84.6112 46.7121L33.6396 12.9639L46.1488 38.6786L78.9538 55.4676L93.5814 57.0605L84.6112 46.7121Z",
+            fill: "url(#fl-g2)"
+          }
+        ),
+        /* @__PURE__ */ jsxs6("defs", { children: [
+          /* @__PURE__ */ jsxs6(
+            "linearGradient",
+            {
+              id: "fl-g0",
+              x1: "57.7988",
+              y1: "66.4369",
+              x2: "60.2919",
+              y2: "100.848",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx11("stop", { stopColor: "#C3F6FF" }),
+                /* @__PURE__ */ jsx11("stop", { offset: "1", stopColor: "#007B92" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            "linearGradient",
+            {
+              id: "fl-g1",
+              x1: "61.633",
+              y1: "34.8205",
+              x2: "60.0227",
+              y2: "79.3295",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx11("stop", { stopColor: "#B8F3FF" }),
+                /* @__PURE__ */ jsx11("stop", { offset: "1", stopColor: "#007F99" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            "linearGradient",
+            {
+              id: "fl-g2",
+              x1: "65.4953",
+              y1: "16.4329",
+              x2: "61.4521",
+              y2: "53.5618",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx11("stop", { stopColor: "#D0F8FF" }),
+                /* @__PURE__ */ jsx11("stop", { offset: "1", stopColor: "#009EBC" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/voicebox-menu.tsx
+import { useState as useState8 } from "react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { HugeiconsIcon as HugeiconsIcon6 } from "@hugeicons/react";
+import {
+  Call02Icon,
+  ViewOffSlashIcon,
+  ArrowDown01Icon,
+  PlayIcon
+} from "@hugeicons/core-free-icons";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var POSITIONS = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+var POSITION_LABELS = {
+  "top-left": "TL",
+  "top-right": "TR",
+  "bottom-left": "BL",
+  "bottom-right": "BR"
+};
+var MENU_PLACEMENT = {
+  "bottom-right": {
+    originX: 1,
+    originY: 1,
+    className: "right-0 bottom-full mb-3"
+  },
+  "bottom-left": {
+    originX: 0,
+    originY: 1,
+    className: "left-0 bottom-full mb-3"
+  },
+  "top-right": {
+    originX: 1,
+    originY: 0,
+    className: "right-0 top-full mt-3"
+  },
+  "top-left": {
+    originX: 0,
+    originY: 0,
+    className: "left-0 top-full mt-3"
+  }
+};
+function VoiceboxMenu({
+  favoriteWorkflows,
+  position,
+  onPositionChange,
+  onHide,
+  onAskMeridial,
+  onPlayGuide
+}) {
+  const placement = MENU_PLACEMENT[position];
+  const [guidesExpanded, setGuidesExpanded] = useState8(false);
+  const hasFavorites = favoriteWorkflows.length > 0;
+  return /* @__PURE__ */ jsxs7(
+    motion2.div,
+    {
+      "data-meridial-ui": true,
+      className: cn(
+        "absolute z-50 w-56 overflow-hidden rounded-lg border border-border bg-card shadow-lg",
+        placement.className
+      ),
+      initial: { opacity: 0, scale: 0.9 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.9 },
+      style: {
+        transformOrigin: `${placement.originX * 100}% ${placement.originY * 100}%`
+      },
+      transition: { duration: 0.15, ease: "easeOut" },
+      children: [
+        hasFavorites && /* @__PURE__ */ jsxs7("div", { "data-meridial-ui": true, className: "border-b border-border", children: [
+          /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              "data-meridial-ui": true,
+              onClick: () => setGuidesExpanded((prev) => !prev),
+              className: "flex w-full cursor-pointer items-center justify-between px-3 py-2",
+              children: [
+                /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium tracking-wider text-muted-foreground", children: "Top Guides" }),
+                /* @__PURE__ */ jsx12(
+                  HugeiconsIcon6,
+                  {
+                    icon: ArrowDown01Icon,
+                    size: 14,
+                    className: cn(
+                      "shrink-0 text-muted-foreground transition-transform duration-200",
+                      guidesExpanded && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx12(AnimatePresence2, { initial: false, children: guidesExpanded && /* @__PURE__ */ jsx12(
+            motion2.div,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: { height: "auto", opacity: 1 },
+              exit: { height: 0, opacity: 0 },
+              transition: { duration: 0.15, ease: "easeOut" },
+              style: { overflow: "hidden" },
+              children: /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-0.5 px-3 pb-2", children: favoriteWorkflows.map((wf) => /* @__PURE__ */ jsxs7(
+                "button",
+                {
+                  "data-meridial-ui": true,
+                  onClick: () => onPlayGuide(wf),
+                  className: "flex w-full cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-left text-sm text-foreground hover:bg-muted/50",
+                  children: [
+                    /* @__PURE__ */ jsx12(
+                      HugeiconsIcon6,
+                      {
+                        icon: PlayIcon,
+                        size: 16,
+                        className: "shrink-0 text-primary fill-primary/60"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx12("span", { className: "truncate", children: wf.name })
+                  ]
+                },
+                wf.id
+              )) })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { "data-meridial-ui": true, className: "border-b border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium tracking-wider text-muted-foreground", children: "Position" }),
+          /* @__PURE__ */ jsx12("div", { className: "mt-1 grid grid-cols-4 gap-1", children: POSITIONS.map((pos) => /* @__PURE__ */ jsx12(
+            "button",
+            {
+              "data-meridial-ui": true,
+              onClick: () => onPositionChange(pos),
+              className: cn(
+                "cursor-pointer rounded px-2 py-1 text-xs font-medium transition-colors",
+                pos === position ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"
+              ),
+              children: POSITION_LABELS[pos]
+            },
+            pos
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "px-3 py-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Hide Until Next Visit" }),
+          /* @__PURE__ */ jsx12(Button, { variant: "ghost", size: "sm", "data-meridial-ui": true, onClick: onHide, children: /* @__PURE__ */ jsx12(
+            HugeiconsIcon6,
+            {
+              icon: ViewOffSlashIcon,
+              size: 16,
+              className: "shrink-0"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx12(Separator, {}),
+        /* @__PURE__ */ jsxs7("div", { className: "px-3 py-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium tracking-wider text-muted-foreground", children: "Ask For Help" }),
+          /* @__PURE__ */ jsx12(
+            Button,
+            {
+              "data-meridial-ui": true,
+              onClick: onAskMeridial,
+              variant: "ghost",
+              size: "sm",
+              children: /* @__PURE__ */ jsx12(
+                HugeiconsIcon6,
+                {
+                  icon: Call02Icon,
+                  size: 16,
+                  className: "shrink-0 fill-primary/60 text-primary"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/voicebox.tsx
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var BADGE_POSITION_CLASSES = {
+  "bottom-right": "right-6 bottom-6",
+  "bottom-left": "left-6 bottom-6",
+  "top-right": "right-6 top-6",
+  "top-left": "left-6 top-6"
+};
+var BAR_POSITION_CLASSES = {
+  "bottom-right": "right-4 bottom-4",
+  "bottom-left": "left-4 bottom-4",
+  "top-right": "right-4 top-4",
+  "top-left": "left-4 top-4"
+};
+function VoiceboxBadge({
+  triggerIcon,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx13(
+    "button",
+    {
+      "data-meridial-ui": true,
+      onClick,
+      "aria-label": "Open assistant menu",
+      className: "group size-10 flex cursor-pointer items-center justify-center rounded-full border border-border bg-background shadow-lg transition-transform duration-200 ease-out hover:scale-110",
+      children: triggerIcon ?? /* @__PURE__ */ jsx13(MeridialLogo, { className: "size-6" })
+    }
+  );
+}
+function VoiceboxContent({
+  baseUrl,
+  publishableKey,
+  tools,
+  cursor,
+  barPosition,
+  initialWorkflow,
+  onDisconnect,
+  onError
+}) {
+  const [showTranscript, setShowTranscript] = useState9(false);
+  const [showOutcomeBar, setShowOutcomeBar] = useState9(false);
+  const [activeWorkflow, setActiveWorkflow] = useState9(initialWorkflow ?? null);
+  const workflowsRef = useRef6([]);
+  const room = useEnsureRoom3();
+  const autoStarted = useRef6(false);
+  const outcomeShown = useRef6(false);
+  const draggableRef = useRef6(null);
+  const triggerOutcomeBar = useCallback5(() => {
+    if (!outcomeShown.current) {
+      outcomeShown.current = true;
+      setShowOutcomeBar(true);
+    }
+  }, []);
+  const handleOutcomeSubmit = useCallback5(
+    async (outcome) => {
+      setShowOutcomeBar(false);
+      try {
+        const sessionId = await room.getSid();
+        await fetch(`${baseUrl}/api/outcome`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ publishableKey, sessionId, outcome })
+        });
+      } catch {
+      }
+    },
+    [room, baseUrl, publishableKey]
+  );
+  useToolRegistration(tools, triggerOutcomeBar);
+  useDraggable(draggableRef);
+  useEffect5(() => {
+    if (!publishableKey) return;
+    fetch(`${baseUrl}/api/workflows`, {
+      headers: { Authorization: `Bearer ${publishableKey}` }
+    }).then((r) => r.json()).then((data) => {
+      if (data.workflows) workflowsRef.current = data.workflows;
+    }).catch((error2) => {
+      onError?.(
+        error2 instanceof Error ? error2.message : "Workflows fetch failed"
+      );
+    });
+  }, [baseUrl, publishableKey]);
+  useEffect5(() => {
+    room.registerRpcMethod("workflow:execute", async (rpcData) => {
+      try {
+        const { slug } = JSON.parse(rpcData.payload);
+        const apiWf = workflowsRef.current.find((w) => w.slug === slug);
+        if (!apiWf) throw new Error(`Workflow '${slug}' not found`);
+        const workflow = {
+          id: apiWf.id,
+          name: apiWf.name,
+          steps: apiWf.steps,
+          configured: true,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setActiveWorkflow({ id: apiWf.id, workflow });
+        triggerOutcomeBar();
+        return JSON.stringify({ success: true });
+      } catch (error2) {
+        onError?.(
+          error2 instanceof Error ? error2.message : "Workflow execution failed"
+        );
+        throw new RpcError2(
+          1,
+          error2 instanceof Error ? error2.message : "Workflow execution failed"
+        );
+      }
+    });
+    return () => {
+      room.unregisterRpcMethod("workflow:execute");
+    };
+  }, [room]);
+  const { state } = useAgent();
+  const { start } = useSessionContext3();
+  useEffect5(() => {
+    if (!autoStarted.current) {
+      autoStarted.current = true;
+      start();
+    }
+  }, [start]);
+  const isConnecting = state === "connecting" || state === "initializing" || state === "pre-connect-buffering";
+  const isDisconnected = state === "disconnected" || state === "failed";
+  const { microphoneTrack, microphoneToggle } = useInputControls();
+  const handleDisconnect = () => {
+    onDisconnect();
+  };
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    activeWorkflow && /* @__PURE__ */ jsx13(
+      WorkflowExecution,
+      {
+        workflow: activeWorkflow.workflow,
+        cursor,
+        onClose: () => setActiveWorkflow(null),
+        onError
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref: draggableRef,
+        "data-meridial-ui": true,
+        className: cn(
+          "fixed z-50 w-96 items-stretch rounded border border-border bg-card shadow-md",
+          BAR_POSITION_CLASSES[barPosition]
+        ),
+        children: [
+          /* @__PURE__ */ jsx13(AnimatePresence3, { initial: false, children: showTranscript && /* @__PURE__ */ jsx13(
+            motion3.div,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: { height: "auto", opacity: 1 },
+              exit: { height: 0, opacity: 0 },
+              transition: { duration: 0.24, ease: "easeOut" },
+              style: { overflow: "hidden" },
+              children: /* @__PURE__ */ jsx13(AgentTranscriptPanel, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx13(AnimatePresence3, { initial: false, children: showOutcomeBar && /* @__PURE__ */ jsx13(
+            motion3.div,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: { height: "auto", opacity: 1 },
+              exit: { height: 0, opacity: 0 },
+              transition: { duration: 0.24, ease: "easeOut" },
+              style: { overflow: "hidden" },
+              children: /* @__PURE__ */ jsx13(OutcomeBar, { onSubmit: handleOutcomeSubmit })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs8("div", { "data-meridial-ui": true, className: "flex h-12 items-center", children: [
+            /* @__PURE__ */ jsx13(DragHandle, { className: "px-2" }),
+            /* @__PURE__ */ jsx13(Separator, { orientation: "vertical", className: "h-full" }),
+            /* @__PURE__ */ jsxs8("div", { className: "relative flex h-full flex-1 items-center justify-between px-2", children: [
+              /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx13(
+                  AgentTrackControl,
+                  {
+                    source: "microphone",
+                    pressed: microphoneToggle.enabled,
+                    pending: microphoneToggle.pending,
+                    disabled: microphoneToggle.pending,
+                    audioTrack: microphoneTrack,
+                    onPressedChange: microphoneToggle.toggle
+                  }
+                ),
+                /* @__PURE__ */ jsx13(
+                  Toggle3,
+                  {
+                    disabled: isDisconnected || isConnecting,
+                    pressed: showTranscript,
+                    "aria-label": "Toggle transcript",
+                    onPressedChange: setShowTranscript,
+                    className: cn(
+                      "size-9 rounded-lg",
+                      showTranscript ? "bg-muted text-foreground" : "bg-transparent text-muted-foreground hover:text-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx13(HugeiconsIcon7, { icon: ChatFeedback01Icon })
+                  }
+                ),
+                /* @__PURE__ */ jsx13(
+                  AgentAudioVisualizerBar,
+                  {
+                    barCount: 12,
+                    state,
+                    audioTrack: microphoneTrack,
+                    className: "mx-4"
+                  }
+                )
+              ] }),
+              isConnecting ? /* @__PURE__ */ jsxs8(Button, { variant: "outline", children: [
+                /* @__PURE__ */ jsx13("span", { children: "Connecting" }),
+                /* @__PURE__ */ jsx13(HugeiconsIcon7, { icon: Loading03Icon3, className: "animate-spin" })
+              ] }) : /* @__PURE__ */ jsx13(AgentDisconnectButton, { onClick: handleDisconnect }),
+              /* @__PURE__ */ jsx13(StartAudioButton, { label: "Start Audio" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Voicebox({
+  baseUrl = "",
+  publishableKey,
+  identifier,
+  tools,
+  triggerIcon,
+  cursor,
+  firstMessage,
+  instructions,
+  metadata,
+  onError
+}) {
+  const [view, setView] = useState9("badge");
+  const [hidden, setHidden] = useState9(false);
+  const [badgePosition, setBadgePosition] = useState9(() => {
+    if (typeof window === "undefined") return "bottom-right";
+    return localStorage.getItem(STORAGE_KEYS.triggerPos) || "bottom-right";
+  });
+  const [favoriteWorkflows, setFavoriteWorkflows] = useState9([]);
+  const [initialWorkflow, setInitialWorkflow] = useState9(null);
+  const [guideWorkflow, setGuideWorkflow] = useState9(null);
+  useEffect5(() => {
+    if (sessionStorage.getItem(STORAGE_KEYS.hidden) === "true") {
+      setHidden(true);
+    }
+  }, []);
+  useEffect5(() => {
+    if (!publishableKey) return;
+    fetch(`${baseUrl}/api/workflows`, {
+      headers: { Authorization: `Bearer ${publishableKey}` }
+    }).then((r) => r.json()).then((data) => {
+      const parsed = apiWorkflowsResponseSchema.safeParse(data);
+      if (parsed.success && parsed.data.workflows) {
+        setFavoriteWorkflows(
+          parsed.data.workflows.filter((w) => w.isFavorite)
+        );
+      }
+    }).catch(() => {
+    });
+  }, [baseUrl, publishableKey]);
+  const serializedTools = useMemo5(
+    () => tools && tools.length > 0 ? serializeTools(tools) : [],
+    [tools]
+  );
+  const tokenSource = useMemo5(
+    () => TokenSource.custom(async () => {
+      const response = await fetch(`${baseUrl}/api/auth/livekit`, {
+        method: "POST",
+        body: JSON.stringify({
+          publishableKey,
+          identifier,
+          firstMessage,
+          instructions,
+          tools: serializedTools,
+          metadata
+        })
+      });
+      if (!response.ok) {
+        const body = await response.json().catch(() => ({}));
+        onError?.(body.error ?? `Token request failed (${response.status})`);
+        return null;
+      }
+      return response.json();
+    }),
+    [
+      baseUrl,
+      publishableKey,
+      identifier,
+      firstMessage,
+      instructions,
+      serializedTools,
+      metadata,
+      onError
+    ]
+  );
+  const session = useSession(tokenSource);
+  const handleDisconnect = () => {
+    setView("badge");
+    setInitialWorkflow(null);
+  };
+  const handlePositionChange = (pos) => {
+    setBadgePosition(pos);
+    localStorage.setItem(STORAGE_KEYS.triggerPos, pos);
+  };
+  const handleHide = () => {
+    sessionStorage.setItem(STORAGE_KEYS.hidden, "true");
+    setHidden(true);
+    setView("badge");
+  };
+  const handleAskMeridial = () => {
+    setInitialWorkflow(null);
+    setView("call");
+  };
+  const handlePlayGuide = (wf) => {
+    setGuideWorkflow({
+      id: wf.id,
+      name: wf.name,
+      steps: wf.steps,
+      configured: true,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    setView("guide");
+  };
+  const handleBadgeClick = () => {
+    setView((prev) => prev === "menu" ? "badge" : "menu");
+  };
+  if (hidden) return null;
+  return /* @__PURE__ */ jsx13(AgentSessionProvider, { session, children: view === "call" ? /* @__PURE__ */ jsx13(
+    VoiceboxContent,
+    {
+      baseUrl,
+      publishableKey,
+      tools,
+      cursor,
+      barPosition: badgePosition,
+      initialWorkflow,
+      onDisconnect: handleDisconnect,
+      onError
+    }
+  ) : view === "guide" && guideWorkflow ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsx13(
+      WorkflowExecution,
+      {
+        workflow: guideWorkflow,
+        cursor,
+        onClose: () => {
+          setGuideWorkflow(null);
+          setView("badge");
+        },
+        onError
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: cn("fixed z-50", BADGE_POSITION_CLASSES[badgePosition]),
+        children: /* @__PURE__ */ jsx13(
+          VoiceboxBadge,
+          {
+            triggerIcon,
+            onClick: handleBadgeClick
+          }
+        )
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn("fixed z-50", BADGE_POSITION_CLASSES[badgePosition]),
+      children: [
+        /* @__PURE__ */ jsx13(AnimatePresence3, { children: view === "menu" && /* @__PURE__ */ jsx13(
+          VoiceboxMenu,
+          {
+            favoriteWorkflows,
+            position: badgePosition,
+            onPositionChange: handlePositionChange,
+            onHide: handleHide,
+            onAskMeridial: handleAskMeridial,
+            onPlayGuide: handlePlayGuide
+          }
+        ) }),
+        /* @__PURE__ */ jsx13(VoiceboxBadge, { triggerIcon, onClick: handleBadgeClick })
+      ]
+    }
+  ) });
+}
+
+export {
+  Voicebox
+};
+//# sourceMappingURL=chunk-WCRZUGN4.js.map