@wallarm-org/claude-design 4.8.0 → 4.10.0

package/dist/project/components/TimeInput/README.md

@@ -11,7 +11,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | `disabled` | `boolean \| undefined` | no | `false` | Whether the input is disabled. Prevents user interaction. |
 | `read-only` | `boolean \| undefined` | no | `false` | Whether the input is read-only. Segments are focusable but not editable. |
 | `placeholder` | `string \| undefined` | no | — | Placeholder shown when no value is selected. |
-| `size` | `"small" \| "default" \| "medium" \| "inline-edit"` | no | `default` | Visual size. Default: 'default' (36px). |
+| `size` | `TemporalInputSize \| undefined` | no | `default` | Visual size. Default: 'default' (36px). |
 | `title` | `string \| undefined` | no | — |  |
 | `default-checked` | `boolean \| undefined` | no | — |  |
 | `auto-focus` | `boolean \| undefined` | no | — |  |
@@ -19,12 +19,12 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | `tab-index` | `number \| undefined` | no | — |  |
 | `rel` | `string \| undefined` | no | — |  |
 | `data-testid` | `string \| undefined` | no | — |  |
-| `value` | `complex` | no | — |  |
-| `default-value` | `complex` | no | — |  |
+| `value` | `TimeValue \| null \| undefined` | no | — |  |
+| `default-value` | `TimeValue \| null \| undefined` | no | — |  |
 | `on-change` | `complex` | no | — |  |
-| `min-value` | `complex` | no | — |  |
-| `max-value` | `complex` | no | — |  |
-| `placeholder-value` | `complex` | no | — |  |
+| `min-value` | `TimeValue \| undefined` | no | — |  |
+| `max-value` | `TimeValue \| undefined` | no | — |  |
+| `placeholder-value` | `TimeValue \| undefined` | no | — |  |
 | `name` | `string \| undefined` | no | — |  |
 | `is-required` | `boolean \| undefined` | no | — | Marks the field as required in assistive tech and HTML form validation. |
 | `show-time-dropdown` | `boolean \| undefined` | no | — | Show dropdown for time selection with arrow navigation. |

package/dist/project/components/Toast/README.md

@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 
 | Attribute | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `toast` | `complex` | yes | — |  |
+| `toast` | `ToastData` | yes | — |  |
 
 ## Sub-components
 

package/dist/project/components/Tooltip/README.md

@@ -16,8 +16,8 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | `close-on-scroll` | `boolean \| undefined` | no | — |  |
 | `interactive` | `boolean \| undefined` | no | — |  |
 | `disabled` | `boolean \| undefined` | no | — |  |
-| `positioning` | `complex` | no | — |  |
-| `ids` | `complex` | no | — | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and this tooltip can't find its anchor, mispositioning at the viewport origin. |
+| `positioning` | `PositioningOptions \| undefined` | no | — |  |
+| `ids` | `ElementIds \| undefined` | no | — | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and this tooltip can't find its anchor, mispositioning at the viewport origin. |
 | `data-testid` | `string \| undefined` | no | — |  |
 
 ## Sub-components

package/dist/project/components/UTILITIES.md

@@ -71,7 +71,7 @@ Generated from `components/bundle.css`. This is the complete list of utility cla
 - **grid**: `grid` `grid-cols-1` `grid-cols-2` `grid-cols-3` `grid-cols-4` `grid-cols-5` `grid-cols-6` `grid-cols-7` `grid-cols-8` `grid-cols-9` `grid-cols-10` `grid-cols-11` `grid-cols-12` `grid-flow-col` `grid-flow-row`
 - **group**: `group` `group/avatar` `group/cell` `group/chart` `group/chip` `group/field` `group/filter-input` `group/input-group` `group/item` `group/message` `group/row` `group/scroll` `group/trigger`
 - **grow**: `grow` `grow-0`
-- **h**: `h-0` `h-1` `h-2` `h-4` `h-6` `h-8` `h-10` `h-11` `h-12` `h-14` `h-16` `h-20` `h-22` `h-24` `h-26` `h-28` `h-30` `h-32` `h-36` `h-40` `h-44` `h-48` `h-56` `h-64` `h-80` `h-96` `h-112` `h-128` `h-144` `h-192` `h-200` `h-240` `h-290` `h-300` `h-320` `h-400` `h-500` `h-600` `h-640` `h-800` `h-auto` `h-fit` `h-full` `h-lh` `h-max` `h-none` `h-px` `h-screen`
+- **h**: `h-0` `h-1` `h-2` `h-4` `h-6` `h-8` `h-10` `h-11` `h-12` `h-14` `h-16` `h-20` `h-22` `h-24` `h-26` `h-28` `h-30` `h-32` `h-36` `h-40` `h-44` `h-48` `h-56` `h-64` `h-80` `h-96` `h-112` `h-128` `h-144` `h-192` `h-196` `h-200` `h-220` `h-240` `h-290` `h-300` `h-320` `h-400` `h-500` `h-600` `h-640` `h-800` `h-auto` `h-fit` `h-full` `h-lh` `h-max` `h-none` `h-px` `h-screen`
 - **hidden**: `hidden`
 - **icon**: `icon-2xl` `icon-inherit` `icon-lg` `icon-md` `icon-sm` `icon-xl` `icon-xs`
 - **inline**: `inline` `inline-block` `inline-flex` `inline-grid`
@@ -88,9 +88,9 @@ Generated from `components/bundle.css`. This is the complete list of utility cla
 - **list**: `list-decimal` `list-disc` `list-item` `list-none`
 - **lowercase**: `lowercase`
 - **m**: `m-0` `m-1` `m-2` `m-4` `m-6` `m-8` `m-12` `m-16` `m-20` `m-24` `m-28` `m-32` `m-36` `m-40` `m-44` `m-48` `m-56` `m-64` `m-80` `m-96` `m-112` `m-128` `m-144` `m-none`
-- **max**: `max-h-1` `max-h-2` `max-h-4` `max-h-6` `max-h-8` `max-h-12` `max-h-16` `max-h-20` `max-h-24` `max-h-28` `max-h-32` `max-h-36` `max-h-40` `max-h-44` `max-h-48` `max-h-56` `max-h-64` `max-h-80` `max-h-96` `max-h-112` `max-h-128` `max-h-144` `max-h-220` `max-h-340` `max-h-none` `max-h-screen` `max-w-1` `max-w-2` `max-w-2xl` `max-w-3xl` `max-w-4` `max-w-4xl` `max-w-5xl` `max-w-6` `max-w-6xl` `max-w-7xl` `max-w-8` `max-w-12` `max-w-16` `max-w-20` `max-w-24` `max-w-28` `max-w-32` `max-w-36` `max-w-40` `max-w-44` `max-w-48` `max-w-56` `max-w-64` `max-w-80` `max-w-96` `max-w-112` `max-w-120` `max-w-128` `max-w-144` `max-w-160` `max-w-180` `max-w-240` `max-w-320` `max-w-360` `max-w-375` `max-w-768` `max-w-920` `max-w-full` `max-w-lg` `max-w-md` `max-w-none` `max-w-screen` `max-w-screen-2xl` `max-w-screen-lg` `max-w-screen-md` `max-w-screen-sm` `max-w-screen-xl` `max-w-sm` `max-w-xl` `max-w-xs`
+- **max**: `max-h-1` `max-h-2` `max-h-4` `max-h-6` `max-h-8` `max-h-12` `max-h-16` `max-h-20` `max-h-24` `max-h-28` `max-h-32` `max-h-36` `max-h-40` `max-h-44` `max-h-48` `max-h-56` `max-h-64` `max-h-80` `max-h-96` `max-h-112` `max-h-128` `max-h-144` `max-h-220` `max-h-340` `max-h-none` `max-h-screen` `max-w-1` `max-w-2` `max-w-2xl` `max-w-3xl` `max-w-4` `max-w-4xl` `max-w-5xl` `max-w-6` `max-w-6xl` `max-w-7xl` `max-w-8` `max-w-12` `max-w-16` `max-w-20` `max-w-24` `max-w-28` `max-w-32` `max-w-36` `max-w-40` `max-w-44` `max-w-48` `max-w-56` `max-w-64` `max-w-80` `max-w-96` `max-w-112` `max-w-120` `max-w-128` `max-w-144` `max-w-160` `max-w-180` `max-w-240` `max-w-320` `max-w-360` `max-w-375` `max-w-768` `max-w-800` `max-w-920` `max-w-full` `max-w-lg` `max-w-md` `max-w-none` `max-w-screen` `max-w-screen-2xl` `max-w-screen-lg` `max-w-screen-md` `max-w-screen-sm` `max-w-screen-xl` `max-w-sm` `max-w-xl` `max-w-xs`
 - **mb**: `mb-1` `mb-2` `mb-3` `mb-4` `mb-6` `mb-8` `mb-12` `mb-16` `mb-20` `mb-24` `mb-28` `mb-32` `mb-36` `mb-40` `mb-44` `mb-48` `mb-56` `mb-64` `mb-80` `mb-96` `mb-112` `mb-128` `mb-144` `mb-auto` `mb-none`
-- **min**: `min-h-0` `min-h-1` `min-h-2` `min-h-4` `min-h-6` `min-h-8` `min-h-12` `min-h-16` `min-h-20` `min-h-24` `min-h-28` `min-h-32` `min-h-36` `min-h-40` `min-h-42` `min-h-44` `min-h-48` `min-h-56` `min-h-64` `min-h-80` `min-h-96` `min-h-112` `min-h-128` `min-h-144` `min-h-196` `min-h-full` `min-h-lh` `min-h-none` `min-h-screen` `min-w-0` `min-w-0!` `min-w-1` `min-w-2` `min-w-4` `min-w-6` `min-w-8` `min-w-12` `min-w-16` `min-w-20` `min-w-24` `min-w-28` `min-w-32` `min-w-36` `min-w-40` `min-w-44` `min-w-48` `min-w-56` `min-w-64` `min-w-72` `min-w-80` `min-w-96` `min-w-112` `min-w-118` `min-w-128` `min-w-144` `min-w-156` `min-w-160` `min-w-240` `min-w-256` `min-w-284` `min-w-300` `min-w-320` `min-w-800` `min-w-full` `min-w-none` `min-w-px`
+- **min**: `min-h-0` `min-h-1` `min-h-2` `min-h-4` `min-h-6` `min-h-8` `min-h-12` `min-h-16` `min-h-20` `min-h-24` `min-h-28` `min-h-32` `min-h-36` `min-h-40` `min-h-42` `min-h-44` `min-h-48` `min-h-56` `min-h-64` `min-h-80` `min-h-96` `min-h-112` `min-h-128` `min-h-144` `min-h-full` `min-h-lh` `min-h-none` `min-h-screen` `min-w-0` `min-w-0!` `min-w-1` `min-w-2` `min-w-4` `min-w-6` `min-w-8` `min-w-12` `min-w-16` `min-w-20` `min-w-24` `min-w-28` `min-w-32` `min-w-36` `min-w-40` `min-w-44` `min-w-48` `min-w-56` `min-w-64` `min-w-72` `min-w-80` `min-w-96` `min-w-112` `min-w-118` `min-w-128` `min-w-144` `min-w-156` `min-w-160` `min-w-240` `min-w-256` `min-w-284` `min-w-300` `min-w-320` `min-w-800` `min-w-full` `min-w-none` `min-w-px`
 - **ml**: `ml-1` `ml-2` `ml-4` `ml-6` `ml-8` `ml-12` `ml-16` `ml-20` `ml-24` `ml-26` `ml-28` `ml-32` `ml-36` `ml-40` `ml-44` `ml-48` `ml-56` `ml-64` `ml-80` `ml-96` `ml-112` `ml-128` `ml-144` `ml-auto` `ml-none`
 - **mr**: `mr-1` `mr-2` `mr-3` `mr-4` `mr-6` `mr-8` `mr-12` `mr-16` `mr-20` `mr-24` `mr-28` `mr-32` `mr-36` `mr-40` `mr-44` `mr-48` `mr-56` `mr-64` `mr-80` `mr-96` `mr-112` `mr-128` `mr-144` `mr-auto` `mr-none`
 - **ms**: `ms-auto`

package/dist/project/components/WallyAssistant/README.md

@@ -13,21 +13,21 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | `rel` | `string \| undefined` | no | — |  |
 | `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
 | `data-testid` | `string \| undefined` | no | — |  |
-| `background` | `"strong" \| "none" \| "subtle"` | no | — | Decorative mesh behind the panel (Figma chat-bg 67:1254). `'strong'` is Main (12%, for an empty chat), `'subtle'` is Chat (5%, for a running conversation), `'none'` renders nothing. |
-| `messages` | `complex` | yes | — |  |
-| `status` | `"error" \| "ready" \| "submitted" \| "streaming"` | no | `ready` | Default 'ready'. |
-| `suggestions` | `complex` | no | — |  |
-| `permissions` | `complex` | no | — |  |
-| `context` | `complex` | no | — |  |
+| `background` | `ChatBackground \| undefined` | no | — | Decorative mesh behind the panel (Figma chat-bg 67:1254). `'strong'` is Main (12%, for an empty chat), `'subtle'` is Chat (5%, for a running conversation), `'none'` renders nothing. |
+| `messages` | `readonly ChatMessage[]` | yes | — |  |
+| `status` | `ChatStatus \| undefined` | no | `ready` | Default 'ready'. |
+| `suggestions` | `readonly ChatSuggestionItem[] \| undefined` | no | — |  |
+| `permissions` | `readonly ChatToolPermission[] \| undefined` | no | — |  |
+| `context` | `readonly ChatContextItem[] \| undefined` | no | — |  |
 | `value` | `string \| undefined` | no | — |  |
 | `on-value-change` | `((value: string) => void) \| undefined` | no | — |  |
 | `disabled` | `boolean \| undefined` | no | — | Disables the textarea, Send and the suggestion pills (e.g. `!agent.isReady`). |
 | `textarea-ref` | `Ref<HTMLTextAreaElement> \| undefined` | no | — | Focus management, e.g. focus the input after a thread switch. |
 | `on-submit` | `(text: string) => void` | yes | — | Trimmed text. Not called when empty, while running, while an approval is pending, or when disabled. |
 | `on-stop` | `(() => void) \| undefined` | no | — | Stop button, and Esc in the textarea while running (also inside a Drawer/Dialog: ChatInput claims that Esc from the layer, so no host recipe is needed). |
-| `on-suggestion-select` | `complex` | no | — | Default: onSubmit(suggestion.prompt ?? suggestion.label). |
-| `on-permission-change` | `complex` | no | — | Absent, or no permissions → no permissions button in the input. |
-| `on-context-remove` | `complex` | no | — | Absent → context chips aren't removable. |
+| `on-suggestion-select` | `((suggestion: ChatSuggestionItem) => void) \| undefined` | no | — | Default: onSubmit(suggestion.prompt ?? suggestion.label). |
+| `on-permission-change` | `((permission: ChatToolPermission, allowed: boolean) => void) \| undefined` | no | — | Absent, or no permissions → no permissions button in the input. |
+| `on-context-remove` | `((item: ChatContextItem) => void) \| undefined` | no | — | Absent → context chips aren't removable. |
 | `header` | `ReactNode` | no | — |  |
 | `header-title` | `ReactNode` | no | — | ChatHeaderTitle children, e.g. a thread Select (Figma Variant2). |
 | `header-actions` | `ReactNode` | no | — | New chat, history, close: your Buttons, so analytics land on them. |
@@ -35,10 +35,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | `footer-start` | `ReactNode` | no | — | Top of ChatFooter, above the suggestions (banners). |
 | `input-tools` | `ReactNode` | no | — | Extra toolbar items in the input, between permissions and Send. |
 | `input` | `ReactNode` | no | — | Replaces the whole ChatInput composition (you wire value and submit yourself). |
-| `on-copy` | `complex` | no | — | Fired after Copy copied; Copy itself shows whenever the message has text. |
-| `labels` | `complex` | no | — |  |
+| `on-copy` | `((message: ChatMessage, text: string) => void) \| undefined` | no | — | Fired after Copy copied; Copy itself shows whenever the message has text. |
+| `labels` | `Partial<ChatLabels> \| undefined` | no | — |  |
 | `icons` | `Readonly<Record<string, ReactNode>> \| undefined` | no | — | Icon key → element from src/icons; wins over the built-in Figma 483:1899 table. |
-| `markdown` | `complex` | no | — | The markdown renderer, at module scope (never inline). Default: the DS `AssistantMessageMarkdown` (GFM, streaming-safe, no raw HTML, http/https/mailto/relative links only, no images). A replacement owns its own sanitizing. To change one element, wrap it at module scope: `const WallyMarkdown: FC<ChatMarkdownProps> = p => <AssistantMessageMarkdown {...p} components={MAP} />`. |
+| `markdown` | `ComponentType<ChatMarkdownProps> \| undefined` | no | — | The markdown renderer, at module scope (never inline). Default: the DS `AssistantMessageMarkdown` (GFM, streaming-safe, no raw HTML, http/https/mailto/relative links only, no images). A replacement owns its own sanitizing. To change one element, wrap it at module scope: `const WallyMarkdown: FC<ChatMarkdownProps> = p => <AssistantMessageMarkdown {...p} components={MAP} />`. |
 | `format-timestamp` | `((createdAt: string) => string) \| undefined` | no | — | ISO → label. Default: DS formatRelativeTime (honours DateFormatProvider). Give it a new identity on your clock tick to refresh "2 min ago" — the DS runs no clock. |
 | `approval-placement` | `"inline" \| "docked" \| undefined` | no | `docked` | 'docked': the last message's approvals render in the footer. Default 'inline' here; WallyAssistant defaults to 'docked' (Figma). A custom layout passes the same value to `deriveChatState`, or the approval renders twice (provider 'inline') or never (provider 'docked'). |
 | `render-part` | `complex` | no | — | Called for every part, custom and unknown types included. undefined = the default; null = nothing. A render function: no hooks inside — put them in the components you return. While it is set, every part counts as rendered for the loader and the actions row (its output is unknown up front), so a running reply made only of parts it maps to nothing shows no loader. |

package/dist/project/components/WallyIcon/README.md

@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 
 | Attribute | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `variant` | `"circle" \| "simple"` | no | `simple` |  |
+| `variant` | `WallyIconStyle \| undefined` | no | `simple` |  |
 | `id` | `string \| undefined` | no | — |  |
 | `tab-index` | `number \| undefined` | no | — |  |
 | `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |

package/dist/project/components/bundle.css

@@ -1825,9 +1825,15 @@
   .h-192 {
     height: calc(var(--spacing) * 192);
   }
+  .h-196 {
+    height: calc(var(--spacing) * 196);
+  }
   .h-200 {
     height: calc(var(--spacing) * 200);
   }
+  .h-220 {
+    height: calc(var(--spacing) * 220);
+  }
   .h-240 {
     height: calc(var(--spacing) * 240);
   }
@@ -2102,9 +2108,6 @@
   .min-h-144 {
     min-height: var(--spacing-144);
   }
-  .min-h-196 {
-    min-height: calc(var(--spacing) * 196);
-  }
   .min-h-\[20px\] {
     min-height: 20px;
   }
@@ -2558,6 +2561,9 @@
   .max-w-768 {
     max-width: calc(var(--spacing) * 768);
   }
+  .max-w-800 {
+    max-width: calc(var(--spacing) * 800);
+  }
   .max-w-920 {
     max-width: calc(var(--spacing) * 920);
   }
@@ -2603,6 +2609,9 @@
   .max-w-\[640px\] {
     max-width: 640px;
   }
+  .max-w-\[720px\] {
+    max-width: 720px;
+  }
   .max-w-\[calc\(100\%-48px\)\] {
     max-width: calc(100% - 48px);
   }
@@ -3126,6 +3135,9 @@
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0,1fr);
   }
+  .grid-cols-\[minmax\(0\,1fr\)_400px\] {
+    grid-template-columns: minmax(0,1fr) 400px;
+  }
   .grid-cols-\[minmax\(0\,1fr\)_auto\] {
     grid-template-columns: minmax(0,1fr) auto;
   }
@@ -12104,9 +12116,6 @@
   .has-\[\[data-slot\=attribute-actions-target\]\]\:-ml-7:has(:is([data-slot=attribute-actions-target])) {
     margin-left: calc(var(--spacing) * -7);
   }
-  .has-\[\[data-slot\=column-chart\]\]\:min-h-128:has(:is([data-slot=column-chart])) {
-    min-height: var(--spacing-128);
-  }
   .has-\[\[data-slot\=filter-dropdown-trigger\]\:focus-visible\]\:shadow-none:has(:is([data-slot=filter-dropdown-trigger]:focus-visible)) {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);