@artooi/ag-ui-web-component 0.33.1 → 0.35.0

package/dist/index.js

@@ -59,6 +59,8 @@ var ICON_SEND = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path
 var ICON_STOP = `<svg class="glyph glyph--solid" viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2.5"/></svg>`;
 var ICON_ATTACH = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M17 8.5V15a5 5 0 0 1-10 0V7a3 3 0 0 1 6 0v7.5a1 1 0 0 1-2 0V8.5"/></svg>`;
 var ICON_VOICE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z"/><path d="M5 11v1a7 7 0 0 0 14 0v-1"/><path d="M12 19v3"/></svg>`;
+var ICON_MOON = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z"/></svg>`;
+var ICON_SUN = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>`;
 var ICON_LAUNCHER = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H9l-5 4z"/></svg>`;
 var ICON_COPY = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h8"/></svg>`;
 var ICON_RETRY = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.5-5.8"/><path d="M20 4v4h-4"/></svg>`;
@@ -69,7 +71,12 @@ var ICON_FILE_IMAGE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"
 var ICON_FILE_PDF = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><rect class="glyph--solid" x="7.5" y="13.5" width="9" height="4.5" rx="1"/></svg>`;
 var ICON_FILE_TEXT = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 13.5h7M8.5 17h4.5"/></svg>`;
 var CHART_ACTIVITY_TYPE = "chart";
+var EDGE_MARGIN = 24;
 var ANNOUNCE_CLEAR_MS = 150;
+var HIGHLIGHT_OVERLAY_Z_INDEX = 2147483001;
+var THREADS_DOCK_MIN_WIDTH = 900;
+var PASTE_ATTACH_CHARS = 5e3;
+var SCREEN_EDGE_MARGIN = 8;
 
 // src/core/ag_ui_chat.ts
 import { randomUUID as randomUUID5 } from "@ag-ui/client";
@@ -106,6 +113,95 @@ function parseSkills(value) {
   return value.filter(isSkill);
 }
 
+// src/tools/chat_surface_tools.ts
+var CHAT_CORNERS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+function isChatCorner(value) {
+  return CHAT_CORNERS.includes(value);
+}
+function createChatSurfaceTools(surface) {
+  return [
+    {
+      name: "read_chat_surface",
+      description: "Describe the chat panel you are speaking from: its placement, whether it is collapsed, whether it can be moved, and the box it occupies. Read this before moving or minimising yourself, since a full-screen panel has nowhere to move to. Read-only.",
+      parameters: {
+        type: "object",
+        properties: {},
+        required: [],
+        [X_SUMMARY_KEY]: "Read the chat's own position"
+      },
+      handler: () => surface.describeSurface()
+    },
+    {
+      name: "move_chat",
+      description: "Move your own panel to a corner, to uncover something the user needs to see. `corner` is top-left, top-right, bottom-left or bottom-right. Answers `moved: false` with a reason when the placement owns its position or the panel fills the screen; check `read_chat_surface` first, and prefer minimise_chat when there is nowhere to move to.",
+      parameters: {
+        type: "object",
+        properties: {
+          corner: {
+            type: "string",
+            enum: [...CHAT_CORNERS]
+          }
+        },
+        required: ["corner"],
+        [X_SUMMARY_KEY]: "Move the chat out of the way"
+      },
+      handler: (args) => {
+        const asked = String(args["corner"] ?? "");
+        const report = surface.describeSurface();
+        if (!isChatCorner(asked)) {
+          return {
+            moved: false,
+            reason: `"${asked}" is not a corner; use one of ${CHAT_CORNERS.join(", ")}`
+          };
+        }
+        if (!report.movable) {
+          return {
+            moved: false,
+            reason: report.fullBleed ? "the panel fills the screen, so there is nowhere to move it to" : report.draggable === false ? "this page has turned off moving the panel" : `the "${report.placement ?? ""}" placement owns the panel's position`,
+            suggestion: report.collapsible ? "minimise_chat" : null
+          };
+        }
+        return { moved: surface.moveTo(asked, { announce: true }), corner: asked };
+      }
+    },
+    {
+      name: "minimise_chat",
+      description: "Collapse your own panel to its launcher, so the user can see the whole page. The launcher stays visible and reopens it. Answers `minimised: false` when the placement has no collapsed state, which is the case for a full-page chat.",
+      parameters: {
+        type: "object",
+        properties: {},
+        required: [],
+        [X_SUMMARY_KEY]: "Minimise the chat"
+      },
+      handler: () => {
+        const report = surface.describeSurface();
+        if (!report.collapsible) {
+          return {
+            minimised: false,
+            reason: "this placement has no collapsed state, so there is no launcher to return to"
+          };
+        }
+        surface.setCollapsed(true, { announce: true });
+        return { minimised: true };
+      }
+    },
+    {
+      name: "restore_chat",
+      description: "Open your own panel again after minimising it.",
+      parameters: {
+        type: "object",
+        properties: {},
+        required: [],
+        [X_SUMMARY_KEY]: "Restore the chat"
+      },
+      handler: () => {
+        surface.setCollapsed(false);
+        return { restored: true };
+      }
+    }
+  ];
+}
+
 // src/tools/client_tool_registry.ts
 var ClientToolRegistry = class {
   #tools = /* @__PURE__ */ new Map();
@@ -149,6 +245,133 @@ function isNavigates(parameters) {
   return parameters[X_NAVIGATES_KEY] === true;
 }
 
+// src/dom/highlight_overlay.ts
+var ACCENT = "#4f46e5";
+function tokenOn(target, name, fallback) {
+  const value = window.getComputedStyle(target).getPropertyValue(name).trim();
+  return value === "" ? fallback : value;
+}
+var DEFAULT_PADDING_PX = 4;
+function showHighlightOverlay(target, options = {}) {
+  const root = document.createElement("div");
+  root.setAttribute("data-ag-ui-highlight", "");
+  root.setAttribute("aria-hidden", "true");
+  root.style.cssText = [
+    "position: fixed",
+    "inset: 0",
+    "pointer-events: none",
+    // Above the widget's own default, because the overlay's whole job is to
+    // point at something on the page the widget is sitting over. A host whose
+    // chrome stacks higher still can say so.
+    `z-index: ${tokenOn(target, "--ag-ui-highlight-z-index", String(HIGHLIGHT_OVERLAY_Z_INDEX))}`
+  ].join(";");
+  const scrim = document.createElement("div");
+  const ring = document.createElement("div");
+  root.className = "ag-ui-highlight";
+  scrim.className = "ag-ui-highlight-scrim";
+  ring.className = "ag-ui-highlight-ring";
+  if (options.scrim === true) {
+    root.append(scrim);
+  }
+  root.append(ring);
+  const ringWidth = options.ringWidth ?? Number.parseFloat(tokenOn(target, "--ag-ui-highlight-ring-width", "3"));
+  const flowMs = options.flowMs ?? Number.parseFloat(tokenOn(target, "--ag-ui-highlight-flow-ms", "2400"));
+  const paint = () => {
+    const box = target.getBoundingClientRect();
+    const pad = options.padding ?? DEFAULT_PADDING_PX;
+    const radius = options.radius ?? Number.parseFloat(getComputedStyle(target).borderRadius);
+    const left = box.left - pad;
+    const top = box.top - pad;
+    const width = box.width + pad * 2;
+    const height = box.height + pad * 2;
+    if (options.scrim === true) {
+      scrim.style.cssText = [
+        "position: absolute",
+        "inset: 0",
+        `background: ${tokenOn(target, "--ag-ui-highlight-scrim", "rgba(15, 15, 25, 0.45)")}`,
+        `clip-path: path(evenodd, '${holePath(left, top, width, height, radius + pad)}')`
+      ].join(";");
+    }
+    ring.style.cssText = [
+      "position: absolute",
+      `left: ${left}px`,
+      `top: ${top}px`,
+      `width: ${width}px`,
+      `height: ${height}px`,
+      `border-radius: ${radius + pad}px`,
+      `border: ${ringWidth}px solid transparent`,
+      "box-sizing: border-box",
+      ringPaint(target, options)
+    ].join(";");
+  };
+  paint();
+  let flow = null;
+  if (options.gradient === true && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    flow = ring.animate([{ backgroundPosition: "100% 0" }, { backgroundPosition: "-100% 0" }], {
+      duration: flowMs,
+      iterations: Number.POSITIVE_INFINITY,
+      easing: "linear"
+    });
+  }
+  const listen = { capture: true, passive: true };
+  window.addEventListener("scroll", paint, listen);
+  window.addEventListener("resize", paint, listen);
+  document.body.appendChild(root);
+  return () => {
+    window.removeEventListener("scroll", paint, listen);
+    window.removeEventListener("resize", paint, listen);
+    flow?.cancel();
+    root.remove();
+  };
+}
+function safeColor(value) {
+  if (value === void 0) {
+    return null;
+  }
+  return CSS.supports("color", value) ? value : null;
+}
+function ringPaint(target, options) {
+  const color = safeColor(options.color) ?? tokenOn(target, "--ag-ui-accent", ACCENT);
+  if (options.gradient !== true) {
+    return `border-color: ${color}`;
+  }
+  const image = tokenOn(
+    target,
+    "--ag-ui-highlight-gradient",
+    `linear-gradient(115deg, transparent 20%, ${color} 50%, transparent 80%)`
+  );
+  const mask = "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)";
+  return [
+    `background-image: ${image}`,
+    "background-origin: border-box",
+    "background-size: 300% 100%",
+    `-webkit-mask: ${mask}`,
+    `mask: ${mask}`,
+    "-webkit-mask-composite: xor",
+    "mask-composite: exclude",
+    "background-position: 50% 0"
+  ].join(";");
+}
+function holePath(x2, y2, width, height, radius) {
+  const r = Math.max(0, Math.min(radius, width / 2, height / 2));
+  const right = x2 + width;
+  const bottom = y2 + height;
+  const outer = `M 0 0 H ${window.innerWidth} V ${window.innerHeight} H 0 Z`;
+  const hole = [
+    `M ${x2 + r} ${y2}`,
+    `H ${right - r}`,
+    `A ${r} ${r} 0 0 1 ${right} ${y2 + r}`,
+    `V ${bottom - r}`,
+    `A ${r} ${r} 0 0 1 ${right - r} ${bottom}`,
+    `H ${x2 + r}`,
+    `A ${r} ${r} 0 0 1 ${x2} ${bottom - r}`,
+    `V ${y2 + r}`,
+    `A ${r} ${r} 0 0 1 ${x2 + r} ${y2}`,
+    "Z"
+  ].join(" ");
+  return `${outer} ${hole}`;
+}
+
 // src/dom/native_setter.ts
 function prototypeSetter(proto, prop) {
   const setter = Object.getOwnPropertyDescriptor(proto, prop).set;
@@ -172,7 +395,7 @@ function setNativeChecked(el2, checked) {
 }
 
 // src/dom/animations.ts
-var ACCENT = "#4f46e5";
+var ACCENT2 = "#4f46e5";
 var ACCENT_HALO = "rgba(79, 70, 229, 0.4)";
 var ACCENT_PROPERTY = "--ag-ui-accent";
 function delay(ms) {
@@ -213,7 +436,7 @@ async function highlightThenClick(el2, options = {}) {
   const highlightMs = options.highlightMs ?? 280;
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
-  el2.style.outline = `2px solid ${accentColor(el2, ACCENT)}`;
+  el2.style.outline = `2px solid ${accentColor(el2, ACCENT2)}`;
   el2.style.outlineOffset = "2px";
   await delay(highlightMs);
   el2.style.outline = previousOutline;
@@ -260,10 +483,21 @@ async function flashRing(el2, options, focusByDefault) {
   if (flashMs <= 0) {
     return;
   }
+  if (options.scrim === true || options.gradient === true) {
+    const dismiss = showHighlightOverlay(el2, {
+      scrim: options.scrim === true,
+      gradient: options.gradient === true,
+      ...options.color === void 0 ? {} : { color: options.color },
+      ...options.ringPadding === void 0 ? {} : { padding: options.ringPadding }
+    });
+    await delay(flashMs);
+    dismiss();
+    return;
+  }
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
   const previousTransition = el2.style.transition;
-  const color = options.color ?? accentColor(el2, ACCENT);
+  const color = options.color ?? accentColor(el2, ACCENT2);
   el2.style.outline = `3px solid ${color}`;
   el2.style.outlineOffset = "2px";
   const fadeMs = prefersReducedMotion() ? 0 : Math.round(flashMs * FLASH_FADE_RATIO);
@@ -313,7 +547,7 @@ async function selectOption(el2, value, options = {}) {
   const highlightMs = options.highlightMs ?? 220;
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
-  el2.style.outline = `2px solid ${accentColor(el2, ACCENT)}`;
+  el2.style.outline = `2px solid ${accentColor(el2, ACCENT2)}`;
   el2.style.outlineOffset = "2px";
   await motionDelay(highlightMs);
   setNativeValue(el2, option.value);
@@ -336,7 +570,9 @@ async function toggleControl(el2, checked, options = {}) {
 // src/tools/page_action_tools.ts
 var PAGE_ACTIONS = {
   SCROLL: "scroll",
-  DRAG: "drag"
+  DRAG: "drag",
+  /** The widget's own position: see `createChatSurfaceTools`. */
+  CHAT: "chat"
 };
 function createPageActionTools(enabled, resolveTarget) {
   const tools = [];
@@ -546,6 +782,14 @@ function createRouteTools(getRouteMap, getNavigate) {
 var DEFAULT_UI_STRINGS = {
   title: "Assistant",
   chatHistory: "Chat history",
+  closeHistory: "Close history",
+  searchConversations: "Search conversations",
+  queued: "Waiting to send",
+  removeQueued: 'Do not send "{text}"',
+  noMatches: "No conversations match that.",
+  chatMoved: "Moved this panel out of the way",
+  chatMinimised: "Minimised this panel",
+  undo: "Undo",
   newChat: "New chat",
   collapse: "Collapse",
   expand: "Expand",
@@ -1093,11 +1337,14 @@ function accepts(accept, file) {
 
 // src/ui/chart_block.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-var WIDTH = 480;
-var HEIGHT = 220;
 var PAD = { top: 20, right: 12, bottom: 30, left: 44 };
-var PLOT_W = WIDTH - PAD.left - PAD.right;
-var PLOT_H = HEIGHT - PAD.top - PAD.bottom;
+var DEFAULT_WIDTH = 480;
+var MIN_WIDTH = 220;
+var HEIGHT_RATIO = 220 / 480;
+var MIN_HEIGHT = 160;
+var MAX_HEIGHT = 320;
+var WIDTH_STEP = 8;
+var AXIS_CHAR_WIDTH = 5.6;
 var SERIES_COLORS = [
   "var(--ag-ui-chart-1, #4f7cff)",
   "var(--ag-ui-chart-2, #21b573)",
@@ -1109,6 +1356,16 @@ var SERIES_COLORS = [
 function seriesColor(index) {
   return SERIES_COLORS[index % SERIES_COLORS.length];
 }
+function geometryFor(width) {
+  const w = Math.max(MIN_WIDTH, width);
+  const h = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, Math.round(w * HEIGHT_RATIO)));
+  return {
+    width: w,
+    height: h,
+    plotW: w - PAD.left - PAD.right,
+    plotH: h - PAD.top - PAD.bottom
+  };
+}
 function el(name, attrs) {
   const node = document.createElementNS(SVG_NS, name);
   for (const [key, value] of Object.entries(attrs)) {
@@ -1143,21 +1400,26 @@ function extent(spec) {
   const min = Math.min(0, ...values);
   return max === min ? { min, max: max + 1 } : { min, max };
 }
-function scaleY(value, min, max) {
-  return PAD.top + PLOT_H - (value - min) / (max - min) * PLOT_H;
+function scaleY(value, min, max, geo) {
+  return PAD.top + geo.plotH - (value - min) / (max - min) * geo.plotH;
 }
-function bandCentre(index, count) {
-  const step = PLOT_W / count;
+function bandCentre(index, count, geo) {
+  const step = geo.plotW / count;
   return PAD.left + step * index + step / 2;
 }
-function drawAxes(svg2, spec, min, max) {
+function labelStride(labels, geo) {
+  const band = geo.plotW / labels.length;
+  const widest = Math.max(...labels.map((label) => label.length)) * AXIS_CHAR_WIDTH;
+  return Math.max(1, Math.ceil(widest / band));
+}
+function drawAxes(svg2, spec, geo, min, max) {
   for (const value of [min, max]) {
-    const y2 = scaleY(value, min, max);
+    const y2 = scaleY(value, min, max, geo);
     svg2.appendChild(
       el("line", {
         x1: PAD.left,
         y1: y2,
-        x2: WIDTH - PAD.right,
+        x2: geo.width - PAD.right,
         y2,
         stroke: "currentColor",
         "stroke-opacity": value === min ? 0.35 : 0.12
@@ -1167,23 +1429,27 @@ function drawAxes(svg2, spec, min, max) {
       text(String(Math.round(value)), { x: PAD.left - 6, y: y2 + 4, "text-anchor": "end" })
     );
   }
+  const stride = labelStride(spec.labels, geo);
   spec.labels.forEach((label, i) => {
+    if (i % stride !== 0) {
+      return;
+    }
     svg2.appendChild(
       text(label, {
-        x: bandCentre(i, spec.labels.length),
-        y: HEIGHT - PAD.bottom + 16,
+        x: bandCentre(i, spec.labels.length, geo),
+        y: geo.height - PAD.bottom + 16,
         "text-anchor": "middle"
       })
     );
   });
 }
-function drawBars(svg2, spec, min, max) {
-  const step = PLOT_W / spec.labels.length;
+function drawBars(svg2, spec, geo, min, max) {
+  const step = geo.plotW / spec.labels.length;
   const width = step * 0.7 / spec.series.length;
-  const base = scaleY(min, min, max);
+  const base = scaleY(min, min, max, geo);
   spec.series.forEach((series, s) => {
     series.points.forEach((value, i) => {
-      const y2 = scaleY(value, min, max);
+      const y2 = scaleY(value, min, max, geo);
       svg2.appendChild(
         el("rect", {
           x: PAD.left + step * i + step * 0.15 + width * s,
@@ -1197,8 +1463,8 @@ function drawBars(svg2, spec, min, max) {
     });
   });
 }
-function drawStacked(svg2, spec, min, max) {
-  const step = PLOT_W / spec.labels.length;
+function drawStacked(svg2, spec, geo, min, max) {
+  const step = geo.plotW / spec.labels.length;
   const width = step * 0.7;
   const running = spec.labels.map(() => 0);
   spec.series.forEach((series, s) => {
@@ -1206,22 +1472,24 @@ function drawStacked(svg2, spec, min, max) {
       const from = running[i] ?? 0;
       const to = from + value;
       running[i] = to;
-      const y2 = scaleY(to, min, max);
+      const y2 = scaleY(to, min, max, geo);
       svg2.appendChild(
         el("rect", {
           x: PAD.left + step * i + step * 0.15,
           y: y2,
           width,
-          height: Math.max(1, scaleY(from, min, max) - y2),
+          height: Math.max(1, scaleY(from, min, max, geo) - y2),
           fill: seriesColor(s)
         })
       );
     });
   });
 }
-function drawLines(svg2, spec, min, max) {
+function drawLines(svg2, spec, geo, min, max) {
   spec.series.forEach((series, s) => {
-    const points = series.points.map((value, i) => `${bandCentre(i, spec.labels.length)},${scaleY(value, min, max)}`).join(" ");
+    const points = series.points.map(
+      (value, i) => `${bandCentre(i, spec.labels.length, geo)},${scaleY(value, min, max, geo)}`
+    ).join(" ");
     svg2.appendChild(
       el("polyline", {
         points,
@@ -1233,13 +1501,13 @@ function drawLines(svg2, spec, min, max) {
     );
   });
 }
-function drawScatter(svg2, spec, min, max) {
+function drawScatter(svg2, spec, geo, min, max) {
   spec.series.forEach((series, s) => {
     series.points.forEach((value, i) => {
       svg2.appendChild(
         el("circle", {
-          cx: bandCentre(i, spec.labels.length),
-          cy: scaleY(value, min, max),
+          cx: bandCentre(i, spec.labels.length, geo),
+          cy: scaleY(value, min, max, geo),
           r: 4,
           fill: seriesColor(s),
           "fill-opacity": 0.85
@@ -1248,11 +1516,11 @@ function drawScatter(svg2, spec, min, max) {
     });
   });
 }
-function drawPie(svg2, points) {
+function drawPie(svg2, points, geo) {
   const total = points.reduce((sum, value) => sum + value, 0);
-  const cx = WIDTH / 2;
-  const cy = PAD.top + PLOT_H / 2;
-  const r = Math.min(PLOT_W, PLOT_H) / 2;
+  const cx = geo.width / 2;
+  const cy = PAD.top + geo.plotH / 2;
+  const r = Math.min(geo.plotW, geo.plotH) / 2;
   if (total === 0) {
     svg2.appendChild(
       el("circle", { cx, cy, r, fill: "none", stroke: "currentColor", "stroke-opacity": 0.3 })
@@ -1281,6 +1549,35 @@ function drawPie(svg2, points) {
     angle = end;
   });
 }
+function drawSvg(spec, geo) {
+  const svg2 = el("svg", {
+    viewBox: `0 0 ${geo.width} ${geo.height}`,
+    width: "100%",
+    role: "img"
+  });
+  svg2.setAttribute("aria-label", spec.title ?? `${spec.kind} chart`);
+  if (spec.kind === "pie") {
+    const first = spec.series[0];
+    drawPie(
+      svg2,
+      first.points.map((value) => Math.max(0, value)),
+      geo
+    );
+    return svg2;
+  }
+  const { min, max } = extent(spec);
+  drawAxes(svg2, spec, geo, min, max);
+  if (spec.kind === "bar") {
+    drawBars(svg2, spec, geo, min, max);
+  } else if (spec.kind === "stacked") {
+    drawStacked(svg2, spec, geo, min, max);
+  } else if (spec.kind === "line") {
+    drawLines(svg2, spec, geo, min, max);
+  } else {
+    drawScatter(svg2, spec, geo, min, max);
+  }
+  return svg2;
+}
 function buildLegend(entries2) {
   if (entries2.length < 2) {
     return null;
@@ -1299,6 +1596,12 @@ function buildLegend(entries2) {
   });
   return row;
 }
+function fitToWidth(block, redraw) {
+  const observer = new ResizeObserver(() => {
+    redraw(Math.round(block.clientWidth / WIDTH_STEP) * WIDTH_STEP);
+  });
+  observer.observe(block);
+}
 function renderChart(spec) {
   if (spec.labels.length === 0 || spec.series.length === 0) {
     return null;
@@ -1313,27 +1616,8 @@ function renderChart(spec) {
     heading.textContent = spec.title;
     block.appendChild(heading);
   }
-  const svg2 = el("svg", { viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: "100%", role: "img" });
-  svg2.setAttribute("aria-label", spec.title ?? `${spec.kind} chart`);
-  if (spec.kind === "pie") {
-    const first = spec.series[0];
-    drawPie(
-      svg2,
-      first.points.map((value) => Math.max(0, value))
-    );
-  } else {
-    const { min, max } = extent(spec);
-    drawAxes(svg2, spec, min, max);
-    if (spec.kind === "bar") {
-      drawBars(svg2, spec, min, max);
-    } else if (spec.kind === "stacked") {
-      drawStacked(svg2, spec, min, max);
-    } else if (spec.kind === "line") {
-      drawLines(svg2, spec, min, max);
-    } else {
-      drawScatter(svg2, spec, min, max);
-    }
-  }
+  let width = DEFAULT_WIDTH;
+  let svg2 = drawSvg(spec, geometryFor(width));
   block.appendChild(svg2);
   const legend = buildLegend(
     spec.kind === "pie" ? spec.labels : spec.series.map((series) => series.label)
@@ -1341,6 +1625,15 @@ function renderChart(spec) {
   if (legend !== null) {
     block.appendChild(legend);
   }
+  fitToWidth(block, (measured) => {
+    if (measured === width) {
+      return;
+    }
+    width = measured;
+    const next = drawSvg(spec, geometryFor(width));
+    svg2.replaceWith(next);
+    svg2 = next;
+  });
   return block;
 }
 
@@ -1700,13 +1993,36 @@ var CheckpointMenu = class {
 };
 
 // src/ui/clamp_launcher.ts
-function clampLauncher(launcher, viewport) {
+function clampLauncher(launcher, viewport, margin = SCREEN_EDGE_MARGIN) {
+  const room = Math.min(margin, Math.max(0, (viewport.width - launcher.width) / 2));
+  const vertical = Math.min(margin, Math.max(0, (viewport.height - launcher.height) / 2));
   return {
-    left: Math.max(0, Math.min(launcher.left, viewport.width - launcher.width)),
-    top: Math.max(0, Math.min(launcher.top, viewport.height - launcher.height))
+    left: Math.max(
+      viewport.left + room,
+      Math.min(launcher.left, viewport.left + viewport.width - launcher.width - room)
+    ),
+    top: Math.max(
+      viewport.top + vertical,
+      Math.min(launcher.top, viewport.top + viewport.height - launcher.height - vertical)
+    )
   };
 }
 
+// src/ui/clamp_panel.ts
+function clampPanel(host, viewport, margin = EDGE_MARGIN) {
+  const width = host.right - host.left;
+  const height = host.bottom - host.top;
+  const left = Math.max(
+    viewport.left + margin,
+    Math.min(host.left, viewport.left + viewport.width - margin - width)
+  );
+  const top = Math.max(
+    viewport.top + margin,
+    Math.min(host.top, viewport.top + viewport.height - margin - height)
+  );
+  return { left, top, right: left + width, bottom: top + height };
+}
+
 // src/ui/confirmation_card.ts
 function actionButton2(modifier, label) {
   const button2 = document.createElement("button");
@@ -1908,6 +2224,7 @@ function enableLauncherDrag(launcher, options) {
     const onUp = (up) => {
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
       if (!dragging) {
         return;
       }
@@ -1925,6 +2242,7 @@ function enableLauncherDrag(launcher, options) {
     };
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
   });
   let pending = null;
   const settle = () => {
@@ -1963,49 +2281,53 @@ function enableLauncherDrag(launcher, options) {
   launcher.addEventListener("blur", settle);
 }
 
-// src/ui/launcher_placement.ts
-var EDGE_MARGIN = 24;
-function launcherPlacement(launcher, panel, viewport, margin = EDGE_MARGIN) {
-  const roomRunningRight = viewport.width - launcher.left;
-  const roomRunningLeft = launcher.left + launcher.width;
-  const roomRunningDown = viewport.height - launcher.top;
-  const roomRunningUp = launcher.top + launcher.height;
-  const corner = {
-    x: roomRunningRight >= roomRunningLeft ? "left" : "right",
-    y: roomRunningDown >= roomRunningUp ? "top" : "bottom"
-  };
-  const wantedLeft = corner.x === "left" ? launcher.left : launcher.left + launcher.width - panel.width;
-  const wantedTop = corner.y === "top" ? launcher.top : launcher.top + launcher.height - panel.height;
-  const hostLeft = clamp(wantedLeft, margin, viewport.width - margin - panel.width);
-  const hostTop = clamp(wantedTop, margin, viewport.height - margin - panel.height);
-  const hostRight = hostLeft + panel.width;
-  const hostBottom = hostTop + panel.height;
+// src/ui/place_widget.ts
+function placeWidget(host, launcher, corner, screen) {
   return {
-    corner,
     hostInset: inset({
-      top: corner.y === "top" ? hostTop : null,
-      right: corner.x === "right" ? viewport.width - hostRight : null,
-      bottom: corner.y === "bottom" ? viewport.height - hostBottom : null,
-      left: corner.x === "left" ? hostLeft : null
+      top: corner.y === "top" ? host.top : null,
+      right: corner.x === "right" ? screen.width - host.right : null,
+      bottom: corner.y === "bottom" ? screen.height - host.bottom : null,
+      left: corner.x === "left" ? host.left : null
     }),
-    // Measured from the host box's pinned corner to the launcher's matching
-    // corner, so the launcher lands exactly where it was dropped.
     launcherInset: inset({
-      top: corner.y === "top" ? launcher.top - hostTop : null,
-      right: corner.x === "right" ? hostRight - (launcher.left + launcher.width) : null,
-      bottom: corner.y === "bottom" ? hostBottom - (launcher.top + launcher.height) : null,
-      left: corner.x === "left" ? launcher.left - hostLeft : null
+      top: corner.y === "top" ? launcher.top - host.top : null,
+      right: corner.x === "right" ? host.right - (launcher.left + launcher.width) : null,
+      bottom: corner.y === "bottom" ? host.bottom - (launcher.top + launcher.height) : null,
+      left: corner.x === "left" ? launcher.left - host.left : null
     })
   };
 }
-function clamp(value, low, high) {
-  return Math.max(low, Math.min(value, high));
-}
 function inset(sides) {
   const side = (value) => value === null ? "auto" : `${Math.round(value)}px`;
   return `${side(sides.top)} ${side(sides.right)} ${side(sides.bottom)} ${side(sides.left)}`;
 }
 
+// src/ui/launcher_placement.ts
+function launcherPlacement(launcher, panel, viewport, screen, margin = SCREEN_EDGE_MARGIN) {
+  const roomRunningRight = viewport.left + viewport.width - launcher.left;
+  const roomRunningLeft = launcher.left + launcher.width - viewport.left;
+  const roomRunningDown = viewport.top + viewport.height - launcher.top;
+  const roomRunningUp = launcher.top + launcher.height - viewport.top;
+  const corner = {
+    x: roomRunningRight >= roomRunningLeft ? "left" : "right",
+    y: roomRunningDown >= roomRunningUp ? "top" : "bottom"
+  };
+  const wantedLeft = corner.x === "left" ? launcher.left : launcher.left + launcher.width - panel.width;
+  const wantedTop = corner.y === "top" ? launcher.top : launcher.top + launcher.height - panel.height;
+  const host = clampPanel(
+    {
+      left: wantedLeft,
+      top: wantedTop,
+      right: wantedLeft + panel.width,
+      bottom: wantedTop + panel.height
+    },
+    viewport,
+    margin
+  );
+  return { corner, ...placeWidget(host, launcher, corner, screen) };
+}
+
 // src/ui/message_actions.ts
 var CONFIRM_MS2 = 1500;
 function attachMessageActions(bubble, options) {
@@ -2374,6 +2696,57 @@ function place(button2, rect) {
   button2.style.left = `${Math.min(Math.max(centre, half), width - half)}px`;
 }
 
+// src/ui/panel_drag.ts
+var DRAG_THRESHOLD2 = 4;
+var CONTROLS = "button, a[href], input, select, textarea, [contenteditable]";
+function enablePanelDrag(handle, options) {
+  handle.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || !options.enabled() || onControl(event, handle)) {
+      return;
+    }
+    const start = options.rect();
+    const originX = event.clientX;
+    const originY = event.clientY;
+    let dragging = false;
+    const boxAt2 = (x2, y2) => {
+      const dx = x2 - originX;
+      const dy = y2 - originY;
+      return {
+        left: start.left + dx,
+        top: start.top + dy,
+        right: start.right + dx,
+        bottom: start.bottom + dy
+      };
+    };
+    const onMove = (move) => {
+      if (!dragging && Math.hypot(move.clientX - originX, move.clientY - originY) < DRAG_THRESHOLD2) {
+        return;
+      }
+      dragging = true;
+      handle.setAttribute("data-dragging", "true");
+      options.apply(boxAt2(move.clientX, move.clientY), start);
+    };
+    const onUp = (up) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+      if (!dragging) {
+        return;
+      }
+      handle.removeAttribute("data-dragging");
+      options.commit(boxAt2(up.clientX, up.clientY), start);
+    };
+    event.preventDefault();
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  });
+}
+function onControl(event, handle) {
+  const path = event.composedPath();
+  return path.slice(0, path.indexOf(handle)).some((node) => node instanceof Element && node.matches(CONTROLS));
+}
+
 // src/ui/prettify_tool_name.ts
 function prettifyToolName(name) {
   const spaced = name.replace(/[._-]+/g, " ").trim();
@@ -2876,11 +3249,11 @@ function createDOMPurify() {
   const originalDocument = document2;
   const currentScript = originalDocument.currentScript;
   window2.DocumentFragment;
-  const HTMLTemplateElement = window2.HTMLTemplateElement, Node2 = window2.Node, Element = window2.Element, NodeFilter2 = window2.NodeFilter, _window$NamedNodeMap = window2.NamedNodeMap;
+  const HTMLTemplateElement = window2.HTMLTemplateElement, Node2 = window2.Node, Element2 = window2.Element, NodeFilter2 = window2.NodeFilter, _window$NamedNodeMap = window2.NamedNodeMap;
   _window$NamedNodeMap === void 0 ? window2.NamedNodeMap || window2.MozNamedAttrMap : _window$NamedNodeMap;
   window2.HTMLFormElement;
   const DOMParser = window2.DOMParser, trustedTypes = window2.trustedTypes;
-  const ElementPrototype = Element.prototype;
+  const ElementPrototype = Element2.prototype;
   const cloneNode = lookupGetter(ElementPrototype, "cloneNode");
   const remove = lookupGetter(ElementPrototype, "remove");
   const getNextSibling = lookupGetter(ElementPrototype, "nextSibling");
@@ -4110,111 +4483,111 @@ function createDOMPurify() {
 }
 var purify = createDOMPurify();
 
-// node_modules/.pnpm/marked@18.0.10/node_modules/marked/lib/marked.esm.js
-function C() {
+// node_modules/.pnpm/marked@18.0.11/node_modules/marked/lib/marked.esm.js
+function A() {
   return { async: false, breaks: false, extensions: null, gfm: true, hooks: null, pedantic: false, renderer: null, silent: false, tokenizer: null, walkTokens: null };
 }
-var R = C();
+var R = A();
 function j(l3) {
   R = l3;
 }
 var z = { exec: () => null };
-function A(l3) {
+function I(l3) {
   let e = [];
   return (t) => {
     let n = Math.max(0, Math.min(3, t - 1)), s = e[n];
     return s || (s = l3(n), e[n] = s), s;
   };
 }
-function d(l3, e = "") {
+function k(l3, e = "") {
   let t = typeof l3 == "string" ? l3 : l3.source, n = { replace: (s, r) => {
     let i = typeof r == "string" ? r : r.source;
     return i = i.replace(m.caret, "$1"), t = t.replace(s, i), n;
   }, getRegex: () => new RegExp(t, e) };
   return n;
 }
-var Te = ((l3 = "") => {
+var Oe = ((l3 = "") => {
   try {
     return !!new RegExp("(?<=1)(?<!1)" + l3);
   } catch {
     return false;
   }
 })();
-var m = { codeRemoveIndent: /^(?: {1,4}| {0,3}\t)/gm, outputLinkReplace: /\\([\[\]])/g, indentCodeCompensation: /^(\s+)(?:```)/, beginningSpace: /^\s+/, endingHash: /#$/, startingSpaceChar: /^ /, endingSpaceChar: / $/, nonSpaceChar: /[^ ]/, newLineCharGlobal: /\n/g, tabCharGlobal: /\t/g, multipleSpaceGlobal: /\s+/g, blankLine: /^[ \t]*$/, doubleBlankLine: /\n[ \t]*\n[ \t]*$/, blockquoteStart: /^ {0,3}>/, blockquoteSetextReplace: /\n {0,3}((?:=+|-+) *)(?=\n|$)/g, blockquoteSetextReplace2: /^ {0,3}>[ \t]?/gm, listReplaceNesting: /^ {1,4}(?=( {4})*[^ ])/g, listIsTask: /^\[[ xX]\] +\S/, listReplaceTask: /^\[[ xX]\] +/, listTaskCheckbox: /\[[ xX]\]/, anyLine: /\n.*\n/, hrefBrackets: /^<(.*)>$/, tableDelimiter: /[:|]/, tableAlignChars: /^\||\| *$/g, tableRowBlankLine: /\n[ \t]*$/, tableAlignRight: /^ *-+: *$/, tableAlignCenter: /^ *:-+: *$/, tableAlignLeft: /^ *:-+ *$/, startATag: /^<a /i, endATag: /^<\/a>/i, startPreScriptTag: /^<(pre|code|kbd|script)(\s|>)/i, endPreScriptTag: /^<\/(pre|code|kbd|script)(\s|>)/i, startAngleBracket: /^</, endAngleBracket: />$/, pedanticHrefTitle: /^([^'"]*[^\s])\s+(['"])(.*)\2/, unicodeAlphaNumeric: /[\p{L}\p{N}]/u, escapeTest: /[&<>"']/, escapeReplace: /[&<>"']/g, escapeTestNoEncode: /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/, escapeReplaceNoEncode: /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g, caret: /(^|[^\[])\^/g, percentDecode: /%25/g, findPipe: /\|/g, splitPipe: / \|/, slashPipe: /\\\|/g, carriageReturn: /\r\n|\r/g, spaceLine: /^ +$/gm, notSpaceStart: /^\S*/, endingNewline: /\n$/, listItemRegex: (l3) => new RegExp(`^( {0,3}${l3})((?:[	 ][^\\n]*)?(?:\\n|$))`), nextBulletRegex: A((l3) => new RegExp(`^ {0,${l3}}(?:[*+-]|\\d{1,9}[.)])((?:[ 	][^\\n]*)?(?:\\n|$))`)), hrRegex: A((l3) => new RegExp(`^ {0,${l3}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`)), fencesBeginRegex: A((l3) => new RegExp(`^ {0,${l3}}(?:\`\`\`|~~~)`)), headingBeginRegex: A((l3) => new RegExp(`^ {0,${l3}}#`)), htmlBeginRegex: A((l3) => new RegExp(`^ {0,${l3}}<(?:[a-z].*>|!--)`, "i")), blockquoteBeginRegex: A((l3) => new RegExp(`^ {0,${l3}}>`)) };
-var Oe = /^(?:[ \t]*(?:\n|$))+/;
+var m = { codeRemoveIndent: /^(?: {1,4}| {0,3}\t)/gm, outputLinkReplace: /\\([\[\]])/g, indentCodeCompensation: /^(\s+)(?:```)/, beginningSpace: /^\s+/, endingHash: /#$/, startingSpaceChar: /^ /, endingSpaceChar: / $/, nonSpaceChar: /[^ ]/, newLineCharGlobal: /\n/g, tabCharGlobal: /\t/g, multipleSpaceGlobal: /\s+/g, blankLine: /^[ \t]*$/, doubleBlankLine: /\n[ \t]*\n[ \t]*$/, blockquoteStart: /^ {0,3}>/, blockquoteSetextReplace: /\n {0,3}((?:=+|-+) *)(?=\n|$)/g, blockquoteSetextReplace2: /^ {0,3}>[ \t]?/gm, listReplaceNesting: /^ {1,4}(?=( {4})*[^ ])/g, listIsTask: /^\[[ xX]\] +\S/, listReplaceTask: /^\[[ xX]\] +/, listTaskCheckbox: /\[[ xX]\]/, anyLine: /\n.*\n/, hrefBrackets: /^<(.*)>$/, tableDelimiter: /[:|]/, tableAlignChars: /^\||\| *$/g, tableRowBlankLine: /\n[ \t]*$/, tableAlignRight: /^ *-+: *$/, tableAlignCenter: /^ *:-+: *$/, tableAlignLeft: /^ *:-+ *$/, startATag: /^<a /i, endATag: /^<\/a>/i, startPreScriptTag: /^<(pre|code|kbd|script)(\s|>)/i, endPreScriptTag: /^<\/(pre|code|kbd|script)(\s|>)/i, startAngleBracket: /^</, endAngleBracket: />$/, pedanticHrefTitle: /^([^'"]*[^\s])\s+(['"])(.*)\2/, unicodeAlphaNumeric: /[\p{L}\p{N}]/u, escapeTest: /[&<>"']/, escapeReplace: /[&<>"']/g, escapeTestNoEncode: /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/, escapeReplaceNoEncode: /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g, caret: /(^|[^\[])\^/g, percentDecode: /%25/g, findPipe: /\|/g, splitPipe: / \|/, slashPipe: /\\\|/g, carriageReturn: /\r\n|\r/g, spaceLine: /^ +$/gm, notSpaceStart: /^\S*/, endingNewline: /\n$/, listItemRegex: (l3) => new RegExp(`^( {0,3}${l3})((?:[	 ][^\\n]*)?(?:\\n|$))`), nextBulletRegex: I((l3) => new RegExp(`^ {0,${l3}}(?:[*+-]|\\d{1,9}[.)])((?:[ 	][^\\n]*)?(?:\\n|$))`)), hrRegex: I((l3) => new RegExp(`^ {0,${l3}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`)), fencesBeginRegex: I((l3) => new RegExp(`^ {0,${l3}}(?:\`\`\`|~~~)`)), headingBeginRegex: I((l3) => new RegExp(`^ {0,${l3}}#`)), htmlBeginRegex: I((l3) => new RegExp(`^ {0,${l3}}<(?:[a-z].*>|!--)`, "i")), blockquoteBeginRegex: I((l3) => new RegExp(`^ {0,${l3}}>`)) };
+var Te = /^(?:[ \t]*(?:\n|$))+/;
 var we = /^((?: {4}| {0,3}\t)[^\n]+(?:\n(?:[ \t]*(?:\n|$))*)?)+/;
 var ye = /^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})([^\n]*)(?:\n|$)(?:|([\s\S]*?)(?:\n|$))(?: {0,3}\1[~`]* *(?=\n|$)|$)/;
 var q = /^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/;
 var Pe = /^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/;
 var U = / {0,3}(?:[*+-]|\d{1,9}[.)])/;
 var oe = /^(?!bull |blockCode|fences|blockquote|heading|html|table)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html|table))+?)\n {0,3}(=+|-+) *(?:\n+|$)/;
-var ae = d(oe).replace(/bull/g, U).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}(?:\s|$)/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/\|table/g, "").getRegex();
-var Se = d(oe).replace(/bull/g, U).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}(?:\s|$)/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/table/g, / {0,3}\|?(?:[:\- ]*\|)+[\:\- ]*\n/).getRegex();
+var ae = k(oe).replace(/bull/g, U).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}(?:\s|$)/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/\|table/g, "").getRegex();
+var Se = k(oe).replace(/bull/g, U).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}(?:\s|$)/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/table/g, / {0,3}\|?(?:[:\- ]*\|)+[\:\- ]*\n/).getRegex();
 var K = /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table|[ \t]+\n)[^\n]+)*)/;
 var _e = /^[^\n]+/;
 var W = /(?!\s*\])(?:\\[\s\S]|[^\[\]\\])+/;
-var $e = d(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label", W).replace("title", /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex();
-var Le = d(/^(bull)([ \t][^\n]*?)?(?:\n|$)/).replace(/bull/g, U).getRegex();
+var $e = k(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label", W).replace("title", /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex();
+var Le = k(/^(bull)([ \t][^\n]*?)?(?:\n|$)/).replace(/bull/g, U).getRegex();
 var Q = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul";
 var X = /<!--(?:-?>|[\s\S]*?(?:-->|$))/;
-var Me = d("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n*|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>[^\\n]*\\n*|$)|<![A-Z][\\s\\S]*?(?:>[^\\n]*\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>[^\\n]*\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$))", "i").replace("comment", X).replace("tag", Q).replace("attribute", / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex();
-var le = (l3) => d(K).replace("hr", q).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*(?:\\n|$))|~~~)[^\\n]*(?:\\n|$)").replace("list", l3).replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", Q).getRegex();
+var Ee = k("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n*|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>[^\\n]*\\n*|$)|<![A-Z][\\s\\S]*?(?:>[^\\n]*\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>[^\\n]*\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$))", "i").replace("comment", X).replace("tag", Q).replace("attribute", / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex();
+var le = (l3) => k(K).replace("hr", q).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*(?:\\n|$))|~~~)[^\\n]*(?:\\n|$)").replace("list", l3).replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", Q).getRegex();
 var ze = le(/ {0,3}(?:[*+-]|1[.)])[ \t]+[^ \t\n]/);
-var Ee = le(/ {0,3}(?:[*+-]|\d{1,9}[.)])(?:[ \t]|\n|$)/);
-var Ce = d(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph", Ee).getRegex();
-var J = { blockquote: Ce, code: we, def: $e, fences: ye, heading: Pe, hr: q, html: Me, lheading: ae, list: Le, newline: Oe, paragraph: ze, table: z, text: _e };
-var se = d("^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)").replace("hr", q).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("blockquote", " {0,3}>").replace("code", "(?: {4}| {0,3}	)[^\\n]").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*(?:\\n|$))|~~~)[^\\n]*(?:\\n|$)").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", Q).getRegex();
-var Ae = { ...J, lheading: Se, table: se, paragraph: d(K).replace("hr", q).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("table", se).replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*(?:\\n|$))|~~~)[^\\n]*(?:\\n|$)").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]+[^ \\t\\n]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", Q).getRegex() };
-var Ie = { ...J, html: d(`^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:"[^"]*"|'[^']*'|\\s[^'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))`).replace("comment", X).replace(/tag/g, "(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(), def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/, heading: /^(#{1,6})(.*)(?:\n+|$)/, fences: z, lheading: /^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/, paragraph: d(K).replace("hr", q).replace("heading", ` *#{1,6} *[^
+var Me = le(/ {0,3}(?:[*+-]|\d{1,9}[.)])(?:[ \t]|\n|$)/);
+var Ae = k(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph", Me).getRegex();
+var J = { blockquote: Ae, code: we, def: $e, fences: ye, heading: Pe, hr: q, html: Ee, lheading: ae, list: Le, newline: Te, paragraph: ze, table: z, text: _e };
+var se = k("^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)").replace("hr", q).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("blockquote", " {0,3}>").replace("code", "(?: {4}| {0,3}	)[^\\n]").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*(?:\\n|$))|~~~)[^\\n]*(?:\\n|$)").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", Q).getRegex();
+var Ie = { ...J, lheading: Se, table: se, paragraph: k(K).replace("hr", q).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("table", se).replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*(?:\\n|$))|~~~)[^\\n]*(?:\\n|$)").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]+[^ \\t\\n]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", Q).getRegex() };
+var Ce = { ...J, html: k(`^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:"[^"]*"|'[^']*'|\\s[^'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))`).replace("comment", X).replace(/tag/g, "(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(), def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/, heading: /^(#{1,6})(.*)(?:\n+|$)/, fences: z, lheading: /^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/, paragraph: k(K).replace("hr", q).replace("heading", ` *#{1,6} *[^
 ]`).replace("lheading", ae).replace("|table", "").replace("blockquote", " {0,3}>").replace("|fences", "").replace("|list", "").replace("|html", "").replace("|tag", "").getRegex() };
 var Be = /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/;
 var De = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/;
-var pe = /^( {2,}|\\)\n(?!\s*$)/;
+var ue = /^( {2,}|\\)\n(?!\s*$)/;
 var qe = /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/;
 var _ = /[\p{P}\p{S}]/u;
-var I = /[\s\p{P}\p{S}]/u;
+var C = /[\s\p{P}\p{S}]/u;
 var v = /[^\s\p{P}\p{S}]/u;
-var ve = d(/^((?![*_])punctSpace)/, "u").replace(/punctSpace/g, I).getRegex();
+var ve = k(/^((?![*_])punctSpace)/, "u").replace(/punctSpace/g, C).getRegex();
 var He = /[\p{Pi}\p{Ps}"']/u;
-var ue = /(?!~)[\p{P}\p{S}]/u;
+var pe = /(?!~)[\p{P}\p{S}]/u;
 var Ze = /(?!~)[\s\p{P}\p{S}]/u;
 var Ge = /(?:[^\s\p{P}\p{S}]|~)/u;
-var Qe = d(/link|precode-code|html/, "g").replace("link", /\[(?:[^\[\]`]|(?<a>`+)[^`]+\k<a>(?!`))*?\]\((?:\\[\s\S]|[^\\\(\)]|\((?:\\[\s\S]|[^\\\(\)])*\))*\)/).replace("precode-", Te ? "(?<!`)()" : "(^^|[^`])").replace("code", /(?<b>`+)[^`]+\k<b>(?!`)/).replace("html", /<(?! )[^<>]*?>/).getRegex();
+var Qe = k(/link|precode-code|html/, "g").replace("link", /\[(?:[^\[\]`]|(?<a>`+)[^`]+\k<a>(?!`))*?\]\((?:\\[\s\S]|[^\\\(\)]|\((?:\\[\s\S]|[^\\\(\)])*\))*\)/).replace("precode-", Oe ? "(?<!`)()" : "(^^|[^`])").replace("code", /(?<b>`+)[^`]+\k<b>(?!`)/).replace("html", /<(?! )[^<>]*?>/).getRegex();
 var ce = /^(?:\*+(?:((?!\*)punct)|([^\s*]))?)|^_+(?:((?!_)punct)|([^\s_]))?/;
-var Ne = d(ce, "u").replace(/punct/g, _).getRegex();
-var je = d(ce, "u").replace(/punct/g, ue).getRegex();
+var Ne = k(ce, "u").replace(/punct/g, _).getRegex();
+var je = k(ce, "u").replace(/punct/g, pe).getRegex();
 var Fe = /^(?:\*+(?:((?!\*)(?!openQuote)punct)|([^\s*]))?)|^_+(?:((?!_)(?!openQuote)punct)|([^\s_]))?/;
-var Ue = d(Fe, "u").replace(/openQuote/g, He).replace(/punct/g, _).getRegex();
+var Ue = k(Fe, "u").replace(/openQuote/g, He).replace(/punct/g, _).getRegex();
 var he = "^[^_*]*?__[^_*]*?\\*[^_*]*?(?=__)|[^*]+(?=[^*])|(?!\\*)punct(\\*+)(?=[\\s]|$)|notPunctSpace(\\*+)(?!\\*)(?=punctSpace|$)|(?!\\*)punctSpace(\\*+)(?=notPunctSpace)|[\\s](\\*+)(?!\\*)(?=punct)|(?!\\*)punct(\\*+)(?!\\*)(?=punct)|notPunctSpace(\\*+)(?=notPunctSpace)";
-var Ke = d(he, "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, I).replace(/punct/g, _).getRegex();
-var We = d(he, "gu").replace(/notPunctSpace/g, Ge).replace(/punctSpace/g, Ze).replace(/punct/g, ue).getRegex();
+var Ke = k(he, "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, C).replace(/punct/g, _).getRegex();
+var We = k(he, "gu").replace(/notPunctSpace/g, Ge).replace(/punctSpace/g, Ze).replace(/punct/g, pe).getRegex();
 var Xe = "^[^_*]*?__[^_*]*?\\*[^_*]*?(?=__)|[^*]+(?=[^*])|(?!\\*)punct(\\*+)(?=[\\s]|$)|notPunctSpace(\\*+)(?!\\*)(?=punctSpace|$)|(?!\\*)[\\s](\\*+)(?=notPunctSpace)|[\\s](\\*+)(?!\\*)(?=punct)|(?!\\*)punct(\\*+)(?!\\*)(?=punct)|(?:(?!\\*)punct|notPunctSpace)(\\*+)(?!\\*)(?=notPunctSpace)";
-var Je = d(Xe, "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, I).replace(/punct/g, _).getRegex();
-var Ve = d("^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|(?!_)punct(_+)(?=[\\s]|$)|notPunctSpace(_+)(?!_)(?=punctSpace|$)|(?!_)punctSpace(_+)(?=notPunctSpace)|[\\s](_+)(?!_)(?=punct)|(?!_)punct(_+)(?!_)(?=punct)", "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, I).replace(/punct/g, _).getRegex();
+var Je = k(Xe, "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, C).replace(/punct/g, _).getRegex();
+var Ve = k("^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|(?!_)punct(_+)(?=[\\s]|$)|notPunctSpace(_+)(?!_)(?=punctSpace|$)|(?!_)punctSpace(_+)(?=notPunctSpace)|[\\s](_+)(?!_)(?=punct)|(?!_)punct(_+)(?!_)(?=punct)", "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, C).replace(/punct/g, _).getRegex();
 var Ye = "^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|(?!_)punct(_+)(?=[\\s]|$)|notPunctSpace(_+)(?!_)(?=punctSpace|$)|(?!_)[\\s](_+)(?=notPunctSpace)|[\\s](_+)(?!_)(?=punct)|(?!_)punct(_+)(?!_)(?=punct)|(?:(?!_)punct|notPunctSpace)(_+)(?!_)(?=notPunctSpace)";
-var et = d(Ye, "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, I).replace(/punct/g, _).getRegex();
-var tt = d(/^~~?(?:((?!~)punct)|[^\s~])/, "u").replace(/punct/g, _).getRegex();
+var et = k(Ye, "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, C).replace(/punct/g, _).getRegex();
+var tt = k(/^~~?(?:((?!~)punct)|[^\s~])/, "u").replace(/punct/g, _).getRegex();
 var nt = "^[^~]+(?=[^~])|(?!~)punct(~~?)(?=[\\s]|$)|notPunctSpace(~~?)(?!~)(?=punctSpace|$)|(?!~)punctSpace(~~?)(?=notPunctSpace)|[\\s](~~?)(?!~)(?=punct)|(?!~)punct(~~?)(?!~)(?=punct)|notPunctSpace(~~?)(?=notPunctSpace)";
-var rt = d(nt, "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, I).replace(/punct/g, _).getRegex();
-var st = d(/\\(punct)/, "gu").replace(/punct/g, _).getRegex();
-var it = d(/^<(scheme:[^\s\x00-\x1f<>]*|email)>/).replace("scheme", /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/).replace("email", /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/).getRegex();
-var ot = d(X).replace("(?:-->|$)", "-->").getRegex();
-var at = d("^comment|^</[a-zA-Z][\\w:-]*\\s*>|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>|^<\\?[\\s\\S]*?\\?>|^<![a-zA-Z]+\\s[\\s\\S]*?>|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>").replace("comment", ot).replace("attribute", /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/).getRegex();
+var rt = k(nt, "gu").replace(/notPunctSpace/g, v).replace(/punctSpace/g, C).replace(/punct/g, _).getRegex();
+var st = k(/\\(punct)/, "gu").replace(/punct/g, _).getRegex();
+var it = k(/^<(scheme:[^\s\x00-\x1f<>]*|email)>/).replace("scheme", /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/).replace("email", /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/).getRegex();
+var ot = k(X).replace("(?:-->|$)", "-->").getRegex();
+var at = k("^comment|^</[a-zA-Z][\\w:-]*\\s*>|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>|^<\\?[\\s\\S]*?\\?>|^<![a-zA-Z]+\\s[\\s\\S]*?>|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>").replace("comment", ot).replace("attribute", /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/).getRegex();
 var G = /(?:\[(?:\\[\s\S]|[^\[\]\\])*\]|\\[\s\S]|`+(?!`)[^`]*?`+(?!`)|``+(?=\])|[^\[\]\\`])*?/;
-var lt = d(/^!?\[(label)\]\(\s*(href)(?:(?:[ \t]+(?:\n[ \t]*)?|\n[ \t]*)(title))?\s*\)/).replace("label", G).replace("href", /<(?:\\.|[^\n<>\\])+>|[^ \t\n\x00-\x1f]+|(?=\))/).replace("title", /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/).getRegex();
-var de = d(/^!?\[(label)\]\[(ref)\]/).replace("label", G).replace("ref", W).getRegex();
-var ke = d(/^!?\[(ref)\](?:\[\])?/).replace("ref", W).getRegex();
-var pt = d("reflink|nolink(?!\\()", "g").replace("reflink", de).replace("nolink", ke).getRegex();
+var lt = k(/^!?\[(label)\]\(\s*(href)(?:(?:[ \t]+(?:\n[ \t]*)?|\n[ \t]*)(title))?\s*\)/).replace("label", G).replace("href", /<(?:\\.|[^\n<>\\])+>|[^ \t\n\x00-\x1f]+|(?=\))/).replace("title", /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/).getRegex();
+var ke = k(/^!?\[(label)\]\[(ref)\]/).replace("label", G).replace("ref", W).getRegex();
+var de = k(/^!?\[(ref)\](?:\[\])?/).replace("ref", W).getRegex();
+var ut = k("reflink|nolink(?!\\()", "g").replace("reflink", ke).replace("nolink", de).getRegex();
 var ie = /[hH][tT][tT][pP][sS]?|[fF][tT][pP]/;
-var V = { _backpedal: z, anyPunctuation: st, autolink: it, blockSkip: Qe, br: pe, code: De, del: z, delLDelim: z, delRDelim: z, emStrongLDelim: Ne, emStrongRDelimAst: Ke, emStrongRDelimUnd: Ve, escape: Be, link: lt, nolink: ke, punctuation: ve, reflink: de, reflinkSearch: pt, tag: at, text: qe, url: z };
-var ut = { ...V, emStrongLDelim: Ue, emStrongRDelimAst: Je, emStrongRDelimUnd: et, link: d(/^!?\[(label)\]\((.*?)\)/).replace("label", G).getRegex(), reflink: d(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace("label", G).getRegex() };
-var F = { ...V, emStrongRDelimAst: We, emStrongLDelim: je, delLDelim: tt, delRDelim: rt, url: d(/^((?:protocol):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/).replace("protocol", ie).replace("email", /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/).getRegex(), _backpedal: /(?:[^?!.,:;*_'"~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_'"~)]+(?!$))+/, del: /^(~~?)(?=[^\s~])((?:\\[\s\S]|[^\\])*?(?:\\[\s\S]|[^\s~\\]))\1(?=[^~]|$)/, text: d(/^(`+|~+|[^`~])(?:(?=[`~])|(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|protocol:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/).replace("protocol", ie).getRegex() };
-var ct = { ...F, br: d(pe).replace("{2,}", "*").getRegex(), text: d(F.text).replace("\\b_", "\\b_| {2,}\\n").replace(/\{2,\}/g, "*").getRegex() };
-var H = { normal: J, gfm: Ae, pedantic: Ie };
-var B = { normal: V, gfm: F, breaks: ct, pedantic: ut };
+var V = { _backpedal: z, anyPunctuation: st, autolink: it, blockSkip: Qe, br: ue, code: De, del: z, delLDelim: z, delRDelim: z, emStrongLDelim: Ne, emStrongRDelimAst: Ke, emStrongRDelimUnd: Ve, escape: Be, link: lt, nolink: de, punctuation: ve, reflink: ke, reflinkSearch: ut, tag: at, text: qe, url: z };
+var pt = { ...V, emStrongLDelim: Ue, emStrongRDelimAst: Je, emStrongRDelimUnd: et, link: k(/^!?\[(label)\]\((.*?)\)/).replace("label", G).getRegex(), reflink: k(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace("label", G).getRegex() };
+var F = { ...V, emStrongRDelimAst: We, emStrongLDelim: je, delLDelim: tt, delRDelim: rt, url: k(/^((?:protocol):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/).replace("protocol", ie).replace("email", /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/).getRegex(), _backpedal: /(?:[^?!.,:;*_'"~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_'"~)]+(?!$))+/, del: /^(~~?)(?=[^\s~])((?:\\[\s\S]|[^\\])*?(?:\\[\s\S]|[^\s~\\]))\1(?=[^~]|$)/, text: k(/^(`+|~+|[^`~])(?:(?=[`~])|(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|protocol:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/).replace("protocol", ie).getRegex() };
+var ct = { ...F, br: k(ue).replace("{2,}", "*").getRegex(), text: k(F.text).replace("\\b_", "\\b_| {2,}\\n").replace(/\{2,\}/g, "*").getRegex() };
+var H = { normal: J, gfm: Ie, pedantic: Ce };
+var B = { normal: V, gfm: F, breaks: ct, pedantic: pt };
 var ht = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
 var ge = (l3) => ht[l3];
-function O(l3, e) {
+function T(l3, e) {
   if (e) {
     if (m.escapeTest.test(l3)) return l3.replace(m.escapeReplace, ge);
   } else if (m.escapeTestNoEncode.test(l3)) return l3.replace(m.escapeReplaceNoEncode, ge);
@@ -4230,9 +4603,9 @@ function Y(l3) {
 }
 function ee(l3, e) {
   let t = l3.replace(m.findPipe, (r, i, o) => {
-    let p = false, a = i;
-    for (; --a >= 0 && o[a] === "\\"; ) p = !p;
-    return p ? "|" : " |";
+    let u = false, a = i;
+    for (; --a >= 0 && o[a] === "\\"; ) u = !u;
+    return u ? "|" : " |";
   }), n = t.split(m.splitPipe), s = 0;
   if (n[0].trim() || n.shift(), n.length > 0 && !n.at(-1)?.trim() && n.pop(), e) if (n.length > e) n.splice(e);
   else for (; n.length < e; ) n.push("");
@@ -4275,12 +4648,21 @@ function me(l3, e = 0) {
   return n;
 }
 function xe(l3, e, t, n, s) {
-  let r = e.href, i = e.title || null, o = l3[1].replace(s.other.outputLinkReplace, "$1");
+  let r = e.href, i = e.title || null, o = l3[1].replace(s.other.outputLinkReplace, "$1"), u = l3[0].charAt(0) === "!";
   n.state.inLink = true;
-  let p = { type: l3[0].charAt(0) === "!" ? "image" : "link", raw: t, href: r, title: i, text: o, tokens: n.inlineTokens(o) };
-  return n.state.inLink = false, p;
+  let a = n.state.linkEmitted, p = n.state.inRawBlock;
+  n.state.linkEmitted = false;
+  let c = n.inlineTokens(o), h = n.state.linkEmitted;
+  if (n.state.linkEmitted = a, n.state.inLink = false, !u) {
+    if (h) {
+      n.state.inRawBlock = p;
+      return;
+    }
+    n.state.linkEmitted = true;
+  }
+  return { type: u ? "image" : "link", raw: t, href: r, title: i, text: o, tokens: c };
 }
-function dt(l3, e, t) {
+function kt(l3, e, t) {
   let n = l3.match(t.other.indentCodeCompensation);
   if (n === null) return e;
   let s = n[1];
@@ -4314,7 +4696,7 @@ var y = class {
   fences(e) {
     let t = this.rules.block.fences.exec(e);
     if (t) {
-      let n = t[0], s = dt(n, t[3] || "", this.rules);
+      let n = t[0], s = kt(n, t[3] || "", this.rules);
       return { type: "code", raw: n, lang: t[2] ? t[2].trim().replace(this.rules.inline.anyPunctuation, "$1") : t[2], text: s };
     }
   }
@@ -4342,33 +4724,33 @@ var y = class {
 `).split(`
 `), s = "", r = "", i = [];
       for (; n.length > 0; ) {
-        let o = false, p = [], a;
-        for (a = 0; a < n.length; a++) if (this.rules.other.blockquoteStart.test(n[a])) p.push(n[a]), o = true;
-        else if (!o) p.push(n[a]);
+        let o = false, u = [], a;
+        for (a = 0; a < n.length; a++) if (this.rules.other.blockquoteStart.test(n[a])) u.push(n[a]), o = true;
+        else if (!o) u.push(n[a]);
         else break;
         n = n.slice(a);
-        let u = p.join(`
-`), c = u.replace(this.rules.other.blockquoteSetextReplace, `
+        let p = u.join(`
+`), c = p.replace(this.rules.other.blockquoteSetextReplace, `
     $1`).replace(this.rules.other.blockquoteSetextReplace2, "");
         s = s ? `${s}
-${u}` : u, r = r ? `${r}
+${p}` : p, r = r ? `${r}
 ${c}` : c;
         let h = this.lexer.state.top;
         if (this.lexer.state.top = true, this.lexer.blockTokens(c, i, true), this.lexer.state.top = h, n.length === 0) break;
-        let k = i.at(-1);
-        if (k?.type === "code") break;
-        if (k?.type === "blockquote") {
-          let T = k, g = n.join(`
-`), w = T.raw + `
-` + g.replace(this.rules.other.blockquoteSetextReplace2, ""), M = this.blockquote(w);
-          i[i.length - 1] = M, s = `${s}
-${g}`, r = r.substring(0, r.length - T.text.length) + M.text;
+        let d = i.at(-1);
+        if (d?.type === "code") break;
+        if (d?.type === "blockquote") {
+          let O = d, g = n.join(`
+`), w = O.raw + `
+` + g.replace(this.rules.other.blockquoteSetextReplace2, ""), E = this.blockquote(w);
+          i[i.length - 1] = E, s = `${s}
+${g}`, r = r.substring(0, r.length - O.text.length) + E.text;
           break;
-        } else if (k?.type === "list") {
-          let T = k, g = T.raw + `
+        } else if (d?.type === "list") {
+          let O = d, g = O.raw + `
 ` + n.join(`
 `), w = this.list(g);
-          i[i.length - 1] = w, s = s.substring(0, s.length - k.raw.length) + w.raw, r = r.substring(0, r.length - T.raw.length) + w.raw, n = g.substring(i.at(-1).raw.length).split(`
+          i[i.length - 1] = w, s = s.substring(0, s.length - d.raw.length) + w.raw, r = r.substring(0, r.length - O.raw.length) + w.raw, n = g.substring(i.at(-1).raw.length).split(`
 `);
           continue;
         }
@@ -4383,44 +4765,44 @@ ${g}`, r = r.substring(0, r.length - T.text.length) + M.text;
       n = s ? `\\d{1,9}\\${n.slice(-1)}` : `\\${n}`, this.options.pedantic && (n = s ? n : "[*+-]");
       let i = this.rules.other.listItemRegex(n), o = false;
       for (; e; ) {
-        let a = false, u = "", c = "";
+        let a = false, p = "", c = "";
         if (!(t = i.exec(e)) || this.rules.block.hr.test(e)) break;
-        u = t[0], e = e.substring(u.length);
+        p = t[0], e = e.substring(p.length);
         let h = me(t[2].split(`
-`, 1)[0], t[1].length), k = e.split(`
-`, 1)[0], T = !h.trim(), g = 0;
-        if (this.options.pedantic ? (g = 2, c = h.trimStart()) : T ? g = t[1].length + 1 : (g = h.search(this.rules.other.nonSpaceChar), g = g > 4 ? 1 : g, c = h.slice(g), g += t[1].length), T && this.rules.other.blankLine.test(k) && (u += k + `
-`, e = e.substring(k.length + 1), a = true), !a) {
-          let w = this.rules.other.nextBulletRegex(g), M = this.rules.other.hrRegex(g), ne = this.rules.other.fencesBeginRegex(g), re = this.rules.other.headingBeginRegex(g), be = this.rules.other.htmlBeginRegex(g), Re = this.rules.other.blockquoteBeginRegex(g);
+`, 1)[0], t[1].length), d = e.split(`
+`, 1)[0], O = !h.trim(), g = 0;
+        if (this.options.pedantic ? (g = 2, c = h.trimStart()) : O ? g = t[1].length + 1 : (g = h.search(this.rules.other.nonSpaceChar), g = g > 4 ? 1 : g, c = h.slice(g), g += t[1].length), O && this.rules.other.blankLine.test(d) && (p += d + `
+`, e = e.substring(d.length + 1), a = true), !a) {
+          let w = this.rules.other.nextBulletRegex(g), E = this.rules.other.hrRegex(g), ne = this.rules.other.fencesBeginRegex(g), re = this.rules.other.headingBeginRegex(g), be = this.rules.other.htmlBeginRegex(g), Re = this.rules.other.blockquoteBeginRegex(g);
           for (; e; ) {
             let N = e.split(`
 `, 1)[0], D;
-            if (k = N, this.options.pedantic ? (k = k.replace(this.rules.other.listReplaceNesting, "  "), D = k) : D = k.replace(this.rules.other.tabCharGlobal, "    "), ne.test(k) || re.test(k) || be.test(k) || Re.test(k) || w.test(k) || M.test(k)) break;
-            if (D.search(this.rules.other.nonSpaceChar) >= g || !k.trim()) c += `
+            if (d = N, this.options.pedantic ? (d = d.replace(this.rules.other.listReplaceNesting, "  "), D = d) : D = d.replace(this.rules.other.tabCharGlobal, "    "), ne.test(d) || re.test(d) || be.test(d) || Re.test(d) || w.test(d) || E.test(d)) break;
+            if (D.search(this.rules.other.nonSpaceChar) >= g || !d.trim()) c += `
 ` + D.slice(g);
             else {
-              if (T || h.replace(this.rules.other.tabCharGlobal, "    ").search(this.rules.other.nonSpaceChar) >= 4 || ne.test(h) || re.test(h) || M.test(h)) break;
+              if (O || h.replace(this.rules.other.tabCharGlobal, "    ").search(this.rules.other.nonSpaceChar) >= 4 || ne.test(h) || re.test(h) || E.test(h)) break;
               c += `
-` + k;
+` + d;
             }
-            T = !k.trim(), u += N + `
+            O = !d.trim(), p += N + `
 `, e = e.substring(N.length + 1), h = D.slice(g);
           }
         }
-        r.loose || (o ? r.loose = true : this.rules.other.doubleBlankLine.test(u) && (o = true)), r.items.push({ type: "list_item", raw: u, task: !!this.options.gfm && this.rules.other.listIsTask.test(c), loose: false, text: c, tokens: [] }), r.raw += u;
+        r.loose || (o ? r.loose = true : this.rules.other.doubleBlankLine.test(p) && (o = true)), r.items.push({ type: "list_item", raw: p, task: !!this.options.gfm && this.rules.other.listIsTask.test(c), loose: false, text: c, tokens: [] }), r.raw += p;
       }
-      let p = r.items.at(-1);
-      if (p) p.raw = p.raw.trimEnd(), p.text = p.text.trimEnd();
+      let u = r.items.at(-1);
+      if (u) u.raw = u.raw.trimEnd(), u.text = u.text.trimEnd();
       else return;
       r.raw = r.raw.trimEnd();
       for (let a of r.items) if (this.lexer.state.top = false, a.tokens = this.lexer.blockTokens(a.text, []), !r.loose) {
-        let u = a.tokens.filter((h) => h.type === "space"), c = u.length > 0 && u.some((h) => this.rules.other.anyLine.test(h.raw));
+        let p = a.tokens.filter((h) => h.type === "space"), c = p.length > 0 && p.some((h) => this.rules.other.anyLine.test(h.raw));
         r.loose = c;
       }
       for (let a of r.items) {
-        let u = a.tokens[0];
-        if (a.task && (u?.type === "text" || u?.type === "paragraph")) {
-          a.text = a.text.replace(this.rules.other.listReplaceTask, ""), u.raw = u.raw.replace(this.rules.other.listReplaceTask, ""), u.text = u.text.replace(this.rules.other.listReplaceTask, "");
+        let p = a.tokens[0];
+        if (a.task && (p?.type === "text" || p?.type === "paragraph")) {
+          a.text = a.text.replace(this.rules.other.listReplaceTask, ""), p.raw = p.raw.replace(this.rules.other.listReplaceTask, ""), p.text = p.text.replace(this.rules.other.listReplaceTask, "");
           for (let h = this.lexer.inlineQueue.length - 1; h >= 0; h--) if (this.rules.other.listIsTask.test(this.lexer.inlineQueue[h].src)) {
             this.lexer.inlineQueue[h].src = this.lexer.inlineQueue[h].src.replace(this.rules.other.listReplaceTask, "");
             break;
@@ -4434,7 +4816,7 @@ ${g}`, r = r.substring(0, r.length - T.text.length) + M.text;
       }
       if (r.loose) for (let a of r.items) {
         a.loose = true;
-        for (let u of a.tokens) u.type === "text" && (u.type = "paragraph");
+        for (let p of a.tokens) p.type === "text" && (p.type = "paragraph");
       }
       return r;
     }
@@ -4463,7 +4845,7 @@ ${g}`, r = r.substring(0, r.length - T.text.length) + M.text;
     if (n.length === s.length) {
       for (let o of s) this.rules.other.tableAlignRight.test(o) ? i.align.push("right") : this.rules.other.tableAlignCenter.test(o) ? i.align.push("center") : this.rules.other.tableAlignLeft.test(o) ? i.align.push("left") : i.align.push(null);
       for (let o = 0; o < n.length; o++) i.header.push({ text: n[o], tokens: this.lexer.inline(n[o]), header: true, align: i.align[o] });
-      for (let o of r) i.rows.push(ee(o, i.header.length).map((p, a) => ({ text: p, tokens: this.lexer.inline(p), header: false, align: i.align[a] })));
+      for (let o of r) i.rows.push(ee(o, i.header.length).map((u, a) => ({ text: u, tokens: this.lexer.inline(u), header: false, align: i.align[a] })));
       return i;
     }
   }
@@ -4507,8 +4889,8 @@ ${g}`, r = r.substring(0, r.length - T.text.length) + M.text;
         let i = fe(t[2], "()");
         if (i === -2) return;
         if (i > -1) {
-          let p = (t[0].indexOf("!") === 0 ? 5 : 4) + t[1].length + i;
-          t[2] = t[2].substring(0, i), t[0] = t[0].substring(0, p).trim(), t[3] = "";
+          let u = (t[0].indexOf("!") === 0 ? 5 : 4) + t[1].length + i;
+          t[2] = t[2].substring(0, i), t[0] = t[0].substring(0, u).trim(), t[3] = "";
         }
       }
       let s = t[2], r = "";
@@ -4534,25 +4916,25 @@ ${g}`, r = r.substring(0, r.length - T.text.length) + M.text;
     let s = this.rules.inline.emStrongLDelim.exec(e);
     if (!s || !s[1] && !s[2] && !s[3] && !s[4] || s[4] && n.match(this.rules.other.unicodeAlphaNumeric)) return;
     if (!(s[1] || s[3] || "") || !n || this.rules.inline.punctuation.exec(n)) {
-      let i = [...s[0]].length - 1, o, p, a = i, u = 0, c = s[0][0], h = n === c, k = c === "*" ? this.rules.inline.emStrongRDelimAst : this.rules.inline.emStrongRDelimUnd;
-      for (k.lastIndex = 0, t = t.slice(-1 * e.length + i); (s = k.exec(t)) !== null; ) {
+      let i = [...s[0]].length - 1, o, u, a = i, p = 0, c = s[0][0], h = n === c, d = c === "*" ? this.rules.inline.emStrongRDelimAst : this.rules.inline.emStrongRDelimUnd;
+      for (d.lastIndex = 0, t = t.slice(-1 * e.length + i); (s = d.exec(t)) !== null; ) {
         if (o = s[1] || s[2] || s[3] || s[4] || s[5] || s[6], !o) continue;
-        if (p = [...o].length, s[3] || s[4]) {
-          a += p;
+        if (u = [...o].length, s[3] || s[4]) {
+          a += u;
           continue;
         } else if (s[5] || s[6]) {
-          if (i % 3 && !((i + p) % 3)) {
-            u += p;
+          if (i % 3 && !((i + u) % 3)) {
+            p += u;
             continue;
           }
           if (h) break;
         }
-        if (a -= p, a > 0) continue;
-        p = Math.min(p, p + a + u);
-        let T = [...s[0]][0].length, g = e.slice(0, i + s.index + T + p);
-        if (Math.min(i, p) % 2) {
-          let M = g.slice(1, -1);
-          return { type: "em", raw: g, text: M, tokens: this.lexer.inlineTokens(M) };
+        if (a -= u, a > 0) continue;
+        u = Math.min(u, u + a + p);
+        let O = [...s[0]][0].length, g = e.slice(0, i + s.index + O + u);
+        if (Math.min(i, u) % 2) {
+          let E = g.slice(1, -1);
+          return { type: "em", raw: g, text: E, tokens: this.lexer.inlineTokens(E) };
         }
         let w = g.slice(2, -2);
         return { type: "strong", raw: g, text: w, tokens: this.lexer.inlineTokens(w) };
@@ -4574,17 +4956,17 @@ ${g}`, r = r.substring(0, r.length - T.text.length) + M.text;
     let s = this.rules.inline.delLDelim.exec(e);
     if (!s) return;
     if (!(s[1] || "") || !n || this.rules.inline.punctuation.exec(n)) {
-      let i = [...s[0]].length - 1, o, p, a = i, u = this.rules.inline.delRDelim;
-      for (u.lastIndex = 0, t = t.slice(-1 * e.length + i); (s = u.exec(t)) !== null; ) {
-        if (o = s[1] || s[2] || s[3] || s[4] || s[5] || s[6], !o || (p = [...o].length, p !== i)) continue;
+      let i = [...s[0]].length - 1, o, u, a = i, p = this.rules.inline.delRDelim;
+      for (p.lastIndex = 0, t = t.slice(-1 * e.length + i); (s = p.exec(t)) !== null; ) {
+        if (o = s[1] || s[2] || s[3] || s[4] || s[5] || s[6], !o || (u = [...o].length, u !== i)) continue;
         if (s[3] || s[4]) {
-          a += p;
+          a += u;
           continue;
         }
-        if (a -= p, a > 0) continue;
-        p = Math.min(p, p + a);
-        let c = [...s[0]][0].length, h = e.slice(0, i + s.index + c + p), k = h.slice(i, -i);
-        return { type: "del", raw: h, text: k, tokens: this.lexer.inlineTokens(k) };
+        if (a -= u, a > 0) continue;
+        u = Math.min(u, u + a);
+        let c = [...s[0]][0].length, h = e.slice(0, i + s.index + c + u), d = h.slice(i, -i);
+        return { type: "del", raw: h, text: d, tokens: this.lexer.inlineTokens(d) };
       }
     }
   }
@@ -4625,7 +5007,7 @@ var x = class l {
   inlineQueue;
   tokenizer;
   constructor(e) {
-    this.tokens = [], this.tokens.links = /* @__PURE__ */ Object.create(null), this.options = e || R, this.options.tokenizer = this.options.tokenizer || new y(), this.tokenizer = this.options.tokenizer, this.tokenizer.options = this.options, this.tokenizer.lexer = this, this.inlineQueue = [], this.state = { inLink: false, inRawBlock: false, top: true };
+    this.tokens = [], this.tokens.links = /* @__PURE__ */ Object.create(null), this.options = e || R, this.options.tokenizer = this.options.tokenizer || new y(), this.tokenizer = this.options.tokenizer, this.tokenizer.options = this.options, this.tokenizer.lexer = this, this.inlineQueue = [], this.state = { inLink: false, inRawBlock: false, linkEmitted: false, top: true };
     let t = { other: m, block: H.normal, inline: B.normal };
     this.options.pedantic ? (t.block = H.pedantic, t.inline = B.pedantic) : this.options.gfm && (t.block = H.gfm, this.options.breaks ? t.inline = B.breaks : t.inline = B.gfm), this.tokenizer.rules = t;
   }
@@ -4717,9 +5099,9 @@ var x = class l {
       }
       let i = e;
       if (this.options.extensions?.startBlock) {
-        let o = 1 / 0, p = e.slice(1), a;
-        this.options.extensions.startBlock.forEach((u) => {
-          a = u.call({ lexer: this }, p), typeof a == "number" && a >= 0 && (o = Math.min(o, a));
+        let o = 1 / 0, u = e.slice(1), a;
+        this.options.extensions.startBlock.forEach((p) => {
+          a = p.call({ lexer: this }, u), typeof a == "number" && a >= 0 && (o = Math.min(o, a));
         }), o < 1 / 0 && o >= 0 && (i = e.substring(0, o + 1));
       }
       if (this.state.top && (r = this.tokenizer.paragraph(i))) {
@@ -4749,16 +5131,34 @@ var x = class l {
   inline(e, t = []) {
     return this.inlineQueue.push({ src: e, tokens: t }), t;
   }
+  linkInText(e) {
+    if (!e.includes("[")) return false;
+    let t = this.tokenizer.rules.inline.link;
+    for (let n of e.matchAll(this.tokenizer.rules.inline.blockSkip)) if (t.test(n[0]) && e.charAt(n.index - 1) !== "!") return true;
+    for (let n of e.matchAll(this.tokenizer.rules.inline.reflinkSearch)) {
+      let s = n[0], r = s.lastIndexOf("[");
+      if (!(s.charAt(0) === "!" || !Object.hasOwn(this.tokens.links, s.slice(r + 1, -1))) && !(r > 1 && this.linkInText(s.slice(1, r - 1)))) return true;
+    }
+    return false;
+  }
   inlineTokens(e, t = []) {
     this.tokenizer.lexer = this;
     let n = e;
-    if (this.tokens.links) {
-      let o = Object.keys(this.tokens.links);
-      o.length > 0 && (n = n.replace(this.tokenizer.rules.inline.reflinkSearch, (p) => o.includes(p.slice(p.lastIndexOf("[") + 1, -1)) ? "[" + "a".repeat(p.length - 2) + "]" : p));
+    if (this.tokens.links && e.includes("[")) {
+      let o = this.tokenizer.rules.inline.reflinkSearch, u = (a) => {
+        let p = a.lastIndexOf("[");
+        if (!Object.hasOwn(this.tokens.links, a.slice(p + 1, -1))) return a;
+        if (p > 1 && a.charAt(0) !== "!") {
+          let c = a.slice(1, p - 1);
+          if (this.linkInText(c)) return "[" + c.replace(o, u) + "][" + "a".repeat(a.length - p - 2) + "]";
+        }
+        return "[" + "a".repeat(a.length - 2) + "]";
+      };
+      n = n.replace(o, u);
     }
-    n = n.replace(this.tokenizer.rules.inline.anyPunctuation, (o) => "+".repeat(o.length)), n = n.replace(this.tokenizer.rules.inline.blockSkip, (o, p, a) => {
-      let u = a ? a.length : 0;
-      return o.slice(0, u) + "[" + "a".repeat(o.length - u - 2) + "]";
+    n = n.replace(this.tokenizer.rules.inline.anyPunctuation, (o) => "+".repeat(o.length)), n = n.replace(this.tokenizer.rules.inline.blockSkip, (o, u, a) => {
+      let p = a ? a.length : 0;
+      return o.slice(0, p) + "[" + "a".repeat(o.length - p - 2) + "]";
     }), n = this.options.hooks?.emStrongMask?.call({ lexer: this }, n) ?? n;
     let s = false, r = "", i = 1 / 0;
     for (; e; ) {
@@ -4812,14 +5212,14 @@ var x = class l {
         e = e.substring(o.raw.length), t.push(o);
         continue;
       }
-      let p = e;
+      let u = e;
       if (this.options.extensions?.startInline) {
-        let a = 1 / 0, u = e.slice(1), c;
+        let a = 1 / 0, p = e.slice(1), c;
         this.options.extensions.startInline.forEach((h) => {
-          c = h.call({ lexer: this }, u), typeof c == "number" && c >= 0 && (a = Math.min(a, c));
-        }), a < 1 / 0 && a >= 0 && (p = e.substring(0, a + 1));
+          c = h.call({ lexer: this }, p), typeof c == "number" && c >= 0 && (a = Math.min(a, c));
+        }), a < 1 / 0 && a >= 0 && (u = e.substring(0, a + 1));
       }
-      if (o = this.tokenizer.inlineText(p)) {
+      if (o = this.tokenizer.inlineText(u)) {
         e = e.substring(o.raw.length), o.raw.slice(-1) !== "_" && (r = o.raw.slice(-1)), s = true;
         let a = t.at(-1);
         a?.type === "text" ? (a.raw += o.raw, a.text += o.text) : t.push(o);
@@ -4850,8 +5250,8 @@ var P = class {
   code({ text: e, lang: t, escaped: n }) {
     let s = (t || "").match(m.notSpaceStart)?.[0], r = e.replace(m.endingNewline, "") + `
 `;
-    return s ? '<pre><code class="language-' + O(s) + '">' + (n ? r : O(r, true)) + `</code></pre>
-` : "<pre><code>" + (n ? r : O(r, true)) + `</code></pre>
+    return s ? '<pre><code class="language-' + T(s) + '">' + (n ? r : T(r, true)) + `</code></pre>
+` : "<pre><code>" + (n ? r : T(r, true)) + `</code></pre>
 `;
   }
   blockquote({ tokens: e }) {
@@ -4876,8 +5276,8 @@ ${this.parser.parse(e)}</blockquote>
   list(e) {
     let t = e.ordered, n = e.start, s = "";
     for (let o = 0; o < e.items.length; o++) {
-      let p = e.items[o];
-      s += this.listitem(p);
+      let u = e.items[o];
+      s += this.listitem(u);
     }
     let r = t ? "ol" : "ul", i = t && n !== 1 ? ' start="' + n + '"' : "";
     return "<" + r + i + `>
@@ -4929,7 +5329,7 @@ ${e}</tr>
     return `<em>${this.parser.parseInline(e)}</em>`;
   }
   codespan({ text: e }) {
-    return `<code>${O(e, true)}</code>`;
+    return `<code>${T(e, true)}</code>`;
   }
   br(e) {
     return "<br>";
@@ -4942,18 +5342,18 @@ ${e}</tr>
     if (r === null) return s;
     e = r;
     let i = '<a href="' + e + '"';
-    return t && (i += ' title="' + O(t) + '"'), i += ">" + s + "</a>", i;
+    return t && (i += ' title="' + T(t) + '"'), i += ">" + s + "</a>", i;
   }
   image({ href: e, title: t, text: n, tokens: s }) {
     s && (n = this.parser.parseInline(s, this.parser.textRenderer));
     let r = Y(e);
-    if (r === null) return O(n);
+    if (r === null) return T(n);
     e = r;
-    let i = `<img src="${e}" alt="${O(n)}"`;
-    return t && (i += ` title="${O(t)}"`), i += ">", i;
+    let i = `<img src="${e}" alt="${T(n)}"`;
+    return t && (i += ` title="${T(t)}"`), i += ">", i;
   }
   text(e) {
-    return "tokens" in e && e.tokens ? this.parser.parseInline(e.tokens) : "escaped" in e && e.escaped ? e.text : O(e.text);
+    return "tokens" in e && e.tokens ? this.parser.parseInline(e.tokens) : "escaped" in e && e.escaped ? e.text : T(e.text);
   }
 };
 var L = class {
@@ -5168,7 +5568,7 @@ var S = class {
   }
 };
 var Z = class {
-  defaults = C();
+  defaults = A();
   options = this.setOptions;
   parse = this.parseMarkdown(true);
   parseInline = this.parseMarkdown(false);
@@ -5214,8 +5614,8 @@ var Z = class {
         if ("renderer" in r) {
           let i = t.renderers[r.name];
           i ? t.renderers[r.name] = function(...o) {
-            let p = r.renderer.apply(this, o);
-            return p === false && (p = i.apply(this, o)), p;
+            let u = r.renderer.apply(this, o);
+            return u === false && (u = i.apply(this, o)), u;
           } : t.renderers[r.name] = r.renderer;
         }
         if ("tokenizer" in r) {
@@ -5229,10 +5629,10 @@ var Z = class {
         for (let i in n.renderer) {
           if (!(i in r)) throw new Error(`renderer '${i}' does not exist`);
           if (["options", "parser"].includes(i)) continue;
-          let o = i, p = n.renderer[o], a = r[o];
-          r[o] = (...u) => {
-            let c = p.apply(r, u);
-            return c === false && (c = a.apply(r, u)), c || "";
+          let o = i, u = n.renderer[o], a = r[o];
+          r[o] = (...p) => {
+            let c = u.apply(r, p);
+            return c === false && (c = a.apply(r, p)), c || "";
           };
         }
         s.renderer = r;
@@ -5242,10 +5642,10 @@ var Z = class {
         for (let i in n.tokenizer) {
           if (!(i in r)) throw new Error(`tokenizer '${i}' does not exist`);
           if (["options", "rules", "lexer"].includes(i)) continue;
-          let o = i, p = n.tokenizer[o], a = r[o];
-          r[o] = (...u) => {
-            let c = p.apply(r, u);
-            return c === false && (c = a.apply(r, u)), c;
+          let o = i, u = n.tokenizer[o], a = r[o];
+          r[o] = (...p) => {
+            let c = u.apply(r, p);
+            return c === false && (c = a.apply(r, p)), c;
           };
         }
         s.tokenizer = r;
@@ -5255,21 +5655,21 @@ var Z = class {
         for (let i in n.hooks) {
           if (!(i in r)) throw new Error(`hook '${i}' does not exist`);
           if (["options", "block"].includes(i)) continue;
-          let o = i, p = n.hooks[o], a = r[o];
-          S.passThroughHooks.has(i) ? r[o] = (u) => {
+          let o = i, u = n.hooks[o], a = r[o];
+          S.passThroughHooks.has(i) ? r[o] = (p) => {
             if (this.defaults.async && S.passThroughHooksRespectAsync.has(i)) return (async () => {
-              let h = await p.call(r, u);
+              let h = await u.call(r, p);
               return a.call(r, h);
             })();
-            let c = p.call(r, u);
+            let c = u.call(r, p);
             return a.call(r, c);
-          } : r[o] = (...u) => {
+          } : r[o] = (...p) => {
             if (this.defaults.async) return (async () => {
-              let h = await p.apply(r, u);
-              return h === false && (h = await a.apply(r, u)), h;
+              let h = await u.apply(r, p);
+              return h === false && (h = await a.apply(r, p)), h;
             })();
-            let c = p.apply(r, u);
-            return c === false && (c = a.apply(r, u)), c;
+            let c = u.apply(r, p);
+            return c === false && (c = a.apply(r, p)), c;
           };
         }
         s.hooks = r;
@@ -5277,8 +5677,8 @@ var Z = class {
       if (n.walkTokens) {
         let r = this.defaults.walkTokens, i = n.walkTokens;
         s.walkTokens = function(o) {
-          let p = [];
-          return p.push(i.call(this, o)), r && (p = p.concat(r.call(this, o))), p;
+          let u = [];
+          return u.push(i.call(this, o)), r && (u = u.concat(r.call(this, o))), u;
         };
       }
       this.defaults = { ...this.defaults, ...s };
@@ -5300,10 +5700,10 @@ var Z = class {
       if (typeof n > "u" || n === null) return o(new Error("marked(): input parameter is undefined or null"));
       if (typeof n != "string") return o(new Error("marked(): input parameter is of type " + Object.prototype.toString.call(n) + ", string expected"));
       if (i.hooks && (i.hooks.options = i, i.hooks.block = e), i.async) return (async () => {
-        let p = i.hooks ? await i.hooks.preprocess(n) : n, u = await (i.hooks ? await i.hooks.provideLexer(e) : e ? x.lex : x.lexInline)(p, i), c = i.hooks ? await i.hooks.processAllTokens(u) : u;
+        let u = i.hooks ? await i.hooks.preprocess(n) : n, p = await (i.hooks ? await i.hooks.provideLexer(e) : e ? x.lex : x.lexInline)(u, i), c = i.hooks ? await i.hooks.processAllTokens(p) : p;
         i.walkTokens && await Promise.all(this.walkTokens(c, i.walkTokens));
-        let k = await (i.hooks ? await i.hooks.provideParser(e) : e ? b.parse : b.parseInline)(c, i);
-        return i.hooks ? await i.hooks.postprocess(k) : k;
+        let d = await (i.hooks ? await i.hooks.provideParser(e) : e ? b.parse : b.parseInline)(c, i);
+        return i.hooks ? await i.hooks.postprocess(d) : d;
       })().catch(o);
       try {
         i.hooks && (n = i.hooks.preprocess(n));
@@ -5311,8 +5711,8 @@ var Z = class {
         i.hooks && (a = i.hooks.processAllTokens(a)), i.walkTokens && this.walkTokens(a, i.walkTokens);
         let c = (i.hooks ? i.hooks.provideParser(e) : e ? b.parse : b.parseInline)(a, i);
         return i.hooks && (c = i.hooks.postprocess(c)), c;
-      } catch (p) {
-        return o(p);
+      } catch (u) {
+        return o(u);
       }
     };
   }
@@ -5320,7 +5720,7 @@ var Z = class {
     return (n) => {
       if (n.message += `
 Please report this to https://github.com/markedjs/marked.`, e) {
-        let s = "<p>An error occurred:</p><pre>" + O(n.message + "", true) + "</pre>";
+        let s = "<p>An error occurred:</p><pre>" + T(n.message + "", true) + "</pre>";
         return t ? Promise.resolve(s) : s;
       }
       if (t) return Promise.reject(n);
@@ -5328,23 +5728,23 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     };
   }
 };
-var E = new Z();
+var M = new Z();
 function f(l3, e) {
-  return E.parse(l3, e);
+  return M.parse(l3, e);
 }
 f.options = f.setOptions = function(l3) {
-  return E.setOptions(l3), f.defaults = E.defaults, j(f.defaults), f;
+  return M.setOptions(l3), f.defaults = M.defaults, j(f.defaults), f;
 };
-f.getDefaults = C;
+f.getDefaults = A;
 f.defaults = R;
-function kt(...l3) {
-  return E.use(...l3), f.defaults = E.defaults, j(f.defaults), f;
+function dt(...l3) {
+  return M.use(...l3), f.defaults = M.defaults, j(f.defaults), f;
 }
-f.use = kt;
+f.use = dt;
 f.walkTokens = function(l3, e) {
-  return E.walkTokens(l3, e);
+  return M.walkTokens(l3, e);
 };
-f.parseInline = E.parseInline;
+f.parseInline = M.parseInline;
 f.Parser = b;
 f.parser = b.parse;
 f.Renderer = P;
@@ -5359,7 +5759,7 @@ var rn = f.setOptions;
 var sn = f.walkTokens;
 var on = f.parseInline;
 var ln = b.parse;
-var pn = x.lex;
+var un = x.lex;
 
 // src/ui/render_markdown.ts
 var parser = new Z({ gfm: true, breaks: true });
@@ -5443,8 +5843,8 @@ function renderMarkdown(text4, options) {
 }
 
 // src/ui/resize_handle.ts
-var MIN_WIDTH = 280;
-var MIN_HEIGHT = 240;
+var MIN_WIDTH2 = 280;
+var MIN_HEIGHT2 = 240;
 var STEP2 = 16;
 var COARSE_STEP2 = 64;
 function createResizeHandle(grip, options) {
@@ -5526,11 +5926,11 @@ function movable(grip, axis) {
   return axis === "both" || grip.x !== void 0;
 }
 function boxAt(grip, axis, rect, x2, y2) {
-  const left = grip.x === "left" ? Math.min(x2, rect.right - MIN_WIDTH) : rect.left;
-  const right = grip.x === "right" ? Math.max(x2, rect.left + MIN_WIDTH) : rect.right;
+  const left = grip.x === "left" ? Math.min(x2, rect.right - MIN_WIDTH2) : rect.left;
+  const right = grip.x === "right" ? Math.max(x2, rect.left + MIN_WIDTH2) : rect.right;
   const vertical = axis === "both";
-  const top = vertical && grip.y === "top" ? Math.min(y2, rect.bottom - MIN_HEIGHT) : rect.top;
-  const bottom = vertical && grip.y === "bottom" ? Math.max(y2, rect.top + MIN_HEIGHT) : rect.bottom;
+  const top = vertical && grip.y === "top" ? Math.min(y2, rect.bottom - MIN_HEIGHT2) : rect.top;
+  const bottom = vertical && grip.y === "bottom" ? Math.max(y2, rect.top + MIN_HEIGHT2) : rect.bottom;
   return { left, top, right, bottom };
 }
 
@@ -5570,7 +5970,7 @@ function wrapWords(root) {
 }
 
 // src/ui/run_notice.ts
-function renderRunNotice(icon, text4, kind) {
+function renderRunNotice(icon, text4, kind, undo) {
   const notice = document.createElement("div");
   notice.className = `run-notice run-notice--${kind}`;
   notice.setAttribute("part", `run-notice run-notice-${kind}`);
@@ -5585,6 +5985,18 @@ function renderRunNotice(icon, text4, kind) {
   label.setAttribute("part", "run-notice-text");
   label.textContent = text4;
   notice.append(glyph, label);
+  if (undo !== void 0) {
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.className = "run-notice-undo";
+    button2.setAttribute("part", "run-notice-undo");
+    button2.textContent = undo.label;
+    button2.addEventListener("click", () => {
+      button2.disabled = true;
+      undo.onActivate();
+    });
+    notice.append(button2);
+  }
   return notice;
 }
 
@@ -5842,6 +6254,11 @@ var STYLES = `
   /* Message action row: the control box and the mark inside it. The box has a
      floor of 24px so it stays a reliable target at every density. */
   --_action-size: var(--ag-ui-action-size, 28px);
+  /* The header's own controls. Sized rather than left to their contents: a row
+     of buttons each as wide as the glyph inside it comes out uneven, and uneven
+     buttons two pixels apart read as one smudge rather than five controls. */
+  --_header-btn-size: var(--ag-ui-header-btn-size, 30px);
+  --_header-gap: var(--ag-ui-header-gap, 4px);
   --_action-icon-size: var(--ag-ui-action-icon-size, 15px);
   --_tooltip-bg: var(--ag-ui-tooltip-bg, #1f2430);
   --_tooltip-fg: var(--ag-ui-tooltip-fg, #f5f6fa);
@@ -5903,6 +6320,11 @@ var STYLES = `
   --_glyph-size: var(--ag-ui-glyph-size, 18px);
   --_glyph-stroke: var(--ag-ui-glyph-stroke, 1.75);
 
+  /* How wide a chart is allowed to get. A cap rather than a width: below it
+     the chart fills its column, and above it a wider panel is just a wider
+     panel. */
+  --_chart-max-width: var(--ag-ui-chart-max-width, 480px);
+
   /* Unread badge on the launcher. */
   --_badge-bg: var(--ag-ui-badge-bg, var(--_danger));
   --_badge-fg: var(--ag-ui-badge-fg, #ffffff);
@@ -5931,6 +6353,68 @@ var STYLES = `
   --_msg-pad: var(--ag-ui-msg-pad, 8px 12px);
   --_msg-radius: var(--ag-ui-msg-radius, 14px);
 
+  /* Edges of the viewport the host has already spent, and that a fixed
+     placement must therefore stay out of: a sticky nav bar, a docked toolbar,
+     a device's safe area. Four longhands rather than one shorthand because a
+     custom property is a token stream and CSS cannot index one -- the height
+     arithmetic below needs the vertical pair on its own.
+
+     Every fixed placement derives from these, and the heights subtract them in
+     one place. A host that reserved its chrome by restating --ag-ui-inset per
+     placement had to keep --ag-ui-height in step by hand, and forgetting it
+     overflowed the panel past the bottom of the screen with nothing to say so.
+
+     These take env(safe-area-inset-*) verbatim, which is what a full-bleed
+     placement wants on a device with a notch. */
+  --_viewport-inset-top: var(--ag-ui-viewport-inset-top, 0px);
+  --_viewport-inset-right: var(--ag-ui-viewport-inset-right, 0px);
+  --_viewport-inset-bottom: var(--ag-ui-viewport-inset-bottom, 0px);
+  --_viewport-inset-left: var(--ag-ui-viewport-inset-left, 0px);
+  /* What is left of the viewport once the host's chrome is taken out, on both
+     axes, so a placement never composes this itself and no host can subtract
+     an edge from the position and forget it in the height.
+
+     Settable in their own right, and that is not only convention: an on-screen
+     keyboard changes no viewport-percentage length -- not vh, not dvh, not svh
+     -- so a full-bleed panel on a phone has to be told the height rather than
+     deriving it. The value to publish there is the visual viewport's. */
+  --_viewport-height: var(--ag-ui-viewport-height, var(--_visual-viewport-height));
+  /* The measured height of the part of the screen the user can actually see,
+     written by the element from the visual viewport and falling back to the
+     layout viewport where nothing has measured yet.
+
+     This is the on-screen keyboard, and it needs measuring because no CSS
+     length describes it: an on-screen keyboard has no effect on any
+     viewport-percentage unit, so 100vh, 100dvh and 100svh are all the same
+     number with the keyboard up as without it. A full-bleed panel sized from
+     any of them puts its composer behind the keyboard the user is typing into.
+
+     Separate from the token above so a host that states the usable height
+     outright still wins: the element writes this one inline, and an inline
+     value would otherwise outrank the host's own rule. */
+  --_visual-viewport-height: var(
+    --ag-ui-visual-viewport-height,
+    calc(100vh - var(--_viewport-inset-top) - var(--_viewport-inset-bottom))
+  );
+  /* How much of the layout viewport is hidden below the visible one, measured
+     and written by the element alongside the height above.
+
+     A shorter panel is not enough on its own for anything anchored to the
+     bottom. A floating widget is positioned against the layout viewport, so
+     with a keyboard up its bottom edge -- and the launcher that lives at that
+     corner -- sits behind the keyboard however tall the panel is. This is what
+     lifts it clear. */
+  /* Two tokens, for the same reason the height above has two: the element
+     writes the measurement inline, and a host that states its own value needs
+     a knob that outranks that write rather than one the next write replaces.
+     A host wanting no keyboard lift at all sets --ag-ui-keyboard-inset: 0px. */
+  --_keyboard-inset: var(--ag-ui-keyboard-inset, var(--_visual-viewport-inset-bottom));
+  --_visual-viewport-inset-bottom: var(--ag-ui-visual-viewport-inset-bottom, 0px);
+  --_viewport-width: var(
+    --ag-ui-viewport-width,
+    calc(100vw - var(--_viewport-inset-left) - var(--_viewport-inset-right))
+  );
+
   /* Layout \u2014 override from outside to dock the widget anywhere.
      Set --ag-ui-position: static (and place this element in your own
      grid/flex layout) to embed it in the page flow instead of floating. */
@@ -5938,14 +6422,49 @@ var STYLES = `
   --_z-index: var(--ag-ui-z-index, 2147483000);
   --_width: var(--ag-ui-width, 380px);
   --_height: var(--ag-ui-height, 560px);
-  --_inset: var(--ag-ui-inset, auto 24px 24px auto);
-  --_max-width: var(--ag-ui-max-width, calc(100vw - 48px));
-  --_max-height: var(--ag-ui-max-height, calc(100vh - 48px));
+  /* The gutter a resting floating panel keeps between itself and the edge of
+     the box the host left free. One number, because the inset below spends it
+     and the cap beneath has to know it was spent. */
+  --_edge-gutter: var(--ag-ui-edge-gutter, 24px);
+  --_inset: var(
+    --ag-ui-inset,
+    auto calc(var(--_edge-gutter) + var(--_viewport-inset-right))
+      calc(var(--_edge-gutter) + var(--_viewport-inset-bottom) + var(--_keyboard-inset)) auto
+  );
+  /* The cap is what the host left free, less the *one* gutter the inset above
+     spends on the anchored edge -- not two, and not none.
+
+     Two was the first answer and it was felt on one axis only. The arithmetic
+     says why: the default panel is 560 tall against a cap of the viewport
+     minus 48, which on an 800px screen with a header reserved is 72px of
+     headroom, so the height reaches its cap almost immediately; the default
+     width is 380 against a cap near 1230, which is 850px nothing ever reaches.
+     Once the size is capped a grip cannot grow the panel, so a pull on the
+     anchored edge is written as position instead and the panel travels, and a
+     pull on the free edge stops a whole gutter short of an edge a drag can
+     reach.
+
+     None was the correction, and it overshot: the panel is anchored bottom-
+     right with a gutter already spent there, so a cap of the full usable
+     height puts the far edge exactly one gutter outside it. On an 800px screen
+     with nothing reserved that is a top of -24 -- the header, and every
+     control in it, off the top of the window. Reserve a 120px header and it
+     sits inside that instead, which is the one thing the reservation exists to
+     prevent.
+
+     One is the fixed point of both complaints. A resting panel grown to the
+     cap runs from the usable near edge to its gutter on the far one, so the
+     near edge is reachable by a resize exactly as it is by a drag, and neither
+     can put any part of the panel outside the box. */
+  --_max-width: var(--ag-ui-max-width, calc(var(--_viewport-width) - var(--_edge-gutter)));
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_edge-gutter)));
   /* Reading-column width for placement="page" (full-bleed, centred content). */
   --_content-max-width: var(--ag-ui-content-max-width, 820px);
   /* Slim rail the sidebar placement collapses to. Only that placement reads
      it, but it is declared here so every alias has a default in one place. */
   --_rail-width: var(--ag-ui-rail-width, 52px);
+  /* Width of the docked conversation list on a full-page chat. */
+  --_threads-rail-width: var(--ag-ui-threads-rail-width, 280px);
 
   position: var(--_position);
   inset: var(--_inset);
@@ -6016,23 +6535,30 @@ var STYLES = `
 
 /* \u2500\u2500 Placement presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 :host([placement="bottom-left"]) {
-  --_inset: var(--ag-ui-inset, auto auto 24px 24px);
+  --_inset: var(
+    --ag-ui-inset,
+    auto auto calc(var(--_edge-gutter) + var(--_viewport-inset-bottom) + var(--_keyboard-inset))
+      calc(var(--_edge-gutter) + var(--_viewport-inset-left))
+  );
 }
 
 :host([placement="side"]) {
-  --_inset: var(--ag-ui-inset, 0 0 0 auto);
+  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
   --_width: var(--ag-ui-width, 420px);
-  --_height: var(--ag-ui-height, 100vh);
-  --_max-height: var(--ag-ui-max-height, 100vh);
+  --_height: var(--ag-ui-height, var(--_viewport-height));
+  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_radius: var(--ag-ui-radius, 0);
 }
 
 :host([placement="full"]) {
-  --_inset: var(--ag-ui-inset, 0);
-  --_width: var(--ag-ui-width, 100vw);
-  --_height: var(--ag-ui-height, 100vh);
-  --_max-width: var(--ag-ui-max-width, 100vw);
-  --_max-height: var(--ag-ui-max-height, 100vh);
+  --_inset: var(
+    --ag-ui-inset,
+    var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+  );
+  --_width: var(--ag-ui-width, var(--_viewport-width));
+  --_height: var(--ag-ui-height, var(--_viewport-height));
+  --_max-width: var(--ag-ui-max-width, var(--_viewport-width));
+  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_radius: var(--ag-ui-radius, 0);
 }
 
@@ -6042,11 +6568,14 @@ var STYLES = `
    composer rather than a per-row wrapper, so user pills still right-align and
    the assistant well spans the column. */
 :host([placement="page"]) {
-  --_inset: var(--ag-ui-inset, 0);
-  --_width: var(--ag-ui-width, 100vw);
-  --_height: var(--ag-ui-height, 100vh);
-  --_max-width: var(--ag-ui-max-width, 100vw);
-  --_max-height: var(--ag-ui-max-height, 100vh);
+  --_inset: var(
+    --ag-ui-inset,
+    var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+  );
+  --_width: var(--ag-ui-width, var(--_viewport-width));
+  --_height: var(--ag-ui-height, var(--_viewport-height));
+  --_max-width: var(--ag-ui-max-width, var(--_viewport-width));
+  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_radius: var(--ag-ui-radius, 0);
 }
 
@@ -6077,28 +6606,100 @@ var STYLES = `
   max-width: 100%;
 }
 
+/* Small viewports: one shape, reached from whichever placement the host chose.
+
+   A phone is not an eighth placement, it is an override that collapses the
+   others onto one of them. The host picked a placement for the desktop it was
+   designing; a 380x560 panel with a 24px margin is not a smaller version of
+   that decision, it is most of the screen with a frame drawn round it.
+
+   The breakpoint is a literal because a custom property cannot be read in a
+   media query -- which is exactly why there is an opt-out. Everything the block
+   sets is a token a host can re-state, but the *trigger* is unreachable, so a
+   host whose layout wants a different threshold, or none, sets
+   data-small-viewport="off" and keeps its desktop shape at every width. 600px is above every common phone in portrait and below every
+   tablet in landscape, and it is a width rather than a pointer test on purpose:
+   a touch laptop is coarse-pointered and wide, a narrow desktop window is
+   fine-pointered and small, and conflating the two gets both wrong. What the
+   pointer decides is which controls make sense, further down.
+
+   Two placements are left alone. "page" is already this shape. "embedded" sits
+   in a box the host sized and placed, and taking that over would break the app
+   shell it was embedded into -- the host is the only party that knows whether
+   its column should become the whole screen. */
+@media (max-width: 600px) {
+  :host([placement="floating"]:not([data-small-viewport="off"])),
+  :host([placement="bottom-left"]:not([data-small-viewport="off"])),
+  :host([placement="sidebar"]:not([data-small-viewport="off"])),
+  :host([placement="side"]:not([data-small-viewport="off"])),
+  :host(:not([placement]):not([data-small-viewport="off"])),
+  :host([placement=""]:not([data-small-viewport="off"])) {
+    --_inset: var(
+      --ag-ui-inset,
+      var(--_viewport-inset-top) var(--_viewport-inset-right)
+        calc(var(--_viewport-inset-bottom) + var(--_keyboard-inset))
+        var(--_viewport-inset-left)
+    );
+    --_width: var(--ag-ui-width, var(--_viewport-width));
+    --_height: var(--ag-ui-height, var(--_viewport-height));
+    --_max-width: var(--ag-ui-max-width, var(--_viewport-width));
+    --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
+    --_radius: var(--ag-ui-radius, 0);
+    --_shadow: var(--ag-ui-shadow, none);
+  }
+
+  /* Nothing to resize once the panel is the screen, and the grips would sit
+     under the thumbs holding the phone. */
+  :host([placement="floating"]:not([data-small-viewport="off"])) .resize-handle,
+  :host([placement="bottom-left"]:not([data-small-viewport="off"])) .resize-handle,
+  :host([placement="sidebar"]:not([data-small-viewport="off"])) .resize-handle,
+  :host([placement="side"]:not([data-small-viewport="off"])) .resize-handle,
+  :host(:not([placement]):not([data-small-viewport="off"])) .resize-handle,
+  :host([placement=""]:not([data-small-viewport="off"])) .resize-handle {
+    display: none;
+  }
+}
+
 /* Sidebar: a full-height docked panel that slides open/closed and
    collapses to a slim icon rail (not the floating launcher). Docked right by
    default; data-side="left" docks it left. Overlay by default \u2014 set
    --ag-ui-position: static (and place this element in your own layout) for a
    host-managed push instead. */
 :host([placement="sidebar"]) {
-  --_inset: var(--ag-ui-inset, 0 0 0 auto);
+  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
   --_width: var(--ag-ui-width, 420px);
-  --_height: var(--ag-ui-height, 100vh);
-  --_max-height: var(--ag-ui-max-height, 100vh);
+  --_height: var(--ag-ui-height, var(--_viewport-height));
+  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_radius: var(--ag-ui-radius, 0);
   transition: width var(--_motion) var(--_ease);
 }
 
 :host([placement="sidebar"][data-side="left"]) {
-  --_inset: var(--ag-ui-inset, 0 auto 0 0);
+  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) auto var(--_viewport-inset-bottom) var(--_viewport-inset-left));
 }
 
 /* The docked panel is pinned to the edge it docks against rather than filling
    the host as a flex child. Collapsing shrinks the host to the rail width, and
    a flex child would be squashed to 52px on the way out instead of sliding out
    at full width. */
+/* The panel is taken out of flow so the collapse can slide it out at full
+   width; see the note above. That makes the host its containing block, and the
+   host is only one by accident: it is position: fixed by default. A host that
+   takes the documented route to a pushed layout instead of an overlay sets
+   --ag-ui-position: static, and a static element establishes nothing -- so the
+   panel resolved against the initial containing block, landed at the document
+   origin, and scrolled away with the page. Docked left it pinned to the
+   document's left edge rather than the host's.
+
+   It looked correct wherever it was first tried, because a full-height column
+   at the top of an unscrolled document is exactly where those two answers
+   coincide. Containment makes the host a containing block whatever its
+   position, so the panel stays in the box the host was given. It is a no-op in
+   the default case, which is already positioned. */
+:host([placement="sidebar"]) {
+  contain: layout;
+}
+
 :host([placement="sidebar"]) .chat {
   position: absolute;
   inset: 0 0 0 auto;
@@ -6114,11 +6715,15 @@ var STYLES = `
 /* Collapsed sidebar: shrink the host to the rail width and slide the panel out
    through the edge it docks against. Higher specificity than the generic
    collapse rules, so it wins regardless of source order. */
+/* The rail is the full height of what the host left, not of the screen. It
+   said 100vh and pinned its own bottom, which put it under any chrome the host
+   had reserved -- and the icon lives at the top of the rail, so the one control
+   that reopens the panel was the first thing to disappear behind a sticky
+   header. */
 :host([placement="sidebar"][collapsed]) {
   width: var(--_rail-width);
-  height: 100vh;
-  max-height: 100vh;
-  bottom: 0;
+  height: var(--_viewport-height);
+  max-height: var(--_viewport-height);
   pointer-events: auto;
 }
 
@@ -6234,17 +6839,83 @@ var STYLES = `
 
 /* The sidebar collapses to an edge rail instead: full height, square, flush
    against the dock. It slides in with the panel rather than popping. */
+/* The edge rail. It reads as the docked edge of a panel rather than a coloured
+   stripe: the surface the panel is made of, a border on the side it docks
+   against, and the accent kept for the icon -- a full-height slab of accent is
+   the loudest thing on the page and says the least about itself.
+
+   Content sits at the top rather than centred, because a control floating in
+   the middle of a screen-high column has nothing to belong to. */
 :host([placement="sidebar"][collapsed]) .launcher {
   inset: 0;
   width: auto;
   height: auto;
-  align-items: flex-start;
-  padding-top: 16px;
-  border: 1px solid var(--_border);
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding-top: 14px;
+  border: 0;
+  border-inline-start: 1px solid var(--_border);
   border-radius: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  box-shadow: none;
+  transform: none;
+}
+
+:host([placement="sidebar"][data-side="left"][collapsed]) .launcher {
+  border-inline-start: 0;
+  border-inline-end: 1px solid var(--_border);
+}
+
+/* The icon keeps the accent, so there is one obvious thing to press.
+
+   The glyph is sized here rather than left to fill the holder. A glyph in an
+   icon holder takes the holder's whole box by default, which is right where the
+   holder is only a box and wrong the moment it becomes a filled circle: the
+   mark then runs edge to edge and reads as a square crammed into a disc. The
+   proportion is the floating launcher's own -- a 26px glyph in a 56px bubble --
+   so the two collapsed states look like the same widget. */
+:host([placement="sidebar"][collapsed]) .launcher .icon-holder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
   background: var(--_header-bg);
   color: var(--_header-fg);
-  box-shadow: none;
+}
+
+:host([placement="sidebar"][collapsed]) .launcher .icon-holder .glyph,
+:host([placement="sidebar"][collapsed]) .launcher .icon-holder .icon-img {
+  width: 16px;
+  height: 16px;
+}
+
+/* Written down the rail, which is the only direction it fits. Reading upward
+   is the convention for a right-hand edge and matches how a docked panel's
+   label is set everywhere it appears. */
+.rail-label {
+  display: none;
+}
+
+:host([placement="sidebar"][collapsed]) .rail-label {
+  display: block;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  max-height: calc(100% - 96px);
+  overflow: hidden;
+  font-size: 0.9em;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:host([placement="sidebar"][data-side="left"][collapsed]) .rail-label {
+  writing-mode: vertical-rl;
   transform: none;
 }
 
@@ -6293,6 +6964,41 @@ var STYLES = `
   color: var(--_header-fg);
 }
 
+/* The header is the panel's title bar: on the placements that let the widget
+   be moved it drags the whole thing, matching the launcher's own drag. The
+   selector lists those placements rather than asking JS to stamp an attribute,
+   because a cursor that appears one frame late reads as a control that only
+   sometimes exists. touch-action keeps a finger drag here moving the panel
+   instead of scrolling the page behind it. */
+:host(:not([placement])) .header,
+:host([placement=""]) .header,
+:host([placement="floating"]) .header,
+:host([placement="bottom-left"]) .header {
+  cursor: move;
+  touch-action: none;
+}
+
+/* A host that turned the drag off keeps a header that says so. */
+:host([data-launcher-drag="false"]) .header {
+  cursor: auto;
+  touch-action: auto;
+}
+
+/* :host is carried for the specificity, not the scope: the placement rules
+   above are a host selector plus a class plus an attribute, and a bare
+   .header[data-dragging] loses to them -- silently, because the drag still
+   works and only the cursor is wrong. */
+:host .header[data-dragging] {
+  cursor: grabbing;
+}
+
+/* The cursor inherits, so a control a host slots into the header would show
+   the drag cursor over something the drag deliberately ignores. Named to
+   match the controls panel_drag steps aside for. */
+.header ::slotted(:is(button, a, input, select, textarea)) {
+  cursor: pointer;
+}
+
 .header-title {
   flex: 1;
   min-width: 0;
@@ -6323,17 +7029,24 @@ var STYLES = `
 
 .header-controls {
   display: flex;
-  gap: 2px;
+  gap: var(--_header-gap);
   flex: none;
 }
 
 .header-btn {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--_header-btn-size);
+  height: var(--_header-btn-size);
   border: none;
   background: transparent;
   color: inherit;
   font: inherit;
   line-height: 1;
-  padding: 4px 7px;
+  padding: 0;
   border-radius: 6px;
   cursor: pointer;
   opacity: 0.85;
@@ -6355,9 +7068,9 @@ var STYLES = `
    Nothing paints there once the panel is gone, so the box only has to stop
    swallowing clicks: pointer events go to none and the launcher takes them.
 
-   Two placements collapse differently: "sidebar" slides to its rail (below),
-   while "embedded" and "page" keep the header bar, having no corner for a
-   floating circle that would escape the host's layout. */
+   Two placements do not use it: "sidebar" slides to its rail (below), and
+   "embedded" keeps its header bar, having no corner for a floating circle that
+   would escape the host's layout. "page" has no collapsed state at all. */
 :host([collapsed]) {
   pointer-events: none;
   /* A collapsed host has to be allowed to shrink, and in the layout hosts
@@ -6419,56 +7132,126 @@ var STYLES = `
   transform-origin: bottom right;
 }
 
-/* The two in-flow placements keep the original collapse: hide the body, let
-   the host shrink to the header bar. */
-:host([collapsed]:is([placement="embedded"], [placement="page"])) {
+/* The in-flow placement keeps the original collapse: hide the body, let the
+   host shrink to the header bar. */
+:host([collapsed][placement="embedded"]) {
   height: auto;
   max-height: none;
   pointer-events: auto;
 }
 
-:host([collapsed]:is([placement="embedded"], [placement="page"])) .chat {
+:host([collapsed][placement="embedded"]) .chat {
   opacity: 1;
   transform: none;
   visibility: visible;
 }
 
-/* These two keep the header bar, so the launcher must stay out of the way: an
+/* It keeps the header bar, so the launcher must stay out of the way: an
    embedded host is position: static, which would let an absolutely-positioned
    circle escape the layout and land against whatever the page positions. */
-:host([collapsed]:is([placement="embedded"], [placement="page"])) .launcher {
+:host([collapsed][placement="embedded"]) .launcher {
   visibility: hidden;
   opacity: 0;
 }
 
-:host([collapsed]:is([placement="embedded"], [placement="page"])) .messages-wrap,
-:host([collapsed]:is([placement="embedded"], [placement="page"])) .messages,
-:host([collapsed]:is([placement="embedded"], [placement="page"])) .input-row,
-:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-chips,
-:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-palette,
-:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-hint {
+:host([collapsed][placement="embedded"]) .messages-wrap,
+:host([collapsed][placement="embedded"]) .messages,
+:host([collapsed][placement="embedded"]) .input-row,
+:host([collapsed][placement="embedded"]) .skill-chips,
+:host([collapsed][placement="embedded"]) .skill-palette,
+:host([collapsed][placement="embedded"]) .skill-hint {
   display: none;
 }
 
-/* Jump-to-latest: shown only once the reader has scrolled away *and* missed
-   something. Anchored to the panel rather than the list so it does not scroll
-   with the content it is offering to scroll to. */
-/* The transcript's own box, and the only one whose foot is the transcript's
-   foot. The panel's foot is below the composer, the chips and the footer. */
-.messages-wrap {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
+/* A docked conversation list: beside the transcript rather than over it.
+
+   A full-page chat is the one surface with width to spare, and covering the
+   conversation to show the list of conversations is the wrong trade there --
+   it hides the thing you are trying to get back to. Everywhere else the panel
+   is a few hundred pixels wide and a docked list would leave a column of
+   transcript narrower than the messages in it, so this is the only placement
+   that gets it.
+
+   The transcript is moved by padding on the shell rather than by making the
+   list a flex sibling: the drawer is the last child of the panel, and no
+   selector reaches backwards from it to the rows that have to shift. That is
+   also why the state is stamped on the host. */
+:host([data-threads-docked]) .drawer {
+  /* Not a scrim: the page behind it is still the user's to work in. */
+  pointer-events: none;
 }
 
-.jump-latest {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: var(--_pad);
-  z-index: 2;
+:host([data-threads-docked]) .drawer-backdrop {
+  display: none;
+}
+
+:host([data-threads-docked]) .drawer-panel {
+  width: var(--_threads-rail-width);
+  pointer-events: auto;
+  border-inline-end: 1px solid var(--_border);
+  box-shadow: none;
+}
+
+:host([data-threads-docked]) .messages,
+:host([data-threads-docked]) .input-row,
+:host([data-threads-docked]) .skill-chips,
+:host([data-threads-docked]) .attachment-tray {
+  padding-inline-start: calc(
+    var(--_threads-rail-width) + max(var(--_pad), (100% - var(--_content-max-width)) / 2)
+  );
+}
+
+:host([data-threads-docked]) .header {
+  padding-inline-start: calc(var(--_threads-rail-width) + var(--_pad));
+}
+
+/* The page placement has no collapsed state, so it offers no control for one.
+   A dedicated route has no "away" to go to: shrinking it left a strip of
+   application chrome fixed over a route that no longer had an owner, and this
+   is the one placement where the launcher that would bring it back is hidden.
+
+   Hiding the control is only half of it. The state has another way in -- the
+   attribute can be written straight onto the element, and a value stored under
+   a different placement is restored on connect -- and the JS guards that catch
+   those cannot see an attribute set directly. So the placement neutralises the
+   state here as well: with the collapse rules above no longer naming "page", an
+   unguarded collapsed attribute would otherwise fall through to the generic
+   rule that scales the panel away and drops pointer events, leaving nothing on
+   screen and no launcher to press. */
+:host([placement="page"]) .header-btn--collapse {
+  display: none;
+}
+
+:host([placement="page"][collapsed]) {
+  pointer-events: auto;
+  align-self: auto;
+}
+
+:host([placement="page"][collapsed]) .chat {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+
+/* Jump-to-latest: shown only once the reader has scrolled away *and* missed
+   something. Anchored to the panel rather than the list so it does not scroll
+   with the content it is offering to scroll to. */
+/* The transcript's own box, and the only one whose foot is the transcript's
+   foot. The panel's foot is below the composer, the chips and the footer. */
+.messages-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.jump-latest {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--_pad);
+  z-index: 2;
   display: none;
   align-items: center;
   gap: 0.35em;
@@ -6537,6 +7320,28 @@ var STYLES = `
 
    The 1px box with clip-path, rather than width/height 0, is the shape that
    survives: a zero-sized element is dropped from the tree by some engines. */
+/* A used-value reader for the four viewport-inset tokens, and the only
+   reliable one. getComputedStyle().getPropertyValue() on an unregistered
+   custom property hands back the substituted token stream, not a length: it
+   returns "4rem" verbatim, and "calc(56px + env(safe-area-inset-top))" as
+   "calc(56px + 0px)" -- which parses as NaN and takes the whole inset with it.
+   Padding is a real property, so the same tokens come back resolved to px.
+
+   visibility rather than display: none, because a box that generates no
+   layout has no used values to read. Zero-sized, absolutely positioned and
+   inert, so it costs nothing but the read. */
+.viewport-probe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+  padding: var(--_viewport-inset-top) var(--_viewport-inset-right)
+    var(--_viewport-inset-bottom) var(--_viewport-inset-left);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -6552,6 +7357,8 @@ var STYLES = `
 .messages {
   flex: 1;
   overflow-y: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
   /* The browser's own scroll anchoring competes with the scroller for the same
      job and wins unpredictably -- it can hold the view still exactly when we
      want to follow. Turned off so following is decided in one place. Safari
@@ -6704,6 +7511,8 @@ var STYLES = `
 .message--assistant pre {
   padding: 8px 10px;
   overflow: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
   background: var(--_bg);
   border: 1px solid var(--_border);
   border-radius: 6px;
@@ -6882,6 +7691,8 @@ var STYLES = `
   border-left: 2px solid var(--_border);
   max-height: 220px;
   overflow: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
   white-space: pre-wrap;
   word-break: break-word;
   font-family: inherit;
@@ -7072,6 +7883,8 @@ var STYLES = `
   padding: 6px 8px;
   max-height: 160px;
   overflow: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
   background: var(--_bg);
   border: 1px solid var(--_border);
   border-radius: 6px;
@@ -7566,6 +8379,8 @@ var STYLES = `
   resize: none;
   max-height: var(--_composer-max-height);
   overflow-y: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
   padding: 6px 4px 2px;
   background: transparent;
   border: none;
@@ -7776,13 +8591,30 @@ var STYLES = `
  * values, and the axis furniture inherits currentColor at low opacity so it
  * reads correctly in either theme without a second palette.
  */
+/* A chart is sized like a message, not like a panel: it takes the width it
+   needs and stops, rather than stretching into whatever room the transcript
+   has. A message bubble caps at 80% for the same reason -- widening the panel
+   should not resize what is already in it. The cap is a token so a host with a
+   wide panel and a real reason can raise it; the default is the width this
+   renderer has always drawn at. Below the cap the block still fills its column,
+   which is what a narrow panel needs. */
 .chart-block {
-  align-self: stretch;
-  max-width: 100%;
+  align-self: flex-start;
+  width: 100%;
+  max-width: var(--_chart-max-width);
   margin: 6px 0;
   color: var(--_fg);
 }
 
+/* The drawing fills the block's width and carries its own height in the
+   viewBox, so it is laid out rather than magnified: block display keeps the
+   inline baseline gap from adding a stripe under every chart. */
+.chart-block svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
 .chart-title {
   margin-bottom: 2px;
   font-size: 0.85em;
@@ -7833,6 +8665,30 @@ var STYLES = `
   opacity: 0.75;
 }
 
+/* The one control a notice may carry. Quiet, because it reports something
+   already done rather than asking for a decision. */
+.run-notice-undo {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  padding: 2px 8px;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  background: var(--_bg);
+  color: var(--_accent);
+  font: inherit;
+  font-size: 0.9em;
+  cursor: pointer;
+}
+
+.run-notice-undo:hover:not(:disabled) {
+  background: var(--_hover);
+}
+
+.run-notice-undo:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .run-notice-text {
   min-width: 0;
   overflow-wrap: anywhere;
@@ -7977,6 +8833,8 @@ var STYLES = `
   padding: 8px 10px;
   max-height: 140px;
   overflow: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
   font-size: 12px;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
   background: var(--_assistant-bg);
@@ -8165,6 +9023,43 @@ var STYLES = `
   }
 }
 
+/* Touch. Separate from the width breakpoint above on purpose: width decides
+   the layout, the pointer decides which controls make sense, and a touch
+   laptop is coarse-pointered and wide while a narrow desktop window is
+   fine-pointered and small. */
+@media (pointer: coarse) {
+  /* A 6px edge strip is not a control, it is a trap that eats a scroll. The
+     corners are 14px, still under the 24px floor a target is meant to clear,
+     and the panel has other ways to be resized on a device that has a pointer
+     precise enough to grab one. */
+  .resize-handle {
+    display: none;
+  }
+
+  /* Platform guidance is 44pt on iOS and 48dp on Android. These sit at 28-30px,
+     which clears the WCAG minimum and misses both. */
+  :host {
+    --_action-size: var(--ag-ui-action-size, 44px);
+    --_tool-btn-size: var(--ag-ui-tool-btn-size, 44px);
+    --_send-size: var(--ag-ui-send-size, 44px);
+    /* Missed the first time these were raised, which left the header -- the
+       widget's primary controls, and the only way to reach history, a new chat
+       or the collapse -- at half the size of everything beside it. */
+    --_header-btn-size: var(--ag-ui-header-btn-size, 44px);
+    --_header-gap: var(--ag-ui-header-gap, 6px);
+  }
+
+  /* iOS Safari zooms the page when a control under 16px takes focus, which
+     drags the whole fixed panel with it and leaves the user pinching back out
+     of a chat they only wanted to type into. The composer inherits the widget
+     font, which is 14px by default and 13px at compact density, so it has to
+     say 16 outright -- and only ever upward, so a host that has deliberately
+     set something larger keeps it. */
+  .input {
+    font-size: max(16px, var(--_font-size));
+  }
+}
+
 .message-action[aria-pressed="true"] {
   opacity: 1;
   color: var(--_accent);
@@ -8353,6 +9248,8 @@ var STYLES = `
   flex-direction: column;
   max-height: 220px;
   overflow: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
   background: var(--_bg);
   border: 1px solid var(--_border);
   border-radius: 8px;
@@ -8441,6 +9338,8 @@ var STYLES = `
   box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
   max-height: 60%;
   overflow-y: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
   transform-origin: top center;
   transition:
     opacity var(--_motion) var(--_ease),
@@ -8616,10 +9515,20 @@ var STYLES = `
 }
 
 .drawer-title {
+  /* Takes the slack so the two controls group at the trailing edge. With
+     space-between and three items the middle one floats, which reads as the
+     title and the close button being a pair with New chat wedged between
+     them. Truncates rather than pushing them off the row. */
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 600;
 }
 
 .drawer-new {
+  flex: 0 0 auto;
   border: 1px solid var(--_border);
   border-radius: var(--_radius);
   background: var(--_bg);
@@ -8630,10 +9539,63 @@ var STYLES = `
   cursor: pointer;
 }
 
+/* Narrows the list. Sits under the header rather than in it: the header's two
+   controls act on the conversation, and a field that filters what is below it
+   belongs with what it filters. */
+/* What is waiting for the run to finish. Above the composer, beside the
+   attachment tray, because both are things already handed over and not yet
+   sent. Each chip is a button: pressing it takes that message back. */
+.queued {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--_space);
+  padding: 0 var(--_pad) var(--_space);
+}
+
+.queued-chip {
+  max-width: 100%;
+  overflow: hidden;
+  padding: 4px 10px;
+  border: 1px dashed var(--_border);
+  border-radius: var(--_msg-radius);
+  background: var(--_bg);
+  color: var(--_muted);
+  font: inherit;
+  font-size: 0.9em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.queued-chip:hover {
+  border-style: solid;
+  color: var(--_fg);
+}
+
+.drawer-filter {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: calc(100% - var(--_pad) * 2);
+  margin: var(--_space) var(--_pad) 0;
+  padding: 6px 10px;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  background: var(--_input-bg);
+  color: var(--_fg);
+  font: inherit;
+  font-size: 0.9em;
+}
+
+.drawer-filter::placeholder {
+  color: var(--_muted);
+}
+
 .drawer-list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
 }
 
 .drawer-empty {
@@ -8754,6 +9716,31 @@ var STYLES = `
   background: none;
 }
 
+/* The way back out of the list. It sits beside New chat, which is the control
+   it must not be mistaken for: one returns you to the conversation you were
+   reading, the other replaces it. */
+.drawer-close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.drawer-close:hover {
+  background: var(--_hover);
+}
+
 :host([placement="embedded"]) .drawer-panel {
   width: 100%;
   border-right: none;
@@ -9021,6 +10008,7 @@ var ThoughtsBlock = class {
 };
 
 // src/ui/thread_drawer.ts
+var FILTER_FROM = 8;
 var ThreadDrawer = class {
   /** The drawer root (backdrop + panel). Append to the chat shell; hidden until opened. */
   element;
@@ -9033,6 +10021,23 @@ var ThreadDrawer = class {
   #strings;
   #threads = [];
   #activeId = "";
+  /** Dismisses the list without starting a new conversation. */
+  #closeButton;
+  /** Narrows the list. Only rendered once there is enough of a list to narrow. */
+  #filter;
+  /** The current filter text, lowercased once rather than per row. */
+  #query = "";
+  /**
+   * Whether the list covers the conversation, or sits beside it.
+   *
+   * Everything a dialog implies follows from this and nothing else does: the
+   * modal role, the focus trap, and taking focus on open. A list docked beside
+   * a full-page conversation is a region of that page -- telling assistive
+   * technology to ignore the rest of the document while it is showing would be
+   * a lie, and stealing focus into it would interrupt someone mid-sentence to
+   * announce a list they can already see.
+   */
+  #modal = true;
   /** The element focused before the drawer opened, restored on close. */
   #lastFocused = null;
   constructor(callbacks, strings = DEFAULT_UI_STRINGS) {
@@ -9069,11 +10074,29 @@ var ThreadDrawer = class {
       this.close();
       this.#callbacks.onNew();
     });
-    header.append(this.#heading, this.#newButton);
+    this.#closeButton = document.createElement("button");
+    this.#closeButton.type = "button";
+    this.#closeButton.className = "drawer-close";
+    this.#closeButton.setAttribute("part", "drawer-close");
+    this.#closeButton.title = strings.closeHistory;
+    this.#closeButton.setAttribute("aria-label", strings.closeHistory);
+    this.#closeButton.append(document.createTextNode("\xD7"));
+    this.#closeButton.addEventListener("click", () => this.close());
+    header.append(this.#heading, this.#newButton, this.#closeButton);
+    this.#filter = document.createElement("input");
+    this.#filter.type = "search";
+    this.#filter.className = "drawer-filter";
+    this.#filter.setAttribute("part", "drawer-filter");
+    this.#filter.placeholder = strings.searchConversations;
+    this.#filter.setAttribute("aria-label", strings.searchConversations);
+    this.#filter.addEventListener("input", () => {
+      this.#query = this.#filter.value.trim().toLowerCase();
+      this.#renderList();
+    });
     this.#list = document.createElement("div");
     this.#list.className = "drawer-list";
     this.#list.setAttribute("part", "drawer-list");
-    this.#panel.append(header, this.#list);
+    this.#panel.append(header, this.#filter, this.#list);
     this.element.append(backdrop, this.#panel);
   }
   /** Re-localize the drawer's chrome and rows (the host calls this on connect). */
@@ -9097,8 +10120,26 @@ var ThreadDrawer = class {
     this.#panel.setAttribute("aria-label", strings.chatHistory);
     this.#heading.textContent = strings.chats;
     this.#newButton.textContent = strings.newChat;
+    this.#closeButton.title = strings.closeHistory;
+    this.#closeButton.setAttribute("aria-label", strings.closeHistory);
+    this.#filter.placeholder = strings.searchConversations;
+    this.#filter.setAttribute("aria-label", strings.searchConversations);
     this.#renderList();
   }
+  /**
+   * Whether the list is a dialog over the conversation or a rail beside it.
+   * The host decides, because only the placement knows whether there is room.
+   */
+  setModal(modal) {
+    this.#modal = modal;
+    if (modal) {
+      this.#panel.setAttribute("role", "dialog");
+      this.#panel.setAttribute("aria-modal", "true");
+    } else {
+      this.#panel.setAttribute("role", "region");
+      this.#panel.removeAttribute("aria-modal");
+    }
+  }
   isOpen() {
     return !this.element.hidden;
   }
@@ -9108,15 +10149,21 @@ var ThreadDrawer = class {
     }
     this.#lastFocused = this.#activeElement();
     this.element.hidden = false;
-    this.#newButton.focus();
+    if (this.#modal) {
+      this.#newButton.focus();
+    }
+    this.#callbacks.onVisibility?.(true);
   }
   close() {
     if (!this.isOpen()) {
       return;
     }
     this.element.hidden = true;
-    this.#lastFocused?.focus();
+    if (this.#modal) {
+      this.#lastFocused?.focus();
+    }
     this.#lastFocused = null;
+    this.#callbacks.onVisibility?.(false);
   }
   toggle() {
     if (this.isOpen()) {
@@ -9136,7 +10183,7 @@ var ThreadDrawer = class {
       this.close();
       return;
     }
-    if (event.key !== "Tab") {
+    if (event.key !== "Tab" || !this.#modal) {
       return;
     }
     const focusables = Array.from(
@@ -9161,18 +10208,42 @@ var ThreadDrawer = class {
   }
   #renderList() {
     this.#list.replaceChildren();
-    if (this.#threads.length === 0) {
+    const hideFilter = this.#threads.length < FILTER_FROM;
+    this.#filter.hidden = hideFilter;
+    if (hideFilter && this.#query !== "") {
+      this.#filter.value = "";
+      this.#query = "";
+    }
+    const shown = this.#matching();
+    if (shown.length === 0) {
       const empty = document.createElement("div");
       empty.className = "drawer-empty";
       empty.setAttribute("part", "drawer-empty");
-      empty.textContent = this.#strings.noConversations;
+      empty.textContent = this.#threads.length === 0 ? this.#strings.noConversations : this.#strings.noMatches;
       this.#list.appendChild(empty);
       return;
     }
-    for (const meta of this.#threads) {
+    for (const meta of shown) {
       this.#list.appendChild(this.#renderRow(meta));
     }
   }
+  /**
+   * The rows the filter leaves.
+   *
+   * Title and preview both, because the title is often the model's summary of
+   * a conversation and the thing being looked for is as likely to be a phrase
+   * from inside it. Client-side over what the drawer already holds: the server
+   * index is fetched whole, so a query would be a round trip to filter a list
+   * already in memory.
+   */
+  #matching() {
+    if (this.#query === "") {
+      return this.#threads;
+    }
+    return this.#threads.filter(
+      (meta) => meta.title.toLowerCase().includes(this.#query) || meta.preview.toLowerCase().includes(this.#query)
+    );
+  }
   #renderRow(meta) {
     const row = document.createElement("div");
     row.className = "drawer-row";
@@ -10698,6 +11769,13 @@ var COLLAPSED_KEY = "ag-ui-chat:collapsed";
 var SIZE_KEY = "ag-ui-chat:size";
 var THEME_KEY = "ag-ui-chat:theme";
 var LAUNCHER_KEY = "ag-ui-chat:launcher";
+function asPoint(value) {
+  if (typeof value !== "object" || value === null) {
+    return null;
+  }
+  const { left, top } = value;
+  return typeof left === "number" && typeof top === "number" ? { left, top } : null;
+}
 var DRAGGABLE_PLACEMENTS = /* @__PURE__ */ new Set([null, "", "floating", "bottom-left"]);
 var RESIZE_GRIPS = [
   { y: "top" },
@@ -10937,7 +12015,7 @@ var AgUiChat = class extends HTMLElement {
    * Resolve a `scroll_to` / `drag_and_drop` target string to a host-page
    * element (or `null`). Defaults to a CSS-selector lookup; override to map
    * page-map element ids. The page-action tools are opt-in via the
-   * `data-page-actions` attribute (`"scroll"` / `"drag"`).
+   * `data-page-actions` attribute (`"scroll"` / `"drag"` / `"chat"`).
    */
   resolvePageTarget = (target) => document.querySelector(target);
   /**
@@ -11053,6 +12131,12 @@ var AgUiChat = class extends HTMLElement {
   #root;
   /** Screen-reader-only status region -- see {@link AgUiChat.#announce}. */
   #announcer = document.createElement("div");
+  /**
+   * A zero-sized box carrying the host's viewport insets as padding, so they
+   * can be read back as used pixel lengths. See the `.viewport-probe` rule for
+   * why a custom property cannot be read directly.
+   */
+  #viewportProbe = document.createElement("div");
   /** Return-to-foot affordance, shown only once something has been missed. */
   #jumpButton = document.createElement("button");
   /**
@@ -11114,6 +12198,8 @@ var AgUiChat = class extends HTMLElement {
   #launcher;
   /** The launcher's unread badge; hidden at zero, and when the host opts out. */
   #badge;
+  /** The rail's vertical caption. Rendered only by the sidebar's edge rail. */
+  #railLabel = document.createElement("span");
   // Answers that finished while the widget was collapsed. Expanding clears it.
   #unread = 0;
   /** Empty-state region at the top of the message list; hidden once anything renders. */
@@ -11126,6 +12212,26 @@ var AgUiChat = class extends HTMLElement {
    * position -- see #applyLauncherPlacement for what that costs the host.
    */
   #launcherPos = null;
+  /** What the user has sent this session, newest first, for arrow-key recall. */
+  #sentDrafts = [];
+  /** Typed while a run was in flight, oldest first; sent when it settles. */
+  #queued = [];
+  /** The row those show up in, above the composer. */
+  #queuedRow = document.createElement("div");
+  /** How far back the composer has been walked; null while the user is typing. */
+  #recallIndex = null;
+  /**
+   * Where the user dragged the *panel*, in viewport coordinates, or null while
+   * its position is still derived from the launcher's.
+   *
+   * The two gestures state different things and are restored differently. A
+   * launcher drag says where the bubble goes and leaves the panel to open into
+   * whatever space the viewport has, so it is re-derived every time -- which is
+   * what lets a widget re-decide its direction when the window changes under
+   * it. A header drag states the panel's own position, and re-deriving that
+   * from the launcher would move the panel the user just placed.
+   */
+  #panelPos = null;
   /**
    * The corner the panel opens away from, once this element is placing itself.
    * Null means the host's layout still decides, and the anchor is measured.
@@ -11144,8 +12250,53 @@ var AgUiChat = class extends HTMLElement {
    * a field so `removeEventListener` on disconnect gets the same reference.
    */
   #onViewportResize = () => {
+    this.#publishVisualViewport();
+    if (this.#dragging()) {
+      return;
+    }
     this.#restoreLauncherPosition();
+    if (this.#drawer.isOpen()) {
+      this.#drawer.setModal(!this.#threadsDock());
+      this.#syncThreadsState();
+    }
   };
+  /**
+   * Hold a resized box inside the part of the screen the host left free.
+   *
+   * Each edge on its own, unlike the drag's clamp: a drag moves a box of fixed
+   * size, so pushing it back in is right, while a resize is anchored on the
+   * opposite edge and pushing it back would move the edge the user is not
+   * touching. Bounding each edge instead leaves the grip stopped at the limit
+   * -- the gesture keeps going and the panel simply stops growing, which is
+   * what dragging already does.
+   *
+   * The minimum size is the grip's own concern and is applied before this, so
+   * a panel that cannot fit the space is left at its minimum and overflowing
+   * rather than collapsed to nothing.
+   */
+  #withinViewport(box) {
+    const viewport = this.#viewport();
+    const left = viewport.left + SCREEN_EDGE_MARGIN;
+    const top = viewport.top + SCREEN_EDGE_MARGIN;
+    const right = viewport.left + viewport.width - SCREEN_EDGE_MARGIN;
+    const bottom = viewport.top + viewport.height - SCREEN_EDGE_MARGIN;
+    return {
+      left: Math.min(Math.max(box.left, left), box.right),
+      top: Math.min(Math.max(box.top, top), box.bottom),
+      right: Math.max(Math.min(box.right, right), box.left),
+      bottom: Math.max(Math.min(box.bottom, bottom), box.top)
+    };
+  }
+  /**
+   * Whether a pointer or key gesture is currently placing the widget.
+   *
+   * Read from the stamp the drag helpers already set, rather than tracked
+   * separately: one source of truth, and it clears on `pointercancel` as well
+   * as `pointerup`, which is the end a touch gesture usually gets.
+   */
+  #dragging() {
+    return this.#launcher.hasAttribute("data-dragging") || this.#root.querySelector(".header[data-dragging]") !== null;
+  }
   /** Mic button mount point (input row); the control mounts on connect when enabled. */
   #voiceSlot;
   /** Voice-input control; created on connect when transcription is available. */
@@ -11267,6 +12418,9 @@ var AgUiChat = class extends HTMLElement {
       },
       onDelete: (threadId) => {
         this.#deleteThread(threadId);
+      },
+      onVisibility: () => {
+        this.#syncThreadsState();
       }
     });
     this.#checkpoints = new CheckpointMenu((runId, verb) => {
@@ -11355,11 +12509,15 @@ var AgUiChat = class extends HTMLElement {
     if (name === "placement") {
       this.#releaseOwnedAxes();
       this.#releaseLauncherPosition();
+      if (!this.#collapsible() && this.collapsed) {
+        this.setCollapsed(false);
+      }
       requestAnimationFrame(() => this.#syncResizeAnchor());
       return;
     }
     if (name === "title-text") {
       this.#title.textContent = value ?? this.#strings.title;
+      this.#railLabel.textContent = this.#title.textContent;
       return;
     }
     if (name === "user-key") {
@@ -11468,7 +12626,10 @@ var AgUiChat = class extends HTMLElement {
     const enabled = new Set(
       attr.split(",").map((token) => token.trim()).filter((token) => token !== "")
     );
-    return createPageActionTools(enabled, (target) => this.resolvePageTarget(target));
+    return [
+      ...createPageActionTools(enabled, (target) => this.resolvePageTarget(target)),
+      ...enabled.has(PAGE_ACTIONS.CHAT) ? createChatSurfaceTools(this) : []
+    ];
   }
   /** All built-in (route + page + page-action + ask_user) frontend tools. */
   #builtinTools() {
@@ -11708,7 +12869,7 @@ var AgUiChat = class extends HTMLElement {
     });
     this.#strings = mergeUiStrings({ ...this.#readStringOverrides(), ...this.strings });
     if (this.getAttribute("data-theme-toggle") !== null) {
-      const saved = this.#readScopedItem(THEME_KEY);
+      const saved = this.#readPreference(THEME_KEY);
       if (saved !== null) {
         this.setAttribute("theme", saved);
       }
@@ -11716,7 +12877,7 @@ var AgUiChat = class extends HTMLElement {
     this.#render();
     this.#drawer.setStrings(this.#strings);
     this.#checkpoints.setStrings(this.#strings);
-    if (this.#readScopedItem(COLLAPSED_KEY) === "1") {
+    if (this.#collapsible() && this.#startsCollapsed()) {
       this.setAttribute("collapsed", "");
     }
     this.#syncLauncher();
@@ -11727,6 +12888,9 @@ var AgUiChat = class extends HTMLElement {
       this.conversationStore = this.#builtinStore;
     }
     window.addEventListener("resize", this.#onViewportResize);
+    window.visualViewport?.addEventListener("resize", this.#onViewportResize);
+    window.visualViewport?.addEventListener("scroll", this.#onViewportResize);
+    this.#publishVisualViewport();
     this.#wireThreadStore();
     this.#wireAttachments();
     this.#wireVoice();
@@ -11790,6 +12954,8 @@ var AgUiChat = class extends HTMLElement {
   disconnectedCallback() {
     this.#connected = false;
     window.removeEventListener("resize", this.#onViewportResize);
+    window.visualViewport?.removeEventListener("resize", this.#onViewportResize);
+    window.visualViewport?.removeEventListener("scroll", this.#onViewportResize);
     if (this.#claimedNs !== null) {
       CLAIMED_NAMESPACES.delete(this.#claimedNs);
       this.#claimedNs = null;
@@ -11862,7 +13028,7 @@ var AgUiChat = class extends HTMLElement {
     this.#fileInput.accept = accept;
     this.#attachButton.hidden = false;
     this.#enableDragAndDrop();
-    this.#enablePaste();
+    this.#enablePaste(tray);
   }
   /** The built-in multipart upload handler for `data-attachments-url`, or `null`. */
   #defaultUploadHandler(url) {
@@ -12097,6 +13263,62 @@ ${quoted}`;
       }
     });
   }
+  /**
+   * Turn a very long text paste into an attachment instead of a wall of text.
+   *
+   * A composer capped at `40vh` is not where forty thousand characters go: the
+   * user cannot read what they pasted, cannot edit around it, and sends one
+   * enormous turn. As a file it stays whole, the model still receives it, and
+   * the box is left for the question about it.
+   *
+   * Only where the host has configured uploads -- and structurally so, rather
+   * than by a check here: the paste listener is wired inside the attachment
+   * setup, so with no tray there is no listener at all and an ordinary paste is
+   * untouched. Quietly dropping a paste for being long would be far worse than
+   * an awkward composer. The tray is passed rather than read off the field for
+   * the same reason its `onChange` hook is: it can only be called from one that
+   * exists, so taking it as an argument removes a null check no caller can
+   * reach.
+   *
+   * Nothing is lost by removing the chip: the text is still on the clipboard,
+   * so pasting again brings it back. That is why this needs no undo of its own.
+   */
+  #pasteLongTextAsFile(event, clipboard, tray) {
+    const threshold = this.#pasteAttachThreshold();
+    const text4 = clipboard.getData("text/plain");
+    if (threshold === null || text4.length < threshold) {
+      return;
+    }
+    event.preventDefault();
+    const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+    tray.add(new File([text4], `pasted-${stamp}.txt`, { type: "text/plain" }));
+  }
+  /**
+   * How long a pasted string has to be before it becomes a file, or `null` to
+   * leave every paste in the composer.
+   *
+   * One attribute with three answers rather than three attributes: absent is
+   * the default, `off` refuses, and a number states the threshold. A value that
+   * is neither says so, because a typo silently meaning "off" is the failure
+   * this whole release keeps finding.
+   */
+  #pasteAttachThreshold() {
+    const raw = this.getAttribute("data-paste-attach");
+    if (raw === null) {
+      return PASTE_ATTACH_CHARS;
+    }
+    if (raw === "off") {
+      return null;
+    }
+    const stated = Number.parseInt(raw, 10);
+    if (Number.isNaN(stated) || stated <= 0) {
+      console.warn(
+        `<ag-ui-chat>: data-paste-attach="${raw}" is neither "off" nor a positive number of characters, so the default of ${PASTE_ATTACH_CHARS} is used.`
+      );
+      return PASTE_ATTACH_CHARS;
+    }
+    return stated;
+  }
   /**
    * Accept files pasted into the composer.
    *
@@ -12110,7 +13332,7 @@ ${quoted}`;
    * clipboard, and swallowing the words someone meant to paste in order to
    * attach a picture they did not is the worse of the two failures.
    */
-  #enablePaste() {
+  #enablePaste(tray) {
     this.#chat.addEventListener("paste", (event) => {
       const clipboard = event.clipboardData ?? null;
       if (clipboard === null) {
@@ -12118,6 +13340,7 @@ ${quoted}`;
       }
       const files = Array.from(clipboard.files);
       if (files.length === 0) {
+        this.#pasteLongTextAsFile(event, clipboard, tray);
         return;
       }
       if (clipboard.getData("text/plain") === "") {
@@ -12278,7 +13501,13 @@ ${quoted}`;
    * per-tab, and emit a {@link TOGGLE_EVENT} so a host can mirror the state in
    * its own chrome.
    */
-  setCollapsed(collapsed) {
+  setCollapsed(collapsed, options = {}) {
+    if (collapsed && !this.#collapsible()) {
+      return;
+    }
+    if (options.announce === true && collapsed && !this.collapsed) {
+      this.#announceSurfaceChange(this.#strings.chatMinimised, null);
+    }
     if (!collapsed) {
       this.#restoreLauncherPosition();
     }
@@ -12306,6 +13535,167 @@ ${quoted}`;
   get unread() {
     return this.#unread;
   }
+  /**
+   * Whether to mount collapsed.
+   *
+   * A stored choice always wins -- in either direction, so a user who opened
+   * the panel finds it open. With nothing stored, the corner placements start
+   * collapsed: they are the two that have a launcher, and a launcher is the
+   * resting state of every corner chat in the field. Mounting open put a
+   * 380x560 panel over the host page's own bottom-right corner on a visitor's
+   * first load, uninvited.
+   *
+   * The placements that place themselves are unchanged. A host that docks a
+   * sidebar has already decided the widget belongs on screen, and one that
+   * embeds it in its own layout has given it a box to fill.
+   *
+   * `data-start-open` restores the previous behaviour for a host that wants
+   * the panel up immediately.
+   */
+  #startsCollapsed() {
+    const stored = this.#readScopedItem(COLLAPSED_KEY);
+    if (stored !== null) {
+      return stored === "1";
+    }
+    return DRAGGABLE_PLACEMENTS.has(this.getAttribute("placement")) && !this.hasAttribute("data-start-open");
+  }
+  /**
+   * Whether this placement has a collapsed state at all.
+   *
+   * `page` does not. It is a dedicated route rather than a panel sitting on
+   * someone else's page, so there is no "away" for it to go to: collapsing it
+   * left a strip of application chrome fixed over a route that no longer had an
+   * owner. It is also the placement that hides the launcher, so the usual way
+   * back does not exist here.
+   *
+   * The header hides its collapse control under this placement, but a control
+   * removed from the UI is not a state removed from the model -- the property,
+   * the attribute and a value restored from storage all still reach it. This is
+   * what the reachable paths are gated on; the stylesheet covers the one path
+   * that never passes through here, an attribute written straight onto the
+   * element.
+   */
+  #collapsible() {
+    return this.getAttribute("placement") !== "page";
+  }
+  /**
+   * Describe the panel to whoever is asking -- in practice the agent, through
+   * the opt-in chat-surface tools.
+   *
+   * `movable` folds two separate reasons into the one answer a caller needs:
+   * a placement that places itself owns its position, and a panel that fills
+   * the screen has nowhere to go. Reporting them apart would make every caller
+   * re-derive the same conjunction.
+   */
+  describeSurface() {
+    const box = this.getBoundingClientRect();
+    const viewport = this.#viewport();
+    const fullBleed = box.width >= viewport.width - 1 && box.height >= viewport.height - 1;
+    return {
+      placement: this.getAttribute("placement"),
+      collapsed: this.collapsed,
+      collapsible: this.#collapsible(),
+      movable: this.#launcherDraggable() && !fullBleed,
+      draggable: this.#launcherDraggable(),
+      fullBleed,
+      box: {
+        left: Math.round(box.left),
+        top: Math.round(box.top),
+        width: Math.round(box.width),
+        height: Math.round(box.height)
+      },
+      viewport: {
+        left: Math.round(viewport.left),
+        top: Math.round(viewport.top),
+        width: Math.round(viewport.width),
+        height: Math.round(viewport.height)
+      }
+    };
+  }
+  /**
+   * Send the panel to a corner, and report whether it went.
+   *
+   * A third claimant on the axes a placement and a user drag already share, and
+   * it takes them the same way the drag does rather than inventing a second
+   * mechanism: the same commit path, so the launcher travels with the panel,
+   * the corner it opens from is re-picked, and switching placement hands
+   * everything back. What it must not do is claim a move it did not make --
+   * hence the boolean, and hence {@link describeSurface} existing so a caller
+   * can ask first.
+   */
+  moveTo(corner, options = {}) {
+    if (!this.#launcherDraggable()) {
+      return false;
+    }
+    const restore = options.announce === true ? this.#captureGeometry() : null;
+    const viewport = this.#viewport();
+    const box = this.getBoundingClientRect();
+    if (box.width >= viewport.width - 1 && box.height >= viewport.height - 1) {
+      return false;
+    }
+    const [edgeY, edgeX] = corner.split("-");
+    const nearX = viewport.left + EDGE_MARGIN;
+    const nearY = viewport.top + EDGE_MARGIN;
+    const left = edgeX === "left" ? nearX : Math.max(nearX, viewport.left + viewport.width - EDGE_MARGIN - box.width);
+    const top = edgeY === "top" ? nearY : Math.max(nearY, viewport.top + viewport.height - EDGE_MARGIN - box.height);
+    const host = { left, top, right: left + box.width, bottom: top + box.height };
+    const launcherWidth = this.#launcher.offsetWidth;
+    const launcherHeight = this.#launcher.offsetHeight;
+    this.#placePanelAndLauncher(host, {
+      left: edgeX === "left" ? host.left : host.right - launcherWidth,
+      top: edgeY === "top" ? host.top : host.bottom - launcherHeight,
+      width: launcherWidth,
+      height: launcherHeight
+    });
+    this.#storeLauncherPosition();
+    if (restore !== null) {
+      this.#announceSurfaceChange(this.#strings.chatMoved, restore);
+    }
+    return true;
+  }
+  /**
+   * Snapshot the panel's stated position, and return a function that puts it
+   * back.
+   *
+   * Both insets and the expand corner, because they are one decision: the
+   * corner is what the panel grows from, so restoring a position without it
+   * puts the box back and animates it out of the wrong side. Absent values are
+   * captured as absent and removed on the way back, rather than written as
+   * empty strings that would outrank the placement.
+   */
+  #captureGeometry() {
+    const inset2 = this.style.getPropertyValue("--ag-ui-inset");
+    const launcherInset = this.style.getPropertyValue("--ag-ui-launcher-inset");
+    const corner = this.getAttribute("data-expand-corner");
+    const launcherPos = this.#launcherPos;
+    const panelPos = this.#panelPos;
+    const expandCorner = this.#expandCorner;
+    return () => {
+      const put = (name, value) => {
+        if (value === "") {
+          this.style.removeProperty(name);
+        } else {
+          this.style.setProperty(name, value);
+        }
+      };
+      put("--ag-ui-inset", inset2);
+      put("--ag-ui-launcher-inset", launcherInset);
+      if (corner === null) {
+        this.removeAttribute("data-expand-corner");
+      } else {
+        this.setAttribute("data-expand-corner", corner);
+      }
+      this.#launcherPos = launcherPos;
+      this.#panelPos = panelPos;
+      this.#expandCorner = expandCorner;
+      if (launcherPos === null) {
+        this.#clearPreference(LAUNCHER_KEY);
+      } else {
+        this.#storeLauncherPosition();
+      }
+      this.#syncResizeAnchor();
+    };
+  }
   /** Flip the collapsed state. Bound to the built-in header toggle. */
   toggleCollapsed() {
     this.setCollapsed(!this.collapsed);
@@ -12319,7 +13709,7 @@ ${quoted}`;
   toggleTheme() {
     const next = this.getAttribute("theme") === "dark" ? "light" : "dark";
     this.setAttribute("theme", next);
-    writeStoredItem(this.#storageKey(THEME_KEY), next);
+    this.#writePreference(THEME_KEY, next);
     this.#syncThemeGlyph();
   }
   /**
@@ -12447,9 +13837,81 @@ ${quoted}`;
   #launcherDraggable() {
     return this.getAttribute("data-launcher-drag") !== "false" && DRAGGABLE_PLACEMENTS.has(this.getAttribute("placement"));
   }
-  /** The viewport the launcher and the panel both have to fit inside. */
+  /**
+   * The viewport the launcher and the panel both have to fit inside.
+   *
+   * The *visual* viewport, not the layout one, because they come apart exactly
+   * when this matters. An on-screen keyboard shrinks the visual viewport and
+   * leaves the layout viewport alone, so clamping against `innerHeight` parks
+   * the launcher behind the keyboard and decides which corner to open into
+   * using space that is not on the screen. Pinch-zoom does the same on both
+   * axes.
+   *
+   * Falls back where the API is absent, which keeps this working in the
+   * happy-dom project as well as in an old browser.
+   */
   #viewport() {
-    return { width: window.innerWidth, height: window.innerHeight };
+    const visual = window.visualViewport;
+    const width = visual?.width ?? window.innerWidth;
+    const height = visual?.height ?? window.innerHeight;
+    const style = getComputedStyle(this.#viewportProbe);
+    const edge = (name) => {
+      const value = Number.parseFloat(style.getPropertyValue(name));
+      return Number.isFinite(value) ? value : 0;
+    };
+    const left = edge("padding-left");
+    const top = edge("padding-top");
+    return {
+      left,
+      top,
+      width: Math.max(0, width - left - edge("padding-right")),
+      height: Math.max(0, height - top - edge("padding-bottom"))
+    };
+  }
+  /**
+   * The whole viewport, before anything the host reserved is taken out of it.
+   *
+   * Distinct from {@link #viewport} on purpose, and the two must not be
+   * swapped. The usable box decides where the widget may rest; this is what a
+   * CSS `inset` on a fixed element is measured from, because that is what the
+   * browser measures it from.
+   */
+  #screen() {
+    const root = document.documentElement;
+    return {
+      width: root.clientWidth || window.innerWidth,
+      height: root.clientHeight || window.innerHeight
+    };
+  }
+  /**
+   * Publish the measured viewport height so the stylesheet can size a
+   * full-bleed panel to what the user can see.
+   *
+   * No CSS length carries this. An on-screen keyboard has no effect on any
+   * viewport-percentage unit, so a panel sized from `100dvh` puts its composer
+   * behind the keyboard being typed into. Written inline, and read through a
+   * token the host's own `--ag-ui-viewport-height` still outranks.
+   *
+   * Removed rather than frozen when the two viewports agree, so a desktop that
+   * never diverges carries no inline override at all and the declared fallback
+   * stays in charge.
+   */
+  #publishVisualViewport() {
+    const visual = window.visualViewport;
+    if (visual === null || visual === void 0) {
+      return;
+    }
+    if (Math.abs(visual.height - window.innerHeight) < 1) {
+      this.style.removeProperty("--ag-ui-visual-viewport-height");
+      this.style.removeProperty("--ag-ui-visual-viewport-inset-bottom");
+      return;
+    }
+    this.style.setProperty("--ag-ui-visual-viewport-height", `${Math.round(visual.height)}px`);
+    const hidden = window.innerHeight - visual.height - visual.offsetTop;
+    this.style.setProperty(
+      "--ag-ui-visual-viewport-inset-bottom",
+      `${Math.max(0, Math.round(hidden))}px`
+    );
   }
   /**
    * The launcher's box in viewport coordinates, with its transform divided out.
@@ -12493,11 +13955,13 @@ ${quoted}`;
       return;
     }
     this.#launcherPos = at2;
+    this.#panelPos = null;
     const panel = this.getBoundingClientRect();
     const placement = launcherPlacement(
       this.#launcherBox(),
       { width: panel.width, height: panel.height },
-      this.#viewport()
+      this.#viewport(),
+      this.#screen()
     );
     this.style.setProperty("--ag-ui-inset", placement.hostInset);
     this.style.setProperty("--ag-ui-launcher-inset", placement.launcherInset);
@@ -12514,13 +13978,141 @@ ${quoted}`;
     this.#moveLauncher(left, top);
     this.#storeLauncherPosition();
   }
-  /** Write the current launcher position, if this element owns one. */
+  /**
+   * Move the panel live during a header drag, without persisting.
+   *
+   * Only the host box is written, and that is the whole trick: the launcher is
+   * positioned *inside* that box, so leaving its own inset alone carries it
+   * along by exactly the distance the panel travelled -- which is what a person
+   * dragging a window expects of the thing it collapses into. Placing it on the
+   * panel's pinned corner instead, as an earlier version did, sent it leaping
+   * across the panel the moment the drag re-picked that corner.
+   *
+   * The corner is therefore held for the length of the gesture. Both insets are
+   * measured from it, and rewriting one of them from a new corner while the
+   * other still names the old one would move the launcher for no reason.
+   */
+  #movePanel(box, from) {
+    if (!this.#launcherDraggable()) {
+      return { held: box, launcher: null };
+    }
+    if (this.#launcherPos === null) {
+      const resting = this.#launcherBox();
+      this.#launcherPos = { left: resting.left, top: resting.top };
+    }
+    const start = this.#launcherPos;
+    const held = clampPanel(box, this.#viewport(), SCREEN_EDGE_MARGIN);
+    const corner = this.#expandCorner ?? this.#anchor;
+    const screen = this.#screen();
+    this.style.setProperty(
+      "--ag-ui-inset",
+      [
+        corner.y === "top" ? `${Math.round(held.top)}px` : "auto",
+        corner.x === "right" ? `${Math.round(screen.width - held.right)}px` : "auto",
+        corner.y === "bottom" ? `${Math.round(screen.height - held.bottom)}px` : "auto",
+        corner.x === "left" ? `${Math.round(held.left)}px` : "auto"
+      ].join(" ")
+    );
+    this.#panelPos = { left: held.left, top: held.top };
+    const carried = {
+      ...this.#launcherBox(),
+      left: start.left + (held.left - from.left),
+      top: start.top + (held.top - from.top)
+    };
+    const launcher = { ...carried, ...clampLauncher(carried, this.#viewport()) };
+    this.style.setProperty(
+      "--ag-ui-launcher-inset",
+      placeWidget(held, launcher, corner, this.#screen()).launcherInset
+    );
+    return { held, launcher };
+  }
+  /**
+   * Finish a header drag: settle where both halves ended up, and remember it.
+   *
+   * The launcher travels the distance the panel actually travelled, which is
+   * the clamped distance rather than the pointer's -- a panel held against the
+   * viewport margin stops, and so does the bubble attached to it. Measured from
+   * the box the press started on, so a long drag cannot accumulate the rounding
+   * each move writes into the inset.
+   *
+   * Only now is the corner re-picked, from where the launcher has ended up, so
+   * the panel opens into clear space next time. Re-picking it moves nothing:
+   * both insets are rewritten from positions that are already decided.
+   */
+  #commitPanel(box, from) {
+    const { held, launcher } = this.#movePanel(box, from);
+    if (launcher === null) {
+      return;
+    }
+    this.#placePanelAndLauncher(held, launcher);
+    this.#storeLauncherPosition();
+  }
+  /**
+   * Write both insets for a panel and launcher that are already positioned,
+   * re-picking the corner they are measured from.
+   */
+  #placePanelAndLauncher(host, launcher) {
+    const viewport = this.#viewport();
+    const screen = this.#screen();
+    const size = { width: host.right - host.left, height: host.bottom - host.top };
+    const { corner } = launcherPlacement(launcher, size, viewport, screen);
+    const insets = placeWidget(host, launcher, corner, screen);
+    this.style.setProperty("--ag-ui-inset", insets.hostInset);
+    this.style.setProperty("--ag-ui-launcher-inset", insets.launcherInset);
+    this.#launcherPos = { left: launcher.left, top: launcher.top };
+    this.#panelPos = { left: host.left, top: host.top };
+    this.#expandCorner = corner;
+    this.setAttribute("data-expand-corner", `${corner.y}-${corner.x}`);
+    this.#syncResizeAnchor();
+  }
+  /**
+   * Re-apply a panel position the user stated, against the current viewport.
+   *
+   * The launcher keeps its offset from the panel through the clamp -- it was
+   * put where it is relative to the panel, and a viewport that has since shrunk
+   * is no reason to move one without the other -- and is then held on screen in
+   * its own right.
+   */
+  #restorePanelPosition(at2) {
+    if (!this.#launcherDraggable()) {
+      return;
+    }
+    const rect = this.getBoundingClientRect();
+    const held = clampPanel(
+      { left: at2.left, top: at2.top, right: at2.left + rect.width, bottom: at2.top + rect.height },
+      this.#viewport(),
+      SCREEN_EDGE_MARGIN
+    );
+    const launcher = this.#launcherBox();
+    const carried = {
+      ...launcher,
+      left: launcher.left + (held.left - at2.left),
+      top: launcher.top + (held.top - at2.top)
+    };
+    this.#placePanelAndLauncher(held, {
+      ...carried,
+      ...clampLauncher(carried, this.#viewport())
+    });
+  }
+  /**
+   * Write the current position, if this element owns one.
+   *
+   * The panel's own position rides along only when the user stated it, because
+   * its presence is what tells a restore which of the two gestures to honour:
+   * with it, the panel goes back where it was put; without it, the panel is
+   * re-derived from the launcher and opens into whatever room the viewport has
+   * now.
+   */
   #storeLauncherPosition() {
     const position = this.#launcherPos;
     if (position === null) {
       return;
     }
-    writeStoredItem(this.#storageKey(LAUNCHER_KEY), JSON.stringify(position));
+    const panel = this.#panelPos;
+    this.#writePreference(
+      LAUNCHER_KEY,
+      JSON.stringify(panel === null ? position : { ...position, panel })
+    );
   }
   /**
    * Re-apply the dragged position against the current viewport: on connect,
@@ -12529,18 +14121,25 @@ ${quoted}`;
    * unreachable -- it is the only way back to a collapsed conversation.
    */
   #restoreLauncherPosition() {
-    const stored = this.#launcherPos ?? this.#readLauncherPosition();
-    if (stored === null) {
+    const stored = this.#readLauncherPosition();
+    const launcher = this.#launcherPos ?? stored;
+    if (launcher === null) {
+      return;
+    }
+    const panel = this.#panelPos ?? stored?.panel ?? null;
+    if (panel !== null) {
+      this.#launcherPos = { left: launcher.left, top: launcher.top };
+      this.#restorePanelPosition(panel);
       return;
     }
     const box = this.#launcherBox();
     this.#applyLauncherPlacement(
-      clampLauncher({ ...box, left: stored.left, top: stored.top }, this.#viewport())
+      clampLauncher({ ...box, left: launcher.left, top: launcher.top }, this.#viewport())
     );
   }
-  /** The persisted launcher position for this instance, or null. */
+  /** The persisted position for this instance, or null. */
   #readLauncherPosition() {
-    const raw = this.#readScopedItem(LAUNCHER_KEY);
+    const raw = this.#readPreference(LAUNCHER_KEY);
     if (raw === null) {
       return null;
     }
@@ -12549,8 +14148,12 @@ ${quoted}`;
       if (typeof parsed !== "object" || parsed === null) {
         return null;
       }
-      const { left, top } = parsed;
-      return typeof left === "number" && typeof top === "number" ? { left, top } : null;
+      const { left, top, panel } = parsed;
+      if (typeof left !== "number" || typeof top !== "number") {
+        return null;
+      }
+      const at2 = asPoint(panel);
+      return at2 === null ? { left, top } : { left, top, panel: at2 };
     } catch {
       return null;
     }
@@ -12565,6 +14168,7 @@ ${quoted}`;
       return;
     }
     this.#launcherPos = null;
+    this.#panelPos = null;
     this.#expandCorner = null;
     this.style.removeProperty("--ag-ui-inset");
     this.style.removeProperty("--ag-ui-launcher-inset");
@@ -12585,19 +14189,20 @@ ${quoted}`;
    * drags the edge it was holding.
    */
   #applyResize(grip, box) {
+    box = this.#withinViewport(box);
     this.#applySize({ width: box.right - box.left, height: box.bottom - box.top });
     if (grip.x !== this.#anchor.x && grip.y !== this.#anchor.y) {
-      return;
+      return box;
     }
-    const viewport = this.#viewport();
+    const screen = this.#screen();
     const anchor = this.#anchor;
     const side = (value) => `${Math.round(value)}px`;
     this.style.setProperty(
       "--ag-ui-inset",
       [
         anchor.y === "top" ? side(box.top) : "auto",
-        anchor.x === "right" ? side(viewport.width - box.right) : "auto",
-        anchor.y === "bottom" ? side(viewport.height - box.bottom) : "auto",
+        anchor.x === "right" ? side(screen.width - box.right) : "auto",
+        anchor.y === "bottom" ? side(screen.height - box.bottom) : "auto",
         anchor.x === "left" ? side(box.left) : "auto"
       ].join(" ")
     );
@@ -12608,11 +14213,15 @@ ${quoted}`;
         top: anchor.y === "top" ? box.top : box.bottom - size
       };
     }
+    if (this.#panelPos !== null) {
+      this.#panelPos = { left: box.left, top: box.top };
+    }
+    return box;
   }
   /** Finish a resize: keep the box, remember it, and re-read the pinned edges. */
   #commitResize(grip, box) {
-    this.#applyResize(grip, box);
-    this.#persistSize({ width: box.right - box.left, height: box.bottom - box.top });
+    const held = this.#applyResize(grip, box);
+    this.#persistSize({ width: held.right - held.left, height: held.bottom - held.top });
     this.#storeLauncherPosition();
     this.#syncResizeAnchor();
   }
@@ -12639,11 +14248,11 @@ ${quoted}`;
   /** Persist a dragged size per tab, alongside the collapsed/theme preferences. */
   #persistSize(size) {
     const stored = { ...this.#readSize(), ...size };
-    writeStoredItem(this.#storageKey(SIZE_KEY), JSON.stringify(stored));
+    this.#writePreference(SIZE_KEY, JSON.stringify(stored));
   }
   /** The persisted size for this instance, or an empty record. */
   #readSize() {
-    const raw = this.#readScopedItem(SIZE_KEY);
+    const raw = this.#readPreference(SIZE_KEY);
     if (raw === null) {
       return {};
     }
@@ -12770,10 +14379,81 @@ ${quoted}`;
     }
     return sessionStorage.getItem(base);
   }
+  /**
+   * Read a layout preference: where the widget sits, how big it is, which
+   * theme it wears.
+   *
+   * These live in `localStorage` rather than beside the transcript, because a
+   * layout preference is not a conversation. The transcript is deliberately
+   * per-tab -- two tabs are two conversations, and closing the tab ends it --
+   * and everything else inherited that scoping without earning it. A user who
+   * dragged the panel clear of their own UI did it again in the next tab, and
+   * again after every restart.
+   *
+   * Whether the widget is *currently open* stays per-tab with the transcript.
+   * It is a statement about this tab rather than a preference: carrying it
+   * across would pop the panel open on every new tab because it was opened
+   * once, somewhere else.
+   *
+   * Falls back to the session value it used to be written to, so an existing
+   * position survives the upgrade rather than resetting once.
+   */
+  #readPreference(base) {
+    try {
+      const stored = localStorage.getItem(this.#storageKey(base));
+      if (stored !== null) {
+        return stored;
+      }
+    } catch {
+    }
+    return this.#readScopedItem(base);
+  }
+  /**
+   * Persist a layout preference as durably as this browser allows: to
+   * `localStorage` so it outlives the tab, and to the per-tab store as well.
+   *
+   * The second write is not redundancy for its own sake. A privacy mode can
+   * deny `localStorage` while allowing `sessionStorage`, and losing the
+   * durable copy should degrade to the per-tab behaviour this replaced rather
+   * than to no persistence at all. The read above prefers the durable copy, so
+   * a tab that has both cannot be shadowed by its own stale one.
+   *
+   * Neither write is worth an exception. Losing where the panel sat is not
+   * worth a warning either -- unlike the transcript, which says so once,
+   * because losing that loses the conversation on the next reload.
+   */
+  #writePreference(base, value) {
+    const key = this.#storageKey(base);
+    try {
+      localStorage.setItem(key, value);
+    } catch {
+    }
+    writeStoredItem(key, value);
+  }
+  /**
+   * Drop a layout preference from both stores.
+   *
+   * The mirror of {@link AgUiChat.#writePreference}, and it has to clear both
+   * for the same reason that writes both: leaving either copy behind means the
+   * value comes back on the next read.
+   */
+  #clearPreference(base) {
+    const key = this.#storageKey(base);
+    try {
+      localStorage.removeItem(key);
+    } catch {
+    }
+    try {
+      sessionStorage.removeItem(key);
+    } catch {
+    }
+  }
   /** Reflect the current theme on the toggle: show the destination's glyph. */
   #syncThemeGlyph() {
     const dark = this.getAttribute("theme") === "dark";
-    this.#themeToggle.textContent = dark ? "\u2600\uFE0F" : "\u{1F319}";
+    this.#themeToggle.replaceChildren(
+      this.#iconElement("theme", "theme-icon", dark ? ICON_SUN : ICON_MOON, null)
+    );
   }
   /**
    * Open the thread-history drawer: the imperative route to the control that
@@ -12787,7 +14467,37 @@ ${quoted}`;
   openThreads() {
     this.#checkpoints.close();
     void this.#refreshDrawer();
+    this.#drawer.setModal(!this.#threadsDock());
     this.#drawer.open();
+    this.#syncThreadsState();
+  }
+  /**
+   * Whether the conversation list docks beside the transcript rather than
+   * covering it.
+   *
+   * Only the full-page placement, and only where there is room. A dedicated
+   * route is the one surface with width to spare -- everywhere else the panel
+   * is a few hundred pixels wide, and a list docked into that leaves a column
+   * of transcript too narrow to read. The width is the panel's own rather than
+   * the window's, because an embedded host can give a full-page-sized box to
+   * something that is not a page.
+   */
+  #threadsDock() {
+    return this.getAttribute("placement") === "page" && this.getBoundingClientRect().width >= THREADS_DOCK_MIN_WIDTH;
+  }
+  /**
+   * Stamp whether the list is showing, and how.
+   *
+   * On the host rather than inside the shell because the transcript has to move
+   * over for a docked list, and the drawer is the last child of the panel -- CSS
+   * cannot select backwards from it to the rows it needs to shift.
+   */
+  #syncThreadsState() {
+    if (this.#drawer.isOpen() && this.#threadsDock()) {
+      this.setAttribute("data-threads-docked", "");
+    } else {
+      this.removeAttribute("data-threads-docked");
+    }
   }
   /**
    * Open the checkpoints panel (the `::part(checkpoints-button)` route).
@@ -12801,6 +14511,16 @@ ${quoted}`;
     void this.#refreshCheckpoints();
     this.#checkpoints.open();
   }
+  /**
+   * Close the conversation list, if it is open.
+   *
+   * No state sync here: the drawer reports every close through `onVisibility`,
+   * including the four that never reach this method, and doing it twice would
+   * be a second place to keep right.
+   */
+  closeThreads() {
+    this.#drawer.close();
+  }
   /** Close the checkpoints panel, if it is open. */
   closeCheckpoints() {
     this.#checkpoints.close();
@@ -12841,6 +14561,8 @@ ${quoted}`;
     this.#client = null;
     this.#clearTranscript();
     this.#initialMessages = [];
+    this.#sentDrafts.length = 0;
+    this.#recallIndex = null;
   }
   /**
    * Wipe the rendered transcript and everything that indexes into it.
@@ -13174,6 +14896,12 @@ ${quoted}`;
     }
     controls.append(collapse2);
     header.append(title, headerActions, controls);
+    enablePanelDrag(header, {
+      enabled: () => !this.collapsed && this.#launcherDraggable(),
+      rect: () => this.getBoundingClientRect(),
+      apply: (box, from) => this.#movePanel(box, from),
+      commit: (box, from) => this.#commitPanel(box, from)
+    });
     this.#messages.className = "messages";
     this.#messages.setAttribute("part", "messages");
     this.#messages.setAttribute("role", "log");
@@ -13216,7 +14944,16 @@ ${quoted}`;
     this.#emptyWrap.setAttribute("part", "empty");
     const emptySlot = document.createElement("slot");
     emptySlot.name = "empty";
+    const starters = this.#starterChips();
+    if (starters !== null) {
+      emptySlot.append(starters);
+    }
     this.#emptyWrap.append(emptySlot);
+    this.#queuedRow.className = "queued";
+    this.#queuedRow.setAttribute("part", "queued");
+    this.#queuedRow.setAttribute("role", "group");
+    this.#queuedRow.setAttribute("aria-label", this.#strings.queued);
+    this.#queuedRow.hidden = true;
     this.#messages.append(this.#emptyWrap);
     const inputRow = document.createElement("div");
     inputRow.className = "input-row";
@@ -13282,6 +15019,7 @@ ${quoted}`;
       this.#skillsMenu.palette,
       this.#skillsMenu.chips,
       this.#skillHint,
+      this.#queuedRow,
       this.#attachSlot,
       inputRow,
       footer,
@@ -13306,8 +15044,13 @@ ${quoted}`;
     this.#badge.setAttribute("part", "launcher-badge");
     this.#badge.setAttribute("aria-hidden", "true");
     this.#badge.hidden = true;
+    this.#railLabel.className = "rail-label";
+    this.#railLabel.setAttribute("part", "rail-label");
+    this.#railLabel.setAttribute("aria-hidden", "true");
+    this.#railLabel.textContent = this.getAttribute("title-text") ?? this.#strings.title;
     this.#launcher.append(
       this.#iconElement("launcher", "launcher-icon", ICON_LAUNCHER, this.#launcherIconUrl()),
+      this.#railLabel,
       this.#badge
     );
     this.#launcher.addEventListener("click", () => this.setCollapsed(false));
@@ -13333,7 +15076,9 @@ ${quoted}`;
     }
     this.#focusableGrip();
     this.#adoptStyles();
-    this.#root.append(this.#announcer, this.#chat, this.#launcher);
+    this.#viewportProbe.className = "viewport-probe";
+    this.#viewportProbe.setAttribute("aria-hidden", "true");
+    this.#root.append(this.#viewportProbe, this.#announcer, this.#chat, this.#launcher);
   }
   /**
    * Attach the stylesheet without an inline `<style>` element.
@@ -13512,6 +15257,37 @@ ${quoted}`;
     this.#setUnread(this.#unread + 1);
   }
   /** Hide the empty-state region once the message list holds anything else. */
+  /**
+   * The prompts offered on an empty transcript, from `data-starters`.
+   *
+   * Different from the suggestion chips a run pushes, which are follow-ups to
+   * something already said. These answer the blank-page question instead, and
+   * they are the host's rather than the model's -- only the host knows what its
+   * page is for. Shares the renderer, the count and the length limit, because
+   * two rows of prompt chips that behaved differently would be the harder
+   * thing to explain.
+   *
+   * Read once at connect: it is content for a state the widget is in before
+   * anything happens, and a host that wants it to change has `slot="empty"`.
+   */
+  #starterChips() {
+    const raw = this.getAttribute("data-starters");
+    if (raw === null) {
+      return null;
+    }
+    let parsed;
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      console.warn(
+        `<ag-ui-chat>: data-starters is not valid JSON, so no starters are shown. It takes an array of strings, e.g. data-starters='["Summarise this page"]'.`
+      );
+      return null;
+    }
+    return renderSuggestionChips({ prompts: parsed }, this.#strings, (prompt) => {
+      void this.sendMessage(prompt);
+    });
+  }
   #updateEmptyState() {
     this.#emptyWrap.hidden = this.#messages.childElementCount > 1;
   }
@@ -13520,6 +15296,7 @@ ${quoted}`;
     this.#skillsMenu.onInput(this.#input.value);
     this.#skillHint.hidden = true;
     this.#autoGrow();
+    this.#recallIndex = null;
   }
   #onKeydown(event) {
     if (this.#skillsMenu.onKeydown(event)) {
@@ -13534,7 +15311,44 @@ ${quoted}`;
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
       void this.#submit();
+      return;
+    }
+    this.#recallHistory(event);
+  }
+  /**
+   * Walk back through what the user has already sent, on the arrow keys.
+   *
+   * Only from an empty composer, and only with the palette closed -- which the
+   * caller has already established, since the palette consumes arrows while it
+   * is open. Both conditions matter: arrows inside text are how you move the
+   * caret, and taking them would break editing to add a shortcut.
+   *
+   * The drafts are the user's own turns in this conversation, newest first,
+   * which is what every shell and every coding agent means by this. Arrowing
+   * forward past the newest empties the composer again rather than sticking on
+   * it, so the way out is the same key that got you in.
+   */
+  #recallHistory(event) {
+    const back = event.key === "ArrowUp";
+    if (!back && event.key !== "ArrowDown" || this.#skillsMenu.isOpen()) {
+      return;
+    }
+    const drafts = this.#sentDrafts;
+    if (drafts.length === 0) {
+      return;
+    }
+    if (this.#recallIndex === null && (!back || this.#input.value !== "")) {
+      return;
     }
+    const next = this.#recallIndex === null ? 0 : this.#recallIndex + (back ? 1 : -1);
+    if (next >= drafts.length) {
+      return;
+    }
+    event.preventDefault();
+    this.#recallIndex = next < 0 ? null : next;
+    this.#input.value = next < 0 ? "" : drafts[next];
+    this.#input.setSelectionRange(this.#input.value.length, this.#input.value.length);
+    this.#autoGrow();
   }
   /**
    * Stop the in-flight run: decline any confirmation card awaiting a decision
@@ -13543,6 +15357,13 @@ ${quoted}`;
    * observes the disconnect).
    */
   #cancelRun() {
+    for (const text4 of this.#queued) {
+      if (this.#sentDrafts[0] !== text4) {
+        this.#sentDrafts.unshift(text4);
+      }
+    }
+    this.#queued.length = 0;
+    this.#renderQueued();
     this.#confirmAbort?.abort();
     this.#client?.cancel();
   }
@@ -13554,11 +15375,54 @@ ${quoted}`;
    * that it carries no text.
    */
   #setRunning(running) {
+    const settled = this.#running && !running;
     this.#running = running;
     const label = running ? this.#strings.stop : this.#strings.send;
     this.#send.title = label;
     this.#send.setAttribute("aria-label", label);
     this.#send.dataset["state"] = running ? "running" : "idle";
+    if (settled) {
+      this.#flushQueued();
+    }
+  }
+  /**
+   * Send the next message that was typed while the run was going.
+   *
+   * One at a time, through the same path as anything else: each queued turn
+   * starts a run of its own, and the next is sent when *that* one settles. Any
+   * other shape would be a second sender racing the guard above.
+   */
+  #flushQueued() {
+    const next = this.#queued.shift();
+    this.#renderQueued();
+    if (next !== void 0) {
+      void this.sendMessage(next);
+    }
+  }
+  /**
+   * Draw what is waiting, as chips that can be taken back.
+   *
+   * Visible and removable, because a message the user typed and cannot see is
+   * a message they will type again -- and one they changed their mind about
+   * has to be retractable before it is sent on their behalf.
+   */
+  #renderQueued() {
+    this.#queuedRow.replaceChildren();
+    this.#queuedRow.hidden = this.#queued.length === 0;
+    for (const [index, text4] of this.#queued.entries()) {
+      const chip = document.createElement("button");
+      chip.type = "button";
+      chip.className = "queued-chip";
+      chip.setAttribute("part", "queued-chip");
+      chip.textContent = text4;
+      chip.title = this.#strings.removeQueued.replace("{text}", text4);
+      chip.setAttribute("aria-label", chip.title);
+      chip.addEventListener("click", () => {
+        this.#queued.splice(index, 1);
+        this.#renderQueued();
+      });
+      this.#queuedRow.appendChild(chip);
+    }
   }
   /**
    * Size the field to its content: one row when empty, growing with what is
@@ -13573,14 +15437,24 @@ ${quoted}`;
     this.#input.style.height = `${this.#input.scrollHeight}px`;
   }
   async #submit() {
-    if (this.#running) {
-      return;
-    }
     const content = this.#input.value.trim();
     const attachments = this.#attachTray?.readyRefs() ?? [];
     if (content === "" && attachments.length === 0) {
       return;
     }
+    if (this.#running) {
+      if (content !== "") {
+        this.#queued.push(content);
+        this.#renderQueued();
+        this.#input.value = "";
+        this.#autoGrow();
+      }
+      return;
+    }
+    if (content !== "" && this.#sentDrafts[0] !== content) {
+      this.#sentDrafts.unshift(content);
+    }
+    this.#recallIndex = null;
     this.#input.value = "";
     this.#autoGrow();
     if (this.#attachTray?.hasPending() === true) {
@@ -14366,11 +16240,33 @@ ${quoted}`;
     this.#appendNotice("\u2728", this.#strings.usingSkill.replace("{name}", skill), "skill");
     return true;
   }
-  #appendNotice(icon, text4, kind) {
-    this.#ensureGroup().appendChild(renderRunNotice(icon, text4, kind));
+  /**
+   * An inline notice about something the run did.
+   *
+   * `undo` is offered only where the agent rearranged the user's own window --
+   * see {@link renderRunNotice} for why a notice may carry that one control and
+   * nothing else.
+   */
+  #appendNotice(icon, text4, kind, undo) {
+    this.#ensureGroup().appendChild(renderRunNotice(icon, text4, kind, undo));
     this.#updateEmptyState();
     this.#scroller.follow();
   }
+  /**
+   * Say that the agent rearranged the user's window, and offer the way back.
+   *
+   * Only on the agent's path. A host calling {@link moveTo} is arranging its
+   * own page and does not need telling what it just did; an agent doing it
+   * mid-conversation is the case where a panel appears to move on its own.
+   */
+  #announceSurfaceChange(text4, undo) {
+    this.#appendNotice(
+      "\u2922",
+      text4,
+      "surface",
+      undo === null ? void 0 : { label: this.#strings.undo, onActivate: undo }
+    );
+  }
   /**
    * Turn on chart rendering, by whichever route this consumer wants.
    *
@@ -14643,13 +16539,14 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.33.1";
+var VERSION = "0.35.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
   AgUiClient,
   CHART_ACTIVITY_TYPE,
   CHART_TOOL_NAME,
+  CHAT_CORNERS,
   COMPACTION_ACTIVITY_TYPE,
   CUSTOM_AGENT_EVENT,
   CheckpointMenu,
@@ -14690,6 +16587,7 @@ export {
   attachQuoteOffer,
   chartSpecFrom,
   clickElement,
+  createChatSurfaceTools,
   createHttpAgent,
   createPageActionTools,
   createPageMapContext,
@@ -14701,6 +16599,7 @@ export {
   flash,
   focusWithFlash,
   highlightThenClick,
+  isChatCorner,
   isDestructive,
   isNavigates,
   mergeUiStrings,
@@ -14725,6 +16624,7 @@ export {
   setControlValue,
   setNativeChecked,
   setNativeValue,
+  showHighlightOverlay,
   suggestionPrompts,
   toggleCheckbox,
   toggleControl,