npm - @goldencomm/create-baseline - Versions diffs - 0.0.1 → 0.1.0 - Mend

@goldencomm/create-baseline 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (756) hide show

package/templates/next/.claude/skills/ai-elements/references/confirmation.md DELETED Viewed

@@ -1,262 +0,0 @@
-# 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,
-  ConfirmationTitle,
-  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. |
-### `<ConfirmationTitle />`
-A styled description element for displaying a title or label within the confirmation alert.
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof AlertDescription>` | - | Any other props are spread to the underlying AlertDescription 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/templates/next/.claude/skills/ai-elements/references/connection.md DELETED Viewed

@@ -1,34 +0,0 @@
-# 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. |

package/templates/next/.claude/skills/ai-elements/references/context.md DELETED Viewed

@@ -1,126 +0,0 @@
-# Context
-A compound component system for displaying AI model context window usage, token consumption, and cost estimation.
-The `Context` component provides a comprehensive view of AI model usage through a compound component system. It displays context window utilization, token consumption breakdown (input, output, reasoning, cache), and cost estimation in an interactive hover card interface.
-See `scripts/context.tsx` for this example.
-## Installation
-```bash
-npx ai-elements@latest add context
-```
-## Features
-- **Compound Component Architecture**: Flexible composition of context display elements
-- **Visual Progress Indicator**: Circular SVG progress ring showing context usage percentage
-- **Token Breakdown**: Detailed view of input, output, reasoning, and cached tokens
-- **Cost Estimation**: Real-time cost calculation using the `tokenlens` library
-- **Intelligent Formatting**: Automatic token count formatting (K, M, B suffixes)
-- **Interactive Hover Card**: Detailed information revealed on hover
-- **Context Provider Pattern**: Clean data flow through React Context API
-- **TypeScript Support**: Full type definitions for all components
-- **Accessible Design**: Proper ARIA labels and semantic HTML
-- **Theme Integration**: Uses currentColor for automatic theme adaptation
-## Props
-### `<Context />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `maxTokens` | `number` | - | The total context window size in tokens. |
-| `usedTokens` | `number` | - | The number of tokens currently used. |
-| `usage` | `LanguageModelUsage` | - | Detailed token usage breakdown from the AI SDK (input, output, reasoning, cached tokens). |
-| `modelId` | `ModelId` | - | Model identifier for cost calculation (e.g.,  |
-| `...props` | `ComponentProps<HoverCard>` | - | Any other props are spread to the HoverCard component. |
-### `<ContextTrigger />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Custom trigger element. If not provided, renders a default button with percentage and icon. |
-| `...props` | `ComponentProps<Button>` | - | Props spread to the default button element. |
-### `<ContextContent />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Additional CSS classes for the hover card content. |
-| `...props` | `ComponentProps<HoverCardContent>` | - | Props spread to the HoverCardContent component. |
-### `<ContextContentHeader />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Custom header content. If not provided, renders percentage and token count with progress bar. |
-| `...props` | `ComponentProps<div>` | - | Props spread to the header div element. |
-### `<ContextContentBody />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Body content, typically containing usage breakdown components. |
-| `...props` | `ComponentProps<div>` | - | Props spread to the body div element. |
-### `<ContextContentFooter />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Custom footer content. If not provided, renders total cost when modelId is provided. |
-| `...props` | `ComponentProps<div>` | - | Props spread to the footer div element. |
-### Usage Components
-All usage components (`ContextInputUsage`, `ContextOutputUsage`, `ContextReasoningUsage`, `ContextCacheUsage`) share the same props:
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Custom content. If not provided, renders token count and cost for the respective usage type. |
-| `className` | `string` | - | Additional CSS classes. |
-| `...props` | `ComponentProps<div>` | - | Props spread to the div element. |
-## Component Architecture
-The Context component uses a compound component pattern with React Context for data sharing:
-1. **`<Context>`** - Root provider component that holds all context data
-2. **`<ContextTrigger>`** - Interactive trigger element (default: button with percentage)
-3. **`<ContextContent>`** - Hover card content container
-4. **`<ContextContentHeader>`** - Header section with progress visualization
-5. **`<ContextContentBody>`** - Body section for usage breakdowns
-6. **`<ContextContentFooter>`** - Footer section for total cost
-7. **Usage Components** - Individual token usage displays (Input, Output, Reasoning, Cache)
-## Token Formatting
-The component uses `Intl.NumberFormat` with compact notation for automatic formatting:
-- Under 1,000: Shows exact count (e.g., "842")
-- 1,000+: Shows with K suffix (e.g., "32K")
-- 1,000,000+: Shows with M suffix (e.g., "1.5M")
-- 1,000,000,000+: Shows with B suffix (e.g., "2.1B")
-## Cost Calculation
-When a `modelId` is provided, the component automatically calculates costs using the `tokenlens` library:
-- **Input tokens**: Cost based on model's input pricing
-- **Output tokens**: Cost based on model's output pricing
-- **Reasoning tokens**: Special pricing for reasoning-capable models
-- **Cached tokens**: Reduced pricing for cached input tokens
-- **Total cost**: Sum of all token type costs
-Costs are formatted using `Intl.NumberFormat` with USD currency.
-## Styling
-The component uses Tailwind CSS classes and follows your design system:
-- Progress indicator uses `currentColor` for theme adaptation
-- Hover card has customizable width and padding
-- Footer has a secondary background for visual separation
-- All text sizes use the `text-xs` class for consistency
-- Muted foreground colors for secondary information

package/templates/next/.claude/skills/ai-elements/references/controls.md DELETED Viewed

@@ -1,32 +0,0 @@
-# Controls
-A styled controls component for React Flow-based canvases with zoom and fit view functionality.
-The `Controls` component provides interactive zoom and fit view controls for React Flow canvases. It includes a modern, themed design with backdrop blur and card styling.
-## Installation
-```bash
-npx ai-elements@latest add controls
-```
-## Features
-- Zoom in/out controls
-- Fit view button to center and scale content
-- Rounded pill design with backdrop blur
-- Theme-aware card background
-- Subtle drop shadow for depth
-- Full TypeScript support
-- Compatible with all React Flow control features
-## Props
-### `<Controls />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Additional CSS classes to apply to the controls. |
-| `...props` | `ComponentProps<typeof Controls>` | - | Any other props from @xyflow/react Controls component (showZoom, showFitView, showInteractive, position, etc.). |

package/templates/next/.claude/skills/ai-elements/references/conversation.md DELETED Viewed

@@ -1,224 +0,0 @@
-# Conversation
-Wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.
-The `Conversation` component wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.
-<Preview path="conversation" className="p-0" />
-## Installation
-```bash
-npx ai-elements@latest add conversation
-```
-## Usage with AI SDK
-Build a simple conversational UI with `Conversation` and [`PromptInput`](/components/prompt-input):
-Add the following component to your frontend:
-```tsx title="app/page.tsx"
-"use client";
-import {
-  Conversation,
-  ConversationContent,
-  ConversationDownload,
-  ConversationEmptyState,
-  ConversationScrollButton,
-} from "@/components/ai-elements/conversation";
-import {
-  Message,
-  MessageContent,
-  MessageResponse,
-} from "@/components/ai-elements/message";
-import {
-  PromptInput,
-  type PromptInputMessage,
-  PromptInputTextarea,
-  PromptInputSubmit,
-} from "@/components/ai-elements/prompt-input";
-import { MessageSquare } from "lucide-react";
-import { useState } from "react";
-import { useChat } from "@ai-sdk/react";
-const ConversationDemo = () => {
-  const [input, setInput] = useState("");
-  const { messages, sendMessage, status } = useChat();
-  const handleSubmit = (message: PromptInputMessage) => {
-    if (message.text.trim()) {
-      sendMessage({ text: message.text });
-      setInput("");
-    }
-  };
-  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">
-        <Conversation>
-          <ConversationContent>
-            {messages.length === 0 ? (
-              <ConversationEmptyState
-                icon={<MessageSquare className="size-12" />}
-                title="Start a conversation"
-                description="Type a message below to begin chatting"
-              />
-            ) : (
-              messages.map((message) => (
-                <Message from={message.role} key={message.id}>
-                  <MessageContent>
-                    {message.parts.map((part, i) => {
-                      switch (part.type) {
-                        case "text": // we don't use any reasoning or tool calls in this example
-                          return (
-                            <MessageResponse key={`${message.id}-${i}`}>
-                              {part.text}
-                            </MessageResponse>
-                          );
-                        default:
-                          return null;
-                      }
-                    })}
-                  </MessageContent>
-                </Message>
-              ))
-            )}
-          </ConversationContent>
-          <ConversationDownload messages={messages} />
-          <ConversationScrollButton />
-        </Conversation>
-        <PromptInput
-          onSubmit={handleSubmit}
-          className="mt-4 w-full max-w-2xl mx-auto relative"
-        >
-          <PromptInputTextarea
-            value={input}
-            placeholder="Say something..."
-            onChange={(e) => setInput(e.currentTarget.value)}
-            className="pr-12"
-          />
-          <PromptInputSubmit
-            status={status === "streaming" ? "streaming" : "ready"}
-            disabled={!input.trim()}
-            className="absolute bottom-1 right-1"
-          />
-        </PromptInput>
-      </div>
-    </div>
-  );
-};
-export default ConversationDemo;
-```
-Add the following route to your backend:
-```tsx title="api/chat/route.ts"
-import { streamText, UIMessage, convertToModelMessages } from "ai";
-// 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),
-  });
-  return result.toUIMessageStreamResponse();
-}
-```
-## Features
-- Automatic scrolling to the bottom when new messages are added
-- Smooth scrolling behavior with configurable animation
-- Scroll button that appears when not at the bottom
-- Download conversation as Markdown
-- Responsive design with customizable padding and spacing
-- Flexible content layout with consistent message spacing
-- Accessible with proper ARIA roles for screen readers
-- Customizable styling through className prop
-- Support for any number of child message components
-## Props
-### `<Conversation />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `contextRef` | `React.Ref<StickToBottomContext>` | - | Optional ref to access the StickToBottom context object. |
-| `instance` | `StickToBottomInstance` | - | Optional instance for controlling the StickToBottom component. |
-| `children` | `((context: StickToBottomContext) => ReactNode) | ReactNode` | - | Render prop or ReactNode for custom rendering with context. |
-| `...props` | `Omit<React.HTMLAttributes<HTMLDivElement>, ` | - | Any other props are spread to the root div. |
-### `<ConversationContent />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `((context: StickToBottomContext) => ReactNode) | ReactNode` | - | Render prop or ReactNode for custom rendering with context. |
-| `...props` | `Omit<React.HTMLAttributes<HTMLDivElement>, ` | - | Any other props are spread to the root div. |
-### `<ConversationEmptyState />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | - | The title text to display. |
-| `description` | `string` | - | The description text to display. |
-| `icon` | `React.ReactNode` | - | Optional icon to display above the text. |
-| `children` | `React.ReactNode` | - | Optional additional content to render below the text. |
-| `...props` | `ComponentProps<` | - | Any other props are spread to the root div. |
-### `<ConversationScrollButton />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `ComponentProps<typeof Button>` | - | Any other props are spread to the underlying shadcn/ui Button component. |
-### `<ConversationDownload />`
-A button that downloads the conversation as a Markdown file.
-```tsx
-import { ConversationDownload } from "@/components/ai-elements/conversation";
-<Conversation>
-  <ConversationContent>
-    {messages.map(...)}
-  </ConversationContent>
-  <ConversationDownload messages={messages} />
-  <ConversationScrollButton />
-</Conversation>
-```
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `messages` | `UIMessage[]` | Required | Array of messages to include in the download. |
-| `filename` | `string` | - | The filename for the downloaded file. |
-| `formatMessage` | `(message: UIMessage, index: number) => string` | - | Custom function to format each message in the output. |
-| `...props` | `Omit<ComponentProps<typeof Button>, ` | - | Any other props are spread to the underlying shadcn/ui Button component. |
-### `messagesToMarkdown`
-A utility function to convert messages to Markdown format. Useful for custom download implementations.
-```tsx
-import { messagesToMarkdown } from "@/components/ai-elements/conversation";
-const markdown = messagesToMarkdown(messages);
-// With custom formatter
-const customMarkdown = messagesToMarkdown(
-  messages,
-  (msg, i) =>
-    `[${msg.role}]: ${msg.parts
-      .filter((p) => p.type === "text")
-      .map((p) => p.text)
-      .join("")}`
-);
-```