@intlayer/design-system 6.1.6 → 7.0.0-canary.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeContext.mjs","names":["CodeProvider: FC<PropsWithChildren>"],"sources":["../../../../src/components/IDE/CodeContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n} from 'react';\nimport { usePersistedStore } from '../../hooks';\n\nexport type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';\nexport type CodeFormat = 'typescript' | 'commonjs' | 'esm';\nexport type ContentDeclarationFormat =\n  | 'typescript'\n  | 'commonjs'\n  | 'esm'\n  | 'json';\n\ntype CodeContextValue = {\n  packageManager: PackageManager;\n  setPackageManager: (packageManager: PackageManager) => void;\n  codeFormat: CodeFormat;\n  setCodeFormat: (codeFormat: CodeFormat) => void;\n  contentDeclarationFormat: ContentDeclarationFormat;\n  setContentDeclarationFormat: (\n    contentDeclarationFormat: ContentDeclarationFormat\n  ) => void;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const CodeContext = createContext<CodeContextValue>({\n  packageManager: 'npm',\n  setPackageManager: () => {},\n  codeFormat: 'typescript',\n  setCodeFormat: () => {},\n  contentDeclarationFormat: 'typescript',\n  setContentDeclarationFormat: () => {},\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useCodeContext = () => useContext(CodeContext);\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const CodeProvider: FC<PropsWithChildren> = ({ children }) => {\n  const [packageManager, setPackageManager] = usePersistedStore<PackageManager>(\n    'packageManager',\n    'npm'\n  );\n  const [codeFormat, setCodeFormat] = usePersistedStore<CodeFormat>(\n    'codeFormat',\n    'typescript'\n  );\n  const [contentDeclarationFormat, setContentDeclarationFormat] =\n    usePersistedStore<ContentDeclarationFormat>(\n      'contentDeclarationFormat',\n      'typescript'\n    );\n\n  return (\n    <CodeContext\n      value={{\n        packageManager,\n        setPackageManager,\n        codeFormat,\n        setCodeFormat,\n        contentDeclarationFormat,\n        setContentDeclarationFormat,\n      }}\n    >\n      {children}\n    </CodeContext>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAgCA,MAAa,cAAc,cAAgC;CACzD,gBAAgB;CAChB,yBAAyB;CACzB,YAAY;CACZ,qBAAqB;CACrB,0BAA0B;CAC1B,mCAAmC;CACpC,CAAC;;;;AAKF,MAAa,uBAAuB,WAAW,YAAY;;;;AAK3D,MAAaA,gBAAuC,EAAE,eAAe;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,kBAC1C,kBACA,MACD;CACD,MAAM,CAAC,YAAY,iBAAiB,kBAClC,cACA,aACD;CACD,MAAM,CAAC,0BAA0B,+BAC/B,kBACE,4BACA,aACD;AAEH,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACD;EAEA;GACW"}

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

@@ -0,0 +1,36 @@
+'use client';
+
+
+import { Select } from "../Select/Select.mjs";
+import { useCodeContext } from "./CodeContext.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/IDE/CodeFormatSelector.tsx
+const CodeFormatSelector = () => {
+	const { codeFormat, setCodeFormat, setContentDeclarationFormat } = useCodeContext();
+	return /* @__PURE__ */ jsxs(Select, {
+		value: codeFormat,
+		onValueChange: (value) => {
+			setCodeFormat(value);
+			setContentDeclarationFormat(value);
+		},
+		children: [/* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Code Format" }) }), /* @__PURE__ */ jsxs(Select.Content, { children: [
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "typescript",
+				children: "TypeScript"
+			}),
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "esm",
+				children: "ESM"
+			}),
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "commonjs",
+				children: "CommonJS"
+			})
+		] })]
+	});
+};
+
+//#endregion
+export { CodeFormatSelector };
+//# sourceMappingURL=CodeFormatSelector.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeFormatSelector.mjs","names":["CodeFormatSelector: FC"],"sources":["../../../../src/components/IDE/CodeFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeFormatSelector: FC = () => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n\n  return (\n    <Select\n      value={codeFormat}\n      onValueChange={(value) => {\n        setCodeFormat(value as typeof codeFormat);\n        setContentDeclarationFormat(value as typeof codeFormat);\n      }}\n    >\n      <Select.Trigger>\n        <Select.Value placeholder=\"Code Format\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,2BAA+B;CAC1C,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;AAElB,QACE,qBAAC;EACC,OAAO;EACP,gBAAgB,UAAU;AACxB,iBAAc,MAA2B;AACzC,+BAA4B,MAA2B;;aAGzD,oBAAC,OAAO,qBACN,oBAAC,OAAO,SAAM,aAAY,gBAAgB,GAC3B,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;MACrC;GACV"}

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

@@ -0,0 +1,37 @@
+'use client';
+
+
+import { Select } from "../Select/Select.mjs";
+import { useCodeContext } from "./CodeContext.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/IDE/ContentDeclarationFormatSelector.tsx
+const ContentDeclarationFormatSelector = () => {
+	const { contentDeclarationFormat, setContentDeclarationFormat } = useCodeContext();
+	return /* @__PURE__ */ jsxs(Select, {
+		value: contentDeclarationFormat,
+		onValueChange: setContentDeclarationFormat,
+		children: [/* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Dictionary Format" }) }), /* @__PURE__ */ jsxs(Select.Content, { children: [
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "typescript",
+				children: "TypeScript"
+			}),
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "commonjs",
+				children: "CommonJS"
+			}),
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "esm",
+				children: "ESM"
+			}),
+			/* @__PURE__ */ jsx(Select.Item, {
+				value: "json",
+				children: "JSON"
+			})
+		] })]
+	});
+};
+
+//#endregion
+export { ContentDeclarationFormatSelector };
+//# sourceMappingURL=ContentDeclarationFormatSelector.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":["ContentDeclarationFormatSelector: FC"],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const ContentDeclarationFormatSelector: FC = () => {\n  const { contentDeclarationFormat, setContentDeclarationFormat } =\n    useCodeContext();\n\n  return (\n    <Select\n      value={contentDeclarationFormat}\n      onValueChange={setContentDeclarationFormat}\n    >\n      <Select.Trigger>\n        <Select.Value placeholder=\"Dictionary Format\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"json\">JSON</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;AAElB,QACE,qBAAC;EACC,OAAO;EACP,eAAe;aAEf,oBAAC,OAAO,qBACN,oBAAC,OAAO,SAAM,aAAY,sBAAsB,GACjC,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;GACpD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;MAC7B;GACV"}

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

@@ -0,0 +1,28 @@
+'use client';
+
+
+import { CopyButton } from "../CopyButton/index.mjs";
+import { Popover, PopoverXAlign } from "../Popover/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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyCode.mjs","names":["CopyCode: FC<CopyCodeProps>"],"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,MAAaA,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC;EAAQ,YAAW;aAClB,oBAAC,cAAW,SAAS,OAAQ,EAE7B,qBAAC,QAAQ;GACP,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;cAEtB,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAE,WAAU;cAAgB;KAAgB;IAC9B;GACT"}

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.mjs","names":["FileList: FC<FileListProps>"],"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,MAAaA,YAA+B,EAAE,UAAW,GAAG,YAC1D,qBAAC;CACC,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;YAEJ,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;;IACb,oBAAC,SAAI,WAAU,mCAAmC;IAClD,oBAAC,SAAI,WAAU,sCAAsC;IACrD,oBAAC,SAAI,WAAU,qCAAqC;;IAChD;GACF,EACN,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,oBAAC,YAAS,YAAY,YAAa;KAC/B;IACF;GACF;EACI"}

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

@@ -0,0 +1,66 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { createFileTree } from "./createFileTree.mjs";
+import { ChevronRight } from "lucide-react";
+import { useState } from "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$1) => path$1.replace(/^\/?/, "")).filter((filePath) => filePath.startsWith(currentPath)).map((path$1) => path$1.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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.mjs","names":["FileItem: FC<FileItemProps>","path","FileTree: FC<FileTreeProps>"],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } 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=\"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,MAAMA,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,WAASC,OAAK,QAAQ,QAAQ,GAAG,CACnC,CACA,QAAQ,aAAa,SAAS,WAAW,YAAY,CAAC,CAEvB,KAAK,WACrCA,OAAK,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;EACC,WAAW,GACT,iGACA,WACI,uCACA,gEACL;EAED,eAAe;AACb,OAAI,OACF,eAAc,UAAU;OAExB,gBAAe,CAAC,YAAY;;;GAIhC,oBAAC;IAAK,WAAW,GAAG,kBAAkB,UAAU,OAAO;cACpD;KACI;GAEN,CAAC,UACA,oBAAC;IACC,WAAW,GAAG,cAAc,eAAe,sBAAsB;IACjE,MAAM;KACN;GAEH;;IAnBI,KAoBE,EACR,WACC,oBAAC;EACC,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC;GACC,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,KAAK;IAC7B;GACgB,IAErB;;AAIP,MAAaC,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,EAAE,OACT;AAGJ,QACE,oBAAC;EAAI,WAAU;YAHA,eAAe,WAAW,CAI7B,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC;GAES;GACC;GACH;GACO;GACD;GACF;GACE;KAPP,KAQL,CACF;GACE"}

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

@@ -0,0 +1,89 @@
+'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 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: "flex size-full overflow-y-auto",
+				children: tabs.map(({ path: path$1 }, index) => {
+					const fullPath = path$1.split("/");
+					const title = fullPath[fullPath.length - 1];
+					return /* @__PURE__ */ jsx("button", {
+						className: cn("flex h-8 min-w-20 items-center justify-start 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(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

@@ -0,0 +1 @@
+{"version":3,"file":"IDE.mjs","names":["IDE: FC<IDEProps>","path"],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes, useEffect, useState } 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  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 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 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'\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              <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\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAaA,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,iBACX,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;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWC,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}

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

@@ -0,0 +1,22 @@
+import { Code } from "./Code.mjs";
+import { MarkdownProcessor } from "../MarkDownRender/processor.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/IDE/MarkDownRender.tsx
+const MarkdownRenderer = ({ children, isDarkMode }) => /* @__PURE__ */ jsx(MarkdownProcessor, {
+	options: { overrides: {
+		code: { component: (props) => /* @__PURE__ */ jsx(Code, {
+			...props,
+			isDarkMode,
+			language: props.className?.replace("lang-", ""),
+			showHeader: false,
+			className: "text-xs leading-5"
+		}) },
+		pre: (props) => props.children
+	} },
+	children: children ?? ""
+});
+
+//#endregion
+export { MarkdownRenderer };
+//# sourceMappingURL=MarkDownRender.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkDownRender.mjs","names":["MarkdownRenderer: FC<MarkdownRendererProps>"],"sources":["../../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { MarkdownProcessor } from '../MarkDownRender/processor';\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  <MarkdownProcessor\n    options={{\n      overrides: {\n        code: {\n          component: (props: ComponentProps<typeof Code>) => (\n            <Code\n              {...props}\n              isDarkMode={isDarkMode}\n              language={\n                props.className?.replace('lang-', '') as BundledLanguage\n              }\n              showHeader={false}\n              className=\"text-xs leading-5\"\n            />\n          ),\n        },\n        pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n      },\n    }}\n  >\n    {children ?? ''}\n  </MarkdownProcessor>\n);\n"],"mappings":";;;;;AAUA,MAAaA,oBAA+C,EAC1D,UACA,iBAEA,oBAAC;CACC,SAAS,EACP,WAAW;EACT,MAAM,EACJ,YAAY,UACV,oBAAC;GACC,GAAI;GACQ;GACZ,UACE,MAAM,WAAW,QAAQ,SAAS,GAAG;GAEvC,YAAY;GACZ,WAAU;IACV,EAEL;EACD,MAAM,UAA2C,MAAM;EACxD,EACF;WAEA,YAAY;EACK"}

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

@@ -0,0 +1,105 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { Loader } from "../Loader/index.mjs";
+import { CopyButton } from "../CopyButton/index.mjs";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Editor } from "@monaco-editor/react";
+
+//#region src/components/IDE/MonacoCode.tsx
+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 = useMemo(() => isDarkMode ? "vs-dark-transparent" : "hc-light-theme", [isDarkMode]);
+	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 ?? children.split("\n").length > 1;
+	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(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

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoCode.mjs","names":["MonacoCode: FC<CodeCompProps>","handleMountIde: OnMount"],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, type OnChange, type OnMount } from '@monaco-editor/react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\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 = useMemo(\n    () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n    [isDarkMode]\n  );\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 = showLineNumbers ?? children.split('\\n').length > 1;\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        <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      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,MAAaA,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,cACL,aAAa,wBAAwB,kBAC5C,CAAC,WAAW,CACb;CAED,MAAMC,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,oBAAoB,mBAAmB,SAAS,MAAM,KAAK,CAAC,SAAS;AAE3E,QACE,qBAAC;EACC,WAAW,GACT,kCACA,mBAAmB,OACpB;aAEA,kBACC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAW,GAAG,kDAAkD;cAEhE,oBAAC,cAAW,SAAS,WAAY;KAC7B;IACF,EAER,oBAAC;GACC,WAAU;GACV,KAAK;aAEL,oBAAC;IACC,GAAI;IACJ,iBAAgB;IACN;IACV,SAAS,oBAAC,WAAS;IACnB,cAAc,OAAO,SAAS,CAAC,QAAQ,OAAO,GAAG;IACjD,SAAS;IACC;IACV,SAAS;KACP,UAAU;KACV,aAAa;KACb,SAAS,EAAE,SAAS,OAAO;KAC3B,WAAW;MACT,UAAU;MACV,uBAAuB;MACvB,yBAAyB;MAC1B;KACD,SAAS;KACT,6BAA6B;KAC7B,kBAAkB;KAClB,gBAAgB,EAAE,SAAS,OAAO;KAClC,4BAA4B;KAE5B,6BAA6B;KAC7B,uBAAuB;KACvB,sBAAsB;KACtB,aAAa,oBAAoB,OAAO;KACzC;IACM;IACP,WAAU;KACV;IACE;GACF"}

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

@@ -0,0 +1,37 @@
+'use client';
+
+
+import { Select } from "../Select/Select.mjs";
+import { useCodeContext } from "./CodeContext.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/IDE/PackageManagerSelector.tsx
+const PackageManagerSelector = () => {
+	const { packageManager, setPackageManager } = useCodeContext();
+	return /* @__PURE__ */ jsxs(Select, {
+		value: packageManager,
+		onValueChange: setPackageManager,
+		children: [/* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Package Manager" }) }), /* @__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

@@ -0,0 +1 @@
+{"version":3,"file":"PackageManagerSelector.mjs","names":["PackageManagerSelector: FC"],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n  const { packageManager, setPackageManager } = useCodeContext();\n\n  return (\n    <Select value={packageManager} onValueChange={setPackageManager}>\n      <Select.Trigger>\n        <Select.Value placeholder=\"Package Manager\" />\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":";;;;;;;;AAMA,MAAaA,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;AAE9D,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO,qBACN,oBAAC,OAAO,SAAM,aAAY,oBAAoB,GAC/B,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}

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

@@ -0,0 +1,58 @@
+import { t } from "intlayer";
+
+//#region src/components/IDE/code.content.ts
+const codeContent = {
+	key: "code",
+	content: {
+		title: t({
+			en: "Copy code",
+			es: "Copiar código",
+			pt: "Copiar código",
+			fr: "Copier le code",
+			de: "Code kopieren",
+			it: "Copiare il codice",
+			ja: "コードをコピー",
+			ko: "코드 복사",
+			zh: "复制代码",
+			hi: "कोड कॉपी करें",
+			"en-GB": "Copy code",
+			ru: "Копировать код",
+			ar: "نسخ الكود",
+			tr: "Kodu kopyala",
+			pl: "Kopiuj kod",
+			id: "Salin kode",
+			vi: "Sao chép mã"
+		}),
+		description: t({
+			en: "Copy the code to the clipboard",
+			es: "Copiar el código al portapapeles",
+			pt: "Copiar o código para a área de transferência",
+			fr: "Copier le code dans le presse-papiers",
+			de: "Kopieren Sie den Code in die Zwischenablage",
+			it: "Copiare il codice nella clipboard",
+			ja: "コードをクリップボードにコピー",
+			ko: "코드를 클립보드에 복사",
+			zh: "复制代码到剪贴板",
+			hi: "कोड को क्लिपबोर्ड पर कॉपी करें",
+			"en-GB": "Copy the code to the clipboard",
+			ru: "Копировать код в буфер обмена",
+			ar: "نسخ الكود إلى الحافظة",
+			tr: "Kodu panoya kopyala",
+			pl: "Skopiuj kod do schowka",
+			id: "Salin kode ke clipboard",
+			vi: "Sao chép đoạn mã vào khay nhớ tạm (clipboard)"
+		})
+	},
+	title: "Code block actions",
+	description: "Content declaration for code block interactions, allowing users to copy code snippets to the clipboard.",
+	tags: [
+		"code block",
+		"copy action",
+		"design system"
+	]
+};
+var code_content_default = codeContent;
+
+//#endregion
+export { code_content_default as default };
+//# sourceMappingURL=code.content.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code.content.mjs","names":[],"sources":["../../../../src/components/IDE/code.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst codeContent = {\n  key: 'code',\n  content: {\n    title: t({\n      en: 'Copy code',\n      es: 'Copiar código',\n      pt: 'Copiar código',\n      fr: 'Copier le code',\n      de: 'Code kopieren',\n      it: 'Copiare il codice',\n      ja: 'コードをコピー',\n      ko: '코드 복사',\n      zh: '复制代码',\n      hi: 'कोड कॉपी करें',\n      'en-GB': 'Copy code',\n      ru: 'Копировать код',\n      ar: 'نسخ الكود',\n      tr: 'Kodu kopyala',\n      pl: 'Kopiuj kod',\n      id: 'Salin kode',\n      vi: 'Sao chép mã',\n    }),\n    description: t({\n      en: 'Copy the code to the clipboard',\n      es: 'Copiar el código al portapapeles',\n      pt: 'Copiar o código para a área de transferência',\n      fr: 'Copier le code dans le presse-papiers',\n      de: 'Kopieren Sie den Code in die Zwischenablage',\n      it: 'Copiare il codice nella clipboard',\n      ja: 'コードをクリップボードにコピー',\n      ko: '코드를 클립보드에 복사',\n      zh: '复制代码到剪贴板',\n      hi: 'कोड को क्लिपबोर्ड पर कॉपी करें',\n      'en-GB': 'Copy the code to the clipboard',\n      ru: 'Копировать код в буфер обмена',\n      ar: 'نسخ الكود إلى الحافظة',\n      tr: 'Kodu panoya kopyala',\n      pl: 'Skopiuj kod do schowka',\n      id: 'Salin kode ke clipboard',\n      vi: 'Sao chép đoạn mã vào khay nhớ tạm (clipboard)',\n    }),\n  },\n  title: 'Code block actions',\n  description:\n    'Content declaration for code block interactions, allowing users to copy code snippets to the clipboard.',\n  tags: ['code block', 'copy action', 'design system'],\n} satisfies Dictionary;\n\nexport default codeContent;\n"],"mappings":";;;AAEA,MAAM,cAAc;CAClB,KAAK;CACL,SAAS;EACP,OAAO,EAAE;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAc;EAAe;EAAgB;CACrD;AAED,2BAAe"}