@intlayer/design-system 7.5.12 → 7.5.14

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["HeightResizer: FC<PropsWithChildren<HeightResizerProps>>"],"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\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\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  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      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      <div\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAaA,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;;;;;;;CAQnD,MAAM,gBAAgB,aAElB,mBAGG;AACH,gBAAc,KAAK;AACnB,iBAAe,gBAAgB;IAEjC,EAAE,CACH;;;;;CAMD,MAAM,eAAe,kBAAkB;AACrC,gBAAc,MAAM;IACnB,EAAE,CAAC;;;;;;;CAQN,MAAM,SAAS,aACZ,mBAA4C;EAC3C,MAAM,YAAY,aAAa;AAC/B,MAAI,cAAc,WAAW;GAC3B,MAAM,EAAE,QAAQ,iBAAiB,KAAK,iBACpC,UAAU,uBAAuB;GAEnC,IAAI,UAAU;AACd,OAAI,0BAA0B,WAC5B,WAAU,eAAe;YAChB,0BAA0B,WACnC,WAAU,eAAe,QAAQ,GAAG;GAItC,MAAM,YAAY,mBADO,UAAU;GAInC,IAAI,kBAAkB,KAAK,IAAI,WAAW,UAAU;AACpD,OAAI,cAAc,OAChB,mBAAkB,KAAK,IAAI,iBAAiB,UAAU;AAGxD,aAAU,gBAAgB;;IAG9B;EAAC;EAAY;EAAW;EAAU,CACnC;;;;;AAMD,iBAAgB;AACd,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;AAEjD,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,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,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;EACV,GAAI;YAEJ,oBAAC;GACC,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}
+{"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\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\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  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      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      <div\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,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;;;;;;;CAQnD,MAAM,gBAAgB,aAElB,mBAGG;AACH,gBAAc,KAAK;AACnB,iBAAe,gBAAgB;IAEjC,EAAE,CACH;;;;;CAMD,MAAM,eAAe,kBAAkB;AACrC,gBAAc,MAAM;IACnB,EAAE,CAAC;;;;;;;CAQN,MAAM,SAAS,aACZ,mBAA4C;EAC3C,MAAM,YAAY,aAAa;AAC/B,MAAI,cAAc,WAAW;GAC3B,MAAM,EAAE,QAAQ,iBAAiB,KAAK,iBACpC,UAAU,uBAAuB;GAEnC,IAAI,UAAU;AACd,OAAI,0BAA0B,WAC5B,WAAU,eAAe;YAChB,0BAA0B,WACnC,WAAU,eAAe,QAAQ,GAAG;GAItC,MAAM,YAAY,mBADO,UAAU;GAInC,IAAI,kBAAkB,KAAK,IAAI,WAAW,UAAU;AACpD,OAAI,cAAc,OAChB,mBAAkB,KAAK,IAAI,iBAAiB,UAAU;AAGxD,aAAU,gBAAgB;;IAG9B;EAAC;EAAY;EAAW;EAAU,CACnC;;;;;AAMD,iBAAgB;AACd,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;AAEjD,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,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,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;EACV,GAAI;YAEJ,oBAAC;GACC,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useEffect, useMemo, useRef, useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/HideShow/index.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["HideShow: FC<HideShowProps>"],"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,MAAaA,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;AAC/B,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,sBAAsB,EAAG,QAAO,SAAS,OAAO,KAAK,OAAO;EAChE,MAAM,SAAS,KAAK,MAAM,GAAG,mBAAmB;EAChD,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,SAAS,mBAAmB;AAC/D,SAAO,aAAa,GAAG,SAAS,SAAS,OAAO,UAAU,GAAG;IAC5D;EAAC;EAAM;EAAoB;EAAS,CAAC;AAExC,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,SAAS;AACxB,WAAO,aAAa,aAAa,QAAQ;AACzC,iBAAa,UAAU;;;IAG1B,EAAE,CAAC;CAEN,MAAM,eAAe;AACnB,MAAI,WAAY;AAChB,gBAAc,KAAK;AACnB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;AAEzB,eAAa,UAAU,OAAO,iBAAiB;AAC7C,iBAAc,MAAM;KACnB,iBAAiB;;CAGtB,MAAM,aAAa;AACjB,gBAAc,MAAM;AAEpB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;;CAI3B,MAAM,gBAAgB,aAAa,SAAS;AAE5C,QACE,qBAAC;EACC,WAAW,GACT,uGACA,UACD;EACD,SAAS,aAAa,OAAO;EAC7B,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,MAAE,gBAAgB;AAClB,iBAAa,MAAM,GAAG,QAAQ;;;EAGlC,MAAK;EACL,UAAU;aAEV,oBAAC;GAAK,WAAU;aACb,aAAa,OAAO;IAChB,EACP,oBAAC,iBAAc,WAAU,yCAAyC;GAC7D"}
+{"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;AAC/B,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,sBAAsB,EAAG,QAAO,SAAS,OAAO,KAAK,OAAO;EAChE,MAAM,SAAS,KAAK,MAAM,GAAG,mBAAmB;EAChD,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,SAAS,mBAAmB;AAC/D,SAAO,aAAa,GAAG,SAAS,SAAS,OAAO,UAAU,GAAG;IAC5D;EAAC;EAAM;EAAoB;EAAS,CAAC;AAExC,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,SAAS;AACxB,WAAO,aAAa,aAAa,QAAQ;AACzC,iBAAa,UAAU;;;IAG1B,EAAE,CAAC;CAEN,MAAM,eAAe;AACnB,MAAI,WAAY;AAChB,gBAAc,KAAK;AACnB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;AAEzB,eAAa,UAAU,OAAO,iBAAiB;AAC7C,iBAAc,MAAM;KACnB,iBAAiB;;CAGtB,MAAM,aAAa;AACjB,gBAAc,MAAM;AAEpB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;;CAI3B,MAAM,gBAAgB,aAAa,SAAS;AAE5C,QACE,qBAAC;EACC,WAAW,GACT,uGACA,UACD;EACD,SAAS,aAAa,OAAO;EAC7B,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,MAAE,gBAAgB;AAClB,iBAAa,MAAM,GAAG,QAAQ;;;EAGlC,MAAK;EACL,UAAU;aAEV,oBAAC;GAAK,WAAU;aACb,aAAa,OAAO;IAChB,EACP,oBAAC,iBAAc,WAAU,yCAAyC;GAC7D"}

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

@@ -1 +1 @@
-{"version":3,"file":"Code.mjs","names":["Code: FC<CodeCompProps>"],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const code = children?.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative min-w-0 max-w-full text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-46 z-20\">\n              <div\n                className={cn(\n                  'absolute right-2 bottom-0 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse\n          minHeight={MIN_HEIGHT}\n          isRollable={isRollable}\n          className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n        >\n          <CodeBlock lang={language} isDarkMode={isDarkMode}>\n            {code}\n          </CodeBlock>\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,aAAa;AAEnB,MAAaA,QAA2B,EACtC,UACA,UACA,YACA,aAAa,MACb,kBAAkB,MAClB,WACA,UACA,gBACA,YACA,0BACA,aAAa,MACb,GAAG,YACC;CACJ,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG,SAAS,MAAM,GAAG,GAAG,GAAG;CAEhE,MAAM,oBACJ,kBAAkB,cAAc;AAElC,QACE,oBAAC;EACiB;EACJ;EACc;YAE1B,qBAAC;GACC,WAAW,GACT,iDACA,mBAAmB,yBACnB,UACD;GACD,cAAa;GACb,GAAI;cAEH,cACC,4CACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAK,WAAU;eAAY,YAAY;MAAgB,EACxD,qBAAC;KAAI,WAAU;;MACZ,kBAAkB,oBAAC,2BAAyB;MAC5C,cAAc,oBAAC,uBAAqB;MACpC,4BACC,oBAAC,qCAAmC;;MAElC;KACF,EACN,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,WAAW,GACT,mDACA,qBAAqB,OACtB;eAED,oBAAC,YAAe,OAAQ;MACpB;KACF,IACL,EAEL,oBAAC;IACC,WAAW;IACC;IACZ,WAAU;cAEV,oBAAC;KAAU,MAAM;KAAsB;eACpC;MACS;KACG;IACP;GACU"}
+{"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const code = children?.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative min-w-0 max-w-full text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-46 z-20\">\n              <div\n                className={cn(\n                  'absolute right-2 bottom-0 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse\n          minHeight={MIN_HEIGHT}\n          isRollable={isRollable}\n          className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n        >\n          <CodeBlock lang={language} isDarkMode={isDarkMode}>\n            {code}\n          </CodeBlock>\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,aAAa;AAEnB,MAAa,QAA2B,EACtC,UACA,UACA,YACA,aAAa,MACb,kBAAkB,MAClB,WACA,UACA,gBACA,YACA,0BACA,aAAa,MACb,GAAG,YACC;CACJ,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG,SAAS,MAAM,GAAG,GAAG,GAAG;CAEhE,MAAM,oBACJ,kBAAkB,cAAc;AAElC,QACE,oBAAC;EACiB;EACJ;EACc;YAE1B,qBAAC;GACC,WAAW,GACT,iDACA,mBAAmB,yBACnB,UACD;GACD,cAAa;GACb,GAAI;cAEH,cACC,4CACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAK,WAAU;eAAY,YAAY;MAAgB,EACxD,qBAAC;KAAI,WAAU;;MACZ,kBAAkB,oBAAC,2BAAyB;MAC5C,cAAc,oBAAC,uBAAqB;MACpC,4BACC,oBAAC,qCAAmC;;MAElC;KACF,EACN,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,WAAW,GACT,mDACA,qBAAqB,OACtB;eAED,oBAAC,YAAe,OAAQ;MACpB;KACF,IACL,EAEL,oBAAC;IACC,WAAW;IACC;IACZ,WAAU;cAEV,oBAAC;KAAU,MAAM;KAAsB;eACpC;MACS;KACG;IACP;GACU"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockClient.mjs","names":["CodeDefault: FC<{ children: string }>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\n\nexport const CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div className=\"min-w-0 max-w-full overflow-x-auto\">\n    <pre className=\"min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n      <code>\n        {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      </code>\n    </pre>\n  </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n  import('./CodeBlockShiki').then((mod) => ({\n    default: mod.CodeBlockShiki,\n  }))\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  children,\n  lang,\n  isDarkMode,\n  ...props\n}) => (\n  <div\n    className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n    {...props}\n  >\n    <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n      <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n        {children}\n      </CodeBlockShiki>\n    </Suspense>\n  </div>\n);\n"],"mappings":";;;;;AAIA,MAAaA,eAAyC,EAAE,eACtD,oBAAC;CAAI,WAAU;WACb,oBAAC;EAAI,WAAU;YACb,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;GACC,WAAU;aAGT;KAFI,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,GAGlC,CACP,GACG;GACH;EACF;AAIR,MAAM,iBAAiB,WACrB,OAAO,wBAAoB,MAAM,SAAS,EACxC,SAAS,IAAI,gBACd,EAAE,CACJ;AAUD,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,kDAAkD,UAAU;CAC1E,GAAI;WAEJ,oBAAC;EAAS,UAAU,oBAAC,eAAa,WAAuB;YACvD,oBAAC;GAAqB;GAAkB;GACrC;IACc;GACR;EACP"}
+{"version":3,"file":"CodeBlockClient.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\n\nexport const CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div className=\"min-w-0 max-w-full overflow-x-auto\">\n    <pre className=\"min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n      <code>\n        {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      </code>\n    </pre>\n  </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n  import('./CodeBlockShiki').then((mod) => ({\n    default: mod.CodeBlockShiki,\n  }))\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  children,\n  lang,\n  isDarkMode,\n  ...props\n}) => (\n  <div\n    className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n    {...props}\n  >\n    <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n      <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n        {children}\n      </CodeBlockShiki>\n    </Suspense>\n  </div>\n);\n"],"mappings":";;;;;AAIA,MAAa,eAAyC,EAAE,eACtD,oBAAC;CAAI,WAAU;WACb,oBAAC;EAAI,WAAU;YACb,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;GACC,WAAU;aAGT;KAFI,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,GAGlC,CACP,GACG;GACH;EACF;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;CACC,WAAW,GAAG,kDAAkD,UAAU;CAC1E,GAAI;WAEJ,oBAAC;EAAS,UAAU,oBAAC,eAAa,WAAuB;YACvD,oBAAC;GAAqB;GAAkB;GACrC;IACc;GACR;EACP"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockServer.mjs","names":["CodeDefault: FC<CodeBlockProps>","CodeBlock: FC<CodeBlockProps>"],"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        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"mappings":";;;;;;;AAiBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,YACA,UACA,GAAG,YACiB;AAgBpB,QACE,oBAAC;EACC,yBAAyB,EAAE,QAJnB,MAAM,WAAW,UAb0C;GACrE;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,yBAAyB;IACzB,8BAA8B;IAC9B,kCAAkC;IAClC,+BAA+B;IAC/B,0BAA0B;IAC1B,8BAA8B;IAC/B;GACF,CAEmD,EAIR;EACxC,GAAI;EACJ,OAAO,EAAE,iBAAiB,eAAe;GACzC;;AAIN,MAAMA,eAAmC,EACvC,UACA,YACA,YACA,UACA,GAAG,YAEH,oBAAC;CAAI,iBAAiB;CAAY,GAAI;WACpC,oBAAC,mBACC,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;EAAK,WAAU;YACb;IADsC,MAElC,CACP,GACG,GACH;EACF;AAWR,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC;CAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;WAC5C,oBAAC;EACC,WAAW,GAAG,eAAe,UAAU;EACvC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,GAAG;EAC7D,GAAI;GACJ;EACO"}
+{"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        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"mappings":";;;;;;;AAiBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,YACA,UACA,GAAG,YACiB;AAgBpB,QACE,oBAAC;EACC,yBAAyB,EAAE,QAJnB,MAAM,WAAW,UAb0C;GACrE;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,yBAAyB;IACzB,8BAA8B;IAC9B,kCAAkC;IAClC,+BAA+B;IAC/B,0BAA0B;IAC1B,8BAA8B;IAC/B;GACF,CAEmD,EAIR;EACxC,GAAI;EACJ,OAAO,EAAE,iBAAiB,eAAe;GACzC;;AAIN,MAAM,eAAmC,EACvC,UACA,YACA,YACA,UACA,GAAG,YAEH,oBAAC;CAAI,iBAAiB;CAAY,GAAI;WACpC,oBAAC,mBACC,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;EAAK,WAAU;YACb;IADsC,MAElC,CACP,GACG,GACH;EACF;AAWR,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC;CAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;WAC5C,oBAAC;EACC,WAAW,GAAG,eAAe,UAAU;EACvC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,GAAG;EAC7D,GAAI;GACJ;EACO"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockShiki.mjs","names":["languageModule: any","themeModule: any","themeName: BundledTheme","CodeBlockShiki: FC<CodeBlockShikiProps>"],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  CodeToHastOptions,\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)) {\n    return languageCache.get(lang);\n  }\n\n  let languageModule: any;\n\n  switch (lang) {\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'tsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    default:\n      // Fallback to typescript for unknown languages\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)) {\n    return themeCache.get(themeName);\n  }\n\n  let themeModule: any;\n\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    case 'github-light':\n      themeModule = await import('shiki/themes/github-light.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// Create a promise for highlighting\nconst highlightCode = async (\n  code: string,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Lazy load shiki, language, and theme in parallel\n  const [{ codeToHtml }, languageModule, themeModule] = await Promise.all([\n    import('shiki/bundle/web'),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: themeModule,\n  };\n\n  return codeToHtml(code, {\n    ...shikiOptions,\n    langs: [languageModule],\n  } as any);\n};\n\nexport type CodeBlockShikiProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    setHtml(null);\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch(() => {\n        if (!isCancelled) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div\n      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      style={{\n        backgroundColor: 'transparent',\n        minWidth: 0,\n        maxWidth: '100%',\n        overflow: 'auto',\n      }}\n    >\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAWA,MAAM,gCAAgB,IAAI,KAA2B;AACrD,MAAM,6BAAa,IAAI,KAAwB;AAG/C,MAAM,eAAe,OAAO,SAAwC;AAClE,KAAI,cAAc,IAAI,KAAK,CACzB,QAAO,cAAc,IAAI,KAAK;CAGhC,IAAIA;AAEJ,SAAQ,MAAR;EACE,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF;AAEE,oBAAiB,MAAM,OAAO;AAC9B;;CAGJ,MAAM,WAAW,eAAe;AAChC,eAAc,IAAI,MAAM,SAAS;AACjC,QAAO;;AAIT,MAAM,YAAY,OAAO,cAA0C;AACjE,KAAI,WAAW,IAAI,UAAU,CAC3B,QAAO,WAAW,IAAI,UAAU;CAGlC,IAAIC;AAEJ,SAAQ,WAAR;EACE,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EACF,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EACF;AACE,iBAAc,MAAM,OAAO;AAC3B;;CAGJ,MAAM,QAAQ,YAAY;AAC1B,YAAW,IAAI,WAAW,MAAM;AAChC,QAAO;;AAIT,MAAM,gBAAgB,OACpB,MACA,MACA,eACoB;CACpB,MAAMC,YAA0B,aAAa,gBAAgB;CAG7D,MAAM,CAAC,EAAE,cAAc,gBAAgB,eAAe,MAAM,QAAQ,IAAI;EACtE,OAAO;EACP,aAAa,KAAK;EAClB,UAAU,UAAU;EACrB,CAAC;AAOF,QAAO,WAAW,MAAM;EAJtB;EACA,OAAO;EAKP,OAAO,CAAC,eAAe;EACxB,CAAQ;;AASX,MAAaC,kBAA2C,EACtD,UACA,MACA,iBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAwB,KAAK;AAErD,iBAAgB;EACd,IAAI,cAAc;AAElB,UAAQ,KAAK;AAEb,gBAAc,UAAU,MAAM,WAAW,CACtC,MAAM,WAAW;AAChB,OAAI,CAAC,YAAa,SAAQ,OAAO;IACjC,CACD,YAAY;AACX,OAAI,CAAC,YAAa,SAAQ,GAAG;IAC7B;AAEJ,eAAa;AACX,iBAAc;;IAEf;EAAC;EAAU;EAAM;EAAW,CAAC;AAEhC,QACE,oBAAC;EACC,WAAU;EACV,OAAO;GACL,iBAAiB;GACjB,UAAU;GACV,UAAU;GACV,UAAU;GACX;YAEA,OAEC,oBAAC,SAAI,yBAAyB,EAAE,QAAQ,MAAM,GAAI,GAElD,oBAAC,eAAa,WAAuB;GAEnC"}
+{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  CodeToHastOptions,\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)) {\n    return languageCache.get(lang);\n  }\n\n  let languageModule: any;\n\n  switch (lang) {\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'tsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    default:\n      // Fallback to typescript for unknown languages\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)) {\n    return themeCache.get(themeName);\n  }\n\n  let themeModule: any;\n\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    case 'github-light':\n      themeModule = await import('shiki/themes/github-light.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// Create a promise for highlighting\nconst highlightCode = async (\n  code: string,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Lazy load shiki, language, and theme in parallel\n  const [{ codeToHtml }, languageModule, themeModule] = await Promise.all([\n    import('shiki/bundle/web'),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: themeModule,\n  };\n\n  return codeToHtml(code, {\n    ...shikiOptions,\n    langs: [languageModule],\n  } as any);\n};\n\nexport type CodeBlockShikiProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    setHtml(null);\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch(() => {\n        if (!isCancelled) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div\n      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      style={{\n        backgroundColor: 'transparent',\n        minWidth: 0,\n        maxWidth: '100%',\n        overflow: 'auto',\n      }}\n    >\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAWA,MAAM,gCAAgB,IAAI,KAA2B;AACrD,MAAM,6BAAa,IAAI,KAAwB;AAG/C,MAAM,eAAe,OAAO,SAAwC;AAClE,KAAI,cAAc,IAAI,KAAK,CACzB,QAAO,cAAc,IAAI,KAAK;CAGhC,IAAI;AAEJ,SAAQ,MAAR;EACE,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF;AAEE,oBAAiB,MAAM,OAAO;AAC9B;;CAGJ,MAAM,WAAW,eAAe;AAChC,eAAc,IAAI,MAAM,SAAS;AACjC,QAAO;;AAIT,MAAM,YAAY,OAAO,cAA0C;AACjE,KAAI,WAAW,IAAI,UAAU,CAC3B,QAAO,WAAW,IAAI,UAAU;CAGlC,IAAI;AAEJ,SAAQ,WAAR;EACE,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EACF,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EACF;AACE,iBAAc,MAAM,OAAO;AAC3B;;CAGJ,MAAM,QAAQ,YAAY;AAC1B,YAAW,IAAI,WAAW,MAAM;AAChC,QAAO;;AAIT,MAAM,gBAAgB,OACpB,MACA,MACA,eACoB;CACpB,MAAM,YAA0B,aAAa,gBAAgB;CAG7D,MAAM,CAAC,EAAE,cAAc,gBAAgB,eAAe,MAAM,QAAQ,IAAI;EACtE,OAAO;EACP,aAAa,KAAK;EAClB,UAAU,UAAU;EACrB,CAAC;AAOF,QAAO,WAAW,MAAM;EAJtB;EACA,OAAO;EAKP,OAAO,CAAC,eAAe;EACxB,CAAQ;;AASX,MAAa,kBAA2C,EACtD,UACA,MACA,iBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAwB,KAAK;AAErD,iBAAgB;EACd,IAAI,cAAc;AAElB,UAAQ,KAAK;AAEb,gBAAc,UAAU,MAAM,WAAW,CACtC,MAAM,WAAW;AAChB,OAAI,CAAC,YAAa,SAAQ,OAAO;IACjC,CACD,YAAY;AACX,OAAI,CAAC,YAAa,SAAQ,GAAG;IAC7B;AAEJ,eAAa;AACX,iBAAc;;IAEf;EAAC;EAAU;EAAM;EAAW,CAAC;AAEhC,QACE,oBAAC;EACC,WAAU;EACV,OAAO;GACL,iBAAiB;GACjB,UAAU;GACV,UAAU;GACV,UAAU;GACX;YAEA,OAEC,oBAAC,SAAI,yBAAyB,EAAE,QAAQ,MAAM,GAAI,GAElD,oBAAC,eAAa,WAAuB;GAEnC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeConditionalRenderer.mjs","names":["CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n>"],"sources":["../../../../src/components/IDE/CodeConditionalRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, PropsWithChildren } from 'react';\nimport type { CodeCompAttributes } from './Code';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n> = ({ children, ...props }) => {\n  const { packageManager, codeFormat, contentDeclarationFormat } =\n    useCodeContext();\n\n  const isPackageManagerUndefined = typeof props.packageManager === 'undefined';\n  const isPackageManagerSelected = packageManager === props.packageManager;\n\n  const isCodeFormatUndefined = typeof props.codeFormat === 'undefined';\n  const isCodeFormatSelected = codeFormat === props.codeFormat;\n\n  const isContentDeclarationFormatUndefined =\n    typeof props.contentDeclarationFormat === 'undefined';\n  const isContentDeclarationFormatSelected =\n    contentDeclarationFormat === props.contentDeclarationFormat;\n\n  if (\n    (isPackageManagerUndefined || isPackageManagerSelected) &&\n    (isCodeFormatUndefined || isCodeFormatSelected) &&\n    (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)\n  ) {\n    return children;\n  }\n\n  return <></>;\n};\n"],"mappings":";;;;;;AAMA,MAAaA,yBAER,EAAE,UAAU,GAAG,YAAY;CAC9B,MAAM,EAAE,gBAAgB,YAAY,6BAClC,gBAAgB;CAElB,MAAM,4BAA4B,OAAO,MAAM,mBAAmB;CAClE,MAAM,2BAA2B,mBAAmB,MAAM;CAE1D,MAAM,wBAAwB,OAAO,MAAM,eAAe;CAC1D,MAAM,uBAAuB,eAAe,MAAM;CAElD,MAAM,sCACJ,OAAO,MAAM,6BAA6B;CAC5C,MAAM,qCACJ,6BAA6B,MAAM;AAErC,MACG,6BAA6B,8BAC7B,yBAAyB,0BACzB,uCAAuC,oCAExC,QAAO;AAGT,QAAO,iCAAK"}
+{"version":3,"file":"CodeConditionalRenderer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeConditionalRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, PropsWithChildren } from 'react';\nimport type { CodeCompAttributes } from './Code';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n> = ({ children, ...props }) => {\n  const { packageManager, codeFormat, contentDeclarationFormat } =\n    useCodeContext();\n\n  const isPackageManagerUndefined = typeof props.packageManager === 'undefined';\n  const isPackageManagerSelected = packageManager === props.packageManager;\n\n  const isCodeFormatUndefined = typeof props.codeFormat === 'undefined';\n  const isCodeFormatSelected = codeFormat === props.codeFormat;\n\n  const isContentDeclarationFormatUndefined =\n    typeof props.contentDeclarationFormat === 'undefined';\n  const isContentDeclarationFormatSelected =\n    contentDeclarationFormat === props.contentDeclarationFormat;\n\n  if (\n    (isPackageManagerUndefined || isPackageManagerSelected) &&\n    (isCodeFormatUndefined || isCodeFormatSelected) &&\n    (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)\n  ) {\n    return children;\n  }\n\n  return <></>;\n};\n"],"mappings":";;;;;;AAMA,MAAa,yBAER,EAAE,UAAU,GAAG,YAAY;CAC9B,MAAM,EAAE,gBAAgB,YAAY,6BAClC,gBAAgB;CAElB,MAAM,4BAA4B,OAAO,MAAM,mBAAmB;CAClE,MAAM,2BAA2B,mBAAmB,MAAM;CAE1D,MAAM,wBAAwB,OAAO,MAAM,eAAe;CAC1D,MAAM,uBAAuB,eAAe,MAAM;CAElD,MAAM,sCACJ,OAAO,MAAM,6BAA6B;CAC5C,MAAM,qCACJ,6BAA6B,MAAM;AAErC,MACG,6BAA6B,8BAC7B,yBAAyB,0BACzB,uCAAuC,oCAExC,QAAO;AAGT,QAAO,iCAAK"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CodeFormatSelector.mjs","names":["CodeFormatSelector: FC"],"sources":["../../../../src/components/IDE/CodeFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeFormatSelector: FC = () => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\n\n  return (\n    <Select\n      value={codeFormat}\n      onValueChange={(value) => {\n        setCodeFormat(value as typeof codeFormat);\n        setContentDeclarationFormat(value as typeof codeFormat);\n      }}\n    >\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.codeFormat.label.value}\n      >\n        <Select.Value placeholder={content.codeFormat.placeholder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,2BAA+B;CAC1C,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;AAE7C,QACE,qBAAC;EACC,OAAO;EACP,gBAAgB,UAAU;AACxB,iBAAc,MAA2B;AACzC,+BAA4B,MAA2B;;aAGzD,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,WAAW,MAAM;aAErC,oBAAC,OAAO,SAAM,aAAa,QAAQ,WAAW,YAAY,QAAS;IACpD,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;MACrC;GACV"}
+{"version":3,"file":"CodeFormatSelector.mjs","names":[],"sources":["../../../../src/components/IDE/CodeFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeFormatSelector: FC = () => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\n\n  return (\n    <Select\n      value={codeFormat}\n      onValueChange={(value) => {\n        setCodeFormat(value as typeof codeFormat);\n        setContentDeclarationFormat(value as typeof codeFormat);\n      }}\n    >\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.codeFormat.label.value}\n      >\n        <Select.Value placeholder={content.codeFormat.placeholder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAa,2BAA+B;CAC1C,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;AAE7C,QACE,qBAAC;EACC,OAAO;EACP,gBAAgB,UAAU;AACxB,iBAAc,MAA2B;AACzC,+BAA4B,MAA2B;;aAGzD,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,WAAW,MAAM;aAErC,oBAAC,OAAO,SAAM,aAAa,QAAQ,WAAW,YAAY,QAAS;IACpD,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;MACrC;GACV"}

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

@@ -1 +1 @@
-{"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":["ContentDeclarationFormatSelector: FC"],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { 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,MAAaA,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;AAE7C,QACE,qBAAC;EACC,OAAO;EACP,eAAe;aAEf,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,yBAAyB,MAAM;aAEnD,oBAAC,OAAO,SACN,aAAa,QAAQ,yBAAyB,YAAY,QAC1D;IACa,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;GACpD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;MAC7B;GACV"}
+{"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":[],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const ContentDeclarationFormatSelector: FC = () => {\n  const { contentDeclarationFormat, setContentDeclarationFormat } =\n    useCodeContext();\n  const content = useIntlayer('code-selectors');\n\n  return (\n    <Select\n      value={contentDeclarationFormat}\n      onValueChange={setContentDeclarationFormat}\n    >\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.contentDeclarationFormat.label.value}\n      >\n        <Select.Value\n          placeholder={content.contentDeclarationFormat.placeholder.value}\n        />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"json\">JSON</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAa,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;AAE7C,QACE,qBAAC;EACC,OAAO;EACP,eAAe;aAEf,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,yBAAyB,MAAM;aAEnD,oBAAC,OAAO,SACN,aAAa,QAAQ,yBAAyB,YAAY,QAC1D;IACa,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;GACpD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;MAC7B;GACV"}

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

@@ -1 +1 @@
-{"version":3,"file":"CopyCode.mjs","names":["CopyCode: FC<CopyCodeProps>"],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAaA,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC;EAAQ,YAAW;aAClB,oBAAC,cAAW,SAAS,OAAQ,EAE7B,qBAAC,QAAQ;GACP,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;cAEtB,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAE,WAAU;cAAgB;KAAgB;IAC9B;GACT"}
+{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAa,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC;EAAQ,YAAW;aAClB,oBAAC,cAAW,SAAS,OAAQ,EAE7B,qBAAC,QAAQ;GACP,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;cAEtB,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAE,WAAU;cAAgB;KAAgB;IAC9B;GACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","names":["FileList: FC<FileListProps>"],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":";;;;;AAQA,MAAaA,YAA+B,EAAE,WAAW,GAAG,YAC1D,qBAAC;CACC,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;YAEJ,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;;IACb,oBAAC,SAAI,WAAU,mCAAmC;IAClD,oBAAC,SAAI,WAAU,sCAAsC;IACrD,oBAAC,SAAI,WAAU,qCAAqC;;IAChD;GACF,EACN,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,oBAAC,YAAS,YAAY,YAAa;KAC/B;IACF;GACF;EACI"}
+{"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;CACC,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;YAEJ,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;;IACb,oBAAC,SAAI,WAAU,mCAAmC;IAClD,oBAAC,SAAI,WAAU,sCAAsC;IACrD,oBAAC,SAAI,WAAU,qCAAqC;;IAChD;GACF,EACN,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,oBAAC,YAAS,YAAY,YAAa;KAC/B;IACF;GACF;EACI"}

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

@@ -3,8 +3,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { createFileTree } from "./createFileTree.mjs";
-import { useState } from "react";
 import { ChevronRight } from "lucide-react";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/IDE/FileTree.tsx

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IDE.mjs","names":["IDE: FC<IDEProps>","path"],"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 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAaA,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWC,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}
+{"version":3,"file":"IDE.mjs","names":["path"],"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 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWA,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MonacoCode.mjs","names":["MonacoCode: FC<CodeCompProps>","handleMountIde: OnMount"],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, type OnChange, type OnMount } from '@monaco-editor/react';\nimport { cn } from '@utils/cn';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  const theme = useMemo(\n    () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n    [isDarkMode]\n  );\n\n  const handleMountIde: OnMount = (editor, monaco) => {\n    // first time you set the height based on content Height\n\n    ideRef.current = editor as any;\n    const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n    monaco.editor.defineTheme('vs-dark-transparent', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n    monaco.editor.defineTheme('hc-light-theme', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n\n    monaco.editor.setTheme(theme);\n\n    // Disable TypeScript diagnostics\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true, // Disables type checking\n      noSyntaxValidation: true, // Disables syntax errors\n    });\n\n    // Disable JavaScript diagnostics\n    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true,\n      noSyntaxValidation: true,\n    });\n\n    // Disable unnecessary language features (e.g., suggestions, quick fixes)\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    setEditorSize({\n      height: contentHeight,\n      width: containerRef.current?.clientWidth ?? 0,\n    });\n  };\n\n  const isShowLineNumbers = showLineNumbers ?? children.split('\\n').length > 1;\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <div className=\"sticky top-5 z-10\">\n          <div\n            className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n          >\n            <CopyButton content={children} />\n          </div>\n        </div>\n      )}\n      <div\n        className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Editor\n          {...editorSize}\n          defaultLanguage=\"typescript\"\n          language={language}\n          loading={<Loader />}\n          defaultValue={String(children).replace(/\\n$/, '')}\n          onMount={handleMountIde}\n          onChange={onChange}\n          options={{\n            readOnly: isReadOnly,\n            cursorStyle: 'line',\n            minimap: { enabled: false },\n            scrollbar: {\n              vertical: 'hidden',\n              verticalScrollbarSize: 0,\n              alwaysConsumeMouseWheel: false,\n            },\n            folding: false, // Disable code folding\n            renderValidationDecorations: 'off', // Disable error/warning decorations\n            quickSuggestions: false, // Disable IntelliSense\n            parameterHints: { enabled: false }, // Disable parameter hints\n            suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n            mouseWheelScrollSensitivity: 0,\n            fastScrollSensitivity: 0,\n            scrollBeyondLastLine: false,\n            lineNumbers: isShowLineNumbers ? 'on' : 'off',\n          }}\n          theme={theme}\n          className=\"my-2 rounded-md\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAkBA,MAAaA,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;EAAG,CAAC;CAE3B,MAAM,QAAQ,cACL,aAAa,wBAAwB,kBAC5C,CAAC,WAAW,CACb;CAED,MAAMC,kBAA2B,QAAQ,WAAW;AAGlD,SAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,kBAAkB,IAAI,KAAK;AAEzD,SAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AACF,SAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AAEF,SAAO,OAAO,SAAS,MAAM;AAG7B,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,gBAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;GAC7C,CAAC;;CAGJ,MAAM,oBAAoB,mBAAmB,SAAS,MAAM,KAAK,CAAC,SAAS;AAE3E,QACE,qBAAC;EACC,WAAW,GACT,kCACA,mBAAmB,OACpB;aAEA,kBACC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAW,GAAG,kDAAkD;cAEhE,oBAAC,cAAW,SAAS,WAAY;KAC7B;IACF,EAER,oBAAC;GACC,WAAU;GACV,KAAK;aAEL,oBAAC;IACC,GAAI;IACJ,iBAAgB;IACN;IACV,SAAS,oBAAC,WAAS;IACnB,cAAc,OAAO,SAAS,CAAC,QAAQ,OAAO,GAAG;IACjD,SAAS;IACC;IACV,SAAS;KACP,UAAU;KACV,aAAa;KACb,SAAS,EAAE,SAAS,OAAO;KAC3B,WAAW;MACT,UAAU;MACV,uBAAuB;MACvB,yBAAyB;MAC1B;KACD,SAAS;KACT,6BAA6B;KAC7B,kBAAkB;KAClB,gBAAgB,EAAE,SAAS,OAAO;KAClC,4BAA4B;KAE5B,6BAA6B;KAC7B,uBAAuB;KACvB,sBAAsB;KACtB,aAAa,oBAAoB,OAAO;KACzC;IACM;IACP,WAAU;KACV;IACE;GACF"}
+{"version":3,"file":"MonacoCode.mjs","names":[],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, type OnChange, type OnMount } from '@monaco-editor/react';\nimport { cn } from '@utils/cn';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  const theme = useMemo(\n    () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n    [isDarkMode]\n  );\n\n  const handleMountIde: OnMount = (editor, monaco) => {\n    // first time you set the height based on content Height\n\n    ideRef.current = editor as any;\n    const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n    monaco.editor.defineTheme('vs-dark-transparent', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n    monaco.editor.defineTheme('hc-light-theme', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n\n    monaco.editor.setTheme(theme);\n\n    // Disable TypeScript diagnostics\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true, // Disables type checking\n      noSyntaxValidation: true, // Disables syntax errors\n    });\n\n    // Disable JavaScript diagnostics\n    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true,\n      noSyntaxValidation: true,\n    });\n\n    // Disable unnecessary language features (e.g., suggestions, quick fixes)\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    setEditorSize({\n      height: contentHeight,\n      width: containerRef.current?.clientWidth ?? 0,\n    });\n  };\n\n  const isShowLineNumbers = showLineNumbers ?? children.split('\\n').length > 1;\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <div className=\"sticky top-5 z-10\">\n          <div\n            className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n          >\n            <CopyButton content={children} />\n          </div>\n        </div>\n      )}\n      <div\n        className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Editor\n          {...editorSize}\n          defaultLanguage=\"typescript\"\n          language={language}\n          loading={<Loader />}\n          defaultValue={String(children).replace(/\\n$/, '')}\n          onMount={handleMountIde}\n          onChange={onChange}\n          options={{\n            readOnly: isReadOnly,\n            cursorStyle: 'line',\n            minimap: { enabled: false },\n            scrollbar: {\n              vertical: 'hidden',\n              verticalScrollbarSize: 0,\n              alwaysConsumeMouseWheel: false,\n            },\n            folding: false, // Disable code folding\n            renderValidationDecorations: 'off', // Disable error/warning decorations\n            quickSuggestions: false, // Disable IntelliSense\n            parameterHints: { enabled: false }, // Disable parameter hints\n            suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n            mouseWheelScrollSensitivity: 0,\n            fastScrollSensitivity: 0,\n            scrollBeyondLastLine: false,\n            lineNumbers: isShowLineNumbers ? 'on' : 'off',\n          }}\n          theme={theme}\n          className=\"my-2 rounded-md\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;EAAG,CAAC;CAE3B,MAAM,QAAQ,cACL,aAAa,wBAAwB,kBAC5C,CAAC,WAAW,CACb;CAED,MAAM,kBAA2B,QAAQ,WAAW;AAGlD,SAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,kBAAkB,IAAI,KAAK;AAEzD,SAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AACF,SAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AAEF,SAAO,OAAO,SAAS,MAAM;AAG7B,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,gBAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;GAC7C,CAAC;;CAGJ,MAAM,oBAAoB,mBAAmB,SAAS,MAAM,KAAK,CAAC,SAAS;AAE3E,QACE,qBAAC;EACC,WAAW,GACT,kCACA,mBAAmB,OACpB;aAEA,kBACC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAW,GAAG,kDAAkD;cAEhE,oBAAC,cAAW,SAAS,WAAY;KAC7B;IACF,EAER,oBAAC;GACC,WAAU;GACV,KAAK;aAEL,oBAAC;IACC,GAAI;IACJ,iBAAgB;IACN;IACV,SAAS,oBAAC,WAAS;IACnB,cAAc,OAAO,SAAS,CAAC,QAAQ,OAAO,GAAG;IACjD,SAAS;IACC;IACV,SAAS;KACP,UAAU;KACV,aAAa;KACb,SAAS,EAAE,SAAS,OAAO;KAC3B,WAAW;MACT,UAAU;MACV,uBAAuB;MACvB,yBAAyB;MAC1B;KACD,SAAS;KACT,6BAA6B;KAC7B,kBAAkB;KAClB,gBAAgB,EAAE,SAAS,OAAO;KAClC,4BAA4B;KAE5B,6BAA6B;KAC7B,uBAAuB;KACvB,sBAAsB;KACtB,aAAa,oBAAoB,OAAO;KACzC;IACM;IACP,WAAU;KACV;IACE;GACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"PackageManagerSelector.mjs","names":["PackageManagerSelector: FC"],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n  const { packageManager, setPackageManager } = useCodeContext();\n  const content = useIntlayer('code-selectors');\n  useIntlayer('code-selectors');\n\n  return (\n    <Select value={packageManager} onValueChange={setPackageManager}>\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.packageManager.label.value}\n      >\n        <Select.Value placeholder={content.packageManager.placeholder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"npm\">npm</Select.Item>\n        <Select.Item value=\"pnpm\">pnpm</Select.Item>\n        <Select.Item value=\"yarn\">yarn</Select.Item>\n        <Select.Item value=\"bun\">bun</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;CAC9D,MAAM,UAAU,YAAY,iBAAiB;AAC7C,aAAY,iBAAiB;AAE7B,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,eAAe,MAAM;aAEzC,oBAAC,OAAO,SAAM,aAAa,QAAQ,eAAe,YAAY,QAAS;IACxD,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}
+{"version":3,"file":"PackageManagerSelector.mjs","names":[],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n  const { packageManager, setPackageManager } = useCodeContext();\n  const content = useIntlayer('code-selectors');\n  useIntlayer('code-selectors');\n\n  return (\n    <Select value={packageManager} onValueChange={setPackageManager}>\n      <Select.Trigger\n        className=\"py-1!\"\n        aria-label={content.packageManager.label.value}\n      >\n        <Select.Value placeholder={content.packageManager.placeholder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"npm\">npm</Select.Item>\n        <Select.Item value=\"pnpm\">pnpm</Select.Item>\n        <Select.Item value=\"yarn\">yarn</Select.Item>\n        <Select.Item value=\"bun\">bun</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAa,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;CAC9D,MAAM,UAAU,YAAY,iBAAiB;AAC7C,aAAY,iBAAiB;AAE7B,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,eAAe,MAAM;aAEzC,oBAAC,OAAO,SAAM,aAAa,QAAQ,eAAe,YAAY,QAAS;IACxD,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}

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

@@ -21,7 +21,8 @@ const codeContent = {
 			tr: "Kodu kopyala",
 			pl: "Kopiuj kod",
 			id: "Salin kode",
-			vi: "Sao chép mã"
+			vi: "Sao chép mã",
+			uk: "Копіювати код"
 		}),
 		description: t({
 			en: "Copy the code to the clipboard",
@@ -40,7 +41,8 @@ const codeContent = {
 			tr: "Kodu panoya kopyala",
 			pl: "Skopiuj kod do schowka",
 			id: "Salin kode ke clipboard",
-			vi: "Sao chép đoạn mã vào khay nhớ tạm (clipboard)"
+			vi: "Sao chép đoạn mã vào khay nhớ tạm (clipboard)",
+			uk: "Скопіюйте код у буфер обміну"
 		})
 	},
 	title: "Code block actions",

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

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

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

@@ -21,7 +21,8 @@ const copyContentContent = {
 			tr: "Kodu kopyala",
 			pl: "Kopiuj kod",
 			id: "Salin kode",
-			vi: "Sao chép mã"
+			vi: "Sao chép mã",
+			uk: "Копіювати код"
 		}),
 		description: t({
 			en: "Copy the code to the clipboard",
@@ -40,7 +41,8 @@ const copyContentContent = {
 			tr: "Kodu panoya kopyala",
 			pl: "Skopiuj kod do schowka",
 			id: "Salin kode ke clipboard",
-			vi: "Sao chép mã vào clipboard"
+			vi: "Sao chép mã vào clipboard",
+			uk: "Скопіюйте код у буфер обміну"
 		})
 	},
 	title: "Copy code button",

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"createFileTree.mjs","names":["root: FilePath"],"sources":["../../../../src/components/IDE/createFileTree.ts"],"sourcesContent":["export type FilePath = {\n  path: string;\n  subPath?: FilePath[];\n  isFile: boolean;\n};\n\nexport const createFileTree = (paths: string[]): FilePath[] => {\n  const root: FilePath = { path: '', subPath: [], isFile: false };\n\n  paths.forEach((path) => {\n    const parts = path.split('/').filter((part) => part !== ''); // Remove empty strings due to leading slash\n    let current = root;\n\n    for (let i = 0; i < parts.length; i++) {\n      const part = parts[i];\n      const isFile = i === parts.length - 1; // Last part of the path is a file\n\n      if (!current.subPath) {\n        current.subPath = [];\n      }\n\n      let next = current.subPath.find((sub) => sub.path === part);\n\n      if (!next) {\n        next = { path: part, isFile, subPath: isFile ? undefined : [] };\n        current.subPath.push(next);\n      }\n\n      current = next;\n    }\n  });\n\n  return root.subPath ?? [];\n};\n"],"mappings":";AAMA,MAAa,kBAAkB,UAAgC;CAC7D,MAAMA,OAAiB;EAAE,MAAM;EAAI,SAAS,EAAE;EAAE,QAAQ;EAAO;AAE/D,OAAM,SAAS,SAAS;EACtB,MAAM,QAAQ,KAAK,MAAM,IAAI,CAAC,QAAQ,SAAS,SAAS,GAAG;EAC3D,IAAI,UAAU;AAEd,OAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;GACrC,MAAM,OAAO,MAAM;GACnB,MAAM,SAAS,MAAM,MAAM,SAAS;AAEpC,OAAI,CAAC,QAAQ,QACX,SAAQ,UAAU,EAAE;GAGtB,IAAI,OAAO,QAAQ,QAAQ,MAAM,QAAQ,IAAI,SAAS,KAAK;AAE3D,OAAI,CAAC,MAAM;AACT,WAAO;KAAE,MAAM;KAAM;KAAQ,SAAS,SAAS,SAAY,EAAE;KAAE;AAC/D,YAAQ,QAAQ,KAAK,KAAK;;AAG5B,aAAU;;GAEZ;AAEF,QAAO,KAAK,WAAW,EAAE"}
+{"version":3,"file":"createFileTree.mjs","names":[],"sources":["../../../../src/components/IDE/createFileTree.ts"],"sourcesContent":["export type FilePath = {\n  path: string;\n  subPath?: FilePath[];\n  isFile: boolean;\n};\n\nexport const createFileTree = (paths: string[]): FilePath[] => {\n  const root: FilePath = { path: '', subPath: [], isFile: false };\n\n  paths.forEach((path) => {\n    const parts = path.split('/').filter((part) => part !== ''); // Remove empty strings due to leading slash\n    let current = root;\n\n    for (let i = 0; i < parts.length; i++) {\n      const part = parts[i];\n      const isFile = i === parts.length - 1; // Last part of the path is a file\n\n      if (!current.subPath) {\n        current.subPath = [];\n      }\n\n      let next = current.subPath.find((sub) => sub.path === part);\n\n      if (!next) {\n        next = { path: part, isFile, subPath: isFile ? undefined : [] };\n        current.subPath.push(next);\n      }\n\n      current = next;\n    }\n  });\n\n  return root.subPath ?? [];\n};\n"],"mappings":";AAMA,MAAa,kBAAkB,UAAgC;CAC7D,MAAM,OAAiB;EAAE,MAAM;EAAI,SAAS,EAAE;EAAE,QAAQ;EAAO;AAE/D,OAAM,SAAS,SAAS;EACtB,MAAM,QAAQ,KAAK,MAAM,IAAI,CAAC,QAAQ,SAAS,SAAS,GAAG;EAC3D,IAAI,UAAU;AAEd,OAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;GACrC,MAAM,OAAO,MAAM;GACnB,MAAM,SAAS,MAAM,MAAM,SAAS;AAEpC,OAAI,CAAC,QAAQ,QACX,SAAQ,UAAU,EAAE;GAGtB,IAAI,OAAO,QAAQ,QAAQ,MAAM,QAAQ,IAAI,SAAS,KAAK;AAE3D,OAAI,CAAC,MAAM;AACT,WAAO;KAAE,MAAM;KAAM;KAAQ,SAAS,SAAS,SAAY,EAAE;KAAE;AAC/D,YAAQ,QAAQ,KAAK,KAAK;;AAG5B,aAAU;;GAEZ;AAEF,QAAO,KAAK,WAAW,EAAE"}

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

@@ -22,7 +22,8 @@ const selectorsContent = {
 				tr: "Paket yöneticisi",
 				pl: "Menedżer pakietów",
 				id: "Pengelola paket",
-				vi: "Trình quản lý gói"
+				vi: "Trình quản lý gói",
+				uk: "Менеджер пакетів"
 			}),
 			label: t({
 				en: "Select package manager",
@@ -41,7 +42,8 @@ const selectorsContent = {
 				tr: "Paket yöneticisi seç",
 				pl: "Wybierz menedżera pakietów",
 				id: "Pilih pengelola paket",
-				vi: "Chọn trình quản lý gói"
+				vi: "Chọn trình quản lý gói",
+				uk: "Виберіть менеджер пакетів"
 			})
 		},
 		codeFormat: {
@@ -62,7 +64,8 @@ const selectorsContent = {
 				tr: "Kod formatı",
 				pl: "Format kodu",
 				id: "Format kode",
-				vi: "Định dạng mã"
+				vi: "Định dạng mã",
+				uk: "Формат коду"
 			}),
 			label: t({
 				en: "Select code format",
@@ -81,7 +84,8 @@ const selectorsContent = {
 				tr: "Kod formatı seç",
 				pl: "Wybierz format kodu",
 				id: "Pilih format kode",
-				vi: "Chọn định dạng mã"
+				vi: "Chọn định dạng mã",
+				uk: "Виберіть формат коду"
 			})
 		},
 		contentDeclarationFormat: {
@@ -102,7 +106,8 @@ const selectorsContent = {
 				tr: "Sözlük formatı",
 				pl: "Format słownika",
 				id: "Format kamus",
-				vi: "Định dạng từ điển"
+				vi: "Định dạng từ điển",
+				uk: "Формат словника"
 			}),
 			label: t({
 				en: "Select dictionary format",
@@ -121,7 +126,8 @@ const selectorsContent = {
 				tr: "Sözlük formatı seç",
 				pl: "Wybierz format słownika",
 				id: "Pilih format kamus",
-				vi: "Chọn định dạng từ điển"
+				vi: "Chọn định dạng từ điển",
+				uk: "Виберіть формат словника"
 			})
 		}
 	},

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

@@ -1 +1 @@
-{"version":3,"file":"selectors.content.mjs","names":[],"sources":["../../../../src/components/IDE/selectors.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst selectorsContent = {\n  key: 'code-selectors',\n  content: {\n    packageManager: {\n      placeholder: t({\n        en: 'Package Manager',\n        es: 'Gestor de paquetes',\n        pt: 'Gerenciador de pacotes',\n        fr: 'Gestionnaire de paquets',\n        de: 'Paketmanager',\n        it: 'Gestore dei pacchetti',\n        ja: 'パッケージマネージャー',\n        ko: '패키지 관리자',\n        zh: '包管理器',\n        hi: 'पैकेज प्रबंधक',\n        'en-GB': 'Package Manager',\n        ru: 'Менеджер пакетов',\n        ar: 'مدير الحزم',\n        tr: 'Paket yöneticisi',\n        pl: 'Menedżer pakietów',\n        id: 'Pengelola paket',\n        vi: 'Trình quản lý gói',\n      }),\n      label: t({\n        en: 'Select package manager',\n        es: 'Seleccionar gestor de paquetes',\n        pt: 'Selecionar gerenciador de pacotes',\n        fr: 'Sélectionner le gestionnaire de paquets',\n        de: 'Paketmanager auswählen',\n        it: 'Seleziona il gestore dei pacchetti',\n        ja: 'パッケージマネージャーを選択',\n        ko: '패키지 관리자 선택',\n        zh: '选择包管理器',\n        hi: 'पैकेज प्रबंधक चुनें',\n        'en-GB': 'Select package manager',\n        ru: 'Выбрать менеджер пакетов',\n        ar: 'اختر مدير الحزم',\n        tr: 'Paket yöneticisi seç',\n        pl: 'Wybierz menedżera pakietów',\n        id: 'Pilih pengelola paket',\n        vi: 'Chọn trình quản lý gói',\n      }),\n    },\n    codeFormat: {\n      placeholder: t({\n        en: 'Code Format',\n        es: 'Formato de código',\n        pt: 'Formato de código',\n        fr: 'Format de code',\n        de: 'Code-Format',\n        it: 'Formato del codice',\n        ja: 'コード形式',\n        ko: '코드 형식',\n        zh: '代码格式',\n        hi: 'कोड प्रारूप',\n        'en-GB': 'Code Format',\n        ru: 'Формат кода',\n        ar: 'تنسيق الكود',\n        tr: 'Kod formatı',\n        pl: 'Format kodu',\n        id: 'Format kode',\n        vi: 'Định dạng mã',\n      }),\n      label: t({\n        en: 'Select code format',\n        es: 'Seleccionar formato de código',\n        pt: 'Selecionar formato de código',\n        fr: 'Sélectionner le format de code',\n        de: 'Code-Format auswählen',\n        it: 'Seleziona il formato del codice',\n        ja: 'コード形式を選択',\n        ko: '코드 형식 선택',\n        zh: '选择代码格式',\n        hi: 'कोड प्रारूप चुनें',\n        'en-GB': 'Select code format',\n        ru: 'Выбрать формат кода',\n        ar: 'اختر تنسيق الكود',\n        tr: 'Kod formatı seç',\n        pl: 'Wybierz format kodu',\n        id: 'Pilih format kode',\n        vi: 'Chọn định dạng mã',\n      }),\n    },\n    contentDeclarationFormat: {\n      placeholder: t({\n        en: 'Dictionary Format',\n        es: 'Formato de diccionario',\n        pt: 'Formato de dicionário',\n        fr: 'Format de dictionnaire',\n        de: 'Wörterbuchformat',\n        it: 'Formato del dizionario',\n        ja: '辞書形式',\n        ko: '사전 형식',\n        zh: '字典格式',\n        hi: 'शब्दकोश प्रारूप',\n        'en-GB': 'Dictionary Format',\n        ru: 'Формат словаря',\n        ar: 'تنسيق القاموس',\n        tr: 'Sözlük formatı',\n        pl: 'Format słownika',\n        id: 'Format kamus',\n        vi: 'Định dạng từ điển',\n      }),\n      label: t({\n        en: 'Select dictionary format',\n        es: 'Seleccionar formato de diccionario',\n        pt: 'Selecionar formato de dicionário',\n        fr: 'Sélectionner le format de dictionnaire',\n        de: 'Wörterbuchformat auswählen',\n        it: 'Seleziona il formato del dizionario',\n        ja: '辞書形式を選択',\n        ko: '사전 형식 선택',\n        zh: '选择字典格式',\n        hi: 'शब्दकोश प्रारूप चुनें',\n        'en-GB': 'Select dictionary format',\n        ru: 'Выбрать формат словаря',\n        ar: 'اختر تنسيق القاموس',\n        tr: 'Sözlük formatı seç',\n        pl: 'Wybierz format słownika',\n        id: 'Pilih format kamus',\n        vi: 'Chọn định dạng từ điển',\n      }),\n    },\n  },\n  title: 'Code selector accessibility labels',\n  description:\n    'Accessible labels for code block selector buttons used by screen readers.',\n  tags: ['accessibility', 'code block', 'design system'],\n} satisfies Dictionary;\n\nexport default selectorsContent;\n"],"mappings":";;;AAEA,MAAM,mBAAmB;CACvB,KAAK;CACL,SAAS;EACP,gBAAgB;GACd,aAAa,EAAE;IACb,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,OAAO,EAAE;IACP,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACD,YAAY;GACV,aAAa,EAAE;IACb,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,OAAO,EAAE;IACP,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACD,0BAA0B;GACxB,aAAa,EAAE;IACb,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,OAAO,EAAE;IACP,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACF;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAiB;EAAc;EAAgB;CACvD;AAED,gCAAe"}
+{"version":3,"file":"selectors.content.mjs","names":[],"sources":["../../../../src/components/IDE/selectors.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst selectorsContent = {\n  key: 'code-selectors',\n  content: {\n    packageManager: {\n      placeholder: t({\n        en: 'Package Manager',\n        es: 'Gestor de paquetes',\n        pt: 'Gerenciador de pacotes',\n        fr: 'Gestionnaire de paquets',\n        de: 'Paketmanager',\n        it: 'Gestore dei pacchetti',\n        ja: 'パッケージマネージャー',\n        ko: '패키지 관리자',\n        zh: '包管理器',\n        hi: 'पैकेज प्रबंधक',\n        'en-GB': 'Package Manager',\n        ru: 'Менеджер пакетов',\n        ar: 'مدير الحزم',\n        tr: 'Paket yöneticisi',\n        pl: 'Menedżer pakietów',\n        id: 'Pengelola paket',\n        vi: 'Trình quản lý gói',\n        uk: 'Менеджер пакетів',\n      }),\n      label: t({\n        en: 'Select package manager',\n        es: 'Seleccionar gestor de paquetes',\n        pt: 'Selecionar gerenciador de pacotes',\n        fr: 'Sélectionner le gestionnaire de paquets',\n        de: 'Paketmanager auswählen',\n        it: 'Seleziona il gestore dei pacchetti',\n        ja: 'パッケージマネージャーを選択',\n        ko: '패키지 관리자 선택',\n        zh: '选择包管理器',\n        hi: 'पैकेज प्रबंधक चुनें',\n        'en-GB': 'Select package manager',\n        ru: 'Выбрать менеджер пакетов',\n        ar: 'اختر مدير الحزم',\n        tr: 'Paket yöneticisi seç',\n        pl: 'Wybierz menedżera pakietów',\n        id: 'Pilih pengelola paket',\n        vi: 'Chọn trình quản lý gói',\n        uk: 'Виберіть менеджер пакетів',\n      }),\n    },\n    codeFormat: {\n      placeholder: t({\n        en: 'Code Format',\n        es: 'Formato de código',\n        pt: 'Formato de código',\n        fr: 'Format de code',\n        de: 'Code-Format',\n        it: 'Formato del codice',\n        ja: 'コード形式',\n        ko: '코드 형식',\n        zh: '代码格式',\n        hi: 'कोड प्रारूप',\n        'en-GB': 'Code Format',\n        ru: 'Формат кода',\n        ar: 'تنسيق الكود',\n        tr: 'Kod formatı',\n        pl: 'Format kodu',\n        id: 'Format kode',\n        vi: 'Định dạng mã',\n        uk: 'Формат коду',\n      }),\n      label: t({\n        en: 'Select code format',\n        es: 'Seleccionar formato de código',\n        pt: 'Selecionar formato de código',\n        fr: 'Sélectionner le format de code',\n        de: 'Code-Format auswählen',\n        it: 'Seleziona il formato del codice',\n        ja: 'コード形式を選択',\n        ko: '코드 형식 선택',\n        zh: '选择代码格式',\n        hi: 'कोड प्रारूप चुनें',\n        'en-GB': 'Select code format',\n        ru: 'Выбрать формат кода',\n        ar: 'اختر تنسيق الكود',\n        tr: 'Kod formatı seç',\n        pl: 'Wybierz format kodu',\n        id: 'Pilih format kode',\n        vi: 'Chọn định dạng mã',\n        uk: 'Виберіть формат коду',\n      }),\n    },\n    contentDeclarationFormat: {\n      placeholder: t({\n        en: 'Dictionary Format',\n        es: 'Formato de diccionario',\n        pt: 'Formato de dicionário',\n        fr: 'Format de dictionnaire',\n        de: 'Wörterbuchformat',\n        it: 'Formato del dizionario',\n        ja: '辞書形式',\n        ko: '사전 형식',\n        zh: '字典格式',\n        hi: 'शब्दकोश प्रारूप',\n        'en-GB': 'Dictionary Format',\n        ru: 'Формат словаря',\n        ar: 'تنسيق القاموس',\n        tr: 'Sözlük formatı',\n        pl: 'Format słownika',\n        id: 'Format kamus',\n        vi: 'Định dạng từ điển',\n        uk: 'Формат словника',\n      }),\n      label: t({\n        en: 'Select dictionary format',\n        es: 'Seleccionar formato de diccionario',\n        pt: 'Selecionar formato de dicionário',\n        fr: 'Sélectionner le format de dictionnaire',\n        de: 'Wörterbuchformat auswählen',\n        it: 'Seleziona il formato del dizionario',\n        ja: '辞書形式を選択',\n        ko: '사전 형식 선택',\n        zh: '选择字典格式',\n        hi: 'शब्दकोश प्रारूप चुनें',\n        'en-GB': 'Select dictionary format',\n        ru: 'Выбрать формат словаря',\n        ar: 'اختر تنسيق القاموس',\n        tr: 'Sözlük formatı seç',\n        pl: 'Wybierz format słownika',\n        id: 'Pilih format kamus',\n        vi: 'Chọn định dạng từ điển',\n        uk: 'Виберіть формат словника',\n      }),\n    },\n  },\n  title: 'Code selector accessibility labels',\n  description:\n    'Accessible labels for code block selector buttons used by screen readers.',\n  tags: ['accessibility', 'code block', 'design system'],\n} satisfies Dictionary;\n\nexport default selectorsContent;\n"],"mappings":";;;AAEA,MAAM,mBAAmB;CACvB,KAAK;CACL,SAAS;EACP,gBAAgB;GACd,aAAa,EAAE;IACb,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,OAAO,EAAE;IACP,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACD,YAAY;GACV,aAAa,EAAE;IACb,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,OAAO,EAAE;IACP,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACD,0BAA0B;GACxB,aAAa,EAAE;IACb,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,OAAO,EAAE;IACP,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACF;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAiB;EAAc;EAAgB;CACvD;AAED,gCAAe"}