@bioturing/components 0.37.1 → 0.39.0

package/dist/components/window-portal/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/components/window-portal/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { WindowPortalProps } from \"./types\";\n\n/**\n * WindowPortal - Renders content in a separate browser window\n *\n * This component creates a new browser window and renders its children inside it.\n * It automatically copies parent window styles for consistent theming and handles\n * cleanup when the component unmounts or the window is closed.\n *\n * **Performance Note**: Rapid state updates (e.g., text input) may have slight latency\n * due to React reconciliation across different window contexts. This is expected behavior\n * when using portals across window boundaries.\n *\n * **Theme Synchronization**: The component automatically syncs theme changes (light/dark mode)\n * from the parent window to the popup window using a MutationObserver.\n *\n * @example\n * ```tsx\n * <WindowPortal width={800} height={600} title=\"My Window\">\n *   <div>Content rendered in separate window</div>\n * </WindowPortal>\n * ```\n */\nexport function WindowPortal({\n  children,\n  width = 600,\n  height = 400,\n  left = 200,\n  top = 200,\n  title = \"\",\n  copyStyles = true,\n  onClose,\n  windowFeatures = {},\n}: WindowPortalProps) {\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n  const newWindow = useRef<Window | null>(null);\n  const [windowReady, setWindowReady] = useState(false);\n\n  // Function to copy styles from parent to popup window\n  const copyStylesToWindow = useCallback((win: Window) => {\n    if (!win || win.closed) return;\n\n    // Clear existing styles in popup window\n    const existingStyles = win.document.head.querySelectorAll(\"style, link[rel='stylesheet']\");\n    existingStyles.forEach((style) => style.remove());\n\n    // Copy all stylesheets\n    Array.from(document.styleSheets).forEach((stylesheet) => {\n      try {\n        // Try to copy via cssRules (for same-origin stylesheets)\n        if (stylesheet.cssRules) {\n          const newStyleElement = win.document.createElement(\"style\");\n          Array.from(stylesheet.cssRules).forEach((rule) => {\n            newStyleElement.appendChild(\n              win.document.createTextNode(rule.cssText)\n            );\n          });\n          win.document.head.appendChild(newStyleElement);\n        }\n      } catch (e) {\n        // If cssRules is not accessible (CORS), copy via link element\n        if (stylesheet.href) {\n          const link = win.document.createElement(\"link\");\n          link.rel = \"stylesheet\";\n          link.href = stylesheet.href;\n          win.document.head.appendChild(link);\n        }\n      }\n    });\n\n    // Copy inline style elements\n    Array.from(document.querySelectorAll(\"style\")).forEach((style) => {\n      const newStyle = win.document.createElement(\"style\");\n      newStyle.textContent = style.textContent;\n      win.document.head.appendChild(newStyle);\n    });\n  }, []);\n\n  useEffect(() => {\n    // Create container element on client-side\n    const div = document.createElement(\"div\");\n    setContainer(div);\n  }, []);\n\n  useEffect(() => {\n    // When container is ready\n    if (!container) return;\n\n    // Only create the window once - don't recreate on every render\n    if (newWindow.current && !newWindow.current.closed) {\n      return;\n    }\n\n    // Build window features string\n    const {\n      resizable = true,\n      scrollbars = true,\n      toolbar = false,\n      menubar = false,\n      location = false,\n      status = false,\n    } = windowFeatures;\n\n    const features = [\n      `width=${width}`,\n      `height=${height}`,\n      `left=${left}`,\n      `top=${top}`,\n      `resizable=${resizable ? \"yes\" : \"no\"}`,\n      `scrollbars=${scrollbars ? \"yes\" : \"no\"}`,\n      `toolbar=${toolbar ? \"yes\" : \"no\"}`,\n      `menubar=${menubar ? \"yes\" : \"no\"}`,\n      `location=${location ? \"yes\" : \"no\"}`,\n      `status=${status ? \"yes\" : \"no\"}`,\n    ].join(\",\");\n\n    // Create window\n    const win = window.open(\"\", \"\", features);\n\n    if (!win) {\n      console.warn(\n        \"WindowPortal: Failed to open new window. It may have been blocked by a popup blocker.\"\n      );\n      return;\n    }\n\n    newWindow.current = win;\n\n    // Set initial window title\n    if (title) {\n      win.document.title = title;\n    }\n\n    // Copy styles from parent window\n    if (copyStyles) {\n      copyStylesToWindow(win);\n\n      // Copy theme classes from html element to maintain dark/light mode\n      const htmlClasses = document.documentElement.className;\n      if (htmlClasses) {\n        win.document.documentElement.className = htmlClasses;\n      }\n\n      // Copy data attributes from html element (for theme)\n      Array.from(document.documentElement.attributes).forEach((attr) => {\n        if (attr.name.startsWith(\"data-\")) {\n          win.document.documentElement.setAttribute(attr.name, attr.value);\n        }\n      });\n\n      // Also copy body classes and attributes\n      const bodyClasses = document.body.className;\n      if (bodyClasses) {\n        win.document.body.className = bodyClasses;\n      }\n\n      Array.from(document.body.attributes).forEach((attr) => {\n        if (attr.name.startsWith(\"data-\")) {\n          win.document.body.setAttribute(attr.name, attr.value);\n        }\n      });\n    }\n\n    // Append container to new window's body\n    win.document.body.appendChild(container);\n\n    // Mark window as ready for theme sync\n    setWindowReady(true);\n\n    // Set up cleanup handler\n    const handleClose = () => {\n      if (onClose) {\n        onClose();\n      }\n    };\n\n    // Poll for window closure (since 'beforeunload' doesn't always work reliably)\n    const checkClosed = setInterval(() => {\n      if (win.closed) {\n        clearInterval(checkClosed);\n        handleClose();\n      }\n    }, 500);\n\n    // Return cleanup function\n    return () => {\n      clearInterval(checkClosed);\n      setWindowReady(false);\n      if (win && !win.closed) {\n        win.close();\n      }\n    };\n    // Only depend on container - window should only be created once\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container]);\n\n  // Update window title when it changes\n  useEffect(() => {\n    if (newWindow.current && !newWindow.current.closed) {\n      newWindow.current.document.title = title;\n    }\n  }, [title]);\n\n  // Sync theme changes from parent to popup window\n  useEffect(() => {\n    if (!copyStyles || !windowReady || !newWindow.current || newWindow.current.closed) {\n      return;\n    }\n\n    const win = newWindow.current;\n\n    // Create a MutationObserver to watch for class and data attribute changes on html element\n    // Theme classes (light/dark) are applied to the html element in this design system\n    const observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (mutation.type === \"attributes\") {\n          const attrName = mutation.attributeName;\n          if (!attrName) return;\n\n          // Sync class changes from html element (this is where theme classes are applied)\n          if (attrName === \"class\") {\n            win.document.documentElement.className = document.documentElement.className;\n\n            // Re-copy all styles to get the updated theme-specific CSS\n            // This ensures CSS variables and theme-specific rules are updated\n            copyStylesToWindow(win);\n          }\n          // Sync data attributes (for theme)\n          else if (attrName.startsWith(\"data-\")) {\n            const value = document.documentElement.getAttribute(attrName);\n            if (value !== null) {\n              win.document.documentElement.setAttribute(attrName, value);\n            } else {\n              win.document.documentElement.removeAttribute(attrName);\n            }\n          }\n        }\n      });\n    });\n\n    // Collect all data-* attributes to watch\n    const allDataAttrs = Array.from(document.documentElement.attributes)\n      .filter((attr) => attr.name.startsWith(\"data-\"))\n      .map((attr) => attr.name);\n\n    // Observe the parent window's html element for attribute changes\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", ...allDataAttrs],\n      attributeOldValue: false,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [copyStyles, copyStylesToWindow, windowReady]);\n\n  return container ? createPortal(children, container) : null;\n}\n"],"names":["WindowPortal","children","width","height","left","top","title","copyStyles","onClose","windowFeatures","container","setContainer","useState","newWindow","useRef","windowReady","setWindowReady","copyStylesToWindow","useCallback","win","style","stylesheet","newStyleElement","rule","link","newStyle","useEffect","div","resizable","scrollbars","toolbar","menubar","location","status","features","htmlClasses","attr","bodyClasses","handleClose","checkClosed","observer","mutations","mutation","attrName","value","allDataAttrs","createPortal"],"mappings":"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"}

package/dist/components/window-portal/index.d.ts

@@ -0,0 +1,3 @@
+export { WindowPortal } from './component';
+export type { WindowPortalProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/window-portal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/window-portal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/window-portal/types.d.ts

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+export interface WindowPortalProps {
+    /**
+     * Content to render in the new window
+     */
+    children: ReactNode;
+    /**
+     * Width of the new window in pixels
+     * @default 600
+     */
+    width?: number;
+    /**
+     * Height of the new window in pixels
+     * @default 400
+     */
+    height?: number;
+    /**
+     * Left position of the new window in pixels from the screen's left edge
+     * @default 200
+     */
+    left?: number;
+    /**
+     * Top position of the new window in pixels from the screen's top edge
+     * @default 200
+     */
+    top?: number;
+    /**
+     * Title of the new window
+     * @default ""
+     */
+    title?: string;
+    /**
+     * Whether to copy parent window's stylesheets to the new window
+     * @default true
+     */
+    copyStyles?: boolean;
+    /**
+     * Callback fired when the window is closed
+     */
+    onClose?: () => void;
+    /**
+     * Native window features configuration
+     */
+    windowFeatures?: {
+        /**
+         * Whether the window should be resizable
+         * @default true
+         */
+        resizable?: boolean;
+        /**
+         * Whether to show scrollbars
+         * @default true
+         */
+        scrollbars?: boolean;
+        /**
+         * Whether to show the toolbar
+         * @default false
+         */
+        toolbar?: boolean;
+        /**
+         * Whether to show the menubar
+         * @default false
+         */
+        menubar?: boolean;
+        /**
+         * Whether to show the location bar
+         * @default false
+         */
+        location?: boolean;
+        /**
+         * Whether to show the status bar
+         * @default false
+         */
+        status?: boolean;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/window-portal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/window-portal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE;QACf;;;WAGG;QACH,SAAS,CAAC,EAAE,OAAO,CAAC;QAEpB;;;WAGG;QACH,UAAU,CAAC,EAAE,OAAO,CAAC;QAErB;;;WAGG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAElB;;;WAGG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAElB;;;WAGG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QAEnB;;;WAGG;QACH,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;CACH"}

package/dist/index.js

@@ -1,6 +1,6 @@
 import { componentMetadata as r, getComponentsByCategory as t } from "./metadata.js";
 import { default as m } from "./components/utils/createSyntheticClickEvent.js";
-import { Affix as f, Alert as x, Anchor as s, App as l, AutoComplete as n, Avatar as i, BackTop as C, Calendar as c, Card as u, Carousel as T, Cascader as d, Col as g, ColorPicker as S, ConfigProvider as h, DatePicker as A, Descriptions as E, Divider as P, Drawer as b, Dropdown as R, Flex as k, FloatButton as D, Grid as I, InputNumber as L, Layout as O, List as B, Mentions as v, Menu as y, Pagination as N, Popconfirm as M, Progress as _, QRCode as w, Rate as U, Result as F, Row as W, Skeleton as V, Space as K, Statistic as q, Steps as z, Tabs as G, TimePicker as Q, Timeline as H, Transfer as j, TreeSelect as J, Typography as X, Watermark as Y, message as Z, notification as $, theme as ee, unstableSetRender as oe, version as re } from "antd";
+import { Affix as f, Alert as x, Anchor as s, App as l, AutoComplete as n, Avatar as i, BackTop as C, Calendar as c, Card as u, Carousel as T, Cascader as d, Col as g, ColorPicker as S, ConfigProvider as h, DatePicker as A, Descriptions as E, Divider as P, Drawer as b, Dropdown as R, Flex as k, FloatButton as D, Grid as I, InputNumber as L, Layout as O, List as B, Mentions as v, Menu as y, Pagination as N, Popconfirm as M, Progress as w, QRCode as _, Rate as U, Result as W, Row as F, Skeleton as V, Space as K, Statistic as q, Steps as z, Tabs as G, TimePicker as Q, Timeline as H, Transfer as j, TreeSelect as J, Typography as X, Watermark as Y, message as Z, notification as $, theme as ee, unstableSetRender as oe, version as re } from "antd";
 import { DataTable as ae } from "./components/data-table/component.js";
 import { Select as pe } from "./components/select/component.js";
 import { Modal as xe } from "./components/modal/index.js";
@@ -16,9 +16,9 @@ import { ThemeContext as ke, useTheme as De } from "./components/theme-provider/
 import { ThemeContextProvider as Le } from "./components/theme-provider/context/provider.js";
 import { Split as Be, Splitter as ve } from "./components/splitter/component.js";
 import { Truncate as Ne } from "./components/truncate/component.js";
-import { DropdownMenu as _e } from "./components/dropdown-menu/component.js";
+import { DropdownMenu as we } from "./components/dropdown-menu/component.js";
 import { DropdownMenuItem as Ue } from "./components/dropdown-menu/item.js";
-import { CommandPalette as We } from "./components/command-palette/component.js";
+import { CommandPalette as Fe } from "./components/command-palette/component.js";
 import { KeyboardShortcut as Ke } from "./components/keyboard-shortcut/component.js";
 import { Transition as ze } from "./components/transition/component.js";
 import { DefaultUpload as Qe, Upload as He } from "./components/upload/component.js";
@@ -39,9 +39,9 @@ import { ScrollArea as Io } from "./components/scroll-area/component.js";
 import { Popover as Oo } from "./components/popover/component.js";
 import { Slider as vo } from "./components/slider/component.js";
 import { Tooltip as No } from "./components/tooltip/component.js";
-import { Breadcrumb as _o } from "./components/breadcrumb/component.js";
+import { Breadcrumb as wo } from "./components/breadcrumb/component.js";
 import { BreadcrumbItem as Uo } from "./components/breadcrumb/item.js";
-import { useUniqueKeysTree as Wo } from "./components/tree/useUniqueKeysTree.js";
+import { useUniqueKeysTree as Fo } from "./components/tree/useUniqueKeysTree.js";
 import { getUniqueKeysFromOriginals as Ko, processTreeData as qo } from "./components/tree/helpers.js";
 import { Tree as Go } from "./components/tree/components.js";
 import { Spin as Ho } from "./components/spin/component.js";
@@ -64,32 +64,33 @@ import { Button as Dr } from "./components/button/component.js";
 import { DSRoot as Lr } from "./components/ds-root/component.js";
 import { useDS as Br } from "./components/ds-root/hook.js";
 import { DragDrop as yr, DragDropRoot as Nr } from "./components/drag-drop/index.js";
-import { ColorSelect as _r } from "./components/color-select/component.js";
+import { ColorSelect as wr } from "./components/color-select/component.js";
 import { Nav as Ur } from "./components/nav/index.js";
-import { ChoiceList as Wr } from "./components/choice-list/component.js";
+import { ChoiceList as Fr } from "./components/choice-list/component.js";
 import { StatusIcon as Kr } from "./components/status-icon/component.js";
 import { Resizable as zr } from "./components/resizable/component.js";
 import { Combobox as Qr } from "./components/combobox/component.js";
 import { SelectTrigger as jr, SelectTriggerArrow as Jr, SelectTriggerClear as Xr, SelectTriggerContent as Yr, SelectTriggerRoot as Zr } from "./components/select-trigger/component.js";
 import { Loader as et } from "./components/loader/component.js";
-import { useForm as rt, useWatch as tt } from "antd/es/form/Form";
-import { useMessage as mt, useModal as pt, useToken as ft } from "./components/hooks/antd.js";
-import { default as st } from "antd/es/app/useApp";
-import { useAnimationsFinished as nt, useEnhancedEffect as it, useEventCallback as Ct, useLatestRef as ct } from "./components/hooks/base-ui.js";
-import { useControlledState as Tt } from "./components/hooks/useControlledState.js";
-import { useCharts as gt } from "./components/hooks/useCharts.js";
-import { useCSSVariables as ht } from "./components/hooks/useCSSVariables.js";
-import { useHover as Et } from "./components/hooks/useHover.js";
-import { useDraggable as bt } from "./components/hooks/useDraggable.js";
-import { BREAKPOINTS as kt, useBreakpoint as Dt } from "./components/hooks/useBreakpoint.js";
-import { useWindowSize as Lt } from "./components/hooks/useWindowSize.js";
-import { useElementSize as Bt, useResizeObserver as vt } from "./components/hooks/useResizeObserver.js";
-import { antdColorTokens as Nt, darkTheme as Mt, lightTheme as _t } from "./tokens/and-theme/tokens.js";
-import { categoricalChartColorKeys as Ut, categoricalChartColorTokens as Ft, categoricalChartsColors as Wt, chartColorTokens as Vt, rawChartColorTokens as Kt } from "./tokens/charts/palettes/cloudscape.js";
-import { COLORBREWER as zt } from "./tokens/charts/palettes/colorbrewer.js";
-import { tab10 as Qt, tab20 as Ht, tab20b as jt, tab20c as Jt } from "./tokens/charts/palettes/tableau.js";
-import { CATEGORICAL_PALETTES as Yt, CATEGORICAL_PALETTE_NAMES as Zt, SEQUENTIAL_PALETTES as $t, SEQUENTIAL_PALETTE_NAMES as ea, getAllCategoricalChartColors as oa, getAllSequentialChartColors as ra, getCategoricalChartColors as ta, getSequentialChartColors as aa } from "./tokens/charts/palettes/index.js";
-import { getColorsByTheme as pa, getTokensByTheme as fa, resolveColorTokens as xa } from "./tokens/utils.js";
+import { WindowPortal as rt } from "./components/window-portal/component.js";
+import { useForm as at, useWatch as mt } from "antd/es/form/Form";
+import { useMessage as ft, useModal as xt, useToken as st } from "./components/hooks/antd.js";
+import { default as nt } from "antd/es/app/useApp";
+import { useAnimationsFinished as Ct, useEnhancedEffect as ct, useEventCallback as ut, useLatestRef as Tt } from "./components/hooks/base-ui.js";
+import { useControlledState as gt } from "./components/hooks/useControlledState.js";
+import { useCharts as ht } from "./components/hooks/useCharts.js";
+import { useCSSVariables as Et } from "./components/hooks/useCSSVariables.js";
+import { useHover as bt } from "./components/hooks/useHover.js";
+import { useDraggable as kt } from "./components/hooks/useDraggable.js";
+import { BREAKPOINTS as It, useBreakpoint as Lt } from "./components/hooks/useBreakpoint.js";
+import { useWindowSize as Bt } from "./components/hooks/useWindowSize.js";
+import { useElementSize as yt, useResizeObserver as Nt } from "./components/hooks/useResizeObserver.js";
+import { antdColorTokens as wt, darkTheme as _t, lightTheme as Ut } from "./tokens/and-theme/tokens.js";
+import { categoricalChartColorKeys as Ft, categoricalChartColorTokens as Vt, categoricalChartsColors as Kt, chartColorTokens as qt, rawChartColorTokens as zt } from "./tokens/charts/palettes/cloudscape.js";
+import { COLORBREWER as Qt } from "./tokens/charts/palettes/colorbrewer.js";
+import { tab10 as jt, tab20 as Jt, tab20b as Xt, tab20c as Yt } from "./tokens/charts/palettes/tableau.js";
+import { CATEGORICAL_PALETTES as $t, CATEGORICAL_PALETTE_NAMES as ea, SEQUENTIAL_PALETTES as oa, SEQUENTIAL_PALETTE_NAMES as ra, getAllCategoricalChartColors as ta, getAllSequentialChartColors as aa, getCategoricalChartColors as ma, getSequentialChartColors as pa } from "./tokens/charts/palettes/index.js";
+import { getColorsByTheme as xa, getTokensByTheme as sa, resolveColorTokens as la } from "./tokens/utils.js";
 export {
   f as Affix,
   x as Alert,
@@ -97,28 +98,28 @@ export {
   l as App,
   n as AutoComplete,
   i as Avatar,
-  kt as BREAKPOINTS,
+  It as BREAKPOINTS,
   C as BackTop,
   Er as Badge,
-  _o as Breadcrumb,
+  wo as Breadcrumb,
   Uo as BreadcrumbItem,
   Dr as Button,
-  Yt as CATEGORICAL_PALETTES,
-  Zt as CATEGORICAL_PALETTE_NAMES,
-  zt as COLORBREWER,
+  $t as CATEGORICAL_PALETTES,
+  ea as CATEGORICAL_PALETTE_NAMES,
+  Qt as COLORBREWER,
   c as Calendar,
   u as Card,
   T as Carousel,
   d as Cascader,
   ce as Checkbox,
-  Wr as ChoiceList,
+  Fr as ChoiceList,
   ir as CodeBlock,
   g as Col,
   gr as Collapse,
   S as ColorPicker,
-  _r as ColorSelect,
+  wr as ColorSelect,
   Qr as Combobox,
-  We as CommandPalette,
+  Fe as CommandPalette,
   h as ConfigProvider,
   Eo as DROPDOWN_COLLISION_AVOIDANCE,
   Lr as DSRoot,
@@ -131,7 +132,7 @@ export {
   Nr as DragDropRoot,
   b as Drawer,
   R as Dropdown,
-  _e as DropdownMenu,
+  we as DropdownMenu,
   Ue as DropdownMenuItem,
   Jo as Empty,
   $o as Field,
@@ -156,15 +157,15 @@ export {
   M as Popconfirm,
   Oo as Popover,
   lr as PopupPanel,
-  _ as Progress,
-  w as QRCode,
+  w as Progress,
+  _ as QRCode,
   Rr as Radio,
   U as Rate,
   zr as Resizable,
-  F as Result,
-  W as Row,
-  $t as SEQUENTIAL_PALETTES,
-  ea as SEQUENTIAL_PALETTE_NAMES,
+  W as Result,
+  F as Row,
+  oa as SEQUENTIAL_PALETTES,
+  ra as SEQUENTIAL_PALETTE_NAMES,
   Io as ScrollArea,
   Te as Segmented,
   pe as Select,
@@ -206,75 +207,76 @@ export {
   He as Upload,
   xr as VerticalCollapsiblePanel,
   Y as Watermark,
+  rt as WindowPortal,
   fo as WithRenderProp,
-  Nt as antdColorTokens,
+  wt as antdColorTokens,
   Ro as buildAntdPlacement,
-  Ut as categoricalChartColorKeys,
-  Ft as categoricalChartColorTokens,
-  Wt as categoricalChartsColors,
+  Ft as categoricalChartColorKeys,
+  Vt as categoricalChartColorTokens,
+  Kt as categoricalChartsColors,
   go as changeThemeWithoutTransition,
-  Vt as chartColorTokens,
+  qt as chartColorTokens,
   Ye as clsx,
   Ze as cn,
   r as componentMetadata,
   m as createSyntheticClickEvent,
   $e as cx,
-  Mt as darkTheme,
-  oa as getAllCategoricalChartColors,
-  ra as getAllSequentialChartColors,
-  ta as getCategoricalChartColors,
-  pa as getColorsByTheme,
+  _t as darkTheme,
+  ta as getAllCategoricalChartColors,
+  aa as getAllSequentialChartColors,
+  ma as getCategoricalChartColors,
+  xa as getColorsByTheme,
   t as getComponentsByCategory,
   so as getReactElementProp,
-  aa as getSequentialChartColors,
-  fa as getTokensByTheme,
+  pa as getSequentialChartColors,
+  sa as getTokensByTheme,
   Ko as getUniqueKeysFromOriginals,
   to as isTracebackError,
   mo as isValidHexColor,
-  _t as lightTheme,
+  Ut as lightTheme,
   no as mergeRefs,
   Z as message,
   ho as moveTypingCursorToEnd,
   $ as notification,
   ko as parseAntdPlacement,
   qo as processTreeData,
-  Kt as rawChartColorTokens,
+  zt as rawChartColorTokens,
   oo as reactNodeToString,
-  xa as resolveColorTokens,
-  Qt as tab10,
-  Ht as tab20,
-  jt as tab20b,
-  Jt as tab20c,
+  la as resolveColorTokens,
+  jt as tab10,
+  Jt as tab20,
+  Xt as tab20b,
+  Yt as tab20c,
   ee as theme,
   mr as toast,
   pr as toastManager,
   oe as unstableSetRender,
-  nt as useAnimationsFinished,
+  Ct as useAnimationsFinished,
   Co as useAntdCssVarClassname,
-  st as useApp,
-  Dt as useBreakpoint,
-  ht as useCSSVariables,
-  gt as useCharts,
+  nt as useApp,
+  Lt as useBreakpoint,
+  Et as useCSSVariables,
+  ht as useCharts,
   co as useCls,
-  Tt as useControlledState,
+  gt as useControlledState,
   Br as useDS,
-  bt as useDraggable,
-  Bt as useElementSize,
-  it as useEnhancedEffect,
-  Ct as useEventCallback,
-  rt as useForm,
+  kt as useDraggable,
+  yt as useElementSize,
+  ct as useEnhancedEffect,
+  ut as useEventCallback,
+  at as useForm,
   uo as useGetPrefixCls,
-  Et as useHover,
-  ct as useLatestRef,
-  mt as useMessage,
-  pt as useModal,
-  vt as useResizeObserver,
+  bt as useHover,
+  Tt as useLatestRef,
+  ft as useMessage,
+  xt as useModal,
+  Nt as useResizeObserver,
   De as useTheme,
-  ft as useToken,
-  Wo as useUniqueKeysTree,
+  st as useToken,
+  Fo as useUniqueKeysTree,
   Je as useUploadItemRender,
-  tt as useWatch,
-  Lt as useWindowSize,
+  mt as useWatch,
+  Bt as useWindowSize,
   re as version
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/metadata.d.ts

@@ -447,6 +447,14 @@ export declare const componentMetadata: {
         originalDocUrl: string;
         description: string;
     };
+    WindowPortal: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Utility";
+        description: string;
+    };
 };
 /**
  * Get all components by category

package/dist/metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../src/metadata.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,UAAU,GACV,SAAS,GACT,SAAS,CAAC;AAEd,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsqBe,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,uBAAuB,QAAO,MAAM,CAC/C,iBAAiB,EACjB,iBAAiB,EAAE,CA0BpB,CAAC"}
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../src/metadata.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,UAAU,GACV,SAAS,GACT,SAAS,CAAC;AAEd,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyrBe,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,uBAAuB,QAAO,MAAM,CAC/C,iBAAiB,EACjB,iBAAiB,EAAE,CA0BpB,CAAC"}

package/dist/metadata.js

@@ -642,6 +642,24 @@ const i = {
     originalDocUrl: "https://base-ui.com/react/components/vertical-collapsible-panel",
     // Assuming this kebab-case name for Base UI docs
     description: "A panel that can be collapsed or expanded vertically, often used in sidebars or for sectioning content."
+  },
+  WindowPortal: {
+    name: "WindowPortal",
+    link: "/window-portal",
+    base: "custom",
+    refinements: [
+      "Custom implementation using React's `createPortal` to render content in a separate browser window.",
+      "Automatically copies parent window styles (stylesheets and inline styles) to the new window for consistent theming.",
+      "Real-time theme synchronization using MutationObserver to detect and sync theme changes (light/dark mode) from parent to popup window.",
+      "Configurable window dimensions (width, height) and position (left, top).",
+      "Customizable window title and native window features (resizable, scrollbars, toolbar, menubar, etc.).",
+      "Proper cleanup handling: closes window on component unmount and triggers `onClose` callback when window is closed.",
+      "State synchronization: React state naturally syncs between parent and popup windows via portal mechanism.",
+      "Uses `windowReady` state to ensure MutationObserver is only set up after window is fully created.",
+      "Performance note: Rapid state updates may have slight latency due to React reconciliation across window boundaries."
+    ],
+    category: "Utility",
+    description: "Renders React components in a separate browser window while maintaining state synchronization and theme consistency with the parent window."
   }
 }, a = () => {
   const e = {