create-inox-app 0.1.0

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

@@ -0,0 +1,170 @@
+# Code Block
+
+Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
+
+The `CodeBlock` component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks. It's fully composable, allowing you to customize the header, actions, and content.
+
+See `scripts/code-block.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add code-block
+```
+
+## Usage
+
+The CodeBlock is fully composable. Here's a basic example:
+
+```tsx
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from "@/components/ai-elements/code-block";
+import { FileIcon } from "lucide-react";
+
+export const Example = () => (
+  <CodeBlock code={code} language="typescript">
+    <CodeBlockHeader>
+      <CodeBlockTitle>
+        <FileIcon size={14} />
+        <CodeBlockFilename>example.ts</CodeBlockFilename>
+      </CodeBlockTitle>
+      <CodeBlockActions>
+        <CodeBlockCopyButton />
+      </CodeBlockActions>
+    </CodeBlockHeader>
+  </CodeBlock>
+);
+```
+
+## Features
+
+- Syntax highlighting with Shiki
+- Line numbers (optional)
+- Copy to clipboard functionality
+- Automatic light/dark theme switching via CSS variables
+- Language selector for multi-language examples
+- Fully composable architecture
+- Accessible design
+
+## Examples
+
+### Dark Mode
+
+To use the `CodeBlock` component in dark mode, wrap it in a `div` with the `dark` class.
+
+See `scripts/code-block-dark.tsx` for this example.
+
+### Language Selector
+
+Add a language selector to switch between different code implementations:
+
+See `scripts/code-block.tsx` for this example.
+
+## Props
+
+### `<CodeBlock />`
+
+| Prop              | Type              | Default | Description                                       |
+| ----------------- | ----------------- | ------- | ------------------------------------------------- |
+| `code`            | `string`          | -       | The code content to display.                      |
+| `language`        | `BundledLanguage` | -       | The programming language for syntax highlighting. |
+| `showLineNumbers` | `boolean`         | `false` | Whether to show line numbers.                     |
+| `children`        | `React.ReactNode` | -       | Child elements like CodeBlockHeader.              |
+| `className`       | `string`          | -       | Additional CSS classes.                           |
+
+### `<CodeBlockHeader />`
+
+Container for the header row. Uses flexbox with `justify-between`.
+
+| Prop        | Type              | Default | Description                                              |
+| ----------- | ----------------- | ------- | -------------------------------------------------------- |
+| `children`  | `React.ReactNode` | -       | Header content (CodeBlockTitle, CodeBlockActions, etc.). |
+| `className` | `string`          | -       | Additional CSS classes.                                  |
+
+### `<CodeBlockTitle />`
+
+Left-aligned container for icon and filename. Uses flexbox with `gap-2`.
+
+| Prop        | Type              | Default | Description                                    |
+| ----------- | ----------------- | ------- | ---------------------------------------------- |
+| `children`  | `React.ReactNode` | -       | Title content (icon, CodeBlockFilename, etc.). |
+| `className` | `string`          | -       | Additional CSS classes.                        |
+
+### `<CodeBlockFilename />`
+
+Displays the filename in monospace font.
+
+| Prop        | Type              | Default | Description              |
+| ----------- | ----------------- | ------- | ------------------------ |
+| `children`  | `React.ReactNode` | -       | The filename to display. |
+| `className` | `string`          | -       | Additional CSS classes.  |
+
+### `<CodeBlockActions />`
+
+Right-aligned container for action buttons. Uses flexbox with `gap-2`.
+
+| Prop        | Type              | Default | Description                                                            |
+| ----------- | ----------------- | ------- | ---------------------------------------------------------------------- |
+| `children`  | `React.ReactNode` | -       | Action buttons (CodeBlockCopyButton, CodeBlockLanguageSelector, etc.). |
+| `className` | `string`          | -       | Additional CSS classes.                                                |
+
+### `<CodeBlockCopyButton />`
+
+| Prop        | Type                     | Default | Description                                                  |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------ |
+| `onCopy`    | `() => void`             | -       | Callback fired after a successful copy.                      |
+| `onError`   | `(error: Error) => void` | -       | Callback fired if copying fails.                             |
+| `timeout`   | `number`                 | `2000`  | How long to show the copied state (ms).                      |
+| `children`  | `React.ReactNode`        | -       | Custom content for the button. Defaults to copy/check icons. |
+| `className` | `string`                 | -       | Additional CSS classes.                                      |
+
+### `<CodeBlockLanguageSelector />`
+
+Wrapper for the language selector. Extends shadcn/ui Select.
+
+| Prop            | Type                      | Default | Description                                    |
+| --------------- | ------------------------- | ------- | ---------------------------------------------- |
+| `value`         | `string`                  | -       | The currently selected language.               |
+| `onValueChange` | `(value: string) => void` | -       | Callback when the language changes.            |
+| `children`      | `React.ReactNode`         | -       | Selector components (Trigger, Content, Items). |
+
+### `<CodeBlockLanguageSelectorTrigger />`
+
+Trigger button for the language selector dropdown. Pre-styled for code block header.
+
+### `<CodeBlockLanguageSelectorValue />`
+
+Displays the selected language value.
+
+### `<CodeBlockLanguageSelectorContent />`
+
+Dropdown content container. Defaults to `align="end"`.
+
+### `<CodeBlockLanguageSelectorItem />`
+
+Individual language option in the dropdown.
+
+| Prop       | Type              | Default | Description         |
+| ---------- | ----------------- | ------- | ------------------- |
+| `value`    | `string`          | -       | The language value. |
+| `children` | `React.ReactNode` | -       | The display label.  |
+
+### `<CodeBlockContainer />`
+
+Low-level container component with performance optimizations (`contentVisibility`). Used internally by CodeBlock.
+
+### `<CodeBlockContent />`
+
+Low-level component that handles syntax highlighting. Used internally by CodeBlock, but can be used directly for custom layouts.
+
+| Prop              | Type              | Default | Description                                       |
+| ----------------- | ----------------- | ------- | ------------------------------------------------- |
+| `code`            | `string`          | -       | The code content to display.                      |
+| `language`        | `BundledLanguage` | -       | The programming language for syntax highlighting. |
+| `showLineNumbers` | `boolean`         | `false` | Whether to show line numbers.                     |

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

@@ -0,0 +1,177 @@
+# Commit
+
+Display commit information with hash, message, author, and file changes.
+
+The `Commit` component displays commit details including hash, message, author, timestamp, and changed files.
+
+See `scripts/commit.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add commit
+```
+
+## Features
+
+- Commit hash display with copy button
+- Author avatar with initials
+- Relative timestamp formatting
+- Collapsible file changes list
+- Color-coded file status (added/modified/deleted/renamed)
+- Line additions/deletions count
+
+## File Status
+
+| Status     | Label | Color  |
+| ---------- | ----- | ------ |
+| `added`    | A     | Green  |
+| `modified` | M     | Yellow |
+| `deleted`  | D     | Red    |
+| `renamed`  | R     | Blue   |
+
+## Props
+
+### `<Commit />`
+
+| Prop       | Type                                       | Default | Description                          |
+| ---------- | ------------------------------------------ | ------- | ------------------------------------ |
+| `...props` | `React.ComponentProps<typeof Collapsible>` | -       | Spread to the Collapsible component. |
+
+### `<CommitHeader />`
+
+| Prop       | Type                                              | Default | Description                                 |
+| ---------- | ------------------------------------------------- | ------- | ------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | -       | Spread to the CollapsibleTrigger component. |
+
+### `<CommitAuthor />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<CommitAuthorAvatar />`
+
+| Prop       | Type                                  | Default  | Description                     |
+| ---------- | ------------------------------------- | -------- | ------------------------------- |
+| `initials` | `string`                              | Required | Author initials to display.     |
+| `...props` | `React.ComponentProps<typeof Avatar>` | -        | Spread to the Avatar component. |
+
+### `<CommitInfo />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<CommitMessage />`
+
+| Prop       | Type                                    | Default | Description                 |
+| ---------- | --------------------------------------- | ------- | --------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | -       | Spread to the span element. |
+
+### `<CommitMetadata />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<CommitHash />`
+
+| Prop       | Type                                    | Default | Description                 |
+| ---------- | --------------------------------------- | ------- | --------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | -       | Spread to the span element. |
+
+### `<CommitSeparator />`
+
+| Prop       | Type                                    | Default | Description                 |
+| ---------- | --------------------------------------- | ------- | --------------------------- |
+| `children` | `React.ReactNode`                       | -       | Custom separator content.   |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | -       | Spread to the span element. |
+
+### `<CommitTimestamp />`
+
+| Prop       | Type                                    | Default  | Description                                          |
+| ---------- | --------------------------------------- | -------- | ---------------------------------------------------- |
+| `date`     | `Date`                                  | Required | Commit date.                                         |
+| `children` | `React.ReactNode`                       | -        | Custom timestamp content. Defaults to relative time. |
+| `...props` | `React.HTMLAttributes<HTMLTimeElement>` | -        | Spread to the time element.                          |
+
+### `<CommitActions />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<CommitCopyButton />`
+
+| Prop       | Type                                  | Default  | Description                         |
+| ---------- | ------------------------------------- | -------- | ----------------------------------- |
+| `hash`     | `string`                              | Required | Commit hash to copy.                |
+| `onCopy`   | `() => void`                          | -        | Callback after successful copy.     |
+| `onError`  | `(error: Error) => void`              | -        | Callback if copying fails.          |
+| `timeout`  | `number`                              | `2000`   | Duration to show copied state (ms). |
+| `...props` | `React.ComponentProps<typeof Button>` | -        | Spread to the Button component.     |
+
+### `<CommitContent />`
+
+| Prop       | Type                                              | Default | Description                                 |
+| ---------- | ------------------------------------------------- | ------- | ------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | -       | Spread to the CollapsibleContent component. |
+
+### `<CommitFiles />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<CommitFile />`
+
+| Prop       | Type                                   | Default | Description            |
+| ---------- | -------------------------------------- | ------- | ---------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the row div. |
+
+### `<CommitFileInfo />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<CommitFileStatus />`
+
+| Prop       | Type                                    | Default  | Description                 |
+| ---------- | --------------------------------------- | -------- | --------------------------- |
+| `status`   | `unknown`                               | Required | File change status.         |
+| `children` | `React.ReactNode`                       | -        | Custom status label.        |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | -        | Spread to the span element. |
+
+### `<CommitFileIcon />`
+
+| Prop       | Type                                    | Default | Description                       |
+| ---------- | --------------------------------------- | ------- | --------------------------------- |
+| `...props` | `React.ComponentProps<typeof FileIcon>` | -       | Spread to the FileIcon component. |
+
+### `<CommitFilePath />`
+
+| Prop       | Type                                    | Default | Description                 |
+| ---------- | --------------------------------------- | ------- | --------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | -       | Spread to the span element. |
+
+### `<CommitFileChanges />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<CommitFileAdditions />`
+
+| Prop       | Type                                    | Default  | Description                 |
+| ---------- | --------------------------------------- | -------- | --------------------------- |
+| `count`    | `number`                                | Required | Number of lines added.      |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | -        | Spread to the span element. |
+
+### `<CommitFileDeletions />`
+
+| Prop       | Type                                    | Default  | Description                 |
+| ---------- | --------------------------------------- | -------- | --------------------------- |
+| `count`    | `number`                                | Required | Number of lines deleted.    |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | -        | Spread to the span element. |

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

@@ -0,0 +1,252 @@
+# Confirmation
+
+An alert-based component for managing tool execution approval workflows with request, accept, and reject states.
+
+The `Confirmation` component provides a flexible system for displaying tool approval requests and their outcomes. Perfect for showing users when AI tools require approval before execution, and displaying the approval status afterward.
+
+See `scripts/confirmation.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add confirmation
+```
+
+## Usage with AI SDK
+
+Build a chat UI with tool approval workflow where dangerous tools require user confirmation before execution.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport, type ToolUIPart } from "ai";
+import { useState } from "react";
+import { CheckIcon, XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Confirmation,
+  ConfirmationRequest,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationActions,
+  ConfirmationAction,
+} from "@/components/ai-elements/confirmation";
+import { MessageResponse } from "@/components/ai-elements/message";
+
+type DeleteFileInput = {
+  filePath: string;
+  confirm: boolean;
+};
+
+type DeleteFileToolUIPart = ToolUIPart<{
+  delete_file: {
+    input: DeleteFileInput;
+    output: { success: boolean; message: string };
+  };
+}>;
+
+const Example = () => {
+  const { messages, sendMessage, status, addToolApprovalResponse } = useChat({
+    transport: new DefaultChatTransport({
+      api: "/api/chat",
+    }),
+  });
+
+  const handleDeleteFile = () => {
+    sendMessage({ text: "Delete the file at /tmp/example.txt" });
+  };
+
+  const latestMessage = messages[messages.length - 1];
+  const deleteTool = latestMessage?.parts?.find((part) => part.type === "tool-delete_file") as
+    | DeleteFileToolUIPart
+    | undefined;
+
+  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 space-y-4">
+        <Button onClick={handleDeleteFile} disabled={status !== "ready"}>
+          Delete Example File
+        </Button>
+
+        {deleteTool?.approval && (
+          <Confirmation approval={deleteTool.approval} state={deleteTool.state}>
+            <ConfirmationRequest>
+              This tool wants to delete: <code>{deleteTool.input?.filePath}</code>
+              <br />
+              Do you approve this action?
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon className="size-4" />
+              <span>You approved this tool execution</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon className="size-4" />
+              <span>You rejected this tool execution</span>
+            </ConfirmationRejected>
+            <ConfirmationActions>
+              <ConfirmationAction
+                variant="outline"
+                onClick={() =>
+                  addToolApprovalResponse({
+                    id: deleteTool.approval!.id,
+                    approved: false,
+                  })
+                }
+              >
+                Reject
+              </ConfirmationAction>
+              <ConfirmationAction
+                variant="default"
+                onClick={() =>
+                  addToolApprovalResponse({
+                    id: deleteTool.approval!.id,
+                    approved: true,
+                  })
+                }
+              >
+                Approve
+              </ConfirmationAction>
+            </ConfirmationActions>
+          </Confirmation>
+        )}
+
+        {deleteTool?.output && (
+          <MessageResponse>
+            {deleteTool.output.success
+              ? deleteTool.output.message
+              : `Error: ${deleteTool.output.message}`}
+          </MessageResponse>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Example;
+```
+
+Add the following route to your backend:
+
+```ts title="app/api/chat/route.tsx"
+import { streamText, UIMessage, convertToModelMessages } from "ai";
+import { z } from "zod";
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: "openai/gpt-4o",
+    messages: await convertToModelMessages(messages),
+    tools: {
+      delete_file: {
+        description: "Delete a file from the file system",
+        parameters: z.object({
+          filePath: z.string().describe("The path to the file to delete"),
+          confirm: z
+            .boolean()
+            .default(false)
+            .describe("Confirmation that the user wants to delete the file"),
+        }),
+        requireApproval: true, // Enable approval workflow
+        execute: async ({ filePath, confirm }) => {
+          if (!confirm) {
+            return {
+              success: false,
+              message: "Deletion not confirmed",
+            };
+          }
+
+          // Simulate file deletion
+          await new Promise((resolve) => setTimeout(resolve, 500));
+
+          return {
+            success: true,
+            message: `Successfully deleted ${filePath}`,
+          };
+        },
+      },
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+## Features
+
+- Context-based state management for approval workflow
+- Conditional rendering based on approval state
+- Support for approval-requested, approval-responded, output-denied, and output-available states
+- Built on shadcn/ui Alert and Button components
+- TypeScript support with comprehensive type definitions
+- Customizable styling with Tailwind CSS
+- Keyboard navigation and accessibility support
+- Theme-aware with automatic dark mode support
+
+## Examples
+
+### Approval Request State
+
+Shows the approval request with action buttons when state is `approval-requested`.
+
+See `scripts/confirmation-request.tsx` for this example.
+
+### Approved State
+
+Shows the accepted status when user approves and state is `approval-responded` or `output-available`.
+
+See `scripts/confirmation-accepted.tsx` for this example.
+
+### Rejected State
+
+Shows the rejected status when user rejects and state is `output-denied`.
+
+See `scripts/confirmation-rejected.tsx` for this example.
+
+## Props
+
+### `<Confirmation />`
+
+| Prop        | Type                                 | Default | Description                                                                                                                                                                                                  |
+| ----------- | ------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `approval`  | `ToolUIPart[`                        | -       | The approval object containing the approval ID and status. If not provided or undefined, the component will not render.                                                                                      |
+| `state`     | `ToolUIPart[`                        | -       | The current state of the tool (input-streaming, input-available, approval-requested, approval-responded, output-denied, or output-available). Will not render for input-streaming or input-available states. |
+| `className` | `string`                             | -       | Additional CSS classes to apply to the Alert component.                                                                                                                                                      |
+| `...props`  | `React.ComponentProps<typeof Alert>` | -       | Any other props are spread to the Alert component.                                                                                                                                                           |
+
+### `<ConfirmationRequest />`
+
+| Prop       | Type              | Default | Description                                                                   |
+| ---------- | ----------------- | ------- | ----------------------------------------------------------------------------- |
+| `children` | `React.ReactNode` | -       | The content to display when approval is requested. Only renders when state is |
+
+### `<ConfirmationAccepted />`
+
+| Prop       | Type              | Default | Description                                                                                                |
+| ---------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
+| `children` | `React.ReactNode` | -       | The content to display when approval is accepted. Only renders when approval.approved is true and state is |
+
+### `<ConfirmationRejected />`
+
+| Prop       | Type              | Default | Description                                                                                                 |
+| ---------- | ----------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
+| `children` | `React.ReactNode` | -       | The content to display when approval is rejected. Only renders when approval.approved is false and state is |
+
+### `<ConfirmationActions />`
+
+| Prop        | Type                    | Default | Description                                                               |
+| ----------- | ----------------------- | ------- | ------------------------------------------------------------------------- |
+| `className` | `string`                | -       | Additional CSS classes to apply to the actions container.                 |
+| `...props`  | `React.ComponentProps<` | -       | Any other props are spread to the div element. Only renders when state is |
+
+### `<ConfirmationAction />`
+
+| Prop       | Type                                  | Default | Description                                                                                          |
+| ---------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the Button component. Styled with h-8 px-3 text-sm classes by default. |

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

@@ -0,0 +1,32 @@
+# Connection
+
+A custom connection line component for React Flow-based canvases with animated bezier curve styling.
+
+The `Connection` component provides a styled connection line for React Flow canvases. It renders an animated bezier curve with a circle indicator at the target end, using consistent theming through CSS variables.
+
+## Installation
+
+```bash
+npx ai-elements@latest add connection
+```
+
+## Features
+
+- Smooth bezier curve animation for connection lines
+- Visual indicator circle at the target position
+- Theme-aware styling using CSS variables
+- Cubic bezier curve calculation for natural flow
+- Lightweight implementation with minimal props
+- Full TypeScript support with React Flow types
+- Compatible with React Flow's connection system
+
+## Props
+
+### `<Connection />`
+
+| Prop    | Type     | Default | Description                                     |
+| ------- | -------- | ------- | ----------------------------------------------- |
+| `fromX` | `number` | -       | The x-coordinate of the connection start point. |
+| `fromY` | `number` | -       | The y-coordinate of the connection start point. |
+| `toX`   | `number` | -       | The x-coordinate of the connection end point.   |
+| `toY`   | `number` | -       | The y-coordinate of the connection end point.   |