@intlayer/design-system 8.4.4 → 8.4.5

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

@@ -1,3 +1,60 @@
-import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{ExpandCollapse as n}from"../ExpandCollapse/ExpandCollapse.mjs";import{CodeBlock as r}from"./CodeBlockClient.mjs";import{CodeConditionalRender as i}from"./CodeConditionalRenderer.mjs";import{CodeFormatSelector as a}from"./CodeFormatSelector.mjs";import{ContentDeclarationFormatSelector as o}from"./ContentDeclarationFormatSelector.mjs";import{CopyCode as s}from"./CopyCode.mjs";import{PackageManagerSelector as c}from"./PackageManagerSelector.mjs";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=({children:f,language:p,isDarkMode:m,showHeader:h=!0,showLineNumbers:g=!0,className:_,fileName:v,packageManager:y,codeFormat:b,contentDeclarationFormat:x,isRollable:S=!0,...C})=>{let w=f?.endsWith(`
-`)?f.slice(0,-1):f,T=y||b||x;return u(i,{packageManager:y,codeFormat:b,contentDeclarationFormat:x,children:d(t,{className:e(`relative min-w-0 max-w-full text-sm leading-6`,g&&`with-line-number ml-0`,_),transparency:`lg`,...C,children:[h&&d(l,{children:[d(`div`,{className:`grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs`,children:[u(`span`,{className:`truncate`,children:v??p}),d(`div`,{className:`flex items-center gap-2`,children:[y&&u(c,{}),b&&u(a,{}),x&&u(o,{})]})]}),u(`div`,{className:`sticky top-46 z-20`,children:u(`div`,{className:e(`absolute right-2 bottom-0 flex h-7 items-center`,T&&`h-11`),children:u(s,{code:w})})})]}),u(n,{minHeight:700,isRollable:S,className:`min-w-0 max-w-full overflow-x-auto p-2`,children:u(r,{lang:p,isDarkMode:m,children:w})})]})})};export{f as Code};
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
+import { CodeBlock } from "./CodeBlockClient.mjs";
+import { CodeConditionalRender } from "./CodeConditionalRenderer.mjs";
+import { CodeFormatSelector } from "./CodeFormatSelector.mjs";
+import { ContentDeclarationFormatSelector } from "./ContentDeclarationFormatSelector.mjs";
+import { CopyCode } from "./CopyCode.mjs";
+import { PackageManagerSelector } from "./PackageManagerSelector.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/IDE/Code.tsx
+const MIN_HEIGHT = 700;
+const Code = ({ children, language, isDarkMode, showHeader = true, showLineNumbers = true, className, fileName, packageManager, codeFormat, contentDeclarationFormat, isRollable = true, ...props }) => {
+	const code = children?.endsWith("\n") ? children.slice(0, -1) : children;
+	const hadSelectInHeader = packageManager || codeFormat || contentDeclarationFormat;
+	return /* @__PURE__ */ jsx(CodeConditionalRender, {
+		packageManager,
+		codeFormat,
+		contentDeclarationFormat,
+		children: /* @__PURE__ */ jsxs(Container, {
+			className: cn("relative min-w-0 max-w-full text-sm leading-6", showLineNumbers && "with-line-number ml-0", className),
+			transparency: "lg",
+			...props,
+			children: [showHeader && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: fileName ?? language
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						packageManager && /* @__PURE__ */ jsx(PackageManagerSelector, {}),
+						codeFormat && /* @__PURE__ */ jsx(CodeFormatSelector, {}),
+						contentDeclarationFormat && /* @__PURE__ */ jsx(ContentDeclarationFormatSelector, {})
+					]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "sticky top-46 z-20",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("absolute right-2 bottom-0 flex h-7 items-center", hadSelectInHeader && "h-11"),
+					children: /* @__PURE__ */ jsx(CopyCode, { code })
+				})
+			})] }), /* @__PURE__ */ jsx(ExpandCollapse, {
+				minHeight: MIN_HEIGHT,
+				isRollable,
+				className: "min-w-0 max-w-full overflow-x-auto p-2",
+				children: /* @__PURE__ */ jsx(CodeBlock, {
+					lang: language,
+					isDarkMode,
+					children: code
+				})
+			})]
+		})
+	});
+};
+
+//#endregion
+export { Code };
 //# sourceMappingURL=Code.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const code = children?.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative min-w-0 max-w-full text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-46 z-20\">\n              <div\n                className={cn(\n                  'absolute right-2 bottom-0 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse\n          minHeight={MIN_HEIGHT}\n          isRollable={isRollable}\n          className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n        >\n          <CodeBlock lang={language} isDarkMode={isDarkMode}>\n            {code}\n          </CodeBlock>\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":"imBAmCA,MAEa,GAA2B,CACtC,WACA,WACA,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,WACA,iBACA,aACA,2BACA,aAAa,GACb,GAAG,KACC,CACJ,IAAM,EAAO,GAAU,SAAS;EAAK,CAAG,EAAS,MAAM,EAAG,GAAG,CAAG,EAE1D,EACJ,GAAkB,GAAc,EAElC,OACE,EAAC,EAAD,CACkB,iBACJ,aACc,oCAE1B,EAAC,EAAD,CACE,UAAW,EACT,gDACA,GAAmB,wBACnB,EACD,CACD,aAAa,KACb,GAAI,WAPN,CASG,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,wIAAf,CACE,EAAC,OAAD,CAAM,UAAU,oBAAY,GAAY,EAAgB,CAAA,CACxD,EAAC,MAAD,CAAK,UAAU,mCAAf,CACG,GAAkB,EAAC,EAAD,EAA0B,CAAA,CAC5C,GAAc,EAAC,EAAD,EAAsB,CAAA,CACpC,GACC,EAAC,EAAD,EAAoC,CAAA,CAElC,GACF,GACN,EAAC,MAAD,CAAK,UAAU,8BACb,EAAC,MAAD,CACE,UAAW,EACT,kDACA,GAAqB,OACtB,UAED,EAAC,EAAD,CAAgB,OAAQ,CAAA,CACpB,CAAA,CACF,CAAA,CACL,CAAA,CAAA,CAEL,EAAC,EAAD,CACE,UAAW,IACC,aACZ,UAAU,kDAEV,EAAC,EAAD,CAAW,KAAM,EAAsB,sBACpC,EACS,CAAA,CACG,CAAA,CACP,GACU,CAAA"}
+{"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const code = children?.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative min-w-0 max-w-full text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-46 z-20\">\n              <div\n                className={cn(\n                  'absolute right-2 bottom-0 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse\n          minHeight={MIN_HEIGHT}\n          isRollable={isRollable}\n          className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n        >\n          <CodeBlock lang={language} isDarkMode={isDarkMode}>\n            {code}\n          </CodeBlock>\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,aAAa;AAEnB,MAAa,QAA2B,EACtC,UACA,UACA,YACA,aAAa,MACb,kBAAkB,MAClB,WACA,UACA,gBACA,YACA,0BACA,aAAa,MACb,GAAG,YACC;CACJ,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG,SAAS,MAAM,GAAG,GAAG,GAAG;CAEhE,MAAM,oBACJ,kBAAkB,cAAc;AAElC,QACE,oBAAC,uBAAD;EACkB;EACJ;EACc;YAE1B,qBAAC,WAAD;GACE,WAAW,GACT,iDACA,mBAAmB,yBACnB,UACD;GACD,cAAa;GACb,GAAI;aAPN,CASG,cACC,4CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAY,YAAY;KAAgB,GACxD,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,kBAAkB,oBAAC,wBAAD,EAA0B;MAC5C,cAAc,oBAAC,oBAAD,EAAsB;MACpC,4BACC,oBAAC,kCAAD,EAAoC;MAElC;OACF;OACN,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KACE,WAAW,GACT,mDACA,qBAAqB,OACtB;eAED,oBAAC,UAAD,EAAgB,MAAQ;KACpB;IACF,EACL,KAEL,oBAAC,gBAAD;IACE,WAAW;IACC;IACZ,WAAU;cAEV,oBAAC,WAAD;KAAW,MAAM;KAAsB;eACpC;KACS;IACG,EACP;;EACU"}

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

@@ -1,3 +1,32 @@
-import{cn as e}from"../../utils/cn.mjs";import{Suspense as t,lazy as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=({children:e})=>r(`div`,{className:`min-w-0 max-w-full overflow-x-auto`,children:r(`pre`,{className:`min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,children:r(`code`,{children:typeof e==`string`?e.split(`
-`).map((e,t)=>r(`span`,{className:`line block w-full`,children:e},`line-${t}-${e.slice(0,10)}`)):e})})}),a=n(()=>import(`./CodeBlockShiki.mjs`).then(e=>({default:e.CodeBlockShiki}))),o=({className:n,onChange:o,isEditable:s,children:c,lang:l,isDarkMode:u,...d})=>r(`div`,{className:e(`flex w-full min-w-0 max-w-full overflow-x-auto`,n),...d,children:r(t,{fallback:r(i,{children:c}),children:r(a,{lang:l,isDarkMode:u,children:c})})});export{o as CodeBlock,i as CodeDefault};
+import { cn } from "../../utils/cn.mjs";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/IDE/CodeBlockClient.tsx
+const CodeDefault = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "min-w-0 max-w-full overflow-x-auto",
+	children: /* @__PURE__ */ jsx("pre", {
+		className: "min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+		children: /* @__PURE__ */ jsx("code", { children: typeof children === "string" ? children.split("\n").map((line, index) => /* @__PURE__ */ jsx("span", {
+			className: "line block w-full",
+			children: line
+		}, `line-${index}-${line.slice(0, 10)}`)) : children })
+	})
+});
+const CodeBlockShiki = lazy(() => import("./CodeBlockShiki.mjs").then((mod) => ({ default: mod.CodeBlockShiki })));
+const CodeBlock = ({ className, onChange, isEditable, children, lang, isDarkMode, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex w-full min-w-0 max-w-full overflow-x-auto", className),
+	...props,
+	children: /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(CodeDefault, { children }),
+		children: /* @__PURE__ */ jsx(CodeBlockShiki, {
+			lang,
+			isDarkMode,
+			children
+		})
+	})
+});
+
+//#endregion
+export { CodeBlock, CodeDefault };
 //# sourceMappingURL=CodeBlockClient.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockClient.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\n\nexport type { BundledLanguage as CodeLanguage } from 'shiki/bundle/web';\n\nexport const CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div className=\"min-w-0 max-w-full overflow-x-auto\">\n    <pre className=\"min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n      <code>\n        {typeof children === 'string'\n          ? children.split('\\n').map((line, index) => (\n              <span\n                className=\"line block w-full\"\n                key={`line-${index}-${line.slice(0, 10)}`}\n              >\n                {line}\n              </span>\n            ))\n          : children}\n      </code>\n    </pre>\n  </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n  import('./CodeBlockShiki').then((mod) => ({\n    default: mod.CodeBlockShiki,\n  }))\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  children,\n  lang,\n  isDarkMode,\n  ...props\n}) => (\n  <div\n    className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n    {...props}\n  >\n    <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n      <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n        {children}\n      </CodeBlockShiki>\n    </Suspense>\n  </div>\n);\n"],"mappings":"2HAMA,MAAa,GAAyC,CAAE,cACtD,EAAC,MAAD,CAAK,UAAU,8CACb,EAAC,MAAD,CAAK,UAAU,6HACb,EAAC,OAAD,CAAA,SACG,OAAO,GAAa,SACjB,EAAS,MAAM;EAAK,CAAC,KAAK,EAAM,IAC9B,EAAC,OAAD,CACE,UAAU,6BAGT,EACI,CAHA,QAAQ,EAAM,GAAG,EAAK,MAAM,EAAG,GAAG,GAGlC,CACP,CACF,EACC,CAAA,CACH,CAAA,CACF,CAAA,CAIF,EAAiB,MACrB,OAAO,wBAAoB,KAAM,IAAS,CACxC,QAAS,EAAI,eACd,EAAE,CACJ,CAUY,GAAiC,CAC5C,YACA,WACA,aACA,WACA,OACA,aACA,GAAG,KAEH,EAAC,MAAD,CACE,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,WAEJ,EAAC,EAAD,CAAU,SAAU,EAAC,EAAD,CAAc,WAAuB,CAAA,UACvD,EAAC,EAAD,CAAsB,OAAkB,aACrC,WACc,CAAA,CACR,CAAA,CACP,CAAA"}
+{"version":3,"file":"CodeBlockClient.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\n\nexport type { BundledLanguage as CodeLanguage } from 'shiki/bundle/web';\n\nexport const CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div className=\"min-w-0 max-w-full overflow-x-auto\">\n    <pre className=\"min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n      <code>\n        {typeof children === 'string'\n          ? children.split('\\n').map((line, index) => (\n              <span\n                className=\"line block w-full\"\n                key={`line-${index}-${line.slice(0, 10)}`}\n              >\n                {line}\n              </span>\n            ))\n          : children}\n      </code>\n    </pre>\n  </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n  import('./CodeBlockShiki').then((mod) => ({\n    default: mod.CodeBlockShiki,\n  }))\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  children,\n  lang,\n  isDarkMode,\n  ...props\n}) => (\n  <div\n    className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n    {...props}\n  >\n    <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n      <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n        {children}\n      </CodeBlockShiki>\n    </Suspense>\n  </div>\n);\n"],"mappings":";;;;;AAMA,MAAa,eAAyC,EAAE,eACtD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,YACG,OAAO,aAAa,WACjB,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC9B,oBAAC,QAAD;GACE,WAAU;aAGT;GACI,EAHA,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,GAGlC,CACP,GACF,UACC;EACH;CACF;AAIR,MAAM,iBAAiB,WACrB,OAAO,wBAAoB,MAAM,SAAS,EACxC,SAAS,IAAI,gBACd,EAAE,CACJ;AAUD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,kDAAkD,UAAU;CAC1E,GAAI;WAEJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,aAAD,EAAc,UAAuB;YACvD,oBAAC,gBAAD;GAAsB;GAAkB;GACrC;GACc;EACR;CACP"}

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

@@ -1,3 +1,46 @@
-import{cn as e}from"../../utils/cn.mjs";import{Suspense as t}from"react";import{jsx as n}from"react/jsx-runtime";import{transformerMetaHighlight as r,transformerMetaWordHighlight as i,transformerNotationDiff as a,transformerNotationErrorLevel as o,transformerNotationHighlight as s,transformerNotationWordHighlight as c}from"@shikijs/transformers";import{codeToHtml as l}from"shiki/bundle/web";const u=(async({children:e,lang:t,isDarkMode:u,onChange:d,...f})=>n(`div`,{dangerouslySetInnerHTML:{__html:await l(e,{lang:t,theme:u?`github-dark`:`github-light`,transformers:[a(),s(),c(),o(),r(),i()]})},...f,style:{backgroundColor:`transparent`}})),d=({children:e,isEditable:t,isDarkMode:r,onChange:i,...a})=>n(`div`,{contentEditable:t,...a,children:n(`pre`,{children:n(`code`,{children:typeof e==`string`?e.split(`
-`).map((e,t)=>n(`span`,{className:`line block w-full`,children:e},t)):e})})}),f=({className:r,onChange:i,isEditable:a,...o})=>n(t,{fallback:n(d,{...o}),children:n(u,{className:e(`flex w-full`,r),contentEditable:a,onInput:e=>i?.(e.currentTarget.textContent??``),...o})});export{f as CodeBlock,u as CodeBlockShiki};
+import { cn } from "../../utils/cn.mjs";
+import { Suspense } from "react";
+import { jsx } from "react/jsx-runtime";
+import { transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationHighlight, transformerNotationWordHighlight } from "@shikijs/transformers";
+import { codeToHtml } from "shiki/bundle/web";
+
+//#region src/components/IDE/CodeBlockServer.tsx
+const CodeBlockShiki = (async ({ children, lang, isDarkMode, onChange, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		dangerouslySetInnerHTML: { __html: await codeToHtml(children, {
+			lang,
+			theme: isDarkMode ? "github-dark" : "github-light",
+			transformers: [
+				transformerNotationDiff(),
+				transformerNotationHighlight(),
+				transformerNotationWordHighlight(),
+				transformerNotationErrorLevel(),
+				transformerMetaHighlight(),
+				transformerMetaWordHighlight()
+			]
+		}) },
+		...props,
+		style: { backgroundColor: "transparent" }
+	});
+});
+const CodeDefault = ({ children, isEditable, isDarkMode, onChange, ...props }) => /* @__PURE__ */ jsx("div", {
+	contentEditable: isEditable,
+	...props,
+	children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: typeof children === "string" ? children.split("\n").map((line, index) => /* @__PURE__ */ jsx("span", {
+		className: "line block w-full",
+		children: line
+	}, index)) : children }) })
+});
+const CodeBlock = ({ className, onChange, isEditable, ...props }) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: /* @__PURE__ */ jsx(CodeDefault, { ...props }),
+	children: /* @__PURE__ */ jsx(CodeBlockShiki, {
+		className: cn("flex w-full", className),
+		contentEditable: isEditable,
+		onInput: (e) => onChange?.(e.currentTarget.textContent ?? ""),
+		...props
+	})
+});
+
+//#endregion
+export { CodeBlock, CodeBlockShiki };
 //# sourceMappingURL=CodeBlockServer.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockServer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, Suspense } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki/bundle/web';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: isDarkMode ? 'github-dark' : 'github-light',\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  isDarkMode,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {typeof children === 'string'\n          ? children.split('\\n').map((line, index) => (\n              <span className=\"line block w-full\" key={index}>\n                {line}\n              </span>\n            ))\n          : children}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"mappings":"0YAiBA,MAAa,GAAkB,MAAO,CACpC,WACA,OACA,aACA,WACA,GAAG,KAkBD,EAAC,MAAD,CACE,wBAAyB,CAAE,OAJnB,MAAM,EAAW,EAb0C,CACrE,OACA,MAAO,EAAa,cAAgB,eACpC,aAAc,CACZ,GAAyB,CACzB,GAA8B,CAC9B,GAAkC,CAClC,GAA+B,CAC/B,GAA0B,CAC1B,GAA8B,CAC/B,CACF,CAEmD,CAIR,CACxC,GAAI,EACJ,MAAO,CAAE,gBAAiB,cAAe,CACzC,CAAA,EAIA,GAAmC,CACvC,WACA,aACA,aACA,WACA,GAAG,KAEH,EAAC,MAAD,CAAK,gBAAiB,EAAY,GAAI,WACpC,EAAC,MAAD,CAAA,SACE,EAAC,OAAD,CAAA,SACG,OAAO,GAAa,SACjB,EAAS,MAAM;EAAK,CAAC,KAAK,EAAM,IAC9B,EAAC,OAAD,CAAM,UAAU,6BACb,EACI,CAFkC,EAElC,CACP,CACF,EACC,CAAA,CACH,CAAA,CACF,CAAA,CAWK,GAAiC,CAC5C,YACA,WACA,aACA,GAAG,KAEH,EAAC,EAAD,CAAU,SAAU,EAAC,EAAD,CAAa,GAAI,EAAS,CAAA,UAC5C,EAAC,EAAD,CACE,UAAW,EAAG,cAAe,EAAU,CACvC,gBAAiB,EACjB,QAAU,GAAM,IAAW,EAAE,cAAc,aAAe,GAAG,CAC7D,GAAI,EACJ,CAAA,CACO,CAAA"}
+{"version":3,"file":"CodeBlockServer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, Suspense } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki/bundle/web';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: isDarkMode ? 'github-dark' : 'github-light',\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  isDarkMode,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {typeof children === 'string'\n          ? children.split('\\n').map((line, index) => (\n              <span className=\"line block w-full\" key={index}>\n                {line}\n              </span>\n            ))\n          : children}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"mappings":";;;;;;;AAiBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,YACA,UACA,GAAG,YACiB;AAgBpB,QACE,oBAAC,OAAD;EACE,yBAAyB,EAAE,QAJnB,MAAM,WAAW,UAb0C;GACrE;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,yBAAyB;IACzB,8BAA8B;IAC9B,kCAAkC;IAClC,+BAA+B;IAC/B,0BAA0B;IAC1B,8BAA8B;IAC/B;GACF,CAEmD,EAIR;EACxC,GAAI;EACJ,OAAO,EAAE,iBAAiB,eAAe;EACzC;;AAIN,MAAM,eAAmC,EACvC,UACA,YACA,YACA,UACA,GAAG,YAEH,oBAAC,OAAD;CAAK,iBAAiB;CAAY,GAAI;WACpC,oBAAC,OAAD,YACE,oBAAC,QAAD,YACG,OAAO,aAAa,WACjB,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC9B,oBAAC,QAAD;EAAM,WAAU;YACb;EACI,EAFkC,MAElC,CACP,GACF,UACC,GACH;CACF;AAWR,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC,UAAD;CAAU,UAAU,oBAAC,aAAD,EAAa,GAAI,OAAS;WAC5C,oBAAC,gBAAD;EACE,WAAW,GAAG,eAAe,UAAU;EACvC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,GAAG;EAC7D,GAAI;EACJ;CACO"}

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

@@ -1,2 +1,120 @@
-"use client";import{CodeDefault as e}from"./CodeBlockClient.mjs";import{useEffect as t,useState as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=new Map,a=new Map,o=async e=>{if(i.has(e))return i.get(e);let t;switch(e){case`typescript`:case`ts`:t=await import(`shiki/langs/typescript.mjs`);break;case`javascript`:case`js`:t=await import(`shiki/langs/javascript.mjs`);break;case`bash`:case`sh`:case`shell`:t=await import(`shiki/langs/bash.mjs`);break;case`json`:t=await import(`shiki/langs/json.mjs`);break;case`jsonc`:case`json5`:t=await import(`shiki/langs/json5.mjs`);break;case`tsx`:t=await import(`shiki/langs/tsx.mjs`);break;case`vue`:t=await import(`shiki/langs/vue.mjs`);break;case`html`:t=await import(`shiki/langs/html.mjs`);break;case`xml`:t=await import(`shiki/langs/xml.mjs`);break;case`yaml`:t=await import(`shiki/langs/yaml.mjs`);break;default:t=await import(`shiki/langs/typescript.mjs`);break}let n=t.default;return i.set(e,n),n},s=async e=>{if(a.has(e))return a.get(e);let t;switch(e){case`github-dark`:t=await import(`shiki/themes/github-dark.mjs`);break;default:t=await import(`shiki/themes/github-light.mjs`);break}let n=t.default;return a.set(e,n),n};let c=null;const l=async()=>(c||=import(`shiki/bundle/web`).then(({createHighlighter:e})=>e({langs:[],themes:[]})),c),u=async(e,t,n)=>{let r=n?`github-dark`:`github-light`,[i,a,c]=await Promise.all([l(),o(t),s(r)]);return i.getLoadedLanguages().includes(t)||await i.loadLanguage(a),i.getLoadedThemes().includes(r)||await i.loadTheme(c),i.codeToHtml(e,{lang:t,theme:r})},d=({children:i,lang:a,isDarkMode:o})=>{let[s,c]=n(null);return t(()=>{let e=!1;return u(i,a,o).then(t=>{e||c(t)}).catch(t=>{console.error(`Failed to highlight code:`,t),!e&&s===null&&c(``)}),()=>{e=!0}},[i,a,o]),r(`div`,{className:`min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]`,children:s?r(`div`,{dangerouslySetInnerHTML:{__html:s}}):r(e,{children:i})})};export{d as CodeBlockShiki};
+'use client';
+
+import { CodeDefault } from "./CodeBlockClient.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/IDE/CodeBlockShiki.tsx
+const languageCache = /* @__PURE__ */ new Map();
+const themeCache = /* @__PURE__ */ new Map();
+const loadLanguage = async (lang) => {
+	if (languageCache.has(lang)) return languageCache.get(lang);
+	let languageModule;
+	switch (lang) {
+		case "typescript":
+		case "ts":
+			languageModule = await import("shiki/langs/typescript.mjs");
+			break;
+		case "javascript":
+		case "js":
+			languageModule = await import("shiki/langs/javascript.mjs");
+			break;
+		case "bash":
+		case "sh":
+		case "shell":
+			languageModule = await import("shiki/langs/bash.mjs");
+			break;
+		case "json":
+			languageModule = await import("shiki/langs/json.mjs");
+			break;
+		case "jsonc":
+		case "json5":
+			languageModule = await import("shiki/langs/json5.mjs");
+			break;
+		case "tsx":
+			languageModule = await import("shiki/langs/tsx.mjs");
+			break;
+		case "vue":
+			languageModule = await import("shiki/langs/vue.mjs");
+			break;
+		case "html":
+			languageModule = await import("shiki/langs/html.mjs");
+			break;
+		case "xml":
+			languageModule = await import("shiki/langs/xml.mjs");
+			break;
+		case "yaml":
+			languageModule = await import("shiki/langs/yaml.mjs");
+			break;
+		default:
+			languageModule = await import("shiki/langs/typescript.mjs");
+			break;
+	}
+	const language = languageModule.default;
+	languageCache.set(lang, language);
+	return language;
+};
+const loadTheme = async (themeName) => {
+	if (themeCache.has(themeName)) return themeCache.get(themeName);
+	let themeModule;
+	switch (themeName) {
+		case "github-dark":
+			themeModule = await import("shiki/themes/github-dark.mjs");
+			break;
+		default:
+			themeModule = await import("shiki/themes/github-light.mjs");
+			break;
+	}
+	const theme = themeModule.default;
+	themeCache.set(themeName, theme);
+	return theme;
+};
+let highlighterPromise = null;
+const getHighlighterInstance = async () => {
+	if (!highlighterPromise) highlighterPromise = import("shiki/bundle/web").then(({ createHighlighter }) => createHighlighter({
+		langs: [],
+		themes: []
+	}));
+	return highlighterPromise;
+};
+const highlightCode = async (code, lang, isDarkMode) => {
+	const themeName = isDarkMode ? "github-dark" : "github-light";
+	const [highlighter, languageModule, themeModule] = await Promise.all([
+		getHighlighterInstance(),
+		loadLanguage(lang),
+		loadTheme(themeName)
+	]);
+	if (!highlighter.getLoadedLanguages().includes(lang)) await highlighter.loadLanguage(languageModule);
+	if (!highlighter.getLoadedThemes().includes(themeName)) await highlighter.loadTheme(themeModule);
+	return highlighter.codeToHtml(code, {
+		lang,
+		theme: themeName
+	});
+};
+const CodeBlockShiki = ({ children, lang, isDarkMode }) => {
+	const [html, setHtml] = useState(null);
+	useEffect(() => {
+		let isCancelled = false;
+		highlightCode(children, lang, isDarkMode).then((result) => {
+			if (!isCancelled) setHtml(result);
+		}).catch((error) => {
+			console.error("Failed to highlight code:", error);
+			if (!isCancelled && html === null) setHtml("");
+		});
+		return () => {
+			isCancelled = true;
+		};
+	}, [
+		children,
+		lang,
+		isDarkMode
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]",
+		children: html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx(CodeDefault, { children })
+	});
+};
+
+//#endregion
+export { CodeBlockShiki };
 //# sourceMappingURL=CodeBlockShiki.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n  if (languageCache.has(lang)) return languageCache.get(lang);\n\n  let languageModule: any;\n  switch (lang) {\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'jsonc':\n    case 'json5':\n      languageModule = await import('shiki/langs/json5.mjs');\n      break;\n    case 'tsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    case 'xml':\n      languageModule = await import('shiki/langs/xml.mjs');\n      break;\n    case 'yaml':\n      languageModule = await import('shiki/langs/yaml.mjs');\n      break;\n    default:\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n  }\n\n  const language = languageModule.default;\n  languageCache.set(lang, language);\n  return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n  if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n  let themeModule: any;\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    case 'github-light':\n    default:\n      themeModule = await import('shiki/themes/github-light.mjs');\n      break;\n  }\n\n  const theme = themeModule.default;\n  themeCache.set(themeName, theme);\n  return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null;\n\nconst getHighlighterInstance = async () => {\n  if (!highlighterPromise) {\n    highlighterPromise = import('shiki/bundle/web').then(\n      ({ createHighlighter }) =>\n        createHighlighter({\n          langs: [],\n          themes: [],\n        })\n    );\n  }\n  return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n  code: string,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Load highlighter, language, and theme in parallel\n  const [highlighter, languageModule, themeModule] = await Promise.all([\n    getHighlighterInstance(),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  // Load into the singleton instance if not already loaded\n  if (!highlighter.getLoadedLanguages().includes(lang)) {\n    await highlighter.loadLanguage(languageModule);\n  }\n  if (!highlighter.getLoadedThemes().includes(themeName)) {\n    await highlighter.loadTheme(themeModule);\n  }\n\n  return highlighter.codeToHtml(code, {\n    lang,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled && html === null) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":"yJAWA,MAAM,EAAgB,IAAI,IACpB,EAAa,IAAI,IAGjB,EAAe,KAAO,IAAwC,CAClE,GAAI,EAAc,IAAI,EAAK,CAAE,OAAO,EAAc,IAAI,EAAK,CAE3D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,OACL,IAAK,KACL,IAAK,QACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,QACL,IAAK,QACH,EAAiB,MAAM,OAAO,yBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,QACE,EAAiB,MAAM,OAAO,8BAC9B,MAGJ,IAAM,EAAW,EAAe,QAEhC,OADA,EAAc,IAAI,EAAM,EAAS,CAC1B,GAIH,EAAY,KAAO,IAA0C,CACjE,GAAI,EAAW,IAAI,EAAU,CAAE,OAAO,EAAW,IAAI,EAAU,CAE/D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,cACH,EAAc,MAAM,OAAO,gCAC3B,MAEF,QACE,EAAc,MAAM,OAAO,iCAC3B,MAGJ,IAAM,EAAQ,EAAY,QAE1B,OADA,EAAW,IAAI,EAAW,EAAM,CACzB,GAIT,IAAI,EAAmE,KAEvE,MAAM,EAAyB,UAC7B,AACE,IAAqB,OAAO,oBAAoB,MAC7C,CAAE,uBACD,EAAkB,CAChB,MAAO,EAAE,CACT,OAAQ,EAAE,CACX,CAAC,CACL,CAEI,GAIH,EAAgB,MACpB,EACA,EACA,IACoB,CACpB,IAAM,EAA0B,EAAa,cAAgB,eAGvD,CAAC,EAAa,EAAgB,GAAe,MAAM,QAAQ,IAAI,CACnE,GAAwB,CACxB,EAAa,EAAK,CAClB,EAAU,EAAU,CACrB,CAAC,CAUF,OAPK,EAAY,oBAAoB,CAAC,SAAS,EAAK,EAClD,MAAM,EAAY,aAAa,EAAe,CAE3C,EAAY,iBAAiB,CAAC,SAAS,EAAU,EACpD,MAAM,EAAY,UAAU,EAAY,CAGnC,EAAY,WAAW,EAAM,CAClC,OACA,MAAO,EACR,CAAC,EASS,GAA2C,CACtD,WACA,OACA,gBACI,CACJ,GAAM,CAAC,EAAM,GAAW,EAAwB,KAAK,CAmBrD,OAjBA,MAAgB,CACd,IAAI,EAAc,GAWlB,OATA,EAAc,EAAU,EAAM,EAAW,CACtC,KAAM,GAAW,CACX,GAAa,EAAQ,EAAO,EACjC,CACD,MAAO,GAAU,CAChB,QAAQ,MAAM,4BAA6B,EAAM,CAC7C,CAAC,GAAe,IAAS,MAAM,EAAQ,GAAG,EAC9C,KAES,CACX,EAAc,KAEf,CAAC,EAAU,EAAM,EAAW,CAAC,CAG9B,EAAC,MAAD,CAAK,UAAU,6OACZ,EAEC,EAAC,MAAD,CAAK,wBAAyB,CAAE,OAAQ,EAAM,CAAI,CAAA,CAElD,EAAC,EAAD,CAAc,WAAuB,CAAA,CAEnC,CAAA"}
+{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n  if (languageCache.has(lang)) return languageCache.get(lang);\n\n  let languageModule: any;\n  switch (lang) {\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'jsonc':\n    case 'json5':\n      languageModule = await import('shiki/langs/json5.mjs');\n      break;\n    case 'tsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    case 'xml':\n      languageModule = await import('shiki/langs/xml.mjs');\n      break;\n    case 'yaml':\n      languageModule = await import('shiki/langs/yaml.mjs');\n      break;\n    default:\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n  }\n\n  const language = languageModule.default;\n  languageCache.set(lang, language);\n  return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n  if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n  let themeModule: any;\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    case 'github-light':\n    default:\n      themeModule = await import('shiki/themes/github-light.mjs');\n      break;\n  }\n\n  const theme = themeModule.default;\n  themeCache.set(themeName, theme);\n  return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null;\n\nconst getHighlighterInstance = async () => {\n  if (!highlighterPromise) {\n    highlighterPromise = import('shiki/bundle/web').then(\n      ({ createHighlighter }) =>\n        createHighlighter({\n          langs: [],\n          themes: [],\n        })\n    );\n  }\n  return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n  code: string,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Load highlighter, language, and theme in parallel\n  const [highlighter, languageModule, themeModule] = await Promise.all([\n    getHighlighterInstance(),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  // Load into the singleton instance if not already loaded\n  if (!highlighter.getLoadedLanguages().includes(lang)) {\n    await highlighter.loadLanguage(languageModule);\n  }\n  if (!highlighter.getLoadedThemes().includes(themeName)) {\n    await highlighter.loadTheme(themeModule);\n  }\n\n  return highlighter.codeToHtml(code, {\n    lang,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled && html === null) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAWA,MAAM,gCAAgB,IAAI,KAA2B;AACrD,MAAM,6BAAa,IAAI,KAAwB;AAG/C,MAAM,eAAe,OAAO,SAAwC;AAClE,KAAI,cAAc,IAAI,KAAK,CAAE,QAAO,cAAc,IAAI,KAAK;CAE3D,IAAI;AACJ,SAAQ,MAAR;EACE,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF;AACE,oBAAiB,MAAM,OAAO;AAC9B;;CAGJ,MAAM,WAAW,eAAe;AAChC,eAAc,IAAI,MAAM,SAAS;AACjC,QAAO;;AAIT,MAAM,YAAY,OAAO,cAA0C;AACjE,KAAI,WAAW,IAAI,UAAU,CAAE,QAAO,WAAW,IAAI,UAAU;CAE/D,IAAI;AACJ,SAAQ,WAAR;EACE,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EAEF;AACE,iBAAc,MAAM,OAAO;AAC3B;;CAGJ,MAAM,QAAQ,YAAY;AAC1B,YAAW,IAAI,WAAW,MAAM;AAChC,QAAO;;AAIT,IAAI,qBAAmE;AAEvE,MAAM,yBAAyB,YAAY;AACzC,KAAI,CAAC,mBACH,sBAAqB,OAAO,oBAAoB,MAC7C,EAAE,wBACD,kBAAkB;EAChB,OAAO,EAAE;EACT,QAAQ,EAAE;EACX,CAAC,CACL;AAEH,QAAO;;AAIT,MAAM,gBAAgB,OACpB,MACA,MACA,eACoB;CACpB,MAAM,YAA0B,aAAa,gBAAgB;CAG7D,MAAM,CAAC,aAAa,gBAAgB,eAAe,MAAM,QAAQ,IAAI;EACnE,wBAAwB;EACxB,aAAa,KAAK;EAClB,UAAU,UAAU;EACrB,CAAC;AAGF,KAAI,CAAC,YAAY,oBAAoB,CAAC,SAAS,KAAK,CAClD,OAAM,YAAY,aAAa,eAAe;AAEhD,KAAI,CAAC,YAAY,iBAAiB,CAAC,SAAS,UAAU,CACpD,OAAM,YAAY,UAAU,YAAY;AAG1C,QAAO,YAAY,WAAW,MAAM;EAClC;EACA,OAAO;EACR,CAAC;;AASJ,MAAa,kBAA2C,EACtD,UACA,MACA,iBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAwB,KAAK;AAErD,iBAAgB;EACd,IAAI,cAAc;AAElB,gBAAc,UAAU,MAAM,WAAW,CACtC,MAAM,WAAW;AAChB,OAAI,CAAC,YAAa,SAAQ,OAAO;IACjC,CACD,OAAO,UAAU;AAChB,WAAQ,MAAM,6BAA6B,MAAM;AACjD,OAAI,CAAC,eAAe,SAAS,KAAM,SAAQ,GAAG;IAC9C;AAEJ,eAAa;AACX,iBAAc;;IAEf;EAAC;EAAU;EAAM;EAAW,CAAC;AAEhC,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,OAEC,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,MAAM,EAAI,IAElD,oBAAC,aAAD,EAAc,UAAuB;EAEnC"}

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

@@ -1,2 +1,21 @@
-"use client";import{useCodeContext as e}from"./CodeContext.mjs";import{Fragment as t,jsx as n}from"react/jsx-runtime";const r=({children:r,...i})=>{let{packageManager:a,codeFormat:o,contentDeclarationFormat:s}=e(),c=i.packageManager===void 0,l=a===i.packageManager,u=i.codeFormat===void 0,d=o===i.codeFormat,f=i.contentDeclarationFormat===void 0,p=s===i.contentDeclarationFormat;return(c||l)&&(u||d)&&(f||p)?r:n(t,{})};export{r as CodeConditionalRender};
+'use client';
+
+import { useCodeContext } from "./CodeContext.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/IDE/CodeConditionalRenderer.tsx
+const CodeConditionalRender = ({ children, ...props }) => {
+	const { packageManager, codeFormat, contentDeclarationFormat } = useCodeContext();
+	const isPackageManagerUndefined = typeof props.packageManager === "undefined";
+	const isPackageManagerSelected = packageManager === props.packageManager;
+	const isCodeFormatUndefined = typeof props.codeFormat === "undefined";
+	const isCodeFormatSelected = codeFormat === props.codeFormat;
+	const isContentDeclarationFormatUndefined = typeof props.contentDeclarationFormat === "undefined";
+	const isContentDeclarationFormatSelected = contentDeclarationFormat === props.contentDeclarationFormat;
+	if ((isPackageManagerUndefined || isPackageManagerSelected) && (isCodeFormatUndefined || isCodeFormatSelected) && (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)) return children;
+	return /* @__PURE__ */ jsx(Fragment, {});
+};
+
+//#endregion
+export { CodeConditionalRender };
 //# sourceMappingURL=CodeConditionalRenderer.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeConditionalRenderer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeConditionalRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, PropsWithChildren } from 'react';\nimport type { CodeCompAttributes } from './Code';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n> = ({ children, ...props }) => {\n  const { packageManager, codeFormat, contentDeclarationFormat } =\n    useCodeContext();\n\n  const isPackageManagerUndefined = typeof props.packageManager === 'undefined';\n  const isPackageManagerSelected = packageManager === props.packageManager;\n\n  const isCodeFormatUndefined = typeof props.codeFormat === 'undefined';\n  const isCodeFormatSelected = codeFormat === props.codeFormat;\n\n  const isContentDeclarationFormatUndefined =\n    typeof props.contentDeclarationFormat === 'undefined';\n  const isContentDeclarationFormatSelected =\n    contentDeclarationFormat === props.contentDeclarationFormat;\n\n  if (\n    (isPackageManagerUndefined || isPackageManagerSelected) &&\n    (isCodeFormatUndefined || isCodeFormatSelected) &&\n    (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)\n  ) {\n    return children;\n  }\n\n  return <></>;\n};\n"],"mappings":"sHAMA,MAAa,GAER,CAAE,WAAU,GAAG,KAAY,CAC9B,GAAM,CAAE,iBAAgB,aAAY,4BAClC,GAAgB,CAEZ,EAAmC,EAAM,iBAAmB,OAC5D,EAA2B,IAAmB,EAAM,eAEpD,EAA+B,EAAM,aAAe,OACpD,EAAuB,IAAe,EAAM,WAE5C,EACG,EAAM,2BAA6B,OACtC,EACJ,IAA6B,EAAM,yBAUrC,OAPG,GAA6B,KAC7B,GAAyB,KACzB,GAAuC,GAEjC,EAGF,EAAA,EAAA,EAAK,CAAA"}
+{"version":3,"file":"CodeConditionalRenderer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeConditionalRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, PropsWithChildren } from 'react';\nimport type { CodeCompAttributes } from './Code';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n> = ({ children, ...props }) => {\n  const { packageManager, codeFormat, contentDeclarationFormat } =\n    useCodeContext();\n\n  const isPackageManagerUndefined = typeof props.packageManager === 'undefined';\n  const isPackageManagerSelected = packageManager === props.packageManager;\n\n  const isCodeFormatUndefined = typeof props.codeFormat === 'undefined';\n  const isCodeFormatSelected = codeFormat === props.codeFormat;\n\n  const isContentDeclarationFormatUndefined =\n    typeof props.contentDeclarationFormat === 'undefined';\n  const isContentDeclarationFormatSelected =\n    contentDeclarationFormat === props.contentDeclarationFormat;\n\n  if (\n    (isPackageManagerUndefined || isPackageManagerSelected) &&\n    (isCodeFormatUndefined || isCodeFormatSelected) &&\n    (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)\n  ) {\n    return children;\n  }\n\n  return <></>;\n};\n"],"mappings":";;;;;;AAMA,MAAa,yBAER,EAAE,UAAU,GAAG,YAAY;CAC9B,MAAM,EAAE,gBAAgB,YAAY,6BAClC,gBAAgB;CAElB,MAAM,4BAA4B,OAAO,MAAM,mBAAmB;CAClE,MAAM,2BAA2B,mBAAmB,MAAM;CAE1D,MAAM,wBAAwB,OAAO,MAAM,eAAe;CAC1D,MAAM,uBAAuB,eAAe,MAAM;CAElD,MAAM,sCACJ,OAAO,MAAM,6BAA6B;CAC5C,MAAM,qCACJ,6BAA6B,MAAM;AAErC,MACG,6BAA6B,8BAC7B,yBAAyB,0BACzB,uCAAuC,oCAExC,QAAO;AAGT,QAAO,gCAAK"}

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

@@ -1,2 +1,45 @@
-"use client";import{usePersistedStore as e}from"../../hooks/usePersistedStore.mjs";import{createContext as t,useContext as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=t({packageManager:`npm`,setPackageManager:()=>{},codeFormat:`typescript`,setCodeFormat:()=>{},contentDeclarationFormat:`typescript`,setContentDeclarationFormat:()=>{}}),a=()=>n(i),o=({children:t})=>{let[n,a]=e(`packageManager`,`npm`),[o,s]=e(`codeFormat`,`typescript`),[c,l]=e(`contentDeclarationFormat`,`typescript`);return r(i,{value:{packageManager:n,setPackageManager:a,codeFormat:o,setCodeFormat:s,contentDeclarationFormat:c,setContentDeclarationFormat:l},children:t})};export{i as CodeContext,o as CodeProvider,a as useCodeContext};
+'use client';
+
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/IDE/CodeContext.tsx
+/**
+* Context that store the current locale on the client side
+*/
+const CodeContext = createContext({
+	packageManager: "npm",
+	setPackageManager: () => {},
+	codeFormat: "typescript",
+	setCodeFormat: () => {},
+	contentDeclarationFormat: "typescript",
+	setContentDeclarationFormat: () => {}
+});
+/**
+* Hook that provides the current locale
+*/
+const useCodeContext = () => useContext(CodeContext);
+/**
+* Provider that store the current locale on the client side
+*/
+const CodeProvider = ({ children }) => {
+	const [packageManager, setPackageManager] = usePersistedStore("packageManager", "npm");
+	const [codeFormat, setCodeFormat] = usePersistedStore("codeFormat", "typescript");
+	const [contentDeclarationFormat, setContentDeclarationFormat] = usePersistedStore("contentDeclarationFormat", "typescript");
+	return /* @__PURE__ */ jsx(CodeContext, {
+		value: {
+			packageManager,
+			setPackageManager,
+			codeFormat,
+			setCodeFormat,
+			contentDeclarationFormat,
+			setContentDeclarationFormat
+		},
+		children
+	});
+};
+
+//#endregion
+export { CodeContext, CodeProvider, useCodeContext };
 //# sourceMappingURL=CodeContext.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeContext.mjs","names":[],"sources":["../../../../src/components/IDE/CodeContext.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n} from 'react';\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":"iLAgCA,MAAa,EAAc,EAAgC,CACzD,eAAgB,MAChB,sBAAyB,GACzB,WAAY,aACZ,kBAAqB,GACrB,yBAA0B,aAC1B,gCAAmC,GACpC,CAAC,CAKW,MAAuB,EAAW,EAAY,CAK9C,GAAuC,CAAE,cAAe,CACnE,GAAM,CAAC,EAAgB,GAAqB,EAC1C,iBACA,MACD,CACK,CAAC,EAAY,GAAiB,EAClC,aACA,aACD,CACK,CAAC,EAA0B,GAC/B,EACE,2BACA,aACD,CAEH,OACE,EAAC,EAAD,CACE,MAAO,CACL,iBACA,oBACA,aACA,gBACA,2BACA,8BACD,CAEA,WACW,CAAA"}
+{"version":3,"file":"CodeContext.mjs","names":[],"sources":["../../../../src/components/IDE/CodeContext.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n} from 'react';\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,MAAa,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,aAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACD;EAEA;EACW"}

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

@@ -1,2 +1,41 @@
-"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{codeFormat:a,setCodeFormat:o,setContentDeclarationFormat:s}=e(),c=i(`code-selectors`);return r(t,{value:a,onValueChange:e=>{o(e),s(e)},children:[n(t.Trigger,{className:`py-1!`,"aria-label":c.codeFormat.label.value,children:n(t.Value,{placeholder:c.codeFormat.placeholder.value})}),r(t.Content,{children:[n(t.Item,{value:`typescript`,children:`TypeScript`}),n(t.Item,{value:`esm`,children:`ESM`}),n(t.Item,{value:`commonjs`,children:`CommonJS`})]})]})};export{a as CodeFormatSelector};
+'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/CodeFormatSelector.tsx
+const CodeFormatSelector = () => {
+	const { codeFormat, setCodeFormat, setContentDeclarationFormat } = useCodeContext();
+	const content = useIntlayer("code-selectors");
+	return /* @__PURE__ */ jsxs(Select, {
+		value: codeFormat,
+		onValueChange: (value) => {
+			setCodeFormat(value);
+			setContentDeclarationFormat(value);
+		},
+		children: [/* @__PURE__ */ jsx(Select.Trigger, {
+			className: "py-1!",
+			"aria-label": content.codeFormat.label.value,
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: content.codeFormat.placeholder.value })
+		}), /* @__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

@@ -1 +1 @@
-{"version":3,"file":"CodeFormatSelector.mjs","names":[],"sources":["../../../../src/components/IDE/CodeFormatSelector.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 CodeFormatSelector: FC = () => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\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        className=\"py-1!\"\n        aria-label={content.codeFormat.label.value}\n      >\n        <Select.Value placeholder={content.codeFormat.placeholder.value} />\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":"6MAOA,MAAa,MAA+B,CAC1C,GAAM,CAAE,aAAY,gBAAe,+BACjC,GAAgB,CACZ,EAAU,EAAY,iBAAiB,CAE7C,OACE,EAAC,EAAD,CACE,MAAO,EACP,cAAgB,GAAU,CACxB,EAAc,EAA2B,CACzC,EAA4B,EAA2B,WAJ3D,CAOE,EAAC,EAAO,QAAR,CACE,UAAU,QACV,aAAY,EAAQ,WAAW,MAAM,eAErC,EAAC,EAAO,MAAR,CAAc,YAAa,EAAQ,WAAW,YAAY,MAAS,CAAA,CACpD,CAAA,CACjB,EAAC,EAAO,QAAR,CAAA,SAAA,CACE,EAAC,EAAO,KAAR,CAAa,MAAM,sBAAa,aAAwB,CAAA,CACxD,EAAC,EAAO,KAAR,CAAa,MAAM,eAAM,MAAiB,CAAA,CAC1C,EAAC,EAAO,KAAR,CAAa,MAAM,oBAAW,WAAsB,CAAA,CACrC,CAAA,CAAA,CACV"}
+{"version":3,"file":"CodeFormatSelector.mjs","names":[],"sources":["../../../../src/components/IDE/CodeFormatSelector.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 CodeFormatSelector: FC = () => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\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        className=\"py-1!\"\n        aria-label={content.codeFormat.label.value}\n      >\n        <Select.Value placeholder={content.codeFormat.placeholder.value} />\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":";;;;;;;;AAOA,MAAa,2BAA+B;CAC1C,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;AAE7C,QACE,qBAAC,QAAD;EACE,OAAO;EACP,gBAAgB,UAAU;AACxB,iBAAc,MAA2B;AACzC,+BAA4B,MAA2B;;YAJ3D,CAOE,oBAAC,OAAO,SAAR;GACE,WAAU;GACV,cAAY,QAAQ,WAAW,MAAM;aAErC,oBAAC,OAAO,OAAR,EAAc,aAAa,QAAQ,WAAW,YAAY,OAAS;GACpD,GACjB,qBAAC,OAAO,SAAR;GACE,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAa;IAAwB;GACxD,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAM;IAAiB;GAC1C,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAW;IAAsB;GACrC,IACV"}

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

@@ -1,2 +1,42 @@
-"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{contentDeclarationFormat:a,setContentDeclarationFormat:o}=e(),s=i(`code-selectors`);return r(t,{value:a,onValueChange:o,children:[n(t.Trigger,{className:`py-1!`,"aria-label":s.contentDeclarationFormat.label.value,children:n(t.Value,{placeholder:s.contentDeclarationFormat.placeholder.value})}),r(t.Content,{children:[n(t.Item,{value:`typescript`,children:`TypeScript`}),n(t.Item,{value:`commonjs`,children:`CommonJS`}),n(t.Item,{value:`esm`,children:`ESM`}),n(t.Item,{value:`json`,children:`JSON`})]})]})};export{a as ContentDeclarationFormatSelector};
+'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/ContentDeclarationFormatSelector.tsx
+const ContentDeclarationFormatSelector = () => {
+	const { contentDeclarationFormat, setContentDeclarationFormat } = useCodeContext();
+	const content = useIntlayer("code-selectors");
+	return /* @__PURE__ */ jsxs(Select, {
+		value: contentDeclarationFormat,
+		onValueChange: setContentDeclarationFormat,
+		children: [/* @__PURE__ */ jsx(Select.Trigger, {
+			className: "py-1!",
+			"aria-label": content.contentDeclarationFormat.label.value,
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: content.contentDeclarationFormat.placeholder.value })
+		}), /* @__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

@@ -1 +1 @@
-{"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":[],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.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 ContentDeclarationFormatSelector: FC = () => {\n  const { contentDeclarationFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\n\n  return (\n    <Select\n      value={contentDeclarationFormat}\n      onValueChange={setContentDeclarationFormat}\n    >\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.contentDeclarationFormat.label.value}\n      >\n        <Select.Value\n          placeholder={content.contentDeclarationFormat.placeholder.value}\n        />\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":"6MAOA,MAAa,MAA6C,CACxD,GAAM,CAAE,2BAA0B,+BAChC,GAAgB,CACZ,EAAU,EAAY,iBAAiB,CAE7C,OACE,EAAC,EAAD,CACE,MAAO,EACP,cAAe,WAFjB,CAIE,EAAC,EAAO,QAAR,CACE,UAAU,QACV,aAAY,EAAQ,yBAAyB,MAAM,eAEnD,EAAC,EAAO,MAAR,CACE,YAAa,EAAQ,yBAAyB,YAAY,MAC1D,CAAA,CACa,CAAA,CACjB,EAAC,EAAO,QAAR,CAAA,SAAA,CACE,EAAC,EAAO,KAAR,CAAa,MAAM,sBAAa,aAAwB,CAAA,CACxD,EAAC,EAAO,KAAR,CAAa,MAAM,oBAAW,WAAsB,CAAA,CACpD,EAAC,EAAO,KAAR,CAAa,MAAM,eAAM,MAAiB,CAAA,CAC1C,EAAC,EAAO,KAAR,CAAa,MAAM,gBAAO,OAAkB,CAAA,CAC7B,CAAA,CAAA,CACV"}
+{"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":[],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.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 ContentDeclarationFormatSelector: FC = () => {\n  const { contentDeclarationFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\n\n  return (\n    <Select\n      value={contentDeclarationFormat}\n      onValueChange={setContentDeclarationFormat}\n    >\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.contentDeclarationFormat.label.value}\n      >\n        <Select.Value\n          placeholder={content.contentDeclarationFormat.placeholder.value}\n        />\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":";;;;;;;;AAOA,MAAa,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;AAE7C,QACE,qBAAC,QAAD;EACE,OAAO;EACP,eAAe;YAFjB,CAIE,oBAAC,OAAO,SAAR;GACE,WAAU;GACV,cAAY,QAAQ,yBAAyB,MAAM;aAEnD,oBAAC,OAAO,OAAR,EACE,aAAa,QAAQ,yBAAyB,YAAY,OAC1D;GACa,GACjB,qBAAC,OAAO,SAAR;GACE,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAa;IAAwB;GACxD,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAW;IAAsB;GACpD,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAM;IAAiB;GAC1C,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAO;IAAkB;GAC7B,IACV"}