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/edge.md DELETED Viewed

@@ -1,52 +0,0 @@
-# Edge
-Customizable edge components for React Flow canvases with animated and temporary states.
-The `Edge` component provides two pre-styled edge types for React Flow canvases: `Temporary` for dashed temporary connections and `Animated` for connections with animated indicators.
-## Installation
-```bash
-npx ai-elements@latest add edge
-```
-## Features
-- Two distinct edge types: Temporary and Animated
-- Temporary edges use dashed lines with ring color
-- Animated edges include a moving circle indicator
-- Automatic handle position calculation
-- Smart offset calculation based on handle type and position
-- Uses Bezier curves for smooth, natural-looking connections
-- Fully compatible with React Flow's edge system
-- Type-safe implementation with TypeScript
-## Edge Types
-### `Edge.Temporary`
-A dashed edge style for temporary or preview connections. Uses a simple Bezier path with a dashed stroke pattern.
-### `Edge.Animated`
-A solid edge with an animated circle that moves along the path. The animation repeats indefinitely with a 2-second duration, providing visual feedback for active connections.
-## Props
-Both edge types accept standard React Flow `EdgeProps`:
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | - | Unique identifier for the edge. |
-| `source` | `string` | - | ID of the source node. |
-| `target` | `string` | - | ID of the target node. |
-| `sourceX` | `number` | - | X coordinate of the source handle (Temporary only). |
-| `sourceY` | `number` | - | Y coordinate of the source handle (Temporary only). |
-| `targetX` | `number` | - | X coordinate of the target handle (Temporary only). |
-| `targetY` | `number` | - | Y coordinate of the target handle (Temporary only). |
-| `sourcePosition` | `Position` | - | Position of the source handle (Left, Right, Top, Bottom). |
-| `targetPosition` | `Position` | - | Position of the target handle (Left, Right, Top, Bottom). |
-| `markerEnd` | `string` | - | SVG marker ID for the edge end (Animated only). |
-| `style` | `React.CSSProperties` | - | Custom styles for the edge (Animated only). |

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

@@ -1,102 +0,0 @@
-# Environment Variables
-Display environment variables with masking and copy functionality.
-The `EnvironmentVariables` component displays environment variables with value masking, visibility toggle, and copy functionality.
-See `scripts/environment-variables.tsx` for this example.
-## Installation
-```bash
-npx ai-elements@latest add environment-variables
-```
-## Features
-- Value masking by default
-- Toggle visibility switch
-- Copy individual values
-- Export format support (`export KEY="value"`)
-- Required badge indicator
-## Props
-### `<EnvironmentVariables />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `showValues` | `boolean` | - | Controlled visibility state. |
-| `defaultShowValues` | `boolean` | `false` | Default visibility state. |
-| `onShowValuesChange` | `(show: boolean) => void` | - | Callback when visibility changes. |
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
-### `<EnvironmentVariablesHeader />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the header div. |
-### `<EnvironmentVariablesTitle />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Custom title text. |
-| `...props` | `React.HTMLAttributes<HTMLHeadingElement>` | - | Spread to the h3 element. |
-### `<EnvironmentVariablesToggle />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof Switch>` | - | Spread to the Switch component. |
-### `<EnvironmentVariablesContent />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the content div. |
-### `<EnvironmentVariable />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | Required | Variable name. |
-| `value` | `string` | Required | Variable value. |
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the row div. |
-### `<EnvironmentVariableGroup />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the group div. |
-### `<EnvironmentVariableName />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Custom name content. Defaults to the name from context. |
-| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
-### `<EnvironmentVariableValue />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Custom value content. Defaults to the masked/unmasked value from context. |
-| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
-### `<EnvironmentVariableCopyButton />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `copyFormat` | `unknown` | - | Format to copy. |
-| `onCopy` | `() => void` | - | Callback after successful copy. |
-| `onError` | `(error: Error) => void` | - | Callback if copying fails. |
-| `timeout` | `number` | `2000` | Duration to show copied state (ms). |
-| `...props` | `React.ComponentProps<typeof Button>` | - | Spread to the Button component. |
-### `<EnvironmentVariableRequired />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Custom badge text. |
-| `...props` | `React.ComponentProps<typeof Badge>` | - | Spread to the Badge component. |

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

@@ -1,72 +0,0 @@
-# File Tree
-Display hierarchical file and folder structure with expand/collapse functionality.
-The `FileTree` component displays a hierarchical file system structure with expandable folders and file selection.
-See `scripts/file-tree.tsx` for this example.
-## Installation
-```bash
-npx ai-elements@latest add file-tree
-```
-## Features
-- Hierarchical folder structure
-- Expand/collapse folders
-- File selection with callback
-- Keyboard accessible
-- Customizable icons
-- Controlled and uncontrolled modes
-## Examples
-### Basic Usage
-See `scripts/file-tree-basic.tsx` for this example.
-### With Selection
-See `scripts/file-tree-selection.tsx` for this example.
-### Default Expanded
-See `scripts/file-tree-expanded.tsx` for this example.
-## Props
-### `<FileTree />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `expanded` | `Set<string>` | - | Controlled expanded paths. |
-| `defaultExpanded` | `Set<string>` | `new Set()` | Default expanded paths. |
-| `selectedPath` | `string` | - | Currently selected file/folder path. |
-| `onSelect` | `(path: string) => void` | - | Callback when a file/folder is selected. |
-| `onExpandedChange` | `(expanded: Set<string>) => void` | - | Callback when expanded paths change. |
-| `className` | `string` | - | Additional CSS classes. |
-### `<FileTreeFolder />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `path` | `string` | - | Unique folder path. |
-| `name` | `string` | - | Display name. |
-| `className` | `string` | - | Additional CSS classes. |
-### `<FileTreeFile />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `path` | `string` | - | Unique file path. |
-| `name` | `string` | - | Display name. |
-| `icon` | `ReactNode` | - | Custom file icon. |
-| `className` | `string` | - | Additional CSS classes. |
-### Subcomponents
-- `FileTreeIcon` - Icon wrapper
-- `FileTreeName` - Name text
-- `FileTreeActions` - Action buttons container (stops click propagation)

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

@@ -1,146 +0,0 @@
-# Image
-Displays AI-generated images from the AI SDK.
-The `Image` component displays AI-generated images from the AI SDK. It accepts a [`Experimental_GeneratedImage`](/docs/reference/ai-sdk-core/generate-image) object from the AI SDK's `generateImage` function and automatically renders it as an image.
-See `scripts/image.tsx` for this example.
-## Installation
-```bash
-npx ai-elements@latest add image
-```
-## Usage with AI SDK
-Build a simple app allowing a user to generate an image given a prompt.
-Install the `@ai-sdk/openai` package:
-```package-install
-npm i @ai-sdk/openai
-```
-Add the following component to your frontend:
-```tsx title="app/page.tsx"
-"use client";
-import { Image } from "@/components/ai-elements/image";
-import {
-  PromptInput,
-  type PromptInputMessage,
-  PromptInputTextarea,
-  PromptInputSubmit,
-} from "@/components/ai-elements/prompt-input";
-import { useState } from "react";
-import { Spinner } from "@/components/ui/spinner";
-const ImageDemo = () => {
-  const [prompt, setPrompt] = useState("A futuristic cityscape at sunset");
-  const [imageData, setImageData] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const handleSubmit = async (message: PromptInputMessage) => {
-    if (!message.text.trim()) return;
-    setPrompt("");
-    setIsLoading(true);
-    try {
-      const response = await fetch("/api/image", {
-        method: "POST",
-        body: JSON.stringify({ prompt: message.text.trim() }),
-      });
-      const data = await response.json();
-      setImageData(data);
-    } catch (error) {
-      console.error("Error generating image:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  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">
-        <div className="flex-1 overflow-y-auto p-4">
-          {imageData && (
-            <div className="flex justify-center">
-              <Image
-                {...imageData}
-                alt="Generated image"
-                className="h-[300px] aspect-square border rounded-lg"
-              />
-            </div>
-          )}
-          {isLoading && <Spinner />}
-        </div>
-        <PromptInput
-          onSubmit={handleSubmit}
-          className="mt-4 w-full max-w-2xl mx-auto relative"
-        >
-          <PromptInputTextarea
-            value={prompt}
-            placeholder="Describe the image you want to generate..."
-            onChange={(e) => setPrompt(e.currentTarget.value)}
-            className="pr-12"
-          />
-          <PromptInputSubmit
-            status={isLoading ? "submitted" : "ready"}
-            disabled={!prompt.trim()}
-            className="absolute bottom-1 right-1"
-          />
-        </PromptInput>
-      </div>
-    </div>
-  );
-};
-export default ImageDemo;
-```
-Add the following route to your backend:
-```ts title="app/api/image/route.ts"
-import { openai } from "@ai-sdk/openai";
-import { experimental_generateImage } from "ai";
-export async function POST(req: Request) {
-  const { prompt }: { prompt: string } = await req.json();
-  const { image } = await experimental_generateImage({
-    model: openai.image("dall-e-3"),
-    prompt: prompt,
-    size: "1024x1024",
-  });
-  return Response.json({
-    base64: image.base64,
-    uint8Array: image.uint8Array,
-    mediaType: image.mediaType,
-  });
-}
-```
-## Features
-- Accepts `Experimental_GeneratedImage` objects directly from the AI SDK
-- Automatically creates proper data URLs from base64-encoded image data
-- Supports all standard HTML image attributes
-- Responsive by default with `max-w-full h-auto` styling
-- Customizable with additional CSS classes
-- Includes proper TypeScript types for AI SDK compatibility
-## Props
-### `<Image />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `alt` | `string` | - | Alternative text for the image. |
-| `className` | `string` | - | Additional CSS classes to apply to the image. |
-| `...props` | `Experimental_GeneratedImage` | - | The image data to display, as returned by the AI SDK. |

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

@@ -1,299 +0,0 @@
-# Inline Citation
-A hoverable citation component that displays source information and quotes inline with text, perfect for AI-generated content with references.
-The `InlineCitation` component provides a way to display citations inline with text content, similar to academic papers or research documents. It consists of a citation pill that shows detailed source information on hover, making it perfect for AI-generated content that needs to reference sources.
-See `scripts/inline-citation.tsx` for this example.
-## Installation
-```bash
-npx ai-elements@latest add inline-citation
-```
-## Usage with AI SDK
-Build citations for AI-generated content using [`experimental_generateObject`](/docs/reference/ai-sdk-ui/use-object).
-Add the following component to your frontend:
-```tsx title="app/page.tsx"
-"use client";
-import { experimental_useObject as useObject } from "@ai-sdk/react";
-import {
-  InlineCitation,
-  InlineCitationText,
-  InlineCitationCard,
-  InlineCitationCardTrigger,
-  InlineCitationCardBody,
-  InlineCitationCarousel,
-  InlineCitationCarouselContent,
-  InlineCitationCarouselItem,
-  InlineCitationCarouselHeader,
-  InlineCitationCarouselIndex,
-  InlineCitationCarouselPrev,
-  InlineCitationCarouselNext,
-  InlineCitationSource,
-  InlineCitationQuote,
-} from "@/components/ai-elements/inline-citation";
-import { Button } from "@/components/ui/button";
-import { citationSchema } from "@/app/api/citation/route";
-const CitationDemo = () => {
-  const { object, submit, isLoading } = useObject({
-    api: "/api/citation",
-    schema: citationSchema,
-  });
-  const handleSubmit = (topic: string) => {
-    submit({ prompt: topic });
-  };
-  return (
-    <div className="max-w-4xl mx-auto p-6 space-y-6">
-      <div className="flex gap-2 mb-6">
-        <Button
-          onClick={() => handleSubmit("artificial intelligence")}
-          disabled={isLoading}
-          variant="outline"
-        >
-          Generate AI Content
-        </Button>
-        <Button
-          onClick={() => handleSubmit("climate change")}
-          disabled={isLoading}
-          variant="outline"
-        >
-          Generate Climate Content
-        </Button>
-      </div>
-      {isLoading && !object && (
-        <div className="text-muted-foreground">
-          Generating content with citations...
-        </div>
-      )}
-      {object?.content && (
-        <div className="prose prose-sm max-w-none">
-          <p className="leading-relaxed">
-            {object.content.split(/(\[\d+\])/).map((part, index) => {
-              const citationMatch = part.match(/\[(\d+)\]/);
-              if (citationMatch) {
-                const citationNumber = citationMatch[1];
-                const citation = object.citations?.find(
-                  (c: any) => c.number === citationNumber
-                );
-                if (citation) {
-                  return (
-                    <InlineCitation key={index}>
-                      <InlineCitationCard>
-                        <InlineCitationCardTrigger sources={[citation.url]} />
-                        <InlineCitationCardBody>
-                          <InlineCitationCarousel>
-                            <InlineCitationCarouselHeader>
-                              <InlineCitationCarouselPrev />
-                              <InlineCitationCarouselNext />
-                              <InlineCitationCarouselIndex />
-                            </InlineCitationCarouselHeader>
-                            <InlineCitationCarouselContent>
-                              <InlineCitationCarouselItem>
-                                <InlineCitationSource
-                                  title={citation.title}
-                                  url={citation.url}
-                                  description={citation.description}
-                                />
-                                {citation.quote && (
-                                  <InlineCitationQuote>
-                                    {citation.quote}
-                                  </InlineCitationQuote>
-                                )}
-                              </InlineCitationCarouselItem>
-                            </InlineCitationCarouselContent>
-                          </InlineCitationCarousel>
-                        </InlineCitationCardBody>
-                      </InlineCitationCard>
-                    </InlineCitation>
-                  );
-                }
-              }
-              return part;
-            })}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};
-export default CitationDemo;
-```
-Add the following route to your backend:
-```ts title="app/api/citation/route.ts"
-import { streamObject } from "ai";
-import { z } from "zod";
-export const citationSchema = z.object({
-  content: z.string(),
-  citations: z.array(
-    z.object({
-      number: z.string(),
-      title: z.string(),
-      url: z.string(),
-      description: z.string().optional(),
-      quote: z.string().optional(),
-    })
-  ),
-});
-// Allow streaming responses up to 30 seconds
-export const maxDuration = 30;
-export async function POST(req: Request) {
-  const { prompt } = await req.json();
-  const result = streamObject({
-    model: "openai/gpt-4o",
-    schema: citationSchema,
-    prompt: `Generate a well-researched paragraph about ${prompt} with proper citations.
-    Include:
-    - A comprehensive paragraph with inline citations marked as [1], [2], etc.
-    - 2-3 citations with realistic source information
-    - Each citation should have a title, URL, and optional description/quote
-    - Make the content informative and the sources credible
-    Format citations as numbered references within the text.`,
-  });
-  return result.toTextStreamResponse();
-}
-```
-## Features
-- Hover interaction to reveal detailed citation information
-- **Carousel navigation** for multiple citations with prev/next controls
-- **Live index tracking** showing current slide position (e.g., "1/5")
-- Support for source titles, URLs, and descriptions
-- Optional quote blocks for relevant excerpts
-- Composable architecture for flexible citation formats
-- Accessible design with proper keyboard navigation
-- Seamless integration with AI-generated content
-- Clean visual design that doesn't disrupt reading flow
-- Smart badge display showing source hostname and count
-## Usage with AI SDK
-Currently, there is no official support for inline citations with Streamdown or the Response component. This is because:
-- There isn't any good markdown syntax for inline citations
-- Language models don't naturally respond with inline citation syntax
-- The AI SDK doesn't have built-in support for inline citations
-### Potential Approaches
-While these methods are hypothetical and not officially supported, there are two conceptual ways inline citations could work with Streamdown:
-1. **Footnote conversion**: GitHub Flavored Markdown (GFM) handles footnotes using `[^1]` syntax. You could hypothetically remove the default footnote rendering and convert footnotes to inline citations instead.
-2. **Custom HTML syntax**: You could add a system prompt instructing the model to use a special HTML syntax like `<citation />` and pass that as a custom component to Streamdown.
-These approaches require custom implementation and are not currently supported out of the box. We will investigate official support for this use case in the future.
-For now, the recommended approach is to use `experimental_useObject` (as shown in the usage example above) to generate structured citation data, then manually parse and render inline citations.
-## Props
-### `<InlineCitation />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root span element. |
-### `<InlineCitationText />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying span element. |
-### `<InlineCitationCard />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the HoverCard component. |
-### `<InlineCitationCardTrigger />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `sources` | `string[]` | - | Array of source URLs. The length determines the number displayed in the badge. |
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying button element. |
-### `<InlineCitationCardBody />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |
-### `<InlineCitationCarousel />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof Carousel>` | - | Any other props are spread to the underlying Carousel component. |
-### `<InlineCitationCarouselContent />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying CarouselContent component. |
-### `<InlineCitationCarouselItem />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |
-### `<InlineCitationCarouselHeader />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |
-### `<InlineCitationCarouselIndex />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. Children will override the default index display. |
-### `<InlineCitationCarouselPrev />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof CarouselPrevious>` | - | Any other props are spread to the underlying CarouselPrevious component. |
-### `<InlineCitationCarouselNext />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof CarouselNext>` | - | Any other props are spread to the underlying CarouselNext component. |
-### `<InlineCitationSource />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | - | The title of the source. |
-| `url` | `string` | - | The URL of the source. |
-| `description` | `string` | - | A brief description of the source. |
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |
-### `<InlineCitationQuote />`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying blockquote element. |