@artooi/ag-ui-web-component 0.49.0 → 0.50.1

package/CHANGELOG.md

@@ -7,6 +7,178 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.50.1] — 2026-11-09
+
+### Fixed
+
+- **A corner panel a grip placed goes full-bleed on a phone after a move is
+  undone.** Under `collapse-to="auto"`, with no spot stated, the sequence of a grip
+  on an edge the layout holds, `moveTo` with its announcement, another such grip and
+  the undo left an inline `--ag-ui-inset` that read as a host's own, so a phone kept
+  it, and the panel stood off the screen by as much as the grip had moved it. It now
+  fills the screen with no inline inset, and widening gives the grip's place back.
+  An undo also keeps the inset that stands a panel at the start of a window a host
+  fills, so the panel rests again once that fill has gone. **A host has nothing to
+  do.**
+- **A moved panel under `data-launcher-drag="false"` gives way when a host's size
+  stands it off the screen.** Since 0.50.0 such a panel stays where it was moved
+  until the next window resize or reopen, and it still does while the reader types.
+  A host that then filled the window left it at -524,-144 at 1280x800, its header
+  out of reach, until one of those came. Any size that stands it off an edge of the
+  screen now hands it to the host's CSS at once, and a host that fills the window
+  gets it at 0,0. The stored spot stays for the day the attribute comes off. A size
+  that still fits moves nothing. **A host has nothing to do.**
+- **A docked panel a host fills stands at 0,0.** Under `collapse-to="bar"` and
+  `"none"`, a panel a host sized to the whole window stood past the top of the window
+  by what the resting inset spends: at 1200x760, -24,-65 under the bar, where
+  the whole header was out of reach, and -24,-24 under a host's own control. It now
+  stands at the start of the room the host left free, moved or not, as a corner panel
+  has since 0.50.0, and under `data-launcher-drag="false"` too. While it does the bar
+  and the grips go, as they do on a phone, with `ag-ui-bar-height` saying 0 and the
+  header's minimise control as the way back, because the strip would draw over the
+  composer's foot. The bar comes back when the panel is collapsed, and both when the
+  size stops filling. A host that writes that height into its own
+  `--ag-ui-viewport-inset-bottom` settles with the bar gone: the panel stays judged
+  against the box it filled while the box has only grown by the bar's height on the same
+  window, where it would otherwise flip the bar and jump the header every frame. The
+  dock's stored spot stays unchanged, and the panel goes back
+  to its spot or its dock when the size stops filling. A host's own inline `--ag-ui-inset` stays
+  where the host wrote it, and a placement that owns its position is left alone. **A
+  host has nothing to do.**
+- **A viewport inset token wider than the card holding an embedded chat adds no
+  scroll.** The box the component reads the four `--ag-ui-viewport-inset-*`
+  tokens from took its size from them, so a 200px card under a 240px left token
+  scrolled by 40px, and the same on the other axis. The tokens read back as
+  before, a percentage against the same box. **A host has nothing to do.**
+- **A hidden panel stays where it was moved.** Hiding the element, or anything
+  holding it, had it place itself from a box of nothing and write that as its
+  inset, so a script reading the panel straight after showing it again found it
+  off the screen, until a few frames later it stood at its spot. A window resize
+  while hidden, connecting hidden and expanding hidden did the same. None of those
+  writes an inset now, and showing the element places it against the window as it
+  then is. The stored spot was never touched, and `ag-ui-bar-height` still says 0
+  while hidden. **A host has nothing to do.**
+
+## [0.50.0] — 2026-11-08
+
+### Changed
+
+- **The themes demo sets `--ag-ui-header-btn-hover`.** A new control on its
+  page draws the header buttons' hover square in a colour you pick. The suite
+  now tests that square as a browser without relative colour syntax draws it,
+  mixed from the header text, which only a string check saw before. Demo and
+  tests only, nothing shipped changes. **A host has nothing to do.**
+
+### Fixed
+
+- **A corner panel that was moved goes full-bleed on a phone, and stays there.**
+  Under `collapse-to="auto"`, a panel moved by its header, its launcher or
+  `moveTo` on a wide window kept an inline `--ag-ui-inset` when the window
+  narrowed below the small-viewport breakpoint, which held it 8px off two edges
+  and past the other two. It now fills the screen, with no inline inset, while
+  its launcher stays on the screen for when it is collapsed. A header drag no
+  longer moves a panel that is the screen, as `moveTo` already refused to, and its
+  cursor stops offering one. The
+  place the user put the panel is now kept as they stated it: a window that
+  narrows, by any amount, holds the panel inside it without changing the record,
+  and widening gives that place back, as a reload already did. A gesture made in
+  the narrower window states a new one. **A host has nothing to do.**
+- **A corner panel remembers the corner a resize grip moved.** Under
+  `collapse-to="auto"`, growing a moved panel by a grip on its free edges, which
+  moves its top-left corner while the layout holds the opposite one, was lost on
+  the next reopen or reload: the panel came back at its old top-left, grown away
+  from its launcher. It now comes back as it was drawn, a host's maximum included,
+  and `resetSize()` keeps the panel where the size came off. The top-left stays as the
+  grip left it while the host's own `--ag-ui-width` or `--ag-ui-height` is in force at
+  that moment, and the stored spot stays as it was under `data-launcher-drag="false"`.
+  **A host has nothing to do.**
+- **`read_chat_surface` reports the page's setting for `draggable`, whatever the
+  placement.** A sidebar, embedded, side, page or full panel under `collapse-to="auto"`
+  reported `draggable: false` with `movable: false`, so `move_chat` answered that
+  the page had turned off moving the panel when the placement owned its position,
+  while the same placement under `collapse-to="none"` or `"bar"` reported `true`.
+  `draggable` is now `true` for every placement unless the page sets
+  `data-launcher-drag="false"`, and whether this panel moves stays in `movable`.
+  The refusal names the placement. **A host has nothing to do.**
+- **Every theme's header buttons follow `--ag-ui-header-fg`.** 0.49.0 did this
+  for Quiet alone, so the accent recipe still fell short under the others:
+  white on a `#3d5afe` header read 1.1 to 1.6:1 at rest under Soft and Ledger,
+  and 4.16:1 at rest and 3.75:1 hovered under Classic and code. Once a host sets
+  `--ag-ui-header-fg`, the buttons draw in it at full opacity under every theme
+  and scheme, and the hover square is the opposite of that text at 18%: that
+  pair now reads 5.13:1 at rest and 6.95:1 hovered under all of them. What
+  changes for a host that sets it, by theme. Soft: the glyph was the third ink,
+  the accent's ink hovered, on a square of `--ag-ui-tint-2`. Ledger: the glyph
+  was the third ink, the full ink hovered, on a square of `--ag-ui-hover`.
+  Classic and code: the glyph already was the header text, but at 0.85 opacity,
+  and the square was 18% white, so under white text it now darkens where it
+  lightened. Browsers without relative colour syntax (Firefox 120 to 127,
+  Safari 17.5 and 17.6) mix the square from the text itself, as under Quiet, at
+  3.75:1 hovered for that pair.
+  **`--ag-ui-header-btn-hover`, inert until now under Soft, Ledger, Classic and
+  code, works under them**, as it does under Quiet: drawn exactly as given,
+  whether or not the header text is set. A host that set it for Quiet and also
+  wears one of these themes will now see it. With neither token set, every
+  theme's header buttons are exactly as they were, whatever the header colour
+  or `--ag-ui-hover`. **No opt-in is needed.** A page's own
+  `::part(header-button)` rules still win: a host that wrote one to get here may
+  delete it, and should at least delete a `:hover` background of 18% of the text,
+  which keeps the glyph at 3.75:1 on a mid-tone accent. A host that sets neither
+  token, the Django admin among them, sees no change.
+- **A corner panel a host's own size makes the window stands at 0,0.** A host that
+  fills a wide window with `--ag-ui-width` and `--ag-ui-height` found a panel the
+  user had moved standing at 8,8 after a window resize, 8px past the right and
+  bottom edges. It now exactly fills the window, from the start of whatever the
+  viewport inset tokens reserve, as a
+  phone's full-bleed panel does, and comes back to where the user put it when the
+  host's size drops. A host's own `--ag-ui-inset` rule that already stands the box
+  on the screen is left alone. **A host has nothing to do.**
+- **A panel placed only by a resize grip goes full-bleed on a phone.** A grip on
+  an edge the layout holds moves an unmoved corner panel without storing a spot,
+  and that inline inset stayed on when the window narrowed, which held the panel
+  off two edges and past the other two. It now fills the screen with no inline
+  inset, and widening gives the place back. An inset the host wrote inline stays
+  where the host wrote it. An unmoved panel a host's own size makes the window
+  stands at 0,0 as well. **A host has nothing to do.**
+- **`data-launcher-drag="false"` on a moved panel hands it to the host's CSS.**
+  Turned on after the user had moved the panel, the attribute left an inline
+  inset behind for good, which put the panel off the screen on a phone. Nothing
+  moves when it goes on. The next window resize or reopen rests the panel where
+  the host's CSS puts it, as a reload under the attribute always did, and on a
+  phone that is full-bleed. The stored spot stays, and comes back at the first
+  restore after the attribute comes off. **A host has nothing to do.**
+- **Undoing a move after the surface changed leaves everything in agreement.** A
+  move undone once the panel had gone from a corner to a sidebar, a side panel, a
+  page or a dock wrote the corner's inset back onto the new surface, which pinned
+  a sidebar or a page off the screen and took a docked panel off its dock, and
+  left the stored spot on the move the reader had just undone. Going the other way
+  left a docked panel's stored spot on the move too. The undo now puts both
+  records back, in memory and in storage, and leaves the new surface standing where
+  its own layout puts it; the spot comes back with the surface it belongs to.
+  **A host has nothing to do.**
+- **A moved panel answers a host's size when the size changes.** A change to
+  `--ag-ui-width` or `--ag-ui-height` fires no event, so a panel the user had moved
+  stayed as the last restore left it until the next window resize or reopen. Reopened
+  under a host's size that then dropped, it stood short of its spot, at 716,232 for a
+  spot of 376,96, with the stored spot still right; sized up with no reopen, it could
+  grow past the top of the window. It now goes back to its spot as the size drops, and
+  under a bigger size it stands where a reopen already put it, held on the screen from
+  that spot, rather than growing away from the corner the layout held. A window-filling
+  size stands it at 0,0 at once, with no resize needed. **A host has nothing to do.**
+- **A moved panel answers a viewport inset token when the token changes.** A page
+  that publishes `--ag-ui-viewport-inset-top` from its own `ResizeObserver`, as the
+  README recommends, does so after the window's resize event, so the restore that event
+  starts read the bar at its old height. Widening a window past the width where the bar
+  shrinks left the panel 35px below its spot on the playground, top 224 for a spot of
+  189, and narrowing left it under a bar that had grown. It now settles from the token
+  as it stands, a frame later, on any of the four viewport inset tokens and however
+  late the page writes them. **A host has nothing to do.**
+- **The header's cursor no longer offers a drag that cannot happen.** A panel that
+  had become the screen on a narrow window with a mouse, or a docked panel under
+  `collapse-to="bar"` or `"none"` that a host's own size had made the window, showed
+  `cursor: move` although its header could not move it. The cursor is now `auto` there,
+  and stays `move` everywhere the drag is allowed. **A host has nothing to do.**
+
 ## [0.49.0] — 2026-11-07
 
 ### Added
@@ -5048,7 +5220,9 @@ hosts that both arrange the page the way it expects.
 ### Notes
 - First release — exercising the automated npm OIDC publish pipeline end-to-end.
 
-[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.49.0...HEAD
+[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.50.1...HEAD
+[0.50.1]: https://github.com/Artui/ag-ui-web-component/compare/v0.50.0...v0.50.1
+[0.50.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.49.0...v0.50.0
 [0.49.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.48.0...v0.49.0
 [0.48.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.47.0...v0.48.0
 [0.47.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.46.0...v0.47.0

package/README.md

@@ -1467,7 +1467,11 @@ the bar's height. The component never writes your CSS, and a custom property can
 height up to your page (it inherits down, never up), so it hands you a number:
 `barHeight` (CSS px, read-only) and an `ag-ui-bar-height` event (the `BAR_HEIGHT_EVENT`
 constant, detail `{ height }`) on every change, including a font-size change. Both read `0`
-where no bar is drawn: under `auto` and `none`, and on a phone while the panel is open.
+where no bar is drawn: under `auto` and `none`, on a phone while the panel is open, and while your
+size fills the window with the panel open. If you write the height into
+`--ag-ui-viewport-inset-bottom`, a panel that fills the box that leaves stays judged against that
+box once the bar goes and the box grows by the bar's height: it settles with the bar gone and room
+at its foot. Writing some other share of the height does not settle; publish it to your page as below.
 
 ```js
 const chat = document.querySelector("ag-ui-chat");
@@ -1509,6 +1513,13 @@ launcher to drag: the bar and your own control stay where they are.
   forgetting the stored spot, so a reload opens it there too.
 - **Keeping it fixed.** `data-launcher-drag="false"` turns the header drag and `moveTo` off here as
   everywhere else, and the panel stays on its dock.
+- **A host's size that fills the window.** Set `--ag-ui-width` and `--ag-ui-height` to the whole
+  window, with `--ag-ui-max-width` and `--ag-ui-max-height` out of the way (the defaults stop short
+  of it), and the panel stands at the start of the room you left free, whether it was moved or not.
+  The bar and the grips go while it does, as on a phone, with `barHeight` at 0 and the header's
+  minimise control as the way back. The bar comes back when the panel is collapsed, and both when
+  your size stops filling. The stored spot stays, and the panel goes back to it, or to its dock,
+  once your size stops filling. An inline `--ag-ui-inset` of your own stays where you wrote it.
 
 Placements that own their position (`side` and `full` under `bar`, `sidebar` and `embedded`
 under `none`) do not move, as without `collapse-to`.
@@ -3330,7 +3341,8 @@ and set a mid-tone accent, set `--ag-ui-on-accent` yourself. There is no script
 
 Quiet draws the header, the launcher and the tool names in the panel's own colours, so a host that
 sets only `--ag-ui-accent` gets a neutral header. To put the accent back without leaving Quiet, set
-the surfaces to the accent and the text on them to a colour that reads on it:
+the surfaces to the accent and the text on them to a colour that reads on it. The same recipe holds
+under every other theme:
 
 ```css
 ag-ui-chat {
@@ -3342,19 +3354,19 @@ ag-ui-chat {
 }
 ```
 
-- **The header buttons follow `--ag-ui-header-fg`.** Unset, Quiet draws them in its third ink at
-  0.85 opacity, on a hover square of the panel's hover shade. Once you set the header text they
-  draw in it at full opacity, and the hover square is the opposite of that text at about a fifth
-  (a darker square under white text, a lighter one under dark text), so a hovered button reads at
-  least what your header pair reads. The same holds under a theme word of your own, which starts
-  from Quiet. No `::part(header-button)` rule is needed. The opposite is computed with relative
+- **The header buttons follow `--ag-ui-header-fg`, under every theme.** Unset, each theme draws
+  them its own way at 0.85 opacity: Quiet, Soft and Ledger in their third ink, Classic and Code in
+  the header text, each on its own hover square. Once you set the header text they draw in it at
+  full opacity, and the hover square is the opposite of that text at about a fifth (a darker square
+  under white text, a lighter one under dark text), so a hovered button reads at least what your
+  header pair reads. A theme word of your own starts from Quiet, so it holds there too. No
+  `::part(header-button)` rule is needed. The opposite is computed with relative
   colour syntax; the browsers without it (see the fallback above) mix the square from the text
   itself, which on a mid-tone header can take the hovered glyph under your pair (white on
   `#3d5afe`: 3.75:1).
-- **`--ag-ui-header-btn-hover` sets the hover square outright** under Quiet and a theme word of your
-  own, whether or not the header text is set, and is drawn exactly as given. Classic, Soft and
-  Ledger draw their own squares and do not read it. For a square that lightens under white text
-  instead, at the cost of contrast on a mid-tone header:
+- **`--ag-ui-header-btn-hover` sets the hover square outright** under every theme, whether or not
+  the header text is set, and is drawn exactly as given. For a square that lightens under white
+  text instead, at the cost of contrast on a mid-tone header:
 
   ```css
   ag-ui-chat { --ag-ui-header-btn-hover: color-mix(in srgb, #ffffff 18%, transparent); }
@@ -3362,8 +3374,7 @@ ag-ui-chat {
 - **`--ag-ui-tool-fg` colours every tool call**, in a step group as well as in the card displays.
   Unset, a grouped call is drawn in the second ink (`--ag-ui-ink-2`) under every theme.
 - Pick the pair yourself: `--ag-ui-header-fg` is not derived from the header colour the way
-  `--ag-ui-on-accent` is from the accent. Under Soft and Ledger the header buttons keep their own
-  third ink whatever you set.
+  `--ag-ui-on-accent` is from the accent.
 
 #### Overriding a theme, lightest layer first