@intlayer/design-system 2.0.13 → 3.0.0

package/dist/components/IDE/CodeRender.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeRender.mjs","sources":["../../../../../../node_modules/.pnpm/react-syntax-highlighter@15.5.0_react@18.3.1/node_modules/react-syntax-highlighter/dist/esm/styles/prism/okaidia.js","../../../../../../node_modules/.pnpm/react-syntax-highlighter@15.5.0_react@18.3.1/node_modules/react-syntax-highlighter/dist/esm/styles/prism/coldark-cold.js","../../../src/components/IDE/CodeRender.tsx"],"sourcesContent":["export default {\n  \"code[class*=\\\"language-\\\"]\": {\n    \"color\": \"#f8f8f2\",\n    \"background\": \"none\",\n    \"textShadow\": \"0 1px rgba(0, 0, 0, 0.3)\",\n    \"fontFamily\": \"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace\",\n    \"fontSize\": \"1em\",\n    \"textAlign\": \"left\",\n    \"whiteSpace\": \"pre\",\n    \"wordSpacing\": \"normal\",\n    \"wordBreak\": \"normal\",\n    \"wordWrap\": \"normal\",\n    \"lineHeight\": \"1.5\",\n    \"MozTabSize\": \"4\",\n    \"OTabSize\": \"4\",\n    \"tabSize\": \"4\",\n    \"WebkitHyphens\": \"none\",\n    \"MozHyphens\": \"none\",\n    \"msHyphens\": \"none\",\n    \"hyphens\": \"none\"\n  },\n  \"pre[class*=\\\"language-\\\"]\": {\n    \"color\": \"#f8f8f2\",\n    \"background\": \"#272822\",\n    \"textShadow\": \"0 1px rgba(0, 0, 0, 0.3)\",\n    \"fontFamily\": \"Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace\",\n    \"fontSize\": \"1em\",\n    \"textAlign\": \"left\",\n    \"whiteSpace\": \"pre\",\n    \"wordSpacing\": \"normal\",\n    \"wordBreak\": \"normal\",\n    \"wordWrap\": \"normal\",\n    \"lineHeight\": \"1.5\",\n    \"MozTabSize\": \"4\",\n    \"OTabSize\": \"4\",\n    \"tabSize\": \"4\",\n    \"WebkitHyphens\": \"none\",\n    \"MozHyphens\": \"none\",\n    \"msHyphens\": \"none\",\n    \"hyphens\": \"none\",\n    \"padding\": \"1em\",\n    \"margin\": \".5em 0\",\n    \"overflow\": \"auto\",\n    \"borderRadius\": \"0.3em\"\n  },\n  \":not(pre) > code[class*=\\\"language-\\\"]\": {\n    \"background\": \"#272822\",\n    \"padding\": \".1em\",\n    \"borderRadius\": \".3em\",\n    \"whiteSpace\": \"normal\"\n  },\n  \"comment\": {\n    \"color\": \"#8292a2\"\n  },\n  \"prolog\": {\n    \"color\": \"#8292a2\"\n  },\n  \"doctype\": {\n    \"color\": \"#8292a2\"\n  },\n  \"cdata\": {\n    \"color\": \"#8292a2\"\n  },\n  \"punctuation\": {\n    \"color\": \"#f8f8f2\"\n  },\n  \"namespace\": {\n    \"Opacity\": \".7\"\n  },\n  \"property\": {\n    \"color\": \"#f92672\"\n  },\n  \"tag\": {\n    \"color\": \"#f92672\"\n  },\n  \"constant\": {\n    \"color\": \"#f92672\"\n  },\n  \"symbol\": {\n    \"color\": \"#f92672\"\n  },\n  \"deleted\": {\n    \"color\": \"#f92672\"\n  },\n  \"boolean\": {\n    \"color\": \"#ae81ff\"\n  },\n  \"number\": {\n    \"color\": \"#ae81ff\"\n  },\n  \"selector\": {\n    \"color\": \"#a6e22e\"\n  },\n  \"attr-name\": {\n    \"color\": \"#a6e22e\"\n  },\n  \"string\": {\n    \"color\": \"#a6e22e\"\n  },\n  \"char\": {\n    \"color\": \"#a6e22e\"\n  },\n  \"builtin\": {\n    \"color\": \"#a6e22e\"\n  },\n  \"inserted\": {\n    \"color\": \"#a6e22e\"\n  },\n  \"operator\": {\n    \"color\": \"#f8f8f2\"\n  },\n  \"entity\": {\n    \"color\": \"#f8f8f2\",\n    \"cursor\": \"help\"\n  },\n  \"url\": {\n    \"color\": \"#f8f8f2\"\n  },\n  \".language-css .token.string\": {\n    \"color\": \"#f8f8f2\"\n  },\n  \".style .token.string\": {\n    \"color\": \"#f8f8f2\"\n  },\n  \"variable\": {\n    \"color\": \"#f8f8f2\"\n  },\n  \"atrule\": {\n    \"color\": \"#e6db74\"\n  },\n  \"attr-value\": {\n    \"color\": \"#e6db74\"\n  },\n  \"function\": {\n    \"color\": \"#e6db74\"\n  },\n  \"class-name\": {\n    \"color\": \"#e6db74\"\n  },\n  \"keyword\": {\n    \"color\": \"#66d9ef\"\n  },\n  \"regex\": {\n    \"color\": \"#fd971f\"\n  },\n  \"important\": {\n    \"color\": \"#fd971f\",\n    \"fontWeight\": \"bold\"\n  },\n  \"bold\": {\n    \"fontWeight\": \"bold\"\n  },\n  \"italic\": {\n    \"fontStyle\": \"italic\"\n  }\n};","export default {\n  \"code[class*=\\\"language-\\\"]\": {\n    \"color\": \"#111b27\",\n    \"background\": \"none\",\n    \"fontFamily\": \"Consolas, Monaco, \\\"Andale Mono\\\", \\\"Ubuntu Mono\\\", monospace\",\n    \"textAlign\": \"left\",\n    \"whiteSpace\": \"pre\",\n    \"wordSpacing\": \"normal\",\n    \"wordBreak\": \"normal\",\n    \"wordWrap\": \"normal\",\n    \"lineHeight\": \"1.5\",\n    \"MozTabSize\": \"4\",\n    \"OTabSize\": \"4\",\n    \"tabSize\": \"4\",\n    \"WebkitHyphens\": \"none\",\n    \"MozHyphens\": \"none\",\n    \"msHyphens\": \"none\",\n    \"hyphens\": \"none\"\n  },\n  \"pre[class*=\\\"language-\\\"]\": {\n    \"color\": \"#111b27\",\n    \"background\": \"#e3eaf2\",\n    \"fontFamily\": \"Consolas, Monaco, \\\"Andale Mono\\\", \\\"Ubuntu Mono\\\", monospace\",\n    \"textAlign\": \"left\",\n    \"whiteSpace\": \"pre\",\n    \"wordSpacing\": \"normal\",\n    \"wordBreak\": \"normal\",\n    \"wordWrap\": \"normal\",\n    \"lineHeight\": \"1.5\",\n    \"MozTabSize\": \"4\",\n    \"OTabSize\": \"4\",\n    \"tabSize\": \"4\",\n    \"WebkitHyphens\": \"none\",\n    \"MozHyphens\": \"none\",\n    \"msHyphens\": \"none\",\n    \"hyphens\": \"none\",\n    \"padding\": \"1em\",\n    \"margin\": \"0.5em 0\",\n    \"overflow\": \"auto\"\n  },\n  \"pre[class*=\\\"language-\\\"]::-moz-selection\": {\n    \"background\": \"#8da1b9\"\n  },\n  \"pre[class*=\\\"language-\\\"] ::-moz-selection\": {\n    \"background\": \"#8da1b9\"\n  },\n  \"code[class*=\\\"language-\\\"]::-moz-selection\": {\n    \"background\": \"#8da1b9\"\n  },\n  \"code[class*=\\\"language-\\\"] ::-moz-selection\": {\n    \"background\": \"#8da1b9\"\n  },\n  \"pre[class*=\\\"language-\\\"]::selection\": {\n    \"background\": \"#8da1b9\"\n  },\n  \"pre[class*=\\\"language-\\\"] ::selection\": {\n    \"background\": \"#8da1b9\"\n  },\n  \"code[class*=\\\"language-\\\"]::selection\": {\n    \"background\": \"#8da1b9\"\n  },\n  \"code[class*=\\\"language-\\\"] ::selection\": {\n    \"background\": \"#8da1b9\"\n  },\n  \":not(pre) > code[class*=\\\"language-\\\"]\": {\n    \"background\": \"#e3eaf2\",\n    \"padding\": \"0.1em 0.3em\",\n    \"borderRadius\": \"0.3em\",\n    \"whiteSpace\": \"normal\"\n  },\n  \"comment\": {\n    \"color\": \"#3c526d\"\n  },\n  \"prolog\": {\n    \"color\": \"#3c526d\"\n  },\n  \"doctype\": {\n    \"color\": \"#3c526d\"\n  },\n  \"cdata\": {\n    \"color\": \"#3c526d\"\n  },\n  \"punctuation\": {\n    \"color\": \"#111b27\"\n  },\n  \"delimiter.important\": {\n    \"color\": \"#006d6d\",\n    \"fontWeight\": \"inherit\"\n  },\n  \"selector.parent\": {\n    \"color\": \"#006d6d\"\n  },\n  \"tag\": {\n    \"color\": \"#006d6d\"\n  },\n  \"tag.punctuation\": {\n    \"color\": \"#006d6d\"\n  },\n  \"attr-name\": {\n    \"color\": \"#755f00\"\n  },\n  \"boolean\": {\n    \"color\": \"#755f00\"\n  },\n  \"boolean.important\": {\n    \"color\": \"#755f00\"\n  },\n  \"number\": {\n    \"color\": \"#755f00\"\n  },\n  \"constant\": {\n    \"color\": \"#755f00\"\n  },\n  \"selector.attribute\": {\n    \"color\": \"#755f00\"\n  },\n  \"class-name\": {\n    \"color\": \"#005a8e\"\n  },\n  \"key\": {\n    \"color\": \"#005a8e\"\n  },\n  \"parameter\": {\n    \"color\": \"#005a8e\"\n  },\n  \"property\": {\n    \"color\": \"#005a8e\"\n  },\n  \"property-access\": {\n    \"color\": \"#005a8e\"\n  },\n  \"variable\": {\n    \"color\": \"#005a8e\"\n  },\n  \"attr-value\": {\n    \"color\": \"#116b00\"\n  },\n  \"inserted\": {\n    \"color\": \"#116b00\"\n  },\n  \"color\": {\n    \"color\": \"#116b00\"\n  },\n  \"selector.value\": {\n    \"color\": \"#116b00\"\n  },\n  \"string\": {\n    \"color\": \"#116b00\"\n  },\n  \"string.url-link\": {\n    \"color\": \"#116b00\"\n  },\n  \"builtin\": {\n    \"color\": \"#af00af\"\n  },\n  \"keyword-array\": {\n    \"color\": \"#af00af\"\n  },\n  \"package\": {\n    \"color\": \"#af00af\"\n  },\n  \"regex\": {\n    \"color\": \"#af00af\"\n  },\n  \"function\": {\n    \"color\": \"#7c00aa\"\n  },\n  \"selector.class\": {\n    \"color\": \"#7c00aa\"\n  },\n  \"selector.id\": {\n    \"color\": \"#7c00aa\"\n  },\n  \"atrule.rule\": {\n    \"color\": \"#a04900\"\n  },\n  \"combinator\": {\n    \"color\": \"#a04900\"\n  },\n  \"keyword\": {\n    \"color\": \"#a04900\"\n  },\n  \"operator\": {\n    \"color\": \"#a04900\"\n  },\n  \"pseudo-class\": {\n    \"color\": \"#a04900\"\n  },\n  \"pseudo-element\": {\n    \"color\": \"#a04900\"\n  },\n  \"selector\": {\n    \"color\": \"#a04900\"\n  },\n  \"unit\": {\n    \"color\": \"#a04900\"\n  },\n  \"deleted\": {\n    \"color\": \"#c22f2e\"\n  },\n  \"important\": {\n    \"color\": \"#c22f2e\",\n    \"fontWeight\": \"bold\"\n  },\n  \"keyword-this\": {\n    \"color\": \"#005a8e\",\n    \"fontWeight\": \"bold\"\n  },\n  \"this\": {\n    \"color\": \"#005a8e\",\n    \"fontWeight\": \"bold\"\n  },\n  \"bold\": {\n    \"fontWeight\": \"bold\"\n  },\n  \"italic\": {\n    \"fontStyle\": \"italic\"\n  },\n  \"entity\": {\n    \"cursor\": \"help\"\n  },\n  \".language-markdown .token.title\": {\n    \"color\": \"#005a8e\",\n    \"fontWeight\": \"bold\"\n  },\n  \".language-markdown .token.title .token.punctuation\": {\n    \"color\": \"#005a8e\",\n    \"fontWeight\": \"bold\"\n  },\n  \".language-markdown .token.blockquote.punctuation\": {\n    \"color\": \"#af00af\"\n  },\n  \".language-markdown .token.code\": {\n    \"color\": \"#006d6d\"\n  },\n  \".language-markdown .token.hr.punctuation\": {\n    \"color\": \"#005a8e\"\n  },\n  \".language-markdown .token.url > .token.content\": {\n    \"color\": \"#116b00\"\n  },\n  \".language-markdown .token.url-link\": {\n    \"color\": \"#755f00\"\n  },\n  \".language-markdown .token.list.punctuation\": {\n    \"color\": \"#af00af\"\n  },\n  \".language-markdown .token.table-header\": {\n    \"color\": \"#111b27\"\n  },\n  \".language-json .token.operator\": {\n    \"color\": \"#111b27\"\n  },\n  \".language-scss .token.variable\": {\n    \"color\": \"#006d6d\"\n  },\n  \"token.tab:not(:empty):before\": {\n    \"color\": \"#3c526d\"\n  },\n  \"token.cr:before\": {\n    \"color\": \"#3c526d\"\n  },\n  \"token.lf:before\": {\n    \"color\": \"#3c526d\"\n  },\n  \"token.space:before\": {\n    \"color\": \"#3c526d\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#005a8e\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#005a8e\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#005a8eda\",\n    \"textDecoration\": \"none\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#005a8eda\",\n    \"textDecoration\": \"none\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#005a8eda\",\n    \"textDecoration\": \"none\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#005a8eda\",\n    \"textDecoration\": \"none\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#3c526d\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#3c526d\"\n  },\n  \"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus\": {\n    \"color\": \"#e3eaf2\",\n    \"background\": \"#3c526d\"\n  },\n  \".line-highlight.line-highlight\": {\n    \"background\": \"linear-gradient(to right, #8da1b92f 70%, #8da1b925)\"\n  },\n  \".line-highlight.line-highlight:before\": {\n    \"backgroundColor\": \"#3c526d\",\n    \"color\": \"#e3eaf2\",\n    \"boxShadow\": \"0 1px #8da1b9\"\n  },\n  \".line-highlight.line-highlight[data-end]:after\": {\n    \"backgroundColor\": \"#3c526d\",\n    \"color\": \"#e3eaf2\",\n    \"boxShadow\": \"0 1px #8da1b9\"\n  },\n  \"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before\": {\n    \"backgroundColor\": \"#3c526d1f\"\n  },\n  \".line-numbers.line-numbers .line-numbers-rows\": {\n    \"borderRight\": \"1px solid #8da1b97a\",\n    \"background\": \"#d0dae77a\"\n  },\n  \".line-numbers .line-numbers-rows > span:before\": {\n    \"color\": \"#3c526dda\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-1\": {\n    \"color\": \"#755f00\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-5\": {\n    \"color\": \"#755f00\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-9\": {\n    \"color\": \"#755f00\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-2\": {\n    \"color\": \"#af00af\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-6\": {\n    \"color\": \"#af00af\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-10\": {\n    \"color\": \"#af00af\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-3\": {\n    \"color\": \"#005a8e\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-7\": {\n    \"color\": \"#005a8e\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-11\": {\n    \"color\": \"#005a8e\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-4\": {\n    \"color\": \"#7c00aa\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-8\": {\n    \"color\": \"#7c00aa\"\n  },\n  \".rainbow-braces .token.token.punctuation.brace-level-12\": {\n    \"color\": \"#7c00aa\"\n  },\n  \"pre.diff-highlight > code .token.token.deleted:not(.prefix)\": {\n    \"backgroundColor\": \"#c22f2e1f\"\n  },\n  \"pre > code.diff-highlight .token.token.deleted:not(.prefix)\": {\n    \"backgroundColor\": \"#c22f2e1f\"\n  },\n  \"pre.diff-highlight > code .token.token.inserted:not(.prefix)\": {\n    \"backgroundColor\": \"#116b001f\"\n  },\n  \"pre > code.diff-highlight .token.token.inserted:not(.prefix)\": {\n    \"backgroundColor\": \"#116b001f\"\n  },\n  \".command-line .command-line-prompt\": {\n    \"borderRight\": \"1px solid #8da1b97a\"\n  },\n  \".command-line .command-line-prompt > span:before\": {\n    \"color\": \"#3c526dda\"\n  }\n};","'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport {\n  type FC,\n  useEffect,\n  useState,\n  lazy,\n  Suspense,\n  type ReactNode,\n} from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport {\n  okaidia,\n  coldarkCold,\n} from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst SyntaxHighlighter = lazy(() =>\n  import('react-syntax-highlighter').then((module) => ({\n    default: module.Prism,\n  }))\n);\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n};\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers = true,\n  ...props\n}) => {\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setCopied(false);\n    }, 1000);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      <CopyToClipboard text={children} onCopy={() => setCopied(true)}>\n        <button className=\"absolute right-3 top-3\" aria-label=\"Copy code\">\n          {copied ? (\n            <CopyCheckIcon className=\"size-4\" />\n          ) : (\n            <CopyIcon className=\"size-4\" />\n          )}\n        </button>\n      </CopyToClipboard>\n      <div className=\"grid size-full grid-cols-[0px] overflow-auto p-3\">\n        <Suspense fallback={<Loader />}>\n          <SyntaxHighlighter\n            customStyle={{\n              display: undefined,\n              overflowX: 'auto',\n              overflowY: 'auto',\n              padding: undefined,\n              color: undefined,\n              background: 'inherit',\n              margin: undefined,\n            }}\n            PreTag={(props: { children: ReactNode }) => props.children}\n            language={language ?? 'javascript'}\n            style={isDarkMode ? okaidia : coldarkCold}\n            showLineNumbers={showLineNumbers}\n            {...props}\n          >\n            {String(children).replace(/\\n$/, '')}\n          </SyntaxHighlighter>\n        </Suspense>\n      </div>\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","props"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/components/IDE/FileList.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const components_Container_index = require("../Container/index.cjs");
+const components_IDE_FileTree = require("./FileTree.cjs");
+const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  components_Container_index.Container,
+  {
+    className: "flex size-full flex-col justify-start overflow-scroll shadow-lg",
+    roundedSize: "3xl",
+    transparency: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-green-500" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "relative flex size-full flex-1 flex-row justify-start shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 size-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex size-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_IDE_FileTree.FileTree, { filesPaths: filePaths }) }) }) })
+    ]
+  }
+);
+exports.FileList = FileList;
+//# sourceMappingURL=FileList.cjs.map

package/dist/components/IDE/FileList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.cjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { HTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-scroll shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":["jsxs","Container","jsx","FileTree"],"mappings":";;;;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAAA,2BAAA,kBAAA;AAAA,EAACC,2BAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAAA,kBAAAA,IAAC,SAAI,WAAU,sJACb,UAACF,2BAAA,kBAAA,KAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAACE,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChDA,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnDA,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,uDACC,OAAI,EAAA,WAAU,mEACb,UAACA,iDAAA,OAAA,EAAI,WAAU,mCACb,UAAAA,2BAAA,kBAAA,IAAC,OAAI,EAAA,WAAU,kBACb,UAACA,2BAAA,kBAAA,IAAAC,wBAAA,UAAA,EAAS,YAAY,UAAW,CAAA,GACnC,GACF,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;;"}

package/dist/components/IDE/FileList.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, FC } from 'react';
+
+export type FileListProps = {
+    filePaths: string[];
+} & HTMLAttributes<HTMLDivElement>;
+export declare const FileList: FC<FileListProps>;
+//# sourceMappingURL=FileList.d.ts.map

package/dist/components/IDE/FileList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/FileList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAsBtC,CAAC"}

package/dist/components/IDE/FileList.mjs

@@ -0,0 +1,24 @@
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { Container } from "../Container/index.mjs";
+import { FileTree } from "./FileTree.mjs";
+const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  Container,
+  {
+    className: "flex size-full flex-col justify-start overflow-scroll shadow-lg",
+    roundedSize: "3xl",
+    transparency: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-green-500" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex size-full flex-1 flex-row justify-start shadow-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 size-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileTree, { filesPaths: filePaths }) }) }) })
+    ]
+  }
+);
+export {
+  FileList
+};
+//# sourceMappingURL=FileList.mjs.map

package/dist/components/IDE/FileList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.mjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { HTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-scroll shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAAA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,kCAAAA,IAAC,SAAI,WAAU,sJACb,UAACD,kCAAA,KAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAACC,kCAAAA,IAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChDA,kCAAAA,IAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnDA,kCAAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,4CACC,OAAI,EAAA,WAAU,mEACb,UAACA,sCAAA,OAAA,EAAI,WAAU,mCACb,UAAAA,kCAAA,IAAC,OAAI,EAAA,WAAU,kBACb,UAACA,kCAAA,IAAA,UAAA,EAAS,YAAY,UAAW,CAAA,GACnC,GACF,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;"}

package/dist/components/IDE/FileTree.cjs

@@ -0,0 +1,105 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const utils_cn = require("../../utils/cn.cjs");
+const components_MaxHeightSmoother_index = require("../MaxHeightSmoother/index.cjs");
+const components_IDE_createFileTree = require("./createFileTree.cjs");
+const concatFilePath = (paths) => paths.join("/");
+const FileItem = ({
+  filesPaths,
+  path,
+  subPath,
+  onClickFile,
+  activeFile,
+  prePaths,
+  isFile
+}) => {
+  const [subPathOpen, setSubPathOpen] = require$$0.useState(true);
+  const level = prePaths.length + 1;
+  const currentPath = concatFilePath([
+    ...prePaths.slice(level - 1, level),
+    path
+  ]);
+  const totalPath = concatFilePath([...prePaths, path]);
+  const filteredFilePaths = filesPaths.map(
+    (path2) => path2.replace(/^\/?/, "")
+    // This regex matches the first slash, if it exists, at the start of the string)
+  ).filter((filePath) => filePath.startsWith(currentPath));
+  const newPath = filteredFilePaths.map(
+    (path2) => path2.replace(currentPath, "").replace(/^\/?/, "")
+  );
+  const isActive = totalPath === activeFile;
+  const indentation = new Array(level).fill("  ").join("");
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+      "button",
+      {
+        className: utils_cn.cn(
+          "flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition",
+          isActive ? "bg-neutral-200 dark:bg-neutral-700" : "cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900"
+        ),
+        onClick: () => {
+          if (isFile) {
+            onClickFile?.(totalPath);
+          } else {
+            setSubPathOpen(!subPathOpen);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: utils_cn.cn("whitespace-pre", isFile && "ml-2"), children: indentation }),
+          !isFile && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            lucideReact.ChevronRight,
+            {
+              className: utils_cn.cn(`transition`, subPathOpen && `rotate-90 transform`),
+              size: 16
+            }
+          ),
+          path
+        ]
+      },
+      path
+    ),
+    subPath && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      components_MaxHeightSmoother_index.MaxHeightSmoother,
+      {
+        isHidden: !subPathOpen,
+        className: "overflow-x-hidden",
+        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          FileTree,
+          {
+            filesPaths: newPath,
+            activeFile,
+            onClickFile,
+            prePaths: [...prePaths, path]
+          }
+        )
+      }
+    )
+  ] });
+};
+const FileTree = ({
+  filesPaths,
+  activeFile,
+  onClickFile,
+  prePaths = []
+}) => {
+  const fileTree = components_IDE_createFileTree.createFileTree(filesPaths);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "text-neutral dark:text-neutral-dark flex size-full flex-col items-start justify-start py-1", children: fileTree.map(({ path, subPath, isFile }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    FileItem,
+    {
+      isFile,
+      subPath,
+      path,
+      onClickFile,
+      activeFile,
+      prePaths,
+      filesPaths
+    },
+    path
+  )) });
+};
+exports.FileTree = FileTree;
+//# sourceMappingURL=FileTree.cjs.map

package/dist/components/IDE/FileTree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.cjs","sources":["../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-selector-parameter */\n'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-700'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"text-neutral dark:text-neutral-dark flex size-full flex-col items-start justify-start py-1\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["useState","path","jsxs","Fragment","cn","jsx","ChevronRight","MaxHeightSmoother","createFileTree"],"mappings":";;;;;;;;;AAgBA,MAAM,iBAAiB,CAAC,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,WAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,IAAIA,oBAAS,IAAI;AAE7C,QAAA,QAAQ,SAAS,SAAS;AAChC,QAAM,cAAc,eAAe;AAAA,IACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAClC;AAAA,EAAA,CACD;AACD,QAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;AAEpD,QAAM,oBAAoB,WACvB;AAAA,IACC,CAACC,UAASA,MAAK,QAAQ,QAAQ,EAAE;AAAA;AAAA,EAAA,EAElC,OAAO,CAAC,aAAa,SAAS,WAAW,WAAW,CAAC;AAExD,QAAM,UAAU,kBAAkB;AAAA,IAAI,CAACA,UACrCA,MAAK,QAAQ,aAAa,EAAE,EAAE,QAAQ,QAAQ,EAAE;AAAA,EAAA;AAGlD,QAAM,WAAW,cAAc;AAEzB,QAAA,cAAc,IAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,EAAE;AAEvD,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAD,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE,SAAA;AAAA,UACT;AAAA,UACA,WACI,uCACA;AAAA,QACN;AAAA,QAEA,SAAS,MAAM;AACb,cAAI,QAAQ;AACV,0BAAc,SAAS;AAAA,UAAA,OAClB;AACL,2BAAe,CAAC,WAAW;AAAA,UAC7B;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAAC,2BAAAA,kBAAAA,IAAC,UAAK,WAAWD,YAAG,kBAAkB,UAAU,MAAM,GACnD,UACH,aAAA;AAAA,UAEC,CAAC,UACAC,2BAAA,kBAAA;AAAA,YAACC,YAAA;AAAA,YAAA;AAAA,cACC,WAAWF,SAAA,GAAG,cAAc,eAAe,qBAAqB;AAAA,cAChE,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAnBI;AAAA,IAoBP;AAAA,IACC,WACCC,2BAAA,kBAAA;AAAA,MAACE,mCAAA;AAAA,MAAA;AAAA,QACC,UAAU,CAAC;AAAA,QACX,WAAU;AAAA,QAEV,UAAAF,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,UAAU,CAAC,GAAG,UAAU,IAAI;AAAA,UAAA;AAAA,QAC9B;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AACd,MAAM;AACE,QAAA,WAAWG,6CAAe,UAAU;AAGxC,SAAAH,2BAAA,kBAAA,IAAC,OAAI,EAAA,WAAU,8FACZ,UAAA,SAAS,IAAI,CAAC,EAAE,MAAM,SAAS,OAC9B,MAAAA,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAPK;AAAA,EASR,CAAA,EACH,CAAA;AAEJ;;"}

package/dist/components/IDE/FileTree.d.ts

@@ -8,3 +8,4 @@ type FileTreeProps = {
 };
 export declare const FileTree: FC<FileTreeProps>;
 export {};
+//# sourceMappingURL=FileTree.d.ts.map

package/dist/components/IDE/FileTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/FileTree.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAK1C,KAAK,aAAa,GAAG;IACnB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AA6FF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAwBtC,CAAC"}

package/dist/components/IDE/FileTree.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { createFileTree } from "./createFileTree.mjs";
+const concatFilePath = (paths) => paths.join("/");
+const FileItem = ({
+  filesPaths,
+  path,
+  subPath,
+  onClickFile,
+  activeFile,
+  prePaths,
+  isFile
+}) => {
+  const [subPathOpen, setSubPathOpen] = useState(true);
+  const level = prePaths.length + 1;
+  const currentPath = concatFilePath([
+    ...prePaths.slice(level - 1, level),
+    path
+  ]);
+  const totalPath = concatFilePath([...prePaths, path]);
+  const filteredFilePaths = filesPaths.map(
+    (path2) => path2.replace(/^\/?/, "")
+    // This regex matches the first slash, if it exists, at the start of the string)
+  ).filter((filePath) => filePath.startsWith(currentPath));
+  const newPath = filteredFilePaths.map(
+    (path2) => path2.replace(currentPath, "").replace(/^\/?/, "")
+  );
+  const isActive = totalPath === activeFile;
+  const indentation = new Array(level).fill("  ").join("");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        className: cn(
+          "flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition",
+          isActive ? "bg-neutral-200 dark:bg-neutral-700" : "cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900"
+        ),
+        onClick: () => {
+          if (isFile) {
+            onClickFile?.(totalPath);
+          } else {
+            setSubPathOpen(!subPathOpen);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("whitespace-pre", isFile && "ml-2"), children: indentation }),
+          !isFile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ChevronRight,
+            {
+              className: cn(`transition`, subPathOpen && `rotate-90 transform`),
+              size: 16
+            }
+          ),
+          path
+        ]
+      },
+      path
+    ),
+    subPath && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MaxHeightSmoother,
+      {
+        isHidden: !subPathOpen,
+        className: "overflow-x-hidden",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FileTree,
+          {
+            filesPaths: newPath,
+            activeFile,
+            onClickFile,
+            prePaths: [...prePaths, path]
+          }
+        )
+      }
+    )
+  ] });
+};
+const FileTree = ({
+  filesPaths,
+  activeFile,
+  onClickFile,
+  prePaths = []
+}) => {
+  const fileTree = createFileTree(filesPaths);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-neutral dark:text-neutral-dark flex size-full flex-col items-start justify-start py-1", children: fileTree.map(({ path, subPath, isFile }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    FileItem,
+    {
+      isFile,
+      subPath,
+      path,
+      onClickFile,
+      activeFile,
+      prePaths,
+      filesPaths
+    },
+    path
+  )) });
+};
+export {
+  FileTree
+};
+//# sourceMappingURL=FileTree.mjs.map

package/dist/components/IDE/FileTree.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.mjs","sources":["../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-selector-parameter */\n'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-700'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"text-neutral dark:text-neutral-dark flex size-full flex-col items-start justify-start py-1\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["path","jsxs","Fragment","jsx"],"mappings":";;;;;;;AAgBA,MAAM,iBAAiB,CAAC,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,WAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AAE7C,QAAA,QAAQ,SAAS,SAAS;AAChC,QAAM,cAAc,eAAe;AAAA,IACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAClC;AAAA,EAAA,CACD;AACD,QAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;AAEpD,QAAM,oBAAoB,WACvB;AAAA,IACC,CAACA,UAASA,MAAK,QAAQ,QAAQ,EAAE;AAAA;AAAA,EAAA,EAElC,OAAO,CAAC,aAAa,SAAS,WAAW,WAAW,CAAC;AAExD,QAAM,UAAU,kBAAkB;AAAA,IAAI,CAACA,UACrCA,MAAK,QAAQ,aAAa,EAAE,EAAE,QAAQ,QAAQ,EAAE;AAAA,EAAA;AAGlD,QAAM,WAAW,cAAc;AAEzB,QAAA,cAAc,IAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,EAAE;AAEvD,SAEIC,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAD,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WACI,uCACA;AAAA,QACN;AAAA,QAEA,SAAS,MAAM;AACb,cAAI,QAAQ;AACV,0BAAc,SAAS;AAAA,UAAA,OAClB;AACL,2BAAe,CAAC,WAAW;AAAA,UAC7B;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAAE,kCAAAA,IAAC,UAAK,WAAW,GAAG,kBAAkB,UAAU,MAAM,GACnD,UACH,aAAA;AAAA,UAEC,CAAC,UACAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,cAAc,eAAe,qBAAqB;AAAA,cAChE,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAnBI;AAAA,IAoBP;AAAA,IACC,WACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,CAAC;AAAA,QACX,WAAU;AAAA,QAEV,UAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,UAAU,CAAC,GAAG,UAAU,IAAI;AAAA,UAAA;AAAA,QAC9B;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AACd,MAAM;AACE,QAAA,WAAW,eAAe,UAAU;AAGxC,SAAAA,kCAAA,IAAC,OAAI,EAAA,WAAU,8FACZ,UAAA,SAAS,IAAI,CAAC,EAAE,MAAM,SAAS,OAC9B,MAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAPK;AAAA,EASR,CAAA,EACH,CAAA;AAEJ;"}

package/dist/components/IDE/IDE.cjs

@@ -0,0 +1,89 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const require$$0 = require("react");
+const utils_cn = require("../../utils/cn.cjs");
+const components_Container_index = require("../Container/index.cjs");
+const components_WithResizer_index = require("../WithResizer/index.cjs");
+const components_IDE_FileTree = require("./FileTree.cjs");
+const components_IDE_MarkDownRender = require("./MarkDownRender.cjs");
+const IDE = ({
+  pages: initialPages,
+  isDarkMode,
+  className,
+  ...props
+}) => {
+  const [pages, setPages] = require$$0.useState(initialPages);
+  const tabs = pages.filter(({ isOpen }) => isOpen);
+  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);
+  const [activeTab, setActiveTab] = require$$0.useState(firstTabIndex);
+  const { content, path } = pages[activeTab];
+  const filePaths = initialPages.map(({ path: title }) => title);
+  const handleClickFile = (title) => {
+    const page = pages.find(({ path: tabTitle }) => tabTitle === title);
+    if (!page) return;
+    const newPages = pages.map((page2) => {
+      if (page2.path === title) {
+        return { ...page2, isOpen: true };
+      }
+      return page2;
+    });
+    setPages(newPages);
+    const newPageIndex = newPages.findIndex(
+      ({ path: tabTitle }) => tabTitle === title
+    );
+    setActiveTab(newPageIndex);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    components_Container_index.Container,
+    {
+      className: utils_cn.cn(
+        "flex size-full flex-col justify-start overflow-hidden shadow-lg",
+        className
+      ),
+      roundedSize: "3xl",
+      transparency: "none",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-green-500" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex size-full overflow-y-auto", children: tabs.map(({ path: path2 }, index) => {
+            const fullPath = path2.split("/");
+            const title = fullPath[fullPath.length - 1];
+            const isActive = index === activeTab;
+            return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: utils_cn.cn(
+                  "flex h-8 min-w-20 items-center justify-start px-3 py-1 transition",
+                  isActive ? "bg-card dark:bg-card-dark" : "dark:hover:bg-card-dark cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950"
+                ),
+                onClick: () => setActiveTab(index),
+                children: title
+              },
+              title
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "relative flex size-full flex-1 flex-row justify-start", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 size-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex size-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_WithResizer_index.WithResizer, { initialWidth: 20, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            components_IDE_FileTree.FileTree,
+            {
+              filesPaths: filePaths,
+              activeFile: path,
+              onClickFile: handleClickFile
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "size-full flex-1 overflow-auto pt-2 text-xs md:text-sm", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_IDE_MarkDownRender.MarkdownRenderer, { isDarkMode, children: content }) })
+        ] }) }) })
+      ]
+    }
+  );
+};
+exports.IDE = IDE;
+//# sourceMappingURL=IDE.cjs.map

package/dist/components/IDE/IDE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDE.cjs","sources":["../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(firstTabIndex);\n\n  const { content, path } = pages[activeTab];\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card dark:bg-card-dark'\n                    : 'dark:hover:bg-card-dark cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute left-0 top-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={20}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs md:text-sm\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["useState","page","jsxs","Container","cn","jsx","path","WithResizer","FileTree","MarkdownRenderer"],"mappings":"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"}

package/dist/components/IDE/IDE.d.ts

@@ -9,3 +9,4 @@ export type IDEProps = {
     isDarkMode?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const IDE: FC<IDEProps>;
+//# sourceMappingURL=IDE.d.ts.map

package/dist/components/IDE/IDE.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDE.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/IDE.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAO/D,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CA+F5B,CAAC"}

package/dist/components/IDE/IDE.mjs

@@ -0,0 +1,89 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { useState } from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { WithResizer } from "../WithResizer/index.mjs";
+import { FileTree } from "./FileTree.mjs";
+import { MarkdownRenderer } from "./MarkDownRender.mjs";
+const IDE = ({
+  pages: initialPages,
+  isDarkMode,
+  className,
+  ...props
+}) => {
+  const [pages, setPages] = useState(initialPages);
+  const tabs = pages.filter(({ isOpen }) => isOpen);
+  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);
+  const [activeTab, setActiveTab] = useState(firstTabIndex);
+  const { content, path } = pages[activeTab];
+  const filePaths = initialPages.map(({ path: title }) => title);
+  const handleClickFile = (title) => {
+    const page = pages.find(({ path: tabTitle }) => tabTitle === title);
+    if (!page) return;
+    const newPages = pages.map((page2) => {
+      if (page2.path === title) {
+        return { ...page2, isOpen: true };
+      }
+      return page2;
+    });
+    setPages(newPages);
+    const newPageIndex = newPages.findIndex(
+      ({ path: tabTitle }) => tabTitle === title
+    );
+    setActiveTab(newPageIndex);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Container,
+    {
+      className: cn(
+        "flex size-full flex-col justify-start overflow-hidden shadow-lg",
+        className
+      ),
+      roundedSize: "3xl",
+      transparency: "none",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-3 rounded-full bg-green-500" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-full overflow-y-auto", children: tabs.map(({ path: path2 }, index) => {
+            const fullPath = path2.split("/");
+            const title = fullPath[fullPath.length - 1];
+            const isActive = index === activeTab;
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: cn(
+                  "flex h-8 min-w-20 items-center justify-start px-3 py-1 transition",
+                  isActive ? "bg-card dark:bg-card-dark" : "dark:hover:bg-card-dark cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950"
+                ),
+                onClick: () => setActiveTab(index),
+                children: title
+              },
+              title
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex size-full flex-1 flex-row justify-start", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 size-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex size-full", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(WithResizer, { initialWidth: 20, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FileTree,
+            {
+              filesPaths: filePaths,
+              activeFile: path,
+              onClickFile: handleClickFile
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-full flex-1 overflow-auto pt-2 text-xs md:text-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownRenderer, { isDarkMode, children: content }) })
+        ] }) }) })
+      ]
+    }
+  );
+};
+export {
+  IDE
+};
+//# sourceMappingURL=IDE.mjs.map

package/dist/components/IDE/IDE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDE.mjs","sources":["../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(firstTabIndex);\n\n  const { content, path } = pages[activeTab];\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card dark:bg-card-dark'\n                    : 'dark:hover:bg-card-dark cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute left-0 top-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={20}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs md:text-sm\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["page","jsxs","jsx","path"],"mappings":";;;;;;;;AAkBO,MAAM,MAAoB,CAAC;AAAA,EAChC,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,OAAO,MAAM,OAAO,CAAC,EAAE,OAAA,MAAa,MAAM;AAEhD,QAAM,gBAAgB,KAAK,UAAU,CAAC,EAAE,OAAA,MAAa,MAAM;AAC3D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa;AAExD,QAAM,EAAE,SAAS,KAAK,IAAI,MAAM,SAAS;AACnC,QAAA,YAAY,aAAa,IAAI,CAAC,EAAE,MAAM,MAAA,MAAY,KAAK;AAEvD,QAAA,kBAAkB,CAAC,UAAkB;AACnC,UAAA,OAAO,MAAM,KAAK,CAAC,EAAE,MAAM,SAAe,MAAA,aAAa,KAAK;AAClE,QAAI,CAAC,KAAM;AAEX,UAAM,WAAW,MAAM,IAAI,CAACA,UAAS;AAC/BA,UAAAA,MAAK,SAAS,OAAO;AACvB,eAAO,EAAE,GAAGA,OAAM,QAAQ,KAAK;AAAA,MACjC;AACOA,aAAAA;AAAAA,IAAA,CACR;AAED,aAAS,QAAQ;AAEjB,UAAM,eAAe,SAAS;AAAA,MAC5B,CAAC,EAAE,MAAM,eAAe,aAAa;AAAA,IAAA;AAGvC,iBAAa,YAAY;AAAA,EAAA;AAIzB,SAAAC,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,aAAY;AAAA,MACZ,cAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,UAAA;AAAA,QAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,sJACb,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,YAACC,kCAAAA,IAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,YAChDA,kCAAAA,IAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,YACnDA,kCAAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,UAAA,GACpD;AAAA,UACAA,kCAAAA,IAAC,OAAI,EAAA,WAAU,kCACZ,UAAA,KAAK,IAAI,CAAC,EAAE,MAAAC,MAAK,GAAG,UAAU;AACvB,kBAAA,WAAWA,MAAK,MAAM,GAAG;AAC/B,kBAAM,QAAQ,SAAS,SAAS,SAAS,CAAC;AAC1C,kBAAM,WAAW,UAAU;AAGzB,mBAAAD,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,WACI,8BACA;AAAA,gBACN;AAAA,gBAEA,SAAS,MAAM,aAAa,KAAK;AAAA,gBAEhC,UAAA;AAAA,cAAA;AAAA,cAHI;AAAA,YAAA;AAAA,UAMV,CAAA,GACH;AAAA,QAAA,GACF;AAAA,QACAA,kCAAA,IAAC,OAAI,EAAA,WAAU,yDACb,UAAAA,kCAAA,IAAC,OAAI,EAAA,WAAU,mCACb,UAAAD,uCAAC,OAAI,EAAA,WAAU,kBACb,UAAA;AAAA,UAACC,kCAAAA,IAAA,aAAA,EAAY,cAAc,IACzB,UAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,aAAa;AAAA,YAAA;AAAA,UAAA,GAEjB;AAAA,UAEAA,kCAAAA,IAAC,SAAI,WAAU,0DACb,gDAAC,kBAAiB,EAAA,YACf,mBACH,EACF,CAAA;AAAA,QAAA,EACF,CAAA,EACF,CAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}