@agent-native/toolkit 0.213.1 → 0.216.0

package/dist/app/styles/theme-families.css

@@ -0,0 +1,66 @@
+/*
+ * The agent-native family uses the shared Tailwind/shadcn palette from the
+ * Design template. App styles remain the original family by default.
+ */
+:root[data-theme-family="agent-native"],
+:root[data-theme-family="agent-native"][data-appearance] {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
+  --radius: 0.5rem;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
+}
+
+.dark[data-theme-family="agent-native"],
+.dark[data-theme-family="agent-native"][data-appearance] {
+  --background: 0 0% 13%;
+  --foreground: 0 0% 90%;
+  --card: 0 0% 15%;
+  --card-foreground: 0 0% 90%;
+  --popover: 0 0% 15%;
+  --popover-foreground: 0 0% 90%;
+  --primary: 0 0% 75%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
+  --secondary-foreground: 0 0% 90%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
+  --accent-foreground: 0 0% 96%;
+  --destructive: 0 91% 71%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
+  --ring: 0 0% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
+  --sidebar-primary: 0 0% 75%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 90%;
+  --sidebar-border: 0 0% 20%;
+  --sidebar-ring: 0 0% 60%;
+}

package/dist/composer/ComposerContextBanner.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+interface ComposerContextBannerBaseProps {
+    /** Localized name for the banner's content. */
+    ariaLabel: string;
+    children: ReactNode;
+    /** 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;
+}
+export type ComposerContextBannerProps = ComposerContextBannerBaseProps & ({
+    dismissLabel?: never;
+    onDismiss?: never;
+} | {
+    dismissLabel: string;
+    onDismiss: () => void;
+});
+/** Shared informational banner that hosts can place in `composerContextBannerSlot`. */
+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

@@ -0,0 +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,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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, 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

@@ -0,0 +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;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/composer/ComposerModePicker.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface ComposerModeOption {
+    /** Stable host-defined mode identifier. */
+    value: string;
+    /** Localized visible label supplied by the host. */
+    label: string;
+    /** Optional localized explanation shown in the menu. */
+    description?: string;
+    /** Optional host-provided icon. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface ComposerModePickerProps {
+    /** Localized accessible name for this choice, such as "Ask mode". */
+    ariaLabel: string;
+    value: string;
+    options: readonly ComposerModeOption[];
+    onValueChange: (value: string) => void;
+    className?: string;
+}
+/**
+ * A shared, host-configurable mode picker for composer modes that are not part
+ * of the framework's built-in Act/Plan execution setting.
+ */
+export declare function ComposerModePicker({ ariaLabel, value, options, onValueChange, className, }: ComposerModePickerProps): import("react").JSX.Element;
+//# sourceMappingURL=ComposerModePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerModePicker.d.ts","sourceRoot":"","sources":["../../src/composer/ComposerModePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACvC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,GACV,EAAE,uBAAuB,+BAsDzB"}

package/dist/composer/ComposerModePicker.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconChevronDown } from "@tabler/icons-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+import { cn } from "../utils.js";
+/**
+ * A shared, host-configurable mode picker for composer modes that are not part
+ * of the framework's built-in Act/Plan execution setting.
+ */
+export function ComposerModePicker({ ariaLabel, value, options, onValueChange, className, }) {
+    const selectedOption = options.find((option) => option.value === value);
+    const selectedLabel = selectedOption?.label ?? value;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${ariaLabel}: ${selectedLabel}`, "data-agent-composer-slot": "mode-picker", className: cn("agent-composer-mode-picker inline-flex h-7 max-w-48 shrink-0 items-center gap-1 rounded-md px-2 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className), children: [selectedOption?.icon, _jsx("span", { className: "min-w-0 truncate", children: selectedLabel }), _jsx(IconChevronDown, { "aria-hidden": "true", className: "size-3 shrink-0 opacity-60" })] }) }), _jsx(DropdownMenuContent, { side: "top", align: "start", collisionPadding: 8, className: "agent-composer-mode-picker-menu min-w-48", children: _jsx(DropdownMenuRadioGroup, { value: value, onValueChange: onValueChange, children: options.map((option) => (_jsxs(DropdownMenuRadioItem, { value: option.value, indicator: "check", disabled: option.disabled, className: "agent-composer-mode-picker-option pe-3", children: [option.icon, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: option.label }), option.description ? (_jsx("span", { className: "mt-0.5 block whitespace-normal text-xs text-muted-foreground", children: option.description })) : null] })] }, option.value))) }) })] }));
+}
+//# sourceMappingURL=ComposerModePicker.js.map

package/dist/composer/ComposerModePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerModePicker.js","sourceRoot":"","sources":["../../src/composer/ComposerModePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAuBjC;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,GACe;IACxB,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IACxE,MAAM,aAAa,GAAG,cAAc,EAAE,KAAK,IAAI,KAAK,CAAC;IAErD,OAAO,CACL,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,kBACE,IAAI,EAAC,QAAQ,gBACD,GAAG,SAAS,KAAK,aAAa,EAAE,8BACnB,aAAa,EACtC,SAAS,EAAE,EAAE,CACX,4PAA4P,EAC5P,SAAS,CACV,aAEA,cAAc,EAAE,IAAI,EACrB,eAAM,SAAS,EAAC,kBAAkB,YAAE,aAAa,GAAQ,EACzD,KAAC,eAAe,mBACF,MAAM,EAClB,SAAS,EAAC,4BAA4B,GACtC,IACK,GACW,EACtB,KAAC,mBAAmB,IAClB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,OAAO,EACb,gBAAgB,EAAE,CAAC,EACnB,SAAS,EAAC,0CAA0C,YAEpD,KAAC,sBAAsB,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,YAC/D,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,MAAC,qBAAqB,IAEpB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAC,wCAAwC,aAEjD,MAAM,CAAC,IAAI,EACZ,gBAAM,SAAS,EAAC,gBAAgB,aAC9B,eAAM,SAAS,EAAC,gBAAgB,YAAE,MAAM,CAAC,KAAK,GAAQ,EACrD,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CACpB,eAAM,SAAS,EAAC,8DAA8D,YAC3E,MAAM,CAAC,WAAW,GACd,CACR,CAAC,CAAC,CAAC,IAAI,IACH,KAdF,MAAM,CAAC,KAAK,CAeK,CACzB,CAAC,GACqB,GACL,IACT,CAChB,CAAC;AACJ,CAAC"}

package/dist/composer/index.d.ts

@@ -1,4 +1,6 @@
 export { FileReference } from "./extensions/FileReference.js";
+export { ComposerContextBanner, type ComposerContextBannerProps, } from "./ComposerContextBanner.js";
+export { ComposerModePicker, type ComposerModeOption, type ComposerModePickerProps, } from "./ComposerModePicker.js";
 export { useComposerDefaultActions, mergeComposerMenuItems, } from "./ComposerPlusMenu.js";
 export { ComposerContextMenu, ComposerContextSearchInput, type ComposerContextSearchInputProps, type ComposerContextPageControls, getComposerContextMenuEntries, type ComposerContextMenuProps, type ComposerContextMenuItem, type ComposerContextMenuAction, type ComposerContextMenuCategory, type ComposerContextPickerConfig, type ComposerContextPickerItem, type ComposerContextPickerRequest, type ComposerContextPickerResult, type ComposerContextPickerSelection, type ComposerContextPickerFooterAction, } from "./ComposerContextMenu.js";
 export { ComposerContextPickerDialog } from "./ComposerContextPickerDialog.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"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"}

package/dist/composer/index.js

@@ -1,4 +1,6 @@
 export { FileReference } from "./extensions/FileReference.js";
+export { ComposerContextBanner, } from "./ComposerContextBanner.js";
+export { ComposerModePicker, } from "./ComposerModePicker.js";
 export { useComposerDefaultActions, mergeComposerMenuItems, } from "./ComposerPlusMenu.js";
 export { ComposerContextMenu, ComposerContextSearchInput, getComposerContextMenuEntries, } from "./ComposerContextMenu.js";
 export { ComposerContextPickerDialog } from "./ComposerContextPickerDialog.js";

package/dist/composer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAG1B,6BAA6B,GAW9B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,4BAA4B,EAC5B,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,GAE3B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EACL,kBAAkB,GAEnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,GAIzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,wBAAwB,EACxB,8BAA8B,EAC9B,kCAAkC,EAClC,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mCAAmC,EACnC,wCAAwC,EACxC,qBAAqB,EACrB,iBAAiB,GAQlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,0BAA0B,GAE3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,SAAS,GAGV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,kBAAkB,GAMnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GAQvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,0BAA0B,EAC1B,wCAAwC,EACxC,wBAAwB,EACxB,iCAAiC,EACjC,wBAAwB,EACxB,4BAA4B,EAC5B,yBAAyB,EACzB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,4BAA4B,GAK7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,mCAAmC,EACnC,kCAAkC,EAClC,+BAA+B,EAC/B,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,GAG1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,+BAA+B,EAC/B,0BAA0B,GAG3B,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,qBAAqB,GAEtB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,kBAAkB,GAGnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAG1B,6BAA6B,GAW9B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,4BAA4B,EAC5B,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,GAE3B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EACL,kBAAkB,GAEnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,GAIzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,wBAAwB,EACxB,8BAA8B,EAC9B,kCAAkC,EAClC,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mCAAmC,EACnC,wCAAwC,EACxC,qBAAqB,EACrB,iBAAiB,GAQlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,0BAA0B,GAE3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,SAAS,GAGV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,kBAAkB,GAMnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GAQvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,0BAA0B,EAC1B,wCAAwC,EACxC,wBAAwB,EACxB,iCAAiC,EACjC,wBAAwB,EACxB,4BAA4B,EAC5B,yBAAyB,EACzB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,4BAA4B,GAK7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,mCAAmC,EACnC,kCAAkC,EAClC,+BAA+B,EAC/B,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,GAG1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,+BAA+B,EAC/B,0BAA0B,GAG3B,MAAM,uBAAuB,CAAC"}

package/dist/styles.css

@@ -18,6 +18,7 @@
  */
 @import "./theme/resource-icons.css";
 @import "./app-shell/prompt-home.css";
+@import "./app/styles/theme-families.css";
 @import "./app/styles/agent-native.css";
 
 @source "./**/*.{js,ts,tsx}";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.213.1",
+  "version": "0.216.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.213.1"
+    "@agent-native/agentkit": "^0.216.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.213.1"
+    "@agent-native/core": "^0.216.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

@@ -196,6 +196,18 @@ describe("AgentMessageActions layout", () => {
 });
 
 describe("AgentKitChat", () => {
+  it("keeps work-summary chevrons visible before the row is opened", () => {
+    const styles = readFileSync(
+      new URL("./styles.css", import.meta.url),
+      "utf8",
+    ).replace(/\r\n/g, "\n");
+    const rule = styles.match(
+      /\.agentkit-activities-summary > \.agentkit-summary-chevron \{([^}]*)\}/,
+    )?.[1];
+
+    expect(rule).toContain("opacity: 1;");
+  });
+
   it("renders the complete reference surface from one managed component", () => {
     const transport: AgentTransport = {
       async startRun() {
@@ -395,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(
@@ -1761,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" }}
@@ -1820,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");