zilmate 1.7.8 → 1.8.1

package/.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/.agents/skills/ai-elements/references/panel.md

@@ -0,0 +1,33 @@
+# 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/.agents/skills/ai-elements/references/persona.md

@@ -0,0 +1,166 @@
+# 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
+
+## React Strict Mode (Vite)
+
+The Persona component uses WebGL2 for rendering. Browsers limit the number of active WebGL2 contexts (~8–16), and React Strict Mode (enabled by default in Vite dev) double-mounts components, which can exhaust that limit and crash the page.
+
+The component includes a built-in guard that defers WebGL2 initialization by one frame, preventing context creation during Strict Mode's throw-away mount. This means the component works in Vite dev mode out of the box — no configuration needed.
+
+If you still experience crashes (for example, when rendering many Persona instances simultaneously), reduce the number of concurrent Persona components on screen.
+
+## 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/.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. |