@goldencomm/create-baseline 0.0.1

package/templates/next/.claude/skills/ai-elements/references/checkpoint.md

@@ -0,0 +1,183 @@
+# Checkpoint
+
+A simple component for marking conversation history points and restoring the chat to a previous state.
+
+The `Checkpoint` component provides a way to mark specific points in a conversation history and restore the chat to that state. Inspired by VSCode's Copilot checkpoint feature, it allows users to revert to an earlier conversation state while maintaining a clear visual separation between different conversation segments.
+
+See `scripts/checkpoint.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add checkpoint
+```
+
+## Features
+
+- Simple flex layout with icon, trigger, and separator
+- Visual separator line for clear conversation breaks
+- Clickable restore button for reverting to checkpoint
+- Customizable icon (defaults to BookmarkIcon)
+- Keyboard accessible with proper ARIA labels
+- Responsive design that adapts to different screen sizes
+- Seamless light/dark theme integration
+
+## Usage with AI SDK
+
+Build a chat interface with conversation checkpoints that allow users to restore to previous states.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useState, Fragment } from "react";
+import { useChat } from "@ai-sdk/react";
+import {
+  Checkpoint,
+  CheckpointIcon,
+  CheckpointTrigger,
+} from "@/components/ai-elements/checkpoint";
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "@/components/ai-elements/message";
+import {
+  Conversation,
+  ConversationContent,
+} from "@/components/ai-elements/conversation";
+
+type CheckpointType = {
+  id: string;
+  messageIndex: number;
+  timestamp: Date;
+  messageCount: number;
+};
+
+const CheckpointDemo = () => {
+  const { messages, setMessages } = useChat();
+  const [checkpoints, setCheckpoints] = useState<CheckpointType[]>([]);
+
+  const createCheckpoint = (messageIndex: number) => {
+    const checkpoint: CheckpointType = {
+      id: nanoid(),
+      messageIndex,
+      timestamp: new Date(),
+      messageCount: messageIndex + 1,
+    };
+    setCheckpoints([...checkpoints, checkpoint]);
+  };
+
+  const restoreToCheckpoint = (messageIndex: number) => {
+    // Restore messages to checkpoint state
+    setMessages(messages.slice(0, messageIndex + 1));
+    // Remove checkpoints after this point
+    setCheckpoints(checkpoints.filter((cp) => cp.messageIndex <= messageIndex));
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <Conversation>
+        <ConversationContent>
+          {messages.map((message, index) => {
+            const checkpoint = checkpoints.find(
+              (cp) => cp.messageIndex === index
+            );
+
+            return (
+              <Fragment key={message.id}>
+                <Message from={message.role}>
+                  <MessageContent>
+                    <MessageResponse>{message.content}</MessageResponse>
+                  </MessageContent>
+                </Message>
+                {checkpoint && (
+                  <Checkpoint>
+                    <CheckpointIcon />
+                    <CheckpointTrigger
+                      onClick={() =>
+                        restoreToCheckpoint(checkpoint.messageIndex)
+                      }
+                    >
+                      Restore checkpoint
+                    </CheckpointTrigger>
+                  </Checkpoint>
+                )}
+              </Fragment>
+            );
+          })}
+        </ConversationContent>
+      </Conversation>
+    </div>
+  );
+};
+
+export default CheckpointDemo;
+```
+
+## Use Cases
+
+### Manual Checkpoints
+
+Allow users to manually create checkpoints at important conversation points:
+
+```tsx
+<Button onClick={() => createCheckpoint(messages.length - 1)}>
+  Create Checkpoint
+</Button>
+```
+
+### Automatic Checkpoints
+
+Create checkpoints automatically after significant conversation milestones:
+
+```tsx
+useEffect(() => {
+  // Create checkpoint every 5 messages
+  if (messages.length > 0 && messages.length % 5 === 0) {
+    createCheckpoint(messages.length - 1);
+  }
+}, [messages.length]);
+```
+
+### Branching Conversations
+
+Use checkpoints to enable conversation branching where users can explore different conversation paths:
+
+```tsx
+const restoreAndBranch = (messageIndex: number) => {
+  // Save current branch
+  const currentBranch = messages.slice(messageIndex + 1);
+  saveBranch(currentBranch);
+
+  // Restore to checkpoint
+  restoreToCheckpoint(messageIndex);
+};
+```
+
+## Props
+
+### `<Checkpoint />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The checkpoint icon and trigger components. Automatically includes a Separator at the end. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the root div. |
+
+### `<CheckpointIcon />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Custom icon content. If not provided, defaults to a BookmarkIcon from lucide-react. |
+| `...props` | `LucideProps` | - | Any other props are spread to the BookmarkIcon component. |
+
+### `<CheckpointTrigger />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The text or content to display in the trigger button. |
+| `tooltip` | `string` | - | Optional tooltip text shown on hover. |
+| `variant` | `string` | - | The button variant style. |
+| `size` | `string` | - | The button size. |
+| `...props` | `React.ComponentProps<typeof Button>` | - | Any other props are spread to the underlying shadcn/ui Button component. |

package/templates/next/.claude/skills/ai-elements/references/code-block.md

@@ -0,0 +1,170 @@
+# Code Block
+
+Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
+
+The `CodeBlock` component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks. It's fully composable, allowing you to customize the header, actions, and content.
+
+See `scripts/code-block.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add code-block
+```
+
+## Usage
+
+The CodeBlock is fully composable. Here's a basic example:
+
+```tsx
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from "@/components/ai-elements/code-block";
+import { FileIcon } from "lucide-react";
+
+export const Example = () => (
+  <CodeBlock code={code} language="typescript">
+    <CodeBlockHeader>
+      <CodeBlockTitle>
+        <FileIcon size={14} />
+        <CodeBlockFilename>example.ts</CodeBlockFilename>
+      </CodeBlockTitle>
+      <CodeBlockActions>
+        <CodeBlockCopyButton />
+      </CodeBlockActions>
+    </CodeBlockHeader>
+  </CodeBlock>
+);
+```
+
+## Features
+
+- Syntax highlighting with Shiki
+- Line numbers (optional)
+- Copy to clipboard functionality
+- Automatic light/dark theme switching via CSS variables
+- Language selector for multi-language examples
+- Fully composable architecture
+- Accessible design
+
+## Examples
+
+### Dark Mode
+
+To use the `CodeBlock` component in dark mode, wrap it in a `div` with the `dark` class.
+
+See `scripts/code-block-dark.tsx` for this example.
+
+### Language Selector
+
+Add a language selector to switch between different code implementations:
+
+See `scripts/code-block.tsx` for this example.
+
+## Props
+
+### `<CodeBlock />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `code` | `string` | - | The code content to display. |
+| `language` | `BundledLanguage` | - | The programming language for syntax highlighting. |
+| `showLineNumbers` | `boolean` | `false` | Whether to show line numbers. |
+| `children` | `React.ReactNode` | - | Child elements like CodeBlockHeader. |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockHeader />`
+
+Container for the header row. Uses flexbox with `justify-between`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Header content (CodeBlockTitle, CodeBlockActions, etc.). |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockTitle />`
+
+Left-aligned container for icon and filename. Uses flexbox with `gap-2`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Title content (icon, CodeBlockFilename, etc.). |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockFilename />`
+
+Displays the filename in monospace font.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The filename to display. |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockActions />`
+
+Right-aligned container for action buttons. Uses flexbox with `gap-2`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Action buttons (CodeBlockCopyButton, CodeBlockLanguageSelector, etc.). |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockCopyButton />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onCopy` | `() => void` | - | Callback fired after a successful copy. |
+| `onError` | `(error: Error) => void` | - | Callback fired if copying fails. |
+| `timeout` | `number` | `2000` | How long to show the copied state (ms). |
+| `children` | `React.ReactNode` | - | Custom content for the button. Defaults to copy/check icons. |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockLanguageSelector />`
+
+Wrapper for the language selector. Extends shadcn/ui Select.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | The currently selected language. |
+| `onValueChange` | `(value: string) => void` | - | Callback when the language changes. |
+| `children` | `React.ReactNode` | - | Selector components (Trigger, Content, Items). |
+
+### `<CodeBlockLanguageSelectorTrigger />`
+
+Trigger button for the language selector dropdown. Pre-styled for code block header.
+
+### `<CodeBlockLanguageSelectorValue />`
+
+Displays the selected language value.
+
+### `<CodeBlockLanguageSelectorContent />`
+
+Dropdown content container. Defaults to `align="end"`.
+
+### `<CodeBlockLanguageSelectorItem />`
+
+Individual language option in the dropdown.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | The language value. |
+| `children` | `React.ReactNode` | - | The display label. |
+
+### `<CodeBlockContainer />`
+
+Low-level container component with performance optimizations (`contentVisibility`). Used internally by CodeBlock.
+
+### `<CodeBlockContent />`
+
+Low-level component that handles syntax highlighting. Used internally by CodeBlock, but can be used directly for custom layouts.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `code` | `string` | - | The code content to display. |
+| `language` | `BundledLanguage` | - | The programming language for syntax highlighting. |
+| `showLineNumbers` | `boolean` | `false` | Whether to show line numbers. |

package/templates/next/.claude/skills/ai-elements/references/commit.md

@@ -0,0 +1,177 @@
+# Commit
+
+Display commit information with hash, message, author, and file changes.
+
+The `Commit` component displays commit details including hash, message, author, timestamp, and changed files.
+
+See `scripts/commit.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add commit
+```
+
+## Features
+
+- Commit hash display with copy button
+- Author avatar with initials
+- Relative timestamp formatting
+- Collapsible file changes list
+- Color-coded file status (added/modified/deleted/renamed)
+- Line additions/deletions count
+
+## File Status
+
+| Status     | Label | Color  |
+| ---------- | ----- | ------ |
+| `added`    | A     | Green  |
+| `modified` | M     | Yellow |
+| `deleted`  | D     | Red    |
+| `renamed`  | R     | Blue   |
+
+## Props
+
+### `<Commit />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof Collapsible>` | - | Spread to the Collapsible component. |
+
+### `<CommitHeader />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | - | Spread to the CollapsibleTrigger component. |
+
+### `<CommitAuthor />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitAuthorAvatar />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initials` | `string` | Required | Author initials to display. |
+| `...props` | `React.ComponentProps<typeof Avatar>` | - | Spread to the Avatar component. |
+
+### `<CommitInfo />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitMessage />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitMetadata />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitHash />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitSeparator />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Custom separator content. |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitTimestamp />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `date` | `Date` | Required | Commit date. |
+| `children` | `React.ReactNode` | - | Custom timestamp content. Defaults to relative time. |
+| `...props` | `React.HTMLAttributes<HTMLTimeElement>` | - | Spread to the time element. |
+
+### `<CommitActions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitCopyButton />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `hash` | `string` | Required | Commit hash 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. |
+
+### `<CommitContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | - | Spread to the CollapsibleContent component. |
+
+### `<CommitFiles />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitFile />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the row div. |
+
+### `<CommitFileInfo />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitFileStatus />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `status` | `unknown` | Required | File change status. |
+| `children` | `React.ReactNode` | - | Custom status label. |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitFileIcon />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof FileIcon>` | - | Spread to the FileIcon component. |
+
+### `<CommitFilePath />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitFileChanges />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitFileAdditions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `count` | `number` | Required | Number of lines added. |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitFileDeletions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `count` | `number` | Required | Number of lines deleted. |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |