ui-lab-registry 0.3.0 → 0.3.2

package/dist/components/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"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"}

package/dist/elements/AI/AIChatInput/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 declare const elementMetadata: ElementMetadata;
 export declare function getPreview(): React.ReactNode;
 export declare const metadata: {

package/dist/elements/AI/AIChatInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AI/AIChatInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiBtD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAc5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AI/AIChatInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAiBzD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAc5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/elements/AI/AIChatInput/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsxs("div", { className: "flex items-center gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: [_jsx("input", { type: "text", placeholder: "Ask AI...", className: "flex-1 bg-background-800 border border-background-700 rounded px-2 py-1 text-xs text-foreground-400 placeholder-foreground-400", readOnly: true }), _jsx("button", { className: "px-2 py-1 bg-accent-500 text-foreground-50 rounded text-xs font-medium hover:bg-accent-600", children: "\u2192" })] }));
+    return (_jsxs("div", { className: "flex items-center gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: [_jsx("input", { type: "text", placeholder: "Ask AI...", className: "flex-1 bg-background-800 border border-background-700 rounded px-2 py-1 text-sm text-foreground-400 placeholder-foreground-400", readOnly: true }), _jsx("button", { className: "px-2 py-1 bg-accent-500 text-foreground-50 rounded text-sm font-medium hover:bg-accent-600", children: "\u2192" })] }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/AI/AIChatInput/variations/01-basic/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/AIChatInput/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,UAAU,gBAAgB;IAC9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACxC,SAAS,CAAC,EAAE,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,4CAA4C,8BAAmB,EAE7E,eAAK,SAAS,EAAC,WAAW,aACxB,0BACE,YAAG,SAAS,EAAC,0BAA0B,qCAAyB,EAChE,KAAC,WAAW,IACV,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAC,sBAAsB,GAClC,IACE,EAEL,MAAM,IAAI,CACT,eAAK,SAAS,EAAC,+DAA+D,aAC5E,YAAG,SAAS,EAAC,kCAAkC,gCAAoB,EACnE,YAAG,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAK,IAC1C,CACP,IACG,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/AIChatInput/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,UAAU,gBAAgB;IAC9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACxC,SAAS,CAAC,EAAE,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,4CAA4C,8BAAmB,EAE7E,eAAK,SAAS,EAAC,WAAW,aACxB,0BACE,YAAG,SAAS,EAAC,0BAA0B,qCAAyB,EAChE,KAAC,WAAW,IACV,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAC,sBAAsB,GAClC,IACE,EAEL,MAAM,IAAI,CACT,eAAK,SAAS,EAAC,+DAA+D,aAC5E,YAAG,SAAS,EAAC,kCAAkC,gCAAoB,EACnE,YAAG,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAK,IAC1C,CACP,IACG,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/index.js

@@ -20,6 +20,6 @@ export function AIChatInputWithSuggestions() {
         setSelectedSuggestion(suggestion);
         setPrompt(suggestion);
     };
-    return (_jsx("div", { className: "min-h-screen bg-background-950 p-8", children: _jsxs("div", { className: "max-w-2xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold text-foreground-50 mb-8", children: "Chat with AI" }), _jsxs("div", { className: "space-y-6", children: [prompt.length === 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-sm text-foreground-400 mb-3", children: "Quick suggestions:" }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: suggestions.map((suggestion) => (_jsx("button", { onClick: () => handleSuggestionClick(suggestion), 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", children: suggestion }, suggestion))) })] })), _jsx(PromptInputWithSuggestions, { value: prompt, onChange: setPrompt, onSubmit: handleSubmit, placeholder: "Enter your prompt or use a suggestion..." }), selectedSuggestion && (_jsxs("div", { className: "p-4 bg-background-800 border border-accent-500/30 rounded-md", children: [_jsx("p", { className: "text-xs text-foreground-400 mb-1", children: "Using suggestion:" }), _jsx("p", { className: "text-foreground-50", children: selectedSuggestion })] }))] })] }) }));
+    return (_jsx("div", { className: "min-h-screen bg-background-950 p-8", children: _jsxs("div", { className: "max-w-2xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold text-foreground-50 mb-8", children: "Chat with AI" }), _jsxs("div", { className: "space-y-6", children: [prompt.length === 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-sm text-foreground-400 mb-3", children: "Quick suggestions:" }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: suggestions.map((suggestion) => (_jsx("button", { onClick: () => handleSuggestionClick(suggestion), 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", children: suggestion }, suggestion))) })] })), _jsx(PromptInputWithSuggestions, { value: prompt, onChange: setPrompt, onSubmit: handleSubmit, placeholder: "Enter your prompt or use a suggestion..." }), selectedSuggestion && (_jsxs("div", { className: "p-4 bg-background-800 border border-accent-500/30 rounded-md", children: [_jsx("p", { className: "text-sm text-foreground-400 mb-1", children: "Using suggestion:" }), _jsx("p", { className: "text-foreground-50", children: selectedSuggestion })] }))] })] }) }));
 }
 //# sourceMappingURL=index.js.map

package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/AIChatInput/variations/02-with-suggestions/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AAEjF,MAAM,UAAU,0BAA0B;IACxC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAElF,MAAM,WAAW,GAAG;QAClB,sCAAsC;QACtC,sBAAsB;QACtB,8BAA8B;QAC9B,sBAAsB;KACvB,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACxC,SAAS,CAAC,EAAE,CAAC,CAAC;QACd,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,UAAkB,EAAE,EAAE;QACnD,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAClC,SAAS,CAAC,UAAU,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,4CAA4C,6BAAkB,EAE5E,eAAK,SAAS,EAAC,WAAW,aACvB,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CACtB,0BACE,YAAG,SAAS,EAAC,kCAAkC,mCAAuB,EACtE,cAAK,SAAS,EAAC,wBAAwB,YACpC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAC/B,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAChD,SAAS,EAAC,uMAAuM,YAEhN,UAAU,IAJN,UAAU,CAKR,CACV,CAAC,GACE,IACF,CACP,EAED,KAAC,0BAA0B,IACzB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAC,0CAA0C,GACtD,EAED,kBAAkB,IAAI,CACrB,eAAK,SAAS,EAAC,8DAA8D,aAC3E,YAAG,SAAS,EAAC,kCAAkC,kCAAsB,EACrE,YAAG,SAAS,EAAC,oBAAoB,YAAE,kBAAkB,GAAK,IACtD,CACP,IACG,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/AIChatInput/variations/02-with-suggestions/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AAEpF,MAAM,UAAU,0BAA0B;IACxC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAElF,MAAM,WAAW,GAAG;QAClB,sCAAsC;QACtC,sBAAsB;QACtB,8BAA8B;QAC9B,sBAAsB;KACvB,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACxC,SAAS,CAAC,EAAE,CAAC,CAAC;QACd,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,UAAkB,EAAE,EAAE;QACnD,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAClC,SAAS,CAAC,UAAU,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,4CAA4C,6BAAkB,EAE5E,eAAK,SAAS,EAAC,WAAW,aACvB,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CACtB,0BACE,YAAG,SAAS,EAAC,kCAAkC,mCAAuB,EACtE,cAAK,SAAS,EAAC,wBAAwB,YACpC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAC/B,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAChD,SAAS,EAAC,uMAAuM,YAEhN,UAAU,IAJN,UAAU,CAKR,CACV,CAAC,GACE,IACF,CACP,EAED,KAAC,0BAA0B,IACzB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAC,0CAA0C,GACtD,EAED,kBAAkB,IAAI,CACrB,eAAK,SAAS,EAAC,8DAA8D,aAC3E,YAAG,SAAS,EAAC,kCAAkC,kCAAsB,EACrE,YAAG,SAAS,EAAC,oBAAoB,YAAE,kBAAkB,GAAK,IACtD,CACP,IACG,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/layout/PromptInputWithSuggestions.js

@@ -20,6 +20,6 @@ export function PromptInputWithSuggestions({ value, onChange, onSubmit, placehol
                             if (value.trim()) {
                                 onSubmit(value);
                             }
-                        }, disabled: !value.trim(), 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", children: "Send" }), _jsx("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", children: "\u2318K" })] })] }));
+                        }, disabled: !value.trim(), 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", children: "Send" }), _jsx("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", children: "\u2318K" })] })] }));
 }
 //# sourceMappingURL=PromptInputWithSuggestions.js.map

package/dist/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/dist/elements/AI/ChainOfThought/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 declare const elementMetadata: ElementMetadata;
 export declare function getPreview(): React.ReactNode;
 export declare const metadata: {

package/dist/elements/AI/ChainOfThought/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AI/ChainOfThought/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiBtD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAmB5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AI/ChainOfThought/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAiBzD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAmB5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/elements/AI/ChainOfThought/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsx("div", { className: "flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("div", { className: "space-y-2 text-xs", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-accent-500 font-bold", children: "1." }), _jsx("div", { className: "text-foreground-400", children: "Analyzing the problem" })] }), _jsxs("div", { className: "flex items-start gap-2 ml-2 text-foreground-400", children: [_jsx("span", { children: "\u2192" }), _jsx("div", { children: "Breaking down requirements" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-accent-500 font-bold", children: "2." }), _jsx("div", { className: "text-foreground-400", children: "Evaluating options" })] })] }) }));
+    return (_jsx("div", { className: "flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-accent-500 font-bold", children: "1." }), _jsx("div", { className: "text-foreground-400", children: "Analyzing the problem" })] }), _jsxs("div", { className: "flex items-start gap-2 ml-2 text-foreground-400", children: [_jsx("span", { children: "\u2192" }), _jsx("div", { children: "Breaking down requirements" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-accent-500 font-bold", children: "2." }), _jsx("div", { className: "text-foreground-400", children: "Evaluating options" })] })] }) }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/AI/ChainOfThought/variations/01-basic/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/ChainOfThought/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,UAAU,mBAAmB;IACjC,MAAM,KAAK,GAAG;QACZ;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,kBAAkB;YACzB,WAAW,EAAE,iDAAiD;SAC/D;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,sBAAsB;YAC7B,WAAW,EAAE,4CAA4C;SAC1D;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,gBAAgB;YACvB,WAAW,EAAE,wCAAwC;SACtD;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,YAAY;YACnB,WAAW,EAAE,8CAA8C;SAC5D;KACF,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,4CAA4C,qCAA0B,EACpF,YAAG,SAAS,EAAC,0BAA0B,mEAAuD,EAE9F,cAAK,SAAS,EAAC,WAAW,YACvB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,WAAW,OAAuB,IAAI,IAArB,IAAI,CAAC,MAAM,CAAc,CAC5C,CAAC,GACE,EAEN,cAAK,SAAS,EAAC,oEAAoE,YACjF,YAAG,SAAS,EAAC,6BAA6B,uIAEtC,GACA,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/ChainOfThought/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,UAAU,mBAAmB;IACjC,MAAM,KAAK,GAAG;QACZ;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,kBAAkB;YACzB,WAAW,EAAE,iDAAiD;SAC/D;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,sBAAsB;YAC7B,WAAW,EAAE,4CAA4C;SAC1D;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,gBAAgB;YACvB,WAAW,EAAE,wCAAwC;SACtD;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,YAAY;YACnB,WAAW,EAAE,8CAA8C;SAC5D;KACF,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,4CAA4C,qCAA0B,EACpF,YAAG,SAAS,EAAC,0BAA0B,mEAAuD,EAE9F,cAAK,SAAS,EAAC,WAAW,YACvB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,WAAW,OAAuB,IAAI,IAArB,IAAI,CAAC,MAAM,CAAc,CAC5C,CAAC,GACE,EAEN,cAAK,SAAS,EAAC,oEAAoE,YACjF,YAAG,SAAS,EAAC,6BAA6B,uIAEtC,GACA,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/elements/AI/ChainOfThought/variations/02-with-details/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/ChainOfThought/variations/02-with-details/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,MAAM,UAAU,yBAAyB;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAc,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9E,MAAM,KAAK,GAAG;QACZ;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,2BAA2B;YAClC,WAAW,EAAE,uDAAuD;YACpE,OAAO,EAAE;gBACP,4CAA4C;gBAC5C,+BAA+B;gBAC/B,8CAA8C;aAC/C;SACF;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,gCAAgC;YACvC,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE;gBACP,mDAAmD;gBACnD,6CAA6C;gBAC7C,kDAAkD;aACnD;SACF;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,4BAA4B;YACnC,WAAW,EAAE,iDAAiD;YAC9D,OAAO,EAAE;gBACP,iDAAiD;gBACjD,iCAAiC;gBACjC,yCAAyC;aAC1C;SACF;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,qBAAqB;YAC5B,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE;gBACP,8BAA8B;gBAC9B,iCAAiC;gBACjC,4BAA4B;aAC7B;SACF;KACF,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,EAAE;QACpC,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,aAAa,CAAC,CAAC;QAC3C,IAAI,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC5B,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC;QACD,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,4CAA4C,sCAA2B,EACrF,YAAG,SAAS,EAAC,0BAA0B,uDAA2C,EAElF,cAAK,SAAS,EAAC,WAAW,YACvB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,qBAAqB,OAEhB,IAAI,EACR,UAAU,EAAE,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAC1C,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,IAHlC,IAAI,CAAC,MAAM,CAIhB,CACH,CAAC,GACE,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/ChainOfThought/variations/02-with-details/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,MAAM,UAAU,yBAAyB;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAc,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9E,MAAM,KAAK,GAAG;QACZ;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,2BAA2B;YAClC,WAAW,EAAE,uDAAuD;YACpE,OAAO,EAAE;gBACP,4CAA4C;gBAC5C,+BAA+B;gBAC/B,8CAA8C;aAC/C;SACF;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,gCAAgC;YACvC,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE;gBACP,mDAAmD;gBACnD,6CAA6C;gBAC7C,kDAAkD;aACnD;SACF;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,4BAA4B;YACnC,WAAW,EAAE,iDAAiD;YAC9D,OAAO,EAAE;gBACP,iDAAiD;gBACjD,iCAAiC;gBACjC,yCAAyC;aAC1C;SACF;QACD;YACE,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,qBAAqB;YAC5B,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE;gBACP,8BAA8B;gBAC9B,iCAAiC;gBACjC,4BAA4B;aAC7B;SACF;KACF,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,EAAE;QACpC,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,aAAa,CAAC,CAAC;QAC3C,IAAI,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC5B,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC;QACD,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,4CAA4C,sCAA2B,EACrF,YAAG,SAAS,EAAC,0BAA0B,uDAA2C,EAElF,cAAK,SAAS,EAAC,WAAW,YACvB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,qBAAqB,OAEhB,IAAI,EACR,UAAU,EAAE,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAC1C,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,IAHlC,IAAI,CAAC,MAAM,CAIhB,CACH,CAAC,GACE,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/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/dist/elements/AI/Chat/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 declare const elementMetadata: ElementMetadata;
 export declare function getPreview(): React.ReactNode;
 export declare const metadata: {

package/dist/elements/AI/Chat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AI/Chat/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiBtD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CA2B5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AI/Chat/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAiBzD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CA2B5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/elements/AI/Chat/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsxs("div", { className: "flex flex-col h-full w-full bg-background-900 rounded-sm border border-background-700 overflow-hidden", children: [_jsxs("div", { className: "flex-1 overflow-y-auto space-y-3 p-3", children: [_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "bg-background-700 rounded px-3 py-2 max-w-xs text-xs text-foreground-400", children: "Hello, how can I help?" }) }), _jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "bg-accent-500 rounded px-3 py-2 max-w-xs text-xs text-foreground-50", children: "I need some assistance" }) }), _jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "bg-background-700 rounded px-3 py-2 max-w-xs text-xs text-foreground-400", children: "I'm here to help!" }) })] }), _jsx("div", { className: "border-t border-background-700 p-2 bg-background-800", children: _jsx("div", { className: "h-6 bg-background-700 rounded text-xs flex items-center px-2 text-foreground-400", children: "Type a message..." }) })] }));
+    return (_jsxs("div", { className: "flex flex-col h-full w-full bg-background-900 rounded-sm border border-background-700 overflow-hidden", children: [_jsxs("div", { className: "flex-1 overflow-y-auto space-y-3 p-3", children: [_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "bg-background-700 rounded px-3 py-2 max-w-xs text-sm text-foreground-400", children: "Hello, how can I help?" }) }), _jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "bg-accent-500 rounded px-3 py-2 max-w-xs text-sm text-foreground-50", children: "I need some assistance" }) }), _jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "bg-background-700 rounded px-3 py-2 max-w-xs text-sm text-foreground-400", children: "I'm here to help!" }) })] }), _jsx("div", { className: "border-t border-background-700 p-2 bg-background-800", children: _jsx("div", { className: "h-6 bg-background-700 rounded text-sm flex items-center px-2 text-foreground-400", children: "Type a message..." }) })] }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/AI/Chat/variations/01-basic/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/Chat/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAQ/C,MAAM,UAAU,SAAS;IACvB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAY;QAClD,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,oCAAoC,EAAE,MAAM,EAAE,IAAI,EAAE;QACxE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,6BAA6B,EAAE,MAAM,EAAE,MAAM,EAAE;QACnE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,mDAAmD,EAAE,MAAM,EAAE,IAAI,EAAE;KACxF,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC5C,MAAM,WAAW,GAAG;YAClB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/B,OAAO;YACP,MAAM,EAAE,MAAe;SACxB,CAAC;QACF,WAAW,CAAC,CAAC,GAAG,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;QAExC,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG;gBAChB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC/B,OAAO,EAAE,oDAAoD;gBAC7D,MAAM,EAAE,IAAa;aACtB,CAAC;YACF,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;QAC9C,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,aAAa,eACZ,cAAK,SAAS,EAAC,sCAAsC,YAClD,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,KAAC,WAAW,IAAkB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,IAA5D,OAAO,CAAC,EAAE,CAAsD,CACnF,CAAC,GACE,EACN,cAAK,SAAS,EAAC,oCAAoC,YACjD,KAAC,SAAS,IAAC,aAAa,EAAE,iBAAiB,GAAI,GAC3C,IACQ,GACZ,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/Chat/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAQlD,MAAM,UAAU,SAAS;IACvB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAY;QAClD,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,oCAAoC,EAAE,MAAM,EAAE,IAAI,EAAE;QACxE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,6BAA6B,EAAE,MAAM,EAAE,MAAM,EAAE;QACnE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,mDAAmD,EAAE,MAAM,EAAE,IAAI,EAAE;KACxF,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC5C,MAAM,WAAW,GAAG;YAClB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/B,OAAO;YACP,MAAM,EAAE,MAAe;SACxB,CAAC;QACF,WAAW,CAAC,CAAC,GAAG,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;QAExC,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG;gBAChB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC/B,OAAO,EAAE,oDAAoD;gBAC7D,MAAM,EAAE,IAAa;aACtB,CAAC;YACF,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;QAC9C,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,aAAa,eACZ,cAAK,SAAS,EAAC,sCAAsC,YAClD,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,KAAC,WAAW,IAAkB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,IAA5D,OAAO,CAAC,EAAE,CAAsD,CACnF,CAAC,GACE,EACN,cAAK,SAAS,EAAC,oCAAoC,YACjD,KAAC,SAAS,IAAC,aAAa,EAAE,iBAAiB,GAAI,GAC3C,IACQ,GACZ,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/elements/AI/Chat/variations/02-with-actions/index.js

@@ -34,6 +34,6 @@ export function ChatWithActions() {
         };
         setMessages([...messages, actionMessage]);
     };
-    return (_jsx("div", { className: "min-h-screen bg-background-950 p-8", children: _jsx("div", { className: "max-w-2xl mx-auto h-96", children: _jsxs(ChatContainerWithActions, { children: [_jsx("div", { className: "flex-1 overflow-y-auto space-y-4 p-4", children: messages.map((message) => (_jsx(ChatMessage, { message: message.content, sender: message.sender }, message.id))) }), _jsxs("div", { className: "border-t border-background-700 p-4 bg-background-700/50", children: [_jsxs("div", { className: "flex gap-2 mb-3 flex-wrap", children: [_jsx("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", children: "\uD83D\uDCCB Copy" }), _jsx("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", children: "\uD83D\uDCA1 Explain" }), _jsx("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", children: "\u2728 Refactor" })] }), _jsx(ChatInputWithActions, { onSendMessage: handleSendMessage })] })] }) }) }));
+    return (_jsx("div", { className: "min-h-screen bg-background-950 p-8", children: _jsx("div", { className: "max-w-2xl mx-auto h-96", children: _jsxs(ChatContainerWithActions, { children: [_jsx("div", { className: "flex-1 overflow-y-auto space-y-4 p-4", children: messages.map((message) => (_jsx(ChatMessage, { message: message.content, sender: message.sender }, message.id))) }), _jsxs("div", { className: "border-t border-background-700 p-4 bg-background-700/50", children: [_jsxs("div", { className: "flex gap-2 mb-3 flex-wrap", children: [_jsx("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-sm transition-colors", children: "\uD83D\uDCCB Copy" }), _jsx("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-sm transition-colors", children: "\uD83D\uDCA1 Explain" }), _jsx("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-sm transition-colors", children: "\u2728 Refactor" })] }), _jsx(ChatInputWithActions, { onSendMessage: handleSendMessage })] })] }) }) }));
 }
 //# sourceMappingURL=index.js.map

package/dist/elements/AI/Chat/variations/02-with-actions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/Chat/variations/02-with-actions/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAQrE,MAAM,UAAU,eAAe;IAC7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAY;QAClD,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,gDAAgD,EAAE,MAAM,EAAE,IAAI,EAAE;QACpF,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,iCAAiC,EAAE,MAAM,EAAE,MAAM,EAAE;QACvE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,wEAAwE,EAAE,MAAM,EAAE,IAAI,EAAE;KAC7G,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC5C,MAAM,WAAW,GAAG;YAClB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/B,OAAO;YACP,MAAM,EAAE,MAAe;SACxB,CAAC;QACF,WAAW,CAAC,CAAC,GAAG,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;QAExC,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG;gBAChB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC/B,OAAO,EAAE,iDAAiD;gBAC1D,MAAM,EAAE,IAAa;aACtB,CAAC;YACF,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;QAC9C,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,EAAE;QACtC,MAAM,aAAa,GAAG;YACpB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/B,OAAO,EAAE,YAAY,MAAM,GAAG;YAC9B,MAAM,EAAE,MAAe;SACxB,CAAC;QACF,WAAW,CAAC,CAAC,GAAG,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,wBAAwB,eACvB,cAAK,SAAS,EAAC,sCAAsC,YAClD,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,KAAC,WAAW,IAAkB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,IAA5D,OAAO,CAAC,EAAE,CAAsD,CACnF,CAAC,GACE,EACN,eAAK,SAAS,EAAC,yDAAyD,aACtE,eAAK,SAAS,EAAC,2BAA2B,aACxC,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,EACxC,SAAS,EAAC,qIAAqI,kCAGxI,EACT,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EACtC,SAAS,EAAC,qIAAqI,qCAGxI,EACT,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EACvC,SAAS,EAAC,qIAAqI,gCAGxI,IACL,EACN,KAAC,oBAAoB,IAAC,aAAa,EAAE,iBAAiB,GAAI,IACtD,IACmB,GACvB,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/AI/Chat/variations/02-with-actions/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAQxE,MAAM,UAAU,eAAe;IAC7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAY;QAClD,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,gDAAgD,EAAE,MAAM,EAAE,IAAI,EAAE;QACpF,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,iCAAiC,EAAE,MAAM,EAAE,MAAM,EAAE;QACvE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,wEAAwE,EAAE,MAAM,EAAE,IAAI,EAAE;KAC7G,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC5C,MAAM,WAAW,GAAG;YAClB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/B,OAAO;YACP,MAAM,EAAE,MAAe;SACxB,CAAC;QACF,WAAW,CAAC,CAAC,GAAG,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;QAExC,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG;gBAChB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC/B,OAAO,EAAE,iDAAiD;gBAC1D,MAAM,EAAE,IAAa;aACtB,CAAC;YACF,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;QAC9C,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,EAAE;QACtC,MAAM,aAAa,GAAG;YACpB,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/B,OAAO,EAAE,YAAY,MAAM,GAAG;YAC9B,MAAM,EAAE,MAAe;SACxB,CAAC;QACF,WAAW,CAAC,CAAC,GAAG,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,wBAAwB,eACvB,cAAK,SAAS,EAAC,sCAAsC,YAClD,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,KAAC,WAAW,IAAkB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,IAA5D,OAAO,CAAC,EAAE,CAAsD,CACnF,CAAC,GACE,EACN,eAAK,SAAS,EAAC,yDAAyD,aACtE,eAAK,SAAS,EAAC,2BAA2B,aACxC,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,EACxC,SAAS,EAAC,qIAAqI,kCAGxI,EACT,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EACtC,SAAS,EAAC,qIAAqI,qCAGxI,EACT,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EACvC,SAAS,EAAC,qIAAqI,gCAGxI,IACL,EACN,KAAC,oBAAoB,IAAC,aAAa,EAAE,iBAAiB,GAAI,IACtD,IACmB,GACvB,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/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/dist/elements/Documentation/CopyPage/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 declare const elementMetadata: ElementMetadata;
 export declare function getPreview(): React.ReactNode;
 export declare const metadata: {

package/dist/elements/Documentation/CopyPage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Documentation/CopyPage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiBtD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAS5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Documentation/CopyPage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAiBzD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAS5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/elements/Documentation/CopyPage/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsx("div", { className: "flex items-center justify-center w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("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", children: [_jsx("span", { children: "\uD83D\uDCCB" }), "Copy"] }) }));
+    return (_jsx("div", { className: "flex items-center justify-center w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("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", children: [_jsx("span", { children: "\uD83D\uDCCB" }), "Copy"] }) }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/Documentation/CopyPage/variations/01-basic/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/Documentation/CopyPage/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAI,SAAS,EAAC,uCAAuC,mCAAwB,EAC7E,KAAC,UAAU,KAAG,IACV,EAEN,cAAK,SAAS,EAAC,+DAA+D,YAC5E,eAAK,SAAS,EAAC,8BAA8B,aAC3C,8BACE,aAAI,SAAS,EAAC,+CAA+C,yBAAc,EAC3E,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,EAEV,8BACE,aAAI,SAAS,EAAC,+CAA+C,gCAAqB,EAClF,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,EAEV,8BACE,aAAI,SAAS,EAAC,+CAA+C,yBAAc,EAC3E,eAAK,SAAS,EAAC,WAAW,aACxB,eAAK,SAAS,EAAC,YAAY,aACzB,cAAK,SAAS,EAAC,yDAAyD,GAAG,EAC3E,cAAK,SAAS,EAAC,WAAW,YACxB,cAAK,SAAS,EAAC,+CAA+C,GAAG,GAC7D,IACF,EACN,eAAK,SAAS,EAAC,YAAY,aACzB,cAAK,SAAS,EAAC,yDAAyD,GAAG,EAC3E,cAAK,SAAS,EAAC,WAAW,YACxB,cAAK,SAAS,EAAC,+CAA+C,GAAG,GAC7D,IACF,IACF,IACE,IACN,GACF,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/Documentation/CopyPage/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAI,SAAS,EAAC,uCAAuC,mCAAwB,EAC7E,KAAC,UAAU,KAAG,IACV,EAEN,cAAK,SAAS,EAAC,+DAA+D,YAC5E,eAAK,SAAS,EAAC,8BAA8B,aAC3C,8BACE,aAAI,SAAS,EAAC,+CAA+C,yBAAc,EAC3E,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,EAEV,8BACE,aAAI,SAAS,EAAC,+CAA+C,gCAAqB,EAClF,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,EAEV,8BACE,aAAI,SAAS,EAAC,+CAA+C,yBAAc,EAC3E,eAAK,SAAS,EAAC,WAAW,aACxB,eAAK,SAAS,EAAC,YAAY,aACzB,cAAK,SAAS,EAAC,yDAAyD,GAAG,EAC3E,cAAK,SAAS,EAAC,WAAW,YACxB,cAAK,SAAS,EAAC,+CAA+C,GAAG,GAC7D,IACF,EACN,eAAK,SAAS,EAAC,YAAY,aACzB,cAAK,SAAS,EAAC,yDAAyD,GAAG,EAC3E,cAAK,SAAS,EAAC,WAAW,YACxB,cAAK,SAAS,EAAC,+CAA+C,GAAG,GAC7D,IACF,IACF,IACE,IACN,GACF,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/elements/Documentation/CopyPage/variations/02-with-success/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/Documentation/CopyPage/variations/02-with-success/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,MAAM,UAAU,mBAAmB;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEtE,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,eAAe,CAAC,mCAAmC,CAAC,CAAC;QACrD,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAI,SAAS,EAAC,uCAAuC,2CAAgC,EACrF,KAAC,mBAAmB,IAAC,aAAa,EAAE,iBAAiB,GAAI,IACrD,EAEL,YAAY,IAAI,CACf,eAAK,SAAS,EAAC,2HAA2H,aACxI,oCAAc,EACd,yBAAO,YAAY,GAAQ,IACvB,CACP,EAED,cAAK,SAAS,EAAC,+DAA+D,YAC5E,eAAK,SAAS,EAAC,WAAW,aACxB,8BACE,aAAI,SAAS,EAAC,+CAA+C,kCAAuB,EACpF,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,EAEV,cAAK,SAAS,EAAC,qCAAqC,GAAG,EAEvD,8BACE,aAAI,SAAS,EAAC,+CAA+C,kCAAuB,EACpF,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,EAEV,cAAK,SAAS,EAAC,qCAAqC,GAAG,EAEvD,8BACE,aAAI,SAAS,EAAC,+CAA+C,kCAAuB,EACpF,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,IACN,GACF,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/Documentation/CopyPage/variations/02-with-success/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAEtE,MAAM,UAAU,mBAAmB;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEtE,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,eAAe,CAAC,mCAAmC,CAAC,CAAC;QACrD,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,mBAAmB,aAChC,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAI,SAAS,EAAC,uCAAuC,2CAAgC,EACrF,KAAC,mBAAmB,IAAC,aAAa,EAAE,iBAAiB,GAAI,IACrD,EAEL,YAAY,IAAI,CACf,eAAK,SAAS,EAAC,2HAA2H,aACxI,oCAAc,EACd,yBAAO,YAAY,GAAQ,IACvB,CACP,EAED,cAAK,SAAS,EAAC,+DAA+D,YAC5E,eAAK,SAAS,EAAC,WAAW,aACxB,8BACE,aAAI,SAAS,EAAC,+CAA+C,kCAAuB,EACpF,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,EAEV,cAAK,SAAS,EAAC,qCAAqC,GAAG,EAEvD,8BACE,aAAI,SAAS,EAAC,+CAA+C,kCAAuB,EACpF,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,EAEV,cAAK,SAAS,EAAC,qCAAqC,GAAG,EAEvD,8BACE,aAAI,SAAS,EAAC,+CAA+C,kCAAuB,EACpF,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,IACE,IACN,GACF,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/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/dist/elements/Documentation/NextArticle/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 declare const elementMetadata: ElementMetadata;
 export declare function getPreview(): React.ReactNode;
 export declare const metadata: {

package/dist/elements/Documentation/NextArticle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Documentation/NextArticle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiBtD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAU5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Documentation/NextArticle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAiBzD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAU5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/elements/Documentation/NextArticle/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsxs("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", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-xs text-foreground-400 mb-1", children: "Next Article" }), _jsx("div", { className: "text-sm font-medium text-foreground-200", children: "Advanced Setup Guide" })] }), _jsx("div", { className: "text-foreground-400", children: "\u2192" })] }));
+    return (_jsxs("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", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm text-foreground-400 mb-1", children: "Next Article" }), _jsx("div", { className: "text-sm font-medium text-foreground-200", children: "Advanced Setup Guide" })] }), _jsx("div", { className: "text-foreground-400", children: "\u2192" })] }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/Documentation/NextArticle/variations/01-basic/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/Documentation/NextArticle/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,UAAU,gBAAgB;IAC9B,MAAM,QAAQ,GAAG;QACf;YACE,KAAK,EAAE,iCAAiC;YACxC,WAAW,EAAE,iEAAiE;YAC9E,IAAI,EAAE,kBAAkB;SACzB;QACD;YACE,KAAK,EAAE,6BAA6B;YACpC,WAAW,EAAE,oEAAoE;YACjF,IAAI,EAAE,WAAW;SAClB;KACF,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,8BAA8B,YAC3C,0BACE,aAAI,SAAS,EAAC,4CAA4C,uCAA4B,EACtF,cAAK,SAAS,EAAC,WAAW,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,0BACE,cAAK,SAAS,EAAC,oEAAoE,YACjF,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,GACF,EACN,KAAC,eAAe,OAAK,OAAO,GAAI,KARxB,KAAK,CAST,CACP,CAAC,GACE,IACF,GACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/Documentation/NextArticle/variations/01-basic/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,UAAU,gBAAgB;IAC9B,MAAM,QAAQ,GAAG;QACf;YACE,KAAK,EAAE,iCAAiC;YACxC,WAAW,EAAE,iEAAiE;YAC9E,IAAI,EAAE,kBAAkB;SACzB;QACD;YACE,KAAK,EAAE,6BAA6B;YACpC,WAAW,EAAE,oEAAoE;YACjF,IAAI,EAAE,WAAW;SAClB;KACF,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,8BAA8B,YAC3C,0BACE,aAAI,SAAS,EAAC,4CAA4C,uCAA4B,EACtF,cAAK,SAAS,EAAC,WAAW,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,0BACE,cAAK,SAAS,EAAC,oEAAoE,YACjF,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,GACF,EACN,KAAC,eAAe,OAAK,OAAO,GAAI,KARxB,KAAK,CAST,CACP,CAAC,GACE,IACF,GACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function NextArticleCard({ title, description, href }) {
-    return (_jsx("a", { href: href, 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", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-xs text-foreground-400 mb-1", children: "Next Article" }), _jsx("h3", { className: "text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors", children: title }), _jsx("p", { className: "text-sm text-foreground-400", children: description })] }), _jsx("div", { className: "ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0", children: "\u2192" })] }) }));
+    return (_jsx("a", { href: href, 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", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm text-foreground-400 mb-1", children: "Next Article" }), _jsx("h3", { className: "text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors", children: title }), _jsx("p", { className: "text-sm text-foreground-400", children: description })] }), _jsx("div", { className: "ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0", children: "\u2192" })] }) }));
 }
 //# sourceMappingURL=NextArticleCard.js.map

package/dist/elements/Documentation/NextArticle/variations/02-with-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/Documentation/NextArticle/variations/02-with-icon/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE3E,MAAM,UAAU,mBAAmB;IACjC,MAAM,QAAQ,GAAG;QACf;YACE,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,mBAAmB;YAC1B,WAAW,EAAE,6DAA6D;YAC1E,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,uBAAuB;YAC9B,WAAW,EAAE,oEAAoE;YACjF,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,UAAU;SACrB;KACF,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,8BAA8B,aAC3C,aAAI,SAAS,EAAC,4CAA4C,iCAAsB,EAEhF,cAAK,SAAS,EAAC,WAAW,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,uBAAuB,OAAiB,OAAO,IAAlB,KAAK,CAAiB,CACrD,CAAC,GACE,EAEN,cAAK,SAAS,EAAC,qEAAqE,YAClF,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,GACF,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/Documentation/NextArticle/variations/02-with-icon/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,MAAM,UAAU,mBAAmB;IACjC,MAAM,QAAQ,GAAG;QACf;YACE,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,mBAAmB;YAC1B,WAAW,EAAE,6DAA6D;YAC1E,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,uBAAuB;YAC9B,WAAW,EAAE,oEAAoE;YACjF,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,UAAU;SACrB;KACF,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAK,SAAS,EAAC,8BAA8B,aAC3C,aAAI,SAAS,EAAC,4CAA4C,iCAAsB,EAEhF,cAAK,SAAS,EAAC,WAAW,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,uBAAuB,OAAiB,OAAO,IAAlB,KAAK,CAAiB,CACrD,CAAC,GACE,EAEN,cAAK,SAAS,EAAC,qEAAqE,YAClF,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,cAAK,SAAS,EAAC,gDAAgD,GAAG,IAC9D,GACF,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function NextArticleWithIconCard({ icon, title, description, category, href, }) {
-    return (_jsxs("a", { href: href, 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", children: [_jsx("div", { className: "text-3xl flex-shrink-0 mt-1", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-xs text-accent-400 font-medium mb-1", children: category }), _jsx("h3", { className: "text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors", children: title }), _jsx("p", { className: "text-sm text-foreground-400", children: description })] }), _jsx("div", { className: "text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg", children: "\u2192" })] }));
+    return (_jsxs("a", { href: href, 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", children: [_jsx("div", { className: "text-3xl flex-shrink-0 mt-1", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm text-accent-400 font-medium mb-1", children: category }), _jsx("h3", { className: "text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors", children: title }), _jsx("p", { className: "text-sm text-foreground-400", children: description })] }), _jsx("div", { className: "text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg", children: "\u2192" })] }));
 }
 //# sourceMappingURL=NextArticleWithIconCard.js.map

package/dist/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/dist/elements/Documentation/TOC/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 declare const elementMetadata: ElementMetadata;
 export declare function getPreview(): React.ReactNode;
 export declare const metadata: {

package/dist/elements/Documentation/TOC/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Documentation/TOC/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiBtD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAc5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Documentation/TOC/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAiBzD,QAAA,MAAM,eAAe,EAAE,eAQtB,CAAC;AAEF,wBAAgB,UAAU,IAAI,KAAK,CAAC,SAAS,CAc5C;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAAe,CAAC;AACrC,eAAe,eAAe,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}