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

package/dist/index.js

@@ -69,6 +69,7 @@ var ICON_FILE_IMAGE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"
 var ICON_FILE_PDF = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><rect class="glyph--solid" x="7.5" y="13.5" width="9" height="4.5" rx="1"/></svg>`;
 var ICON_FILE_TEXT = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 13.5h7M8.5 17h4.5"/></svg>`;
 var CHART_ACTIVITY_TYPE = "chart";
+var EDGE_MARGIN = 24;
 var ANNOUNCE_CLEAR_MS = 150;
 
 // src/core/ag_ui_chat.ts
@@ -1093,11 +1094,14 @@ function accepts(accept, file) {
 
 // src/ui/chart_block.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-var WIDTH = 480;
-var HEIGHT = 220;
 var PAD = { top: 20, right: 12, bottom: 30, left: 44 };
-var PLOT_W = WIDTH - PAD.left - PAD.right;
-var PLOT_H = HEIGHT - PAD.top - PAD.bottom;
+var DEFAULT_WIDTH = 480;
+var MIN_WIDTH = 220;
+var HEIGHT_RATIO = 220 / 480;
+var MIN_HEIGHT = 160;
+var MAX_HEIGHT = 320;
+var WIDTH_STEP = 8;
+var AXIS_CHAR_WIDTH = 5.6;
 var SERIES_COLORS = [
   "var(--ag-ui-chart-1, #4f7cff)",
   "var(--ag-ui-chart-2, #21b573)",
@@ -1109,6 +1113,16 @@ var SERIES_COLORS = [
 function seriesColor(index) {
   return SERIES_COLORS[index % SERIES_COLORS.length];
 }
+function geometryFor(width) {
+  const w = Math.max(MIN_WIDTH, width);
+  const h = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, Math.round(w * HEIGHT_RATIO)));
+  return {
+    width: w,
+    height: h,
+    plotW: w - PAD.left - PAD.right,
+    plotH: h - PAD.top - PAD.bottom
+  };
+}
 function el(name, attrs) {
   const node = document.createElementNS(SVG_NS, name);
   for (const [key, value] of Object.entries(attrs)) {
@@ -1143,21 +1157,26 @@ function extent(spec) {
   const min = Math.min(0, ...values);
   return max === min ? { min, max: max + 1 } : { min, max };
 }
-function scaleY(value, min, max) {
-  return PAD.top + PLOT_H - (value - min) / (max - min) * PLOT_H;
+function scaleY(value, min, max, geo) {
+  return PAD.top + geo.plotH - (value - min) / (max - min) * geo.plotH;
 }
-function bandCentre(index, count) {
-  const step = PLOT_W / count;
+function bandCentre(index, count, geo) {
+  const step = geo.plotW / count;
   return PAD.left + step * index + step / 2;
 }
-function drawAxes(svg2, spec, min, max) {
+function labelStride(labels, geo) {
+  const band = geo.plotW / labels.length;
+  const widest = Math.max(...labels.map((label) => label.length)) * AXIS_CHAR_WIDTH;
+  return Math.max(1, Math.ceil(widest / band));
+}
+function drawAxes(svg2, spec, geo, min, max) {
   for (const value of [min, max]) {
-    const y2 = scaleY(value, min, max);
+    const y2 = scaleY(value, min, max, geo);
     svg2.appendChild(
       el("line", {
         x1: PAD.left,
         y1: y2,
-        x2: WIDTH - PAD.right,
+        x2: geo.width - PAD.right,
         y2,
         stroke: "currentColor",
         "stroke-opacity": value === min ? 0.35 : 0.12
@@ -1167,23 +1186,27 @@ function drawAxes(svg2, spec, min, max) {
       text(String(Math.round(value)), { x: PAD.left - 6, y: y2 + 4, "text-anchor": "end" })
     );
   }
+  const stride = labelStride(spec.labels, geo);
   spec.labels.forEach((label, i) => {
+    if (i % stride !== 0) {
+      return;
+    }
     svg2.appendChild(
       text(label, {
-        x: bandCentre(i, spec.labels.length),
-        y: HEIGHT - PAD.bottom + 16,
+        x: bandCentre(i, spec.labels.length, geo),
+        y: geo.height - PAD.bottom + 16,
         "text-anchor": "middle"
       })
     );
   });
 }
-function drawBars(svg2, spec, min, max) {
-  const step = PLOT_W / spec.labels.length;
+function drawBars(svg2, spec, geo, min, max) {
+  const step = geo.plotW / spec.labels.length;
   const width = step * 0.7 / spec.series.length;
-  const base = scaleY(min, min, max);
+  const base = scaleY(min, min, max, geo);
   spec.series.forEach((series, s) => {
     series.points.forEach((value, i) => {
-      const y2 = scaleY(value, min, max);
+      const y2 = scaleY(value, min, max, geo);
       svg2.appendChild(
         el("rect", {
           x: PAD.left + step * i + step * 0.15 + width * s,
@@ -1197,8 +1220,8 @@ function drawBars(svg2, spec, min, max) {
     });
   });
 }
-function drawStacked(svg2, spec, min, max) {
-  const step = PLOT_W / spec.labels.length;
+function drawStacked(svg2, spec, geo, min, max) {
+  const step = geo.plotW / spec.labels.length;
   const width = step * 0.7;
   const running = spec.labels.map(() => 0);
   spec.series.forEach((series, s) => {
@@ -1206,22 +1229,24 @@ function drawStacked(svg2, spec, min, max) {
       const from = running[i] ?? 0;
       const to = from + value;
       running[i] = to;
-      const y2 = scaleY(to, min, max);
+      const y2 = scaleY(to, min, max, geo);
       svg2.appendChild(
         el("rect", {
           x: PAD.left + step * i + step * 0.15,
           y: y2,
           width,
-          height: Math.max(1, scaleY(from, min, max) - y2),
+          height: Math.max(1, scaleY(from, min, max, geo) - y2),
           fill: seriesColor(s)
         })
       );
     });
   });
 }
-function drawLines(svg2, spec, min, max) {
+function drawLines(svg2, spec, geo, min, max) {
   spec.series.forEach((series, s) => {
-    const points = series.points.map((value, i) => `${bandCentre(i, spec.labels.length)},${scaleY(value, min, max)}`).join(" ");
+    const points = series.points.map(
+      (value, i) => `${bandCentre(i, spec.labels.length, geo)},${scaleY(value, min, max, geo)}`
+    ).join(" ");
     svg2.appendChild(
       el("polyline", {
         points,
@@ -1233,13 +1258,13 @@ function drawLines(svg2, spec, min, max) {
     );
   });
 }
-function drawScatter(svg2, spec, min, max) {
+function drawScatter(svg2, spec, geo, min, max) {
   spec.series.forEach((series, s) => {
     series.points.forEach((value, i) => {
       svg2.appendChild(
         el("circle", {
-          cx: bandCentre(i, spec.labels.length),
-          cy: scaleY(value, min, max),
+          cx: bandCentre(i, spec.labels.length, geo),
+          cy: scaleY(value, min, max, geo),
           r: 4,
           fill: seriesColor(s),
           "fill-opacity": 0.85
@@ -1248,11 +1273,11 @@ function drawScatter(svg2, spec, min, max) {
     });
   });
 }
-function drawPie(svg2, points) {
+function drawPie(svg2, points, geo) {
   const total = points.reduce((sum, value) => sum + value, 0);
-  const cx = WIDTH / 2;
-  const cy = PAD.top + PLOT_H / 2;
-  const r = Math.min(PLOT_W, PLOT_H) / 2;
+  const cx = geo.width / 2;
+  const cy = PAD.top + geo.plotH / 2;
+  const r = Math.min(geo.plotW, geo.plotH) / 2;
   if (total === 0) {
     svg2.appendChild(
       el("circle", { cx, cy, r, fill: "none", stroke: "currentColor", "stroke-opacity": 0.3 })
@@ -1281,6 +1306,35 @@ function drawPie(svg2, points) {
     angle = end;
   });
 }
+function drawSvg(spec, geo) {
+  const svg2 = el("svg", {
+    viewBox: `0 0 ${geo.width} ${geo.height}`,
+    width: "100%",
+    role: "img"
+  });
+  svg2.setAttribute("aria-label", spec.title ?? `${spec.kind} chart`);
+  if (spec.kind === "pie") {
+    const first = spec.series[0];
+    drawPie(
+      svg2,
+      first.points.map((value) => Math.max(0, value)),
+      geo
+    );
+    return svg2;
+  }
+  const { min, max } = extent(spec);
+  drawAxes(svg2, spec, geo, min, max);
+  if (spec.kind === "bar") {
+    drawBars(svg2, spec, geo, min, max);
+  } else if (spec.kind === "stacked") {
+    drawStacked(svg2, spec, geo, min, max);
+  } else if (spec.kind === "line") {
+    drawLines(svg2, spec, geo, min, max);
+  } else {
+    drawScatter(svg2, spec, geo, min, max);
+  }
+  return svg2;
+}
 function buildLegend(entries2) {
   if (entries2.length < 2) {
     return null;
@@ -1299,6 +1353,12 @@ function buildLegend(entries2) {
   });
   return row;
 }
+function fitToWidth(block, redraw) {
+  const observer = new ResizeObserver(() => {
+    redraw(Math.round(block.clientWidth / WIDTH_STEP) * WIDTH_STEP);
+  });
+  observer.observe(block);
+}
 function renderChart(spec) {
   if (spec.labels.length === 0 || spec.series.length === 0) {
     return null;
@@ -1313,27 +1373,8 @@ function renderChart(spec) {
     heading.textContent = spec.title;
     block.appendChild(heading);
   }
-  const svg2 = el("svg", { viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: "100%", role: "img" });
-  svg2.setAttribute("aria-label", spec.title ?? `${spec.kind} chart`);
-  if (spec.kind === "pie") {
-    const first = spec.series[0];
-    drawPie(
-      svg2,
-      first.points.map((value) => Math.max(0, value))
-    );
-  } else {
-    const { min, max } = extent(spec);
-    drawAxes(svg2, spec, min, max);
-    if (spec.kind === "bar") {
-      drawBars(svg2, spec, min, max);
-    } else if (spec.kind === "stacked") {
-      drawStacked(svg2, spec, min, max);
-    } else if (spec.kind === "line") {
-      drawLines(svg2, spec, min, max);
-    } else {
-      drawScatter(svg2, spec, min, max);
-    }
-  }
+  let width = DEFAULT_WIDTH;
+  let svg2 = drawSvg(spec, geometryFor(width));
   block.appendChild(svg2);
   const legend = buildLegend(
     spec.kind === "pie" ? spec.labels : spec.series.map((series) => series.label)
@@ -1341,6 +1382,15 @@ function renderChart(spec) {
   if (legend !== null) {
     block.appendChild(legend);
   }
+  fitToWidth(block, (measured) => {
+    if (measured === width) {
+      return;
+    }
+    width = measured;
+    const next = drawSvg(spec, geometryFor(width));
+    svg2.replaceWith(next);
+    svg2 = next;
+  });
   return block;
 }
 
@@ -1707,6 +1757,15 @@ function clampLauncher(launcher, viewport) {
   };
 }
 
+// src/ui/clamp_panel.ts
+function clampPanel(host, viewport, margin = EDGE_MARGIN) {
+  const width = host.right - host.left;
+  const height = host.bottom - host.top;
+  const left = Math.max(margin, Math.min(host.left, viewport.width - margin - width));
+  const top = Math.max(margin, Math.min(host.top, viewport.height - margin - height));
+  return { left, top, right: left + width, bottom: top + height };
+}
+
 // src/ui/confirmation_card.ts
 function actionButton2(modifier, label) {
   const button2 = document.createElement("button");
@@ -1963,8 +2022,29 @@ function enableLauncherDrag(launcher, options) {
   launcher.addEventListener("blur", settle);
 }
 
+// src/ui/place_widget.ts
+function placeWidget(host, launcher, corner, viewport) {
+  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,
+      left: corner.x === "left" ? host.left : null
+    }),
+    launcherInset: inset({
+      top: corner.y === "top" ? launcher.top - host.top : null,
+      right: corner.x === "right" ? host.right - (launcher.left + launcher.width) : null,
+      bottom: corner.y === "bottom" ? host.bottom - (launcher.top + launcher.height) : null,
+      left: corner.x === "left" ? launcher.left - host.left : null
+    })
+  };
+}
+function inset(sides) {
+  const side = (value) => value === null ? "auto" : `${Math.round(value)}px`;
+  return `${side(sides.top)} ${side(sides.right)} ${side(sides.bottom)} ${side(sides.left)}`;
+}
+
 // src/ui/launcher_placement.ts
-var EDGE_MARGIN = 24;
 function launcherPlacement(launcher, panel, viewport, margin = EDGE_MARGIN) {
   const roomRunningRight = viewport.width - launcher.left;
   const roomRunningLeft = launcher.left + launcher.width;
@@ -1976,34 +2056,17 @@ function launcherPlacement(launcher, panel, viewport, margin = EDGE_MARGIN) {
   };
   const wantedLeft = corner.x === "left" ? launcher.left : launcher.left + launcher.width - panel.width;
   const wantedTop = corner.y === "top" ? launcher.top : launcher.top + launcher.height - panel.height;
-  const hostLeft = clamp(wantedLeft, margin, viewport.width - margin - panel.width);
-  const hostTop = clamp(wantedTop, margin, viewport.height - margin - panel.height);
-  const hostRight = hostLeft + panel.width;
-  const hostBottom = hostTop + panel.height;
-  return {
-    corner,
-    hostInset: inset({
-      top: corner.y === "top" ? hostTop : null,
-      right: corner.x === "right" ? viewport.width - hostRight : null,
-      bottom: corner.y === "bottom" ? viewport.height - hostBottom : null,
-      left: corner.x === "left" ? hostLeft : null
-    }),
-    // Measured from the host box's pinned corner to the launcher's matching
-    // corner, so the launcher lands exactly where it was dropped.
-    launcherInset: inset({
-      top: corner.y === "top" ? launcher.top - hostTop : null,
-      right: corner.x === "right" ? hostRight - (launcher.left + launcher.width) : null,
-      bottom: corner.y === "bottom" ? hostBottom - (launcher.top + launcher.height) : null,
-      left: corner.x === "left" ? launcher.left - hostLeft : null
-    })
-  };
-}
-function clamp(value, low, high) {
-  return Math.max(low, Math.min(value, high));
-}
-function inset(sides) {
-  const side = (value) => value === null ? "auto" : `${Math.round(value)}px`;
-  return `${side(sides.top)} ${side(sides.right)} ${side(sides.bottom)} ${side(sides.left)}`;
+  const host = clampPanel(
+    {
+      left: wantedLeft,
+      top: wantedTop,
+      right: wantedLeft + panel.width,
+      bottom: wantedTop + panel.height
+    },
+    viewport,
+    margin
+  );
+  return { corner, ...placeWidget(host, launcher, corner, viewport) };
 }
 
 // src/ui/message_actions.ts
@@ -2374,6 +2437,55 @@ function place(button2, rect) {
   button2.style.left = `${Math.min(Math.max(centre, half), width - half)}px`;
 }
 
+// src/ui/panel_drag.ts
+var DRAG_THRESHOLD2 = 4;
+var CONTROLS = "button, a[href], input, select, textarea, [contenteditable]";
+function enablePanelDrag(handle, options) {
+  handle.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || !options.enabled() || onControl(event, handle)) {
+      return;
+    }
+    const start = options.rect();
+    const originX = event.clientX;
+    const originY = event.clientY;
+    let dragging = false;
+    const boxAt2 = (x2, y2) => {
+      const dx = x2 - originX;
+      const dy = y2 - originY;
+      return {
+        left: start.left + dx,
+        top: start.top + dy,
+        right: start.right + dx,
+        bottom: start.bottom + dy
+      };
+    };
+    const onMove = (move) => {
+      if (!dragging && Math.hypot(move.clientX - originX, move.clientY - originY) < DRAG_THRESHOLD2) {
+        return;
+      }
+      dragging = true;
+      handle.setAttribute("data-dragging", "true");
+      options.apply(boxAt2(move.clientX, move.clientY), start);
+    };
+    const onUp = (up) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      if (!dragging) {
+        return;
+      }
+      handle.removeAttribute("data-dragging");
+      options.commit(boxAt2(up.clientX, up.clientY), start);
+    };
+    event.preventDefault();
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  });
+}
+function onControl(event, handle) {
+  const path = event.composedPath();
+  return path.slice(0, path.indexOf(handle)).some((node) => node instanceof Element && node.matches(CONTROLS));
+}
+
 // src/ui/prettify_tool_name.ts
 function prettifyToolName(name) {
   const spaced = name.replace(/[._-]+/g, " ").trim();
@@ -2876,11 +2988,11 @@ function createDOMPurify() {
   const originalDocument = document2;
   const currentScript = originalDocument.currentScript;
   window2.DocumentFragment;
-  const HTMLTemplateElement = window2.HTMLTemplateElement, Node2 = window2.Node, Element = window2.Element, NodeFilter2 = window2.NodeFilter, _window$NamedNodeMap = window2.NamedNodeMap;
+  const HTMLTemplateElement = window2.HTMLTemplateElement, Node2 = window2.Node, Element2 = window2.Element, NodeFilter2 = window2.NodeFilter, _window$NamedNodeMap = window2.NamedNodeMap;
   _window$NamedNodeMap === void 0 ? window2.NamedNodeMap || window2.MozNamedAttrMap : _window$NamedNodeMap;
   window2.HTMLFormElement;
   const DOMParser = window2.DOMParser, trustedTypes = window2.trustedTypes;
-  const ElementPrototype = Element.prototype;
+  const ElementPrototype = Element2.prototype;
   const cloneNode = lookupGetter(ElementPrototype, "cloneNode");
   const remove = lookupGetter(ElementPrototype, "remove");
   const getNextSibling = lookupGetter(ElementPrototype, "nextSibling");
@@ -5443,8 +5555,8 @@ function renderMarkdown(text4, options) {
 }
 
 // src/ui/resize_handle.ts
-var MIN_WIDTH = 280;
-var MIN_HEIGHT = 240;
+var MIN_WIDTH2 = 280;
+var MIN_HEIGHT2 = 240;
 var STEP2 = 16;
 var COARSE_STEP2 = 64;
 function createResizeHandle(grip, options) {
@@ -5526,11 +5638,11 @@ function movable(grip, axis) {
   return axis === "both" || grip.x !== void 0;
 }
 function boxAt(grip, axis, rect, x2, y2) {
-  const left = grip.x === "left" ? Math.min(x2, rect.right - MIN_WIDTH) : rect.left;
-  const right = grip.x === "right" ? Math.max(x2, rect.left + MIN_WIDTH) : rect.right;
+  const left = grip.x === "left" ? Math.min(x2, rect.right - MIN_WIDTH2) : rect.left;
+  const right = grip.x === "right" ? Math.max(x2, rect.left + MIN_WIDTH2) : rect.right;
   const vertical = axis === "both";
-  const top = vertical && grip.y === "top" ? Math.min(y2, rect.bottom - MIN_HEIGHT) : rect.top;
-  const bottom = vertical && grip.y === "bottom" ? Math.max(y2, rect.top + MIN_HEIGHT) : rect.bottom;
+  const top = vertical && grip.y === "top" ? Math.min(y2, rect.bottom - MIN_HEIGHT2) : rect.top;
+  const bottom = vertical && grip.y === "bottom" ? Math.max(y2, rect.top + MIN_HEIGHT2) : rect.bottom;
   return { left, top, right, bottom };
 }
 
@@ -5903,6 +6015,11 @@ var STYLES = `
   --_glyph-size: var(--ag-ui-glyph-size, 18px);
   --_glyph-stroke: var(--ag-ui-glyph-stroke, 1.75);
 
+  /* How wide a chart is allowed to get. A cap rather than a width: below it
+     the chart fills its column, and above it a wider panel is just a wider
+     panel. */
+  --_chart-max-width: var(--ag-ui-chart-max-width, 480px);
+
   /* Unread badge on the launcher. */
   --_badge-bg: var(--ag-ui-badge-bg, var(--_danger));
   --_badge-fg: var(--ag-ui-badge-fg, #ffffff);
@@ -6293,6 +6410,41 @@ var STYLES = `
   color: var(--_header-fg);
 }
 
+/* The header is the panel's title bar: on the placements that let the widget
+   be moved it drags the whole thing, matching the launcher's own drag. The
+   selector lists those placements rather than asking JS to stamp an attribute,
+   because a cursor that appears one frame late reads as a control that only
+   sometimes exists. touch-action keeps a finger drag here moving the panel
+   instead of scrolling the page behind it. */
+:host(:not([placement])) .header,
+:host([placement=""]) .header,
+:host([placement="floating"]) .header,
+:host([placement="bottom-left"]) .header {
+  cursor: move;
+  touch-action: none;
+}
+
+/* A host that turned the drag off keeps a header that says so. */
+:host([data-launcher-drag="false"]) .header {
+  cursor: auto;
+  touch-action: auto;
+}
+
+/* :host is carried for the specificity, not the scope: the placement rules
+   above are a host selector plus a class plus an attribute, and a bare
+   .header[data-dragging] loses to them -- silently, because the drag still
+   works and only the cursor is wrong. */
+:host .header[data-dragging] {
+  cursor: grabbing;
+}
+
+/* The cursor inherits, so a control a host slots into the header would show
+   the drag cursor over something the drag deliberately ignores. Named to
+   match the controls panel_drag steps aside for. */
+.header ::slotted(:is(button, a, input, select, textarea)) {
+  cursor: pointer;
+}
+
 .header-title {
   flex: 1;
   min-width: 0;
@@ -7776,13 +7928,30 @@ var STYLES = `
  * values, and the axis furniture inherits currentColor at low opacity so it
  * reads correctly in either theme without a second palette.
  */
+/* A chart is sized like a message, not like a panel: it takes the width it
+   needs and stops, rather than stretching into whatever room the transcript
+   has. A message bubble caps at 80% for the same reason -- widening the panel
+   should not resize what is already in it. The cap is a token so a host with a
+   wide panel and a real reason can raise it; the default is the width this
+   renderer has always drawn at. Below the cap the block still fills its column,
+   which is what a narrow panel needs. */
 .chart-block {
-  align-self: stretch;
-  max-width: 100%;
+  align-self: flex-start;
+  width: 100%;
+  max-width: var(--_chart-max-width);
   margin: 6px 0;
   color: var(--_fg);
 }
 
+/* The drawing fills the block's width and carries its own height in the
+   viewBox, so it is laid out rather than magnified: block display keeps the
+   inline baseline gap from adding a stripe under every chart. */
+.chart-block svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
 .chart-title {
   margin-bottom: 2px;
   font-size: 0.85em;
@@ -10698,6 +10867,13 @@ var COLLAPSED_KEY = "ag-ui-chat:collapsed";
 var SIZE_KEY = "ag-ui-chat:size";
 var THEME_KEY = "ag-ui-chat:theme";
 var LAUNCHER_KEY = "ag-ui-chat:launcher";
+function asPoint(value) {
+  if (typeof value !== "object" || value === null) {
+    return null;
+  }
+  const { left, top } = value;
+  return typeof left === "number" && typeof top === "number" ? { left, top } : null;
+}
 var DRAGGABLE_PLACEMENTS = /* @__PURE__ */ new Set([null, "", "floating", "bottom-left"]);
 var RESIZE_GRIPS = [
   { y: "top" },
@@ -11126,6 +11302,18 @@ var AgUiChat = class extends HTMLElement {
    * position -- see #applyLauncherPlacement for what that costs the host.
    */
   #launcherPos = null;
+  /**
+   * Where the user dragged the *panel*, in viewport coordinates, or null while
+   * its position is still derived from the launcher's.
+   *
+   * The two gestures state different things and are restored differently. A
+   * launcher drag says where the bubble goes and leaves the panel to open into
+   * whatever space the viewport has, so it is re-derived every time -- which is
+   * what lets a widget re-decide its direction when the window changes under
+   * it. A header drag states the panel's own position, and re-deriving that
+   * from the launcher would move the panel the user just placed.
+   */
+  #panelPos = null;
   /**
    * The corner the panel opens away from, once this element is placing itself.
    * Null means the host's layout still decides, and the anchor is measured.
@@ -12493,6 +12681,7 @@ ${quoted}`;
       return;
     }
     this.#launcherPos = at2;
+    this.#panelPos = null;
     const panel = this.getBoundingClientRect();
     const placement = launcherPlacement(
       this.#launcherBox(),
@@ -12514,13 +12703,137 @@ ${quoted}`;
     this.#moveLauncher(left, top);
     this.#storeLauncherPosition();
   }
-  /** Write the current launcher position, if this element owns one. */
+  /**
+   * Move the panel live during a header drag, without persisting.
+   *
+   * Only the host box is written, and that is the whole trick: the launcher is
+   * positioned *inside* that box, so leaving its own inset alone carries it
+   * along by exactly the distance the panel travelled -- which is what a person
+   * dragging a window expects of the thing it collapses into. Placing it on the
+   * panel's pinned corner instead, as an earlier version did, sent it leaping
+   * across the panel the moment the drag re-picked that corner.
+   *
+   * The corner is therefore held for the length of the gesture. Both insets are
+   * measured from it, and rewriting one of them from a new corner while the
+   * other still names the old one would move the launcher for no reason.
+   */
+  #movePanel(box) {
+    if (!this.#launcherDraggable()) {
+      return box;
+    }
+    if (this.#launcherPos === null) {
+      const resting = this.#launcherBox();
+      this.#launcherPos = { left: resting.left, top: resting.top };
+    }
+    const held = clampPanel(box, this.#viewport());
+    const corner = this.#expandCorner ?? this.#anchor;
+    const viewport = this.#viewport();
+    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 === "left" ? `${Math.round(held.left)}px` : "auto"
+      ].join(" ")
+    );
+    this.#panelPos = { left: held.left, top: held.top };
+    return held;
+  }
+  /**
+   * Finish a header drag: settle where both halves ended up, and remember it.
+   *
+   * The launcher travels the distance the panel actually travelled, which is
+   * the clamped distance rather than the pointer's -- a panel held against the
+   * viewport margin stops, and so does the bubble attached to it. Measured from
+   * the box the press started on, so a long drag cannot accumulate the rounding
+   * each move writes into the inset.
+   *
+   * Only now is the corner re-picked, from where the launcher has ended up, so
+   * the panel opens into clear space next time. Re-picking it moves nothing:
+   * both insets are rewritten from positions that are already decided.
+   */
+  #commitPanel(box, from) {
+    const held = this.#movePanel(box);
+    const start = this.#launcherPos;
+    if (!this.#launcherDraggable() || start === 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.#storeLauncherPosition();
+  }
+  /**
+   * Write both insets for a panel and launcher that are already positioned,
+   * re-picking the corner they are measured from.
+   */
+  #placePanelAndLauncher(host, launcher) {
+    const viewport = this.#viewport();
+    const size = { width: host.right - host.left, height: host.bottom - host.top };
+    const { corner } = launcherPlacement(launcher, size, viewport);
+    const insets = placeWidget(host, launcher, corner, viewport);
+    this.style.setProperty("--ag-ui-inset", insets.hostInset);
+    this.style.setProperty("--ag-ui-launcher-inset", insets.launcherInset);
+    this.#launcherPos = { left: launcher.left, top: launcher.top };
+    this.#panelPos = { left: host.left, top: host.top };
+    this.#expandCorner = corner;
+    this.setAttribute("data-expand-corner", `${corner.y}-${corner.x}`);
+    this.#syncResizeAnchor();
+  }
+  /**
+   * Re-apply a panel position the user stated, against the current viewport.
+   *
+   * The launcher keeps its offset from the panel through the clamp -- it was
+   * put where it is relative to the panel, and a viewport that has since shrunk
+   * is no reason to move one without the other -- and is then held on screen in
+   * its own right.
+   */
+  #restorePanelPosition(at2) {
+    if (!this.#launcherDraggable()) {
+      return;
+    }
+    const rect = this.getBoundingClientRect();
+    const held = clampPanel(
+      { left: at2.left, top: at2.top, right: at2.left + rect.width, bottom: at2.top + rect.height },
+      this.#viewport()
+    );
+    const launcher = this.#launcherBox();
+    const carried = {
+      ...launcher,
+      left: launcher.left + (held.left - at2.left),
+      top: launcher.top + (held.top - at2.top)
+    };
+    this.#placePanelAndLauncher(held, {
+      ...carried,
+      ...clampLauncher(carried, this.#viewport())
+    });
+  }
+  /**
+   * Write the current position, if this element owns one.
+   *
+   * The panel's own position rides along only when the user stated it, because
+   * its presence is what tells a restore which of the two gestures to honour:
+   * with it, the panel goes back where it was put; without it, the panel is
+   * re-derived from the launcher and opens into whatever room the viewport has
+   * now.
+   */
   #storeLauncherPosition() {
     const position = this.#launcherPos;
     if (position === null) {
       return;
     }
-    writeStoredItem(this.#storageKey(LAUNCHER_KEY), JSON.stringify(position));
+    const panel = this.#panelPos;
+    writeStoredItem(
+      this.#storageKey(LAUNCHER_KEY),
+      JSON.stringify(panel === null ? position : { ...position, panel })
+    );
   }
   /**
    * Re-apply the dragged position against the current viewport: on connect,
@@ -12529,16 +12842,23 @@ ${quoted}`;
    * unreachable -- it is the only way back to a collapsed conversation.
    */
   #restoreLauncherPosition() {
-    const stored = this.#launcherPos ?? this.#readLauncherPosition();
-    if (stored === null) {
+    const stored = this.#readLauncherPosition();
+    const launcher = this.#launcherPos ?? stored;
+    if (launcher === null) {
+      return;
+    }
+    const panel = this.#panelPos ?? stored?.panel ?? null;
+    if (panel !== null) {
+      this.#launcherPos = { left: launcher.left, top: launcher.top };
+      this.#restorePanelPosition(panel);
       return;
     }
     const box = this.#launcherBox();
     this.#applyLauncherPlacement(
-      clampLauncher({ ...box, left: stored.left, top: stored.top }, this.#viewport())
+      clampLauncher({ ...box, left: launcher.left, top: launcher.top }, this.#viewport())
     );
   }
-  /** The persisted launcher position for this instance, or null. */
+  /** The persisted position for this instance, or null. */
   #readLauncherPosition() {
     const raw = this.#readScopedItem(LAUNCHER_KEY);
     if (raw === null) {
@@ -12549,8 +12869,12 @@ ${quoted}`;
       if (typeof parsed !== "object" || parsed === null) {
         return null;
       }
-      const { left, top } = parsed;
-      return typeof left === "number" && typeof top === "number" ? { left, top } : null;
+      const { left, top, panel } = parsed;
+      if (typeof left !== "number" || typeof top !== "number") {
+        return null;
+      }
+      const at2 = asPoint(panel);
+      return at2 === null ? { left, top } : { left, top, panel: at2 };
     } catch {
       return null;
     }
@@ -12565,6 +12889,7 @@ ${quoted}`;
       return;
     }
     this.#launcherPos = null;
+    this.#panelPos = null;
     this.#expandCorner = null;
     this.style.removeProperty("--ag-ui-inset");
     this.style.removeProperty("--ag-ui-launcher-inset");
@@ -12608,6 +12933,9 @@ ${quoted}`;
         top: anchor.y === "top" ? box.top : box.bottom - size
       };
     }
+    if (this.#panelPos !== null) {
+      this.#panelPos = { left: box.left, top: box.top };
+    }
   }
   /** Finish a resize: keep the box, remember it, and re-read the pinned edges. */
   #commitResize(grip, box) {
@@ -13174,6 +13502,12 @@ ${quoted}`;
     }
     controls.append(collapse2);
     header.append(title, headerActions, controls);
+    enablePanelDrag(header, {
+      enabled: () => !this.collapsed && this.#launcherDraggable(),
+      rect: () => this.getBoundingClientRect(),
+      apply: (box) => this.#movePanel(box),
+      commit: (box, from) => this.#commitPanel(box, from)
+    });
     this.#messages.className = "messages";
     this.#messages.setAttribute("part", "messages");
     this.#messages.setAttribute("role", "log");
@@ -14643,7 +14977,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.33.1";
+var VERSION = "0.34.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,