@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/next/.claude/skills/ai-elements/scripts/queue.tsx

@@ -1,295 +0,0 @@
-"use client";
-
-import type { QueueMessage, QueueTodo } from "@/components/ai-elements/queue";
-import {
-  Queue,
-  QueueItem,
-  QueueItemAction,
-  QueueItemActions,
-  QueueItemAttachment,
-  QueueItemContent,
-  QueueItemDescription,
-  QueueItemFile,
-  QueueItemImage,
-  QueueItemIndicator,
-  QueueList,
-  QueueSection,
-  QueueSectionContent,
-  QueueSectionLabel,
-  QueueSectionTrigger,
-} from "@/components/ai-elements/queue";
-import { ArrowUp, Trash2 } from "lucide-react";
-import { memo, useCallback, useState } from "react";
-
-const sampleMessages: QueueMessage[] = [
-  {
-    id: "msg-1",
-    parts: [{ text: "How do I set up the project?", type: "text" }],
-  },
-  {
-    id: "msg-2",
-    parts: [{ text: "What is the roadmap for Q4?", type: "text" }],
-  },
-  {
-    id: "msg-3",
-    parts: [
-      { text: "Update the default logo to this png.", type: "text" },
-      {
-        filename: "setup-guide.png",
-        mediaType: "image/png",
-        type: "file",
-        url: "https://github.com/haydenbleasel.png",
-      },
-    ],
-  },
-  {
-    id: "msg-4",
-    parts: [{ text: "Please generate a changelog.", type: "text" }],
-  },
-  {
-    id: "msg-5",
-    parts: [{ text: "Add dark mode support.", type: "text" }],
-  },
-  {
-    id: "msg-6",
-    parts: [{ text: "Optimize database queries.", type: "text" }],
-  },
-  {
-    id: "msg-7",
-    parts: [{ text: "Set up CI/CD pipeline.", type: "text" }],
-  },
-];
-
-const sampleTodos: QueueTodo[] = [
-  {
-    description: "Complete the README and API docs",
-    id: "todo-1",
-    status: "completed",
-    title: "Write project documentation",
-  },
-  {
-    id: "todo-2",
-    status: "pending",
-    title: "Implement authentication",
-  },
-  {
-    description: "Resolve crash on settings page",
-    id: "todo-3",
-    status: "pending",
-    title: "Fix bug #42",
-  },
-  {
-    description: "Unify queue and todo state management",
-    id: "todo-4",
-    status: "pending",
-    title: "Refactor queue logic",
-  },
-  {
-    description: "Increase test coverage for hooks",
-    id: "todo-5",
-    status: "pending",
-    title: "Add unit tests",
-  },
-];
-
-interface MessageActionsProps {
-  messageId: string;
-  onRemove: (e: React.MouseEvent, id: string) => void;
-  onSend: (e: React.MouseEvent, id: string) => void;
-}
-
-const MessageActions = memo(
-  ({ messageId, onRemove, onSend }: MessageActionsProps) => {
-    const handleRemove = useCallback(
-      (e: React.MouseEvent) => onRemove(e, messageId),
-      [onRemove, messageId]
-    );
-    const handleSend = useCallback(
-      (e: React.MouseEvent) => onSend(e, messageId),
-      [onSend, messageId]
-    );
-    return (
-      <QueueItemActions>
-        <QueueItemAction
-          aria-label="Remove from queue"
-          onClick={handleRemove}
-          title="Remove from queue"
-        >
-          <Trash2 size={12} />
-        </QueueItemAction>
-        <QueueItemAction aria-label="Send now" onClick={handleSend}>
-          <ArrowUp size={14} />
-        </QueueItemAction>
-      </QueueItemActions>
-    );
-  }
-);
-
-MessageActions.displayName = "MessageActions";
-
-interface TodoItemProps {
-  todo: QueueTodo;
-  onRemove: (id: string) => void;
-}
-
-const TodoItem = memo(({ todo, onRemove }: TodoItemProps) => {
-  const isCompleted = todo.status === "completed";
-  const handleRemove = useCallback(
-    () => onRemove(todo.id),
-    [onRemove, todo.id]
-  );
-
-  return (
-    <QueueItem key={todo.id}>
-      <div className="flex items-center gap-2">
-        <QueueItemIndicator completed={isCompleted} />
-        <QueueItemContent completed={isCompleted}>
-          {todo.title}
-        </QueueItemContent>
-        <QueueItemActions>
-          <QueueItemAction aria-label="Remove todo" onClick={handleRemove}>
-            <Trash2 size={12} />
-          </QueueItemAction>
-        </QueueItemActions>
-      </div>
-      {todo.description && (
-        <QueueItemDescription completed={isCompleted}>
-          {todo.description}
-        </QueueItemDescription>
-      )}
-    </QueueItem>
-  );
-});
-
-TodoItem.displayName = "TodoItem";
-
-const Example = () => {
-  const [messages, setMessages] = useState(sampleMessages);
-  const [todos, setTodos] = useState(sampleTodos);
-
-  const handleRemoveMessage = useCallback((id: string) => {
-    setMessages((prev) => prev.filter((msg) => msg.id !== id));
-  }, []);
-
-  const handleRemoveTodo = useCallback((id: string) => {
-    setTodos((prev) => prev.filter((todo) => todo.id !== id));
-  }, []);
-
-  const handleSendNow = useCallback((id: string) => {
-    console.log("Send now:", id);
-    setMessages((prev) => prev.filter((msg) => msg.id !== id));
-  }, []);
-
-  const handleMessageRemove = useCallback(
-    (e: React.MouseEvent, id: string) => {
-      e.preventDefault();
-      e.stopPropagation();
-      handleRemoveMessage(id);
-    },
-    [handleRemoveMessage]
-  );
-
-  const handleMessageSend = useCallback(
-    (e: React.MouseEvent, id: string) => {
-      e.preventDefault();
-      e.stopPropagation();
-      handleSendNow(id);
-    },
-    [handleSendNow]
-  );
-
-  if (messages.length === 0 && todos.length === 0) {
-    return null;
-  }
-
-  return (
-    <Queue>
-      {messages.length > 0 && (
-        <QueueSection>
-          <QueueSectionTrigger>
-            <QueueSectionLabel count={messages.length} label="Queued" />
-          </QueueSectionTrigger>
-          <QueueSectionContent>
-            <QueueList>
-              {messages.map((message) => {
-                const summary = (() => {
-                  const textParts = message.parts.filter(
-                    (p) => p.type === "text"
-                  );
-                  const text = textParts
-                    .map((p) => p.text)
-                    .join(" ")
-                    .trim();
-                  return text || "(queued message)";
-                })();
-
-                const hasFiles = message.parts.some(
-                  (p) => p.type === "file" && p.url
-                );
-
-                return (
-                  <QueueItem key={message.id}>
-                    <div className="flex items-center gap-2">
-                      <QueueItemIndicator />
-                      <QueueItemContent>{summary}</QueueItemContent>
-                      <MessageActions
-                        messageId={message.id}
-                        onRemove={handleMessageRemove}
-                        onSend={handleMessageSend}
-                      />
-                    </div>
-                    {hasFiles && (
-                      <QueueItemAttachment>
-                        {message.parts
-                          .filter((p) => p.type === "file" && p.url)
-                          .map((file) => {
-                            if (
-                              file.mediaType?.startsWith("image/") &&
-                              file.url
-                            ) {
-                              return (
-                                <QueueItemImage
-                                  alt={file.filename || "attachment"}
-                                  key={file.url}
-                                  src={file.url}
-                                />
-                              );
-                            }
-                            return (
-                              <QueueItemFile key={file.url}>
-                                {file.filename || "file"}
-                              </QueueItemFile>
-                            );
-                          })}
-                      </QueueItemAttachment>
-                    )}
-                  </QueueItem>
-                );
-              })}
-            </QueueList>
-          </QueueSectionContent>
-        </QueueSection>
-      )}
-      {todos.length > 0 && (
-        <QueueSection>
-          <QueueSectionTrigger>
-            <QueueSectionLabel count={todos.length} label="Todo" />
-          </QueueSectionTrigger>
-          <QueueSectionContent>
-            <QueueList>
-              {todos.map((todo) => (
-                <TodoItem
-                  key={todo.id}
-                  onRemove={handleRemoveTodo}
-                  todo={todo}
-                />
-              ))}
-            </QueueList>
-          </QueueSectionContent>
-        </QueueSection>
-      )}
-    </Queue>
-  );
-};
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/reasoning.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import {
-  Reasoning,
-  ReasoningContent,
-  ReasoningTrigger,
-} from "@/components/ai-elements/reasoning";
-import { useCallback, useEffect, useState } from "react";
-
-const reasoningSteps = [
-  "Let me think about this problem step by step.",
-  "\n\nFirst, I need to understand what the user is asking for.",
-  "\n\nThey want a reasoning component that opens automatically when streaming begins and closes when streaming finishes. The component should be composable and follow existing patterns in the codebase.",
-  "\n\nThis seems like a collapsible component with state management would be the right approach.",
-].join("");
-
-const Example = () => {
-  const [content, setContent] = useState("");
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [currentTokenIndex, setCurrentTokenIndex] = useState(0);
-  const [tokens, setTokens] = useState<string[]>([]);
-
-  // Function to chunk text into fake tokens of 3-4 characters
-  const chunkIntoTokens = useCallback((text: string): string[] => {
-    const chunks: string[] = [];
-    let i = 0;
-    while (i < text.length) {
-      // Random size between 3-4
-      const chunkSize = Math.floor(Math.random() * 2) + 3;
-      chunks.push(text.slice(i, i + chunkSize));
-      i += chunkSize;
-    }
-    return chunks;
-  }, []);
-
-  useEffect(() => {
-    const tokenizedSteps = chunkIntoTokens(reasoningSteps);
-    setTokens(tokenizedSteps);
-    setContent("");
-    setCurrentTokenIndex(0);
-    setIsStreaming(true);
-  }, [chunkIntoTokens]);
-
-  useEffect(() => {
-    if (!isStreaming || currentTokenIndex >= tokens.length) {
-      if (isStreaming) {
-        setIsStreaming(false);
-      }
-      return;
-    }
-
-    // Faster interval since we're streaming smaller chunks
-    const timer = setTimeout(() => {
-      setContent((prev) => prev + tokens[currentTokenIndex]);
-      setCurrentTokenIndex((prev) => prev + 1);
-    }, 25);
-
-    return () => clearTimeout(timer);
-  }, [isStreaming, currentTokenIndex, tokens]);
-
-  return (
-    <div className="w-full p-4" style={{ height: "300px" }}>
-      <Reasoning className="w-full" isStreaming={isStreaming}>
-        <ReasoningTrigger />
-        <ReasoningContent>{content}</ReasoningContent>
-      </Reasoning>
-    </div>
-  );
-};
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/sandbox.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { CodeBlock, CodeBlockCopyButton } from "@/components/ai-elements/code-block";
-import {
-  Sandbox,
-  SandboxContent,
-  SandboxHeader,
-  SandboxTabContent,
-  SandboxTabs,
-  SandboxTabsBar,
-  SandboxTabsList,
-  SandboxTabsTrigger,
-} from "@/components/ai-elements/sandbox";
-import {
-  StackTrace,
-  StackTraceActions,
-  StackTraceContent,
-  StackTraceCopyButton,
-  StackTraceError,
-  StackTraceErrorMessage,
-  StackTraceErrorType,
-  StackTraceExpandButton,
-  StackTraceFrames,
-  StackTraceHeader,
-} from "@/components/ai-elements/stack-trace";
-import { Button } from "@/components/ui/button";
-import type { ToolUIPart } from "ai";
-import { memo, useCallback, useState } from "react";
-
-const code = `import math
-
-def calculate_primes(limit):
-    """Find all prime numbers up to a given limit using Sieve of Eratosthenes."""
-    sieve = [True] * (limit + 1)
-    sieve[0] = sieve[1] = False
-    
-    for i in range(2, int(math.sqrt(limit)) + 1):
-        if sieve[i]:
-            for j in range(i * i, limit + 1, i):
-                sieve[j] = False
-    
-    return [i for i, is_prime in enumerate(sieve) if is_prime]
-
-if __name__ == "__main__":
-    primes = calculate_primes(50)
-    print(f"Found {len(primes)} prime numbers up to 50:")
-    print(primes)`;
-
-const outputs: Record<ToolUIPart["state"], string | undefined> = {
-  "input-available": undefined,
-  "input-streaming": undefined,
-  "output-available": `Found 15 prime numbers up to 50:
-[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47]`,
-  "output-error": `TypeError: Cannot read properties of undefined (reading 'map')
-    at calculatePrimes (/src/utils/primes.ts:15:23)
-    at runCalculation (/src/components/Calculator.tsx:42:12)
-    at onClick (/src/components/Button.tsx:18:5)
-    at HTMLButtonElement.dispatch (node_modules/react-dom/cjs/react-dom.development.js:3456:9)
-    at node_modules/react-dom/cjs/react-dom.development.js:4245:12`,
-};
-
-const states: ToolUIPart["state"][] = [
-  "input-streaming",
-  "input-available",
-  "output-available",
-  "output-error",
-];
-
-interface StateButtonProps {
-  s: ToolUIPart["state"];
-  currentState: ToolUIPart["state"];
-  onStateChange: (state: ToolUIPart["state"]) => void;
-}
-
-const StateButton = memo(
-  ({ s, currentState, onStateChange }: StateButtonProps) => {
-    const handleClick = useCallback(() => onStateChange(s), [onStateChange, s]);
-    return (
-      <Button
-        key={s}
-        onClick={handleClick}
-        size="sm"
-        variant={currentState === s ? "default" : "outline"}
-      >
-        {s}
-      </Button>
-    );
-  }
-);
-
-StateButton.displayName = "StateButton";
-
-const Example = () => {
-  const [state, setState] = useState<ToolUIPart["state"]>("output-available");
-
-  const handleStateChange = useCallback((s: ToolUIPart["state"]) => {
-    setState(s);
-  }, []);
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap gap-2">
-        {states.map((s) => (
-          <StateButton
-            currentState={state}
-            key={s}
-            onStateChange={handleStateChange}
-            s={s}
-          />
-        ))}
-      </div>
-
-      <Sandbox>
-        <SandboxHeader state={state} title="primes.py" />
-        <SandboxContent>
-          <SandboxTabs defaultValue="code">
-            <SandboxTabsBar>
-              <SandboxTabsList>
-                <SandboxTabsTrigger value="code">Code</SandboxTabsTrigger>
-                <SandboxTabsTrigger value="output">Output</SandboxTabsTrigger>
-              </SandboxTabsList>
-            </SandboxTabsBar>
-            <SandboxTabContent value="code">
-              <CodeBlock
-                className="border-0"
-                code={
-                  state === "input-streaming" ? "# Generating code..." : code
-                }
-                language="python"
-              >
-                <CodeBlockCopyButton
-                  className="absolute top-2 right-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-                  size="sm"
-                />
-              </CodeBlock>
-            </SandboxTabContent>
-            <SandboxTabContent value="output">
-              {state === "output-error" ? (
-                <StackTrace
-                  className="rounded-none border-0"
-                  defaultOpen
-                  trace={outputs[state] ?? ""}
-                >
-                  <StackTraceHeader>
-                    <StackTraceError>
-                      <StackTraceErrorType />
-                      <StackTraceErrorMessage />
-                    </StackTraceError>
-                    <StackTraceActions>
-                      <StackTraceCopyButton />
-                      <StackTraceExpandButton />
-                    </StackTraceActions>
-                  </StackTraceHeader>
-                  <StackTraceContent>
-                    <StackTraceFrames />
-                  </StackTraceContent>
-                </StackTrace>
-              ) : (
-                <CodeBlock
-                  className="border-0"
-                  code={outputs[state] ?? ""}
-                  language="log"
-                >
-                  <CodeBlockCopyButton
-                    className="absolute top-2 right-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-                    size="sm"
-                  />
-                </CodeBlock>
-              )}
-            </SandboxTabContent>
-          </SandboxTabs>
-        </SandboxContent>
-      </Sandbox>
-    </div>
-  );
-};
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/schema-display-basic.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-import { SchemaDisplay } from "@/components/ai-elements/schema-display";
-
-const Example = () => (
-  <SchemaDisplay description="List all users" method="GET" path="/api/users" />
-);
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/schema-display-body.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import { SchemaDisplay } from "@/components/ai-elements/schema-display";
-
-const Example = () => (
-  <SchemaDisplay
-    method="POST"
-    path="/api/posts"
-    requestBody={[
-      { name: "title", required: true, type: "string" },
-      { name: "content", required: true, type: "string" },
-    ]}
-    responseBody={[
-      { name: "id", required: true, type: "string" },
-      { name: "createdAt", required: true, type: "string" },
-    ]}
-  />
-);
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/schema-display-nested.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { SchemaDisplay } from "@/components/ai-elements/schema-display";
-
-const Example = () => (
-  <SchemaDisplay
-    method="POST"
-    path="/api/posts"
-    requestBody={[
-      {
-        name: "author",
-        properties: [
-          { name: "id", type: "string" },
-          { name: "name", type: "string" },
-        ],
-        type: "object",
-      },
-      { name: "title", required: true, type: "string" },
-    ]}
-  />
-);
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/schema-display-params.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import { SchemaDisplay } from "@/components/ai-elements/schema-display";
-
-const Example = () => (
-  <SchemaDisplay
-    method="GET"
-    parameters={[
-      { location: "path", name: "userId", required: true, type: "string" },
-      { location: "query", name: "include", type: "string" },
-    ]}
-    path="/api/users/{userId}"
-  />
-);
-
-export default Example;