@artooi/ag-ui-web-component 0.20.0 → 0.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artooi/ag-ui-web-component",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "Framework-free <ag-ui-chat> Web Component over the AG-UI protocol. Drop-in chat sidebar with a pluggable client-side tool registry, DOM driver primitives, animations, and destructive-action confirmation modal.",
   "type": "module",
   "main": "./dist/index.js",

package/src/core/ag_ui_chat.ts

@@ -538,8 +538,12 @@ export class AgUiChat extends HTMLElement {
 
   attributeChangedCallback(name: string, previous: string | null, value: string | null): void {
     if (name === "placement") {
-      // Placement moves the panel, so the edges its layout holds still change
-      // with it. Deferred a frame so the new rules have applied.
+      // A placement owns the axes it fixes, so hand those back before anything
+      // else: a size dragged under the previous placement would otherwise sit
+      // inline and outrank the new one.
+      this.#releaseOwnedAxes();
+      // Placement also moves the panel, so the edges its layout holds still
+      // change with it. Deferred a frame so the new rules have applied.
       requestAnimationFrame(() => this.#syncResizeAnchor());
       return;
     }
@@ -1306,22 +1310,47 @@ export class AgUiChat extends HTMLElement {
   }
 
   /**
-   * Write a dragged size onto the host as custom properties.
+   * Write a dragged size onto the host, on the axes this placement leaves free.
    *
-   * Properties rather than inline `width` / `height`: the placement rules set
-   * those same properties, so an inline dimension would outrank them and a
-   * panel dragged while floating would keep that width after switching to
-   * fullscreen.
+   * ⚠ Writing the custom property rather than inline `width` / `height` does
+   * **not** by itself leave placement in charge — an inline custom property
+   * still outranks a `:host([placement=…])` rule setting the same property, so
+   * a height dragged while floating capped a docked sidebar that had asked for
+   * `100vh`. The cascade cannot arbitrate this; the axis check has to.
+   *
+   * So the rule is explicit: a placement owns the axes it fixes, and a
+   * persisted size is only ever applied to the ones it does not.
    */
   #applySize(size: ResizeSize): void {
+    const axis = this.#resizeAxis();
+    if (axis === "none") {
+      return;
+    }
     if (size.width !== undefined) {
       this.style.setProperty("--ag-ui-width", `${size.width}px`);
     }
-    if (size.height !== undefined) {
+    if (size.height !== undefined && axis === "both") {
       this.style.setProperty("--ag-ui-height", `${size.height}px`);
     }
   }
 
+  /**
+   * Drop any dragged size the new placement has taken ownership of.
+   *
+   * Without this a size survives the switch as an inline property and silently
+   * overrides the placement it moved to — the panel keeps a floating height
+   * while docked, and reads as a component that cannot do full height.
+   */
+  #releaseOwnedAxes(): void {
+    const axis = this.#resizeAxis();
+    if (axis !== "both") {
+      this.style.removeProperty("--ag-ui-height");
+    }
+    if (axis === "none") {
+      this.style.removeProperty("--ag-ui-width");
+    }
+  }
+
   /** Persist a dragged size per tab, alongside the collapsed/theme preferences. */
   #persistSize(size: ResizeSize): void {
     const stored = { ...this.#readSize(), ...size };

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.20.0";
+export const VERSION: string = "0.20.1";