@agent-native/core 0.117.2 → 0.118.1

package/corpus/toolkit/src/provider.tsx

@@ -1,20 +1,33 @@
 import {
   createContext,
   useContext,
+  useEffect,
   useMemo,
+  type ElementType,
   type ReactNode,
   type ComponentType,
 } from "react";
 
+import {
+  DesignSystemContext,
+  LegacyButtonRenderContext,
+  type DesignSystemContextValue,
+} from "./design-system/context.js";
+import type { DesignSystemDefinition } from "./design-system/definition.js";
+import type {
+  ActionButtonProps,
+  DesignSystemComponents,
+} from "./design-system/types.js";
 import type { ButtonProps } from "./ui/button.js";
 
 export interface ToolkitComponents {
   Button?: ComponentType<ButtonProps>;
 }
 
-interface ToolkitProviderProps {
+export interface ToolkitProviderProps {
   children: ReactNode;
   components?: ToolkitComponents;
+  designSystem?: DesignSystemDefinition;
 }
 
 const ToolkitComponentsContext = createContext<ToolkitComponents>({});
@@ -22,17 +35,97 @@ const ToolkitComponentsContext = createContext<ToolkitComponents>({});
 export function ToolkitProvider({
   children,
   components,
+  designSystem,
 }: ToolkitProviderProps) {
   const parent = useContext(ToolkitComponentsContext);
-  const value = useMemo(
+  const parentDesignSystem = useContext(DesignSystemContext);
+  const value = useMemo<ToolkitComponents>(
     () => ({ ...parent, ...components }),
     [parent, components],
   );
+  const mergedDefinition = useMemo<DesignSystemDefinition | undefined>(() => {
+    if (!designSystem) return parentDesignSystem.definition;
+    return {
+      ...parentDesignSystem.definition,
+      ...designSystem,
+      components: {
+        ...parentDesignSystem.definition?.components,
+        ...designSystem.components,
+      },
+    };
+  }, [designSystem, parentDesignSystem.definition]);
+  const legacyActionButton = useMemo<
+    DesignSystemComponents["ActionButton"] | undefined
+  >(() => {
+    if (!value.Button) return parentDesignSystem.legacyActionButton;
+    const LegacyButton = value.Button as ElementType<
+      ButtonProps & { ref?: ActionButtonProps["elementRef"] }
+    >;
+    return function LegacyActionButton({
+      children,
+      intent,
+      emphasis,
+      size,
+      pending,
+      leadingIcon,
+      trailingIcon,
+      onPress,
+      elementRef,
+      ...props
+    }: ActionButtonProps) {
+      const variant =
+        emphasis === "ghost"
+          ? "ghost"
+          : emphasis === "outline"
+            ? "outline"
+            : intent === "danger"
+              ? "destructive"
+              : intent === "primary"
+                ? "default"
+                : "secondary";
+      const legacySize =
+        size === "compact" ? "sm" : size === "large" ? "lg" : "default";
+      return (
+        <LegacyButtonRenderContext.Provider value={true}>
+          <LegacyButton
+            {...props}
+            ref={elementRef}
+            variant={variant}
+            size={legacySize}
+            disabled={props.disabled || pending}
+            aria-busy={pending || undefined}
+            onClick={(event) => onPress?.(event)}
+          >
+            {leadingIcon}
+            {children}
+            {trailingIcon}
+          </LegacyButton>
+        </LegacyButtonRenderContext.Provider>
+      );
+    };
+  }, [parentDesignSystem.legacyActionButton, value.Button]);
+  const designSystemValue = useMemo<DesignSystemContextValue>(
+    () => ({ definition: mergedDefinition, legacyActionButton }),
+    [legacyActionButton, mergedDefinition],
+  );
+
+  useEffect(() => {
+    if (!mergedDefinition?.components?.ActionButton || !value.Button) return;
+    const isDevelopment =
+      (import.meta as ImportMeta & { env?: { DEV?: boolean } }).env?.DEV ??
+      true;
+    if (!isDevelopment) return;
+    console.warn(
+      "[agent-native] ToolkitProvider received both designSystem.components.ActionButton and legacy components.Button. ActionButton takes precedence.",
+    );
+  }, [mergedDefinition?.components?.ActionButton, value.Button]);
 
   return (
-    <ToolkitComponentsContext.Provider value={value}>
-      {children}
-    </ToolkitComponentsContext.Provider>
+    <DesignSystemContext.Provider value={designSystemValue}>
+      <ToolkitComponentsContext.Provider value={value}>
+        {children}
+      </ToolkitComponentsContext.Provider>
+    </DesignSystemContext.Provider>
   );
 }
 

package/corpus/toolkit/src/styles.css

@@ -20,37 +20,66 @@
  */
 @source "./**/*.{js,ts,tsx}";
 
-.agent-realtime-voice-working::after {
+.agent-realtime-voice-glow {
+  --agent-realtime-voice-edge-opacity: 0.52;
+  --agent-realtime-voice-halo-opacity: 0.28;
   position: absolute;
   z-index: 0;
+  inset: -4px;
+  border-radius: inherit;
+  pointer-events: none;
+  transform: rotate(0turn);
+  will-change: transform;
+}
+
+.agent-realtime-voice-working {
+  --agent-realtime-voice-edge-opacity: 0.92;
+  --agent-realtime-voice-halo-opacity: 0.58;
+}
+
+.agent-realtime-voice-glow::before,
+.agent-realtime-voice-glow::after {
+  position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   content: "";
+  background: conic-gradient(
+    from -18deg,
+    transparent 0deg 228deg,
+    oklch(0.65 0.2 294 / 0.18) 244deg,
+    oklch(0.7 0.2 265 / 0.7) 274deg,
+    oklch(0.79 0.16 235 / 0.96) 306deg,
+    oklch(0.96 0.035 210) 326deg,
+    oklch(0.88 0.11 202 / 0.72) 340deg,
+    transparent 360deg
+  );
+  opacity: var(--agent-realtime-voice-edge-opacity);
+  padding: 1.5px;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition: opacity 220ms ease-out;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .agent-realtime-voice-working::after {
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      transparent 36%,
-      hsl(var(--foreground) / 0.14) 50%,
-      transparent 64%,
-      transparent 100%
-    );
-    background-repeat: repeat;
-    background-size: 14rem 100%;
-    animation: agent-realtime-voice-shine 2.6s linear infinite;
-  }
-
-  @keyframes agent-realtime-voice-shine {
-    from {
-      background-position: 0 0;
-    }
+.agent-realtime-voice-glow::before {
+  inset: -1px;
+  opacity: var(--agent-realtime-voice-halo-opacity);
+  padding: 2px;
+  filter: blur(1px) drop-shadow(0 0 2px oklch(0.9 0.07 215 / 0.95))
+    drop-shadow(0 0 6px oklch(0.78 0.15 236 / 0.82))
+    drop-shadow(0 0 14px oklch(0.67 0.2 258 / 0.48))
+    drop-shadow(0 0 28px oklch(0.62 0.18 276 / 0.26));
+  mix-blend-mode: plus-lighter;
+}
 
-    to {
-      background-position: 14rem 0;
-    }
+@media (prefers-reduced-motion: reduce) {
+  .agent-realtime-voice-glow {
+    transform: rotate(35deg);
   }
 }

package/corpus/toolkit/src/ui/button.tsx

@@ -2,6 +2,15 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import {
+  LegacyButtonRenderContext,
+  useDesignSystemComponent,
+} from "../design-system/context.js";
+import { DesignSystemErrorBoundary } from "../design-system/error-boundary.js";
+import type {
+  DesignSystemEmphasis,
+  DesignSystemIntent,
+} from "../design-system/types.js";
 import { useToolkitComponent } from "../provider.js";
 import { cn } from "../utils.js";
 
@@ -39,10 +48,25 @@ export interface ButtonProps
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  /** Semantic meaning forwarded to a registered design-system ActionButton. */
+  intent?: DesignSystemIntent;
+  /** Semantic prominence forwarded independently of the default visual variant. */
+  emphasis?: DesignSystemEmphasis;
 }
 
 const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      intent: _intent,
+      emphasis: _emphasis,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
@@ -58,19 +82,84 @@ ButtonBase.displayName = "ButtonBase";
 const ButtonOverrideRenderContext = React.createContext(false);
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
+  ({ variant, size, asChild = false, intent, emphasis, ...props }, ref) => {
+    const DesignSystemActionButton = useDesignSystemComponent("ActionButton");
     const Override = useToolkitComponent("Button");
     const isRenderingOverride = React.useContext(ButtonOverrideRenderContext);
+    const isRenderingLegacyButton = React.useContext(LegacyButtonRenderContext);
+    const fallback = (
+      <ButtonBase
+        ref={ref}
+        variant={variant}
+        size={size}
+        asChild={asChild}
+        {...props}
+      />
+    );
+    if (DesignSystemActionButton && !asChild && !isRenderingLegacyButton) {
+      const semanticIntent =
+        intent ??
+        (variant === "destructive"
+          ? "danger"
+          : variant === "default"
+            ? "primary"
+            : "neutral");
+      const semanticEmphasis =
+        emphasis ??
+        (variant === "outline"
+          ? "outline"
+          : variant === "ghost" || variant === "link"
+            ? "ghost"
+            : "solid");
+      const semanticSize =
+        size === "sm" ? "compact" : size === "lg" ? "large" : "default";
+      return (
+        <DesignSystemErrorBoundary component="ActionButton" fallback={fallback}>
+          <DesignSystemActionButton
+            className={props.className}
+            style={props.style}
+            id={props.id}
+            aria-label={props["aria-label"]}
+            aria-labelledby={props["aria-labelledby"]}
+            aria-describedby={props["aria-describedby"]}
+            aria-controls={props["aria-controls"]}
+            elementRef={ref}
+            type={props.type}
+            disabled={props.disabled}
+            intent={semanticIntent}
+            emphasis={semanticEmphasis}
+            size={semanticSize}
+            onPress={(event) =>
+              props.onClick?.(
+                event as React.MouseEvent<HTMLButtonElement, MouseEvent>,
+              )
+            }
+          >
+            {props.children}
+          </DesignSystemActionButton>
+        </DesignSystemErrorBoundary>
+      );
+    }
     if (Override && Override !== Button && !isRenderingOverride) {
       const OverrideButton = Override as React.ElementType<ButtonProps>;
       return (
-        <ButtonOverrideRenderContext.Provider value={true}>
-          <OverrideButton ref={ref} {...props} />
-        </ButtonOverrideRenderContext.Provider>
+        <DesignSystemErrorBoundary component="ActionButton" fallback={fallback}>
+          <ButtonOverrideRenderContext.Provider value={true}>
+            <OverrideButton
+              ref={ref}
+              variant={variant}
+              size={size}
+              asChild={asChild}
+              intent={intent}
+              emphasis={emphasis}
+              {...props}
+            />
+          </ButtonOverrideRenderContext.Provider>
+        </DesignSystemErrorBoundary>
       );
     }
 
-    return <ButtonBase ref={ref} {...props} />;
+    return fallback;
   },
 );
 Button.displayName = "Button";

package/corpus/toolkit/src/ui/dialog.tsx

@@ -47,34 +47,59 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<
   hideClose?: boolean;
   // High-frequency keyboard surfaces can opt out without changing ordinary dialogs.
   motion?: DialogMotion;
+  container?: React.ComponentPropsWithoutRef<
+    typeof DialogPrimitive.Portal
+  >["container"];
+  closeLabel?: string;
+  overlayClassName?: string;
+  overlayStyle?: React.CSSProperties;
 }
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, hideClose, motion = "default", ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay motion={motion} />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-1/2 top-1/2 z-[280] grid max-h-[min(760px,calc(100vh-32px))] w-[calc(100vw-24px)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-hidden rounded-lg border border-border bg-background p-6 text-foreground shadow-lg outline-none",
-        motion === "default" &&
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {!hideClose && (
-        <DialogPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
-          <IconX className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+>(
+  (
+    {
+      className,
+      children,
+      hideClose,
+      motion = "default",
+      container,
+      closeLabel = "Close",
+      overlayClassName,
+      overlayStyle,
+      ...props
+    },
+    ref,
+  ) => (
+    <DialogPortal container={container}>
+      <DialogOverlay
+        motion={motion}
+        className={overlayClassName}
+        style={overlayStyle}
+      />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-1/2 top-1/2 z-[280] grid max-h-[min(760px,calc(100vh-32px))] w-[calc(100vw-24px)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-hidden rounded-lg border border-border bg-background p-6 text-foreground shadow-lg outline-none",
+          motion === "default" &&
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {!hideClose && (
+          <DialogPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+            <IconX className="h-4 w-4" />
+            <span className="sr-only">{closeLabel}</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  ),
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({

package/corpus/toolkit/src/ui/popover.tsx

@@ -15,10 +15,20 @@ const PopoverContent = React.forwardRef<
     // When false, renders inline without a portal — useful inside overflow-hidden
     // containers where a portalled overlay would escape the clip boundary.
     portalled?: boolean;
+    container?: React.ComponentPropsWithoutRef<
+      typeof PopoverPrimitive.Portal
+    >["container"];
   }
 >(
   (
-    { className, align = "center", sideOffset = 4, portalled = true, ...props },
+    {
+      className,
+      align = "center",
+      sideOffset = 4,
+      portalled = true,
+      container,
+      ...props
+    },
     ref,
   ) => {
     const content = (
@@ -36,7 +46,11 @@ const PopoverContent = React.forwardRef<
 
     if (!portalled) return content;
 
-    return <PopoverPrimitive.Portal>{content}</PopoverPrimitive.Portal>;
+    return (
+      <PopoverPrimitive.Portal container={container}>
+        {content}
+      </PopoverPrimitive.Portal>
+    );
   },
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;

package/corpus/toolkit/src/ui/select.tsx

@@ -67,9 +67,13 @@ SelectScrollDownButton.displayName =
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<
+      typeof SelectPrimitive.Portal
+    >["container"];
+  }
+>(({ className, children, position = "popper", container, ...props }, ref) => (
+  <SelectPrimitive.Portal container={container}>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(

package/corpus/toolkit/src/ui/sidebar.tsx

@@ -3,19 +3,22 @@ import { IconLayoutSidebar } from "@tabler/icons-react";
 import { VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
+import {
+  Skeleton as DesignSystemSkeleton,
+  Tooltip as DesignSystemTooltip,
+} from "../design-system/components.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { cn } from "../utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Separator } from "./separator.js";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "./sheet.js";
-import { Skeleton } from "./skeleton.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip.js";
+
+type SidebarTooltip = {
+  children?: React.ReactNode;
+  hidden?: boolean;
+  [key: string]: unknown;
+};
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -137,25 +140,23 @@ const SidebarProvider = React.forwardRef<
 
     return (
       <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className,
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
+        <div
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
       </SidebarContext.Provider>
     );
   },
@@ -302,8 +303,8 @@ const SidebarRail = React.forwardRef<
   const { toggleSidebar } = useSidebar();
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
+    <DesignSystemTooltip
+      trigger={
         <button
           ref={ref}
           data-sidebar="rail"
@@ -321,9 +322,10 @@ const SidebarRail = React.forwardRef<
           )}
           {...props}
         />
-      </TooltipTrigger>
-      <TooltipContent>Toggle Sidebar</TooltipContent>
-    </Tooltip>
+      }
+      content="Toggle Sidebar"
+      placement="top"
+    />
   );
 });
 SidebarRail.displayName = "SidebarRail";
@@ -552,7 +554,7 @@ const SidebarMenuButton = React.forwardRef<
   React.ComponentProps<"button"> & {
     asChild?: boolean;
     isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+    tooltip?: string | SidebarTooltip;
   } & VariantProps<typeof sidebarMenuButtonVariants>
 >(
   (
@@ -585,22 +587,17 @@ const SidebarMenuButton = React.forwardRef<
       return button;
     }
 
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      };
-    }
+    const tooltipText =
+      typeof tooltip === "string" ? tooltip : tooltip.children;
+    if (!tooltipText || state !== "collapsed" || isMobile) return button;
 
     return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
+      <DesignSystemTooltip
+        trigger={button}
+        content={tooltipText}
+        placement="right"
+        align="center"
+      />
     );
   },
 );
@@ -677,13 +674,15 @@ const SidebarMenuSkeleton = React.forwardRef<
       {...props}
     >
       {showIcon && (
-        <Skeleton
+        <DesignSystemSkeleton
           className="size-4 rounded-md"
+          shape="rectangle"
           data-sidebar="menu-skeleton-icon"
         />
       )}
-      <Skeleton
+      <DesignSystemSkeleton
         className="h-4 flex-1 max-w-[--skeleton-width]"
+        shape="line"
         data-sidebar="menu-skeleton-text"
         style={
           {

package/corpus/toolkit/src/ui/tooltip.tsx

@@ -21,12 +21,16 @@ function normalizeTooltipText(text: string): string {
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<
+      typeof TooltipPrimitive.Portal
+    >["container"];
+  }
+>(({ className, sideOffset = 6, children, container, ...props }, ref) => {
   const normalizedChildren =
     typeof children === "string" ? normalizeTooltipText(children) : children;
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container}>
       <TooltipPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}

package/dist/a2a/client.d.ts

@@ -66,7 +66,9 @@ export declare class A2AClient {
     /**
      * Poll for a task by id. Used in async mode after `send({ async: true })`.
      */
-    getTask(taskId: string): Promise<Task>;
+    getTask(taskId: string, opts?: {
+        requestTimeoutMs?: number;
+    }): Promise<Task>;
     /**
      * Execute one receiver-approved read-only action without starting the
      * receiver's agent loop. The receiver still owns validation, credentials,