@wallarm-org/claude-design 4.14.0 → 4.16.0

package/dist/project/components/index.d.ts

@@ -1642,6 +1642,41 @@ export { AttributeLabelDescription, type AttributeLabelDescriptionProps, } from
 export { AttributeLabelInfo, type AttributeLabelInfoProps } from './AttributeLabelInfo.js';
 export { AttributeValue, type AttributeValueProps } from './AttributeValue.js';
 
+// components/Avatar/AgentItem.d.ts
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { AgentCharacterId, AgentLook } from '../../lib/agent-characters/data.gen.js';
+import { type TestableProps } from '../../utils/testId.js';
+import { type AgentGlyphState } from '../AgentGlyph/index.js';
+type AgentItemLook = {
+    agent: AgentCharacterId;
+    look?: never;
+} | {
+    look: AgentLook;
+    agent?: never;
+};
+/** 16–24 px draw the flat glyph, 40 px and up the 3D character (D1). */
+export type AgentItemSize = 16 | 20 | 24 | 40 | 48 | 56;
+export type AgentItemProps = HTMLAttributes<HTMLSpanElement> & TestableProps & AgentItemLook & {
+    ref?: Ref<HTMLSpanElement>;
+    /** 20 beside text-sm (table rows, attributes), 16 beside text-xs (D3); 40 and up for cards that show the agent. */
+    size?: AgentItemSize;
+    state?: AgentGlyphState;
+    hasApplications?: boolean;
+    coverage?: 'full' | 'partial';
+    /** 3D sizes only: animated, as in an Overview row. */
+    live?: boolean;
+    /** 3D sizes only: the agent's uid, keeping its timing distinct from its neighbours. Defaults to `agent`. */
+    seed?: string;
+};
+/**
+ * The agent user item: the agent's character, its name and an optional description, with no plate (agents stand as
+ * silhouettes). Takes the same `AvatarContent` / `AvatarName` / `AvatarDescription` children as a person's
+ * `Avatar`, so a place swaps a person for an agent by swapping the root. The gap is measured from the body, not
+ * the character's box, so every agent sits as close to its name as a person's plate does.
+ */
+export declare const AgentItem: FC<AgentItemProps>;
+export {};
+
 // components/Avatar/Avatar.d.ts
 import { type ButtonHTMLAttributes, type FC, type HTMLAttributes, type Ref } from 'react';
 import { Avatar as ArkAvatar } from '@ark-ui/react/avatar';
@@ -1759,6 +1794,9 @@ export declare const avatarFallbackVariants: (props?: ({
     initials?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarOverlayClassNames: string;
+export declare const agentItemVariants: (props?: ({
+    size?: 16 | 20 | 24 | 40 | 48 | 56 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarContentClassNames: string;
 export declare const avatarNameVariants: (props?: ({
     size?: "lg" | "md" | "sm" | null | undefined;
@@ -1768,6 +1806,7 @@ export declare const avatarDescriptionVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 
 // components/Avatar/index.d.ts
+export { AgentItem, type AgentItemProps, type AgentItemSize } from './AgentItem.js';
 export { Avatar, type AvatarProps, type AvatarStatusChangeDetails } from './Avatar.js';
 export { AvatarContent, type AvatarContentProps } from './AvatarContent.js';
 export { AvatarDescription, type AvatarDescriptionProps } from './AvatarDescription.js';
@@ -3034,7 +3073,7 @@ import { type ButtonHTMLAttributes, type FC, type Ref } from 'react';
 import { type TestableProps } from '../../utils/testId.js';
 /**
  * The app-header button that opens Wally (Figma 101:1034): a ghost small icon `Button` with the
- * mascot and an "Ask Wally" tooltip. It holds no open state — wire `onClick`/`aria-expanded`
+ * Wally glyph at 24 px and an "Ask Wally" tooltip. It holds no open state — wire `onClick`/`aria-expanded`
  * yourself, or wrap it in `<DrawerTrigger asChild>`.
  */
 export interface ChatTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'>, TestableProps {
@@ -8488,10 +8527,15 @@ export interface FilterDropdownOptionProps<T extends CollectionItem = Collection
     item: T;
     /** Secondary text at the right end of the row, such as a count. */
     hint?: ReactNode;
+    /**
+     * Leading element before the text, such as an agent's 16 px `AgentGlyph`. It keeps its own size:
+     * the row does not resize it.
+     */
+    icon?: ReactNode;
     /** Row text. Defaults to the item's label from the collection. */
     children?: ReactNode;
 }
-export declare function FilterDropdownOption<T extends CollectionItem>({ item, hint, children, 'data-testid': testIdProp, ...props }: FilterDropdownOptionProps<T>): import("react").JSX.Element;
+export declare function FilterDropdownOption<T extends CollectionItem>({ item, hint, icon, children, 'data-testid': testIdProp, ...props }: FilterDropdownOptionProps<T>): import("react").JSX.Element;
 export declare namespace FilterDropdownOption {
     var displayName: string;
 }
@@ -8530,6 +8574,7 @@ export declare namespace FilterDropdownSelected {
 
 // components/FilterDropdown/FilterDropdownTrigger.d.ts
 import { type ButtonHTMLAttributes, type FC, type ReactNode, type Ref } from 'react';
+import type { CollectionItem } from '@ark-ui/react/collection';
 import { type TestableProps } from '../../utils/testId.js';
 export interface FilterDropdownTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, TestableProps {
     ref?: Ref<HTMLButtonElement>;
@@ -8538,6 +8583,11 @@ export interface FilterDropdownTriggerProps extends Omit<ButtonHTMLAttributes<HT
      * derived from the value and is not overridable.
      */
     children?: ReactNode;
+    /**
+     * Single mode: a leading element for the picked item, such as the agent's 16 px `AgentGlyph`
+     * before its name. Not called while unset or in multi mode.
+     */
+    renderIcon?: (item: CollectionItem) => ReactNode;
 }
 /**
  * The 36px trigger. Dashed while unset, solid once set; reads «All …» / the value in single mode
@@ -9489,7 +9539,7 @@ export interface FilterInputOperatorMenuProps extends TestableProps {
 export declare const FilterInputOperatorMenu: FC<FilterInputOperatorMenuProps>;
 
 // components/FilterInput/FilterInputMenu/FilterInputValueMenu/FilterInputValueMenu.d.ts
-import type { FC, RefObject } from 'react';
+import type { FC, ReactNode, RefObject } from 'react';
 import type { BadgeColor } from '../../../Badge/index.js';
 export interface ValueOption {
     /**
@@ -9504,6 +9554,8 @@ export interface ValueOption {
     };
     /** Muted secondary line rendered beneath the bold `label`. Display-only. */
     description?: string;
+    /** Leading element of the row (an agent glyph). Display-only. */
+    icon?: ReactNode;
     /**
      * Nested sub-values. When present this option is a group: a section header at
      * the top level, or a submenu trigger when nested. Only leaves are committed.
@@ -11664,6 +11716,11 @@ export interface FieldValueOption {
      * share a label (two `request-id` rows with different paths).
      */
     description?: string;
+    /**
+     * Leading element of the value row, e.g. an agent's `<AgentGlyph size={16} />`.
+     * Display-only: the chip still shows the `label` alone.
+     */
+    icon?: ReactNode;
     /**
      * Nested sub-values. When present, this option is a **group** (no own
      * `value`): a section header at the top level, or a submenu trigger when
@@ -15636,7 +15693,7 @@ export type { SelectDataItem } from './types.js';
 export { type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './useSelectSearch.js';
 
 // components/Select/types.d.ts
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { SvgIconProps } from '../../icons/index.js';
 export interface SelectDataItem {
     value: string;
@@ -15645,6 +15702,11 @@ export interface SelectDataItem {
     description?: string;
     category?: string;
     icon?: FC<SvgIconProps>;
+    /**
+     * A leading element that is not an icon component, such as an agent's `AgentGlyph` (size 20 beside the
+     * text-sm option and trigger). The trigger and `SelectInput` chips show it in place of `icon`.
+     */
+    leading?: ReactNode;
 }
 
 // components/Select/useSelectSearch.d.ts
@@ -26056,7 +26118,7 @@ export { ApprovalCard, ApprovalCardActions, type ApprovalCardActionsProps, Appro
 export { AppShell, AppShellAside, type AppShellAsideProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell/index.js';
 export { AssistantMessage, AssistantMessageContent, type AssistantMessageContentProps, AssistantMessageError, type AssistantMessageErrorProps, AssistantMessageLoader, type AssistantMessageLoaderProps, type AssistantMessageProps, } from './components/AssistantMessage/index.js';
 export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute/index.js';
-export { Avatar, AvatarContent, type AvatarContentProps, AvatarDescription, type AvatarDescriptionProps, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, AvatarName, type AvatarNameProps, AvatarOverlay, type AvatarOverlayProps, type AvatarProps, type AvatarStatusChangeDetails, } from './components/Avatar/index.js';
+export { AgentItem, type AgentItemProps, type AgentItemSize, Avatar, AvatarContent, type AvatarContentProps, AvatarDescription, type AvatarDescriptionProps, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, AvatarName, type AvatarNameProps, AvatarOverlay, type AvatarOverlayProps, type AvatarProps, type AvatarStatusChangeDetails, } from './components/Avatar/index.js';
 export { Badge, type BadgeProps } from './components/Badge/index.js';
 export { Banner, BannerClose, type BannerCloseProps, BannerContent, type BannerContentProps, BannerControls, type BannerControlsProps, BannerDescription, type BannerDescriptionProps, BannerIcon, type BannerIconProps, BannerLink, type BannerLinkProps, type BannerProps, BannerTitle, type BannerTitleProps, type BannerVariant, } from './components/Banner/index.js';
 export { Breadcrumbs, BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, BreadcrumbsScopeSwitcher, type BreadcrumbsScopeSwitcherProps, BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, type ScopeSwitcherItem, } from './components/Breadcrumbs/index.js';
@@ -26609,6 +26671,10 @@ export declare function optY(c: {
 export declare const optPx: (c: {
     shape: string;
 }, size: number) => number;
+/** The px between the character's box and its body on each side, so a name can keep its gap from the body. */
+export declare const insetPx: (c: {
+    shape: string;
+}, size: number) => number;
 
 // lib/agent-characters/glyph.d.ts
 import { type StateId } from './eyes.js';
@@ -26657,6 +26723,8 @@ export declare function lookIssues(look: Look, { isWally, others }: {
  * `propPool`: no prop by default (P10), since a custom agent's job is not known.
  */
 export declare function defaultLook(agentId: string, others?: readonly Look[], propPool?: readonly AgentPropId[]): AgentLook;
+/** A preset's look; any other id (or none) gets its deterministic default look, never Wally's coral. */
+export declare const lookOf: (id: string | undefined) => AgentLook | import("./data.gen.js").AgentPreset;
 export {};
 
 // lib/agent-characters/motion.d.ts

package/dist/project/design-system.json

@@ -3,7 +3,7 @@
   "layout": "files",
   "createdOnFiles": {
     "v": 1,
-    "at": "2026-11-12T12:36:55Z"
+    "at": "2026-11-12T15:14:43Z"
   },
   "title": "Wallarm Design System",
   "namespace": "WallarmDS",
@@ -28,8 +28,8 @@
   },
   "lastChange": {
     "by": "Wallarm",
-    "at": "2026-11-12T12:36:55Z",
-    "via": "GitHub · wallarm/design-system@119e4227",
-    "note": "v4.14.0: 532 colors, 120 component guides, 582 icons."
+    "at": "2026-11-12T15:14:43Z",
+    "via": "GitHub · wallarm/design-system@2ce8d267",
+    "note": "v4.16.0: 532 colors, 120 component guides, 582 icons."
   }
 }

package/dist/project/tokens.json

@@ -5187,7 +5187,7 @@
   "meta": {
     "source": "github",
     "repo": "wallarm/design-system",
-    "ref": "v4.14.0@119e422794b5b720e0f3593d81ab15b384ac479b",
+    "ref": "v4.16.0@2ce8d26725b6e28c610a3e060b62bac79211cf36",
     "package": "packages/design-system",
     "paths": {
       "tokens": [
@@ -5230,6 +5230,6 @@
         "src/theme/fonts/GeistMono-Variable.woff2"
       ]
     },
-    "synced": "2026-11-12T12:36:55Z"
+    "synced": "2026-11-12T15:14:43Z"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/claude-design",
-  "version": "4.14.0",
+  "version": "4.16.0",
   "description": "Installs Wallarm Design System in Claude Design: `npx -y @wallarm-org/claude-design@latest export`",
   "publishConfig": {
     "access": "public",
@@ -51,8 +51,8 @@
     "tsx": "4.23.15",
     "tw-animate-css": "1.4.0",
     "typescript": "7.0.2",
+    "@wallarm-org/design-system": "4.16.0",
     "@wallarm-org/mcp-core": "0.1.0",
-    "@wallarm-org/design-system": "4.14.0",
     "@wallarm-org/typescript-config": "0.0.0"
   },
   "scripts": {