@intlayer/design-system 8.4.4 → 8.4.5

package/dist/esm/components/IDE/CopyCode.mjs

@@ -1,2 +1,28 @@
-"use client";import{PopoverXAlign as e}from"../Popover/static.mjs";import{Popover as t}from"../Popover/dynamic.mjs";import{CopyButton as n}from"../CopyButton/index.mjs";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{useIntlayer as a}from"react-intlayer";const o=({code:o})=>{let{title:s,description:c}=a(`code`);return i(t,{identifier:`copy`,children:[r(n,{content:o}),i(t.Detail,{identifier:`copy`,className:`flex min-w-64 flex-col gap-3 p-3 text-sm`,xAlign:e.END,children:[r(`strong`,{children:s}),r(`p`,{className:`text-neutral`,children:c})]})]})};export{o as CopyCode};
+'use client';
+
+import { PopoverXAlign } from "../Popover/static.mjs";
+import { Popover } from "../Popover/dynamic.mjs";
+import { CopyButton } from "../CopyButton/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/IDE/CopyCode.tsx
+const CopyCode = ({ code }) => {
+	const { title, description } = useIntlayer("code");
+	return /* @__PURE__ */ jsxs(Popover, {
+		identifier: "copy",
+		children: [/* @__PURE__ */ jsx(CopyButton, { content: code }), /* @__PURE__ */ jsxs(Popover.Detail, {
+			identifier: "copy",
+			className: "flex min-w-64 flex-col gap-3 p-3 text-sm",
+			xAlign: PopoverXAlign.END,
+			children: [/* @__PURE__ */ jsx("strong", { children: title }), /* @__PURE__ */ jsx("p", {
+				className: "text-neutral",
+				children: description
+			})]
+		})]
+	});
+};
+
+//#endregion
+export { CopyCode };
 //# sourceMappingURL=CopyCode.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"mappings":"wQAWA,MAAa,GAA+B,CAAE,UAAW,CACvD,GAAM,CAAE,QAAO,eAAgB,EAAY,OAAO,CAElD,OACE,EAAC,EAAD,CAAS,WAAW,gBAApB,CACE,EAAC,EAAD,CAAY,QAAS,EAAQ,CAAA,CAE7B,EAAC,EAAQ,OAAT,CACE,WAAW,OACX,UAAU,2CACV,OAAQ,EAAc,aAHxB,CAKE,EAAC,SAAD,CAAA,SAAS,EAAe,CAAA,CACxB,EAAC,IAAD,CAAG,UAAU,wBAAgB,EAAgB,CAAA,CAC9B,GACT"}
+{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAa,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD,EAAY,SAAS,MAAQ,GAE7B,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;aAHxB,CAKE,oBAAC,UAAD,YAAS,OAAe,GACxB,oBAAC,KAAD;IAAG,WAAU;cAAgB;IAAgB,EAC9B;KACT"}

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

@@ -1,2 +1,35 @@
-import{Container as e}from"../Container/index.mjs";import{FileTree as t}from"./FileTree.mjs";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({filePaths:i,...a})=>r(e,{className:`flex size-full flex-col justify-start overflow-auto shadow-lg`,roundedSize:`3xl`,transparency:`none`,...a,children:[n(`div`,{className:`flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950`,children:r(`div`,{className:`mx-2 flex items-center justify-start gap-2 p-1`,children:[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`,{className:`relative flex size-full flex-1 flex-row justify-start shadow-lg`,children:n(`div`,{className:`absolute top-0 left-0 size-full`,children:n(`div`,{className:`flex size-full`,children:n(t,{filesPaths:i})})})})]});export{i as FileList};
+import { Container } from "../Container/index.mjs";
+import { FileTree } from "./FileTree.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/IDE/FileList.tsx
+const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxs(Container, {
+	className: "flex size-full flex-col justify-start overflow-auto shadow-lg",
+	roundedSize: "3xl",
+	transparency: "none",
+	...props,
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-2 flex items-center justify-start gap-2 p-1",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+				/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+				/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
+			]
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: "relative flex size-full flex-1 flex-row justify-start shadow-lg",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "absolute top-0 left-0 size-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex size-full",
+				children: /* @__PURE__ */ jsx(FileTree, { filesPaths: filePaths })
+			})
+		})
+	})]
+});
+
+//#endregion
+export { FileList };
 //# sourceMappingURL=FileList.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","names":[],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } 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-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral 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 top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":"+IAQA,MAAa,GAA+B,CAAE,YAAW,GAAG,KAC1D,EAAC,EAAD,CACE,UAAU,gEACV,YAAY,MACZ,aAAa,OACb,GAAI,WAJN,CAME,EAAC,MAAD,CAAK,UAAU,uIACb,EAAC,MAAD,CAAK,UAAU,0DAAf,CACE,EAAC,MAAD,CAAK,UAAU,iCAAmC,CAAA,CAClD,EAAC,MAAD,CAAK,UAAU,oCAAsC,CAAA,CACrD,EAAC,MAAD,CAAK,UAAU,mCAAqC,CAAA,CAChD,GACF,CAAA,CACN,EAAC,MAAD,CAAK,UAAU,2EACb,EAAC,MAAD,CAAK,UAAU,2CACb,EAAC,MAAD,CAAK,UAAU,0BACb,EAAC,EAAD,CAAU,WAAY,EAAa,CAAA,CAC/B,CAAA,CACF,CAAA,CACF,CAAA,CACI"}
+{"version":3,"file":"FileList.mjs","names":[],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } 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-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral 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 top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":";;;;;AAQA,MAAa,YAA+B,EAAE,WAAW,GAAG,YAC1D,qBAAC,WAAD;CACE,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;WAJN,CAME,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD,EAAK,WAAU,kCAAmC;IAClD,oBAAC,OAAD,EAAK,WAAU,qCAAsC;IACrD,oBAAC,OAAD,EAAK,WAAU,oCAAqC;IAChD;;EACF,GACN,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,YAAY,WAAa;IAC/B;GACF;EACF,EACI"}

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

@@ -1,2 +1,65 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{MaxHeightSmoother as t}from"../MaxHeightSmoother/index.mjs";import{createFileTree as n}from"./createFileTree.mjs";import{useState as r}from"react";import{ChevronRight as i}from"lucide-react";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";const c=e=>e.join(`/`),l=({filesPaths:n,path:l,subPath:d,onClickFile:f,activeFile:p,prePaths:m,isFile:h})=>{let[g,_]=r(!0),v=m.length+1,y=c([...m.slice(v-1,v),l]),b=c([...m,l]),x=n.map(e=>e.replace(/^\/?/,``)).filter(e=>e.startsWith(y)).map(e=>e.replace(y,``).replace(/^\/?/,``)),S=b===p,C=Array(v).fill(`  `).join(``);return s(a,{children:[s(`button`,{className:e(`flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition`,S?`bg-neutral-200 dark:bg-neutral-700`:`cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900`),onClick:()=>{h?f?.(b):_(!g)},children:[o(`span`,{className:e(`whitespace-pre`,h&&`ml-2`),children:C}),!h&&o(i,{className:e(`transition`,g&&`rotate-90 transform`),size:16}),l]},l),d&&o(t,{isHidden:!g,className:`overflow-x-hidden`,children:o(u,{filesPaths:x,activeFile:p,onClickFile:f,prePaths:[...m,l]})})]})},u=({filesPaths:e,activeFile:t,onClickFile:r,prePaths:i=[]})=>o(`div`,{className:`flex size-full flex-col items-start justify-start py-1 text-neutral`,children:n(e).map(({path:n,subPath:a,isFile:s})=>o(l,{isFile:s,subPath:a,path:n,onClickFile:r,activeFile:t,prePaths:i,filesPaths:e},n))});export{u as FileTree};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { createFileTree } from "./createFileTree.mjs";
+import { useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/IDE/FileTree.tsx
+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 newPath = filesPaths.map((path) => path.replace(/^\/?/, "")).filter((filePath) => filePath.startsWith(currentPath)).map((path) => path.replace(currentPath, "").replace(/^\/?/, ""));
+	const isActive = totalPath === activeFile;
+	const indentation = new Array(level).fill("  ").join("");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ jsx("span", {
+				className: cn("whitespace-pre", isFile && "ml-2"),
+				children: indentation
+			}),
+			!isFile && /* @__PURE__ */ jsx(ChevronRight, {
+				className: cn(`transition`, subPathOpen && `rotate-90 transform`),
+				size: 16
+			}),
+			path
+		]
+	}, path), subPath && /* @__PURE__ */ jsx(MaxHeightSmoother, {
+		isHidden: !subPathOpen,
+		className: "overflow-x-hidden",
+		children: /* @__PURE__ */ jsx(FileTree, {
+			filesPaths: newPath,
+			activeFile,
+			onClickFile,
+			prePaths: [...prePaths, path]
+		})
+	})] });
+};
+const FileTree = ({ filesPaths, activeFile, onClickFile, prePaths = [] }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex size-full flex-col items-start justify-start py-1 text-neutral",
+		children: createFileTree(filesPaths).map(({ path, subPath, isFile }) => /* @__PURE__ */ jsx(FileItem, {
+			isFile,
+			subPath,
+			path,
+			onClickFile,
+			activeFile,
+			prePaths,
+			filesPaths
+		}, path))
+	});
+};
+
+//#endregion
+export { FileTree };
 //# sourceMappingURL=FileTree.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileTree.mjs","names":[],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\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=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\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"],"mappings":"2TAeA,MAAM,EAAkB,GAAoB,EAAM,KAAK,IAAI,CAYrD,GAA+B,CACnC,aACA,OACA,UACA,cACA,aACA,WACA,YACI,CACJ,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAK,CAE9C,EAAQ,EAAS,OAAS,EAC1B,EAAc,EAAe,CACjC,GAAG,EAAS,MAAM,EAAQ,EAAG,EAAM,CACnC,EACD,CAAC,CACI,EAAY,EAAe,CAAC,GAAG,EAAU,EAAK,CAAC,CAQ/C,EANoB,EACvB,IACE,GAAS,EAAK,QAAQ,OAAQ,GAAG,CACnC,CACA,OAAQ,GAAa,EAAS,WAAW,EAAY,CAAC,CAEvB,IAAK,GACrC,EAAK,QAAQ,EAAa,GAAG,CAAC,QAAQ,OAAQ,GAAG,CAClD,CAEK,EAAW,IAAc,EAEzB,EAAkB,MAAM,EAAM,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG,CAExD,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,SAAD,CACE,UAAW,EACT,gGACA,EACI,qCACA,gEACL,CAED,YAAe,CACT,EACF,IAAc,EAAU,CAExB,EAAe,CAAC,EAAY,WAZlC,CAgBE,EAAC,OAAD,CAAM,UAAW,EAAG,iBAAkB,GAAU,OAAO,UACpD,EACI,CAAA,CAEN,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EAAG,aAAc,GAAe,sBAAsB,CACjE,KAAM,GACN,CAAA,CAEH,EACM,EApBF,EAoBE,CACR,GACC,EAAC,EAAD,CACE,SAAU,CAAC,EACX,UAAU,6BAEV,EAAC,EAAD,CACE,WAAY,EACA,aACC,cACb,SAAU,CAAC,GAAG,EAAU,EAAK,CAC7B,CAAA,CACgB,CAAA,CAErB,CAAA,CAAA,EAIM,GAA+B,CAC1C,aACA,aACA,cACA,WAAW,EAAE,IAKX,EAAC,MAAD,CAAK,UAAU,+EAHA,EAAe,EAAW,CAI7B,KAAK,CAAE,OAAM,UAAS,YAC9B,EAAC,EAAD,CAEU,SACC,UACH,OACO,cACD,aACF,WACE,aACZ,CARK,EAQL,CACF,CACE,CAAA"}
+{"version":3,"file":"FileTree.mjs","names":[],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\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=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\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"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,IAAI;AAY3D,MAAM,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,MAAM,EACnC,KACD,CAAC;CACF,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,KAAK,CAAC;CAQrD,MAAM,UANoB,WACvB,KACE,SAAS,KAAK,QAAQ,QAAQ,GAAG,CACnC,CACA,QAAQ,aAAa,SAAS,WAAW,YAAY,CAAC,CAEvB,KAAK,SACrC,KAAK,QAAQ,aAAa,GAAG,CAAC,QAAQ,QAAQ,GAAG,CAClD;CAED,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,MAAM,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;AAExD,QACE,8CACE,qBAAC,UAAD;EACE,WAAW,GACT,iGACA,WACI,uCACA,gEACL;EAED,eAAe;AACb,OAAI,OACF,eAAc,UAAU;OAExB,gBAAe,CAAC,YAAY;;YAZlC;GAgBE,oBAAC,QAAD;IAAM,WAAW,GAAG,kBAAkB,UAAU,OAAO;cACpD;IACI;GAEN,CAAC,UACA,oBAAC,cAAD;IACE,WAAW,GAAG,cAAc,eAAe,sBAAsB;IACjE,MAAM;IACN;GAEH;GACM;IApBF,KAoBE,EACR,WACC,oBAAC,mBAAD;EACE,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC,UAAD;GACE,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,KAAK;GAC7B;EACgB,EAErB;;AAIP,MAAa,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,EAAE,OACT;AAGJ,QACE,oBAAC,OAAD;EAAK,WAAU;YAHA,eAAe,WAAW,CAI7B,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC,UAAD;GAEU;GACC;GACH;GACO;GACD;GACF;GACE;GACZ,EARK,KAQL,CACF;EACE"}

package/dist/esm/components/IDE/IDE.mjs

@@ -1,2 +1,91 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{FileTree as n}from"./FileTree.mjs";import{WithResizer as r}from"../WithResizer/index.mjs";import{MarkdownRenderer as i}from"./MarkDownRender.mjs";import{useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({pages:l,isDarkMode:u,className:d,activeTab:f,...p})=>{let[m,h]=o(l),g=m.filter(({isOpen:e})=>e),_=g.findIndex(({isOpen:e})=>e),[v,y]=o(f??_);a(()=>{y(f??_)},[l,f]);let{content:b,path:x}=m[v],S=l.map(({path:e})=>e),C=e=>{if(!m.find(({path:t})=>t===e))return;let t=m.map(t=>t.path===e?{...t,isOpen:!0}:t);h(t),y(t.findIndex(({path:t})=>t===e))};return c(t,{className:e(`flex size-full flex-col justify-start overflow-hidden shadow-lg`,d),roundedSize:`3xl`,transparency:`none`,...p,children:[c(`div`,{className:`flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950`,children:[c(`div`,{className:`mx-2 flex items-center justify-start gap-2 p-1`,children:[s(`div`,{className:`size-3 rounded-full bg-red-500`}),s(`div`,{className:`size-3 rounded-full bg-yellow-500`}),s(`div`,{className:`size-3 rounded-full bg-green-500`})]}),s(`div`,{className:`flex size-full overflow-y-auto`,children:g.map(({path:t},n)=>{let r=t.split(`/`),i=r[r.length-1];return s(`button`,{className:e(`flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition`,n===v?`bg-card`:`cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950`),onClick:()=>y(n),children:i},i)})})]}),s(`div`,{className:`relative flex size-full flex-1 flex-row justify-start`,children:s(`div`,{className:`absolute top-0 left-0 size-full`,children:c(`div`,{className:`flex size-full`,children:[s(r,{initialWidth:150,children:s(`div`,{className:`max-h-full flex-1 overflow-y-auto`,children:s(n,{filesPaths:S,activeFile:x,onClickFile:C})})}),s(`div`,{className:`size-full flex-1 overflow-auto pt-2 text-xs`,children:s(i,{isDarkMode:u,children:b})})]})})})]})};export{l as IDE};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { FileTree } from "./FileTree.mjs";
+import { WithResizer } from "../WithResizer/index.mjs";
+import { MarkdownRenderer } from "./MarkDownRender.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/IDE/IDE.tsx
+const IDE = ({ pages: initialPages, isDarkMode, className, activeTab: defaultActiveTab, ...props }) => {
+	const [pages, setPages] = useState(initialPages);
+	const tabs = pages.filter(({ isOpen }) => isOpen);
+	const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);
+	const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);
+	useEffect(() => {
+		setActiveTab(defaultActiveTab ?? firstTabIndex);
+	}, [initialPages, defaultActiveTab]);
+	const { content, path } = pages[activeTab];
+	const filePaths = initialPages.map(({ path: title }) => title);
+	const handleClickFile = (title) => {
+		if (!pages.find(({ path: tabTitle }) => tabTitle === title)) return;
+		const newPages = pages.map((page) => {
+			if (page.path === title) return {
+				...page,
+				isOpen: true
+			};
+			return page;
+		});
+		setPages(newPages);
+		setActiveTab(newPages.findIndex(({ path: tabTitle }) => tabTitle === title));
+	};
+	return /* @__PURE__ */ jsxs(Container, {
+		className: cn("flex size-full flex-col justify-start overflow-hidden shadow-lg", className),
+		roundedSize: "3xl",
+		transparency: "none",
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "mx-2 flex items-center justify-start gap-2 p-1",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex size-full overflow-y-auto",
+				children: tabs.map(({ path }, index) => {
+					const fullPath = path.split("/");
+					const title = fullPath[fullPath.length - 1];
+					return /* @__PURE__ */ jsx("button", {
+						className: cn("flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition", index === activeTab ? "bg-card" : "cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950"),
+						onClick: () => setActiveTab(index),
+						children: title
+					}, title);
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative flex size-full flex-1 flex-row justify-start",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "absolute top-0 left-0 size-full",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex size-full",
+					children: [/* @__PURE__ */ jsx(WithResizer, {
+						initialWidth: 150,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "max-h-full flex-1 overflow-y-auto",
+							children: /* @__PURE__ */ jsx(FileTree, {
+								filesPaths: filePaths,
+								activeFile: path,
+								onClickFile: handleClickFile
+							})
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "size-full flex-1 overflow-auto pt-2 text-xs",
+						children: /* @__PURE__ */ jsx(MarkdownRenderer, {
+							isDarkMode,
+							children: content
+						})
+					})]
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+export { IDE };
 //# sourceMappingURL=IDE.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"IDE.mjs","names":[],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\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  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\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(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\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=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral 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 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : '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 top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <div className=\"max-h-full flex-1 overflow-y-auto\">\n                <FileTree\n                  filesPaths={filePaths}\n                  activeFile={path}\n                  onClickFile={handleClickFile}\n                />\n              </div>\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":"mWAmBA,MAAa,GAAqB,CAChC,MAAO,EACP,aACA,YACA,UAAW,EACX,GAAG,KACC,CACJ,GAAM,CAAC,EAAO,GAAY,EAAS,EAAa,CAC1C,EAAO,EAAM,QAAQ,CAAE,YAAa,EAAO,CAE3C,EAAgB,EAAK,WAAW,CAAE,YAAa,EAAO,CACtD,CAAC,EAAW,GAAgB,EAAS,GAAoB,EAAc,CAE7E,MAAgB,CACd,EAAa,GAAoB,EAAc,EAC9C,CAAC,EAAc,EAAiB,CAAC,CAEpC,GAAM,CAAE,UAAS,QAAS,EAAM,GAC1B,EAAY,EAAa,KAAK,CAAE,KAAM,KAAY,EAAM,CAExD,EAAmB,GAAkB,CAEzC,GAAI,CADS,EAAM,MAAM,CAAE,KAAM,KAAe,IAAa,EAAM,CACxD,OAEX,IAAM,EAAW,EAAM,IAAK,GACtB,EAAK,OAAS,EACT,CAAE,GAAG,EAAM,OAAQ,GAAM,CAE3B,EACP,CAEF,EAAS,EAAS,CAMlB,EAJqB,EAAS,WAC3B,CAAE,KAAM,KAAe,IAAa,EACtC,CAEyB,EAG5B,OACE,EAAC,EAAD,CACE,UAAW,EACT,kEACA,EACD,CACD,YAAY,MACZ,aAAa,OACb,GAAI,WAPN,CASE,EAAC,MAAD,CAAK,UAAU,yHAAf,CACE,EAAC,MAAD,CAAK,UAAU,0DAAf,CACE,EAAC,MAAD,CAAK,UAAU,iCAAmC,CAAA,CAClD,EAAC,MAAD,CAAK,UAAU,oCAAsC,CAAA,CACrD,EAAC,MAAD,CAAK,UAAU,mCAAqC,CAAA,CAChD,GACN,EAAC,MAAD,CAAK,UAAU,0CACZ,EAAK,KAAK,CAAE,QAAQ,IAAU,CAC7B,IAAM,EAAW,EAAK,MAAM,IAAI,CAC1B,EAAQ,EAAS,EAAS,OAAS,GAGzC,OACE,EAAC,SAAD,CACE,UAAW,EACT,kGALW,IAAU,EAOjB,UACA,yEACL,CAED,YAAe,EAAa,EAAM,UAEjC,EACM,CAJF,EAIE,EAEX,CACE,CAAA,CACF,GACN,EAAC,MAAD,CAAK,UAAU,iEACb,EAAC,MAAD,CAAK,UAAU,2CACb,EAAC,MAAD,CAAK,UAAU,0BAAf,CACE,EAAC,EAAD,CAAa,aAAc,aACzB,EAAC,MAAD,CAAK,UAAU,6CACb,EAAC,EAAD,CACE,WAAY,EACZ,WAAY,EACZ,YAAa,EACb,CAAA,CACE,CAAA,CACM,CAAA,CAEd,EAAC,MAAD,CAAK,UAAU,uDACb,EAAC,EAAD,CAA8B,sBAC3B,EACgB,CAAA,CACf,CAAA,CACF,GACF,CAAA,CACF,CAAA,CACI"}
+{"version":3,"file":"IDE.mjs","names":[],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\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  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\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(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\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=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral 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 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : '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 top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <div className=\"max-h-full flex-1 overflow-y-auto\">\n                <FileTree\n                  filesPaths={filePaths}\n                  activeFile={path}\n                  onClickFile={handleClickFile}\n                />\n              </div>\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC,WAAD;EACE,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;YAPN,CASE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD,EAAK,WAAU,kCAAmC;KAClD,oBAAC,OAAD,EAAK,WAAU,qCAAsC;KACrD,oBAAC,OAAD,EAAK,WAAU,oCAAqC;KAChD;OACN,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,KAAK,EAAE,QAAQ,UAAU;KAC7B,MAAM,WAAW,KAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC,UAAD;MACE,WAAW,GACT,mGALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;MACM,EAJF,MAIE;MAEX;IACE,EACF;MACN,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,aAAD;MAAa,cAAc;gBACzB,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,UAAD;QACE,YAAY;QACZ,YAAY;QACZ,aAAa;QACb;OACE;MACM,GAEd,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,kBAAD;OAA8B;iBAC3B;OACgB;MACf,EACF;;IACF;GACF,EACI"}

package/dist/esm/components/IDE/MarkDownRender.mjs

@@ -1,2 +1,23 @@
-import{Code as e}from"./Code.mjs";import{jsx as t}from"react/jsx-runtime";import{MarkdownRenderer as n}from"react-intlayer";const r=({children:r,isDarkMode:i})=>t(n,{components:{code:n=>t(e,{...n,isDarkMode:i,language:n.className?.replace(`lang-`,``),showHeader:!1,className:`text-xs leading-5`,children:n.children}),pre:e=>e.children},children:r??``});export{r as MarkdownRenderer};
+import { Code } from "./Code.mjs";
+import { jsx } from "react/jsx-runtime";
+import { MarkdownRenderer as MarkdownRenderer$1 } from "react-intlayer";
+
+//#region src/components/IDE/MarkDownRender.tsx
+const MarkdownRenderer = ({ children, isDarkMode }) => /* @__PURE__ */ jsx(MarkdownRenderer$1, {
+	components: {
+		code: (props) => /* @__PURE__ */ jsx(Code, {
+			...props,
+			isDarkMode,
+			language: props.className?.replace("lang-", ""),
+			showHeader: false,
+			className: "text-xs leading-5",
+			children: props.children
+		}),
+		pre: (props) => props.children
+	},
+	children: children ?? ""
+});
+
+//#endregion
+export { MarkdownRenderer };
 //# sourceMappingURL=MarkDownRender.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":["MarkdownRendererIntlayer"],"sources":["../../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { MarkdownRenderer as MarkdownRendererIntlayer } from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n  isDarkMode?: boolean;\n  children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n}) => (\n  <MarkdownRendererIntlayer\n    components={{\n      code: (props) => (\n        <Code\n          {...props}\n          isDarkMode={isDarkMode}\n          language={props.className?.replace('lang-', '') as BundledLanguage}\n          showHeader={false}\n          className=\"text-xs leading-5\"\n        >\n          {props.children as string}\n        </Code>\n      ),\n      pre: (props) => props.children,\n    }}\n  >\n    {children ?? ''}\n  </MarkdownRendererIntlayer>\n);\n"],"mappings":"4HAUA,MAAa,GAA+C,CAC1D,WACA,gBAEA,EAACA,EAAD,CACE,WAAY,CACV,KAAO,GACL,EAAC,EAAD,CACE,GAAI,EACQ,aACZ,SAAU,EAAM,WAAW,QAAQ,QAAS,GAAG,CAC/C,WAAY,GACZ,UAAU,6BAET,EAAM,SACF,CAAA,CAET,IAAM,GAAU,EAAM,SACvB,UAEA,GAAY,GACY,CAAA"}
+{"version":3,"file":"MarkDownRender.mjs","names":["MarkdownRendererIntlayer"],"sources":["../../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { MarkdownRenderer as MarkdownRendererIntlayer } from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n  isDarkMode?: boolean;\n  children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n}) => (\n  <MarkdownRendererIntlayer\n    components={{\n      code: (props) => (\n        <Code\n          {...props}\n          isDarkMode={isDarkMode}\n          language={props.className?.replace('lang-', '') as BundledLanguage}\n          showHeader={false}\n          className=\"text-xs leading-5\"\n        >\n          {props.children as string}\n        </Code>\n      ),\n      pre: (props) => props.children,\n    }}\n  >\n    {children ?? ''}\n  </MarkdownRendererIntlayer>\n);\n"],"mappings":";;;;;AAUA,MAAa,oBAA+C,EAC1D,UACA,iBAEA,oBAACA,oBAAD;CACE,YAAY;EACV,OAAO,UACL,oBAAC,MAAD;GACE,GAAI;GACQ;GACZ,UAAU,MAAM,WAAW,QAAQ,SAAS,GAAG;GAC/C,YAAY;GACZ,WAAU;aAET,MAAM;GACF;EAET,MAAM,UAAU,MAAM;EACvB;WAEA,YAAY;CACY"}

package/dist/esm/components/IDE/MonacoCode.mjs

@@ -1,3 +1,107 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Loader as t}from"../Loader/index.mjs";import{CopyButton as n}from"../CopyButton/index.mjs";import{Suspense as r,lazy as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=i(()=>import(`@monaco-editor/react`).then(e=>({default:e.Editor}))),u=({children:i,language:u,isDarkMode:d,showLineNumbers:f,showCopyButton:p=!0,isReadOnly:m=!1,onChange:h})=>{let g=a(null),_=a(null),[v,y]=o({height:0,width:0}),b=d?`vs-dark-transparent`:`hc-light-theme`,x=(e,t)=>{_.current=e;let n=(e.getContentHeight()??0)+25;t.editor.defineTheme(`vs-dark-transparent`,{base:`vs-dark`,inherit:!0,rules:[],colors:{"editor.background":`#00000000`}}),t.editor.defineTheme(`hc-light-theme`,{base:`vs`,inherit:!0,rules:[],colors:{"editor.background":`#00000000`}}),t.editor.setTheme(b),t.languages.typescript.typescriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0}),t.languages.typescript.javascriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0}),t.languages.typescript.typescriptDefaults.setCompilerOptions({noLib:!0,allowNonTsExtensions:!0}),t.languages.typescript.javascriptDefaults.setCompilerOptions({noLib:!0,allowNonTsExtensions:!0}),y({height:n,width:g.current?.clientWidth??0})},S=f??(typeof i==`string`?i.split(`
-`).length>1:!1);return c(`div`,{className:e(`relative h-full w-full text-sm`,f&&`ml-0`),children:[p&&s(`div`,{className:`sticky top-5 z-10`,children:s(`div`,{className:e(`absolute right-2 bottom-0 flex h-7 items-center`),children:s(n,{content:i})})}),s(`div`,{className:`z-0 grid size-full grid-cols-[0px] overflow-auto`,ref:g,children:s(r,{fallback:s(t,{}),children:s(l,{...v,defaultLanguage:`typescript`,language:u,loading:s(t,{}),defaultValue:String(i).replace(/\n$/,``),onMount:x,onChange:h,options:{readOnly:m,cursorStyle:`line`,minimap:{enabled:!1},scrollbar:{vertical:`hidden`,verticalScrollbarSize:0,alwaysConsumeMouseWheel:!1},folding:!1,renderValidationDecorations:`off`,quickSuggestions:!1,parameterHints:{enabled:!1},suggestOnTriggerCharacters:!1,mouseWheelScrollSensitivity:0,fastScrollSensitivity:0,scrollBeyondLastLine:!1,lineNumbers:S?`on`:`off`},theme:b,className:`my-2 rounded-md`})})})]})};export{u as MonacoCode};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Loader } from "../Loader/index.mjs";
+import { CopyButton } from "../CopyButton/index.mjs";
+import { Suspense, lazy, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/IDE/MonacoCode.tsx
+const Editor = lazy(() => import("@monaco-editor/react").then((mod) => ({ default: mod.Editor })));
+const MonacoCode = ({ children, language, isDarkMode, showLineNumbers, showCopyButton = true, isReadOnly = false, onChange }) => {
+	const containerRef = useRef(null);
+	const ideRef = useRef(null);
+	const [editorSize, setEditorSize] = useState({
+		height: 0,
+		width: 0
+	});
+	const theme = isDarkMode ? "vs-dark-transparent" : "hc-light-theme";
+	const handleMountIde = (editor, monaco) => {
+		ideRef.current = editor;
+		const contentHeight = (editor.getContentHeight() ?? 0) + 25;
+		monaco.editor.defineTheme("vs-dark-transparent", {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: { "editor.background": "#00000000" }
+		});
+		monaco.editor.defineTheme("hc-light-theme", {
+			base: "vs",
+			inherit: true,
+			rules: [],
+			colors: { "editor.background": "#00000000" }
+		});
+		monaco.editor.setTheme(theme);
+		monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+			noSemanticValidation: true,
+			noSyntaxValidation: true
+		});
+		monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+			noSemanticValidation: true,
+			noSyntaxValidation: true
+		});
+		monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+			noLib: true,
+			allowNonTsExtensions: true
+		});
+		monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+			noLib: true,
+			allowNonTsExtensions: true
+		});
+		setEditorSize({
+			height: contentHeight,
+			width: containerRef.current?.clientWidth ?? 0
+		});
+	};
+	const isShowLineNumbers = showLineNumbers ?? (typeof children === "string" ? children.split("\n").length > 1 : false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative h-full w-full text-sm", showLineNumbers && "ml-0"),
+		children: [showCopyButton && /* @__PURE__ */ jsx("div", {
+			className: "sticky top-5 z-10",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("absolute right-2 bottom-0 flex h-7 items-center"),
+				children: /* @__PURE__ */ jsx(CopyButton, { content: children })
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "z-0 grid size-full grid-cols-[0px] overflow-auto",
+			ref: containerRef,
+			children: /* @__PURE__ */ jsx(Suspense, {
+				fallback: /* @__PURE__ */ jsx(Loader, {}),
+				children: /* @__PURE__ */ jsx(Editor, {
+					...editorSize,
+					defaultLanguage: "typescript",
+					language,
+					loading: /* @__PURE__ */ jsx(Loader, {}),
+					defaultValue: String(children).replace(/\n$/, ""),
+					onMount: handleMountIde,
+					onChange,
+					options: {
+						readOnly: isReadOnly,
+						cursorStyle: "line",
+						minimap: { enabled: false },
+						scrollbar: {
+							vertical: "hidden",
+							verticalScrollbarSize: 0,
+							alwaysConsumeMouseWheel: false
+						},
+						folding: false,
+						renderValidationDecorations: "off",
+						quickSuggestions: false,
+						parameterHints: { enabled: false },
+						suggestOnTriggerCharacters: false,
+						mouseWheelScrollSensitivity: 0,
+						fastScrollSensitivity: 0,
+						scrollBeyondLastLine: false,
+						lineNumbers: isShowLineNumbers ? "on" : "off"
+					},
+					theme,
+					className: "my-2 rounded-md"
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+export { MonacoCode };
 //# sourceMappingURL=MonacoCode.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MonacoCode.mjs","names":[],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport type { OnChange, OnMount } from '@monaco-editor/react';\nimport { cn } from '@utils/cn';\nimport { type FC, lazy, Suspense, useRef, useState } from 'react';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\nconst Editor = lazy(() =>\n  import('@monaco-editor/react').then((mod) => ({ default: mod.Editor }))\n);\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  const theme = isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme';\n\n  const handleMountIde: OnMount = (editor, monaco) => {\n    // first time you set the height based on content Height\n\n    ideRef.current = editor as any;\n    const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n    monaco.editor.defineTheme('vs-dark-transparent', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n    monaco.editor.defineTheme('hc-light-theme', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n\n    monaco.editor.setTheme(theme);\n\n    // Disable TypeScript diagnostics\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true, // Disables type checking\n      noSyntaxValidation: true, // Disables syntax errors\n    });\n\n    // Disable JavaScript diagnostics\n    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true,\n      noSyntaxValidation: true,\n    });\n\n    // Disable unnecessary language features (e.g., suggestions, quick fixes)\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    setEditorSize({\n      height: contentHeight,\n      width: containerRef.current?.clientWidth ?? 0,\n    });\n  };\n\n  const isShowLineNumbers =\n    showLineNumbers ??\n    (typeof children === 'string' ? children.split('\\n').length > 1 : false);\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <div className=\"sticky top-5 z-10\">\n          <div\n            className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n          >\n            <CopyButton content={children} />\n          </div>\n        </div>\n      )}\n      <div\n        className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Suspense fallback={<Loader />}>\n          <Editor\n            {...editorSize}\n            defaultLanguage=\"typescript\"\n            language={language}\n            loading={<Loader />}\n            defaultValue={String(children).replace(/\\n$/, '')}\n            onMount={handleMountIde}\n            onChange={onChange}\n            options={{\n              readOnly: isReadOnly,\n              cursorStyle: 'line',\n              minimap: { enabled: false },\n              scrollbar: {\n                vertical: 'hidden',\n                verticalScrollbarSize: 0,\n                alwaysConsumeMouseWheel: false,\n              },\n              folding: false, // Disable code folding\n              renderValidationDecorations: 'off', // Disable error/warning decorations\n              quickSuggestions: false, // Disable IntelliSense\n              parameterHints: { enabled: false }, // Disable parameter hints\n              suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n              mouseWheelScrollSensitivity: 0,\n              fastScrollSensitivity: 0,\n              scrollBeyondLastLine: false,\n              lineNumbers: isShowLineNumbers ? 'on' : 'off',\n            }}\n            theme={theme}\n            className=\"my-2 rounded-md\"\n          />\n        </Suspense>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"8QAQA,MAAM,EAAS,MACb,OAAO,wBAAwB,KAAM,IAAS,CAAE,QAAS,EAAI,OAAQ,EAAE,CACxE,CAYY,GAAiC,CAC5C,WACA,WACA,aACA,kBACA,iBAAiB,GACjB,aAAa,GACb,cACI,CACJ,IAAM,EAAe,EAAuB,KAAK,CAC3C,EAAS,EAAO,KAAK,CACrB,CAAC,EAAY,GAAiB,EAGjC,CAAE,OAAQ,EAAG,MAAO,EAAG,CAAC,CAErB,EAAQ,EAAa,sBAAwB,iBAE7C,GAA2B,EAAQ,IAAW,CAGlD,EAAO,QAAU,EACjB,IAAM,GAAiB,EAAO,kBAAkB,EAAI,GAAK,GAEzD,EAAO,OAAO,YAAY,sBAAuB,CAC/C,KAAM,UACN,QAAS,GACT,MAAO,EAAE,CACT,OAAQ,CACN,oBAAqB,YACtB,CACF,CAAC,CACF,EAAO,OAAO,YAAY,iBAAkB,CAC1C,KAAM,KACN,QAAS,GACT,MAAO,EAAE,CACT,OAAQ,CACN,oBAAqB,YACtB,CACF,CAAC,CAEF,EAAO,OAAO,SAAS,EAAM,CAG7B,EAAO,UAAU,WAAW,mBAAmB,sBAAsB,CACnE,qBAAsB,GACtB,mBAAoB,GACrB,CAAC,CAGF,EAAO,UAAU,WAAW,mBAAmB,sBAAsB,CACnE,qBAAsB,GACtB,mBAAoB,GACrB,CAAC,CAGF,EAAO,UAAU,WAAW,mBAAmB,mBAAmB,CAChE,MAAO,GACP,qBAAsB,GACvB,CAAC,CAEF,EAAO,UAAU,WAAW,mBAAmB,mBAAmB,CAChE,MAAO,GACP,qBAAsB,GACvB,CAAC,CAEF,EAAc,CACZ,OAAQ,EACR,MAAO,EAAa,SAAS,aAAe,EAC7C,CAAC,EAGE,EACJ,IACC,OAAO,GAAa,SAAW,EAAS,MAAM;EAAK,CAAC,OAAS,EAAI,IAEpE,OACE,EAAC,MAAD,CACE,UAAW,EACT,iCACA,GAAmB,OACpB,UAJH,CAMG,GACC,EAAC,MAAD,CAAK,UAAU,6BACb,EAAC,MAAD,CACE,UAAW,EAAG,kDAAkD,UAEhE,EAAC,EAAD,CAAY,QAAS,EAAY,CAAA,CAC7B,CAAA,CACF,CAAA,CAER,EAAC,MAAD,CACE,UAAU,mDACV,IAAK,WAEL,EAAC,EAAD,CAAU,SAAU,EAAC,EAAD,EAAU,CAAA,UAC5B,EAAC,EAAD,CACE,GAAI,EACJ,gBAAgB,aACN,WACV,QAAS,EAAC,EAAD,EAAU,CAAA,CACnB,aAAc,OAAO,EAAS,CAAC,QAAQ,MAAO,GAAG,CACjD,QAAS,EACC,WACV,QAAS,CACP,SAAU,EACV,YAAa,OACb,QAAS,CAAE,QAAS,GAAO,CAC3B,UAAW,CACT,SAAU,SACV,sBAAuB,EACvB,wBAAyB,GAC1B,CACD,QAAS,GACT,4BAA6B,MAC7B,iBAAkB,GAClB,eAAgB,CAAE,QAAS,GAAO,CAClC,2BAA4B,GAE5B,4BAA6B,EAC7B,sBAAuB,EACvB,qBAAsB,GACtB,YAAa,EAAoB,KAAO,MACzC,CACM,QACP,UAAU,kBACV,CAAA,CACO,CAAA,CACP,CAAA,CACF"}
+{"version":3,"file":"MonacoCode.mjs","names":[],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport type { OnChange, OnMount } from '@monaco-editor/react';\nimport { cn } from '@utils/cn';\nimport { type FC, lazy, Suspense, useRef, useState } from 'react';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\nconst Editor = lazy(() =>\n  import('@monaco-editor/react').then((mod) => ({ default: mod.Editor }))\n);\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  const theme = isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme';\n\n  const handleMountIde: OnMount = (editor, monaco) => {\n    // first time you set the height based on content Height\n\n    ideRef.current = editor as any;\n    const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n    monaco.editor.defineTheme('vs-dark-transparent', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n    monaco.editor.defineTheme('hc-light-theme', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n\n    monaco.editor.setTheme(theme);\n\n    // Disable TypeScript diagnostics\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true, // Disables type checking\n      noSyntaxValidation: true, // Disables syntax errors\n    });\n\n    // Disable JavaScript diagnostics\n    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true,\n      noSyntaxValidation: true,\n    });\n\n    // Disable unnecessary language features (e.g., suggestions, quick fixes)\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    setEditorSize({\n      height: contentHeight,\n      width: containerRef.current?.clientWidth ?? 0,\n    });\n  };\n\n  const isShowLineNumbers =\n    showLineNumbers ??\n    (typeof children === 'string' ? children.split('\\n').length > 1 : false);\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <div className=\"sticky top-5 z-10\">\n          <div\n            className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n          >\n            <CopyButton content={children} />\n          </div>\n        </div>\n      )}\n      <div\n        className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Suspense fallback={<Loader />}>\n          <Editor\n            {...editorSize}\n            defaultLanguage=\"typescript\"\n            language={language}\n            loading={<Loader />}\n            defaultValue={String(children).replace(/\\n$/, '')}\n            onMount={handleMountIde}\n            onChange={onChange}\n            options={{\n              readOnly: isReadOnly,\n              cursorStyle: 'line',\n              minimap: { enabled: false },\n              scrollbar: {\n                vertical: 'hidden',\n                verticalScrollbarSize: 0,\n                alwaysConsumeMouseWheel: false,\n              },\n              folding: false, // Disable code folding\n              renderValidationDecorations: 'off', // Disable error/warning decorations\n              quickSuggestions: false, // Disable IntelliSense\n              parameterHints: { enabled: false }, // Disable parameter hints\n              suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n              mouseWheelScrollSensitivity: 0,\n              fastScrollSensitivity: 0,\n              scrollBeyondLastLine: false,\n              lineNumbers: isShowLineNumbers ? 'on' : 'off',\n            }}\n            theme={theme}\n            className=\"my-2 rounded-md\"\n          />\n        </Suspense>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,SAAS,WACb,OAAO,wBAAwB,MAAM,SAAS,EAAE,SAAS,IAAI,QAAQ,EAAE,CACxE;AAYD,MAAa,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;EAAG,CAAC;CAE3B,MAAM,QAAQ,aAAa,wBAAwB;CAEnD,MAAM,kBAA2B,QAAQ,WAAW;AAGlD,SAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,kBAAkB,IAAI,KAAK;AAEzD,SAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AACF,SAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AAEF,SAAO,OAAO,SAAS,MAAM;AAG7B,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,gBAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;GAC7C,CAAC;;CAGJ,MAAM,oBACJ,oBACC,OAAO,aAAa,WAAW,SAAS,MAAM,KAAK,CAAC,SAAS,IAAI;AAEpE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,kCACA,mBAAmB,OACpB;YAJH,CAMG,kBACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IACE,WAAW,GAAG,kDAAkD;cAEhE,oBAAC,YAAD,EAAY,SAAS,UAAY;IAC7B;GACF,GAER,oBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAEL,oBAAC,UAAD;IAAU,UAAU,oBAAC,QAAD,EAAU;cAC5B,oBAAC,QAAD;KACE,GAAI;KACJ,iBAAgB;KACN;KACV,SAAS,oBAAC,QAAD,EAAU;KACnB,cAAc,OAAO,SAAS,CAAC,QAAQ,OAAO,GAAG;KACjD,SAAS;KACC;KACV,SAAS;MACP,UAAU;MACV,aAAa;MACb,SAAS,EAAE,SAAS,OAAO;MAC3B,WAAW;OACT,UAAU;OACV,uBAAuB;OACvB,yBAAyB;OAC1B;MACD,SAAS;MACT,6BAA6B;MAC7B,kBAAkB;MAClB,gBAAgB,EAAE,SAAS,OAAO;MAClC,4BAA4B;MAE5B,6BAA6B;MAC7B,uBAAuB;MACvB,sBAAsB;MACtB,aAAa,oBAAoB,OAAO;MACzC;KACM;KACP,WAAU;KACV;IACO;GACP,EACF"}

package/dist/esm/components/IDE/PackageManagerSelector.mjs

@@ -1,2 +1,43 @@
-"use client";import{useCodeContext as e}from"./CodeContext.mjs";import{Select as t}from"../Select/Select.mjs";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{useIntlayer as i}from"react-intlayer";const a=()=>{let{packageManager:a,setPackageManager:o}=e(),s=i(`code-selectors`);return i(`code-selectors`),r(t,{value:a,onValueChange:o,children:[n(t.Trigger,{className:`py-1!`,"aria-label":s.packageManager.label.value,children:n(t.Value,{placeholder:s.packageManager.placeholder.value})}),r(t.Content,{children:[n(t.Item,{value:`npm`,children:`npm`}),n(t.Item,{value:`pnpm`,children:`pnpm`}),n(t.Item,{value:`yarn`,children:`yarn`}),n(t.Item,{value:`bun`,children:`bun`})]})]})};export{a as PackageManagerSelector};
+'use client';
+
+import { useCodeContext } from "./CodeContext.mjs";
+import { Select } from "../Select/Select.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/IDE/PackageManagerSelector.tsx
+const PackageManagerSelector = () => {
+	const { packageManager, setPackageManager } = useCodeContext();
+	const content = useIntlayer("code-selectors");
+	useIntlayer("code-selectors");
+	return /* @__PURE__ */ jsxs(Select, {
+		value: packageManager,
+		onValueChange: setPackageManager,
+		children: [/* @__PURE__ */ jsx(Select.Trigger, {
+			className: "py-1!",
+			"aria-label": content.packageManager.label.value,
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: content.packageManager.placeholder.value })
+		}), /* @__PURE__ */ jsxs(Select.Content, { children: [
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "npm",
+				children: "npm"
+			}),
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "pnpm",
+				children: "pnpm"
+			}),
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "yarn",
+				children: "yarn"
+			}),
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "bun",
+				children: "bun"
+			})
+		] })]
+	});
+};
+
+//#endregion
+export { PackageManagerSelector };
 //# sourceMappingURL=PackageManagerSelector.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PackageManagerSelector.mjs","names":[],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n  const { packageManager, setPackageManager } = useCodeContext();\n  const content = useIntlayer('code-selectors');\n  useIntlayer('code-selectors');\n\n  return (\n    <Select value={packageManager} onValueChange={setPackageManager}>\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.packageManager.label.value}\n      >\n        <Select.Value placeholder={content.packageManager.placeholder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"npm\">npm</Select.Item>\n        <Select.Item value=\"pnpm\">pnpm</Select.Item>\n        <Select.Item value=\"yarn\">yarn</Select.Item>\n        <Select.Item value=\"bun\">bun</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":"6MAOA,MAAa,MAAmC,CAC9C,GAAM,CAAE,iBAAgB,qBAAsB,GAAgB,CACxD,EAAU,EAAY,iBAAiB,CAG7C,OAFA,EAAY,iBAAiB,CAG3B,EAAC,EAAD,CAAQ,MAAO,EAAgB,cAAe,WAA9C,CACE,EAAC,EAAO,QAAR,CACE,UAAU,QACV,aAAY,EAAQ,eAAe,MAAM,eAEzC,EAAC,EAAO,MAAR,CAAc,YAAa,EAAQ,eAAe,YAAY,MAAS,CAAA,CACxD,CAAA,CACjB,EAAC,EAAO,QAAR,CAAA,SAAA,CACE,EAAC,EAAO,KAAR,CAAa,MAAM,eAAM,MAAiB,CAAA,CAC1C,EAAC,EAAO,KAAR,CAAa,MAAM,gBAAO,OAAkB,CAAA,CAC5C,EAAC,EAAO,KAAR,CAAa,MAAM,gBAAO,OAAkB,CAAA,CAC5C,EAAC,EAAO,KAAR,CAAa,MAAM,eAAM,MAAiB,CAAA,CAC3B,CAAA,CAAA,CACV"}
+{"version":3,"file":"PackageManagerSelector.mjs","names":[],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n  const { packageManager, setPackageManager } = useCodeContext();\n  const content = useIntlayer('code-selectors');\n  useIntlayer('code-selectors');\n\n  return (\n    <Select value={packageManager} onValueChange={setPackageManager}>\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.packageManager.label.value}\n      >\n        <Select.Value placeholder={content.packageManager.placeholder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"npm\">npm</Select.Item>\n        <Select.Item value=\"pnpm\">pnpm</Select.Item>\n        <Select.Item value=\"yarn\">yarn</Select.Item>\n        <Select.Item value=\"bun\">bun</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAa,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;CAC9D,MAAM,UAAU,YAAY,iBAAiB;AAC7C,aAAY,iBAAiB;AAE7B,QACE,qBAAC,QAAD;EAAQ,OAAO;EAAgB,eAAe;YAA9C,CACE,oBAAC,OAAO,SAAR;GACE,WAAU;GACV,cAAY,QAAQ,eAAe,MAAM;aAEzC,oBAAC,OAAO,OAAR,EAAc,aAAa,QAAQ,eAAe,YAAY,OAAS;GACxD,GACjB,qBAAC,OAAO,SAAR;GACE,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAM;IAAiB;GAC1C,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAO;IAAkB;GAC5C,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAO;IAAkB;GAC5C,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAM;IAAiB;GAC3B,IACV"}