@andorra-labs/code 0.0.0-stage → 0.1.5

package/dist/src/skills/bundled/ai-elements/references/mic-selector.md

@@ -0,0 +1,193 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/mic-selector.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# 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/src/skills/bundled/ai-elements/references/model-selector.md

@@ -0,0 +1,119 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/model-selector.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# 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/src/skills/bundled/ai-elements/references/node.md

@@ -0,0 +1,78 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/node.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# 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. |

package/dist/src/skills/bundled/ai-elements/references/open-in-chat.md

@@ -0,0 +1,74 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/open-in-chat.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# 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/src/skills/bundled/ai-elements/references/package-info.md

@@ -0,0 +1,102 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/package-info.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# 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/src/skills/bundled/ai-elements/references/panel.md

@@ -0,0 +1,38 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/panel.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# 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. |