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

package/src/ui/place_widget.ts

@@ -0,0 +1,56 @@
+import type { ExpandCorner, Extent, LauncherBox } from "./launcher_placement.js";
+import type { PanelRect } from "./resize_handle.js";
+
+/** Where to put the host box, and where the launcher sits inside it. */
+export interface WidgetInsets {
+  /** An `inset` shorthand for the host box. */
+  readonly hostInset: string;
+  /** An `inset` shorthand for the launcher, relative to the host box. */
+  readonly launcherInset: string;
+}
+
+/**
+ * Express a panel and its launcher, both already positioned, as the two
+ * `inset` shorthands the element writes.
+ *
+ * Both are measured from the **same** corner, which is what stops a later
+ * resize from dragging the launcher: the pinned corner is the one edge a
+ * resize cannot move. Which corner that is says nothing about where either box
+ * ends up -- the positions are absolute and arrive decided -- so re-picking it
+ * moves nothing, and the launcher may sit outside its own host box. Nothing
+ * clips it there, and that is what lets a launcher be flush to a screen corner
+ * while the panel it opens keeps its margin.
+ */
+export function placeWidget(
+  host: PanelRect,
+  launcher: LauncherBox,
+  corner: ExpandCorner,
+  viewport: Extent,
+): WidgetInsets {
+  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,
+    }),
+  };
+}
+
+/** An `inset` shorthand; a null side is `auto`, so the opposite one pins it. */
+function inset(sides: {
+  top: number | null;
+  right: number | null;
+  bottom: number | null;
+  left: number | null;
+}): string {
+  const side = (value: number | null): string =>
+    value === null ? "auto" : `${Math.round(value)}px`;
+  return `${side(sides.top)} ${side(sides.right)} ${side(sides.bottom)} ${side(sides.left)}`;
+}

package/src/ui/styles.ts

@@ -109,6 +109,11 @@ export const 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);
@@ -499,6 +504,41 @@ export const 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;
@@ -808,7 +848,22 @@ export const STYLES = `
   border-radius: var(--_msg-radius);
   line-height: 1.4;
   white-space: pre-wrap;
-  word-break: break-word;
+  /* overflow-wrap, not word-break, and the difference is the whole reason a
+     markdown table used to be unreadable.
+
+     Both stop one long unbroken token blowing out the bubble, which is all this
+     is for. But word-break: break-word is the legacy spelling of "break
+     anywhere", and breaking anywhere drops the *min-content* width of every
+     descendant to one character. A table's column algorithm takes min-content
+     as an input, so the table always fitted max-width: 100%, the overflow-x:
+     auto below it never had anything to scroll, and the columns absorbed the
+     pressure by rendering one letter per line instead. A seven-column header
+     came out 162px tall.
+
+     overflow-wrap: break-word breaks a word only when it would otherwise
+     overflow its line, and leaves min-content alone -- so the bubble is still
+     protected and the table is free to be wider than the panel and scroll. */
+  overflow-wrap: break-word;
 }
 
 /* ── Incoming-text animations (data-text-animation) ─────────────────────── */
@@ -1967,13 +2022,30 @@ export const 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;

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.33.0";
+export const VERSION: string = "0.34.0";