@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/content/Layout/LayoutToolbar.js

@@ -0,0 +1,40 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _LayoutContent } from "./LayoutContent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutToolbar.tsx
+const ToolbarElement = tasty(_LayoutContent, {
+	qa: "Toolbar",
+	role: "toolbar",
+	styles: {
+		container: "none",
+		height: "min 5x",
+		flexShrink: 0,
+		flexGrow: 0,
+		Inner: {
+			display: "flex",
+			flow: "row nowrap",
+			placeContent: "center space-between",
+			placeItems: "center stretch",
+			gap: "1x",
+			padding: "0 ($content-padding, 1x)"
+		}
+	}
+});
+function LayoutToolbar(props, ref) {
+	const { children, scrollbar = "tiny", ...otherProps } = props;
+	return /* @__PURE__ */ jsx(ToolbarElement, {
+		...otherProps,
+		ref,
+		scrollbar,
+		children
+	});
+}
+const _LayoutToolbar = forwardRef(LayoutToolbar);
+_LayoutToolbar.displayName = "Layout.Toolbar";
+
+//#endregion
+export { _LayoutToolbar };
+//# sourceMappingURL=LayoutToolbar.js.map

package/dist/components/content/Layout/LayoutToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutToolbar.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutToolbar.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport { tasty } from '../../../tasty';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst ToolbarElement = tasty(LayoutContent, {\n  qa: 'Toolbar',\n  role: 'toolbar',\n  styles: {\n    container: 'none',\n    height: 'min 5x',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'flex',\n      flow: 'row nowrap',\n      placeContent: 'center space-between',\n      placeItems: 'center stretch',\n      gap: '1x',\n      padding: '0 ($content-padding, 1x)',\n    },\n  },\n});\n\nexport interface CubeLayoutToolbarProps extends CubeLayoutContentProps {}\n\nfunction LayoutToolbar(\n  props: CubeLayoutToolbarProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <ToolbarElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </ToolbarElement>\n  );\n}\n\nconst _LayoutToolbar = forwardRef(LayoutToolbar);\n\n_LayoutToolbar.displayName = 'Layout.Toolbar';\n\nexport { _LayoutToolbar as LayoutToolbar };\n"],"mappings":";;;;;;;AAMA,MAAM,iBAAiB,MAAMA,gBAAe;CAC1C,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,WAAW;EACX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,SAAS;GACT,MAAM;GACN,cAAc;GACd,YAAY;GACZ,KAAK;GACL,SAAS;GACV;EACF;CACF,CAAC;AAIF,SAAS,cACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,YAAY,QAAQ,GAAG,eAAe;AAExD,QACE,oBAAC;EAAe,GAAI;EAAiB;EAAgB;EAClD;GACc;;AAIrB,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}

package/dist/components/content/Layout/hooks/useTinyScrollbar.js

@@ -0,0 +1,143 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/components/content/Layout/hooks/useTinyScrollbar.ts
+const MIN_HANDLE_SIZE = 20;
+const SCROLL_VISIBILITY_DURATION = 1e3;
+const OVERFLOW_THRESHOLD = 2;
+function useTinyScrollbar(ref, enabled) {
+	const [scrollState, setScrollState] = useState({
+		hasOverflowY: false,
+		hasOverflowX: false,
+		scrollTop: 0,
+		scrollLeft: 0,
+		scrollHeight: 0,
+		scrollWidth: 0,
+		clientHeight: 0,
+		clientWidth: 0
+	});
+	const [isScrolling, setIsScrolling] = useState(false);
+	const scrollTimeoutRef = useRef(null);
+	const resizeFrameRef = useRef(null);
+	const updateScrollState = useCallback(() => {
+		const element = ref.current;
+		if (!element) return;
+		const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = element;
+		const hasOverflowY = scrollHeight > clientHeight + OVERFLOW_THRESHOLD;
+		const hasOverflowX = scrollWidth > clientWidth + OVERFLOW_THRESHOLD;
+		setScrollState((prev) => {
+			if (prev.hasOverflowY === hasOverflowY && prev.hasOverflowX === hasOverflowX && prev.scrollTop === scrollTop && prev.scrollLeft === scrollLeft && prev.scrollHeight === scrollHeight && prev.scrollWidth === scrollWidth && prev.clientHeight === clientHeight && prev.clientWidth === clientWidth) return prev;
+			return {
+				hasOverflowY,
+				hasOverflowX,
+				scrollTop,
+				scrollLeft,
+				scrollHeight,
+				scrollWidth,
+				clientHeight,
+				clientWidth
+			};
+		});
+	}, [ref]);
+	useEffect(() => {
+		if (!enabled) return;
+		const element = ref.current;
+		if (!element) return;
+		updateScrollState();
+		const showScrollbarBriefly = () => {
+			setIsScrolling(true);
+			if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+			scrollTimeoutRef.current = setTimeout(() => {
+				setIsScrolling(false);
+			}, SCROLL_VISIBILITY_DURATION);
+		};
+		const handleScroll = () => {
+			updateScrollState();
+			showScrollbarBriefly();
+		};
+		const handleMouseEnter = () => {
+			showScrollbarBriefly();
+		};
+		element.addEventListener("scroll", handleScroll, { passive: true });
+		element.addEventListener("mouseenter", handleMouseEnter);
+		const resizeObserver = new ResizeObserver(() => {
+			if (resizeFrameRef.current) cancelAnimationFrame(resizeFrameRef.current);
+			resizeFrameRef.current = requestAnimationFrame(() => {
+				updateScrollState();
+				showScrollbarBriefly();
+			});
+		});
+		resizeObserver.observe(element);
+		return () => {
+			element.removeEventListener("scroll", handleScroll);
+			element.removeEventListener("mouseenter", handleMouseEnter);
+			resizeObserver.disconnect();
+			if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+			if (resizeFrameRef.current) cancelAnimationFrame(resizeFrameRef.current);
+		};
+	}, [
+		enabled,
+		ref,
+		updateScrollState
+	]);
+	const calculateVHandle = useCallback(() => {
+		const { scrollHeight, clientHeight, scrollTop, hasOverflowY } = scrollState;
+		if (!hasOverflowY || !enabled) return {
+			top: 0,
+			height: 0
+		};
+		const trackHeight = clientHeight - 2;
+		const ratio = clientHeight / scrollHeight;
+		let handleHeight = Math.max(MIN_HANDLE_SIZE, Math.round(trackHeight * ratio));
+		const availableTrack = trackHeight - handleHeight;
+		const scrollRatio = scrollHeight - clientHeight > 0 ? scrollTop / (scrollHeight - clientHeight) : 0;
+		return {
+			top: 1 + Math.round(availableTrack * scrollRatio),
+			height: handleHeight
+		};
+	}, [scrollState, enabled]);
+	const calculateHHandle = useCallback(() => {
+		const { scrollWidth, clientWidth, scrollLeft, hasOverflowX } = scrollState;
+		if (!hasOverflowX || !enabled) return {
+			left: 0,
+			width: 0
+		};
+		const trackWidth = clientWidth - 2;
+		const ratio = clientWidth / scrollWidth;
+		let handleWidth = Math.max(MIN_HANDLE_SIZE, Math.round(trackWidth * ratio));
+		const availableTrack = trackWidth - handleWidth;
+		const scrollRatio = scrollWidth - clientWidth > 0 ? scrollLeft / (scrollWidth - clientWidth) : 0;
+		return {
+			left: 1 + Math.round(availableTrack * scrollRatio),
+			width: handleWidth
+		};
+	}, [scrollState, enabled]);
+	const vHandle = calculateVHandle();
+	const hHandle = calculateHHandle();
+	const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth, hasOverflowY, hasOverflowX } = scrollState;
+	const isAtStartY = !hasOverflowY || scrollTop <= 0;
+	const isAtEndY = !hasOverflowY || scrollTop >= scrollHeight - clientHeight - 1;
+	const isAtStartX = !hasOverflowX || scrollLeft <= 0;
+	const isAtEndX = !hasOverflowX || scrollLeft >= scrollWidth - clientWidth - 1;
+	return {
+		handleVStyle: {
+			"--scrollbar-v-top": `${vHandle.top}px`,
+			"--scrollbar-v-height": `${vHandle.height}px`
+		},
+		handleHStyle: {
+			"--scrollbar-h-left": `${hHandle.left}px`,
+			"--scrollbar-h-width": `${hHandle.width}px`
+		},
+		hasOverflowY: scrollState.hasOverflowY,
+		hasOverflowX: scrollState.hasOverflowX,
+		isScrolling,
+		isAtStartX,
+		isAtStartY,
+		isAtEndX,
+		isAtEndY
+	};
+}
+
+//#endregion
+export { useTinyScrollbar };
+//# sourceMappingURL=useTinyScrollbar.js.map

package/dist/components/content/Layout/hooks/useTinyScrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTinyScrollbar.js","names":[],"sources":["../../../../../src/components/content/Layout/hooks/useTinyScrollbar.ts"],"sourcesContent":["import {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface TinyScrollbarState {\n  hasOverflowY: boolean;\n  hasOverflowX: boolean;\n  scrollTop: number;\n  scrollLeft: number;\n  scrollHeight: number;\n  scrollWidth: number;\n  clientHeight: number;\n  clientWidth: number;\n}\n\nexport interface TinyScrollbarResult {\n  handleVStyle: CSSProperties;\n  handleHStyle: CSSProperties;\n  hasOverflowY: boolean;\n  hasOverflowX: boolean;\n  isScrolling: boolean;\n  /** Whether scroll is at the start edge (top for Y, left for X) */\n  isAtStartX: boolean;\n  isAtStartY: boolean;\n  /** Whether scroll is at the end edge (bottom for Y, right for X) */\n  isAtEndX: boolean;\n  isAtEndY: boolean;\n}\n\nconst MIN_HANDLE_SIZE = 20;\nconst SCROLL_VISIBILITY_DURATION = 1000;\n// Threshold to prevent overflow oscillation at boundary\nconst OVERFLOW_THRESHOLD = 2;\n\nexport function useTinyScrollbar(\n  ref: RefObject<HTMLElement | null>,\n  enabled: boolean,\n): TinyScrollbarResult {\n  const [scrollState, setScrollState] = useState<TinyScrollbarState>({\n    hasOverflowY: false,\n    hasOverflowX: false,\n    scrollTop: 0,\n    scrollLeft: 0,\n    scrollHeight: 0,\n    scrollWidth: 0,\n    clientHeight: 0,\n    clientWidth: 0,\n  });\n  const [isScrolling, setIsScrolling] = useState(false);\n  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const resizeFrameRef = useRef<number | null>(null);\n\n  const updateScrollState = useCallback(() => {\n    const element = ref.current;\n\n    if (!element) return;\n\n    const {\n      scrollTop,\n      scrollLeft,\n      scrollHeight,\n      scrollWidth,\n      clientHeight,\n      clientWidth,\n    } = element;\n\n    // Use threshold to prevent oscillation at overflow boundary\n    const hasOverflowY = scrollHeight > clientHeight + OVERFLOW_THRESHOLD;\n    const hasOverflowX = scrollWidth > clientWidth + OVERFLOW_THRESHOLD;\n\n    setScrollState((prev) => {\n      // Only update if values actually changed to prevent unnecessary re-renders\n      if (\n        prev.hasOverflowY === hasOverflowY &&\n        prev.hasOverflowX === hasOverflowX &&\n        prev.scrollTop === scrollTop &&\n        prev.scrollLeft === scrollLeft &&\n        prev.scrollHeight === scrollHeight &&\n        prev.scrollWidth === scrollWidth &&\n        prev.clientHeight === clientHeight &&\n        prev.clientWidth === clientWidth\n      ) {\n        return prev; // Return same reference to skip re-render\n      }\n\n      return {\n        hasOverflowY,\n        hasOverflowX,\n        scrollTop,\n        scrollLeft,\n        scrollHeight,\n        scrollWidth,\n        clientHeight,\n        clientWidth,\n      };\n    });\n  }, [ref]);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const element = ref.current;\n\n    if (!element) return;\n\n    // Initial update\n    updateScrollState();\n\n    // Show scrollbar briefly and hide after delay\n    const showScrollbarBriefly = () => {\n      setIsScrolling(true);\n\n      // Clear existing timeout\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n\n      // Hide scrollbar after delay\n      scrollTimeoutRef.current = setTimeout(() => {\n        setIsScrolling(false);\n      }, SCROLL_VISIBILITY_DURATION);\n    };\n\n    // Listen for scroll events\n    const handleScroll = () => {\n      updateScrollState();\n      showScrollbarBriefly();\n    };\n\n    // Show scrollbar briefly when mouse enters the container\n    const handleMouseEnter = () => {\n      showScrollbarBriefly();\n    };\n\n    element.addEventListener('scroll', handleScroll, { passive: true });\n    element.addEventListener('mouseenter', handleMouseEnter);\n\n    // ResizeObserver for content size changes\n    // Uses requestAnimationFrame to coalesce updates and prevent cascading events\n    const resizeObserver = new ResizeObserver(() => {\n      if (resizeFrameRef.current) {\n        cancelAnimationFrame(resizeFrameRef.current);\n      }\n\n      resizeFrameRef.current = requestAnimationFrame(() => {\n        updateScrollState();\n        showScrollbarBriefly();\n      });\n    });\n\n    resizeObserver.observe(element);\n\n    // Note: We intentionally don't observe children to prevent\n    // cascading resize events in nested layouts\n\n    return () => {\n      element.removeEventListener('scroll', handleScroll);\n      element.removeEventListener('mouseenter', handleMouseEnter);\n      resizeObserver.disconnect();\n\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n\n      if (resizeFrameRef.current) {\n        cancelAnimationFrame(resizeFrameRef.current);\n      }\n    };\n  }, [enabled, ref, updateScrollState]);\n\n  // Calculate vertical handle position and size\n  const calculateVHandle = useCallback(() => {\n    const { scrollHeight, clientHeight, scrollTop, hasOverflowY } = scrollState;\n\n    if (!hasOverflowY || !enabled) {\n      return { top: 0, height: 0 };\n    }\n\n    const trackHeight = clientHeight - 2; // 1px padding on each end\n    const ratio = clientHeight / scrollHeight;\n    let handleHeight = Math.max(\n      MIN_HANDLE_SIZE,\n      Math.round(trackHeight * ratio),\n    );\n    const availableTrack = trackHeight - handleHeight;\n    const scrollRatio =\n      scrollHeight - clientHeight > 0\n        ? scrollTop / (scrollHeight - clientHeight)\n        : 0;\n    const handleTop = 1 + Math.round(availableTrack * scrollRatio);\n\n    return { top: handleTop, height: handleHeight };\n  }, [scrollState, enabled]);\n\n  // Calculate horizontal handle position and size\n  const calculateHHandle = useCallback(() => {\n    const { scrollWidth, clientWidth, scrollLeft, hasOverflowX } = scrollState;\n\n    if (!hasOverflowX || !enabled) {\n      return { left: 0, width: 0 };\n    }\n\n    const trackWidth = clientWidth - 2; // 1px padding on each end\n    const ratio = clientWidth / scrollWidth;\n    let handleWidth = Math.max(MIN_HANDLE_SIZE, Math.round(trackWidth * ratio));\n    const availableTrack = trackWidth - handleWidth;\n    const scrollRatio =\n      scrollWidth - clientWidth > 0\n        ? scrollLeft / (scrollWidth - clientWidth)\n        : 0;\n    const handleLeft = 1 + Math.round(availableTrack * scrollRatio);\n\n    return { left: handleLeft, width: handleWidth };\n  }, [scrollState, enabled]);\n\n  const vHandle = calculateVHandle();\n  const hHandle = calculateHHandle();\n\n  // Calculate edge detection\n  const {\n    scrollTop,\n    scrollLeft,\n    scrollHeight,\n    scrollWidth,\n    clientHeight,\n    clientWidth,\n    hasOverflowY,\n    hasOverflowX,\n  } = scrollState;\n\n  // For Y axis: at start if scrollTop is 0, at end if scrolled to bottom\n  const isAtStartY = !hasOverflowY || scrollTop <= 0;\n  const isAtEndY =\n    !hasOverflowY || scrollTop >= scrollHeight - clientHeight - 1;\n\n  // For X axis: at start if scrollLeft is 0, at end if scrolled to right\n  const isAtStartX = !hasOverflowX || scrollLeft <= 0;\n  const isAtEndX = !hasOverflowX || scrollLeft >= scrollWidth - clientWidth - 1;\n\n  return {\n    handleVStyle: {\n      '--scrollbar-v-top': `${vHandle.top}px`,\n      '--scrollbar-v-height': `${vHandle.height}px`,\n    } as CSSProperties,\n    handleHStyle: {\n      '--scrollbar-h-left': `${hHandle.left}px`,\n      '--scrollbar-h-width': `${hHandle.width}px`,\n    } as CSSProperties,\n    hasOverflowY: scrollState.hasOverflowY,\n    hasOverflowX: scrollState.hasOverflowX,\n    isScrolling,\n    isAtStartX,\n    isAtStartY,\n    isAtEndX,\n    isAtEndY,\n  };\n}\n"],"mappings":"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"}

package/dist/components/content/Layout/index.d.ts

@@ -0,0 +1,37 @@
+
+import { CubeLayoutProps } from "./Layout.js";
+import { CubeLayoutContentProps, ScrollbarType, _LayoutContent } from "./LayoutContent.js";
+import { CubeLayoutBlockProps, _LayoutBlock } from "./LayoutBlock.js";
+import { CubeLayoutContainerProps, _LayoutContainer } from "./LayoutContainer.js";
+import { CubeLayoutCenterProps, _LayoutCenter } from "./LayoutCenter.js";
+import { CubeLayoutFlexProps, _LayoutFlex } from "./LayoutFlex.js";
+import { CubeLayoutFooterProps, _LayoutFooter } from "./LayoutFooter.js";
+import { CubeLayoutGridProps, _LayoutGrid } from "./LayoutGrid.js";
+import { CubeLayoutHeaderProps, _LayoutHeader } from "./LayoutHeader.js";
+import { CubeLayoutPaneProps, ResizeEdge, _LayoutPane } from "./LayoutPane.js";
+import { Side } from "./LayoutContext.js";
+import { CubeLayoutPanelProps, LayoutPanelMode, _LayoutPanel } from "./LayoutPanel.js";
+import { CubeLayoutPanelHeaderProps, _LayoutPanelHeader } from "./LayoutPanelHeader.js";
+import { CubeLayoutToolbarProps, _LayoutToolbar } from "./LayoutToolbar.js";
+import { CubeGridLayoutProps, GridLayout } from "./GridLayout.js";
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+
+//#region src/components/content/Layout/index.d.ts
+interface LayoutComponent extends ForwardRefExoticComponent<CubeLayoutProps & RefAttributes<HTMLDivElement>> {
+  Toolbar: typeof _LayoutToolbar;
+  Header: typeof _LayoutHeader;
+  Footer: typeof _LayoutFooter;
+  Content: typeof _LayoutContent;
+  Container: typeof _LayoutContainer;
+  Center: typeof _LayoutCenter;
+  Block: typeof _LayoutBlock;
+  Flex: typeof _LayoutFlex;
+  Grid: typeof _LayoutGrid;
+  Pane: typeof _LayoutPane;
+  Panel: typeof _LayoutPanel;
+  PanelHeader: typeof _LayoutPanelHeader;
+}
+declare const Layout: LayoutComponent;
+//#endregion
+export { Layout };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/content/Layout/index.js

@@ -0,0 +1,36 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
+import { _Layout } from "./Layout.js";
+import { _LayoutContent } from "./LayoutContent.js";
+import { _LayoutBlock } from "./LayoutBlock.js";
+import { _LayoutContainer } from "./LayoutContainer.js";
+import { _LayoutCenter } from "./LayoutCenter.js";
+import { _LayoutFlex } from "./LayoutFlex.js";
+import { _LayoutFooter } from "./LayoutFooter.js";
+import { _LayoutGrid } from "./LayoutGrid.js";
+import { _LayoutHeader } from "./LayoutHeader.js";
+import { _LayoutPane } from "./LayoutPane.js";
+import { _LayoutPanel } from "./LayoutPanel.js";
+import { _LayoutPanelHeader } from "./LayoutPanelHeader.js";
+import { _LayoutToolbar } from "./LayoutToolbar.js";
+import { GridLayout } from "./GridLayout.js";
+
+//#region src/components/content/Layout/index.tsx
+const Layout = Object.assign(_Layout, {
+	Toolbar: _LayoutToolbar,
+	Header: _LayoutHeader,
+	Footer: _LayoutFooter,
+	Content: _LayoutContent,
+	Container: _LayoutContainer,
+	Center: _LayoutCenter,
+	Block: _LayoutBlock,
+	Flex: _LayoutFlex,
+	Grid: _LayoutGrid,
+	Pane: _LayoutPane,
+	Panel: _LayoutPanel,
+	PanelHeader: _LayoutPanelHeader
+});
+
+//#endregion
+export { Layout };
+//# sourceMappingURL=index.js.map

package/dist/components/content/Layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LayoutBase","LayoutToolbar","LayoutHeader","LayoutFooter","LayoutContent","LayoutContainer","LayoutCenter","LayoutBlock","LayoutFlex","LayoutGrid","LayoutPane","LayoutPanel","LayoutPanelHeader"],"sources":["../../../../src/components/content/Layout/index.tsx"],"sourcesContent":["import { ForwardRefExoticComponent, RefAttributes } from 'react';\n\nimport { CubeLayoutProps, Layout as LayoutBase } from './Layout';\nimport { LayoutBlock } from './LayoutBlock';\nimport { LayoutCenter } from './LayoutCenter';\nimport { LayoutContainer } from './LayoutContainer';\nimport { LayoutContent } from './LayoutContent';\nimport { LayoutFlex } from './LayoutFlex';\nimport { LayoutFooter } from './LayoutFooter';\nimport { LayoutGrid } from './LayoutGrid';\nimport { LayoutHeader } from './LayoutHeader';\nimport { LayoutPane } from './LayoutPane';\nimport { LayoutPanel } from './LayoutPanel';\nimport { LayoutPanelHeader } from './LayoutPanelHeader';\nimport { LayoutToolbar } from './LayoutToolbar';\n\nexport { GridLayout } from './GridLayout';\nexport type { CubeGridLayoutProps } from './GridLayout';\nexport type { CubeLayoutProps } from './Layout';\nexport type { CubeLayoutBlockProps } from './LayoutBlock';\nexport type { CubeLayoutCenterProps } from './LayoutCenter';\nexport type { CubeLayoutContainerProps } from './LayoutContainer';\nexport type { CubeLayoutContentProps, ScrollbarType } from './LayoutContent';\nexport type { CubeLayoutFlexProps } from './LayoutFlex';\nexport type { CubeLayoutGridProps } from './LayoutGrid';\nexport type { CubeLayoutFooterProps } from './LayoutFooter';\nexport type { CubeLayoutHeaderProps } from './LayoutHeader';\nexport type { CubeLayoutPaneProps, ResizeEdge } from './LayoutPane';\nexport type { CubeLayoutPanelProps, LayoutPanelMode } from './LayoutPanel';\nexport type { CubeLayoutPanelHeaderProps } from './LayoutPanelHeader';\nexport type { CubeLayoutToolbarProps } from './LayoutToolbar';\nexport {\n  LayoutActionsContext,\n  LayoutStateContext,\n  LayoutRefsContext,\n  LayoutPanelContext,\n  LayoutContextReset,\n  useLayoutActionsContext,\n  useLayoutStateContext,\n  useLayoutRefsContext,\n  useLayoutPanelContext,\n  useLayoutContext,\n} from './LayoutContext';\nexport type {\n  LayoutActionsContextValue,\n  LayoutStateContextValue,\n  LayoutRefsContextValue,\n  LayoutPanelContextValue,\n  LayoutContextValue,\n  Side,\n} from './LayoutContext';\n\n// Create Layout compound component\ninterface LayoutComponent\n  extends ForwardRefExoticComponent<\n    CubeLayoutProps & RefAttributes<HTMLDivElement>\n  > {\n  Toolbar: typeof LayoutToolbar;\n  Header: typeof LayoutHeader;\n  Footer: typeof LayoutFooter;\n  Content: typeof LayoutContent;\n  Container: typeof LayoutContainer;\n  Center: typeof LayoutCenter;\n  Block: typeof LayoutBlock;\n  Flex: typeof LayoutFlex;\n  Grid: typeof LayoutGrid;\n  Pane: typeof LayoutPane;\n  Panel: typeof LayoutPanel;\n  PanelHeader: typeof LayoutPanelHeader;\n}\n\nconst Layout = Object.assign(LayoutBase, {\n  Toolbar: LayoutToolbar,\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Container: LayoutContainer,\n  Center: LayoutCenter,\n  Block: LayoutBlock,\n  Flex: LayoutFlex,\n  Grid: LayoutGrid,\n  Pane: LayoutPane,\n  Panel: LayoutPanel,\n  PanelHeader: LayoutPanelHeader,\n}) as LayoutComponent;\n\nexport { Layout };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuEA,MAAM,SAAS,OAAO,OAAOA,SAAY;CACvC,SAASC;CACT,QAAQC;CACR,QAAQC;CACR,SAASC;CACT,WAAWC;CACX,QAAQC;CACR,OAAOC;CACP,MAAMC;CACN,MAAMC;CACN,MAAMC;CACN,OAAOC;CACP,aAAaC;CACd,CAAC"}

package/dist/components/content/Layout/utils.js

@@ -0,0 +1,16 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/components/content/Layout/utils.ts
+/**
+* Clamps a size value within min/max constraints.
+* Handles both number and string constraint values (only numbers are applied).
+*/
+function clampSize(value, minSize, maxSize) {
+	let result = value;
+	if (typeof maxSize === "number") result = Math.min(maxSize, result);
+	if (typeof minSize === "number") result = Math.max(minSize, result);
+	return Math.max(result, 0);
+}
+
+//#endregion
+export { clampSize };
+//# sourceMappingURL=utils.js.map

package/dist/components/content/Layout/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/content/Layout/utils.ts"],"sourcesContent":["/**\n * Clamps a size value within min/max constraints.\n * Handles both number and string constraint values (only numbers are applied).\n */\nexport function clampSize(\n  value: number,\n  minSize?: number | string,\n  maxSize?: number | string,\n): number {\n  let result = value;\n\n  if (typeof maxSize === 'number') {\n    result = Math.min(maxSize, result);\n  }\n\n  if (typeof minSize === 'number') {\n    result = Math.max(minSize, result);\n  }\n\n  return Math.max(result, 0);\n}\n"],"mappings":";;;;;;AAIA,SAAgB,UACd,OACA,SACA,SACQ;CACR,IAAI,SAAS;AAEb,KAAI,OAAO,YAAY,SACrB,UAAS,KAAK,IAAI,SAAS,OAAO;AAGpC,KAAI,OAAO,YAAY,SACrB,UAAS,KAAK,IAAI,SAAS,OAAO;AAGpC,QAAO,KAAK,IAAI,QAAQ,EAAE"}

package/dist/components/content/Paragraph.d.ts

@@ -0,0 +1,12 @@
+
+import { ContainerStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+import { CubeTextProps } from "./Text.js";
+import * as react from "react";
+
+//#region src/components/content/Paragraph.d.ts
+interface CubeParagraphProps extends CubeTextProps, ContainerStyleProps {}
+declare const Paragraph: react.ForwardRefExoticComponent<CubeParagraphProps & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { CubeParagraphProps, Paragraph };
+//# sourceMappingURL=Paragraph.d.ts.map

package/dist/components/content/Paragraph.js

@@ -0,0 +1,28 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../tasty/utils/styles.js";
+import { CONTAINER_STYLES, TEXT_STYLES } from "../../tasty/styles/list.js";
+import { _Text } from "./Text.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Paragraph.tsx
+const DEFAULT_STYLES = {
+	preset: "p3",
+	color: "#dark-02",
+	display: "block"
+};
+const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
+const Paragraph = forwardRef(function Paragraph(props, ref) {
+	const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
+	return /* @__PURE__ */ jsx(_Text, {
+		as: "p",
+		qa: "Paragraph",
+		...props,
+		ref,
+		styles
+	});
+});
+
+//#endregion
+export { Paragraph };
+//# sourceMappingURL=Paragraph.js.map

package/dist/components/content/Paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.js","names":["Text"],"sources":["../../../src/components/content/Paragraph.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  TEXT_STYLES,\n} from '../../tasty';\n\nimport { CubeTextProps, Text } from './Text';\n\nconst DEFAULT_STYLES: Styles = {\n  preset: 'p3',\n  color: '#dark-02',\n  display: 'block',\n};\n\nconst STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nexport interface CubeParagraphProps\n  extends CubeTextProps,\n    ContainerStyleProps {}\n\nexport const Paragraph = forwardRef<HTMLElement, CubeParagraphProps>(\n  function Paragraph(props, ref) {\n    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);\n\n    return <Text as=\"p\" qa=\"Paragraph\" {...props} ref={ref} styles={styles} />;\n  },\n);\n"],"mappings":";;;;;;;;AAYA,MAAM,iBAAyB;CAC7B,QAAQ;CACR,OAAO;CACP,SAAS;CACV;AAED,MAAM,cAAc,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAMzD,MAAa,YAAY,WACvB,SAAS,UAAU,OAAO,KAAK;CAC7B,MAAM,SAAS,cAAc,OAAO,aAAa,eAAe;AAEhE,QAAO,oBAACA;EAAK,IAAG;EAAI,IAAG;EAAY,GAAI;EAAY;EAAa;GAAU;EAE7E"}

package/dist/components/content/Placeholder/Placeholder.d.ts

@@ -0,0 +1,16 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import * as react from "react";
+
+//#region src/components/content/Placeholder/Placeholder.d.ts
+interface CubePlaceholderProps extends BaseProps, ContainerStyleProps {
+  size?: Styles['fontSize'];
+  circle?: boolean;
+  isStatic?: boolean;
+}
+declare const Placeholder: react.ForwardRefExoticComponent<CubePlaceholderProps & react.RefAttributes<unknown>>;
+//#endregion
+export { CubePlaceholderProps, Placeholder };
+//# sourceMappingURL=Placeholder.d.ts.map

package/dist/components/content/Placeholder/Placeholder.js

@@ -0,0 +1,76 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { keyframes } from "../../../tasty/injector/index.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Placeholder/Placeholder.tsx
+const placeholderAnimation = keyframes({
+	"0%": { "background-position": "0 0" },
+	"100%": { "background-position": "$placeholder-animation-size 0" }
+});
+const StyledPlaceholder = tasty({
+	role: "alert",
+	"aria-live": "polite",
+	"aria-label": "Content is loading",
+	styles: {
+		display: "block",
+		fill: "#dark.10",
+		height: "2x",
+		opacity: ".35",
+		aspectRatio: {
+			"": "initial",
+			circle: "1 / 1"
+		},
+		radius: {
+			"": "1r",
+			circle: "round"
+		},
+		"$placeholder-animation-time": "1.4s",
+		"$placeholder-animation-size": "calc((180rem + 100vw) / 3)",
+		backgroundRepeat: "repeat",
+		backgroundSize: "$placeholder-animation-size",
+		backgroundColor: "#dark.15",
+		animation: {
+			"": "none",
+			animated: `${placeholderAnimation} $placeholder-animation-time linear infinite`
+		},
+		backgroundImage: {
+			"": "none",
+			animated: `linear-gradient(
+        135deg,
+        #dark.15 0%,
+        #dark.15 5%,
+        #dark.0 35%,
+        #dark-03.2 50%,
+        #dark-03.0 65%,
+        #dark.15 95%,
+        #dark.15 100%
+      )`
+		}
+	}
+});
+const Placeholder = forwardRef(function Placeholder(allProps, ref) {
+	let { size = "2x", isStatic, circle, ...props } = allProps;
+	let styles = extractStyles(props, CONTAINER_STYLES);
+	return /* @__PURE__ */ jsx(StyledPlaceholder, {
+		role: "region",
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		mods: {
+			animated: !isStatic,
+			circle
+		},
+		styles: {
+			height: size,
+			...styles
+		}
+	});
+});
+
+//#endregion
+export { Placeholder };
+//# sourceMappingURL=Placeholder.js.map

package/dist/components/content/Placeholder/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.js","names":[],"sources":["../../../../src/components/content/Placeholder/Placeholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  keyframes,\n  Styles,\n  tasty,\n} from '../../../tasty';\n\n// Create the placeholder animation using keyframes helper\nconst placeholderAnimation = keyframes({\n  '0%': {\n    'background-position': '0 0',\n  },\n  '100%': {\n    'background-position': '$placeholder-animation-size 0',\n  },\n});\n\nconst StyledPlaceholder = tasty({\n  role: 'alert',\n  'aria-live': 'polite',\n  'aria-label': 'Content is loading',\n  styles: {\n    display: 'block',\n    fill: '#dark.10',\n    height: '2x',\n    opacity: '.35',\n    aspectRatio: {\n      '': 'initial',\n      circle: '1 / 1',\n    },\n    radius: {\n      '': '1r',\n      circle: 'round',\n    },\n\n    // CSS custom properties for animation\n    '$placeholder-animation-time': '1.4s',\n    '$placeholder-animation-size': 'calc((180rem + 100vw) / 3)',\n\n    // Base background styling\n    backgroundRepeat: 'repeat',\n    backgroundSize: '$placeholder-animation-size',\n    backgroundColor: '#dark.15',\n\n    // Animated state styling\n    animation: {\n      '': 'none',\n      animated: `${placeholderAnimation} $placeholder-animation-time linear infinite`,\n    },\n    backgroundImage: {\n      '': 'none',\n      animated: `linear-gradient(\n        135deg,\n        #dark.15 0%,\n        #dark.15 5%,\n        #dark.0 35%,\n        #dark-03.2 50%,\n        #dark-03.0 65%,\n        #dark.15 95%,\n        #dark.15 100%\n      )`,\n    },\n  },\n});\n\nexport interface CubePlaceholderProps extends BaseProps, ContainerStyleProps {\n  size?: Styles['fontSize'];\n  circle?: boolean;\n  isStatic?: boolean;\n}\n\nexport const Placeholder = forwardRef(function Placeholder(\n  allProps: CubePlaceholderProps,\n  ref,\n) {\n  let { size = '2x', isStatic, circle, ...props } = allProps;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <StyledPlaceholder\n      role=\"region\"\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      mods={{ animated: !isStatic, circle }}\n      styles={{\n        height: size,\n        ...styles,\n      }}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;AAcA,MAAM,uBAAuB,UAAU;CACrC,MAAM,EACJ,uBAAuB,OACxB;CACD,QAAQ,EACN,uBAAuB,iCACxB;CACF,CAAC;AAEF,MAAM,oBAAoB,MAAM;CAC9B,MAAM;CACN,aAAa;CACb,cAAc;CACd,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;EACT,aAAa;GACX,IAAI;GACJ,QAAQ;GACT;EACD,QAAQ;GACN,IAAI;GACJ,QAAQ;GACT;EAGD,+BAA+B;EAC/B,+BAA+B;EAG/B,kBAAkB;EAClB,gBAAgB;EAChB,iBAAiB;EAGjB,WAAW;GACT,IAAI;GACJ,UAAU,GAAG,qBAAqB;GACnC;EACD,iBAAiB;GACf,IAAI;GACJ,UAAU;;;;;;;;;;GAUX;EACF;CACF,CAAC;AAQF,MAAa,cAAc,WAAW,SAAS,YAC7C,UACA,KACA;CACA,IAAI,EAAE,OAAO,MAAM,UAAU,QAAQ,GAAG,UAAU;CAElD,IAAI,SAAS,cAAc,OAAO,iBAAiB;AAEnD,QACE,oBAAC;EACC,MAAK;EACL,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACL,MAAM;GAAE,UAAU,CAAC;GAAU;GAAQ;EACrC,QAAQ;GACN,QAAQ;GACR,GAAG;GACJ;GACD;EAEJ"}

package/dist/components/content/PrismCode/PrismCode.d.ts

@@ -0,0 +1,27 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import * as react from "react";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-yaml.js";
+import "prismjs/components/prism-bash.js";
+import "prismjs/components/prism-sql.js";
+
+//#region src/components/content/PrismCode/PrismCode.d.ts
+interface CubePrismCodeProps extends ContainerStyleProps {
+  /** The CSS style map */
+  style?: BaseProps['style'];
+  styles?: Styles;
+  /** The code snippet */
+  code?: string;
+  /** The language of the code snippet */
+  language?: 'javascript' | 'css' | 'sql' | 'less' | 'html' | 'json' | 'yaml' | 'bash' | 'editorconfig' | 'php' | 'python' | 'typescript';
+}
+/**
+ * Code block with syntax highlighting
+ */
+declare const _PrismCode: react.ForwardRefExoticComponent<CubePrismCodeProps & react.RefAttributes<unknown>>;
+//#endregion
+export { CubePrismCodeProps, _PrismCode };
+//# sourceMappingURL=PrismCode.d.ts.map

package/dist/components/content/PrismCode/PrismCode.js

@@ -0,0 +1,99 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Highlight } from "prism-react-renderer";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-yaml.js";
+import "prismjs/components/prism-bash.js";
+import "prismjs/components/prism-sql.js";
+
+//#region src/components/content/PrismCode/PrismCode.tsx
+const PreElement = tasty({
+	as: "pre",
+	qa: "CodeBlock",
+	styleProps: CONTAINER_STYLES.concat([]),
+	className: "cube-prism-code",
+	styles: {
+		margin: 0,
+		padding: 0,
+		overflow: "auto",
+		scrollbar: "styled",
+		Code: { display: "block" }
+	}
+});
+function isDiffCode(code) {
+	const lines = code.split("\n");
+	const additionPattern = /^\+/;
+	const deletionPattern = /^-+/;
+	const headerPattern = /^(diff --git|---|\+\+\+)/;
+	for (const line of lines) if (additionPattern.test(line) || deletionPattern.test(line) || headerPattern.test(line)) return true;
+	return false;
+}
+function PrismCode(props, ref) {
+	let { code = "", language = "javascript", ...otherProps } = props;
+	if (!code) code = "";
+	if (typeof code !== "string" && code) throw new Error("UIKit: code prop should be a string in PrismCode. Found: " + typeof code);
+	const isDiff = isDiffCode(code || "");
+	const grammarLang = isDiff ? `diff-${language}` : language;
+	if (isDiff && !RendererPrism.languages[grammarLang]) RendererPrism.languages[grammarLang] = RendererPrism.languages.diff;
+	if (language === "yaml" || grammarLang === "diff-yaml") ensureYamlSqlExtensions();
+	return /* @__PURE__ */ jsx(PreElement, {
+		ref,
+		...otherProps,
+		children: /* @__PURE__ */ jsx(Highlight, {
+			prism: RendererPrism,
+			code,
+			language: grammarLang,
+			children: ({ className, style, tokens, getLineProps, getTokenProps }) => {
+				return /* @__PURE__ */ jsx("code", {
+					"data-element": "Code",
+					className: `${className}${isDiff ? " diff-highlight" : ""}`,
+					style: {
+						...style,
+						color: void 0,
+						backgroundColor: void 0
+					},
+					children: tokens.map((line, i) => {
+						const { key: _lineKey, ...lineProps } = getLineProps({
+							line,
+							key: i
+						});
+						return /* @__PURE__ */ jsxs("span", {
+							...lineProps,
+							style: {
+								...lineProps.style,
+								color: void 0
+							},
+							children: [line.map((token, key) => {
+								const { key: _tokenKey, ...tokenProps } = getTokenProps({
+									token,
+									key
+								});
+								return /* @__PURE__ */ jsx("span", {
+									...tokenProps,
+									style: {
+										...tokenProps.style,
+										color: void 0,
+										backgroundColor: void 0
+									}
+								}, key);
+							}), "\n"]
+						}, i);
+					})
+				});
+			}
+		})
+	});
+}
+/**
+* Code block with syntax highlighting
+*/
+const _PrismCode = forwardRef(PrismCode);
+_PrismCode.displayName = "PrismCode";
+
+//#endregion
+export { _PrismCode };
+//# sourceMappingURL=PrismCode.js.map

package/dist/components/content/PrismCode/PrismCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismCode.js","names":["Prism"],"sources":["../../../../src/components/content/PrismCode/PrismCode.tsx"],"sourcesContent":["import { Highlight } from 'prism-react-renderer';\nimport { forwardRef } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\n\nimport { ensureYamlSqlExtensions, Prism } from './prismSetup';\n\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-yaml.js';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-sql.js';\n\nconst PreElement = tasty({\n  as: 'pre',\n  qa: 'CodeBlock',\n  styleProps: CONTAINER_STYLES.concat([]),\n  className: 'cube-prism-code',\n  styles: {\n    margin: 0,\n    padding: 0,\n    overflow: 'auto',\n    scrollbar: 'styled',\n\n    Code: {\n      display: 'block',\n    },\n  },\n});\n\nexport interface CubePrismCodeProps extends ContainerStyleProps {\n  /** The CSS style map */\n  style?: BaseProps['style'];\n  styles?: Styles;\n  /** The code snippet */\n  code?: string;\n  /** The language of the code snippet */\n  language?:\n    | 'javascript'\n    | 'css'\n    | 'sql'\n    | 'less'\n    | 'html'\n    | 'json'\n    | 'yaml'\n    | 'bash'\n    | 'editorconfig'\n    | 'php'\n    | 'python'\n    | 'typescript';\n}\n\nfunction isDiffCode(code: string): boolean {\n  // Split the code into lines\n  const lines = code.split('\\n');\n\n  // Define patterns to check for diff characteristics\n  const additionPattern = /^\\+/; // Lines starting with '+'\n  const deletionPattern = /^-+/; // Lines starting with '-'\n  const headerPattern = /^(diff --git|---|\\+\\+\\+)/; // Diff headers\n\n  // Check each line for diff-specific patterns\n  for (const line of lines) {\n    if (\n      additionPattern.test(line) ||\n      deletionPattern.test(line) ||\n      headerPattern.test(line)\n    ) {\n      return true; // Code matches a diff pattern\n    }\n  }\n\n  // No diff-specific patterns found\n  return false;\n}\n\nfunction PrismCode(props: CubePrismCodeProps, ref) {\n  let { code = '', language = 'javascript', ...otherProps } = props;\n\n  if (!code) {\n    code = '';\n  }\n\n  if (typeof code !== 'string' && code) {\n    throw new Error(\n      'UIKit: code prop should be a string in PrismCode. Found: ' + typeof code,\n    );\n  }\n\n  const isDiff = isDiffCode(code || '');\n\n  const grammarLang = isDiff ? `diff-${language}` : language;\n\n  // Ensure the diff language exists before rendering\n  if (isDiff && !Prism.languages[grammarLang]) {\n    Prism.languages[grammarLang] = Prism.languages.diff;\n  }\n\n  // Ensure YAML SQL extensions are applied for YAML content\n  if (language === 'yaml' || grammarLang === 'diff-yaml') {\n    ensureYamlSqlExtensions();\n  }\n\n  return (\n    <PreElement ref={ref} {...otherProps}>\n      <Highlight prism={Prism} code={code} language={grammarLang as any}>\n        {({ className, style, tokens, getLineProps, getTokenProps }) => {\n          return (\n            <code\n              data-element=\"Code\"\n              className={`${className}${isDiff ? ' diff-highlight' : ''}`}\n              style={{\n                ...style,\n                color: undefined,\n                backgroundColor: undefined,\n              }}\n            >\n              {tokens.map((line, i) => {\n                const { key: _lineKey, ...lineProps } = getLineProps({\n                  line,\n                  key: i,\n                });\n\n                return (\n                  <span\n                    key={i}\n                    {...lineProps}\n                    style={{\n                      ...lineProps.style,\n                      color: undefined,\n                    }}\n                  >\n                    {line.map((token, key) => {\n                      const { key: _tokenKey, ...tokenProps } = getTokenProps({\n                        token,\n                        key,\n                      });\n\n                      return (\n                        <span\n                          key={key}\n                          {...tokenProps}\n                          style={{\n                            ...tokenProps.style,\n                            color: undefined,\n                            backgroundColor: undefined,\n                          }}\n                        />\n                      );\n                    })}\n                    {'\\n'}\n                  </span>\n                );\n              })}\n            </code>\n          );\n        }}\n      </Highlight>\n    </PreElement>\n  );\n}\n\n/**\n * Code block with syntax highlighting\n */\nconst _PrismCode = forwardRef(PrismCode);\n\n_PrismCode.displayName = 'PrismCode';\n\nexport { _PrismCode as PrismCode };\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,aAAa,MAAM;CACvB,IAAI;CACJ,IAAI;CACJ,YAAY,iBAAiB,OAAO,EAAE,CAAC;CACvC,WAAW;CACX,QAAQ;EACN,QAAQ;EACR,SAAS;EACT,UAAU;EACV,WAAW;EAEX,MAAM,EACJ,SAAS,SACV;EACF;CACF,CAAC;AAwBF,SAAS,WAAW,MAAuB;CAEzC,MAAM,QAAQ,KAAK,MAAM,KAAK;CAG9B,MAAM,kBAAkB;CACxB,MAAM,kBAAkB;CACxB,MAAM,gBAAgB;AAGtB,MAAK,MAAM,QAAQ,MACjB,KACE,gBAAgB,KAAK,KAAK,IAC1B,gBAAgB,KAAK,KAAK,IAC1B,cAAc,KAAK,KAAK,CAExB,QAAO;AAKX,QAAO;;AAGT,SAAS,UAAU,OAA2B,KAAK;CACjD,IAAI,EAAE,OAAO,IAAI,WAAW,cAAc,GAAG,eAAe;AAE5D,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,SAAS,YAAY,KAC9B,OAAM,IAAI,MACR,8DAA8D,OAAO,KACtE;CAGH,MAAM,SAAS,WAAW,QAAQ,GAAG;CAErC,MAAM,cAAc,SAAS,QAAQ,aAAa;AAGlD,KAAI,UAAU,CAACA,cAAM,UAAU,aAC7B,eAAM,UAAU,eAAeA,cAAM,UAAU;AAIjD,KAAI,aAAa,UAAU,gBAAgB,YACzC,0BAAyB;AAG3B,QACE,oBAAC;EAAgB;EAAK,GAAI;YACxB,oBAAC;GAAU,OAAOA;GAAa;GAAM,UAAU;cAC3C,EAAE,WAAW,OAAO,QAAQ,cAAc,oBAAoB;AAC9D,WACE,oBAAC;KACC,gBAAa;KACb,WAAW,GAAG,YAAY,SAAS,oBAAoB;KACvD,OAAO;MACL,GAAG;MACH,OAAO;MACP,iBAAiB;MAClB;eAEA,OAAO,KAAK,MAAM,MAAM;MACvB,MAAM,EAAE,KAAK,UAAU,GAAG,cAAc,aAAa;OACnD;OACA,KAAK;OACN,CAAC;AAEF,aACE,qBAAC;OAEC,GAAI;OACJ,OAAO;QACL,GAAG,UAAU;QACb,OAAO;QACR;kBAEA,KAAK,KAAK,OAAO,QAAQ;QACxB,MAAM,EAAE,KAAK,WAAW,GAAG,eAAe,cAAc;SACtD;SACA;SACD,CAAC;AAEF,eACE,oBAAC;SAEC,GAAI;SACJ,OAAO;UACL,GAAG,WAAW;UACd,OAAO;UACP,iBAAiB;UAClB;WANI,IAOL;SAEJ,EACD;SAzBI,EA0BA;OAET;MACG;;IAGD;GACD;;;;;AAOjB,MAAM,aAAa,WAAW,UAAU;AAExC,WAAW,cAAc"}