@burdenoff/website-sdk 2026.925.2 → 2026.925.3

package/dist/components/explore.mjs

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext, Children, isValidElement, cloneElement } from 'react';
-import { Sparkles, RotateCcw, Link2, History, Trash2, Paperclip, X, Mic, Square, ArrowUp, BookOpenText, Layers, TriangleAlert, ChevronLeft, ChevronRight, ExternalLink, Check, Copy, ThumbsUp, ThumbsDown, Volume2 } from 'lucide-react';
+import { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext, Children, isValidElement, cloneElement, useId } from 'react';
+import { Sparkles, RotateCcw, Link2, History, Trash2, Paperclip, X, Mic, Square, ArrowUp, BookOpenText, Layers, TriangleAlert, ChevronLeft, ChevronRight, ExternalLink, Check, Copy, ThumbsUp, ThumbsDown, Volume2, Film, Play, Minimize, Maximize, VideoOff } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Helmet } from 'react-helmet-async';
@@ -14,478 +15,12 @@ import { cva } from 'class-variance-authority';
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-function MarkdownLink({
-  href,
-  children,
-  // react-markdown passes the hast node to every override; it is not a DOM attribute.
-  node: _node,
-  ...props
-}) {
-  const isExternal = typeof href === "string" && (href.startsWith("http://") || href.startsWith("https://"));
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      ...props,
-      ...isExternal ? { target: "_blank", rel: "noopener noreferrer" } : { rel: "noopener noreferrer" },
-      children
-    }
-  );
-}
-var defaultComponents = {
-  a: MarkdownLink
-};
-function Markdown({
-  children,
-  className,
-  inline,
-  components
-}) {
-  const content = /* @__PURE__ */ jsx(
-    ReactMarkdown,
-    {
-      remarkPlugins: [remarkGfm],
-      rehypePlugins: [rehypeSanitize],
-      components: { ...defaultComponents, ...components },
-      ...inline ? { disallowedElements: ["p"], unwrapDisallowed: true } : {},
-      children
-    }
-  );
-  if (inline) {
-    return /* @__PURE__ */ jsx("span", { className, children: content });
-  }
-  return /* @__PURE__ */ jsx("div", { className, children: content });
-}
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var EXPLORE_ANSWER_CSS = `
-/* Nothing inside an answer may widen the page. Model output carries long URLs, code and
-   tables \u2014 each of those overflows a phone by default, and one overflowing child makes the
-   WHOLE document horizontally scrollable, not just the bubble. */
-.boff-explore-body,
-.boff-explore-body p,
-.boff-explore-body li,
-.boff-explore-body a,
-.boff-explore-body h1,
-.boff-explore-body h2,
-.boff-explore-body h3,
-/* h4-h6 as well: a published answer page pushes the model's own headings down a level or
-   two so they nest under the page's, and a long unbroken word is no narrower for it. */
-.boff-explore-body h4,
-.boff-explore-body h5,
-.boff-explore-body h6 {
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-.boff-explore-body pre {
-  overflow-x: auto;
-  max-width: 100%;
-}
-.boff-explore-body table {
-  display: block;
-  overflow-x: auto;
-  max-width: 100%;
-}
-.boff-explore-body img {
-  max-width: 100%;
-  height: auto;
-}
-
-/* ---- Comparison and pricing tables ----------------------------------------------------
-   The harness emits a comparison, and a set of plans, as a GFM table whose FIRST column is
-   the subject \u2014 the product, or the plan (CONTRACT.md \xA77). Two things have to be true of it:
-   the page must not scroll sideways because of it, and it has to be readable on a 320px
-   phone, which a four-column grid of 1px borders is not.
-
-   Wide: a contained scroller. \`max-width: 100%\` keeps the box inside the bubble and
-   \`overflow-x: auto\` keeps the columns inside the box, so the widest possible table still
-   cannot widen the document. \`overscroll-behavior-x: contain\` stops a swipe that runs out
-   of table from chaining to the page \u2014 the same rule the transcript needed. */
-.boff-explore-body .boff-explore-table {
-  max-width: 100%;
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  margin: 0.75rem 0;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  background-color: hsl(var(--card));
-}
-.boff-explore-body .boff-explore-table:focus-visible {
-  outline: 2px solid hsl(var(--ring));
-  outline-offset: 2px;
-}
-.boff-explore-body .boff-explore-table table {
-  /* Beats the blanket \`display: block\` above, which is the unwrapped fallback. */
-  display: table;
-  width: 100%;
-  max-width: none;
-  margin: 0;
-  border-collapse: collapse;
-  font-size: 0.8125rem;
-}
-.boff-explore-body .boff-explore-table th,
-.boff-explore-body .boff-explore-table td {
-  border: 0;
-  border-top: 1px solid hsl(var(--border));
-  padding: 0.5rem 0.75rem;
-  /* \`start\`, never \`left\`: the page root carries dir="rtl" in Arabic, and a left-aligned
-     table there reads against the grain of every other line on the page. */
-  text-align: start;
-  vertical-align: top;
-  overflow-wrap: anywhere;
-  /* Prices in a column line up under each other instead of drifting by digit width. */
-  font-variant-numeric: tabular-nums;
-  min-width: 6rem;
-}
-.boff-explore-body .boff-explore-table thead th {
-  border-top: 0;
-  background-color: hsl(var(--muted));
-  color: hsl(var(--foreground));
-  font-weight: 600;
-  white-space: nowrap;
-}
-/* The first column is what the row is ABOUT \u2014 the product, or the plan name. Reading it as
-   the row's heading is what makes a price list scannable rather than a grid of strings. */
-.boff-explore-body .boff-explore-table tbody td:first-child {
-  font-weight: 600;
-  color: hsl(var(--card-foreground));
-}
 
-/* Narrow: one card per row. Each cell prints its own column heading, so a value is never
-   stranded without the question it answers, and the subject cell becomes the card's title.
-   A media query rather than a measured width \u2014 these pages are serialised post-hydration,
-   so anything measured here would ship to every phone as static HTML. */
-@media (max-width: 30rem) {
-  .boff-explore-body .boff-explore-table {
-    overflow-x: visible;
-  }
-  .boff-explore-body .boff-explore-table table,
-  .boff-explore-body .boff-explore-table tbody,
-  .boff-explore-body .boff-explore-table tr,
-  .boff-explore-body .boff-explore-table td {
-    display: block;
-    width: 100%;
-    min-width: 0;
-  }
-  .boff-explore-body .boff-explore-table thead {
-    display: none;
-  }
-  .boff-explore-body .boff-explore-table tr {
-    border-top: 1px solid hsl(var(--border));
-    padding: 0.5rem 0;
-  }
-  .boff-explore-body .boff-explore-table tr:first-child {
-    border-top: 0;
-  }
-  .boff-explore-body .boff-explore-table td {
-    border: 0;
-    padding: 0.125rem 0.75rem;
-  }
-  .boff-explore-body .boff-explore-table td[data-label]::before {
-    content: attr(data-label);
-    display: block;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: hsl(var(--muted-foreground));
-  }
-  .boff-explore-body .boff-explore-table tbody td:first-child {
-    font-size: 0.9375rem;
-    padding-bottom: 0.25rem;
-  }
-  .boff-explore-body .boff-explore-table tbody td:first-child::before {
-    /* The plan's own name is the heading here; repeating "Plan" over it says nothing. */
-    display: none;
-  }
-}
-`;
-function ExploreAnswerStyles() {
-  return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: EXPLORE_ANSWER_CSS } });
-}
-function inlineImageOrigins(products) {
-  const origins = /* @__PURE__ */ new Set();
-  for (const product of products) {
-    let url;
-    try {
-      url = new URL(product.website);
-    } catch {
-      continue;
-    }
-    if (url.protocol !== "https:") continue;
-    const apex = url.hostname.replace(/^www\./, "");
-    const port = url.port ? `:${url.port}` : "";
-    origins.add(`https://${apex}${port}`);
-    origins.add(`https://www.${apex}${port}`);
-  }
-  return origins;
-}
-function isInlineImageAllowed(src, origins) {
-  if (typeof src !== "string" || src === "") return false;
-  let url;
-  try {
-    url = new URL(src);
-  } catch {
-    return false;
-  }
-  if (url.protocol !== "https:" || url.username || url.password) return false;
-  return origins.has(url.origin);
-}
-var CODE_FENCE = /^\s*(?:```|~~~)/;
-var TABLE_ROW_LINE = /^\s{0,3}\|/;
-var TABLE_DELIMITER_ROW = /^\s{0,3}\|[\s:|-]*-[\s:|-]*$/;
-function readableLine(raw, mode) {
-  let line = raw;
-  line = line.replace(/!\[[^\]]*\]\([^)\s]*(?:\s+"[^"]*")?\)/g, "");
-  line = mode === "speech" ? (
-    // A voice reading "h-t-t-p-s colon slash slash…" mid-sentence is noise, and the
-    // prompt asks for two to five links in every answer. The label IS the words.
-    line.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g, "$1")
-  ) : line.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g, "$1 ($2)");
-  line = mode === "speech" ? line.replace(/<(https?:\/\/[^>\s]+)>/g, "") : line.replace(/<(https?:\/\/[^>\s]+)>/g, "$1");
-  line = line.replace(/^\s{0,3}#{1,6}\s+/, "");
-  line = line.replace(/^\s{0,3}>\s?/, "");
-  if (/^\s{0,3}([-*_])[ \t]*(?:\1[ \t]*){2,}$/.test(line)) return "";
-  line = line.replace(/`([^`]+)`/g, "$1");
-  line = line.replace(/\*\*([^*]+)\*\*/g, "$1");
-  line = line.replace(/__([^_]+)__/g, "$1");
-  line = line.replace(/(^|[^*\w])\*([^*\n]+)\*(?![*\w])/g, "$1$2");
-  line = line.replace(/(^|[^_\w])_([^_\n]+)_(?![_\w])/g, "$1$2");
-  return line.replace(/[ \t]+$/, "");
-}
-function tableCells(row) {
-  const trimmed = row.trim();
-  const cells = [];
-  let cell = "";
-  for (let at = 0; at < trimmed.length; at += 1) {
-    const char = trimmed[at] ?? "";
-    if (char === "\\") {
-      cell += char + (trimmed[at + 1] ?? "");
-      at += 1;
-      continue;
-    }
-    if (char === "|") {
-      cells.push(cell.trim());
-      cell = "";
-      continue;
-    }
-    cell += char;
-  }
-  cells.push(cell.trim());
-  if (trimmed.startsWith("|") && cells[0] === "") cells.shift();
-  if (trimmed.endsWith("|") && cells[cells.length - 1] === "") cells.pop();
-  return cells;
-}
-function asSentence(text) {
-  return /[.!?]$/.test(text) ? text : `${text}.`;
-}
-function spokenTable(rows) {
-  if (rows.length < 2 || !TABLE_DELIMITER_ROW.test(rows[1] ?? "")) return rows;
-  const labels = tableCells(rows[0] ?? "");
-  const spoken = [];
-  for (const row of rows.slice(2)) {
-    const parts = [];
-    tableCells(row).forEach((value, column) => {
-      if (value === "") return;
-      const label = column === 0 ? "" : labels[column] ?? "";
-      parts.push(label === "" ? value : `${label}: ${value}`);
-    });
-    if (parts.length > 0) spoken.push(asSentence(parts.join(". ")));
-  }
-  return spoken;
-}
-function readableText(markdown, mode) {
-  const lines = [];
-  let inFence = false;
-  let table = [];
-  const flushTable = () => {
-    if (table.length === 0) return;
-    for (const line of spokenTable(table)) lines.push(readableLine(line, mode));
-    table = [];
-  };
-  for (const raw of markdown.split("\n")) {
-    if (CODE_FENCE.test(raw)) {
-      flushTable();
-      inFence = !inFence;
-      continue;
-    }
-    if (inFence) {
-      lines.push(raw);
-      continue;
-    }
-    if (mode === "speech" && TABLE_ROW_LINE.test(raw)) {
-      table.push(raw);
-      continue;
-    }
-    flushTable();
-    lines.push(readableLine(raw, mode));
-  }
-  flushTable();
-  return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim();
-}
-function answerPlainText(markdown) {
-  return readableText(markdown, "clipboard");
-}
-function answerSpeechText(markdown) {
-  return readableText(markdown, "speech");
-}
-var AnswerScopeContext = createContext(null);
-var InsideLinkContext = createContext(false);
-function AnswerLink(props) {
-  return /* @__PURE__ */ jsx(InsideLinkContext.Provider, { value: true, children: /* @__PURE__ */ jsx(MarkdownLink, { ...props }) });
-}
-var INLINE_IMAGE_FRAME = "relative inline-block max-w-full overflow-hidden rounded-xl border border-border bg-muted align-top shadow-sm";
-function InlineConceptImage({ src, alt }) {
-  const scope = useContext(AnswerScopeContext);
-  const insideLink = useContext(InsideLinkContext);
-  if (!scope || !scope.enabled || !isInlineImageAllowed(src, scope.origins) || scope.failed.has(src)) {
-    return null;
-  }
-  const { strings: T, onFailed } = scope;
-  const picture = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src,
-        alt: alt ?? "",
-        loading: "lazy",
-        decoding: "async",
-        onError: () => onFailed(src),
-        className: "block h-auto max-h-80 w-auto max-w-full object-contain"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: "pointer-events-none absolute left-2 top-2 rounded-full border border-border bg-background/90 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-foreground shadow-sm",
-        children: T.conceptIllustration
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx("span", { "data-boff-explore": "inline-image", className: "my-3 block", children: insideLink ? /* @__PURE__ */ jsx("span", { className: INLINE_IMAGE_FRAME, children: picture }) : /* @__PURE__ */ jsxs(
-    "a",
-    {
-      href: src,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: cn(
-        INLINE_IMAGE_FRAME,
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      ),
-      children: [
-        picture,
-        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
-          "(",
-          T.opensInNewTab,
-          ")"
-        ] })
-      ]
-    }
-  ) });
-}
-function markdownText(node) {
-  if (!node) return "";
-  if (typeof node.value === "string") return node.value;
-  return (node.children ?? []).map(markdownText).join("");
-}
-function hasHeaderCells(node) {
-  return (node?.children ?? []).some((cell) => cell.tagName === "th");
-}
-function findHeaderRow(node) {
-  for (const child of node?.children ?? []) {
-    if (child.tagName === "tr" && hasHeaderCells(child)) return child;
-    const nested = findHeaderRow(child);
-    if (nested !== null) return nested;
-  }
-  return null;
-}
-function tableColumnLabels(node) {
-  const row = findHeaderRow(node);
-  if (row === null) return [];
-  return (row.children ?? []).filter((cell) => cell.tagName === "th").map((cell) => markdownText(cell).trim());
-}
-var TableColumnsContext = createContext([]);
-function AnswerTable({ node, children }) {
-  const scope = useContext(AnswerScopeContext);
-  const table = /* @__PURE__ */ jsx(TableColumnsContext.Provider, { value: tableColumnLabels(node), children: /* @__PURE__ */ jsx("table", { children }) });
-  if (!scope) return table;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-boff-explore": "table",
-      role: "region",
-      "aria-label": scope.strings.answerTable,
-      tabIndex: 0,
-      className: "boff-explore-table",
-      children: table
-    }
-  );
-}
-function AnswerTableRow({
-  node,
-  children,
-  ...props
-}) {
-  const labels = useContext(TableColumnsContext);
-  if (labels.length === 0 || hasHeaderCells(node)) {
-    return /* @__PURE__ */ jsx("tr", { ...props, children });
-  }
-  let column = 0;
-  const cells = Children.map(children, (cell) => {
-    if (!isValidElement(cell)) return cell;
-    const label = labels[column] ?? "";
-    column += 1;
-    if (label === "") return cell;
-    return cloneElement(cell, {
-      "data-label": label
-    });
-  });
-  return /* @__PURE__ */ jsx("tr", { ...props, children: cells });
-}
-var ANSWER_MARKDOWN_COMPONENTS = {
-  a: AnswerLink,
-  img: InlineConceptImage,
-  table: AnswerTable,
-  tr: AnswerTableRow
-};
-function ExploreAnswerBody({
-  children,
-  strings,
-  imageOrigins,
-  enabled = true,
-  components,
-  className
-}) {
-  const [failed, setFailed] = useState(() => /* @__PURE__ */ new Set());
-  const onFailed = useCallback((src) => {
-    setFailed(
-      (current) => current.has(src) ? current : new Set(current).add(src)
-    );
-  }, []);
-  const scope = useMemo(
-    () => ({
-      strings,
-      enabled,
-      origins: imageOrigins,
-      failed,
-      onFailed
-    }),
-    [strings, enabled, imageOrigins, failed, onFailed]
-  );
-  const overrides = useMemo(
-    () => components ? { ...ANSWER_MARKDOWN_COMPONENTS, ...components } : ANSWER_MARKDOWN_COMPONENTS,
-    [components]
-  );
-  return /* @__PURE__ */ jsx("div", { className: cn("boff-prose boff-explore-body min-w-0", className), children: /* @__PURE__ */ jsx(AnswerScopeContext.Provider, { value: scope, children: /* @__PURE__ */ jsx(Markdown, { components: overrides, children }) }) });
-}
-
-// src/components/explore-i18n.ts
-var EXPLORE_LOCALES = ["en", "zh", "hi", "es", "ar", "ta"];
-var RTL_LOCALES = /* @__PURE__ */ new Set(["ar"]);
-function isRtlLocale(locale) {
-  return RTL_LOCALES.has(locale);
+// src/components/explore-i18n.ts
+var EXPLORE_LOCALES = ["en", "zh", "hi", "es", "ar", "ta"];
+var RTL_LOCALES = /* @__PURE__ */ new Set(["ar"]);
+function isRtlLocale(locale) {
+  return RTL_LOCALES.has(locale);
 }
 var EN = {
   badge: "AI answers, grounded in our documentation",
@@ -568,6 +103,13 @@ var EN = {
   readAloud: "Read aloud",
   stopReading: "Stop reading",
   answerTable: "Table",
+  productVideo: "Product video",
+  productVideoTitle: "{product} product video",
+  playVideo: "Play {title}",
+  closeVideo: "Close video",
+  enterFullScreen: "Full screen",
+  exitFullScreen: "Exit full screen",
+  videoUnavailable: "This video can't be played right now.",
   groundedIn: "What this answer is based on",
   sourceCountOne: "1 source",
   sourceCountMany: "{count} sources",
@@ -669,6 +211,13 @@ var ZH = {
   readAloud: "\u6717\u8BFB",
   stopReading: "\u505C\u6B62\u6717\u8BFB",
   answerTable: "\u8868\u683C",
+  productVideo: "\u4EA7\u54C1\u89C6\u9891",
+  productVideoTitle: "{product} \u4EA7\u54C1\u89C6\u9891",
+  playVideo: "\u64AD\u653E {title}",
+  closeVideo: "\u5173\u95ED\u89C6\u9891",
+  enterFullScreen: "\u5168\u5C4F",
+  exitFullScreen: "\u9000\u51FA\u5168\u5C4F",
+  videoUnavailable: "\u6682\u65F6\u65E0\u6CD5\u64AD\u653E\u6B64\u89C6\u9891\u3002",
   groundedIn: "\u8FD9\u4E2A\u56DE\u7B54\u7684\u4F9D\u636E",
   sourceCountOne: "1 \u4E2A\u6765\u6E90",
   sourceCountMany: "{count} \u4E2A\u6765\u6E90",
@@ -766,6 +315,13 @@ var HI = {
   readAloud: "\u091C\u093C\u094B\u0930 \u0938\u0947 \u092A\u0922\u093C\u0947\u0902",
   stopReading: "\u092A\u0922\u093C\u0928\u093E \u092C\u0902\u0926 \u0915\u0930\u0947\u0902",
   answerTable: "\u0924\u093E\u0932\u093F\u0915\u093E",
+  productVideo: "\u0909\u0924\u094D\u092A\u093E\u0926 \u0935\u0940\u0921\u093F\u092F\u094B",
+  productVideoTitle: "{product} \u0909\u0924\u094D\u092A\u093E\u0926 \u0935\u0940\u0921\u093F\u092F\u094B",
+  playVideo: "{title} \u091A\u0932\u093E\u090F\u0901",
+  closeVideo: "\u0935\u0940\u0921\u093F\u092F\u094B \u092C\u0902\u0926 \u0915\u0930\u0947\u0902",
+  enterFullScreen: "\u092A\u0942\u0930\u094D\u0923 \u0938\u094D\u0915\u094D\u0930\u0940\u0928",
+  exitFullScreen: "\u092A\u0942\u0930\u094D\u0923 \u0938\u094D\u0915\u094D\u0930\u0940\u0928 \u0938\u0947 \u092C\u093E\u0939\u0930 \u0928\u093F\u0915\u0932\u0947\u0902",
+  videoUnavailable: "\u092F\u0939 \u0935\u0940\u0921\u093F\u092F\u094B \u0905\u092D\u0940 \u0928\u0939\u0940\u0902 \u091A\u0932 \u0938\u0915\u0924\u093E\u0964",
   groundedIn: "\u092F\u0939 \u0909\u0924\u094D\u0924\u0930 \u0915\u093F\u0938 \u092A\u0930 \u0906\u0927\u093E\u0930\u093F\u0924 \u0939\u0948",
   sourceCountOne: "1 \u0938\u094D\u0930\u094B\u0924",
   sourceCountMany: "{count} \u0938\u094D\u0930\u094B\u0924",
@@ -867,6 +423,13 @@ var ES = {
   readAloud: "Leer en voz alta",
   stopReading: "Dejar de leer",
   answerTable: "Tabla",
+  productVideo: "V\xEDdeo del producto",
+  productVideoTitle: "V\xEDdeo de {product}",
+  playVideo: "Reproducir {title}",
+  closeVideo: "Cerrar v\xEDdeo",
+  enterFullScreen: "Pantalla completa",
+  exitFullScreen: "Salir de pantalla completa",
+  videoUnavailable: "Ahora mismo no se puede reproducir este v\xEDdeo.",
   groundedIn: "En qu\xE9 se basa esta respuesta",
   sourceCountOne: "1 fuente",
   sourceCountMany: "{count} fuentes",
@@ -968,6 +531,13 @@ var AR = {
   readAloud: "\u0627\u0642\u0631\u0623 \u0628\u0635\u0648\u062A \u0639\u0627\u0644\u064D",
   stopReading: "\u0625\u064A\u0642\u0627\u0641 \u0627\u0644\u0642\u0631\u0627\u0621\u0629",
   answerTable: "\u062C\u062F\u0648\u0644",
+  productVideo: "\u0641\u064A\u062F\u064A\u0648 \u0627\u0644\u0645\u0646\u062A\u062C",
+  productVideoTitle: "\u0641\u064A\u062F\u064A\u0648 {product}",
+  playVideo: "\u062A\u0634\u063A\u064A\u0644 {title}",
+  closeVideo: "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0641\u064A\u062F\u064A\u0648",
+  enterFullScreen: "\u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629",
+  exitFullScreen: "\u0627\u0644\u062E\u0631\u0648\u062C \u0645\u0646 \u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629",
+  videoUnavailable: "\u062A\u0639\u0630\u0651\u0631 \u062A\u0634\u063A\u064A\u0644 \u0647\u0630\u0627 \u0627\u0644\u0641\u064A\u062F\u064A\u0648 \u0627\u0644\u0622\u0646.",
   groundedIn: "\u0639\u0644\u0649 \u0645\u0627\u0630\u0627 \u062A\u0633\u062A\u0646\u062F \u0647\u0630\u0647 \u0627\u0644\u0625\u062C\u0627\u0628\u0629",
   sourceCountOne: "\u0645\u0635\u062F\u0631 \u0648\u0627\u062D\u062F",
   sourceCountMany: "{count} \u0645\u0635\u0627\u062F\u0631",
@@ -1069,6 +639,13 @@ var TA = {
   readAloud: "\u0B9A\u0BA4\u0BCD\u0BA4\u0BAE\u0BBE\u0B95\u0BAA\u0BCD \u0BAA\u0B9F\u0BBF",
   stopReading: "\u0BAA\u0B9F\u0BBF\u0BAA\u0BCD\u0BAA\u0BA4\u0BC8 \u0BA8\u0BBF\u0BB1\u0BC1\u0BA4\u0BCD\u0BA4\u0BC1",
   answerTable: "\u0B85\u0B9F\u0BCD\u0B9F\u0BB5\u0BA3\u0BC8",
+  productVideo: "\u0BA4\u0BAF\u0BBE\u0BB0\u0BBF\u0BAA\u0BCD\u0BAA\u0BC1 \u0BB5\u0BC0\u0B9F\u0BBF\u0BAF\u0BCB",
+  productVideoTitle: "{product} \u0BA4\u0BAF\u0BBE\u0BB0\u0BBF\u0BAA\u0BCD\u0BAA\u0BC1 \u0BB5\u0BC0\u0B9F\u0BBF\u0BAF\u0BCB",
+  playVideo: "{title} \u0B87\u0BAF\u0B95\u0BCD\u0B95\u0BC1",
+  closeVideo: "\u0BB5\u0BC0\u0B9F\u0BBF\u0BAF\u0BCB\u0BB5\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1",
+  enterFullScreen: "\u0BAE\u0BC1\u0BB4\u0BC1\u0BA4\u0BCD \u0BA4\u0BBF\u0BB0\u0BC8",
+  exitFullScreen: "\u0BAE\u0BC1\u0BB4\u0BC1\u0BA4\u0BCD \u0BA4\u0BBF\u0BB0\u0BC8\u0BAF\u0BBF\u0BB2\u0BBF\u0BB0\u0BC1\u0BA8\u0BCD\u0BA4\u0BC1 \u0BB5\u0BC6\u0BB3\u0BBF\u0BAF\u0BC7\u0BB1\u0BC1",
+  videoUnavailable: "\u0B87\u0BA8\u0BCD\u0BA4 \u0BB5\u0BC0\u0B9F\u0BBF\u0BAF\u0BCB\u0BB5\u0BC8 \u0B87\u0BAA\u0BCD\u0BAA\u0BCB\u0BA4\u0BC1 \u0B87\u0BAF\u0B95\u0BCD\u0B95 \u0BAE\u0BC1\u0B9F\u0BBF\u0BAF\u0BB5\u0BBF\u0BB2\u0BCD\u0BB2\u0BC8.",
   groundedIn: "\u0B87\u0BA8\u0BCD\u0BA4\u0BAA\u0BCD \u0BAA\u0BA4\u0BBF\u0BB2\u0BCD \u0B8E\u0BA4\u0BC8 \u0B85\u0B9F\u0BBF\u0BAA\u0BCD\u0BAA\u0B9F\u0BC8\u0BAF\u0BBE\u0B95\u0B95\u0BCD \u0B95\u0BCA\u0BA3\u0BCD\u0B9F\u0BA4\u0BC1",
   sourceCountOne: "1 \u0BAE\u0BC2\u0BB2\u0BAE\u0BCD",
   sourceCountMany: "{count} \u0BAE\u0BC2\u0BB2\u0B99\u0BCD\u0B95\u0BB3\u0BCD",
@@ -1111,25 +688,977 @@ var SPEECH_TAGS = {
 function speechLocaleOf(locale) {
   return SPEECH_TAGS[locale];
 }
-function resolveExploreLocale(explicit) {
-  const candidates = [
-    explicit,
-    typeof document === "undefined" ? void 0 : document.documentElement.lang,
-    typeof navigator === "undefined" ? void 0 : navigator.language
-  ];
-  for (const candidate of candidates) {
-    if (!candidate) continue;
-    const primary = candidate.toLowerCase().split("-")[0];
-    const match = EXPLORE_LOCALES.find((locale) => locale === primary);
-    if (match) return match;
+function resolveExploreLocale(explicit) {
+  const candidates = [
+    explicit,
+    typeof document === "undefined" ? void 0 : document.documentElement.lang,
+    typeof navigator === "undefined" ? void 0 : navigator.language
+  ];
+  for (const candidate of candidates) {
+    if (!candidate) continue;
+    const primary = candidate.toLowerCase().split("-")[0];
+    const match = EXPLORE_LOCALES.find((locale) => locale === primary);
+    if (match) return match;
+  }
+  return "en";
+}
+function exploreStrings(locale) {
+  return STRINGS[locale] ?? EN;
+}
+function fill(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => values[key] ?? match);
+}
+function fullscreenSupport() {
+  if (typeof document === "undefined") return null;
+  if (document.fullscreenEnabled && typeof document.documentElement.requestFullscreen === "function") {
+    return "element";
+  }
+  if (typeof HTMLVideoElement !== "undefined" && "webkitEnterFullscreen" in HTMLVideoElement.prototype) {
+    return "video";
+  }
+  return null;
+}
+function ignoreRejection(result) {
+  result?.catch(() => void 0);
+}
+var VIDEO_DIALOG_CSS = `
+.boff-explore-video-panel:fullscreen {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+.boff-explore-video-panel:fullscreen .boff-explore-video-frame {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background-color: hsl(var(--background));
+}
+.boff-explore-video-panel:fullscreen video {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+}
+`;
+var DIALOG_BUTTON = "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-border bg-card text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function ExploreVideoDialog({
+  videoUrl,
+  posterUrl,
+  title,
+  strings: T,
+  dir,
+  onClose
+}) {
+  const dialogRef = useRef(null);
+  const panelRef = useRef(null);
+  const videoRef = useRef(null);
+  const closeRef = useRef(null);
+  const nativeModalRef = useRef(false);
+  const titleId = useId();
+  const [support] = useState(fullscreenSupport);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (typeof dialog.showModal === "function") {
+      if (!dialog.open) dialog.showModal();
+      nativeModalRef.current = true;
+    } else {
+      dialog.setAttribute("open", "");
+      nativeModalRef.current = false;
+    }
+    closeRef.current?.focus();
+    ignoreRejection(videoRef.current?.play());
+    return () => {
+      if (dialog.open && typeof dialog.close === "function") dialog.close();
+    };
+  }, []);
+  useEffect(() => {
+    const sync = () => {
+      const current = document.fullscreenElement;
+      setFullscreen(
+        current !== null && dialogRef.current?.contains(current) === true
+      );
+    };
+    const enter = () => setFullscreen(true);
+    const leave = () => setFullscreen(false);
+    const video = videoRef.current;
+    document.addEventListener("fullscreenchange", sync);
+    video?.addEventListener("webkitbeginfullscreen", enter);
+    video?.addEventListener("webkitendfullscreen", leave);
+    return () => {
+      document.removeEventListener("fullscreenchange", sync);
+      video?.removeEventListener("webkitbeginfullscreen", enter);
+      video?.removeEventListener("webkitendfullscreen", leave);
+    };
+  }, [failed]);
+  const leaveFullscreen = useCallback(() => {
+    const current = document.fullscreenElement;
+    if (current && dialogRef.current?.contains(current) && typeof document.exitFullscreen === "function") {
+      ignoreRejection(document.exitFullscreen());
+    }
+    const video = videoRef.current;
+    if (video?.webkitDisplayingFullscreen) video.webkitExitFullscreen?.();
+  }, []);
+  const requestClose = useCallback(() => {
+    videoRef.current?.pause();
+    leaveFullscreen();
+    onClose();
+  }, [leaveFullscreen, onClose]);
+  const toggleFullscreen = useCallback(() => {
+    if (fullscreen) {
+      leaveFullscreen();
+      return;
+    }
+    if (support === "element") {
+      const panel = panelRef.current;
+      if (panel) ignoreRejection(panel.requestFullscreen());
+      return;
+    }
+    const video = videoRef.current;
+    video?.webkitEnterFullscreen?.();
+  }, [fullscreen, leaveFullscreen, support]);
+  const handleClose = useCallback(
+    (event) => {
+      if (event.currentTarget.open) return;
+      requestClose();
+    },
+    [requestClose]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape" && !nativeModalRef.current) {
+        event.preventDefault();
+        requestClose();
+      }
+    },
+    [requestClose]
+  );
+  const handleStageClick = useCallback(
+    (event) => {
+      if (event.target === event.currentTarget) requestClose();
+    },
+    [requestClose]
+  );
+  if (typeof document === "undefined") return null;
+  const fullscreenLabel = fullscreen ? T.exitFullScreen : T.enterFullScreen;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "dialog",
+      {
+        ref: dialogRef,
+        "data-boff-explore": "video-dialog",
+        "aria-labelledby": titleId,
+        dir,
+        onClose: handleClose,
+        onKeyDown: handleKeyDown,
+        className: "fixed inset-0 z-50 m-0 h-full max-h-none w-full max-w-none overflow-y-auto overscroll-contain border-0 bg-background/95 p-0 text-foreground backdrop-blur-sm",
+        children: [
+          /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: VIDEO_DIALOG_CSS } }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: handleStageClick,
+              className: "flex min-h-full items-center justify-center p-4 sm:p-6",
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: panelRef,
+                  className: "boff-explore-video-panel flex w-full min-w-0 max-w-[960px] flex-col gap-3",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "h2",
+                        {
+                          id: titleId,
+                          className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground sm:text-base",
+                          children: title
+                        }
+                      ),
+                      support !== null && !failed ? (
+                        // A plain button whose name says what pressing it does NOW, and no
+                        // `aria-pressed`: a toggle button's name must not change with its state, or it
+                        // announces "Exit full screen, pressed" — two answers to one question.
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            "data-boff-explore": "video-fullscreen",
+                            "aria-label": fullscreenLabel,
+                            title: fullscreenLabel,
+                            onClick: toggleFullscreen,
+                            className: DIALOG_BUTTON,
+                            children: fullscreen ? /* @__PURE__ */ jsx(Minimize, { "aria-hidden": "true", className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Maximize, { "aria-hidden": "true", className: "h-5 w-5" })
+                          }
+                        )
+                      ) : null,
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          ref: closeRef,
+                          type: "button",
+                          "data-boff-explore": "video-close",
+                          "aria-label": T.closeVideo,
+                          title: T.closeVideo,
+                          onClick: requestClose,
+                          className: DIALOG_BUTTON,
+                          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "h-5 w-5" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "boff-explore-video-frame overflow-hidden rounded-xl border border-border bg-muted shadow-lg", children: failed ? (
+                      // A black box with a spinning control tells the visitor nothing; this says
+                      // what happened, in their language.
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          role: "alert",
+                          className: "flex aspect-video w-full flex-col items-center justify-center gap-2 p-6 text-center text-sm text-muted-foreground",
+                          children: [
+                            /* @__PURE__ */ jsx(VideoOff, { "aria-hidden": "true", className: "h-6 w-6" }),
+                            /* @__PURE__ */ jsx("p", { children: T.videoUnavailable })
+                          ]
+                        }
+                      )
+                    ) : /* @__PURE__ */ jsx(
+                      "video",
+                      {
+                        ref: videoRef,
+                        "data-boff-explore": "video-player",
+                        src: videoUrl,
+                        poster: posterUrl,
+                        controls: true,
+                        controlsList: support === "element" ? "nofullscreen" : void 0,
+                        playsInline: true,
+                        autoPlay: true,
+                        preload: "metadata",
+                        onError: () => setFailed(true),
+                        className: "block max-h-[80vh] w-full bg-muted object-contain"
+                      }
+                    ) })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function MarkdownLink({
+  href,
+  children,
+  // react-markdown passes the hast node to every override; it is not a DOM attribute.
+  node: _node,
+  ...props
+}) {
+  const isExternal = typeof href === "string" && (href.startsWith("http://") || href.startsWith("https://"));
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      ...props,
+      ...isExternal ? { target: "_blank", rel: "noopener noreferrer" } : { rel: "noopener noreferrer" },
+      children
+    }
+  );
+}
+var defaultComponents = {
+  a: MarkdownLink
+};
+function Markdown({
+  children,
+  className,
+  inline,
+  components,
+  rehypePlugins
+}) {
+  const content = /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypeSanitize, ...rehypePlugins ?? []],
+      components: { ...defaultComponents, ...components },
+      ...inline ? { disallowedElements: ["p"], unwrapDisallowed: true } : {},
+      children
+    }
+  );
+  if (inline) {
+    return /* @__PURE__ */ jsx("span", { className, children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: content });
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var EXPLORE_ANSWER_CSS = `
+/* Nothing inside an answer may widen the page. Model output carries long URLs, code and
+   tables \u2014 each of those overflows a phone by default, and one overflowing child makes the
+   WHOLE document horizontally scrollable, not just the bubble. */
+.boff-explore-body,
+.boff-explore-body p,
+.boff-explore-body li,
+.boff-explore-body a,
+.boff-explore-body h1,
+.boff-explore-body h2,
+.boff-explore-body h3,
+/* h4-h6 as well: a published answer page pushes the model's own headings down a level or
+   two so they nest under the page's, and a long unbroken word is no narrower for it. */
+.boff-explore-body h4,
+.boff-explore-body h5,
+.boff-explore-body h6 {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.boff-explore-body pre {
+  overflow-x: auto;
+  max-width: 100%;
+}
+.boff-explore-body table {
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+}
+.boff-explore-body img {
+  max-width: 100%;
+  height: auto;
+}
+/* A product-video poster fills the card's reserved 16:9 frame and is cropped to it. The
+   blanket \`img { height: auto }\` above \u2014 and ProseStyles' own \u2014 outrank a height utility,
+   and would size it by its own aspect ratio instead, leaving a band of the frame showing
+   whenever a poster is not exactly 16:9. */
+.boff-explore-body .boff-explore-video-poster {
+  height: 100%;
+  max-width: none;
+}
+
+/* ---- Comparison and pricing tables ----------------------------------------------------
+   The harness emits a comparison, and a set of plans, as a GFM table whose FIRST column is
+   the subject \u2014 the product, or the plan (CONTRACT.md \xA77). Two things have to be true of it:
+   the page must not scroll sideways because of it, and it has to be readable on a 320px
+   phone, which a four-column grid of 1px borders is not.
+
+   Wide: a contained scroller. \`max-width: 100%\` keeps the box inside the bubble and
+   \`overflow-x: auto\` keeps the columns inside the box, so the widest possible table still
+   cannot widen the document. \`overscroll-behavior-x: contain\` stops a swipe that runs out
+   of table from chaining to the page \u2014 the same rule the transcript needed. */
+.boff-explore-body .boff-explore-table {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  margin: 0.75rem 0;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  background-color: hsl(var(--card));
+}
+.boff-explore-body .boff-explore-table:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+.boff-explore-body .boff-explore-table table {
+  /* Beats the blanket \`display: block\` above, which is the unwrapped fallback. */
+  display: table;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+}
+.boff-explore-body .boff-explore-table th,
+.boff-explore-body .boff-explore-table td {
+  border: 0;
+  border-top: 1px solid hsl(var(--border));
+  padding: 0.5rem 0.75rem;
+  /* \`start\`, never \`left\`: the page root carries dir="rtl" in Arabic, and a left-aligned
+     table there reads against the grain of every other line on the page. */
+  text-align: start;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+  /* Prices in a column line up under each other instead of drifting by digit width. */
+  font-variant-numeric: tabular-nums;
+  min-width: 6rem;
+}
+.boff-explore-body .boff-explore-table thead th {
+  border-top: 0;
+  background-color: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  font-weight: 600;
+  white-space: nowrap;
+}
+/* The first column is what the row is ABOUT \u2014 the product, or the plan name. Reading it as
+   the row's heading is what makes a price list scannable rather than a grid of strings. */
+.boff-explore-body .boff-explore-table tbody td:first-child {
+  font-weight: 600;
+  color: hsl(var(--card-foreground));
+}
+
+/* Narrow: one card per row. Each cell prints its own column heading, so a value is never
+   stranded without the question it answers, and the subject cell becomes the card's title.
+   A media query rather than a measured width \u2014 these pages are serialised post-hydration,
+   so anything measured here would ship to every phone as static HTML. */
+@media (max-width: 30rem) {
+  .boff-explore-body .boff-explore-table {
+    overflow-x: visible;
+  }
+  .boff-explore-body .boff-explore-table table,
+  .boff-explore-body .boff-explore-table tbody,
+  .boff-explore-body .boff-explore-table tr,
+  .boff-explore-body .boff-explore-table td {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+  .boff-explore-body .boff-explore-table thead {
+    display: none;
+  }
+  .boff-explore-body .boff-explore-table tr {
+    border-top: 1px solid hsl(var(--border));
+    padding: 0.5rem 0;
+  }
+  .boff-explore-body .boff-explore-table tr:first-child {
+    border-top: 0;
+  }
+  .boff-explore-body .boff-explore-table td {
+    border: 0;
+    padding: 0.125rem 0.75rem;
+  }
+  .boff-explore-body .boff-explore-table td[data-label]::before {
+    content: attr(data-label);
+    display: block;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: hsl(var(--muted-foreground));
+  }
+  .boff-explore-body .boff-explore-table tbody td:first-child {
+    font-size: 0.9375rem;
+    padding-bottom: 0.25rem;
+  }
+  .boff-explore-body .boff-explore-table tbody td:first-child::before {
+    /* The plan's own name is the heading here; repeating "Plan" over it says nothing. */
+    display: none;
+  }
+}
+`;
+function ExploreAnswerStyles() {
+  return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: EXPLORE_ANSWER_CSS } });
+}
+function inlineImageOrigins(products) {
+  const origins = /* @__PURE__ */ new Set();
+  for (const product of products) {
+    let url;
+    try {
+      url = new URL(product.website);
+    } catch {
+      continue;
+    }
+    if (url.protocol !== "https:") continue;
+    const apex = url.hostname.replace(/^www\./, "");
+    const port = url.port ? `:${url.port}` : "";
+    origins.add(`https://${apex}${port}`);
+    origins.add(`https://www.${apex}${port}`);
+  }
+  return origins;
+}
+var VIDEO_FILE_PATH = /\.(?:mp4|webm|m4v|mov|vtt)$/i;
+function catalogUrlOf(value, origins) {
+  if (typeof value !== "string" || value === "") return null;
+  let url;
+  try {
+    url = new URL(value);
+  } catch {
+    return null;
+  }
+  if (url.protocol !== "https:" || url.username || url.password) return null;
+  return origins.has(url.origin) ? url : null;
+}
+function isInlineImageAllowed(src, origins) {
+  const url = catalogUrlOf(src, origins);
+  return url !== null && !VIDEO_FILE_PATH.test(url.pathname);
+}
+var INLINE_VIDEO_PATH = /\.(?:mp4|webm)$/i;
+function isInlineVideoAllowed(href, origins) {
+  const url = catalogUrlOf(href, origins);
+  return url !== null && INLINE_VIDEO_PATH.test(url.pathname);
+}
+function apexOriginOf(url) {
+  const apex = url.hostname.replace(/^www\./, "");
+  const port = url.port ? `:${url.port}` : "";
+  return `https://${apex}${port}`;
+}
+function productSlugsByOrigin(products) {
+  const slugs = /* @__PURE__ */ new Map();
+  for (const product of products) {
+    let url;
+    try {
+      url = new URL(product.website);
+    } catch {
+      continue;
+    }
+    if (url.protocol !== "https:") continue;
+    const key = apexOriginOf(url);
+    if (!slugs.has(key)) slugs.set(key, product.slug);
+  }
+  return slugs;
+}
+function videoProductOf(href, slugs) {
+  const url = new URL(href);
+  return slugs.get(apexOriginOf(url)) ?? url.hostname.replace(/^www\./, "");
+}
+function isVideoFileTarget(href) {
+  if (typeof href !== "string") return false;
+  try {
+    return VIDEO_FILE_PATH.test(
+      new URL(href, "https://answer.invalid").pathname
+    );
+  } catch {
+    return false;
+  }
+}
+var CODE_FENCE = /^\s*(?:```|~~~)/;
+var TABLE_ROW_LINE = /^\s{0,3}\|/;
+var TABLE_DELIMITER_ROW = /^\s{0,3}\|[\s:|-]*-[\s:|-]*$/;
+var LINKED_IMAGE = /\[!\[([^[\]]*)\]\([^)\s]*(?:\s+"[^"]*")?\)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g;
+var IMAGE = /!\[[^[\]]*\]\([^)\s]*(?:\s+"[^"]*")?\)/g;
+var LINK = /\[([^[\]]+)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g;
+function readableLine(raw, mode) {
+  let line = raw;
+  if (line.includes("](")) {
+    line = line.replace(LINKED_IMAGE, (_match, alt, href) => {
+      if (mode === "speech") return "";
+      return alt.trim() === "" ? href : `${alt.trim()} (${href})`;
+    });
+    line = line.replace(IMAGE, "");
+    line = mode === "speech" ? (
+      // A voice reading "h-t-t-p-s colon slash slash…" mid-sentence is noise, and the
+      // prompt asks for two to five links in every answer. The label IS the words.
+      line.replace(LINK, "$1")
+    ) : line.replace(LINK, "$1 ($2)");
+  }
+  line = mode === "speech" ? line.replace(/<(https?:\/\/[^>\s]+)>/g, "") : line.replace(/<(https?:\/\/[^>\s]+)>/g, "$1");
+  line = line.replace(/^\s{0,3}#{1,6}\s+/, "");
+  line = line.replace(/^\s{0,3}>\s?/, "");
+  if (/^\s{0,3}([-*_])[ \t]*(?:\1[ \t]*){2,}$/.test(line)) return "";
+  line = line.replace(/`([^`]+)`/g, "$1");
+  line = line.replace(/\*\*([^*]+)\*\*/g, "$1");
+  line = line.replace(/__([^_]+)__/g, "$1");
+  line = line.replace(/(^|[^*\w])\*([^*\n]+)\*(?![*\w])/g, "$1$2");
+  line = line.replace(/(^|[^_\w])_([^_\n]+)_(?![_\w])/g, "$1$2");
+  return line.replace(/[ \t]+$/, "");
+}
+function tableCells(row) {
+  const trimmed = row.trim();
+  const cells = [];
+  let cell = "";
+  for (let at = 0; at < trimmed.length; at += 1) {
+    const char = trimmed[at] ?? "";
+    if (char === "\\") {
+      cell += char + (trimmed[at + 1] ?? "");
+      at += 1;
+      continue;
+    }
+    if (char === "|") {
+      cells.push(cell.trim());
+      cell = "";
+      continue;
+    }
+    cell += char;
+  }
+  cells.push(cell.trim());
+  if (trimmed.startsWith("|") && cells[0] === "") cells.shift();
+  if (trimmed.endsWith("|") && cells[cells.length - 1] === "") cells.pop();
+  return cells;
+}
+function asSentence(text) {
+  return /[.!?]$/.test(text) ? text : `${text}.`;
+}
+function spokenTable(rows) {
+  if (rows.length < 2 || !TABLE_DELIMITER_ROW.test(rows[1] ?? "")) return rows;
+  const labels = tableCells(rows[0] ?? "");
+  const spoken = [];
+  for (const row of rows.slice(2)) {
+    const parts = [];
+    tableCells(row).forEach((value, column) => {
+      if (value === "") return;
+      const label = column === 0 ? "" : labels[column] ?? "";
+      parts.push(label === "" ? value : `${label}: ${value}`);
+    });
+    if (parts.length > 0) spoken.push(asSentence(parts.join(". ")));
+  }
+  return spoken;
+}
+function readableText(markdown, mode) {
+  const lines = [];
+  let inFence = false;
+  let table = [];
+  const flushTable = () => {
+    if (table.length === 0) return;
+    for (const line of spokenTable(table)) lines.push(readableLine(line, mode));
+    table = [];
+  };
+  for (const raw of markdown.split("\n")) {
+    if (CODE_FENCE.test(raw)) {
+      flushTable();
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence) {
+      lines.push(raw);
+      continue;
+    }
+    if (mode === "speech" && TABLE_ROW_LINE.test(raw)) {
+      table.push(raw);
+      continue;
+    }
+    flushTable();
+    lines.push(readableLine(raw, mode));
+  }
+  flushTable();
+  return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim();
+}
+function answerPlainText(markdown) {
+  return readableText(markdown, "clipboard");
+}
+function answerSpeechText(markdown) {
+  return readableText(markdown, "speech");
+}
+var AnswerScopeContext = createContext(null);
+var InsideLinkContext = createContext(false);
+function AnswerLink(props) {
+  const scope = useContext(AnswerScopeContext);
+  const role = videoRoleOf(props.node);
+  if (role !== void 0 && scope !== null) {
+    const video = role === "card" && scope.enabled ? productVideoOf(props.node) : null;
+    if (video === null) return null;
+    return /* @__PURE__ */ jsx(
+      InlineVideoCard,
+      {
+        href: video.href,
+        poster: video.poster,
+        alt: video.alt,
+        scope
+      }
+    );
   }
-  return "en";
+  return /* @__PURE__ */ jsx(InsideLinkContext.Provider, { value: true, children: /* @__PURE__ */ jsx(MarkdownLink, { ...props }) });
 }
-function exploreStrings(locale) {
-  return STRINGS[locale] ?? EN;
+var INLINE_IMAGE_FRAME = "relative inline-block max-w-full overflow-hidden rounded-xl border border-border bg-muted align-top shadow-sm";
+function InlineConceptImage({ src, alt }) {
+  const scope = useContext(AnswerScopeContext);
+  const insideLink = useContext(InsideLinkContext);
+  if (!scope || !scope.enabled || !isInlineImageAllowed(src, scope.origins) || scope.failed.has(src)) {
+    return null;
+  }
+  const { strings: T, onFailed } = scope;
+  const picture = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: alt ?? "",
+        loading: "lazy",
+        decoding: "async",
+        onError: () => onFailed(src),
+        className: "block h-auto max-h-80 w-auto max-w-full object-contain"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute left-2 top-2 rounded-full border border-border bg-background/90 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-foreground shadow-sm",
+        children: T.conceptIllustration
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx("span", { "data-boff-explore": "inline-image", className: "my-3 block", children: insideLink ? /* @__PURE__ */ jsx("span", { className: INLINE_IMAGE_FRAME, children: picture }) : /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: src,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(
+        INLINE_IMAGE_FRAME,
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      ),
+      children: [
+        picture,
+        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          "(",
+          T.opensInNewTab,
+          ")"
+        ] })
+      ]
+    }
+  ) });
 }
-function fill(template, values) {
-  return template.replace(/\{(\w+)\}/g, (match, key) => values[key] ?? match);
+function markdownText(node) {
+  if (!node) return "";
+  if (typeof node.value === "string") return node.value;
+  return (node.children ?? []).map(markdownText).join("");
+}
+function hasHeaderCells(node) {
+  return (node?.children ?? []).some((cell) => cell.tagName === "th");
+}
+function findHeaderRow(node) {
+  for (const child of node?.children ?? []) {
+    if (child.tagName === "tr" && hasHeaderCells(child)) return child;
+    const nested = findHeaderRow(child);
+    if (nested !== null) return nested;
+  }
+  return null;
+}
+function tableColumnLabels(node) {
+  const row = findHeaderRow(node);
+  if (row === null) return [];
+  return (row.children ?? []).filter((cell) => cell.tagName === "th").map((cell) => markdownText(cell).trim());
+}
+var TableColumnsContext = createContext([]);
+function AnswerTable({ node, children }) {
+  const scope = useContext(AnswerScopeContext);
+  const table = /* @__PURE__ */ jsx(TableColumnsContext.Provider, { value: tableColumnLabels(node), children: /* @__PURE__ */ jsx("table", { children }) });
+  if (!scope) return table;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-boff-explore": "table",
+      role: "region",
+      "aria-label": scope.strings.answerTable,
+      tabIndex: 0,
+      className: "boff-explore-table",
+      children: table
+    }
+  );
+}
+function AnswerTableRow({
+  node,
+  children,
+  ...props
+}) {
+  const labels = useContext(TableColumnsContext);
+  if (labels.length === 0 || hasHeaderCells(node)) {
+    return /* @__PURE__ */ jsx("tr", { ...props, children });
+  }
+  let column = 0;
+  const cells = Children.map(children, (cell) => {
+    if (!isValidElement(cell)) return cell;
+    const label = labels[column] ?? "";
+    column += 1;
+    if (label === "") return cell;
+    return cloneElement(cell, {
+      "data-label": label
+    });
+  });
+  return /* @__PURE__ */ jsx("tr", { ...props, children: cells });
+}
+function linkedImageOf(node) {
+  if (node?.tagName !== "a") return null;
+  const content = (node.children ?? []).filter(
+    (child) => child.tagName !== void 0 || (child.value ?? "").trim() !== ""
+  );
+  const image = content.length === 1 ? content[0] : void 0;
+  if (image?.tagName !== "img") return null;
+  const alt = image.properties?.alt;
+  return {
+    href: node.properties?.href,
+    src: image.properties?.src,
+    alt: typeof alt === "string" ? alt.trim() : ""
+  };
+}
+function isCardableVideo(embed, origins) {
+  if (!isInlineVideoAllowed(embed.href, origins) || !isInlineImageAllowed(embed.src, origins)) {
+    return false;
+  }
+  return apexOriginOf(new URL(embed.href)) === apexOriginOf(new URL(embed.src));
+}
+var NO_VIDEO_CONTAINERS = /* @__PURE__ */ new Set(["li", "table"]);
+function rehypeProductVideo(options) {
+  return (tree) => {
+    let claimed = false;
+    const visit = (node, parent, contained) => {
+      const embed = linkedImageOf(node);
+      if (embed !== null && isVideoFileTarget(embed.href)) {
+        const card = !claimed && !contained && parent?.tagName === "p" && isCardableVideo(embed, options.origins);
+        if (card) claimed = true;
+        const data = typeof node.data === "object" ? node.data : null;
+        node.data = { ...data, boffVideo: card ? "card" : "drop" };
+        return;
+      }
+      const inside = contained || node.tagName !== void 0 && NO_VIDEO_CONTAINERS.has(node.tagName);
+      for (const child of node.children ?? []) visit(child, node, inside);
+    };
+    visit(tree, null, false);
+  };
+}
+function videoRoleOf(node) {
+  const data = node?.data;
+  if (typeof data !== "object" || data === null || !("boffVideo" in data)) {
+    return void 0;
+  }
+  return data.boffVideo === "card" || data.boffVideo === "drop" ? data.boffVideo : void 0;
+}
+function productVideoOf(node) {
+  const embed = linkedImageOf(node);
+  if (embed === null || typeof embed.href !== "string" || typeof embed.src !== "string") {
+    return null;
+  }
+  return { href: embed.href, poster: embed.src, alt: embed.alt };
+}
+var CANONICAL_VIDEO_ALT = /^(.+?)\s+product video$/i;
+function videoTitleOf(alt, T) {
+  const product = CANONICAL_VIDEO_ALT.exec(alt)?.[1]?.trim();
+  if (product) return fill(T.productVideoTitle, { product });
+  return alt === "" ? T.productVideo : alt;
+}
+var INLINE_VIDEO_FRAME = "group relative block aspect-video w-full max-w-md overflow-hidden rounded-xl border border-border bg-muted shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function InlineVideoCard({
+  href,
+  poster,
+  alt,
+  scope
+}) {
+  const { strings: T, failed, onFailed, productSlugs } = scope;
+  const [dialogDir, setDialogDir] = useState(null);
+  const buttonRef = useRef(null);
+  const returnFocusRef = useRef(false);
+  const open = dialogDir !== null;
+  useEffect(() => {
+    if (open || !returnFocusRef.current) return;
+    returnFocusRef.current = false;
+    const button = buttonRef.current;
+    if (button?.isConnected) button.focus();
+  }, [open]);
+  const openPlayer = useCallback((event) => {
+    const dir = event.currentTarget.closest("[dir]")?.getAttribute("dir");
+    returnFocusRef.current = true;
+    setDialogDir(dir === "rtl" ? "rtl" : "ltr");
+  }, []);
+  const closePlayer = useCallback(() => setDialogDir(null), []);
+  const name = videoTitleOf(alt, T);
+  const posterFailed = failed.has(poster);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-boff-explore": "inline-video",
+      "data-product": videoProductOf(href, productSlugs),
+      className: "my-3 block",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: buttonRef,
+            type: "button",
+            "aria-haspopup": "dialog",
+            "aria-label": fill(T.playVideo, { title: name }),
+            onClick: openPlayer,
+            className: INLINE_VIDEO_FRAME,
+            children: [
+              posterFailed ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute inset-0 flex items-center justify-center bg-muted text-muted-foreground",
+                  children: /* @__PURE__ */ jsx(Film, { className: "h-10 w-10" })
+                }
+              ) : /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: poster,
+                  alt: "",
+                  loading: "lazy",
+                  decoding: "async",
+                  onError: () => onFailed(poster),
+                  className: "boff-explore-video-poster absolute inset-0 h-full w-full object-cover"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+                  children: /* @__PURE__ */ jsx("span", { className: "flex h-14 w-14 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-md transition-transform group-hover:scale-105", children: /* @__PURE__ */ jsx(Play, { className: "h-6 w-6 fill-current" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute start-2 top-2 rounded-full border border-border bg-background/90 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-foreground shadow-sm",
+                  children: T.productVideo
+                }
+              )
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ jsx(
+          ExploreVideoDialog,
+          {
+            videoUrl: href,
+            posterUrl: poster,
+            title: name,
+            strings: T,
+            dir: dialogDir,
+            onClose: closePlayer
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var ANSWER_MARKDOWN_COMPONENTS = {
+  a: AnswerLink,
+  img: InlineConceptImage,
+  table: AnswerTable,
+  tr: AnswerTableRow
+};
+var NO_PRODUCT_SLUGS = /* @__PURE__ */ new Map();
+function ExploreAnswerBody({
+  children,
+  strings,
+  imageOrigins,
+  videoOrigins = imageOrigins,
+  productSlugs = NO_PRODUCT_SLUGS,
+  enabled = true,
+  components,
+  className
+}) {
+  const [failed, setFailed] = useState(() => /* @__PURE__ */ new Set());
+  const onFailed = useCallback((src) => {
+    setFailed(
+      (current) => current.has(src) ? current : new Set(current).add(src)
+    );
+  }, []);
+  const scope = useMemo(
+    () => ({
+      strings,
+      enabled,
+      origins: imageOrigins,
+      productSlugs,
+      failed,
+      onFailed
+    }),
+    [strings, enabled, imageOrigins, productSlugs, failed, onFailed]
+  );
+  const rehypePlugins = useMemo(
+    () => [[rehypeProductVideo, { origins: videoOrigins }]],
+    [videoOrigins]
+  );
+  const overrides = useMemo(
+    () => components ? { ...ANSWER_MARKDOWN_COMPONENTS, ...components } : ANSWER_MARKDOWN_COMPONENTS,
+    [components]
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn("boff-prose boff-explore-body min-w-0", className), children: /* @__PURE__ */ jsx(AnswerScopeContext.Provider, { value: scope, children: /* @__PURE__ */ jsx(Markdown, { components: overrides, rehypePlugins, children }) }) });
 }
 
 // src/components/explore-types.ts
@@ -3038,7 +3567,7 @@ function isHighSurrogate(code) {
 }
 function safeInlineEnd(line) {
   let codeSpan = null;
-  let link = null;
+  const links = [];
   const emphasis = [];
   let at = 0;
   while (at < line.length) {
@@ -3047,6 +3576,13 @@ function safeInlineEnd(line) {
       at += 2;
       continue;
     }
+    const innermost = links[links.length - 1];
+    if (innermost !== void 0 && innermost.kind !== "label") {
+      if (char === "(") links.push({ kind: "paren", start: innermost.start });
+      else if (char === ")") links.pop();
+      at += 1;
+      continue;
+    }
     if (char === "`") {
       let run = 1;
       while (line[at + run] === "`") run += 1;
@@ -3059,17 +3595,17 @@ function safeInlineEnd(line) {
       continue;
     }
     if (char === "[") {
-      if (link === null) link = line[at - 1] === "!" ? at - 1 : at;
+      links.push({ kind: "label", start: line[at - 1] === "!" ? at - 1 : at });
       at += 1;
       continue;
     }
-    if (char === "]") {
-      if (link !== null && line[at + 1] !== "(") link = null;
-      at += 1;
-      continue;
-    }
-    if (char === ")") {
-      link = null;
+    if (char === "]" && innermost !== void 0) {
+      links.pop();
+      if (line[at + 1] === "(") {
+        links.push({ kind: "destination", start: innermost.start });
+        at += 2;
+        continue;
+      }
       at += 1;
       continue;
     }
@@ -3096,9 +3632,11 @@ function safeInlineEnd(line) {
     }
     at += 1;
   }
-  const open = [codeSpan, link, emphasis[0]?.start ?? null].filter(
-    (value) => value !== null
-  );
+  const open = [
+    codeSpan,
+    links[0]?.start ?? null,
+    emphasis[0]?.start ?? null
+  ].filter((value) => value !== null);
   return open.length === 0 ? line.length : Math.min(...open);
 }
 function revealBoundary(text, limit) {
@@ -5085,6 +5623,7 @@ function AssistantBubble({
   message,
   activity,
   imageOrigins,
+  productSlugs,
   productNames,
   speechLang,
   onNavigate,
@@ -5199,6 +5738,7 @@ function AssistantBubble({
               {
                 strings: T,
                 imageOrigins,
+                productSlugs,
                 enabled: completed,
                 className: "boff-prose-sm text-card-foreground",
                 children: visible
@@ -5956,6 +6496,10 @@ function ExplorePage({
     () => productNamesByOrigin(catalog.products),
     [catalog.products]
   );
+  const productSlugs = useMemo(
+    () => productSlugsByOrigin(catalog.products),
+    [catalog.products]
+  );
   useEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -6518,6 +7062,7 @@ function ExplorePage({
                   message,
                   activity,
                   imageOrigins,
+                  productSlugs,
                   productNames,
                   speechLang,
                   onNavigate,
@@ -6841,6 +7386,6 @@ function ExplorePage({
   );
 }
 
-export { EXPLORE_PREFILL_MAX_LENGTH, ExplorePage, answerPlainText, answerSpeechText, exploreQuestionHref, inlineImageOrigins, isInlineImageAllowed, logoUrlOf, productNamesByOrigin, referenceKindOf, summariseReferences };
+export { EXPLORE_PREFILL_MAX_LENGTH, ExplorePage, answerPlainText, answerSpeechText, exploreQuestionHref, inlineImageOrigins, isInlineImageAllowed, isInlineVideoAllowed, logoUrlOf, productNamesByOrigin, referenceKindOf, summariseReferences };
 //# sourceMappingURL=explore.mjs.map
 //# sourceMappingURL=explore.mjs.map