@intlayer/design-system 8.9.6 → 8.9.8

package/dist/esm/components/Form/elements/TextAreaElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/TextAreaElement.tsx"],"sourcesContent":["import { TextArea } from '@components/TextArea/TextArea';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype TextAreaElementsProps = Omit<\n  FormElementProps<typeof TextArea>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof TextArea> & {\n      name: string;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const TextAreaElement: FC<TextAreaElementsProps> = (props) => (\n  <FormElement\n    Element={TextArea}\n    id={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    data-testid={props.name}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAeA,MAAa,mBAA8C,UACzD,oBAAC,aAAD;CACE,SAAS;CACT,IAAI,MAAM;CACV,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,eAAa,MAAM;CACnB,GAAI;CACJ"}
+{"version":3,"file":"TextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/TextAreaElement.tsx"],"sourcesContent":["import { TextArea } from '@components/TextArea/TextArea';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype TextAreaElementsProps = Omit<\n  FormElementProps<typeof TextArea>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof TextArea> & {\n      name: string;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const TextAreaElement: FC<TextAreaElementsProps> = (props) => (\n  <FormElement\n    Element={TextArea}\n    id={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    data-testid={props.name}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAeA,MAAa,mBAA8C,UACzD,oBAAC,aAAD;CACE,SAAS;CACT,IAAI,MAAM;CACV,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,eAAa,MAAM;CACnB,GAAI;AACL"}

package/dist/esm/components/Form/layout/FormItemLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormItemLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  showErrorMessage?: boolean;\n  className?: string;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n  label,\n  description,\n  isRequired,\n  info,\n  children,\n  showErrorMessage = true,\n  htmlFor,\n  className,\n}) => (\n  <Form.Item\n    className={cn('flex w-full flex-col flex-wrap gap-2 px-1 py-2', className)}\n  >\n    {(description || label) && (\n      <div className=\"flex flex-col gap-1 p-1 leading-none\">\n        {label && (\n          <FormLabelLayout\n            isRequired={isRequired}\n            info={info}\n            htmlFor={htmlFor}\n          >\n            {label}\n          </FormLabelLayout>\n        )}\n        {description && <Form.Description>{description}</Form.Description>}\n      </div>\n    )}\n    <Form.Control>{children}</Form.Control>\n\n    {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n  </Form.Item>\n);\n"],"mappings":";;;;;;AAaA,MAAa,kBAA2C,EACtD,OACA,aACA,YACA,MACA,UACA,mBAAmB,MACnB,SACA,gBAEA,qBAAC,KAAK,MAAN;CACE,WAAW,GAAG,kDAAkD,UAAU;WAD5E;GAGI,eAAe,UACf,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,iBAAD;IACc;IACN;IACG;cAER;IACe,GAEnB,eAAe,oBAAC,KAAK,aAAN,YAAmB,aAA+B,EAC9D;;EAER,oBAAC,KAAK,SAAN,EAAe,UAAwB;EAEtC,oBAAoB,oBAAC,KAAK,SAAN,EAAc,eAAY,iBAAkB;EACvD"}
+{"version":3,"file":"FormItemLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  showErrorMessage?: boolean;\n  className?: string;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n  label,\n  description,\n  isRequired,\n  info,\n  children,\n  showErrorMessage = true,\n  htmlFor,\n  className,\n}) => (\n  <Form.Item\n    className={cn('flex w-full flex-col flex-wrap gap-2 px-1 py-2', className)}\n  >\n    {(description || label) && (\n      <div className=\"flex flex-col gap-1 p-1 leading-none\">\n        {label && (\n          <FormLabelLayout\n            isRequired={isRequired}\n            info={info}\n            htmlFor={htmlFor}\n          >\n            {label}\n          </FormLabelLayout>\n        )}\n        {description && <Form.Description>{description}</Form.Description>}\n      </div>\n    )}\n    <Form.Control>{children}</Form.Control>\n\n    {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n  </Form.Item>\n);\n"],"mappings":";;;;;;AAaA,MAAa,kBAA2C,EACtD,OACA,aACA,YACA,MACA,UACA,mBAAmB,MACnB,SACA,gBAEA,qBAAC,KAAK,MAAN;CACE,WAAW,GAAG,kDAAkD,SAAS;WAD3E;GAGI,eAAe,UACf,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,iBAAD;IACc;IACN;IACG;cAER;GACc,IAElB,eAAe,oBAAC,KAAK,aAAN,YAAmB,YAA8B,EAC9D;;EAEP,oBAAC,KAAK,SAAN,EAAe,SAAuB;EAErC,oBAAoB,oBAAC,KAAK,SAAN,EAAc,eAAY,gBAAiB;CACvD"}

package/dist/esm/components/Form/layout/FormLabelLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabelLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { InformationTag } from '@components/InformationTag';\nimport { cn } from '@utils/cn';\nimport type { FC, ReactNode } from 'react';\nimport { FormLabel } from '../FormLabel';\nimport { RequiredStar } from './RequiredStar';\n\nexport type FormLabelLayoutProps = {\n  children?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  htmlFor?: string;\n  className?: string;\n};\n\nexport const FormLabelLayout: FC<FormLabelLayoutProps> = ({\n  children,\n  isRequired,\n  info,\n  htmlFor,\n  className,\n}) => (\n  <div className=\"ml-1 flex gap-1 align-middle text-base leading-none\">\n    {children && (\n      <FormLabel\n        htmlFor={htmlFor}\n        id={`${htmlFor}-label`}\n        suppressHydrationWarning\n        className={cn('font-bold', className)}\n      >\n        {children}\n        <RequiredStar isRequired={isRequired} />\n      </FormLabel>\n    )}\n    {info && <InformationTag content={info} />}\n  </div>\n);\n"],"mappings":";;;;;;;AAcA,MAAa,mBAA6C,EACxD,UACA,YACA,MACA,SACA,gBAEA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,YACC,qBAAC,WAAD;EACW;EACT,IAAI,GAAG,QAAQ;EACf;EACA,WAAW,GAAG,aAAa,UAAU;YAJvC,CAMG,UACD,oBAAC,cAAD,EAA0B,YAAc,EAC9B;KAEb,QAAQ,oBAAC,gBAAD,EAAgB,SAAS,MAAQ,EACtC"}
+{"version":3,"file":"FormLabelLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { InformationTag } from '@components/InformationTag';\nimport { cn } from '@utils/cn';\nimport type { FC, ReactNode } from 'react';\nimport { FormLabel } from '../FormLabel';\nimport { RequiredStar } from './RequiredStar';\n\nexport type FormLabelLayoutProps = {\n  children?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  htmlFor?: string;\n  className?: string;\n};\n\nexport const FormLabelLayout: FC<FormLabelLayoutProps> = ({\n  children,\n  isRequired,\n  info,\n  htmlFor,\n  className,\n}) => (\n  <div className=\"ml-1 flex gap-1 align-middle text-base leading-none\">\n    {children && (\n      <FormLabel\n        htmlFor={htmlFor}\n        id={`${htmlFor}-label`}\n        suppressHydrationWarning\n        className={cn('font-bold', className)}\n      >\n        {children}\n        <RequiredStar isRequired={isRequired} />\n      </FormLabel>\n    )}\n    {info && <InformationTag content={info} />}\n  </div>\n);\n"],"mappings":";;;;;;;AAcA,MAAa,mBAA6C,EACxD,UACA,YACA,MACA,SACA,gBAEA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,YACC,qBAAC,WAAD;EACW;EACT,IAAI,GAAG,QAAQ;EACf;EACA,WAAW,GAAG,aAAa,SAAS;YAJtC,CAMG,UACD,oBAAC,cAAD,EAA0B,WAAa,EAC9B;KAEZ,QAAQ,oBAAC,gBAAD,EAAgB,SAAS,KAAO,EACtC"}

package/dist/esm/components/Form/layout/RequiredStar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RequiredStar.mjs","names":[],"sources":["../../../../../src/components/Form/layout/RequiredStar.tsx"],"sourcesContent":["import type { FC } from 'react';\n\ntype RequiredStarProps = {\n  isRequired?: boolean;\n};\n\nexport const RequiredStar: FC<RequiredStarProps> = ({ isRequired }) =>\n  isRequired ? (\n    <span aria-label=\"Asterisk meaning the field is required\">*</span>\n  ) : (\n    <></>\n  );\n"],"mappings":";;;AAMA,MAAa,gBAAuC,EAAE,iBACpD,aACE,oBAAC,QAAD;CAAM,cAAW;WAAyC;CAAQ,IAElE,gCAAK"}
+{"version":3,"file":"RequiredStar.mjs","names":[],"sources":["../../../../../src/components/Form/layout/RequiredStar.tsx"],"sourcesContent":["import type { FC } from 'react';\n\ntype RequiredStarProps = {\n  isRequired?: boolean;\n};\n\nexport const RequiredStar: FC<RequiredStarProps> = ({ isRequired }) =>\n  isRequired ? (\n    <span aria-label=\"Asterisk meaning the field is required\">*</span>\n  ) : (\n    <></>\n  );\n"],"mappings":";;;AAMA,MAAa,gBAAuC,EAAE,iBACpD,aACE,oBAAC,QAAD;CAAM,cAAW;WAAyC;AAAO,KAEjE,+BAAI"}

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

@@ -1 +1 @@
-{"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport type { ComponentProps, FC } from 'react';\nimport {\n  type HTMLRenderer as HTMLRendererIntlayer,\n  type RenderHTMLProps,\n  renderHTML,\n} from 'react-intlayer/html';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n  () => ({\n    components: {\n      h1: (props) => <H1 isClickable={true} {...props} />,\n      h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n      h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n      h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n      h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n      h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n    },\n  });\n\n/**\n * HTMLRenderer Component\n *\n * A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  components: componentsProp,\n}) => {\n  const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n  const htmlContent = renderHTML(children, {\n    components: {\n      ...htmlOptions.components,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n  });\n\n  return <>{htmlContent}</>;\n};\n"],"mappings":";;;;;;AAiBA,MAAa,gCACJ,EACL,YAAY;CACV,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,GAAI;EAAS;CACnD,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAQ,GAAI;EAAS;CACrE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,IAAI,UACF,oBAAC,MAAD;EACE,gBAAgB,MAAM,MAAM,WAAW,OAAO;EAC9C,YAAY;EACZ,OAAM;EACN,GAAI;EACJ,OAAM;EACN;CAEL,EACF;;;;;;;AAQH,MAAa,gBAAuC,EAClD,UACA,YACA,QACA,YAAY,qBACR;CAoBJ,OAAO,0CAjBa,WAAW,UAAU,EACvC,YAAY;EACV,GAJgB,uBAAuB,cAAc,MAIvC,CAAC;EACf,IAAI,UACF,oBAAC,MAAD;GACE,gBAAgB,MAAM,MAAM,WAAW,OAAO;GAC9C,YAAY;GACJ;GACR,OAAM;GACN,GAAI;GACJ,OAAM;GACN;EAEJ,GAAG;EACJ,EACF,CAEoB,EAAI"}
+{"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport type { ComponentProps, FC } from 'react';\nimport {\n  type HTMLRenderer as HTMLRendererIntlayer,\n  type RenderHTMLProps,\n  renderHTML,\n} from 'react-intlayer/html';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n  () => ({\n    components: {\n      h1: (props) => <H1 isClickable={true} {...props} />,\n      h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n      h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n      h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n      h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n      h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n    },\n  });\n\n/**\n * HTMLRenderer Component\n *\n * A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  components: componentsProp,\n}) => {\n  const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n  const htmlContent = renderHTML(children, {\n    components: {\n      ...htmlOptions.components,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n  });\n\n  return <>{htmlContent}</>;\n};\n"],"mappings":";;;;;;AAiBA,MAAa,gCACJ,EACL,YAAY;CACV,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,GAAI;CAAQ;CAClD,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAQ,GAAI;CAAQ;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,IAAI,UACF,oBAAC,MAAD;EACE,gBAAgB,MAAM,MAAM,WAAW,MAAM;EAC7C,YAAY;EACZ,OAAM;EACN,GAAI;EACJ,OAAM;CACP;AAEL,EACF;;;;;;;AAQF,MAAa,gBAAuC,EAClD,UACA,YACA,QACA,YAAY,qBACR;CAoBJ,OAAO,0CAjBa,WAAW,UAAU,EACvC,YAAY;EACV,GAJgB,uBAAuB,cAAc,KAIxC,EAAE;EACf,IAAI,UACF,oBAAC,MAAD;GACE,gBAAgB,MAAM,MAAM,WAAW,MAAM;GAC7C,YAAY;GACJ;GACR,OAAM;GACN,GAAI;GACJ,OAAM;EACP;EAEH,GAAG;CACL,EACF,CAEoB,EAAI;AAC1B"}

package/dist/esm/components/Headers/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Headers/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\n/**\n * Styled H1 Component\n *\n * Primary heading component for page titles and main content headers.\n * Does not include clickable anchor functionality.\n */\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => <h1 className={cn('font-bold text-2xl', className)} {...props} />;\n\n/**\n * Styled H2 Component\n *\n * Secondary heading component with anchor link functionality when wrapped.\n * Used for major section headers in content.\n */\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h2\n    className={cn('mb-2 font-bold text-2xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H3 Component\n *\n * Tertiary heading component with anchor link functionality when wrapped.\n * Used for subsection headers in content.\n */\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h3\n    className={cn('mb-2 font-bold text-xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H4 Component\n *\n * Quaternary heading component with anchor link functionality when wrapped.\n * Used for minor section headers in content.\n */\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h4\n    className={cn('font-bold text-lg', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H5 Component\n *\n * Fifth-level heading component with anchor link functionality when wrapped.\n * Used for detailed subsection headers in content.\n */\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h5\n    className={cn('font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h6\n    className={cn('ml-3 font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Props for heading components\n */\nexport type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  /**\n   * Whether the heading should be clickable with anchor link functionality.\n   * Enables copy-to-clipboard URL behavior and smooth scrolling.\n   * @default false (for H1), true (for H2-H5)\n   */\n  isClickable?: boolean;\n};\n\n/**\n * Internal props for the HeadingWrapper component\n */\ninterface HeadingGlobalProps extends HeadingProps {\n  /** The styled heading component to render */\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n}\n\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\n/**\n * Utility function to generate URL-friendly ID from heading text\n * @param children - The heading text content\n * @returns URL-friendly string for use as element ID\n */\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\n/**\n * Utility function to smoothly scroll to an element by ID\n * @param id - The element ID to scroll to\n */\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\n/**\n * Utility function to detect if the pseudo-element (#) after the heading was clicked\n * @param parentElem - The heading element\n * @param e - Mouse event\n * @returns Whether the after pseudo-element was clicked\n */\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left;\n  const parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10);\n  const afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10);\n  const afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX;\n  const mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\n/**\n * HeadingWrapper Component\n *\n * Internal wrapper component that adds anchor link functionality to headings.\n * Handles ID generation, click-to-copy URL behavior, and smooth scrolling.\n *\n * @component\n * @accessibility\n * - Generates URL-friendly IDs for deep linking\n * - Provides accessible labels for anchor link functionality\n * - Maintains proper heading hierarchy and semantics\n * - Supports keyboard navigation and screen readers\n */\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\n/**\n * H1 Component\n *\n * Primary page heading component. Does not include clickable anchor functionality\n * as it's typically used for main page titles rather than content sections.\n *\n * @example\n * ```tsx\n * <H1>Welcome to Our Website</H1>\n * <H1 className=\"text-blue-600\">Custom Styled Title</H1>\n * ```\n */\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\n/**\n * H2 Component\n *\n * Secondary heading component with optional anchor link functionality.\n * Perfect for major section headers with deep-linking capabilities.\n *\n * @example\n * ```tsx\n * <H2>Getting Started</H2>\n * <H2 isClickable>API Reference</H2>\n * ```\n */\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\n\n/**\n * H3 Component\n *\n * Tertiary heading component with optional anchor link functionality.\n * Used for subsection headers within major sections.\n *\n * @example\n * ```tsx\n * <H3>Configuration Options</H3>\n * <H3 isClickable>Advanced Settings</H3>\n * ```\n */\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\n\n/**\n * H4 Component\n *\n * Fourth-level heading component with optional anchor link functionality.\n * Used for detailed section organization.\n *\n * @example\n * ```tsx\n * <H4>Implementation Details</H4>\n * <H4 isClickable>Code Examples</H4>\n * ```\n */\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\n\n/**\n * H5 Component\n *\n * Fifth-level heading component with optional anchor link functionality.\n * Used for fine-grained content organization.\n *\n * @example\n * ```tsx\n * <H5>Technical Notes</H5>\n * <H5 isClickable>Best Practices</H5>\n * ```\n */\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n\nexport const H6: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH6} isClickable={isClickable} {...props} />\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Headers/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\n/**\n * Styled H1 Component\n *\n * Primary heading component for page titles and main content headers.\n * Does not include clickable anchor functionality.\n */\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => <h1 className={cn('font-bold text-2xl', className)} {...props} />;\n\n/**\n * Styled H2 Component\n *\n * Secondary heading component with anchor link functionality when wrapped.\n * Used for major section headers in content.\n */\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h2\n    className={cn('mb-2 font-bold text-2xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H3 Component\n *\n * Tertiary heading component with anchor link functionality when wrapped.\n * Used for subsection headers in content.\n */\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h3\n    className={cn('mb-2 font-bold text-xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H4 Component\n *\n * Quaternary heading component with anchor link functionality when wrapped.\n * Used for minor section headers in content.\n */\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h4\n    className={cn('font-bold text-lg', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H5 Component\n *\n * Fifth-level heading component with anchor link functionality when wrapped.\n * Used for detailed subsection headers in content.\n */\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h5\n    className={cn('font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h6\n    className={cn('ml-3 font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Props for heading components\n */\nexport type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  /**\n   * Whether the heading should be clickable with anchor link functionality.\n   * Enables copy-to-clipboard URL behavior and smooth scrolling.\n   * @default false (for H1), true (for H2-H5)\n   */\n  isClickable?: boolean;\n};\n\n/**\n * Internal props for the HeadingWrapper component\n */\ninterface HeadingGlobalProps extends HeadingProps {\n  /** The styled heading component to render */\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n}\n\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\n/**\n * Utility function to generate URL-friendly ID from heading text\n * @param children - The heading text content\n * @returns URL-friendly string for use as element ID\n */\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\n/**\n * Utility function to smoothly scroll to an element by ID\n * @param id - The element ID to scroll to\n */\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\n/**\n * Utility function to detect if the pseudo-element (#) after the heading was clicked\n * @param parentElem - The heading element\n * @param e - Mouse event\n * @returns Whether the after pseudo-element was clicked\n */\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left;\n  const parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10);\n  const afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10);\n  const afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX;\n  const mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\n/**\n * HeadingWrapper Component\n *\n * Internal wrapper component that adds anchor link functionality to headings.\n * Handles ID generation, click-to-copy URL behavior, and smooth scrolling.\n *\n * @component\n * @accessibility\n * - Generates URL-friendly IDs for deep linking\n * - Provides accessible labels for anchor link functionality\n * - Maintains proper heading hierarchy and semantics\n * - Supports keyboard navigation and screen readers\n */\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\n/**\n * H1 Component\n *\n * Primary page heading component. Does not include clickable anchor functionality\n * as it's typically used for main page titles rather than content sections.\n *\n * @example\n * ```tsx\n * <H1>Welcome to Our Website</H1>\n * <H1 className=\"text-blue-600\">Custom Styled Title</H1>\n * ```\n */\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\n/**\n * H2 Component\n *\n * Secondary heading component with optional anchor link functionality.\n * Perfect for major section headers with deep-linking capabilities.\n *\n * @example\n * ```tsx\n * <H2>Getting Started</H2>\n * <H2 isClickable>API Reference</H2>\n * ```\n */\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\n\n/**\n * H3 Component\n *\n * Tertiary heading component with optional anchor link functionality.\n * Used for subsection headers within major sections.\n *\n * @example\n * ```tsx\n * <H3>Configuration Options</H3>\n * <H3 isClickable>Advanced Settings</H3>\n * ```\n */\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\n\n/**\n * H4 Component\n *\n * Fourth-level heading component with optional anchor link functionality.\n * Used for detailed section organization.\n *\n * @example\n * ```tsx\n * <H4>Implementation Details</H4>\n * <H4 isClickable>Code Examples</H4>\n * ```\n */\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\n\n/**\n * H5 Component\n *\n * Fifth-level heading component with optional anchor link functionality.\n * Used for fine-grained content organization.\n *\n * @example\n * ```tsx\n * <H5>Technical Notes</H5>\n * <H5 isClickable>Best Practices</H5>\n * ```\n */\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n\nexport const H6: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH6} isClickable={isClickable} {...props} />\n);\n"],"mappings":"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"}

package/dist/esm/components/HeightResizer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type React from 'react';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst HANDLE_DOUBLE_CLICK_ZONE_PX = 16;\n\n/**\n * Props for the HeightResizer component\n *\n * @interface HeightResizerProps\n */\ntype HeightResizerProps = {\n  /**\n   * Initial height in pixels for the resizable container\n   * Sets the default size when the component first loads\n   * @example 200\n   */\n  initialHeight: number;\n\n  /**\n   * Maximum height in pixels that the user can resize to (optional)\n   * When undefined, no maximum limit is enforced\n   * @example 500\n   */\n  maxHeight?: number;\n\n  /**\n   * Minimum height in pixels that the user can resize to (optional)\n   * Prevents the container from being resized below this threshold\n   * @default 0\n   * @example 50\n   */\n  minHeight?: number;\n} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n/**\n * HeightResizer Component\n *\n * A resizable container component that allows users to dynamically adjust the height\n * by dragging a visual handle at the top. Provides smooth resizing with optional\n * minimum and maximum height constraints.\n *\n * ## Key Features\n * - **Interactive Resizing**: Drag handle to resize container vertically\n * - **Touch Support**: Full support for touch devices and mobile interactions\n * - **Height Constraints**: Optional minimum and maximum height limits\n * - **Visual Feedback**: Handle with hover and active states for clear interaction\n * - **Accessibility**: ARIA slider role with value announcements for screen readers\n * - **Smooth Animation**: CSS transitions for polished user experience\n *\n * ## Use Cases\n * - Code editors with resizable panels\n * - Chat interfaces with adjustable message areas\n * - Dashboard widgets with user-customizable sizes\n * - Documentation viewers with resizable content panes\n * - Settings panels with expandable sections\n *\n * ## Interaction Model\n * The component uses a drag interaction model where users click and drag the visual\n * handle (rounded bar) at the top of the container. The resize calculation is based\n * on the difference between the current cursor position and the container's top edge.\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for assistive technologies\n * - **Value Announcements**: Current, min, and max values announced to screen readers\n * - **Keyboard Navigation**: Focusable with standard slider keyboard support\n * - **Visual Indicators**: Clear visual handle for drag interaction\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage\n * <HeightResizer initialHeight={200}>\n *   <div>Your resizable content here</div>\n * </HeightResizer>\n *\n * // With height constraints\n * <HeightResizer\n *   initialHeight={300}\n *   minHeight={100}\n *   maxHeight={600}\n * >\n *   <div>Content with size limits</div>\n * </HeightResizer>\n *\n * // In a code editor context\n * <HeightResizer\n *   initialHeight={400}\n *   minHeight={150}\n *   className=\"border rounded-lg\"\n * >\n *   <CodeEditor />\n * </HeightResizer>\n * ```\n *\n * @param props - HeightResizer component props\n * @param props.initialHeight - Starting height in pixels\n * @param props.minHeight - Optional minimum height constraint\n * @param props.maxHeight - Optional maximum height constraint\n * @param props.children - Content to display in the resizable container\n * @param props.className - Additional CSS classes for styling\n * @returns Interactive resizable container component\n */\nexport const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({\n  initialHeight,\n  maxHeight,\n  minHeight = 0,\n  children,\n  className,\n  ...props\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(initialHeight);\n  const [isResizing, setIsResizing] = useState(false);\n  const lastExpandedHeightRef = useRef(initialHeight);\n\n  /**\n   * Handler to initiate the resizing process\n   * Prevents default browser behavior and sets the resizing state\n   *\n   * @param mouseDownEvent - Mouse or touch event from the drag handle\n   */\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      setIsResizing(true);\n      mouseDownEvent.preventDefault();\n    },\n    []\n  );\n\n  /**\n   * Handler to stop the resizing process\n   * Resets the resizing state when user releases the drag handle\n   */\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n  }, []);\n\n  /**\n   * Core resize logic that calculates new height based on cursor position\n   * Handles both mouse and touch events with boundary checking\n   *\n   * @param mouseMoveEvent - Mouse or touch move event during drag\n   */\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      const container = containerRef.current;\n      if (isResizing && container) {\n        const { height: containerHeight, top: containerTop } =\n          container.getBoundingClientRect();\n\n        let clientY = 0;\n        if (mouseMoveEvent instanceof MouseEvent) {\n          clientY = mouseMoveEvent.clientY;\n        } else if (mouseMoveEvent instanceof TouchEvent) {\n          clientY = mouseMoveEvent.touches[0].clientY;\n        }\n\n        const resizeDifference = clientY - containerTop;\n        const newHeight = containerHeight - resizeDifference;\n\n        // Apply height constraints\n        let correctedHeight = Math.max(newHeight, minHeight);\n        if (maxHeight !== undefined) {\n          correctedHeight = Math.min(correctedHeight, maxHeight);\n        }\n\n        setHeight(correctedHeight);\n      }\n    },\n    [isResizing, minHeight, maxHeight]\n  );\n\n  /**\n   * Effect to manage global event listeners for resize interactions\n   * Handles both mouse and touch events with proper cleanup\n   */\n  useEffect(() => {\n    window.addEventListener('mousemove', resize, { passive: true });\n    window.addEventListener('mouseup', stopResizing);\n    window.addEventListener('touchmove', resize, { passive: true });\n    window.addEventListener('touchend', stopResizing);\n\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  useEffect(() => {\n    if (height > minHeight) {\n      lastExpandedHeightRef.current = height;\n    }\n  }, [height, minHeight]);\n\n  const handleDoubleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const { top } = el.getBoundingClientRect();\n      if (event.clientY - top > HANDLE_DOUBLE_CLICK_ZONE_PX) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (height > minHeight) {\n        setHeight(minHeight);\n        return;\n      }\n\n      const capped =\n        maxHeight !== undefined\n          ? Math.min(lastExpandedHeightRef.current, maxHeight)\n          : lastExpandedHeightRef.current;\n      setHeight(Math.max(capped, minHeight));\n    },\n    [height, maxHeight, minHeight]\n  );\n\n  return (\n    <div\n      className={cn(\n        'relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950',\n        'before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950',\n        'active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600',\n        className\n      )}\n      style={{\n        height: `${height}px`,\n        maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n        minHeight: `${minHeight}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      onDoubleClick={handleDoubleClick}\n      aria-valuemin={minHeight}\n      aria-valuemax={maxHeight}\n      aria-valuenow={height}\n      aria-label=\"Resizable component - drag the handle to adjust height\"\n      role=\"slider\"\n      tabIndex={0}\n      {...props}\n    >\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Stops content clicks from triggering resize on the parent slider */}\n      <div\n        role=\"presentation\"\n        className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAeA,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGpC,MAAa,iBAA4D,EACvE,eACA,WACA,YAAY,GACZ,UACA,WACA,GAAG,YACC;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc;CACnD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,wBAAwB,OAAO,cAAc;;;;;;;CAQnD,MAAM,gBAAgB,aAElB,mBAGG;EACH,cAAc,KAAK;EACnB,eAAe,gBAAgB;IAEjC,EAAE,CACH;;;;;CAMD,MAAM,eAAe,kBAAkB;EACrC,cAAc,MAAM;IACnB,EAAE,CAAC;;;;;;;CAQN,MAAM,SAAS,aACZ,mBAA4C;EAC3C,MAAM,YAAY,aAAa;EAC/B,IAAI,cAAc,WAAW;GAC3B,MAAM,EAAE,QAAQ,iBAAiB,KAAK,iBACpC,UAAU,uBAAuB;GAEnC,IAAI,UAAU;GACd,IAAI,0BAA0B,YAC5B,UAAU,eAAe;QACpB,IAAI,0BAA0B,YACnC,UAAU,eAAe,QAAQ,GAAG;GAItC,MAAM,YAAY,mBADO,UAAU;GAInC,IAAI,kBAAkB,KAAK,IAAI,WAAW,UAAU;GACpD,IAAI,cAAc,QAChB,kBAAkB,KAAK,IAAI,iBAAiB,UAAU;GAGxD,UAAU,gBAAgB;;IAG9B;EAAC;EAAY;EAAW;EAAU,CACnC;;;;;CAMD,gBAAgB;EACd,OAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;EAC/D,OAAO,iBAAiB,WAAW,aAAa;EAChD,OAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;EAC/D,OAAO,iBAAiB,YAAY,aAAa;EAEjD,aAAa;GACX,OAAO,oBAAoB,aAAa,OAAO;GAC/C,OAAO,oBAAoB,WAAW,aAAa;GACnD,OAAO,oBAAoB,aAAa,OAAO;GAC/C,OAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;CAE1B,gBAAgB;EACd,IAAI,SAAS,WACX,sBAAsB,UAAU;IAEjC,CAAC,QAAQ,UAAU,CAAC;CAEvB,MAAM,oBAAoB,aACvB,UAA4C;EAC3C,MAAM,KAAK,aAAa;EACxB,IAAI,CAAC,IAAI;EAET,MAAM,EAAE,QAAQ,GAAG,uBAAuB;EAC1C,IAAI,MAAM,UAAU,MAAM,6BAA6B;EAEvD,MAAM,gBAAgB;EACtB,MAAM,iBAAiB;EAEvB,IAAI,SAAS,WAAW;GACtB,UAAU,UAAU;GACpB;;EAGF,MAAM,SACJ,cAAc,SACV,KAAK,IAAI,sBAAsB,SAAS,UAAU,GAClD,sBAAsB;EAC5B,UAAU,KAAK,IAAI,QAAQ,UAAU,CAAC;IAExC;EAAC;EAAQ;EAAW;EAAU,CAC/B;CAED,OACE,oBAAC,OAAD;EACE,WAAW,GACT,4HACA,sSACA,2HACA,UACD;EACD,OAAO;GACL,QAAQ,GAAG,OAAO;GAClB,WAAW,YAAY,GAAG,UAAU,MAAM;GAC1C,WAAW,GAAG,UAAU;GACzB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,eAAe;EACf,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;EACV,GAAI;YAGJ,oBAAC,OAAD;GACE,MAAK;GACL,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;GACG;EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type React from 'react';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst HANDLE_DOUBLE_CLICK_ZONE_PX = 16;\n\n/**\n * Props for the HeightResizer component\n *\n * @interface HeightResizerProps\n */\ntype HeightResizerProps = {\n  /**\n   * Initial height in pixels for the resizable container\n   * Sets the default size when the component first loads\n   * @example 200\n   */\n  initialHeight: number;\n\n  /**\n   * Maximum height in pixels that the user can resize to (optional)\n   * When undefined, no maximum limit is enforced\n   * @example 500\n   */\n  maxHeight?: number;\n\n  /**\n   * Minimum height in pixels that the user can resize to (optional)\n   * Prevents the container from being resized below this threshold\n   * @default 0\n   * @example 50\n   */\n  minHeight?: number;\n} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n/**\n * HeightResizer Component\n *\n * A resizable container component that allows users to dynamically adjust the height\n * by dragging a visual handle at the top. Provides smooth resizing with optional\n * minimum and maximum height constraints.\n *\n * ## Key Features\n * - **Interactive Resizing**: Drag handle to resize container vertically\n * - **Touch Support**: Full support for touch devices and mobile interactions\n * - **Height Constraints**: Optional minimum and maximum height limits\n * - **Visual Feedback**: Handle with hover and active states for clear interaction\n * - **Accessibility**: ARIA slider role with value announcements for screen readers\n * - **Smooth Animation**: CSS transitions for polished user experience\n *\n * ## Use Cases\n * - Code editors with resizable panels\n * - Chat interfaces with adjustable message areas\n * - Dashboard widgets with user-customizable sizes\n * - Documentation viewers with resizable content panes\n * - Settings panels with expandable sections\n *\n * ## Interaction Model\n * The component uses a drag interaction model where users click and drag the visual\n * handle (rounded bar) at the top of the container. The resize calculation is based\n * on the difference between the current cursor position and the container's top edge.\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for assistive technologies\n * - **Value Announcements**: Current, min, and max values announced to screen readers\n * - **Keyboard Navigation**: Focusable with standard slider keyboard support\n * - **Visual Indicators**: Clear visual handle for drag interaction\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage\n * <HeightResizer initialHeight={200}>\n *   <div>Your resizable content here</div>\n * </HeightResizer>\n *\n * // With height constraints\n * <HeightResizer\n *   initialHeight={300}\n *   minHeight={100}\n *   maxHeight={600}\n * >\n *   <div>Content with size limits</div>\n * </HeightResizer>\n *\n * // In a code editor context\n * <HeightResizer\n *   initialHeight={400}\n *   minHeight={150}\n *   className=\"border rounded-lg\"\n * >\n *   <CodeEditor />\n * </HeightResizer>\n * ```\n *\n * @param props - HeightResizer component props\n * @param props.initialHeight - Starting height in pixels\n * @param props.minHeight - Optional minimum height constraint\n * @param props.maxHeight - Optional maximum height constraint\n * @param props.children - Content to display in the resizable container\n * @param props.className - Additional CSS classes for styling\n * @returns Interactive resizable container component\n */\nexport const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({\n  initialHeight,\n  maxHeight,\n  minHeight = 0,\n  children,\n  className,\n  ...props\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(initialHeight);\n  const [isResizing, setIsResizing] = useState(false);\n  const lastExpandedHeightRef = useRef(initialHeight);\n\n  /**\n   * Handler to initiate the resizing process\n   * Prevents default browser behavior and sets the resizing state\n   *\n   * @param mouseDownEvent - Mouse or touch event from the drag handle\n   */\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      setIsResizing(true);\n      mouseDownEvent.preventDefault();\n    },\n    []\n  );\n\n  /**\n   * Handler to stop the resizing process\n   * Resets the resizing state when user releases the drag handle\n   */\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n  }, []);\n\n  /**\n   * Core resize logic that calculates new height based on cursor position\n   * Handles both mouse and touch events with boundary checking\n   *\n   * @param mouseMoveEvent - Mouse or touch move event during drag\n   */\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      const container = containerRef.current;\n      if (isResizing && container) {\n        const { height: containerHeight, top: containerTop } =\n          container.getBoundingClientRect();\n\n        let clientY = 0;\n        if (mouseMoveEvent instanceof MouseEvent) {\n          clientY = mouseMoveEvent.clientY;\n        } else if (mouseMoveEvent instanceof TouchEvent) {\n          clientY = mouseMoveEvent.touches[0].clientY;\n        }\n\n        const resizeDifference = clientY - containerTop;\n        const newHeight = containerHeight - resizeDifference;\n\n        // Apply height constraints\n        let correctedHeight = Math.max(newHeight, minHeight);\n        if (maxHeight !== undefined) {\n          correctedHeight = Math.min(correctedHeight, maxHeight);\n        }\n\n        setHeight(correctedHeight);\n      }\n    },\n    [isResizing, minHeight, maxHeight]\n  );\n\n  /**\n   * Effect to manage global event listeners for resize interactions\n   * Handles both mouse and touch events with proper cleanup\n   */\n  useEffect(() => {\n    window.addEventListener('mousemove', resize, { passive: true });\n    window.addEventListener('mouseup', stopResizing);\n    window.addEventListener('touchmove', resize, { passive: true });\n    window.addEventListener('touchend', stopResizing);\n\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  useEffect(() => {\n    if (height > minHeight) {\n      lastExpandedHeightRef.current = height;\n    }\n  }, [height, minHeight]);\n\n  const handleDoubleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const { top } = el.getBoundingClientRect();\n      if (event.clientY - top > HANDLE_DOUBLE_CLICK_ZONE_PX) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (height > minHeight) {\n        setHeight(minHeight);\n        return;\n      }\n\n      const capped =\n        maxHeight !== undefined\n          ? Math.min(lastExpandedHeightRef.current, maxHeight)\n          : lastExpandedHeightRef.current;\n      setHeight(Math.max(capped, minHeight));\n    },\n    [height, maxHeight, minHeight]\n  );\n\n  return (\n    <div\n      className={cn(\n        'relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950',\n        'before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950',\n        'active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600',\n        className\n      )}\n      style={{\n        height: `${height}px`,\n        maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n        minHeight: `${minHeight}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      onDoubleClick={handleDoubleClick}\n      aria-valuemin={minHeight}\n      aria-valuemax={maxHeight}\n      aria-valuenow={height}\n      aria-label=\"Resizable component - drag the handle to adjust height\"\n      role=\"slider\"\n      tabIndex={0}\n      {...props}\n    >\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Stops content clicks from triggering resize on the parent slider */}\n      <div\n        role=\"presentation\"\n        className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAeA,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGpC,MAAa,iBAA4D,EACvE,eACA,WACA,YAAY,GACZ,UACA,WACA,GAAG,YACC;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,wBAAwB,OAAO,aAAa;;;;;;;CAQlD,MAAM,gBAAgB,aAElB,mBAGG;EACH,cAAc,IAAI;EAClB,eAAe,eAAe;CAChC,GACA,CAAC,CACH;;;;;CAMA,MAAM,eAAe,kBAAkB;EACrC,cAAc,KAAK;CACrB,GAAG,CAAC,CAAC;;;;;;;CAQL,MAAM,SAAS,aACZ,mBAA4C;EAC3C,MAAM,YAAY,aAAa;EAC/B,IAAI,cAAc,WAAW;GAC3B,MAAM,EAAE,QAAQ,iBAAiB,KAAK,iBACpC,UAAU,sBAAsB;GAElC,IAAI,UAAU;GACd,IAAI,0BAA0B,YAC5B,UAAU,eAAe;QACpB,IAAI,0BAA0B,YACnC,UAAU,eAAe,QAAQ,GAAG;GAItC,MAAM,YAAY,mBADO,UAAU;GAInC,IAAI,kBAAkB,KAAK,IAAI,WAAW,SAAS;GACnD,IAAI,cAAc,QAChB,kBAAkB,KAAK,IAAI,iBAAiB,SAAS;GAGvD,UAAU,eAAe;EAC3B;CACF,GACA;EAAC;EAAY;EAAW;CAAS,CACnC;;;;;CAMA,gBAAgB;EACd,OAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,KAAK,CAAC;EAC9D,OAAO,iBAAiB,WAAW,YAAY;EAC/C,OAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,KAAK,CAAC;EAC9D,OAAO,iBAAiB,YAAY,YAAY;EAEhD,aAAa;GACX,OAAO,oBAAoB,aAAa,MAAM;GAC9C,OAAO,oBAAoB,WAAW,YAAY;GAClD,OAAO,oBAAoB,aAAa,MAAM;GAC9C,OAAO,oBAAoB,YAAY,YAAY;EACrD;CACF,GAAG,CAAC,QAAQ,YAAY,CAAC;CAEzB,gBAAgB;EACd,IAAI,SAAS,WACX,sBAAsB,UAAU;CAEpC,GAAG,CAAC,QAAQ,SAAS,CAAC;CAEtB,MAAM,oBAAoB,aACvB,UAA4C;EAC3C,MAAM,KAAK,aAAa;EACxB,IAAI,CAAC,IAAI;EAET,MAAM,EAAE,QAAQ,GAAG,sBAAsB;EACzC,IAAI,MAAM,UAAU,MAAM,6BAA6B;EAEvD,MAAM,eAAe;EACrB,MAAM,gBAAgB;EAEtB,IAAI,SAAS,WAAW;GACtB,UAAU,SAAS;GACnB;EACF;EAEA,MAAM,SACJ,cAAc,SACV,KAAK,IAAI,sBAAsB,SAAS,SAAS,IACjD,sBAAsB;EAC5B,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;CACvC,GACA;EAAC;EAAQ;EAAW;CAAS,CAC/B;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GACT,4HACA,sSACA,2HACA,SACF;EACA,OAAO;GACL,QAAQ,GAAG,OAAO;GAClB,WAAW,YAAY,GAAG,UAAU,MAAM;GAC1C,WAAW,GAAG,UAAU;EAC1B;EACA,KAAK;EACL,aAAa;EACb,cAAc;EACd,eAAe;EACf,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;EACV,GAAI;YAGJ,oBAAC,OAAD;GACE,MAAK;GACL,WAAU;GACV,cAAc,MAAM,EAAE,gBAAgB;GACtC,eAAe,MAAM,EAAE,gBAAgB;GAEtC;EACE;CACF;AAET"}

package/dist/esm/components/HideShow/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\n/**\n * Props for the HideShow component\n */\nexport interface HideShowProps {\n  /**\n   * Sensitive text to display masked. Copy is only allowed when revealed.\n   */\n  text: string;\n\n  /** Wrapper classes */\n  className?: string;\n\n  /** Number of prefix characters to keep visible when masked. Default: 6 */\n  visiblePrefixChars?: number;\n\n  /** Character used to mask hidden portion. Default: '•' */\n  maskChar?: string;\n\n  /** Reveal duration in ms before auto-hiding. Default: 10000 (10s) */\n  revealDurationMs?: number;\n\n  /** Copy error callback */\n  onCopyError?: (error: Error) => void;\n}\n\n// Insert zero-width spaces every N chars so Safari can wrap long runs\nconst insertBreaks = (str: string, groupSize = 6) =>\n  str.replace(new RegExp(`.{1,${groupSize}}`, 'g'), '$&\\u200b');\n\nexport const HideShow: FC<HideShowProps> = ({\n  text,\n  className,\n  visiblePrefixChars = 6,\n  maskChar = '•',\n  revealDurationMs = 10000,\n}) => {\n  const [isRevealed, setIsRevealed] = useState(false);\n  const hideTimerRef = useRef<number | null>(null);\n\n  const maskedText = useMemo(() => {\n    if (!text) return '';\n    if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);\n    const prefix = text.slice(0, visiblePrefixChars);\n    const remaining = Math.max(0, text.length - visiblePrefixChars);\n    return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);\n  }, [text, visiblePrefixChars, maskChar]);\n\n  useEffect(() => {\n    return () => {\n      if (hideTimerRef.current) {\n        window.clearTimeout(hideTimerRef.current);\n        hideTimerRef.current = null;\n      }\n    };\n  }, []);\n\n  const reveal = () => {\n    if (isRevealed) return;\n    setIsRevealed(true);\n    if (hideTimerRef.current) {\n      window.clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n    hideTimerRef.current = window.setTimeout(() => {\n      setIsRevealed(false);\n    }, revealDurationMs);\n  };\n\n  const hide = () => {\n    setIsRevealed(false);\n\n    if (hideTimerRef.current) {\n      window.clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n  };\n\n  const IconComponent = isRevealed ? EyeOff : Eye;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10',\n        className\n      )}\n      onClick={isRevealed ? hide : reveal}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          isRevealed ? hide() : reveal();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <span className=\"min-w-0 break-all\">\n        {isRevealed ? text : maskedText}\n      </span>\n      <IconComponent className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\" />\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAgCA,MAAM,gBAAgB,KAAa,YAAY,MAC7C,IAAI,QAAQ,IAAI,OAAO,OAAO,UAAU,IAAI,IAAI,EAAE,MAAW;AAE/D,MAAa,YAA+B,EAC1C,MACA,WACA,qBAAqB,GACrB,WAAW,KACX,mBAAmB,UACf;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,eAAe,OAAsB,KAAK;CAEhD,MAAM,aAAa,cAAc;EAC/B,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,sBAAsB,GAAG,OAAO,SAAS,OAAO,KAAK,OAAO;EAChE,MAAM,SAAS,KAAK,MAAM,GAAG,mBAAmB;EAChD,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,SAAS,mBAAmB;EAC/D,OAAO,aAAa,GAAG,SAAS,SAAS,OAAO,UAAU,GAAG;IAC5D;EAAC;EAAM;EAAoB;EAAS,CAAC;CAExC,gBAAgB;EACd,aAAa;GACX,IAAI,aAAa,SAAS;IACxB,OAAO,aAAa,aAAa,QAAQ;IACzC,aAAa,UAAU;;;IAG1B,EAAE,CAAC;CAEN,MAAM,eAAe;EACnB,IAAI,YAAY;EAChB,cAAc,KAAK;EACnB,IAAI,aAAa,SAAS;GACxB,OAAO,aAAa,aAAa,QAAQ;GACzC,aAAa,UAAU;;EAEzB,aAAa,UAAU,OAAO,iBAAiB;GAC7C,cAAc,MAAM;KACnB,iBAAiB;;CAGtB,MAAM,aAAa;EACjB,cAAc,MAAM;EAEpB,IAAI,aAAa,SAAS;GACxB,OAAO,aAAa,aAAa,QAAQ;GACzC,aAAa,UAAU;;;CAI3B,MAAM,gBAAgB,aAAa,SAAS;CAE5C,OACE,qBAAC,QAAD;EACE,WAAW,GACT,uGACA,UACD;EACD,SAAS,aAAa,OAAO;EAC7B,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,gBAAgB;IAClB,aAAa,MAAM,GAAG,QAAQ;;;EAGlC,MAAK;EACL,UAAU;YAbZ,CAeE,oBAAC,QAAD;GAAM,WAAU;aACb,aAAa,OAAO;GAChB,GACP,oBAAC,eAAD,EAAe,WAAU,wCAAyC,EAC7D"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\n/**\n * Props for the HideShow component\n */\nexport interface HideShowProps {\n  /**\n   * Sensitive text to display masked. Copy is only allowed when revealed.\n   */\n  text: string;\n\n  /** Wrapper classes */\n  className?: string;\n\n  /** Number of prefix characters to keep visible when masked. Default: 6 */\n  visiblePrefixChars?: number;\n\n  /** Character used to mask hidden portion. Default: '•' */\n  maskChar?: string;\n\n  /** Reveal duration in ms before auto-hiding. Default: 10000 (10s) */\n  revealDurationMs?: number;\n\n  /** Copy error callback */\n  onCopyError?: (error: Error) => void;\n}\n\n// Insert zero-width spaces every N chars so Safari can wrap long runs\nconst insertBreaks = (str: string, groupSize = 6) =>\n  str.replace(new RegExp(`.{1,${groupSize}}`, 'g'), '$&\\u200b');\n\nexport const HideShow: FC<HideShowProps> = ({\n  text,\n  className,\n  visiblePrefixChars = 6,\n  maskChar = '•',\n  revealDurationMs = 10000,\n}) => {\n  const [isRevealed, setIsRevealed] = useState(false);\n  const hideTimerRef = useRef<number | null>(null);\n\n  const maskedText = useMemo(() => {\n    if (!text) return '';\n    if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);\n    const prefix = text.slice(0, visiblePrefixChars);\n    const remaining = Math.max(0, text.length - visiblePrefixChars);\n    return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);\n  }, [text, visiblePrefixChars, maskChar]);\n\n  useEffect(() => {\n    return () => {\n      if (hideTimerRef.current) {\n        window.clearTimeout(hideTimerRef.current);\n        hideTimerRef.current = null;\n      }\n    };\n  }, []);\n\n  const reveal = () => {\n    if (isRevealed) return;\n    setIsRevealed(true);\n    if (hideTimerRef.current) {\n      window.clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n    hideTimerRef.current = window.setTimeout(() => {\n      setIsRevealed(false);\n    }, revealDurationMs);\n  };\n\n  const hide = () => {\n    setIsRevealed(false);\n\n    if (hideTimerRef.current) {\n      window.clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n  };\n\n  const IconComponent = isRevealed ? EyeOff : Eye;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10',\n        className\n      )}\n      onClick={isRevealed ? hide : reveal}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          isRevealed ? hide() : reveal();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <span className=\"min-w-0 break-all\">\n        {isRevealed ? text : maskedText}\n      </span>\n      <IconComponent className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\" />\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAgCA,MAAM,gBAAgB,KAAa,YAAY,MAC7C,IAAI,QAAQ,IAAI,OAAO,OAAO,UAAU,IAAI,GAAG,GAAG,KAAU;AAE9D,MAAa,YAA+B,EAC1C,MACA,WACA,qBAAqB,GACrB,WAAW,KACX,mBAAmB,UACf;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,eAAe,OAAsB,IAAI;CAE/C,MAAM,aAAa,cAAc;EAC/B,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,sBAAsB,GAAG,OAAO,SAAS,OAAO,KAAK,MAAM;EAC/D,MAAM,SAAS,KAAK,MAAM,GAAG,kBAAkB;EAC/C,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,SAAS,kBAAkB;EAC9D,OAAO,aAAa,GAAG,SAAS,SAAS,OAAO,SAAS,GAAG;CAC9D,GAAG;EAAC;EAAM;EAAoB;CAAQ,CAAC;CAEvC,gBAAgB;EACd,aAAa;GACX,IAAI,aAAa,SAAS;IACxB,OAAO,aAAa,aAAa,OAAO;IACxC,aAAa,UAAU;GACzB;EACF;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe;EACnB,IAAI,YAAY;EAChB,cAAc,IAAI;EAClB,IAAI,aAAa,SAAS;GACxB,OAAO,aAAa,aAAa,OAAO;GACxC,aAAa,UAAU;EACzB;EACA,aAAa,UAAU,OAAO,iBAAiB;GAC7C,cAAc,KAAK;EACrB,GAAG,gBAAgB;CACrB;CAEA,MAAM,aAAa;EACjB,cAAc,KAAK;EAEnB,IAAI,aAAa,SAAS;GACxB,OAAO,aAAa,aAAa,OAAO;GACxC,aAAa,UAAU;EACzB;CACF;CAEA,MAAM,gBAAgB,aAAa,SAAS;CAE5C,OACE,qBAAC,QAAD;EACE,WAAW,GACT,uGACA,SACF;EACA,SAAS,aAAa,OAAO;EAC7B,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,aAAa,KAAK,IAAI,OAAO;GAC/B;EACF;EACA,MAAK;EACL,UAAU;YAbZ,CAeE,oBAAC,QAAD;GAAM,WAAU;aACb,aAAa,OAAO;EACjB,IACN,oBAAC,eAAD,EAAe,WAAU,uCAAwC,EAC7D;;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeBlockHighlight } from './CodeBlockHighlight';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { useCodeContext } 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  /** Single format, a JSON-array string, or an array of formats. */\n  codeFormat?: CodeFormat | string | string[];\n  contentDeclarationFormat?: ContentDeclarationFormat | string | string[];\n};\n\ntype CodeCompProps = {\n  children: ReactNode;\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\n/** Languages that use JSX syntax — CommonJS doesn't make sense for these. */\nconst JSX_LANGUAGES = new Set(['tsx', 'jsx']);\n\n/** Parse a codeFormat prop that may be a single value, a JSON-array string, or already an array. */\nconst parseFormats = (\n  raw: string | string[] | undefined\n): CodeFormat[] | undefined => {\n  if (!raw) return undefined;\n  if (Array.isArray(raw)) return raw as CodeFormat[];\n  if (typeof raw === 'string' && raw.startsWith('[')) {\n    try {\n      const parsed = JSON.parse(raw);\n      if (Array.isArray(parsed)) return parsed as CodeFormat[];\n    } catch {\n      /* ignore */\n    }\n  }\n  return [raw as CodeFormat];\n};\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: rawCodeFormat,\n  contentDeclarationFormat: rawContentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const {\n    codeFormat: selectedCodeFormat,\n    contentDeclarationFormat: selectedContentDeclarationFormat,\n  } = useCodeContext();\n\n  // Parse whichever attribute is present as an array of formats.\n  const codeFormats = useMemo(\n    () => parseFormats(rawCodeFormat as string | undefined),\n    [rawCodeFormat]\n  );\n  const contentFormats = useMemo(\n    () => parseFormats(rawContentDeclarationFormat as string | undefined),\n    [rawContentDeclarationFormat]\n  );\n\n  // A block is \"multi-format\" when it has multiple formats including TypeScript\n  // (the canonical source). Such blocks transform at runtime.\n  const isMultiCodeFormat =\n    codeFormats !== undefined &&\n    codeFormats.length > 1 &&\n    codeFormats.includes('typescript');\n\n  const isMultiContentFormat =\n    contentFormats !== undefined &&\n    contentFormats.length > 1 &&\n    contentFormats.includes('typescript');\n\n  const isMultiFormat = isMultiCodeFormat || isMultiContentFormat;\n\n  // Determine which context format drives this block's selection.\n  // content declaration blocks use selectedContentDeclarationFormat;\n  // regular code blocks use selectedCodeFormat.\n  const selectedFormat: CodeFormat = isMultiContentFormat\n    ? (selectedContentDeclarationFormat as CodeFormat)\n    : selectedCodeFormat;\n\n  // The formats actually relevant for transformation (no 'json', no 'commonjs' for JSX).\n  const effectiveFormats = useMemo<CodeFormat[] | undefined>(() => {\n    const base = isMultiContentFormat ? contentFormats : codeFormats;\n    if (!base) return base;\n    let filtered = base.filter((f) => f !== 'json') as CodeFormat[];\n    if (JSX_LANGUAGES.has(language as string)) {\n      filtered = filtered.filter((f) => f !== 'commonjs');\n    }\n    return filtered;\n  }, [isMultiContentFormat, contentFormats, codeFormats, language]);\n\n  // When the globally-selected format isn't valid for this block\n  // (e.g. CJS selected but this is a JSX file), fall back to the last valid one.\n  const resolvedFormat: Exclude<CodeFormat, 'json'> = useMemo(() => {\n    if (!effectiveFormats || effectiveFormats.includes(selectedFormat)) {\n      return selectedFormat as Exclude<CodeFormat, 'json'>;\n    }\n    return (effectiveFormats[effectiveFormats.length - 1] ??\n      'typescript') as Exclude<CodeFormat, 'json'>;\n  }, [effectiveFormats, selectedFormat]);\n\n  // ── Async filename derivation (dynamic import of transformer) ──────────────\n  // We derive the displayed fileName so the header updates when format changes.\n  // deriveFileName is tiny but it lives inside codeTransformer, which is only\n  // imported when actually needed (non-TypeScript selection).\n  const [displayedFileName, setDisplayedFileName] = useState<\n    string | undefined\n  >(fileName);\n\n  useEffect(() => {\n    if (!isMultiFormat || resolvedFormat === 'typescript') {\n      setDisplayedFileName(fileName);\n      return;\n    }\n    if (!fileName) return;\n\n    let cancelled = false;\n    (async () => {\n      const { deriveFileName } = await import('./codeTransformer');\n      if (!cancelled)\n        setDisplayedFileName(deriveFileName(fileName, resolvedFormat));\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [fileName, isMultiFormat, resolvedFormat]);\n\n  // ── Async copy text (transformed code for CopyCode) ───────────────────────\n  const rawCode = useMemo(() => {\n    const code = Array.isArray(children) ? children.join('') : String(children);\n    return code.endsWith('\\n') ? code.slice(0, -1) : code;\n  }, [children]);\n\n  const [copyCode, setCopyCode] = useState<string>(rawCode);\n\n  useEffect(() => {\n    if (!isMultiFormat || resolvedFormat === 'typescript') {\n      setCopyCode(rawCode);\n      return;\n    }\n    let cancelled = false;\n    (async () => {\n      const { transformCode } = await import('./codeTransformer');\n      if (!cancelled) setCopyCode(transformCode(rawCode, resolvedFormat));\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [rawCode, isMultiFormat, resolvedFormat]);\n\n  const hadSelectInHeader =\n    packageManager || rawCodeFormat || rawContentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={rawCodeFormat as string | undefined}\n      contentDeclarationFormat={\n        rawContentDeclarationFormat as string | undefined\n      }\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\">{displayedFileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {rawCodeFormat && (\n                  <CodeFormatSelector availableFormats={effectiveFormats} />\n                )}\n                {rawContentDeclarationFormat && (\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={copyCode} />\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          {isMultiFormat ? (\n            /*\n             * Multi-format: CodeBlockHighlight manages both the transformation\n             * (dynamic import of codeTransformer) and the Shiki highlighting in\n             * a single useEffect. The previous highlighted output stays visible\n             * while the new one loads — no white-text flash.\n             */\n            <CodeBlockHighlight\n              originalLang={language}\n              targetFormat={resolvedFormat}\n              isDarkMode={isDarkMode}\n            >\n              {rawCode}\n            </CodeBlockHighlight>\n          ) : (\n            /*\n             * Single-format: use the original Suspense-based async Shiki renderer\n             * (good for SSR / static content).\n             */\n            <CodeBlock lang={language} isDarkMode={isDarkMode}>\n              {rawCode}\n            </CodeBlock>\n          )}\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeBlockHighlight } from './CodeBlockHighlight';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { useCodeContext } 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  /** Single format, a JSON-array string, or an array of formats. */\n  codeFormat?: CodeFormat | string | string[];\n  contentDeclarationFormat?: ContentDeclarationFormat | string | string[];\n};\n\ntype CodeCompProps = {\n  children: ReactNode;\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\n/** Languages that use JSX syntax — CommonJS doesn't make sense for these. */\nconst JSX_LANGUAGES = new Set(['tsx', 'jsx']);\n\n/** Parse a codeFormat prop that may be a single value, a JSON-array string, or already an array. */\nconst parseFormats = (\n  raw: string | string[] | undefined\n): CodeFormat[] | undefined => {\n  if (!raw) return undefined;\n  if (Array.isArray(raw)) return raw as CodeFormat[];\n  if (typeof raw === 'string' && raw.startsWith('[')) {\n    try {\n      const parsed = JSON.parse(raw);\n      if (Array.isArray(parsed)) return parsed as CodeFormat[];\n    } catch {\n      /* ignore */\n    }\n  }\n  return [raw as CodeFormat];\n};\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: rawCodeFormat,\n  contentDeclarationFormat: rawContentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const {\n    codeFormat: selectedCodeFormat,\n    contentDeclarationFormat: selectedContentDeclarationFormat,\n  } = useCodeContext();\n\n  // Parse whichever attribute is present as an array of formats.\n  const codeFormats = useMemo(\n    () => parseFormats(rawCodeFormat as string | undefined),\n    [rawCodeFormat]\n  );\n  const contentFormats = useMemo(\n    () => parseFormats(rawContentDeclarationFormat as string | undefined),\n    [rawContentDeclarationFormat]\n  );\n\n  // A block is \"multi-format\" when it has multiple formats including TypeScript\n  // (the canonical source). Such blocks transform at runtime.\n  const isMultiCodeFormat =\n    codeFormats !== undefined &&\n    codeFormats.length > 1 &&\n    codeFormats.includes('typescript');\n\n  const isMultiContentFormat =\n    contentFormats !== undefined &&\n    contentFormats.length > 1 &&\n    contentFormats.includes('typescript');\n\n  const isMultiFormat = isMultiCodeFormat || isMultiContentFormat;\n\n  // Determine which context format drives this block's selection.\n  // content declaration blocks use selectedContentDeclarationFormat;\n  // regular code blocks use selectedCodeFormat.\n  const selectedFormat: CodeFormat = isMultiContentFormat\n    ? (selectedContentDeclarationFormat as CodeFormat)\n    : selectedCodeFormat;\n\n  // The formats actually relevant for transformation (no 'json', no 'commonjs' for JSX).\n  const effectiveFormats = useMemo<CodeFormat[] | undefined>(() => {\n    const base = isMultiContentFormat ? contentFormats : codeFormats;\n    if (!base) return base;\n    let filtered = base.filter((f) => f !== 'json') as CodeFormat[];\n    if (JSX_LANGUAGES.has(language as string)) {\n      filtered = filtered.filter((f) => f !== 'commonjs');\n    }\n    return filtered;\n  }, [isMultiContentFormat, contentFormats, codeFormats, language]);\n\n  // When the globally-selected format isn't valid for this block\n  // (e.g. CJS selected but this is a JSX file), fall back to the last valid one.\n  const resolvedFormat: Exclude<CodeFormat, 'json'> = useMemo(() => {\n    if (!effectiveFormats || effectiveFormats.includes(selectedFormat)) {\n      return selectedFormat as Exclude<CodeFormat, 'json'>;\n    }\n    return (effectiveFormats[effectiveFormats.length - 1] ??\n      'typescript') as Exclude<CodeFormat, 'json'>;\n  }, [effectiveFormats, selectedFormat]);\n\n  // ── Async filename derivation (dynamic import of transformer) ──────────────\n  // We derive the displayed fileName so the header updates when format changes.\n  // deriveFileName is tiny but it lives inside codeTransformer, which is only\n  // imported when actually needed (non-TypeScript selection).\n  const [displayedFileName, setDisplayedFileName] = useState<\n    string | undefined\n  >(fileName);\n\n  useEffect(() => {\n    if (!isMultiFormat || resolvedFormat === 'typescript') {\n      setDisplayedFileName(fileName);\n      return;\n    }\n    if (!fileName) return;\n\n    let cancelled = false;\n    (async () => {\n      const { deriveFileName } = await import('./codeTransformer');\n      if (!cancelled)\n        setDisplayedFileName(deriveFileName(fileName, resolvedFormat));\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [fileName, isMultiFormat, resolvedFormat]);\n\n  // ── Async copy text (transformed code for CopyCode) ───────────────────────\n  const rawCode = useMemo(() => {\n    const code = Array.isArray(children) ? children.join('') : String(children);\n    return code.endsWith('\\n') ? code.slice(0, -1) : code;\n  }, [children]);\n\n  const [copyCode, setCopyCode] = useState<string>(rawCode);\n\n  useEffect(() => {\n    if (!isMultiFormat || resolvedFormat === 'typescript') {\n      setCopyCode(rawCode);\n      return;\n    }\n    let cancelled = false;\n    (async () => {\n      const { transformCode } = await import('./codeTransformer');\n      if (!cancelled) setCopyCode(transformCode(rawCode, resolvedFormat));\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [rawCode, isMultiFormat, resolvedFormat]);\n\n  const hadSelectInHeader =\n    packageManager || rawCodeFormat || rawContentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={rawCodeFormat as string | undefined}\n      contentDeclarationFormat={\n        rawContentDeclarationFormat as string | undefined\n      }\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\">{displayedFileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {rawCodeFormat && (\n                  <CodeFormatSelector availableFormats={effectiveFormats} />\n                )}\n                {rawContentDeclarationFormat && (\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={copyCode} />\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          {isMultiFormat ? (\n            /*\n             * Multi-format: CodeBlockHighlight manages both the transformation\n             * (dynamic import of codeTransformer) and the Shiki highlighting in\n             * a single useEffect. The previous highlighted output stays visible\n             * while the new one loads — no white-text flash.\n             */\n            <CodeBlockHighlight\n              originalLang={language}\n              targetFormat={resolvedFormat}\n              isDarkMode={isDarkMode}\n            >\n              {rawCode}\n            </CodeBlockHighlight>\n          ) : (\n            /*\n             * Single-format: use the original Suspense-based async Shiki renderer\n             * (good for SSR / static content).\n             */\n            <CodeBlock lang={language} isDarkMode={isDarkMode}>\n              {rawCode}\n            </CodeBlock>\n          )}\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,MAAM,aAAa;;AAGnB,MAAM,gBAAgB,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC;;AAG5C,MAAM,gBACJ,QAC6B;CAC7B,IAAI,CAAC,KAAK,OAAO;CACjB,IAAI,MAAM,QAAQ,GAAG,GAAG,OAAO;CAC/B,IAAI,OAAO,QAAQ,YAAY,IAAI,WAAW,GAAG,GAC/C,IAAI;EACF,MAAM,SAAS,KAAK,MAAM,GAAG;EAC7B,IAAI,MAAM,QAAQ,MAAM,GAAG,OAAO;CACpC,QAAQ,CAER;CAEF,OAAO,CAAC,GAAiB;AAC3B;AAEA,MAAa,QAA2B,EACtC,UACA,UACA,YACA,aAAa,MACb,kBAAkB,MAClB,WACA,UACA,gBACA,YAAY,eACZ,0BAA0B,6BAC1B,aAAa,MACb,GAAG,YACC;CACJ,MAAM,EACJ,YAAY,oBACZ,0BAA0B,qCACxB,eAAe;CAGnB,MAAM,cAAc,cACZ,aAAa,aAAmC,GACtD,CAAC,aAAa,CAChB;CACA,MAAM,iBAAiB,cACf,aAAa,2BAAiD,GACpE,CAAC,2BAA2B,CAC9B;CAIA,MAAM,oBACJ,gBAAgB,UAChB,YAAY,SAAS,KACrB,YAAY,SAAS,YAAY;CAEnC,MAAM,uBACJ,mBAAmB,UACnB,eAAe,SAAS,KACxB,eAAe,SAAS,YAAY;CAEtC,MAAM,gBAAgB,qBAAqB;CAK3C,MAAM,iBAA6B,uBAC9B,mCACD;CAGJ,MAAM,mBAAmB,cAAwC;EAC/D,MAAM,OAAO,uBAAuB,iBAAiB;EACrD,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,WAAW,KAAK,QAAQ,MAAM,MAAM,MAAM;EAC9C,IAAI,cAAc,IAAI,QAAkB,GACtC,WAAW,SAAS,QAAQ,MAAM,MAAM,UAAU;EAEpD,OAAO;CACT,GAAG;EAAC;EAAsB;EAAgB;EAAa;CAAQ,CAAC;CAIhE,MAAM,iBAA8C,cAAc;EAChE,IAAI,CAAC,oBAAoB,iBAAiB,SAAS,cAAc,GAC/D,OAAO;EAET,OAAQ,iBAAiB,iBAAiB,SAAS,MACjD;CACJ,GAAG,CAAC,kBAAkB,cAAc,CAAC;CAMrC,MAAM,CAAC,mBAAmB,wBAAwB,SAEhD,QAAQ;CAEV,gBAAgB;EACd,IAAI,CAAC,iBAAiB,mBAAmB,cAAc;GACrD,qBAAqB,QAAQ;GAC7B;EACF;EACA,IAAI,CAAC,UAAU;EAEf,IAAI,YAAY;EAChB,CAAC,YAAY;GACX,MAAM,EAAE,mBAAmB,MAAM,OAAO;GACxC,IAAI,CAAC,WACH,qBAAqB,eAAe,UAAU,cAAc,CAAC;EACjE,GAAG;EACH,aAAa;GACX,YAAY;EACd;CACF,GAAG;EAAC;EAAU;EAAe;CAAc,CAAC;CAG5C,MAAM,UAAU,cAAc;EAC5B,MAAM,OAAO,MAAM,QAAQ,QAAQ,IAAI,SAAS,KAAK,EAAE,IAAI,OAAO,QAAQ;EAC1E,OAAO,KAAK,SAAS,IAAI,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI;CACnD,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,CAAC,UAAU,eAAe,SAAiB,OAAO;CAExD,gBAAgB;EACd,IAAI,CAAC,iBAAiB,mBAAmB,cAAc;GACrD,YAAY,OAAO;GACnB;EACF;EACA,IAAI,YAAY;EAChB,CAAC,YAAY;GACX,MAAM,EAAE,kBAAkB,MAAM,OAAO;GACvC,IAAI,CAAC,WAAW,YAAY,cAAc,SAAS,cAAc,CAAC;EACpE,GAAG;EACH,aAAa;GACX,YAAY;EACd;CACF,GAAG;EAAC;EAAS;EAAe;CAAc,CAAC;CAE3C,MAAM,oBACJ,kBAAkB,iBAAiB;CAErC,OACE,oBAAC,uBAAD;EACkB;EAChB,YAAY;EACZ,0BACE;YAGF,qBAAC,WAAD;GACE,WAAW,GACT,iDACA,mBAAmB,yBACnB,SACF;GACA,cAAa;GACb,GAAI;aAPN,CASG,cACC,8CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAY,qBAAqB;IAAe,IAChE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,kBAAkB,oBAAC,wBAAD,CAAyB;MAC3C,iBACC,oBAAC,oBAAD,EAAoB,kBAAkB,iBAAmB;MAE1D,+BACC,oBAAC,kCAAD,CAAmC;KAElC;MACF;OACL,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KACE,WAAW,GACT,mDACA,qBAAqB,MACvB;eAEA,oBAAC,UAAD,EAAU,MAAM,SAAW;IACxB;GACF,EACL,MAEJ,oBAAC,gBAAD;IACE,WAAW;IACC;IACZ,WAAU;cAET,gBAOC,oBAAC,oBAAD;KACE,cAAc;KACd,cAAc;KACF;eAEX;IACiB,KAMpB,oBAAC,WAAD;KAAW,MAAM;KAAsB;eACpC;IACQ;GAEC,EACP;;CACU;AAE3B"}

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 {\n  type FC,\n  type HTMLAttributes,\n  lazy,\n  type ReactNode,\n  Suspense,\n} 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: ReactNode }> = ({ 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: React.ReactNode;\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":";;;;;AAYA,MAAa,eAA4C,EAAE,eACzD,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"}
+{"version":3,"file":"CodeBlockClient.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport {\n  type FC,\n  type HTMLAttributes,\n  lazy,\n  type ReactNode,\n  Suspense,\n} 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: ReactNode }> = ({ 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: React.ReactNode;\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":";;;;;AAYA,MAAa,eAA4C,EAAE,eACzD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,YACG,OAAO,aAAa,WACjB,SAAS,MAAM,IAAI,EAAE,KAAK,MAAM,UAC9B,oBAAC,QAAD;GACE,WAAU;aAGT;EACG,GAHC,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,EAAE,GAGlC,CACP,IACD,SACA;CACH;AACF;AAIP,MAAM,iBAAiB,WACrB,OAAO,wBAAoB,MAAM,SAAS,EACxC,SAAS,IAAI,eACf,EAAE,CACJ;AAUA,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,kDAAkD,SAAS;CACzE,GAAI;WAEJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,aAAD,EAAc,SAAsB;YACtD,oBAAC,gBAAD;GAAsB;GAAkB;GACrC;EACa;CACR;AACP"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockHighlight.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockHighlight.tsx"],"sourcesContent":["'use client';\n\n/**\n * Client-side Shiki highlighter that also handles TypeScript→ESM/CJS transformation.\n *\n * Everything runs inside a single useEffect so that:\n * - The transformer is only dynamically imported when a non-TypeScript format is selected.\n * - The previous highlighted HTML stays visible while the new one loads (no white-text flash).\n */\n\nimport { type ReactNode, useEffect, useRef, useState } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport type { CodeFormat } from './CodeContext';\n\ntype Props = {\n  /** Raw TypeScript source code (the canonical \"source of truth\"). */\n  children: ReactNode;\n  /** Language of the source (e.g. 'tsx', 'typescript'). */\n  originalLang: BundledLanguage;\n  /** Currently selected format: 'typescript' | 'esm' | 'commonjs'. */\n  targetFormat: Exclude<CodeFormat, 'json'>;\n  isDarkMode?: boolean;\n};\n\n/**\n * Map display language names to Shiki grammar identifiers.\n * Shiki's web bundle does not ship a separate 'jsx' grammar — tsx handles both.\n */\nconst toShikiLang = (lang: string): string => {\n  switch (lang) {\n    case 'jsx':\n      return 'tsx';\n    case 'mjs':\n    case 'cjs':\n      return 'javascript';\n    default:\n      return lang;\n  }\n};\n\nexport const CodeBlockHighlight = ({\n  children,\n  originalLang,\n  targetFormat,\n  isDarkMode,\n}: Props) => {\n  const [html, setHtml] = useState<string | null>(null);\n  const prevHtml = useRef<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    (async () => {\n      try {\n        let code = children;\n        let shikiLang = toShikiLang(originalLang);\n\n        // Only import the transformer when we actually need it.\n        if (targetFormat !== 'typescript') {\n          const { transformCode, deriveLanguage } = await import(\n            './codeTransformer'\n          );\n          if (cancelled) return;\n          code = transformCode(String(children), targetFormat);\n          shikiLang = toShikiLang(deriveLanguage(originalLang, targetFormat));\n        }\n\n        const { codeToHtml } = await import('shiki/bundle/web');\n        if (cancelled) return;\n\n        const out = await codeToHtml(String(code), {\n          lang: shikiLang,\n          theme: isDarkMode ? 'github-dark' : 'github-light',\n        });\n\n        if (!cancelled) {\n          prevHtml.current = out;\n          setHtml(out);\n        }\n      } catch {\n        // Shiki failed (unknown language, etc.) — fall through to plain-text.\n        if (!cancelled) setHtml('');\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [children, originalLang, targetFormat, isDarkMode]);\n\n  // Keep the previous highlighted output visible while the new one is loading.\n  // This prevents the white-text flash on format switches.\n  const display = html ?? prevHtml.current;\n\n  if (!display) {\n    return (\n      <pre className=\"min-w-0 max-w-full overflow-x-auto\">\n        <code>{children}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: display }}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,eAAe,SAAyB;CAC5C,QAAQ,MAAR;EACE,KAAK,OACH,OAAO;EACT,KAAK;EACL,KAAK,OACH,OAAO;EACT,SACE,OAAO;;;AAIb,MAAa,sBAAsB,EACjC,UACA,cACA,cACA,iBACW;CACX,MAAM,CAAC,MAAM,WAAW,SAAwB,KAAK;CACrD,MAAM,WAAW,OAAsB,KAAK;CAE5C,gBAAgB;EACd,IAAI,YAAY;EAEhB,CAAC,YAAY;GACX,IAAI;IACF,IAAI,OAAO;IACX,IAAI,YAAY,YAAY,aAAa;IAGzC,IAAI,iBAAiB,cAAc;KACjC,MAAM,EAAE,eAAe,mBAAmB,MAAM,OAC9C;KAEF,IAAI,WAAW;KACf,OAAO,cAAc,OAAO,SAAS,EAAE,aAAa;KACpD,YAAY,YAAY,eAAe,cAAc,aAAa,CAAC;;IAGrE,MAAM,EAAE,eAAe,MAAM,OAAO;IACpC,IAAI,WAAW;IAEf,MAAM,MAAM,MAAM,WAAW,OAAO,KAAK,EAAE;KACzC,MAAM;KACN,OAAO,aAAa,gBAAgB;KACrC,CAAC;IAEF,IAAI,CAAC,WAAW;KACd,SAAS,UAAU;KACnB,QAAQ,IAAI;;WAER;IAEN,IAAI,CAAC,WAAW,QAAQ,GAAG;;MAE3B;EAEJ,aAAa;GACX,YAAY;;IAEb;EAAC;EAAU;EAAc;EAAc;EAAW,CAAC;CAItD,MAAM,UAAU,QAAQ,SAAS;CAEjC,IAAI,CAAC,SACH,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,EAAO,UAAgB;EACnB;CAIV,OACE,oBAAC,OAAD;EACE,yBAAyB,EAAE,QAAQ,SAAS;EAC5C,OAAO,EAAE,iBAAiB,eAAe;EACzC"}
+{"version":3,"file":"CodeBlockHighlight.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockHighlight.tsx"],"sourcesContent":["'use client';\n\n/**\n * Client-side Shiki highlighter that also handles TypeScript→ESM/CJS transformation.\n *\n * Everything runs inside a single useEffect so that:\n * - The transformer is only dynamically imported when a non-TypeScript format is selected.\n * - The previous highlighted HTML stays visible while the new one loads (no white-text flash).\n */\n\nimport { type ReactNode, useEffect, useRef, useState } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport type { CodeFormat } from './CodeContext';\n\ntype Props = {\n  /** Raw TypeScript source code (the canonical \"source of truth\"). */\n  children: ReactNode;\n  /** Language of the source (e.g. 'tsx', 'typescript'). */\n  originalLang: BundledLanguage;\n  /** Currently selected format: 'typescript' | 'esm' | 'commonjs'. */\n  targetFormat: Exclude<CodeFormat, 'json'>;\n  isDarkMode?: boolean;\n};\n\n/**\n * Map display language names to Shiki grammar identifiers.\n * Shiki's web bundle does not ship a separate 'jsx' grammar — tsx handles both.\n */\nconst toShikiLang = (lang: string): string => {\n  switch (lang) {\n    case 'jsx':\n      return 'tsx';\n    case 'mjs':\n    case 'cjs':\n      return 'javascript';\n    default:\n      return lang;\n  }\n};\n\nexport const CodeBlockHighlight = ({\n  children,\n  originalLang,\n  targetFormat,\n  isDarkMode,\n}: Props) => {\n  const [html, setHtml] = useState<string | null>(null);\n  const prevHtml = useRef<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    (async () => {\n      try {\n        let code = children;\n        let shikiLang = toShikiLang(originalLang);\n\n        // Only import the transformer when we actually need it.\n        if (targetFormat !== 'typescript') {\n          const { transformCode, deriveLanguage } = await import(\n            './codeTransformer'\n          );\n          if (cancelled) return;\n          code = transformCode(String(children), targetFormat);\n          shikiLang = toShikiLang(deriveLanguage(originalLang, targetFormat));\n        }\n\n        const { codeToHtml } = await import('shiki/bundle/web');\n        if (cancelled) return;\n\n        const out = await codeToHtml(String(code), {\n          lang: shikiLang,\n          theme: isDarkMode ? 'github-dark' : 'github-light',\n        });\n\n        if (!cancelled) {\n          prevHtml.current = out;\n          setHtml(out);\n        }\n      } catch {\n        // Shiki failed (unknown language, etc.) — fall through to plain-text.\n        if (!cancelled) setHtml('');\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [children, originalLang, targetFormat, isDarkMode]);\n\n  // Keep the previous highlighted output visible while the new one is loading.\n  // This prevents the white-text flash on format switches.\n  const display = html ?? prevHtml.current;\n\n  if (!display) {\n    return (\n      <pre className=\"min-w-0 max-w-full overflow-x-auto\">\n        <code>{children}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: display }}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,eAAe,SAAyB;CAC5C,QAAQ,MAAR;EACE,KAAK,OACH,OAAO;EACT,KAAK;EACL,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,MAAa,sBAAsB,EACjC,UACA,cACA,cACA,iBACW;CACX,MAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;CACpD,MAAM,WAAW,OAAsB,IAAI;CAE3C,gBAAgB;EACd,IAAI,YAAY;EAEhB,CAAC,YAAY;GACX,IAAI;IACF,IAAI,OAAO;IACX,IAAI,YAAY,YAAY,YAAY;IAGxC,IAAI,iBAAiB,cAAc;KACjC,MAAM,EAAE,eAAe,mBAAmB,MAAM,OAC9C;KAEF,IAAI,WAAW;KACf,OAAO,cAAc,OAAO,QAAQ,GAAG,YAAY;KACnD,YAAY,YAAY,eAAe,cAAc,YAAY,CAAC;IACpE;IAEA,MAAM,EAAE,eAAe,MAAM,OAAO;IACpC,IAAI,WAAW;IAEf,MAAM,MAAM,MAAM,WAAW,OAAO,IAAI,GAAG;KACzC,MAAM;KACN,OAAO,aAAa,gBAAgB;IACtC,CAAC;IAED,IAAI,CAAC,WAAW;KACd,SAAS,UAAU;KACnB,QAAQ,GAAG;IACb;GACF,QAAQ;IAEN,IAAI,CAAC,WAAW,QAAQ,EAAE;GAC5B;EACF,GAAG;EAEH,aAAa;GACX,YAAY;EACd;CACF,GAAG;EAAC;EAAU;EAAc;EAAc;CAAU,CAAC;CAIrD,MAAM,UAAU,QAAQ,SAAS;CAEjC,IAAI,CAAC,SACH,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,EAAO,SAAe;CACnB;CAIT,OACE,oBAAC,OAAD;EACE,yBAAyB,EAAE,QAAQ,QAAQ;EAC3C,OAAO,EAAE,iBAAiB,cAAc;CACzC;AAEL"}

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":";;;;;;;AAiBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,YACA,UACA,GAAG,YACiB;CAgBpB,OACE,oBAAC,OAAD;EACE,yBAAyB,EAAE,QAAQ,MAJrB,WAAW,UAAU;GAZrC;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,yBAAyB;IACzB,8BAA8B;IAC9B,kCAAkC;IAClC,+BAA+B;IAC/B,0BAA0B;IAC1B,8BAA8B;IAC/B;GAGgD,CAAC,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"}
+{"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;CAgBpB,OACE,oBAAC,OAAD;EACE,yBAAyB,EAAE,QAAQ,MAJrB,WAAW,UAAU;GAZrC;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,wBAAwB;IACxB,6BAA6B;IAC7B,iCAAiC;IACjC,8BAA8B;IAC9B,yBAAyB;IACzB,6BAA6B;GAC/B;EAGgD,CAAC,EAIR;EACvC,GAAI;EACJ,OAAO,EAAE,iBAAiB,cAAc;CACzC;AAEL;AAEA,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,IAAI,EAAE,KAAK,MAAM,UAC9B,oBAAC,QAAD;EAAM,WAAU;YACb;CACG,GAFmC,KAEnC,CACP,IACD,SACA,GACH;AACF;AAWP,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC,UAAD;CAAU,UAAU,oBAAC,aAAD,EAAa,GAAI,MAAQ;WAC3C,oBAAC,gBAAD;EACE,WAAW,GAAG,eAAe,SAAS;EACtC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;EAC5D,GAAI;CACL;AACO"}

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, type ReactNode, 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 'angular-html':\n      languageModule = await import('shiki/langs/angular-html.mjs');\n      break;\n    case 'angular-ts':\n      languageModule = await import('shiki/langs/angular-ts.mjs');\n      break;\n    case 'astro':\n      languageModule = await import('shiki/langs/astro.mjs');\n      break;\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n    case 'cjs':\n    case 'mjs':\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    case 'jsx':\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 'svelte':\n      languageModule = await import('shiki/langs/svelte.mjs');\n      break;\n    case 'markdown':\n    case 'md':\n    case 'mdx':\n      languageModule = await import('shiki/langs/markdown.mjs');\n      break;\n    case 'css':\n      languageModule = await import('shiki/langs/css.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 'yml':\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    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: any,\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(String(code), {\n    lang,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: ReactNode;\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":"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"}
+{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, 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 'angular-html':\n      languageModule = await import('shiki/langs/angular-html.mjs');\n      break;\n    case 'angular-ts':\n      languageModule = await import('shiki/langs/angular-ts.mjs');\n      break;\n    case 'astro':\n      languageModule = await import('shiki/langs/astro.mjs');\n      break;\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n    case 'cjs':\n    case 'mjs':\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    case 'jsx':\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 'svelte':\n      languageModule = await import('shiki/langs/svelte.mjs');\n      break;\n    case 'markdown':\n    case 'md':\n    case 'mdx':\n      languageModule = await import('shiki/langs/markdown.mjs');\n      break;\n    case 'css':\n      languageModule = await import('shiki/langs/css.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 'yml':\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    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: any,\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(String(code), {\n    lang,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: ReactNode;\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":"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"}

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 type { CodeFormat } from './CodeContext';\nimport { useCodeContext } from './CodeContext';\n\n/** Parse a codeFormat prop that may be a single value or a JSON array string. */\nconst parseCodeFormats = (\n  raw: string | string[] | undefined\n): CodeFormat[] | undefined => {\n  if (typeof raw === 'undefined' || raw === null) return undefined;\n  if (Array.isArray(raw)) return raw as CodeFormat[];\n\n  // JSON array string: `[\"typescript\",\"esm\",\"commonjs\"]`\n  if (typeof raw === 'string' && raw.startsWith('[')) {\n    try {\n      const parsed = JSON.parse(raw);\n      if (Array.isArray(parsed)) return parsed as CodeFormat[];\n    } catch {\n      // fall through\n    }\n  }\n  return [raw as CodeFormat];\n};\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 formats = parseCodeFormats(props.codeFormat as string | undefined);\n  const isCodeFormatUndefined = formats === undefined;\n  const isCodeFormatSelected = formats ? formats.includes(codeFormat) : false;\n\n  const contentFormats = parseCodeFormats(\n    props.contentDeclarationFormat as string | undefined\n  );\n  const isContentDeclarationFormatUndefined = contentFormats === undefined;\n  const isContentDeclarationFormatSelected = contentFormats\n    ? contentFormats.includes(contentDeclarationFormat as CodeFormat)\n    : false;\n\n  if (\n    (isPackageManagerUndefined || isPackageManagerSelected) &&\n    (isCodeFormatUndefined || isCodeFormatSelected) &&\n    (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)\n  ) {\n    return children;\n  }\n\n  return <></>;\n};\n"],"mappings":";;;;;;;AAQA,MAAM,oBACJ,QAC6B;CAC7B,IAAI,OAAO,QAAQ,eAAe,QAAQ,MAAM,OAAO;CACvD,IAAI,MAAM,QAAQ,IAAI,EAAE,OAAO;CAG/B,IAAI,OAAO,QAAQ,YAAY,IAAI,WAAW,IAAI,EAChD,IAAI;EACF,MAAM,SAAS,KAAK,MAAM,IAAI;EAC9B,IAAI,MAAM,QAAQ,OAAO,EAAE,OAAO;SAC5B;CAIV,OAAO,CAAC,IAAkB;;AAG5B,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,UAAU,iBAAiB,MAAM,WAAiC;CACxE,MAAM,wBAAwB,YAAY;CAC1C,MAAM,uBAAuB,UAAU,QAAQ,SAAS,WAAW,GAAG;CAEtE,MAAM,iBAAiB,iBACrB,MAAM,yBACP;CACD,MAAM,sCAAsC,mBAAmB;CAC/D,MAAM,qCAAqC,iBACvC,eAAe,SAAS,yBAAuC,GAC/D;CAEJ,KACG,6BAA6B,8BAC7B,yBAAyB,0BACzB,uCAAuC,qCAExC,OAAO;CAGT,OAAO,gCAAK"}
+{"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 type { CodeFormat } from './CodeContext';\nimport { useCodeContext } from './CodeContext';\n\n/** Parse a codeFormat prop that may be a single value or a JSON array string. */\nconst parseCodeFormats = (\n  raw: string | string[] | undefined\n): CodeFormat[] | undefined => {\n  if (typeof raw === 'undefined' || raw === null) return undefined;\n  if (Array.isArray(raw)) return raw as CodeFormat[];\n\n  // JSON array string: `[\"typescript\",\"esm\",\"commonjs\"]`\n  if (typeof raw === 'string' && raw.startsWith('[')) {\n    try {\n      const parsed = JSON.parse(raw);\n      if (Array.isArray(parsed)) return parsed as CodeFormat[];\n    } catch {\n      // fall through\n    }\n  }\n  return [raw as CodeFormat];\n};\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 formats = parseCodeFormats(props.codeFormat as string | undefined);\n  const isCodeFormatUndefined = formats === undefined;\n  const isCodeFormatSelected = formats ? formats.includes(codeFormat) : false;\n\n  const contentFormats = parseCodeFormats(\n    props.contentDeclarationFormat as string | undefined\n  );\n  const isContentDeclarationFormatUndefined = contentFormats === undefined;\n  const isContentDeclarationFormatSelected = contentFormats\n    ? contentFormats.includes(contentDeclarationFormat as CodeFormat)\n    : false;\n\n  if (\n    (isPackageManagerUndefined || isPackageManagerSelected) &&\n    (isCodeFormatUndefined || isCodeFormatSelected) &&\n    (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)\n  ) {\n    return children;\n  }\n\n  return <></>;\n};\n"],"mappings":";;;;;;;AAQA,MAAM,oBACJ,QAC6B;CAC7B,IAAI,OAAO,QAAQ,eAAe,QAAQ,MAAM,OAAO;CACvD,IAAI,MAAM,QAAQ,GAAG,GAAG,OAAO;CAG/B,IAAI,OAAO,QAAQ,YAAY,IAAI,WAAW,GAAG,GAC/C,IAAI;EACF,MAAM,SAAS,KAAK,MAAM,GAAG;EAC7B,IAAI,MAAM,QAAQ,MAAM,GAAG,OAAO;CACpC,QAAQ,CAER;CAEF,OAAO,CAAC,GAAiB;AAC3B;AAEA,MAAa,yBAER,EAAE,UAAU,GAAG,YAAY;CAC9B,MAAM,EAAE,gBAAgB,YAAY,6BAClC,eAAe;CAEjB,MAAM,4BAA4B,OAAO,MAAM,mBAAmB;CAClE,MAAM,2BAA2B,mBAAmB,MAAM;CAE1D,MAAM,UAAU,iBAAiB,MAAM,UAAgC;CACvE,MAAM,wBAAwB,YAAY;CAC1C,MAAM,uBAAuB,UAAU,QAAQ,SAAS,UAAU,IAAI;CAEtE,MAAM,iBAAiB,iBACrB,MAAM,wBACR;CACA,MAAM,sCAAsC,mBAAmB;CAC/D,MAAM,qCAAqC,iBACvC,eAAe,SAAS,wBAAsC,IAC9D;CAEJ,KACG,6BAA6B,8BAC7B,yBAAyB,0BACzB,uCAAuC,qCAExC,OAAO;CAGT,OAAO,+BAAI;AACb"}

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":";;;;;;;;;;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;CAEH,OACE,oBAAC,aAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACD;EAEA;EACW"}
+{"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,CAAC;CAC1B,YAAY;CACZ,qBAAqB,CAAC;CACtB,0BAA0B;CAC1B,mCAAmC,CAAC;AACtC,CAAC;;;;AAKD,MAAa,uBAAuB,WAAW,WAAW;;;;AAK1D,MAAa,gBAAuC,EAAE,eAAe;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,kBAC1C,kBACA,KACF;CACA,MAAM,CAAC,YAAY,iBAAiB,kBAClC,cACA,YACF;CACA,MAAM,CAAC,0BAA0B,+BAC/B,kBACE,4BACA,YACF;CAEF,OACE,oBAAC,aAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACU;AAEjB"}

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 type { CodeFormat } from './CodeContext';\nimport { useCodeContext } from './CodeContext';\n\ntype CodeFormatSelectorProps = {\n  /** When provided, only the listed formats are shown as options. */\n  availableFormats?: CodeFormat[];\n};\n\nexport const CodeFormatSelector: FC<CodeFormatSelectorProps> = ({\n  availableFormats,\n}) => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\n\n  const show = (format: CodeFormat) =>\n    !availableFormats || availableFormats.includes(format);\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        {show('typescript') && (\n          <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        )}\n        {show('esm') && <Select.Item value=\"esm\">ESM</Select.Item>}\n        {show('commonjs') && (\n          <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n        )}\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAa,sBAAmD,EAC9D,uBACI;CACJ,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;CAE7C,MAAM,QAAQ,WACZ,CAAC,oBAAoB,iBAAiB,SAAS,OAAO;CAExD,OACE,qBAAC,QAAD;EACE,OAAO;EACP,gBAAgB,UAAU;GACxB,cAAc,MAA2B;GACzC,4BAA4B,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;GACG,KAAK,aAAa,IACjB,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAa;IAAwB;GAEzD,KAAK,MAAM,IAAI,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAM;IAAiB;GACzD,KAAK,WAAW,IACf,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAW;IAAsB;GAEvC,IACV"}
+{"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 type { CodeFormat } from './CodeContext';\nimport { useCodeContext } from './CodeContext';\n\ntype CodeFormatSelectorProps = {\n  /** When provided, only the listed formats are shown as options. */\n  availableFormats?: CodeFormat[];\n};\n\nexport const CodeFormatSelector: FC<CodeFormatSelectorProps> = ({\n  availableFormats,\n}) => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\n\n  const show = (format: CodeFormat) =>\n    !availableFormats || availableFormats.includes(format);\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        {show('typescript') && (\n          <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        )}\n        {show('esm') && <Select.Item value=\"esm\">ESM</Select.Item>}\n        {show('commonjs') && (\n          <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n        )}\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAa,sBAAmD,EAC9D,uBACI;CACJ,MAAM,EAAE,YAAY,eAAe,gCACjC,eAAe;CACjB,MAAM,UAAU,YAAY,gBAAgB;CAE5C,MAAM,QAAQ,WACZ,CAAC,oBAAoB,iBAAiB,SAAS,MAAM;CAEvD,OACE,qBAAC,QAAD;EACE,OAAO;EACP,gBAAgB,UAAU;GACxB,cAAc,KAA0B;GACxC,4BAA4B,KAA0B;EACxD;YALF,CAOE,oBAAC,OAAO,SAAR;GACE,WAAU;GACV,cAAY,QAAQ,WAAW,MAAM;aAErC,oBAAC,OAAO,OAAR,EAAc,aAAa,QAAQ,WAAW,YAAY,MAAQ;EACpD,IAChB,qBAAC,OAAO,SAAR;GACG,KAAK,YAAY,KAChB,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAa;GAAuB;GAExD,KAAK,KAAK,KAAK,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAM;GAAgB;GACxD,KAAK,UAAU,KACd,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAW;GAAqB;EAEvC,IACV;;AAEZ"}

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":";;;;;;;;AAOA,MAAa,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;CAE7C,OACE,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"}
+{"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,eAAe;CACjB,MAAM,UAAU,YAAY,gBAAgB;CAE5C,OACE,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,MAC3D;EACa,IAChB,qBAAC,OAAO,SAAR;GACE,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAa;GAAuB;GACvD,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAW;GAAqB;GACnD,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAM;GAAgB;GACzC,oBAAC,OAAO,MAAR;IAAa,OAAM;cAAO;GAAiB;EAC7B,IACV;;AAEZ"}

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

@@ -1 +1 @@
-{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\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} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} {...props} />\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":";;;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;CAElD,OACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;GAAS,GAExC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV;aAHF,CAKE,oBAAC,UAAD,YAAS,OAAe,GACxB,oBAAC,KAAD;IAAG,WAAU;cAAgB;IAAgB,EAC9B;KACT"}
+{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\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} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} {...props} />\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":";;;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,MAAM;CAEjD,OACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;EAAQ,IAEvC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV;aAHF,CAKE,oBAAC,UAAD,YAAS,MAAc,IACvB,oBAAC,KAAD;IAAG,WAAU;cAAgB;GAAe,EAC9B;IACT;;AAEb"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","names":[],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":";;;;;AAQA,MAAa,YAA+B,EAAE,WAAW,GAAG,YAC1D,qBAAC,WAAD;CACE,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;WAJN,CAME,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD,EAAK,WAAU,kCAAmC;IAClD,oBAAC,OAAD,EAAK,WAAU,qCAAsC;IACrD,oBAAC,OAAD,EAAK,WAAU,oCAAqC;IAChD;;EACF,GACN,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,YAAY,WAAa;IAC/B;GACF;EACF,EACI"}
+{"version":3,"file":"FileList.mjs","names":[],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":";;;;;AAQA,MAAa,YAA+B,EAAE,WAAW,GAAG,YAC1D,qBAAC,WAAD;CACE,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;WAJN,CAME,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD,EAAK,WAAU,iCAAkC;IACjD,oBAAC,OAAD,EAAK,WAAU,oCAAqC;IACpD,oBAAC,OAAD,EAAK,WAAU,mCAAoC;GAChD;;CACF,IACL,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,YAAY,UAAY;GAC/B;EACF;CACF,EACI"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileTree.mjs","names":[],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-700'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,IAAI;AAY3D,MAAM,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,MAAM,EACnC,KACD,CAAC;CACF,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,KAAK,CAAC;CAQrD,MAAM,UANoB,WACvB,KACE,SAAS,KAAK,QAAQ,QAAQ,GAAG,CACnC,CACA,QAAQ,aAAa,SAAS,WAAW,YAAY,CAEvB,CAAC,KAAK,SACrC,KAAK,QAAQ,aAAa,GAAG,CAAC,QAAQ,QAAQ,GAAG,CAClD;CAED,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,MAAM,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;CAExD,OACE,8CACE,qBAAC,UAAD;EACE,WAAW,GACT,iGACA,WACI,uCACA,gEACL;EAED,eAAe;GACb,IAAI,QACF,cAAc,UAAU;QAExB,eAAe,CAAC,YAAY;;YAZlC;GAgBE,oBAAC,QAAD;IAAM,WAAW,GAAG,kBAAkB,UAAU,OAAO;cACpD;IACI;GAEN,CAAC,UACA,oBAAC,cAAD;IACE,WAAW,GAAG,cAAc,eAAe,sBAAsB;IACjE,MAAM;IACN;GAEH;GACM;IApBF,KAoBE,EACR,WACC,oBAAC,mBAAD;EACE,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC,UAAD;GACE,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,KAAK;GAC7B;EACgB,EAErB;;AAIP,MAAa,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,EAAE,OACT;CAGJ,OACE,oBAAC,OAAD;EAAK,WAAU;YAHA,eAAe,WAInB,CAAC,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC,UAAD;GAEU;GACC;GACH;GACO;GACD;GACF;GACE;GACZ,EARK,KAQL,CACF;EACE"}
+{"version":3,"file":"FileTree.mjs","names":[],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-700'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,IAAI;CAEnD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK,GAClC,IACF,CAAC;CACD,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;CAQpD,MAAM,UANoB,WACvB,KACE,SAAS,KAAK,QAAQ,QAAQ,EAAE,CACnC,EACC,QAAQ,aAAa,SAAS,WAAW,WAAW,CAEvB,EAAE,KAAK,SACrC,KAAK,QAAQ,aAAa,EAAE,EAAE,QAAQ,QAAQ,EAAE,CAClD;CAEA,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,EAAE;CAEvD,OACE,8CACE,qBAAC,UAAD;EACE,WAAW,GACT,iGACA,WACI,uCACA,+DACN;EAEA,eAAe;GACb,IAAI,QACF,cAAc,SAAS;QAEvB,eAAe,CAAC,WAAW;EAE/B;YAdF;GAgBE,oBAAC,QAAD;IAAM,WAAW,GAAG,kBAAkB,UAAU,MAAM;cACnD;GACG;GAEL,CAAC,UACA,oBAAC,cAAD;IACE,WAAW,GAAG,cAAc,eAAe,qBAAqB;IAChE,MAAM;GACP;GAEF;EACK;IApBD,IAoBC,GACP,WACC,oBAAC,mBAAD;EACE,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC,UAAD;GACE,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,IAAI;EAC7B;CACgB,EAErB;AAEN;AAEA,MAAa,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,CAAC,QACR;CAGJ,OACE,oBAAC,OAAD;EAAK,WAAU;YAHA,eAAe,UAIpB,EAAE,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC,UAAD;GAEU;GACC;GACH;GACO;GACD;GACF;GACE;EACb,GARM,IAQN,CACF;CACE;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"IDE.mjs","names":[],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\n\n  const { content, path } = pages[activeTab] ?? {};\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <div className=\"max-h-full flex-1 overflow-y-auto\">\n                <FileTree\n                  filesPaths={filePaths}\n                  activeFile={path}\n                  onClickFile={handleClickFile}\n                />\n              </div>\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;CAE7E,gBAAgB;EACd,aAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM,cAAc,EAAE;CAChD,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;EAEzC,IAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MACpD,EAAE;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;GACnC,IAAI,KAAK,SAAS,OAChB,OAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;GAElC,OAAO;IACP;EAEF,SAAS,SAAS;EAMlB,aAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MAGd,CAAC;;CAG5B,OACE,qBAAC,WAAD;EACE,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;YAPN,CASE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD,EAAK,WAAU,kCAAmC;KAClD,oBAAC,OAAD,EAAK,WAAU,qCAAsC;KACrD,oBAAC,OAAD,EAAK,WAAU,oCAAqC;KAChD;OACN,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,KAAK,EAAE,QAAQ,UAAU;KAC7B,MAAM,WAAW,KAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;KAGzC,OACE,oBAAC,UAAD;MACE,WAAW,GACT,mGALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;MACM,EAJF,MAIE;MAEX;IACE,EACF;MACN,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,aAAD;MAAa,cAAc;gBACzB,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,UAAD;QACE,YAAY;QACZ,YAAY;QACZ,aAAa;QACb;OACE;MACM,GAEd,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,kBAAD;OAA8B;iBAC3B;OACgB;MACf,EACF;;IACF;GACF,EACI"}
+{"version":3,"file":"IDE.mjs","names":[],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\n\n  const { content, path } = pages[activeTab] ?? {};\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <div className=\"max-h-full flex-1 overflow-y-auto\">\n                <FileTree\n                  filesPaths={filePaths}\n                  activeFile={path}\n                  onClickFile={handleClickFile}\n                />\n              </div>\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,MAAM;CAEhD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,MAAM;CAC3D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,aAAa;CAE5E,gBAAgB;EACd,aAAa,oBAAoB,aAAa;CAChD,GAAG,CAAC,cAAc,gBAAgB,CAAC;CAEnC,MAAM,EAAE,SAAS,SAAS,MAAM,cAAc,CAAC;CAC/C,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,KAAK;CAE7D,MAAM,mBAAmB,UAAkB;EAEzC,IAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,KACrD,GAAG;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;GACnC,IAAI,KAAK,SAAS,OAChB,OAAO;IAAE,GAAG;IAAM,QAAQ;GAAK;GAEjC,OAAO;EACT,CAAC;EAED,SAAS,QAAQ;EAMjB,aAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,KAGf,CAAC;CAC3B;CAEA,OACE,qBAAC,WAAD;EACE,WAAW,GACT,mEACA,SACF;EACA,aAAY;EACZ,cAAa;EACb,GAAI;YAPN,CASE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD,EAAK,WAAU,iCAAkC;KACjD,oBAAC,OAAD,EAAK,WAAU,oCAAqC;KACpD,oBAAC,OAAD,EAAK,WAAU,mCAAoC;IAChD;OACL,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,KAAK,EAAE,QAAQ,UAAU;KAC7B,MAAM,WAAW,KAAK,MAAM,GAAG;KAC/B,MAAM,QAAQ,SAAS,SAAS,SAAS;KAGzC,OACE,oBAAC,UAAD;MACE,WAAW,GACT,mGALW,UAAU,YAOjB,YACA,wEACN;MAEA,eAAe,aAAa,KAAK;gBAEhC;KACK,GAJD,KAIC;IAEZ,CAAC;GACE,EACF;MACL,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,aAAD;MAAa,cAAc;gBACzB,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,UAAD;QACE,YAAY;QACZ,YAAY;QACZ,aAAa;OACd;MACE;KACM,IAEb,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,kBAAD;OAA8B;iBAC3B;MACe;KACf,EACF;;GACF;EACF,EACI;;AAEf"}

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

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":["MarkdownRendererIntlayer"],"sources":["../../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { MarkdownRenderer as MarkdownRendererIntlayer } from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n  isDarkMode?: boolean;\n  children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n}) => (\n  <MarkdownRendererIntlayer\n    components={{\n      code: (props) => (\n        <Code\n          {...props}\n          isDarkMode={isDarkMode}\n          language={props.className?.replace('lang-', '') as BundledLanguage}\n          showHeader={false}\n          className=\"text-xs leading-5\"\n        >\n          {props.children as string}\n        </Code>\n      ),\n      pre: (props) => props.children,\n    }}\n  >\n    {children ?? ''}\n  </MarkdownRendererIntlayer>\n);\n"],"mappings":";;;;;AAUA,MAAa,oBAA+C,EAC1D,UACA,iBAEA,oBAACA,oBAAD;CACE,YAAY;EACV,OAAO,UACL,oBAAC,MAAD;GACE,GAAI;GACQ;GACZ,UAAU,MAAM,WAAW,QAAQ,SAAS,GAAG;GAC/C,YAAY;GACZ,WAAU;aAET,MAAM;GACF;EAET,MAAM,UAAU,MAAM;EACvB;WAEA,YAAY;CACY"}
+{"version":3,"file":"MarkDownRender.mjs","names":["MarkdownRendererIntlayer"],"sources":["../../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { MarkdownRenderer as MarkdownRendererIntlayer } from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n  isDarkMode?: boolean;\n  children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n}) => (\n  <MarkdownRendererIntlayer\n    components={{\n      code: (props) => (\n        <Code\n          {...props}\n          isDarkMode={isDarkMode}\n          language={props.className?.replace('lang-', '') as BundledLanguage}\n          showHeader={false}\n          className=\"text-xs leading-5\"\n        >\n          {props.children as string}\n        </Code>\n      ),\n      pre: (props) => props.children,\n    }}\n  >\n    {children ?? ''}\n  </MarkdownRendererIntlayer>\n);\n"],"mappings":";;;;;AAUA,MAAa,oBAA+C,EAC1D,UACA,iBAEA,oBAACA,oBAAD;CACE,YAAY;EACV,OAAO,UACL,oBAAC,MAAD;GACE,GAAI;GACQ;GACZ,UAAU,MAAM,WAAW,QAAQ,SAAS,EAAE;GAC9C,YAAY;GACZ,WAAU;aAET,MAAM;EACH;EAER,MAAM,UAAU,MAAM;CACxB;WAEC,YAAY;AACW"}