@agent-native/toolkit 0.214.0 → 0.217.0

package/dist/app/shared/ConsentBanner.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getConsentChoice, resolveConsentRegion, setConsentChoice, shouldShowConsentBanner, subscribeConsent, } from "@agent-native/core/client/consent";
+import { useT } from "@agent-native/core/client/i18n";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Label } from "@agent-native/toolkit/ui/label";
+import { Switch } from "@agent-native/toolkit/ui/switch";
+import { useEffect, useState, useSyncExternalStore } from "react";
+const DEFAULT_PRIVACY_POLICY_HREF = "https://www.agent-native.com/privacy";
+/**
+ * The cookie banner for visitors in the consent region. Renders nothing
+ * elsewhere, and nothing once the visitor has chosen, until
+ * `openConsentSettings()` reopens it.
+ */
+export function ConsentBanner({ privacyPolicyHref = DEFAULT_PRIVACY_POLICY_HREF, }) {
+    const t = useT();
+    const open = useSyncExternalStore(subscribeConsent, shouldShowConsentBanner, () => false);
+    const [managing, setManaging] = useState(false);
+    const [performance, setPerformance] = useState(false);
+    const [targeting, setTargeting] = useState(false);
+    useEffect(() => {
+        void resolveConsentRegion();
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        const stored = getConsentChoice();
+        setPerformance(stored?.performance ?? false);
+        setTargeting(stored?.targeting ?? false);
+        setManaging(false);
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsxs("section", { role: "region", "aria-label": t("consentBanner.label"), "data-agent-native-consent-banner": true, className: "fixed bottom-4 left-4 z-[100] flex w-[min(420px,calc(100vw-2rem))] flex-col gap-3 rounded-lg border bg-popover p-4 text-sm text-popover-foreground shadow-lg", children: [_jsxs("p", { className: "m-0 leading-relaxed", children: [t("consentBanner.message"), " ", _jsx("a", { href: privacyPolicyHref, target: "_blank", rel: "noreferrer", className: "underline underline-offset-2", children: t("consentBanner.privacyPolicy") })] }), managing ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "an-consent-necessary", children: t("consentBanner.necessary") }), _jsx(Switch, { id: "an-consent-necessary", checked: true, disabled: true })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "an-consent-performance", children: t("consentBanner.performance") }), _jsx(Switch, { id: "an-consent-performance", checked: performance, onCheckedChange: setPerformance })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "an-consent-targeting", children: t("consentBanner.targeting") }), _jsx(Switch, { id: "an-consent-targeting", checked: targeting, onCheckedChange: setTargeting })] })] })) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "flex-1", onClick: () => setConsentChoice({ performance: false, targeting: false }), children: t("consentBanner.rejectAll") }), _jsx(Button, { variant: "outline", size: "sm", className: "flex-1", onClick: () => setConsentChoice({ performance: true, targeting: true }), children: t("consentBanner.acceptAll") }), managing ? (_jsx(Button, { variant: "outline", size: "sm", className: "flex-1", onClick: () => setConsentChoice({ performance, targeting }), children: t("consentBanner.save") })) : (_jsx(Button, { variant: "ghost", size: "sm", className: "flex-1", onClick: () => setManaging(true), children: t("consentBanner.manage") }))] })] }));
+}
+//# sourceMappingURL=ConsentBanner.js.map

package/dist/app/shared/ConsentBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentBanner.js","sourceRoot":"","sources":["../../../src/app/shared/ConsentBanner.tsx"],"names":[],"mappings":"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"}

package/dist/composer/ComposerContextBanner.d.ts

@@ -6,6 +6,8 @@ interface ComposerContextBannerBaseProps {
     /** Localized label for the action that opens or adds context. */
     addContextLabel: string;
     onAddContext: () => void;
+    /** Optional decorative icon displayed after the add-context label. */
+    addContextIcon?: ReactNode;
     icon?: ReactNode;
     className?: string;
 }
@@ -17,6 +19,6 @@ export type ComposerContextBannerProps = ComposerContextBannerBaseProps & ({
     onDismiss: () => void;
 });
 /** Shared informational banner that hosts can place in `composerContextBannerSlot`. */
-export declare function ComposerContextBanner({ ariaLabel, children, addContextLabel, onAddContext, dismissLabel, onDismiss, icon, className, }: ComposerContextBannerProps): import("react").JSX.Element;
+export declare function ComposerContextBanner({ ariaLabel, children, addContextLabel, onAddContext, addContextIcon, dismissLabel, onDismiss, icon, className, }: ComposerContextBannerProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ComposerContextBanner.d.ts.map

package/dist/composer/ComposerContextBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerContextBanner.d.ts","sourceRoot":"","sources":["../../src/composer/ComposerContextBanner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,8BAA8B;IACtC,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,0BAA0B,GAAG,8BAA8B,GACrE,CACI;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3C;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,IAAI,CAAA;CAAE,CAClD,CAAC;AAEJ,uFAAuF;AACvF,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,0BAA0B,+BAsC5B"}
+{"version":3,"file":"ComposerContextBanner.d.ts","sourceRoot":"","sources":["../../src/composer/ComposerContextBanner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,8BAA8B;IACtC,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,sEAAsE;IACtE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,0BAA0B,GAAG,8BAA8B,GACrE,CACI;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3C;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,IAAI,CAAA;CAAE,CAClD,CAAC;AAEJ,uFAAuF;AACvF,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,0BAA0B,+BAwC5B"}

package/dist/composer/ComposerContextBanner.js

@@ -3,7 +3,7 @@ import { IconPlus, IconSparkles, IconX } from "@tabler/icons-react";
 import { Button } from "../ui/button.js";
 import { cn } from "../utils.js";
 /** Shared informational banner that hosts can place in `composerContextBannerSlot`. */
-export function ComposerContextBanner({ ariaLabel, children, addContextLabel, onAddContext, dismissLabel, onDismiss, icon, className, }) {
-    return (_jsxs("aside", { "aria-label": ariaLabel, "data-agent-composer-slot": "context-banner", className: cn("agent-composer-context-banner mx-auto mb-2 flex w-full max-w-3xl items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-2 text-xs text-muted-foreground", className), children: [_jsx("span", { className: "shrink-0 text-primary", children: icon ?? _jsx(IconSparkles, { "aria-hidden": "true", className: "size-4" }) }), _jsx("span", { className: "min-w-0 flex-1", children: children }), _jsxs(Button, { className: "shrink-0", onClick: onAddContext, size: "xs", type: "button", variant: "outline", children: [addContextLabel, _jsx(IconPlus, { "aria-hidden": "true" })] }), onDismiss ? (_jsx(Button, { "aria-label": dismissLabel, className: "shrink-0", onClick: onDismiss, size: "icon-xs", type: "button", variant: "ghost", children: _jsx(IconX, { "aria-hidden": "true" }) })) : null] }));
+export function ComposerContextBanner({ ariaLabel, children, addContextLabel, onAddContext, addContextIcon, dismissLabel, onDismiss, icon, className, }) {
+    return (_jsxs("aside", { "aria-label": ariaLabel, "data-agent-composer-slot": "context-banner", className: cn("agent-composer-context-banner mx-auto mb-2 flex w-full max-w-3xl items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-2 text-xs text-muted-foreground", className), children: [_jsx("span", { className: "shrink-0 text-primary", children: icon ?? _jsx(IconSparkles, { "aria-hidden": "true", className: "size-4" }) }), _jsx("span", { className: "min-w-0 flex-1", children: children }), _jsxs(Button, { className: "shrink-0 px-1.5", onClick: onAddContext, size: "xs", type: "button", variant: "outline", children: [addContextLabel, _jsx("span", { "aria-hidden": "true", children: addContextIcon ?? _jsx(IconPlus, { "aria-hidden": "true" }) })] }), onDismiss ? (_jsx(Button, { "aria-label": dismissLabel, className: "shrink-0", onClick: onDismiss, size: "icon-xs", type: "button", variant: "ghost", children: _jsx(IconX, { "aria-hidden": "true" }) })) : null] }));
 }
 //# sourceMappingURL=ComposerContextBanner.js.map

package/dist/composer/ComposerContextBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerContextBanner.js","sourceRoot":"","sources":["../../src/composer/ComposerContextBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGpE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAmBjC,uFAAuF;AACvF,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACkB;IAC3B,OAAO,CACL,+BACc,SAAS,8BACI,gBAAgB,EACzC,SAAS,EAAE,EAAE,CACX,+KAA+K,EAC/K,SAAS,CACV,aAED,eAAM,SAAS,EAAC,uBAAuB,YACpC,IAAI,IAAI,KAAC,YAAY,mBAAa,MAAM,EAAC,SAAS,EAAC,QAAQ,GAAG,GAC1D,EACP,eAAM,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAQ,EAClD,MAAC,MAAM,IACL,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,aAEhB,eAAe,EAChB,KAAC,QAAQ,mBAAa,MAAM,GAAG,IACxB,EACR,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,MAAM,kBACO,YAAY,EACxB,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,OAAO,YAEf,KAAC,KAAK,mBAAa,MAAM,GAAG,GACrB,CACV,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ComposerContextBanner.js","sourceRoot":"","sources":["../../src/composer/ComposerContextBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGpE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAqBjC,uFAAuF;AACvF,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACkB;IAC3B,OAAO,CACL,+BACc,SAAS,8BACI,gBAAgB,EACzC,SAAS,EAAE,EAAE,CACX,+KAA+K,EAC/K,SAAS,CACV,aAED,eAAM,SAAS,EAAC,uBAAuB,YACpC,IAAI,IAAI,KAAC,YAAY,mBAAa,MAAM,EAAC,SAAS,EAAC,QAAQ,GAAG,GAC1D,EACP,eAAM,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAQ,EAClD,MAAC,MAAM,IACL,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,aAEhB,eAAe,EAChB,8BAAkB,MAAM,YACrB,cAAc,IAAI,KAAC,QAAQ,mBAAa,MAAM,GAAG,GAC7C,IACA,EACR,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,MAAM,kBACO,YAAY,EACxB,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,OAAO,YAEf,KAAC,KAAK,mBAAa,MAAM,GAAG,GACrB,CACV,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC;AACJ,CAAC"}

package/dist/ui/sonner.d.ts

@@ -1,5 +1,5 @@
-import { Toaster as Sonner } from "sonner";
+import { toast as sonnerToast, Toaster as Sonner } from "sonner";
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 declare const Toaster: ({ className, toastOptions, ...props }: ToasterProps) => import("react").JSX.Element;
-export { Toaster };
+export { Toaster, sonnerToast };
 //# sourceMappingURL=sonner.d.ts.map

package/dist/ui/sonner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI3C,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AASxD,QAAA,MAAM,OAAO,0CAA2C,YAAY,gCAyCnE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIjE,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AASxD,QAAA,MAAM,OAAO,0CAA2C,YAAY,gCAyCnE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/ui/sonner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
+import { toast as sonnerToast, Toaster as Sonner } from "sonner";
 import { cn } from "../utils.js";
 const toastWidthClasses = "group-[.toaster]:!w-[var(--width)] group-[.toaster]:!min-w-[min(20rem,calc(100vw_-_2rem))] group-[.toaster]:!max-w-[var(--width)] group-[.toaster]:!gap-3 group-[.toaster]:!break-normal";
 const toastContentClasses = "group-[.toast]:!min-w-0 group-[.toast]:!flex-1 group-[.toast]:!basis-auto group-[.toast]:break-words";
@@ -21,5 +21,5 @@ const Toaster = ({ className, toastOptions, ...props }) => {
             },
         }, ...props }));
 };
-export { Toaster };
+export { Toaster, sonnerToast };
 //# sourceMappingURL=sonner.js.map

package/dist/ui/sonner.js.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.js","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,MAAM,iBAAiB,GACrB,0LAA0L,CAAC;AAC7L,MAAM,mBAAmB,GACvB,sGAAsG,CAAC;AACzG,MAAM,kBAAkB,GACtB,4DAA4D,CAAC;AAE/D,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,YAAY,EAAE,UAAU,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAA8B,EACrC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,EACD,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,KAAK,EAAE,EAAE,CACP,iBAAiB,EACjB,uIAAuI,EACvI,UAAU,EAAE,KAAK,CAClB;gBACD,KAAK,EAAE,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC1D,WAAW,EAAE,EAAE,CACb,iEAAiE,EACjE,UAAU,EAAE,WAAW,CACxB;gBACD,OAAO,EAAE,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,OAAO,CAAC;gBACrD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,kEAAkE,EAClE,UAAU,EAAE,YAAY,CACzB;gBACD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,8DAA8D,EAC9D,UAAU,EAAE,YAAY,CACzB;aACF;SACF,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.js","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,MAAM,iBAAiB,GACrB,0LAA0L,CAAC;AAC7L,MAAM,mBAAmB,GACvB,sGAAsG,CAAC;AACzG,MAAM,kBAAkB,GACtB,4DAA4D,CAAC;AAE/D,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,YAAY,EAAE,UAAU,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAA8B,EACrC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,EACD,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,KAAK,EAAE,EAAE,CACP,iBAAiB,EACjB,uIAAuI,EACvI,UAAU,EAAE,KAAK,CAClB;gBACD,KAAK,EAAE,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC1D,WAAW,EAAE,EAAE,CACb,iEAAiE,EACjE,UAAU,EAAE,WAAW,CACxB;gBACD,OAAO,EAAE,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,OAAO,CAAC;gBACrD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,kEAAkE,EAClE,UAAU,EAAE,YAAY,CACzB;gBACD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,8DAA8D,EAC9D,UAAU,EAAE,YAAY,CACzB;aACF;SACF,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.214.0",
+  "version": "0.217.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -678,7 +678,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.214.0"
+    "@agent-native/agentkit": "^0.217.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -702,7 +702,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.214.0"
+    "@agent-native/core": "^0.217.0"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.205.1",

package/src/app/agentkit/react/chat.tsx

@@ -51,6 +51,7 @@ export function AgentChat(props: AgentChatProps) {
     hasRenderedMessages,
     emptyComposerPlacement,
     autoScroll,
+    transcriptLayout,
     className,
     ...rootProps
   } = props;
@@ -79,6 +80,7 @@ export function AgentChat(props: AgentChatProps) {
         hasRenderedMessages={hasRenderedMessages}
         emptyComposerPlacement={emptyComposerPlacement}
         autoScroll={autoScroll}
+        transcriptLayout={transcriptLayout}
         className={className}
       />
     </AgentKitRoot>

package/src/app/agentkit/react/components.interaction.spec.tsx

@@ -235,6 +235,113 @@ describe("AgentInteractionItem replay privacy", () => {
 });
 
 describe("AgentKitChat interactions", () => {
+  it("applies transcript layout values through clamped shared styles", async () => {
+    const client = new AgentKitClient({
+      transport: {
+        async startRun() {
+          return { runId: "run-transcript-layout" };
+        },
+        async *subscribeToRun() {},
+        async cancelRun() {},
+      },
+    });
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const actEnvironment = globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    };
+    const previousActEnvironment = actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+
+    try {
+      await act(async () => {
+        root.render(
+          <AgentKitProvider controller={client} threadId="thread-layout">
+            <AgentKitChat
+              transcriptLayout={{
+                topInset: 5,
+                messageLaneWidth: 730,
+                messageLaneOffsetInline: -33,
+                messageGap: 12,
+                messageLineHeight: 20,
+                fontFamily: "IBM Plex Sans",
+                userBubbleLineHeight: 18,
+                userBubbleMaxWidth: 600,
+                userBubbleOffsetInline: -10,
+                userBubblePadding: { block: 8, inline: 13 },
+              }}
+              composerProps={{
+                autoFocus: false,
+                modelStatusChecksEnabled: false,
+                voiceEnabled: false,
+              }}
+            />
+          </AgentKitProvider>,
+        );
+      });
+
+      const transcript = container.querySelector<HTMLElement>(
+        ".agentkit-transcript-content",
+      );
+      expect(transcript).not.toBeNull();
+      expect(
+        transcript!.style.getPropertyValue("--agentkit-transcript-top-inset"),
+      ).toBe("5px");
+      expect(
+        transcript!.style.getPropertyValue("--agentkit-transcript-lane-width"),
+      ).toBe("730px");
+      expect(
+        transcript!.style.getPropertyValue(
+          "--agentkit-transcript-lane-offset-inline",
+        ),
+      ).toBe("-33px");
+      expect(
+        transcript!.style.getPropertyValue("--agentkit-transcript-message-gap"),
+      ).toBe("12px");
+      expect(
+        transcript!.style.getPropertyValue(
+          "--agentkit-transcript-message-line-height",
+        ),
+      ).toBe("20px");
+      expect(
+        transcript!.style.getPropertyValue("--agentkit-transcript-font-family"),
+      ).toBe("IBM Plex Sans");
+      expect(
+        transcript!.style.getPropertyValue(
+          "--agentkit-user-bubble-line-height",
+        ),
+      ).toBe("18px");
+      expect(
+        transcript!.style.getPropertyValue("--agentkit-user-bubble-max-width"),
+      ).toBe("600px");
+      expect(
+        transcript!.style.getPropertyValue(
+          "--agentkit-user-bubble-offset-inline",
+        ),
+      ).toBe("-10px");
+      expect(
+        transcript!.style.getPropertyValue(
+          "--agentkit-user-bubble-padding-block",
+        ),
+      ).toBe("8px");
+      expect(
+        transcript!.style.getPropertyValue(
+          "--agentkit-user-bubble-padding-inline",
+        ),
+      ).toBe("13px");
+    } finally {
+      await act(async () => root.unmount());
+      await client.shutdown();
+      container.remove();
+      if (previousActEnvironment === undefined) {
+        delete actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+      } else {
+        actEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment;
+      }
+    }
+  });
+
   it("preserves host submission disablement", async () => {
     const client = new AgentKitClient({
       transport: {

package/src/app/agentkit/react/components.spec.tsx

@@ -407,7 +407,32 @@ describe("AgentKitChat", () => {
       /\.agentkit-transcript \{[^}]*inline-size: min\(100%, 47rem\);/,
     );
     expect(styles).toMatch(
-      /\.agentkit-transcript-content \{[\s\S]*inline-size: min\(100%, 47rem\);[\s\S]*margin-inline: auto;[\s\S]*padding: 1\.5rem 1rem;/,
+      /\.agentkit-transcript-content \{[\s\S]*inline-size: min\(100%, var\(--agentkit-transcript-lane-width, 47rem\)\);[\s\S]*margin-inline: auto;[\s\S]*inset-inline-start: clamp\([\s\S]*var\(--agentkit-transcript-lane-offset-inline, 0px\),[\s\S]*padding: 1\.5rem 1rem;[\s\S]*padding-block-start: var\(--agentkit-transcript-top-inset, 1\.5rem\);/,
+    );
+    expect(styles).toContain(
+      "margin-block: 0 var(--agentkit-transcript-message-gap, 1.25rem);",
+    );
+    expect(styles).toMatch(
+      /font-family:\s*var\(\s*--agentkit-transcript-font-family,\s*var\(--font-sans,\s*inherit\)\s*\);/,
+    );
+    expect(styles).toContain(
+      "line-height: var(--agentkit-transcript-message-line-height, 1.52);",
+    );
+    expect(styles).toContain(
+      "--agentkit-user-bubble-line-height,\n    var(--agentkit-transcript-message-line-height, 1.52)",
+    );
+    expect(styles).toContain("var(--agentkit-user-bubble-max-width, 38rem)");
+    expect(styles).toContain(
+      "var(--agentkit-user-bubble-padding-block, 0.625rem)",
+    );
+    expect(styles).toContain(
+      "var(--agentkit-user-bubble-padding-inline, 0.8125rem)",
+    );
+    expect(styles).toContain(
+      "inset-inline-start: var(--agentkit-user-bubble-offset-inline, 0px);",
+    );
+    expect(styles).toMatch(
+      /max-inline-size: min\([\s\S]*94%,[\s\S]*var\(--agentkit-user-bubble-max-width, 38rem\)/,
     );
     expect(styles).toContain("overflow-anchor: none;");
     expect(styles).toMatch(
@@ -1773,6 +1798,7 @@ describe("AgentKitChat", () => {
         client={client}
         threadId="thread-slots"
         load="manual"
+        transcriptLayout={{ topInset: 7 }}
         title="Release room"
         toolbar={<button type="button">Share</button>}
         labels={{ conversation: "Release conversation" }}
@@ -1832,6 +1858,7 @@ describe("AgentKitChat", () => {
       expect(html).toContain(`data-slot="${slot}"`);
     }
     expect(html).toContain('aria-label="Release room"');
+    expect(html).toContain("--agentkit-transcript-top-inset:7px");
     expect(html).toContain("Check the deployment");
     expect(html).not.toContain("private context");
     expect(html).not.toContain("private slot context");

package/src/app/agentkit/react/components.tsx

@@ -40,6 +40,7 @@ import {
 import {
   createContext,
   Component,
+  Fragment,
   memo,
   useCallback,
   useContext,
@@ -49,6 +50,7 @@ import {
   useRef,
   useState,
   type ComponentType,
+  type CSSProperties,
   type ErrorInfo,
   type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
@@ -138,6 +140,11 @@ import {
 } from "./context.js";
 import { orderMessageContent } from "./message-content-order.js";
 import { AgentStreamingText } from "./streaming-text.js";
+import {
+  workedForRowChevronStyle,
+  workedForRowSummaryStyle,
+  type AgentChatTranscriptLayout,
+} from "./transcript-layout.js";
 
 // AgentKit React installs without @agent-native/core, so it repeats core's
 // replay markers. Its specs assert core's attribute names.
@@ -1465,7 +1472,8 @@ export function AgentActivityGroup({
   excludeAgentActivities?: boolean;
   isCurrentSegment?: boolean;
 }) {
-  const { threadId, slots, registry, labels } = useAgentKit();
+  const { threadId, slots, registry, labels, formatWorkedForDuration } =
+    useAgentKit();
   const thread = useAgentThread();
   const runEvents = runId
     ? thread.events.filter((event) => event.runId === runId)
@@ -1762,6 +1770,7 @@ export function AgentActivityGroup({
   }
   const hasExpandableActivity = displayGroups.length > 0;
   const formatDuration = (ms: number) =>
+    formatWorkedForDuration?.(ms) ??
     formatAgentKitDuration(ms, {
       hour: labels.durationHourShort,
       minute: labels.durationMinuteShort,
@@ -1908,7 +1917,7 @@ function AgentWorkDisclosure({
   current?: ReactNode;
   children: ReactNode;
 }) {
-  const { slots } = useAgentKit();
+  const { slots, workedForRowLayout } = useAgentKit();
   const [open, setOpen] = useState(false);
   const Summary = slots.workedForSummary;
   return (
@@ -1921,6 +1930,7 @@ function AgentWorkDisclosure({
       <summary
         className="agentkit-activities-summary"
         aria-disabled={!expandable}
+        style={workedForRowSummaryStyle(workedForRowLayout)}
         onClick={(event) => {
           event.preventDefault();
           if (!expandable) return;
@@ -1934,12 +1944,14 @@ function AgentWorkDisclosure({
             expandable={expandable}
             open={open}
             current={current}
+            layout={workedForRowLayout}
           />
         ) : (
           <>
             <IconChevronRight
               aria-hidden="true"
               className="agentkit-icon agentkit-summary-chevron"
+              style={workedForRowChevronStyle(workedForRowLayout)}
             />
             <span className="agentkit-activities-summary-content">
               {label ? (
@@ -3798,11 +3810,15 @@ export function AgentMessageActions({
   );
 }
 
+const AgentKitPostWidgetTextContext =
+  createContext<AgentChatTranscriptLayout["postWidgetText"]>(undefined);
+
 export function AgentMessageView({
   value: message,
   threadId,
 }: AgentKitRenderProps<AgentMessage>) {
   const { labels, slots, resolveMessageContentOrder } = useAgentKit();
+  const postWidgetText = useContext(AgentKitPostWidgetTextContext);
   const thread = useAgentThread(threadId);
   const visibleMessage = stripAgentMessageContext(message);
   const Supplement = slots.messageSupplement;
@@ -3843,6 +3859,7 @@ export function AgentMessageView({
       <Supplement value={visibleMessage} threadId={threadId} />
     ) : null;
   }
+  let hasSeenWidget = false;
   return (
     <article
       className="agentkit-message"
@@ -3852,20 +3869,39 @@ export function AgentMessageView({
       aria-busy={message.status === "streaming"}
     >
       <div className="agentkit-message-content">
-        {orderedContent.map((item, index) => (
-          <AgentMessagePartView
-            key={item.key}
-            value={
-              item.type === "widget"
-                ? { type: "widget", widget: item.widget }
-                : item.part
-            }
-            threadId={threadId}
-            active={message.status === "streaming"}
-            resetKey={`${threadId}:${message.id}:${index}`}
-            userMessage={message.role === "user"}
-          />
-        ))}
+        {orderedContent.map((item, index) => {
+          const isWidget =
+            item.type === "widget" ||
+            (item.type === "part" && item.part.type === "widget");
+          const followsWidget =
+            message.role === "assistant" &&
+            postWidgetText !== undefined &&
+            hasSeenWidget &&
+            item.type === "part" &&
+            item.part.type === "text";
+          if (isWidget) hasSeenWidget = true;
+          const content = (
+            <AgentMessagePartView
+              value={
+                item.type === "widget"
+                  ? { type: "widget", widget: item.widget }
+                  : item.part
+              }
+              threadId={threadId}
+              active={message.status === "streaming"}
+              resetKey={`${threadId}:${message.id}:${index}`}
+              userMessage={message.role === "user"}
+            />
+          );
+
+          return followsWidget ? (
+            <div key={item.key} data-post-widget-text="true">
+              {content}
+            </div>
+          ) : (
+            <Fragment key={item.key}>{content}</Fragment>
+          );
+        })}
         {attachedAnnotations.length ? (
           <div className="agentkit-annotations">
             {attachedAnnotations.map((annotation) => (
@@ -4800,9 +4836,103 @@ export interface AgentKitChatProps {
   emptyComposerPlacement?: "center" | "bottom";
   /** Follow new output until the user deliberately scrolls away. */
   autoScroll?: boolean;
+  /** Optional transcript geometry. Omitted values keep the shared defaults. */
+  transcriptLayout?: AgentChatTranscriptLayout;
   className?: string;
 }
 
+type AgentKitTranscriptContentStyle = CSSProperties & {
+  "--agentkit-transcript-top-inset"?: string;
+  "--agentkit-transcript-lane-width"?: string;
+  "--agentkit-transcript-lane-offset-inline"?: string;
+  "--agentkit-transcript-message-gap"?: string;
+  "--agentkit-transcript-message-line-height"?: string;
+  "--agentkit-transcript-font-family"?: string;
+  "--agentkit-transcript-post-widget-text-color"?: string;
+  "--agentkit-transcript-post-widget-paragraph-padding-block"?: string;
+  "--agentkit-user-bubble-line-height"?: string;
+  "--agentkit-user-bubble-max-width"?: string;
+  "--agentkit-user-bubble-offset-inline"?: string;
+  "--agentkit-user-bubble-padding-block"?: string;
+  "--agentkit-user-bubble-padding-inline"?: string;
+};
+
+function transcriptLength(value: number | undefined, name: string) {
+  if (value === undefined) return undefined;
+  if (!Number.isFinite(value) || value < 0) {
+    throw new RangeError(
+      `transcriptLayout.${name} must be a non-negative number`,
+    );
+  }
+  return `${value}px`;
+}
+
+function transcriptOffset(value: number | undefined, name: string) {
+  if (value === undefined) return undefined;
+  if (!Number.isFinite(value)) {
+    throw new RangeError(`transcriptLayout.${name} must be a finite number`);
+  }
+  return `${value}px`;
+}
+
+function transcriptContentStyle(
+  layout?: AgentChatTranscriptLayout,
+): AgentKitTranscriptContentStyle | undefined {
+  if (!layout) return undefined;
+  return {
+    "--agentkit-transcript-top-inset": transcriptLength(
+      layout.topInset,
+      "topInset",
+    ),
+    "--agentkit-transcript-lane-width": transcriptLength(
+      layout.messageLaneWidth,
+      "messageLaneWidth",
+    ),
+    "--agentkit-transcript-lane-offset-inline": transcriptOffset(
+      layout.messageLaneOffsetInline,
+      "messageLaneOffsetInline",
+    ),
+    "--agentkit-transcript-message-gap": transcriptLength(
+      layout.messageGap,
+      "messageGap",
+    ),
+    "--agentkit-transcript-message-line-height": transcriptLength(
+      layout.messageLineHeight,
+      "messageLineHeight",
+    ),
+    "--agentkit-transcript-font-family": layout.fontFamily,
+    "--agentkit-transcript-post-widget-text-color":
+      layout.postWidgetText?.tone === "muted"
+        ? "var(--agentkit-text-muted)"
+        : undefined,
+    "--agentkit-transcript-post-widget-paragraph-padding-block":
+      transcriptLength(
+        layout.postWidgetText?.paragraphPaddingBlock,
+        "postWidgetText.paragraphPaddingBlock",
+      ),
+    "--agentkit-user-bubble-line-height": transcriptLength(
+      layout.userBubbleLineHeight,
+      "userBubbleLineHeight",
+    ),
+    "--agentkit-user-bubble-max-width": transcriptLength(
+      layout.userBubbleMaxWidth,
+      "userBubbleMaxWidth",
+    ),
+    "--agentkit-user-bubble-offset-inline": transcriptOffset(
+      layout.userBubbleOffsetInline,
+      "userBubbleOffsetInline",
+    ),
+    "--agentkit-user-bubble-padding-block": transcriptLength(
+      layout.userBubblePadding?.block,
+      "userBubblePadding.block",
+    ),
+    "--agentkit-user-bubble-padding-inline": transcriptLength(
+      layout.userBubblePadding?.inline,
+      "userBubblePadding.inline",
+    ),
+  };
+}
+
 const AGENTKIT_TRANSCRIPT_BOTTOM_THRESHOLD = 24;
 const AGENTKIT_TRANSCRIPT_SCROLLBAR_IDLE_MS = 900;
 const AGENTKIT_TRANSCRIPT_SCROLL_KEYS = new Set([
@@ -4832,6 +4962,7 @@ export function AgentKitChat({
   hasRenderedMessages = false,
   emptyComposerPlacement = "center",
   autoScroll = true,
+  transcriptLayout,
   className,
 }: AgentKitChatProps) {
   const { threadId, slots, registry, labels, onThreadForked } = useAgentKit();
@@ -5582,12 +5713,17 @@ export function AgentKitChat({
           <div
             ref={transcriptContentRef}
             className="agentkit-transcript-content"
+            style={transcriptContentStyle(transcriptLayout)}
           >
             <AgentKitRegionSlot slot={Transcript} threadId={threadId}>
               {!hasConversation && EmptyState ? (
                 <EmptyState threadId={threadId} />
               ) : null}
-              {transcriptItems}
+              <AgentKitPostWidgetTextContext.Provider
+                value={transcriptLayout?.postWidgetText}
+              >
+                {transcriptItems}
+              </AgentKitPostWidgetTextContext.Provider>
               {approvalEntries.map(([approvalId, request]) => (
                 <AgentKitSurfaceBoundary
                   key={`${threadId}:${approvalId}`}