@artooi/ag-ui-web-component 0.34.0 → 0.35.1

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>`;
@@ -71,6 +73,10 @@ var ICON_FILE_TEXT = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true">
 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";
@@ -107,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();
@@ -150,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;
@@ -173,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) {
@@ -214,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;
@@ -261,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);
@@ -314,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);
@@ -337,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 = [];
@@ -547,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",
@@ -1750,10 +1993,18 @@ 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)
+    )
   };
 }
 
@@ -1761,8 +2012,14 @@ function clampLauncher(launcher, viewport) {
 function clampPanel(host, viewport, margin = EDGE_MARGIN) {
   const width = host.right - host.left;
   const height = host.bottom - host.top;
-  const left = Math.max(margin, Math.min(host.left, viewport.width - margin - width));
-  const top = Math.max(margin, Math.min(host.top, viewport.height - margin - height));
+  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 };
 }
 
@@ -1967,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;
       }
@@ -1984,6 +2242,7 @@ function enableLauncherDrag(launcher, options) {
     };
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
   });
   let pending = null;
   const settle = () => {
@@ -2023,12 +2282,12 @@ function enableLauncherDrag(launcher, options) {
 }
 
 // src/ui/place_widget.ts
-function placeWidget(host, launcher, corner, viewport) {
+function placeWidget(host, launcher, corner, screen) {
   return {
     hostInset: inset({
       top: corner.y === "top" ? host.top : null,
-      right: corner.x === "right" ? viewport.width - host.right : null,
-      bottom: corner.y === "bottom" ? viewport.height - host.bottom : 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
     }),
     launcherInset: inset({
@@ -2045,11 +2304,11 @@ function inset(sides) {
 }
 
 // src/ui/launcher_placement.ts
-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;
+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"
@@ -2066,7 +2325,7 @@ function launcherPlacement(launcher, panel, viewport, margin = EDGE_MARGIN) {
     viewport,
     margin
   );
-  return { corner, ...placeWidget(host, launcher, corner, viewport) };
+  return { corner, ...placeWidget(host, launcher, corner, screen) };
 }
 
 // src/ui/message_actions.ts
@@ -2470,6 +2729,7 @@ function enablePanelDrag(handle, options) {
     const onUp = (up) => {
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
       if (!dragging) {
         return;
       }
@@ -2479,6 +2739,7 @@ function enablePanelDrag(handle, options) {
     event.preventDefault();
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
   });
 }
 function onControl(event, handle) {
@@ -4222,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);
@@ -4342,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("");
@@ -4387,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];
@@ -4426,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 };
     }
   }
@@ -4454,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;
         }
@@ -4495,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;
@@ -4546,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;
     }
@@ -4575,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;
     }
   }
@@ -4619,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 = "";
@@ -4646,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) };
@@ -4686,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) };
       }
     }
   }
@@ -4737,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;
   }
@@ -4829,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))) {
@@ -4861,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; ) {
@@ -4924,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);
@@ -4962,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 }) {
@@ -4988,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 + `>
@@ -5041,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>";
@@ -5054,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 {
@@ -5280,7 +5568,7 @@ var S = class {
   }
 };
 var Z = class {
-  defaults = C();
+  defaults = A();
   options = this.setOptions;
   parse = this.parseMarkdown(true);
   parseInline = this.parseMarkdown(false);
@@ -5326,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) {
@@ -5341,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;
@@ -5354,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;
@@ -5367,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;
@@ -5389,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 };
@@ -5412,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));
@@ -5423,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);
       }
     };
   }
@@ -5432,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);
@@ -5440,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;
@@ -5471,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 });
@@ -5682,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}`);
@@ -5697,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;
 }
 
@@ -5954,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);
@@ -6048,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. */
@@ -6055,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);
@@ -6133,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);
 }
 
@@ -6159,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);
 }
 
@@ -6194,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;
@@ -6231,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;
 }
 
@@ -6351,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;
 }
 
@@ -6475,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;
@@ -6507,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
@@ -6571,37 +7132,107 @@ 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;
+}
+
+/* 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;
+}
+
+: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. */
@@ -6689,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;
@@ -6704,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
@@ -6856,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;
@@ -7034,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;
@@ -7224,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;
@@ -7718,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;
@@ -8002,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;
@@ -8146,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);
@@ -8334,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);
@@ -8522,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;
@@ -8610,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),
@@ -8785,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);
@@ -8799,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 {
@@ -8923,19 +9716,44 @@ var STYLES = `
   background: none;
 }
 
-:host([placement="embedded"]) .drawer-panel {
-  width: 100%;
-  border-right: none;
-  box-shadow: none;
-}
-`;
-
-// src/ui/subagent_panel.ts
-var SubAgentPanel = class {
-  /** The panel's root; append this into the delegating card's slot. */
-  element;
-  /**
-   * The child agent's name, as the last update that carried one gave it.
+/* 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;
+  box-shadow: none;
+}
+`;
+
+// src/ui/subagent_panel.ts
+var SubAgentPanel = class {
+  /** The panel's root; append this into the delegating card's slot. */
+  element;
+  /**
+   * The child agent's name, as the last update that carried one gave it.
    *
    * Read back rather than only written to the DOM, because the two carriers
    * split the name away from the close: `SUBAGENT_STARTED` names the agent and
@@ -9190,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;
@@ -9202,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) {
@@ -9238,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). */
@@ -9266,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;
   }
@@ -9277,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()) {
@@ -9305,7 +10183,7 @@ var ThreadDrawer = class {
       this.close();
       return;
     }
-    if (event.key !== "Tab") {
+    if (event.key !== "Tab" || !this.#modal) {
       return;
     }
     const focusables = Array.from(
@@ -9330,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";
@@ -11113,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);
   /**
@@ -11229,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");
   /**
@@ -11290,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. */
@@ -11302,6 +12212,14 @@ 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.
@@ -11332,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. */
@@ -11455,6 +12418,9 @@ var AgUiChat = class extends HTMLElement {
       },
       onDelete: (threadId) => {
         this.#deleteThread(threadId);
+      },
+      onVisibility: () => {
+        this.#syncThreadsState();
       }
     });
     this.#checkpoints = new CheckpointMenu((runId, verb) => {
@@ -11543,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") {
@@ -11656,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() {
@@ -11896,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);
       }
@@ -11904,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();
@@ -11915,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();
@@ -11978,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;
@@ -12050,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) {
@@ -12285,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.
    *
@@ -12298,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) {
@@ -12306,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") === "") {
@@ -12466,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();
     }
@@ -12494,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);
@@ -12507,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();
   }
   /**
@@ -12635,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.
@@ -12686,7 +13960,8 @@ ${quoted}`;
     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);
@@ -12717,28 +13992,39 @@ ${quoted}`;
    * 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) {
+  #movePanel(box, from) {
     if (!this.#launcherDraggable()) {
-      return box;
+      return { held: box, launcher: null };
     }
     if (this.#launcherPos === null) {
       const resting = this.#launcherBox();
       this.#launcherPos = { left: resting.left, top: resting.top };
     }
-    const held = clampPanel(box, this.#viewport());
+    const start = this.#launcherPos;
+    const held = clampPanel(box, this.#viewport(), SCREEN_EDGE_MARGIN);
     const corner = this.#expandCorner ?? this.#anchor;
-    const viewport = this.#viewport();
+    const screen = this.#screen();
     this.style.setProperty(
       "--ag-ui-inset",
       [
         corner.y === "top" ? `${Math.round(held.top)}px` : "auto",
-        corner.x === "right" ? `${Math.round(viewport.width - held.right)}px` : "auto",
-        corner.y === "bottom" ? `${Math.round(viewport.height - held.bottom)}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 };
-    return held;
+    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.
@@ -12754,20 +14040,11 @@ ${quoted}`;
    * both insets are rewritten from positions that are already decided.
    */
   #commitPanel(box, from) {
-    const held = this.#movePanel(box);
-    const start = this.#launcherPos;
-    if (!this.#launcherDraggable() || start === null) {
+    const { held, launcher } = this.#movePanel(box, from);
+    if (launcher === null) {
       return;
     }
-    const carried = {
-      ...this.#launcherBox(),
-      left: start.left + (held.left - from.left),
-      top: start.top + (held.top - from.top)
-    };
-    this.#placePanelAndLauncher(held, {
-      ...carried,
-      ...clampLauncher(carried, this.#viewport())
-    });
+    this.#placePanelAndLauncher(held, launcher);
     this.#storeLauncherPosition();
   }
   /**
@@ -12776,9 +14053,10 @@ ${quoted}`;
    */
   #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);
-    const insets = placeWidget(host, launcher, corner, viewport);
+    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 };
@@ -12802,7 +14080,8 @@ ${quoted}`;
     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()
+      this.#viewport(),
+      SCREEN_EDGE_MARGIN
     );
     const launcher = this.#launcherBox();
     const carried = {
@@ -12830,8 +14109,8 @@ ${quoted}`;
       return;
     }
     const panel = this.#panelPos;
-    writeStoredItem(
-      this.#storageKey(LAUNCHER_KEY),
+    this.#writePreference(
+      LAUNCHER_KEY,
       JSON.stringify(panel === null ? position : { ...position, panel })
     );
   }
@@ -12860,7 +14139,7 @@ ${quoted}`;
   }
   /** 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;
     }
@@ -12910,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(" ")
     );
@@ -12936,11 +14216,12 @@ ${quoted}`;
     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();
   }
@@ -12967,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 {};
     }
@@ -13098,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
@@ -13115,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).
@@ -13129,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();
@@ -13169,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.
@@ -13505,7 +14899,7 @@ ${quoted}`;
     enablePanelDrag(header, {
       enabled: () => !this.collapsed && this.#launcherDraggable(),
       rect: () => this.getBoundingClientRect(),
-      apply: (box) => this.#movePanel(box),
+      apply: (box, from) => this.#movePanel(box, from),
       commit: (box, from) => this.#commitPanel(box, from)
     });
     this.#messages.className = "messages";
@@ -13550,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";
@@ -13616,6 +15019,7 @@ ${quoted}`;
       this.#skillsMenu.palette,
       this.#skillsMenu.chips,
       this.#skillHint,
+      this.#queuedRow,
       this.#attachSlot,
       inputRow,
       footer,
@@ -13640,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));
@@ -13667,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.
@@ -13846,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;
   }
@@ -13854,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)) {
@@ -13868,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
@@ -13877,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();
   }
@@ -13888,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
@@ -13907,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) {
@@ -14700,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.
    *
@@ -14977,13 +16539,14 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.34.0";
+var VERSION = "0.35.1";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
   AgUiClient,
   CHART_ACTIVITY_TYPE,
   CHART_TOOL_NAME,
+  CHAT_CORNERS,
   COMPACTION_ACTIVITY_TYPE,
   CUSTOM_AGENT_EVENT,
   CheckpointMenu,
@@ -15024,6 +16587,7 @@ export {
   attachQuoteOffer,
   chartSpecFrom,
   clickElement,
+  createChatSurfaceTools,
   createHttpAgent,
   createPageActionTools,
   createPageMapContext,
@@ -15035,6 +16599,7 @@ export {
   flash,
   focusWithFlash,
   highlightThenClick,
+  isChatCorner,
   isDestructive,
   isNavigates,
   mergeUiStrings,
@@ -15059,6 +16624,7 @@ export {
   setControlValue,
   setNativeChecked,
   setNativeValue,
+  showHighlightOverlay,
   suggestionPrompts,
   toggleCheckbox,
   toggleControl,