ui-lab-registry 0.3.0 → 0.3.2

package/src/elements/AI/AIChatInput/variations.json

@@ -8,7 +8,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { PromptInput } from './layout/PromptInput';\n\nexport function BasicAIChatInput() {\n  const [prompt, setPrompt] = useState('');\n\n  const handleSubmit = (value: string) => {\n    console.log('Prompt submitted:', value);\n    setPrompt('');\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-8\">AI Chat Input</h1>\n\n        <div className=\"space-y-8\">\n          <div>\n            <p className=\"text-foreground-400 mb-4\">Ask the AI anything:</p>\n            <PromptInput\n              value={prompt}\n              onChange={setPrompt}\n              onSubmit={handleSubmit}\n              placeholder=\"Enter your prompt...\"\n            />\n          </div>\n\n          {prompt && (\n            <div className=\"bg-background-800 rounded-md border border-background-700 p-6\">\n              <p className=\"text-sm text-foreground-400 mb-2\">Current prompt:</p>\n              <p className=\"text-foreground-50\">{prompt}</p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { PromptInput } from './layout/PromptInput.js';\n\nexport function BasicAIChatInput() {\n  const [prompt, setPrompt] = useState('');\n\n  const handleSubmit = (value: string) => {\n    console.log('Prompt submitted:', value);\n    setPrompt('');\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-8\">AI Chat Input</h1>\n\n        <div className=\"space-y-8\">\n          <div>\n            <p className=\"text-foreground-400 mb-4\">Ask the AI anything:</p>\n            <PromptInput\n              value={prompt}\n              onChange={setPrompt}\n              onSubmit={handleSubmit}\n              placeholder=\"Enter your prompt...\"\n            />\n          </div>\n\n          {prompt && (\n            <div className=\"bg-background-800 rounded-md border border-background-700 p-6\">\n              <p className=\"text-sm text-foreground-400 mb-2\">Current prompt:</p>\n              <p className=\"text-foreground-50\">{prompt}</p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
@@ -28,13 +28,13 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { PromptInputWithSuggestions } from './layout/PromptInputWithSuggestions';\n\nexport function AIChatInputWithSuggestions() {\n  const [prompt, setPrompt] = useState('');\n  const [selectedSuggestion, setSelectedSuggestion] = useState<string | null>(null);\n\n  const suggestions = [\n    'Explain this concept in simple terms',\n    'Write a code example',\n    'What are the best practices?',\n    'How do I debug this?',\n  ];\n\n  const handleSubmit = (value: string) => {\n    console.log('Prompt submitted:', value);\n    setPrompt('');\n    setSelectedSuggestion(null);\n  };\n\n  const handleSuggestionClick = (suggestion: string) => {\n    setSelectedSuggestion(suggestion);\n    setPrompt(suggestion);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-8\">Chat with AI</h1>\n\n        <div className=\"space-y-6\">\n          {prompt.length === 0 && (\n            <div>\n              <p className=\"text-sm text-foreground-400 mb-3\">Quick suggestions:</p>\n              <div className=\"grid grid-cols-2 gap-2\">\n                {suggestions.map((suggestion) => (\n                  <button\n                    key={suggestion}\n                    onClick={() => handleSuggestionClick(suggestion)}\n                    className=\"text-left px-3 py-2 bg-background-800 border border-background-700 rounded hover:border-accent-500 hover:bg-background-700/80 transition-colors text-sm text-foreground-300 hover:text-foreground-200\"\n                  >\n                    {suggestion}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n\n          <PromptInputWithSuggestions\n            value={prompt}\n            onChange={setPrompt}\n            onSubmit={handleSubmit}\n            placeholder=\"Enter your prompt or use a suggestion...\"\n          />\n\n          {selectedSuggestion && (\n            <div className=\"p-4 bg-background-800 border border-accent-500/30 rounded-md\">\n              <p className=\"text-xs text-foreground-400 mb-1\">Using suggestion:</p>\n              <p className=\"text-foreground-50\">{selectedSuggestion}</p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { PromptInputWithSuggestions } from './layout/PromptInputWithSuggestions.js';\n\nexport function AIChatInputWithSuggestions() {\n  const [prompt, setPrompt] = useState('');\n  const [selectedSuggestion, setSelectedSuggestion] = useState<string | null>(null);\n\n  const suggestions = [\n    'Explain this concept in simple terms',\n    'Write a code example',\n    'What are the best practices?',\n    'How do I debug this?',\n  ];\n\n  const handleSubmit = (value: string) => {\n    console.log('Prompt submitted:', value);\n    setPrompt('');\n    setSelectedSuggestion(null);\n  };\n\n  const handleSuggestionClick = (suggestion: string) => {\n    setSelectedSuggestion(suggestion);\n    setPrompt(suggestion);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-8\">Chat with AI</h1>\n\n        <div className=\"space-y-6\">\n          {prompt.length === 0 && (\n            <div>\n              <p className=\"text-sm text-foreground-400 mb-3\">Quick suggestions:</p>\n              <div className=\"grid grid-cols-2 gap-2\">\n                {suggestions.map((suggestion) => (\n                  <button\n                    key={suggestion}\n                    onClick={() => handleSuggestionClick(suggestion)}\n                    className=\"text-left px-3 py-2 bg-background-800 border border-background-700 rounded hover:border-accent-500 hover:bg-background-700/80 transition-colors text-sm text-foreground-300 hover:text-foreground-200\"\n                  >\n                    {suggestion}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n\n          <PromptInputWithSuggestions\n            value={prompt}\n            onChange={setPrompt}\n            onSubmit={handleSubmit}\n            placeholder=\"Enter your prompt or use a suggestion...\"\n          />\n\n          {selectedSuggestion && (\n            <div className=\"p-4 bg-background-800 border border-accent-500/30 rounded-md\">\n              <p className=\"text-sm text-foreground-400 mb-1\">Using suggestion:</p>\n              <p className=\"text-foreground-50\">{selectedSuggestion}</p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
         "filename": "PromptInputWithSuggestions.tsx",
         "language": "typescript",
-        "code": "import React, { useRef, useEffect } from 'react';\n\ninterface PromptInputWithSuggestionsProps {\n  value: string;\n  onChange: (value: string) => void;\n  onSubmit: (value: string) => void;\n  placeholder?: string;\n}\n\nexport function PromptInputWithSuggestions({\n  value,\n  onChange,\n  onSubmit,\n  placeholder = 'Ask AI...',\n}: PromptInputWithSuggestionsProps) {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  useEffect(() => {\n    if (textareaRef.current) {\n      textareaRef.current.style.height = 'auto';\n      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`;\n    }\n  }, [value]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      if (value.trim()) {\n        onSubmit(value);\n      }\n    }\n  };\n\n  return (\n    <div className=\"flex gap-3 p-4 bg-background-800 border border-background-700 rounded-md\">\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        className=\"flex-1 bg-transparent border-0 text-foreground-50 placeholder-foreground-400 focus:outline-none resize-none\"\n        rows={1}\n      />\n      <div className=\"flex flex-col gap-2\">\n        <button\n          onClick={() => {\n            if (value.trim()) {\n              onSubmit(value);\n            }\n          }}\n          disabled={!value.trim()}\n          className=\"px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 text-sm\"\n        >\n          Send\n        </button>\n        <button className=\"px-2 py-1 text-foreground-400 hover:text-foreground-200 text-xs rounded border border-background-700 hover:border-background-600 transition-colors\">\n          ⌘K\n        </button>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "import React, { useRef, useEffect } from 'react';\n\ninterface PromptInputWithSuggestionsProps {\n  value: string;\n  onChange: (value: string) => void;\n  onSubmit: (value: string) => void;\n  placeholder?: string;\n}\n\nexport function PromptInputWithSuggestions({\n  value,\n  onChange,\n  onSubmit,\n  placeholder = 'Ask AI...',\n}: PromptInputWithSuggestionsProps) {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  useEffect(() => {\n    if (textareaRef.current) {\n      textareaRef.current.style.height = 'auto';\n      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`;\n    }\n  }, [value]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      if (value.trim()) {\n        onSubmit(value);\n      }\n    }\n  };\n\n  return (\n    <div className=\"flex gap-3 p-4 bg-background-800 border border-background-700 rounded-md\">\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        className=\"flex-1 bg-transparent border-0 text-foreground-50 placeholder-foreground-400 focus:outline-none resize-none\"\n        rows={1}\n      />\n      <div className=\"flex flex-col gap-2\">\n        <button\n          onClick={() => {\n            if (value.trim()) {\n              onSubmit(value);\n            }\n          }}\n          disabled={!value.trim()}\n          className=\"px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 text-sm\"\n        >\n          Send\n        </button>\n        <button className=\"px-2 py-1 text-foreground-400 hover:text-foreground-200 text-sm rounded border border-background-700 hover:border-background-600 transition-colors\">\n          ⌘K\n        </button>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": false
       }
     ]

package/src/elements/AI/ChainOfThought/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {
@@ -29,7 +29,7 @@ const elementMetadata: ElementMetadata = {
 export function getPreview(): React.ReactNode {
   return (
     <div className="flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700">
-      <div className="space-y-2 text-xs">
+      <div className="space-y-2 text-sm">
         <div className="flex items-start gap-2">
           <span className="text-accent-500 font-bold">1.</span>
           <div className="text-foreground-400">Analyzing the problem</div>

package/src/elements/AI/ChainOfThought/variations/01-basic/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import { ThoughtStep } from './layout/ThoughtStep';
+import { ThoughtStep } from './layout/ThoughtStep.js';
 
 export function BasicChainOfThought() {
   const steps = [

package/src/elements/AI/ChainOfThought/variations/02-with-details/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React, { useState } from 'react';
-import { ExpandableThoughtStep } from './layout/ExpandableThoughtStep';
+import { ExpandableThoughtStep } from './layout/ExpandableThoughtStep.js';
 
 export function ChainOfThoughtWithDetails() {
   const [expandedSteps, setExpandedSteps] = useState<Set<number>>(new Set([1]));

package/src/elements/AI/ChainOfThought/variations.json

@@ -8,7 +8,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React from 'react';\nimport { ThoughtStep } from './layout/ThoughtStep';\n\nexport function BasicChainOfThought() {\n  const steps = [\n    {\n      number: 1,\n      title: 'Problem Analysis',\n      description: 'Breaking down the problem into manageable parts',\n    },\n    {\n      number: 2,\n      title: 'Strategy Development',\n      description: 'Developing a strategy to solve the problem',\n    },\n    {\n      number: 3,\n      title: 'Implementation',\n      description: 'Implementing the solution step by step',\n    },\n    {\n      number: 4,\n      title: 'Validation',\n      description: 'Validating the solution and checking results',\n    },\n  ];\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-2\">AI Reasoning Process</h1>\n        <p className=\"text-foreground-400 mb-8\">Here's how the AI is thinking through the problem:</p>\n\n        <div className=\"space-y-4\">\n          {steps.map((step) => (\n            <ThoughtStep key={step.number} {...step} />\n          ))}\n        </div>\n\n        <div className=\"mt-8 p-4 bg-background-800 border border-background-700 rounded-md\">\n          <p className=\"text-sm text-foreground-300\">\n            The chain of thought shows the reasoning process, making it easier to understand how the AI arrived at the conclusion.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React from 'react';\nimport { ThoughtStep } from './layout/ThoughtStep.js';\n\nexport function BasicChainOfThought() {\n  const steps = [\n    {\n      number: 1,\n      title: 'Problem Analysis',\n      description: 'Breaking down the problem into manageable parts',\n    },\n    {\n      number: 2,\n      title: 'Strategy Development',\n      description: 'Developing a strategy to solve the problem',\n    },\n    {\n      number: 3,\n      title: 'Implementation',\n      description: 'Implementing the solution step by step',\n    },\n    {\n      number: 4,\n      title: 'Validation',\n      description: 'Validating the solution and checking results',\n    },\n  ];\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-2\">AI Reasoning Process</h1>\n        <p className=\"text-foreground-400 mb-8\">Here's how the AI is thinking through the problem:</p>\n\n        <div className=\"space-y-4\">\n          {steps.map((step) => (\n            <ThoughtStep key={step.number} {...step} />\n          ))}\n        </div>\n\n        <div className=\"mt-8 p-4 bg-background-800 border border-background-700 rounded-md\">\n          <p className=\"text-sm text-foreground-300\">\n            The chain of thought shows the reasoning process, making it easier to understand how the AI arrived at the conclusion.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
@@ -28,7 +28,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ExpandableThoughtStep } from './layout/ExpandableThoughtStep';\n\nexport function ChainOfThoughtWithDetails() {\n  const [expandedSteps, setExpandedSteps] = useState<Set<number>>(new Set([1]));\n\n  const steps = [\n    {\n      number: 1,\n      title: 'Understanding the Request',\n      description: 'Parsing and understanding what the user is asking for',\n      details: [\n        'Identified key requirements from the input',\n        'Recognized the problem domain',\n        'Determined necessary context and constraints',\n      ],\n    },\n    {\n      number: 2,\n      title: 'Analyzing Available Approaches',\n      description: 'Evaluating different methods to solve the problem',\n      details: [\n        'Approach A: Direct computation (Fast but limited)',\n        'Approach B: Iterative refinement (Balanced)',\n        'Approach C: Machine learning (Slow but accurate)',\n      ],\n    },\n    {\n      number: 3,\n      title: 'Selecting Optimal Strategy',\n      description: 'Choosing the best approach based on constraints',\n      details: [\n        'Evaluated trade-offs between speed and accuracy',\n        'Considered resource constraints',\n        'Selected Approach B for optimal balance',\n      ],\n    },\n    {\n      number: 4,\n      title: 'Generating Solution',\n      description: 'Implementing the chosen strategy step by step',\n      details: [\n        'Breaking down into sub-tasks',\n        'Validating intermediate results',\n        'Optimizing for performance',\n      ],\n    },\n  ];\n\n  const toggleStep = (number: number) => {\n    const newExpanded = new Set(expandedSteps);\n    if (newExpanded.has(number)) {\n      newExpanded.delete(number);\n    } else {\n      newExpanded.add(number);\n    }\n    setExpandedSteps(newExpanded);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-2\">Detailed AI Reasoning</h1>\n        <p className=\"text-foreground-400 mb-8\">Click steps to see detailed reasoning:</p>\n\n        <div className=\"space-y-3\">\n          {steps.map((step) => (\n            <ExpandableThoughtStep\n              key={step.number}\n              {...step}\n              isExpanded={expandedSteps.has(step.number)}\n              onToggle={() => toggleStep(step.number)}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ExpandableThoughtStep } from './layout/ExpandableThoughtStep.js';\n\nexport function ChainOfThoughtWithDetails() {\n  const [expandedSteps, setExpandedSteps] = useState<Set<number>>(new Set([1]));\n\n  const steps = [\n    {\n      number: 1,\n      title: 'Understanding the Request',\n      description: 'Parsing and understanding what the user is asking for',\n      details: [\n        'Identified key requirements from the input',\n        'Recognized the problem domain',\n        'Determined necessary context and constraints',\n      ],\n    },\n    {\n      number: 2,\n      title: 'Analyzing Available Approaches',\n      description: 'Evaluating different methods to solve the problem',\n      details: [\n        'Approach A: Direct computation (Fast but limited)',\n        'Approach B: Iterative refinement (Balanced)',\n        'Approach C: Machine learning (Slow but accurate)',\n      ],\n    },\n    {\n      number: 3,\n      title: 'Selecting Optimal Strategy',\n      description: 'Choosing the best approach based on constraints',\n      details: [\n        'Evaluated trade-offs between speed and accuracy',\n        'Considered resource constraints',\n        'Selected Approach B for optimal balance',\n      ],\n    },\n    {\n      number: 4,\n      title: 'Generating Solution',\n      description: 'Implementing the chosen strategy step by step',\n      details: [\n        'Breaking down into sub-tasks',\n        'Validating intermediate results',\n        'Optimizing for performance',\n      ],\n    },\n  ];\n\n  const toggleStep = (number: number) => {\n    const newExpanded = new Set(expandedSteps);\n    if (newExpanded.has(number)) {\n      newExpanded.delete(number);\n    } else {\n      newExpanded.add(number);\n    }\n    setExpandedSteps(newExpanded);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-2\">Detailed AI Reasoning</h1>\n        <p className=\"text-foreground-400 mb-8\">Click steps to see detailed reasoning:</p>\n\n        <div className=\"space-y-3\">\n          {steps.map((step) => (\n            <ExpandableThoughtStep\n              key={step.number}\n              {...step}\n              isExpanded={expandedSteps.has(step.number)}\n              onToggle={() => toggleStep(step.number)}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {

package/src/elements/AI/Chat/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {
@@ -31,23 +31,23 @@ export function getPreview(): React.ReactNode {
     <div className="flex flex-col h-full w-full bg-background-900 rounded-sm border border-background-700 overflow-hidden">
       <div className="flex-1 overflow-y-auto space-y-3 p-3">
         <div className="flex justify-start">
-          <div className="bg-background-700 rounded px-3 py-2 max-w-xs text-xs text-foreground-400">
+          <div className="bg-background-700 rounded px-3 py-2 max-w-xs text-sm text-foreground-400">
             Hello, how can I help?
           </div>
         </div>
         <div className="flex justify-end">
-          <div className="bg-accent-500 rounded px-3 py-2 max-w-xs text-xs text-foreground-50">
+          <div className="bg-accent-500 rounded px-3 py-2 max-w-xs text-sm text-foreground-50">
             I need some assistance
           </div>
         </div>
         <div className="flex justify-start">
-          <div className="bg-background-700 rounded px-3 py-2 max-w-xs text-xs text-foreground-400">
+          <div className="bg-background-700 rounded px-3 py-2 max-w-xs text-sm text-foreground-400">
             I'm here to help!
           </div>
         </div>
       </div>
       <div className="border-t border-background-700 p-2 bg-background-800">
-        <div className="h-6 bg-background-700 rounded text-xs flex items-center px-2 text-foreground-400">
+        <div className="h-6 bg-background-700 rounded text-sm flex items-center px-2 text-foreground-400">
           Type a message...
         </div>
       </div>

package/src/elements/AI/Chat/variations/01-basic/index.tsx

@@ -1,8 +1,8 @@
 "use client"
 import React, { useState } from 'react';
-import { ChatContainer } from './layout/ChatContainer';
-import { ChatMessage } from './layout/ChatMessage';
-import { ChatInput } from './layout/ChatInput';
+import { ChatContainer } from './layout/ChatContainer.js';
+import { ChatMessage } from './layout/ChatMessage.js';
+import { ChatInput } from './layout/ChatInput.js';
 
 interface Message {
   id: string;

package/src/elements/AI/Chat/variations/02-with-actions/index.tsx

@@ -1,8 +1,8 @@
 "use client"
 import React, { useState } from 'react';
-import { ChatContainerWithActions } from './layout/ChatContainerWithActions';
-import { ChatMessage } from './layout/ChatMessage';
-import { ChatInputWithActions } from './layout/ChatInputWithActions';
+import { ChatContainerWithActions } from './layout/ChatContainerWithActions.js';
+import { ChatMessage } from './layout/ChatMessage.js';
+import { ChatInputWithActions } from './layout/ChatInputWithActions.js';
 
 interface Message {
   id: string;
@@ -57,19 +57,19 @@ export function ChatWithActions() {
             <div className="flex gap-2 mb-3 flex-wrap">
               <button
                 onClick={() => handleAction('Copy code')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors"
+                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
               >
                 📋 Copy
               </button>
               <button
                 onClick={() => handleAction('Explain')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors"
+                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
               >
                 💡 Explain
               </button>
               <button
                 onClick={() => handleAction('Refactor')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors"
+                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
               >
                 ✨ Refactor
               </button>

package/src/elements/AI/Chat/variations.json

@@ -8,7 +8,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ChatContainer } from './layout/ChatContainer';\nimport { ChatMessage } from './layout/ChatMessage';\nimport { ChatInput } from './layout/ChatInput';\n\ninterface Message {\n  id: string;\n  content: string;\n  sender: 'ai' | 'user';\n}\n\nexport function BasicChat() {\n  const [messages, setMessages] = useState<Message[]>([\n    { id: '1', content: 'Hello! How can I assist you today?', sender: 'ai' },\n    { id: '2', content: 'I need help with my project', sender: 'user' },\n    { id: '3', content: 'Sure! Tell me more about what you need help with.', sender: 'ai' },\n  ]);\n\n  const handleSendMessage = (content: string) => {\n    const userMessage = {\n      id: String(messages.length + 1),\n      content,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, userMessage]);\n\n    setTimeout(() => {\n      const aiMessage = {\n        id: String(messages.length + 2),\n        content: 'That sounds interesting! I can help you with that.',\n        sender: 'ai' as const,\n      };\n      setMessages((prev) => [...prev, aiMessage]);\n    }, 500);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto h-96\">\n        <ChatContainer>\n          <div className=\"flex-1 overflow-y-auto space-y-4 p-4\">\n            {messages.map((message) => (\n              <ChatMessage key={message.id} message={message.content} sender={message.sender} />\n            ))}\n          </div>\n          <div className=\"border-t border-background-700 p-4\">\n            <ChatInput onSendMessage={handleSendMessage} />\n          </div>\n        </ChatContainer>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ChatContainer } from './layout/ChatContainer.js';\nimport { ChatMessage } from './layout/ChatMessage.js';\nimport { ChatInput } from './layout/ChatInput.js';\n\ninterface Message {\n  id: string;\n  content: string;\n  sender: 'ai' | 'user';\n}\n\nexport function BasicChat() {\n  const [messages, setMessages] = useState<Message[]>([\n    { id: '1', content: 'Hello! How can I assist you today?', sender: 'ai' },\n    { id: '2', content: 'I need help with my project', sender: 'user' },\n    { id: '3', content: 'Sure! Tell me more about what you need help with.', sender: 'ai' },\n  ]);\n\n  const handleSendMessage = (content: string) => {\n    const userMessage = {\n      id: String(messages.length + 1),\n      content,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, userMessage]);\n\n    setTimeout(() => {\n      const aiMessage = {\n        id: String(messages.length + 2),\n        content: 'That sounds interesting! I can help you with that.',\n        sender: 'ai' as const,\n      };\n      setMessages((prev) => [...prev, aiMessage]);\n    }, 500);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto h-96\">\n        <ChatContainer>\n          <div className=\"flex-1 overflow-y-auto space-y-4 p-4\">\n            {messages.map((message) => (\n              <ChatMessage key={message.id} message={message.content} sender={message.sender} />\n            ))}\n          </div>\n          <div className=\"border-t border-background-700 p-4\">\n            <ChatInput onSendMessage={handleSendMessage} />\n          </div>\n        </ChatContainer>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
@@ -40,7 +40,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ChatContainerWithActions } from './layout/ChatContainerWithActions';\nimport { ChatMessage } from './layout/ChatMessage';\nimport { ChatInputWithActions } from './layout/ChatInputWithActions';\n\ninterface Message {\n  id: string;\n  content: string;\n  sender: 'ai' | 'user';\n}\n\nexport function ChatWithActions() {\n  const [messages, setMessages] = useState<Message[]>([\n    { id: '1', content: 'Hello! I can help you with questions or tasks.', sender: 'ai' },\n    { id: '2', content: 'Can you help me with debugging?', sender: 'user' },\n    { id: '3', content: 'Absolutely! I can help you debug your code. What issue are you facing?', sender: 'ai' },\n  ]);\n\n  const handleSendMessage = (content: string) => {\n    const userMessage = {\n      id: String(messages.length + 1),\n      content,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, userMessage]);\n\n    setTimeout(() => {\n      const aiMessage = {\n        id: String(messages.length + 2),\n        content: 'I can help with that. Let me analyze your code.',\n        sender: 'ai' as const,\n      };\n      setMessages((prev) => [...prev, aiMessage]);\n    }, 500);\n  };\n\n  const handleAction = (action: string) => {\n    const actionMessage = {\n      id: String(messages.length + 1),\n      content: `[Action: ${action}]`,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, actionMessage]);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto h-96\">\n        <ChatContainerWithActions>\n          <div className=\"flex-1 overflow-y-auto space-y-4 p-4\">\n            {messages.map((message) => (\n              <ChatMessage key={message.id} message={message.content} sender={message.sender} />\n            ))}\n          </div>\n          <div className=\"border-t border-background-700 p-4 bg-background-700/50\">\n            <div className=\"flex gap-2 mb-3 flex-wrap\">\n              <button\n                onClick={() => handleAction('Copy code')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors\"\n              >\n                📋 Copy\n              </button>\n              <button\n                onClick={() => handleAction('Explain')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors\"\n              >\n                💡 Explain\n              </button>\n              <button\n                onClick={() => handleAction('Refactor')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors\"\n              >\n                ✨ Refactor\n              </button>\n            </div>\n            <ChatInputWithActions onSendMessage={handleSendMessage} />\n          </div>\n        </ChatContainerWithActions>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ChatContainerWithActions } from './layout/ChatContainerWithActions.js';\nimport { ChatMessage } from './layout/ChatMessage.js';\nimport { ChatInputWithActions } from './layout/ChatInputWithActions.js';\n\ninterface Message {\n  id: string;\n  content: string;\n  sender: 'ai' | 'user';\n}\n\nexport function ChatWithActions() {\n  const [messages, setMessages] = useState<Message[]>([\n    { id: '1', content: 'Hello! I can help you with questions or tasks.', sender: 'ai' },\n    { id: '2', content: 'Can you help me with debugging?', sender: 'user' },\n    { id: '3', content: 'Absolutely! I can help you debug your code. What issue are you facing?', sender: 'ai' },\n  ]);\n\n  const handleSendMessage = (content: string) => {\n    const userMessage = {\n      id: String(messages.length + 1),\n      content,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, userMessage]);\n\n    setTimeout(() => {\n      const aiMessage = {\n        id: String(messages.length + 2),\n        content: 'I can help with that. Let me analyze your code.',\n        sender: 'ai' as const,\n      };\n      setMessages((prev) => [...prev, aiMessage]);\n    }, 500);\n  };\n\n  const handleAction = (action: string) => {\n    const actionMessage = {\n      id: String(messages.length + 1),\n      content: `[Action: ${action}]`,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, actionMessage]);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto h-96\">\n        <ChatContainerWithActions>\n          <div className=\"flex-1 overflow-y-auto space-y-4 p-4\">\n            {messages.map((message) => (\n              <ChatMessage key={message.id} message={message.content} sender={message.sender} />\n            ))}\n          </div>\n          <div className=\"border-t border-background-700 p-4 bg-background-700/50\">\n            <div className=\"flex gap-2 mb-3 flex-wrap\">\n              <button\n                onClick={() => handleAction('Copy code')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors\"\n              >\n                📋 Copy\n              </button>\n              <button\n                onClick={() => handleAction('Explain')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors\"\n              >\n                💡 Explain\n              </button>\n              <button\n                onClick={() => handleAction('Refactor')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors\"\n              >\n                ✨ Refactor\n              </button>\n            </div>\n            <ChatInputWithActions onSendMessage={handleSendMessage} />\n          </div>\n        </ChatContainerWithActions>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {

package/src/elements/Documentation/CopyPage/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {
@@ -29,7 +29,7 @@ const elementMetadata: ElementMetadata = {
 export function getPreview(): React.ReactNode {
   return (
     <div className="flex items-center justify-center w-full h-full p-3 bg-background-900 rounded-sm border border-background-700">
-      <button className="px-3 py-2 bg-accent-500 text-foreground-50 text-xs font-medium rounded hover:bg-accent-600 transition-colors flex items-center gap-2">
+      <button className="px-3 py-2 bg-accent-500 text-foreground-50 text-sm font-medium rounded hover:bg-accent-600 transition-colors flex items-center gap-2">
         <span>📋</span>
         Copy
       </button>

package/src/elements/Documentation/CopyPage/variations/01-basic/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import { CopyButton } from './layout/CopyButton';
+import { CopyButton } from './layout/CopyButton.js';
 
 export function BasicCopyPage() {
   return (

package/src/elements/Documentation/CopyPage/variations/02-with-success/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React, { useState } from 'react';
-import { CopyButtonWithToast } from './layout/CopyButtonWithToast';
+import { CopyButtonWithToast } from './layout/CopyButtonWithToast.js';
 
 export function CopyPageWithSuccess() {
   const [notification, setNotification] = useState<string | null>(null);

package/src/elements/Documentation/CopyPage/variations.json

@@ -8,7 +8,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React from 'react';\nimport { CopyButton } from './layout/CopyButton';\n\nexport function BasicCopyPage() {\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-4xl mx-auto\">\n        <div className=\"flex items-center justify-between mb-8\">\n          <h1 className=\"text-3xl font-bold text-foreground-50\">Documentation Page</h1>\n          <CopyButton />\n        </div>\n\n        <div className=\"bg-background-800 rounded-md border border-background-700 p-8\">\n          <div className=\"prose prose-invert space-y-6\">\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Overview</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-50\" />\n              </div>\n            </section>\n\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Getting Started</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n              </div>\n            </section>\n\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Features</h2>\n              <div className=\"space-y-3\">\n                <div className=\"flex gap-3\">\n                  <div className=\"w-2 h-2 rounded-full bg-accent-500 mt-1.5 flex-shrink-0\" />\n                  <div className=\"space-y-1\">\n                    <div className=\"h-3 bg-background-700 rounded w-32 opacity-50\" />\n                  </div>\n                </div>\n                <div className=\"flex gap-3\">\n                  <div className=\"w-2 h-2 rounded-full bg-accent-500 mt-1.5 flex-shrink-0\" />\n                  <div className=\"space-y-1\">\n                    <div className=\"h-3 bg-background-700 rounded w-40 opacity-50\" />\n                  </div>\n                </div>\n              </div>\n            </section>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React from 'react';\nimport { CopyButton } from './layout/CopyButton.js';\n\nexport function BasicCopyPage() {\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-4xl mx-auto\">\n        <div className=\"flex items-center justify-between mb-8\">\n          <h1 className=\"text-3xl font-bold text-foreground-50\">Documentation Page</h1>\n          <CopyButton />\n        </div>\n\n        <div className=\"bg-background-800 rounded-md border border-background-700 p-8\">\n          <div className=\"prose prose-invert space-y-6\">\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Overview</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-50\" />\n              </div>\n            </section>\n\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Getting Started</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n              </div>\n            </section>\n\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Features</h2>\n              <div className=\"space-y-3\">\n                <div className=\"flex gap-3\">\n                  <div className=\"w-2 h-2 rounded-full bg-accent-500 mt-1.5 flex-shrink-0\" />\n                  <div className=\"space-y-1\">\n                    <div className=\"h-3 bg-background-700 rounded w-32 opacity-50\" />\n                  </div>\n                </div>\n                <div className=\"flex gap-3\">\n                  <div className=\"w-2 h-2 rounded-full bg-accent-500 mt-1.5 flex-shrink-0\" />\n                  <div className=\"space-y-1\">\n                    <div className=\"h-3 bg-background-700 rounded w-40 opacity-50\" />\n                  </div>\n                </div>\n              </div>\n            </section>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
@@ -28,7 +28,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { CopyButtonWithToast } from './layout/CopyButtonWithToast';\n\nexport function CopyPageWithSuccess() {\n  const [notification, setNotification] = useState<string | null>(null);\n\n  const handleCopySuccess = () => {\n    setNotification('Page content copied to clipboard!');\n    setTimeout(() => setNotification(null), 3000);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-4xl mx-auto\">\n        <div className=\"flex items-center justify-between mb-8\">\n          <h1 className=\"text-3xl font-bold text-foreground-50\">Share & Copy Documentation</h1>\n          <CopyButtonWithToast onCopySuccess={handleCopySuccess} />\n        </div>\n\n        {notification && (\n          <div className=\"mb-6 px-4 py-3 bg-success-500 bg-opacity-20 border border-success-500 rounded-md text-success-200 flex items-center gap-3\">\n            <span>✓</span>\n            <span>{notification}</span>\n          </div>\n        )}\n\n        <div className=\"bg-background-800 rounded-md border border-background-700 p-8\">\n          <div className=\"space-y-6\">\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Content Section 1</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n              </div>\n            </section>\n\n            <div className=\"border-t border-background-700 pt-6\" />\n\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Content Section 2</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-50\" />\n              </div>\n            </section>\n\n            <div className=\"border-t border-background-700 pt-6\" />\n\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Content Section 3</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-3/4 opacity-50\" />\n              </div>\n            </section>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { CopyButtonWithToast } from './layout/CopyButtonWithToast.js';\n\nexport function CopyPageWithSuccess() {\n  const [notification, setNotification] = useState<string | null>(null);\n\n  const handleCopySuccess = () => {\n    setNotification('Page content copied to clipboard!');\n    setTimeout(() => setNotification(null), 3000);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-4xl mx-auto\">\n        <div className=\"flex items-center justify-between mb-8\">\n          <h1 className=\"text-3xl font-bold text-foreground-50\">Share & Copy Documentation</h1>\n          <CopyButtonWithToast onCopySuccess={handleCopySuccess} />\n        </div>\n\n        {notification && (\n          <div className=\"mb-6 px-4 py-3 bg-success-500 bg-opacity-20 border border-success-500 rounded-md text-success-200 flex items-center gap-3\">\n            <span>✓</span>\n            <span>{notification}</span>\n          </div>\n        )}\n\n        <div className=\"bg-background-800 rounded-md border border-background-700 p-8\">\n          <div className=\"space-y-6\">\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Content Section 1</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n              </div>\n            </section>\n\n            <div className=\"border-t border-background-700 pt-6\" />\n\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Content Section 2</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-50\" />\n              </div>\n            </section>\n\n            <div className=\"border-t border-background-700 pt-6\" />\n\n            <section>\n              <h2 className=\"text-xl font-semibold text-foreground-50 mb-4\">Content Section 3</h2>\n              <div className=\"space-y-2 text-foreground-300\">\n                <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n                <div className=\"h-3 bg-background-700 rounded w-3/4 opacity-50\" />\n              </div>\n            </section>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {

package/src/elements/Documentation/NextArticle/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {
@@ -30,7 +30,7 @@ export function getPreview(): React.ReactNode {
   return (
     <div className="flex items-center justify-between w-full h-full p-4 bg-background-900 rounded-sm border border-background-700 cursor-pointer hover:bg-background-800 transition-colors">
       <div className="flex-1">
-        <div className="text-xs text-foreground-400 mb-1">Next Article</div>
+        <div className="text-sm text-foreground-400 mb-1">Next Article</div>
         <div className="text-sm font-medium text-foreground-200">Advanced Setup Guide</div>
       </div>
       <div className="text-foreground-400">→</div>

package/src/elements/Documentation/NextArticle/variations/01-basic/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import { NextArticleCard } from './layout/NextArticleCard';
+import { NextArticleCard } from './layout/NextArticleCard.js';
 
 export function BasicNextArticle() {
   const articles = [

package/src/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.tsx

@@ -12,7 +12,7 @@ export function NextArticleCard({ title, description, href }: NextArticleCardPro
     >
       <div className="flex items-center justify-between">
         <div className="flex-1">
-          <div className="text-xs text-foreground-400 mb-1">Next Article</div>
+          <div className="text-sm text-foreground-400 mb-1">Next Article</div>
           <h3 className="text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors">
             {title}
           </h3>

package/src/elements/Documentation/NextArticle/variations/02-with-icon/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import { NextArticleWithIconCard } from './layout/NextArticleWithIconCard';
+import { NextArticleWithIconCard } from './layout/NextArticleWithIconCard.js';
 
 export function NextArticleWithIcon() {
   const articles = [

package/src/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.tsx

@@ -20,7 +20,7 @@ export function NextArticleWithIconCard({
     >
       <div className="text-3xl flex-shrink-0 mt-1">{icon}</div>
       <div className="flex-1 min-w-0">
-        <div className="text-xs text-accent-400 font-medium mb-1">{category}</div>
+        <div className="text-sm text-accent-400 font-medium mb-1">{category}</div>
         <h3 className="text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors">
           {title}
         </h3>

package/src/elements/Documentation/NextArticle/variations.json

@@ -8,13 +8,13 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React from 'react';\nimport { NextArticleCard } from './layout/NextArticleCard';\n\nexport function BasicNextArticle() {\n  const articles = [\n    {\n      title: 'Getting Started with Components',\n      description: 'Learn how to install and use UI Lab components in your project.',\n      href: '#getting-started',\n    },\n    {\n      title: 'Advanced Component Patterns',\n      description: 'Explore advanced patterns and best practices for using components.',\n      href: '#advanced',\n    },\n  ];\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-4xl mx-auto space-y-12\">\n        <div>\n          <h2 className=\"text-2xl font-bold text-foreground-50 mb-6\">Documentation Sections</h2>\n          <div className=\"space-y-6\">\n            {articles.map((article, index) => (\n              <div key={index}>\n                <div className=\"bg-background-800 rounded-md border border-background-700 p-8 mb-4\">\n                  <div className=\"space-y-2 mb-6\">\n                    <div className=\"h-4 bg-background-700 rounded w-3/4 opacity-50\" />\n                    <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n                    <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-40\" />\n                  </div>\n                </div>\n                <NextArticleCard {...article} />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React from 'react';\nimport { NextArticleCard } from './layout/NextArticleCard.js';\n\nexport function BasicNextArticle() {\n  const articles = [\n    {\n      title: 'Getting Started with Components',\n      description: 'Learn how to install and use UI Lab components in your project.',\n      href: '#getting-started',\n    },\n    {\n      title: 'Advanced Component Patterns',\n      description: 'Explore advanced patterns and best practices for using components.',\n      href: '#advanced',\n    },\n  ];\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-4xl mx-auto space-y-12\">\n        <div>\n          <h2 className=\"text-2xl font-bold text-foreground-50 mb-6\">Documentation Sections</h2>\n          <div className=\"space-y-6\">\n            {articles.map((article, index) => (\n              <div key={index}>\n                <div className=\"bg-background-800 rounded-md border border-background-700 p-8 mb-4\">\n                  <div className=\"space-y-2 mb-6\">\n                    <div className=\"h-4 bg-background-700 rounded w-3/4 opacity-50\" />\n                    <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n                    <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-40\" />\n                  </div>\n                </div>\n                <NextArticleCard {...article} />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
         "filename": "NextArticleCard.tsx",
         "language": "typescript",
-        "code": "interface NextArticleCardProps {\n  title: string;\n  description: string;\n  href: string;\n}\n\nexport function NextArticleCard({ title, description, href }: NextArticleCardProps) {\n  return (\n    <a\n      href={href}\n      className=\"block bg-background-700 border border-background-600 rounded-md p-4 hover:border-accent-500 hover:bg-background-700/80 transition-colors group\"\n    >\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex-1\">\n          <div className=\"text-xs text-foreground-400 mb-1\">Next Article</div>\n          <h3 className=\"text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors\">\n            {title}\n          </h3>\n          <p className=\"text-sm text-foreground-400\">{description}</p>\n        </div>\n        <div className=\"ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0\">\n          →\n        </div>\n      </div>\n    </a>\n  );\n}\n",
+        "code": "interface NextArticleCardProps {\n  title: string;\n  description: string;\n  href: string;\n}\n\nexport function NextArticleCard({ title, description, href }: NextArticleCardProps) {\n  return (\n    <a\n      href={href}\n      className=\"block bg-background-700 border border-background-600 rounded-md p-4 hover:border-accent-500 hover:bg-background-700/80 transition-colors group\"\n    >\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex-1\">\n          <div className=\"text-sm text-foreground-400 mb-1\">Next Article</div>\n          <h3 className=\"text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors\">\n            {title}\n          </h3>\n          <p className=\"text-sm text-foreground-400\">{description}</p>\n        </div>\n        <div className=\"ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0\">\n          →\n        </div>\n      </div>\n    </a>\n  );\n}\n",
         "isEntryPoint": false
       }
     ]
@@ -28,13 +28,13 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React from 'react';\nimport { NextArticleWithIconCard } from './layout/NextArticleWithIconCard';\n\nexport function NextArticleWithIcon() {\n  const articles = [\n    {\n      icon: '🚀',\n      title: 'Quick Start Guide',\n      description: 'Get up and running in 5 minutes with our quick start guide.',\n      href: '#quickstart',\n      category: 'Getting Started',\n    },\n    {\n      icon: '⚙️',\n      title: 'Configuration Options',\n      description: 'Learn about all available configuration options and customization.',\n      href: '#config',\n      category: 'Advanced',\n    },\n  ];\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-4xl mx-auto space-y-12\">\n        <h2 className=\"text-2xl font-bold text-foreground-50 mb-8\">Continue Reading</h2>\n\n        <div className=\"space-y-4\">\n          {articles.map((article, index) => (\n            <NextArticleWithIconCard key={index} {...article} />\n          ))}\n        </div>\n\n        <div className=\"bg-background-800 rounded-md border border-background-700 p-8 mt-12\">\n          <div className=\"space-y-3\">\n            <div className=\"h-4 bg-background-700 rounded w-2/3 opacity-50\" />\n            <div className=\"h-3 bg-background-700 rounded w-full opacity-40\" />\n            <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React from 'react';\nimport { NextArticleWithIconCard } from './layout/NextArticleWithIconCard.js';\n\nexport function NextArticleWithIcon() {\n  const articles = [\n    {\n      icon: '🚀',\n      title: 'Quick Start Guide',\n      description: 'Get up and running in 5 minutes with our quick start guide.',\n      href: '#quickstart',\n      category: 'Getting Started',\n    },\n    {\n      icon: '⚙️',\n      title: 'Configuration Options',\n      description: 'Learn about all available configuration options and customization.',\n      href: '#config',\n      category: 'Advanced',\n    },\n  ];\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-4xl mx-auto space-y-12\">\n        <h2 className=\"text-2xl font-bold text-foreground-50 mb-8\">Continue Reading</h2>\n\n        <div className=\"space-y-4\">\n          {articles.map((article, index) => (\n            <NextArticleWithIconCard key={index} {...article} />\n          ))}\n        </div>\n\n        <div className=\"bg-background-800 rounded-md border border-background-700 p-8 mt-12\">\n          <div className=\"space-y-3\">\n            <div className=\"h-4 bg-background-700 rounded w-2/3 opacity-50\" />\n            <div className=\"h-3 bg-background-700 rounded w-full opacity-40\" />\n            <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
         "filename": "NextArticleWithIconCard.tsx",
         "language": "typescript",
-        "code": "interface NextArticleWithIconCardProps {\n  icon: string;\n  title: string;\n  description: string;\n  category: string;\n  href: string;\n}\n\nexport function NextArticleWithIconCard({\n  icon,\n  title,\n  description,\n  category,\n  href,\n}: NextArticleWithIconCardProps) {\n  return (\n    <a\n      href={href}\n      className=\"flex items-start gap-4 p-4 bg-background-700 border border-background-600 rounded-md hover:border-accent-500 hover:bg-background-700/80 transition-colors group\"\n    >\n      <div className=\"text-3xl flex-shrink-0 mt-1\">{icon}</div>\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"text-xs text-accent-400 font-medium mb-1\">{category}</div>\n        <h3 className=\"text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors\">\n          {title}\n        </h3>\n        <p className=\"text-sm text-foreground-400\">{description}</p>\n      </div>\n      <div className=\"text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg\">\n        →\n      </div>\n    </a>\n  );\n}\n",
+        "code": "interface NextArticleWithIconCardProps {\n  icon: string;\n  title: string;\n  description: string;\n  category: string;\n  href: string;\n}\n\nexport function NextArticleWithIconCard({\n  icon,\n  title,\n  description,\n  category,\n  href,\n}: NextArticleWithIconCardProps) {\n  return (\n    <a\n      href={href}\n      className=\"flex items-start gap-4 p-4 bg-background-700 border border-background-600 rounded-md hover:border-accent-500 hover:bg-background-700/80 transition-colors group\"\n    >\n      <div className=\"text-3xl flex-shrink-0 mt-1\">{icon}</div>\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"text-sm text-accent-400 font-medium mb-1\">{category}</div>\n        <h3 className=\"text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors\">\n          {title}\n        </h3>\n        <p className=\"text-sm text-foreground-400\">{description}</p>\n      </div>\n      <div className=\"text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg\">\n        →\n      </div>\n    </a>\n  );\n}\n",
         "isEntryPoint": false
       }
     ]

package/src/elements/Documentation/TOC/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {
@@ -29,14 +29,14 @@ const elementMetadata: ElementMetadata = {
 export function getPreview(): React.ReactNode {
   return (
     <div className="flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700">
-      <div className="space-y-2 text-xs">
+      <div className="space-y-2 text-sm">
         <div className="font-semibold text-foreground-200 mb-2">Contents</div>
         <div className="text-foreground-400">• Introduction</div>
-        <div className="ml-3 text-foreground-400 text-xs">◦ Overview</div>
-        <div className="ml-3 text-foreground-400 text-xs">◦ Getting Started</div>
+        <div className="ml-3 text-foreground-400 text-sm">◦ Overview</div>
+        <div className="ml-3 text-foreground-400 text-sm">◦ Getting Started</div>
         <div className="text-foreground-400">• Installation</div>
         <div className="text-foreground-400">• Usage</div>
-        <div className="ml-3 text-foreground-400 text-xs">◦ Basic</div>
+        <div className="ml-3 text-foreground-400 text-sm">◦ Basic</div>
       </div>
     </div>
   );

package/src/elements/Documentation/TOC/variations/01-basic/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import { TableOfContents } from './layout/TableOfContents';
+import { TableOfContents } from './layout/TableOfContents.js';
 
 export function BasicTOC() {
   return (

package/src/elements/Documentation/TOC/variations/02-expanded/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React, { useState } from 'react';
-import { ExpandableTableOfContents } from './layout/ExpandableTableOfContents';
+import { ExpandableTableOfContents } from './layout/ExpandableTableOfContents.js';
 
 export function ExpandedTOC() {
   const [activeSection, setActiveSection] = useState('intro');

package/src/elements/Documentation/TOC/variations.json

@@ -8,7 +8,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React from 'react';\nimport { TableOfContents } from './layout/TableOfContents';\n\nexport function BasicTOC() {\n  return (\n    <div className=\"flex gap-8 min-h-screen bg-background-950 p-8\">\n      <div className=\"flex-1\">\n        <article className=\"space-y-8\">\n          <section>\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Introduction</h2>\n            <p className=\"text-foreground-300 mb-4\">\n              This document provides a comprehensive guide to getting started with UI Lab components.\n            </p>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-50\" />\n            </div>\n          </section>\n\n          <section>\n            <h3 className=\"text-xl font-bold text-foreground-50 mb-4\">Overview</h3>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-40\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n            </div>\n          </section>\n\n          <section>\n            <h3 className=\"text-xl font-bold text-foreground-50 mb-4\">Getting Started</h3>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-40\" />\n              <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-40\" />\n            </div>\n          </section>\n\n          <section>\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Installation</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n            </div>\n          </section>\n\n          <section>\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Usage</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-3/4 opacity-50\" />\n            </div>\n          </section>\n        </article>\n      </div>\n\n      <aside className=\"w-64 sticky top-8 h-fit\">\n        <TableOfContents />\n      </aside>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React from 'react';\nimport { TableOfContents } from './layout/TableOfContents.js';\n\nexport function BasicTOC() {\n  return (\n    <div className=\"flex gap-8 min-h-screen bg-background-950 p-8\">\n      <div className=\"flex-1\">\n        <article className=\"space-y-8\">\n          <section>\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Introduction</h2>\n            <p className=\"text-foreground-300 mb-4\">\n              This document provides a comprehensive guide to getting started with UI Lab components.\n            </p>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-50\" />\n            </div>\n          </section>\n\n          <section>\n            <h3 className=\"text-xl font-bold text-foreground-50 mb-4\">Overview</h3>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-40\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n            </div>\n          </section>\n\n          <section>\n            <h3 className=\"text-xl font-bold text-foreground-50 mb-4\">Getting Started</h3>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-40\" />\n              <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-40\" />\n            </div>\n          </section>\n\n          <section>\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Installation</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n            </div>\n          </section>\n\n          <section>\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Usage</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-3/4 opacity-50\" />\n            </div>\n          </section>\n        </article>\n      </div>\n\n      <aside className=\"w-64 sticky top-8 h-fit\">\n        <TableOfContents />\n      </aside>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
@@ -28,7 +28,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ExpandableTableOfContents } from './layout/ExpandableTableOfContents';\n\nexport function ExpandedTOC() {\n  const [activeSection, setActiveSection] = useState('intro');\n\n  return (\n    <div className=\"flex gap-8 min-h-screen bg-background-950 p-8\">\n      <div className=\"flex-1\">\n        <article className=\"space-y-8\">\n          <section id=\"intro\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Introduction</h2>\n            <p className=\"text-foreground-300 mb-4\">\n              Comprehensive guide with expandable table of contents showing active section.\n            </p>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n            </div>\n          </section>\n\n          <section id=\"concepts\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Core Concepts</h2>\n            <div className=\"space-y-6\">\n              <div>\n                <h3 className=\"text-lg font-semibold text-foreground-50 mb-3\">Fundamentals</h3>\n                <div className=\"space-y-2 ml-4\">\n                  <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-40\" />\n                  <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n                </div>\n              </div>\n              <div>\n                <h3 className=\"text-lg font-semibold text-foreground-50 mb-3\">Advanced Topics</h3>\n                <div className=\"space-y-2 ml-4\">\n                  <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-40\" />\n                  <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n                </div>\n              </div>\n            </div>\n          </section>\n\n          <section id=\"implementation\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Implementation</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-50\" />\n            </div>\n          </section>\n\n          <section id=\"examples\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Examples</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n            </div>\n          </section>\n        </article>\n      </div>\n\n      <aside className=\"w-72 sticky top-8 h-fit\">\n        <ExpandableTableOfContents activeSection={activeSection} />\n      </aside>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ExpandableTableOfContents } from './layout/ExpandableTableOfContents.js';\n\nexport function ExpandedTOC() {\n  const [activeSection, setActiveSection] = useState('intro');\n\n  return (\n    <div className=\"flex gap-8 min-h-screen bg-background-950 p-8\">\n      <div className=\"flex-1\">\n        <article className=\"space-y-8\">\n          <section id=\"intro\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Introduction</h2>\n            <p className=\"text-foreground-300 mb-4\">\n              Comprehensive guide with expandable table of contents showing active section.\n            </p>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n            </div>\n          </section>\n\n          <section id=\"concepts\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Core Concepts</h2>\n            <div className=\"space-y-6\">\n              <div>\n                <h3 className=\"text-lg font-semibold text-foreground-50 mb-3\">Fundamentals</h3>\n                <div className=\"space-y-2 ml-4\">\n                  <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-40\" />\n                  <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n                </div>\n              </div>\n              <div>\n                <h3 className=\"text-lg font-semibold text-foreground-50 mb-3\">Advanced Topics</h3>\n                <div className=\"space-y-2 ml-4\">\n                  <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-40\" />\n                  <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-40\" />\n                </div>\n              </div>\n            </div>\n          </section>\n\n          <section id=\"implementation\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Implementation</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-4/5 opacity-50\" />\n            </div>\n          </section>\n\n          <section id=\"examples\">\n            <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Examples</h2>\n            <div className=\"space-y-3\">\n              <div className=\"h-3 bg-background-700 rounded w-full opacity-50\" />\n              <div className=\"h-3 bg-background-700 rounded w-5/6 opacity-50\" />\n            </div>\n          </section>\n        </article>\n      </div>\n\n      <aside className=\"w-72 sticky top-8 h-fit\">\n        <ExpandableTableOfContents activeSection={activeSection} />\n      </aside>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {

package/src/elements/Elements/Carousel/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {

package/src/elements/Elements/Rating/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {

package/src/elements/Elements/Timeline/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {

package/src/elements/Elements/TreeView/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {

package/src/elements/categories.ts

@@ -1,4 +1,4 @@
-import type { ElementMetadata } from '../types';
+import type { ElementMetadata } from '../types.js';
 
 export type ElementCategoryId = 'layout' | 'form' | 'navigation' | 'content' | 'card' | 'documentation' | 'ai' | 'other';
 

package/src/elements/foundation/Header/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {

package/src/elements/foundation/Header/variations/01-basic/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import { Header } from './layout/Header';
+import { Header } from './layout/Header.js';
 
 export function BasicHeader() {
   return (