create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/open-in-chat.md

@@ -0,0 +1,67 @@
+# Open In Chat
+
+A dropdown menu for opening queries in various AI chat platforms including ChatGPT, Claude, T3, Scira, and v0.
+
+The `OpenIn` component provides a dropdown menu that allows users to open queries in different AI chat platforms with a single click.
+
+See `scripts/open-in-chat.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add open-in-chat
+```
+
+## Features
+
+- Pre-configured links to popular AI chat platforms
+- Context-based query passing for cleaner API
+- Customizable dropdown trigger button
+- Automatic URL parameter encoding for queries
+- Support for ChatGPT, Claude, T3 Chat, Scira AI, v0, and Cursor
+- Branded icons for each platform
+- TypeScript support with proper type definitions
+- Accessible dropdown menu with keyboard navigation
+- External link indicators for clarity
+
+## Supported Platforms
+
+- **ChatGPT** - Opens query in OpenAI's ChatGPT with search hints
+- **Claude** - Opens query in Anthropic's Claude AI
+- **T3 Chat** - Opens query in T3 Chat platform
+- **Scira AI** - Opens query in Scira's AI assistant
+- **v0** - Opens query in Vercel's v0 platform
+- **Cursor** - Opens query in Cursor AI editor
+
+## Props
+
+### `<OpenIn />`
+
+| Prop       | Type                                        | Default | Description                                                        |
+| ---------- | ------------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `query`    | `string`                                    | -       | The query text to be sent to all AI platforms.                     |
+| `...props` | `React.ComponentProps<typeof DropdownMenu>` | -       | Props to spread to the underlying radix-ui DropdownMenu component. |
+
+### `<OpenInTrigger />`
+
+| Prop       | Type                                               | Default | Description                                                      |
+| ---------- | -------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` | `React.ReactNode`                                  | -       | Custom trigger button.                                           |
+| `...props` | `React.ComponentProps<typeof DropdownMenuTrigger>` | -       | Props to spread to the underlying DropdownMenuTrigger component. |
+
+### `<OpenInContent />`
+
+| Prop        | Type                                               | Default | Description                                                      |
+| ----------- | -------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `className` | `string`                                           | -       | Additional CSS classes to apply to the dropdown content.         |
+| `...props`  | `React.ComponentProps<typeof DropdownMenuContent>` | -       | Props to spread to the underlying DropdownMenuContent component. |
+
+### `<OpenInChatGPT />`, `<OpenInClaude />`, `<OpenInT3 />`, `<OpenInScira />`, `<OpenInv0 />`, `<OpenInCursor />`
+
+| Prop       | Type                                            | Default | Description                                                                                                                                     |
+| ---------- | ----------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof DropdownMenuItem>` | -       | Props to spread to the underlying DropdownMenuItem component. The query is automatically provided via context from the parent OpenIn component. |
+
+### `<OpenInItem />`, `<OpenInLabel />`, `<OpenInSeparator />`
+
+Additional composable components for custom dropdown menu items, labels, and separators that follow the same props pattern as their underlying radix-ui counterparts.

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

@@ -0,0 +1,95 @@
+# Package Info
+
+Display dependency information and version changes.
+
+The `PackageInfo` component displays package dependency information including version changes and change type badges.
+
+See `scripts/package-info.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add package-info
+```
+
+## Features
+
+- Version change display (current → new)
+- Color-coded change type badges
+- Dependencies list
+- Description support
+
+## Change Types
+
+| Type      | Color  | Use Case           |
+| --------- | ------ | ------------------ |
+| `major`   | Red    | Breaking changes   |
+| `minor`   | Yellow | New features       |
+| `patch`   | Green  | Bug fixes          |
+| `added`   | Blue   | New dependency     |
+| `removed` | Gray   | Removed dependency |
+
+## Props
+
+### `<PackageInfo />`
+
+| Prop             | Type                                   | Default  | Description                  |
+| ---------------- | -------------------------------------- | -------- | ---------------------------- |
+| `name`           | `string`                               | Required | Package name.                |
+| `currentVersion` | `string`                               | -        | Current installed version.   |
+| `newVersion`     | `string`                               | -        | New version being installed. |
+| `changeType`     | `unknown`                              | -        | Type of version change.      |
+| `...props`       | `React.HTMLAttributes<HTMLDivElement>` | -        | Spread to the container div. |
+
+### `<PackageInfoHeader />`
+
+| Prop       | Type                                   | Default | Description               |
+| ---------- | -------------------------------------- | ------- | ------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the header div. |
+
+### `<PackageInfoName />`
+
+| Prop       | Type                                   | Default | Description                                             |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------- |
+| `children` | `React.ReactNode`                      | -       | Custom name content. Defaults to the name from context. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div.                            |
+
+### `<PackageInfoChangeType />`
+
+| Prop       | Type                                   | Default | Description                                                        |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `children` | `React.ReactNode`                      | -       | Custom change type label. Defaults to the changeType from context. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the Badge component.                                     |
+
+### `<PackageInfoVersion />`
+
+| Prop       | Type                                   | Default | Description                                                     |
+| ---------- | -------------------------------------- | ------- | --------------------------------------------------------------- |
+| `children` | `React.ReactNode`                      | -       | Custom version content. Defaults to version transition display. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div.                                    |
+
+### `<PackageInfoDescription />`
+
+| Prop       | Type                                         | Default | Description              |
+| ---------- | -------------------------------------------- | ------- | ------------------------ |
+| `...props` | `React.HTMLAttributes<HTMLParagraphElement>` | -       | Spread to the p element. |
+
+### `<PackageInfoContent />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<PackageInfoDependencies />`
+
+| Prop       | Type                                   | Default | Description                  |
+| ---------- | -------------------------------------- | ------- | ---------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Spread to the container div. |
+
+### `<PackageInfoDependency />`
+
+| Prop       | Type                                   | Default  | Description            |
+| ---------- | -------------------------------------- | -------- | ---------------------- |
+| `name`     | `string`                               | Required | Dependency name.       |
+| `version`  | `string`                               | -        | Dependency version.    |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -        | Spread to the row div. |

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

@@ -0,0 +1,31 @@
+# Panel
+
+A styled panel component for React Flow-based canvases to position custom UI elements.
+
+The `Panel` component provides a positioned container for custom UI elements on React Flow canvases. It includes modern card styling with backdrop blur and flexible positioning options.
+
+## Installation
+
+```bash
+npx ai-elements@latest add panel
+```
+
+## Features
+
+- Flexible positioning (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center)
+- Rounded pill design with backdrop blur
+- Theme-aware card background
+- Flexbox layout for easy content alignment
+- Subtle drop shadow for depth
+- Full TypeScript support
+- Compatible with React Flow's panel system
+
+## Props
+
+### `<Panel />`
+
+| Prop        | Type                           | Default | Description                                         |
+| ----------- | ------------------------------ | ------- | --------------------------------------------------- |
+| `position`  | `unknown`                      | -       | Position of the panel on the canvas.                |
+| `className` | `string`                       | -       | Additional CSS classes to apply to the panel.       |
+| `...props`  | `ComponentProps<typeof Panel>` | -       | Any other props from @xyflow/react Panel component. |

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

@@ -0,0 +1,158 @@
+# Persona
+
+An animated AI visual component powered by Rive that responds to different states like listening, thinking, and speaking.
+
+The `Persona` component displays an animated AI visual that responds to different conversational states. Built with Rive WebGL2, it provides smooth, high-performance animations for various AI interaction states including idle, listening, thinking, speaking, and asleep. The component supports multiple visual variants to match different design aesthetics.
+
+See `scripts/persona-obsidian.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add persona
+```
+
+## Features
+
+- Smooth state-based animations powered by Rive
+- Multiple visual variants (obsidian, mana, opal, halo, glint, command)
+- Responsive to five distinct states: idle, listening, thinking, speaking, and asleep
+- WebGL2-accelerated rendering for optimal performance
+- Customizable size and styling
+- Lifecycle callbacks for load, ready, pause, play, and stop events
+- TypeScript support with full type definitions
+
+## Variants
+
+The Persona component comes with 6 distinct visual variants, each with its own unique aesthetic:
+
+### Obsidian (Default)
+
+See `scripts/persona-obsidian.tsx` for this example.
+
+### Mana
+
+See `scripts/persona-mana.tsx` for this example.
+
+### Opal
+
+See `scripts/persona-opal.tsx` for this example.
+
+### Halo
+
+See `scripts/persona-halo.tsx` for this example.
+
+### Glint
+
+See `scripts/persona-glint.tsx` for this example.
+
+### Command
+
+See `scripts/persona-command.tsx` for this example.
+
+## Props
+
+### `<Persona />`
+
+The root component that renders the animated AI visual.
+
+| Prop          | Type              | Default | Description                                                                 |
+| ------------- | ----------------- | ------- | --------------------------------------------------------------------------- |
+| `state`       | `unknown`         | -       | The current state of the AI persona. Controls which animation is displayed. |
+| `variant`     | `unknown`         | -       | The visual style variant to display.                                        |
+| `className`   | `string`          | -       | Additional CSS classes to apply to the component.                           |
+| `onLoad`      | `RiveParameters[` | -       | Callback fired when the Rive file starts loading.                           |
+| `onLoadError` | `RiveParameters[` | -       | Callback fired if the Rive file fails to load.                              |
+| `onReady`     | `() => void`      | -       | Callback fired when the Rive animation is ready to play.                    |
+| `onPause`     | `RiveParameters[` | -       | Callback fired when the animation is paused.                                |
+| `onPlay`      | `RiveParameters[` | -       | Callback fired when the animation starts playing.                           |
+| `onStop`      | `RiveParameters[` | -       | Callback fired when the animation is stopped.                               |
+
+## States
+
+The Persona component responds to five distinct states, each triggering different animations:
+
+- **idle**: The default resting state when the AI is not active
+- **listening**: Displayed when the AI is actively listening to user input (e.g., during voice recording)
+- **thinking**: Shown when the AI is processing or generating a response
+- **speaking**: Active when the AI is delivering a response (e.g., text-to-speech output)
+- **asleep**: A dormant state for when the AI is inactive or in low-power mode
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { Persona } from "@repo/elements/persona";
+
+export default function App() {
+  return <Persona state="listening" variant="opal" />;
+}
+```
+
+### With State Management
+
+```tsx
+import { Persona } from "@repo/elements/persona";
+import { useState } from "react";
+
+export default function App() {
+  const [state, setState] = useState<"idle" | "listening" | "thinking" | "speaking" | "asleep">(
+    "idle",
+  );
+
+  const startListening = () => setState("listening");
+  const startThinking = () => setState("thinking");
+  const startSpeaking = () => setState("speaking");
+  const reset = () => setState("idle");
+
+  return (
+    <div>
+      <Persona state={state} variant="opal" className="size-32" />
+      <div>
+        <button onClick={startListening}>Listen</button>
+        <button onClick={startThinking}>Think</button>
+        <button onClick={startSpeaking}>Speak</button>
+        <button onClick={reset}>Reset</button>
+      </div>
+    </div>
+  );
+}
+```
+
+### With Custom Styling
+
+```tsx
+import { Persona } from "@repo/elements/persona";
+
+export default function App() {
+  return (
+    <Persona
+      state="thinking"
+      variant="halo"
+      className="size-64 rounded-full border border-border"
+    />
+  );
+}
+```
+
+### With Lifecycle Callbacks
+
+```tsx
+import { Persona } from "@repo/elements/persona";
+
+export default function App() {
+  return (
+    <Persona
+      state="listening"
+      variant="glint"
+      onReady={() => console.log("Animation ready")}
+      onLoad={() => console.log("Starting to load")}
+      onLoadError={(error) => console.error("Failed to load:", error)}
+      onPlay={() => console.log("Animation playing")}
+      onPause={() => console.log("Animation paused")}
+      onStop={() => console.log("Animation stopped")}
+    />
+  );
+}
+```

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

@@ -0,0 +1,79 @@
+# Plan
+
+A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
+
+The `Plan` component provides a flexible system for displaying AI-generated execution plans with collapsible content. Perfect for showing multi-step workflows, task breakdowns, and implementation strategies with support for streaming content and loading states.
+
+See `scripts/plan.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add plan
+```
+
+## Features
+
+- Collapsible content with smooth animations
+- Streaming support with shimmer loading states
+- Built on shadcn/ui Card and Collapsible components
+- TypeScript support with comprehensive type definitions
+- Customizable styling with Tailwind CSS
+- Responsive design with mobile-friendly interactions
+- Keyboard navigation and accessibility support
+- Theme-aware with automatic dark mode support
+- Context-based state management for streaming
+
+## Props
+
+### `<Plan />`
+
+| Prop          | Type                                       | Default | Description                                                                                  |
+| ------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------- |
+| `isStreaming` | `boolean`                                  | `false` | Whether content is currently streaming. Enables shimmer animations on title and description. |
+| `defaultOpen` | `boolean`                                  | -       | Whether the plan is expanded by default.                                                     |
+| `...props`    | `React.ComponentProps<typeof Collapsible>` | -       | Any other props are spread to the Collapsible component.                                     |
+
+### `<PlanHeader />`
+
+| Prop       | Type                                      | Default | Description                                             |
+| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CardHeader>` | -       | Any other props are spread to the CardHeader component. |
+
+### `<PlanTitle />`
+
+| Prop       | Type                                            | Default | Description                                                               |
+| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `children` | `string`                                        | -       | The title text. Displays with shimmer animation when isStreaming is true. |
+| `...props` | `Omit<React.ComponentProps<typeof CardTitle>, ` | -       | Any other props (except children) are spread to the CardTitle component.  |
+
+### `<PlanDescription />`
+
+| Prop       | Type                                                  | Default | Description                                                                     |
+| ---------- | ----------------------------------------------------- | ------- | ------------------------------------------------------------------------------- |
+| `children` | `string`                                              | -       | The description text. Displays with shimmer animation when isStreaming is true. |
+| `...props` | `Omit<React.ComponentProps<typeof CardDescription>, ` | -       | Any other props (except children) are spread to the CardDescription component.  |
+
+### `<PlanTrigger />`
+
+| Prop       | Type                                              | Default | Description                                                                                            |
+| ---------- | ------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | -       | Any other props are spread to the CollapsibleTrigger component. Renders as a Button with chevron icon. |
+
+### `<PlanContent />`
+
+| Prop       | Type                                       | Default | Description                                              |
+| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CardContent>` | -       | Any other props are spread to the CardContent component. |
+
+### `<PlanFooter />`
+
+| Prop       | Type                    | Default | Description                                    |
+| ---------- | ----------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the div element. |
+
+### `<PlanAction />`
+
+| Prop       | Type                                      | Default | Description                                             |
+| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CardAction>` | -       | Any other props are spread to the CardAction component. |