create-inox-app 0.1.0

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

@@ -0,0 +1,190 @@
+# Attachments
+
+A flexible, composable attachment component for displaying files, images, videos, audio, and source documents.
+
+The `Attachment` component provides a unified way to display file attachments and source documents with multiple layout variants.
+
+See `scripts/attachments.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add attachments
+```
+
+## Usage with AI SDK
+
+Display user-uploaded files in chat messages or input areas.
+
+```tsx title="app/page.tsx"
+"use client";
+
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+} from "@/components/ai-elements/attachments";
+import type { FileUIPart } from "ai";
+
+interface MessageProps {
+  attachments: (FileUIPart & { id: string })[];
+  onRemove?: (id: string) => void;
+}
+
+const MessageAttachments = ({ attachments, onRemove }: MessageProps) => (
+  <Attachments variant="grid">
+    {attachments.map((file) => (
+      <Attachment
+        key={file.id}
+        data={file}
+        onRemove={onRemove ? () => onRemove(file.id) : undefined}
+      >
+        <AttachmentPreview />
+        <AttachmentRemove />
+      </Attachment>
+    ))}
+  </Attachments>
+);
+
+export default MessageAttachments;
+```
+
+## Features
+
+- Three display variants: grid (thumbnails), inline (badges), and list (rows)
+- Supports both FileUIPart and SourceDocumentUIPart from the AI SDK
+- Automatic media type detection (image, video, audio, document, source)
+- Hover card support for inline previews
+- Remove button with customizable callback
+- Composable architecture for maximum flexibility
+- Accessible with proper ARIA labels
+- TypeScript support with exported utility functions
+
+## Examples
+
+### Grid Variant
+
+Best for displaying attachments in messages with visual thumbnails.
+
+See `scripts/attachments.tsx` for this example.
+
+### Inline Variant
+
+Best for compact badge-style display in input areas with hover previews.
+
+See `scripts/attachments-inline.tsx` for this example.
+
+### List Variant
+
+Best for file lists with full metadata display.
+
+See `scripts/attachments-list.tsx` for this example.
+
+## Props
+
+### `<Attachments />`
+
+Container component that sets the layout variant.
+
+| Prop       | Type                                   | Default | Description                           |
+| ---------- | -------------------------------------- | ------- | ------------------------------------- |
+| `variant`  | `unknown`                              | -       | The display layout variant.           |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the underlying div element. |
+
+### `<Attachment />`
+
+Individual attachment item wrapper.
+
+| Prop       | Type                                   | Default | Description                                                       |
+| ---------- | -------------------------------------- | ------- | ----------------------------------------------------------------- |
+| `data`     | `unknown`                              | -       | The attachment data (FileUIPart or SourceDocumentUIPart with id). |
+| `onRemove` | `() => void`                           | -       | Callback fired when the remove button is clicked.                 |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the underlying div element.                             |
+
+### `<AttachmentPreview />`
+
+Displays the media preview (image, video, or icon).
+
+| Prop           | Type                                   | Default | Description                                          |
+| -------------- | -------------------------------------- | ------- | ---------------------------------------------------- |
+| `fallbackIcon` | `React.ReactNode`                      | -       | Custom icon to display when no preview is available. |
+| `...props`     | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the underlying div element.                |
+
+### `<AttachmentInfo />`
+
+Displays the filename and optional media type.
+
+| Prop            | Type                                   | Default | Description                                        |
+| --------------- | -------------------------------------- | ------- | -------------------------------------------------- |
+| `showMediaType` | `boolean`                              | `false` | Whether to show the media type below the filename. |
+| `...props`      | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the underlying div element.              |
+
+### `<AttachmentRemove />`
+
+Remove button that appears on hover.
+
+| Prop       | Type                                  | Default | Description                                |
+| ---------- | ------------------------------------- | ------- | ------------------------------------------ |
+| `label`    | `string`                              | -       | Screen reader label for the button.        |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Spread to the underlying Button component. |
+
+### `<AttachmentHoverCard />`
+
+Wrapper for hover preview functionality.
+
+| Prop         | Type                                     | Default | Description                                   |
+| ------------ | ---------------------------------------- | ------- | --------------------------------------------- |
+| `openDelay`  | `number`                                 | `0`     | Delay in ms before opening the hover card.    |
+| `closeDelay` | `number`                                 | `0`     | Delay in ms before closing the hover card.    |
+| `...props`   | `React.ComponentProps<typeof HoverCard>` | -       | Spread to the underlying HoverCard component. |
+
+### `<AttachmentHoverCardTrigger />`
+
+Trigger element for the hover card.
+
+| Prop       | Type                                            | Default | Description                                          |
+| ---------- | ----------------------------------------------- | ------- | ---------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof HoverCardTrigger>` | -       | Spread to the underlying HoverCardTrigger component. |
+
+### `<AttachmentHoverCardContent />`
+
+Content displayed in the hover card.
+
+| Prop       | Type                                            | Default | Description                                          |
+| ---------- | ----------------------------------------------- | ------- | ---------------------------------------------------- |
+| `align`    | `unknown`                                       | -       | Alignment of the hover card content.                 |
+| `...props` | `React.ComponentProps<typeof HoverCardContent>` | -       | Spread to the underlying HoverCardContent component. |
+
+### `<AttachmentEmpty />`
+
+Empty state component when no attachments are present.
+
+| Prop       | Type                                   | Default | Description                           |
+| ---------- | -------------------------------------- | ------- | ------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the underlying div element. |
+
+## Utility Functions
+
+### `getMediaCategory(data)`
+
+Returns the media category for an attachment.
+
+```tsx
+import { getMediaCategory } from "@/components/ai-elements/attachments";
+
+const category = getMediaCategory(attachment);
+// Returns: "image" | "video" | "audio" | "document" | "source" | "unknown"
+```
+
+### `getAttachmentLabel(data)`
+
+Returns the display label for an attachment.
+
+```tsx
+import { getAttachmentLabel } from "@/components/ai-elements/attachments";
+
+const label = getAttachmentLabel(attachment);
+// Returns filename or fallback like "Image" or "Attachment"
+```

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

@@ -0,0 +1,134 @@
+# Audio Player
+
+A composable audio player component built on media-chrome, with shadcn styling and flexible controls.
+
+The `AudioPlayer` component provides a flexible and customizable audio playback interface built on top of media-chrome. It features a composable architecture that allows you to build audio experiences with custom controls, metadata display, and seamless integration with AI-generated audio content.
+
+See `scripts/audio-player.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add audio-player
+```
+
+## Features
+
+- Built on media-chrome for reliable audio playback
+- Fully composable architecture with granular control components
+- ButtonGroup integration for cohesive control layout
+- Individual control components (play, seek, volume, etc.)
+- Flexible layout with customizable control bars
+- CSS custom properties for deep theming
+- Shadcn/ui Button component styling
+- Responsive design that works across devices
+- Full TypeScript support with proper types for all components
+
+## Variants
+
+### AI SDK Speech Result
+
+The `AudioPlayer` component can be used to play audio from an AI SDK Speech Result.
+
+See `scripts/audio-player.tsx` for this example.
+
+### Remote Audio
+
+The `AudioPlayer` component can be used to play remote audio files.
+
+See `scripts/audio-player-remote.tsx` for this example.
+
+## Props
+
+### `<AudioPlayer />`
+
+Root MediaController component. Accepts all MediaController props except `audio` (which is set to `true` by default).
+
+| Prop       | Type                                                  | Default | Description                                                                     |
+| ---------- | ----------------------------------------------------- | ------- | ------------------------------------------------------------------------------- |
+| `style`    | `CSSProperties`                                       | -       | Custom CSS properties can be passed to override media-chrome theming variables. |
+| `...props` | `Omit<React.ComponentProps<typeof MediaController>, ` | -       | Any other props are spread to the MediaController component.                    |
+
+### `<AudioPlayerElement />`
+
+The audio element that contains the media source. Accepts either a remote URL or AI SDK Speech Result data.
+
+| Prop       | Type                         | Default | Description                                                                      |
+| ---------- | ---------------------------- | ------- | -------------------------------------------------------------------------------- |
+| `src`      | `string`                     | -       | The URL of the audio file to play (for remote audio).                            |
+| `data`     | `SpeechResult[`              | -       | AI SDK Speech Result audio data with base64 encoding (for AI-generated audio).   |
+| `...props` | `Omit<React.ComponentProps<` | -       | Any other props are spread to the audio element (excluding src when using data). |
+
+### `<AudioPlayerControlBar />`
+
+Container for control buttons, wraps children in a ButtonGroup.
+
+| Prop       | Type                                           | Default | Description                                                  |
+| ---------- | ---------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof MediaControlBar>` | -       | Any other props are spread to the MediaControlBar component. |
+
+### `<AudioPlayerPlayButton />`
+
+Play/pause button wrapped in a shadcn Button component.
+
+| Prop       | Type                                           | Default | Description                                                  |
+| ---------- | ---------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof MediaPlayButton>` | -       | Any other props are spread to the MediaPlayButton component. |
+
+### `<AudioPlayerSeekBackwardButton />`
+
+Seek backward button wrapped in a shadcn Button component.
+
+| Prop         | Type                                                   | Default | Description                                                          |
+| ------------ | ------------------------------------------------------ | ------- | -------------------------------------------------------------------- |
+| `seekOffset` | `number`                                               | `10`    | The number of seconds to seek backward.                              |
+| `...props`   | `React.ComponentProps<typeof MediaSeekBackwardButton>` | -       | Any other props are spread to the MediaSeekBackwardButton component. |
+
+### `<AudioPlayerSeekForwardButton />`
+
+Seek forward button wrapped in a shadcn Button component.
+
+| Prop         | Type                                                  | Default | Description                                                         |
+| ------------ | ----------------------------------------------------- | ------- | ------------------------------------------------------------------- |
+| `seekOffset` | `number`                                              | `10`    | The number of seconds to seek forward.                              |
+| `...props`   | `React.ComponentProps<typeof MediaSeekForwardButton>` | -       | Any other props are spread to the MediaSeekForwardButton component. |
+
+### `<AudioPlayerTimeDisplay />`
+
+Displays the current playback time, wrapped in ButtonGroupText.
+
+| Prop       | Type                                            | Default | Description                                                   |
+| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof MediaTimeDisplay>` | -       | Any other props are spread to the MediaTimeDisplay component. |
+
+### `<AudioPlayerTimeRange />`
+
+Seek slider for controlling playback position, wrapped in ButtonGroupText.
+
+| Prop       | Type                                          | Default | Description                                                 |
+| ---------- | --------------------------------------------- | ------- | ----------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof MediaTimeRange>` | -       | Any other props are spread to the MediaTimeRange component. |
+
+### `<AudioPlayerDurationDisplay />`
+
+Displays the total duration of the audio, wrapped in ButtonGroupText.
+
+| Prop       | Type                                                | Default | Description                                                       |
+| ---------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof MediaDurationDisplay>` | -       | Any other props are spread to the MediaDurationDisplay component. |
+
+### `<AudioPlayerMuteButton />`
+
+Mute/unmute button, wrapped in ButtonGroupText.
+
+| Prop       | Type                                           | Default | Description                                                  |
+| ---------- | ---------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof MediaMuteButton>` | -       | Any other props are spread to the MediaMuteButton component. |
+
+### `<AudioPlayerVolumeRange />`
+
+Volume slider control, wrapped in ButtonGroupText.
+
+| Prop       | Type                                            | Default | Description                                                   |
+| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof MediaVolumeRange>` | -       | Any other props are spread to the MediaVolumeRange component. |

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

@@ -0,0 +1,32 @@
+# Canvas
+
+A React Flow-based canvas component for building interactive node-based interfaces.
+
+The `Canvas` component provides a React Flow-based canvas for building interactive node-based interfaces. It comes pre-configured with sensible defaults for AI applications, including panning, zooming, and selection behaviors.
+
+## Installation
+
+```bash
+npx ai-elements@latest add canvas
+```
+
+## Features
+
+- Pre-configured React Flow canvas with AI-optimized defaults
+- Pan on scroll enabled for intuitive navigation
+- Selection on drag for multi-node operations
+- Customizable background color using CSS variables
+- Delete key support (Backspace and Delete keys)
+- Auto-fit view to show all nodes
+- Disabled double-click zoom for better UX
+- Disabled pan on drag to prevent accidental canvas movement
+- Fully compatible with React Flow props and API
+
+## Props
+
+### `<Canvas />`
+
+| Prop       | Type             | Default | Description                                                                             |
+| ---------- | ---------------- | ------- | --------------------------------------------------------------------------------------- |
+| `children` | `ReactNode`      | -       | Child components like Background, Controls, or MiniMap.                                 |
+| `...props` | `ReactFlowProps` | -       | Any other React Flow props like nodes, edges, nodeTypes, edgeTypes, onNodesChange, etc. |

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/chain-of-thought.md

@@ -0,0 +1,81 @@
+# Chain of Thought
+
+A collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step progress indicators.
+
+The `ChainOfThought` component provides a visual representation of an AI's reasoning process, showing step-by-step thinking with support for search results, images, and progress indicators. It helps users understand how AI arrives at conclusions.
+
+See `scripts/chain-of-thought.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add chain-of-thought
+```
+
+## Features
+
+- Collapsible interface with smooth animations powered by Radix UI
+- Step-by-step visualization of AI reasoning process
+- Support for different step statuses (complete, active, pending)
+- Built-in search results display with badge styling
+- Image support with captions for visual content
+- Custom icons for different step types
+- Context-aware components using React Context API
+- Fully typed with TypeScript
+- Accessible with keyboard navigation support
+- Responsive design that adapts to different screen sizes
+- Smooth fade and slide animations for content transitions
+- Composable architecture for flexible customization
+
+## Props
+
+### `<ChainOfThought />`
+
+| Prop           | Type                      | Default | Description                                         |
+| -------------- | ------------------------- | ------- | --------------------------------------------------- |
+| `open`         | `boolean`                 | -       | Controlled open state of the collapsible.           |
+| `defaultOpen`  | `boolean`                 | `false` | Default open state when uncontrolled.               |
+| `onOpenChange` | `(open: boolean) => void` | -       | Callback when the open state changes.               |
+| `...props`     | `React.ComponentProps<`   | -       | Any other props are spread to the root div element. |
+
+### `<ChainOfThoughtHeader />`
+
+| Prop       | Type                                              | Default | Description                                                     |
+| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |
+| `children` | `React.ReactNode`                                 | -       | Custom header text.                                             |
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | -       | Any other props are spread to the CollapsibleTrigger component. |
+
+### `<ChainOfThoughtStep />`
+
+| Prop          | Type                    | Default   | Description                                         |
+| ------------- | ----------------------- | --------- | --------------------------------------------------- |
+| `icon`        | `LucideIcon`            | `DotIcon` | Icon to display for the step.                       |
+| `label`       | `string`                | -         | The main text label for the step.                   |
+| `description` | `string`                | -         | Optional description text shown below the label.    |
+| `status`      | `unknown`               | -         | Visual status of the step.                          |
+| `...props`    | `React.ComponentProps<` | -         | Any other props are spread to the root div element. |
+
+### `<ChainOfThoughtSearchResults />`
+
+| Prop       | Type                    | Default | Description                                        |
+| ---------- | ----------------------- | ------- | -------------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any props are spread to the container div element. |
+
+### `<ChainOfThoughtSearchResult />`
+
+| Prop       | Type                                 | Default | Description                                  |
+| ---------- | ------------------------------------ | ------- | -------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof Badge>` | -       | Any props are spread to the Badge component. |
+
+### `<ChainOfThoughtContent />`
+
+| Prop       | Type                                              | Default | Description                                               |
+| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | -       | Any props are spread to the CollapsibleContent component. |
+
+### `<ChainOfThoughtImage />`
+
+| Prop       | Type                    | Default | Description                                              |
+| ---------- | ----------------------- | ------- | -------------------------------------------------------- |
+| `caption`  | `string`                | -       | Optional caption text displayed below the image.         |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the container div element. |

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

@@ -0,0 +1,163 @@
+# Checkpoint
+
+A simple component for marking conversation history points and restoring the chat to a previous state.
+
+The `Checkpoint` component provides a way to mark specific points in a conversation history and restore the chat to that state. Inspired by VSCode's Copilot checkpoint feature, it allows users to revert to an earlier conversation state while maintaining a clear visual separation between different conversation segments.
+
+See `scripts/checkpoint.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add checkpoint
+```
+
+## Features
+
+- Simple flex layout with icon, trigger, and separator
+- Visual separator line for clear conversation breaks
+- Clickable restore button for reverting to checkpoint
+- Customizable icon (defaults to BookmarkIcon)
+- 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 chat interface with conversation checkpoints that allow users to restore to previous states.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useState, Fragment } from "react";
+import { useChat } from "@ai-sdk/react";
+import { Checkpoint, CheckpointIcon, CheckpointTrigger } from "@/components/ai-elements/checkpoint";
+import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
+import { Conversation, ConversationContent } from "@/components/ai-elements/conversation";
+
+type CheckpointType = {
+  id: string;
+  messageIndex: number;
+  timestamp: Date;
+  messageCount: number;
+};
+
+const CheckpointDemo = () => {
+  const { messages, setMessages } = useChat();
+  const [checkpoints, setCheckpoints] = useState<CheckpointType[]>([]);
+
+  const createCheckpoint = (messageIndex: number) => {
+    const checkpoint: CheckpointType = {
+      id: nanoid(),
+      messageIndex,
+      timestamp: new Date(),
+      messageCount: messageIndex + 1,
+    };
+    setCheckpoints([...checkpoints, checkpoint]);
+  };
+
+  const restoreToCheckpoint = (messageIndex: number) => {
+    // Restore messages to checkpoint state
+    setMessages(messages.slice(0, messageIndex + 1));
+    // Remove checkpoints after this point
+    setCheckpoints(checkpoints.filter((cp) => cp.messageIndex <= messageIndex));
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <Conversation>
+        <ConversationContent>
+          {messages.map((message, index) => {
+            const checkpoint = checkpoints.find((cp) => cp.messageIndex === index);
+
+            return (
+              <Fragment key={message.id}>
+                <Message from={message.role}>
+                  <MessageContent>
+                    <MessageResponse>{message.content}</MessageResponse>
+                  </MessageContent>
+                </Message>
+                {checkpoint && (
+                  <Checkpoint>
+                    <CheckpointIcon />
+                    <CheckpointTrigger onClick={() => restoreToCheckpoint(checkpoint.messageIndex)}>
+                      Restore checkpoint
+                    </CheckpointTrigger>
+                  </Checkpoint>
+                )}
+              </Fragment>
+            );
+          })}
+        </ConversationContent>
+      </Conversation>
+    </div>
+  );
+};
+
+export default CheckpointDemo;
+```
+
+## Use Cases
+
+### Manual Checkpoints
+
+Allow users to manually create checkpoints at important conversation points:
+
+```tsx
+<Button onClick={() => createCheckpoint(messages.length - 1)}>Create Checkpoint</Button>
+```
+
+### Automatic Checkpoints
+
+Create checkpoints automatically after significant conversation milestones:
+
+```tsx
+useEffect(() => {
+  // Create checkpoint every 5 messages
+  if (messages.length > 0 && messages.length % 5 === 0) {
+    createCheckpoint(messages.length - 1);
+  }
+}, [messages.length]);
+```
+
+### Branching Conversations
+
+Use checkpoints to enable conversation branching where users can explore different conversation paths:
+
+```tsx
+const restoreAndBranch = (messageIndex: number) => {
+  // Save current branch
+  const currentBranch = messages.slice(messageIndex + 1);
+  saveBranch(currentBranch);
+
+  // Restore to checkpoint
+  restoreToCheckpoint(messageIndex);
+};
+```
+
+## Props
+
+### `<Checkpoint />`
+
+| Prop       | Type                                   | Default | Description                                                                                |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------ |
+| `children` | `React.ReactNode`                      | -       | The checkpoint icon and trigger components. Automatically includes a Separator at the end. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the root div.                                                |
+
+### `<CheckpointIcon />`
+
+| Prop       | Type              | Default | Description                                                                         |
+| ---------- | ----------------- | ------- | ----------------------------------------------------------------------------------- |
+| `children` | `React.ReactNode` | -       | Custom icon content. If not provided, defaults to a BookmarkIcon from lucide-react. |
+| `...props` | `LucideProps`     | -       | Any other props are spread to the BookmarkIcon component.                           |
+
+### `<CheckpointTrigger />`
+
+| Prop       | Type                                  | Default | Description                                                              |
+| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `children` | `React.ReactNode`                     | -       | The text or content to display in the trigger button.                    |
+| `variant`  | `string`                              | -       | The button variant style.                                                |
+| `size`     | `string`                              | -       | The button size.                                                         |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the underlying shadcn/ui Button component. |