@ag2/weave 0.10.0 → 0.12.0

package/dist/index.js

@@ -5,12 +5,13 @@ import classNames from "classnames";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
 const color_css_ts_vanilla = "";
-var color = { Identity: { OnMain: "var(--_19in3xh0)", Yellow: "var(--_19in3xh1)", Green: "var(--_19in3xh2)", Mint: "var(--_19in3xh3)", Blue: "var(--_19in3xh4)", Indigo: "var(--_19in3xh5)", Wine: "var(--_19in3xh6)", Red: "var(--_19in3xh7)", Orange: "var(--_19in3xh8)", Brown: "var(--_19in3xh9)", Pink: "var(--_19in3xha)", Peach: "var(--_19in3xhb)", Ochre: "var(--_19in3xhc)" }, IdentityFill: { Yellow: "var(--_19in3xhd)", Green: "var(--_19in3xhe)", Mint: "var(--_19in3xhf)", Blue: "var(--_19in3xhg)", Indigo: "var(--_19in3xhh)", Wine: "var(--_19in3xhi)", Red: "var(--_19in3xhj)", Orange: "var(--_19in3xhk)", Brown: "var(--_19in3xhl)", Pink: "var(--_19in3xhm)", Peach: "var(--_19in3xhn)", Ochre: "var(--_19in3xho)" }, IdentityTint: { Yellow: "var(--_19in3xhp)", Green: "var(--_19in3xhq)", Mint: "var(--_19in3xhr)", Blue: "var(--_19in3xhs)", Indigo: "var(--_19in3xht)", Wine: "var(--_19in3xhu)", Red: "var(--_19in3xhv)", Orange: "var(--_19in3xhw)", Brown: "var(--_19in3xhx)", Pink: "var(--_19in3xhy)", Peach: "var(--_19in3xhz)", Ochre: "var(--_19in3xh10)" }, Media: { Container: "var(--_19in3xh11)", Raised: "var(--_19in3xh12)", Elevated: "var(--_19in3xh13)", Text: "var(--_19in3xh14)", TextSecondary: "var(--_19in3xh15)", TextQuiet: "var(--_19in3xh16)", Line: "var(--_19in3xh17)", Success: "var(--_19in3xh18)", Warning: "var(--_19in3xh19)", Critical: "var(--_19in3xh1a)", Action: "var(--_19in3xh1b)", ActionFill: "var(--_19in3xh1c)", OnActionFill: "var(--_19in3xh1d)", CriticalFill: "var(--_19in3xh1e)", OnCriticalFill: "var(--_19in3xh1f)" }, Syntax: { Comment: "var(--_19in3xh1g)", Punctuation: "var(--_19in3xh1h)", Property: "var(--_19in3xh1i)", Selector: "var(--_19in3xh1j)", String: "var(--_19in3xh1k)", Operator: "var(--_19in3xh1l)", Keyword: "var(--_19in3xh1m)", Function: "var(--_19in3xh1n)", Variable: "var(--_19in3xh1o)", Number: "var(--_19in3xh1p)" }, Reason: { you: "var(--_19in3xh1q)", agent: "var(--_19in3xh1r)", participant: "var(--_19in3xh1s)" }, Background: { Container: "var(--_19in3xh1t)", ContainerHover: "var(--_19in3xh1u)", ContainerActive: "var(--_19in3xh1v)", ContainerLine: "var(--_19in3xh1w)", OnContainer: "var(--_19in3xh1x)" }, Surface: { Container: "var(--_19in3xh1y)", ContainerHover: "var(--_19in3xh1z)", ContainerActive: "var(--_19in3xh20)", ContainerLine: "var(--_19in3xh21)", OnContainer: "var(--_19in3xh22)" }, SurfaceVariant: { Container: "var(--_19in3xh23)", ContainerHover: "var(--_19in3xh24)", ContainerActive: "var(--_19in3xh25)", ContainerLine: "var(--_19in3xh26)", OnContainer: "var(--_19in3xh27)" }, Destructive: { Main: "var(--_19in3xh28)", MainHover: "var(--_19in3xh29)", MainActive: "var(--_19in3xh2a)", OnMain: "var(--_19in3xh2b)" }, Action: { Main: "var(--_19in3xh2c)", MainHover: "var(--_19in3xh2d)", MainActive: "var(--_19in3xh2e)", OnMain: "var(--_19in3xh2f)" }, Primary: { ContainerSubtle: "var(--_19in3xh2g)", TagContainer: "var(--_19in3xh2h)", Main: "var(--_19in3xh2i)", MainHover: "var(--_19in3xh2j)", MainActive: "var(--_19in3xh2k)", MainLine: "var(--_19in3xh2l)", OnMain: "var(--_19in3xh2m)", Container: "var(--_19in3xh2n)", ContainerHover: "var(--_19in3xh2o)", ContainerActive: "var(--_19in3xh2p)", ContainerLine: "var(--_19in3xh2q)", OnContainer: "var(--_19in3xh2r)" }, Secondary: { Main: "var(--_19in3xh2s)", MainHover: "var(--_19in3xh2t)", MainActive: "var(--_19in3xh2u)", MainLine: "var(--_19in3xh2v)", OnMain: "var(--_19in3xh2w)", Container: "var(--_19in3xh2x)", ContainerHover: "var(--_19in3xh2y)", ContainerActive: "var(--_19in3xh2z)", ContainerLine: "var(--_19in3xh30)", OnContainer: "var(--_19in3xh31)" }, Success: { TagContainer: "var(--_19in3xh32)", TagHover: "var(--_19in3xh33)", TagActive: "var(--_19in3xh34)", OnTag: "var(--_19in3xh35)", Main: "var(--_19in3xh36)", MainHover: "var(--_19in3xh37)", MainActive: "var(--_19in3xh38)", MainLine: "var(--_19in3xh39)", OnMain: "var(--_19in3xh3a)", Container: "var(--_19in3xh3b)", ContainerHover: "var(--_19in3xh3c)", ContainerActive: "var(--_19in3xh3d)", ContainerLine: "var(--_19in3xh3e)", OnContainer: "var(--_19in3xh3f)" }, Warning: { TagContainer: "var(--_19in3xh3g)", TagHover: "var(--_19in3xh3h)", TagActive: "var(--_19in3xh3i)", OnTag: "var(--_19in3xh3j)", Main: "var(--_19in3xh3k)", MainHover: "var(--_19in3xh3l)", MainActive: "var(--_19in3xh3m)", MainLine: "var(--_19in3xh3n)", OnMain: "var(--_19in3xh3o)", Container: "var(--_19in3xh3p)", ContainerHover: "var(--_19in3xh3q)", ContainerActive: "var(--_19in3xh3r)", ContainerLine: "var(--_19in3xh3s)", OnContainer: "var(--_19in3xh3t)" }, Critical: { TagContainer: "var(--_19in3xh3u)", TagHover: "var(--_19in3xh3v)", TagActive: "var(--_19in3xh3w)", OnTag: "var(--_19in3xh3x)", Main: "var(--_19in3xh3y)", MainHover: "var(--_19in3xh3z)", MainActive: "var(--_19in3xh40)", MainLine: "var(--_19in3xh41)", OnMain: "var(--_19in3xh42)", Container: "var(--_19in3xh43)", ContainerHover: "var(--_19in3xh44)", ContainerActive: "var(--_19in3xh45)", ContainerLine: "var(--_19in3xh46)", OnContainer: "var(--_19in3xh47)" }, Info: { TagContainer: "var(--_19in3xh48)", TagHover: "var(--_19in3xh49)", TagActive: "var(--_19in3xh4a)", OnTag: "var(--_19in3xh4b)", Main: "var(--_19in3xh4c)", MainHover: "var(--_19in3xh4d)", MainActive: "var(--_19in3xh4e)", MainLine: "var(--_19in3xh4f)", OnMain: "var(--_19in3xh4g)", Container: "var(--_19in3xh4h)", ContainerHover: "var(--_19in3xh4i)", ContainerActive: "var(--_19in3xh4j)", ContainerLine: "var(--_19in3xh4k)", OnContainer: "var(--_19in3xh4l)" }, Accent: { Main: "var(--_19in3xh4m)", MainHover: "var(--_19in3xh4n)", MainActive: "var(--_19in3xh4o)", MainLine: "var(--_19in3xh4p)", OnMain: "var(--_19in3xh4q)", Container: "var(--_19in3xh4r)", ContainerHover: "var(--_19in3xh4s)", ContainerActive: "var(--_19in3xh4t)", ContainerLine: "var(--_19in3xh4u)", OnContainer: "var(--_19in3xh4v)" }, Highlight: { Container: "var(--_19in3xh4w)", OnContainer: "var(--_19in3xh4x)", Overlay: "var(--_19in3xh4y)" }, Control: { DisabledBackground: "var(--_19in3xh4z)", DisabledForeground: "var(--_19in3xh50)" }, Other: { FocusRing: "var(--_19in3xh51)", Shadow: "var(--_19in3xh52)", Overlay: "var(--_19in3xh53)" }, Text: { Disabled: "var(--_19in3xh54)", Primary: "var(--_19in3xh55)", Secondary: "var(--_19in3xh56)", Link: "var(--_19in3xh57)", Quiet: "var(--_19in3xh58)" }, Border: { Focus: "var(--_19in3xh59)", Subtle: "var(--_19in3xh5a)" } };
-var lightTheme = "_19in3xh5b";
-var reason = { you: "var(--_19in3xh1q)", agent: "var(--_19in3xh1r)", participant: "var(--_19in3xh1s)" };
+var color = { Identity: { OnMain: "var(--_19in3xh0)", Yellow: "var(--_19in3xh1)", Green: "var(--_19in3xh2)", Mint: "var(--_19in3xh3)", Blue: "var(--_19in3xh4)", Indigo: "var(--_19in3xh5)", Wine: "var(--_19in3xh6)", Red: "var(--_19in3xh7)", Orange: "var(--_19in3xh8)", Brown: "var(--_19in3xh9)", Pink: "var(--_19in3xha)", Peach: "var(--_19in3xhb)", Ochre: "var(--_19in3xhc)" }, IdentityFill: { Yellow: "var(--_19in3xhd)", Green: "var(--_19in3xhe)", Mint: "var(--_19in3xhf)", Blue: "var(--_19in3xhg)", Indigo: "var(--_19in3xhh)", Wine: "var(--_19in3xhi)", Red: "var(--_19in3xhj)", Orange: "var(--_19in3xhk)", Brown: "var(--_19in3xhl)", Pink: "var(--_19in3xhm)", Peach: "var(--_19in3xhn)", Ochre: "var(--_19in3xho)" }, IdentityTint: { Yellow: "var(--_19in3xhp)", Green: "var(--_19in3xhq)", Mint: "var(--_19in3xhr)", Blue: "var(--_19in3xhs)", Indigo: "var(--_19in3xht)", Wine: "var(--_19in3xhu)", Red: "var(--_19in3xhv)", Orange: "var(--_19in3xhw)", Brown: "var(--_19in3xhx)", Pink: "var(--_19in3xhy)", Peach: "var(--_19in3xhz)", Ochre: "var(--_19in3xh10)" }, Media: { Container: "var(--_19in3xh11)", Raised: "var(--_19in3xh12)", Elevated: "var(--_19in3xh13)", Text: "var(--_19in3xh14)", TextSecondary: "var(--_19in3xh15)", TextQuiet: "var(--_19in3xh16)", Line: "var(--_19in3xh17)", Success: "var(--_19in3xh18)", Warning: "var(--_19in3xh19)", Critical: "var(--_19in3xh1a)", Action: "var(--_19in3xh1b)", ActionFill: "var(--_19in3xh1c)", OnActionFill: "var(--_19in3xh1d)", CriticalFill: "var(--_19in3xh1e)", OnCriticalFill: "var(--_19in3xh1f)" }, Syntax: { Comment: "var(--_19in3xh1g)", Punctuation: "var(--_19in3xh1h)", Property: "var(--_19in3xh1i)", Selector: "var(--_19in3xh1j)", String: "var(--_19in3xh1k)", Operator: "var(--_19in3xh1l)", Keyword: "var(--_19in3xh1m)", Function: "var(--_19in3xh1n)", Variable: "var(--_19in3xh1o)", Number: "var(--_19in3xh1p)" }, Notification: { Indicator: "var(--_19in3xh1q)", Text: "var(--_19in3xh1r)", Fill: "var(--_19in3xh1s)", OnFill: "var(--_19in3xh1t)" }, Reason: { you: "var(--_19in3xh1u)", agent: "var(--_19in3xh1v)", participant: "var(--_19in3xh1w)" }, Background: { Container: "var(--_19in3xh1x)", ContainerHover: "var(--_19in3xh1y)", ContainerActive: "var(--_19in3xh1z)", ContainerLine: "var(--_19in3xh20)", OnContainer: "var(--_19in3xh21)" }, Surface: { Container: "var(--_19in3xh22)", ContainerHover: "var(--_19in3xh23)", ContainerActive: "var(--_19in3xh24)", ContainerLine: "var(--_19in3xh25)", OnContainer: "var(--_19in3xh26)" }, SurfaceVariant: { Container: "var(--_19in3xh27)", ContainerHover: "var(--_19in3xh28)", ContainerActive: "var(--_19in3xh29)", ContainerLine: "var(--_19in3xh2a)", OnContainer: "var(--_19in3xh2b)" }, Destructive: { Main: "var(--_19in3xh2c)", MainHover: "var(--_19in3xh2d)", MainActive: "var(--_19in3xh2e)", OnMain: "var(--_19in3xh2f)" }, Action: { Main: "var(--_19in3xh2g)", MainHover: "var(--_19in3xh2h)", MainActive: "var(--_19in3xh2i)", OnMain: "var(--_19in3xh2j)" }, Primary: { ContainerSubtle: "var(--_19in3xh2k)", TagContainer: "var(--_19in3xh2l)", Main: "var(--_19in3xh2m)", MainHover: "var(--_19in3xh2n)", MainActive: "var(--_19in3xh2o)", MainLine: "var(--_19in3xh2p)", OnMain: "var(--_19in3xh2q)", Container: "var(--_19in3xh2r)", ContainerHover: "var(--_19in3xh2s)", ContainerActive: "var(--_19in3xh2t)", ContainerLine: "var(--_19in3xh2u)", OnContainer: "var(--_19in3xh2v)" }, Secondary: { Main: "var(--_19in3xh2w)", MainHover: "var(--_19in3xh2x)", MainActive: "var(--_19in3xh2y)", MainLine: "var(--_19in3xh2z)", OnMain: "var(--_19in3xh30)", Container: "var(--_19in3xh31)", ContainerHover: "var(--_19in3xh32)", ContainerActive: "var(--_19in3xh33)", ContainerLine: "var(--_19in3xh34)", OnContainer: "var(--_19in3xh35)" }, Success: { TagContainer: "var(--_19in3xh36)", TagHover: "var(--_19in3xh37)", TagActive: "var(--_19in3xh38)", OnTag: "var(--_19in3xh39)", Main: "var(--_19in3xh3a)", MainHover: "var(--_19in3xh3b)", MainActive: "var(--_19in3xh3c)", MainLine: "var(--_19in3xh3d)", OnMain: "var(--_19in3xh3e)", Container: "var(--_19in3xh3f)", ContainerHover: "var(--_19in3xh3g)", ContainerActive: "var(--_19in3xh3h)", ContainerLine: "var(--_19in3xh3i)", OnContainer: "var(--_19in3xh3j)" }, Warning: { TagContainer: "var(--_19in3xh3k)", TagHover: "var(--_19in3xh3l)", TagActive: "var(--_19in3xh3m)", OnTag: "var(--_19in3xh3n)", Main: "var(--_19in3xh3o)", MainHover: "var(--_19in3xh3p)", MainActive: "var(--_19in3xh3q)", MainLine: "var(--_19in3xh3r)", OnMain: "var(--_19in3xh3s)", Container: "var(--_19in3xh3t)", ContainerHover: "var(--_19in3xh3u)", ContainerActive: "var(--_19in3xh3v)", ContainerLine: "var(--_19in3xh3w)", OnContainer: "var(--_19in3xh3x)" }, Critical: { TagContainer: "var(--_19in3xh3y)", TagHover: "var(--_19in3xh3z)", TagActive: "var(--_19in3xh40)", OnTag: "var(--_19in3xh41)", Main: "var(--_19in3xh42)", MainHover: "var(--_19in3xh43)", MainActive: "var(--_19in3xh44)", MainLine: "var(--_19in3xh45)", OnMain: "var(--_19in3xh46)", Container: "var(--_19in3xh47)", ContainerHover: "var(--_19in3xh48)", ContainerActive: "var(--_19in3xh49)", ContainerLine: "var(--_19in3xh4a)", OnContainer: "var(--_19in3xh4b)" }, Info: { TagContainer: "var(--_19in3xh4c)", TagHover: "var(--_19in3xh4d)", TagActive: "var(--_19in3xh4e)", OnTag: "var(--_19in3xh4f)", Main: "var(--_19in3xh4g)", MainHover: "var(--_19in3xh4h)", MainActive: "var(--_19in3xh4i)", MainLine: "var(--_19in3xh4j)", OnMain: "var(--_19in3xh4k)", Container: "var(--_19in3xh4l)", ContainerHover: "var(--_19in3xh4m)", ContainerActive: "var(--_19in3xh4n)", ContainerLine: "var(--_19in3xh4o)", OnContainer: "var(--_19in3xh4p)" }, Accent: { Main: "var(--_19in3xh4q)", MainHover: "var(--_19in3xh4r)", MainActive: "var(--_19in3xh4s)", MainLine: "var(--_19in3xh4t)", OnMain: "var(--_19in3xh4u)", Container: "var(--_19in3xh4v)", ContainerHover: "var(--_19in3xh4w)", ContainerActive: "var(--_19in3xh4x)", ContainerLine: "var(--_19in3xh4y)", OnContainer: "var(--_19in3xh4z)" }, Highlight: { Container: "var(--_19in3xh50)", OnContainer: "var(--_19in3xh51)", Overlay: "var(--_19in3xh52)" }, Control: { DisabledBackground: "var(--_19in3xh53)", DisabledForeground: "var(--_19in3xh54)" }, Other: { FocusRing: "var(--_19in3xh55)", Shadow: "var(--_19in3xh56)", Overlay: "var(--_19in3xh57)" }, Text: { Disabled: "var(--_19in3xh58)", Primary: "var(--_19in3xh59)", Secondary: "var(--_19in3xh5a)", Link: "var(--_19in3xh5b)", Quiet: "var(--_19in3xh5c)" }, Border: { Focus: "var(--_19in3xh5d)", Subtle: "var(--_19in3xh5e)" } };
+var lightTheme = "_19in3xh5f";
+var reason = { you: "var(--_19in3xh1u)", agent: "var(--_19in3xh1v)", participant: "var(--_19in3xh1w)" };
 const config_css_ts_vanilla = "";
-var config = { font: { Inter: "var(--_1s7qa7e1)" }, fontSize: { D400: "var(--_1s7qa7e2)", H1: "var(--_1s7qa7e3)", H2: "var(--_1s7qa7e4)", H3: "var(--_1s7qa7e5)", H4: "var(--_1s7qa7e6)", H5: "var(--_1s7qa7e7)", H6: "var(--_1s7qa7e8)", T500: "var(--_1s7qa7e9)", T400: "var(--_1s7qa7ea)", T300: "var(--_1s7qa7eb)", T200: "var(--_1s7qa7ec)", B500: "var(--_1s7qa7ed)", B400: "var(--_1s7qa7ee)", B300: "var(--_1s7qa7ef)", L400: "var(--_1s7qa7eg)", O400: "var(--_1s7qa7eh)", C400: "var(--_1s7qa7ei)" }, lineHeight: { D400: "var(--_1s7qa7ej)", H1: "var(--_1s7qa7ek)", H2: "var(--_1s7qa7el)", H3: "var(--_1s7qa7em)", H4: "var(--_1s7qa7en)", H5: "var(--_1s7qa7eo)", H6: "var(--_1s7qa7ep)", T500: "var(--_1s7qa7eq)", T400: "var(--_1s7qa7er)", T300: "var(--_1s7qa7es)", T200: "var(--_1s7qa7et)", B500: "var(--_1s7qa7eu)", B400: "var(--_1s7qa7ev)", B300: "var(--_1s7qa7ew)", L400: "var(--_1s7qa7ex)", O400: "var(--_1s7qa7ey)", C400: "var(--_1s7qa7ez)" }, letterSpacing: { D400: "var(--_1s7qa7e10)", H1: "var(--_1s7qa7e11)", H2: "var(--_1s7qa7e12)", H3: "var(--_1s7qa7e13)", H4: "var(--_1s7qa7e14)", H5: "var(--_1s7qa7e15)", H6: "var(--_1s7qa7e16)", T500: "var(--_1s7qa7e17)", T400: "var(--_1s7qa7e18)", T300: "var(--_1s7qa7e19)", T200: "var(--_1s7qa7e1a)", B500: "var(--_1s7qa7e1b)", B400: "var(--_1s7qa7e1c)", B300: "var(--_1s7qa7e1d)", L400: "var(--_1s7qa7e1e)", O400: "var(--_1s7qa7e1f)", C400: "var(--_1s7qa7e1g)" }, fontWeight: { W100: "var(--_1s7qa7e1h)", W200: "var(--_1s7qa7e1i)", W300: "var(--_1s7qa7e1j)", W400: "var(--_1s7qa7e1k)", W500: "var(--_1s7qa7e1l)", W600: "var(--_1s7qa7e1m)", W700: "var(--_1s7qa7e1n)", W800: "var(--_1s7qa7e1o)", W900: "var(--_1s7qa7e1p)" }, space: { S0: "var(--_1s7qa7e1q)", S100: "var(--_1s7qa7e1r)", S200: "var(--_1s7qa7e1s)", S300: "var(--_1s7qa7e1t)", S400: "var(--_1s7qa7e1u)", S500: "var(--_1s7qa7e1v)", S600: "var(--_1s7qa7e1w)", S700: "var(--_1s7qa7e1x)" }, radii: { R0: "var(--_1s7qa7e1y)", R300: "var(--_1s7qa7e1z)", R400: "var(--_1s7qa7e20)", R500: "var(--_1s7qa7e21)", R600: "var(--_1s7qa7e22)", Round: "var(--_1s7qa7e23)", Pill: "var(--_1s7qa7e24)" }, borderWidth: { B0: "var(--_1s7qa7e25)", B300: "var(--_1s7qa7e26)", B400: "var(--_1s7qa7e27)", B500: "var(--_1s7qa7e28)", B600: "var(--_1s7qa7e29)", B700: "var(--_1s7qa7e2a)" }, zIndex: { Z100: "var(--_1s7qa7e2b)", Z200: "var(--_1s7qa7e2c)", Z300: "var(--_1s7qa7e2d)", Z400: "var(--_1s7qa7e2e)", Max: "var(--_1s7qa7e2f)" }, shadow: { Control: "var(--_1s7qa7e2g)", ControlHover: "var(--_1s7qa7e2h)", ControlPressed: "var(--_1s7qa7e2i)", DestructiveInner: "var(--_1s7qa7e2j)", ActionInner: "var(--_1s7qa7e2k)", ActionInnerHover: "var(--_1s7qa7e2l)", ActionInnerPressed: "var(--_1s7qa7e2m)", FieldActive: "var(--_1s7qa7e2n)", ToggleOffInner: "var(--_1s7qa7e2o)", ToggleInner: "var(--_1s7qa7e2p)", Thumb: "var(--_1s7qa7e2q)", E100: "var(--_1s7qa7e2r)", E200: "var(--_1s7qa7e2s)", E300: "var(--_1s7qa7e2t)", E400: "var(--_1s7qa7e2u)" }, size: { XInherit: "var(--_1s7qa7e2v)", X50: "var(--_1s7qa7e2w)", X100: "var(--_1s7qa7e2x)", X200: "var(--_1s7qa7e2y)", X300: "var(--_1s7qa7e2z)", X400: "var(--_1s7qa7e30)", X500: "var(--_1s7qa7e31)", X600: "var(--_1s7qa7e32)", DialogWidth: "var(--_1s7qa7e33)", ModalHeight300: "var(--_1s7qa7e34)", ModalHeight400: "var(--_1s7qa7e35)", ModalHeight500: "var(--_1s7qa7e36)", ModalWidth300: "var(--_1s7qa7e37)", ModalWidth400: "var(--_1s7qa7e38)", ModalWidth500: "var(--_1s7qa7e39)", ModalDrawerWidth: "var(--_1s7qa7e3a)" }, control: { FocusRing: "var(--_1s7qa7e3b)", ActiveRing: "var(--_1s7qa7e3c)", SelectionFill: "var(--_1s7qa7e3d)", OnSelection: "var(--_1s7qa7e3e)", PrimaryFill: "var(--_1s7qa7e3f)", PrimaryHover: "var(--_1s7qa7e3g)", PrimaryActive: "var(--_1s7qa7e3h)", OnPrimary: "var(--_1s7qa7e3i)" }, transition: { Toggle: "var(--_1s7qa7e3j)", Control: "var(--_1s7qa7e3k)" }, opacity: { P500: "var(--_1s7qa7e3l)", P400: "var(--_1s7qa7e3m)", P300: "var(--_1s7qa7e3n)", Placeholder: "var(--_1s7qa7e3o)", Disabled: "var(--_1s7qa7e3p)" } };
+var config = { font: { Inter: "var(--_1s7qa7e1)" }, fontSize: { D400: "var(--_1s7qa7e2)", H1: "var(--_1s7qa7e3)", H2: "var(--_1s7qa7e4)", H3: "var(--_1s7qa7e5)", H4: "var(--_1s7qa7e6)", H5: "var(--_1s7qa7e7)", H6: "var(--_1s7qa7e8)", T500: "var(--_1s7qa7e9)", T400: "var(--_1s7qa7ea)", T300: "var(--_1s7qa7eb)", T200: "var(--_1s7qa7ec)", B500: "var(--_1s7qa7ed)", B400: "var(--_1s7qa7ee)", B300: "var(--_1s7qa7ef)", L400: "var(--_1s7qa7eg)", O400: "var(--_1s7qa7eh)", C400: "var(--_1s7qa7ei)" }, lineHeight: { D400: "var(--_1s7qa7ej)", H1: "var(--_1s7qa7ek)", H2: "var(--_1s7qa7el)", H3: "var(--_1s7qa7em)", H4: "var(--_1s7qa7en)", H5: "var(--_1s7qa7eo)", H6: "var(--_1s7qa7ep)", T500: "var(--_1s7qa7eq)", T400: "var(--_1s7qa7er)", T300: "var(--_1s7qa7es)", T200: "var(--_1s7qa7et)", B500: "var(--_1s7qa7eu)", B400: "var(--_1s7qa7ev)", B300: "var(--_1s7qa7ew)", L400: "var(--_1s7qa7ex)", O400: "var(--_1s7qa7ey)", C400: "var(--_1s7qa7ez)" }, letterSpacing: { D400: "var(--_1s7qa7e10)", H1: "var(--_1s7qa7e11)", H2: "var(--_1s7qa7e12)", H3: "var(--_1s7qa7e13)", H4: "var(--_1s7qa7e14)", H5: "var(--_1s7qa7e15)", H6: "var(--_1s7qa7e16)", T500: "var(--_1s7qa7e17)", T400: "var(--_1s7qa7e18)", T300: "var(--_1s7qa7e19)", T200: "var(--_1s7qa7e1a)", B500: "var(--_1s7qa7e1b)", B400: "var(--_1s7qa7e1c)", B300: "var(--_1s7qa7e1d)", L400: "var(--_1s7qa7e1e)", O400: "var(--_1s7qa7e1f)", C400: "var(--_1s7qa7e1g)" }, fontWeight: { W100: "var(--_1s7qa7e1h)", W200: "var(--_1s7qa7e1i)", W300: "var(--_1s7qa7e1j)", W400: "var(--_1s7qa7e1k)", W500: "var(--_1s7qa7e1l)", W600: "var(--_1s7qa7e1m)", W700: "var(--_1s7qa7e1n)", W800: "var(--_1s7qa7e1o)", W900: "var(--_1s7qa7e1p)" }, space: { S0: "var(--_1s7qa7e1q)", S100: "var(--_1s7qa7e1r)", S200: "var(--_1s7qa7e1s)", S300: "var(--_1s7qa7e1t)", S400: "var(--_1s7qa7e1u)", S500: "var(--_1s7qa7e1v)", S600: "var(--_1s7qa7e1w)", S700: "var(--_1s7qa7e1x)" }, radii: { R0: "var(--_1s7qa7e1y)", R300: "var(--_1s7qa7e1z)", R400: "var(--_1s7qa7e20)", R500: "var(--_1s7qa7e21)", R600: "var(--_1s7qa7e22)", Round: "var(--_1s7qa7e23)", Pill: "var(--_1s7qa7e24)" }, borderWidth: { B0: "var(--_1s7qa7e25)", B300: "var(--_1s7qa7e26)", B400: "var(--_1s7qa7e27)", B500: "var(--_1s7qa7e28)", B600: "var(--_1s7qa7e29)", B700: "var(--_1s7qa7e2a)" }, zIndex: { Z100: "var(--_1s7qa7e2b)", Z200: "var(--_1s7qa7e2c)", Z300: "var(--_1s7qa7e2d)", Z400: "var(--_1s7qa7e2e)", Max: "var(--_1s7qa7e2f)" }, shadow: { Control: "var(--_1s7qa7e2g)", ControlHover: "var(--_1s7qa7e2h)", ControlPressed: "var(--_1s7qa7e2i)", DestructiveInner: "var(--_1s7qa7e2j)", ActionInner: "var(--_1s7qa7e2k)", ActionInnerHover: "var(--_1s7qa7e2l)", ActionInnerPressed: "var(--_1s7qa7e2m)", FieldActive: "var(--_1s7qa7e2n)", ToggleOffInner: "var(--_1s7qa7e2o)", ToggleInner: "var(--_1s7qa7e2p)", Thumb: "var(--_1s7qa7e2q)", E100: "var(--_1s7qa7e2r)", E200: "var(--_1s7qa7e2s)", E300: "var(--_1s7qa7e2t)", E400: "var(--_1s7qa7e2u)" }, size: { XInherit: "var(--_1s7qa7e2v)", X50: "var(--_1s7qa7e2w)", X100: "var(--_1s7qa7e2x)", X200: "var(--_1s7qa7e2y)", X300: "var(--_1s7qa7e2z)", X400: "var(--_1s7qa7e30)", X500: "var(--_1s7qa7e31)", X600: "var(--_1s7qa7e32)", DialogWidth: "var(--_1s7qa7e33)", ModalHeight300: "var(--_1s7qa7e34)", ModalHeight400: "var(--_1s7qa7e35)", ModalHeight500: "var(--_1s7qa7e36)", ModalWidth300: "var(--_1s7qa7e37)", ModalWidth400: "var(--_1s7qa7e38)", ModalWidth500: "var(--_1s7qa7e39)", ModalDrawerWidth: "var(--_1s7qa7e3a)" }, control: { FocusRing: "var(--_1s7qa7e3b)", ActiveRing: "var(--_1s7qa7e3c)", SelectionFill: "var(--_1s7qa7e3d)", OnSelection: "var(--_1s7qa7e3e)", PrimaryFill: "var(--_1s7qa7e3f)", PrimaryHover: "var(--_1s7qa7e3g)", PrimaryActive: "var(--_1s7qa7e3h)", OnPrimary: "var(--_1s7qa7e3i)" }, shell: { Canvas: "var(--_1s7qa7e3j)", OnCanvas: "var(--_1s7qa7e3k)", CanvasSecondary: "var(--_1s7qa7e3l)", CanvasHover: "var(--_1s7qa7e3m)", CanvasSelected: "var(--_1s7qa7e3n)", CanvasLine: "var(--_1s7qa7e3o)", PanelRadius: "var(--_1s7qa7e3p)", PanelInset: "var(--_1s7qa7e3q)" }, transition: { Toggle: "var(--_1s7qa7e3r)", Control: "var(--_1s7qa7e3s)" }, opacity: { P500: "var(--_1s7qa7e3t)", P400: "var(--_1s7qa7e3u)", P300: "var(--_1s7qa7e3v)", Placeholder: "var(--_1s7qa7e3w)", Disabled: "var(--_1s7qa7e3x)" } };
 var configClass = "_1s7qa7e0";
+var uiFontFamily = "'Haas Recast Dense', InterVariable, 'Inter', var(--font-emoji, emoji), -apple-system, 'Segoe UI', 'Helvetica', 'Arial', sans-serif";
 const vars_css_ts_vanilla = "";
 var vars = { outline: { FocusRing: "var(--_63e9g81)" } };
 var varsClass = "_63e9g80";
@@ -292,6 +293,10 @@ const brandFamilies = [
     ]
   }
 ];
+const notificationRed = brandColors.Red.replace(
+  /^oklch\(([\d.]+)/,
+  (_, lightness) => `oklch(${(Number(lightness) * 0.98).toFixed(9)}`
+);
 const lightColorValues = {
   Identity: {
     OnMain: colorScale.Neutral[0],
@@ -365,6 +370,12 @@ const lightColorValues = {
     Variable: colorScale.Wine[700],
     Number: colorScale.Brown[700]
   },
+  Notification: {
+    Indicator: notificationRed,
+    Text: colorScale.SignalRed[600],
+    Fill: notificationRed,
+    OnFill: colorScale.Neutral[0]
+  },
   Reason: {
     you: colorScale.Red[700],
     agent: colorScale.Indigo[700],
@@ -398,24 +409,24 @@ const lightColorValues = {
     OnMain: colorScale.Neutral[0]
   },
   Action: {
-    Main: colorScale.Blue[200],
-    MainHover: colorScale.Blue[300],
-    MainActive: colorScale.Blue[400],
-    OnMain: colorScale.Blue[950]
+    Main: colorScale.Neutral[950],
+    MainHover: colorScale.Neutral[925],
+    MainActive: colorScale.Neutral[900],
+    OnMain: colorScale.Neutral[0]
   },
   Primary: {
-    ContainerSubtle: colorScale.Blue[50],
-    TagContainer: colorScale.Blue[100],
-    Main: colorScale.Blue[600],
-    MainHover: colorScale.Blue[700],
-    MainActive: colorScale.Blue[800],
-    MainLine: colorScale.Blue[900],
+    ContainerSubtle: colorScale.Neutral[50],
+    TagContainer: colorScale.Neutral[100],
+    Main: colorScale.Neutral[950],
+    MainHover: colorScale.Neutral[925],
+    MainActive: colorScale.Neutral[900],
+    MainLine: colorScale.Neutral[750],
     OnMain: colorScale.Neutral[0],
-    Container: colorScale.Blue[200],
-    ContainerHover: colorScale.Blue[300],
-    ContainerActive: colorScale.Blue[400],
-    ContainerLine: colorScale.Blue[500],
-    OnContainer: colorScale.Blue[950]
+    Container: colorScale.Neutral[200],
+    ContainerHover: colorScale.Neutral[250],
+    ContainerActive: colorScale.Neutral[300],
+    ContainerLine: colorScale.Neutral[400],
+    OnContainer: colorScale.Neutral[950]
   },
   Secondary: {
     Main: colorScale.Neutral[950],
@@ -478,7 +489,7 @@ const lightColorValues = {
     OnContainer: colorScale.SignalRed[900]
   },
   Other: {
-    FocusRing: colorScale.Blue[600],
+    FocusRing: colorScale.Neutral[750],
     Shadow: `color-mix(in srgb, ${colorScale.Neutral[1e3]} 20%, transparent)`,
     Overlay: `color-mix(in srgb, ${colorScale.Neutral[1e3]} 50%, transparent)`
   },
@@ -527,7 +538,7 @@ const lightColorValues = {
     Quiet: colorScale.Neutral[575]
   },
   Border: {
-    Focus: colorScale.Blue[600],
+    Focus: colorScale.Neutral[750],
     Subtle: colorScale.Neutral[75]
   }
 };
@@ -604,6 +615,12 @@ const darkColorValues = {
     Variable: colorScale.Wine[200],
     Number: colorScale.Brown[200]
   },
+  Notification: {
+    Indicator: colorScale.SignalRed[400],
+    Text: colorScale.SignalRed[300],
+    Fill: notificationRed,
+    OnFill: colorScale.Neutral[0]
+  },
   Reason: {
     you: colorScale.Red[200],
     agent: colorScale.Indigo[200],
@@ -637,24 +654,24 @@ const darkColorValues = {
     OnMain: colorScale.Neutral[0]
   },
   Action: {
-    Main: colorScale.Blue[200],
-    MainHover: colorScale.Blue[300],
-    MainActive: colorScale.Blue[400],
-    OnMain: colorScale.Blue[950]
+    Main: colorScale.Neutral[50],
+    MainHover: colorScale.Neutral[100],
+    MainActive: colorScale.Neutral[200],
+    OnMain: colorScale.Neutral[950]
   },
   Primary: {
-    ContainerSubtle: colorScale.Blue[950],
-    TagContainer: colorScale.Blue[800],
-    Main: colorScale.Blue[200],
-    MainHover: colorScale.Blue[300],
-    MainActive: colorScale.Blue[400],
-    MainLine: colorScale.Blue[500],
+    ContainerSubtle: colorScale.Neutral[950],
+    TagContainer: colorScale.Neutral[800],
+    Main: colorScale.Neutral[50],
+    MainHover: colorScale.Neutral[100],
+    MainActive: colorScale.Neutral[200],
+    MainLine: colorScale.Neutral[300],
     OnMain: colorScale.Neutral[950],
-    Container: colorScale.Blue[900],
-    ContainerHover: colorScale.Blue[800],
-    ContainerActive: colorScale.Blue[700],
-    ContainerLine: colorScale.Blue[600],
-    OnContainer: colorScale.Blue[100]
+    Container: colorScale.Neutral[750],
+    ContainerHover: colorScale.Neutral[700],
+    ContainerActive: colorScale.Neutral[650],
+    ContainerLine: colorScale.Neutral[600],
+    OnContainer: colorScale.Neutral[50]
   },
   Secondary: {
     Main: colorScale.Neutral[50],
@@ -717,7 +734,7 @@ const darkColorValues = {
     OnContainer: colorScale.SignalRed[100]
   },
   Other: {
-    FocusRing: colorScale.Blue[200],
+    FocusRing: colorScale.Neutral[200],
     Shadow: `color-mix(in srgb, ${colorScale.Neutral[1e3]} 80%, transparent)`,
     Overlay: `color-mix(in srgb, ${colorScale.Neutral[1e3]} 80%, transparent)`
   },
@@ -766,7 +783,7 @@ const darkColorValues = {
     Quiet: colorScale.Neutral[500]
   },
   Border: {
-    Focus: colorScale.Blue[200],
+    Focus: colorScale.Neutral[200],
     Subtle: colorScale.Neutral[825]
   }
 };
@@ -831,6 +848,13 @@ const brandFamilyForHue = (hue) => {
 };
 const brandTone = (hue, step = 600) => colorScale[brandFamilyForHue(hue)][step];
 const brandToneHex = (hue, step = 600) => toSrgbHex(brandTone(hue, step));
+const readingTypography = {
+  body: {
+    fontSize: config.fontSize.B500,
+    lineHeight: 1.5,
+    measure: "75ch"
+  }
+};
 const canAlignXStart = (anchor, target, offset2) => anchor.x + offset2 + target.width <= document.documentElement.clientWidth;
 const canAlignXCenter = (anchor, target, offset2) => {
   const xCenter = anchor.x + anchor.width / 2;
@@ -1103,18 +1127,65 @@ var createRuntimeFn = (config2) => (options) => {
   }
   return className;
 };
-var Avatar$2 = createRuntimeFn({ defaultClassName: "_8x64mz1 _8nex5a1 _8nex5a0 x4g6300 x4g6301", variantClassNames: { size: { "200": "_8x64mz2", "300": "_8x64mz3", "400": "_8x64mz4", "500": "_8x64mz5" }, radii: { "0": "ebramc1", "300": "ebramc2", "400": "ebramc3", "500": "ebramc4", Inherit: "ebramc0", Pill: "ebramc5" } }, defaultVariants: { size: "400", radii: "400" }, compoundVariants: [] });
-var AvatarFallback$1 = "_8x64mzd _8nex5a1 _8nex5a0";
-var AvatarImage$1 = "_8x64mzc _8nex5a1 _8nex5a0";
+var Avatar$2 = createRuntimeFn({ defaultClassName: "_8x64mz1 _8nex5a1 _8nex5a0 x4g6300 x4g6301", variantClassNames: { size: { "200": "_8x64mz2", "300": "_8x64mz3", "400": "_8x64mz4", "500": "_8x64mz5", inline: "_8x64mz6", stack: "_8x64mz7", compact: "_8x64mz8", standard: "_8x64mz9", large: "_8x64mza", hero: "_8x64mzb", profile: "_8x64mzc" }, radii: { "0": "ebramc1", "300": "ebramc2", "400": "ebramc3", "500": "ebramc4", Inherit: "ebramc0", Pill: "ebramc5" } }, defaultVariants: { size: "400", radii: "400" }, compoundVariants: [] });
+var AvatarFallback$1 = "_8x64mzk _8nex5a1 _8nex5a0";
+var AvatarImage$1 = "_8x64mzj _8nex5a1 _8nex5a0";
+var AvatarInitials = "_8x64mzl";
 const Avatar$1 = as(
-  ({ as: AsAvatar = "span", size: size2, radii, className, ...props }, ref) => /* @__PURE__ */ jsx(AsAvatar, { className: classNames(Avatar$2({ size: size2, radii }), className), ...props, ref })
+  ({ as: AsAvatar = "span", size: size2, radii, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    AsAvatar,
+    {
+      "data-weave-avatar": size2 ?? "400",
+      className: classNames(Avatar$2({ size: size2, radii }), className),
+      ...props,
+      ref
+    }
+  )
+);
+const AvatarImage = as(
+  ({ as: AsAvatarImage = "img", className, kind, ...props }, ref) => /* @__PURE__ */ jsx(
+    AsAvatarImage,
+    {
+      "data-avatar-kind": kind,
+      className: classNames(AvatarImage$1, className),
+      ...props,
+      ref
+    }
+  )
 );
-const AvatarImage = as(({ as: AsAvatarImage = "img", className, ...props }, ref) => /* @__PURE__ */ jsx(AsAvatarImage, { className: classNames(AvatarImage$1, className), ...props, ref }));
 const AvatarFallback = as(
-  ({ as: AsAvatarFallback = "span", className, ...props }, ref) => /* @__PURE__ */ jsx(AsAvatarFallback, { className: classNames(AvatarFallback$1, className), ...props, ref })
+  ({ as: AsAvatarFallback = "span", className, kind, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    AsAvatarFallback,
+    {
+      "data-avatar-kind": kind,
+      className: classNames(AvatarFallback$1, className),
+      ...props,
+      ref,
+      children: kind === "person" ? /* @__PURE__ */ jsx("span", { className: AvatarInitials, children }) : children
+    }
+  )
 );
+const avatarSizes = {
+  inline: 16,
+  stack: 20,
+  compact: 24,
+  standard: 32,
+  large: 40,
+  hero: 56,
+  profile: 80
+};
+const avatarRadii = { person: "50%", agent: "50%", room: "20%" };
+const personAvatarTones = {
+  Mint: brandColors.Mint,
+  Peach: brandColors.Peach,
+  Sky: brandColors.Sky,
+  Pink: brandColors.Pink,
+  Lemon: brandColors.PaleYellow,
+  Orange: brandColors.Orange
+};
+const personAvatarInk = brandColors.Ink;
 const Badge_css_ts_vanilla = "";
-var Badge$1 = createRuntimeFn({ defaultClassName: "zaqhff7 _8nex5a1 _8nex5a0 x4g6300 x4g6301", variantClassNames: { kind: { Tag: "zaqhff6", Count: "zaqhff9" }, size: { "200": "zaqhffa", "300": "zaqhffb", "400": "zaqhffc", "500": "zaqhffd" }, variant: { Primary: "zaqhffe", Secondary: "zaqhfff", Info: "zaqhffg", Success: "zaqhffh", Warning: "zaqhffi", Critical: "zaqhffj" }, fill: { Solid: "zaqhffk", Soft: "zaqhffl", None: "zaqhffm" }, outlined: { true: "zaqhffn" }, radii: { "0": "ebramc1", "300": "ebramc2", "400": "ebramc3", "500": "ebramc4", Inherit: "ebramc0", Pill: "ebramc5" } }, defaultVariants: { kind: "Tag", size: "400", variant: "Primary", fill: "Soft", radii: "300" }, compoundVariants: [[{ kind: "Tag", fill: "Soft", variant: "Primary" }, "zaqhffu"], [{ kind: "Tag", fill: "Soft", variant: "Secondary" }, "zaqhffv"], [{ kind: "Tag", fill: "Soft", variant: "Info" }, "zaqhffw"], [{ kind: "Tag", fill: "Soft", variant: "Success" }, "zaqhffx"], [{ kind: "Tag", fill: "Soft", variant: "Warning" }, "zaqhffy"], [{ kind: "Tag", fill: "Soft", variant: "Critical" }, "zaqhffz"], [{ kind: "Tag" }, "zaqhff10"], [{ kind: "Count", size: "300" }, "zaqhff11"], [{ kind: "Count", size: "400" }, "zaqhff12"], [{ kind: "Count", size: "500" }, "zaqhff13"], [{ kind: "Tag", outlined: true }, "zaqhff14"], [{ variant: "Info", outlined: true }, "zaqhff15"], [{ variant: "Success", outlined: true }, "zaqhff16"], [{ variant: "Warning", outlined: true }, "zaqhff17"], [{ variant: "Critical", outlined: true }, "zaqhff18"]] });
+var Badge$1 = createRuntimeFn({ defaultClassName: "zaqhff8 _8nex5a1 _8nex5a0 x4g6300 x4g6301", variantClassNames: { kind: { Tag: "zaqhff6", Count: "zaqhff7" }, size: { "200": "zaqhffb", "300": "zaqhffc", "400": "zaqhffd", "500": "zaqhffe" }, variant: { Primary: "zaqhfff", Secondary: "zaqhffg", Info: "zaqhffh", Success: "zaqhffi", Warning: "zaqhffj", Critical: "zaqhffk" }, fill: { Solid: "zaqhffl", Soft: "zaqhffm", None: "zaqhffn" }, outlined: { true: "zaqhffo" }, radii: { "0": "ebramc1", "300": "ebramc2", "400": "ebramc3", "500": "ebramc4", Inherit: "ebramc0", Pill: "ebramc5" } }, defaultVariants: { kind: "Tag", size: "400", variant: "Primary", fill: "Soft", radii: "300" }, compoundVariants: [[{ kind: "Tag", fill: "Soft", variant: "Primary" }, "zaqhffv"], [{ kind: "Tag", fill: "Soft", variant: "Secondary" }, "zaqhffw"], [{ kind: "Tag", fill: "Soft", variant: "Info" }, "zaqhffx"], [{ kind: "Tag", fill: "Soft", variant: "Success" }, "zaqhffy"], [{ kind: "Tag", fill: "Soft", variant: "Warning" }, "zaqhffz"], [{ kind: "Tag", fill: "Soft", variant: "Critical" }, "zaqhff10"], [{ kind: "Tag" }, "zaqhff11"], [{ kind: "Count", size: "300" }, "zaqhff12"], [{ kind: "Count", size: "400" }, "zaqhff13"], [{ kind: "Count", size: "500" }, "zaqhff14"], [{ kind: "Tag", outlined: true }, "zaqhff15"], [{ variant: "Info", outlined: true }, "zaqhff16"], [{ variant: "Success", outlined: true }, "zaqhff17"], [{ variant: "Warning", outlined: true }, "zaqhff18"], [{ variant: "Critical", outlined: true }, "zaqhff19"]] });
 const Badge = as(
   ({ as: AsBadge = "span", className, kind, size: size2, variant, fill, radii, outlined, ...props }, ref) => /* @__PURE__ */ jsx(
     AsBadge,
@@ -6002,7 +6073,7 @@ const Header$1 = as(
   )
 );
 const IconButton_css_ts_vanilla = "";
-var IconButton$1 = createRuntimeFn({ defaultClassName: "dr9zbk5 _8nex5a1 _8nex5a0 x4g6300 x4g6301", variantClassNames: { size: { "300": "dr9zbk6", "400": "dr9zbk7", "500": "dr9zbk8", "600": "dr9zbk9", compact: "dr9zbka", standard: "dr9zbkb" }, variant: { Background: "dr9zbkc", Surface: "dr9zbkd", SurfaceVariant: "dr9zbke", Primary: "dr9zbkf", Secondary: "dr9zbkg", Success: "dr9zbkh", Warning: "dr9zbki", Critical: "dr9zbkj" }, fill: { Soft: "dr9zbkk", None: "dr9zbkl" }, outlined: { true: "dr9zbkm" }, radii: { "0": "ebramc1", "300": "ebramc2", "400": "ebramc3", "500": "ebramc4", Inherit: "ebramc0", Pill: "ebramc5" } }, defaultVariants: { size: "400", variant: "Surface", fill: "Soft", radii: "400" }, compoundVariants: [] });
+var IconButton$1 = createRuntimeFn({ defaultClassName: "dr9zbk9 _8nex5a1 _8nex5a0 x4g6300 x4g6301", variantClassNames: { size: { "300": "dr9zbka", "400": "dr9zbkb", "500": "dr9zbkc", "600": "dr9zbkd", compact: "dr9zbke", standard: "dr9zbkf" }, variant: { Background: "dr9zbkg", Surface: "dr9zbkh", SurfaceVariant: "dr9zbki", Primary: "dr9zbkj", Secondary: "dr9zbkk", Success: "dr9zbkl", Warning: "dr9zbkm", Critical: "dr9zbkn" }, fill: { Soft: "dr9zbko", Solid: "dr9zbkp", None: "dr9zbkq" }, outlined: { true: "dr9zbkr" }, radii: { "0": "ebramc1", "300": "ebramc2", "400": "ebramc3", "500": "ebramc4", Inherit: "ebramc0", Pill: "ebramc5" } }, defaultVariants: { size: "400", variant: "Surface", fill: "Soft", radii: "Pill" }, compoundVariants: [] });
 const IconButton = as(
   ({ as: AsIconButton = "button", className, size: size2, variant, fill, radii, outlined, ...props }, ref) => /* @__PURE__ */ jsx(
     AsIconButton,
@@ -6053,7 +6124,7 @@ const Input = forwardRef(
   }
 );
 const Form_css_ts_vanilla = "";
-var Body$1 = "_1699xxt1";
+var Body$2 = "_1699xxt1";
 var Card = "_1699xxt8";
 var CardTone = createRuntimeFn({ defaultClassName: "", variantClassNames: { variant: { Surface: "_1699xxt9", SurfaceVariant: "_1699xxta", Background: "_1699xxtb", Primary: "_1699xxtc", Secondary: "_1699xxtd", Success: "_1699xxte", Warning: "_1699xxtf", Critical: "_1699xxtg" } }, defaultVariants: {}, compoundVariants: [] });
 var Children = "_1699xxt4";
@@ -6076,7 +6147,7 @@ const FormRow = forwardRef(
     }) : after;
     return /* @__PURE__ */ jsx(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { ref, ...props, "data-weave-form-row": true, className: classNames(Row$1, className), children: [
       before && /* @__PURE__ */ jsx("div", { "data-weave-form-before": true, children: before }),
-      /* @__PURE__ */ jsxs("div", { className: Body$1, "data-weave-form-body": true, children: [
+      /* @__PURE__ */ jsxs("div", { className: Body$2, "data-weave-form-body": true, children: [
         title && /* @__PURE__ */ jsx("div", { className: Label$4, id: labelId, children: title }),
         description && /* @__PURE__ */ jsx("div", { className: Description$1, id: descriptionId, children: description }),
         children && /* @__PURE__ */ jsx("div", { className: Children, "data-weave-form-children": true, children })
@@ -9862,7 +9933,7 @@ function getSideAndAlignFromPlacement(placement) {
 }
 var Root2$2 = Popper;
 var Anchor = PopperAnchor;
-var Content$1 = PopperContent;
+var Content$2 = PopperContent;
 var Arrow = PopperArrow;
 function setRef$5(ref, value) {
   if (typeof ref === "function") {
@@ -11843,7 +11914,7 @@ var SelectPopperPosition = a$T.forwardRef((props, forwardedRef) => {
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
   return /* @__PURE__ */ jsx(
-    Content$1,
+    Content$2,
     {
       ...popperScope,
       ...popperProps,
@@ -12338,7 +12409,7 @@ var ScrollUpButton = SelectScrollUpButton;
 var ScrollDownButton = SelectScrollDownButton;
 const Select_css_ts_vanilla = "";
 var Chevron$1 = "_8n0hf12";
-var Content = "_8n0hf14";
+var Content$1 = "_8n0hf14";
 var Description = "_8n0hf1b";
 var Indicator = "_8n0hf17";
 var Item$1 = "_8n0hf16";
@@ -12446,7 +12517,7 @@ const Select = forwardRef(
           /* @__PURE__ */ jsx(Portal$1, { container, children: /* @__PURE__ */ jsxs(
             Content2,
             {
-              className: Content,
+              className: Content$1,
               "data-motion": pointerMotion,
               onKeyDownCapture: () => setPointerMotion(false),
               position: "popper",
@@ -15826,21 +15897,27 @@ const SplashScreen = ({ children }) => /* @__PURE__ */ jsxs(Box, { className: cl
   /* @__PURE__ */ jsx(Box, { className: SplashScreenFooter, shrink: "No", alignItems: "Center", justifyContent: "Center", children: /* @__PURE__ */ jsx(Text, { size: "H2", align: "Center", children: "AG2 Space" }) })
 ] });
 const style_css_ts_vanilla = "";
-var PageContent$1 = "_18hg0vgb _8nex5a1 _8nex5a0";
-var PageContentCenter$1 = "_18hg0vgf _8nex5a1 _8nex5a0";
-var PageHeader$1 = createRuntimeFn({ defaultClassName: "_18hg0vg7", variantClassNames: { compact: { true: "_18hg0vg8" }, balance: { true: "_18hg0vg9" }, outlined: { true: "_18hg0vga" } }, defaultVariants: { outlined: false }, compoundVariants: [] });
-var PageHeroEmpty$1 = "_18hg0vgc _8nex5a1 _8nex5a0";
-var PageHeroEmptyCompact = "_18hg0vgd _8nex5a1 _8nex5a0";
-var PageHeroSection$1 = "_18hg0vge _8nex5a1 _8nex5a0";
-var PageHeroTitle = "_18hg0vgg";
-var PageNav$1 = createRuntimeFn({ defaultClassName: "", variantClassNames: { size: { "200": "_18hg0vg0", "300": "_18hg0vg1", "400": "_18hg0vg2" } }, defaultVariants: { size: "400" }, compoundVariants: [] });
-var PageNavContent$1 = "_18hg0vg6";
-var PageNavDrawer = "_18hg0vgj";
-var PageNavHeader$1 = createRuntimeFn({ defaultClassName: "_18hg0vg4", variantClassNames: { outlined: { true: "_18hg0vg5" } }, defaultVariants: { outlined: false }, compoundVariants: [] });
-var PageNavRail = "_18hg0vgk";
-var PageNavResizeHandle = "_18hg0vg3";
-var PageNavRoot = "_18hg0vgh";
-var PageNavViewport = "_18hg0vgi";
+var PageCanvas$1 = "_18hg0vg1";
+var PageContent$1 = "_18hg0vge _8nex5a1 _8nex5a0";
+var PageContentCenter$1 = "_18hg0vgi _8nex5a1 _8nex5a0";
+var PageHeader$1 = createRuntimeFn({ defaultClassName: "_18hg0vga", variantClassNames: { compact: { true: "_18hg0vgb" }, balance: { true: "_18hg0vgc" }, outlined: { true: "_18hg0vgd" } }, defaultVariants: { outlined: false }, compoundVariants: [] });
+var PageHeroEmpty$1 = "_18hg0vgf _8nex5a1 _8nex5a0";
+var PageHeroEmptyCompact = "_18hg0vgg _8nex5a1 _8nex5a0";
+var PageHeroSection$1 = "_18hg0vgh _8nex5a1 _8nex5a0";
+var PageHeroTitle = "_18hg0vgj";
+var PageNav$1 = createRuntimeFn({ defaultClassName: "", variantClassNames: { size: { "200": "_18hg0vg3", "300": "_18hg0vg4", "400": "_18hg0vg5" } }, defaultVariants: { size: "400" }, compoundVariants: [] });
+var PageNavBrand = "_18hg0vgq _18hg0vgp";
+var PageNavContent$1 = "_18hg0vg9";
+var PageNavDrawer = "_18hg0vgm";
+var PageNavHeader$1 = createRuntimeFn({ defaultClassName: "_18hg0vg7", variantClassNames: { outlined: { true: "_18hg0vg8" } }, defaultVariants: { outlined: false }, compoundVariants: [] });
+var PageNavRail = "_18hg0vgn";
+var PageNavResizeHandle = "_18hg0vg6";
+var PageNavRestore = "_18hg0vgo";
+var PageNavRestoreIcon = "_18hg0vgr _18hg0vgp";
+var PageNavRoot = "_18hg0vgk";
+var PageNavViewport = "_18hg0vgl";
+var PagePanel$1 = "_18hg0vg2";
+var PageRoot$1 = "_18hg0vg0";
 const getResizeObserverEntry = (target, entries) => entries.find((entry) => entry.target === target);
 const useResizeObserver = (onResizeCallback, observeElement) => {
   const resizeObserver = useMemo(() => new ResizeObserver(onResizeCallback), [onResizeCallback]);
@@ -15912,14 +15989,10 @@ function beginDragOverlay(cursor) {
   document.body.appendChild(overlay);
   return () => overlay.remove();
 }
-const PageRoot = ({ nav, children }) => (
-  // No divider between nav and content — the seam reads by the panel/content
-  // tone step alone, so the line doesn't clutter the boundary (owner, 2026-07-11).
-  /* @__PURE__ */ jsxs(Box, { grow: "Yes", className: ContainerColor({ variant: "Background" }), children: [
-    nav,
-    children
-  ] })
-);
+const PageRoot = ({ nav, children }) => /* @__PURE__ */ jsxs(Box, { grow: "Yes", className: PageRoot$1, children: [
+  nav,
+  children
+] });
 const ROOM_NAV_COLLAPSED_KEY = "roomNavCollapsed";
 const navCollapseListeners = /* @__PURE__ */ new Set();
 let animateNavChange = false;
@@ -15956,7 +16029,7 @@ const COLLAPSED_NAV_WIDTH = 56;
 const NAV_ENTER_MS = 240;
 const NAV_EXIT_MS = 180;
 const NAV_EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
-const PageNav = ({ size: size2, children }) => {
+const PageNav = ({ size: size2, children, collapsedMark }) => {
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
   const [collapsed, toggle] = useRoomNavCollapsed();
@@ -15976,7 +16049,7 @@ const PageNav = ({ size: size2, children }) => {
     query.addEventListener("change", update);
     return () => query.removeEventListener("change", update);
   }, []);
-  const defaultWidth = size2 === "300" ? 222 : 256;
+  const defaultWidth = { "200": 190, "300": 222, "400": 360 }[size2 ?? "400"];
   const [width, setWidth] = useState(() => {
     try {
       const raw = localStorage.getItem(ROOM_NAV_WIDTH_KEY);
@@ -16116,10 +16189,11 @@ const PageNav = ({ size: size2, children }) => {
               "aria-hidden": !closed || void 0,
               ...!closed ? { inert: "" } : {},
               className: classNames(ContainerColor({ variant: "Background" }), PageNavRail),
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsxs(
                 IconButton,
                 {
                   ref: showButtonRef,
+                  className: PageNavRestore,
                   size: "standard",
                   variant: "Background",
                   radii: "400",
@@ -16127,7 +16201,17 @@ const PageNav = ({ size: size2, children }) => {
                   title: "Show room list",
                   "aria-expanded": false,
                   onClick: (evt) => toggle({ animate: evt.detail > 0 }),
-                  children: /* @__PURE__ */ jsx(Icon$2, { src: Icons.Sidebar, size: "standard", style: { transform: "scaleX(-1)" } })
+                  children: [
+                    collapsedMark && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: PageNavBrand, children: collapsedMark }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: collapsedMark ? PageNavRestoreIcon : void 0,
+                        children: /* @__PURE__ */ jsx(Icon$2, { src: Icons.Sidebar, size: "standard", style: { transform: "scaleX(-1)" } })
+                      }
+                    )
+                  ]
                 }
               )
             }
@@ -16187,6 +16271,27 @@ const Page = as(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     ref
   }
 ));
+const PageCanvas = as(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    grow: "Yes",
+    "data-weave-page-canvas": "",
+    className: classNames(PageCanvas$1, className),
+    ...props,
+    ref
+  }
+));
+const PagePanel = as(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    grow: "Yes",
+    direction: "Column",
+    "data-weave-page-panel": "",
+    className: classNames(ContainerColor({ variant: "Surface" }), PagePanel$1, className),
+    ...props,
+    ref
+  }
+));
 const PageHeader = as(
   ({ className, outlined, balance, ...props }, ref) => /* @__PURE__ */ jsx(
     Header$1,
@@ -16769,7 +16874,8 @@ const UnreadBadge = as(
       {
         as: Component,
         kind: "Count",
-        variant: needsYou ? "Critical" : "Warning",
+        variant: "Critical",
+        "data-notification": needsYou ? "mention" : "unread",
         size: shown > 0 ? "400" : "200",
         fill: "Solid",
         radii: "Pill",
@@ -16787,14 +16893,14 @@ const UnreadBadge = as(
 const ActivityRow_css_ts_vanilla = "";
 var ActivityRow$1 = createRuntimeFn({ defaultClassName: "_3hdcuo0 _8nex5a1 _8nex5a0 x4g6300 x4g6301", variantClassNames: { layout: { panel: "_3hdcuo1", card: "_3hdcuo2" }, unread: { true: "_3hdcuo3" }, read: { true: "_3hdcuo4" }, selected: { true: "_3hdcuo5" } }, defaultVariants: { layout: "panel" }, compoundVariants: [] });
 var Avatar = "_3hdcuo6";
-var Body = "_3hdcuo7";
-var Footer = "_3hdcuoh";
+var Body$1 = "_3hdcuo7";
+var Footer$1 = "_3hdcuoh";
 var Header = "_3hdcuo8";
 var Meta = "_3hdcuoi";
 var Preview = "_3hdcuog";
 var Reason = createRuntimeFn({ defaultClassName: "_3hdcuo9", variantClassNames: { tone: { you: "_3hdcuoa", agent: "_3hdcuob", participant: "_3hdcuoc" } }, defaultVariants: {}, compoundVariants: [] });
-var Time = "_3hdcuoe";
-var Title = "_3hdcuof";
+var Time$1 = "_3hdcuoe";
+var Title$1 = "_3hdcuof";
 var Where = "_3hdcuod";
 const ActivityRow = as(
   ({
@@ -16828,7 +16934,7 @@ const ActivityRow = as(
       ref,
       children: [
         /* @__PURE__ */ jsx("span", { className: Avatar, children: avatar }),
-        /* @__PURE__ */ jsxs("span", { className: Body, children: [
+        /* @__PURE__ */ jsxs("span", { className: Body$1, children: [
           /* @__PURE__ */ jsxs("span", { className: Header, children: [
             /* @__PURE__ */ jsx("span", { className: Reason({ tone: read ? "participant" : reasonTone }), children: reason2 }),
             /* @__PURE__ */ jsxs("span", { className: Where, children: [
@@ -16836,9 +16942,9 @@ const ActivityRow = as(
               where
             ] })
           ] }),
-          layout === "card" && title && /* @__PURE__ */ jsx("span", { className: Title, children: title }),
+          layout === "card" && title && /* @__PURE__ */ jsx("span", { className: Title$1, children: title }),
           /* @__PURE__ */ jsx("span", { className: Preview, children: preview }),
-          /* @__PURE__ */ jsxs("span", { className: Footer, children: [
+          /* @__PURE__ */ jsxs("span", { className: Footer$1, children: [
             !read && (count2 > 0 || unread > 0) && /* @__PURE__ */ jsx(UnreadBadgeCenter, { children: /* @__PURE__ */ jsx(
               UnreadBadge,
               {
@@ -16850,7 +16956,7 @@ const ActivityRow = as(
             unreadLabel && /* @__PURE__ */ jsx("span", { children: unreadLabel }),
             meta2 && /* @__PURE__ */ jsx("span", { className: Meta, children: meta2 })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: Time, children: time })
+          /* @__PURE__ */ jsx("span", { className: Time$1, children: time })
         ] })
       ]
     }
@@ -17063,7 +17169,7 @@ const EmptyState = as(
   }, ref) => /* @__PURE__ */ jsx(Component, { className: classNames(EmptyState$1, className), ...props, ref, children: /* @__PURE__ */ jsx(PageHeroEmpty, { compact, children: /* @__PURE__ */ jsx(PageHero, { icon: icon2, title, subTitle: description ?? subTitle, children: action2 ?? children }) }) })
 );
 const PanelSwitch_css_ts_vanilla = "";
-var Attention = "e7d7gk4";
+var Attention$1 = "e7d7gk4";
 var Count = "e7d7gk5";
 var CountPill = "e7d7gk6";
 var Folds = "e7d7gk9";
@@ -17089,12 +17195,13 @@ const PanelSwitch = as(
     count: count2,
     countStyle = "Plain",
     labelled = false,
+    iconOnly = false,
     attention = false,
     className,
     ...props
   }, ref) => {
     const hasCount = count2 !== void 0 && count2 > 0;
-    const showLabel = selected || labelled;
+    const showLabel = (selected || labelled) && !iconOnly;
     const showCount = showLabel && hasCount;
     const countPill = showCount && selected && countStyle === "Pill";
     const name = [
@@ -17110,7 +17217,8 @@ const PanelSwitch = as(
         "aria-label": name,
         title: label,
         "data-selected": selected || void 0,
-        "data-labelled": labelled || void 0,
+        "data-labelled": labelled && !iconOnly || void 0,
+        "data-icon-only": iconOnly || void 0,
         "data-count-pill": countPill || void 0,
         className: classNames(PanelSwitch$1, className),
         ...props,
@@ -17118,7 +17226,7 @@ const PanelSwitch = as(
         children: [
           /* @__PURE__ */ jsxs("span", { className: Glyph, children: [
             /* @__PURE__ */ jsx(Icon$2, { src: icon2, size: "compact" }),
-            attention && !selected && /* @__PURE__ */ jsx("span", { className: Attention })
+            attention && !selected && /* @__PURE__ */ jsx("span", { className: Attention$1 })
           ] }),
           showLabel && /* @__PURE__ */ jsx(Text, { as: "span", size: "H6", className: classNames(Label, Folds), "aria-hidden": true, children: label }),
           showCount && /* @__PURE__ */ jsx(
@@ -17137,14 +17245,14 @@ const PanelSwitch = as(
   }
 );
 const PeopleLine_css_ts_vanilla = "";
-var Face = "kev8vj2";
+var Face$1 = "kev8vj2";
 var Faces = "kev8vj1";
 var Live = "kev8vj3";
 var PeopleLine$1 = "kev8vj0 _8nex5a1 _8nex5a0";
 var Summary = "kev8vj4";
 var Working = "kev8vj6";
 const PeopleLineFace = as(
-  ({ as: Component = "span", size: size2 = "small", className, ...props }, ref) => /* @__PURE__ */ jsx(Component, { "data-size": size2, className: classNames(Face, className), ...props, ref })
+  ({ as: Component = "span", size: size2 = "small", className, ...props }, ref) => /* @__PURE__ */ jsx(Component, { "data-size": size2, className: classNames(Face$1, className), ...props, ref })
 );
 const PeopleLine = as(
   ({ as: Component = "div", faces, status = "Default", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -17163,14 +17271,14 @@ const PeopleLine = as(
   )
 );
 const RoomHeader_css_ts_vanilla = "";
-var Controls = "cv0ofl6";
+var Controls$1 = "cv0ofl6";
 var Divider = "cv0ofl7";
 var Identity = "cv0ofl3";
 var Mark = "cv0ofl2";
-var Name = "cv0ofl4";
+var Name$1 = "cv0ofl4";
 var RoomHeader$1 = "cv0ofl0 _8nex5a1 _8nex5a0";
 var Row = "cv0ofl1";
-var Spacer = "cv0ofl5";
+var Spacer$1 = "cv0ofl5";
 const RoomHeaderMark = as(
   ({ as: Component = "span", faces, className, ...props }, ref) => /* @__PURE__ */ jsx(
     Component,
@@ -17196,15 +17304,47 @@ const RoomHeader = as(
   }, ref) => /* @__PURE__ */ jsx(Component, { className: classNames(RoomHeader$1, className), ...props, ref, children: /* @__PURE__ */ jsxs("div", { className: Row, children: [
     mark,
     /* @__PURE__ */ jsxs("div", { className: Identity, children: [
-      /* @__PURE__ */ jsx(Text, { as: nameAs, size: "H5", truncate: true, className: Name, children: name }),
+      /* @__PURE__ */ jsx(Text, { as: nameAs, size: "H5", truncate: true, className: Name$1, children: name }),
       people
     ] }),
-    /* @__PURE__ */ jsx("div", { className: Spacer }),
-    controls && /* @__PURE__ */ jsx("div", { className: Controls, children: controls }),
+    /* @__PURE__ */ jsx("div", { className: Spacer$1 }),
+    controls && /* @__PURE__ */ jsx("div", { className: Controls$1, children: controls }),
     controls && panels && /* @__PURE__ */ jsx("div", { className: Divider, "aria-hidden": true }),
     panels
   ] }) })
 );
+const Composer_css_ts_vanilla = "";
+var Actions$1 = "_1ejw1qz3";
+var ActionsAfter = "_1ejw1qz5";
+var ActionsBefore = "_1ejw1qz4";
+var Composer$1 = "_1ejw1qz0";
+var Content = "_1ejw1qz2";
+var Footer = "_1ejw1qz6";
+var Surface = "_1ejw1qz1";
+const Composer = as(
+  ({
+    as: Component = "div",
+    context,
+    actionsBefore,
+    actionsAfter,
+    bottom,
+    footer,
+    children,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(Component, { className: classNames(Composer$1, className), ...props, ref, children: [
+    /* @__PURE__ */ jsxs("div", { className: Surface, children: [
+      context,
+      /* @__PURE__ */ jsx("div", { className: Content, children }),
+      (actionsBefore || actionsAfter) && /* @__PURE__ */ jsxs("div", { className: Actions$1, children: [
+        /* @__PURE__ */ jsx("div", { className: ActionsBefore, children: actionsBefore }),
+        /* @__PURE__ */ jsx("div", { className: ActionsAfter, children: actionsAfter })
+      ] }),
+      bottom
+    ] }),
+    footer && /* @__PURE__ */ jsx("div", { className: Footer, children: footer })
+  ] })
+);
 const TypeTile_css_ts_vanilla = "";
 var TypeTile$1 = "_26nx250 _8nex5a1 _8nex5a0";
 var TypeTileGlyph = { "200": "_26nx254", "300": "_26nx255", "500": "_26nx256" };
@@ -17551,6 +17691,133 @@ const InspectorTab = as(
     }
   )
 );
+const ActivityItem_css_ts_vanilla = "";
+var Action = "_1wyqgiii _8nex5a1 _8nex5a0 x4g6300";
+var Actions = "_1wyqgiie _1wyqgii9";
+var ActivityItem$1 = "_1wyqgii0 _8nex5a1 _8nex5a0";
+var Attention = "_1wyqgiif";
+var AttentionBreathing = "_1wyqgiih";
+var Body = "_1wyqgiia _1wyqgii9";
+var Face = "_1wyqgii4";
+var Head = "_1wyqgii3";
+var Main = "_1wyqgii2 _8nex5a1 _8nex5a0 x4g6300";
+var Name = "_1wyqgii5";
+var ObjectRow = "_1wyqgiid _1wyqgii9";
+var Replies = "_1wyqgiib _8nex5a1 _8nex5a0 x4g6300 _1wyqgii9";
+var RepliesUnread = "_1wyqgiic";
+var SelectedBar = "_1wyqgii1";
+var Time = "_1wyqgii7";
+var UnreadDot = "_1wyqgii8";
+var What = "_1wyqgii6";
+const ActivityItem = as(
+  ({
+    as: Component = "div",
+    avatar,
+    name,
+    what,
+    time,
+    body,
+    unread = false,
+    read = false,
+    attention,
+    selected = false,
+    replies,
+    object,
+    actions,
+    actionsShown = false,
+    onOpen,
+    label,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    Component,
+    {
+      "data-read": read || void 0,
+      "data-selected": selected || void 0,
+      className: classNames(ActivityItem$1, className),
+      ...props,
+      ref,
+      children: [
+        selected && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: SelectedBar }),
+        attention && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: classNames(Attention, attention === "breathing" && AttentionBreathing)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: Main,
+            "aria-label": [
+              label ?? `${name} ${what}, ${time}`,
+              unread && "unread",
+              attention && "needs you"
+            ].filter(Boolean).join(", "),
+            "aria-current": selected ? "true" : void 0,
+            onClick: onOpen,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: Head, children: [
+                /* @__PURE__ */ jsx("span", { className: Face, children: avatar }),
+                /* @__PURE__ */ jsx(Text, { as: "span", size: "H6", className: Name, children: name }),
+                /* @__PURE__ */ jsx(Text, { as: "span", size: "T300", className: What, children: what }),
+                /* @__PURE__ */ jsx(Text, { as: "span", size: "T200", className: Time, children: time }),
+                unread && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: UnreadDot })
+              ] }),
+              body && /* @__PURE__ */ jsx(Text, { as: "span", size: "T300", className: Body, children: body })
+            ]
+          }
+        ),
+        object && /* @__PURE__ */ jsx("div", { className: ObjectRow, children: object }),
+        replies && /* @__PURE__ */ jsxs("button", { type: "button", className: Replies, onClick: replies.onOpen, children: [
+          /* @__PURE__ */ jsx(Text, { as: "span", size: "L400", children: replies.total }),
+          replies.unread && /* @__PURE__ */ jsxs(Text, { as: "span", size: "L400", className: RepliesUnread, children: [
+            "· ",
+            replies.unread
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: Actions, "data-pinned": actionsShown || void 0, children: actions })
+      ]
+    }
+  )
+);
+const ActivityItemAction = as(
+  ({ as: Component = "button", label, icon: icon2, primary = false, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      type: Component === "button" ? "button" : void 0,
+      "aria-label": label,
+      title: label,
+      "data-labelled": !icon2 || void 0,
+      "data-primary": primary || void 0,
+      className: classNames(Action, className),
+      ...props,
+      ref,
+      children: icon2 ? /* @__PURE__ */ jsx(Icon$2, { src: icon2, size: "standard" }) : /* @__PURE__ */ jsx(Text, { as: "span", size: "B400", children: label })
+    }
+  )
+);
+const ActivityHeader_css_ts_vanilla = "";
+var ActivityHeader$1 = "_1yfy4k20 _8nex5a1 _8nex5a0";
+var Controls = "_1yfy4k23";
+var Spacer = "_1yfy4k24";
+var Title = "_1yfy4k22";
+var TitleRow = "_1yfy4k21";
+const ActivityHeader = as(
+  ({ as: Component = "div", title, actions, filters, after, className, ...props }, ref) => /* @__PURE__ */ jsxs(Component, { className: classNames(ActivityHeader$1, className), ...props, ref, children: [
+    /* @__PURE__ */ jsxs("div", { className: TitleRow, children: [
+      /* @__PURE__ */ jsx(Text, { as: "h2", size: "H6", className: Title, children: title }),
+      actions
+    ] }),
+    (filters || after) && /* @__PURE__ */ jsxs("div", { className: Controls, children: [
+      filters,
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: Spacer }),
+      after
+    ] })
+  ] })
+);
 function ActionGroup({ actions, hint: hint$1 }) {
   return /* @__PURE__ */ jsxs("div", { className: actionSection, children: [
     /* @__PURE__ */ jsx("div", { className: actionGroup, role: "group", "aria-label": "Draft a PR request", children: actions.map((action$1) => /* @__PURE__ */ jsxs(
@@ -17576,6 +17843,9 @@ export {
   AGENT_STATE_MARKS,
   ActionGroup,
   ActivityGroup,
+  ActivityHeader,
+  ActivityItem,
+  ActivityItemAction,
   ActivityRow,
   AgentGlyph,
   AgentMark,
@@ -17592,6 +17862,7 @@ export {
   CommonsTab,
   CommonsTabStrip,
   ComposeIcon,
+  Composer,
   CrossSizeVariant,
   CurrentBoundary,
   Icon as CurrentIcon,
@@ -17633,6 +17904,7 @@ export {
   OverlayCenter,
   OverlayContainerProvider,
   Page,
+  PageCanvas,
   PageContent,
   PageContentCenter,
   PageHeader,
@@ -17642,6 +17914,7 @@ export {
   PageNav,
   PageNavContent,
   PageNavHeader,
+  PagePanel,
   PageRoot,
   PanelSwitch,
   PanelSwitchGroup,
@@ -17709,6 +17982,8 @@ export {
   UnreadBadgeCenter,
   abbreviateCount,
   as,
+  avatarRadii,
+  avatarSizes,
   blueAccent,
   brandColors,
   brandFamilies,
@@ -17736,12 +18011,16 @@ export {
   motion,
   mountAliveMark,
   percent,
+  personAvatarInk,
+  personAvatarTones,
   pxToRem,
+  readingTypography,
   reason,
   resolveCurrentPalette,
   toRem,
   toSrgbHex,
   typeTileIcon,
+  uiFontFamily,
   useElementSizeObserver,
   useOverlayContainer,
   usePopOutContainer,