@ag2/weave 0.11.0 → 0.12.0

package/dist/components/activity-item/ActivityHeader.css.d.ts

@@ -0,0 +1,5 @@
+export declare const ActivityHeader: string;
+export declare const TitleRow: string;
+export declare const Title: string;
+export declare const Controls: string;
+export declare const Spacer: string;

package/dist/components/activity-item/ActivityHeader.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+export declare type ActivityHeaderProps = {
+    title: string;
+    /** After the title: the ••• menu and close. */
+    actions?: ReactNode;
+    /** The filters, left: who (All · You · Agents). */
+    filters?: ReactNode;
+    /** The filters, right: Unread only. */
+    after?: ReactNode;
+};
+export declare const ActivityHeader: <T extends React.ElementType<any> = "div">(props: import("..").AsOutProps<T, ActivityHeaderProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/components/activity-item/ActivityItem.css.d.ts

@@ -0,0 +1,18 @@
+export declare const ActivityItem: string;
+export declare const SelectedBar: string;
+export declare const Main: string;
+export declare const Head: string;
+export declare const Face: string;
+export declare const Name: string;
+export declare const What: string;
+export declare const Time: string;
+export declare const UnreadDot: string;
+export declare const Indented: string;
+export declare const Body: string;
+export declare const Replies: string;
+export declare const RepliesUnread: string;
+export declare const ObjectRow: string;
+export declare const Actions: string;
+export declare const Attention: string;
+export declare const AttentionBreathing: string;
+export declare const Action: string;

package/dist/components/activity-item/ActivityItem.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactNode } from "react";
+import { IconSrc } from "../icon";
+export declare type ActivityItemProps = {
+    /** The person's or agent's face, 20px. */
+    avatar: ReactNode;
+    name: string;
+    /** What happened, after the name: "mentioned you", "updated a Commons doc". */
+    what: string;
+    time: string;
+    /** The message, three lines at most. */
+    body?: ReactNode;
+    unread?: boolean;
+    /** Read items set their text in a quieter ink. */
+    read?: boolean;
+    /** Needs you: a still warm dot in the margin; "breathing" on the first one only. */
+    attention?: "still" | "breathing";
+    /** Its message is the one highlighted in the chat. */
+    selected?: boolean;
+    /** "2 replies · 1 unread": total and the unread part, which reads in the unread ink. */
+    replies?: {
+        total: string;
+        unread?: string;
+        onOpen?: () => void;
+    };
+    /** A page the action happened on (a Commons chip). */
+    object?: ReactNode;
+    /** Reply, Jump, Mark read: shown on hover and focus, or always with `actionsShown`. */
+    actions?: ReactNode;
+    actionsShown?: boolean;
+    /** Clicking the item's text: jump to the message in the chat. */
+    onOpen?: () => void;
+    /** The accessible name of the item's main target; "unread" and "needs you" are appended to it. */
+    label?: string;
+};
+export declare const ActivityItem: <T extends React.ElementType<any> = "div">(props: import("..").AsOutProps<T, ActivityItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare type ActivityItemActionProps = {
+    label: string;
+    /** Icon-only actions take a glyph; labelled ones show the label. */
+    icon?: IconSrc;
+    /** The one always-shown action on the item that needs you first. */
+    primary?: boolean;
+};
+export declare const ActivityItemAction: <T extends React.ElementType<any> = "button">(props: import("..").AsOutProps<T, ActivityItemActionProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/components/activity-item/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ActivityItem";
+export * from "./ActivityHeader";

package/dist/components/avatar/Avatar.d.ts

@@ -4,7 +4,7 @@ declare type AvatarContentProps = {
     kind?: AvatarKind;
 };
 export declare const Avatar: <T extends React.ElementType<any> = "span">(props: Omit<React.PropsWithChildren<React.ComponentPropsWithRef<T>>, "as"> & {
-    size?: "large" | "inline" | "compact" | "200" | "300" | "400" | "500" | "stack" | "standard" | "hero" | "profile" | undefined;
+    size?: "large" | "inline" | "compact" | "200" | "300" | "400" | "500" | "standard" | "stack" | "hero" | "profile" | undefined;
     radii?: "0" | "300" | "400" | "500" | "Pill" | "Inherit" | undefined;
 } & import("..").AsProp<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export declare const AvatarImage: <T extends React.ElementType<any> = "img">(props: import("..").AsOutProps<T, AvatarContentProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/components/icon/Icon.d.ts

@@ -8,5 +8,5 @@ export declare const Icon: React.ForwardRefExoticComponent<React.SVGAttributes<S
     filled?: boolean | undefined;
     src: IconSrc;
 } & {
-    size?: "small" | "compact" | "100" | "200" | "300" | "400" | "500" | "600" | "standard" | "Inherit" | "50" | undefined;
+    size?: "small" | "compact" | "100" | "200" | "300" | "400" | "500" | "600" | "Inherit" | "standard" | "50" | undefined;
 } & React.RefAttributes<SVGSVGElement>>;

package/dist/components/index.d.ts

@@ -65,3 +65,4 @@ export * from "./commons-tabs";
 export * from "./surface-toolbar";
 export * from "./dock";
 export * from "./inspector-tabs";
+export * from "./activity-item";

package/dist/components/panel-switch/PanelSwitch.d.ts

@@ -10,6 +10,8 @@ export declare type PanelSwitchProps = {
     countStyle?: "Plain" | "Pill";
     /** Keep the name visible while closed (Commons). */
     labelled?: boolean;
+    /** Never show the name, even when open: a narrow header. The pressed fill shows it is open. */
+    iconOnly?: boolean;
     /** Something in this panel needs you; shown while closed. */
     attention?: boolean;
 };

package/dist/components/sidebar/SidebarItem.d.ts

@@ -13,7 +13,7 @@ export declare const SidebarAvatar: <T extends React.ElementType<any> = "div">(p
     size?: "200" | "300" | "400" | undefined;
     outlined?: boolean | undefined;
 } & Omit<any, "as"> & {
-    size?: "large" | "inline" | "compact" | "200" | "300" | "400" | "500" | "stack" | "standard" | "hero" | "profile" | undefined;
+    size?: "large" | "inline" | "compact" | "200" | "300" | "400" | "500" | "standard" | "stack" | "hero" | "profile" | undefined;
     radii?: "0" | "300" | "400" | "500" | "Pill" | "Inherit" | undefined;
 } & import("..").AsProp<React.ElementType<any>>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export declare const SidebarFolder: <T extends React.ElementType<any> = "div">(props: Omit<React.PropsWithChildren<React.ComponentPropsWithRef<T>>, "as"> & {

package/dist/index.js

@@ -6124,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";
@@ -6147,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 })
@@ -16893,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 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(
   ({
@@ -16934,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: [
@@ -16942,7 +16942,7 @@ 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$1, children: [
             !read && (count2 > 0 || unread > 0) && /* @__PURE__ */ jsx(UnreadBadgeCenter, { children: /* @__PURE__ */ jsx(
@@ -16956,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 })
         ] })
       ]
     }
@@ -17169,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";
@@ -17195,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 = [
@@ -17216,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,
@@ -17224,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(
@@ -17243,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(
@@ -17269,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,
@@ -17302,17 +17304,17 @@ 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 = "_1ejw1qz3";
+var Actions$1 = "_1ejw1qz3";
 var ActionsAfter = "_1ejw1qz5";
 var ActionsBefore = "_1ejw1qz4";
 var Composer$1 = "_1ejw1qz0";
@@ -17334,7 +17336,7 @@ const Composer = as(
     /* @__PURE__ */ jsxs("div", { className: Surface, children: [
       context,
       /* @__PURE__ */ jsx("div", { className: Content, children }),
-      (actionsBefore || actionsAfter) && /* @__PURE__ */ jsxs("div", { className: Actions, children: [
+      (actionsBefore || actionsAfter) && /* @__PURE__ */ jsxs("div", { className: Actions$1, children: [
         /* @__PURE__ */ jsx("div", { className: ActionsBefore, children: actionsBefore }),
         /* @__PURE__ */ jsx("div", { className: ActionsAfter, children: actionsAfter })
       ] }),
@@ -17689,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(
@@ -17714,6 +17843,9 @@ export {
   AGENT_STATE_MARKS,
   ActionGroup,
   ActivityGroup,
+  ActivityHeader,
+  ActivityItem,
+  ActivityItemAction,
   ActivityRow,
   AgentGlyph,
   AgentMark,