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

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

@@ -0,0 +1,165 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/HeightResizer/index.tsx
+/**
+* HeightResizer Component
+*
+* A resizable container component that allows users to dynamically adjust the height
+* by dragging a visual handle at the top. Provides smooth resizing with optional
+* minimum and maximum height constraints.
+*
+* ## Key Features
+* - **Interactive Resizing**: Drag handle to resize container vertically
+* - **Touch Support**: Full support for touch devices and mobile interactions
+* - **Height Constraints**: Optional minimum and maximum height limits
+* - **Visual Feedback**: Handle with hover and active states for clear interaction
+* - **Accessibility**: ARIA slider role with value announcements for screen readers
+* - **Smooth Animation**: CSS transitions for polished user experience
+*
+* ## Use Cases
+* - Code editors with resizable panels
+* - Chat interfaces with adjustable message areas
+* - Dashboard widgets with user-customizable sizes
+* - Documentation viewers with resizable content panes
+* - Settings panels with expandable sections
+*
+* ## Interaction Model
+* The component uses a drag interaction model where users click and drag the visual
+* handle (rounded bar) at the top of the container. The resize calculation is based
+* on the difference between the current cursor position and the container's top edge.
+*
+* ## Accessibility Features
+* - **ARIA Slider**: Proper slider role for assistive technologies
+* - **Value Announcements**: Current, min, and max values announced to screen readers
+* - **Keyboard Navigation**: Focusable with standard slider keyboard support
+* - **Visual Indicators**: Clear visual handle for drag interaction
+*
+* @component
+* @example
+* ```tsx
+* // Basic usage
+* <HeightResizer initialHeight={200}>
+*   <div>Your resizable content here</div>
+* </HeightResizer>
+*
+* // With height constraints
+* <HeightResizer
+*   initialHeight={300}
+*   minHeight={100}
+*   maxHeight={600}
+* >
+*   <div>Content with size limits</div>
+* </HeightResizer>
+*
+* // In a code editor context
+* <HeightResizer
+*   initialHeight={400}
+*   minHeight={150}
+*   className="border rounded-lg"
+* >
+*   <CodeEditor />
+* </HeightResizer>
+* ```
+*
+* @param props - HeightResizer component props
+* @param props.initialHeight - Starting height in pixels
+* @param props.minHeight - Optional minimum height constraint
+* @param props.maxHeight - Optional maximum height constraint
+* @param props.children - Content to display in the resizable container
+* @param props.className - Additional CSS classes for styling
+* @returns Interactive resizable container component
+*/
+const HeightResizer = ({ initialHeight, maxHeight, minHeight = 0, children, className,...props }) => {
+	const containerRef = useRef(null);
+	const [height, setHeight] = useState(initialHeight);
+	const [isResizing, setIsResizing] = useState(false);
+	/**
+	* Handler to initiate the resizing process
+	* Prevents default browser behavior and sets the resizing state
+	*
+	* @param mouseDownEvent - Mouse or touch event from the drag handle
+	*/
+	const startResizing = useCallback((mouseDownEvent) => {
+		setIsResizing(true);
+		mouseDownEvent.preventDefault();
+	}, []);
+	/**
+	* Handler to stop the resizing process
+	* Resets the resizing state when user releases the drag handle
+	*/
+	const stopResizing = useCallback(() => {
+		setIsResizing(false);
+	}, []);
+	/**
+	* Core resize logic that calculates new height based on cursor position
+	* Handles both mouse and touch events with boundary checking
+	*
+	* @param mouseMoveEvent - Mouse or touch move event during drag
+	*/
+	const resize = useCallback((mouseMoveEvent) => {
+		const container = containerRef.current;
+		if (isResizing && container) {
+			const { height: containerHeight, top: containerTop } = container.getBoundingClientRect();
+			let clientY = 0;
+			if (mouseMoveEvent instanceof MouseEvent) clientY = mouseMoveEvent.clientY;
+			else if (mouseMoveEvent instanceof TouchEvent) clientY = mouseMoveEvent.touches[0].clientY;
+			const newHeight = containerHeight - (clientY - containerTop);
+			let correctedHeight = Math.max(newHeight, minHeight);
+			if (maxHeight !== void 0) correctedHeight = Math.min(correctedHeight, maxHeight);
+			setHeight(correctedHeight);
+		}
+	}, [
+		isResizing,
+		minHeight,
+		maxHeight
+	]);
+	/**
+	* Effect to manage global event listeners for resize interactions
+	* Handles both mouse and touch events with proper cleanup
+	*/
+	useEffect(() => {
+		window.addEventListener("mousemove", resize, { passive: true });
+		window.addEventListener("mouseup", stopResizing);
+		window.addEventListener("touchmove", resize, { passive: true });
+		window.addEventListener("touchend", stopResizing);
+		return () => {
+			window.removeEventListener("mousemove", resize);
+			window.removeEventListener("mouseup", stopResizing);
+			window.removeEventListener("touchmove", resize);
+			window.removeEventListener("touchend", stopResizing);
+		};
+	}, [resize, stopResizing]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950", "before:-translate-y-1/2 before:-translate-x-1/2 before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950", "active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600", className),
+		style: {
+			height: `${height}px`,
+			maxHeight: maxHeight ? `${maxHeight}px` : void 0,
+			minHeight: `${minHeight}px`
+		},
+		ref: containerRef,
+		onMouseDown: startResizing,
+		onTouchStart: startResizing,
+		"aria-valuemin": minHeight,
+		"aria-valuemax": maxHeight,
+		"aria-valuenow": height,
+		"aria-label": "Resizable component - drag the handle to adjust height",
+		role: "slider",
+		tabIndex: 0,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "absolute top-0 left-0 size-full cursor-default overflow-hidden",
+			onMouseDown: (e) => e.stopPropagation(),
+			onTouchStart: (e) => e.stopPropagation(),
+			children
+		})
+	});
+};
+
+//#endregion
+export { HeightResizer };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["HeightResizer: FC<PropsWithChildren<HeightResizerProps>>"],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\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';\nimport { cn } from '../../utils/cn';\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:-translate-y-1/2 before:-translate-x-1/2 before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 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,UACA,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

@@ -0,0 +1,71 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+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
+const HideShow = ({ text, className, visiblePrefixChars = 6, maskChar = "•", revealDurationMs = 1e4 }) => {
+	const [isRevealed, setIsRevealed] = useState(false);
+	const hideTimerRef = useRef(null);
+	const maskedText = useMemo(() => {
+		if (!text) return "";
+		if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);
+		const prefix = text.slice(0, visiblePrefixChars);
+		const remaining = Math.max(0, text.length - visiblePrefixChars);
+		return prefix + maskChar.repeat(remaining);
+	}, [
+		text,
+		visiblePrefixChars,
+		maskChar
+	]);
+	useEffect(() => {
+		return () => {
+			if (hideTimerRef.current) {
+				window.clearTimeout(hideTimerRef.current);
+				hideTimerRef.current = null;
+			}
+		};
+	}, []);
+	const reveal = () => {
+		if (isRevealed) return;
+		setIsRevealed(true);
+		if (hideTimerRef.current) {
+			window.clearTimeout(hideTimerRef.current);
+			hideTimerRef.current = null;
+		}
+		hideTimerRef.current = window.setTimeout(() => {
+			setIsRevealed(false);
+		}, revealDurationMs);
+	};
+	const hide = () => {
+		setIsRevealed(false);
+		if (hideTimerRef.current) {
+			window.clearTimeout(hideTimerRef.current);
+			hideTimerRef.current = null;
+		}
+	};
+	const IconComponent = isRevealed ? EyeOff : Eye;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10", className),
+		onClick: isRevealed ? hide : reveal,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				isRevealed ? hide() : reveal();
+			}
+		},
+		role: "button",
+		tabIndex: 0,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 break-all",
+			children: isRevealed ? text : maskedText
+		}), /* @__PURE__ */ jsx(IconComponent, { className: "ml-1 ml-auto size-4 min-w-4 shrink-0" })]
+	});
+};
+
+//#endregion
+export { HideShow };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["HideShow: FC<HideShowProps>"],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\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\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 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":";;;;;;;;;AA+BA,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,SAAS,SAAS,OAAO,UAAU;IACzC;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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Code.mjs","names":["Code: FC<CodeCompProps>"],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\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,KACb,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

@@ -0,0 +1,32 @@
+import { cn } from "../../utils/cn.mjs";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/IDE/CodeBlockClient.tsx
+const CodeDefault = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "min-w-0 max-w-full overflow-x-auto",
+	children: /* @__PURE__ */ jsx("pre", {
+		className: "min-w-0 max-w-full overflow-x-auto",
+		children: /* @__PURE__ */ jsx("code", { children: children.split("\n").map((line, index) => /* @__PURE__ */ jsx("span", {
+			className: "line block w-full",
+			children: line
+		}, `line-${index}-${line.slice(0, 10)}`)) })
+	})
+});
+const CodeBlockShiki = lazy(() => import("./CodeBlockShiki.mjs").then((mod) => ({ default: mod.CodeBlockShiki })));
+const CodeBlock = ({ className, onChange, isEditable, children, lang, isDarkMode,...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex w-full min-w-0 max-w-full overflow-x-auto", className),
+	...props,
+	children: /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(CodeDefault, { children }),
+		children: /* @__PURE__ */ jsx(CodeBlockShiki, {
+			lang,
+			isDarkMode,
+			children
+		})
+	})
+});
+
+//#endregion
+export { CodeBlock, CodeDefault };
+//# sourceMappingURL=CodeBlockClient.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlockClient.mjs","names":["CodeDefault: FC<{ children: string }>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\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\">\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,WACA,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

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

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

@@ -0,0 +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 { type FC, type HTMLAttributes, Suspense } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\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,SACA,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,SACA,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,WACA,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

@@ -0,0 +1,110 @@
+'use client';
+
+
+import { CodeDefault } from "./CodeBlockClient.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/IDE/CodeBlockShiki.tsx
+const languageCache = /* @__PURE__ */ new Map();
+const themeCache = /* @__PURE__ */ new Map();
+const loadLanguage = async (lang) => {
+	if (languageCache.has(lang)) return languageCache.get(lang);
+	let languageModule;
+	switch (lang) {
+		case "typescript":
+		case "ts":
+			languageModule = await import("shiki/langs/typescript.mjs");
+			break;
+		case "javascript":
+		case "js":
+			languageModule = await import("shiki/langs/javascript.mjs");
+			break;
+		case "bash":
+		case "sh":
+		case "shell":
+			languageModule = await import("shiki/langs/bash.mjs");
+			break;
+		case "json":
+			languageModule = await import("shiki/langs/json.mjs");
+			break;
+		case "tsx":
+			languageModule = await import("shiki/langs/tsx.mjs");
+			break;
+		case "vue":
+			languageModule = await import("shiki/langs/vue.mjs");
+			break;
+		case "html":
+			languageModule = await import("shiki/langs/html.mjs");
+			break;
+		default:
+			languageModule = await import("shiki/langs/typescript.mjs");
+			break;
+	}
+	const language = languageModule.default;
+	languageCache.set(lang, language);
+	return language;
+};
+const loadTheme = async (themeName) => {
+	if (themeCache.has(themeName)) return themeCache.get(themeName);
+	let themeModule;
+	switch (themeName) {
+		case "github-dark":
+			themeModule = await import("shiki/themes/github-dark.mjs");
+			break;
+		case "github-light":
+			themeModule = await import("shiki/themes/github-light.mjs");
+			break;
+		default:
+			themeModule = await import("shiki/themes/github-light.mjs");
+			break;
+	}
+	const theme = themeModule.default;
+	themeCache.set(themeName, theme);
+	return theme;
+};
+const highlightCode = async (code, lang, isDarkMode) => {
+	const themeName = isDarkMode ? "github-dark" : "github-light";
+	const [{ codeToHtml }, languageModule, themeModule] = await Promise.all([
+		import("shiki/bundle/web"),
+		loadLanguage(lang),
+		loadTheme(themeName)
+	]);
+	return codeToHtml(code, {
+		lang,
+		theme: themeModule,
+		langs: [languageModule]
+	});
+};
+const CodeBlockShiki = ({ children, lang, isDarkMode }) => {
+	const [html, setHtml] = useState(null);
+	useEffect(() => {
+		let isCancelled = false;
+		setHtml(null);
+		highlightCode(children, lang, isDarkMode).then((result) => {
+			if (!isCancelled) setHtml(result);
+		}).catch(() => {
+			if (!isCancelled) setHtml("");
+		});
+		return () => {
+			isCancelled = true;
+		};
+	}, [
+		children,
+		lang,
+		isDarkMode
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			backgroundColor: "transparent",
+			minWidth: 0,
+			maxWidth: "100%",
+			overflow: "auto"
+		},
+		children: html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx(CodeDefault, { children })
+	});
+};
+
+//#endregion
+export { CodeBlockShiki };
+//# sourceMappingURL=CodeBlockShiki.mjs.map

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

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

@@ -0,0 +1,22 @@
+'use client';
+
+
+import { useCodeContext } from "./CodeContext.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/IDE/CodeConditionalRenderer.tsx
+const CodeConditionalRender = ({ children,...props }) => {
+	const { packageManager, codeFormat, contentDeclarationFormat } = useCodeContext();
+	const isPackageManagerUndefined = typeof props.packageManager === "undefined";
+	const isPackageManagerSelected = packageManager === props.packageManager;
+	const isCodeFormatUndefined = typeof props.codeFormat === "undefined";
+	const isCodeFormatSelected = codeFormat === props.codeFormat;
+	const isContentDeclarationFormatUndefined = typeof props.contentDeclarationFormat === "undefined";
+	const isContentDeclarationFormatSelected = contentDeclarationFormat === props.contentDeclarationFormat;
+	if ((isPackageManagerUndefined || isPackageManagerSelected) && (isCodeFormatUndefined || isCodeFormatSelected) && (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)) return children;
+	return /* @__PURE__ */ jsx(Fragment, {});
+};
+
+//#endregion
+export { CodeConditionalRender };
+//# sourceMappingURL=CodeConditionalRenderer.mjs.map

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

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

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