@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -1,104 +0,0 @@
-"use client";
-
-import {
-  JSXPreview,
-  JSXPreviewContent,
-  JSXPreviewError,
-} from "@/components/ai-elements/jsx-preview";
-import { Button } from "@/components/ui/button";
-import { useCallback, useEffect, useRef, useState } from "react";
-
-const handleError = (error: Error) => {
-  console.log("JSX Parse Error:", error);
-};
-
-const fullJsx = `<div className="rounded-lg border bg-card p-6 shadow-sm">
-  <div className="flex items-center gap-4 mb-4">
-    <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
-      <span className="text-primary text-xl font-bold">AI</span>
-    </div>
-    <div>
-      <h2 className="text-lg font-semibold">AI-Generated Component</h2>
-      <p className="text-sm text-muted-foreground">Rendered from JSX string</p>
-    </div>
-  </div>
-  <div className="space-y-3">
-    <p className="text-sm">This component was dynamically rendered from a JSX string. The JSXPreview component supports streaming mode, automatically closing unclosed tags as content arrives.</p>
-    <div className="flex gap-2">
-      <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">React</span>
-      <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">Streaming</span>
-      <span className="inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800">Dynamic</span>
-    </div>
-  </div>
-  <div className="mt-4 pt-4 border-t">
-    <div className="flex justify-between items-center">
-      <span className="text-xs text-muted-foreground">Generated just now</span>
-      <button className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors">
-        Learn more
-      </button>
-    </div>
-  </div>
-</div>`;
-
-const Example = () => {
-  const [streamedJsx, setStreamedJsx] = useState(fullJsx);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const simulateStreaming = useCallback(() => {
-    setIsStreaming(true);
-    setStreamedJsx("");
-    let index = 0;
-
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
-
-    intervalRef.current = setInterval(() => {
-      if (index < fullJsx.length) {
-        setStreamedJsx(fullJsx.slice(0, index + 15));
-        index += 15;
-      } else {
-        setIsStreaming(false);
-        if (intervalRef.current) {
-          clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-      }
-    }, 30);
-  }, []);
-
-  useEffect(
-    () => () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    },
-    []
-  );
-
-  return (
-    <div className="space-y-4">
-      <Button
-        disabled={isStreaming}
-        onClick={simulateStreaming}
-        size="sm"
-        variant="outline"
-      >
-        {isStreaming ? "Streaming..." : "Simulate Streaming"}
-      </Button>
-
-      <JSXPreview
-        className="min-h-[200px]"
-        isStreaming={isStreaming}
-        jsx={streamedJsx}
-        onError={handleError}
-      >
-        <JSXPreviewContent />
-        <JSXPreviewError className="mt-2" />
-      </JSXPreview>
-    </div>
-  );
-};
-
-export default Example;

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

@@ -1,365 +0,0 @@
-"use client";
-
-import {
-  Attachment,
-  AttachmentPreview,
-  AttachmentRemove,
-  Attachments,
-} from "@/components/ai-elements/attachments";
-import {
-  Message,
-  MessageAction,
-  MessageActions,
-  MessageBranch,
-  MessageBranchContent,
-  MessageBranchNext,
-  MessageBranchPage,
-  MessageBranchPrevious,
-  MessageBranchSelector,
-  MessageContent,
-  MessageResponse,
-  MessageToolbar,
-} from "@/components/ai-elements/message";
-import {
-  CopyIcon,
-  RefreshCcwIcon,
-  ThumbsDownIcon,
-  ThumbsUpIcon,
-} from "lucide-react";
-import { nanoid } from "nanoid";
-import { memo, useCallback, useState } from "react";
-
-const messages: {
-  key: string;
-  from: "user" | "assistant";
-  versions?: { id: string; content: string }[];
-  content?: string;
-  attachments?: {
-    id: string;
-    type: "file";
-    url: string;
-    mediaType?: string;
-    filename?: string;
-  }[];
-}[] = [
-  {
-    attachments: [
-      {
-        filename: "palace-of-fine-arts.jpg",
-        id: nanoid(),
-        mediaType: "image/jpeg",
-        type: "file",
-        url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
-      },
-      {
-        filename: "react-hooks-guide.pdf",
-        id: nanoid(),
-        mediaType: "application/pdf",
-        type: "file",
-        url: "",
-      },
-    ],
-    content: "How do React hooks work and when should I use them?",
-    from: "user",
-    key: nanoid(),
-  },
-  {
-    from: "assistant",
-    key: nanoid(),
-    versions: [
-      {
-        content: `# React Hooks Guide
-
-React hooks are functions that let you "hook into" React state and lifecycle features from function components. Here's what you need to know:
-
-## Core Hooks
-
-### useState
-Adds state to functional components:
-
-\`\`\`jsx
-const [count, setCount] = useState(0);
-
-return (
-  <button onClick={() => setCount(count + 1)}>
-    Count: {count}
-  </button>
-);
-\`\`\`
-
-### useEffect
-Handles side effects (data fetching, subscriptions, DOM updates):
-
-\`\`\`jsx
-useEffect(() => {
-  document.title = \`You clicked \${count} times\`;
-
-  // Cleanup function (optional)
-  return () => {
-    document.title = 'React App';
-  };
-}, [count]); // Dependency array
-\`\`\`
-
-## When to Use Hooks
-
-- ✅ **Function components** - Hooks only work in function components
-- ✅ **Replacing class components** - Modern React favors hooks over classes
-- ✅ **Sharing stateful logic** - Create custom hooks to reuse logic
-- ❌ **Class components** - Use lifecycle methods instead
-
-## Rules of Hooks
-
-1. Only call hooks at the **top level** (not inside loops, conditions, or nested functions)
-2. Only call hooks from **React functions** (components or custom hooks)
-
-Would you like to explore more advanced hooks like \`useCallback\` or \`useMemo\`?`,
-        id: nanoid(),
-      },
-      {
-        content: `React hooks are special functions that let you use React features in function components. The most common ones are:
-
-- **useState** - for managing component state
-- **useEffect** - for side effects like data fetching
-- **useContext** - for consuming context values
-- **useRef** - for accessing DOM elements
-
-Here's a simple example:
-
-\`\`\`jsx
-function Counter() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <button onClick={() => setCount(count + 1)}>
-      Clicked {count} times
-    </button>
-  );
-}
-\`\`\`
-
-Which specific hook would you like to learn more about?`,
-        id: nanoid(),
-      },
-      {
-        content: `Absolutely! React hooks are a powerful feature introduced in React 16.8. They solve several problems:
-
-## Key Benefits
-
-1. **Simpler code** - No need for class components
-2. **Reusable logic** - Extract stateful logic into custom hooks
-3. **Better organization** - Group related code together
-
-## Most Popular Hooks
-
-| Hook | Purpose |
-|------|---------|
-| useState | Add state to components |
-| useEffect | Handle side effects |
-| useContext | Access context values |
-| useReducer | Complex state logic |
-| useCallback | Memoize functions |
-| useMemo | Memoize values |
-
-The beauty of hooks is that they let you reuse stateful logic without changing your component hierarchy. Want to dive into a specific hook?`,
-        id: nanoid(),
-      },
-    ],
-  },
-];
-
-const handleCopy = (content: string) => {
-  navigator.clipboard.writeText(content);
-};
-
-const handleRetry = () => {
-  console.log("Retrying...");
-};
-
-interface LikeActionProps {
-  messageKey: string;
-  isLiked: boolean;
-  onToggle: (key: string) => void;
-}
-
-const LikeAction = memo(
-  ({ messageKey, isLiked, onToggle }: LikeActionProps) => {
-    const handleClick = useCallback(
-      () => onToggle(messageKey),
-      [messageKey, onToggle]
-    );
-    return (
-      <MessageAction
-        label="Like"
-        onClick={handleClick}
-        tooltip="Like this response"
-      >
-        <ThumbsUpIcon
-          className="size-4"
-          fill={isLiked ? "currentColor" : "none"}
-        />
-      </MessageAction>
-    );
-  }
-);
-
-LikeAction.displayName = "LikeAction";
-
-interface DislikeActionProps {
-  messageKey: string;
-  isDisliked: boolean;
-  onToggle: (key: string) => void;
-}
-
-const DislikeAction = memo(
-  ({ messageKey, isDisliked, onToggle }: DislikeActionProps) => {
-    const handleClick = useCallback(
-      () => onToggle(messageKey),
-      [messageKey, onToggle]
-    );
-    return (
-      <MessageAction
-        label="Dislike"
-        onClick={handleClick}
-        tooltip="Dislike this response"
-      >
-        <ThumbsDownIcon
-          className="size-4"
-          fill={isDisliked ? "currentColor" : "none"}
-        />
-      </MessageAction>
-    );
-  }
-);
-
-DislikeAction.displayName = "DislikeAction";
-
-interface CopyActionProps {
-  content: string;
-}
-
-const CopyAction = memo(({ content }: CopyActionProps) => {
-  const handleClick = useCallback(() => handleCopy(content), [content]);
-  return (
-    <MessageAction
-      label="Copy"
-      onClick={handleClick}
-      tooltip="Copy to clipboard"
-    >
-      <CopyIcon className="size-4" />
-    </MessageAction>
-  );
-});
-
-CopyAction.displayName = "CopyAction";
-
-const Example = () => {
-  const [liked, setLiked] = useState<Record<string, boolean>>({});
-  const [disliked, setDisliked] = useState<Record<string, boolean>>({});
-
-  const handleToggleLike = useCallback((key: string) => {
-    setLiked((prev) => ({ ...prev, [key]: !prev[key] }));
-  }, []);
-
-  const handleToggleDislike = useCallback((key: string) => {
-    setDisliked((prev) => ({ ...prev, [key]: !prev[key] }));
-  }, []);
-
-  return (
-    <div className="flex flex-col gap-4">
-      {/* biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Demo component with complex rendering logic */}
-      {messages.map((message) => (
-        <Message from={message.from} key={message.key}>
-          {message.versions?.length && message.versions.length > 1 ? (
-            <MessageBranch defaultBranch={0} key={message.key}>
-              <MessageBranchContent>
-                {message.versions?.map((version) => (
-                  <MessageContent key={version.id}>
-                    <MessageResponse>{version.content}</MessageResponse>
-                  </MessageContent>
-                ))}
-              </MessageBranchContent>
-              {message.from === "assistant" && (
-                <MessageToolbar>
-                  <MessageBranchSelector>
-                    <MessageBranchPrevious />
-                    <MessageBranchPage />
-                    <MessageBranchNext />
-                  </MessageBranchSelector>
-                  <MessageActions>
-                    <MessageAction
-                      label="Retry"
-                      onClick={handleRetry}
-                      tooltip="Regenerate response"
-                    >
-                      <RefreshCcwIcon className="size-4" />
-                    </MessageAction>
-                    <LikeAction
-                      isLiked={liked[message.key] ?? false}
-                      messageKey={message.key}
-                      onToggle={handleToggleLike}
-                    />
-                    <DislikeAction
-                      isDisliked={disliked[message.key] ?? false}
-                      messageKey={message.key}
-                      onToggle={handleToggleDislike}
-                    />
-                    <CopyAction
-                      content={
-                        message.versions?.find((v) => v.id)?.content || ""
-                      }
-                    />
-                  </MessageActions>
-                </MessageToolbar>
-              )}
-            </MessageBranch>
-          ) : (
-            <div key={message.key}>
-              {message.attachments && message.attachments.length > 0 && (
-                <Attachments className="mb-2" variant="grid">
-                  {message.attachments.map((attachment) => (
-                    <Attachment data={attachment} key={attachment.id}>
-                      <AttachmentPreview />
-                      <AttachmentRemove />
-                    </Attachment>
-                  ))}
-                </Attachments>
-              )}
-              <MessageContent>
-                {message.from === "assistant" ? (
-                  <MessageResponse>{message.content}</MessageResponse>
-                ) : (
-                  message.content
-                )}
-              </MessageContent>
-              {message.from === "assistant" && message.versions && (
-                <MessageActions>
-                  <MessageAction
-                    label="Retry"
-                    onClick={handleRetry}
-                    tooltip="Regenerate response"
-                  >
-                    <RefreshCcwIcon className="size-4" />
-                  </MessageAction>
-                  <LikeAction
-                    isLiked={liked[message.key] ?? false}
-                    messageKey={message.key}
-                    onToggle={handleToggleLike}
-                  />
-                  <DislikeAction
-                    isDisliked={disliked[message.key] ?? false}
-                    messageKey={message.key}
-                    onToggle={handleToggleDislike}
-                  />
-                  <CopyAction content={message.content || ""} />
-                </MessageActions>
-              )}
-            </div>
-          )}
-        </Message>
-      ))}
-    </div>
-  );
-};
-
-export default Example;

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

@@ -1,49 +0,0 @@
-"use client";
-
-import {
-  MicSelector,
-  MicSelectorContent,
-  MicSelectorEmpty,
-  MicSelectorInput,
-  MicSelectorItem,
-  MicSelectorLabel,
-  MicSelectorList,
-  MicSelectorTrigger,
-  MicSelectorValue,
-} from "@/components/ai-elements/mic-selector";
-
-const handleOpenChange = (open: boolean) => {
-  console.log("MicSelector is open?", open);
-};
-
-const handleValueChange = (newValue: string) => {
-  console.log("MicSelector value:", newValue);
-};
-
-const Example = () => (
-  <div className="flex size-full flex-col items-center justify-center gap-4">
-    <MicSelector
-      onOpenChange={handleOpenChange}
-      onValueChange={handleValueChange}
-    >
-      <MicSelectorTrigger className="w-full max-w-sm">
-        <MicSelectorValue />
-      </MicSelectorTrigger>
-      <MicSelectorContent>
-        <MicSelectorInput />
-        <MicSelectorEmpty />
-        <MicSelectorList>
-          {(devices) =>
-            devices.map((device) => (
-              <MicSelectorItem key={device.deviceId} value={device.deviceId}>
-                <MicSelectorLabel device={device} />
-              </MicSelectorItem>
-            ))
-          }
-        </MicSelectorList>
-      </MicSelectorContent>
-    </MicSelector>
-  </div>
-);
-
-export default Example;