create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/message.md

@@ -0,0 +1,256 @@
+# Message
+
+A comprehensive suite of components for displaying chat messages, including message rendering, branching, actions, and markdown responses.
+
+The `Message` component suite provides a complete set of tools for building chat interfaces. It includes components for displaying messages from users and AI assistants, managing multiple response branches, adding action buttons, and rendering markdown content.
+
+See `scripts/message.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add message
+```
+
+## Features
+
+- Displays messages from both user and AI assistant with distinct styling and automatic alignment
+- Minimalist flat design with user messages in secondary background and assistant messages full-width
+- **Response branching** with navigation controls to switch between multiple AI response versions
+- **Markdown rendering** with GFM support (tables, task lists, strikethrough), math equations, and smart streaming
+- **Action buttons** for common operations (retry, like, dislike, copy, share) with tooltips and state management
+- **File attachments** display with support for images and generic files with preview and remove functionality
+- Code blocks with syntax highlighting and copy-to-clipboard functionality
+- Keyboard accessible with proper ARIA labels
+- Responsive design that adapts to different screen sizes
+- Seamless light/dark theme integration
+
+## Usage with AI SDK
+
+Build a simple chat UI where the user can copy or regenerate the most recent message.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useState } from "react";
+import { MessageActions, MessageAction } from "@/components/ai-elements/message";
+import { Message, MessageContent } from "@/components/ai-elements/message";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import {
+  Input,
+  PromptInputTextarea,
+  PromptInputSubmit,
+} from "@/components/ai-elements/prompt-input";
+import { MessageResponse } from "@/components/ai-elements/message";
+import { RefreshCcwIcon, CopyIcon } from "lucide-react";
+import { useChat } from "@ai-sdk/react";
+import { Fragment } from "react";
+
+const ActionsDemo = () => {
+  const [input, setInput] = useState("");
+  const { messages, sendMessage, status, regenerate } = useChat();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim()) {
+      sendMessage({ text: input });
+      setInput("");
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <Conversation>
+          <ConversationContent>
+            {messages.map((message, messageIndex) => (
+              <Fragment key={message.id}>
+                {message.parts.map((part, i) => {
+                  switch (part.type) {
+                    case "text":
+                      const isLastMessage = messageIndex === messages.length - 1;
+
+                      return (
+                        <Fragment key={`${message.id}-${i}`}>
+                          <Message from={message.role}>
+                            <MessageContent>
+                              <MessageResponse>{part.text}</MessageResponse>
+                            </MessageContent>
+                          </Message>
+                          {message.role === "assistant" && isLastMessage && (
+                            <MessageActions>
+                              <MessageAction onClick={() => regenerate()} label="Retry">
+                                <RefreshCcwIcon className="size-3" />
+                              </MessageAction>
+                              <MessageAction
+                                onClick={() => navigator.clipboard.writeText(part.text)}
+                                label="Copy"
+                              >
+                                <CopyIcon className="size-3" />
+                              </MessageAction>
+                            </MessageActions>
+                          )}
+                        </Fragment>
+                      );
+                    default:
+                      return null;
+                  }
+                })}
+              </Fragment>
+            ))}
+          </ConversationContent>
+          <ConversationScrollButton />
+        </Conversation>
+
+        <Input onSubmit={handleSubmit} className="mt-4 w-full max-w-2xl mx-auto relative">
+          <PromptInputTextarea
+            value={input}
+            placeholder="Say something..."
+            onChange={(e) => setInput(e.currentTarget.value)}
+            className="pr-12"
+          />
+          <PromptInputSubmit
+            status={status === "streaming" ? "streaming" : "ready"}
+            disabled={!input.trim()}
+            className="absolute bottom-1 right-1"
+          />
+        </Input>
+      </div>
+    </div>
+  );
+};
+
+export default ActionsDemo;
+```
+
+## Props
+
+### `<Message />`
+
+| Prop       | Type                                   | Default | Description                                 |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------- |
+| `from`     | `UIMessage[`                           | -       | The role of the message sender (            |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the root div. |
+
+### `<MessageContent />`
+
+| Prop       | Type                                   | Default | Description                                    |
+| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the content div. |
+
+### `<MessageResponse />`
+
+| Prop                      | Type                                   | Default                   | Description                                                                                                              |
+| ------------------------- | -------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `children`                | `string`                               | -                         | The markdown content to render.                                                                                          |
+| `parseIncompleteMarkdown` | `boolean`                              | `true`                    | Whether to parse and fix incomplete markdown syntax (e.g., unclosed code blocks or lists).                               |
+| `className`               | `string`                               | -                         | CSS class names to apply to the wrapper div element.                                                                     |
+| `components`              | `object`                               | -                         | Custom React components to use for rendering markdown elements (e.g., custom heading, paragraph, code block components). |
+| `allowedImagePrefixes`    | `string[]`                             | `[`                       | Array of allowed URL prefixes for images. Use [                                                                          |
+| `allowedLinkPrefixes`     | `string[]`                             | `[`                       | Array of allowed URL prefixes for links. Use [                                                                           |
+| `defaultOrigin`           | `string`                               | -                         | Default origin to use for relative URLs in links and images.                                                             |
+| `rehypePlugins`           | `array`                                | `[rehypeKatex]`           | Array of rehype plugins to use for processing HTML. Includes KaTeX for math rendering by default.                        |
+| `remarkPlugins`           | `array`                                | `[remarkGfm, remarkMath]` | Array of remark plugins to use for processing markdown. Includes GitHub Flavored Markdown and math support by default.   |
+| `...props`                | `React.HTMLAttributes<HTMLDivElement>` | -                         | Any other props are spread to the root div.                                                                              |
+
+### `<MessageActions />`
+
+| Prop       | Type                                   | Default | Description                                |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------ |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | HTML attributes to spread to the root div. |
+
+### `<MessageAction />`
+
+| Prop       | Type                                  | Default | Description                                                                            |
+| ---------- | ------------------------------------- | ------- | -------------------------------------------------------------------------------------- |
+| `tooltip`  | `string`                              | -       | Optional tooltip text shown on hover.                                                  |
+| `label`    | `string`                              | -       | Accessible label for screen readers. Also used as fallback if tooltip is not provided. |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the underlying shadcn/ui Button component.               |
+
+### `<MessageBranch />`
+
+| Prop             | Type                                   | Default | Description                                 |
+| ---------------- | -------------------------------------- | ------- | ------------------------------------------- |
+| `defaultBranch`  | `number`                               | `0`     | The index of the branch to show by default. |
+| `onBranchChange` | `(branchIndex: number) => void`        | -       | Callback fired when the branch changes.     |
+| `...props`       | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the root div. |
+
+### `<MessageBranchContent />`
+
+| Prop       | Type                                   | Default | Description                                 |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the root div. |
+
+### `<MessageBranchSelector />`
+
+| Prop       | Type                                   | Default | Description                                                 |
+| ---------- | -------------------------------------- | ------- | ----------------------------------------------------------- |
+| `from`     | `UIMessage[`                           | -       | Aligns the selector for user, assistant or system messages. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the selector container.       |
+
+### `<MessageBranchPrevious />`
+
+| Prop       | Type                                  | Default | Description                                                              |
+| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `<MessageBranchNext />`
+
+| Prop       | Type                                  | Default | Description                                                              |
+| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `<MessageBranchPage />`
+
+| Prop       | Type                                    | Default | Description                                                |
+| ---------- | --------------------------------------- | ------- | ---------------------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | -       | Any other props are spread to the underlying span element. |
+
+### `<MessageAttachments />`
+
+A container component for displaying file attachments in a message. Automatically positions attachments at the end of the message with proper spacing and alignment.
+
+| Prop       | Type                    | Default | Description                                                                   |
+| ---------- | ----------------------- | ------- | ----------------------------------------------------------------------------- |
+| `children` | `ReactNode`             | -       | MessageAttachment components to render. Returns null if no children provided. |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the root div.                                   |
+
+**Example:**
+
+```tsx
+<MessageAttachments className="mb-2">
+  {files.map((attachment) => (
+    <MessageAttachment data={attachment} key={attachment.url} />
+  ))}
+</MessageAttachments>
+```
+
+### `<MessageAttachment />`
+
+Displays a single file attachment. Images are shown as thumbnails (96px × 96px) with rounded corners. Non-image files show a paperclip icon with the filename.
+
+| Prop       | Type                                   | Default | Description                                                                                                   |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
+| `data`     | `FileUIPart`                           | -       | The file data to display. Must include url and mediaType.                                                     |
+| `onRemove` | `() => void`                           | -       | Optional callback fired when the remove button is clicked. If provided, a remove button will appear on hover. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the root div.                                                                   |
+
+**Example:**
+
+```tsx
+<MessageAttachment
+  data={{
+    type: "file",
+    url: "https://example.com/image.jpg",
+    mediaType: "image/jpeg",
+    filename: "image.jpg",
+  }}
+  onRemove={() => console.log("Remove clicked")}
+/>
+```

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/mic-selector.md

@@ -0,0 +1,186 @@
+# Mic Selector
+
+A composable dropdown component for selecting audio input devices with permission handling and device change detection.
+
+The `MicSelector` component provides a flexible and composable interface for selecting microphone input devices. Built on shadcn/ui's Command and Popover components, it features automatic device detection, permission handling, dynamic device list updates, and intelligent device name parsing.
+
+See `scripts/mic-selector.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add mic-selector
+```
+
+## Features
+
+- Fully composable architecture with granular control components
+- Automatic audio input device enumeration
+- Permission-based device name display
+- Real-time device change detection via devicechange events
+- Intelligent device label parsing with ID extraction
+- Controlled and uncontrolled component patterns
+- Responsive width matching between trigger and content
+- Built on shadcn/ui Command and Popover components
+- Full TypeScript support with proper types for all components
+
+## Props
+
+### `<MicSelector />`
+
+Root Popover component that provides context for all child components.
+
+| Prop            | Type                                   | Default | Description                                                                                                              |
+| --------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `defaultValue`  | `string`                               | -       | The default selected device ID (uncontrolled).                                                                           |
+| `value`         | `string`                               | -       | The selected device ID (controlled).                                                                                     |
+| `onValueChange` | `(deviceId: string) => void`           | -       | Callback fired when the selected device changes.                                                                         |
+| `defaultOpen`   | `boolean`                              | `false` | The default open state (uncontrolled).                                                                                   |
+| `open`          | `boolean`                              | -       | The open state (controlled).                                                                                             |
+| `onOpenChange`  | `(open: boolean) => void`              | -       | Callback fired when the open state changes. Automatically requests microphone permission when opened without permission. |
+| `...props`      | `React.ComponentProps<typeof Popover>` | -       | Any other props are spread to the Popover component.                                                                     |
+
+### `<MicSelectorTrigger />`
+
+Button that opens the microphone selector popover. Automatically tracks its width to match the popover content.
+
+| Prop       | Type                                  | Default | Description                                         |
+| ---------- | ------------------------------------- | ------- | --------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the Button component. |
+
+### `<MicSelectorValue />`
+
+Displays the currently selected microphone name or a placeholder.
+
+| Prop       | Type                    | Default | Description                                     |
+| ---------- | ----------------------- | ------- | ----------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the span element. |
+
+### `<MicSelectorContent />`
+
+Container for the Command component, rendered inside the popover.
+
+| Prop             | Type                                          | Default | Description                                               |
+| ---------------- | --------------------------------------------- | ------- | --------------------------------------------------------- |
+| `popoverOptions` | `React.ComponentProps<typeof PopoverContent>` | -       | Props to pass to the underlying PopoverContent component. |
+| `...props`       | `React.ComponentProps<typeof Command>`        | -       | Any other props are spread to the Command component.      |
+
+### `<MicSelectorInput />`
+
+Search input for filtering microphones.
+
+| Prop       | Type                                        | Default | Description                                               |
+| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CommandInput>` | -       | Any other props are spread to the CommandInput component. |
+
+### `<MicSelectorList />`
+
+Wrapper for the list of microphone items. Uses render props pattern to provide access to device data.
+
+| Prop       | Type                                              | Default | Description                                                   |
+| ---------- | ------------------------------------------------- | ------- | ------------------------------------------------------------- |
+| `children` | `(devices: MediaDeviceInfo[]) => ReactNode`       | -       | Render function that receives the array of available devices. |
+| `...props` | `Omit<React.ComponentProps<typeof CommandList>, ` | -       | Any other props are spread to the CommandList component.      |
+
+### `<MicSelectorEmpty />`
+
+Message shown when no microphones match the search.
+
+| Prop       | Type                                        | Default | Description                                               |
+| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |
+| `children` | `ReactNode`                                 | -       | The message to display.                                   |
+| `...props` | `React.ComponentProps<typeof CommandEmpty>` | -       | Any other props are spread to the CommandEmpty component. |
+
+### `<MicSelectorItem />`
+
+Selectable item representing a microphone.
+
+| Prop       | Type                                       | Default | Description                                              |
+| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |
+| `value`    | `string`                                   | -       | The device ID for this item.                             |
+| `...props` | `React.ComponentProps<typeof CommandItem>` | -       | Any other props are spread to the CommandItem component. |
+
+### `<MicSelectorLabel />`
+
+Displays a formatted microphone label with intelligent device ID parsing. Automatically extracts and styles device IDs in the format (XXXX:XXXX).
+
+| Prop       | Type                    | Default | Description                                     |
+| ---------- | ----------------------- | ------- | ----------------------------------------------- |
+| `device`   | `MediaDeviceInfo`       | -       | The MediaDeviceInfo object for the device.      |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the span element. |
+
+## Hooks
+
+### `useAudioDevices()`
+
+A custom hook for managing audio input devices. This hook is used internally by the `MicSelector` component but can also be used independently.
+
+```tsx
+import { useAudioDevices } from "@repo/elements/mic-selector";
+
+export default function Example() {
+  const { devices, loading, error, hasPermission, loadDevices } = useAudioDevices();
+
+  return (
+    <div>
+      {loading && <p>Loading devices...</p>}
+      {error && <p>Error: {error}</p>}
+      {devices.map((device) => (
+        <div key={device.deviceId}>{device.label}</div>
+      ))}
+      {!hasPermission && <button onClick={loadDevices}>Grant Permission</button>}
+    </div>
+  );
+}
+```
+
+#### Return Value
+
+| Prop            | Type                  | Default | Description                                                      |
+| --------------- | --------------------- | ------- | ---------------------------------------------------------------- | --------------------------------------- |
+| `devices`       | `MediaDeviceInfo[]`   | -       | Array of available audio input devices.                          |
+| `loading`       | `boolean`             | -       | Whether devices are currently being loaded.                      |
+| `error`         | `string               | null`   | -                                                                | Error message if device loading failed. |
+| `hasPermission` | `boolean`             | -       | Whether microphone permission has been granted.                  |
+| `loadDevices`   | `() => Promise<void>` | -       | Function to request microphone permission and load device names. |
+
+## Behavior
+
+### Permission Handling
+
+The component implements a two-stage permission approach:
+
+1. **Without Permission**: Initially loads devices without requesting permission. Device labels may show as generic names (e.g., "Microphone 1").
+2. **With Permission**: When the popover is opened and permission hasn't been granted, automatically requests microphone access and displays actual device names.
+
+### Device Label Parsing
+
+The `MicSelectorLabel` component intelligently parses device names that include hardware IDs in the format `(XXXX:XXXX)`. It splits the label into the device name and ID, styling the ID with muted text for better readability.
+
+For example: `"MacBook Pro Microphone (1a2b:3c4d)"` becomes:
+
+- Device name: `"MacBook Pro Microphone"`
+- Device ID: `"(1a2b:3c4d)"` (styled with muted color)
+
+### Width Synchronization
+
+The `MicSelectorTrigger` uses a ResizeObserver to track its width and automatically synchronizes it with the `MicSelectorContent` popover width for a cohesive appearance.
+
+### Device Change Detection
+
+The component listens for `devicechange` events (e.g., plugging/unplugging microphones) and automatically updates the device list in real-time.
+
+## Accessibility
+
+- Uses semantic HTML with proper ARIA attributes via shadcn/ui components
+- Full keyboard navigation support through Command component
+- Screen reader friendly with proper labels and roles
+- Searchable device list for quick selection
+
+## Notes
+
+- Requires a secure context (HTTPS or localhost) for microphone access
+- Browser may prompt user for microphone permission on first open
+- Device labels are only fully descriptive after permission is granted
+- Component handles cleanup of temporary media streams during permission requests
+- Uses Radix UI's `useControllableState` for flexible controlled/uncontrolled patterns

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/model-selector.md

@@ -0,0 +1,112 @@
+# Model Selector
+
+A searchable command palette for selecting AI models in your chat interface.
+
+The `ModelSelector` component provides a searchable command palette interface for selecting AI models. It's built on top of the cmdk library and provides a keyboard-navigable interface with search functionality.
+
+See `scripts/model-selector.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add model-selector
+```
+
+## Features
+
+- Searchable interface with keyboard navigation
+- Fuzzy search filtering across model names
+- Grouped model organization by provider
+- Keyboard shortcuts support
+- Empty state handling
+- Customizable styling with Tailwind CSS
+- Built on cmdk for excellent accessibility
+- TypeScript support with proper type definitions
+
+## Props
+
+### `<ModelSelector />`
+
+| Prop       | Type                                  | Default | Description                                                    |
+| ---------- | ------------------------------------- | ------- | -------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof Dialog>` | -       | Any other props are spread to the underlying Dialog component. |
+
+### `<ModelSelectorTrigger />`
+
+| Prop       | Type                                         | Default | Description                                                           |
+| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof DialogTrigger>` | -       | Any other props are spread to the underlying DialogTrigger component. |
+
+### `<ModelSelectorContent />`
+
+| Prop       | Type                                         | Default | Description                                                           |
+| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |
+| `title`    | `ReactNode`                                  | -       | Accessible title for the dialog (rendered in sr-only).                |
+| `...props` | `React.ComponentProps<typeof DialogContent>` | -       | Any other props are spread to the underlying DialogContent component. |
+
+### `<ModelSelectorDialog />`
+
+| Prop       | Type                                         | Default | Description                                                           |
+| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CommandDialog>` | -       | Any other props are spread to the underlying CommandDialog component. |
+
+### `<ModelSelectorInput />`
+
+| Prop       | Type                                        | Default | Description                                                          |
+| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CommandInput>` | -       | Any other props are spread to the underlying CommandInput component. |
+
+### `<ModelSelectorList />`
+
+| Prop       | Type                                       | Default | Description                                                         |
+| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CommandList>` | -       | Any other props are spread to the underlying CommandList component. |
+
+### `<ModelSelectorEmpty />`
+
+| Prop       | Type                                        | Default | Description                                                          |
+| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CommandEmpty>` | -       | Any other props are spread to the underlying CommandEmpty component. |
+
+### `<ModelSelectorGroup />`
+
+| Prop       | Type                                        | Default | Description                                                          |
+| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CommandGroup>` | -       | Any other props are spread to the underlying CommandGroup component. |
+
+### `<ModelSelectorItem />`
+
+| Prop       | Type                                       | Default | Description                                                         |
+| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CommandItem>` | -       | Any other props are spread to the underlying CommandItem component. |
+
+### `<ModelSelectorShortcut />`
+
+| Prop       | Type                                           | Default | Description                                                             |
+| ---------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CommandShortcut>` | -       | Any other props are spread to the underlying CommandShortcut component. |
+
+### `<ModelSelectorSeparator />`
+
+| Prop       | Type                                            | Default | Description                                                              |
+| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof CommandSeparator>` | -       | Any other props are spread to the underlying CommandSeparator component. |
+
+### `<ModelSelectorLogo />`
+
+| Prop       | Type                         | Default  | Description                                                                                        |
+| ---------- | ---------------------------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `provider` | `string`                     | Required | The AI provider name. Supports major providers like                                                |
+| `...props` | `Omit<React.ComponentProps<` | -        | Any other props are spread to the underlying img element (except src and alt which are generated). |
+
+### `<ModelSelectorLogoGroup />`
+
+| Prop       | Type                    | Default | Description                                               |
+| ---------- | ----------------------- | ------- | --------------------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the underlying div element. |
+
+### `<ModelSelectorName />`
+
+| Prop       | Type                    | Default | Description                                                |
+| ---------- | ----------------------- | ------- | ---------------------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the underlying span element. |

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/node.md

@@ -0,0 +1,71 @@
+# Node
+
+A composable node component for React Flow-based canvases with Card-based styling.
+
+The `Node` component provides a composable, Card-based node for React Flow canvases. It includes support for connection handles, structured layouts, and consistent styling using shadcn/ui components.
+
+## Installation
+
+```bash
+npx ai-elements@latest add node
+```
+
+## Features
+
+- Built on shadcn/ui Card components for consistent styling
+- Automatic handle placement (left for target, right for source)
+- Composable sub-components (Header, Title, Description, Action, Content, Footer)
+- Semantic structure for organizing node information
+- Pre-styled sections with borders and backgrounds
+- Responsive sizing with fixed small width
+- Full TypeScript support with proper type definitions
+- Compatible with React Flow's node system
+
+## Props
+
+### `<Node />`
+
+| Prop        | Type                          | Default | Description                                                                            |
+| ----------- | ----------------------------- | ------- | -------------------------------------------------------------------------------------- |
+| `handles`   | `unknown`                     | -       | Configuration for connection handles. Target renders on the left, source on the right. |
+| `className` | `string`                      | -       | Additional CSS classes to apply to the node.                                           |
+| `...props`  | `ComponentProps<typeof Card>` | -       | Any other props are spread to the underlying Card component.                           |
+
+### `<NodeHeader />`
+
+| Prop        | Type                                | Default | Description                                                        |
+| ----------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |
+| `className` | `string`                            | -       | Additional CSS classes to apply to the header.                     |
+| `...props`  | `ComponentProps<typeof CardHeader>` | -       | Any other props are spread to the underlying CardHeader component. |
+
+### `<NodeTitle />`
+
+| Prop       | Type                               | Default | Description                                                       |
+| ---------- | ---------------------------------- | ------- | ----------------------------------------------------------------- |
+| `...props` | `ComponentProps<typeof CardTitle>` | -       | Any other props are spread to the underlying CardTitle component. |
+
+### `<NodeDescription />`
+
+| Prop       | Type                                     | Default | Description                                                             |
+| ---------- | ---------------------------------------- | ------- | ----------------------------------------------------------------------- |
+| `...props` | `ComponentProps<typeof CardDescription>` | -       | Any other props are spread to the underlying CardDescription component. |
+
+### `<NodeAction />`
+
+| Prop       | Type                                | Default | Description                                                        |
+| ---------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |
+| `...props` | `ComponentProps<typeof CardAction>` | -       | Any other props are spread to the underlying CardAction component. |
+
+### `<NodeContent />`
+
+| Prop        | Type                                 | Default | Description                                                         |
+| ----------- | ------------------------------------ | ------- | ------------------------------------------------------------------- |
+| `className` | `string`                             | -       | Additional CSS classes to apply to the content.                     |
+| `...props`  | `ComponentProps<typeof CardContent>` | -       | Any other props are spread to the underlying CardContent component. |
+
+### `<NodeFooter />`
+
+| Prop        | Type                                | Default | Description                                                        |
+| ----------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |
+| `className` | `string`                            | -       | Additional CSS classes to apply to the footer.                     |
+| `...props`  | `ComponentProps<typeof CardFooter>` | -       | Any other props are spread to the underlying CardFooter component. |