create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/code-block.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import type { BundledLanguage } from "shiki";
+
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockHeader,
+  CodeBlockLanguageSelector,
+  CodeBlockLanguageSelectorContent,
+  CodeBlockLanguageSelectorItem,
+  CodeBlockLanguageSelectorTrigger,
+  CodeBlockLanguageSelectorValue,
+  CodeBlockTitle,
+} from "@/components/ai-elements/code-block";
+import { FileIcon } from "lucide-react";
+import { useCallback, useState } from "react";
+
+const codeExamples = {
+  go: {
+    code: `package main
+
+import "fmt"
+
+func greet(name string) string {
+    return fmt.Sprintf("Hello, %s!", name)
+}
+
+func main() {
+    fmt.Println(greet("World"))
+}`,
+    filename: "greet.go",
+  },
+  python: {
+    code: `def greet(name: str) -> str:
+    return f"Hello, {name}!"
+
+print(greet("World"))`,
+    filename: "greet.py",
+  },
+  rust: {
+    code: `fn greet(name: &str) -> String {
+    format!("Hello, {}!", name)
+}
+
+fn main() {
+    println!("{}", greet("World"));
+}`,
+    filename: "greet.rs",
+  },
+  typescript: {
+    code: `function greet(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+
+console.log(greet("World"));`,
+    filename: "greet.ts",
+  },
+} as const;
+
+type Language = keyof typeof codeExamples;
+
+const languages: { value: Language; label: string }[] = [
+  { label: "TypeScript", value: "typescript" },
+  { label: "Python", value: "python" },
+  { label: "Rust", value: "rust" },
+  { label: "Go", value: "go" },
+];
+
+const handleCopy = () => {
+  console.log("Copied code to clipboard");
+};
+
+const handleCopyError = () => {
+  console.error("Failed to copy code to clipboard");
+};
+
+const Example = () => {
+  const [language, setLanguage] = useState<Language>("typescript");
+  const { code, filename } = codeExamples[language];
+
+  const handleLanguageChange = useCallback((value: string) => {
+    setLanguage(value as Language);
+  }, []);
+
+  return (
+    <CodeBlock code={code} language={language as BundledLanguage}>
+      <CodeBlockHeader>
+        <CodeBlockTitle>
+          <FileIcon size={14} />
+          <CodeBlockFilename>{filename}</CodeBlockFilename>
+        </CodeBlockTitle>
+        <CodeBlockActions>
+          <CodeBlockLanguageSelector onValueChange={handleLanguageChange} value={language}>
+            <CodeBlockLanguageSelectorTrigger>
+              <CodeBlockLanguageSelectorValue />
+            </CodeBlockLanguageSelectorTrigger>
+            <CodeBlockLanguageSelectorContent>
+              {languages.map((lang) => (
+                <CodeBlockLanguageSelectorItem key={lang.value} value={lang.value}>
+                  {lang.label}
+                </CodeBlockLanguageSelectorItem>
+              ))}
+            </CodeBlockLanguageSelectorContent>
+          </CodeBlockLanguageSelector>
+          <CodeBlockCopyButton onCopy={handleCopy} onError={handleCopyError} />
+        </CodeBlockActions>
+      </CodeBlockHeader>
+    </CodeBlock>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/commit.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  Commit,
+  CommitActions,
+  CommitAuthor,
+  CommitAuthorAvatar,
+  CommitContent,
+  CommitCopyButton,
+  CommitFile,
+  CommitFileAdditions,
+  CommitFileChanges,
+  CommitFileDeletions,
+  CommitFileIcon,
+  CommitFileInfo,
+  CommitFilePath,
+  CommitFileStatus,
+  CommitFiles,
+  CommitHash,
+  CommitHeader,
+  CommitInfo,
+  CommitMessage,
+  CommitMetadata,
+  CommitSeparator,
+  CommitTimestamp,
+} from "@/components/ai-elements/commit";
+
+const handleCopy = () => {
+  console.log("Copied hash!");
+};
+
+const hash = "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0";
+const timestamp = new Date(Date.now() - 1000 * 60 * 60 * 2);
+
+const files = [
+  {
+    additions: 150,
+    deletions: 0,
+    path: "src/auth/login.tsx",
+    status: "added" as const,
+  },
+  {
+    additions: 45,
+    deletions: 0,
+    path: "src/auth/logout.tsx",
+    status: "added" as const,
+  },
+  {
+    additions: 23,
+    deletions: 8,
+    path: "src/lib/session.ts",
+    status: "modified" as const,
+  },
+];
+
+const Example = () => (
+  <Commit>
+    <CommitHeader>
+      <CommitAuthor>
+        <CommitAuthorAvatar initials="HB" />
+      </CommitAuthor>
+      <CommitInfo>
+        <CommitMessage>feat: Add user authentication flow</CommitMessage>
+        <CommitMetadata>
+          <CommitHash>{hash.slice(0, 7)}</CommitHash>
+          <CommitSeparator />
+          <CommitTimestamp date={timestamp} />
+        </CommitMetadata>
+      </CommitInfo>
+      <CommitActions>
+        <CommitCopyButton hash={hash} onCopy={handleCopy} />
+      </CommitActions>
+    </CommitHeader>
+    <CommitContent>
+      <CommitFiles>
+        {files.map((file) => (
+          <CommitFile key={file.path}>
+            <CommitFileInfo>
+              <CommitFileStatus status={file.status} />
+              <CommitFileIcon />
+              <CommitFilePath>{file.path}</CommitFilePath>
+            </CommitFileInfo>
+            <CommitFileChanges>
+              <CommitFileAdditions count={file.additions} />
+              <CommitFileDeletions count={file.deletions} />
+            </CommitFileChanges>
+          </CommitFile>
+        ))}
+      </CommitFiles>
+    </CommitContent>
+  </Commit>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/confirmation-accepted.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from "@/components/ai-elements/confirmation";
+import { CheckIcon, XIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+
+const Example = () => (
+  <div className="w-full max-w-2xl">
+    <Confirmation approval={{ approved: true, id: nanoid() }} state="approval-responded">
+      <ConfirmationTitle>
+        <ConfirmationRequest>
+          This tool wants to delete the file{" "}
+          <code className="rounded bg-muted px-1.5 py-0.5 text-sm">/tmp/example.txt</code>. Do you
+          approve this action?
+        </ConfirmationRequest>
+        <ConfirmationAccepted>
+          <CheckIcon className="size-4 text-green-600 dark:text-green-400" />
+          <span>You approved this tool execution</span>
+        </ConfirmationAccepted>
+        <ConfirmationRejected>
+          <XIcon className="size-4 text-destructive" />
+          <span>You rejected this tool execution</span>
+        </ConfirmationRejected>
+      </ConfirmationTitle>
+    </Confirmation>
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/confirmation-rejected.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from "@/components/ai-elements/confirmation";
+import { CheckIcon, XIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+
+const Example = () => (
+  <div className="w-full max-w-2xl">
+    <Confirmation approval={{ approved: false, id: nanoid() }} state="output-denied">
+      <ConfirmationTitle>
+        <ConfirmationRequest>
+          This tool wants to delete the file{" "}
+          <code className="rounded bg-muted px-1.5 py-0.5 text-sm">/tmp/example.txt</code>. Do you
+          approve this action?
+        </ConfirmationRequest>
+        <ConfirmationAccepted>
+          <CheckIcon className="size-4 text-green-600 dark:text-green-400" />
+          <span>You approved this tool execution</span>
+        </ConfirmationAccepted>
+        <ConfirmationRejected>
+          <XIcon className="size-4 text-destructive" />
+          <span>You rejected this tool execution</span>
+        </ConfirmationRejected>
+      </ConfirmationTitle>
+    </Confirmation>
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/confirmation-request.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from "@/components/ai-elements/confirmation";
+import { CheckIcon, XIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+
+const handleReject = () => {
+  // In production, call respondToConfirmationRequest with approved: false
+};
+
+const handleApprove = () => {
+  // In production, call respondToConfirmationRequest with approved: true
+};
+
+const Example = () => (
+  <div className="w-full max-w-2xl">
+    <Confirmation approval={{ id: nanoid() }} state="approval-requested">
+      <ConfirmationTitle>
+        <ConfirmationRequest>
+          This tool wants to execute a query on the production database:
+          <code className="mt-2 block rounded bg-muted p-2 text-sm">
+            SELECT * FROM users WHERE role = &apos;admin&apos;
+          </code>
+        </ConfirmationRequest>
+        <ConfirmationAccepted>
+          <CheckIcon className="size-4 text-green-600 dark:text-green-400" />
+          <span>You approved this tool execution</span>
+        </ConfirmationAccepted>
+        <ConfirmationRejected>
+          <XIcon className="size-4 text-destructive" />
+          <span>You rejected this tool execution</span>
+        </ConfirmationRejected>
+      </ConfirmationTitle>
+      <ConfirmationActions>
+        <ConfirmationAction onClick={handleReject} variant="outline">
+          Reject
+        </ConfirmationAction>
+        <ConfirmationAction onClick={handleApprove} variant="default">
+          Approve
+        </ConfirmationAction>
+      </ConfirmationActions>
+    </Confirmation>
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/confirmation.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from "@/components/ai-elements/confirmation";
+import { CheckIcon, XIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+
+const handleReject = () => {
+  // In production, call respondToConfirmationRequest with approved: false
+};
+
+const handleApprove = () => {
+  // In production, call respondToConfirmationRequest with approved: true
+};
+
+const Example = () => (
+  <div className="w-full max-w-2xl">
+    <Confirmation approval={{ id: nanoid() }} state="approval-requested">
+      <ConfirmationTitle>
+        <ConfirmationRequest>
+          This tool wants to delete the file{" "}
+          <code className="inline rounded bg-muted px-1.5 py-0.5 text-sm">/tmp/example.txt</code>.
+          Do you approve this action?
+        </ConfirmationRequest>
+        <ConfirmationAccepted>
+          <CheckIcon className="size-4 text-green-600 dark:text-green-400" />
+          <span>You approved this tool execution</span>
+        </ConfirmationAccepted>
+        <ConfirmationRejected>
+          <XIcon className="size-4 text-destructive" />
+          <span>You rejected this tool execution</span>
+        </ConfirmationRejected>
+      </ConfirmationTitle>
+      <ConfirmationActions>
+        <ConfirmationAction onClick={handleReject} variant="outline">
+          Reject
+        </ConfirmationAction>
+        <ConfirmationAction onClick={handleApprove} variant="default">
+          Approve
+        </ConfirmationAction>
+      </ConfirmationActions>
+    </Confirmation>
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/context.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import {
+  Context,
+  ContextCacheUsage,
+  ContextContent,
+  ContextContentBody,
+  ContextContentFooter,
+  ContextContentHeader,
+  ContextInputUsage,
+  ContextOutputUsage,
+  ContextReasoningUsage,
+  ContextTrigger,
+} from "@/components/ai-elements/context";
+
+const Example = () => (
+  <div className="flex items-center justify-center p-8">
+    <Context
+      maxTokens={128_000}
+      modelId="openai:gpt-5"
+      usage={{
+        cachedInputTokens: 0,
+        inputTokens: 32_000,
+        outputTokens: 8000,
+        reasoningTokens: 0,
+        totalTokens: 40_000,
+      }}
+      usedTokens={40_000}
+    >
+      <ContextTrigger />
+      <ContextContent>
+        <ContextContentHeader />
+        <ContextContentBody>
+          <ContextInputUsage />
+          <ContextOutputUsage />
+          <ContextReasoningUsage />
+          <ContextCacheUsage />
+        </ContextContentBody>
+        <ContextContentFooter />
+      </ContextContent>
+    </Context>
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/conversation.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import {
+  Conversation,
+  ConversationContent,
+  ConversationDownload,
+  ConversationEmptyState,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import { Message, MessageContent } from "@/components/ai-elements/message";
+import { MessageSquareIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+import { useEffect, useState } from "react";
+
+const messages: {
+  key: string;
+  content: string;
+  role: "user" | "assistant";
+}[] = [
+  {
+    content: "Hello, how are you?",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "I'm good, thank you! How can I assist you today?",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "I'm looking for information about your services.",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "Sure! We offer a variety of AI solutions. What are you interested in?",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "I'm interested in natural language processing tools.",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "Great choice! We have several NLP APIs. Would you like a demo?",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "Yes, a demo would be helpful.",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "Alright, I can show you a sentiment analysis example. Ready?",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "Yes, please proceed.",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "Here is a sample: 'I love this product!' → Positive sentiment.",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "Impressive! Can it handle multiple languages?",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "Absolutely, our models support over 20 languages.",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "How do I get started with the API?",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "You can sign up on our website and get an API key instantly.",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "Is there a free trial available?",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "Yes, we offer a 14-day free trial with full access.",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "What kind of support do you provide?",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "We provide 24/7 chat and email support for all users.",
+    key: nanoid(),
+    role: "assistant",
+  },
+  {
+    content: "Thank you for the information!",
+    key: nanoid(),
+    role: "user",
+  },
+  {
+    content: "You're welcome! Let me know if you have any more questions.",
+    key: nanoid(),
+    role: "assistant",
+  },
+];
+
+const Example = () => {
+  const [visibleMessages, setVisibleMessages] = useState<
+    {
+      key: string;
+      content: string;
+      role: "user" | "assistant";
+    }[]
+  >([]);
+
+  useEffect(() => {
+    let currentIndex = 0;
+    const interval = setInterval(() => {
+      if (currentIndex < messages.length && messages[currentIndex]) {
+        const currentMessage = messages[currentIndex];
+        setVisibleMessages((prev) => [
+          ...prev,
+          {
+            content: currentMessage.content,
+            key: currentMessage.key,
+            role: currentMessage.role,
+          },
+        ]);
+        currentIndex += 1;
+      } else {
+        clearInterval(interval);
+      }
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Conversation className="relative size-full">
+      <ConversationContent>
+        {visibleMessages.length === 0 ? (
+          <ConversationEmptyState
+            description="Messages will appear here as the conversation progresses."
+            icon={<MessageSquareIcon className="size-6" />}
+            title="Start a conversation"
+          />
+        ) : (
+          visibleMessages.map(({ key, content, role }) => (
+            <Message from={role} key={key}>
+              <MessageContent>{content}</MessageContent>
+            </Message>
+          ))
+        )}
+      </ConversationContent>
+      <ConversationDownload messages={visibleMessages} />
+      <ConversationScrollButton />
+    </Conversation>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/environment-variables.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  EnvironmentVariable,
+  EnvironmentVariableCopyButton,
+  EnvironmentVariableGroup,
+  EnvironmentVariableName,
+  EnvironmentVariableRequired,
+  EnvironmentVariables,
+  EnvironmentVariablesContent,
+  EnvironmentVariablesHeader,
+  EnvironmentVariablesTitle,
+  EnvironmentVariablesToggle,
+  EnvironmentVariableValue,
+} from "@/components/ai-elements/environment-variables";
+
+const variables = [
+  {
+    name: "DATABASE_URL",
+    required: true,
+    value: "postgresql://localhost:5432/mydb",
+  },
+  { name: "API_KEY", required: true, value: "sk-1234567890abcdef" },
+  { name: "NODE_ENV", required: false, value: "production" },
+  { name: "PORT", required: false, value: "3000" },
+];
+
+const handleCopy = () => {
+  console.log("Copied!");
+};
+
+const Example = () => (
+  <EnvironmentVariables defaultShowValues={false}>
+    <EnvironmentVariablesHeader>
+      <EnvironmentVariablesTitle />
+      <EnvironmentVariablesToggle />
+    </EnvironmentVariablesHeader>
+    <EnvironmentVariablesContent>
+      {variables.map((variable) => (
+        <EnvironmentVariable key={variable.name} name={variable.name} value={variable.value}>
+          <EnvironmentVariableGroup>
+            <EnvironmentVariableName />
+            {variable.required && <EnvironmentVariableRequired />}
+          </EnvironmentVariableGroup>
+          <EnvironmentVariableGroup>
+            <EnvironmentVariableValue />
+            <EnvironmentVariableCopyButton copyFormat="export" onCopy={handleCopy} />
+          </EnvironmentVariableGroup>
+        </EnvironmentVariable>
+      ))}
+    </EnvironmentVariablesContent>
+  </EnvironmentVariables>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/file-tree-basic.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { FileTree, FileTreeFile, FileTreeFolder } from "@/components/ai-elements/file-tree";
+
+const Example = () => (
+  <FileTree>
+    <FileTreeFolder name="src" path="src">
+      <FileTreeFile name="index.ts" path="src/index.ts" />
+    </FileTreeFolder>
+    <FileTreeFile name="package.json" path="package.json" />
+  </FileTree>
+);
+
+export default Example;