@ringg/react-native 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,20 +17,47 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  GradientFill: () => GradientFill,
+  Markdown: () => Markdown,
+  RinggWidget: () => RinggWidget,
+  WidgetThemeProvider: () => WidgetThemeProvider,
+  appOrigin: () => appOrigin,
+  createAudioSession: () => createAudioSession,
   createCallbackEventBus: () => createCallbackEventBus,
+  createHostActionDispatcher: () => createHostActionDispatcher,
+  createLiveKitTransport: () => createLiveKitTransport,
+  createNativeMicPermission: () => createNativeMicPermission,
+  createNotificationPlayer: () => createNotificationPlayer,
   createRinggWidgetController: () => createRinggWidgetController,
+  createSilentNotificationPlayer: () => createSilentNotificationPlayer,
+  resolveButtonRadius: () => resolveButtonRadius,
+  resolveFontFamily: () => resolveFontFamily,
+  resolveRadius: () => resolveRadius,
+  ringgId: () => ringgId,
+  solidColor: () => solidColor,
+  toSize: () => toSize,
+  toViewStyle: () => toViewStyle,
   useRinggComponents: () => useRinggComponents,
   useRinggMessages: () => useRinggMessages,
   useRinggSession: () => useRinggSession,
   useRinggShell: () => useRinggShell,
   useRinggSlashCommands: () => useRinggSlashCommands,
   useRinggTyping: () => useRinggTyping,
-  useStoreSnapshot: () => useStoreSnapshot
+  useStoreSnapshot: () => useStoreSnapshot,
+  useWidgetTheme: () => useWidgetTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -125,7 +154,8 @@ var silentNotificationPlayer = {
 function createRinggApiClient(config) {
   const { backendUrl, livekitUrl } = config.urlResolver.resolve(config.mode);
   const authHeaders = config.authorization ? { Authorization: config.authorization } : config.xApiKey ? { "X-API-KEY": config.xApiKey } : {};
-  const headers = () => ({ "Content-Type": "application/json", ...authHeaders });
+  const originHeader = config.clientOrigin ? { Origin: config.clientOrigin } : {};
+  const headers = () => ({ "Content-Type": "application/json", ...originHeader, ...authHeaders });
   return {
     backendUrl,
     livekitUrl,
@@ -177,10 +207,90 @@ function createRinggApiClient(config) {
   };
 }
 
+// ../core/dist/theme/gradient-utils.js
+var GRADIENT_FUNCTIONS = ["linear-gradient", "radial-gradient", "conic-gradient", "repeating-linear-gradient", "repeating-radial-gradient", "repeating-conic-gradient"];
+var COLOR_FUNCTIONS = ["rgba", "rgb", "hsla", "hsl"];
+function isGradient(color) {
+  const normalized = color.trim().toLowerCase();
+  return GRADIENT_FUNCTIONS.some((fn) => normalized.startsWith(`${fn}(`));
+}
+function splitGradientArguments(gradient) {
+  const open = gradient.indexOf("(");
+  const close = gradient.lastIndexOf(")");
+  if (open === -1 || close <= open)
+    return [];
+  const body = gradient.slice(open + 1, close);
+  const args = [];
+  let depth = 0;
+  let current = "";
+  for (const char of body) {
+    if (char === "(")
+      depth++;
+    else if (char === ")")
+      depth--;
+    if (char === "," && depth === 0) {
+      args.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim())
+    args.push(current.trim());
+  return args;
+}
+function isHexDigit(char) {
+  return char >= "0" && char <= "9" || char >= "a" && char <= "f" || char >= "A" && char <= "F";
+}
+function takeHexColor(value) {
+  let digits = "";
+  for (const char of value.slice(1)) {
+    if (!isHexDigit(char))
+      break;
+    digits += char;
+  }
+  const validLengths = [3, 4, 6, 8];
+  return validLengths.includes(digits.length) ? `#${digits}` : null;
+}
+function takeColorFunction(value) {
+  const normalized = value.toLowerCase();
+  if (!COLOR_FUNCTIONS.some((fn) => normalized.startsWith(`${fn}(`)))
+    return null;
+  const close = value.indexOf(")");
+  return close === -1 ? null : value.slice(0, close + 1);
+}
+function leadingColor(argument) {
+  const value = argument.trim();
+  if (value.startsWith("#"))
+    return takeHexColor(value);
+  return takeColorFunction(value);
+}
+function extractColorsFromGradient(gradient) {
+  if (!isGradient(gradient))
+    return [];
+  return splitGradientArguments(gradient).map(leadingColor).filter((color) => color !== null);
+}
+function getDominantColor(color) {
+  if (!isGradient(color))
+    return color;
+  return extractColorsFromGradient(color)[0] ?? color;
+}
+
 // ../core/dist/theme/theme-engine.js
 function mergeWidgetTheme(theme) {
   return { ...DEFAULT_WIDGET_THEME, ...theme };
 }
+function getButtonRadius(style) {
+  switch (style) {
+    case "pill":
+      return "9999px";
+    case "square":
+      return "6px";
+    case "rounded":
+    default:
+      return "12px";
+  }
+}
 
 // ../core/dist/rpc/formatter.js
 function transformRpcToComponent(componentName, rpcPayload) {
@@ -819,7 +929,8 @@ function createRinggWidgetController(config, ports) {
     urlResolver: ports.urlResolver,
     mode: config.mode ?? WIDGET_DEFAULTS.mode,
     xApiKey: config.xApiKey,
-    authorization: config.authorization
+    authorization: config.authorization,
+    clientOrigin: config.clientOrigin
   });
   const shell = createShellStore(eventBus, config.defaultTab ?? WIDGET_DEFAULTS.defaultTab, config.defaultExpanded ?? WIDGET_DEFAULTS.defaultExpanded);
   const session = createSessionStore(api, transport, ports.micPermission ?? grantedMicPermission);
@@ -1149,16 +1260,4506 @@ var useRinggSession = (controller) => useStoreSnapshot(controller.session);
 var useRinggShell = (controller) => useStoreSnapshot(controller.shell);
 var useRinggComponents = (controller) => useStoreSnapshot(controller.components);
 var useRinggSlashCommands = (controller) => useStoreSnapshot(controller.slashCommands);
+
+// src/RinggWidget.tsx
+var import_react24 = require("react");
+var import_react_native28 = require("react-native");
+var import_lucide_react_native10 = require("lucide-react-native");
+
+// src/components/action-button.tsx
+var import_react_native3 = require("react-native");
+
+// src/lib/gradient.tsx
+var import_react2 = require("react");
+var import_react_native = require("react-native");
+var import_react_native_svg = __toESM(require("react-native-svg"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_ANGLE_DEG = 180;
+var SIDE_ANGLES = {
+  "to top": 0,
+  "to right": 90,
+  "to bottom": 180,
+  "to left": 270,
+  "to top right": 45,
+  "to right top": 45,
+  "to bottom right": 135,
+  "to right bottom": 135,
+  "to bottom left": 225,
+  "to left bottom": 225,
+  "to top left": 315,
+  "to left top": 315
+};
+var angleToDegrees = (value) => {
+  const match = /^(-?\d+(?:\.\d+)?)(deg|rad|grad|turn)$/.exec(value.trim().toLowerCase());
+  if (!match) return void 0;
+  const amount = Number(match[1]);
+  switch (match[2]) {
+    case "deg":
+      return amount;
+    case "rad":
+      return amount * 180 / Math.PI;
+    case "grad":
+      return amount * 0.9;
+    case "turn":
+      return amount * 360;
+    default:
+      return void 0;
+  }
+};
+var readAngle = (gradient) => {
+  const open = gradient.indexOf("(");
+  const close = gradient.lastIndexOf(")");
+  if (open === -1 || close <= open) return DEFAULT_ANGLE_DEG;
+  const first = gradient.slice(open + 1, close).split(",")[0]?.trim().toLowerCase() ?? "";
+  if (first.startsWith("to ")) return SIDE_ANGLES[first.replace(/\s+/g, " ")] ?? DEFAULT_ANGLE_DEG;
+  return angleToDegrees(first) ?? DEFAULT_ANGLE_DEG;
+};
+var angleToLine = (degrees) => {
+  const radians = degrees * Math.PI / 180;
+  const dx = Math.sin(radians);
+  const dy = -Math.cos(radians);
+  return {
+    x1: `${0.5 - dx / 2}`,
+    y1: `${0.5 - dy / 2}`,
+    x2: `${0.5 + dx / 2}`,
+    y2: `${0.5 + dy / 2}`
+  };
+};
+var stopOffset = (index, total) => total <= 1 ? "0" : `${index / (total - 1)}`;
+var gradientId = 0;
+var nextGradientId = () => `ringg-gradient-${++gradientId}`;
+var GradientFill = ({ color, style, children }) => {
+  if (!isGradient(color)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [{ backgroundColor: color }, style], children });
+  const colors = extractColorsFromGradient(color);
+  if (colors.length < 2) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [{ backgroundColor: getDominantColor(color) }, style], children });
+  const id = nextGradientId();
+  const line = angleToLine(readAngle(color));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.clipped, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native_svg.default, { style: import_react_native.StyleSheet.absoluteFill, pointerEvents: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.Defs, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.LinearGradient, { id, x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, children: colors.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.Stop, { offset: stopOffset(index, colors.length), stopColor: stop }, `${stop}-${index}`)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${id})` })
+    ] }),
+    import_react2.Children.count(children) > 0 ? children : null
+  ] });
+};
+var styles = import_react_native.StyleSheet.create({
+  clipped: { overflow: "hidden" }
+});
+var solidColor = (color) => getDominantColor(color);
+
+// src/lib/icons.tsx
+var import_react_native_svg2 = __toESM(require("react-native-svg"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_SIZE = 18;
+var DEFAULT_FILL = "#000000";
+var PhoneCallRingIcon = ({ size = DEFAULT_SIZE, width, height, fill = DEFAULT_FILL, style, testID }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.default, { testID, viewBox: "0 0 19 19", width: width ?? size, height: height ?? size, style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.Path, { d: "M11.5253 1.30593C11.5508 1.21075 11.5947 1.12151 11.6547 1.04333C11.7147 0.965143 11.7894 0.899537 11.8748 0.85026C11.9601 0.800983 12.0543 0.769 12.152 0.756139C12.2496 0.743278 12.3489 0.749791 12.4441 0.775306C13.8344 1.13807 15.103 1.86491 16.119 2.88096C17.1351 3.89702 17.8619 5.16556 18.2247 6.55593C18.2502 6.6511 18.2567 6.75036 18.2439 6.84805C18.231 6.94573 18.199 7.03993 18.1497 7.12525C18.1005 7.21057 18.0349 7.28534 17.9567 7.3453C17.8785 7.40526 17.7893 7.44922 17.6941 7.47468C17.6307 7.49132 17.5655 7.49983 17.5 7.49999C17.3347 7.49999 17.1741 7.44539 17.043 7.34469C16.912 7.24399 16.8179 7.10282 16.7753 6.94312C16.4795 5.80811 15.8863 4.77253 15.0569 3.94314C14.2275 3.11375 13.1919 2.52054 12.0569 2.22468C11.9616 2.19932 11.8723 2.15543 11.794 2.09552C11.7157 2.0356 11.65 1.96084 11.6006 1.87551C11.5513 1.79018 11.5192 1.69595 11.5063 1.59822C11.4933 1.50048 11.4998 1.40116 11.5253 1.30593ZM11.3069 5.22468C12.5997 5.56968 13.4303 6.40031 13.7753 7.69312C13.8179 7.85282 13.912 7.99399 14.043 8.09469C14.1741 8.19539 14.3347 8.24999 14.5 8.24999C14.5655 8.24983 14.6307 8.24132 14.6941 8.22468C14.7893 8.19922 14.8785 8.15526 14.9567 8.0953C15.0349 8.03534 15.1005 7.96057 15.1497 7.87525C15.199 7.78993 15.231 7.69573 15.2439 7.59805C15.2567 7.50036 15.2502 7.4011 15.2247 7.30593C14.7447 5.50968 13.4903 4.25531 11.6941 3.77531C11.5019 3.72396 11.2971 3.75107 11.1249 3.85067C10.9527 3.95027 10.8271 4.1142 10.7758 4.3064C10.7244 4.4986 10.7516 4.70332 10.8512 4.87553C10.9508 5.04774 11.1147 5.17334 11.3069 5.22468ZM18.9888 14.1637C18.8216 15.4341 18.1977 16.6001 17.2337 17.4441C16.2696 18.2881 15.0313 18.7523 13.75 18.75C6.30626 18.75 0.250008 12.6937 0.250008 5.24999C0.247712 3.9687 0.711903 2.73039 1.55588 1.76633C2.39986 0.802276 3.56592 0.178406 4.83626 0.0112434C5.1575 -0.0279808 5.4828 0.0377391 5.76362 0.198592C6.04444 0.359445 6.2657 0.606804 6.39438 0.903743L8.37438 5.32406V5.33531C8.4729 5.56261 8.51359 5.81077 8.49282 6.05763C8.47204 6.30449 8.39044 6.54236 8.25532 6.74999C8.23845 6.77531 8.22063 6.79874 8.20188 6.82218L6.25001 9.13593C6.9522 10.5628 8.4447 12.0422 9.89032 12.7462L12.1722 10.8047C12.1946 10.7858 12.2181 10.7683 12.2425 10.7522C12.45 10.6138 12.6887 10.5293 12.937 10.5064C13.1853 10.4835 13.4354 10.5229 13.6647 10.6209L13.6769 10.6266L18.0934 12.6056C18.3909 12.7338 18.6389 12.9549 18.8003 13.2358C18.9616 13.5166 19.0278 13.8422 18.9888 14.1637ZM17.5 13.9762C17.5 13.9762 17.4934 13.9762 17.4897 13.9762L13.0834 12.0028L10.8006 13.9444C10.7785 13.9631 10.7553 13.9807 10.7313 13.9969C10.5154 14.1409 10.2659 14.2264 10.0071 14.2452C9.74828 14.2639 9.48904 14.2152 9.2547 14.1037C7.49876 13.2553 5.74845 11.5181 4.89907 9.78093C4.7866 9.5483 4.73613 9.29055 4.75255 9.03267C4.76898 8.7748 4.85174 8.52554 4.99282 8.30906C5.00872 8.28364 5.02659 8.2595 5.04626 8.23687L7.00001 5.92031L5.03126 1.51406C5.03089 1.51032 5.03089 1.50655 5.03126 1.50281C4.12212 1.6214 3.28739 2.06733 2.68339 2.7571C2.0794 3.44687 1.74755 4.33316 1.75001 5.24999C1.75348 8.43153 3.01888 11.4818 5.26856 13.7314C7.51825 15.9811 10.5685 17.2465 13.75 17.25C14.6663 17.2531 15.5523 16.9225 16.2425 16.3198C16.9327 15.7171 17.3797 14.8837 17.5 13.9753V13.9762Z", fill }) });
+var PhoneEndCallIcon = ({ size = DEFAULT_SIZE, width, height, fill = DEFAULT_FILL, style, testID }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.default, { testID, viewBox: "0 0 20 16", width: width ?? size, height: height ?? size, style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.Path, { d: "M4.21328 0.704679C4.15839 0.642809 4.09177 0.592448 4.01728 0.556515C3.94278 0.520582 3.8619 0.499791 3.77931 0.495348C3.69672 0.490905 3.61408 0.502898 3.53616 0.530632C3.45824 0.558365 3.3866 0.601288 3.32539 0.656913C3.26419 0.712537 3.21463 0.779756 3.17959 0.854675C3.14455 0.929593 3.12473 1.01072 3.12128 1.09336C3.11783 1.17599 3.13081 1.25849 3.15948 1.33607C3.18814 1.41365 3.23192 1.48477 3.28828 1.5453L5.44375 3.91718C4.12152 4.47256 2.92021 5.28033 1.90703 6.2953C0.344526 7.8578 0.194526 10.1594 1.54062 11.8945C1.70579 12.1059 1.93457 12.2585 2.19315 12.3298C2.45172 12.4011 2.72639 12.3874 2.97656 12.2906L6.80468 10.9336L6.82734 10.925C7.02045 10.8478 7.19125 10.7236 7.32426 10.5637C7.45727 10.4039 7.54829 10.2133 7.58906 10.0094L8.05 7.7039C8.26906 7.62838 8.49236 7.56578 8.71875 7.5164L15.7898 15.2953C15.8447 15.3572 15.9113 15.4075 15.9858 15.4435C16.0603 15.4794 16.1412 15.5002 16.2238 15.5046C16.3064 15.5091 16.389 15.4971 16.467 15.4694C16.5449 15.4416 16.6165 15.3987 16.6777 15.3431C16.7389 15.2874 16.7885 15.2202 16.8235 15.1453C16.8586 15.0704 16.8784 14.9893 16.8818 14.9066C16.8853 14.824 16.8723 14.7415 16.8436 14.6639C16.815 14.5863 16.7712 14.5152 16.7148 14.4547L4.21328 0.704679ZM7.62734 6.52655C7.42378 6.59909 7.24251 6.72315 7.1012 6.88664C6.9599 7.05013 6.86339 7.24745 6.82109 7.45937L6.36015 9.76405L2.54921 11.1156C2.5414 11.1156 2.53593 11.1258 2.52812 11.1289C1.56484 9.88671 1.66874 8.29921 2.79062 7.1789C3.79625 6.17293 5.00827 5.39726 6.34296 4.90546L7.77265 6.4789C7.72421 6.49452 7.67578 6.50937 7.62734 6.52655ZM18.4594 11.8945C18.2942 12.1059 18.0654 12.2585 17.8068 12.3298C17.5483 12.4011 17.2736 12.3874 17.0234 12.2906L16.3008 12.0344C16.2234 12.0069 16.1522 11.9645 16.0913 11.9096C16.0303 11.8546 15.9808 11.7882 15.9455 11.7141C15.8742 11.5644 15.8653 11.3925 15.9207 11.2363C15.9481 11.159 15.9906 11.0878 16.0455 11.0268C16.1005 10.9658 16.1669 10.9163 16.241 10.881C16.3907 10.8097 16.5625 10.8008 16.7187 10.8562L17.4508 11.1156L17.4742 11.125C18.4352 9.88671 18.3336 8.29921 17.2094 7.1789C15.2047 5.17421 12.375 4.11093 9.44765 4.26405C9.36558 4.26831 9.28346 4.25636 9.20601 4.22889C9.12855 4.20141 9.05726 4.15895 8.99621 4.10392C8.93517 4.0489 8.88556 3.98238 8.85021 3.90819C8.81487 3.83399 8.79449 3.75355 8.79023 3.67148C8.78597 3.5894 8.79792 3.50729 8.8254 3.42983C8.85287 3.35237 8.89534 3.28109 8.95036 3.22004C9.00539 3.15899 9.0719 3.10938 9.1461 3.07404C9.2203 3.03869 9.30073 3.01831 9.38281 3.01405C12.6641 2.84296 15.8383 4.03749 18.093 6.2953C19.6547 7.85702 19.8055 10.1594 18.4594 11.8945Z", fill }) });
+var MicrophoneIcon = ({ size = DEFAULT_SIZE, width, height, fill = DEFAULT_FILL, style, testID }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.default, { testID, viewBox: "0 0 14 19", width: width ?? size, height: height ?? size, style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.Path, { d: "M7 12.75C7.99424 12.749 8.94747 12.3535 9.65051 11.6505C10.3535 10.9475 10.749 9.99424 10.75 9V4C10.75 3.00544 10.3549 2.05161 9.65165 1.34835C8.94839 0.645088 7.99456 0.25 7 0.25C6.00544 0.25 5.05161 0.645088 4.34835 1.34835C3.64509 2.05161 3.25 3.00544 3.25 4V9C3.25103 9.99424 3.64645 10.9475 4.34949 11.6505C5.05253 12.3535 6.00576 12.749 7 12.75ZM4.5 4C4.5 3.33696 4.76339 2.70107 5.23223 2.23223C5.70107 1.76339 6.33696 1.5 7 1.5C7.66304 1.5 8.29893 1.76339 8.76777 2.23223C9.23661 2.70107 9.5 3.33696 9.5 4V9C9.5 9.66304 9.23661 10.2989 8.76777 10.7678C8.29893 11.2366 7.66304 11.5 7 11.5C6.33696 11.5 5.70107 11.2366 5.23223 10.7678C4.76339 10.2989 4.5 9.66304 4.5 9V4ZM7.625 15.2188V17.75C7.625 17.9158 7.55915 18.0747 7.44194 18.1919C7.32473 18.3092 7.16576 18.375 7 18.375C6.83424 18.375 6.67527 18.3092 6.55806 18.1919C6.44085 18.0747 6.375 17.9158 6.375 17.75V15.2188C4.8341 15.062 3.40607 14.3393 2.36707 13.1907C1.32806 12.042 0.751903 10.5489 0.75 9C0.75 8.83424 0.815848 8.67527 0.933058 8.55806C1.05027 8.44085 1.20924 8.375 1.375 8.375C1.54076 8.375 1.69973 8.44085 1.81694 8.55806C1.93415 8.67527 2 8.83424 2 9C2 10.3261 2.52678 11.5979 3.46447 12.5355C4.40215 13.4732 5.67392 14 7 14C8.32608 14 9.59785 13.4732 10.5355 12.5355C11.4732 11.5979 12 10.3261 12 9C12 8.83424 12.0658 8.67527 12.1831 8.55806C12.3003 8.44085 12.4592 8.375 12.625 8.375C12.7908 8.375 12.9497 8.44085 13.0669 8.55806C13.1842 8.67527 13.25 8.83424 13.25 9C13.2481 10.5489 12.6719 12.042 11.6329 13.1907C10.5939 14.3393 9.1659 15.062 7.625 15.2188Z", fill }) });
+var ChatIcon = ({ size = DEFAULT_SIZE, width, height, fill = DEFAULT_FILL, style, testID }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.default, { testID, viewBox: "0 0 18 18", width: width ?? size, height: height ?? size, style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.Path, { d: "M17.1305 13.5905C17.5623 12.6948 17.7742 11.709 17.7486 10.7149C17.7229 9.72084 17.4604 8.74725 16.983 7.87501C16.5055 7.00276 15.8267 6.25704 15.0032 5.69978C14.1796 5.14253 13.2349 4.78982 12.2477 4.67097C11.9192 3.9072 11.4416 3.21664 10.8429 2.63974C10.2442 2.06284 9.53637 1.6112 8.76093 1.31126C7.98549 1.01131 7.158 0.869103 6.32692 0.892953C5.49584 0.916802 4.67787 1.10623 3.9209 1.45015C3.16394 1.79407 2.48321 2.28556 1.91857 2.89584C1.35393 3.50612 0.916724 4.22293 0.632564 5.00429C0.348404 5.78565 0.222999 6.61585 0.263692 7.44628C0.304386 8.27671 0.510359 9.09067 0.869551 9.8405L0.301582 11.771C0.238079 11.9865 0.233833 12.2151 0.289291 12.4328C0.344749 12.6506 0.457861 12.8493 0.616727 13.0082C0.775593 13.167 0.97434 13.2801 1.19206 13.3356C1.40978 13.3911 1.63842 13.3868 1.85393 13.3233L3.7844 12.7553C4.40426 13.0532 5.06884 13.2472 5.75158 13.3296C6.08328 14.1068 6.56914 14.8086 7.17979 15.3927C7.79043 15.9768 8.51318 16.431 9.30434 16.7279C10.0955 17.0247 10.9386 17.158 11.7828 17.1198C12.6269 17.0815 13.4546 16.8725 14.2156 16.5053L16.1461 17.0733C16.3615 17.1367 16.5901 17.141 16.8077 17.0855C17.0253 17.0301 17.224 16.9171 17.3828 16.7583C17.5417 16.5996 17.6548 16.4009 17.7103 16.1834C17.7659 15.9658 17.7618 15.7372 17.6985 15.5218L17.1305 13.5905ZM3.84377 11.4608C3.78404 11.461 3.72463 11.4694 3.66721 11.4858L1.50002 12.1249L2.1383 9.95613C2.1837 9.79944 2.16603 9.63122 2.08908 9.48738C1.5237 8.43002 1.35711 7.2047 1.61968 6.03477C1.88225 4.86485 2.5565 3.82824 3.51951 3.1139C4.48252 2.39957 5.67017 2.05508 6.86595 2.14324C8.06173 2.2314 9.18601 2.74633 10.0339 3.59417C10.8817 4.44201 11.3966 5.5663 11.4848 6.76208C11.5729 7.95786 11.2285 9.1455 10.5141 10.1085C9.79979 11.0715 8.76318 11.7458 7.59325 12.0083C6.42333 12.2709 5.198 12.1043 4.14065 11.5389C4.04972 11.4886 3.94768 11.4618 3.84377 11.4608ZM15.8586 13.7053L16.5 15.8749L14.3313 15.2366C14.1746 15.1912 14.0064 15.2089 13.8625 15.2858C12.7116 15.9004 11.3662 16.0411 10.113 15.678C8.85983 15.3149 7.79803 14.4767 7.15393 13.3421C8.00969 13.2527 8.83776 12.9875 9.58619 12.5631C10.3346 12.1386 10.9873 11.5641 11.5032 10.8755C12.0191 10.1869 12.3871 9.39916 12.5842 8.56163C12.7813 7.72409 12.8032 6.85486 12.6485 6.00847C13.3941 6.18423 14.0893 6.52896 14.6806 7.01605C15.2718 7.50315 15.7432 8.11959 16.0584 8.81779C16.3736 9.51599 16.5242 10.2773 16.4985 11.0429C16.4728 11.8085 16.2715 12.558 15.9102 13.2335C15.8324 13.3782 15.8147 13.5477 15.861 13.7053H15.8586Z", fill }) });
+var RinggAiIcon = ({ size = DEFAULT_SIZE, width, height, style, testID }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native_svg2.default, { testID, viewBox: "0 0 30 31", width: width ?? size, height: height ?? size, style, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.Path, { d: "M2.33836 25.8591C2.32963 26.2022 2.58051 26.4188 2.90888 26.3661C3.15878 26.3258 3.34088 26.1572 3.53558 26.0172C5.34692 24.712 7.32487 23.7335 9.43263 22.9812C11.49 22.2462 13.6568 22.1312 15.7791 21.7671C18.5242 21.2975 21.2954 20.9563 23.9408 20.0257C25.5875 19.4508 27.2002 18.8135 28.687 17.9059C29.0154 17.7056 29.3263 17.444 29.0861 17.0147C28.8459 16.5854 28.5001 16.8498 28.2096 16.9878C26.5697 17.7734 24.87 18.4303 23.1261 18.9525C19.8987 19.9041 16.5637 20.2941 13.2461 20.7685C9.35416 21.3243 5.88451 22.8135 2.77812 25.1768C2.54758 25.355 2.36644 25.5735 2.33836 25.8591Z", fill: "white", stroke: "white", strokeWidth: "0.789474" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.Path, { d: "M29.3604 13.1643C29.3779 12.74 29.0807 12.5106 28.7124 12.6469C28.4429 12.7602 28.1795 12.8874 27.9231 13.028C25.8484 14.0541 23.7055 14.89 21.4164 15.2869C18.4297 15.8082 15.44 16.3139 12.4513 16.8342C8.42668 17.534 4.81134 19.1862 1.53711 21.6097C0.945592 22.0467 0.797471 22.4387 1.04987 22.769C1.30225 23.0992 1.54295 23.0434 2.1861 22.5897C4.52484 20.9364 7.03997 19.6302 9.79484 18.8383C12.5146 18.0544 15.326 17.7437 18.1022 17.2537C20.3523 16.8558 22.6277 16.5903 24.7813 15.7573C26.1914 15.2115 27.5742 14.6117 28.8468 13.7836C29.0914 13.6239 29.337 13.4544 29.3604 13.1643Z", fill: "white", stroke: "white", strokeWidth: "0.789474" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.Path, { d: "M0.837274 18.3214C0.845042 18.7597 1.21893 18.9989 1.61418 18.7901C1.91329 18.6309 2.18423 18.42 2.46975 18.2365C5.45114 16.312 8.6355 14.8964 12.1423 14.2549C15.4966 13.6417 18.8848 13.2171 22.2071 12.435C24.5505 11.8834 26.7773 11.0173 28.8273 9.73247C29.1643 9.5206 29.5401 9.27944 29.2663 8.80787C28.9817 8.31969 28.6089 8.64384 28.2951 8.80299C26.0956 9.93946 23.7939 10.7898 21.3651 11.2565C19.1908 11.6744 17.0115 12.0767 14.8217 12.4057C11.6557 12.8822 8.56555 13.5871 5.67061 15.0145C4.12845 15.7751 2.6397 16.6216 1.26166 17.6565C1.04218 17.8234 0.823671 17.9992 0.837274 18.3214Z", fill: "white", stroke: "white", strokeWidth: "0.789474" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.Path, { d: "M29.1706 5.18743C29.1706 4.74357 28.8611 4.59203 28.3805 4.83058C25.4943 6.26384 22.4515 7.16329 19.2705 7.65507C16.3902 8.0999 13.4972 8.50466 10.6577 9.17338C7.26364 9.97213 4.12157 11.3702 1.29671 13.4487C1.11021 13.5771 0.941662 13.7299 0.795578 13.9033C0.625291 14.1214 0.573716 14.3834 0.784874 14.618C0.996033 14.8527 1.2393 14.8536 1.49133 14.7089C1.68595 14.5955 1.87473 14.4655 2.06155 14.3355C4.21952 12.8555 6.58876 11.7136 9.08819 10.9488C11.6542 10.1452 14.3253 9.90663 16.9487 9.41389C19.3347 8.96611 21.7557 8.70214 24.0717 7.91023C25.6851 7.35785 27.2751 6.7605 28.7181 5.82878C28.9555 5.67627 29.1803 5.51495 29.1706 5.18743Z", fill: "white", stroke: "white", strokeWidth: "0.789474" })
+] });
+
+// src/lib/portable-styles.ts
+var PERCENT = /^-?\d+(\.\d+)?%$/;
+var isPercent = (value) => PERCENT.test(value.trim());
+var toNumber = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  const trimmed = value.trim();
+  const numeric = trimmed.endsWith("px") ? trimmed.slice(0, -2) : trimmed;
+  const parsed = Number(numeric);
+  return Number.isFinite(parsed) && numeric.trim() !== "" ? parsed : void 0;
+};
+var toDimension = (value) => {
+  if (typeof value === "string" && isPercent(value)) return value.trim();
+  return toNumber(value);
+};
+var compact = (style) => {
+  const result = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (value !== void 0) result[key] = value;
+  }
+  return result;
+};
+var toViewStyle = (styles25) => {
+  if (!styles25) return {};
+  return compact({
+    width: toDimension(styles25.width),
+    height: toDimension(styles25.height),
+    // Gradient strings are not valid RN colors — the gradient-aware surfaces
+    // read `theme.primaryColor` through <GradientFill> instead.
+    backgroundColor: typeof styles25.backgroundColor === "string" && !styles25.backgroundColor.includes("(") ? styles25.backgroundColor : void 0,
+    padding: toNumber(styles25.padding),
+    borderRadius: toNumber(styles25.borderRadius)
+  });
+};
+var toSize = (value, fallback) => toNumber(value) ?? fallback;
+
+// src/lib/testing.ts
+var ringgId = (name) => `ringg-${name}`;
+
+// src/lib/widget-theme.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var INHERIT = "inherit";
+var PILL_RADIUS = 9999;
+var WidgetThemeContext = (0, import_react3.createContext)(DEFAULT_WIDGET_THEME);
+var resolveRadius = (value, fallback = 0) => {
+  if (value === void 0) return fallback;
+  const numeric = Number(value.trim().endsWith("px") ? value.trim().slice(0, -2) : value.trim());
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(numeric, PILL_RADIUS);
+};
+var resolveButtonRadius = (style) => resolveRadius(getButtonRadius(style));
+var resolveFontFamily = (fontFamily) => !fontFamily || fontFamily === INHERIT ? void 0 : fontFamily;
+var WidgetThemeProvider = ({ theme, children }) => {
+  const merged = (0, import_react3.useMemo)(() => mergeWidgetTheme(theme), [theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WidgetThemeContext.Provider, { value: merged, children });
+};
+var useWidgetTheme = () => (0, import_react3.useContext)(WidgetThemeContext);
+
+// src/components/ui/pressable.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PRESSED_OPACITY = 0.9;
+var DISABLED_OPACITY = 0.5;
+var DEFAULT_HIT_SLOP = 8;
+var Touchable = ({ onPress, onPressIn, onPressOut, disabled = false, style, testID, accessibilityLabel, hitSlop = DEFAULT_HIT_SLOP, children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  import_react_native2.Pressable,
+  {
+    testID,
+    accessibilityRole: "button",
+    accessibilityLabel,
+    accessibilityState: { disabled },
+    disabled,
+    onPress,
+    onPressIn,
+    onPressOut,
+    hitSlop,
+    style: ({ pressed }) => [style, disabled ? styles2.disabled : pressed ? styles2.pressed : null],
+    children
+  }
+);
+var styles2 = import_react_native2.StyleSheet.create({
+  pressed: { opacity: PRESSED_OPACITY },
+  disabled: { opacity: DISABLED_OPACITY }
+});
+
+// src/components/action-button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ICON_SIZE = 16;
+var CONNECTING_LABEL = "Connecting...";
+var ActionButton = ({ callMode, isLoading, buttonConfig, isCalling, dual = false, onCallTrigger }) => {
+  const theme = useWidgetTheme();
+  const buttonRadius = resolveButtonRadius(theme.buttonStyle);
+  const defaultLabel = callMode === "audio" ? dual ? "Call" : "Start Call" : dual ? "Chat" : "Start Chat";
+  const label = (callMode === "audio" ? buttonConfig?.call?.textBeforeCall : buttonConfig?.text?.textBeforeCall) || defaultLabel;
+  const isConnecting = isLoading === true && callMode === "audio";
+  const widthStyle = dual ? styles3.dual : isCalling ? styles3.compact : styles3.full;
+  const surfaceStyle = dual ? styles3.dualSurface : isCalling ? styles3.compactSurface : styles3.singleSurface;
+  const labelStyle = [styles3.label, dual ? styles3.dualLabel : styles3.singleLabel, { color: theme.primaryTextColor, fontFamily: resolveFontFamily(theme.fontFamily) }];
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Touchable, { testID: ringgId(callMode === "audio" ? "start-call-button" : "start-chat-button"), disabled: isLoading, onPress: () => onCallTrigger(callMode), style: widthStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GradientFill, { color: theme.primaryColor, style: [styles3.surface, surfaceStyle, { borderRadius: buttonRadius }, toViewStyle(buttonConfig?.call?.styles)], children: isConnecting ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.ActivityIndicator, { size: "small", color: theme.primaryTextColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.Text, { style: labelStyle, children: CONNECTING_LABEL })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    callMode === "audio" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneCallRingIcon, { size: ICON_SIZE, fill: theme.primaryTextColor }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatIcon, { size: ICON_SIZE, fill: theme.primaryTextColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.Text, { style: labelStyle, children: label })
+  ] }) }) });
+};
+var action_button_default = ActionButton;
+var styles3 = import_react_native3.StyleSheet.create({
+  dual: { flex: 1 },
+  full: { alignSelf: "stretch" },
+  compact: { alignSelf: "flex-start" },
+  // The layer <GradientFill> paints is absolutely positioned, so it sits out of
+  // this row and the gap only ever spaces the icon from the label.
+  surface: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 },
+  dualSurface: { height: 40 },
+  singleSurface: { height: 44 },
+  compactSurface: { height: 44, paddingHorizontal: 24 },
+  label: { fontWeight: "500" },
+  dualLabel: { fontSize: 15 },
+  // No text-size utility on the web button — it inherits the widget container's
+  // 16px.
+  singleLabel: { fontSize: 16 }
+});
+
+// src/components/call-controls.tsx
+var import_react5 = require("react");
+var import_react_native6 = require("react-native");
+var import_lucide_react_native3 = require("lucide-react-native");
+
+// src/components/message-input.tsx
+var import_react4 = require("react");
+var import_react_native5 = require("react-native");
+var import_lucide_react_native2 = require("lucide-react-native");
+
+// src/lib/slash-command-types.ts
+function filterSlashCommands(commands, query) {
+  if (!query.startsWith("/")) return [];
+  const search = query.slice(1).toLowerCase();
+  if (!search) return commands;
+  return commands.filter(
+    (cmd) => cmd.command.slice(1).toLowerCase().includes(search) || cmd.display_name.toLowerCase().includes(search)
+  );
+}
+
+// src/components/slash-command-menu.tsx
+var import_react_native4 = require("react-native");
+var import_lucide_react_native = require("lucide-react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var LIST_MAX_HEIGHT = 180;
+var ACTIVE_ICON_ALPHA = "18";
+var SIX_DIGIT_HEX = /^#[0-9a-f]{6}$/i;
+var iconBackground = (theme, isActive) => {
+  if (!isActive) return theme.surfaceColor;
+  const primary = solidColor(theme.primaryColor);
+  return SIX_DIGIT_HEX.test(primary) ? `${primary}${ACTIVE_ICON_ALPHA}` : theme.surfaceColor;
+};
+var SlashCommandMenu = ({ commands, activeIndex, theme, onSelect, onActiveIndexChange }) => {
+  if (commands.length === 0) return null;
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const primaryColor = solidColor(theme.primaryColor);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native4.View, { testID: ringgId("slash-command-menu"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { testID: ringgId("slash-command-header"), style: [styles4.header, { borderBottomColor: solidColor(theme.borderColor) }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Text, { testID: ringgId("slash-command-heading"), style: [styles4.heading, { color: theme.mutedTextColor, fontFamily }], children: "Commands" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.ScrollView, { testID: ringgId("slash-command-list"), style: styles4.list, contentContainerStyle: styles4.listContent, keyboardShouldPersistTaps: "handled", children: commands.map((cmd, index) => {
+      const isActive = index === activeIndex;
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        Touchable,
+        {
+          testID: ringgId("slash-command-item"),
+          onPress: () => {
+            onActiveIndexChange(index);
+            onSelect(cmd);
+          },
+          hitSlop: 0,
+          style: [styles4.item, { backgroundColor: isActive ? theme.surfaceColor : "transparent" }],
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { testID: ringgId("slash-command-icon"), style: [styles4.icon, { backgroundColor: iconBackground(theme, isActive) }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react_native.Command, { size: 12, color: primaryColor }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native4.View, { testID: ringgId("slash-command-text"), style: styles4.text, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Text, { testID: ringgId("slash-command-name"), style: [styles4.name, { color: theme.textColor, fontFamily }], children: cmd.display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Text, { testID: ringgId("slash-command-description"), style: [styles4.description, { color: theme.mutedTextColor, fontFamily }], numberOfLines: 1, accessibilityLabel: cmd.description, children: cmd.description })
+            ] })
+          ]
+        },
+        cmd.command
+      );
+    }) })
+  ] });
+};
+var slash_command_menu_default = SlashCommandMenu;
+var styles4 = import_react_native4.StyleSheet.create({
+  header: { paddingHorizontal: 12, paddingVertical: 8, borderBottomWidth: import_react_native4.StyleSheet.hairlineWidth },
+  heading: { fontSize: 10, fontWeight: "500", textTransform: "uppercase", letterSpacing: 0.5 },
+  list: { maxHeight: LIST_MAX_HEIGHT },
+  listContent: { paddingVertical: 4 },
+  item: { flexDirection: "row", alignItems: "flex-start", gap: 10, paddingHorizontal: 12, paddingVertical: 8 },
+  icon: { marginTop: 2, flexShrink: 0, width: 24, height: 24, borderRadius: 6, alignItems: "center", justifyContent: "center" },
+  text: { flex: 1 },
+  name: { fontSize: 12, lineHeight: 16, fontWeight: "500" },
+  description: { fontSize: 10 }
+});
+
+// src/components/message-input.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var INPUT_FONT_SIZE = 15;
+var INPUT_LINE_HEIGHT = 20;
+var MIN_INPUT_HEIGHT = 48;
+var MAX_INPUT_LINES = 4;
+var MAX_INPUT_HEIGHT = MIN_INPUT_HEIGHT + (MAX_INPUT_LINES - 1) * INPUT_LINE_HEIGHT;
+var INPUT_VERTICAL_PADDING = (MIN_INPUT_HEIGHT - INPUT_LINE_HEIGHT) / 2;
+var PILL_RADIUS2 = 9999;
+var MENU_OPEN_RADIUS = 12;
+var SEND_BUTTON_SIZE = 32;
+var clampInputHeight = (height) => Math.min(Math.max(height, MIN_INPUT_HEIGHT), MAX_INPUT_HEIGHT);
+var MessageInput = ({ isSending, enabledSlashCommands, onMessageSubmit, onSlashCommand }) => {
+  const theme = useWidgetTheme();
+  const [message, setMessage] = (0, import_react4.useState)("");
+  const [activeCommandIndex, setActiveCommandIndex] = (0, import_react4.useState)(0);
+  const [inputHeight, setInputHeight] = (0, import_react4.useState)(MIN_INPUT_HEIGHT);
+  const isSlashQuery = message.startsWith("/");
+  const availableCommands = enabledSlashCommands ?? [];
+  const filteredCommands = (0, import_react4.useMemo)(() => {
+    if (!isSlashQuery || availableCommands.length === 0) return [];
+    return filterSlashCommands(availableCommands, message);
+  }, [isSlashQuery, availableCommands, message]);
+  const showMenu = isSlashQuery && filteredCommands.length > 0;
+  const clearDraft = (0, import_react4.useCallback)(() => {
+    setMessage("");
+    setActiveCommandIndex(0);
+    setInputHeight(MIN_INPUT_HEIGHT);
+  }, []);
+  const handleSelectCommand = (0, import_react4.useCallback)(
+    (command) => {
+      if (onSlashCommand) {
+        onSlashCommand(command);
+      } else {
+        onMessageSubmit?.(command.command);
+      }
+      clearDraft();
+    },
+    [clearDraft, onMessageSubmit, onSlashCommand]
+  );
+  const submitDraft = (0, import_react4.useCallback)(() => {
+    if (message.length === 0) return;
+    onMessageSubmit?.(message);
+    clearDraft();
+  }, [clearDraft, message, onMessageSubmit]);
+  const handleSubmitEditing = (0, import_react4.useCallback)(() => {
+    if (!showMenu) {
+      submitDraft();
+      return;
+    }
+    const command = filteredCommands[activeCommandIndex];
+    if (command) handleSelectCommand(command);
+  }, [activeCommandIndex, filteredCommands, handleSelectCommand, showMenu, submitDraft]);
+  const handleChangeText = (0, import_react4.useCallback)((value) => {
+    setMessage(value);
+    setActiveCommandIndex(0);
+  }, []);
+  const handleContentSizeChange = (0, import_react4.useCallback)((event) => {
+    setInputHeight(clampInputHeight(event.nativeEvent.contentSize.height));
+  }, []);
+  const borderColor = solidColor(theme.borderColor);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native5.View, { testID: ringgId("message-input-form"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react_native5.View,
+    {
+      testID: ringgId("message-input"),
+      style: [styles5.container, { backgroundColor: theme.backgroundColor, borderColor, borderRadius: showMenu ? MENU_OPEN_RADIUS : PILL_RADIUS2 }],
+      children: [
+        showMenu ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(slash_command_menu_default, { commands: filteredCommands, activeIndex: activeCommandIndex, theme, onSelect: handleSelectCommand, onActiveIndexChange: setActiveCommandIndex }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native5.View, { testID: ringgId("message-input-row"), style: [styles5.row, showMenu ? { borderTopWidth: import_react_native5.StyleSheet.hairlineWidth, borderTopColor: borderColor } : null], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_native5.TextInput,
+            {
+              testID: ringgId("message-input-field"),
+              value: message,
+              onChangeText: handleChangeText,
+              onContentSizeChange: handleContentSizeChange,
+              onSubmitEditing: handleSubmitEditing,
+              placeholder: availableCommands.length > 0 ? "Type /command..." : "Type here...",
+              placeholderTextColor: theme.mutedTextColor,
+              autoComplete: "off",
+              multiline: true,
+              returnKeyType: "send",
+              submitBehavior: "submit",
+              underlineColorAndroid: "transparent",
+              style: [styles5.input, { height: inputHeight, color: theme.textColor, fontFamily: resolveFontFamily(theme.fontFamily) }]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Touchable, { onPress: submitDraft, disabled: isSending, testID: ringgId("message-send-button"), accessibilityLabel: "Send message", style: styles5.sendButton, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GradientFill, { color: theme.primaryColor, style: styles5.sendButtonSurface, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react_native2.ArrowUp, { size: 16, color: theme.primaryTextColor }) }) })
+        ] })
+      ]
+    }
+  ) });
+};
+var message_input_default = MessageInput;
+var styles5 = import_react_native5.StyleSheet.create({
+  container: { borderWidth: import_react_native5.StyleSheet.hairlineWidth, overflow: "hidden" },
+  row: { flexDirection: "row", alignItems: "flex-end" },
+  input: {
+    flex: 1,
+    fontSize: INPUT_FONT_SIZE,
+    paddingLeft: 20,
+    // 12 here plus the button's 32 and its 4 of margin reproduce web's `pr-12`.
+    paddingRight: 12,
+    paddingVertical: INPUT_VERTICAL_PADDING,
+    // Text grows downward from the top edge instead of re-centring on Android.
+    textAlignVertical: "top"
+  },
+  sendButton: { marginRight: 4, marginBottom: (MIN_INPUT_HEIGHT - SEND_BUTTON_SIZE) / 2 },
+  sendButtonSurface: { width: SEND_BUTTON_SIZE, height: SEND_BUTTON_SIZE, borderRadius: PILL_RADIUS2, alignItems: "center", justifyContent: "center" }
+});
+
+// src/components/call-controls.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ICON_SIZE2 = 20;
+var END_CALL_ICON_COLOR = "#ffffff";
+var AudioControlsView = ({ micEnabled, onToggleMic, buttonConfig, onCallEnd }) => {
+  const theme = useWidgetTheme();
+  const handleCallEndTrigger = () => onCallEnd?.();
+  const micStyles = toViewStyle(buttonConfig?.mic?.styles);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native6.View, { testID: ringgId("call-controls"), style: styles6.row, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Touchable,
+      {
+        testID: ringgId("mute-button"),
+        accessibilityLabel: micEnabled ? "Mute" : "Unmute",
+        onPress: onToggleMic ?? (() => {
+        }),
+        style: [styles6.circle, styles6.muteButton, { backgroundColor: solidColor(theme.backgroundColor), borderColor: solidColor(theme.borderColor) }, micStyles],
+        children: micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MicrophoneIcon, { size: ICON_SIZE2, fill: solidColor(theme.textColor) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react_native3.MicOff, { size: ICON_SIZE2, color: solidColor(theme.textColor) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Touchable,
+      {
+        testID: ringgId("end-call-button"),
+        accessibilityLabel: "End call",
+        onPress: handleCallEndTrigger,
+        style: [styles6.circle, { backgroundColor: solidColor(theme.errorColor) }, micStyles],
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PhoneEndCallIcon, { size: ICON_SIZE2, fill: END_CALL_ICON_COLOR })
+      }
+    )
+  ] });
+};
+var CallControls = ({ isCalling, callMode, buttonConfig, enabledSlashCommands, onSlashCommand, onUserMessage, onCallEnd, onSendMessage, micEnabled = true, onToggleMic }) => {
+  const [isSending, setIsSending] = (0, import_react5.useState)(false);
+  const handleSendMessage = async (message) => {
+    onUserMessage?.();
+    setIsSending(true);
+    try {
+      await onSendMessage?.(message);
+    } finally {
+      setIsSending(false);
+    }
+  };
+  if (!isCalling) return null;
+  switch (callMode) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(message_input_default, { isSending, enabledSlashCommands, onMessageSubmit: handleSendMessage, onSlashCommand });
+    case "audio":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AudioControlsView, { micEnabled, onToggleMic, buttonConfig, onCallEnd });
+    default:
+      return null;
+  }
+};
+var call_controls_default = CallControls;
+var styles6 = import_react_native6.StyleSheet.create({
+  row: { flexDirection: "row", width: "100%", justifyContent: "center", alignItems: "center", gap: 24 },
+  circle: { height: 48, width: 48, borderRadius: 9999, alignItems: "center", justifyContent: "center" },
+  muteButton: { borderWidth: 1 }
+});
+
+// src/components/feedback-screen.tsx
+var import_react15 = require("react");
+var import_react_native17 = require("react-native");
+var import_react_native_svg4 = __toESM(require("react-native-svg"));
+
+// src/components/header.tsx
+var import_react6 = require("react");
+var import_react_native7 = require("react-native");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var INTRO_MARK_SIZE = 32;
+var CALLING_MARK_SIZE = 18;
+var PULSE_MIN_OPACITY = 0.5;
+var PULSE_HALF_CYCLE_MS = 1e3;
+var PULSE_EASING = import_react_native7.Easing.bezier(0.4, 0, 0.6, 1);
+var SCRIM_OPACITY = 0.96;
+var HeaderLogo = ({ logoUrl, logoStyles, style, markSize }) => {
+  const theme = useWidgetTheme();
+  return (
+    // <GradientFill> owns the painted node, so the contract testID rides on a
+    // wrapper that shrink-wraps the tile and centres it on the cross axis (the
+    // intro's `mx-auto`; a no-op inside the already-centred calling row).
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { testID: ringgId("header-logo"), style: styles7.logoSlot, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GradientFill, { color: theme.primaryColor, style: [styles7.logo, style, toViewStyle(logoStyles)], children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.Image, { testID: ringgId("header-logo-image"), accessibilityLabel: "Logo", source: { uri: logoUrl }, resizeMode: "contain", style: styles7.logoImage }) : (
+      // Nothing is bundled here (web inlines its default logo as a data URI
+      // at build time), so the brand mark stands in until an integrator
+      // supplies logoUrl.
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { testID: ringgId("header-logo-image"), style: styles7.logoMark, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RinggAiIcon, { size: markSize }) })
+    ) }) })
+  );
+};
+var StatusDot = ({ isLoading, color }) => {
+  const pulse = (0, import_react6.useRef)(new import_react_native7.Animated.Value(1)).current;
+  (0, import_react6.useEffect)(() => {
+    if (!isLoading) {
+      pulse.setValue(1);
+      return;
+    }
+    const loop = import_react_native7.Animated.loop(
+      import_react_native7.Animated.sequence([
+        import_react_native7.Animated.timing(pulse, { toValue: PULSE_MIN_OPACITY, duration: PULSE_HALF_CYCLE_MS, easing: PULSE_EASING, useNativeDriver: true }),
+        import_react_native7.Animated.timing(pulse, { toValue: 1, duration: PULSE_HALF_CYCLE_MS, easing: PULSE_EASING, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [isLoading, pulse]);
+  return (
+    // Web carries the connecting flag as a second `data-ringg-connecting`
+    // attribute; RN has no attribute namespace, so the machine-readable half
+    // becomes `busy` and the colour carries the visual half.
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.Animated.View, { testID: ringgId("header-status-dot"), accessibilityState: { busy: isLoading }, style: [styles7.statusDot, { backgroundColor: color, opacity: pulse }] })
+  );
+};
+var Header = ({ isCalling, isLoading, title, description, logoUrl, logoStyles }) => {
+  const theme = useWidgetTheme();
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  if (!isCalling)
+    return (
+      // flex-1 + centring: the logo/title/description block floats in the
+      // panel's free space so the start buttons and legal text sit low.
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native7.View, { testID: ringgId("intro"), style: styles7.intro, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderLogo, { logoUrl, logoStyles, style: styles7.introLogo, markSize: INTRO_MARK_SIZE }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native7.View, { testID: ringgId("header-text"), style: styles7.introText, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.Text, { testID: ringgId("header-title"), accessibilityRole: "header", style: [styles7.introTitle, { color: theme.textColor, fontFamily }], children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.Text, { testID: ringgId("header-description"), style: [styles7.introDescription, { color: theme.mutedTextColor, fontFamily }], children: description }) : null
+        ] })
+      ] })
+    );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_react_native7.View,
+    {
+      testID: ringgId("header"),
+      accessibilityLabel: isLoading ? "Calling..." : "Call in Progress",
+      accessibilityLiveRegion: "polite",
+      style: styles7.header,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { pointerEvents: "none", style: [import_react_native7.StyleSheet.absoluteFill, styles7.scrim, { backgroundColor: solidColor(theme.backgroundColor) }] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderLogo, { logoUrl, logoStyles, style: styles7.callingLogo, markSize: CALLING_MARK_SIZE }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native7.View, { testID: ringgId("header-text"), style: styles7.headerText, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native7.View, { style: styles7.headerTitleRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.Text, { testID: ringgId("header-title"), accessibilityRole: "header", numberOfLines: 1, style: [styles7.callingTitle, { color: theme.textColor, fontFamily }], children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatusDot, { isLoading, color: solidColor(isLoading ? theme.mutedTextColor : theme.successColor) })
+          ] }),
+          description ? (
+            // Truncated on screen; web exposes the full string through a `title`
+            // tooltip, which here is the accessibility label.
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.Text, { testID: ringgId("header-description"), accessibilityLabel: description, numberOfLines: 1, style: [styles7.callingDescription, { color: theme.mutedTextColor, fontFamily }], children: description })
+          ) : null
+        ] })
+      ]
+    }
+  );
+};
+var header_default = Header;
+var styles7 = import_react_native7.StyleSheet.create({
+  intro: { flex: 1, justifyContent: "center", gap: 16 },
+  introLogo: { width: 64, height: 64, borderRadius: 16 },
+  introText: { gap: 4 },
+  introTitle: { fontSize: 17, fontWeight: "500", textAlign: "center" },
+  // `leading-snug` (1.375) at 14px.
+  introDescription: { fontSize: 14, lineHeight: 19, fontWeight: "400", textAlign: "center", maxWidth: 210, alignSelf: "center" },
+  header: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: 10,
+    paddingVertical: 12,
+    paddingLeft: 20,
+    // Clears the absolute minimize/close chrome so header content — including
+    // integrator-injected brand text — never slides under it.
+    paddingRight: 76
+  },
+  scrim: { opacity: SCRIM_OPACITY },
+  callingLogo: { width: 36, height: 36, borderRadius: 12 },
+  headerText: { flexShrink: 1 },
+  headerTitleRow: { flexDirection: "row", alignItems: "center", gap: 8 },
+  // flexShrink lets the title truncate instead of pushing the dot out of view.
+  callingTitle: { fontSize: 15, fontWeight: "600", flexShrink: 1 },
+  callingDescription: { fontSize: 13, fontWeight: "400" },
+  statusDot: { width: 6, height: 6, borderRadius: 3, flexShrink: 0 },
+  logoSlot: { alignSelf: "center", flexShrink: 0 },
+  logo: { alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  logoImage: { width: "100%", height: "100%" },
+  logoMark: { alignItems: "center", justifyContent: "center" }
+});
+
+// src/components/interactive-flow.tsx
+var import_react12 = require("react");
+var import_react_native13 = require("react-native");
+var import_lucide_react_native8 = require("lucide-react-native");
+
+// src/lib/component-types.ts
+function groupSlotsByDate(slots) {
+  const grouped = /* @__PURE__ */ new Map();
+  slots.forEach((slot) => {
+    const date = new Date(slot.datetime);
+    const dateKey = date.toISOString().split("T")[0] ?? "";
+    if (!grouped.has(dateKey)) {
+      grouped.set(dateKey, []);
+    }
+    grouped.get(dateKey).push(slot);
+  });
+  return Array.from(grouped.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([dateKey, dateSlots]) => {
+    const date = new Date(dateKey);
+    return {
+      date: dateKey,
+      dateLabel: date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }),
+      slots: dateSlots.sort((a, b) => new Date(a.datetime).getTime() - new Date(b.datetime).getTime())
+    };
+  });
+}
+function formatSlotTime(datetime, timezone) {
+  const date = new Date(datetime);
+  return date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone
+  });
+}
+function formatSlotDate(datetime, timezone) {
+  const date = new Date(datetime);
+  return date.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    timeZone: timezone
+  });
+}
+function buildPayload(template, values) {
+  const result = {};
+  for (const [key, value] of Object.entries(template)) {
+    if (typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
+      const placeholder = value.slice(1, -1);
+      result[key] = values[placeholder] ?? value;
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function isButtons(payload) {
+  return payload.component_type === "buttons";
+}
+function isInteractiveFlow(payload) {
+  return payload.component_type === "interactive_flow";
+}
+function isBlocks(payload) {
+  return payload.component_type === "blocks";
+}
+
+// src/lib/theme-utils.ts
+var DEFAULT_THEME = {
+  primaryColor: "#0a0a0b",
+  primaryTextColor: "#ffffff",
+  backgroundColor: "#ffffff",
+  surfaceColor: "#f3f4f6",
+  textColor: "#0a0a0b",
+  mutedTextColor: "#6b7280",
+  borderColor: "#e5e7eb",
+  errorColor: "#ef4444",
+  successColor: "#16a34a",
+  fontFamily: "inherit",
+  fontSize: "14px",
+  borderRadius: "8px",
+  padding: "12px",
+  buttonStyle: "pill",
+  buttonSize: "md"
+};
+var PILL_RADIUS3 = 9999;
+var mergeTheme = (theme) => ({ ...DEFAULT_THEME, ...theme });
+var toNumber2 = (value, fallback) => {
+  if (value === void 0) return fallback;
+  const trimmed = value.trim();
+  const parsed = Number(trimmed.endsWith("px") ? trimmed.slice(0, -2) : trimmed);
+  return Number.isFinite(parsed) ? parsed : fallback;
+};
+var getButtonRadius2 = (style) => {
+  switch (style) {
+    case "pill":
+      return PILL_RADIUS3;
+    case "square":
+      return 4;
+    case "rounded":
+    default:
+      return 8;
+  }
+};
+
+// src/components/steps/buttons-step.tsx
+var import_react7 = require("react");
+var import_react_native8 = require("react-native");
+var import_lucide_react_native4 = require("lucide-react-native");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SPIN_DURATION_MS = 1e3;
+var Spinner = ({ size, color }) => {
+  const rotation = (0, import_react7.useRef)(new import_react_native8.Animated.Value(0)).current;
+  (0, import_react7.useEffect)(() => {
+    const animation = import_react_native8.Animated.loop(import_react_native8.Animated.timing(rotation, { toValue: 1, duration: SPIN_DURATION_MS, easing: import_react_native8.Easing.linear, useNativeDriver: true }));
+    animation.start();
+    return () => animation.stop();
+  }, [rotation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Animated.View, { style: { transform: [{ rotate: rotation.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react_native4.LoaderCircle, { size, color }) });
+};
+var buttonSurface = (theme, style) => {
+  switch (style) {
+    case "secondary":
+    case "outline":
+      return { background: theme.surfaceColor, foreground: theme.textColor };
+    case "destructive":
+      return { background: theme.errorColor, foreground: theme.primaryTextColor };
+    case "primary":
+    default:
+      return { background: theme.primaryColor, foreground: theme.primaryTextColor };
+  }
+};
+var ButtonsStep = ({ payload, isProcessing, align = "end", onButtonClick }) => {
+  const widgetTheme = useWidgetTheme();
+  const theme = (0, import_react7.useMemo)(
+    () => mergeTheme({
+      primaryColor: widgetTheme.primaryColor,
+      primaryTextColor: widgetTheme.primaryTextColor,
+      backgroundColor: widgetTheme.backgroundColor,
+      surfaceColor: widgetTheme.surfaceColor,
+      textColor: widgetTheme.textColor,
+      mutedTextColor: widgetTheme.mutedTextColor,
+      borderColor: widgetTheme.borderColor,
+      ...payload.theme
+    }),
+    [payload.theme, widgetTheme]
+  );
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const { data } = payload;
+  const isFreePresentation = data.presentation === "free";
+  const [loadingButtonId, setLoadingButtonId] = (0, import_react7.useState)(null);
+  const handleClick = async (button) => {
+    if (button.action.type === "navigate") {
+      onButtonClick(button.id, button.action);
+      return;
+    }
+    setLoadingButtonId(button.id);
+    try {
+      await onButtonClick(button.id, button.action);
+    } finally {
+      setLoadingButtonId(null);
+    }
+  };
+  const title = data.title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { testID: ringgId("buttons-step-title"), style: [styles8.title, { color: theme.textColor, fontFamily }], children: data.title }) : null;
+  if (isFreePresentation) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { testID: ringgId("quick-replies"), style: styles8.root, children: [
+      title,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: [styles8.chipRow, align === "center" ? styles8.alignCenter : styles8.alignEnd], children: data.buttons.map((button) => {
+        const isLoading = loadingButtonId === button.id;
+        const isNavigate = button.action.type === "navigate";
+        const isDisabled = isLoading || isProcessing;
+        const surface = buttonSurface(theme, button.style);
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Touchable, { testID: ringgId("quick-reply-button"), accessibilityLabel: button.label, disabled: isDisabled, onPress: () => void handleClick(button), style: styles8.chip, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(GradientFill, { color: surface.background, style: import_react_native8.StyleSheet.absoluteFill }),
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: 12, color: solidColor(surface.foreground) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { style: [styles8.chipLabel, { color: surface.foreground, fontFamily }], children: button.label }),
+          isNavigate ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react_native4.ExternalLink, { size: 12, color: solidColor(surface.foreground) }) : null
+        ] }, button.id);
+      }) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { children: [
+    title,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { testID: ringgId("options-list"), style: styles8.optionsList, children: data.buttons.map((button, index) => {
+      const isLoading = loadingButtonId === button.id;
+      const isNavigate = button.action.type === "navigate";
+      const isDisabled = isLoading || isProcessing;
+      const isDestructive = button.style === "destructive";
+      const isLastRow = index === data.buttons.length - 1;
+      const labelColor = isDestructive ? theme.errorColor : theme.textColor;
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        Touchable,
+        {
+          testID: ringgId("option-row"),
+          accessibilityLabel: button.label,
+          disabled: isDisabled,
+          onPress: () => void handleClick(button),
+          hitSlop: 0,
+          style: [styles8.optionRow, isLastRow ? null : { borderBottomWidth: import_react_native8.StyleSheet.hairlineWidth, borderBottomColor: solidColor(theme.borderColor) }],
+          children: [
+            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: 16, color: solidColor(labelColor) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { testID: ringgId("option-radio"), accessibilityElementsHidden: true, importantForAccessibility: "no", style: [styles8.optionRadio, { borderColor: solidColor(theme.mutedTextColor) }] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { style: [styles8.optionLabel, { color: labelColor, fontFamily }], children: button.label }),
+            isNavigate ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react_native4.ExternalLink, { size: 14, color: solidColor(labelColor) }) : null
+          ]
+        },
+        button.id
+      );
+    }) })
+  ] });
+};
+var buttons_step_default = ButtonsStep;
+var styles8 = import_react_native8.StyleSheet.create({
+  root: { width: "100%" },
+  title: { fontSize: 14, lineHeight: 20, fontWeight: "500", marginBottom: 8 },
+  chipRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  alignCenter: { justifyContent: "center" },
+  alignEnd: { justifyContent: "flex-end" },
+  // `flexShrink` is 1 by default on web and 0 in RN, so a chip wide enough to
+  // fill the row has to be told it may shrink or it overflows the panel.
+  chip: { flexDirection: "row", alignItems: "center", gap: 6, height: 36, paddingHorizontal: 16, borderRadius: 9999, flexShrink: 1, overflow: "hidden" },
+  chipLabel: { flexShrink: 1, fontSize: 15, fontWeight: "500" },
+  optionsList: { flexDirection: "column" },
+  optionRow: { flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 8, paddingVertical: 12 },
+  optionRadio: { width: 16, height: 16, borderRadius: 9999, borderWidth: 1, flexShrink: 0 },
+  optionLabel: { flex: 1, fontSize: 15 }
+});
+
+// src/components/steps/calendar-step.tsx
+var import_react8 = require("react");
+var import_react_native9 = require("react-native");
+var import_lucide_react_native5 = require("lucide-react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SPIN_DURATION_MS2 = 1e3;
+var SLOT_FADE_MS = 200;
+var SLOT_GUTTER = 6;
+var DATE_HIT_SLOP = 4;
+var SLOT_HIT_SLOP = SLOT_GUTTER / 2;
+var useStepTheme = (componentTheme) => {
+  const widgetTheme = useWidgetTheme();
+  return (0, import_react8.useMemo)(
+    () => mergeTheme({
+      primaryColor: widgetTheme.primaryColor,
+      primaryTextColor: widgetTheme.primaryTextColor,
+      // Cards read as bordered surfaces sitting ON the panel, so they take
+      // the widget background rather than the (greyer) surface colour.
+      backgroundColor: widgetTheme.backgroundColor,
+      surfaceColor: widgetTheme.surfaceColor,
+      textColor: widgetTheme.textColor,
+      mutedTextColor: widgetTheme.mutedTextColor,
+      borderColor: widgetTheme.borderColor,
+      errorColor: widgetTheme.errorColor,
+      successColor: widgetTheme.successColor,
+      buttonStyle: widgetTheme.buttonStyle,
+      // Web inherits the family from the flow container; RN has no cascade,
+      // so it travels through the theme and is applied per <Text>.
+      fontFamily: widgetTheme.fontFamily,
+      ...componentTheme
+    }),
+    [componentTheme, widgetTheme]
+  );
+};
+var Spinner2 = ({ color }) => {
+  const turn = (0, import_react8.useRef)(new import_react_native9.Animated.Value(0)).current;
+  (0, import_react8.useEffect)(() => {
+    const loop = import_react_native9.Animated.loop(import_react_native9.Animated.timing(turn, { toValue: 1, duration: SPIN_DURATION_MS2, easing: import_react_native9.Easing.linear, useNativeDriver: true }));
+    loop.start();
+    return () => loop.stop();
+  }, [turn]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Animated.View, { style: { transform: [{ rotate: turn.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native5.LoaderCircle, { size: 16, color }) });
+};
+var CalendarStep = ({ payload, isProcessing, onComplete }) => {
+  const theme = useStepTheme(payload.theme);
+  const buttonRadius = getButtonRadius2(theme.buttonStyle);
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const { data } = payload;
+  const groupedSlots = (0, import_react8.useMemo)(() => groupSlotsByDate(data.available_slots), [data.available_slots]);
+  const [selectedDate, setSelectedDate] = (0, import_react8.useState)(groupedSlots[0]?.date || "");
+  const [selectedSlot, setSelectedSlot] = (0, import_react8.useState)(null);
+  const selectedDateGroup = groupedSlots.find((g) => g.date === selectedDate);
+  const slotFade = (0, import_react8.useRef)(new import_react_native9.Animated.Value(0)).current;
+  (0, import_react8.useLayoutEffect)(() => {
+    slotFade.setValue(0);
+    const fade = import_react_native9.Animated.timing(slotFade, { toValue: 1, duration: SLOT_FADE_MS, useNativeDriver: true });
+    fade.start();
+    return () => fade.stop();
+  }, [selectedDate, slotFade]);
+  const handleConfirm = () => {
+    if (selectedSlot) {
+      onComplete(selectedSlot.id, selectedSlot.datetime);
+    }
+  };
+  const isConfirmDisabled = !selectedSlot || isProcessing;
+  const confirmTextColor = isConfirmDisabled ? theme.mutedTextColor : theme.primaryTextColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.View, { style: styles9.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native5.Calendar, { size: 16, color: solidColor(theme.primaryColor) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Text, { style: [styles9.title, { color: theme.textColor, fontFamily }], children: data.title })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.Text, { style: [styles9.timezone, { color: theme.mutedTextColor, fontFamily }], children: [
+      "Timezone: ",
+      data.timezone
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.View, { style: styles9.section, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Text, { style: [styles9.sectionLabel, styles9.sectionLabelSpacing, { color: theme.mutedTextColor, fontFamily }], children: "Select Date" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: styles9.dateRow, children: groupedSlots.map((group) => {
+        const isSelected = selectedDate === group.date;
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Touchable,
+          {
+            hitSlop: DATE_HIT_SLOP,
+            onPress: () => {
+              setSelectedDate(group.date);
+              setSelectedSlot(null);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              GradientFill,
+              {
+                color: isSelected ? theme.primaryColor : theme.backgroundColor,
+                style: [styles9.dateChip, { borderRadius: buttonRadius }, isSelected ? styles9.selectedShadow : { borderWidth: 1, borderColor: theme.borderColor }],
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Text, { style: [styles9.dateChipLabel, { color: isSelected ? theme.primaryTextColor : theme.textColor, fontFamily }], children: group.dateLabel })
+              }
+            )
+          },
+          group.date
+        );
+      }) })
+    ] }),
+    selectedDateGroup ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.Animated.View, { style: [styles9.section, { opacity: slotFade }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.View, { style: styles9.sectionLabelRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native5.Clock, { size: 12, color: theme.mutedTextColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Text, { style: [styles9.sectionLabel, { color: theme.mutedTextColor, fontFamily }], children: "Select Time" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: styles9.slotGrid, children: selectedDateGroup.slots.map((slot) => {
+        const isSelected = selectedSlot?.id === slot.id;
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: styles9.slotCell, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Touchable, { hitSlop: SLOT_HIT_SLOP, onPress: () => setSelectedSlot(slot), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          GradientFill,
+          {
+            color: isSelected ? theme.primaryColor : theme.backgroundColor,
+            style: [styles9.slot, { borderRadius: buttonRadius, borderColor: isSelected ? solidColor(theme.primaryColor) : theme.borderColor }, isSelected ? styles9.selectedShadow : null],
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Text, { style: [styles9.slotLabel, { color: isSelected ? theme.primaryTextColor : theme.textColor, fontFamily }], numberOfLines: 1, children: formatSlotTime(slot.datetime, data.timezone) })
+          }
+        ) }) }, slot.id);
+      }) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Touchable, { onPress: handleConfirm, disabled: isConfirmDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(GradientFill, { color: isConfirmDisabled ? theme.borderColor : theme.primaryColor, style: [styles9.confirmButton, { borderRadius: buttonRadius }], children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner2, { color: confirmTextColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Text, { style: [styles9.confirmLabel, { color: confirmTextColor, fontFamily }], children: "Processing..." })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Text, { style: [styles9.confirmLabel, { color: confirmTextColor, fontFamily }], children: "Next" }) }) })
+  ] });
+};
+var styles9 = import_react_native9.StyleSheet.create({
+  header: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 12 },
+  title: { fontSize: 14, lineHeight: 20, fontWeight: "500" },
+  timezone: { fontSize: 12, lineHeight: 16, marginBottom: 12 },
+  section: { marginBottom: 12 },
+  sectionLabel: { fontSize: 12, lineHeight: 16, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.3 },
+  sectionLabelSpacing: { marginBottom: 8 },
+  sectionLabelRow: { flexDirection: "row", alignItems: "center", gap: 4, marginBottom: 8 },
+  dateRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  dateChip: { paddingHorizontal: 12, paddingVertical: 8, alignItems: "center", justifyContent: "center" },
+  dateChipLabel: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
+  // Web's `0 2px 4px rgba(0,0,0,0.1)` on the chosen chip, in both platforms' terms.
+  selectedShadow: { shadowColor: "#000000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2 },
+  // Three equal columns with `SLOT_GUTTER` between them: each cell pads half a
+  // gutter per side and the row pulls that padding back off its outer edges.
+  slotGrid: { flexDirection: "row", flexWrap: "wrap", rowGap: SLOT_GUTTER, marginHorizontal: -SLOT_GUTTER / 2 },
+  slotCell: { width: "33.3333%", paddingHorizontal: SLOT_GUTTER / 2 },
+  slot: { paddingHorizontal: 8, paddingVertical: 8, alignItems: "center", justifyContent: "center", borderWidth: 1 },
+  slotLabel: { fontSize: 12, lineHeight: 16, fontWeight: "500" },
+  confirmButton: { height: 36, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 },
+  confirmLabel: { fontSize: 14, lineHeight: 20, fontWeight: "600" }
+});
+var calendar_step_default = CalendarStep;
+
+// src/components/steps/confirmation-step.tsx
+var import_react9 = require("react");
+var import_react_native10 = require("react-native");
+var import_lucide_react_native6 = require("lucide-react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ENTER_DURATION_MS = 300;
+var TITLE_DELAY_MS = 100;
+var DETAILS_DELAY_MS = 150;
+var WARNING_COLOR = "#f59e0b";
+var GLYPH_COLOR = "#ffffff";
+var PRIORITY_KEYS = ["slot_date", "slot_time", "name", "email", "phone"];
+var MAX_DETAILS = 4;
+var useEnter = (delayMs = 0) => {
+  const progress = (0, import_react9.useRef)(new import_react_native10.Animated.Value(0)).current;
+  (0, import_react9.useEffect)(() => {
+    import_react_native10.Animated.timing(progress, { toValue: 1, duration: ENTER_DURATION_MS, delay: delayMs, useNativeDriver: true }).start();
+  }, [delayMs, progress]);
+  return progress;
+};
+var usePop = () => {
+  const scale = (0, import_react9.useRef)(new import_react_native10.Animated.Value(0)).current;
+  (0, import_react9.useEffect)(() => {
+    import_react_native10.Animated.spring(scale, { toValue: 1, stiffness: 400, damping: 15, mass: 1, useNativeDriver: true }).start();
+  }, [scale]);
+  return scale;
+};
+var formatValue = (value) => {
+  if (Array.isArray(value)) return value.join(", ");
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return String(value);
+};
+var getDetailIcon = (key) => {
+  if (!key) return null;
+  if (key.includes("date")) return import_lucide_react_native6.Calendar;
+  if (key.includes("time")) return import_lucide_react_native6.Clock;
+  if (key.includes("email")) return import_lucide_react_native6.Mail;
+  if (key.includes("name")) return import_lucide_react_native6.User;
+  return null;
+};
+var ConfirmationStep = ({ data, collectedData }) => {
+  const widgetTheme = useWidgetTheme();
+  const theme = mergeTheme({
+    primaryColor: widgetTheme.primaryColor,
+    primaryTextColor: widgetTheme.primaryTextColor,
+    backgroundColor: widgetTheme.backgroundColor,
+    surfaceColor: widgetTheme.surfaceColor,
+    textColor: widgetTheme.textColor,
+    mutedTextColor: widgetTheme.mutedTextColor,
+    borderColor: widgetTheme.borderColor
+  });
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const cardProgress = useEnter();
+  const glyphScale = usePop();
+  const titleProgress = useEnter(TITLE_DELAY_MS);
+  const detailsProgress = useEnter(DETAILS_DELAY_MS);
+  const iconType = data.icon || "success";
+  const getIconConfig = () => {
+    switch (iconType) {
+      case "success":
+        return { icon: import_lucide_react_native6.Check, bgColor: theme.successColor };
+      case "info":
+        return { icon: import_lucide_react_native6.Info, bgColor: theme.primaryColor };
+      case "warning":
+        return { icon: import_lucide_react_native6.TriangleAlert, bgColor: WARNING_COLOR };
+      case "error":
+        return { icon: import_lucide_react_native6.CircleX, bgColor: theme.errorColor };
+      default:
+        return { icon: import_lucide_react_native6.Check, bgColor: theme.successColor };
+    }
+  };
+  const { icon: Icon, bgColor } = getIconConfig();
+  const displayDetails = data.details || [];
+  const formattedCollectedData = collectedData ? Object.entries(collectedData).filter(([key]) => PRIORITY_KEYS.includes(key)).sort((a, b) => PRIORITY_KEYS.indexOf(a[0]) - PRIORITY_KEYS.indexOf(b[0])).map(([key, value]) => ({
+    key,
+    label: key.replace(/slot_/g, "").replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+    value: formatValue(value)
+  })) : [];
+  const detailsToShow = displayDetails.length > 0 ? displayDetails : formattedCollectedData;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native10.Animated.View, { style: [styles10.root, { opacity: cardProgress }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native10.View, { style: styles10.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native10.Animated.View, { style: [styles10.glyph, { transform: [{ scale: glyphScale }] }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GradientFill, { color: bgColor, style: import_react_native10.StyleSheet.absoluteFill }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { size: 18, color: GLYPH_COLOR })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native10.Animated.View, { style: [styles10.headerText, { opacity: titleProgress, transform: [{ translateX: titleProgress.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }] }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Text, { style: [styles10.title, { color: theme.textColor, fontFamily }], children: data.title }),
+        data.message ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Text, { style: [styles10.message, { color: theme.mutedTextColor, fontFamily }], children: data.message }) : null
+      ] })
+    ] }),
+    detailsToShow.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Animated.View, { style: [styles10.details, { backgroundColor: theme.surfaceColor, opacity: detailsProgress, transform: [{ translateY: detailsProgress.interpolate({ inputRange: [0, 1], outputRange: [8, 0] }) }] }], children: detailsToShow.slice(0, MAX_DETAILS).map((detail, index) => {
+      const DetailIcon = detail.key ? getDetailIcon(detail.key) : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native10.View, { style: [styles10.detailRow, index === 0 ? null : { borderTopWidth: import_react_native10.StyleSheet.hairlineWidth, borderTopColor: solidColor(theme.borderColor) }], children: [
+        DetailIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DetailIcon, { size: 14, color: solidColor(theme.mutedTextColor) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Text, { style: [styles10.detailLabel, { color: theme.mutedTextColor, fontFamily }], children: detail.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Text, { numberOfLines: 1, accessibilityLabel: detail.value, style: [styles10.detailValue, { color: theme.textColor, fontFamily }], children: detail.value })
+      ] }, index);
+    }) })
+  ] });
+};
+var confirmation_step_default = ConfirmationStep;
+var styles10 = import_react_native10.StyleSheet.create({
+  root: { paddingVertical: 8 },
+  header: { flexDirection: "row", alignItems: "flex-start", gap: 12, marginBottom: 16 },
+  glyph: { width: 36, height: 36, borderRadius: 9999, alignItems: "center", justifyContent: "center", flexShrink: 0, overflow: "hidden" },
+  headerText: { flex: 1, paddingTop: 2 },
+  title: { fontSize: 14, lineHeight: 17.5, fontWeight: "600" },
+  message: { fontSize: 12, lineHeight: 19.5, marginTop: 4 },
+  details: { borderRadius: 8, overflow: "hidden" },
+  detailRow: { flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 12, paddingVertical: 10 },
+  detailLabel: { fontSize: 12, lineHeight: 16, flexShrink: 0 },
+  // `ml-auto` — pushes the value to the trailing edge, and lets it truncate
+  // rather than shove the label out of the row.
+  detailValue: { fontSize: 12, lineHeight: 16, fontWeight: "500", marginLeft: "auto", flexShrink: 1 }
+});
+
+// src/components/steps/form-step.tsx
+var import_react10 = require("react");
+var import_react_native11 = require("react-native");
+var import_lucide_react_native7 = require("lucide-react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SPIN_DURATION_MS3 = 1e3;
+var FIELD_RADIUS_FALLBACK = 8;
+var OPTION_HIT_SLOP = 3;
+var fieldIcons = {
+  text: import_lucide_react_native7.Type,
+  email: import_lucide_react_native7.Mail,
+  tel: import_lucide_react_native7.Phone,
+  number: import_lucide_react_native7.Type,
+  select: import_lucide_react_native7.ChevronDown,
+  multiselect: import_lucide_react_native7.List,
+  textarea: import_lucide_react_native7.FileText,
+  boolean: import_lucide_react_native7.SquareCheckBig,
+  date: import_lucide_react_native7.Calendar
+};
+var useStepTheme2 = (componentTheme) => {
+  const widgetTheme = useWidgetTheme();
+  return (0, import_react10.useMemo)(
+    () => mergeTheme({
+      primaryColor: widgetTheme.primaryColor,
+      primaryTextColor: widgetTheme.primaryTextColor,
+      // Cards read as bordered surfaces sitting ON the panel, so they take
+      // the widget background rather than the (greyer) surface colour.
+      backgroundColor: widgetTheme.backgroundColor,
+      surfaceColor: widgetTheme.surfaceColor,
+      textColor: widgetTheme.textColor,
+      mutedTextColor: widgetTheme.mutedTextColor,
+      borderColor: widgetTheme.borderColor,
+      errorColor: widgetTheme.errorColor,
+      successColor: widgetTheme.successColor,
+      buttonStyle: widgetTheme.buttonStyle,
+      // Web inherits the family from the flow container; RN has no cascade,
+      // so it travels through the theme and is applied per <Text>.
+      fontFamily: widgetTheme.fontFamily,
+      ...componentTheme
+    }),
+    [componentTheme, widgetTheme]
+  );
+};
+var getOptionLabel = (option) => typeof option === "string" ? option : option.label;
+var getOptionValue = (option) => typeof option === "string" ? option : option.value;
+var placeholderFor = (field) => field.placeholder || `Enter ${field.label.toLowerCase()}`;
+var textInputTraits = (type) => {
+  switch (type) {
+    case "email":
+      return { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false };
+    case "tel":
+      return { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false };
+    // No picker without a dependency, so a date is typed. The punctuation
+    // keyboard at least puts `-` and `/` on the first layer.
+    case "date":
+      return { keyboardType: "numbers-and-punctuation", autoCapitalize: "none", autoCorrect: false };
+    default:
+      return { keyboardType: "default", autoCapitalize: "sentences", autoCorrect: true };
+  }
+};
+var inputSurface = (theme, hasError, isFocused) => ({
+  backgroundColor: theme.backgroundColor,
+  borderWidth: 1,
+  // Web draws a 2px focus ring, which RN has no equivalent for, so the border
+  // itself carries focus. An error outranks it — it is the more urgent signal.
+  borderColor: hasError ? theme.errorColor : isFocused ? solidColor(theme.primaryColor) : theme.borderColor,
+  // Fields follow the card radius, not the button radius — pill-shaped
+  // textareas read badly.
+  borderRadius: toNumber2(theme.borderRadius, FIELD_RADIUS_FALLBACK)
+});
+var validateField = (field, value) => {
+  if (field.required) {
+    if (value === void 0 || value === null || value === "") {
+      return `${field.label} is required`;
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return `${field.label} is required`;
+    }
+    if (typeof value === "string" && !value.trim()) {
+      return `${field.label} is required`;
+    }
+  }
+  if (typeof value === "string" && value) {
+    if (field.validation) {
+      if (field.validation.minLength && value.length < field.validation.minLength) {
+        return field.validation.message || `${field.label} must be at least ${field.validation.minLength} characters`;
+      }
+      if (field.validation.maxLength && value.length > field.validation.maxLength) {
+        return field.validation.message || `${field.label} must be at most ${field.validation.maxLength} characters`;
+      }
+      if (field.validation.pattern) {
+        const regex = new RegExp(field.validation.pattern);
+        if (!regex.test(value)) {
+          return field.validation.message || `${field.label} is invalid`;
+        }
+      }
+    }
+    if (field.type === "email") {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(value)) {
+        return "Please enter a valid email address";
+      }
+    }
+    if (field.type === "tel") {
+      const phoneRegex = /^[\d\s\-+()]{7,}$/;
+      if (!phoneRegex.test(value)) {
+        return "Please enter a valid phone number";
+      }
+    }
+  }
+  return null;
+};
+var Spinner3 = ({ color }) => {
+  const turn = (0, import_react10.useRef)(new import_react_native11.Animated.Value(0)).current;
+  (0, import_react10.useEffect)(() => {
+    const loop = import_react_native11.Animated.loop(import_react_native11.Animated.timing(turn, { toValue: 1, duration: SPIN_DURATION_MS3, easing: import_react_native11.Easing.linear, useNativeDriver: true }));
+    loop.start();
+    return () => loop.stop();
+  }, [turn]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Animated.View, { style: { transform: [{ rotate: turn.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native7.LoaderCircle, { size: 16, color }) });
+};
+var Checkbox = ({ checked, size, theme }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GradientFill, { color: checked ? theme.primaryColor : theme.backgroundColor, style: [styles11.checkbox, { width: size, height: size, borderColor: checked ? solidColor(theme.primaryColor) : theme.borderColor }], children: checked ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native7.Check, { size: size - 4, color: theme.primaryTextColor, strokeWidth: 3 }) : null });
+var OptionRow = ({ label, selected, muted = false, theme, fontFamily, onPress }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Touchable, { style: styles11.optionRow, hitSlop: OPTION_HIT_SLOP, onPress, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.optionLabel, { color: muted ? theme.mutedTextColor : theme.textColor, fontFamily }, selected ? styles11.optionLabelSelected : null], numberOfLines: 1, children: label }),
+  selected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native7.Check, { size: 14, color: solidColor(theme.primaryColor) }) : null
+] });
+var FieldControl = ({ field, value, theme, fontFamily, hasError, onChange, onToggleOption }) => {
+  const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
+  const [numberText, setNumberText] = (0, import_react10.useState)(typeof value === "number" ? String(value) : "");
+  const surface = inputSurface(theme, hasError, isFocused);
+  const textStyle = [styles11.input, surface, { color: theme.textColor, fontFamily }];
+  const focusHandlers = { onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) };
+  switch (field.type) {
+    case "select": {
+      if (!field.options) return null;
+      const selected = typeof value === "string" ? value : "";
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: [styles11.optionList, surface], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OptionRow, { label: field.placeholder || `Select ${field.label.toLowerCase()}`, muted: true, selected: selected === "", theme, fontFamily, onPress: () => onChange("") }),
+        field.options.map((option, idx) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OptionRow, { label: getOptionLabel(option), selected: selected === getOptionValue(option), theme, fontFamily, onPress: () => onChange(getOptionValue(option)) }, idx))
+      ] });
+    }
+    case "multiselect": {
+      if (!field.options) return null;
+      const chosen = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: [styles11.optionList, surface], children: field.options.map((option, idx) => {
+        const optionValue = getOptionValue(option);
+        const isChecked = chosen.includes(optionValue);
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Touchable, { style: styles11.checkRow, hitSlop: OPTION_HIT_SLOP, onPress: () => onToggleOption(optionValue, !isChecked), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkbox, { checked: isChecked, size: 14, theme }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.optionLabel, { color: theme.textColor, fontFamily }], children: getOptionLabel(option) })
+        ] }, idx);
+      }) });
+    }
+    case "boolean":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Touchable, { style: styles11.booleanRow, onPress: () => onChange(value !== true), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkbox, { checked: value === true, size: 16, theme }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.optionLabel, { color: theme.mutedTextColor, fontFamily }], children: field.placeholder || "Yes" })
+      ] });
+    case "textarea":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_native11.TextInput,
+        {
+          ...focusHandlers,
+          style: [textStyle, styles11.textarea],
+          placeholder: placeholderFor(field),
+          placeholderTextColor: theme.mutedTextColor,
+          value: typeof value === "string" ? value : "",
+          onChangeText: onChange,
+          multiline: true,
+          numberOfLines: 2
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_native11.TextInput,
+        {
+          ...focusHandlers,
+          style: textStyle,
+          placeholder: placeholderFor(field),
+          placeholderTextColor: theme.mutedTextColor,
+          value: numberText,
+          onChangeText: (text) => {
+            setNumberText(text);
+            const parsed = Number(text);
+            onChange(text.trim() === "" || Number.isNaN(parsed) ? "" : parsed);
+          },
+          keyboardType: "numeric"
+        }
+      );
+    default: {
+      const traits = textInputTraits(field.type);
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_native11.TextInput,
+        {
+          ...focusHandlers,
+          style: textStyle,
+          placeholder: placeholderFor(field),
+          placeholderTextColor: theme.mutedTextColor,
+          value: typeof value === "string" ? value : "",
+          onChangeText: onChange,
+          keyboardType: traits.keyboardType,
+          autoCapitalize: traits.autoCapitalize,
+          autoCorrect: traits.autoCorrect
+        }
+      );
+    }
+  }
+};
+var FormStep = ({ payload, isProcessing, onComplete }) => {
+  const theme = useStepTheme2(payload.theme);
+  const buttonRadius = getButtonRadius2(theme.buttonStyle);
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const { data } = payload;
+  const [formData, setFormData] = (0, import_react10.useState)({});
+  const [fieldErrors, setFieldErrors] = (0, import_react10.useState)({});
+  const clearFieldError = (fieldName) => {
+    setFieldErrors((prev) => {
+      if (!prev[fieldName]) return prev;
+      const next = { ...prev };
+      delete next[fieldName];
+      return next;
+    });
+  };
+  const validateAllFields = () => {
+    const errors = {};
+    let isValid = true;
+    data.fields.forEach((field) => {
+      const error = validateField(field, formData[field.name]);
+      if (error) {
+        errors[field.name] = error;
+        isValid = false;
+      }
+    });
+    setFieldErrors(errors);
+    return isValid;
+  };
+  const handleFieldChange = (fieldName, value) => {
+    setFormData((prev) => ({ ...prev, [fieldName]: value }));
+    clearFieldError(fieldName);
+  };
+  const handleMultiselectChange = (fieldName, optionValue, checked) => {
+    setFormData((prev) => {
+      const currentValues = prev[fieldName] || [];
+      if (checked) {
+        return { ...prev, [fieldName]: [...currentValues, optionValue] };
+      } else {
+        return { ...prev, [fieldName]: currentValues.filter((v) => v !== optionValue) };
+      }
+    });
+    clearFieldError(fieldName);
+  };
+  const handleSubmit = () => {
+    if (validateAllFields()) {
+      onComplete(formData);
+    }
+  };
+  const submitTextColor = isProcessing ? theme.mutedTextColor : theme.primaryTextColor;
+  return (
+    // The form may be the tallest thing on screen in a host app, so it owns its
+    // keyboard handling. With an unbounded parent the ScrollView simply lays
+    // out at content height and never steals a scroll gesture from the chat.
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.KeyboardAvoidingView, { behavior: import_react_native11.Platform.OS === "ios" ? "padding" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.ScrollView, { keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, bounces: false, showsVerticalScrollIndicator: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: styles11.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native7.FileText, { size: 16, color: solidColor(theme.primaryColor) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.title, { color: theme.textColor, fontFamily }], children: data.title })
+      ] }),
+      data.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.description, { color: theme.mutedTextColor, fontFamily }], children: data.description }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: styles11.fields, children: data.fields.map((field) => {
+        const FieldIcon = fieldIcons[field.type] ?? import_lucide_react_native7.Type;
+        const error = fieldErrors[field.name];
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: styles11.labelRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldIcon, { size: 12, color: theme.mutedTextColor }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.label, { color: theme.mutedTextColor, fontFamily }], children: field.label }),
+            field.required ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.label, { color: theme.errorColor, fontFamily }], children: "*" }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            FieldControl,
+            {
+              field,
+              value: formData[field.name],
+              theme,
+              fontFamily,
+              hasError: !!error,
+              onChange: (value) => handleFieldChange(field.name, value),
+              onToggleOption: (optionValue, checked) => handleMultiselectChange(field.name, optionValue, checked)
+            }
+          ),
+          error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.error, { color: theme.errorColor, fontFamily }], children: error }) : null
+        ] }, field.name);
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Touchable, { onPress: handleSubmit, disabled: isProcessing, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GradientFill, { color: isProcessing ? theme.borderColor : theme.primaryColor, style: [styles11.submitButton, { borderRadius: buttonRadius }], children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner3, { color: submitTextColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.submitLabel, { color: submitTextColor, fontFamily }], children: "Submitting..." })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: [styles11.submitLabel, { color: submitTextColor, fontFamily }], children: data.submit_label || "Next" }) }) })
+    ] }) })
+  );
+};
+var styles11 = import_react_native11.StyleSheet.create({
+  header: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 8 },
+  title: { fontSize: 14, lineHeight: 20, fontWeight: "500" },
+  description: { fontSize: 12, lineHeight: 16, marginBottom: 12 },
+  fields: { gap: 10, marginBottom: 12 },
+  labelRow: { flexDirection: "row", alignItems: "center", gap: 4, marginBottom: 4 },
+  label: { fontSize: 12, lineHeight: 16, fontWeight: "500" },
+  // No `lineHeight`: Android centres single-line input text off it.
+  input: { fontSize: 12, paddingHorizontal: 12, paddingVertical: 8, minHeight: 34 },
+  // Web's `rows={2}` at this type size: two 16px lines plus the padding.
+  textarea: { minHeight: 50, textAlignVertical: "top" },
+  optionList: { padding: 8, gap: 6 },
+  optionRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 },
+  optionLabel: { flexShrink: 1, fontSize: 12, lineHeight: 16 },
+  optionLabelSelected: { fontWeight: "600" },
+  checkRow: { flexDirection: "row", alignItems: "center", gap: 8 },
+  checkbox: { borderRadius: 4, borderWidth: 1, alignItems: "center", justifyContent: "center" },
+  booleanRow: { flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 4 },
+  error: { fontSize: 12, lineHeight: 16, marginTop: 2 },
+  submitButton: { height: 36, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 },
+  submitLabel: { fontSize: 14, lineHeight: 20, fontWeight: "600" }
+});
+var form_step_default = FormStep;
+
+// src/components/ui/swap.tsx
+var import_react11 = require("react");
+var import_react_native12 = require("react-native");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DEFAULT_DURATION_MS = 200;
+var SWAP_EASING = import_react_native12.Easing.inOut(import_react_native12.Easing.ease);
+var offsetsOf = (props) => ({ enterX: props.enterX ?? 0, enterY: props.enterY ?? 0, exitX: props.exitX ?? 0, exitY: props.exitY ?? 0 });
+var AnimatedSwap = ({ swapKey, durationMs = DEFAULT_DURATION_MS, children, ...offsets }) => {
+  const progress = (0, import_react11.useRef)(new import_react_native12.Animated.Value(1)).current;
+  const [held, setHeld] = (0, import_react11.useState)({ key: swapKey, node: children, ...offsetsOf(offsets) });
+  const incoming = (0, import_react11.useRef)(held);
+  incoming.current = { key: swapKey, node: children, ...offsetsOf(offsets) };
+  const heldKey = (0, import_react11.useRef)(held.key);
+  heldKey.current = held.key;
+  (0, import_react11.useEffect)(() => {
+    if (heldKey.current === swapKey) {
+      setHeld(incoming.current);
+      return;
+    }
+    const exit = import_react_native12.Animated.timing(progress, { toValue: 0, duration: durationMs, easing: SWAP_EASING, useNativeDriver: true });
+    exit.start(({ finished }) => {
+      if (!finished) return;
+      setHeld(incoming.current);
+      progress.setValue(0);
+      import_react_native12.Animated.timing(progress, { toValue: 1, duration: durationMs, easing: SWAP_EASING, useNativeDriver: true }).start();
+    });
+    return () => exit.stop();
+  }, [swapKey, durationMs, progress]);
+  const translateX = progress.interpolate({ inputRange: [0, 1], outputRange: [held.key === swapKey ? held.enterX ?? 0 : held.exitX ?? 0, 0] });
+  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [held.key === swapKey ? held.enterY ?? 0 : held.exitY ?? 0, 0] });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.Animated.View, { style: { opacity: progress, transform: [{ translateX }, { translateY }] }, children: held.node });
+};
+
+// src/components/interactive-flow.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ENTER_DURATION_MS2 = 300;
+var STEP_ENTER_DURATION_MS = 200;
+var CARD_ENTER_OFFSET = 10;
+var STEP_ENTER_OFFSET = 20;
+var PILL_ENTER_OFFSET = 8;
+var SURFACE_TINT_OPACITY = 0.5;
+var DEFAULT_CARD_RADIUS = 8;
+var openExternalUrl = (url) => {
+  void import_react_native13.Linking.openURL(url).catch(() => {
+  });
+};
+var EnterFade = ({ translateX = 0, translateY = 0, durationMs = ENTER_DURATION_MS2, style, testID, children }) => {
+  const progress = (0, import_react12.useRef)(new import_react_native13.Animated.Value(0)).current;
+  (0, import_react12.useEffect)(() => {
+    import_react_native13.Animated.timing(progress, { toValue: 1, duration: durationMs, useNativeDriver: true }).start();
+  }, [durationMs, progress]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_native13.Animated.View,
+    {
+      testID,
+      style: [
+        style,
+        {
+          opacity: progress,
+          transform: [
+            { translateX: progress.interpolate({ inputRange: [0, 1], outputRange: [translateX, 0] }) },
+            { translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [translateY, 0] }) }
+          ]
+        }
+      ],
+      children
+    }
+  );
+};
+var InteractiveFlow = ({ initialComponent, onApiCall, onComplete, onSendResponse, onSelectionDisplayed, quickReplyAlign = "end" }) => {
+  const isMultiStepFlow = isInteractiveFlow(initialComponent);
+  const isFreeButtonGroup = !isMultiStepFlow && isButtons(initialComponent) && initialComponent.data.presentation === "free";
+  const widgetTheme = useWidgetTheme();
+  const theme = (0, import_react12.useMemo)(
+    () => mergeTheme({
+      primaryColor: widgetTheme.primaryColor,
+      primaryTextColor: widgetTheme.primaryTextColor,
+      backgroundColor: widgetTheme.backgroundColor,
+      // Cards sit on the panel as bordered white surfaces
+      surfaceColor: widgetTheme.surfaceColor,
+      textColor: widgetTheme.textColor,
+      mutedTextColor: widgetTheme.mutedTextColor,
+      borderColor: widgetTheme.borderColor,
+      ...initialComponent.theme
+    }),
+    [initialComponent.theme, widgetTheme]
+  );
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const flowSteps = isMultiStepFlow ? initialComponent.data.steps : [{ id: "single", title: "", component: initialComponent }];
+  const totalSteps = flowSteps.length;
+  const [currentStepIndex, setCurrentStepIndex] = (0, import_react12.useState)(0);
+  const [isProcessing, setIsProcessing] = (0, import_react12.useState)(false);
+  const [allCollectedData, setAllCollectedData] = (0, import_react12.useState)({});
+  const [confirmation, setConfirmation] = (0, import_react12.useState)(null);
+  const [submittedSelection, setSubmittedSelection] = (0, import_react12.useState)(null);
+  const [stepCompleted, setStepCompleted] = (0, import_react12.useState)(new Array(totalSteps).fill(false));
+  const currentStep = flowSteps[currentStepIndex];
+  const currentComponent = currentStep?.component;
+  const showStepper = totalSteps > 1;
+  const handleBack = (0, import_react12.useCallback)(() => {
+    if (currentStepIndex > 0) {
+      setCurrentStepIndex((prev) => prev - 1);
+    }
+  }, [currentStepIndex]);
+  const handleStepComplete = (0, import_react12.useCallback)(
+    async (stepData) => {
+      setIsProcessing(true);
+      const newAllData = { ...allCollectedData, ...stepData };
+      setAllCollectedData(newAllData);
+      setStepCompleted((prev) => {
+        const updated = [...prev];
+        updated[currentStepIndex] = true;
+        return updated;
+      });
+      try {
+        const isLastStep = currentStepIndex === totalSteps - 1;
+        const selectedButtonId = typeof stepData.selected_button === "string" ? stepData.selected_button : null;
+        const buttonsComponent = currentComponent !== void 0 && isButtons(currentComponent) ? currentComponent : null;
+        const submittedButton = buttonsComponent && selectedButtonId ? buttonsComponent.data.buttons.find((button) => button.id === selectedButtonId) ?? { id: selectedButtonId, label: selectedButtonId, action: { type: "trigger_component" } } : null;
+        const shouldShowSubmittedSelection = buttonsComponent?.data.completionDisplay === "selected_item" && !!submittedButton;
+        if (onSendResponse) {
+          const isInstantSelectedItem = isLastStep && shouldShowSubmittedSelection && !!submittedButton && !!onSelectionDisplayed;
+          if (isInstantSelectedItem) {
+            onSelectionDisplayed(initialComponent.component_id, submittedButton.label);
+            onComplete?.(newAllData);
+          }
+          await onSendResponse(initialComponent.component_id, {
+            step_index: currentStepIndex,
+            step_data: stepData,
+            all_data: newAllData,
+            is_final_step: isLastStep
+          });
+          if (isLastStep) {
+            if (isInstantSelectedItem) {
+            } else if (shouldShowSubmittedSelection && submittedButton) {
+              setSubmittedSelection(submittedButton.label);
+              onComplete?.(newAllData);
+            } else {
+              setConfirmation({
+                title: "Success!",
+                message: "Your selection has been submitted.",
+                icon: "success"
+              });
+              onComplete?.(newAllData);
+            }
+          } else {
+            setCurrentStepIndex((prev) => prev + 1);
+          }
+        } else {
+          if (isLastStep) {
+            if (isMultiStepFlow) {
+              const { on_complete } = initialComponent.data;
+              const stringifiedData = {};
+              for (const [key, value] of Object.entries(newAllData)) {
+                stringifiedData[key] = Array.isArray(value) ? JSON.stringify(value) : String(value);
+              }
+              const apiPayload = buildPayload(on_complete.payload, {
+                ...stringifiedData,
+                all_data: JSON.stringify(newAllData)
+              });
+              const result = await onApiCall(on_complete.method, on_complete.endpoint, apiPayload);
+              if (result.success) {
+                setConfirmation(
+                  result.confirmation || {
+                    title: "Success!",
+                    message: result.message,
+                    icon: "success"
+                  }
+                );
+                onComplete?.(newAllData);
+              } else {
+                throw new Error(result.message || "Failed to complete");
+              }
+            } else {
+              onComplete?.(newAllData);
+            }
+          } else {
+            setCurrentStepIndex((prev) => prev + 1);
+          }
+        }
+      } catch (error) {
+        console.error("Error processing step:", error);
+        setConfirmation({
+          title: "Something went wrong",
+          message: error.message || "Please try again.",
+          icon: "error"
+        });
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    [allCollectedData, currentStepIndex, totalSteps, isMultiStepFlow, initialComponent, currentComponent, onApiCall, onComplete, onSendResponse, onSelectionDisplayed]
+  );
+  const handleButtonClick = (0, import_react12.useCallback)(
+    async (buttonId, action) => {
+      if (action.type === "navigate" && action.url) {
+        openExternalUrl(action.url);
+        return;
+      }
+      if (onSendResponse) {
+        handleStepComplete({ selected_button: buttonId });
+        return;
+      }
+      if (action.type === "api_call" && action.endpoint) {
+        setIsProcessing(true);
+        try {
+          const result = await onApiCall(action.method || "POST", action.endpoint, action.payload || {});
+          if (result.success) {
+            handleStepComplete({ selected_button: buttonId });
+          }
+        } catch (error) {
+          console.error("Error in button action:", error);
+        } finally {
+          setIsProcessing(false);
+        }
+      } else {
+        handleStepComplete({ selected_button: buttonId });
+      }
+    },
+    [onApiCall, handleStepComplete, onSendResponse]
+  );
+  if (!currentStep) return null;
+  const renderStepComponent = (component) => {
+    switch (component.component_type) {
+      case "calendar_booking":
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          calendar_step_default,
+          {
+            payload: component,
+            isProcessing,
+            onComplete: (slotId, slotDatetime) => {
+              const timezone = component.data.timezone;
+              handleStepComplete({
+                slot_id: slotId,
+                slot_datetime: slotDatetime,
+                slot_time: formatSlotTime(slotDatetime, timezone),
+                slot_date: formatSlotDate(slotDatetime, timezone)
+              });
+            }
+          }
+        );
+      case "form":
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(form_step_default, { payload: component, isProcessing, onComplete: (formData) => handleStepComplete(formData) });
+      case "buttons":
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(buttons_step_default, { payload: component, isProcessing, align: quickReplyAlign, onButtonClick: handleButtonClick });
+      case "confirmation":
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(confirmation_step_default, { data: component.data });
+      // Block Kit payloads reach the blocks renderer, never this router — web
+      // has no branch for them either.
+      case "blocks":
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    EnterFade,
+    {
+      testID: ringgId("interactive-flow"),
+      translateY: CARD_ENTER_OFFSET,
+      style: [
+        styles12.root,
+        isFreeButtonGroup ? null : [
+          styles12.card,
+          {
+            backgroundColor: solidColor(theme.backgroundColor),
+            borderColor: solidColor(theme.borderColor),
+            borderRadius: toNumber2(theme.borderRadius, DEFAULT_CARD_RADIUS)
+          }
+        ]
+      ],
+      children: [
+        isFreeButtonGroup ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native13.View, { pointerEvents: "none", style: [import_react_native13.StyleSheet.absoluteFill, styles12.surfaceTint, { backgroundColor: solidColor(theme.surfaceColor) }] }),
+        showStepper && !confirmation && !submittedSelection && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native13.View, { testID: ringgId("flow-stepper"), style: styles12.stepper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native13.View, { testID: ringgId("flow-stepper-progress"), style: styles12.stepperProgress, children: flowSteps.map((step, index) => {
+            const isCompleted = stepCompleted[index] ?? false;
+            const isActive = index === currentStepIndex;
+            const indicatorColor = isCompleted ? theme.successColor : isActive ? theme.primaryColor : theme.borderColor;
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native13.View, { testID: ringgId("flow-step"), style: styles12.step, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native13.View, { testID: ringgId("flow-step-indicator"), accessibilityState: { selected: isActive }, style: styles12.stepIndicator, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GradientFill, { color: indicatorColor, style: import_react_native13.StyleSheet.absoluteFill }),
+                isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react_native8.Check, { size: 14, color: solidColor(theme.primaryTextColor) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native13.Text, { style: [styles12.stepIndicatorLabel, { color: isActive ? theme.primaryTextColor : theme.mutedTextColor, fontFamily }], children: index + 1 })
+              ] }),
+              index < flowSteps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native13.View, { testID: ringgId("flow-step-connector"), style: [styles12.stepConnector, { backgroundColor: solidColor(isCompleted ? theme.successColor : theme.borderColor) }] })
+            ] }, step.id);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native13.Text, { testID: ringgId("flow-step-title"), numberOfLines: 1, style: [styles12.stepTitle, { color: theme.textColor, fontFamily }], children: currentStep.title || `Step ${currentStepIndex + 1} of ${totalSteps}` })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native13.View, { testID: ringgId("flow-content"), style: [isFreeButtonGroup ? null : styles12.content, !showStepper && !isFreeButtonGroup ? styles12.contentTopPadding : null], children: [
+          currentStepIndex > 0 && !confirmation && !submittedSelection && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Touchable, { onPress: handleBack, testID: ringgId("flow-back-button"), accessibilityLabel: "Back", style: styles12.backButton, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react_native8.ChevronLeft, { size: 14, color: solidColor(theme.mutedTextColor) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native13.Text, { style: [styles12.backLabel, { color: theme.mutedTextColor, fontFamily }], children: "Back" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            AnimatedSwap,
+            {
+              swapKey: submittedSelection ? "submitted" : confirmation ? "confirmation" : `step-${currentStepIndex}`,
+              durationMs: STEP_ENTER_DURATION_MS,
+              enterX: submittedSelection || confirmation ? 0 : STEP_ENTER_OFFSET,
+              exitX: submittedSelection || confirmation ? 0 : -STEP_ENTER_OFFSET,
+              enterY: submittedSelection ? PILL_ENTER_OFFSET : 0,
+              exitY: submittedSelection ? -PILL_ENTER_OFFSET : 0,
+              children: submittedSelection ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native13.View, { testID: ringgId("flow-submitted-selection"), style: styles12.submittedSelection, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native13.View, { testID: ringgId("flow-submitted-pill"), style: [styles12.submittedPill, { borderColor: solidColor(theme.primaryColor) }], children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GradientFill, { color: theme.primaryColor, style: import_react_native13.StyleSheet.absoluteFill }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react_native8.Check, { size: 16, color: solidColor(theme.primaryTextColor) }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native13.Text, { numberOfLines: 1, accessibilityLabel: submittedSelection, style: [styles12.submittedLabel, { color: theme.primaryTextColor, fontFamily }], children: submittedSelection })
+              ] }) }) : confirmation ? (
+                /* Show Confirmation */
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(confirmation_step_default, { data: confirmation, collectedData: allCollectedData })
+              ) : renderStepComponent(currentStep.component)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var interactive_flow_default = InteractiveFlow;
+var styles12 = import_react_native13.StyleSheet.create({
+  root: { width: "100%" },
+  card: { borderWidth: 1, overflow: "hidden" },
+  surfaceTint: { opacity: SURFACE_TINT_OPACITY },
+  stepper: { paddingHorizontal: 16, paddingTop: 16, paddingBottom: 12 },
+  stepperProgress: { flexDirection: "row", alignItems: "center", gap: 8 },
+  step: { flexDirection: "row", alignItems: "center", gap: 8, flex: 1 },
+  stepIndicator: { width: 28, height: 28, borderRadius: 9999, alignItems: "center", justifyContent: "center", flexShrink: 0, overflow: "hidden" },
+  stepIndicatorLabel: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
+  stepConnector: { flex: 1, height: 2, borderRadius: 9999 },
+  stepTitle: { fontSize: 12, lineHeight: 16, fontWeight: "500", marginTop: 12 },
+  content: { paddingHorizontal: 16, paddingBottom: 16 },
+  contentTopPadding: { paddingTop: 16 },
+  // `alignSelf` keeps the touch target on the label: a stretched Pressable
+  // would make the whole width of the card tappable, which the <button> is not.
+  backButton: { alignSelf: "flex-start", flexDirection: "row", alignItems: "center", gap: 4, marginBottom: 12 },
+  backLabel: { fontSize: 12, lineHeight: 16 },
+  submittedSelection: { paddingVertical: 8 },
+  submittedPill: { alignSelf: "flex-start", maxWidth: "100%", flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 10, borderWidth: 1, paddingHorizontal: 12, paddingVertical: 8, overflow: "hidden" },
+  submittedLabel: { flexShrink: 1, fontSize: 14, lineHeight: 20, fontWeight: "600" }
+});
+
+// src/components/message-item.tsx
+var import_react_native15 = require("react-native");
+
+// src/lib/markdown.tsx
+var import_react13 = require("react");
+var import_react_native14 = require("react-native");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DEFAULT_FONT_SIZE = 15;
+var LINE_HEIGHT_RATIO = 1.3;
+var CODE_FONT_RATIO = 0.8;
+var BLOCK_GAP = 8;
+var LIST_ITEM_GAP = 4;
+var BULLET = "\u2022";
+var MONOSPACE_FONT = import_react_native14.Platform.select({ ios: "Menlo", default: "monospace" });
+var FENCE_PATTERN = /^\s{0,3}(`{3,}|~{3,})/;
+var HEADING_PATTERN = /^\s{0,3}(#{1,6})\s+(.*)$/;
+var RULE_PATTERN = /^\s{0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/;
+var QUOTE_PATTERN = /^\s{0,3}>\s?(.*)$/;
+var BULLET_PATTERN = /^(\s*)[-*+]\s+(.*)$/;
+var ORDERED_PATTERN = /^(\s*)(\d{1,9})[.)]\s+(.*)$/;
+var INLINE_PATTERN = /\\([\\`*_[\]()#+\-.!>])|`([^`]+)`|(\*{1,3}|_{1,3})(\S[\s\S]*?\S|\S)\3|(!?)\[([^\]]*)\]\(\s*<?([^)>\s]*)>?(?:\s+"[^"]*")?\s*\)/;
+var HEADING_SCALE = {
+  // 20 / 18 / 16 / 15 against the 15px body — prose-sm's scale, and the same
+  // steps the Flutter widget uses. h4 and below share the body size.
+  1: { sizeDelta: 5, fontWeight: "700" },
+  2: { sizeDelta: 3, fontWeight: "700" },
+  3: { sizeDelta: 1, fontWeight: "600" },
+  4: { sizeDelta: 0, fontWeight: "600" }
+};
+var isWordChar = (char) => char !== void 0 && /[A-Za-z0-9]/.test(char);
+var emphasis = (delimiters, children) => {
+  switch (delimiters) {
+    case 1:
+      return { kind: "em", children };
+    case 2:
+      return { kind: "strong", children };
+    default:
+      return { kind: "strong", children: [{ kind: "em", children }] };
+  }
+};
+var headingLevel = (hashes) => {
+  switch (hashes.length) {
+    case 1:
+      return 1;
+    case 2:
+      return 2;
+    case 3:
+      return 3;
+    default:
+      return 4;
+  }
+};
+var openUrl = (url) => {
+  void import_react_native14.Linking.openURL(url).catch(() => {
+  });
+};
+var tokenizeInline = (source) => {
+  const tokens = [];
+  const pattern = new RegExp(INLINE_PATTERN.source, "g");
+  let cursor = 0;
+  const pushText = (value) => {
+    if (value) tokens.push({ kind: "text", value });
+  };
+  let match = pattern.exec(source);
+  while (match !== null) {
+    pushText(source.slice(cursor, match.index));
+    cursor = match.index + match[0].length;
+    const escaped = match[1];
+    const code = match[2];
+    const delimiter = match[3];
+    const label = match[6];
+    if (escaped !== void 0) {
+      pushText(escaped);
+    } else if (code !== void 0) {
+      tokens.push({ kind: "code", value: code });
+    } else if (delimiter !== void 0) {
+      if (delimiter.startsWith("_") && isWordChar(source[match.index - 1])) pushText(match[0]);
+      else tokens.push(emphasis(delimiter.length, tokenizeInline(match[4] ?? "")));
+    } else if (label !== void 0) {
+      const href = match[7] ?? "";
+      if (match[5] === "!" || !href || !label) pushText(label);
+      else tokens.push({ kind: "link", href, children: tokenizeInline(label) });
+    }
+    match = pattern.exec(source);
+  }
+  pushText(source.slice(cursor));
+  return tokens;
+};
+var startsBlock = (line) => FENCE_PATTERN.test(line) || HEADING_PATTERN.test(line) || RULE_PATTERN.test(line) || QUOTE_PATTERN.test(line) || BULLET_PATTERN.test(line) || ORDERED_PATTERN.test(line);
+var splitBlocks = (source) => {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  const blocks = [];
+  let index = 0;
+  while (index < lines.length) {
+    const line = lines[index] ?? "";
+    if (!line.trim()) {
+      index += 1;
+      continue;
+    }
+    const fence = FENCE_PATTERN.exec(line);
+    if (fence !== null) {
+      const marker = fence[1] ?? "```";
+      const body = [];
+      index += 1;
+      while (index < lines.length) {
+        const next = lines[index] ?? "";
+        index += 1;
+        if (next.trimStart().startsWith(marker)) break;
+        body.push(next);
+      }
+      blocks.push({ kind: "code", text: body.join("\n") });
+      continue;
+    }
+    const heading = HEADING_PATTERN.exec(line);
+    if (heading !== null) {
+      blocks.push({ kind: "heading", level: headingLevel(heading[1] ?? ""), content: tokenizeInline((heading[2] ?? "").trim()) });
+      index += 1;
+      continue;
+    }
+    if (RULE_PATTERN.test(line)) {
+      blocks.push({ kind: "rule" });
+      index += 1;
+      continue;
+    }
+    if (QUOTE_PATTERN.test(line)) {
+      const quoted = [];
+      while (index < lines.length) {
+        const marker = QUOTE_PATTERN.exec(lines[index] ?? "");
+        if (marker === null) break;
+        quoted.push(marker[1] ?? "");
+        index += 1;
+      }
+      blocks.push({ kind: "quote", children: splitBlocks(quoted.join("\n")) });
+      continue;
+    }
+    const bullet = BULLET_PATTERN.exec(line);
+    const numbered = bullet === null ? ORDERED_PATTERN.exec(line) : null;
+    if (bullet !== null || numbered !== null) {
+      const ordered = numbered !== null;
+      const start = numbered === null ? 1 : Number(numbered[2] ?? "1");
+      const items = [];
+      while (index < lines.length) {
+        const current = lines[index] ?? "";
+        const item = ordered ? ORDERED_PATTERN.exec(current) : BULLET_PATTERN.exec(current);
+        if (item !== null) {
+          items.push((ordered ? item[3] : item[2]) ?? "");
+          index += 1;
+          continue;
+        }
+        const lastIndex = items.length - 1;
+        const last = items[lastIndex];
+        if (last !== void 0 && current.trim() && !startsBlock(current)) {
+          items[lastIndex] = `${last} ${current.trim()}`;
+          index += 1;
+          continue;
+        }
+        break;
+      }
+      blocks.push({ kind: "list", ordered, start, items: items.map((item) => tokenizeInline(item)) });
+      continue;
+    }
+    const paragraph = [];
+    while (index < lines.length) {
+      const current = lines[index] ?? "";
+      if (!current.trim()) break;
+      if (paragraph.length > 0 && startsBlock(current)) break;
+      paragraph.push(current.trim());
+      index += 1;
+    }
+    blocks.push({ kind: "paragraph", content: tokenizeInline(paragraph.join(" ")) });
+  }
+  return blocks;
+};
+var renderInline = (tokens, theme) => tokens.map((token, index) => {
+  const key = `${token.kind}-${index}`;
+  switch (token.kind) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Fragment, { children: token.value }, key);
+    case "code":
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: [styles13.code, { fontFamily: MONOSPACE_FONT, fontSize: theme.codeFontSize }], children: token.value }, key);
+    case "strong":
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: styles13.strong, children: renderInline(token.children, theme) }, key);
+    case "em":
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: styles13.em, children: renderInline(token.children, theme) }, key);
+    case "link":
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { accessibilityRole: "link", style: [styles13.link, { color: theme.linkColor }], onPress: () => openUrl(token.href), children: renderInline(token.children, theme) }, key);
+    default:
+      return null;
+  }
+});
+var Blocks = ({ blocks, theme }) => {
+  const body = { color: theme.color, fontSize: theme.fontSize, lineHeight: theme.lineHeight, fontFamily: theme.fontFamily };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.View, { style: styles13.stack, children: blocks.map((block, index) => {
+    const key = `${block.kind}-${index}`;
+    switch (block.kind) {
+      case "paragraph":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: body, children: renderInline(block.content, theme) }, key);
+      case "heading": {
+        const scale = HEADING_SCALE[block.level];
+        const fontSize = theme.fontSize + scale.sizeDelta;
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: [body, { fontSize, lineHeight: fontSize * LINE_HEIGHT_RATIO, fontWeight: scale.fontWeight }], children: renderInline(block.content, theme) }, key);
+      }
+      case "code":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.View, { style: [styles13.codeBlock, { borderColor: theme.mutedColor }], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: { color: theme.color, fontFamily: MONOSPACE_FONT, fontSize: theme.codeFontSize, lineHeight: theme.codeFontSize * LINE_HEIGHT_RATIO }, children: block.text }) }, key);
+      case "quote":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.View, { style: [styles13.quote, { borderLeftColor: theme.mutedColor }], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Blocks, { blocks: block.children, theme }) }, key);
+      case "list":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.View, { style: styles13.list, children: block.items.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native14.View, { style: styles13.listItem, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: body, children: block.ordered ? `${block.start + itemIndex}.` : BULLET }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: [body, styles13.listItemText], children: renderInline(item, theme) })
+        ] }, `item-${itemIndex}`)) }, key);
+      case "rule":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.View, { style: [styles13.rule, { backgroundColor: theme.mutedColor }] }, key);
+      default:
+        return null;
+    }
+  }) });
+};
+var Markdown = ({ content, color, mutedColor, linkColor, fontSize = DEFAULT_FONT_SIZE, fontFamily }) => {
+  const blocks = (0, import_react13.useMemo)(() => splitBlocks(content), [content]);
+  const theme = (0, import_react13.useMemo)(
+    () => ({ color, mutedColor, linkColor, fontSize, lineHeight: fontSize * LINE_HEIGHT_RATIO, codeFontSize: Math.round(fontSize * CODE_FONT_RATIO), fontFamily }),
+    [color, mutedColor, linkColor, fontSize, fontFamily]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Blocks, { blocks, theme });
+};
+var styles13 = import_react_native14.StyleSheet.create({
+  stack: { gap: BLOCK_GAP },
+  strong: { fontWeight: "600" },
+  em: { fontStyle: "italic" },
+  /** prose renders inline code semibold, which is what separates it from prose text. */
+  code: { fontWeight: "600" },
+  link: { textDecorationLine: "underline" },
+  codeBlock: { borderWidth: import_react_native14.StyleSheet.hairlineWidth, borderRadius: 4, paddingHorizontal: 8, paddingVertical: 6 },
+  quote: { borderLeftWidth: 4, paddingLeft: 12, paddingVertical: 4 },
+  list: { gap: LIST_ITEM_GAP },
+  listItem: { flexDirection: "row", gap: 6 },
+  // Shrink rather than grow: the bubble hugs its content, and `flex: 1` would
+  // collapse that intrinsic width to zero.
+  listItemText: { flexShrink: 1 },
+  rule: { height: import_react_native14.StyleSheet.hairlineWidth, alignSelf: "stretch" }
+});
+
+// src/components/message-item.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var BODY_FONT_SIZE = 15;
+var LINE_HEIGHT_RATIO2 = 1.3;
+var SOURCE_FONT_SIZE = 13;
+var BUBBLE_RADIUS = 12;
+var ANCHORED_RADIUS = 2;
+var BUBBLE_PADDING_LEFT = 12;
+var BUBBLE_PADDING_RIGHT = 8;
+var BUBBLE_PADDING_VERTICAL = 8;
+var CONTENT_GAP = 10;
+var MessageItem = ({ message, children, hideMessageContent = false }) => {
+  const theme = useWidgetTheme();
+  const isAgentMessage = !message.isSelf;
+  const agentBubble = theme.agentBubbleColor.trim();
+  const bubbled = !isAgentMessage || Boolean(agentBubble);
+  const shouldRenderMessageBody = !hideMessageContent && Boolean(message.message.trim());
+  const sourceUrl = message.sourceUrl;
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const body = isAgentMessage ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native15.View, { testID: ringgId("message-body"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    Markdown,
+    {
+      content: message.message,
+      color: theme.textColor,
+      mutedColor: theme.mutedTextColor,
+      linkColor: solidColor(theme.primaryColor),
+      fontSize: BODY_FONT_SIZE,
+      fontFamily
+    }
+  ) }) : (
+    // Self messages are an echo of what the user typed; running them through
+    // markdown would reformat their own text back at them.
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native15.Text, { testID: ringgId("message-body"), style: [styles14.body, { color: theme.textColor, fontFamily }], children: message.message })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native15.View, { style: isAgentMessage ? styles14.rowStart : styles14.rowEnd, testID: ringgId("message"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native15.View, { testID: ringgId("message-bubble"), style: [styles14.bubble, bubbled ? [styles14.bubbleBox, isAgentMessage ? styles14.agentCorners : styles14.userCorners] : null], children: [
+    bubbled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GradientFill, { color: isAgentMessage ? agentBubble : theme.surfaceColor, style: import_react_native15.StyleSheet.absoluteFill }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native15.View, { testID: ringgId("message-content"), style: [styles14.content, bubbled ? styles14.contentPadding : null], children: [
+      shouldRenderMessageBody ? body : null,
+      sourceUrl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Touchable,
+        {
+          testID: ringgId("message-source"),
+          style: styles14.source,
+          accessibilityLabel: `Source: ${sourceUrl}`,
+          onPress: () => {
+            void import_react_native15.Linking.openURL(sourceUrl).catch(() => {
+            });
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native15.Text, { style: [styles14.sourceText, { color: solidColor(theme.primaryColor), fontFamily }], children: [
+            "Source: ",
+            sourceUrl
+          ] })
+        }
+      ) : null,
+      children ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native15.View, { testID: ringgId("message-attachment"), style: styles14.attachment, children }) : null
+    ] })
+  ] }) });
+};
+var message_item_default = MessageItem;
+var styles14 = import_react_native15.StyleSheet.create({
+  // Web anchors the bubble with `mr-auto` / `ml-auto` inside a `flex-col
+  // items-start` column; alignItems says the same thing natively.
+  rowStart: { alignItems: "flex-start" },
+  rowEnd: { alignItems: "flex-end" },
+  // `max-w-[80%]` — the bubble hugs its content up to 80% of the transcript.
+  bubble: { maxWidth: "80%" },
+  // The gradient layer fills the bubble, so the padding lives one level in on
+  // the content; `overflow` is what clips that layer to the rounded corners.
+  bubbleBox: { overflow: "hidden" },
+  agentCorners: { borderTopLeftRadius: BUBBLE_RADIUS, borderTopRightRadius: BUBBLE_RADIUS, borderBottomLeftRadius: ANCHORED_RADIUS, borderBottomRightRadius: BUBBLE_RADIUS },
+  userCorners: { borderTopLeftRadius: BUBBLE_RADIUS, borderTopRightRadius: BUBBLE_RADIUS, borderBottomLeftRadius: BUBBLE_RADIUS, borderBottomRightRadius: ANCHORED_RADIUS },
+  content: { gap: CONTENT_GAP },
+  contentPadding: { paddingLeft: BUBBLE_PADDING_LEFT, paddingRight: BUBBLE_PADDING_RIGHT, paddingVertical: BUBBLE_PADDING_VERTICAL },
+  body: { fontSize: BODY_FONT_SIZE, lineHeight: BODY_FONT_SIZE * LINE_HEIGHT_RATIO2 },
+  // `w-fit`: the citation's touch area stops at the end of the URL rather than
+  // spanning the bubble. Press feedback replaces the web's hover underline.
+  source: { alignSelf: "flex-start" },
+  sourceText: { fontSize: SOURCE_FONT_SIZE, lineHeight: SOURCE_FONT_SIZE * LINE_HEIGHT_RATIO2 },
+  attachment: { alignSelf: "stretch" }
+});
+
+// src/components/steps/blocks-step.tsx
+var import_lucide_react_native9 = require("lucide-react-native");
+var import_react14 = require("react");
+var import_react_native16 = require("react-native");
+var import_react_native_svg3 = __toESM(require("react-native-svg"));
+
+// src/lib/block-types.ts
+var SUPPORTED_BLOCKS_SCHEMA_VERSION = 1;
+
+// src/components/steps/blocks-step.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ALLOWED_URL_SCHEMES = ["https:", "mailto:", "tel:"];
+var ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
+var JUSTIFY = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
+var TEXT_ALIGN = { start: "left", center: "center", end: "right" };
+var INPUT_KEYBOARD_TYPE = {
+  input_email: "email-address",
+  input_phone_number: "phone-pad",
+  input_number: "numeric"
+};
+var RATING_COLOR = "#F5A623";
+var CAROUSEL_CARD_WIDTH = 256;
+var CAROUSEL_GAP = 12;
+var IMAGE_DEFAULT_HEIGHT = 112;
+var PULSE_HALF_CYCLE_MS2 = 1e3;
+var PULSE_MIN_OPACITY2 = 0.5;
+var TEXTAREA_MIN_HEIGHT = 60;
+var DIVIDER_THICKNESS = 1.5;
+var NO_HIT_SLOP = 0;
+var NO_BLOCKS_STATE = {
+  getValue: () => void 0,
+  setValue: () => {
+  },
+  errors: {},
+  disabled: true,
+  submitRespond: () => {
+  }
+};
+var BlocksStateContext = (0, import_react14.createContext)(NO_BLOCKS_STATE);
+var useBlocksState = () => (0, import_react14.useContext)(BlocksStateContext);
+var useBlocksTheme = () => {
+  const widget = useWidgetTheme();
+  return (0, import_react14.useMemo)(
+    () => mergeTheme({
+      primaryColor: widget.primaryColor,
+      primaryTextColor: widget.primaryTextColor,
+      backgroundColor: widget.backgroundColor,
+      surfaceColor: widget.surfaceColor,
+      textColor: widget.textColor,
+      mutedTextColor: widget.mutedTextColor,
+      borderColor: widget.borderColor,
+      errorColor: widget.errorColor,
+      successColor: widget.successColor,
+      buttonStyle: widget.buttonStyle,
+      fontFamily: widget.fontFamily
+    }),
+    [widget]
+  );
+};
+var collectInputNames = (nodes) => {
+  const names = [];
+  for (const node of nodes || []) {
+    if (node.type.startsWith("input_") && node.name) names.push(node.name);
+    names.push(...collectInputNames(node.children));
+  }
+  return names;
+};
+var findInputs = (nodes, scope) => {
+  const inputs = [];
+  for (const node of nodes || []) {
+    if (node.type.startsWith("input_") && node.name && (scope === null || scope.includes(node.name))) inputs.push(node);
+    inputs.push(...findInputs(node.children, scope));
+  }
+  return inputs;
+};
+var evaluateVisibleIf = (condition, getValue) => {
+  if (!condition) return true;
+  if (condition.all) return condition.all.every((leaf) => evaluateVisibleIf(leaf, getValue));
+  if (condition.any) return condition.any.some((leaf) => evaluateVisibleIf(leaf, getValue));
+  if (!condition.field) return true;
+  const actual = getValue(condition.field);
+  switch (condition.op || "truthy") {
+    case "eq":
+      return actual === condition.value;
+    case "ne":
+      return actual !== condition.value;
+    case "in":
+      return Array.isArray(condition.value) && condition.value.includes(actual);
+    case "gt":
+      return typeof actual === "number" && typeof condition.value === "number" && actual > condition.value;
+    case "lt":
+      return typeof actual === "number" && typeof condition.value === "number" && actual < condition.value;
+    case "truthy":
+    default:
+      return Array.isArray(actual) ? actual.length > 0 : !!actual;
+  }
+};
+var percentWidth = (value) => `${value}%`;
+var fontSizeOf = (props, fallback) => typeof props.font_size === "number" ? props.font_size : fallback;
+var sizeStyle = (props, defaultFontPx) => {
+  const fontSize = typeof props.font_size === "number" ? props.font_size : defaultFontPx;
+  return {
+    ...typeof props.width === "number" ? { width: percentWidth(props.width) } : null,
+    ...typeof props.height === "number" ? { height: props.height } : null,
+    ...fontSize !== void 0 ? { fontSize } : null
+  };
+};
+var spacing = (value, fallback) => typeof value === "number" ? value : fallback;
+var alignOf = (value) => typeof value === "string" ? ALIGN[value] : void 0;
+var justifyOf = (value) => typeof value === "string" ? JUSTIFY[value] : void 0;
+var textAlignOf = (value) => typeof value === "string" ? TEXT_ALIGN[value] : void 0;
+var parseColor = (color) => {
+  const value = color.trim();
+  const hex = /^#([0-9a-f]+)$/i.exec(value)?.[1];
+  if (hex) {
+    const six = hex.length === 3 || hex.length === 4 ? hex.slice(0, 3).replace(/./g, (digit) => digit + digit) : hex.length === 6 || hex.length === 8 ? hex.slice(0, 6) : "";
+    if (!six) return void 0;
+    const packed = Number.parseInt(six, 16);
+    return Number.isFinite(packed) ? [packed >> 16 & 255, packed >> 8 & 255, packed & 255] : void 0;
+  }
+  const channels = /^rgba?\(([^)]+)\)$/i.exec(value)?.[1];
+  if (!channels) return void 0;
+  const parts = channels.split(/[\s,/]+/).filter(Boolean).slice(0, 3).map(Number);
+  if (parts.length < 3 || parts.some((part) => !Number.isFinite(part))) return void 0;
+  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0];
+};
+var tint = (base, overlay, amount) => {
+  const from = parseColor(base);
+  const to = parseColor(overlay);
+  if (!from || !to) return base;
+  const blend = (channel) => Math.round(from[channel] * (1 - amount) + to[channel] * amount);
+  return `rgb(${blend(0)}, ${blend(1)}, ${blend(2)})`;
+};
+var headerFontSize = (level) => {
+  switch (level) {
+    case 1:
+      return 16;
+    case 2:
+      return 14;
+    default:
+      return 12;
+  }
+};
+var badgeToneColor = (tone, theme) => {
+  switch (tone) {
+    case "success":
+      return theme.successColor;
+    case "danger":
+    case "warning":
+      return theme.errorColor;
+    case "info":
+      return solidColor(theme.primaryColor);
+    default:
+      return theme.mutedTextColor;
+  }
+};
+var calloutAccent = (tone, theme) => {
+  switch (tone) {
+    case "success":
+      return solidColor(theme.successColor);
+    case "warning":
+    case "error":
+      return solidColor(theme.errorColor);
+    default:
+      return solidColor(theme.primaryColor);
+  }
+};
+var buttonVisual = (style, theme) => {
+  switch (style) {
+    case "destructive":
+      return { background: theme.errorColor, color: theme.primaryTextColor, borderColor: "transparent" };
+    case "secondary":
+      return { background: theme.surfaceColor, color: theme.textColor, borderColor: theme.borderColor };
+    case "primary":
+      return { background: theme.primaryColor, color: theme.primaryTextColor, borderColor: "transparent" };
+    default:
+      return { background: "transparent", color: theme.textColor, borderColor: theme.borderColor };
+  }
+};
+var openExternalUrl2 = (url) => {
+  void import_react_native16.Linking.openURL(url).catch(() => {
+  });
+};
+var CheckSquare = ({ checked, theme }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  import_react_native16.View,
+  {
+    style: [
+      styles15.checkSquare,
+      checked ? { backgroundColor: solidColor(theme.primaryColor), borderColor: solidColor(theme.primaryColor) } : { backgroundColor: theme.backgroundColor, borderColor: solidColor(theme.borderColor) }
+    ],
+    children: checked && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_svg3.default, { width: 11, height: 11, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_svg3.Path, { d: "M2.5 6.2 5 8.7l4.5-5.4", stroke: theme.primaryTextColor, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" }) })
+  }
+);
+var PillToggle = ({ label, selected, disabled, fontSize, theme, onPress }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  Touchable,
+  {
+    disabled,
+    onPress,
+    accessibilityLabel: label,
+    hitSlop: NO_HIT_SLOP,
+    style: [
+      styles15.pill,
+      selected ? { backgroundColor: solidColor(theme.primaryColor), borderColor: solidColor(theme.primaryColor) } : { backgroundColor: "transparent", borderColor: solidColor(theme.borderColor) }
+    ],
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.pillLabel, { color: selected ? theme.primaryTextColor : theme.textColor, fontSize, fontFamily: resolveFontFamily(theme.fontFamily) }], children: label })
+  }
+);
+var SelectDropdown = ({ options, selected, placeholder, disabled, multiple, fontSize, inputStyle, theme, onSelect }) => {
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const font = resolveFontFamily(theme.fontFamily);
+  const border = solidColor(theme.borderColor);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Touchable, { disabled, onPress: () => setOpen((prev) => !prev), accessibilityLabel: selected.length ? selected.join(", ") : placeholder, hitSlop: NO_HIT_SLOP, style: [styles15.selectTrigger, inputStyle], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { numberOfLines: 1, style: [styles15.selectValue, { color: selected.length ? theme.textColor : theme.mutedTextColor, fontSize, fontFamily: font }], children: selected.length ? selected.join(", ") : placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react_native9.ChevronDown, { size: 14, color: theme.mutedTextColor, style: { transform: [{ rotate: open ? "180deg" : "0deg" }] } })
+    ] }),
+    open && // Web floats this menu over the page. RN has no overlay layer inside the
+    // transcript and a nested vertical scroller would fight the transcript's
+    // own, so the list expands in flow and pushes the tree below it down.
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles15.selectMenu, { backgroundColor: theme.backgroundColor, borderColor: border, borderRadius: toNumber2(theme.borderRadius, 8) }], children: options.map((option, index) => {
+      const isSelected = selected.includes(option);
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        Touchable,
+        {
+          disabled,
+          onPress: () => {
+            onSelect(option);
+            if (!multiple) setOpen(false);
+          },
+          accessibilityLabel: option,
+          hitSlop: NO_HIT_SLOP,
+          style: styles15.selectOption,
+          children: [
+            multiple && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckSquare, { checked: isSelected, theme }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { numberOfLines: 1, style: [styles15.selectOptionLabel, { color: theme.textColor, fontSize: 14, fontFamily: font }], children: option }),
+            !multiple && isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react_native9.Check, { size: 14, color: solidColor(theme.primaryColor) })
+          ]
+        },
+        `${option}-${index}`
+      );
+    }) })
+  ] });
+};
+var ImageBlock = ({ node }) => {
+  const theme = useBlocksTheme();
+  const props = node.props || {};
+  const url = typeof props.url === "string" ? props.url : "";
+  const isBinding = url.includes("${{");
+  const isBlockedScheme = !!url && !isBinding && !url.trim().toLowerCase().startsWith("https:");
+  const [status, setStatus] = (0, import_react14.useState)("loading");
+  const pulse = (0, import_react14.useRef)(new import_react_native16.Animated.Value(1)).current;
+  (0, import_react14.useEffect)(() => {
+    setStatus("loading");
+  }, [url]);
+  (0, import_react14.useEffect)(() => {
+    if (status !== "loading") return;
+    const loop = import_react_native16.Animated.loop(
+      import_react_native16.Animated.sequence([
+        import_react_native16.Animated.timing(pulse, { toValue: PULSE_MIN_OPACITY2, duration: PULSE_HALF_CYCLE_MS2, useNativeDriver: true }),
+        import_react_native16.Animated.timing(pulse, { toValue: 1, duration: PULSE_HALF_CYCLE_MS2, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse, status]);
+  const radius = toNumber2(theme.borderRadius, 8);
+  const alignSelf = alignOf(props.align) ?? "flex-start";
+  if (!url || isBinding || isBlockedScheme || status === "error") {
+    const label = !url ? "Add an image URL" : isBinding ? url : "Couldn't load image";
+    const broken = isBlockedScheme || status === "error" && !isBinding;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      import_react_native16.View,
+      {
+        testID: ringgId("block-image"),
+        style: [
+          styles15.imagePlaceholder,
+          { alignSelf, borderColor: solidColor(theme.borderColor), borderRadius: radius, backgroundColor: tint(theme.backgroundColor, theme.surfaceColor, 0.5) },
+          sizeStyle(props)
+        ],
+        children: [
+          broken ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react_native9.ImageOff, { size: 20, color: theme.mutedTextColor }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react_native9.Image, { size: 20, color: theme.mutedTextColor }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { numberOfLines: 1, style: [styles15.placeholderText, { color: theme.mutedTextColor, fontFamily: resolveFontFamily(theme.fontFamily) }], children: label })
+        ]
+      }
+    );
+  }
+  const box = {
+    width: typeof props.width === "number" ? percentWidth(props.width) : "100%",
+    height: typeof props.height === "number" ? props.height : IMAGE_DEFAULT_HEIGHT
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { style: [styles15.imageBox, box, { alignSelf, borderRadius: radius }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_native16.Image,
+      {
+        testID: ringgId("block-image"),
+        source: { uri: url },
+        accessibilityLabel: String(props.alt ?? ""),
+        resizeMode: "contain",
+        onLoad: () => setStatus("loaded"),
+        onError: () => setStatus("error"),
+        style: styles15.imageFill
+      },
+      url
+    ),
+    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Animated.View, { testID: ringgId("block-image-loading"), style: [import_react_native16.StyleSheet.absoluteFill, { backgroundColor: theme.surfaceColor, opacity: pulse }] })
+  ] });
+};
+var ButtonBlock = ({ node, formNames }) => {
+  const theme = useBlocksTheme();
+  const state = useBlocksState();
+  const props = node.props || {};
+  const label = String(props.label ?? "");
+  const press = node.on?.press;
+  const handlePress = () => {
+    if (!press || state.disabled) return;
+    switch (press.action) {
+      case "respond":
+        state.submitRespond(press, formNames, label);
+        return;
+      case "open_url": {
+        if (state.onSandboxAction) {
+          state.onSandboxAction(press);
+          return;
+        }
+        if (!press.url) return;
+        const url = String(press.url);
+        if (ALLOWED_URL_SCHEMES.some((scheme) => url.trim().toLowerCase().startsWith(scheme))) openExternalUrl2(url);
+        return;
+      }
+      case "dom_event":
+        state.onSandboxAction?.(press);
+        return;
+      default:
+        return;
+    }
+  };
+  const visual = buttonVisual(typeof props.style === "string" && props.style ? props.style : "primary", theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Touchable,
+    {
+      testID: ringgId("block-button"),
+      accessibilityLabel: label,
+      onPress: handlePress,
+      disabled: state.disabled,
+      hitSlop: NO_HIT_SLOP,
+      style: [{ alignSelf: alignOf(props.align) }, sizeStyle(props)],
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GradientFill, { color: visual.background, style: [styles15.button, { borderColor: visual.borderColor, borderRadius: resolveButtonRadius(theme.buttonStyle) }], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.buttonLabel, { color: visual.color, fontSize: fontSizeOf(props, 14), fontFamily: resolveFontFamily(theme.fontFamily) }], children: label }) })
+    }
+  );
+};
+var InputBlock = ({ node }) => {
+  const theme = useBlocksTheme();
+  const state = useBlocksState();
+  const props = node.props || {};
+  const name = node.name ?? "";
+  const error = state.errors[name];
+  const font = resolveFontFamily(theme.fontFamily);
+  if (!name) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles15.nameless, { borderColor: solidColor(theme.borderColor) }], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.namelessText, { color: theme.mutedTextColor, fontFamily: font }], children: "Input needs a name" }) });
+  }
+  const inputStyle = {
+    backgroundColor: theme.backgroundColor,
+    borderColor: error ? solidColor(theme.errorColor) : solidColor(theme.borderColor),
+    borderRadius: toNumber2(theme.borderRadius, 8)
+  };
+  const label = String(props.label ?? (node.type === "input_rating" ? "" : name));
+  const bodyFontSize = fontSizeOf(props, 14);
+  const placeholder = String(props.placeholder ?? `Enter ${label.toLowerCase()}`);
+  const selectPlaceholder = String(props.placeholder ?? `Select ${label.toLowerCase()}`);
+  const options = props.options || [];
+  const control = () => {
+    switch (node.type) {
+      case "input_checkbox": {
+        const checked = state.getValue(name) || false;
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Touchable, { disabled: state.disabled, onPress: () => state.setValue(name, !checked), accessibilityLabel: label, hitSlop: NO_HIT_SLOP, style: styles15.checkboxRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckSquare, { checked, theme }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: { color: theme.textColor, fontSize: 14, fontFamily: font }, children: label })
+        ] });
+      }
+      case "input_rating": {
+        const max = Math.min(Math.max(Math.round(Number(props.max) || 5), 3), 10);
+        const current = Math.round(Number(state.getValue(name)) || 0);
+        const starPx = fontSizeOf(props, 24);
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles15.ratingRow, { justifyContent: justifyOf(props.align) }], accessibilityRole: "radiogroup", accessibilityLabel: label, children: Array.from({ length: max }, (_unused, index) => {
+          const filled = index < current;
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Touchable,
+            {
+              disabled: state.disabled,
+              onPress: () => state.setValue(name, index + 1),
+              accessibilityLabel: `${index + 1} star${index ? "s" : ""}`,
+              hitSlop: NO_HIT_SLOP,
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: { color: filled ? RATING_COLOR : solidColor(theme.borderColor), fontSize: starPx, fontFamily: font }, children: filled ? "\u2605" : "\u2606" })
+            },
+            index
+          );
+        }) });
+      }
+      case "input_single_select": {
+        const value = state.getValue(name) || "";
+        if (props.variant === "pills") {
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles15.pillRow, { justifyContent: justifyOf(props.align) }], children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PillToggle, { label: option, selected: value === option, disabled: state.disabled, fontSize: bodyFontSize, theme, onPress: () => state.setValue(name, option) }, `${option}-${index}`)) });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          SelectDropdown,
+          {
+            options,
+            selected: value ? [value] : [],
+            placeholder: selectPlaceholder,
+            disabled: state.disabled,
+            multiple: false,
+            fontSize: bodyFontSize,
+            inputStyle,
+            theme,
+            onSelect: (option) => state.setValue(name, option)
+          }
+        );
+      }
+      case "input_multi_select": {
+        const current = state.getValue(name) || [];
+        const toggle = (option) => state.setValue(name, current.includes(option) ? current.filter((entry) => entry !== option) : [...current, option]);
+        if (props.variant === "pills") {
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles15.pillRow, { justifyContent: justifyOf(props.align) }], children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PillToggle, { label: option, selected: current.includes(option), disabled: state.disabled, fontSize: bodyFontSize, theme, onPress: () => toggle(option) }, `${option}-${index}`)) });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectDropdown, { options, selected: current, placeholder: selectPlaceholder, disabled: state.disabled, multiple: true, fontSize: 14, inputStyle, theme, onSelect: toggle });
+      }
+      case "input_textarea":
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_react_native16.TextInput,
+          {
+            multiline: true,
+            placeholder,
+            placeholderTextColor: theme.mutedTextColor,
+            accessibilityLabel: label,
+            value: String(state.getValue(name) ?? ""),
+            onChangeText: (text) => state.setValue(name, text),
+            editable: !state.disabled,
+            style: [
+              styles15.field,
+              styles15.textarea,
+              inputStyle,
+              { color: theme.textColor, fontSize: bodyFontSize, fontFamily: font },
+              // height sizes the control itself, not the label+error wrapper.
+              typeof props.height === "number" ? { height: props.height } : null
+            ]
+          }
+        );
+      default: {
+        const isDateOrTime = node.type === "input_date" || node.type === "input_time";
+        const field = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_react_native16.TextInput,
+          {
+            placeholder,
+            placeholderTextColor: theme.mutedTextColor,
+            accessibilityLabel: label,
+            value: String(state.getValue(name) ?? ""),
+            keyboardType: INPUT_KEYBOARD_TYPE[node.type] ?? "default",
+            autoCapitalize: node.type === "input_email" ? "none" : "sentences",
+            autoCorrect: node.type !== "input_email",
+            onChangeText: (text) => {
+              if (node.type !== "input_number") {
+                state.setValue(name, text);
+                return;
+              }
+              const parsed = Number(text);
+              state.setValue(name, text === "" || !Number.isFinite(parsed) ? "" : parsed);
+            },
+            editable: !state.disabled,
+            style: [styles15.field, isDateOrTime && styles15.fieldWithIcon, inputStyle, { color: theme.textColor, fontSize: 14, fontFamily: font }]
+          }
+        );
+        if (!isDateOrTime) return field;
+        const PickerIcon = node.type === "input_date" ? import_lucide_react_native9.Calendar : import_lucide_react_native9.Clock;
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { children: [
+          field,
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { pointerEvents: "none", style: styles15.fieldIcon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PickerIcon, { size: 16, color: theme.mutedTextColor }) })
+        ] });
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { testID: ringgId(`block-${node.type}`), style: sizeStyle({ ...props, height: void 0 }), children: [
+    node.type !== "input_checkbox" && label.trim() !== "" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { style: styles15.labelRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.label, { color: theme.mutedTextColor, fontFamily: font }], children: label }),
+      !!props.required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.label, { color: theme.errorColor, fontFamily: font }], children: "*" })
+    ] }),
+    control(),
+    !!error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.error, { color: theme.errorColor, fontFamily: font }], children: error })
+  ] });
+};
+var ExpanderBlock = ({ node, children }) => {
+  const theme = useBlocksTheme();
+  const props = node.props || {};
+  const [open, setOpen] = (0, import_react14.useState)(!!props.open);
+  const font = resolveFontFamily(theme.fontFamily);
+  const title = String(props.title ?? "");
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { testID: ringgId(`block-${node.type}`), style: [styles15.expander, { borderColor: solidColor(theme.borderColor), borderRadius: toNumber2(theme.borderRadius, 8) }, sizeStyle(props)], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Touchable, { onPress: () => setOpen((prev) => !prev), accessibilityLabel: title, hitSlop: NO_HIT_SLOP, style: styles15.expanderSummary, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.expanderTitle, { color: theme.textColor, fontSize: fontSizeOf(props, 14), fontFamily: font }], children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react_native9.ChevronDown, { size: 14, color: theme.mutedTextColor, style: { transform: [{ rotate: open ? "180deg" : "0deg" }] } })
+    ] }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: styles15.expanderBody, children })
+  ] });
+};
+var BlockRenderer = ({ node, formNames, inCarousel }) => {
+  const theme = useBlocksTheme();
+  const state = useBlocksState();
+  const props = node.props || {};
+  if (!evaluateVisibleIf(node.visible_if, state.getValue)) return null;
+  const children = (scope, carousel = false) => (node.children || []).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlockRenderer, { node: child, formNames: scope, inCarousel: carousel }, `${child.id ?? "b"}-${index}`));
+  const testID = ringgId(`block-${node.type}`);
+  const font = resolveFontFamily(theme.fontFamily);
+  const border = solidColor(theme.borderColor);
+  const radius = toNumber2(theme.borderRadius, 8);
+  switch (node.type) {
+    case "box":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { testID, style: [styles15.column, { alignItems: alignOf(props.align), gap: spacing(props.gap, 8), padding: spacing(props.padding, 0) }, sizeStyle(props)], children: children(formNames) });
+    case "column":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { testID, style: [styles15.column, { alignItems: alignOf(props.align), gap: spacing(props.gap, 12) }, sizeStyle(props)], children: children(formNames) });
+    case "row":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react_native16.View,
+        {
+          testID,
+          style: [
+            styles15.row,
+            { alignItems: alignOf(props.align) ?? "center", justifyContent: justifyOf(props.justify), flexWrap: props.wrap === false ? "nowrap" : "wrap", gap: spacing(props.gap, 8) },
+            sizeStyle(props)
+          ],
+          children: children(formNames)
+        }
+      );
+    case "form":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { testID, style: [styles15.form, sizeStyle(props)], children: children(collectInputNames(node.children)) });
+    case "card": {
+      const kids = node.children || [];
+      let bodyEnd = kids.length;
+      while (bodyEnd > 0 && kids[bodyEnd - 1]?.type === "button") bodyEnd -= 1;
+      const renderKids = (list, offset) => list.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlockRenderer, { node: child, formNames, inCarousel: false }, `${child.id ?? "b"}-${offset + index}`));
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        import_react_native16.View,
+        {
+          testID,
+          style: [
+            styles15.card,
+            { alignItems: alignOf(props.align), backgroundColor: theme.backgroundColor, borderColor: border, borderRadius: radius, padding: spacing(props.padding, 12) },
+            inCarousel && styles15.carouselCard,
+            sizeStyle(props)
+          ],
+          children: [
+            renderKids(kids.slice(0, bodyEnd), 0),
+            bodyEnd < kids.length && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: styles15.cardFooter, children: renderKids(kids.slice(bodyEnd), bodyEnd) })
+          ]
+        }
+      );
+    }
+    case "carousel":
+      return (
+        // alignItems stretch (explicit): every card matches the tallest one.
+        // Snapping runs on the fixed card pitch — the only interval RN can snap
+        // to, and the only child width the catalog pins down.
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_react_native16.ScrollView,
+          {
+            testID,
+            horizontal: true,
+            showsHorizontalScrollIndicator: false,
+            snapToInterval: CAROUSEL_CARD_WIDTH + CAROUSEL_GAP,
+            snapToAlignment: "start",
+            decelerationRate: "fast",
+            style: [styles15.carousel, sizeStyle(props)],
+            contentContainerStyle: styles15.carouselContent,
+            children: children(formNames, true)
+          }
+        )
+      );
+    case "header":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { testID, style: [styles15.header, { color: theme.textColor, fontFamily: font, textAlign: textAlignOf(props.align) }, sizeStyle(props, headerFontSize(Number(props.level) || 1))], children: String(props.text ?? "") });
+    case "text": {
+      if (props.markdown === true) {
+        return (
+          // Markdown renders a stack of blocks, so `align` places those blocks
+          // in the column; it cannot re-align the wrapped lines inside them.
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { testID, style: [{ alignItems: alignOf(props.align) }, sizeStyle(props)], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Markdown,
+            {
+              content: String(props.text ?? ""),
+              color: theme.textColor,
+              mutedColor: theme.mutedTextColor,
+              linkColor: solidColor(theme.primaryColor),
+              fontSize: fontSizeOf(props, 14),
+              fontFamily: font
+            }
+          ) })
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { testID, style: [{ color: theme.textColor, fontFamily: font, textAlign: textAlignOf(props.align) }, sizeStyle(props, 14)], children: String(props.text ?? "") });
+    }
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageBlock, { node });
+    case "divider":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react_native16.View,
+        {
+          testID,
+          style: [
+            styles15.divider,
+            {
+              alignSelf: alignOf(props.align),
+              backgroundColor: tint(border, "#000000", 0.08),
+              height: typeof props.height === "number" ? props.height : DIVIDER_THICKNESS,
+              width: typeof props.width === "number" ? percentWidth(props.width) : "100%"
+            }
+          ]
+        }
+      );
+    case "facts": {
+      const items = props.items || [];
+      const fontSize = fontSizeOf(props, 14);
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { testID, style: [styles15.facts, sizeStyle(props)], children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { style: styles15.factsRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: { color: theme.mutedTextColor, fontSize, fontFamily: font }, children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.factsValue, { color: theme.textColor, fontSize, fontFamily: font }], children: item.value })
+      ] }, index)) });
+    }
+    case "badge": {
+      const toneColor = badgeToneColor(String(props.tone ?? "neutral"), theme);
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { testID, style: [styles15.badge, { alignSelf: alignOf(props.align) ?? "flex-start", borderColor: toneColor }, sizeStyle(props)], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { numberOfLines: 1, style: [styles15.badgeText, { color: toneColor, fontSize: fontSizeOf(props, 12), fontFamily: font }], children: String(props.text ?? "") }) });
+    }
+    case "table": {
+      const columns = props.columns || [];
+      const rows = (Array.isArray(props.rows) ? props.rows : []).filter(Array.isArray);
+      const cellFontSize = fontSizeOf(props, 14);
+      const cellBorder = { borderBottomWidth: 1, borderColor: border };
+      return (
+        // Card chrome (surface, border, theme radius) so the table reads like
+        // the other block widgets instead of bare rows floating in the chat.
+        // Columns share the width evenly and cells wrap: RN has no auto table
+        // layout, and equal shares are the only split that keeps every row's
+        // cells aligned without measuring text.
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { testID, style: [styles15.table, { backgroundColor: tint(theme.backgroundColor, theme.surfaceColor, 0.5), borderColor: border, borderRadius: radius }, sizeStyle(props)], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: styles15.row, children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles15.tableCell, cellBorder], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { numberOfLines: 1, style: [styles15.tableHeaderText, { color: theme.mutedTextColor, fontFamily: font }], children: column }) }, index)) }),
+          rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: styles15.row, children: row.map((cell, cellIndex) => (
+            // Last row keeps the card's own edge — no trailing border line.
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles15.tableCell, rowIndex < rows.length - 1 && cellBorder], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: { color: theme.textColor, fontSize: cellFontSize, fontFamily: font }, children: String(cell) }) }, cellIndex)
+          )) }, rowIndex))
+        ] })
+      );
+    }
+    case "steps": {
+      const items = props.items || [];
+      const current = Math.max(1, Math.min(Number(props.current) || 1, items.length));
+      const fontSize = fontSizeOf(props, 15);
+      return (
+        // align moves the whole tracker as a unit so rows stay internally
+        // left-aligned and the dots keep a straight vertical line. compact
+        // (default): natural gap. stretch: spread steps to fill the container
+        // height (pairs with the height prop).
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_react_native16.View,
+          {
+            testID,
+            style: [styles15.column, { alignSelf: alignOf(props.align) }, props.layout === "stretch" ? styles15.stepsStretch : styles15.stepsCompact, sizeStyle(props)],
+            children: items.map((label, index) => {
+              const stepNo = index + 1;
+              const done = stepNo < current;
+              const active = stepNo === current;
+              const dotColor = done || active ? solidColor(theme.primaryColor) : border;
+              return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { style: styles15.stepRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles15.stepDot, { backgroundColor: done || active ? dotColor : "transparent", borderColor: dotColor }], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.stepIndex, { color: done || active ? theme.primaryTextColor : theme.mutedTextColor, fontFamily: font }], children: done ? "\u2713" : String(stepNo) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.stepLabel, { color: active ? theme.textColor : theme.mutedTextColor, fontWeight: active ? "600" : "400", fontSize, fontFamily: font }], children: label })
+              ] }, index);
+            })
+          }
+        )
+      );
+    }
+    case "callout": {
+      const accent = calloutAccent(String(props.tone ?? "info"), theme);
+      const fontSize = fontSizeOf(props, 14);
+      const textAlign = textAlignOf(props.align);
+      return (
+        // Soft brand-tinted card; the tint + accent title carry the tone.
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { testID, style: [styles15.callout, { backgroundColor: tint(theme.backgroundColor, accent, 0.07), borderRadius: radius }, sizeStyle(props)], children: [
+          !!props.title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: [styles15.calloutTitle, { color: accent, fontFamily: font, textAlign }], children: String(props.title) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { style: { color: theme.textColor, fontSize, lineHeight: fontSize * 1.625, fontFamily: font, textAlign }, children: String(props.text ?? "") })
+        ] })
+      );
+    }
+    case "expander":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExpanderBlock, { node, children: children(formNames) });
+    case "button":
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ButtonBlock, { node, formNames });
+    default:
+      if (node.type.startsWith("input_")) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputBlock, { node });
+      return node.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: children(formNames) }) : null;
+  }
+};
+var BlocksStep = ({ config, disabled, onAction, onSandboxAction }) => {
+  const theme = useBlocksTheme();
+  const [values, setValues] = (0, import_react14.useState)({});
+  const [errors, setErrors] = (0, import_react14.useState)({});
+  const [submitting, setSubmitting] = (0, import_react14.useState)(false);
+  if ((config.schema_version ?? 1) > SUPPORTED_BLOCKS_SCHEMA_VERSION) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.Text, { testID: ringgId("blocks-unsupported"), style: [styles15.unsupported, { color: theme.mutedTextColor, fontFamily: resolveFontFamily(theme.fontFamily) }], children: "This content needs a newer version of the widget." });
+  }
+  const defaultsOf = (name) => findInputs(config.blocks, [name])[0]?.props?.default;
+  const getValue = (name, fallback) => {
+    if (name in values) return values[name];
+    const fromProps = defaultsOf(name);
+    return fromProps ?? fallback;
+  };
+  const setValue = (name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => {
+      if (!prev[name]) return prev;
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  };
+  const submitRespond = (action, formNames, label) => {
+    if (!action.action_id) return;
+    const scopeInputs = findInputs(config.blocks, formNames).filter((input) => evaluateVisibleIf(input.visible_if, getValue));
+    const nextErrors = {};
+    const collected = {};
+    for (const input of scopeInputs) {
+      const name = input.name;
+      if (!name) continue;
+      const value = getValue(name);
+      const isEmpty = value === void 0 || value === "" || Array.isArray(value) && value.length === 0;
+      if (input.props?.required && isEmpty) {
+        nextErrors[name] = `${input.props?.label || name} is required`;
+        continue;
+      }
+      if (input.type === "input_email" && typeof value === "string" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+        nextErrors[name] = "Please enter a valid email address";
+        continue;
+      }
+      if (!isEmpty && value !== void 0) collected[name] = value;
+    }
+    if (Object.keys(nextErrors).length) {
+      setErrors(nextErrors);
+      return;
+    }
+    const result = onAction({ action_id: action.action_id, value: action.value, values: collected, label });
+    if (result instanceof Promise) {
+      setSubmitting(true);
+      void result.finally(() => setSubmitting(false));
+    }
+  };
+  const state = { getValue, setValue, errors, disabled: !!disabled || submitting, submitRespond, onSandboxAction };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlocksStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { testID: ringgId("blocks"), style: styles15.blocks, children: config.blocks.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlockRenderer, { node, formNames: null, inCarousel: false }, `${node.id ?? "b"}-${index}`)) }) });
+};
+var styles15 = import_react_native16.StyleSheet.create({
+  badge: { flexDirection: "row", alignItems: "center", borderWidth: 1, borderRadius: 9999, paddingHorizontal: 8, paddingVertical: 2 },
+  badgeText: { fontWeight: "600" },
+  blocks: { width: "100%", flexDirection: "column", gap: 12 },
+  button: { flexDirection: "row", alignItems: "center", justifyContent: "center", borderWidth: 1, paddingHorizontal: 16, paddingVertical: 8 },
+  buttonLabel: { fontWeight: "600", textAlign: "center" },
+  callout: { flexDirection: "column", gap: 6, paddingHorizontal: 16, paddingVertical: 12 },
+  // tracking-wider (0.05em) at the title's 11px.
+  calloutTitle: { fontSize: 11, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.55 },
+  card: { flexDirection: "column", gap: 8, borderWidth: 1 },
+  cardFooter: { marginTop: "auto", flexDirection: "column", gap: 8 },
+  carousel: { marginHorizontal: -4 },
+  carouselCard: { width: CAROUSEL_CARD_WIDTH, flexShrink: 0 },
+  carouselContent: { flexDirection: "row", alignItems: "stretch", gap: CAROUSEL_GAP, paddingHorizontal: 4, paddingBottom: 8 },
+  checkSquare: { width: 18, height: 18, flexShrink: 0, alignItems: "center", justifyContent: "center", borderWidth: 1, borderRadius: 5 },
+  checkboxRow: { flexDirection: "row", alignItems: "center", gap: 10, paddingVertical: 4 },
+  column: { flexDirection: "column" },
+  divider: { flexShrink: 0 },
+  error: { fontSize: 12, marginTop: 2 },
+  expander: { borderWidth: 1, overflow: "hidden" },
+  expanderBody: { flexDirection: "column", gap: 8, paddingHorizontal: 12, paddingBottom: 12 },
+  expanderSummary: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, paddingHorizontal: 12, paddingVertical: 8 },
+  expanderTitle: { flexShrink: 1, fontWeight: "500" },
+  facts: { flexDirection: "column", gap: 4 },
+  factsRow: { flexDirection: "row", alignItems: "baseline", justifyContent: "space-between", gap: 12 },
+  factsValue: { flexShrink: 1, textAlign: "right", fontWeight: "500" },
+  field: { borderWidth: 1, paddingHorizontal: 12, paddingVertical: 10 },
+  fieldIcon: { position: "absolute", right: 12, top: 0, bottom: 0, justifyContent: "center" },
+  fieldWithIcon: { minHeight: 42, paddingRight: 40 },
+  form: { flexDirection: "column", gap: 12 },
+  header: { fontWeight: "600" },
+  imageBox: { overflow: "hidden" },
+  imageFill: { width: "100%", height: "100%" },
+  imagePlaceholder: {
+    minHeight: 80,
+    width: "100%",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    paddingHorizontal: 12,
+    paddingVertical: 16
+  },
+  label: { fontSize: 12, fontWeight: "500" },
+  labelRow: { flexDirection: "row", alignItems: "center", gap: 4, marginBottom: 4 },
+  nameless: { borderWidth: 1, borderStyle: "dashed", borderRadius: 4, paddingHorizontal: 12, paddingVertical: 8 },
+  namelessText: { fontSize: 12 },
+  pill: { borderWidth: 1, borderRadius: 9999, paddingHorizontal: 14, paddingVertical: 6 },
+  pillLabel: { fontWeight: "500" },
+  pillRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  placeholderText: { maxWidth: "100%", fontSize: 12 },
+  ratingRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+  row: { flexDirection: "row" },
+  selectMenu: { borderWidth: 1, marginTop: 4, paddingVertical: 4 },
+  selectOption: { flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 12, paddingVertical: 8 },
+  selectOptionLabel: { flex: 1 },
+  selectTrigger: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, borderWidth: 1, paddingHorizontal: 12, paddingVertical: 10 },
+  selectValue: { flex: 1 },
+  stepDot: { width: 20, height: 20, flexShrink: 0, alignItems: "center", justifyContent: "center", borderWidth: 1.5, borderRadius: 9999 },
+  stepIndex: { fontSize: 10, fontWeight: "600" },
+  stepLabel: { flexShrink: 1 },
+  stepRow: { flexDirection: "row", alignItems: "center", gap: 10 },
+  stepsCompact: { gap: 8 },
+  stepsStretch: { justifyContent: "space-between" },
+  table: { overflow: "hidden", borderWidth: 1 },
+  tableCell: { flex: 1, paddingHorizontal: 12, paddingVertical: 8 },
+  tableHeaderText: { fontSize: 12, fontWeight: "600" },
+  textarea: { minHeight: TEXTAREA_MIN_HEIGHT, textAlignVertical: "top" },
+  unsupported: { fontSize: 15 }
+});
+var blocks_step_default = BlocksStep;
+
+// src/components/feedback-screen.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var DEFAULT_STAR_FILLED_COLOR = "#F5A623";
+var DEFAULT_STAR_EMPTY_COLOR = "#D1D5DB";
+var PLACEHOLDER_COLOR = "#9CA3AF";
+var DEFAULT_STARS_COUNT = 5;
+var STAR_SIZE = 32;
+var COMMENT_MAX_LENGTH = 500;
+var COMMENT_RADIUS_FALLBACK = 16;
+var SUBMIT_HEIGHT = 44;
+var STAR_PATH = "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z";
+var STAR_VIEW_BOX = 24;
+var STAR_STROKE_WIDTH = 1.5;
+var STAR_PRESS_SCALE = 1.1;
+var STAR_PRESS_SPRING = { stiffness: 400, damping: 22, mass: 1 };
+var StarIcon = ({ filled, filledColor, emptyColor, size = STAR_SIZE, accessibilityLabel, onPress }) => {
+  const scale = (0, import_react15.useRef)(new import_react_native17.Animated.Value(1)).current;
+  const springTo = (toValue) => {
+    import_react_native17.Animated.spring(scale, { toValue, ...STAR_PRESS_SPRING, useNativeDriver: true }).start();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Touchable,
+    {
+      onPress,
+      onPressIn: () => springTo(STAR_PRESS_SCALE),
+      onPressOut: () => springTo(1),
+      testID: ringgId("feedback-star"),
+      accessibilityLabel,
+      style: styles16.star,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.Animated.View, { style: { transform: [{ scale }] }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native_svg4.default, { width: size, height: size, viewBox: `0 0 ${STAR_VIEW_BOX} ${STAR_VIEW_BOX}`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_react_native_svg4.Path,
+        {
+          d: STAR_PATH,
+          fill: filled ? filledColor : "none",
+          stroke: filled ? filledColor : emptyColor,
+          strokeWidth: STAR_STROKE_WIDTH,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) }) })
+    }
+  );
+};
+var noopApi = async () => ({ success: true, message: "" });
+var TRANSCRIPT_STAR_SIZE = 28;
+var FeedbackScreen = ({ callMode, isSubmitting, feedbackScreenConfig, messages, title, logoUrl, logoStyles, onSubmit, onSkip }) => {
+  const theme = useWidgetTheme();
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const [rating, setRating] = (0, import_react15.useState)(0);
+  const [comment, setComment] = (0, import_react15.useState)("");
+  const [isCommentFocused, setIsCommentFocused] = (0, import_react15.useState)(false);
+  const starsCount = feedbackScreenConfig?.starsCount ?? DEFAULT_STARS_COUNT;
+  const stars = Array.from({ length: starsCount }, (_, index) => index + 1);
+  const starFilledColor = feedbackScreenConfig?.starsStyles?.filledColor ?? DEFAULT_STAR_FILLED_COLOR;
+  const starEmptyColor = feedbackScreenConfig?.starsStyles?.emptyColor ?? DEFAULT_STAR_EMPTY_COLOR;
+  const isSubmitDisabled = rating === 0 || isSubmitting;
+  const submitOverrides = toViewStyle(feedbackScreenConfig?.submitBtnStyles);
+  const submitFill = typeof submitOverrides.backgroundColor === "string" ? submitOverrides.backgroundColor : isSubmitDisabled ? theme.surfaceColor : theme.primaryColor;
+  const handleSubmit = () => {
+    if (rating > 0) onSubmit(rating, comment);
+  };
+  const transcript = (0, import_react15.useMemo)(
+    () => (messages ?? []).filter((message) => message.kind !== "system" && (message.componentType ? Boolean(message.componentData) : Boolean(message.message.trim()))),
+    [messages]
+  );
+  const scroller = (0, import_react15.useRef)(null);
+  if (transcript.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native17.View, { testID: ringgId("feedback-screen"), style: styles16.transcriptScreen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(header_default, { isCalling: true, isLoading: false, title: title ?? "", description: "", logoUrl, logoStyles }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        import_react_native17.ScrollView,
+        {
+          testID: ringgId("transcript"),
+          ref: scroller,
+          style: styles16.transcript,
+          contentContainerStyle: styles16.transcriptList,
+          onContentSizeChange: () => scroller.current?.scrollToEnd({ animated: false }),
+          showsVerticalScrollIndicator: false,
+          children: [
+            transcript.map((message, index) => {
+              if (message.componentType && message.componentData) {
+                const componentData = message.componentData;
+                if (isBlocks(componentData)) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.View, { testID: ringgId("blocks-widget"), style: styles16.replayed, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(blocks_step_default, { config: componentData.data, disabled: true, onAction: async () => {
+                  } }) }, `c_${message.timestamp}__${index}`);
+                }
+                return (
+                  // pointerEvents none is what makes the replay read-only — the
+                  // flow renders exactly as it did, and answers nothing.
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.View, { pointerEvents: "none", style: styles16.replayed, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(interactive_flow_default, { initialComponent: componentData, onApiCall: noopApi }) }, `c_${message.timestamp}__${index}`)
+                );
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(message_item_default, { itemIndex: index, message }, `${message.timestamp}__${index}`);
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native17.View, { testID: ringgId("feedback-footer"), style: styles16.feedbackFooter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native17.View, { testID: ringgId("conversation-ended"), style: styles16.endedRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.View, { style: [styles16.endedRule, { backgroundColor: solidColor(theme.borderColor) }] }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.Text, { style: [styles16.endedLabel, { color: theme.mutedTextColor, fontFamily }], children: "Conversation ended" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.View, { style: [styles16.endedRule, { backgroundColor: solidColor(theme.borderColor) }] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.Text, { testID: ringgId("feedback-prompt"), style: [styles16.description, { color: theme.mutedTextColor, fontFamily }], children: feedbackScreenConfig?.title ?? "Please rate your experience" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.View, { testID: ringgId("feedback-stars"), style: styles16.stars, children: stars.map((star) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                StarIcon,
+                {
+                  filled: star <= rating,
+                  filledColor: starFilledColor,
+                  emptyColor: starEmptyColor,
+                  size: TRANSCRIPT_STAR_SIZE,
+                  accessibilityLabel: `Rate ${star} of ${starsCount}`,
+                  onPress: () => {
+                    if (isSubmitting) return;
+                    setRating(star);
+                    onSubmit(star, "");
+                  }
+                },
+                star
+              )) })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+  return (
+    // iOS keeps the keyboard over the content; Android resizes the window
+    // itself, and padding on top of that double-counts the inset.
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native17.KeyboardAvoidingView, { testID: ringgId("feedback-screen"), behavior: import_react_native17.Platform.OS === "ios" ? "padding" : void 0, style: styles16.screen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native17.View, { testID: ringgId("feedback-header"), style: styles16.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.Text, { testID: ringgId("feedback-title"), style: [styles16.title, { color: theme.textColor, fontFamily }], children: feedbackScreenConfig?.title ?? `How was your ${callMode === "text" ? "chat" : "call"}?` }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.Text, { testID: ringgId("feedback-description"), style: [styles16.description, { color: theme.mutedTextColor, fontFamily }], children: feedbackScreenConfig?.description ?? "Your feedback helps us improve!" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.View, { testID: ringgId("feedback-stars"), style: styles16.stars, children: stars.map((star) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        StarIcon,
+        {
+          filled: star <= rating,
+          filledColor: starFilledColor,
+          emptyColor: starEmptyColor,
+          accessibilityLabel: `Rate ${star} of ${starsCount}`,
+          onPress: () => setRating(star)
+        },
+        star
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_react_native17.TextInput,
+        {
+          testID: ringgId("feedback-comment"),
+          value: comment,
+          onChangeText: setComment,
+          placeholder: feedbackScreenConfig?.placeholder ?? "We'd love to hear more...",
+          placeholderTextColor: PLACEHOLDER_COLOR,
+          multiline: true,
+          textAlignVertical: "top",
+          maxLength: COMMENT_MAX_LENGTH,
+          onFocus: () => setIsCommentFocused(true),
+          onBlur: () => setIsCommentFocused(false),
+          style: [
+            styles16.comment,
+            {
+              backgroundColor: solidColor(theme.backgroundColor),
+              color: theme.textColor,
+              // Web's focus ring sits OUTSIDE the border; growing a border here
+              // would reflow the box, so the border itself takes the accent.
+              borderColor: isCommentFocused ? solidColor(theme.primaryColor) : solidColor(theme.borderColor),
+              borderRadius: resolveRadius(theme.borderRadius, COMMENT_RADIUS_FALLBACK),
+              fontFamily
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native17.View, { testID: ringgId("feedback-actions"), style: styles16.actions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Touchable, { onPress: handleSubmit, disabled: isSubmitDisabled, testID: ringgId("feedback-submit"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GradientFill, { color: submitFill, style: [styles16.submit, { borderRadius: resolveButtonRadius(theme.buttonStyle) }, submitOverrides], children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.Text, { style: [styles16.submitLabel, { color: isSubmitDisabled ? theme.mutedTextColor : theme.primaryTextColor, fontFamily }], numberOfLines: 1, children: feedbackScreenConfig?.submitBtnCTA ?? "Submit Feedback" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Touchable, { onPress: onSkip, disabled: isSubmitting, testID: ringgId("feedback-skip"), style: styles16.skip, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native17.Text, { style: [styles16.skipLabel, { color: theme.mutedTextColor, fontFamily }], children: "Skip" }) })
+      ] })
+    ] })
+  );
+};
+var feedback_screen_default = FeedbackScreen;
+var styles16 = import_react_native17.StyleSheet.create({
+  screen: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24, gap: 16 },
+  // Transcript variant. The header floats over the list the same way it does
+  // during a live call, so the list clears it with padding rather than layout.
+  transcriptScreen: { flex: 1, padding: 8, gap: 8 },
+  transcript: { flex: 1 },
+  transcriptList: { flexGrow: 1, justifyContent: "flex-end", gap: 12, paddingTop: 48 },
+  replayed: { width: "100%" },
+  feedbackFooter: { gap: 10, paddingHorizontal: 8, paddingVertical: 8 },
+  endedRow: { flexDirection: "row", alignItems: "center", gap: 12 },
+  endedRule: { flex: 1, height: import_react_native17.StyleSheet.hairlineWidth },
+  endedLabel: { fontSize: 13 },
+  header: { alignItems: "center" },
+  title: { fontSize: 18, lineHeight: 28, fontWeight: "500", textAlign: "center", marginBottom: 4 },
+  description: { fontSize: 15, lineHeight: 22, textAlign: "center" },
+  stars: { flexDirection: "row", gap: 4, marginVertical: 8 },
+  star: { padding: 4 },
+  comment: { alignSelf: "stretch", minHeight: 80, padding: 12, fontSize: 15, borderWidth: 1 },
+  actions: { alignSelf: "stretch", gap: 4, marginTop: 8 },
+  submit: { height: SUBMIT_HEIGHT, alignItems: "center", justifyContent: "center" },
+  submitLabel: { fontSize: 15, fontWeight: "500" },
+  skip: { paddingVertical: 8, alignItems: "center" },
+  skipLabel: { fontSize: 15 }
+});
+
+// src/components/loading-bar.tsx
+var import_react16 = require("react");
+var import_react_native18 = require("react-native");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SWEEP_DURATION_MS = 1400;
+var MIDPOINT = 0.4;
+var KEYFRAMES = [0, MIDPOINT, 1];
+var TRAVEL_RATIOS = [-1, 0, 2.5];
+var STRETCH_SCALES = [0.4, 0.6, 0.4];
+var SEGMENT_EASING = import_react_native18.Easing.bezier(0.65, 0, 0.35, 1);
+var SWEEP_EASING = (t) => t < MIDPOINT ? MIDPOINT * SEGMENT_EASING(t / MIDPOINT) : MIDPOINT + (1 - MIDPOINT) * SEGMENT_EASING((t - MIDPOINT) / (1 - MIDPOINT));
+var FILL_WIDTH_RATIO = 1 / 3;
+var ROW_HEIGHT = 48;
+var TRACK_HEIGHT = 6;
+var PILL_RADIUS4 = 9999;
+var LoadingBar = ({ ariaLabel = "Connecting", style }) => {
+  const theme = useWidgetTheme();
+  const [trackWidth, setTrackWidth] = (0, import_react16.useState)(0);
+  const progress = (0, import_react16.useRef)(new import_react_native18.Animated.Value(0)).current;
+  (0, import_react16.useEffect)(() => {
+    const sweep = import_react_native18.Animated.loop(import_react_native18.Animated.timing(progress, { toValue: 1, duration: SWEEP_DURATION_MS, easing: SWEEP_EASING, useNativeDriver: true }));
+    sweep.start();
+    return () => sweep.stop();
+  }, [progress]);
+  const onTrackLayout = (event) => setTrackWidth(event.nativeEvent.layout.width);
+  const fillWidth = trackWidth * FILL_WIDTH_RATIO;
+  const translateX = progress.interpolate({ inputRange: KEYFRAMES, outputRange: TRAVEL_RATIOS.map((ratio) => ratio * fillWidth) });
+  const scaleX = progress.interpolate({ inputRange: KEYFRAMES, outputRange: STRETCH_SCALES });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native18.View, { testID: ringgId("loading-bar"), style: [styles17.container, style], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react_native18.View,
+    {
+      testID: ringgId("loading-bar-track"),
+      accessibilityRole: "progressbar",
+      accessibilityLabel: ariaLabel,
+      accessibilityState: { busy: true },
+      onLayout: onTrackLayout,
+      style: [styles17.track, { backgroundColor: solidColor(theme.borderColor) }],
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native18.Animated.View, { testID: ringgId("loading-bar-fill"), style: [styles17.fill, { width: fillWidth, transform: [{ translateX }, { scaleX }] }], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GradientFill, { color: theme.primaryColor, style: styles17.fillSurface }) })
+    }
+  ) });
+};
+var loading_bar_default = LoadingBar;
+var styles17 = import_react_native18.StyleSheet.create({
+  container: { height: ROW_HEIGHT, flexDirection: "row", alignItems: "center", justifyContent: "center" },
+  track: { height: TRACK_HEIGHT, width: "90%", borderRadius: PILL_RADIUS4, overflow: "hidden" },
+  fill: { position: "absolute", top: 0, bottom: 0, left: 0, borderRadius: PILL_RADIUS4 },
+  fillSurface: { ...import_react_native18.StyleSheet.absoluteFill, borderRadius: PILL_RADIUS4 }
+});
+
+// src/components/system-log.tsx
+var import_react_native19 = require("react-native");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var INFO_DOT_COLOR = "#22c55e";
+var ERROR_DOT_COLOR = "#ef4444";
+var MONOSPACE_FAMILY = import_react_native19.Platform.select({ ios: "Menlo", android: "monospace" });
+var dotColorFor = (level) => {
+  switch (level) {
+    case "error":
+      return ERROR_DOT_COLOR;
+    case "info":
+    default:
+      return INFO_DOT_COLOR;
+  }
+};
+var SystemLog = ({ label, meta, level = "info" }) => {
+  const theme = useWidgetTheme();
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native19.View, { testID: ringgId("system-log"), style: styles18.row, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_react_native19.View,
+    {
+      testID: ringgId("system-log-pill"),
+      accessibilityRole: "text",
+      accessibilityLiveRegion: "polite",
+      style: [styles18.pill, { borderColor: solidColor(theme.borderColor), backgroundColor: theme.backgroundColor }],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native19.View, { testID: ringgId("system-log-dot"), style: [styles18.dot, { backgroundColor: dotColorFor(level) }] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native19.Text, { testID: ringgId("system-log-label"), numberOfLines: 1, style: [styles18.label, { color: theme.textColor, fontFamily }], children: label }),
+        meta ? (
+          // Web puts the full string in a `title` tooltip for the truncated case.
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native19.Text, { testID: ringgId("system-log-meta"), numberOfLines: 1, accessibilityLabel: meta, style: [styles18.meta, { color: theme.mutedTextColor }], children: meta })
+        ) : null
+      ]
+    }
+  ) });
+};
+var system_log_default = SystemLog;
+var styles18 = import_react_native19.StyleSheet.create({
+  row: { flexDirection: "row", justifyContent: "center", marginVertical: 4 },
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 9999,
+    borderWidth: 1,
+    // `max-w-full`: the pill may shrink, but never past the transcript width.
+    flexShrink: 1
+  },
+  dot: { width: 6, height: 6, borderRadius: 3, flexShrink: 0 },
+  label: { fontSize: 11, fontWeight: "500", flexShrink: 1 },
+  meta: { fontSize: 11, fontFamily: MONOSPACE_FAMILY, flexShrink: 1 }
+});
+
+// src/components/typing-indicator.tsx
+var import_react17 = require("react");
+var import_react_native20 = require("react-native");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DEFAULT_TYPING_WORDS = ["Thinking", "Reasoning", "Working on it", "Almost there"];
+var WORD_INTERVAL_MS = 2200;
+var SWAP_MS = 250;
+var SWAP_OFFSET = 2;
+var WORD_TINT = 0.45;
+var DOT_COUNT = 3;
+var DOT_CYCLE_MS = 1200;
+var DOT_STAGGER_MS = 160;
+var DOT_RISE_MS = 300;
+var DOT_LIFT = 2;
+var DOT_DIM_OPACITY = 0.4;
+var DOT_SLOTS = Array.from({ length: DOT_COUNT }, (_, index) => index);
+var mixColors = (color, base, amount) => {
+  const from = (0, import_react_native20.processColor)(color);
+  const to = (0, import_react_native20.processColor)(base);
+  if (typeof from !== "number" || typeof to !== "number") return base;
+  const channel = (shift) => Math.round((from >>> shift & 255) * amount + (to >>> shift & 255) * (1 - amount));
+  return `rgba(${channel(16)}, ${channel(8)}, ${channel(0)}, ${(channel(24) / 255).toFixed(3)})`;
+};
+var swapTo = (fade, lift, opacity, offset) => import_react_native20.Animated.parallel([
+  import_react_native20.Animated.timing(fade, { toValue: opacity, duration: SWAP_MS, useNativeDriver: true }),
+  import_react_native20.Animated.timing(lift, { toValue: offset, duration: SWAP_MS, useNativeDriver: true })
+]);
+var TypingDot = ({ index, color, fontFamily }) => {
+  const bounce = (0, import_react17.useRef)(new import_react_native20.Animated.Value(0)).current;
+  (0, import_react17.useEffect)(() => {
+    const loop = import_react_native20.Animated.loop(
+      import_react_native20.Animated.sequence([
+        import_react_native20.Animated.delay(index * DOT_STAGGER_MS),
+        import_react_native20.Animated.timing(bounce, { toValue: 1, duration: DOT_RISE_MS, useNativeDriver: true }),
+        import_react_native20.Animated.timing(bounce, { toValue: 0, duration: DOT_RISE_MS, useNativeDriver: true }),
+        import_react_native20.Animated.delay(DOT_CYCLE_MS - index * DOT_STAGGER_MS - 2 * DOT_RISE_MS)
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [bounce, index]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react_native20.Animated.Text,
+    {
+      style: [
+        styles19.text,
+        {
+          color,
+          fontFamily,
+          opacity: bounce.interpolate({ inputRange: [0, 1], outputRange: [DOT_DIM_OPACITY, 1] }),
+          transform: [{ translateY: bounce.interpolate({ inputRange: [0, 1], outputRange: [0, -DOT_LIFT] }) }]
+        }
+      ],
+      children: "."
+    }
+  );
+};
+var TypingIndicator = ({ words }) => {
+  const theme = useWidgetTheme();
+  const list = words && words.length > 0 ? words : DEFAULT_TYPING_WORDS;
+  const [index, setIndex] = (0, import_react17.useState)(0);
+  const fade = (0, import_react17.useRef)(new import_react_native20.Animated.Value(0)).current;
+  const lift = (0, import_react17.useRef)(new import_react_native20.Animated.Value(SWAP_OFFSET)).current;
+  (0, import_react17.useEffect)(() => {
+    const enter = swapTo(fade, lift, 1, 0);
+    enter.start();
+    return () => enter.stop();
+  }, [fade, lift]);
+  (0, import_react17.useEffect)(() => {
+    const count = list.length;
+    if (count <= 1) return;
+    let swap;
+    const id = setInterval(() => {
+      swap = swapTo(fade, lift, 0, -SWAP_OFFSET);
+      swap.start(({ finished }) => {
+        if (!finished) return;
+        setIndex((current) => (current + 1) % count);
+        lift.setValue(SWAP_OFFSET);
+        swap = swapTo(fade, lift, 1, 0);
+        swap.start();
+      });
+    }, WORD_INTERVAL_MS);
+    return () => {
+      clearInterval(id);
+      swap?.stop();
+      fade.setValue(1);
+      lift.setValue(0);
+    };
+  }, [fade, lift, list.length]);
+  const word = list[index % list.length] ?? "";
+  const color = mixColors(solidColor(theme.primaryColor), solidColor(theme.mutedTextColor), WORD_TINT);
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  return (
+    // RN has no `role="status"`; an accessible container with a live region is
+    // how both platforms announce a changing status without reading each word.
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native20.View, { testID: ringgId("typing-indicator"), accessible: true, accessibilityLiveRegion: "polite", accessibilityLabel: "Agent is thinking", style: styles19.row, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native20.Animated.View, { testID: ringgId("typing-indicator-word"), style: [styles19.word, { opacity: fade, transform: [{ translateY: lift }] }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native20.Text, { style: [styles19.text, { color, fontFamily }], children: word }),
+      DOT_SLOTS.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TypingDot, { index: slot, color, fontFamily }, slot))
+    ] }) })
+  );
+};
+var typing_indicator_default = TypingIndicator;
+var styles19 = import_react_native20.StyleSheet.create({
+  /** `mr-auto` keeps the indicator hugging the left edge of the transcript. */
+  row: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start", paddingVertical: 8 },
+  word: { flexDirection: "row", alignItems: "center" },
+  text: { fontSize: 14, lineHeight: 20, fontWeight: "500" }
+});
+
+// src/components/voice-leaves.tsx
+var import_react19 = require("react");
+var import_react_native23 = require("react-native");
+var import_livekit_client2 = require("livekit-client");
+
+// src/transport/agent.ts
+var import_livekit_client = require("livekit-client");
+function isAgentIdentity(identity) {
+  return identity?.includes("agent") ?? false;
+}
+function isAgentParticipant(participant) {
+  return participant.kind === import_livekit_client.ParticipantKind.AGENT || isAgentIdentity(participant.identity);
+}
+function findAgentParticipant(room) {
+  const remotes = Array.from(room.remoteParticipants.values());
+  return remotes.find((p) => p.kind === import_livekit_client.ParticipantKind.AGENT) ?? remotes.find((p) => isAgentIdentity(p.identity));
+}
+
+// src/components/dot-audio-visualizer.tsx
+var import_react18 = require("react");
+var import_react_native21 = require("react-native");
+var import_react_native22 = require("@livekit/react-native");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var BANDS = 22;
+var MIN_ROWS = 5;
+var MAX_ROWS = 21;
+var PX_PER_ROW = 22;
+var DOT_SIZE = 8;
+var UNLIT_OPACITY = 0.15;
+var UNLIT_SCALE = 0.6;
+var DOT_SPRING = { stiffness: 220, damping: 22, mass: 1 };
+var AMBIENT_TICK_MS = 40;
+var WEB_STEP_PER_FRAME = 0.04;
+var WEB_FRAMES_PER_SECOND = 60;
+var AMBIENT_STEP = WEB_STEP_PER_FRAME * WEB_FRAMES_PER_SECOND / (1e3 / AMBIENT_TICK_MS);
+var AMBIENT_FLOOR = 0.15;
+var AMBIENT_SWING = 0.25;
+var AMBIENT_PHASE = 0.5;
+var rowsForHeight = (height) => {
+  const raw = Math.max(MIN_ROWS, Math.min(MAX_ROWS, Math.floor(height / PX_PER_ROW)));
+  return raw % 2 === 0 ? raw - 1 : raw;
+};
+var useResponsiveRows = () => {
+  const [rows, setRows] = (0, import_react18.useState)(MIN_ROWS);
+  const onLayout = (0, import_react18.useCallback)((event) => {
+    setRows(rowsForHeight(event.nativeEvent.layout.height));
+  }, []);
+  return { rows, onLayout };
+};
+var useAmbientWave = (bands, enabled) => {
+  const [vals, setVals] = (0, import_react18.useState)(() => Array.from({ length: bands }, () => AMBIENT_FLOOR));
+  (0, import_react18.useEffect)(() => {
+    if (!enabled) return;
+    let t = 0;
+    const id = setInterval(() => {
+      t += AMBIENT_STEP;
+      setVals(Array.from({ length: bands }, (_, i) => AMBIENT_FLOOR + AMBIENT_SWING * Math.abs(Math.sin(t + i * AMBIENT_PHASE))));
+    }, AMBIENT_TICK_MS);
+    return () => clearInterval(id);
+  }, [bands, enabled]);
+  return vals;
+};
+var Dot = (0, import_react18.memo)(({ lit, color }) => {
+  const progress = (0, import_react18.useRef)(new import_react_native21.Animated.Value(lit ? 1 : 0)).current;
+  (0, import_react18.useEffect)(() => {
+    const spring = import_react_native21.Animated.spring(progress, { toValue: lit ? 1 : 0, ...DOT_SPRING, useNativeDriver: true });
+    spring.start();
+    return () => spring.stop();
+  }, [lit, progress]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react_native21.Animated.View,
+    {
+      testID: ringgId("voice-animation-dot"),
+      style: [
+        styles20.dot,
+        {
+          backgroundColor: color,
+          // Spring overshoot is welcome on scale (it gives the pop) but must
+          // not push opacity past opaque.
+          opacity: progress.interpolate({ inputRange: [0, 1], outputRange: [UNLIT_OPACITY, 1], extrapolate: "clamp" }),
+          transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [UNLIT_SCALE, 1] }) }]
+        }
+      ]
+    }
+  );
+});
+var DotColumn = ({ volume, color, rows }) => {
+  const centerIdx = Math.floor(rows / 2);
+  const perceived = Math.pow(Math.min(1, volume), 0.4);
+  const litRadius = perceived * (centerIdx + 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native21.View, { testID: ringgId("voice-animation-column"), style: styles20.column, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Dot, { lit: Math.abs(i - centerIdx) <= litRadius, color }, i)) });
+};
+var DotAudioVisualizer = ({ localTrack, remoteTrack, style }) => {
+  const theme = useWidgetTheme();
+  const dotColor = solidColor(theme.primaryColor);
+  const localVols = (0, import_react_native22.useMultibandTrackVolume)(localTrack, { bands: BANDS });
+  const remoteVols = (0, import_react_native22.useMultibandTrackVolume)(remoteTrack, { bands: BANDS });
+  const hasLiveTrack = Boolean(localTrack || remoteTrack);
+  const ambient = useAmbientWave(BANDS, !hasLiveTrack);
+  const liveVolumes = (0, import_react18.useMemo)(() => Array.from({ length: BANDS }, (_, i) => Math.max(localVols[i] ?? 0, remoteVols[i] ?? 0)), [localVols, remoteVols]);
+  const volumes = hasLiveTrack ? liveVolumes : ambient;
+  const { rows, onLayout } = useResponsiveRows();
+  return (
+    // Decorative, so hidden from both screen readers — the web leaf is
+    // `aria-hidden`, which takes one prop per platform here.
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react_native21.View,
+      {
+        testID: ringgId("voice-animation"),
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        onLayout,
+        style: [styles20.container, style],
+        children: volumes.map((vol, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DotColumn, { volume: vol, color: dotColor, rows }, i))
+      }
+    )
+  );
+};
+var dot_audio_visualizer_default = DotAudioVisualizer;
+var styles20 = import_react_native21.StyleSheet.create({
+  container: { flexDirection: "row", width: "100%", height: "100%", alignItems: "stretch", justifyContent: "space-around" },
+  column: { flexDirection: "column", alignItems: "center", justifyContent: "space-around" },
+  dot: { width: DOT_SIZE, height: DOT_SIZE, borderRadius: DOT_SIZE / 2 }
+});
+
+// src/components/voice-leaves.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var TRACK_EVENTS = [import_livekit_client2.RoomEvent.TrackSubscribed, import_livekit_client2.RoomEvent.TrackUnsubscribed, import_livekit_client2.RoomEvent.LocalTrackPublished, import_livekit_client2.RoomEvent.LocalTrackUnpublished, import_livekit_client2.RoomEvent.ParticipantConnected];
+var resolveTracks = (room) => {
+  if (!room) return {};
+  const agent = Array.from(room.remoteParticipants.values()).find(isAgentParticipant);
+  return {
+    localTrack: room.localParticipant.getTrackPublication(import_livekit_client2.Track.Source.Microphone)?.track,
+    remoteTrack: agent?.getTrackPublication(import_livekit_client2.Track.Source.Microphone)?.track
+  };
+};
+var useMicrophoneTracks = (room) => {
+  const [tracks, setTracks] = (0, import_react19.useState)(() => resolveTracks(room));
+  (0, import_react19.useEffect)(() => {
+    setTracks(resolveTracks(room));
+    if (!room) return;
+    const update = () => setTracks(resolveTracks(room));
+    for (const event of TRACK_EVENTS) room.on(event, update);
+    return () => {
+      for (const event of TRACK_EVENTS) room.off(event, update);
+    };
+  }, [room]);
+  return tracks;
+};
+var VoiceAnimationLeaf = ({ room, style }) => {
+  const { localTrack, remoteTrack } = useMicrophoneTracks(room);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(dot_audio_visualizer_default, { localTrack, remoteTrack, style: [styles21.fill, style] });
+};
+var styles21 = import_react_native23.StyleSheet.create({
+  fill: { flex: 1 }
+});
+
+// src/components/ui/dialog.tsx
+var import_react20 = require("react");
+var import_react_native25 = require("react-native");
+
+// src/components/ui/button.tsx
+var import_react_native24 = require("react-native");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var SIZES = {
+  default: { height: 36, paddingHorizontal: 16 },
+  sm: { height: 32, paddingHorizontal: 12 },
+  lg: { height: 40, paddingHorizontal: 32 },
+  icon: { height: 36, width: 36 }
+};
+var TEXT_SIZES = { default: 14, sm: 12, lg: 14, icon: 14 };
+var surfaceFor = (variant, theme) => {
+  switch (variant) {
+    case "outline":
+      return { background: theme.surfaceColor, foreground: theme.textColor, borderColor: solidColor(theme.borderColor) };
+    case "ghost":
+      return { background: "transparent", foreground: theme.mutedTextColor };
+    case "destructive":
+      return { background: theme.errorColor, foreground: "#ffffff" };
+    case "default":
+    default:
+      return { background: theme.primaryColor, foreground: theme.primaryTextColor };
+  }
+};
+var Button = ({ variant = "default", size = "default", onPress, disabled = false, style, textStyle, testID, accessibilityLabel, children }) => {
+  const theme = useWidgetTheme();
+  const surface = surfaceFor(variant, theme);
+  const content = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native24.Text, { style: [styles22.label, { color: surface.foreground, fontSize: TEXT_SIZES[size], fontFamily: resolveFontFamily(theme.fontFamily) }, textStyle], numberOfLines: 1, children }) : children;
+  const body = variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GradientFill, { color: surface.background, style: [styles22.base, SIZES[size], style], children: content }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native24.View, { style: [styles22.base, SIZES[size], { backgroundColor: surface.background }, surface.borderColor ? { borderWidth: import_react_native24.StyleSheet.hairlineWidth, borderColor: surface.borderColor } : null, style], children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Touchable, { onPress, disabled, testID, accessibilityLabel, children: body });
+};
+var styles22 = import_react_native24.StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    borderRadius: 6
+  },
+  label: { fontWeight: "500" }
+});
+
+// src/components/ui/dialog.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var SCRIM_OPACITY2 = 0.4;
+var CARD_MAX_WIDTH = 448;
+var CARD_RADIUS_FALLBACK = 16;
+var CARD_SPRING = { stiffness: 420, damping: 30, mass: 1 };
+var CARD_ENTER_SCALE = 0.94;
+var CARD_ENTER_OFFSET2 = 8;
+var ConfirmDialog = ({ open, title, description, confirmLabel, cancelLabel, onConfirm, onCancel }) => {
+  const theme = useWidgetTheme();
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const buttonRadius = resolveButtonRadius(theme.buttonStyle);
+  const enter = (0, import_react20.useRef)(new import_react_native25.Animated.Value(0)).current;
+  (0, import_react20.useEffect)(() => {
+    if (!open) {
+      enter.setValue(0);
+      return;
+    }
+    const pop = import_react_native25.Animated.spring(enter, { toValue: 1, ...CARD_SPRING, useNativeDriver: true });
+    pop.start();
+    return () => pop.stop();
+  }, [open, enter]);
+  (0, import_react20.useEffect)(() => {
+    if (!open) return;
+    const subscription = import_react_native25.BackHandler.addEventListener("hardwareBackPress", () => {
+      onCancel();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [open, onCancel]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native25.View, { style: styles23.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native25.View, { pointerEvents: "none", style: [import_react_native25.StyleSheet.absoluteFill, styles23.scrim, { backgroundColor: solidColor(theme.backgroundColor) }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      import_react_native25.Animated.View,
+      {
+        testID: ringgId("end-call-dialog"),
+        accessibilityViewIsModal: true,
+        style: [
+          styles23.card,
+          {
+            opacity: enter,
+            transform: [{ scale: enter.interpolate({ inputRange: [0, 1], outputRange: [CARD_ENTER_SCALE, 1] }) }, { translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [CARD_ENTER_OFFSET2, 0] }) }],
+            backgroundColor: solidColor(theme.backgroundColor),
+            borderColor: solidColor(theme.borderColor),
+            borderRadius: resolveRadius(theme.borderRadius, CARD_RADIUS_FALLBACK)
+          }
+        ],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native25.View, { testID: ringgId("end-call-dialog-header"), style: styles23.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native25.Text, { testID: ringgId("end-call-dialog-title"), style: [styles23.title, { color: theme.textColor, fontFamily }], children: title }),
+            description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native25.Text, { testID: ringgId("end-call-dialog-description"), style: [styles23.description, { color: theme.mutedTextColor, fontFamily }], children: description }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native25.View, { testID: ringgId("end-call-dialog-footer"), style: styles23.footer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "outline", onPress: onCancel, testID: ringgId("end-call-cancel"), style: { borderRadius: buttonRadius }, children: cancelLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { onPress: onConfirm, testID: ringgId("end-call-confirm"), style: { borderRadius: buttonRadius }, children: confirmLabel })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+var styles23 = import_react_native25.StyleSheet.create({
+  // Fills the widget panel rather than the window, and sits above the panel's
+  // own chrome (header 10, minimize/close 20) so nothing pokes through it.
+  root: { ...import_react_native25.StyleSheet.absoluteFill, zIndex: 30, alignItems: "center", justifyContent: "center", padding: 16 },
+  scrim: { opacity: SCRIM_OPACITY2 },
+  card: {
+    width: "100%",
+    maxWidth: CARD_MAX_WIDTH,
+    marginHorizontal: 16,
+    padding: 16,
+    borderWidth: 1,
+    gap: 12,
+    // The web card's two stacked shadows collapse into the one elevation each
+    // platform can express.
+    shadowColor: "#000000",
+    shadowOpacity: 0.08,
+    shadowRadius: 13,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 8
+  },
+  header: { gap: 6 },
+  title: { fontSize: 17, lineHeight: 24, fontWeight: "500" },
+  description: { fontSize: 15, lineHeight: 21 },
+  footer: { flexDirection: "row", justifyContent: "flex-end", gap: 8, paddingTop: 8 }
+});
+
+// src/hooks/use-microphone.ts
+var import_react21 = require("react");
+var import_livekit_client3 = require("livekit-client");
+var MIC_EVENTS = [import_livekit_client3.RoomEvent.TrackMuted, import_livekit_client3.RoomEvent.TrackUnmuted, import_livekit_client3.RoomEvent.LocalTrackPublished, import_livekit_client3.RoomEvent.LocalTrackUnpublished, import_livekit_client3.RoomEvent.ConnectionStateChanged];
+var useMicrophone = (room) => {
+  const [enabled, setEnabled] = (0, import_react21.useState)(() => room?.localParticipant.isMicrophoneEnabled ?? false);
+  (0, import_react21.useEffect)(() => {
+    if (!room) return;
+    const sync = () => setEnabled(room.localParticipant.isMicrophoneEnabled);
+    sync();
+    MIC_EVENTS.forEach((event) => room.on(event, sync));
+    return () => {
+      MIC_EVENTS.forEach((event) => room.off(event, sync));
+    };
+  }, [room]);
+  const toggle = (0, import_react21.useCallback)(() => {
+    if (!room) return;
+    const next = !room.localParticipant.isMicrophoneEnabled;
+    setEnabled(next);
+    void room.localParticipant.setMicrophoneEnabled(next).catch(() => setEnabled(!next));
+  }, [room]);
+  return room ? { enabled, toggle } : void 0;
+};
+
+// src/hooks/use-presence.ts
+var import_react22 = require("react");
+var import_react_native26 = require("react-native");
+var DEFAULT_MASS = 1;
+var usePresence = (visible, spring) => {
+  const progress = (0, import_react22.useRef)(new import_react_native26.Animated.Value(0)).current;
+  const [mounted, setMounted] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
+    if (visible) setMounted(true);
+    const animation = import_react_native26.Animated.spring(progress, {
+      toValue: visible ? 1 : 0,
+      stiffness: spring.stiffness,
+      damping: spring.damping,
+      mass: spring.mass ?? DEFAULT_MASS,
+      useNativeDriver: true
+    });
+    animation.start(({ finished }) => {
+      if (finished && !visible) setMounted(false);
+    });
+    return () => animation.stop();
+  }, [visible, progress, spring.stiffness, spring.damping, spring.mass]);
+  return { mounted, progress };
+};
+
+// src/lib/text-helpers.tsx
+var import_react23 = require("react");
+var import_react_native27 = require("react-native");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var LINK_COLOR = "#3b82f6";
+var escapeForRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var openUrl2 = (url) => {
+  void import_react_native27.Linking.openURL(url).catch(() => {
+  });
+};
+var renderTextWithLinks = (text, links, linkStyle) => {
+  if (!links) return text;
+  let parts = [text];
+  Object.entries(links).forEach(([word, url]) => {
+    parts = parts.flatMap((part, partIndex) => {
+      if (typeof part !== "string") return part;
+      const pattern = new RegExp(`\\b(${escapeForRegExp(word)})\\b`, "g");
+      return part.split(pattern).map(
+        (segment, segmentIndex) => segment === word ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native27.Text, { style: [{ color: LINK_COLOR }, linkStyle], onPress: () => openUrl2(url), children: word }, `${partIndex}-${segmentIndex}`) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react23.Fragment, { children: segment }, `${partIndex}-${segmentIndex}`)
+      );
+    });
+  });
+  return parts;
+};
+
+// src/RinggWidget.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var PANEL_MAX_WIDTH = 400;
+var PANEL_HEIGHT = 456;
+var PANEL_HEIGHT_RATIO = 0.9;
+var EDGE_INSET = 16;
+var BOTTOM_SAFE_INSET = 24;
+var TRIGGER_SIZE = 52;
+var TRIGGER_RADIUS = 20;
+var DEFAULT_TRIGGER_ICON_SIZE = 24;
+var PANEL_SPRING = { stiffness: 380, damping: 30 };
+var TRIGGER_SPRING = { stiffness: 400, damping: 25 };
+var LEGAL_LINKS = { "Privacy Policy": "https://www.ringg.ai/privacy", "T&C": "https://www.ringg.ai/terms" };
+var LEGAL_TEXT = "By continuing, you agree to our\nPrivacy Policy and T&C.";
+var isFreeButtonsMessage = (message) => {
+  const componentData = message?.componentData;
+  return !!componentData && isButtons(componentData) && componentData.data.presentation === "free";
+};
+var isAttachableAgentMessage = (message) => !!message && !message.componentType && !message.isSelf && Boolean(message.message.trim());
+var WidgetPanel = ({ controller, room, width, height }) => {
+  const theme = useWidgetTheme();
+  const { config } = controller;
+  const {
+    title = WIDGET_DEFAULTS.title,
+    description = WIDGET_DEFAULTS.description,
+    buttons,
+    defaultExpanded = WIDGET_DEFAULTS.defaultExpanded,
+    hideTabSelector = WIDGET_DEFAULTS.hideTabSelector,
+    bypassStartScreen = WIDGET_DEFAULTS.bypassStartScreen,
+    logoUrl,
+    logoStyles,
+    typingWords,
+    legalDisclaimer,
+    feedbackScreen,
+    voiceCall
+  } = config;
+  const shell = useRinggShell(controller);
+  const session = useRinggSession(controller);
+  const { messages } = useRinggMessages(controller);
+  const { isTyping: isAgentTyping } = useRinggTyping(controller);
+  const { completedFlowIds } = useRinggComponents(controller);
+  const { commands } = useRinggSlashCommands(controller);
+  const [alertEndCall, setAlertEndCall] = (0, import_react24.useState)(false);
+  const microphone = useMicrophone(room);
+  const callMode = shell.callMode;
+  const showFeedback = shell.viewState === "feedback";
+  const isLoading = session.isLoading;
+  const error = session.error;
+  const connectionState = session.connectionState;
+  const isCalling = connectionState === "connected";
+  const isSessionLive = session.isSessionLive;
+  const isAudioMode = callMode === "audio";
+  const showVoiceAnimation = isAudioMode && isCalling && (voiceCall?.showAnimation ?? WIDGET_DEFAULTS.voiceCallShowAnimation);
+  const showVoiceTranscript = !isAudioMode || (voiceCall?.showTranscript ?? WIDGET_DEFAULTS.voiceCallShowTranscript);
+  const mergedSlashCommands = (0, import_react24.useMemo)(() => [...commands], [commands]);
+  const sortedMessages = (0, import_react24.useMemo)(() => [...messages].sort((a, b) => a.timestamp - b.timestamp), [messages]);
+  const transcriptRef = (0, import_react24.useRef)(null);
+  const previousMessagesCountRef = (0, import_react24.useRef)(0);
+  (0, import_react24.useEffect)(() => {
+    const newMessageAdded = messages.length > previousMessagesCountRef.current;
+    previousMessagesCountRef.current = messages.length;
+    transcriptRef.current?.scrollToEnd({ animated: newMessageAdded });
+  }, [messages, isAgentTyping]);
+  const handleCallStart = (mediaType) => void controller.startCall(mediaType);
+  const handleCallEnd = () => {
+    setAlertEndCall(false);
+    void controller.endCall();
+  };
+  const handleFeedbackSubmit = (rating, comment) => void controller.submitFeedback(rating, comment);
+  const handleFeedbackSkip = () => controller.skipFeedback();
+  const handleUserMessageSent = () => controller.typing.showOnUserSend();
+  const handleFlowComplete = (componentId) => controller.markFlowComplete(componentId);
+  const handleSelectionDisplayed = (componentId, label) => controller.displaySelection(componentId, label);
+  const sendComponentResponse = (componentId, responseData) => controller.sendComponentResponse(componentId, responseData);
+  const sendSlashCommand = (command) => void controller.sendSlashCommand(command);
+  const callComponentApi = controller.callComponentApi;
+  const panelRadius = resolveRadius(theme.borderRadius, 16);
+  const fontFamily = resolveFontFamily(theme.fontFamily);
+  const chrome = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    !defaultExpanded && (isSessionLive || showFeedback) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Touchable, { testID: ringgId("minimize-button"), accessibilityLabel: "Minimize widget", onPress: () => controller.minimizeWidget(), style: [styles24.chromeButton, styles24.minimizeButton], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react_native10.Minus, { size: 16, color: solidColor(theme.mutedTextColor) }) }) : null,
+    !defaultExpanded ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      Touchable,
+      {
+        testID: ringgId("close-button"),
+        accessibilityLabel: isSessionLive ? "End call" : "Close widget",
+        onPress: () => isSessionLive ? setAlertEndCall(true) : showFeedback ? handleFeedbackSkip() : controller.minimizeWidget(),
+        style: [styles24.chromeButton, styles24.closeButton],
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react_native10.X, { size: 16, color: solidColor(theme.mutedTextColor) })
+      }
+    ) : null
+  ] });
+  const transcript = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    import_react_native28.ScrollView,
+    {
+      testID: ringgId("transcript"),
+      ref: transcriptRef,
+      style: styles24.transcript,
+      contentContainerStyle: [styles24.transcriptList, !showVoiceAnimation && styles24.transcriptTopClearance, !isAudioMode && styles24.transcriptBottomClearance],
+      keyboardShouldPersistTaps: "handled",
+      showsVerticalScrollIndicator: false,
+      children: [
+        sortedMessages.map((segment, index) => {
+          if (segment.kind === "system") return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(system_log_default, { label: segment.message, meta: segment.systemMeta, level: segment.systemLevel }, `sys_${segment.timestamp}_${index}`);
+          const previousSegment = sortedMessages[index - 1];
+          const nextSegment = sortedMessages[index + 1];
+          const attachFreeButtonsToPrevious = isFreeButtonsMessage(segment) && isAttachableAgentMessage(previousSegment);
+          const skipStandaloneRender = isAttachableAgentMessage(segment) && isFreeButtonsMessage(nextSegment);
+          if (skipStandaloneRender) return null;
+          if (attachFreeButtonsToPrevious && previousSegment && segment.componentData) {
+            const componentData = segment.componentData;
+            const isCompletedSelectedItem = componentData.component_type === "buttons" && componentData.data.completionDisplay === "selected_item" && completedFlowIds.has(componentData.component_id);
+            if (isCompletedSelectedItem) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(message_item_default, { itemIndex: index, message: previousSegment }, `message_with_buttons_${segment.componentData.component_id}_${index}`);
+            return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react24.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(message_item_default, { itemIndex: index, message: previousSegment }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.View, { testID: ringgId("attached-buttons"), style: styles24.fullWidth, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                interactive_flow_default,
+                {
+                  initialComponent: segment.componentData,
+                  onApiCall: callComponentApi,
+                  onComplete: () => handleFlowComplete(componentData.component_id),
+                  onSendResponse: sendComponentResponse,
+                  onSelectionDisplayed: handleSelectionDisplayed,
+                  quickReplyAlign: isAudioMode ? "center" : "end"
+                }
+              ) })
+            ] }, `message_with_buttons_${segment.componentData.component_id}_${index}`);
+          }
+          if (segment.componentType === "blocks" && segment.componentData) {
+            const blocksPayload = segment.componentData;
+            if (isBlocks(blocksPayload)) {
+              const blocksConfig = blocksPayload.data;
+              const blockId = blocksPayload.component_id;
+              return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.View, { testID: ringgId("blocks-widget"), style: styles24.fullWidth, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                blocks_step_default,
+                {
+                  config: blocksConfig,
+                  disabled: completedFlowIds.has(blockId),
+                  onAction: (action) => {
+                    handleUserMessageSent();
+                    handleFlowComplete(blockId);
+                    const selection = typeof action.value === "string" || typeof action.value === "number" ? String(action.value) : action.label;
+                    if (selection) handleSelectionDisplayed(blockId, selection);
+                    return controller.sendBlocksAction(blocksConfig.tool_id, blockId, { action_id: action.action_id, value: action.value, values: action.values });
+                  }
+                }
+              ) }, `blocks_${blockId}`);
+            }
+          }
+          if (segment.componentType && segment.componentData) {
+            const componentData = segment.componentData;
+            const isCompletedSelectedItem = componentData.component_type === "buttons" && componentData.data.completionDisplay === "selected_item" && completedFlowIds.has(componentData.component_id);
+            if (isCompletedSelectedItem) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              interactive_flow_default,
+              {
+                initialComponent: segment.componentData,
+                onApiCall: callComponentApi,
+                onComplete: () => handleFlowComplete(componentData.component_id),
+                onSendResponse: sendComponentResponse,
+                onSelectionDisplayed: handleSelectionDisplayed,
+                quickReplyAlign: isAudioMode ? "center" : "end"
+              },
+              `flow_${segment.componentData.component_id}_${index}`
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(message_item_default, { itemIndex: index, message: segment }, `${segment.timestamp}__${index}`);
+        }),
+        isAgentTyping ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(typing_indicator_default, { words: typingWords }) : null
+      ]
+    }
+  );
+  const controls = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    call_controls_default,
+    {
+      buttonConfig: buttons,
+      callMode,
+      isCalling: isSessionLive,
+      enabledSlashCommands: mergedSlashCommands,
+      micEnabled: microphone?.enabled ?? true,
+      onToggleMic: microphone?.toggle,
+      onSlashCommand: sendSlashCommand,
+      onUserMessage: handleUserMessageSent,
+      onCallEnd: handleCallEnd,
+      onSendMessage: (message) => controller.sendMessage(message)
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    import_react_native28.View,
+    {
+      testID: ringgId("widget-root"),
+      style: [styles24.panel, { width, height, borderRadius: panelRadius, backgroundColor: solidColor(theme.backgroundColor), borderColor: solidColor(theme.borderColor) }],
+      children: [
+        chrome,
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ConfirmDialog,
+          {
+            open: alertEndCall,
+            title: `Are you sure you want to end ${callMode === "text" ? "chat" : "call"}?`,
+            description: "Your current conversation will be closed and cannot be accessed later.",
+            confirmLabel: `End ${callMode === "text" ? "Chat" : "Call"}`,
+            cancelLabel: "Cancel",
+            onConfirm: handleCallEnd,
+            onCancel: () => setAlertEndCall(false)
+          }
+        ),
+        showFeedback ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          feedback_screen_default,
+          {
+            callMode,
+            isSubmitting: isLoading,
+            feedbackScreenConfig: feedbackScreen,
+            messages,
+            title,
+            logoUrl,
+            logoStyles,
+            onSubmit: handleFeedbackSubmit,
+            onSkip: handleFeedbackSkip
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native28.View, { testID: ringgId("widget-body"), style: [styles24.body, isSessionLive ? styles24.bodyLive : styles24.bodyIdle], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(header_default, { isCalling: isSessionLive, isLoading, title, description, logoUrl, logoStyles }),
+          showVoiceAnimation ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.View, { testID: ringgId("voice-animation-wrapper"), style: [styles24.voiceWrapper, showVoiceTranscript && messages.length > 0 ? styles24.voiceWrapperCompact : styles24.voiceWrapperFull], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VoiceAnimationLeaf, { room }) }) : null,
+          isSessionLive && !showVoiceAnimation && (messages.length === 0 && !isAgentTyping || !showVoiceTranscript) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.View, { testID: ringgId("body-spacer"), style: styles24.bodySpacer }) : null,
+          (messages.length > 0 || isAgentTyping) && isSessionLive && showVoiceTranscript ? transcript : null,
+          isSessionLive && callMode === "text" ? (
+            // Transparent bottom bar: it only positions the composer over the
+            // transcript, so the gutters stay clear while messages scroll under.
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native28.View, { testID: ringgId("controls-bar"), style: styles24.controlsBar, children: [
+              error.hasError ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.Text, { testID: ringgId("error-message"), style: [styles24.error, { color: solidColor(theme.errorColor), fontFamily }], children: error.message }) : null,
+              controls
+            ] })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+            controls,
+            error.hasError ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.Text, { testID: ringgId("error-message"), style: [styles24.error, { color: solidColor(theme.errorColor), fontFamily }], children: error.message }) : null
+          ] }),
+          !isSessionLive && isLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native28.View, { testID: ringgId("connecting-status"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.Text, { testID: ringgId("connecting-label"), style: [styles24.connecting, { color: theme.mutedTextColor, fontFamily }], children: "Connecting..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(loading_bar_default, { ariaLabel: callMode === "text" ? "Starting chat" : "Connecting" })
+          ] }) : null,
+          !isLoading && connectionState === "disconnected" && (!bypassStartScreen || error.hasError) ? hideTabSelector ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(action_button_default, { callMode, buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native28.View, { testID: ringgId("start-actions"), style: styles24.startActions, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(action_button_default, { dual: true, callMode: "text", buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(action_button_default, { dual: true, callMode: "audio", buttonConfig: buttons, isCalling, isLoading, onCallTrigger: handleCallStart })
+          ] }) : null,
+          !isSessionLive ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.Text, { testID: ringgId("legal-disclaimer"), style: [styles24.legal, { color: theme.mutedTextColor, fontFamily }], children: legalDisclaimer ? renderTextWithLinks(legalDisclaimer.text, legalDisclaimer.links) : renderTextWithLinks(LEGAL_TEXT, LEGAL_LINKS, { color: solidColor(theme.primaryColor), textDecorationLine: "underline" }) }) : null
+        ] })
+      ]
+    }
+  );
+};
+var RinggWidget = ({ controller, room }) => {
+  const shell = useRinggShell(controller);
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native28.useWindowDimensions)();
+  const { buttons, defaultExpanded = WIDGET_DEFAULTS.defaultExpanded, widgetPosition } = controller.config;
+  const isOpen = shell.viewState === "open" || shell.viewState === "feedback";
+  const hideTriggerOnExpand = widgetPosition?.hideTriggerOnExpand ?? true;
+  const showTrigger = !defaultExpanded && (!hideTriggerOnExpand || !isOpen);
+  const panel = usePresence(isOpen, PANEL_SPRING);
+  const trigger = usePresence(showTrigger, TRIGGER_SPRING);
+  const panelWidth = Math.min(screenWidth - EDGE_INSET * 2, PANEL_MAX_WIDTH);
+  const panelHeight = Math.min(screenHeight * PANEL_HEIGHT_RATIO, PANEL_HEIGHT);
+  const triggerIconSize = toSize(buttons?.modalTrigger?.icon?.size, DEFAULT_TRIGGER_ICON_SIZE);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(WidgetThemeProvider, { theme: controller.theme, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native28.View, { pointerEvents: "box-none", style: import_react_native28.StyleSheet.absoluteFill, children: [
+    panel.mounted ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.KeyboardAvoidingView, { pointerEvents: "box-none", behavior: import_react_native28.Platform.OS === "ios" ? "padding" : void 0, style: styles24.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_react_native28.Animated.View,
+      {
+        renderToHardwareTextureAndroid: true,
+        shouldRasterizeIOS: true,
+        style: [
+          styles24.panelAnchor,
+          {
+            opacity: panel.progress,
+            transform: [{ translateY: panel.progress.interpolate({ inputRange: [0, 1], outputRange: [24, 0] }) }, { scale: panel.progress.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) }]
+          }
+        ],
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(WidgetPanel, { controller, room, width: panelWidth, height: panelHeight })
+      }
+    ) }) : null,
+    trigger.mounted ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(WidgetTrigger, { controller, iconSize: triggerIconSize, progress: trigger.progress }) : null
+  ] }) });
+};
+var WidgetTrigger = ({ controller, iconSize, progress }) => {
+  const theme = useWidgetTheme();
+  const { buttons } = controller.config;
+  return (
+    // Web pops the trigger with a spring and fades it out again when the panel
+    // takes over; both ends of that are visible on every open/close cycle.
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.Animated.View, { style: [styles24.trigger, { opacity: progress, transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1] }) }] }], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Touchable, { testID: ringgId("trigger-button"), accessibilityLabel: "Open call widget", onPress: () => controller.handleTriggerClick(), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GradientFill, { color: theme.primaryColor, style: [styles24.triggerSurface, toViewStyle(buttons?.modalTrigger?.styles)], children: buttons?.modalTrigger?.icon?.url ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_react_native28.Image,
+      {
+        testID: ringgId("trigger-icon"),
+        accessibilityLabel: "Widget trigger",
+        source: { uri: buttons.modalTrigger.icon.url },
+        resizeMode: "contain",
+        style: { width: iconSize, height: iconSize }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PhoneCallRingIcon, { testID: ringgId("trigger-icon"), size: iconSize, fill: solidColor(theme.primaryTextColor) }) }) }) })
+  );
+};
+var styles24 = import_react_native28.StyleSheet.create({
+  overlay: { ...import_react_native28.StyleSheet.absoluteFill, justifyContent: "flex-end", alignItems: "flex-end" },
+  panelAnchor: { marginHorizontal: EDGE_INSET, marginTop: EDGE_INSET, marginBottom: BOTTOM_SAFE_INSET },
+  panel: {
+    borderWidth: import_react_native28.StyleSheet.hairlineWidth,
+    // `overflow: hidden` is what keeps the transcript, the header bar and the
+    // rounded corners agreeing with each other.
+    overflow: "hidden",
+    // Web stacks three shadows at 1-2% alpha — the panel sits just off the page
+    // rather than floating above it. 12% read as a hard slab, and on Android
+    // `elevation` is the only one of these that applies, so it was the entire
+    // effect instead of a supporting layer.
+    shadowColor: "#000000",
+    shadowOpacity: 0.05,
+    shadowRadius: 20,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 4
+  },
+  trigger: { position: "absolute", right: EDGE_INSET, bottom: BOTTOM_SAFE_INSET },
+  triggerSurface: { width: TRIGGER_SIZE, height: TRIGGER_SIZE, borderRadius: TRIGGER_RADIUS, alignItems: "center", justifyContent: "center" },
+  chromeButton: { position: "absolute", top: 10, zIndex: 20, width: 28, height: 28, borderRadius: 14, alignItems: "center", justifyContent: "center" },
+  minimizeButton: { right: 42 },
+  closeButton: { right: 10 },
+  body: { flex: 1 },
+  bodyLive: { paddingHorizontal: 20, paddingVertical: 8, gap: 10 },
+  bodyIdle: { padding: 24, gap: 12 },
+  bodySpacer: { flex: 1, marginTop: 56 },
+  voiceWrapper: { width: "100%", alignItems: "stretch", justifyContent: "center", marginTop: 56 },
+  voiceWrapperCompact: { height: 56, flexShrink: 0 },
+  voiceWrapperFull: { flex: 1, minHeight: 0 },
+  transcript: { flex: 1 },
+  // `justifyContent: flex-end` is web's `mt-auto`: a short conversation sits at
+  // the bottom of the panel rather than floating at the top.
+  transcriptList: { flexGrow: 1, justifyContent: "flex-end", gap: 12 },
+  transcriptTopClearance: { paddingTop: 64 },
+  transcriptBottomClearance: { paddingBottom: 80 },
+  fullWidth: { width: "100%" },
+  controlsBar: { position: "absolute", zIndex: 10, bottom: 0, left: 0, right: 0, paddingHorizontal: 20, paddingVertical: 12 },
+  error: { textAlign: "center", fontSize: 14, marginBottom: 8 },
+  connecting: { fontSize: 14, textAlign: "center" },
+  startActions: { flexDirection: "row", alignItems: "center", gap: 8, width: "100%" },
+  legal: { fontSize: 12, lineHeight: 20, textAlign: "center" }
+});
+
+// src/transport/livekit-transport.ts
+var import_react_native30 = require("@livekit/react-native");
+var import_livekit_client5 = require("livekit-client");
+
+// src/platform/audio-session.ts
+var import_react_native29 = require("@livekit/react-native");
+var PREFERRED_OUTPUTS = ["bluetooth", "headset", "speaker", "earpiece"];
+var createAudioSession = () => {
+  let active = false;
+  const start = async () => {
+    if (active) return;
+    active = true;
+    try {
+      await import_react_native29.AudioSession.configureAudio({
+        android: {
+          audioTypeOptions: import_react_native29.AndroidAudioTypePresets.communication,
+          preferredOutputList: [...PREFERRED_OUTPUTS]
+        },
+        ios: { defaultOutput: "speaker" }
+      });
+      await import_react_native29.AudioSession.startAudioSession();
+    } catch {
+    }
+  };
+  const stop = async () => {
+    if (!active) return;
+    active = false;
+    try {
+      await import_react_native29.AudioSession.stopAudioSession();
+    } catch {
+    }
+  };
+  return { start, stop };
+};
+
+// src/transport/legacy-chat.ts
+var import_livekit_client4 = require("livekit-client");
+
+// src/lib/utf8.ts
+var globalEncoder = globalThis.TextEncoder;
+var globalDecoder = globalThis.TextDecoder;
+var CONTINUATION = 128;
+var encodeCodePoint = (code, out) => {
+  if (code < 128) {
+    out.push(code);
+    return;
+  }
+  if (code < 2048) {
+    out.push(192 | code >> 6, CONTINUATION | code & 63);
+    return;
+  }
+  if (code < 65536) {
+    out.push(224 | code >> 12, CONTINUATION | code >> 6 & 63, CONTINUATION | code & 63);
+    return;
+  }
+  out.push(240 | code >> 18, CONTINUATION | code >> 12 & 63, CONTINUATION | code >> 6 & 63, CONTINUATION | code & 63);
+};
+var encodeFallback = (value) => {
+  const bytes = [];
+  for (const character of value) {
+    encodeCodePoint(character.codePointAt(0) ?? 0, bytes);
+  }
+  return Uint8Array.from(bytes);
+};
+var sequenceLength = (lead) => {
+  if (lead < 128) return 1;
+  if (lead >= 240) return 4;
+  if (lead >= 224) return 3;
+  if (lead >= 192) return 2;
+  return 1;
+};
+var LEAD_MASKS = [0, 127, 31, 15, 7];
+var decodeFallback = (bytes) => {
+  let result = "";
+  let index = 0;
+  while (index < bytes.length) {
+    const lead = bytes[index] ?? 0;
+    const length = Math.min(sequenceLength(lead), bytes.length - index);
+    let code = lead & (LEAD_MASKS[length] ?? 127);
+    for (let offset = 1; offset < length; offset++) {
+      code = code << 6 | (bytes[index + offset] ?? 0) & 63;
+    }
+    result += String.fromCodePoint(code);
+    index += length;
+  }
+  return result;
+};
+var encodeUtf8 = (value) => globalEncoder ? new globalEncoder().encode(value) : encodeFallback(value);
+var decodeUtf8 = (bytes) => globalDecoder ? new globalDecoder().decode(bytes) : decodeFallback(bytes);
+
+// src/transport/legacy-chat.ts
+var CHAT_TOPIC = "lk.chat";
+var LEGACY_CHAT_TOPIC = "lk-chat-topic";
+var serverSupportsDataStreams = (room) => room.serverInfo?.edition === 1 || !!room.serverInfo?.version && (0, import_livekit_client4.compareVersions)(room.serverInfo.version, "1.8.2") > 0;
+var encodeLegacyChatMessage = (message) => encodeUtf8(JSON.stringify(message));
+var decodeLegacyChatMessage = (payload) => {
+  try {
+    const parsed = JSON.parse(decodeUtf8(payload));
+    if (typeof parsed !== "object" || parsed === null) return void 0;
+    const candidate = parsed;
+    if (typeof candidate.message !== "string") return void 0;
+    return {
+      id: typeof candidate.id === "string" ? candidate.id : "",
+      timestamp: typeof candidate.timestamp === "number" ? candidate.timestamp : Date.now(),
+      message: candidate.message,
+      ignoreLegacy: candidate.ignoreLegacy === true
+    };
+  } catch {
+    return void 0;
+  }
+};
+
+// src/transport/livekit-transport.ts
+var FIRST_SEEN_LIMIT = 200;
+var createLiveKitTransport = (options = {}) => {
+  if (options.registerGlobals !== false) (0, import_react_native30.registerGlobals)();
+  const room = new import_livekit_client5.Room({ dynacast: true, adaptiveStream: true, ...options.roomOptions });
+  const audioSession = options.manageAudioSession === false ? void 0 : createAudioSession();
+  const chatHandlers = /* @__PURE__ */ new Set();
+  const registeredRpcMethods = /* @__PURE__ */ new Set();
+  const registeredTextStreamTopics = /* @__PURE__ */ new Set();
+  const firstSeenAt = /* @__PURE__ */ new Map();
+  const firstSeen = (id) => {
+    const existing = firstSeenAt.get(id);
+    if (existing !== void 0) return existing;
+    const now = Date.now();
+    firstSeenAt.set(id, now);
+    if (firstSeenAt.size > FIRST_SEEN_LIMIT) {
+      const oldest = firstSeenAt.keys().next();
+      if (!oldest.done) firstSeenAt.delete(oldest.value);
+    }
+    return now;
+  };
+  const setTextStreamHandler = (topic, handler) => {
+    if (registeredTextStreamTopics.has(topic)) room.unregisterTextStreamHandler(topic);
+    room.registerTextStreamHandler(topic, handler);
+    registeredTextStreamTopics.add(topic);
+  };
+  const emitChat = (message) => {
+    chatHandlers.forEach((handler) => handler(message));
+  };
+  const classifyRemoteAsAgent = (identity) => {
+    const participant = room.getParticipantByIdentity(identity);
+    return participant ? isAgentParticipant(participant) : true;
+  };
+  const mapConnectionState = (state) => {
+    switch (state) {
+      case import_livekit_client5.ConnectionState.Connecting:
+        return "connecting";
+      case import_livekit_client5.ConnectionState.Connected:
+        return "connected";
+      case import_livekit_client5.ConnectionState.Reconnecting:
+      case import_livekit_client5.ConnectionState.SignalReconnecting:
+        return "reconnecting";
+      case import_livekit_client5.ConnectionState.Disconnected:
+        return "disconnected";
+    }
+  };
+  setTextStreamHandler(CHAT_TOPIC, (reader, participantInfo) => {
+    void (async () => {
+      let message;
+      try {
+        message = await reader.readAll();
+      } catch {
+        return;
+      }
+      const identity = participantInfo.identity;
+      if (identity === room.localParticipant.identity) return;
+      emitChat({
+        message,
+        isSelf: false,
+        isAgent: classifyRemoteAsAgent(identity),
+        senderName: room.getParticipantByIdentity(identity)?.name,
+        timestamp: reader.info.timestamp
+      });
+    })();
+  });
+  const handleDataReceived = (payload, participant, _kind, topic) => {
+    if (topic !== LEGACY_CHAT_TOPIC) return;
+    const legacy = decodeLegacyChatMessage(payload);
+    if (!legacy || legacy.ignoreLegacy) return;
+    if (participant && participant.identity === room.localParticipant.identity) return;
+    emitChat({
+      message: legacy.message,
+      isSelf: false,
+      isAgent: participant ? isAgentParticipant(participant) : true,
+      senderName: participant?.name,
+      timestamp: legacy.timestamp
+    });
+  };
+  room.on(import_livekit_client5.RoomEvent.DataReceived, handleDataReceived);
+  const handleRoomDisconnected = () => {
+    firstSeenAt.clear();
+    void audioSession?.stop();
+  };
+  room.on(import_livekit_client5.RoomEvent.Disconnected, handleRoomDisconnected);
+  const transport = {
+    async connect(url, token) {
+      await audioSession?.start();
+      try {
+        await room.connect(url, token);
+      } catch (error) {
+        await audioSession?.stop();
+        throw error;
+      }
+    },
+    async disconnect() {
+      await room.disconnect();
+    },
+    async prepareConnection(url) {
+      try {
+        await room.prepareConnection(url);
+      } catch {
+      }
+    },
+    async setMicrophoneEnabled(enabled) {
+      await room.localParticipant.setMicrophoneEnabled(enabled);
+    },
+    async sendChatMessage(text) {
+      const info = await room.localParticipant.sendText(text, { topic: CHAT_TOPIC });
+      await room.localParticipant.publishData(
+        encodeLegacyChatMessage({
+          id: info.id,
+          timestamp: Date.now(),
+          message: text,
+          ignoreLegacy: serverSupportsDataStreams(room)
+        }),
+        { reliable: true, topic: LEGACY_CHAT_TOPIC }
+      );
+    },
+    async performRpcToAgent(method, payload) {
+      const agent = findAgentParticipant(room);
+      if (!agent) {
+        throw new Error(`Cannot perform RPC "${method}": no agent participant in the room`);
+      }
+      return room.localParticipant.performRpc({
+        destinationIdentity: agent.identity,
+        method,
+        payload
+      });
+    },
+    registerRpcMethod(method, handler) {
+      if (registeredRpcMethods.has(method)) room.unregisterRpcMethod(method);
+      room.registerRpcMethod(
+        method,
+        (data) => (
+          // Handler rejections must propagate: livekit surfaces non-RpcError
+          // throws to the caller as RPC application error 1500 (spec §4).
+          handler({ method, payload: data.payload, callerIdentity: data.callerIdentity })
+        )
+      );
+      registeredRpcMethods.add(method);
+    },
+    unregisterRpcMethod(method) {
+      room.unregisterRpcMethod(method);
+      registeredRpcMethods.delete(method);
+    },
+    registerTextStreamHandler(topic, handler) {
+      setTextStreamHandler(topic, (reader, participantInfo) => {
+        handler({
+          readAll: () => reader.readAll(),
+          participantIdentity: participantInfo.identity,
+          isAgent: classifyRemoteAsAgent(participantInfo.identity)
+        });
+      });
+    },
+    unregisterTextStreamHandler(topic) {
+      room.unregisterTextStreamHandler(topic);
+      registeredTextStreamTopics.delete(topic);
+    },
+    onConnectionStateChange(handler) {
+      const listener = (state) => {
+        handler(mapConnectionState(state));
+      };
+      room.on(import_livekit_client5.RoomEvent.ConnectionStateChanged, listener);
+      return () => {
+        room.off(import_livekit_client5.RoomEvent.ConnectionStateChanged, listener);
+      };
+    },
+    onSessionEnded(handler) {
+      const handleParticipantDisconnected = (_participant) => {
+        handler();
+      };
+      const handleDisconnected = () => {
+        handler();
+      };
+      room.on(import_livekit_client5.RoomEvent.ParticipantDisconnected, handleParticipantDisconnected);
+      room.on(import_livekit_client5.RoomEvent.Disconnected, handleDisconnected);
+      return () => {
+        room.off(import_livekit_client5.RoomEvent.ParticipantDisconnected, handleParticipantDisconnected);
+        room.off(import_livekit_client5.RoomEvent.Disconnected, handleDisconnected);
+      };
+    },
+    onTranscription(handler) {
+      const listener = (segments, participant) => {
+        if (!participant) return;
+        const isLocal = participant.isLocal;
+        if (!isLocal && !isAgentParticipant(participant)) return;
+        for (const segment of segments) {
+          handler({
+            id: segment.id,
+            text: segment.text,
+            final: segment.final,
+            isLocal,
+            participantName: participant.name,
+            receivedAt: firstSeen(segment.id)
+          });
+        }
+      };
+      room.on(import_livekit_client5.RoomEvent.TranscriptionReceived, listener);
+      return () => {
+        room.off(import_livekit_client5.RoomEvent.TranscriptionReceived, listener);
+      };
+    },
+    onChatMessage(handler) {
+      chatHandlers.add(handler);
+      return () => {
+        chatHandlers.delete(handler);
+      };
+    },
+    onMediaDevicesError(handler) {
+      const listener = () => {
+        handler();
+      };
+      room.on(import_livekit_client5.RoomEvent.MediaDevicesError, listener);
+      return () => {
+        room.off(import_livekit_client5.RoomEvent.MediaDevicesError, listener);
+      };
+    }
+  };
+  const dispose = () => {
+    room.off(import_livekit_client5.RoomEvent.DataReceived, handleDataReceived);
+    room.off(import_livekit_client5.RoomEvent.Disconnected, handleRoomDisconnected);
+    for (const topic of Array.from(registeredTextStreamTopics)) {
+      room.unregisterTextStreamHandler(topic);
+    }
+    registeredTextStreamTopics.clear();
+    for (const method of Array.from(registeredRpcMethods)) {
+      room.unregisterRpcMethod(method);
+    }
+    registeredRpcMethods.clear();
+    chatHandlers.clear();
+    firstSeenAt.clear();
+    void room.disconnect().finally(() => audioSession?.stop());
+  };
+  return { transport, room, dispose };
+};
+
+// src/platform/mic-permission.ts
+var import_react_native31 = require("react-native");
+var import_react_native_webrtc = require("@livekit/react-native-webrtc");
+var stopTracks = (stream) => {
+  stream.getTracks().forEach((track) => track.stop());
+};
+var probeMicrophone = async () => {
+  try {
+    const stream = await import_react_native_webrtc.mediaDevices.getUserMedia({ audio: true });
+    stopTracks(stream);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var ANDROID_RATIONALE = {
+  title: "Microphone access",
+  message: "Voice calls need the microphone to hear you.",
+  buttonPositive: "Allow",
+  buttonNegative: "Not now"
+};
+var createNativeMicPermission = () => ({
+  async isGranted() {
+    if (import_react_native31.Platform.OS === "android") {
+      return import_react_native31.PermissionsAndroid.check(import_react_native31.PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
+    }
+    return probeMicrophone();
+  },
+  async request() {
+    if (import_react_native31.Platform.OS === "android") {
+      const result = await import_react_native31.PermissionsAndroid.request(import_react_native31.PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, ANDROID_RATIONALE);
+      return result === import_react_native31.PermissionsAndroid.RESULTS.GRANTED;
+    }
+    return probeMicrophone();
+  }
+});
+
+// src/platform/app-origin.ts
+var import_react_native32 = require("react-native");
+var SCHEMES = {
+  android: "android",
+  ios: "ios",
+  macos: "macos",
+  windows: "windows"
+};
+var appOrigin = (bundleId) => {
+  const scheme = SCHEMES[import_react_native32.Platform.OS];
+  if (!scheme || !bundleId) return void 0;
+  return `${scheme}://${bundleId}`;
+};
+
+// src/platform/notification.ts
+var createSilentNotificationPlayer = () => ({
+  play() {
+  }
+});
+var createNotificationPlayer = (tuneUrl, playTune) => ({
+  play() {
+    try {
+      playTune(tuneUrl);
+    } catch {
+    }
+  }
+});
+
+// src/lib/host-actions.ts
+var warn = (...args) => {
+  console.warn("[HOST_ACTION]", ...args);
+};
+var createHostActionDispatcher = (onAction) => (action, onLog) => {
+  const emit = (entry) => {
+    try {
+      onLog?.(entry);
+    } catch (error) {
+      warn("logger threw", error);
+    }
+  };
+  if (!action || typeof action !== "object") {
+    warn("Missing or invalid action config");
+    emit({ label: "Invalid action", level: "error" });
+    return;
+  }
+  const { id, kind } = action;
+  if (kind !== "trigger_event") {
+    warn(`[${id}] unknown kind`, kind);
+    emit({ id, label: "Unknown kind", meta: String(kind), level: "error" });
+    return;
+  }
+  if (!action.event_name) {
+    warn(`[${id}] trigger_event missing event_name`);
+    emit({ id, label: "Event missing name", level: "error" });
+    return;
+  }
+  try {
+    onAction({ name: action.event_name, payload: { ...action.default_payload ?? {}, action_id: id } });
+    emit({ id, label: "Triggered", meta: action.event_name, level: "info" });
+  } catch (error) {
+    warn(`[${id}] execution failed`, error);
+    emit({ id, label: "Action failed", level: "error" });
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  GradientFill,
+  Markdown,
+  RinggWidget,
+  WidgetThemeProvider,
+  appOrigin,
+  createAudioSession,
   createCallbackEventBus,
+  createHostActionDispatcher,
+  createLiveKitTransport,
+  createNativeMicPermission,
+  createNotificationPlayer,
   createRinggWidgetController,
+  createSilentNotificationPlayer,
+  resolveButtonRadius,
+  resolveFontFamily,
+  resolveRadius,
+  ringgId,
+  solidColor,
+  toSize,
+  toViewStyle,
   useRinggComponents,
   useRinggMessages,
   useRinggSession,
   useRinggShell,
   useRinggSlashCommands,
   useRinggTyping,
-  useStoreSnapshot
+  useStoreSnapshot,
+  useWidgetTheme
 });
 //# sourceMappingURL=index.js.map